/* Leo Mafia — 3D layer: depth, light, motion. Loaded after style.css and overrides it. */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --gold-deep: #7a5716; }

/* ---------- atmosphere ---------- */
#dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
body::before {
  content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 28% at 28% 12%, rgba(214, 170, 72, 0.16), transparent 70%),
    radial-gradient(34% 26% at 78% 24%, rgba(255, 240, 200, 0.06), transparent 70%);
  animation: drift 20s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(7%, 5%, 0) rotate(7deg); } }
main, .brand { position: relative; z-index: 1; }
main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

/* ---------- entrance choreography ---------- */
#view.enter > * { animation: rise .62s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 65ms); }
@keyframes rise {
  from { opacity: 0; transform: perspective(800px) translate3d(0, 28px, -50px) rotateX(-14deg); }
}
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.12) rotate(4deg); } }
@keyframes float { 50% { translate: 0 -7px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes tracking { from { letter-spacing: .9em; opacity: 0; } }
@keyframes sheen { 0%, 62% { left: -60%; } 100% { left: 130%; } }
@keyframes fill { from { width: 0; } }
@keyframes grow { from { transform: scaleY(.04); opacity: .2; } }
@keyframes liIn { from { opacity: 0; transform: translateX(-12px); } }
@keyframes skel { to { background-position: -120% 0; } }
@keyframes rip { to { transform: scale(1); opacity: 0; } }
@keyframes coin { to { transform: perspective(600px) rotateY(720deg); } }

/* ---------- 3D type ---------- */
h2 {
  background: linear-gradient(180deg, #fffaf0 0%, #efdcaa 48%, #c9a24a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)) drop-shadow(0 7px 10px rgba(0, 0, 0, .5));
}
.game-title { text-shadow: 0 1px 0 #000, 0 3px 10px rgba(0, 0, 0, .55); }
.hero h1, .wordmark {
  background: linear-gradient(110deg, #8a6420 0%, #d6aa48 28%, #fff3c4 44%, #d6aa48 58%, #8a6420 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5.5s linear infinite;
  filter: drop-shadow(0 1px 0 #5f430f) drop-shadow(0 3px 4px rgba(0, 0, 0, .75)); /* light depth for small text */
}
.hero h1 { /* deep extrusion only where the letters are big enough to carry it */
  animation: shimmer 5.5s linear infinite, tracking 1.2s var(--ease) backwards;
  filter: drop-shadow(0 1px 0 #6e4f12) drop-shadow(0 2px 0 #5f430f) drop-shadow(0 3px 0 #50390d)
          drop-shadow(0 4px 0 #42300b) drop-shadow(0 12px 14px rgba(0, 0, 0, .7));
}
.hero.compact h1 { filter: drop-shadow(0 1px 0 #5f430f) drop-shadow(0 2px 0 #4a350c) drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.stats .v { text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 8px 14px rgba(0, 0, 0, .5); }
.stats .v.gold, .list .num { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }

/* ---------- cards: real depth ---------- */
.card {
  background: linear-gradient(165deg, #232327 0%, #18181a 55%, #131315 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .65),
    0 1px 1px rgba(0, 0, 0, .5), 0 6px 12px rgba(0, 0, 0, .35),
    0 18px 36px -6px rgba(0, 0, 0, .55), 0 34px 60px -22px rgba(0, 0, 0, .65);
}
.card::after { /* light that follows your finger */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at var(--gx, 20%) var(--gy, 0%), rgba(255, 232, 170, .11), transparent 58%);
}
.card.tap, .pod, .crest.lg { --rx: 0deg; --ry: 0deg; }
.card.tap {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .4s var(--ease), box-shadow .3s, border-color .2s;
}
.card.tap.tilting { transition: transform .05s linear, box-shadow .3s, border-color .2s; }
.card.tap:active { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.985); }

/* ---------- physical buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 3px 0 #060607, 0 9px 16px rgba(0, 0, 0, .5);
  transition: transform .09s, box-shadow .09s, border-color .2s;
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 #060607, 0 3px 6px rgba(0, 0, 0, .5); }
.btn:disabled:active { transform: none; }
.btn.primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(90, 60, 10, .35),
              0 4px 0 var(--gold-deep), 0 12px 20px rgba(214, 170, 72, .32), 0 20px 30px rgba(0, 0, 0, .45);
}
.btn.primary:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(90, 60, 10, .3), 0 0 0 var(--gold-deep), 0 4px 8px rgba(214, 170, 72, .28); }
.btn.primary::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 38%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg); animation: sheen 4.8s ease-in-out infinite;
}
.btn.primary:disabled::after { display: none; }
.btn.outline { box-shadow: inset 0 1px 0 rgba(255, 235, 180, .12), 0 3px 0 #1c1508, 0 9px 16px rgba(0, 0, 0, .45); }
.btn.danger { box-shadow: none; }
.btn.danger:active { transform: none; }
.link { position: relative; }
.rip { position: absolute; border-radius: 50%; background: rgba(255, 236, 180, .38); transform: scale(0); animation: rip .6s ease-out forwards; pointer-events: none; }

/* ---------- coin crest ---------- */
.crest {
  background: radial-gradient(circle at 32% 24%, #34343a 0%, #17171b 55%, #0b0b0d 100%); border: 0;
  box-shadow: 0 0 0 2px #19191c, 0 0 0 4px var(--gold-lo), 0 0 0 5px #f5daa0,
              inset 0 2px 5px rgba(255, 255, 255, .13), inset 0 -6px 10px rgba(0, 0, 0, .6), 0 8px 14px rgba(0, 0, 0, .6);
}
.crest img { display: block; width: 64%; height: 64%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(214, 170, 72, .18)); }
.crest.sm { width: 32px; height: 32px; }
.crest.sm img { width: 74%; height: 74%; filter: brightness(1.4) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.crest.lg img { width: 78%; height: 78%; filter: brightness(1.35) contrast(1.05) drop-shadow(0 6px 6px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(214, 170, 72, .28)); }
.crest.lg {
  position: relative; width: 112px; height: 112px; cursor: pointer;
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry));
  animation: float 5s ease-in-out infinite; transition: transform .4s var(--ease);
  box-shadow: 0 0 0 3px #19191c, 0 0 0 6px var(--gold-lo), 0 0 0 7px #f5daa0,
              inset 0 3px 7px rgba(255, 255, 255, .14), inset 0 -10px 16px rgba(0, 0, 0, .65),
              0 22px 34px rgba(0, 0, 0, .65), 0 0 70px rgba(214, 170, 72, .3);
}
.crest.lg.tilting { transition: transform .05s linear; }
.crest.lg::before { /* orbiting light */
  content: ""; position: absolute; inset: -16px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(246, 220, 150, .85) 76%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 6s linear infinite;
}
.crest.lg.spin { animation: float 5s ease-in-out infinite, coin 1s var(--ease); }
.crest.sm { box-shadow: 0 0 0 1px #19191c, 0 0 0 2px var(--gold-lo), 0 0 16px rgba(214, 170, 72, .35), 0 4px 8px rgba(0, 0, 0, .6); }

/* ---------- date badge = little 3D calendar ---------- */
.date {
  background: linear-gradient(180deg, #2a2a2f 0%, #151517 100%); border: 1px solid rgba(214, 170, 72, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -12px 18px rgba(0, 0, 0, .35),
              0 5px 0 -1px #08080a, 0 12px 18px rgba(0, 0, 0, .5);
  transform: perspective(260px) rotateX(7deg); transform-origin: 50% 100%;
}
.date .day { text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 14px rgba(214, 170, 72, .35); }

/* ---------- glossy seat meter ---------- */
.meter { height: 9px; background: #050506; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .07); }
.meter > div {
  position: relative; width: var(--w, 0%); border-radius: 5px;
  background: linear-gradient(180deg, #ffe9ab 0%, #d6aa48 45%, #8f6a1d 100%); box-shadow: 0 0 14px rgba(214, 170, 72, .6);
}
.meter > div::after { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 36%; border-radius: 4px; background: rgba(255, 255, 255, .42); }
.meter.full > div { background: linear-gradient(180deg, #d9d9dd 0%, #8d8d94 50%, #55555b 100%); box-shadow: none; }
#view.enter .meter > div { animation: fill 1.1s var(--ease) .3s backwards; }

/* ---------- metal ---------- */
.rank.r1, .rank.r2, .rank.r3 { box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -3px 3px rgba(0, 0, 0, .35), 0 3px 0 rgba(0, 0, 0, .5), 0 7px 10px rgba(0, 0, 0, .45); }
.rank.r1 { box-shadow: inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -3px 3px rgba(0, 0, 0, .3), 0 3px 0 #6b4c12, 0 0 18px rgba(214, 170, 72, .55); }
.avatar { box-shadow: inset 0 2px 2px rgba(255, 255, 255, .13), inset 0 -5px 7px rgba(0, 0, 0, .5), 0 4px 8px rgba(0, 0, 0, .5); }
.avatar.lg { box-shadow: inset 0 3px 3px rgba(255, 255, 255, .15), inset 0 -8px 12px rgba(0, 0, 0, .55), 0 0 0 4px rgba(214, 170, 72, .1), 0 12px 22px rgba(0, 0, 0, .55), 0 0 40px rgba(214, 170, 72, .22); }
.chip.gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #7a5716, 0 4px 8px rgba(0, 0, 0, .4); }

/* ---------- podium ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 8px; padding: 22px 2px 0; }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; min-width: 0; transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .4s var(--ease); }
.pod.tilting { transition: transform .05s linear; }
.pod .who { margin: 8px 0 1px; max-width: 100%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod.me .who { color: var(--gold-hi); }
.pod .pts { font: 700 19px/1.2 var(--serif); color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.pod .crown { width: 30px; height: 30px; margin-bottom: 4px; color: var(--gold); stroke-width: 1.5; filter: drop-shadow(0 0 9px rgba(214, 170, 72, .8)); animation: float 3s ease-in-out infinite; }
.pod .avatar { width: 52px; height: 52px; font-size: 20px; }
.pod.p1 .avatar { width: 64px; height: 64px; font-size: 25px; border-color: var(--gold); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .15), inset 0 -6px 8px rgba(0, 0, 0, .5), 0 0 26px rgba(214, 170, 72, .5), 0 8px 14px rgba(0, 0, 0, .5); }
.pod .block {
  position: relative; width: 100%; margin-top: 10px; display: grid; place-items: center; transform-origin: 50% 100%;
  font: 700 32px/1 var(--serif); color: rgba(26, 19, 5, .85); border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset -8px 0 12px rgba(0, 0, 0, .2), 0 16px 24px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.pod .block::before { /* lit top face */
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px;
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #fff6d0, #efce78);
}
.pod.p1 .block { height: 118px; background: linear-gradient(180deg, #f4d98a, #c9a24a 42%, #7d5a18); }
.pod.p2 .block { height: 86px; background: linear-gradient(180deg, #e9e9ee, #a3a3ab 45%, #62626a); }
.pod.p3 .block { height: 62px; background: linear-gradient(180deg, #e2b57a, #a26f34 45%, #684318); }
.pod.p2 .block::before { background: linear-gradient(180deg, #ffffff, #d4d4da); }
.pod.p3 .block::before { background: linear-gradient(180deg, #f3cf9c, #d09a58); }
#view.enter .pod .block { animation: grow .9s var(--ease) backwards; }
#view.enter .pod.p3 .block { animation-delay: .05s; }
#view.enter .pod.p2 .block { animation-delay: .2s; }
#view.enter .pod.p1 .block { animation-delay: .35s; }

/* ---------- tier & achievements ---------- */
.tier { display: flex; align-items: center; gap: 16px; }
.gems { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.gem { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: #202024; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 1px 0 rgba(0, 0, 0, .6); }
.gem.on { background: var(--gold-grad); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 0 10px rgba(214, 170, 72, .8); }
.tier .grow { flex: 1; min-width: 0; }
.tier-name { font: 700 19px/1.1 var(--serif); letter-spacing: .12em; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.badge3d { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; cursor: pointer; color: var(--dim); font-size: 10px; line-height: 1.2; }
.badge3d b { font-weight: 600; font-size: 10.5px; color: var(--muted); }
.badge3d.on b { color: var(--text); }
.medal {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #5f5f66;
  background: radial-gradient(circle at 30% 25%, #3b3b41, #1b1b1f 60%, #101012);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .08), inset 0 -4px 6px rgba(0, 0, 0, .55), 0 0 0 3px #0e0e10, 0 0 0 4px rgba(255, 255, 255, .07), 0 7px 12px rgba(0, 0, 0, .5);
}
.medal svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.badge3d.on .medal {
  color: #241905; background: radial-gradient(circle at 30% 25%, #ffeeb8, #d6aa48 46%, #7d5a18);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .65), inset 0 -4px 6px rgba(0, 0, 0, .35), 0 0 0 3px #17110a, 0 0 0 4px rgba(214, 170, 72, .7), 0 0 20px rgba(214, 170, 72, .35), 0 8px 14px rgba(0, 0, 0, .5);
}
#view.enter .badge3d.on .medal { animation: pop .65s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 80ms + .35s); }
.section-count { color: var(--muted); font: 600 11px var(--sans); letter-spacing: .1em; }

/* ---------- floating dock ---------- */
.tabs {
  left: 0; right: 0; width: calc(100% - 24px); max-width: 496px; margin: 0 auto;
  bottom: calc(10px + env(safe-area-inset-bottom)); padding: 0; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(214, 170, 72, .24);
  background: linear-gradient(180deg, rgba(38, 38, 43, .93), rgba(14, 14, 16, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 2px 0 rgba(0, 0, 0, .7), 0 20px 36px rgba(0, 0, 0, .7), 0 0 30px rgba(214, 170, 72, .08);
}
.tabs::before { /* sliding light */
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 25%; border-radius: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(214, 170, 72, .24), rgba(214, 170, 72, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 20px rgba(214, 170, 72, .28);
  transform: translateX(calc(var(--idx, 0) * 100%)); transition: transform .5s cubic-bezier(.3, 1.45, .5, 1);
}
.tabs button { max-width: none; position: relative; z-index: 1; padding: 11px 0 11px; }
.tabs button.active::before { display: none; }
.tabs svg { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), filter .3s; }
.tabs button.active svg { transform: translateY(-2px) scale(1.14); filter: drop-shadow(0 0 7px rgba(214, 170, 72, .8)); }

/* ---------- rules ---------- */
details.rule { transition: box-shadow .3s, border-color .3s; }
details.rule[open] { border-color: var(--line-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 36px -6px rgba(0, 0, 0, .55), 0 0 26px rgba(214, 170, 72, .1); }
details.rule[open] li { animation: liIn .5s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 45ms); }

/* ---------- loading skeleton, toast ---------- */
.skel { height: 112px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .05); background: linear-gradient(100deg, #151517 30%, #232327 50%, #151517 70%); background-size: 220% 100%; animation: skel 1.3s linear infinite; }
.skel.h { height: 54px; width: 58%; border-radius: 12px; }
.toast { box-shadow: 0 18px 34px rgba(0, 0, 0, .7), 0 0 26px rgba(214, 170, 72, .18); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  #dust { display: none; }
}

/* ---------- organiser panel: 2FA sheet, payments ---------- */
:root { --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sheet {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(3, 3, 4, .72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: fadeIn .25s both;
}
.sheet.hidden { display: none !important; }
.sheet-card {
  width: 100%; max-width: 520px; padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; border: 1px solid var(--line-gold); border-bottom: 0;
  background: linear-gradient(180deg, #252529, #141416);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .11); animation: sheetUp .5s var(--ease) both;
}
.sheet-card.shake { animation: sheetUp .5s var(--ease) both, shake .42s .05s; }
.sheet-grab { width: 44px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); margin: 0 auto 16px; }
.sheet-card form { margin: 16px 0 6px; }
.sheet-links { display: flex; justify-content: space-between; padding-top: 10px; }
input.code {
  text-align: center; font: 700 32px/1 var(--mono); letter-spacing: .32em; padding: 17px 8px 17px 20px;
  color: var(--gold-hi); margin-bottom: 8px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6);
}
input.code::placeholder { color: #3b3b41; letter-spacing: .3em; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

.iconbadge {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle at 30% 25%, #303036, #131315); border: 1px solid var(--line-gold);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .1), inset 0 -4px 6px rgba(0, 0, 0, .5), 0 6px 12px rgba(0, 0, 0, .5), 0 0 20px rgba(214, 170, 72, .18);
}
.iconbadge .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.btn .ico { width: 16px; height: 16px; margin-right: 4px; }
a.btn { display: block; text-decoration: none; color: var(--text); }

.keybox {
  font: 600 19px/1.6 var(--mono); letter-spacing: .12em; word-break: break-all; text-align: center; padding: 16px 10px;
  background: #0b0b0d; border: 1px dashed var(--line-gold); border-radius: 14px; color: var(--gold-hi); user-select: all; -webkit-user-select: all;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6);
}
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.codes div {
  font: 600 15px/1 var(--mono); letter-spacing: .08em; text-align: center; padding: 13px 4px; border-radius: 10px;
  background: #0b0b0d; border: 1px solid var(--line); color: var(--gold-hi); user-select: all; -webkit-user-select: all;
}

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; cursor: pointer; text-transform: none; letter-spacing: 0; font: 500 15px var(--sans); color: var(--text); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 50px; height: 30px; border-radius: 15px; background: #0b0b0d; border: 1px solid var(--line); transition: background .25s, border-color .25s; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7); flex: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #d5d5da, #8b8b92); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .25s; box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6); }
.switch input:checked + .track { background: rgba(214, 170, 72, .18); border-color: var(--gold); }
.switch input:checked + .track .knob { transform: translateX(20px); background: var(--gold-grad); }

.method { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.method:last-of-type { border-bottom: 0; }
.ico-box { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--gold); background: #0e0e10; border: 1px solid var(--line-gold); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.ico-box .ico { width: 20px; height: 20px; }
.method .det { font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: pre-wrap; word-break: break-all; margin-top: 3px; }
.method .sub { color: var(--dim); font-size: 11px; }

.pay-fee { display: flex; align-items: center; gap: 8px; font: 600 15px var(--sans); color: var(--gold-hi); margin-bottom: 12px; }
.pay-fee .ico { color: var(--gold); width: 18px; height: 18px; }
.paychoice { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; cursor: pointer; background: #101012; border: 1px solid var(--line); transition: border-color .2s, box-shadow .25s, transform .12s; }
.paychoice:active { transform: scale(.985); }
.paychoice .grow { min-width: 0; }
.paychoice .sub { color: var(--muted); font-size: 12px; }
.paychoice > .ico { color: var(--gold); }
.paychoice.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 24px rgba(214, 170, 72, .16); }
.paydetails { margin: 12px 0 8px; padding: 14px; border-radius: 14px; background: #0b0b0d; border: 1px dashed var(--line-gold); font: 600 15px/1.5 var(--mono); color: var(--gold-hi); white-space: pre-wrap; word-break: break-word; user-select: all; -webkit-user-select: all; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
.pay-wait { margin: 12px 0 10px; text-align: center; }
.banner .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.list .sub.paid { color: var(--gold); }
.list .item .btn.small { padding: 7px 10px; min-width: 36px; }
.list .item .btn.small .ico { margin: 0; }
.method .grow { flex: 1; min-width: 0; }
.method .btn { flex: none; }
.list .item .name .sub { white-space: normal; }

/* ---------- smooth screen-to-screen transitions ---------- */
#view { opacity: 1; transition: opacity 90ms ease-out; }
#view.leaving { opacity: 0; pointer-events: none; transition: opacity 70ms ease-in; }

/* ---------- results form: optional kills / correct-reads inputs ---------- */
.finish-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.finish-row:last-of-type { border-bottom: 0; }
.finish-row input[type="number"] { width: 52px; flex: none; text-align: center; padding: 13px 4px; }
.finish-row input[type="number"]::-webkit-inner-spin-button { opacity: 0.5; }