/* Royale Fun: the legendary arena at night.
   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 {
  /* outline and night sky */
  --ink: #120726;
  --shadow: #07030f;
  --night-950: #0a0519;
  --night-900: #110930;
  --night-850: #170c3c;
  --night-800: #1d1049;
  --night-700: #29186a;
  --night-600: #38228c;
  --night-500: #4a30b0;
  --night-400: #6a52d6;
  --night-300: #9d8cf5;
  /* text */
  --text: #f7f3ff;
  --soft: #ddd4fb;
  --muted: #b9adE6;
  /* gold: the hero colour */
  --gold-100: #fff4b8;
  --gold-300: #ffdf6b;
  --gold-400: #ffcb3d;
  --gold-500: #ffb21f;
  --gold-600: #e88200;
  --gold-800: #8f4a00;
  --gold-ink: #3d1e00;
  /* elixir: the accent */
  --elixir-200: #ffc2f6;
  --elixir-400: #ff6fe6;
  --elixir-500: #ea4be0;
  --elixir-700: #8a1ca6;
  --elixir-900: #4a0d6b;
  /* light sources */
  --aurora: #56e8c4;
  --torch: #ff8a2b;
  /* the two players */
  --blue-300: #8fd2ff;
  --blue-500: #3b93ff;
  --blue-700: #1a46b8;
  --red-300: #ffb0a8;
  --red-500: #ff4860;
  --red-700: #a3132f;
  /* confirm */
  --green-300: #a4f7c4;
  --green-500: #2fd07a;
  --green-700: #0f7d48;
  /* surfaces */
  --panel: linear-gradient(180deg, #3d2896 0%, #2c1a74 52%, #22135a 100%);
  --panel-dark: linear-gradient(180deg, #27165f 0%, #1a0d43 100%);
  --well: rgba(10, 5, 28, .58);
  --well-line: rgba(0, 0, 0, .45);
  --hair: rgba(255, 255, 255, .1);
  --lift: inset 0 3px 0 rgba(255, 255, 255, .16), inset 0 -6px 0 rgba(0, 0, 0, .28), 0 7px 0 var(--shadow), 0 24px 38px rgba(0, 0, 0, .42);
  --link: #ffd96b;
  --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);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; background: var(--night-950); }
body {
  margin: 0; min-height: 100dvh; color: var(--text);
  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(--link); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
p { margin: 0; }
::selection { background: var(--elixir-500); color: #fff; }

/* ---------- night sky ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #0d0626 0%, #170b40 34%, #201052 66%, #1c0c40 100%);
}
.sky .aurora {
  position: absolute; inset: -18% -12% auto; height: 86vh;
  background:
    radial-gradient(38% 46% at 20% 34%, rgba(234, 75, 224, .30), transparent 70%),
    radial-gradient(42% 50% at 82% 26%, rgba(86, 232, 196, .15), transparent 70%),
    radial-gradient(60% 62% at 50% 4%, rgba(106, 82, 214, .6), transparent 72%);
  filter: blur(36px); animation: aurora 28s ease-in-out infinite alternate;
}
.sky .stars { position: absolute; inset: 0; opacity: .8; animation: twinkle 5.5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle at 24px 38px, #fff 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 96px 142px, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 152px 64px, var(--gold-100) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 214px 208px, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 268px 22px, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 312px 118px, var(--elixir-200) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 58px 262px, #fff 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 340px 286px, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 178px 318px, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 286px 352px, var(--gold-100) 0 1px, transparent 1.7px);
  background-size: 380px 380px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
}
.sky .stars.far { opacity: .5; background-size: 290px 290px; background-position: 90px 40px; animation-duration: 8s; animation-delay: -3s; }
.sky .ground { position: absolute; inset: auto 0 0; height: 46vh;
  background: radial-gradient(70% 100% at 50% 118%, rgba(255, 138, 43, .2), transparent 70%), linear-gradient(180deg, transparent, rgba(7, 3, 15, .5)); }
.sky i { /* embers rising from the torches */
  position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%;
  background: #ffe6a0; box-shadow: 0 0 10px 3px rgba(255, 138, 43, .6); opacity: 0;
  animation: ember 15s linear infinite;
}
.sky i:nth-child(even) { background: var(--elixir-200); box-shadow: 0 0 10px 3px rgba(234, 75, 224, .55); }
.sky i:nth-of-type(1) { left: 7%;  animation-delay: 0s; }
.sky i:nth-of-type(2) { left: 21%; animation-delay: 5s;  animation-duration: 18s; width: 4px; height: 4px; }
.sky i:nth-of-type(3) { left: 36%; animation-delay: 9s;  animation-duration: 13s; }
.sky i:nth-of-type(4) { left: 52%; animation-delay: 2s;  animation-duration: 20s; width: 4px; height: 4px; }
.sky i:nth-of-type(5) { left: 65%; animation-delay: 7s; }
.sky i:nth-of-type(6) { left: 78%; animation-delay: 11s; animation-duration: 17s; }
.sky i:nth-of-type(7) { left: 88%; animation-delay: 4s;  animation-duration: 14s; }
.sky i:nth-of-type(8) { left: 95%; animation-delay: 13s; animation-duration: 19s; width: 4px; height: 4px; }
@keyframes aurora { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
@keyframes twinkle { from { opacity: .8; } to { opacity: .35; } }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .45; } 100% { transform: translate(46px, -105vh); opacity: 0; } }
@keyframes rays { to { transform: rotate(360deg); } }

/* ---------- display type ---------- */
.display, h1, h2, h3, .btn, .ribbon, .brand-name {
  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 .1em 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 { position: sticky; top: 0; z-index: 30; width: 100%;
  background: linear-gradient(180deg, rgba(10, 5, 25, .92), rgba(13, 6, 34, .72)); border-bottom: 2px solid rgba(255, 203, 61, .14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(9px, env(safe-area-inset-top)) 16px 9px; width: 100%; max-width: 640px; margin: 0 auto; }
body[data-page="home"] .top-in, body[data-page="analytics"] .top-in { max-width: var(--wrap); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; border-radius: 12px; }
.brand-mark { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 3px 0 rgba(7, 3, 15, .7)); }
.brand-name { font-size: 24px; line-height: 1; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 4.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; justify-content: flex-end; }
.navlinks { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px;
  background: var(--well); border: 2px solid rgba(255, 203, 61, .5); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06);
  font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--gold-100);
}
.pill.tag.mock { color: var(--aurora); border-color: rgba(86, 232, 196, .55); border-style: dashed; }

/* ---------- layout ---------- */
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 22px 16px 40px; display: flex; flex-direction: column; gap: 30px; }
.boot { margin: 16vh auto 0; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.boot .spin { width: 96px; height: 96px; animation: wobble 1.3s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(255, 203, 61, .45)); }
@keyframes wobble { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.08); } }

