/* Fonts are self-hosted (SIL Open Font License): Lilita One, Nunito. */
@font-face { font-family: 'Lilita One'; src: url('/fonts/lilita-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --ink: #0a1030;
  --royal-950: #071233;
  --royal-900: #0c1c4a;
  --royal-800: #122a6b;
  --royal-700: #1a3d96;
  --royal-600: #2253b8;
  --royal-500: #2d66d0;
  --sky: #8fd0ff;
  --text: #f1f6ff;
  --muted: #b3c8f7;
  --gold-200: #fff0a0;
  --gold-400: #ffd03f;
  --gold-600: #f08c00;
  --gold-800: #a85a00;
  --green-300: #a6f36b;
  --green-500: #4fc22b;
  --green-700: #23831a;
  --red-300: #ff9a9a;
  --red-500: #ee3d55;
  --red-700: #9c1530;
  --elixir: #dd4bea;
  --display: 'Lilita One', 'Arial Black', 'Trebuchet MS', sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pop: cubic-bezier(.2, 1.5, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); background: var(--royal-950);
  font: 800 16px/1.45 var(--body); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow-x: clip;
}
[hidden] { display: none !important; }
a { color: var(--sky); }
p { margin: 0; }

/* ---------- arena backdrop ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% -8%, #5aa2ff 0%, rgba(58, 123, 240, .55) 38%, transparent 72%),
    linear-gradient(180deg, #1c49ad 0%, #12307c 42%, #0b1d52 75%, #071233 100%);
}
.sky::before { /* diamond floor tiles */
  content: ''; position: absolute; inset: -20% -20% 0; opacity: .55;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%),
    linear-gradient(45deg, rgba(0,0,0,.09) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.09) 75%);
  background-size: 64px 64px; background-position: 0 0, 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
.sky::after { /* light rays from above */
  content: ''; position: absolute; left: 50%; top: -60vmax; width: 200vmax; height: 200vmax; margin-left: -100vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.055) 0 5deg, transparent 5deg 14deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 62%); mask-image: radial-gradient(closest-side, #000 0%, transparent 62%);
  animation: rays 90s linear infinite;
}
.sky i { /* drifting sparks */
  position: absolute; bottom: -12px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff3b0; box-shadow: 0 0 10px 3px rgba(255, 208, 63, .55); opacity: 0;
  animation: spark 14s linear infinite;
}
.sky i:nth-child(1) { left: 8%;  animation-delay: 0s; }
.sky i:nth-child(2) { left: 22%; animation-delay: 5s;  animation-duration: 17s; width: 4px; height: 4px; }
.sky i:nth-child(3) { left: 37%; animation-delay: 9s;  animation-duration: 12s; }
.sky i:nth-child(4) { left: 51%; animation-delay: 2s;  animation-duration: 19s; width: 4px; height: 4px; }
.sky i:nth-child(5) { left: 64%; animation-delay: 7s; }
.sky i:nth-child(6) { left: 77%; animation-delay: 11s; animation-duration: 16s; width: 5px; height: 5px; }
.sky i:nth-child(7) { left: 89%; animation-delay: 4s;  animation-duration: 13s; }
.sky i:nth-child(8) { left: 95%; animation-delay: 13s; animation-duration: 18s; width: 4px; height: 4px; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes spark { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translate(40px, -105vh); opacity: 0; } }

/* ---------- display type ---------- */
.display, h1, h2, h3, .btn, .ribbon, .brand-name, .pill b {
  font-family: var(--display); font-weight: 400; letter-spacing: .02em;
}
.stroke { color: #fff; -webkit-text-stroke: .17em var(--ink); paint-order: stroke fill; text-shadow: 0 .11em 0 var(--ink); }
.gold-text { color: var(--gold-400); }
h1, h2, h3 { margin: 0; line-height: 1.05; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; overflow-wrap: anywhere; }
.center { text-align: center; }

.ico { width: 1.5em; height: 1.5em; flex: none; vertical-align: middle; overflow: visible; }
.ico.line { width: 1.15em; height: 1.15em; }

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px; width: 100%; max-width: 640px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.brand-mark { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 3px 0 rgba(4, 10, 32, .7)); }
.brand-name { font-size: 24px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.brand-name b { font-weight: 400; color: var(--gold-400); }
.hud { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 0; border-radius: 99px;
  background: rgba(5, 12, 40, .72); border: 2px solid rgba(0, 0, 0, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08);
  font-size: 14px; font-weight: 900; white-space: nowrap; color: #fff;
}
.pill .ico { width: 34px; height: 34px; margin: -3px 0 -3px -6px; }
.pill b { font-size: 16px; }
.pill.tag { padding: 0 11px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-200); border-color: rgba(255, 208, 63, .55); }
.pill.tag.mock { color: var(--sky); border-color: rgba(143, 208, 255, .55); border-style: dashed; }

/* ---------- layout ---------- */
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px 32px; display: flex; flex-direction: column; gap: 30px; }
.boot { margin: 18vh auto 0; text-align: center; color: var(--muted); }
.boot .spin { width: 72px; height: 72px; animation: wobble 1.2s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }

/* ---------- panels ---------- */
.panel {
  position: relative; border-radius: 22px; border: 3px solid var(--ink); padding: 26px 18px 20px;
  background: linear-gradient(180deg, #3672dc 0%, #2658be 55%, #1f4aa8 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -7px 0 rgba(0, 0, 0, .22), 0 7px 0 rgba(4, 10, 32, .92), 0 22px 34px rgba(0, 0, 0, .38);
}
.enter .panel { animation: rise .45s var(--pop) both; }
.panel.flat { padding-top: 18px; }
main > .panel:first-child:not(.flat) { margin-top: 18px; }
.scene + .panel { margin-top: 0; }
.panel > .ribbon + * { margin-top: 6px; }
.panel.dark { background: linear-gradient(180deg, #1b3a8c, #142c6e); }
@keyframes rise { from { transform: translateY(18px) scale(.97); opacity: 0; } }

.ribbon {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 5px 26px 6px; border-radius: 12px; border: 3px solid var(--ink); white-space: nowrap;
  background: linear-gradient(180deg, #ffe26b 0%, #ffc32d 50%, #f39a06 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 4px 0 var(--ink);
  font-size: 18px; color: #fff; -webkit-text-stroke: 4px #5a2f00; paint-order: stroke fill; text-shadow: 0 2px 0 #5a2f00;
}
.ribbon::before, .ribbon::after { /* folded ends */
  content: ''; position: absolute; top: 7px; width: 20px; height: 100%; z-index: -1;
  background: #b96800; border: 3px solid var(--ink);
}
.ribbon::before { left: -15px; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.ribbon::after { right: -15px; border-radius: 0 6px 6px 0; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.ribbon.blue { background: linear-gradient(180deg, #7fd0ff, #2f86f5 55%, #1c57c9); -webkit-text-stroke-color: var(--ink); text-shadow: 0 2px 0 var(--ink); }
.ribbon.blue::before, .ribbon.blue::after { background: #123a94; }
.ribbon.red { background: linear-gradient(180deg, #ff9a9a, #ee3d55 55%, #b81d39); -webkit-text-stroke-color: var(--ink); text-shadow: 0 2px 0 var(--ink); }
.ribbon.red::before, .ribbon.red::after { background: #7c0f25; }

.well {
  background: rgba(8, 20, 62, .62); border: 2px solid rgba(0, 0, 0, .4); border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); padding: 12px 14px;
}
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }
.grow { flex: 1; min-width: 0; }

/* ---------- buttons ---------- */
.btn {
  --a: #ffe26b; --b: #ffc32d; --c: #f39a06; --edge: #8a4b00; --txt: #5a2f00;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 9px 20px 12px; border-radius: 14px; border: 3px solid var(--ink); cursor: pointer;
  background: linear-gradient(180deg, var(--a) 0%, var(--b) 48%, var(--c) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -5px 0 rgba(0, 0, 0, .2), 0 5px 0 var(--ink);
  font-size: 18px; line-height: 1.1; color: #fff; text-decoration: none; text-align: center;
  -webkit-text-stroke: 4px var(--txt); paint-order: stroke fill; text-shadow: 0 2px 0 var(--txt);
  transition: transform .08s, box-shadow .08s, filter .15s; -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 1px 0 var(--ink); }
.btn:focus-visible, input:focus-visible, .linkish:focus-visible, .brand:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn.green { --a: #b9f77a; --b: #5fd032; --c: #2f9a1c; --txt: #124d09; }
.btn.blue { --a: #8fd6ff; --b: #2f86f5; --c: #1c57c9; --txt: var(--ink); }
.btn.red { --a: #ff9a9a; --b: #ee3d55; --c: #b81d39; --txt: #4d0513; }
.btn.grey { --a: #9fb0d4; --b: #6c7fa9; --c: #4b5c85; --txt: var(--ink); }
.btn.big { min-height: 64px; font-size: 26px; padding: 12px 30px 16px; border-radius: 18px; -webkit-text-stroke-width: 5px; }
.btn.small { min-height: 40px; font-size: 15px; padding: 6px 14px 9px; border-radius: 12px; -webkit-text-stroke-width: 3.5px; }
.btn.wide { width: 100%; }
.btn .ico { width: 1.35em; height: 1.35em; }
.btn .ico.line { color: #fff; filter: drop-shadow(0 1.5px 0 var(--txt)); }
.btn.shine { overflow: hidden; }
.btn.shine::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -50%; } 100% { left: 130%; } }
.btn.loading { pointer-events: none; color: transparent; -webkit-text-stroke-color: transparent; text-shadow: none; }
.btn.loading > * { visibility: hidden; }
.btn.loading::before {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body.busy .btn, body.busy .linkish { pointer-events: none; }
body.busy .btn:not(.loading) { filter: saturate(.55) brightness(.9); }

.linkish { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 14px; color: var(--sky); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }

/* ---------- inputs ---------- */
label.field { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 900; }
input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--ink);
  background: #0b1a4d; color: #fff; font: 900 17px var(--body); box-shadow: inset 0 4px 0 rgba(0, 0, 0, .4);
}
input::placeholder { color: #6f88c6; font-weight: 800; }
input.code-in { font: 400 24px var(--display); letter-spacing: .28em; text-transform: uppercase; text-align: center; }
input.code-in::placeholder { letter-spacing: .04em; font-size: 16px; font-family: var(--body); text-transform: none; }

/* ---------- hero ---------- */
.landing { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.landing .scene { order: -1; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; }
.hero-copy h1 { font-size: clamp(38px, 11vw, 56px); }
.hero-copy h1 .gold-text { display: block; font-size: 1.16em; }
.hero-copy .lede { max-width: 32ch; font-size: 17px; color: #dbe7ff; }
.hero-copy .panel { width: 100%; margin-top: 22px; text-align: center; }
.dash { display: flex; flex-direction: column; gap: 30px; }

.how { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 6px; border-radius: 18px; background: rgba(5, 12, 40, .5); border: 2px solid rgba(0, 0, 0, .45); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06); }
.how > div { padding: 0 10px; text-align: center; }
.how > div + div { border-left: 2px solid rgba(255, 255, 255, .09); }
.how .ico { width: 46px; height: 46px; margin-bottom: 4px; filter: drop-shadow(0 3px 0 rgba(4, 10, 32, .6)); }
.how h3 { font-size: 18px; color: var(--gold-400); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.how p { font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: 4px; }

.scene { position: relative; width: min(100%, 520px); aspect-ratio: 560 / 380; margin: 0 auto; }
.scene.compact { width: min(86%, 360px); }
.scene .halo {
  position: absolute; left: 50%; top: 46%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 74%); mask-image: radial-gradient(closest-side, #000 18%, transparent 74%);
}
.scene .halo::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; animation: rays 26s linear infinite;
  background: repeating-conic-gradient(rgba(255, 224, 110, .42) 0 9deg, transparent 9deg 22.5deg);
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 0 rgba(4, 10, 32, .45)); }
.scene text { font: 400 22px var(--display); fill: #fff; stroke: #5a2f00; stroke-width: 5px; paint-order: stroke fill; stroke-linejoin: round; }

/* A nine-second duel on loop: shots fly, crowns light up, the red tower falls, the prize goes to blue. */
.scene .shot, .scene .coin { opacity: 0; }
.scene .sb { animation: flyX 9s linear infinite; }
.scene .sb > g { animation: flyY 9s infinite; }
.scene .sr { animation: flyXr 9s linear infinite; }
.scene .sr > g { animation: flyY 9s infinite; }
.scene .s2, .scene .s2 > g { animation-delay: 1.8s; }
.scene .s3, .scene .s3 > g { animation-delay: 3.6s; }
.scene .s4, .scene .s4 > g { animation-delay: 5s; }
@keyframes flyX { 0% { transform: translateX(0); opacity: 1; } 13.3% { transform: translateX(344px); opacity: 1; } 13.4%, 100% { transform: translateX(344px); opacity: 0; } }
@keyframes flyXr { 0% { transform: translateX(0); opacity: 1; } 13.3% { transform: translateX(-344px); opacity: 1; } 13.4%, 100% { transform: translateX(-344px); opacity: 0; } }
@keyframes flyY { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .5, 1); } 6.65% { transform: translateY(-96px); animation-timing-function: cubic-bezier(.5, 0, .8, .4); } 13.3%, 100% { transform: translateY(0); } }
.scene .hit { transform-box: fill-box; transform-origin: 50% 100%; animation: hit 9s infinite backwards; }
.scene .h1 { animation-delay: 1.2s; } .scene .hb { animation-delay: 3s; } .scene .h2 { animation-delay: 4.8s; } .scene .h3 { animation-delay: 6.2s; }
@keyframes hit { 0%, 5%, 100% { transform: none; } 1% { transform: translate(7px, -3px) rotate(3deg); } 2.5% { transform: translate(-6px, 2px) rotate(-3deg); } 4% { transform: translate(3px, 0) rotate(1deg); } }
.scene .fall { transform-box: fill-box; transform-origin: 50% 100%; animation: topple 9s infinite; }
@keyframes topple { 0%, 69% { transform: none; opacity: 1; } 71% { transform: rotate(-6deg); opacity: 1; } 76%, 93% { transform: translateY(60px) rotate(14deg); opacity: 0; } 97%, 100% { transform: none; opacity: 1; } }
.scene .sc { transform-box: fill-box; transform-origin: center; opacity: .22; animation: 9s infinite; }
.scene .b1 { animation-name: crownB1; } .scene .r1 { animation-name: crownR1; } .scene .b2 { animation-name: crownB2; } .scene .b3 { animation-name: crownB3; }
@keyframes crownB1 { 0%, 13% { opacity: .22; transform: none; } 15% { opacity: 1; transform: scale(1.6) rotate(-12deg); } 18%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: .22; } }
@keyframes crownR1 { 0%, 33% { opacity: .22; transform: none; } 35% { opacity: 1; transform: scale(1.6) rotate(12deg); } 38%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: .22; } }
@keyframes crownB2 { 0%, 53% { opacity: .22; transform: none; } 55% { opacity: 1; transform: scale(1.6) rotate(-12deg); } 58%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: .22; } }
@keyframes crownB3 { 0%, 68.5% { opacity: .22; transform: none; } 70.5% { opacity: 1; transform: scale(1.6) rotate(-12deg); } 73.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: .22; } }
.scene .coin { animation: flyXc 9s linear infinite; }
@keyframes flyXc { 0% { transform: translateX(0); opacity: 1; } 13.3% { transform: translateX(-172px); opacity: 1; } 13.4%, 100% { transform: translateX(-172px); opacity: 0; } }
.scene .coin > g { animation: flyY 9s infinite; }
.scene .k1, .scene .k1 > g { animation-delay: 6.5s; } .scene .k2, .scene .k2 > g { animation-delay: 6.62s; } .scene .k3, .scene .k3 > g { animation-delay: 6.74s; }
.scene .k4, .scene .k4 > g { animation-delay: 6.86s; } .scene .k5, .scene .k5 > g { animation-delay: 6.98s; } .scene .k6, .scene .k6 > g { animation-delay: 7.1s; } .scene .k7, .scene .k7 > g { animation-delay: 7.22s; }
.scene .chest { transform-box: fill-box; transform-origin: 50% 100%; animation: chest 9s infinite; }
@keyframes chest { 0%, 8%, 16%, 24%, 32%, 40%, 48%, 56%, 64%, 69% { transform: none; } 4%, 20%, 36%, 52% { transform: translateY(-5px) rotate(-2deg); } 12%, 28%, 44%, 60% { transform: translateY(-5px) rotate(2deg); } 71% { transform: scale(1.25, .8); } 74% { transform: scale(.92, 1.15); } 77%, 100% { transform: none; } }
.scene .lid-open, .scene .glow, .scene .beam { opacity: 0; animation: lidOpen 9s infinite; }
.scene .lid-closed { animation: lidClosed 9s infinite; }
@keyframes lidOpen { 0%, 71.9% { opacity: 0; } 72%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes lidClosed { 0%, 71.9% { opacity: 1; } 72%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
.scene .hp .fill { transform-box: fill-box; transform-origin: 0 50%; animation: 9s infinite; }
.scene .hpr .fill { animation-name: hpRed; } .scene .hpb .fill { animation-name: hpBlue; }
@keyframes hpRed { 0%, 13.3% { transform: scaleX(1); } 13.4%, 53.3% { transform: scaleX(.66); } 53.4%, 68.9% { transform: scaleX(.33); } 69%, 96% { transform: scaleX(0); } 97%, 100% { transform: scaleX(1); } }
@keyframes hpBlue { 0%, 33.3% { transform: scaleX(1); } 33.4%, 96% { transform: scaleX(.66); } 97%, 100% { transform: scaleX(1); } }
.scene .hpb { animation: hpHide 9s infinite; }
@keyframes hpHide { 0%, 74% { opacity: 1; } 77%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
.scene .boom { transform-box: fill-box; transform-origin: center; opacity: 0; animation: boom 9s infinite; }
.scene .m1 { animation-delay: 1.2s; } .scene .m2 { animation-delay: 3s; } .scene .m3 { animation-delay: 4.8s; } .scene .m4 { animation-delay: 6.2s; }
@keyframes boom { 0% { transform: scale(.2) rotate(0); opacity: 1; } 2% { transform: scale(1.5) rotate(20deg); opacity: 1; } 4.5%, 100% { transform: scale(1.9) rotate(30deg); opacity: 0; } }
.scene .won > g { transform-box: fill-box; transform-origin: center; opacity: 0; animation: won 9s infinite; }
@keyframes won { 0%, 76% { opacity: 0; transform: scale(.3); } 80% { opacity: 1; transform: scale(1.18); } 83%, 93% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.6); } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.stats > div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 9px; border-radius: 14px; background: rgba(5, 12, 40, .6); border: 2px solid rgba(0, 0, 0, .5); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08); }
.stats b { font: 400 24px/1.1 var(--display); color: var(--gold-400); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.stats span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 900; margin-top: 2px; text-align: center; }
.wicon { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.btn.big .wicon { width: 36px; height: 36px; }
.wallet-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 14px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes clashL { 0%, 82%, 100% { transform: rotate(0); } 88% { transform: rotate(-9deg); } 92% { transform: rotate(3deg); } }
@keyframes clashR { 0%, 82%, 100% { transform: rotate(0); } 88% { transform: rotate(9deg); } 92% { transform: rotate(-3deg); } }

/* ---------- main page ---------- */
body[data-page="home"] main { max-width: 1160px; gap: 0; }
.lp-hero { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0 12px; text-align: center; }
.lp-hero .scene { order: -1; width: min(100%, 460px); }
.lp-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.eyebrow { font: 900 13px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.lp-copy h1 { font-size: clamp(44px, 13vw, 64px); }
.lp-copy h1 .gold-text { display: block; }
.lp-copy .lede { max-width: 34ch; font-size: 18px; color: #dbe7ff; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 4px; }
.hero-games { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 460px; border-radius: 16px; border: 3px solid var(--ink); overflow: hidden; text-decoration: none; background: rgba(5, 12, 40, .6); box-shadow: 0 5px 0 rgba(4, 10, 32, .9); }
.hero-games span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 9px; color: #9fb2e0; }
.hero-games span + span { border-left: 3px solid var(--ink); }
.hero-games .ico { width: 34px; height: 34px; filter: grayscale(.85) brightness(.85); }
.hero-games b { font: 400 15px var(--display); letter-spacing: .02em; }
.hero-games small { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); }
.hero-games .on { background: linear-gradient(180deg, #3672dc, #1f4aa8); color: #fff; }
.hero-games .on .ico { filter: none; }
.hero-games .on small { color: var(--green-300); }
.fine { font-size: 13px; color: var(--muted); font-weight: 700; }

.sec { margin-top: 84px; scroll-margin-top: 24px; }
.sec-head { text-align: center; margin-bottom: 34px; }
.sec-head h2 { font-size: clamp(32px, 8vw, 46px); }
.sec-head h2::after { content: ''; display: block; width: 64px; height: 6px; margin: 14px auto 0; border-radius: 6px; background: var(--gold-400); box-shadow: 0 0 0 3px var(--ink); }
.sec-head p { margin-top: 14px; font-size: 17px; color: var(--muted); }

.games { display: grid; gap: 44px; }
.game {
  position: relative; padding: 62px 20px 22px; border-radius: 22px; border: 3px solid var(--ink); text-align: center; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #3672dc 0%, #2658be 55%, #1f4aa8 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -7px 0 rgba(0, 0, 0, .22), 0 7px 0 rgba(4, 10, 32, .92), 0 22px 34px rgba(0, 0, 0, .35);
}
.game > .ico { position: absolute; top: -46px; left: 50%; margin-left: -50px; width: 100px; height: 100px; filter: drop-shadow(0 5px 0 rgba(4, 10, 32, .6)); }
.game h3 { font-size: 30px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.game p { font-size: 16px; color: #dbe7ff; line-height: 1.4; flex: 1; }
.game .tagbadge {
  position: absolute; top: -14px; right: 14px; padding: 3px 12px 4px; border-radius: 10px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #b9f77a, #3aa822); color: #0d3a06; font: 900 12px var(--body); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 3px 0 var(--ink);
}
.game.soon { background: linear-gradient(180deg, #33437a, #232f5c); }
.game.soon > .ico { filter: grayscale(.85) brightness(.8) drop-shadow(0 5px 0 rgba(4, 10, 32, .6)); }
.game.soon h3, .game.soon p { opacity: .75; }
.game.soon .tagbadge { background: linear-gradient(180deg, #ffe26b, #f39a06); color: #5a2f00; }
.game.soon .btn { pointer-events: none; opacity: .7; }
.games .game:nth-child(2).reveal { transition-delay: .12s; } .games .game:nth-child(3).reveal { transition-delay: .24s; }

.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.steps3 li {
  position: relative; padding: 58px 20px 24px; border-radius: 22px; border: 3px solid var(--ink); text-align: center;
  background: linear-gradient(180deg, #3672dc 0%, #2658be 55%, #1f4aa8 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -7px 0 rgba(0, 0, 0, .22), 0 7px 0 rgba(4, 10, 32, .92), 0 22px 34px rgba(0, 0, 0, .35);
}
.steps3 .ico { position: absolute; top: -42px; left: 50%; margin-left: -46px; width: 92px; height: 92px; filter: drop-shadow(0 5px 0 rgba(4, 10, 32, .6)); }
.steps3 .n {
  position: absolute; top: -16px; left: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding-bottom: 3px;
  border: 3px solid var(--ink); background: linear-gradient(180deg, #ffe26b, #f39a06); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 var(--ink);
  font: 400 22px var(--display); color: #5a2f00;
}
.steps3 h3 { font-size: 26px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.steps3 p { margin-top: 8px; font-size: 16px; color: #dbe7ff; line-height: 1.4; }

.fair { display: grid; gap: 36px; align-items: center; }
.fair > * { min-width: 0; }
.fair .sec-head { margin-bottom: 22px; }
.mirror { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 26px 0; }
.hand { display: flex; }
.pcard {
  position: relative; width: 58px; height: 78px; margin: 0 -9px; border-radius: 10px; border: 3px solid var(--ink); display: grid; place-items: center;
  background: linear-gradient(180deg, #fffbe6, #f1dba0); box-shadow: inset 0 -6px 0 #d2a955, 0 5px 0 rgba(4, 10, 32, .8);
}
.pcard .ico { width: 36px; height: 36px; }
.pcard .cost { position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--ink); background: linear-gradient(180deg, #ffb8ff, #c035d8); font: 400 13px var(--display); color: #fff; }
.pcard:nth-child(1) { transform: rotate(-14deg) translateY(10px); } .pcard:nth-child(2) { transform: rotate(-5deg); }
.pcard:nth-child(3) { transform: rotate(5deg); } .pcard:nth-child(4) { transform: rotate(14deg) translateY(10px); }
.hand.blue .pcard { box-shadow: inset 0 -6px 0 #d2a955, 0 0 0 3px #2f86f5, 0 6px 0 3px rgba(4, 10, 32, .8); }
.hand.red .pcard { box-shadow: inset 0 -6px 0 #d2a955, 0 0 0 3px #ee3d55, 0 6px 0 3px rgba(4, 10, 32, .8); }
.mirror .vs { flex: none; margin: 0 6px; width: 56px; height: 56px; }
.mirror .vs b { font-size: 30px; padding-bottom: 4px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points .ico { width: 52px; height: 52px; filter: drop-shadow(0 3px 0 rgba(4, 10, 32, .6)); }
.points h3 { font-size: 22px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.points p { margin-top: 4px; font-size: 16px; color: var(--muted); line-height: 1.4; }

.pool { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pool > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px 16px; border-radius: 18px; background: rgba(5, 12, 40, .6); border: 3px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 6px 0 rgba(4, 10, 32, .9); }
.pool .ico { width: 44px; height: 44px; }
.pool b { font: 400 34px/1.1 var(--display); color: var(--gold-400); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.pool span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 900; text-align: center; }
.winners { max-width: 640px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 8px; }
.winners h3 { font-size: 20px; text-align: center; margin-bottom: 6px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.pool + .fine, .winners + .fine { margin-top: 22px; }
.fine.center { text-align: center; }

.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 16px; border: 3px solid var(--ink); background: linear-gradient(180deg, #1d409a, #152f78); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 5px 0 rgba(4, 10, 32, .9); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative; font: 400 20px var(--display); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-54%); font: 400 30px var(--display); color: var(--gold-400); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-54%) rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 12px; }
.faq p { padding: 0 18px 18px; font-size: 16px; color: #dbe7ff; line-height: 1.5; }

.final { max-width: 640px; margin-inline: auto; margin-bottom: 30px; width: 100%; }
.final h2 { font-size: clamp(28px, 7vw, 40px); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s var(--pop); }
.reveal.in { opacity: 1; transform: none; }
.steps3 li:nth-child(2).reveal { transition-delay: .12s; } .steps3 li:nth-child(3).reveal { transition-delay: .24s; }

/* ---------- analytics ---------- */
body[data-page="analytics"] main { max-width: 1160px; gap: 26px; }
.an-head { margin: 10px 0 0; }
.an-head h1 { font-size: clamp(36px, 9vw, 54px); }
.pool .burn b, .split .burn b { color: #ff9d5c; }
.stat-card { padding: 22px 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stat-card h2 { font-size: 24px; color: #fff; -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.stat-card h2 + p { margin-top: -8px; }
.an-grid { display: grid; gap: 26px; }
.an-grid > * { min-width: 0; }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.split > div, .facts > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 6px 12px; border-radius: 14px; background: rgba(5, 12, 40, .55); border: 2px solid rgba(0, 0, 0, .5); }
.split b { font: 400 32px/1.1 var(--display); color: var(--gold-400); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.split span, .facts span { font-size: 12px; font-weight: 800; color: var(--muted); margin-top: 3px; line-height: 1.25; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.facts b { font: 400 24px/1.1 var(--display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 800; }
.links a { display: inline-flex; align-items: center; gap: 4px; }
.links .ico, .tbl .ico { width: 16px; height: 16px; }
.empty { padding: 16px; text-align: center; color: var(--muted); font-weight: 800; border-radius: 12px; background: rgba(5, 12, 40, .4); }
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; white-space: nowrap; }
td { padding: 9px 10px; border-top: 2px solid rgba(255, 255, 255, .08); white-space: nowrap; font-weight: 700; }
td a { display: inline-flex; align-items: center; gap: 4px; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.chart .axis { stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.chart .tick { font: 800 11px var(--body); fill: var(--muted); }
.chart .hit { outline: none; cursor: default; }
.chart .hit:hover, .chart .hit:focus-visible { fill: rgba(255, 255, 255, .08); }
.chart-empty { position: absolute; inset: 0 0 auto; top: 38%; text-align: center; color: var(--muted); font-weight: 800; pointer-events: none; }
.tip { position: absolute; top: 0; transform: translateX(-50%); z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #060c26; border: 2px solid rgba(255, 255, 255, .25); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tip[hidden] { display: none; }
.tip span, .legend span { display: flex; align-items: center; gap: 6px; }
.tip i, .legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 13px; font-weight: 800; color: #dbe7ff; }
.as-table { margin-top: 8px; font-size: 13px; }
.as-table summary { cursor: pointer; color: var(--muted); font-weight: 800; }
.hbars { display: grid; gap: 10px; }
.hbars > div { display: grid; grid-template-columns: 6.5em 1fr 2em; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; }
.hbars span { color: var(--muted); }
.hbars .track { height: 14px; border-radius: 4px; background: rgba(5, 12, 40, .55); }
.hbars i { display: block; height: 100%; min-width: 0; border-radius: 0 4px 4px 0; background: #3d8fe6; }
.hbars b { text-align: right; }

/* challenge banner (arriving through an invite link) */
.challenge {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #ff7a8b, #d92846 60%, #a81631); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 rgba(4, 10, 32, .92);
  animation: nudge 2.6s ease-in-out 1s infinite;
}
.enter .challenge { animation: rise .5s var(--pop) both, nudge 2.6s ease-in-out 1s infinite; }
.challenge .ico { width: 46px; height: 46px; }
.challenge h3 { font-size: 20px; margin-bottom: 3px; }
.challenge p { font-size: 14px; color: #ffe1e6; }
.challenge.gone, .enter .challenge.gone { background: linear-gradient(180deg, #6c7fa9, #4b5c85); animation: none; }
@keyframes nudge { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-1.2deg); } 95% { transform: rotate(1.2deg); } }

/* ---------- player card ---------- */
.player { display: flex; align-items: center; gap: 10px; }
.avatar { position: relative; width: 58px; height: 58px; flex: none; }
.avatar svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(4, 10, 32, .7)); }
.avatar span { position: absolute; inset: 0 0 6px; display: grid; place-items: center; font: 400 26px var(--display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-transform: uppercase; }
.player h2 { font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 3px 5px; margin: -3px; }
.player .sub { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: rgba(5, 12, 40, .6); border: 2px solid rgba(0, 0, 0, .45); font-size: 13px; font-weight: 900; color: #fff; white-space: nowrap; }
.chip.gold { color: var(--gold-200); }
.icon-btn { width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 12px; flex: none; }
.icon-btn .ico.line { width: 22px; height: 22px; }

/* ---------- arena ---------- */
.prize { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.prize .coin { width: 84px; height: 84px; animation: float 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(4, 10, 32, .55)); }
.prize .amount { font-size: 44px; line-height: 1; }
.prize .amount small { font-size: .55em; color: var(--gold-400); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; }
.divider::before, .divider::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: rgba(5, 12, 40, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }

.lobby-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #2a5cc6, #1e479f); border: 2px solid rgba(0, 0, 0, .45); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16);
}
.lobby-row .who { min-width: 0; flex: 1; }
.lobby-row .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.lobby-row .who span { font-size: 12px; color: var(--muted); }

.stake-in { font: 400 30px var(--display); text-align: center; letter-spacing: .04em; min-height: 60px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.quick .btn { min-height: 38px; padding-inline: 4px; }
.prize .amount b { font-weight: 400; }

/* versus */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; margin: 4px -4px 0; }
.fighter { --c1: #6fc0ff; --c2: #2b79ee; --c3: #173f9f; padding: 3px; background: var(--ink); min-width: 0;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); border-radius: 16px 16px 0 0; filter: drop-shadow(0 6px 0 rgba(4, 10, 32, .5)); }
.fighter > div { clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); border-radius: 13px 13px 0 0; padding: 14px 8px 40px; text-align: center;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 42%, var(--c3) 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4); }
.fighter.red { --c1: #ff9d9d; --c2: #e93a52; --c3: #94132c; }
.fighter.empty { --c1: #7f8fb4; --c2: #50608a; --c3: #303c63; }
.fighter .ico { width: 62px; height: 62px; filter: drop-shadow(0 3px 0 rgba(4, 10, 32, .55)); }
.fighter .avatar { margin: 0 auto; width: 66px; height: 66px; }
.fighter .avatar span { font-size: 30px; }
.fighter .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; color: rgba(255, 255, 255, .85); }
.fighter h3 { font-size: 20px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 4px 5px; }
.fighter .tagline { font-size: 12px; color: rgba(255, 255, 255, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enter .fighter.left { animation: slideL .5s var(--pop) both; }
.enter .fighter.right { animation: slideR .5s var(--pop) .08s both; }
.fighter.empty .ico { animation: pulse 1.8s ease-in-out infinite; }
@keyframes slideL { from { transform: translateX(-60%) rotate(-8deg); opacity: 0; } }
@keyframes slideR { from { transform: translateX(60%) rotate(8deg); opacity: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }

.vs { position: relative; width: 70px; height: 70px; margin: 0 -14px; z-index: 2; display: grid; place-items: center; }
.enter .vs { animation: slam .55s var(--pop) .25s both; }
.vs::before, .vs::after { content: ''; position: absolute; inset: 6px; border-radius: 8px; border: 3px solid var(--ink); background: linear-gradient(180deg, #ffe26b, #f39a06); }
.vs::after { transform: rotate(45deg); }
.vs b { position: relative; z-index: 1; font: 400 30px var(--display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.vs.live b { animation: beat 1.4s ease-in-out infinite; }
@keyframes slam { from { transform: scale(3) rotate(-25deg); opacity: 0; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* invite code */
.tiles { display: flex; justify-content: center; gap: 6px; }
.tiles span {
  width: 44px; height: 56px; display: grid; place-items: center; border-radius: 10px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #fffbe6, #f6dfa4); box-shadow: inset 0 -6px 0 #d2a955, 0 4px 0 var(--ink);
  font: 400 30px var(--display); color: #4a2a05; padding-bottom: 5px;
}
.enter .tiles span { animation: drop .4s var(--pop) both; }
.enter .tiles span:nth-child(2) { animation-delay: .05s; } .enter .tiles span:nth-child(3) { animation-delay: .1s; }
.enter .tiles span:nth-child(4) { animation-delay: .15s; } .enter .tiles span:nth-child(5) { animation-delay: .2s; } .enter .tiles span:nth-child(6) { animation-delay: .25s; }
@keyframes drop { from { transform: translateY(-26px) scale(.6); opacity: 0; } }

/* elixir timer */
.timer { display: flex; align-items: center; gap: 8px; }
.timer .ico { width: 30px; height: 30px; margin-right: -14px; z-index: 1; filter: drop-shadow(0 2px 0 rgba(4, 10, 32, .6)); }
.timer .bar { position: relative; flex: 1; height: 20px; border-radius: 10px; border: 3px solid var(--ink); background: #1a0b33; overflow: hidden; }
.timer .bar i { display: block; height: 100%; width: 100%; border-radius: 0 6px 6px 0; transition: width 1s linear;
  background: linear-gradient(180deg, #ffb8ff 0%, #e25cf0 45%, #a425cc 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55); }
.timer .bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(10, 16, 48, .55) calc(10% - 2px) 10%); }
.timer time { font: 400 18px var(--display); min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.timer.low .bar i { background: linear-gradient(180deg, #ffb0b0, #ee3d55 45%, #a3152d); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.steps > li { position: relative; padding: 12px 12px 12px 54px; border-radius: 14px; background: rgba(8, 20, 62, .62); border: 2px solid rgba(0, 0, 0, .4); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); counter-increment: s; }
.steps > li::before {
  content: counter(s); position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--ink); background: linear-gradient(180deg, #ffe26b, #f39a06); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--ink);
  font: 400 18px var(--display); color: #5a2f00; padding-bottom: 2px;
}
.steps h3 { font-size: 18px; margin-bottom: 3px; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.steps p { font-size: 14px; color: var(--muted); line-height: 1.35; }
.steps .row { margin-top: 10px; }
.modes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 5px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(180deg, #b9f77a, #3aa822); color: #0d3a06; font-weight: 900; font-size: 13px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.mode.no { background: linear-gradient(180deg, #8d9cc0, #55648d); color: #111a3a; text-decoration: line-through; text-decoration-thickness: 2px; }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #fff1a8, #ffcf4a); color: #4a2a05; font-size: 14px; line-height: 1.35; box-shadow: 0 4px 0 rgba(4, 10, 32, .85); animation: rise .4s var(--pop) both; }
.notice .ico { width: 34px; height: 34px; margin-top: -2px; }
.notice b { font-weight: 900; }

/* ---------- battle log ---------- */
.log { display: flex; flex-direction: column; gap: 8px; }
.log-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px;
  border: 2px solid rgba(0, 0, 0, .5); background: linear-gradient(90deg, #45568a, #2d3964); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14);
}
.log-row.win { background: linear-gradient(90deg, #3d93ff, #1d4fc0); }
.log-row.loss { background: linear-gradient(90deg, #e14a60, #94132c); }
.log-row .res { font: 400 17px var(--display); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; min-width: 4.6em; }
.log-row .who { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row .who small { display: block; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 800; }
.log-row .pay { font-size: 14px; font-weight: 900; text-align: right; white-space: nowrap; display: flex; align-items: center; gap: 4px; color: #fff; text-decoration: none; }
.log-row a.pay { text-decoration: underline; text-underline-offset: 3px; }
.log-row .pay .ico { width: 24px; height: 24px; }
.score { display: inline-flex; align-items: center; gap: 2px; font: 400 15px var(--display); }
.score .ico { width: 18px; height: 18px; }

/* ---------- dev tools ---------- */
.dev { border: 2px dashed rgba(143, 208, 255, .7); border-radius: 16px; padding: 12px; background: rgba(5, 12, 40, .5); }
.dev h3 { font: 900 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }

/* ---------- footer ---------- */
.foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px max(22px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; line-height: 1.5; color: #8ea6dd; font-weight: 700; }
.foot p + p { margin-top: 6px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 60; transform: translate(-50%, -160%); max-width: min(520px, calc(100vw - 24px)); width: max-content;
  padding: 10px 16px 12px; border-radius: 14px; border: 3px solid var(--ink); font-weight: 900; font-size: 15px; line-height: 1.3; color: #fff; text-align: center;
  background: linear-gradient(180deg, #ff7a8b, #d92846); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 var(--ink), 0 14px 26px rgba(0, 0, 0, .4);
  transition: transform .35s var(--pop); pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); }
#toast.ok { background: linear-gradient(180deg, #7fe04d, #2f9a1c); }

/* ---------- result overlay ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; overflow: hidden auto;
  background: radial-gradient(80% 60% at 50% 40%, #2a62dc, #0c1f5c 60%, #071233 100%); animation: fade .25s both;
}
#overlay.loss { background: radial-gradient(80% 60% at 50% 40%, #a0223f, #4a0d22 60%, #1c0612 100%); }
#overlay.draw { background: radial-gradient(80% 60% at 50% 40%, #46568a, #1c264f 60%, #0a1030 100%); }
@keyframes fade { from { opacity: 0; } }
.result { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.result .burst { position: absolute; left: 50%; top: 70px; width: 620px; height: 620px; margin: -310px 0 0 -310px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 232, 130, .34) 0 8deg, transparent 8deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 72%); mask-image: radial-gradient(closest-side, #000 10%, transparent 72%); animation: rays 22s linear infinite; }
#overlay.loss .burst, #overlay.draw .burst { opacity: .25; }
.result h1 { font-size: clamp(54px, 17vw, 82px); animation: slam .6s var(--pop) .1s both; }
#overlay.win .result h1 { color: var(--gold-400); }
#overlay.loss .result h1 { color: #ffb3b3; }
.crowns { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.crowns .ico { width: 78px; height: 78px; filter: drop-shadow(0 6px 0 rgba(4, 10, 32, .6)); animation: crown .5s var(--pop) both; }
.crowns .ico:nth-child(2) { width: 98px; height: 98px; margin-bottom: 12px; animation-delay: .75s; }
.crowns .ico:nth-child(1) { animation-delay: .5s; transform: rotate(-10deg); } .crowns .ico:nth-child(3) { animation-delay: 1s; transform: rotate(10deg); }
.crowns .ico.off { --crown: #27345f; --crown-band: #1b2547; opacity: .8; }
@keyframes crown { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.result .line { font-size: 18px; color: #e6efff; }
.result .line b { font-weight: 900; color: #fff; }
.reward { display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 10px 10px; border-radius: 99px; background: rgba(5, 12, 40, .75); border: 3px solid var(--ink); animation: rise .5s var(--pop) 1.3s both; }
.reward .ico { width: 54px; height: 54px; animation: flip 1.2s ease-in-out 1.5s 2; }
.reward b { font: 400 34px var(--display); }
@keyframes flip { 50% { transform: rotateY(180deg) scale(1.1); } }
.result .status { font-size: 14px; color: #dbe7ff; min-height: 1.4em; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(7, 18, 51, .9); }
.result .status a { color: #fff; font-weight: 900; }
.result .actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 6px; animation: rise .5s var(--pop) 1.5s both; }
#overlay.loss .result .actions, #overlay.draw .result .actions { animation-delay: .9s; }
.rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rain svg { position: absolute; top: -60px; width: 34px; height: 34px; animation: fall linear both; }
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); } }

/* ---------- desktop ---------- */
@media (min-width: 1000px) {
  .top, main, .foot { max-width: 1160px; padding-inline: 32px; }
  .top { padding-top: 22px; }
  .brand-mark { width: 54px; height: 54px; } .brand-name { font-size: 30px; }
  main { gap: 40px; padding-top: 20px; }
  .landing { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; min-height: min(640px, calc(100dvh - 190px)); }
  .landing .scene { order: 0; width: 100%; max-width: 680px; }
  .landing .scene.compact { max-width: 520px; }
  .hero-copy { align-items: stretch; text-align: left; gap: 20px; }
  .hero-copy h1 { font-size: clamp(42px, 3.9vw, 56px); }
  .hero-copy .lede { font-size: 20px; max-width: 34ch; }
  .how { padding: 26px 12px; }
  .how .ico { width: 60px; height: 60px; } .how h3 { font-size: 24px; } .how p { font-size: 16px; }
  .stats b { font-size: 34px; } .stats span { font-size: 13px; }
  .lp-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; text-align: left; min-height: min(700px, calc(100dvh - 120px)); padding: 0; }
  .lp-hero .scene { order: 0; width: 100%; max-width: 700px; }
  .lp-copy { align-items: flex-start; gap: 22px; }
  .lp-copy h1 { font-size: clamp(60px, 5.4vw, 78px); }
  .lp-copy .lede { font-size: 21px; max-width: 36ch; }
  .cta { justify-content: flex-start; }
  .sec { margin-top: 130px; }
  .steps3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .games { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .fair { grid-template-columns: 1fr 1fr; gap: 60px; }
  .fair .sec-head { text-align: left; } .fair .sec-head h2::after { margin-left: 0; }
  .mirror { transform: scale(1.75); }
  .pool { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .pool b { font-size: 44px; } .pool .ico { width: 56px; height: 56px; }
  .an-grid { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .stat-card { padding: 26px 26px 24px; }
  body[data-page="analytics"] .pool { grid-template-columns: repeat(4, 1fr); }
  .dash { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "player arena" "log arena" ". arena"; grid-template-rows: auto auto 1fr; gap: 34px 40px; align-items: start; }
  .dash > .a-player { grid-area: player; } .dash > .a-arena { grid-area: arena; } .dash > .a-log { grid-area: log; }
  .dash > .a-arena { padding: 36px 34px 30px; }
  .challenge { max-width: 640px; margin-inline: auto; width: 100%; }
  .dev { max-width: 640px; }
}

/* ---------- small screens ---------- */
@media (max-width: 420px) {
  body[data-page="home"] .pill.tag { display: none; }
  .pcard { width: 46px; height: 62px; margin: 0 -8px; }
  .pcard .ico { width: 28px; height: 28px; }
  .mirror .vs { width: 46px; height: 46px; margin: 0 2px; }
  .sec { margin-top: 64px; }
  main { padding-inline: 12px; gap: 28px; }
  .top { padding-inline: 12px; }
  .brand-name { font-size: 21px; } .brand-mark { width: 38px; height: 38px; }
  .panel { padding-inline: 14px; }
  .tiles span { width: 40px; height: 52px; font-size: 27px; }
  .fighter h3 { font-size: 17px; }
  .how h3 { font-size: 16px; } .how p { font-size: 12px; }
  .btn.big { font-size: 23px; padding-inline: 18px; }
  .pill.tag.mock { display: none; }
}
@media (max-width: 350px) {
  .ribbon { font-size: 15px; padding-inline: 16px; }
  .tiles span { width: 35px; height: 48px; font-size: 24px; }
  .pill.tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .sky i, .rain { display: none; }
}