/* ---------- panels ---------- */
.error-card { width: 100%; max-width: 460px; margin: 12vh auto 0 !important; text-align: center; }
.error-card .stack { align-items: center; }
.error-card .stack > .ico { width: 72px; height: 72px; filter: drop-shadow(0 4px 0 rgba(7, 3, 15, .6)); }
.error-card p { font-size: 17px; color: var(--soft); }
.panel {
  position: relative; border-radius: 22px; border: 3px solid var(--ink); padding: 28px 18px 20px;
  background: var(--panel); box-shadow: var(--lift);
}
.panel::after { /* thin gold inlay */
  content: ''; position: absolute; inset: 5px; border-radius: 15px; border: 1.5px solid rgba(255, 203, 61, .2); pointer-events: none;
}
.enter .panel { animation: rise .45s var(--pop) both; }
.panel.flat { padding-top: 18px; }
main > .panel:first-child:not(.flat) { margin-top: 18px; }
.panel > .ribbon + * { margin-top: 6px; }
.panel.dark { background: var(--panel-dark); }
.panel.dark::after { border-color: rgba(157, 140, 245, .2); }
@keyframes rise { from { transform: translateY(18px) scale(.97); opacity: 0; } }

.ribbon {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 5px 24px 6px; border-radius: 10px; border: 3px solid var(--ink); white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 50%, #f39a06 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -3px 0 rgba(120, 50, 0, .3), 0 4px 0 var(--ink);
  font-size: 18px; color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.ribbon::before, .ribbon::after { /* folded ends */
  content: ''; position: absolute; top: 7px; width: 20px; height: 100%; z-index: -1;
  background: #b56200; 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.violet, .ribbon.red { color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.ribbon.violet { background: linear-gradient(180deg, #ff9cf2, var(--elixir-500) 55%, #a927c0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--ink); }
.ribbon.violet::before, .ribbon.violet::after { background: var(--elixir-900); }
.ribbon.red { background: linear-gradient(180deg, #ff9a9a, var(--red-500) 55%, #c21e3c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--ink); }
.ribbon.red::before, .ribbon.red::after { background: #6e0d22; }

.well {
  background: var(--well); border: 2px solid var(--well-line); border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); padding: 12px 14px;
}
.well.muted { color: var(--soft); }
.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: var(--gold-300); --b: var(--gold-400); --c: #f59a0a; --deep: rgba(130, 55, 0, .38);
  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) 50%, var(--c) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 var(--deep), 0 5px 0 var(--ink);
  font-size: 18px; line-height: 1.1; color: var(--gold-ink); text-decoration: none; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .08s, box-shadow .08s, filter .15s; -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 var(--deep), 0 1px 0 var(--ink); }
.btn:focus-visible, input:focus-visible, .linkish:focus-visible, .brand:focus-visible, .seg:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn.alt, .btn.green, .btn.red, .btn.grey { color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); --deep: rgba(0, 0, 0, .28); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .38), inset 0 -5px 0 var(--deep), 0 5px 0 var(--ink); }
.btn.alt { --a: #9079f2; --b: #6248d4; --c: #4429a8; }
.btn.green { --a: #8df5b6; --b: var(--green-500); --c: #129456; }
.btn.red { --a: #ff9a9a; --b: var(--red-500); --c: #c21e3c; }
.btn.grey { --a: #8d80c0; --b: #5d5092; --c: #40356e; }
.btn.big { min-height: 64px; font-size: 25px; padding: 12px 30px 16px; border-radius: 18px; }
.btn.big:not(.alt):not(.grey) { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -6px 0 var(--deep), 0 6px 0 var(--ink), 0 0 38px rgba(255, 190, 50, .38); }
.btn.big.alt { -webkit-text-stroke-width: 4.5px; }
.btn.small { min-height: 40px; font-size: 15px; padding: 6px 14px 9px; border-radius: 12px; }
.btn.small.alt, .btn.small.green, .btn.small.grey, .btn.small.red { -webkit-text-stroke-width: 3px; }
.btn.wide { width: 100%; }
.btn .ico { width: 1.35em; height: 1.35em; }
.btn .ico.line { color: currentColor; }
.btn.alt .ico.line, .btn.green .ico.line, .btn.red .ico.line, .btn.grey .ico.line { color: #fff; filter: drop-shadow(0 1.5px 0 var(--ink)); }
.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, .6), transparent); transform: skewX(-18deg);
  animation: shine 3.4s 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(18, 7, 38, .3); border-top-color: var(--ink); animation: spin .7s linear infinite;
}
.btn.alt.loading::before, .btn.green.loading::before, .btn.red.loading::before, .btn.grey.loading::before { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
body.busy .btn, body.busy .linkish { pointer-events: none; }
body.busy .btn:not(.loading) { filter: saturate(.55) brightness(.85); }
span.btn[aria-disabled] { pointer-events: none; opacity: .7; }

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

/* ---------- inputs ---------- */
label.field, div.field { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 900; }
input {
  width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--ink);
  background: #0d0624; color: #fff; font: 900 17px var(--body); caret-color: var(--gold-400);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 1.5px rgba(157, 140, 245, .28);
  transition: box-shadow .15s;
}
input:hover { box-shadow: inset 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 1.5px rgba(157, 140, 245, .55); }
input:focus { box-shadow: inset 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 2px var(--gold-400), 0 0 22px rgba(255, 203, 61, .25); }
input::placeholder { color: #8375bb; font-weight: 800; }
input.code-in { font: 400 24px var(--display); letter-spacing: .28em; text-transform: uppercase; text-align: center; color: var(--gold-300); }
input.code-in::placeholder { letter-spacing: .04em; font-size: 16px; font-family: var(--body); text-transform: none; }

/* ---------- hero scene ---------- */
.scene { position: relative; width: min(100%, 560px); aspect-ratio: 640 / 470; margin: 0 auto; }
.scene.compact { width: min(92%, 400px); }
.scene .halo { position: absolute; left: 50%; top: 34%; width: 104%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(157, 124, 255, .42), rgba(234, 75, 224, .14) 55%, transparent 72%); }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene text { font: 400 21px var(--display); letter-spacing: .05em; fill: var(--gold-ink); }

/* A nine-second loop: blue fires, red answers, the two shots collide above the crown and the pot bursts.
   Every element rests in a finished pose, so a frozen frame (or reduced motion) still reads as a full picture. */
.scene .moonglow { transform-box: fill-box; transform-origin: center; animation: glow 6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.scene .beam { transform-box: fill-box; transform-origin: 50% 100%; opacity: .85; }
.scene .bl { transform: rotate(-17deg); animation: sweepL 9s ease-in-out infinite; }
.scene .br { transform: rotate(17deg); animation: sweepR 9s ease-in-out infinite; }
@keyframes sweepL { 0%, 100% { transform: rotate(-17deg); } 50% { transform: rotate(-4deg); } }
@keyframes sweepR { 0%, 100% { transform: rotate(17deg); } 50% { transform: rotate(4deg); } }
.scene .rune { animation: rune 5s linear infinite; }
@keyframes rune { to { stroke-dashoffset: -42; } }
.scene .flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag 1.8s ease-in-out infinite; }
.scene .flag.f2 { animation-delay: -.7s; }
@keyframes flag { 0%, 100% { transform: skewY(-5deg) scaleX(1); } 50% { transform: skewY(6deg) scaleX(.93); } }
.scene .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame .9s ease-in-out infinite; }
.scene .flame.f2 { animation-delay: -.4s; }
@keyframes flame { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 30% { transform: scale(.93, 1.1) rotate(3deg); } 65% { transform: scale(1.06, .93) rotate(-3deg); } }
.scene .fglow { transform-box: fill-box; transform-origin: center; animation: glow 1.8s ease-in-out infinite; }
.scene .column { opacity: .5; animation: column 3.2s ease-in-out infinite; }
@keyframes column { 0%, 100% { opacity: .38; } 50% { opacity: .66; } }
.scene .bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.scene .pulse { transform-box: fill-box; transform-origin: center; animation: pulse9 9s infinite; }
@keyframes pulse9 { 0%, 61%, 72%, 100% { transform: scale(1); } 64% { transform: scale(1.22); } 68% { transform: scale(.96); } }
.scene .flash { opacity: 0; transform-box: fill-box; transform-origin: center; animation: flash 9s infinite; }
@keyframes flash { 0%, 61% { opacity: 0; transform: scale(.4); } 63% { opacity: .85; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(1.7); } }
.scene .heap { transform-box: fill-box; transform-origin: 50% 100%; animation: heap 9s infinite; }
@keyframes heap { 0%, 61%, 74%, 100% { transform: none; } 64% { transform: scale(1.08, 1.2); } 68% { transform: scale(1, .92); } }
.scene .spark { transform-box: fill-box; transform-origin: center; animation: sparkle 4s ease-in-out infinite; }
.scene .k2 { animation-delay: -.8s; } .scene .k3 { animation-delay: -1.7s; } .scene .k4 { animation-delay: -2.4s; } .scene .k5 { animation-delay: -3.1s; } .scene .k6 { animation-delay: -1.2s; }
@keyframes sparkle { 0%, 100% { transform: translateY(8px) scale(.55) rotate(0); opacity: .45; } 50% { transform: translateY(-12px) scale(1.15) rotate(45deg); opacity: 1; } }

.scene .shot, .scene .coin, .scene .boom { opacity: 0; }
.scene .sb { animation: flyX 9s linear infinite; } .scene .sr { animation: flyXr 9s linear infinite; }
.scene .sb > g, .scene .sr > g { animation: flyY 9s infinite; }
.scene .sbh { animation: halfX 9s linear infinite; } .scene .srh { animation: halfXr 9s linear infinite; }
.scene .sbh > g, .scene .srh > g { animation: halfY 9s infinite; }
.scene .s1, .scene .s1 > g { animation-delay: .5s; }
.scene .s2, .scene .s2 > g { animation-delay: 2.5s; }
.scene .s3, .scene .s3 > g { animation-delay: 4.9s; }
@keyframes flyX { 0% { transform: translateX(0); opacity: 1; } 13.3% { transform: translateX(420px); opacity: 1; } 13.4%, 100% { transform: translateX(420px); opacity: 0; } }
@keyframes flyXr { 0% { transform: translateX(0); opacity: 1; } 13.3% { transform: translateX(-420px); opacity: 1; } 13.4%, 100% { transform: translateX(-420px); opacity: 0; } }
@keyframes flyY { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .5, 1); } 6.65% { transform: translateY(-150px); animation-timing-function: cubic-bezier(.5, 0, .8, .4); } 13.3%, 100% { transform: translateY(0); } }
@keyframes halfX { 0% { transform: translateX(0); opacity: 1; } 7% { transform: translateX(198px); opacity: 1; } 7.1%, 100% { transform: translateX(198px); opacity: 0; } }
@keyframes halfXr { 0% { transform: translateX(0); opacity: 1; } 7% { transform: translateX(-198px); opacity: 1; } 7.1%, 100% { transform: translateX(-198px); opacity: 0; } }
@keyframes halfY { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .5, 1); } 7%, 100% { transform: translateY(-134px); } }
.scene .hit { transform-box: fill-box; transform-origin: 50% 100%; animation: hit 9s infinite backwards; }
.scene .hr { animation-delay: 1.7s; } .scene .hb { animation-delay: 3.7s; }
@keyframes hit { 0%, 5%, 100% { transform: none; } 1% { transform: translate(6px, -3px) rotate(2.5deg); } 2.5% { transform: translate(-5px, 2px) rotate(-2.5deg); } 4% { transform: translate(3px, 0) rotate(1deg); } }
.scene .boom { transform-box: fill-box; transform-origin: center; animation: boom 9s infinite; }
.scene .m1 { animation-delay: 1.7s; } .scene .m2 { animation-delay: 3.7s; } .scene .m3 { animation-delay: 5.5s; }
@keyframes boom { 0% { transform: scale(.2) rotate(0); opacity: 1; } 2.2% { transform: scale(1.5) rotate(20deg); opacity: 1; } 5%, 100% { transform: scale(2) rotate(32deg); opacity: 0; } }
.scene .coin { animation: coinX 9s linear infinite 5.6s; }
.scene .coin > g { animation: coinY 9s infinite 5.6s; }
.scene .c2, .scene .c2 > g { animation-delay: 5.68s; } .scene .c3, .scene .c3 > g { animation-delay: 5.76s; }
.scene .c4, .scene .c4 > g { animation-delay: 5.84s; } .scene .c5, .scene .c5 > g { animation-delay: 5.92s; } .scene .c6, .scene .c6 > g { animation-delay: 6s; }
@keyframes coinX { 0% { transform: translateX(0); opacity: 1; } 14% { transform: translateX(var(--dx)); opacity: 1; } 17%, 100% { transform: translateX(var(--dx)); opacity: 0; } }
@keyframes coinY { 0% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .5, 1); } 6% { transform: translateY(-120px) rotate(200deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 14%, 100% { transform: translateY(96px) rotate(420deg); } }
.scene .won { transform-box: fill-box; transform-origin: center; animation: plaque 9s infinite; }
@keyframes plaque { 0%, 62%, 72%, 100% { transform: scale(1); } 66% { transform: scale(1.09) rotate(-1.5deg); } }

/* ---------- play: connect and link ---------- */
.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: 14px; width: 100%; text-align: center; }
.hero-copy h1 { font-size: clamp(40px, 11vw, 58px); }
.hero-copy .lede { max-width: 34ch; font-size: 17px; color: var(--soft); }
.hero-copy .panel { width: 100%; margin-top: 24px; text-align: center; }
.dash { display: flex; flex-direction: column; gap: 34px; }
.wicon { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.btn.big .wicon { width: 36px; height: 36px; }
.lobby-solo { max-width: 640px; width: 100%; margin: 4px auto 0; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- main page ---------- */
body[data-page="home"] main { max-width: var(--wrap); gap: 0; padding-top: 10px; }
.lp-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 0 6px; text-align: center; }
.lp-hero .scene { order: -1; width: min(100%, 520px); }
.lp-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.eyebrow { display: inline-flex; text-align: left; align-items: center; gap: 9px; padding: 6px 14px 6px 12px; border-radius: 99px; background: var(--well); border: 2px solid rgba(255, 203, 61, .45);
  font: 900 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-100); }
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px rgba(47, 208, 122, .25), 0 0 12px var(--green-500); animation: live 1.6s ease-in-out infinite; flex: none; }
@keyframes live { 50% { opacity: .45; } }
.lp-copy h1 { font-size: clamp(50px, 14.5vw, 70px); line-height: .98; }
.lp-copy h1 .gold-text { display: block; position: relative; color: var(--gold-400); filter: drop-shadow(0 0 .45em rgba(255, 190, 50, .4)); }
.lp-copy h1 .gold-text::after { content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none; color: transparent;
  background: linear-gradient(180deg, var(--gold-100) 12%, var(--gold-400) 50%, #f08a00 90%); -webkit-background-clip: text; background-clip: text; }
.lp-copy .lede { max-width: 36ch; font-size: 17px; color: var(--soft); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 6px; }
.cta.center { margin-top: 26px; }
.fine { font-size: 13px; color: var(--muted); font-weight: 700; }
.fine.center { text-align: center; }

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 28px; border-radius: 20px; border: 3px solid var(--ink); overflow: hidden;
  background: var(--panel-dark); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 6px 0 var(--shadow), 0 20px 34px rgba(0, 0, 0, .4); }
.stat { display: flex; align-items: center; gap: 10px; padding: 14px 12px; min-width: 0; }
.stat:nth-child(even) { border-left: 2px solid var(--hair); }
.stat:nth-child(n+3) { border-top: 2px solid var(--hair); }
.stat .ico { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 rgba(7, 3, 15, .6)); }
.stat b { display: block; font: 400 28px/1 var(--display); color: var(--gold-400); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.stat span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }

.sec { position: relative; margin-top: 84px; scroll-margin-top: 84px; }
.sec::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -60px; width: min(1100px, 100vw); height: 420px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(125, 92, 255, .22), transparent 70%); }
.sec:nth-of-type(even)::before { background: radial-gradient(50% 50% at 50% 50%, rgba(234, 75, 224, .14), transparent 70%); }
.sec-head { text-align: center; margin-bottom: 34px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 900 12px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 10px; }
.kicker::before, .kicker::after { content: ''; width: 9px; height: 9px; background: var(--elixir-400); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 10px rgba(255, 111, 230, .7); }
.sec-head h2 { font-size: clamp(32px, 8.6vw, 50px); }
.sec-head .sub { margin: 12px auto 0; max-width: 46ch; font-size: 17px; color: var(--soft); }

.steps3 { list-style: none; margin: 78px 0 0; padding: 0; display: grid; gap: 58px; }
.steps3 li { position: relative; padding: 62px 20px 24px; border-radius: 22px; border: 3px solid var(--ink); text-align: center; background: var(--panel); box-shadow: var(--lift); }
.steps3 .art { position: absolute; top: -44px; left: 50%; margin-left: -48px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--ink); background: radial-gradient(circle at 50% 35%, #5b3fd0, #24135e 72%); box-shadow: inset 0 0 0 3px rgba(255, 203, 61, .55), 0 5px 0 var(--shadow), 0 0 30px rgba(157, 124, 255, .45); }
.steps3 .art .ico { width: 58px; height: 58px; filter: drop-shadow(0 3px 0 rgba(7, 3, 15, .6)); }
.steps3 .n { position: absolute; top: -8px; left: -10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding-bottom: 2px;
  border: 3px solid var(--ink); background: linear-gradient(180deg, var(--gold-300), #f39a06); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--ink);
  font: 400 19px var(--display); color: var(--gold-ink); }
.steps3 h3, .mode-card h3, .game h3, .points h3, .token h3, .potsplit h3, .winners h3 { color: #fff; -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.steps3 h3 { font-size: 26px; }
.steps3 p { margin-top: 8px; font-size: 16px; color: var(--soft); line-height: 1.45; }

.modes2 { display: grid; gap: 22px; }
.mode-card { border-radius: 22px; border: 3px solid var(--ink); background: var(--panel); box-shadow: var(--lift); overflow: hidden; min-width: 0; }
.mode-art { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 8px; min-height: 148px; border-bottom: 3px solid var(--ink);
  background: radial-gradient(70% 90% at 50% 0%, rgba(157, 124, 255, .42), transparent 70%), linear-gradient(180deg, #1d1049, #120930); }
.mode-copy { padding: 18px 20px 22px; }
.mode-copy h3 { font-size: 30px; margin-top: 8px; }
.mode-copy p { margin-top: 6px; font-size: 16px; color: var(--soft); }
.eq { font: 400 34px var(--display); color: var(--gold-400); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; margin: 0 4px; }
.hand { display: flex; }
.pcard {
  position: relative; width: 44px; height: 60px; margin: 0 -7px; border-radius: 9px; border: 3px solid var(--ink); display: grid; place-items: center;
  background: linear-gradient(180deg, #5b40d0, #2c1976); box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .6), inset 0 -6px 0 2px rgba(0, 0, 0, .25), 0 5px 0 var(--shadow);
}
.pcard .ico { width: 28px; height: 28px; }
.pcard .cost { position: absolute; top: -9px; left: -9px; width: 23px; height: 23px; border-radius: 50% 50% 50% 50% / 62% 62% 42% 42%; display: grid; place-items: center; border: 2.5px solid var(--ink); background: linear-gradient(180deg, var(--elixir-200), #c035d8); font: 400 12px var(--display); color: #fff; text-shadow: 0 1px 0 var(--elixir-900); }
.pcard:nth-child(1) { transform: rotate(-14deg) translateY(9px); } .pcard:nth-child(2) { transform: rotate(-5deg); }
.pcard:nth-child(3) { transform: rotate(5deg); } .pcard:nth-child(4) { transform: rotate(14deg) translateY(9px); }
.hand.blue .pcard { box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .6), 0 0 0 3px var(--blue-500), 0 6px 0 3px var(--shadow); }
.hand.red .pcard { box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .6), 0 0 0 3px var(--red-500), 0 6px 0 3px var(--shadow); }
.hand.offer .pcard { width: 56px; height: 74px; margin: 0 5px; transform: none; }
.hand.offer .pcard .ico { width: 32px; height: 32px; }
.hand.offer .pick-b { transform: translateY(-9px); box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .6), 0 0 0 3px var(--blue-500), 0 0 18px var(--blue-500), 0 6px 0 3px var(--shadow); }
.hand.offer .pick-r { transform: translateY(9px); box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .6), 0 0 0 3px var(--red-500), 0 0 18px var(--red-500), 0 6px 0 3px var(--shadow); }
.points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--well); border: 2px solid var(--well-line); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05); }
.points .ico { width: 48px; height: 48px; filter: drop-shadow(0 3px 0 rgba(7, 3, 15, .6)); }
.points h3 { font-size: 21px; }
.points p { margin-top: 4px; font-size: 15px; color: var(--soft); line-height: 1.4; }

.lobby-wide { max-width: 860px; margin: 0 auto; padding-top: 12px; }

.fee-grid { display: grid; gap: 22px; }
.fee-grid > * { min-width: 0; }
.potsplit { padding: 22px 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.potsplit h3, .token h3 { font-size: 24px; }
.potbar { display: flex; height: 56px; border-radius: 16px; border: 3px solid var(--ink); overflow: hidden; background: var(--ink); gap: 3px; box-shadow: 0 4px 0 var(--shadow); }
.potbar i { display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 20px var(--display); font-style: normal; color: var(--gold-ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(0, 0, 0, .2); }
.potbar .w { flex: 98; background: linear-gradient(180deg, var(--gold-300), var(--gold-400) 50%, #f39a06); }
.potbar .w .ico { width: 30px; height: 30px; }
.potbar .b { flex: 1 0 12px; background: linear-gradient(180deg, var(--elixir-200), var(--elixir-500)); }
.potbar .s { flex: 1 0 12px; background: linear-gradient(180deg, #b9acff, #6a52d6); }
.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: var(--well); border: 2px solid var(--well-line); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05); }
.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(--soft); margin-top: 4px; line-height: 1.25; }
.split .burn b, .pool .burn b { color: var(--elixir-400); }
.split .site b { color: var(--night-300); }
.token { padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; overflow: hidden;
  background: radial-gradient(80% 70% at 100% 0%, rgba(234, 75, 224, .34), transparent 70%), var(--panel-dark); }
.token-art { position: relative; width: 92px; height: 84px; margin-bottom: 4px; }
.token-art .ico { position: absolute; filter: drop-shadow(0 4px 0 rgba(7, 3, 15, .6)); }
.token-art .ico:first-child { left: 0; bottom: 0; width: 66px; height: 66px; }
.token-art .ico:last-child { right: 0; top: 0; width: 54px; height: 54px; animation: float 2.6s ease-in-out infinite; }
.token p { color: var(--soft); font-size: 16px; }
.more { font-weight: 900; }
.more .ico { width: 16px; height: 16px; margin-left: 6px; }

.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; min-width: 0;
  background: var(--panel-dark); border: 3px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 6px 0 var(--shadow); }
.pool .ico { width: 44px; height: 44px; filter: drop-shadow(0 3px 0 rgba(7, 3, 15, .6)); }
.pool 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); max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 4px 3px; }
.pool span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 900; text-align: center; line-height: 1.25; }
.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; }
.pool + .fine, .winners + .fine { margin-top: 22px; }

.games { display: grid; gap: 14px; }
.game { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; border: 3px solid var(--ink); background: var(--panel); box-shadow: var(--lift); min-width: 0; }
.game > .ico { width: 62px; height: 62px; filter: drop-shadow(0 4px 0 rgba(7, 3, 15, .6)); }
.game h3 { font-size: 23px; margin-top: 6px; }
.game p { font-size: 14px; color: var(--soft); line-height: 1.35; margin-top: 3px; }
.tagbadge { display: inline-block; padding: 2px 9px 3px; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(180deg, #8df5b6, var(--green-500)); color: #053a20; font: 900 10px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.game.soon { background: var(--panel-dark); }
.game.soon > .ico { filter: grayscale(.7) brightness(.8) drop-shadow(0 4px 0 rgba(7, 3, 15, .6)); }
.game.soon .tagbadge { background: linear-gradient(180deg, #8d80c0, #5d5092); color: #fff; }
.game.soon h3 { opacity: .85; }

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 16px; border: 3px solid var(--ink); background: var(--panel-dark); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 5px 0 var(--shadow); transition: background .2s; }
.faq details[open] { background: var(--panel); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 56px 16px 18px; position: relative; font: 400 19px/1.2 var(--display); letter-spacing: .02em; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 12px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 10px; display: grid; place-items: center; padding-bottom: 3px;
  border: 2.5px solid var(--ink); background: linear-gradient(180deg, var(--gold-300), #f39a06); font: 400 24px/1 var(--display); color: var(--gold-ink); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { border-radius: 12px; }
.faq p { padding: 0 18px 18px; font-size: 16px; color: var(--soft); line-height: 1.55; }

.final { margin-bottom: 30px; }
.final-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 36px 20px 34px; border-radius: 26px; border: 3px solid var(--ink); overflow: hidden;
  background: radial-gradient(60% 90% at 50% 0%, rgba(255, 190, 50, .30), transparent 70%), radial-gradient(50% 80% at 0% 100%, rgba(234, 75, 224, .35), transparent 70%), radial-gradient(50% 80% at 100% 100%, rgba(59, 147, 255, .28), transparent 70%), var(--panel);
  box-shadow: inset 0 0 0 3px rgba(255, 203, 61, .5), var(--lift); }
.final-mark { width: 104px; height: 104px; filter: drop-shadow(0 6px 0 rgba(7, 3, 15, .6)) drop-shadow(0 0 28px rgba(255, 203, 61, .5)); animation: float 3.6s ease-in-out infinite; }
.final h2 { font-size: clamp(28px, 7.4vw, 46px); max-width: 18ch; }
.final p { color: var(--soft); font-size: 18px; margin-bottom: 8px; }

.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, .modes2 > :nth-child(2).reveal, .points li:nth-child(2).reveal, .games > :nth-child(2).reveal { transition-delay: .1s; }
.steps3 li:nth-child(3).reveal, .points li:nth-child(3).reveal, .games > :nth-child(3).reveal { transition-delay: .2s; }

/* ---------- analytics ---------- */
body[data-page="analytics"] main { max-width: var(--wrap); gap: 26px; }
.an-head { margin: 6px 0 0; }
.an-head h1 { font-size: clamp(38px, 9vw, 58px); }
.an-head p { margin: 12px auto 0; max-width: 52ch; color: var(--soft); font-size: 17px; }
.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; color: var(--soft); }
.an-grid { display: grid; gap: 26px; }
.an-grid > * { min-width: 0; }
.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: 18px 16px; text-align: center; color: var(--soft); font-weight: 800; border-radius: 14px; background: var(--well); border: 2px dashed rgba(157, 140, 245, .35); }
.tbl-wrap { overflow-x: auto; border-radius: 14px; background: var(--well); border: 2px solid var(--well-line); }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-100); padding: 10px 12px 8px; white-space: nowrap; background: rgba(255, 203, 61, .07); }
td { padding: 9px 12px; border-top: 2px solid var(--hair); white-space: nowrap; font-weight: 700; color: var(--text); }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
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, .1); stroke-width: 1; }
.chart .axis { stroke: rgba(255, 255, 255, .34); stroke-width: 1; }
.chart .tick { font: 800 11px var(--body); fill: var(--muted); }
@media (max-width: 700px) { .chart .tick { font-size: 17px; } }
.chart .hit { outline: none; cursor: default; }
.chart .hit:hover, .chart .hit:focus-visible { fill: rgba(255, 255, 255, .09); }
.chart-empty { position: absolute; inset: 0 0 auto; top: 36%; text-align: center; color: var(--soft); 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: var(--night-950); border: 2px solid rgba(255, 203, 61, .5); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.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: var(--soft); }
.as-table { margin-top: 8px; font-size: 13px; }
.as-table summary { cursor: pointer; color: var(--muted); font-weight: 800; width: max-content; }
.as-table table { margin-top: 8px; }
.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(--soft); }
.hbars .track { height: 16px; border-radius: 6px; background: var(--well); border: 2px solid var(--well-line); overflow: hidden; }
.hbars i { display: block; height: 100%; min-width: 0; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.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, #f76ee6, #c531c4 60%, #8a1ca6); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--shadow), 0 0 30px rgba(234, 75, 224, .35);
  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: #fff; }
.challenge.gone, .enter .challenge.gone { background: linear-gradient(180deg, #6d5fa6, #40356e); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 6px 0 var(--shadow); 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(7, 3, 15, .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: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: var(--well); border: 2px solid var(--well-line); font-size: 13px; font-weight: 900; color: #fff; white-space: nowrap; }
.chip.gold { color: var(--gold-300); border-color: rgba(255, 203, 61, .4); }
.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; padding: 16px 12px 14px; border-radius: 18px; border: 2px solid var(--well-line);
  background: radial-gradient(70% 100% at 50% 0%, rgba(255, 190, 50, .26), transparent 72%), var(--well); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); }
.prize .coin { width: 78px; height: 78px; animation: float 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(7, 3, 15, .55)) drop-shadow(0 0 22px rgba(255, 190, 50, .45)); }
.prize p { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 900; margin-top: 4px; }
.prize .amount { font-size: 44px; line-height: 1.05; color: var(--gold-400); }
.prize .amount small { font-size: .55em; color: #fff; }
.prize .amount b { font-weight: 400; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; }
.divider::before, .divider::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: rgba(10, 5, 28, .6); 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; min-height: 58px;
  background: linear-gradient(180deg, #4a30b0, #38228c); border: 2px solid rgba(0, 0, 0, .5); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16);
}
.lobby-row .who { min-width: 0; flex: 1; }
.lobby-row .who i { font-style: normal; font-weight: 700; color: var(--soft); }
.lobby-row .who > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.lobby-row .who > .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; white-space: normal; }
.lobby-row .who > .meta i { font-weight: 800; }
.duel-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.duel-facts .chip { font-size: 14px; padding: 4px 12px; }
.duel-facts .chip .ico { width: 20px; height: 20px; }
.duel-facts .mode-tag { font-size: 12px; padding: 3px 10px 4px; }
.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(--soft); }
.lobby-row .avatar { width: 40px; height: 40px; }
.lobby-row .avatar span { font-size: 18px; -webkit-text-stroke-width: 3px; }
.lobby-row.live { background: linear-gradient(180deg, #c23fc8, #84209c); padding-right: 12px; }
.lobby-row.live::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); animation: live 1.4s ease-in-out infinite; flex: none; }
.lobby-row.done { background: linear-gradient(180deg, #2c1b6e, #22135a); padding-right: 12px; }
.stake-col { text-align: right; white-space: nowrap; }
.stake-col b { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font: 400 18px var(--display); color: var(--gold-300); text-shadow: 0 2px 0 var(--ink); }
.stake-col b .ico { width: 22px; height: 22px; }
.stake-col span { font-size: 12px; color: var(--soft); }
.lobby-row .who .mode-tag, .mode-tag { display: inline-block; padding: 1px 8px 2px; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(180deg, #8df5b6, var(--green-500)); color: #053a20; font-size: 11px; font-weight: 900; }
.lobby-row .who .mode-tag.m-mirror, .mode-tag.m-mirror { background: linear-gradient(180deg, #d9d0ff, #9d8cf5); color: #1d0f52; }
.lobby-row .who .mode-tag.m-draft, .mode-tag.m-draft { background: linear-gradient(180deg, var(--gold-300), #f39a06); color: var(--gold-ink); }
.lobby-head { display: flex; align-items: center; gap: 8px; font-size: 19px; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.lobby-head span { -webkit-text-stroke: 0; font: 900 12px var(--body); padding: 1px 9px; border-radius: 99px; background: var(--well); border: 2px solid rgba(255, 203, 61, .35); color: var(--gold-300); }
.segs { display: inline-flex; border-radius: 12px; border: 3px solid var(--ink); overflow: hidden; background: #0d0624; }
.segs.wide { display: grid; grid-template-columns: repeat(3, 1fr); }
.seg { border: 0; background: transparent; color: var(--soft); font: 900 13px var(--body); padding: 8px 12px; cursor: pointer; transition: background .15s, color .15s; }
.seg:hover:not(.on) { background: rgba(157, 140, 245, .2); color: #fff; }
.seg + .seg { border-left: 3px solid var(--ink); }
.seg.on { background: linear-gradient(180deg, var(--gold-300), #f39a06); color: var(--gold-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(130, 55, 0, .3); }
.seg:focus-visible { outline-offset: -3px; }
.segs.wide .seg { padding: 13px 6px; font-size: 14px; }
.notice .btn { flex: none; align-self: center; }

.stake-in { font: 400 30px var(--display); text-align: center; letter-spacing: .04em; min-height: 62px; color: var(--gold-300); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.quick .btn { min-height: 38px; padding-inline: 4px; }

/* versus */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; margin: 4px -4px 0; }
.fighter { --c1: #8fd2ff; --c2: #3b93ff; --c3: #1a46b8; 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(7, 3, 15, .55)); }
.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), inset 0 0 0 3px rgba(255, 255, 255, .12); }
.fighter.red { --c1: #ffb0a8; --c2: #ff4860; --c3: #a3132f; }
.fighter.empty { --c1: #7d6fb5; --c2: #4c3f85; --c3: #2c2158; }
.fighter .ico { width: 62px; height: 62px; filter: drop-shadow(0 3px 0 rgba(7, 3, 15, .55)); }
.fighter .avatar { margin: 0 auto; width: 66px; height: 66px; }
.fighter .avatar span { font-size: 30px; }
.fighter .avatar svg { --shield: url(#g-night); }
.fighter .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; color: #fff; }
.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: #fff; 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; filter: drop-shadow(0 0 16px rgba(255, 190, 50, .55)); }
.enter .vs { animation: slam .55s var(--pop) .25s both; }
.vs::before, .vs::after { content: ''; position: absolute; inset: 7px; border-radius: 9px; border: 3px solid var(--ink); background: linear-gradient(180deg, var(--gold-300), #f39a06); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); }
.vs::after { transform: rotate(45deg); }
.vs b { position: relative; z-index: 1; font: 400 28px 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, #2c1976, #150a38); box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .65), inset 0 -6px 0 2px rgba(0, 0, 0, .3), 0 4px 0 var(--shadow), 0 0 16px rgba(255, 190, 50, .22);
  font: 400 30px var(--display); color: var(--gold-300); text-shadow: 0 2px 0 var(--ink); padding-bottom: 4px;
}
.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: 32px; height: 32px; margin-right: -15px; z-index: 1; filter: drop-shadow(0 2px 0 rgba(7, 3, 15, .6)); }
.timer .bar { position: relative; flex: 1; height: 20px; border-radius: 10px; border: 3px solid var(--ink); background: #0d0624; 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, var(--elixir-200) 0%, var(--elixir-500) 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(18, 7, 38, .6) 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, var(--red-500) 45%, #a3152d); }
.timer.low time { color: var(--red-300); }

/* 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: var(--well); border: 2px solid var(--well-line); 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, var(--gold-300), #f39a06); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--ink);
  font: 400 18px var(--display); color: var(--gold-ink); 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(--soft); line-height: 1.4; }
.steps p .ico { width: 18px; height: 18px; }
.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, #8df5b6, var(--green-500)); color: #053a20; font-weight: 900; font-size: 13px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.mode .ico { width: 16px; height: 16px; }
.mode.no { background: linear-gradient(180deg, #b4a8ea, #8376c2); color: #150a38; box-shadow: none; opacity: .9; 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: var(--gold-ink); font-size: 14px; line-height: 1.35; box-shadow: 0 4px 0 var(--shadow); 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 9px 14px; border-radius: 14px;
  border: 2px solid rgba(0, 0, 0, .5); background: linear-gradient(180deg, #3a2a7c, #2a1c62); box-shadow: inset 5px 0 0 #8d80c0, inset 0 2px 0 rgba(255, 255, 255, .12);
}
.log-row.win { background: linear-gradient(90deg, #6a4a1c, #3a2372 46%); box-shadow: inset 5px 0 0 var(--gold-400), inset 0 2px 0 rgba(255, 255, 255, .14); }
.log-row.loss { background: linear-gradient(90deg, #7c1c3c, #3a1c66 46%); box-shadow: inset 5px 0 0 var(--red-500), inset 0 2px 0 rgba(255, 255, 255, .12); }
.log-row .res { font: 400 17px var(--display); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; min-width: 4.4em; padding-left: 2px; }
.log-row.win .res { color: var(--gold-300); }
.log-row.loss .res { color: var(--red-300); }
.winners .log-row .res { min-width: 3.4em; }
.log-row .who { min-width: 0; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.log-row .who small { display: block; color: var(--soft); 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; }
.log-row .pay .ico.line { width: 14px; height: 14px; }
.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(86, 232, 196, .6); border-radius: 16px; padding: 12px; background: rgba(10, 5, 28, .5); }
.dev h3 { font: 900 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--aurora); margin-bottom: 10px; }

/* ---------- footer ---------- */
.foot { width: 100%; margin-top: 30px; background: linear-gradient(180deg, rgba(10, 5, 25, .55), rgba(7, 3, 15, .9)); border-top: 2px solid rgba(255, 203, 61, .14); }
.foot-in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 26px 16px max(26px, env(safe-area-inset-bottom)); display: grid; gap: 18px; text-align: center; justify-items: center; }
.foot-brand { display: flex; align-items: center; gap: 10px; text-align: left; }
.foot-brand .ico { width: 46px; height: 46px; }
.foot-brand p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.foot-links { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; font-size: 15px; font-weight: 900; }
.foot-legal { font-size: 12px; line-height: 1.5; color: var(--muted); font-weight: 700; max-width: 62ch; }
.foot-legal p + p { margin-top: 6px; }
.foot-legal .disclaimer { color: var(--soft); }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 60; transform: translate(-50%, -180%); 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, #ff6d80, #c21e3c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 var(--ink), 0 14px 26px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35); transition: transform .35s var(--pop); pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); }
#toast.ok { background: linear-gradient(180deg, #3fdc8a, #0f8a50); }

/* ---------- result overlay ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; overflow: hidden auto;
  background: radial-gradient(46% 34% at 50% 34%, rgba(255, 190, 50, .34), transparent 72%), radial-gradient(80% 60% at 50% 38%, #6a45d8, #2a1570 55%, #0d0624 100%); animation: fade .25s both;
}
#overlay.loss { background: radial-gradient(80% 60% at 50% 38%, #8a1f4e, #3a0d3a 58%, #0d0418 100%); }
#overlay.draw { background: radial-gradient(80% 60% at 50% 38%, #4c3f85, #1f1450 58%, #0a0519 100%); }
@keyframes fade { from { opacity: 0; } }
.result { position: relative; z-index: 1; width: 100%; max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.result .burst { position: absolute; left: 50%; top: 70px; width: 680px; height: 680px; margin: -340px 0 0 -340px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 220, 110, .36) 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: .22; }
.result h1 { font-size: clamp(56px, 17vw, 88px); animation: slam .6s var(--pop) .1s both; }
#overlay.win .result h1 { color: var(--gold-400); filter: drop-shadow(0 0 26px rgba(255, 190, 50, .6)); }
#overlay.loss .result h1 { color: var(--red-300); }
.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(7, 3, 15, .6)); animation: crown .5s var(--pop) both; }
.crowns .ico:nth-child(2) { width: 100px; height: 100px; 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: #2c1f66; --crown-band: #1f1450; --crown-gem: #40317f; opacity: .85; }
@keyframes crown { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.result .line { font-size: 18px; color: var(--soft); }
.result .line b { font-weight: 900; color: #fff; }
.reward { display: inline-flex; align-items: center; gap: 10px; padding: 8px 24px 10px 10px; border-radius: 99px; background: rgba(10, 5, 28, .78); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .6), 0 5px 0 var(--shadow), 0 0 34px rgba(255, 190, 50, .4); 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); color: var(--gold-300); }
@keyframes flip { 50% { transform: rotateY(180deg) scale(1.1); } }
.result .status { font-size: 14px; color: var(--soft); min-height: 1.4em; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(10, 5, 25, .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); } }

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .stat { justify-content: center; padding: 18px 12px; }
  .stat:nth-child(n) { border-top: 0; }
  .stat + .stat { border-left: 2px solid var(--hair); }
  .modes2 { grid-template-columns: 1fr 1fr; }
  .pool { grid-template-columns: repeat(4, 1fr); }
  .pcard { width: 56px; height: 76px; margin: 0 -8px; }
  .pcard .ico { width: 34px; height: 34px; }
  .hand.offer .pcard { width: 64px; height: 86px; margin: 0 7px; }
  .foot-in { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; column-gap: 40px; }
  .foot-links { justify-content: flex-end; justify-self: end; }
  .foot-legal { grid-column: 1 / -1; max-width: none; }
}

/* ---------- desktop ---------- */
@media (min-width: 1000px) {
  .top-in, main { max-width: var(--wrap); padding-inline: 32px; }
  .foot-in { padding-inline: 32px; }
  .top-in { padding-top: 12px; padding-bottom: 12px; }
  .brand-mark { width: 52px; height: 52px; } .brand-name { font-size: 30px; }
  .hud { gap: 12px; }
  .navlinks { display: flex; gap: 26px; margin-right: 14px; font-size: 15px; font-weight: 900; }
  .navlinks a { color: var(--soft); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
  .navlinks a:hover { color: #fff; border-color: var(--gold-400); }
  main { gap: 40px; padding-top: 34px; }
  .landing { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; min-height: min(620px, calc(100dvh - 210px)); }
  .landing .scene { order: 0; width: 100%; max-width: 700px; }
  .landing .scene.compact { max-width: 560px; }
  .hero-copy { align-items: stretch; text-align: left; gap: 18px; }
  .hero-copy h1 { font-size: clamp(46px, 4.2vw, 62px); }
  .hero-copy .lede { font-size: 20px; max-width: 34ch; }
  .lobby-solo { max-width: 860px; }
  body[data-page="home"] main { padding-top: 20px; }
  .lp-hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 30px; align-items: center; text-align: left; min-height: min(640px, calc(100dvh - 250px)); padding: 0; }
  .lp-hero .scene { order: 0; width: 100%; max-width: 760px; }
  .lp-copy { align-items: flex-start; gap: 22px; }
  .lp-copy h1 { font-size: clamp(60px, 5.5vw, 82px); }
  .lp-copy .lede { font-size: 21px; max-width: 37ch; }
  .cta { justify-content: flex-start; }
  .cta.center { justify-content: center; }
  .hero-stats { margin-top: 26px; }
  .stat { gap: 14px; padding: 22px 16px; }
  .stat .ico { width: 50px; height: 50px; }
  .stat b { font-size: 38px; }
  .stat span { font-size: 12px; }
  .sec { margin-top: 128px; }
  .sec-head { margin-bottom: 46px; }
  .steps3 { grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 90px; }
  .steps3 li + li::before { content: ''; position: absolute; top: -24px; right: calc(50% + 62px); width: calc(100% - 94px); border-top: 4px dotted rgba(255, 203, 61, .55); }
  .steps3 li { padding: 70px 26px 30px; }
  .steps3 h3 { font-size: 28px; }
  .steps3 p { font-size: 17px; }
  .modes2 { gap: 30px; }
  .mode-art { min-height: 210px; }
  .pcard { width: 66px; height: 90px; margin: 0 -9px; border-radius: 11px; }
  .pcard .ico { width: 40px; height: 40px; }
  .pcard .cost { width: 27px; height: 27px; font-size: 14px; }
  .hand.offer .pcard { width: 76px; height: 102px; margin: 0 10px; }
  .hand.offer .pcard .ico { width: 44px; height: 44px; }
  .eq { font-size: 46px; margin: 0 12px; }
  .mode-copy { padding: 22px 28px 28px; }
  .mode-copy h3 { font-size: 36px; }
  .mode-copy p { font-size: 18px; }
  .points { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
  .points li { padding: 20px; }
  .fee-grid { grid-template-columns: 1.5fr 1fr; gap: 30px; }
  .potsplit { padding: 30px 30px 28px; gap: 20px; }
  .potbar { height: 68px; }
  .potbar i { font-size: 24px; }
  .split b { font-size: 42px; }
  .split span { font-size: 14px; }
  .token { padding: 30px; }
  .token-art { width: 120px; height: 108px; }
  .token-art .ico:first-child { width: 86px; height: 86px; } .token-art .ico:last-child { width: 70px; height: 70px; }
  .token h3 { font-size: 28px; }
  .token p { font-size: 17px; }
  .pool { gap: 18px; }
  .pool b { font-size: 42px; } .pool .ico { width: 56px; height: 56px; } .pool span { font-size: 12px; }
  .games { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .game { flex-direction: column; align-items: flex-start; padding: 24px; }
  .game .btn { align-self: stretch; }
  .game > .ico { width: 76px; height: 76px; }
  .game h3 { font-size: 27px; } .game p { font-size: 16px; }
  .final-card { padding: 56px 30px 54px; gap: 14px; }
  .final-mark { width: 132px; height: 132px; }
  .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: 420px minmax(0, 1fr); grid-template-areas: "player arena" "lobby arena" "log arena" ". arena"; grid-template-rows: auto auto auto 1fr; gap: 36px 40px; align-items: start; }
  .dash > .a-player { grid-area: player; } .dash > .a-arena { grid-area: arena; } .dash > .a-log { grid-area: log; } .dash > .a-lobby { grid-area: lobby; }
  .dash > .a-arena { padding: 38px 36px 32px; }
  .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, .pill.tag.mock { display: none; }
  .eyebrow { font-size: 10.5px; letter-spacing: .1em; padding-inline: 10px 12px; }
  .sec { margin-top: 68px; }
  main { padding-inline: 14px; gap: 28px; }
  .top-in { padding-inline: 12px; }
  .brand-name { font-size: 23px; } .brand-mark { width: 40px; height: 40px; }
  .brand { gap: 6px; }
  .hud { gap: 6px; }
  .panel { padding-inline: 14px; }
  .tiles span { width: 40px; height: 52px; font-size: 27px; }
  .fighter h3 { font-size: 17px; }
  .btn.big { font-size: 22px; padding-inline: 18px; }
  .lp-hero .cta { flex-direction: column; align-items: stretch; width: 100%; }
}
@media (max-width: 350px) {
  .ribbon { font-size: 15px; padding-inline: 16px; }
  .tiles span { width: 35px; height: 48px; font-size: 24px; }
  .pill.tag { display: none; }
  .brand-name { font-size: 20px; }
}

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