/* MinCasino: warm gold and ember-red over a dark casino floor. */
:root {
  --bg: #160b0a;
  --bg-deep: #0c0606;
  --panel: #25120f;
  --panel-2: #351914;
  --panel-3: #502318;
  --line: rgba(255, 183, 69, .2);
  --line-strong: rgba(255, 202, 98, .4);
  --text: #fff5df;
  --muted: #d3bda0;
  --muted-2: #a88e72;
  --green: #ffd166;
  --green-2: #bd741c;
  --mint: #ffe4a0;
  --purple: #f5a524;      /* legacy alias: primary accent */
  --purple-2: #b84425;    /* legacy alias: primary accent, darker */
  --pink: #ef593b;        /* legacy alias: secondary accent */
  --amber: #ffd166;
  --cyan: #ffb347;
  --violet: #ff8a62;
  --glow-mint: rgba(255, 187, 63, .26);
  --glow-cyan: rgba(255, 94, 53, .2);
  --red: #ff654d;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px rgba(0, 6, 16, .55);
  --nav-height: 64px;
  --chat-w: 300px;
  --display: "Silkscreen", "Press Start 2P", ui-monospace, "SF Mono", Menlo, monospace;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  /* clip, not hidden: `hidden` makes body a scroll container and forces overflow-y:auto,
     which silently breaks `position: sticky` on the topbar so it scrolls away. `clip` still
     hides horizontal overflow (html clips too) but keeps the viewport as the sticky root. */
  overflow-x: clip;
  background:
    radial-gradient(1100px 780px at 4% 0%, rgba(189, 94, 28, .22), transparent 70%),
    radial-gradient(1000px 800px at 100% 20%, rgba(174, 37, 22, .2), transparent 70%),
    radial-gradient(900px 900px at 30% 100%, rgba(118, 50, 14, .2), transparent 70%),
    var(--bg);
}
body.modal-open { overflow: hidden; }
button { border: 0; cursor: pointer; color: inherit; font-family: inherit; }
a { color: inherit; text-decoration: none; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
::selection { color: var(--text); background: rgba(74, 222, 128, .3); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.pixel { font-family: var(--display); letter-spacing: .02em; }

html { overflow-x: clip; }
/* These sit deliberately off the edge, so they must not be able to widen the page. */
.ambient { position: fixed; pointer-events: none; border-radius: 50%; opacity: .1; z-index: -1; will-change: transform, opacity; }
/* The two blobs were static. Drifting them on long, mismatched cycles makes the page
   breathe without ever repeating a pattern the eye can lock on to. */
.ambient-one { width: 640px; height: 640px; background: radial-gradient(circle, #ffad35 0%, rgba(255, 118, 42, .35) 30%, transparent 68%); right: -260px; top: -50px; animation: ambient-drift-one 34s ease-in-out infinite; }
.ambient-two { width: 560px; height: 560px; background: radial-gradient(circle, #a52b20 0%, rgba(165, 43, 32, .35) 30%, transparent 68%); left: 14%; bottom: -350px; animation: ambient-drift-two 47s ease-in-out infinite; }
@keyframes ambient-drift-one {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .1; }
  35% { transform: translate(-90px, 70px) scale(1.18); opacity: .16; }
  70% { transform: translate(40px, 150px) scale(.92); opacity: .09; }
}
@keyframes ambient-drift-two {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .1; }
  40% { transform: translate(120px, -110px) scale(1.22); opacity: .15; }
  75% { transform: translate(-70px, -40px) scale(.95); opacity: .08; }
}

/* A slow drift of ore dust behind everything. Two tiled layers of radial dots moving at
   different speeds give parallax for the price of two background-position animations -
   no elements, no script, no per-frame work. */
.ambient-dust {
  position: fixed; inset: -10% -10% -10% -10%; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255, 214, 137, .55), transparent 60%),
    radial-gradient(1.3px 1.3px at 62% 68%, rgba(255, 117, 65, .45), transparent 60%),
    radial-gradient(1.1px 1.1px at 84% 34%, rgba(255, 226, 122, .4), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 82%, rgba(255, 155, 105, .38), transparent 60%);
  background-size: 340px 340px, 470px 470px, 280px 280px, 560px 560px;
  /* static: animating background-position here repainted the entire viewport every frame */
}
@keyframes ambient-dust {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 340px -680px, -470px -940px, 280px -560px, -560px -1120px; }
}

/* A single vein of light that sweeps the page every so often, like a torch passing
   behind the wall. Long gap, short sweep - it reads as atmosphere, not as a loop. */
.ambient-sweep {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 117, 65, .07) 47%, rgba(255, 214, 137, .09) 50%, rgba(255, 117, 65, .07) 53%, transparent 60%);
  display: none;
}
@keyframes ambient-sweep {
  0%, 76% { opacity: 0; transform: translateX(-60%); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-one, .ambient-two, .ambient-dust, .ambient-sweep { animation: none; }
  .ambient-sweep { display: none; }
}

/* Daily referral and reward announcement. */
.nav-item { position: relative; }
.nav-item.has-notice::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border: 2px solid var(--panel); border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 12px rgba(255, 190, 67, .8);
}
.welcome-promo {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 24px;
  overflow-y: auto; background: rgba(10, 4, 3, .9); backdrop-filter: blur(14px);
  animation: welcome-promo-in .28s ease-out both;
}
.welcome-promo__card {
  position: relative; width: min(100%, 720px); padding: clamp(30px, 7vw, 72px);
  border: 1px solid rgba(255, 195, 78, .48); border-radius: 26px;
  background: radial-gradient(ellipse at 50% 0%, rgba(177, 61, 31, .42), transparent 60%),
    linear-gradient(145deg, #351811, #160b09 72%);
  box-shadow: 0 32px 120px rgba(0, 0, 0, .7), 0 0 80px rgba(228, 94, 33, .18);
  text-align: center;
}
.welcome-promo__close {
  position: absolute; top: 14px; right: 16px; display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%;
  background: rgba(255, 255, 255, .05); color: var(--text); font-size: 26px;
}
.welcome-promo__eyebrow { color: var(--amber); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.welcome-promo__card h2 { margin: 20px 0 14px; color: #ffe19a; font: 900 clamp(32px, 8vw, 64px)/1.04 var(--display); text-shadow: 0 0 28px rgba(255, 161, 52, .28); }
.welcome-promo__card p { max-width: 490px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.65; }
.welcome-promo__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0; }
.welcome-promo__perks span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 190, 67, .07); color: #ffe4ae; font-size: 13px; }
.welcome-promo__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.welcome-promo__footnote { display: block; margin-top: 22px; color: var(--muted-2); font-size: 12px; }
.welcome-promo-open { overflow: hidden; }
@keyframes welcome-promo-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) {
  .welcome-promo { padding: 12px; }
  .welcome-promo__card { padding: 56px 22px 28px; border-radius: 20px; }
  .welcome-promo__card p { font-size: 15px; }
  .welcome-promo__actions { flex-direction: column; }
  .welcome-promo__actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .welcome-promo { animation: none; } }

/* ------------------------------------------------------------ level + charts */
.level-panel { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; margin-bottom: 18px; }
.level-head { display: flex; align-items: center; gap: 16px; }
.level-badge {
  display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 62px;
  border-radius: 14px; color: #05210f;
  background: linear-gradient(160deg, var(--mint), var(--green));
  box-shadow: 0 8px 22px rgba(74, 222, 128, .28);
}
.level-badge small { font-size: 7px; font-weight: 900; letter-spacing: .16em; opacity: .8; }
.level-badge strong { font-family: var(--display); font-size: 21px; line-height: 1; }
.level-copy h3 { margin: 0 0 3px; font-size: 13px; }
.level-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.level-copy strong { color: var(--mint); }
.level-bar { height: 8px; margin: 14px 0 7px; border-radius: 6px; background: rgba(126, 191, 255, .1); overflow: hidden; }
.level-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green), var(--mint)); box-shadow: 0 0 14px rgba(74, 222, 128, .45); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.level-scale { display: flex; justify-content: space-between; gap: 12px; color: var(--muted-2); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
/* The card is far taller than its numbers need, so the explainer fills the space it was
   leaving empty: centred, and large enough to actually read. */
.level-note { max-width: 62ch; margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.75; text-align: center; }
.level-note strong { color: var(--text); }

/* The chart is drawn to a 600-unit viewBox and stretched, so nothing may hang outside
   it: the end dot and the legend both used to spill past the panel's edge. */
/* .panel carries no padding of its own - its children provide it - so the chart has to
   bring its own or the legend ends up sitting on the panel's border. */
.chart-wrap { min-width: 0; padding: 14px 20px 16px; overflow: hidden; }
.profit-chart { width: 100%; max-width: 100%; height: 180px; display: block; overflow: hidden; }
.chart-zero { stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.chart-grid { stroke: rgba(126, 191, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { position: absolute; left: 10px; top: 10px; bottom: 44px; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted-2); font-size: 9px; font-weight: 800; pointer-events: none; }
.chart-wrap { position: relative; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(74, 222, 128, .45)); }
.chart-area { fill: rgba(74, 222, 128, .13); stroke: none; }
.chart-dot { fill: var(--mint); stroke: rgba(5, 33, 15, .8); stroke-width: 2; vector-effect: non-scaling-stroke; }
.profit-chart.down .chart-line { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(255, 113, 142, .4)); }
.profit-chart.down .chart-area { fill: rgba(255, 113, 142, .12); }
.profit-chart.down .chart-dot { fill: var(--red); }
.chart-legend { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.chart-legend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend strong { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.best-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid rgba(250, 204, 21, .35); border-radius: 8px; color: #ffe27a; background: rgba(250, 204, 21, .1); font-size: 10px; font-weight: 800; }
.best-chip svg { width: 13px; height: 13px; }
.breakdown-table td:first-child { min-width: 150px; }
.breakdown-bar { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(126, 191, 255, .12); overflow: hidden; }
.breakdown-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(74, 222, 128, .8), rgba(126, 191, 255, .6)); }
.profile-main > .panel { margin-bottom: 18px; }

/* ------------------------------------------------- home page atmosphere only */
/* Fixed colored light and a fine arcade grid follow every route. */
.ambience { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambience::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 38%, rgba(0, 233, 188, .14), transparent 55%), radial-gradient(ellipse at 100% 72%, rgba(144, 87, 255, .16), transparent 55%), linear-gradient(rgba(137, 232, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 232, 255, .035) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35)); }
.ambient-haze {
  position: absolute; left: 50%; top: -180px; width: min(1100px, 130%); height: 560px;
  margin-left: min(-550px, -65%);
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--page-accent, #60f99b) 23%, transparent), transparent 72%),
              radial-gradient(45% 55% at 72% 55%, rgba(126, 191, 255, .18), transparent 74%);
  /* No blur filter: a blurred layer this size is repainted every frame of its animation
     and was the single most expensive thing on the page. Soft edges come from the
     gradients themselves. */
  animation: ambient-haze 23s ease-in-out infinite;
}
/* Tab in the background: every ambient animation stops, nothing is painted for nobody. */
body.is-hidden .ambience *, body.is-hidden .ambient { animation-play-state: paused !important; }
@keyframes ambient-haze {
  0%, 100% { opacity: .75; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 1; transform: translate3d(22px, 14px, 0) scale(1.06); }
}
.ambient-motes { position: absolute; inset: 0; overflow: hidden; }
.ambient-motes i {
  position: absolute; bottom: -4vh; border-radius: 50%;
  background: var(--page-mote, rgba(180, 245, 255, .45));
  box-shadow: 0 0 6px var(--page-mote-glow, rgba(126, 191, 255, .4));
  animation-name: ambient-mote; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes ambient-mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: .5; }
  85% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(var(--drift, 0), -108vh, 0); }
}
/* Page content sits above the layer. */
.main-shell, .app-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ambience { display: none; } }

/* ------------------------------------------------------------------ shell */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.main-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --------------------------------------------------------------- top nav */
.topbar {
  height: var(--nav-height);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 45;               /* above the pinned chat dock (41) so the header always covers its top edge */
  border-bottom: 1px solid var(--line);
  /* No backdrop blur: a sticky bar blurring the page repaints on every scroll frame. */
  background: linear-gradient(115deg, #32140e, #21100d 50%, #3b1710);
  box-shadow: 0 1px 0 rgba(255, 196, 88, .28), 0 4px 24px rgba(196, 49, 29, .2);
}
.topbar .nav-item:hover, .topbar .nav-item.active {
  color: #fff0c9;
  border-color: rgba(255, 190, 83, .5);
  background: linear-gradient(135deg, rgba(255, 176, 49, .16), rgba(193, 52, 31, .2));
}
.topbar .nav-item.active { box-shadow: inset 0 0 0 1px rgba(255, 190, 83, .14), 0 4px 16px rgba(192, 48, 29, .14); }
.topbar .nav-home { color: #ffdf9a; border-color: rgba(255, 190, 83, .38); background: rgba(190, 60, 34, .16); }
.topbar .nav-home:hover { color:#fff0c9; border-color:rgba(255,190,83,.65); background:linear-gradient(135deg,rgba(255,176,49,.2),rgba(193,52,31,.24)); }
.topbar .nav-home.active { color:#35150d; background:linear-gradient(105deg,#ffd36e,#e96b38); border-color:rgba(255,207,103,.75); box-shadow:0 6px 18px rgba(192,48,29,.24); }
.topbar-left { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Home is a compact square (just the house icon). On desktop it is pushed to the right edge
   of the logo zone (over the chat's right edge); otherwise it sits right after the logo. */
.nav-home { width: 38px; padding: 0; justify-content: center; flex: 0 0 auto; color: #bdf5d3; border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); }
.nav-home:hover { color: #eafff2; border-color: rgba(74, 222, 128, .7); background: rgba(74, 222, 128, .2); }
.nav-home.active { color: #05210f; background: linear-gradient(180deg, var(--mint), var(--green)); border-color: rgba(74, 222, 128, .65); box-shadow: 0 6px 18px rgba(74, 222, 128, .28); }
.page-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-title-row h1 { margin: 6px 0 8px; }
.page-head .page-title-row h1, .pf2-who .page-title-row h1 { margin: 0; }
.page-head .page-title-row { gap: 12px; }
.page-title-row .page-home { margin-top: -2px; width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; }
.nav-home .nav-icon { color: inherit; }
.nav-home .nav-icon svg { width: 18px; height: 18px; }
.brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(227, 93, 158, .35));
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--mint);
  text-shadow: 0 0 20px var(--glow-mint);
}
.brand-copy small { color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .2em; margin-top: 5px; }

/* No overflow here on purpose: the games dropdown is a child of this cluster, and any
   overflow value other than visible clips it out of existence. The bar is kept inside
   the window by collapsing to the menu button below --nav-collapse instead. */
.nav-cluster { display: flex; align-items: center; gap: 6px; margin-left: 12px; min-width: 0; }
.nav-item { flex: 0 0 auto; }
.nav-item {
  height: 38px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--muted);
  background: rgba(126, 191, 255, .05);
  font-size: 12px; font-weight: 800;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav-item:hover { color: var(--text); background: rgba(126, 191, 255, .1); }
/* The wallet is what players come back for, so it carries a coin-gold accent
   instead of sitting grey next to the other nav items. */
.nav-item[data-route="wallet"] { color: #ffd98a; border-color: rgba(250, 204, 21, .4); background: rgba(250, 204, 21, .1); }
.nav-item[data-route="wallet"]:hover { color: #fff4d2; border-color: rgba(250, 204, 21, .7); background: rgba(250, 204, 21, .2); }
.nav-item[data-route="wallet"] .nav-icon { color: inherit; }
.nav-item[data-route="wallet"].active { color: #2a1a00; background: linear-gradient(180deg, #ffe393, #f5b301); border-color: rgba(250, 204, 21, .65); box-shadow: 0 6px 18px rgba(250, 204, 21, .28); }
/* Each destination in the nav gets its own colour, in the same frame as Wallet, so the
   cluster reads as a set of shortcuts rather than one highlighted item. */
/* Rewards / Referrals / Leaderboard / Promo share one treatment - tinted text and icon,
   a 10% wash, a 35% border, filled when active - and take their colours from the same
   "gem" set as the level ranks: amethyst, diamond, lava, rose quartz. Wallet stays gold. */
.nav-item#gamesToggle               { --nav-c: 74, 222, 128;   --nav-text: #bdf5d3; --nav-ink: #05210f; --nav-hi: #eafff2; }
.nav-item[data-route="rewards"]     { --nav-c: 180, 140, 255; --nav-text: #d4c0ff; --nav-ink: #1a0f33; --nav-hi: #e2d4ff; }
.nav-item[data-route="referrals"]   { --nav-c: 95, 224, 242;  --nav-text: #b6f3fb; --nav-ink: #04262c; --nav-hi: #d7fbff; }
.nav-item[data-route="leaderboard"] { --nav-c: 255, 138, 76;  --nav-text: #ffc7a8; --nav-ink: #2e1000; --nav-hi: #ffe0cc; }
.nav-item[data-route="promo"]       { --nav-c: 255, 122, 209; --nav-text: #ffbfe6; --nav-ink: #33082a; --nav-hi: #ffd9f0; }
.nav-item#gamesToggle, .nav-item[data-route="rewards"], .nav-item[data-route="referrals"], .nav-item[data-route="leaderboard"], .nav-item[data-route="promo"] {
  color: var(--nav-text); border-color: rgba(var(--nav-c), .35); background: rgba(var(--nav-c), .1);
}
.nav-item#gamesToggle .nav-icon, .nav-item#gamesToggle .nav-badge { color: inherit; }
.nav-item#gamesToggle .nav-badge { background: rgba(var(--nav-c), .18); }
.nav-item#gamesToggle:hover, .nav-item[data-route="rewards"]:hover, .nav-item[data-route="referrals"]:hover, .nav-item[data-route="leaderboard"]:hover, .nav-item[data-route="promo"]:hover {
  color: var(--nav-hi); border-color: rgba(var(--nav-c), .65); background: rgba(var(--nav-c), .2);
}
.nav-item#gamesToggle.active, .nav-item[data-route="rewards"].active, .nav-item[data-route="referrals"].active, .nav-item[data-route="leaderboard"].active, .nav-item[data-route="promo"].active {
  color: var(--nav-ink); border-color: rgba(var(--nav-c), .65);
  background: linear-gradient(180deg, var(--nav-hi), rgb(var(--nav-c)));
  box-shadow: 0 6px 18px rgba(var(--nav-c), .28);
}

.nav-item[data-route="leaderboard"] .nav-icon,
.nav-item[data-route="promo"] .nav-icon { color: inherit; }

/* ---------------------------------------------------- per-page accent ---
   Each header button already has its own colour. The page it opens now carries that same
   colour, so the button and the page it produced read as one thing: the ambient haze, the
   heading, the eyebrow and the section rules all follow --page-accent. Routes with no
   button of their own keep the site's green. */
body { --page-accent: #4ade80; --page-accent-soft: rgba(74, 222, 128, .13); --page-haze: rgba(74, 222, 128, .085); --page-mote: rgba(180, 245, 255, .45); --page-mote-glow: rgba(126, 191, 255, .4); }
body[data-page="rewards"]     { --page-accent: #b48cff; --page-accent-soft: rgba(180, 140, 255, .14); --page-haze: rgba(180, 140, 255, .1); --page-mote: rgba(220, 200, 255, .45); --page-mote-glow: rgba(180, 140, 255, .45); }
body[data-page="referrals"]   { --page-accent: #5fe0f2; --page-accent-soft: rgba(95, 224, 242, .14); --page-haze: rgba(95, 224, 242, .1); --page-mote: rgba(190, 245, 255, .45); --page-mote-glow: rgba(95, 224, 242, .45); }
body[data-page="leaderboard"] { --page-accent: #ff8a4c; --page-accent-soft: rgba(255, 138, 76, .14); --page-haze: rgba(255, 138, 76, .1); --page-mote: rgba(255, 205, 170, .42); --page-mote-glow: rgba(255, 138, 76, .42); }
body[data-page="wallet"]      { --page-accent: #f5b301; --page-accent-soft: rgba(250, 204, 21, .14); --page-haze: rgba(250, 204, 21, .1); --page-mote: rgba(255, 227, 147, .42); --page-mote-glow: rgba(250, 204, 21, .42); }
body[data-page="promo"]       { --page-accent: #ff7ad1; --page-accent-soft: rgba(255, 122, 209, .14); --page-haze: rgba(255, 122, 209, .1); --page-mote: rgba(255, 190, 230, .42); --page-mote-glow: rgba(255, 122, 209, .42); }

/* A wash of the page's colour behind its heading, so the tint is felt before it is read. */
.page-heading { position: relative; }
.page-heading::before {
  content: ''; position: absolute; left: -24px; right: -24px; top: -40px; height: 190px;
  z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(60% 70% at 20% 40%, var(--page-accent-soft), transparent 72%);
  filter: blur(18px);
}
.page-heading .eyebrow { color: var(--page-accent); }
.page-heading h1 { color: var(--page-accent); }

.nav-item.active { color: #051a12; background: linear-gradient(180deg, var(--mint), var(--green)); border-color: rgba(74, 222, 128, .5); }
.nav-item.active .nav-icon { color: inherit; }
.nav-icon { width: 17px; height: 17px; display: inline-flex; }
.nav-icon svg, .mobile-menu svg, .top-login svg, .balance-plus svg, .icon-button svg,
.account-menu svg, .section-action svg, .stat-icon svg { width: 100%; height: 100%; }
.nav-badge { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 20px; background: rgba(74, 222, 128, .16); color: var(--mint); font-size: 10px; font-weight: 800; }
.nav-item.active .nav-badge { background: rgba(4, 24, 14, .22); color: #062b18; }

.games-dropdown { position: relative; }
/* The promo giveaway is one line, not a banner, and disappears entirely once claimed
   rather than turning into a notice about itself. */
.promo-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 11px 16px;
  border: 1px solid rgba(245, 179, 1, .3); border-radius: var(--radius-sm);
  background: rgba(245, 179, 1, .07);
  color: var(--muted); font-size: 12px;
}
.promo-hint span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.promo-hint svg { width: 14px; height: 14px; color: var(--amber); flex: 0 0 auto; }
.promo-hint strong { color: #ffd98a; font-family: var(--display); letter-spacing: .06em; }
.promo-hint .outline-button { flex: 0 0 auto; min-height: 32px; padding: 0 14px; font-size: 10px; }

/* DonutFlip-style mega panel: a wide "All games" column (two sub-columns of every game),
   then a Duel column and a Live column. */
.games-menu {
  position: absolute; top: 46px; left: 0;
  padding: 12px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--panel-2);
  box-shadow: var(--shadow);
  z-index: 60;
}
.games-mega { display: flex; align-items: flex-start; gap: 0; }
.games-mega-col { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.games-mega-col:first-child { padding-left: 2px; }
.games-mega-col:last-child { padding-right: 2px; }
.games-mega-col + .games-mega-col { border-left: 1px solid var(--line); }
.games-mega-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 11px; letter-spacing: .1em;
  color: var(--muted-2); text-transform: uppercase; padding: 0 2px 3px;
}
.games-mega-head span {
  min-width: 18px; padding: 1px 6px; border-radius: 20px;
  background: rgba(74, 222, 128, .14); color: var(--mint);
  font-family: var(--display); font-size: 9px; font-weight: 900; text-align: center;
}
.games-mega-duel .games-mega-head span { background: rgba(96, 165, 250, .18); color: #9ec5ff; }
.games-mega-live .games-mega-head span { background: rgba(74, 222, 128, .18); color: var(--mint); }
.games-mega-list { display: grid; gap: 6px; }
.games-mega-all .games-mega-list { grid-template-columns: repeat(2, minmax(148px, 1fr)); }
.games-mega-duel .games-mega-list, .games-mega-live .games-mega-list { grid-template-columns: minmax(150px, 1fr); }
/* Each entry is a small tile: the game's art and its name. */
.games-mega-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 42px; padding: 6px 9px;
  border: 1px solid transparent; border-radius: 9px; background: rgba(126, 191, 255, .035);
  color: var(--text); font-size: 12px; font-weight: 700; text-align: left;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.games-mega-item:hover {
  border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1);
  transform: translateY(-1px);
}
.games-mega-item img { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; }

.topbar-actions { display: flex; align-items: center; gap: 11px; margin-left: auto; position: relative; flex: 0 0 auto; }
.live-indicator {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
  height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, .22); background: rgba(74, 222, 128, .07);
  color: var(--green); font-weight: 900; font-size: 10px; letter-spacing: .12em;
}
.live-count { color: var(--muted); font-size: 10px; letter-spacing: 0; font-weight: 700; white-space: nowrap; }
.live-count::before { content: "·"; margin-right: 6px; color: rgba(74, 222, 128, .5); }
.status-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(74, 222, 128, .1), 0 0 12px rgba(74, 222, 128, .8); }
/* v2 online counter: the number is the point, the ring pulses like a heartbeat */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap;
  height: 34px; padding: 0 13px 0 11px; border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, .28);
  background: linear-gradient(180deg, rgba(74, 222, 128, .12), rgba(74, 222, 128, .04)), rgba(3, 16, 30, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.live-ring { position: relative; align-self: center; width: 10px; height: 10px; margin-right: 2px; }
.live-ring i { position: absolute; inset: 0; border-radius: 50%; background: #39e36c; box-shadow: 0 0 10px rgba(57, 227, 108, .9); }
.live-ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid #39e36c; opacity: 0; animation: live-ring 2.2s ease-out infinite; }
@keyframes live-ring { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } }
.live-number { font-family: var(--display); font-size: 12.5px; line-height: 1; color: #fff; letter-spacing: .02em; text-shadow: 0 0 12px rgba(74, 222, 128, .35); }
.live-word { font-size: 8.5px; line-height: 1; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: rgba(74, 222, 128, .8); }
@media (prefers-reduced-motion: reduce) { .live-ring::before { animation: none; } }
/* the Discord button: Discord blue, the real mark, sat flush with the other 34px controls */
.nav-discord {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px;
  border-radius: 11px; border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #6b76f7, #4e5ae0);
  color: #fff; font-weight: 900; font-size: 11.5px; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(88, 101, 242, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.nav-discord:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 6px 18px rgba(88, 101, 242, .45), inset 0 1px 0 rgba(255, 255, 255, .2); }
.nav-discord-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; }
.nav-discord-icon svg { width: 16px; height: 16px; }

.balance-pill {
  height: 42px; display: flex; align-items: center; gap: 9px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(3, 20, 36, .9);
}
.coin-image { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(245, 165, 36, .4)); }
.balance-copy { display: flex; flex-direction: column; min-width: 62px; }
.balance-copy small { color: var(--muted-2); font-size: 9px; }
.balance-copy strong { font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* The wallet button lives inside the balance pill and is the one control the whole
   site exists to get pressed, so it is the brightest thing in the bar: a lit coin-gold
   gradient, a coloured shadow that reads as a glow on the dark chrome, and a slow
   breathe so the eye catches it without it ever becoming a flashing distraction. */
.balance-plus {
  height: 32px; padding: 0 11px 0 9px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 9px; color: #2a1a00;
  font-size: 9px; font-weight: 900; letter-spacing: .1em;
  background: linear-gradient(135deg, #fff1b8 0%, #ffe393 38%, #f5b301 100%);
  box-shadow: 0 0 0 1px rgba(255, 227, 147, .6),
              0 4px 16px rgba(250, 204, 21, .45),
              inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: deposit-breathe 3s ease-in-out infinite;
}
.balance-plus:hover { filter: brightness(1.1); transform: translateY(-1px); animation-play-state: paused; }
.balance-plus:active { transform: translateY(0); }
.balance-plus svg { width: 14px; height: 14px; stroke-width: 2.4; }
.balance-plus-label { line-height: 1; }
@keyframes deposit-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 227, 147, .6), 0 4px 16px rgba(250, 204, 21, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 227, 147, .85), 0 6px 24px rgba(250, 204, 21, .78), inset 0 1px 0 rgba(255, 255, 255, .7); }
}
@media (prefers-reduced-motion: reduce) { .balance-plus { animation: none; } }

.sound-toggle {
  width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px;
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); background: rgba(255, 255, 255, .03);
}
.sound-toggle:hover { color: var(--cyan); border-color: rgba(86, 184, 245, .3); }
.sound-toggle.muted { color: var(--muted-2); opacity: .6; }
.sound-toggle svg { width: 15px; height: 15px; }

.top-login {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px;
  border-radius: 9px;
  color: #05210f;
  background: linear-gradient(180deg, var(--mint), var(--green));
  font-family: var(--display); font-size: 12px; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(74, 222, 128, .26);
  transition: transform .16s ease, box-shadow .16s ease;
}
.top-login:hover { transform: translateY(-1px); box-shadow: 0 10px 30px var(--glow-mint), 0 0 20px var(--glow-cyan); }
.top-login svg { width: 14px; height: 14px; }

.account-chip { height: 40px; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(126, 191, 255, .05); cursor: pointer; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; overflow: hidden; background: linear-gradient(135deg, #16a34a, #4ade80); color: #04200f; font-weight: 900; font-size: 12px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.account-name { width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.icon-button { width: 22px; height: 26px; display: grid; place-items: center; background: transparent; color: var(--muted); }
.icon-button svg { width: 14px; height: 14px; }
.account-menu { position: absolute; top: 50px; right: 0; width: 190px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel-2); box-shadow: var(--shadow); z-index: 60; }
.account-menu button { width: 100%; height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 9px; color: var(--muted); border-radius: 7px; background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.account-menu button:hover { color: var(--text); background: rgba(126, 191, 255, .08); }
.account-menu svg { width: 15px; height: 15px; }
.mobile-menu { display: none; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); }

.content { width: min(1240px, 100%); margin: 0 auto; padding: 32px 28px 64px; flex: 1; }
.page { animation: fade-in .26s ease both; }

/* ------------------------------------------------------------ home hero */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hero {
  min-height: 190px; position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 26px 28px;
  border: 1px solid rgba(96, 249, 155, .4); border-radius: var(--radius);
  background-image:
    linear-gradient(100deg, rgba(4, 20, 14, .96) 0%, rgba(4, 20, 14, .72) 45%, rgba(4, 20, 14, .1) 100%),
    url('/assets/crash-mine-bg.webp');
  background-size: cover; background-position: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3), 0 0 26px rgba(96, 249, 155, .12), inset 0 1px 0 rgba(160, 255, 209, .12);
}
.hero::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; background: linear-gradient(90deg, transparent, var(--mint), var(--cyan), transparent); box-shadow: 0 0 16px var(--glow-mint); pointer-events: none; }
.hero-content { position: relative; z-index: 1; max-width: 330px; }
.hero h1 { margin: 0 0 10px; font-family: var(--display); font-size: 25px; line-height: 1.25; color: var(--mint); }
.hero-copy { margin: 0; color: #b6cfe2; font-size: 12px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* rain card */
.rain-card {
  position: relative; overflow: hidden;
  padding: 22px 24px;
  border: 1px solid rgba(74, 222, 128, .28); border-radius: var(--radius);
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(74, 222, 128, .16), transparent 70%),
    linear-gradient(150deg, rgba(8, 42, 28, .96), rgba(4, 20, 32, .96));
}
.rain-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: repeating-linear-gradient(115deg, rgba(134, 239, 172, .16) 0 1px, transparent 1px 9px);
  mask-image: linear-gradient(180deg, transparent, #000);
}
.rain-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.rain-head h2 { margin: 0; font-family: var(--display); font-size: 26px; color: var(--mint); }
.tip-rain-button {
  height: 30px; padding: 0 12px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  color: #06210f; background: linear-gradient(180deg, var(--mint), var(--green));
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
}
.tip-rain-button svg { width: 13px; height: 13px; }
.rain-copy { position: relative; z-index: 1; margin: 12px 0 0; max-width: 400px; color: #9fc7b4; font-size: 11px; line-height: 1.6; font-weight: 600; }
.rain-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.rain-stat {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid rgba(74, 222, 128, .3); border-radius: 8px;
  background: rgba(3, 24, 16, .7);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rain-stat img, .rain-stat svg { width: 16px; height: 16px; }
.rain-winners { position: relative; z-index: 1; margin-top: 12px; color: var(--muted); font-size: 10px; }

/* Home carousel: slides are stacked, only the active one is laid out, and the dashes
   underneath fill over the ten seconds each slide is up. */
.home-carousel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Every slide occupies the same grid cell, so the track is always as tall as the tallest
   card and never resizes as it rotates. The inactive ones were display:none, which left
   the track's height following whichever card happened to be showing - that is what made
   the page shift every ten seconds. visibility:hidden also keeps them out of the
   accessibility tree and out of the tab order. */
.carousel-track { position: relative; flex: 1; display: grid; grid-template-areas: "slide"; }
.carousel-slide { grid-area: slide; display: block; visibility: hidden; opacity: 0; pointer-events: none; }
.carousel-slide.active { visibility: visible; opacity: 1; pointer-events: auto; animation: carousel-in .32s ease; }
.carousel-slide > .rain-card { height: 100%; }
@keyframes carousel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Stepping between cards used to mean hitting a 4px dot or waiting ten seconds. These
   sit over the artwork on either edge and wrap in both directions. */
.home-carousel { position: relative; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: rgba(3, 12, 23, .86); color: var(--text);
  opacity: .55; transition: opacity .16s ease, border-color .16s ease, background .16s ease;
}
.carousel-arrow:hover { opacity: 1; border-color: var(--green); color: var(--green); background: rgba(3, 12, 23, .9); }
.carousel-arrow svg { width: 15px; height: 15px; }
.carousel-arrow.prev { left: 8px; }
.carousel-arrow.prev svg { transform: rotate(180deg); }
.carousel-arrow.next { right: 8px; }
/* Touch screens have no hover to reveal them, so they stay legible there. */
@media (hover: none) { .carousel-arrow { opacity: .85; } }
.carousel-dots { display: flex; gap: 6px; }
.carousel-dot {
  flex: 1; height: 4px; padding: 0; border: 0; border-radius: 4px;
  background: rgba(126, 191, 255, .14); overflow: hidden; cursor: pointer;
}
.carousel-dot b { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--mint), var(--green)); }
.carousel-dot.done b { width: 100%; }
.carousel-dot.active b { animation: carousel-fill 10s linear forwards; }
@keyframes carousel-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .carousel-slide.active { animation: none; }
  .carousel-dot.active b { animation: none; width: 100%; }
}


/* ------------------------------------------------------- home carousel v2 ---
   Live cards: figure + copy on the left, a pixel scene on the right. The active card
   slides in from the right with the art trailing the text; a story bar on top counts
   the dwell; icon dots underneath say what is coming. */
.home-carousel.hc2 { gap: 8px; }
.hc2 .carousel-track { border-radius: var(--radius); overflow: hidden; }
.hc2 .carousel-slide.active { animation: none; }
.hc2-slide {
  --tone: var(--green); --tone-soft: rgba(74, 222, 128, .16); --tone-ink: #06210f;
  position: relative; height: 100%; min-height: 196px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; align-items: center;
  padding: 20px 20px 18px 22px;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); border-radius: var(--radius);
  background: radial-gradient(520px 200px at 100% 0%, var(--tone-soft), transparent 70%), linear-gradient(150deg, rgba(6, 22, 34, .97), rgba(4, 12, 24, .97));
}
.hc2-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--tone) 22%, transparent) 0 1px, transparent 1px 9px); mask-image: linear-gradient(180deg, transparent, #000); }
.hc2-slide.tone-green { --tone: var(--green); --tone-soft: rgba(74, 222, 128, .16); --tone-ink: #06210f; }
.hc2-slide.tone-sky { --tone: #5fe0f2; --tone-soft: rgba(95, 224, 242, .18); --tone-ink: #03242b; }
.hc2-slide.tone-pink { --tone: #ff7ad1; --tone-soft: rgba(255, 122, 209, .18); --tone-ink: #2c0a20; }
.hc2-slide.tone-violet { --tone: #b48cff; --tone-soft: rgba(180, 140, 255, .2); --tone-ink: #1b0f3a; }
.hc2-slide.tone-amber { --tone: #ffd76a; --tone-soft: rgba(255, 215, 106, .18); --tone-ink: #2a1a00; }
.hc2-slide.tone-gold { --tone: #ffc94a; --tone-soft: rgba(255, 201, 74, .2); --tone-ink: #2a1a00; }
.hc2-rec { animation: hc2-rec 1s steps(1) infinite; }
@keyframes hc2-rec { 50% { opacity: .15; } }
.hc2-copy { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc2-copy .slide-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--tone); }
.hc2-copy .slide-badge svg { width: 10px; height: 10px; }
.hc2-slide.ready .slide-badge { padding: 3px 8px; border-radius: 6px; background: var(--tone); color: var(--tone-ink); animation: hc2-ready 1.4s ease-in-out infinite; }
@keyframes hc2-ready { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 28%, transparent); } }
.hc2-copy h2 { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1; color: color-mix(in srgb, var(--tone) 70%, #fff); }
.hc2-figure { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.hc2-figure strong { font-family: var(--display); font-size: 20px; line-height: 1.05; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--tone) 45%, transparent); }
.hc2-figure small { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.hc2-figure small b { color: var(--text); }
.hc2-text { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; font-weight: 600; max-width: 380px; }
.hc2-actions { margin-top: 6px; }
.hc2-cta {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 60%, #fff), var(--tone)); color: var(--tone-ink);
  font-family: var(--display); font-size: 10.5px; letter-spacing: .04em; box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 35%, transparent);
  transition: transform .12s ease, filter .12s ease;
}
.hc2-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hc2-cta svg { width: 13px; height: 13px; }
.hc2-art { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; }
.hc2-svg { width: 124px; height: 124px; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.hc2-pix { image-rendering: pixelated; }
/* the entrance: copy slides in, the art follows a beat later */
.hc2 .carousel-slide.active .hc2-copy { animation: hc2-in .42s cubic-bezier(.2, .8, .2, 1) both; }
.hc2 .carousel-slide.active .hc2-art { animation: hc2-in-art .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hc2-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes hc2-in-art { 0% { opacity: 0; transform: translateX(60px) scale(.92); } 25% { opacity: 0; } 100% { opacity: 1; transform: none; } }
/* the scenes breathe */
.hc2-cloud { animation: hc2-cloud 4s ease-in-out infinite; }
@keyframes hc2-cloud { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -2px); } }
.hc2-raindrop { animation: hc2-raindrop 2.2s linear infinite; }
@keyframes hc2-raindrop {
  0% { transform: translate(var(--x), 26px) scale(var(--s)); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(var(--x), 104px) scale(calc(var(--s) * .7)); opacity: 0; }
}
.hc2-ripple { animation: hc2-ripple 2.7s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hc2-ripple { 0% { transform: scale(.3); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
.hc2-poolshine { animation: hc2-poolshine 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hc2-poolshine { 0%, 100% { opacity: .5; transform: scaleX(.9); } 50% { opacity: 1; transform: scaleX(1.08); } }
.hc2-head { transform-box: fill-box; transform-origin: center; }
.hc2-head.a { animation: hc2-headbob 2.4s ease-in-out infinite; }
.hc2-head.b { animation: hc2-headbob 2.4s ease-in-out -1.2s infinite; }
@keyframes hc2-headbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
.hc2-linkpulse { transform-box: fill-box; transform-origin: center; animation: hc2-linkpulse 2.4s ease-in-out infinite; }
@keyframes hc2-linkpulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 4px #5fe0f2); } }
.hc2-refcoin { animation: hc2-refcoin 2.4s ease-in-out infinite; }
@keyframes hc2-refcoin { 0% { transform: translate(74px, 45px) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(56px, 34px) scale(1); } 85% { opacity: 1; } 100% { transform: translate(36px, 45px) scale(.6); opacity: 0; } }
.hc2-tag { transform-box: fill-box; transform-origin: center; animation: hc2-tag 2.4s ease-in-out infinite; }
@keyframes hc2-tag { 0%, 80% { transform: scale(1); } 90% { transform: scale(1.12); } 100% { transform: scale(1); } }
.hc2-hop { animation: hc2-hop 2.7s ease-in-out infinite; }
@keyframes hc2-hop { 0% { transform: translate(70px, 52px) scale(.8); opacity: 0; } 12% { opacity: 1; } 45% { transform: translate(44px, 16px) scale(1.05); } 78% { transform: translate(22px, 58px) scale(.95); opacity: 1; } 100% { transform: translate(22px, 66px) scale(.5); opacity: 0; } }
.hc2-walletglint { animation: hc2-walletglint 2.7s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hc2-walletglint { 0%, 74% { opacity: 0; transform: scaleX(.4); } 82% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.1); } }
.hc2-float { animation: hc2-float 2.2s ease-in-out infinite; }
@keyframes hc2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hc2-tilt { transform-origin: 50px 50px; animation: hc2-tilt 3.2s ease-in-out infinite; }
@keyframes hc2-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.hc2-spark { animation: hc2-spark 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hc2-spark { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.hc2-drop { animation: hc2-drop 1.6s ease-in infinite; }
@keyframes hc2-drop { 0% { transform: translateY(-26px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
.hc2-pulse { animation: hc2-pulse 1.2s ease-in-out infinite; }
@keyframes hc2-pulse { 50% { opacity: .55; } }
/* the story bar on top and the icon dots below */
.hc2-progress { height: 3px; border-radius: 3px; background: rgba(126, 191, 255, .12); overflow: hidden; }
.hc2-progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--mint), var(--green)); transition: width .06s linear; }
.hc2-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hc2-dots { display: flex; gap: 6px; }
.hc2-dot { width: 28px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(3, 16, 30, .6); color: var(--muted-2); transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.hc2-dot svg { width: 12px; height: 12px; }
.hc2-dot:hover { color: var(--text); border-color: var(--line-strong); }
.hc2-dot.active { color: #06210f; background: var(--green); border-color: var(--green); transform: translateY(-1px); }
.hc2-dot.ready:not(.active) { color: var(--mint); border-color: rgba(74, 222, 128, .45); }
.hc2-arrow { width: 26px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(3, 16, 30, .6); color: var(--muted); }
.hc2-arrow:hover { color: var(--text); border-color: var(--line-strong); }
.hc2-arrow svg { width: 12px; height: 12px; }
.hc2-arrow[data-carousel="-1"] svg { transform: rotate(180deg); }
@media (max-width: 720px) {
  .hc2-slide { grid-template-columns: minmax(0, 1fr) 96px; padding: 16px 14px 14px 16px; min-height: 180px; }
  .hc2-svg { width: 92px; height: 92px; }
  .hc2-copy h2 { font-size: 18px; } .hc2-figure strong { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc2 .carousel-slide.active .hc2-copy, .hc2 .carousel-slide.active .hc2-art, .hc2-raindrop, .hc2-cloud, .hc2-ripple, .hc2-poolshine, .hc2-head, .hc2-linkpulse, .hc2-refcoin, .hc2-tag, .hc2-hop, .hc2-walletglint, .hc2-float, .hc2-tilt, .hc2-spark, .hc2-pulse { animation: none; }
}

/* Per-slide tints, so each offer reads as its own card rather than five green ones. */
.rain-card.tone-violet { border-color: rgba(180, 140, 255, .32); background: radial-gradient(600px 200px at 100% 0%, rgba(180, 140, 255, .2), transparent 70%), linear-gradient(150deg, rgba(32, 20, 60, .96), rgba(11, 10, 30, .96)); }
.rain-card.tone-violet h2 { color: #d4c0ff; }
.rain-card.tone-violet::after { background-image: repeating-linear-gradient(115deg, rgba(200, 176, 255, .16) 0 1px, transparent 1px 9px); }
.rain-card.tone-sky { border-color: rgba(95, 224, 242, .32); background: radial-gradient(600px 200px at 100% 0%, rgba(95, 224, 242, .18), transparent 70%), linear-gradient(150deg, rgba(6, 40, 50, .96), rgba(3, 16, 26, .96)); }
.rain-card.tone-sky h2 { color: #b6f3fb; }
.rain-card.tone-sky::after { background-image: repeating-linear-gradient(115deg, rgba(140, 236, 250, .16) 0 1px, transparent 1px 9px); }
.rain-card.tone-amber { border-color: rgba(250, 204, 21, .3); background: radial-gradient(600px 200px at 100% 0%, rgba(250, 204, 21, .16), transparent 70%), linear-gradient(150deg, rgba(48, 34, 6, .96), rgba(20, 14, 4, .96)); }
.rain-card.tone-amber h2 { color: #ffd98a; }
.rain-card.tone-amber::after { background-image: repeating-linear-gradient(115deg, rgba(253, 224, 71, .16) 0 1px, transparent 1px 9px); }
.rain-card.tone-pink { border-color: rgba(255, 122, 209, .32); background: radial-gradient(600px 200px at 100% 0%, rgba(255, 122, 209, .18), transparent 70%), linear-gradient(150deg, rgba(54, 14, 42, .96), rgba(22, 6, 22, .96)); }
.rain-card.tone-pink h2 { color: #ffbfe6; }
.rain-card.tone-pink::after { background-image: repeating-linear-gradient(115deg, rgba(255, 170, 225, .16) 0 1px, transparent 1px 9px); }
.rain-actions { position: relative; z-index: 1; margin-top: 16px; }

/* Signed-in hero gets its own backdrop - cooler and darker than the sign-in card, so the
   two cards on the home row do not look like the same picture twice. */
.hero-welcome {
  border-color: rgba(99, 229, 255, .4);
  background-image:
    linear-gradient(105deg, rgba(6, 38, 42, .92) 0%, rgba(12, 24, 54, .76) 46%, rgba(32, 13, 57, .24) 100%),
    url('/assets/crash-mine-bg.webp');
}
.hero-welcome .hero-content { display: grid; gap: 14px; }
.welcome-top { display: flex; align-items: center; gap: 14px; }
.welcome-avatar { position: relative; flex: 0 0 auto; display: block; width: 62px; height: 62px; }
/* The skin is a square PNG, so the only thing showing at the rounded corners is this
   element's own background - it must be transparent, or the corners glow green. */
.welcome-avatar .tiny-avatar {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 14px;
  background: transparent; color: #cfe6ff; font-size: 20px;
}
.welcome-level {
  position: absolute; right: -6px; bottom: -6px; min-width: 24px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 7px; font-style: normal;
  background: linear-gradient(180deg, var(--mint), var(--green)); color: #05210f;
  font-size: 10px; font-weight: 900; box-shadow: 0 4px 12px rgba(74, 222, 128, .4);
}
.welcome-id .eyebrow { margin-bottom: 2px; }
.welcome-id { min-width: 0; }
.welcome-id h1 { margin: 0; font-family: var(--body); font-size: clamp(22px, 3.5vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.welcome-level-bar { position: relative; height: 6px; border-radius: 6px; background: rgba(126, 191, 255, .12); }
.welcome-level-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--mint), var(--green)); box-shadow: 0 0 14px rgba(74, 222, 128, .45); }
.welcome-level-bar small { position: absolute; left: 0; top: 11px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
/* Carousel slides: everything centred, the button pinned to the bottom, and the text
   block centred in whatever room is left - so a short slide has no dead corner. */
.carousel-slide > .rain-card {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 9px; padding: 20px 22px;
}
.carousel-slide > .rain-card > .rain-head { justify-content: center; }
.carousel-slide > .rain-card > h2 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1; }
.carousel-slide .rain-copy { margin: 0; max-width: 420px; }
.carousel-slide .rain-stats, .carousel-slide .rain-winners { justify-content: center; text-align: center; }
.carousel-slide .rain-actions { margin-top: auto; padding-top: 12px; }
.slide-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 8px; font-weight: 900; letter-spacing: .16em;
  opacity: .85;
}
.slide-figure { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 19px; color: #dff1ff; }
.rain-card.tone-violet .slide-badge { color: #d9c2ff; }
.rain-card.tone-sky .slide-badge { color: #9fe8ff; }
.rain-card.tone-amber .slide-badge { color: #ffd98a; }
.rain-card.tone-pink .slide-badge { color: #ffb3d9; }

/* ------------------------------------------------- section + game cards */
.section { margin-top: 34px; }
.section-banner {
  display: flex; align-items: center; gap: 16px;
  margin: 0 auto 18px; width: fit-content;
}
.section-banner::before, .section-banner::after { content: ""; width: clamp(40px, 14vw, 220px); height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.section-banner span {
  /* A minimum width so a short label and a long one read as the same component: with
     the width left to the text, POPULAR and ALL GAMES rendered at different sizes and
     the chamfer made them look like two different shapes. */
  min-width: 190px; padding: 8px 26px; text-align: center;
  font-family: var(--display); font-size: 13px; letter-spacing: .06em;
  color: #06210f; background: linear-gradient(180deg, var(--mint), var(--green));
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  /* Own compositing layer. Without it the first banner on the page sometimes painted as
     a plain rectangle - the clip only appeared once something forced a repaint of that
     area, such as the cursor passing over it. The animated background layers behind the
     home page are what made it show up there and not further down. */
  transform: translateZ(0); will-change: clip-path; backface-visibility: hidden;
}
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.section-action { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.section-action:hover { color: var(--text); }
.section-action svg { width: 13px; height: 13px; }

.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.game-card {
  position: relative;
  aspect-ratio: 4 / 3;
  min-width: 0;
  border: 1px solid var(--line-strong); border-radius: 16px; padding: 0;
  background: var(--card-tint, #0b2a44);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.game-card:hover { transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 14px 30px rgba(0, 0, 0, .36), 0 0 22px var(--glow-mint), 0 0 36px var(--glow-cyan); }
/* A light sweeps across the card on hover. It is one pseudo-element and one transform,
   so the whole grid can carry it without costing a frame. */
.game-card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .16) 53%, transparent 62%);
  transform: translateX(-120%); opacity: 0;
}
.game-card:hover::before { opacity: 1; animation: card-shine .85s cubic-bezier(.2,.7,.3,1); }
@keyframes card-shine { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Celebrations use compositor motion over a legible, dismissible result. */
.win-spectacle { --win-color: #a0ffd1; --win-glow: rgba(96, 249, 155, .4); position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 45%, rgba(24, 51, 50, .52), rgba(3, 6, 20, .88) 75%); animation: win-spectacle-in .28s ease both; pointer-events: auto; }
.win-spectacle--epic { --win-color: #dfc4ff; --win-glow: rgba(176, 111, 255, .45); }
.win-spectacle--mega { --win-color: #ffdf82; --win-glow: rgba(255, 194, 54, .45); }
.win-spectacle-banner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; width: min(570px, 100%); padding: 34px 28px; border: 1px solid color-mix(in srgb, var(--win-color) 60%, transparent); border-radius: 24px; color: #fff; background: linear-gradient(155deg, rgba(26, 39, 65, .98), rgba(8, 14, 30, .97)); box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 70px var(--win-glow), inset 0 1px 0 rgba(255, 255, 255, .15); text-align: center; pointer-events: none; animation: win-banner-arrive .6s cubic-bezier(.18,.88,.28,1.22) both; }
.win-spectacle-kicker { color: var(--win-color); font-family: var(--display); font-size: clamp(15px, 3.5vw, 23px); letter-spacing: .14em; text-shadow: 0 0 25px var(--win-glow); }
.win-spectacle-multiplier { margin: 10px 0 4px; font-family: var(--body); font-size: clamp(52px, 10vw, 98px); font-weight: 900; letter-spacing: -.065em; line-height: 1.1; color: var(--win-color); text-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 30px var(--win-glow); font-variant-numeric: tabular-nums; }
.win-spectacle-payout { margin: 12px 0 0; font-size: clamp(22px, 5vw, 34px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; overflow-wrap: anywhere; }
.win-spectacle-payout .amount-cell { justify-content: center; gap: 10px; }
.win-spectacle-payout .amount-cell img, .win-spectacle-payout svg { width: 30px; height: 30px; }
.win-spectacle-profit { margin: 12px 0 0; color: #c5d3e9; font-size: 14px; line-height: 1.6; }
.win-spectacle-profit strong { color: var(--win-color); }
.win-spectacle-close { position: absolute; top: 18px; right: 18px; z-index: 5; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 12px; color: #fff; background: rgba(13, 22, 39, .9); pointer-events: auto; }
.win-spectacle-close:hover { border-color: var(--win-color); background: #233147; }
.win-spectacle-close svg { width: 18px; height: 18px; }
.win-spectacle-rays { position: absolute; z-index: 0; left: 50%; top: 50%; width: max(100vw, 100vh); aspect-ratio: 1; margin-left: min(-50vw, -50vh); margin-top: min(-50vw, -50vh); background: repeating-conic-gradient(from 0deg, transparent 0deg 13deg, var(--win-glow) 14deg 20deg, transparent 21deg 30deg); mask-image: radial-gradient(circle, #000, transparent 67%); opacity: .65; animation: win-rays-turn 18s linear infinite; pointer-events: none; }
.win-spectacle-halo { position: absolute; z-index: 1; width: min(760px, 120vw); aspect-ratio: 1; border: 1px solid var(--win-glow); border-radius: 50%; background: radial-gradient(circle, var(--win-glow), transparent 66%); box-shadow: 0 0 100px var(--win-glow); animation: win-halo-pulse 2.2s ease-in-out infinite; pointer-events: none; }
.win-spectacle-confetti, .win-spectacle-coin { position: absolute; z-index: 4; top: -12vh; left: var(--left, 50%); width: var(--size, 10px); height: calc(var(--size, 10px) * .5); background: var(--color, #60f99b); border-radius: 2px; animation: win-particle-fall var(--duration, 3.5s) var(--delay, 0s) cubic-bezier(.16,.45,.64,1) both; pointer-events: none; }
.win-spectacle-coin { height: var(--size, 20px); border: 2px solid #ffe599; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #fff4af, #ffd45c 45%, #e69518 75%); box-shadow: inset 0 0 0 2px rgba(134, 76, 10, .3), 0 0 14px rgba(255, 213, 92, .4); }
@keyframes win-spectacle-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes win-banner-arrive { from { opacity: 0; transform: translateY(28px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes win-rays-turn { to { transform: rotate(360deg); } }
@keyframes win-halo-pulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes win-particle-fall { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift, 60px), 126vh, 0) rotate(var(--spin, 540deg)); } }
.win-spectacle.is-reduced-motion, .win-spectacle.is-reduced-motion .win-spectacle-banner, .win-spectacle.is-reduced-motion .win-spectacle-rays, .win-spectacle.is-reduced-motion .win-spectacle-halo { animation: none; }
.win-spectacle.is-reduced-motion .win-spectacle-confetti, .win-spectacle.is-reduced-motion .win-spectacle-coin { display: none; }
@media (max-width: 560px) {
  .win-spectacle { padding: 18px; }
  .win-spectacle-banner { padding: 30px 18px; border-radius: 20px; }
  .win-spectacle-multiplier { font-size: clamp(48px, 14vw, 76px); }
}
@media (prefers-reduced-motion: reduce) {
  .win-spectacle, .win-spectacle-banner, .win-spectacle-rays, .win-spectacle-halo { animation: none; }
  .win-spectacle-confetti, .win-spectacle-coin { display: none; }
}

/* ---------------------------------------------------------- big win moment */
.celebration { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.celebration-rays {
  position: absolute; left: 50%; top: 42%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: conic-gradient(from 0deg, rgba(250, 204, 21, .16) 0 6deg, transparent 6deg 18deg);
  animation: celebration-rays 3s linear both;
}
@keyframes celebration-rays {
  0% { opacity: 0; transform: rotate(0deg) scale(.6); }
  18% { opacity: .85; }
  70% { opacity: .45; }
  100% { opacity: 0; transform: rotate(46deg) scale(1); }
}
.celebration-banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 4px; padding: 22px 46px;
  border: 1px solid rgba(250, 204, 21, .5); border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 14, 6, .92), rgba(10, 8, 4, .88));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6), 0 0 60px rgba(250, 204, 21, .3), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: celebration-pop 3.1s cubic-bezier(.16,.9,.24,1) both;
}
.celebration-kicker { color: #ffe27a; font-size: 10px; font-weight: 900; letter-spacing: .34em; }
.celebration-multiplier {
  font-family: var(--display); font-size: clamp(38px, 7vw, 66px); line-height: 1;
  background: linear-gradient(180deg, #fff6cf 10%, #ffd561 46%, #f0a500);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(240, 165, 0, .55));
}
.celebration-payout { color: var(--mint); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
@keyframes celebration-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-6deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  24% { transform: translate(-50%, -50%) scale(.98) rotate(0deg); }
  30% { transform: translate(-50%, -50%) scale(1.02); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(.96); }
}
.celebration-coin {
  position: absolute; top: -8vh; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3b0, #f5c33b 46%, #c07d10 78%, #8a5407);
  box-shadow: inset 0 -2px 0 rgba(120, 70, 6, .5), 0 2px 6px rgba(0, 0, 0, .35);
  animation: celebration-fall linear both;
}
@keyframes celebration-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1); }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift, 0), 112vh, 0) rotate(var(--spin, 360deg)) scaleX(.4); }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-coin, .celebration-rays { display: none; }
  .celebration-banner { animation-duration: 2s; }
}
.game-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
/* Vector card art is already dark and high contrast - do not dim it twice. */
.game-card img[src$=".svg"] { opacity: 1; }
.game-card:has(img[src$=".svg"])::after { background: linear-gradient(180deg, rgba(2, 10, 18, .82) 0%, rgba(2, 10, 18, 0) 38%, rgba(2, 10, 18, .45) 100%); }
.game-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 10, 18, .68) 0%, rgba(2, 10, 18, .12) 42%, rgba(2, 10, 18, .55) 100%);
}
.game-card h3 {
  position: absolute; z-index: 2; top: 12px; left: 0; right: 0;
  margin: 0; text-align: center;
  font-family: var(--display); font-size: clamp(13px, 1.8vw, 21px);
  letter-spacing: .02em; color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .5);
}
.game-card .game-tag {
  position: absolute; z-index: 2; left: 12px; bottom: 11px;
  padding: 4px 7px; border-radius: 5px;
  background: rgba(2, 12, 22, .72);
  color: #cfe6f7; font-size: 8px; font-weight: 900; letter-spacing: .12em;
}
/* "N playing" pill in the corner of every card: a breathing green dot while anyone is on
   the board, grey and still when nobody is. */
.game-card .game-playing {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 8px; margin: 0 auto; width: max-content;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  background: rgba(2, 12, 22, .9); border: 1px solid rgba(74, 222, 128, .38);
  color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .06em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: border-color .3s ease, color .3s ease;
}
.game-card .game-playing b { font-family: var(--display); font-size: 12px; font-weight: 400; color: #fff; }
.game-card .game-playing i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: playing-pulse 1.6s ease-in-out infinite; }
.game-card .game-playing.idle { display: none; }
.game-card .game-playing.bump { animation: playing-bump .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes playing-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
@keyframes playing-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (max-width: 720px) { .game-card .game-playing { bottom: 6px; padding: 4px 7px 4px 6px; font-size: 8px; } }

/* Mode flags sit in one row so a game that is both live and player-versus-player - the
   jackpot - can carry both without them landing on top of each other. */
.game-card .game-flags { position: absolute; z-index: 2; right: 12px; bottom: 11px; display: inline-flex; align-items: center; gap: 7px; }
.game-card .game-live { display: inline-flex; align-items: center; gap: 5px; color: var(--mint); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
/* Same weight and rhythm as LIVE so the two sit together, but marked with a small
   diamond instead of the round glowing dot - that dot reads as "happening right now",
   which is true of a live round and not of a game mode. */
.game-card .game-duel {
  display: inline-flex; align-items: center; gap: 5px;
  color: #9fd0ff; font-size: 8px; font-weight: 900; letter-spacing: .1em;
}
.game-card .game-duel::before {
  content: ""; width: 5px; height: 5px; transform: rotate(45deg);
  background: #60a5fa; box-shadow: 0 0 7px rgba(96, 165, 250, .55);
}
.game-card .game-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.tint-crash { --card-tint: #1f4d24; }
.tint-roll { --card-tint: #5a1f22; }
.tint-cases { --card-tint: #45256b; }
.tint-mines { --card-tint: #14432a; }
.tint-towers { --card-tint: #17444a; }
.tint-plinko { --card-tint: #6b5312; }
.tint-coinflip { --card-tint: #123a5c; }
.tint-wheel { --card-tint: #4a1f52; }

/* ------------------------------------------------------------ live bets */

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--page-accent, #60f99b) 9%, transparent), transparent 65%), linear-gradient(150deg, var(--panel-2), var(--panel)); box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 20px rgba(99, 229, 255, .045), inset 0 1px 0 rgba(168, 228, 255, .07); overflow: hidden; }
.panel-heading { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h3 { margin: 0; font-size: 14px; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.panel-heading-right { color: var(--muted); font-size: 10px; }

.table { width: 100%; border-collapse: collapse; }
.table th { padding: 15px 18px 11px; color: var(--muted); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.table td { padding: 12px 18px; border-top: 1px solid var(--line); color: #d4dfed; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tr:hover td { background: rgba(126, 191, 255, .035); }
.player-cell { display: flex; align-items: center; gap: 8px; }
.tiny-avatar { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 5px; overflow: hidden; color: #04200f; font-size: 8px; font-weight: 900; background: linear-gradient(135deg, #16a34a, #4ade80); }
.tiny-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.amount-cell { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.amount-cell img { width: 15px; height: 15px; }
.game-cell { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.game-cell i { width: 8px; height: 8px; border-radius: 2px; background: var(--dot, var(--cyan)); }
.win-text { color: var(--green) !important; font-weight: 800; }
.loss-text { color: var(--red) !important; }
.multiplier { font-weight: 850; font-variant-numeric: tabular-nums; }
.empty-table { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 11px; }
/* A round that just landed slides down from above the table and flashes once, so the
   feed reads as live instead of silently swapping its top row. The colour says at a
   glance whether the bet paid, and a marker rides in on the left edge. */
.feed-arrive { animation: feed-arrive .62s cubic-bezier(.2,.85,.25,1) both; }
.feed-arrive td { position: relative; animation: feed-flash 1.15s ease-out both; }
.feed-arrive td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--flash-edge, var(--green)); animation: feed-edge 1.5s ease-out both; }
.feed-arrive-win { --flash-tint: rgba(74, 222, 128, .2); --flash-edge: var(--green); }
.feed-arrive-loss { --flash-tint: rgba(255, 113, 142, .16); --flash-edge: var(--red); }
@keyframes feed-arrive {
  0% { opacity: 0; transform: translateY(-16px) scaleY(.7); }
  55% { opacity: 1; transform: translateY(2px) scaleY(1.02); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes feed-flash {
  0% { background: var(--flash-tint, rgba(74, 222, 128, .2)); }
  35% { background: var(--flash-tint, rgba(74, 222, 128, .2)); }
  100% { background: transparent; }
}
@keyframes feed-edge { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .feed-arrive, .feed-arrive td, .feed-arrive td:first-child::before { animation-duration: .01ms; }
}
.table-scroll { overflow-x: auto; }

/* -------------------------------------------------------------- buttons */
.primary-button, .secondary-button, .outline-button, .ghost-button {
  min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border-radius: 9px;
  font-size: 11px; font-weight: 850;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.primary-button { color: #05210f; background: linear-gradient(120deg, var(--mint), var(--green) 56%, #37dfcb); box-shadow: 0 0 0 1px rgba(160, 255, 209, .5), 0 7px 22px var(--glow-mint), inset 0 1px 0 rgba(255, 255, 255, .4); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--mint), 0 12px 32px rgba(96, 249, 155, .4), 0 0 25px var(--glow-cyan); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.secondary-button { color: #d8ecff; background: rgba(126, 191, 255, .1); border: 1px solid var(--line-strong); }
.secondary-button:hover { border-color: var(--cyan); background: rgba(99, 229, 255, .15); box-shadow: 0 0 18px var(--glow-cyan); }
.outline-button { color: var(--muted); background: transparent; border: 1px solid var(--line-strong); }
.outline-button:hover { color: var(--text); border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .08); }
.ghost-button { color: var(--muted); background: transparent; padding: 0 10px; }
.ghost-button:hover { color: var(--text); background: rgba(126, 191, 255, .06); }
.primary-button svg, .secondary-button svg, .outline-button svg, .ghost-button svg { width: 15px; height: 15px; }

.info-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.info-item { display: flex; align-items: center; gap: 11px; min-height: 72px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(126, 191, 255, .035); }
/* The glyph used to sit at 16px inside a 31px badge - about a quarter of the tile.
   It now fills the badge, with just enough padding to keep it off the border. */
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; padding: 4px; border: 1px solid rgba(74, 222, 128, .24); border-radius: 10px; color: var(--mint); background: rgba(74, 222, 128, .1); }
.stat-icon svg { width: 100%; height: 100%; }
.info-item strong { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.info-item span { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }

/* --------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); background: rgba(2, 10, 20, .7); margin-top: 40px; }
/* A fixed grid: the brand takes two shares, the four link columns one each, links stacked.
   (A wrapping flex row with inline links used to spill the columns onto a second line.) */
.footer-inner { width: min(1180px, 100%); margin: 0 auto; padding: 28px 22px 22px; display: grid; grid-template-columns: 2fr repeat(4, 1fr); align-items: start; gap: 22px 32px; }
.footer-brand { min-width: 0; }
.footer-column { min-width: 0; }
.footer-brand p { margin: 12px 0 0; max-width: 260px; color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.footer-column h4 { margin: 0 0 12px; color: var(--muted-2); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.footer-column button, .footer-column a { display: block; margin-bottom: 9px; padding: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
.footer-column button:hover, .footer-column a:hover { color: var(--mint); }
.footer-column button.server-ip {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 12px; padding: 8px 12px;
  border: 1px solid rgba(74, 222, 128, .32); border-radius: 8px;
  background: rgba(74, 222, 128, .08);
  color: var(--mint); font-family: var(--display); font-size: 11px; letter-spacing: .01em;
}
.footer-column button.server-ip::after { content: "COPY"; color: var(--muted-2); font-size: 8px; font-family: Inter, sans-serif; letter-spacing: .12em; }
.footer-column button.server-ip:hover { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .16); }
.footer-legal { border-top: 1px solid var(--line); }
.footer-legal p { width: min(1180px, 100%); margin: 0 auto; padding: 18px 22px 26px; color: var(--muted-2); font-size: 10px; line-height: 1.7; }

/* --------------------------------------------------------- game screens */
.games-lobby-heading { margin-bottom: 20px; }
.games-lobby-heading h1 { margin: 12px 0 0; font-family: var(--display); font-size: 26px; color: var(--mint); }
.games-lobby-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.games-lobby-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
.game-page-head-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.game-page-head h1 { margin: 0; font-family: var(--display); font-size: 24px; color: var(--mint); }
.game-page-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.back-button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(126, 191, 255, .04); font-size: 10px; font-weight: 850; }
.back-button:hover { color: var(--text); border-color: rgba(74, 222, 128, .45); }
.back-button svg { width: 14px; height: 14px; }
.rtp-badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(74, 222, 128, .22); border-radius: 8px; color: var(--green); background: rgba(74, 222, 128, .07); font-size: 10px; font-weight: 850; white-space: nowrap; }
.rtp-badge svg { width: 14px; height: 14px; }
/* Min/Max bet shown as a matching pair on every game page, side by side. */
/* game page v2: cover strip + compact title row; the bet limits live in the bet field */
.game-strip-wrap { position: relative; margin: 0 0 16px; }
.game-strip { display: flex; gap: 8px; padding: 6px 36px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 14px; background: rgba(3, 16, 30, .7); }
.game-strip-arrow {
  position: absolute; top: 50%; z-index: 3; width: 26px; height: 26px; margin-top: -13px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%;
  background: rgba(4, 18, 32, .96); color: var(--muted); cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4); transition: color .15s ease, border-color .15s ease, opacity .2s ease;
}
.game-strip-arrow svg { width: 13px; height: 13px; }
.game-strip-arrow.prev { left: 8px; }
.game-strip-arrow.next { right: 8px; }
.game-strip-arrow:hover { color: var(--mint); border-color: rgba(74, 222, 128, .5); }
.game-strip-wrap.at-start .game-strip-arrow.prev, .game-strip-wrap.at-end .game-strip-arrow.next { opacity: .25; pointer-events: none; }
.game-strip-wrap.no-scroll .game-strip-arrow { display: none; }
.game-strip-wrap.no-scroll .game-strip { padding-left: 6px; padding-right: 6px; }
.game-strip-wrap::before, .game-strip-wrap::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 48px; z-index: 1; pointer-events: none; border-radius: 14px; }
.game-strip-wrap::before { left: 1px; background: linear-gradient(90deg, rgba(4, 18, 32, .95) 35%, transparent); }
.game-strip-wrap::after { right: 1px; background: linear-gradient(270deg, rgba(4, 18, 32, .95) 35%, transparent); }
.game-strip-wrap.at-start::before, .game-strip-wrap.at-end::after, .game-strip-wrap.no-scroll::before, .game-strip-wrap.no-scroll::after { opacity: 0; }
.game-strip::-webkit-scrollbar { display: none; }
.game-strip-item {
  position: relative; flex: 0 0 auto; width: 84px; padding: 0; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--muted-2); overflow: hidden; opacity: .72;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.game-strip-item img { display: block; width: 100%; height: 50px; object-fit: cover; image-rendering: pixelated; }
.game-strip-item span { display: block; padding: 4px 4px 5px; font-family: var(--display); font-size: 7px; letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-strip-item i { position: absolute; top: 4px; right: 4px; padding: 1px 5px; border-radius: 999px; background: rgba(2, 12, 22, .85); color: var(--mint); font-size: 8px; font-weight: 900; font-style: normal; }
.game-strip-item i::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.game-strip-item:hover { opacity: 1; transform: translateY(-1px); border-color: color-mix(in srgb, var(--dot) 45%, transparent); }
.game-strip-item.active { opacity: 1; color: #fff; border-color: var(--dot); background: color-mix(in srgb, var(--dot) 14%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--dot) 35%, transparent); }
.game-page-title { display: flex; align-items: center; gap: 12px; }
.game-page-title .back-button { width: 32px; padding: 0; justify-content: center; }
.game-page-title h1 { color: var(--game-dot, var(--mint)); }
.game-mode-tag { padding: 4px 8px; border-radius: 6px; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.game-mode-tag.live { color: var(--mint); background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .35); }
.game-mode-tag.duel { color: #ffd98a; background: rgba(245, 197, 66, .14); border: 1px solid rgba(245, 197, 66, .35); }
.game-page-head-copy { gap: 6px; }
.bet-limits { display: inline-flex; gap: 6px; letter-spacing: 0; text-transform: none; }
.bet-limits i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(126, 191, 255, .06); font-style: normal; font-size: 11px; font-weight: 800; color: #e6f1fb; font-variant-numeric: tabular-nums; }
.bet-limits i small { font-size: 8.5px; font-weight: 900; letter-spacing: .1em; color: var(--muted-2); }
.bet-limits i.win { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); color: var(--mint); }
.bet-limits i.win small { color: rgba(74, 222, 128, .75); }
@media (max-width: 480px) { .bet-limits i { padding: 2px 6px; font-size: 10px; } .bet-limits i small { display: none; } }
@media (max-width: 720px) { .game-strip-item { width: 68px; } .game-strip-item img { height: 42px; } }

.bet-range { display: inline-flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.range-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid rgba(74, 222, 128, .22); border-radius: 9px; background: rgba(74, 222, 128, .07); color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.range-pill svg { width: 14px; height: 14px; color: var(--green); }
.range-pill .range-label { color: var(--muted); }
.range-pill strong { color: var(--mint); font-size: 12px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 15px; align-items: stretch; }
.game-board { min-height: 500px; padding: 22px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 50% 15%, rgba(74, 222, 128, .09), transparent 45%), linear-gradient(150deg, rgba(8, 32, 54, .95), rgba(3, 15, 28, .96)); }
.game-board::before { content: ""; position: absolute; inset: 14px; pointer-events: none; border: 1px solid rgba(126, 191, 255, .05); border-radius: 11px; }
.game-control-panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--panel-2), var(--panel)); }
.control-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 800; margin: 0 0 8px; }
.control-label span:last-child { color: #cfe4f5; font-weight: 700; }
.input-row { display: flex; gap: 5px; }
/* The bet field shrinks, its x2 / MAX buttons keep their label on one line. */
.input-row .outline-button { flex: 0 0 auto; padding: 0 9px; white-space: nowrap; }
.input-row .bet-op { min-width: 34px; padding: 0 7px; font-weight: 900; font-size: 12px; letter-spacing: 0; text-align: center; }
.input-row .bet-op:hover { color: var(--green); border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .08); }
/* Bet field wrapper so the plinko "xN" badge can sit inside the input's own box, right
   aligned and behind the text - it is pointer-events: none so typing is never blocked. */
.bet-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.bet-input-wrap .text-input { flex: 1; min-width: 0; width: 100%; padding-right: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bet-mult-badge {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: none; pointer-events: none; user-select: none;
  font-family: var(--display); font-size: 12px; font-weight: 900; letter-spacing: .06em;
  color: rgba(126, 191, 255, .5); text-shadow: 0 0 12px rgba(47, 127, 208, .35);
}
.bet-mult-badge.show { display: block; }
/* The chip sits inside the field just past the number, dimmed so it reads as part of the
   field rather than as a control. pointer-events: none keeps the caret reachable. */
.bet-coin {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 17px; height: 17px; display: none;
  pointer-events: none; user-select: none;
  background: url('/assets/coin.svg?v=10') center / contain no-repeat;
  opacity: .55;
}
.bet-coin.show { display: block; }
.text-input, .select-input { width: 100%; min-height: 42px; padding: 0 12px; outline: none; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); background: rgba(2, 12, 22, .6); font-size: 12px; font-family: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
.auth-panel { padding: clamp(24px, 5vw, 48px); }
.auth-panel h1 { margin: 10px 0 12px; }
.auth-panel .field-label { display: block; margin: 18px 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-panel .form-submit { width: 100%; margin-top: 16px; }
.auth-panel .form-error { min-height: 20px; margin-top: 10px; color: #fca5a5; font-size: 12px; }
.auth-panel .muted-copy { margin-top: 16px; color: var(--muted); font-size: 11px; }
.text-input:focus, .select-input:focus { border-color: rgba(74, 222, 128, .6); box-shadow: 0 0 0 3px rgba(74, 222, 128, .12); }
.select-input { appearance: none; }
.quick-bets { display: flex; gap: 5px; margin-top: 7px; }
.quick-bets button { flex: 1; min-height: 26px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(126, 191, 255, .05); font-size: 9px; font-weight: 800; }
.quick-bets button:hover { color: var(--text); border-color: rgba(74, 222, 128, .4); }
.control-divider { height: 1px; margin: 18px 0; background: var(--line); }
.control-button { width: 100%; margin-top: 15px; }
.control-note { display: flex; gap: 7px; align-items: flex-start; margin: 14px 2px 0; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.control-note svg { flex: 0 0 13px; width: 13px; height: 13px; color: var(--cyan); }
.game-stat-row { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.game-stat-row:last-child { border-bottom: 0; }
.game-stat-row strong { color: var(--text); }


.roll-board { height: 100%; min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
.roll-board h2, .crash-stage h2, .case-stage h2 { margin: 0; font-size: 11px; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
.roll-number { margin: 24px 0 22px; font-size: clamp(60px, 10vw, 108px); font-weight: 900; line-height: .85; letter-spacing: -.08em; background: linear-gradient(160deg, #fff 15%, #bbf7d0 53%, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(74, 222, 128,.28)); }
.roll-number.win { color: var(--green); background: none; }
.roll-number.loss { color: var(--red); background: none; }
.roll-track { width: min(520px, 90%); height: 8px; position: relative; border-radius: 8px; background: linear-gradient(90deg, var(--green) 0 var(--chance, 50%), var(--red) var(--chance, 50%) 100%); box-shadow: 0 0 25px rgba(74, 222, 128,.22); }
.roll-track::before, .roll-track::after { position: absolute; top: 16px; color: var(--muted-2); font-size: 9px; }
.roll-track::before { content: "0"; left: 0; }
.roll-track::after { content: "100"; right: 0; }
.roll-marker { width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 4px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(74, 222, 128,.22), 0 0 18px rgba(74, 222, 128,.6); transition: left .4s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease; }
/* Dragging the slider moves the dot with no easing, because the coloured split it sits
   on is a gradient and repaints instantly. Easing here is what made the two drift. */
.roll-marker.instant { transition: background .25s ease, box-shadow .25s ease; }
.roll-marker.win { background: var(--green); box-shadow: 0 0 0 5px rgba(74, 222, 128,.24), 0 0 20px rgba(74, 222, 128,.7); }
.roll-marker.loss { background: var(--red); box-shadow: 0 0 0 5px rgba(255, 113, 142,.24), 0 0 20px rgba(255, 113, 142,.7); }
.roll-marker.pending { animation: roll-pending-pulse 1s ease-in-out infinite; }
.roll-number.pending { color: var(--muted); background: none; animation: roll-pending-pulse 1s ease-in-out infinite; }
@keyframes roll-pending-pulse {
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .roll-marker.pending, .roll-number.pending { animation: none; opacity: 1; }
}
.roll-result { min-height: 22px; margin-top: 42px; color: var(--muted); font-size: 12px; }
.roll-result strong { color: #fff; }

.crash-stage { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; overflow: hidden; }
.crash-stage::before { content: ""; width: 75%; height: 75%; position: absolute; bottom: -43%; left: 13%; border-radius: 50%; border: 1px solid rgba(86, 184, 245,.13); box-shadow: 0 0 0 25px rgba(86, 184, 245,.025), 0 0 0 50px rgba(86, 184, 245,.018); }
.crash-multiplier { position: relative; z-index: 1; margin: 16px 0 18px; font-size: clamp(59px, 9vw, 104px); font-weight: 900; line-height: .8; letter-spacing: -.08em; color: var(--cyan); text-shadow: 0 0 28px rgba(86, 184, 245,.25); }
.crash-multiplier { transition: color .25s ease, text-shadow .25s ease, transform .25s ease; }
.crash-multiplier.warm { color: #b9f5d1; text-shadow: 0 0 30px rgba(74, 222, 128,.3); }
.crash-multiplier.hot { color: #ffd79a; text-shadow: 0 0 34px rgba(245, 165, 36,.36); }
/* Past x10 the round is worth watching, so the number goes gold and breathes. */
.crash-multiplier.gold { color: #ffe27a; text-shadow: 0 0 42px rgba(250, 204, 21,.5); animation: crash-gold 1.1s ease-in-out infinite; }
@keyframes crash-gold { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.crash-multiplier.crashed { color: var(--red); text-shadow: 0 0 25px rgba(255,113,142,.24); animation: none; }
.crash-line { width: min(540px, 90%); height: 122px; position: relative; z-index: 1; border-bottom: 1px solid rgba(86, 184, 245,.24); background: linear-gradient(180deg, rgba(86, 184, 245,.11), transparent); clip-path: polygon(0 100%, 0 96%, 14% 92%, 25% 79%, 38% 75%, 49% 63%, 59% 70%, 70% 42%, 80% 48%, 91% 21%, 100% 0, 100% 100%); }
.crash-status {
  position: relative; z-index: 1; margin-top: 2px; margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(126, 191, 255, .16);
  background: rgba(3, 12, 23, .45);
  color: #a8c2da; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .2s ease, color .2s ease;
}
.crash-status svg { width: 12px; height: 12px; opacity: .8; }
.crash-status strong { color: #eaf4ff; font-weight: 800; }
/* Colour lives in the outline and the number, never in a filled block. */
.crash-status.phase-betting { border-color: rgba(74, 222, 128, .38); color: #a9dcbd; }
.crash-status.phase-betting strong { color: #86efac; }
.crash-status.phase-running { border-color: rgba(86, 184, 245, .32); color: #a6c6e2; }
.crash-status.phase-ended { border-color: rgba(245, 179, 1, .35); color: #e4cf9f; }
.crash-status.phase-ended strong { color: #ffd98a; }
/* Last seconds: the text goes red and a ring breathes outwards. The ring is a shadow, so
   the pill itself never changes size and cannot push past the stage edges. */
.crash-status.closing { border-color: rgba(248, 113, 113, .6); color: #ffc9c9; }
.crash-status.closing strong { color: #fca5a5; }
.crash-status.closing::after {
  content: ''; position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, .8); pointer-events: none;
  animation: crash-status-ring 1s ease-out infinite;
}
@keyframes crash-status-ring {
  0%   { opacity: .9; box-shadow: 0 0 0 0 rgba(248, 113, 113, .35); }
  100% { opacity: 0;  box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
}
@media (prefers-reduced-motion: reduce) { .crash-status.closing::after { animation: none; opacity: .7; } }

/* The pinned giveaway code at the top of the promo page. */
.promo-featured {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 18px 22px;
  border: 1px solid rgba(245, 179, 1, .4);
  background: linear-gradient(120deg, rgba(245, 179, 1, .14), transparent 62%), var(--panel-2);
}
.promo-featured.claimed { border-color: var(--line); background: var(--panel-2); opacity: .75; }
.promo-featured-body { min-width: 0; }
.promo-featured-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-size: 9.5px; font-weight: 900; letter-spacing: .14em; }
.promo-featured-kicker svg { width: 12px; height: 12px; }
.promo-featured h2 { margin: 6px 0 4px; font-family: var(--display); font-size: 21px; color: #ffe9a6; }
.promo-featured p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.promo-featured p code, .promo-featured-code { font-family: var(--display); letter-spacing: .06em; }
.promo-featured p code { color: #ffd98a; }
.promo-featured-side { display: grid; gap: 9px; justify-items: stretch; flex: 0 0 auto; }
.promo-featured-code {
  padding: 9px 16px; border-radius: 9px; text-align: center;
  border: 1px dashed rgba(245, 179, 1, .5); background: rgba(245, 179, 1, .08);
  color: #ffe9a6; font-size: 15px;
}

.mines-stage { height: 100%; min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
.mines-stage h2 { margin: 0 0 20px; font-size: 11px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.mines-grid { width: min(392px, 88%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mine-tile { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(74, 222, 128,.28); border-radius: 9px; background: linear-gradient(145deg, rgba(35,29,62,.95), rgba(19,19,35,.95)); color: transparent; box-shadow: inset 0 1px rgba(255,255,255,.05); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.mine-tile:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(86, 184, 245,.7); background: rgba(75,57,124,.55); }
.mine-tile:not(.revealed-safe):not(.revealed-mine)::before { content: ""; width: 10px; height: 10px; border: 1px solid rgba(134, 239, 172,.32); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 9px rgba(74, 222, 128,.25); }
.mine-tile:disabled { cursor: default; }
.mine-tile.revealed-safe { color: var(--green); background: rgba(74, 222, 128,.12); border-color: rgba(74, 222, 128,.4); }
.mine-tile.revealed-mine { color: var(--red); background: rgba(255,113,142,.14); border-color: rgba(255,113,142,.45); }
.mine-tile svg { width: 22px; height: 22px; }
/* the revealed faces: pixel diamonds and bombs, popped in with a little bounce */
.tile-art { width: 30px; height: 30px; image-rendering: pixelated; pointer-events: none; animation: tile-art-pop .32s cubic-bezier(.34, 1.56, .64, 1) both; }
.tile-art-smooth { image-rendering: auto; }
.tile-art-diamond { filter: drop-shadow(0 0 6px rgba(99, 227, 245, .75)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.tile-art-bomb { filter: drop-shadow(0 0 7px rgba(255, 107, 61, .65)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.mine-tile.revealed-safe { background: radial-gradient(circle at 50% 45%, rgba(99, 227, 245, .22), rgba(74, 222, 128, .08) 70%); border-color: rgba(99, 227, 245, .5); }
.mine-tile.revealed-mine .tile-art { animation: tile-art-pop .32s cubic-bezier(.34, 1.56, .64, 1) both, bomb-shake .5s ease-in-out .3s 2; }
@keyframes tile-art-pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bomb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-6deg); } 75% { transform: translateX(2px) rotate(6deg); } }
.mines-result { min-height: 19px; margin-top: 22px; color: var(--muted); font-size: 11px; }

.case-stage { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
.case-chests { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 33px 0 30px; }
.chest { width: 104px; height: 89px; overflow: hidden; position: relative; border: 1px solid #8158cf; border-radius: 13px 13px 10px 10px; background: linear-gradient(145deg, #7442a9, #251c54); box-shadow: 0 12px 35px rgba(122,59,207,.25), inset 0 0 0 5px rgba(255,255,255,.035); transform: perspective(300px) rotateY(-8deg); }
.chest::before { content: ""; position: absolute; width: 52px; height: 52px; left: 25px; top: 19px; border: 2px solid rgba(215,188,255,.72); transform: rotate(45deg); box-shadow: 0 0 22px rgba(203,112,255,.75); }
.chest::after { content: ""; position: absolute; width: 12px; height: 15px; left: 44px; top: 36px; border-radius: 3px; background: #ffe18f; box-shadow: 0 0 16px #f5a524; }
.chest:nth-child(2) { width: 124px; height: 105px; background: linear-gradient(145deg, #9350d6, #2a205c); transform: perspective(300px) translateY(-10px); }
.chest:nth-child(2)::before { left: 32px; top: 24px; }
.chest:nth-child(2)::after { left: 53px; top: 43px; }
.chest:nth-child(3) { transform: perspective(300px) rotateY(8deg); }
.case-result { min-height: 22px; color: var(--muted); font-size: 12px; }
.case-result strong { color: var(--amber); }

/* Wallet, history and profile */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: clamp(27px, 3.5vw, 34px); letter-spacing: -.04em; }
.page-head p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.wallet-top { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; }
.balance-card { min-height: 185px; padding: 25px; overflow: hidden; position: relative; border: 1px solid rgba(74, 222, 128,.24); border-radius: var(--radius); background: radial-gradient(circle at 88% 20%, rgba(74, 222, 128, .34), transparent 36%), linear-gradient(135deg, rgba(37,26,70,.95), rgba(16,15,28,.97)); }
.balance-card::after { content: ""; width: 170px; height: 170px; position: absolute; right: -40px; bottom: -74px; border: 1px solid rgba(207,114,255,.2); transform: rotate(45deg); box-shadow: 0 0 0 20px rgba(207,114,255,.035); }
.balance-card-label { display: flex; align-items: center; gap: 8px; color: #b9afce; font-size: 11px; }
.balance-card-label .coin-image { width: 22px; height: 22px; }
.big-balance { margin: 13px 0 19px; font-size: 36px; letter-spacing: -.06em; }
.balance-card-footer { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 10px; }
.balance-card-footer span { padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.06); }
.wallet-actions { padding: 21px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.wallet-actions h3 { margin: 0 0 6px; font-size: 15px; }
.wallet-actions p { margin: 0 0 17px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.wallet-actions-row { display: flex; gap: 8px; }
.wallet-actions-row button { flex: 1; }

/* ------------------------------------------------------------------ wallet v2 ---
   One hero: the balance with its lifetime numbers on the left, the two actions plus the
   bank status and the /pay hint on the right; below, one activity list instead of two
   tables. */
.wl-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 0; margin-bottom: 20px; border: 1px solid rgba(250, 204, 21, .22); border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--panel-2), var(--panel)); }
.wl-balance { position: relative; padding: 26px 28px 24px; background: radial-gradient(70% 90% at 0% 0%, rgba(250, 204, 21, .12), transparent 60%); }
.wl-balance .big-balance { margin: 12px 0 18px; font-size: 40px; color: #fff; }
.wl-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.wl-stats span { display: flex; flex-direction: column; gap: 3px; }
.wl-stats small { color: var(--muted-2); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wl-stats b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.wl-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wl-note { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; font-size: 10.5px; font-weight: 700; }
.wl-note i { width: 6px; height: 6px; border-radius: 50%; }
.wl-note.queued { background: rgba(245, 197, 66, .1); color: #ffd98a; }
.wl-note.queued i { background: #f5c542; box-shadow: 0 0 8px #f5c542; animation: playing-pulse 1.6s ease-in-out infinite; }
.wl-note.held { background: rgba(248, 113, 113, .1); color: #ffb4b4; }
.wl-note.held i { background: #f87171; }
.wl-actions { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-left: 1px solid var(--line); background: rgba(3, 14, 26, .5); }
.wl-deposit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 11px; border: 0; color: #2a1a00; font-family: var(--display); font-size: 12px; letter-spacing: .04em; background: linear-gradient(135deg, #fff1b8 0%, #ffe393 38%, #f5b301 100%); box-shadow: 0 0 0 1px rgba(255, 227, 147, .6), 0 6px 18px rgba(250, 204, 21, .35), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .12s ease, filter .12s ease; }
.wl-deposit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wl-deposit svg { width: 16px; height: 16px; stroke-width: 2.6; }
.wl-withdraw { height: 44px; border-radius: 11px; font-family: var(--display); font-size: 11px; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wl-withdraw svg { width: 15px; height: 15px; }
.wl-bank { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted); background: rgba(126, 191, 255, .05); }
.wl-bank.on { color: #bdf5d3; }
.wl-bank.off { color: #ffb4b4; background: rgba(248, 113, 113, .08); }
.wl-hint { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted-2); }
.wl-hint code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; border-radius: 7px; background: rgba(126, 191, 255, .08); color: var(--mint); font-size: 11px; }
.wl-copy { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); }
.wl-copy:hover { color: var(--mint); border-color: rgba(74, 222, 128, .45); }
.wl-copy svg { width: 13px; height: 13px; }
.wl-activity { padding: 0; overflow: hidden; }
.wl-activity-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.wl-activity-head h3 { margin: 0; font-size: 14px; }
.wl-activity-head p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }
.wl-activity-head .wl-seg { margin: 0 0 0 auto; }
.wl-activity-head .wl-seg .filter-chip { min-width: 0; height: 32px; padding: 0 14px; font-size: 9.5px; }
.wl-activity .empty-table { padding: 26px 16px; }
.wl-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.wl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 110px 80px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: rgba(126, 191, 255, .03); }
.wl-row:hover { background: rgba(126, 191, 255, .06); }
.wl-kind { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(126, 191, 255, .08); color: var(--muted); }
.wl-kind svg { width: 15px; height: 15px; }
.wl-row.deposit .wl-kind { background: rgba(74, 222, 128, .12); color: var(--mint); }
.wl-row.payout .wl-kind { background: rgba(250, 204, 21, .12); color: #ffd98a; }
.wl-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-main strong { font-size: 12px; }
.wl-main strong em { font-style: normal; color: var(--muted-2); font-weight: 600; }
.wl-main small { color: var(--muted-2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-amount { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.wl-amount.in { color: var(--green); }
.wl-amount.out { color: var(--text); }
.wl-status { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.wl-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wl-status.paid { background: rgba(74, 222, 128, .12); color: var(--mint); }
.wl-status.queued { background: rgba(245, 197, 66, .12); color: #ffd98a; }
.wl-status.queued i { animation: playing-pulse 1.4s ease-in-out infinite; box-shadow: 0 0 8px currentColor; }
.wl-status.held { background: rgba(248, 113, 113, .12); color: #ffb4b4; }
.wl-status.refunded { background: rgba(126, 191, 255, .1); color: var(--muted); }
.wl-time { text-align: right; color: var(--muted-2); font-size: 10.5px; white-space: nowrap; }
@media (max-width: 900px) {
  .wl-hero { grid-template-columns: 1fr; }
  .wl-actions { border-left: 0; border-top: 1px solid var(--line); }
  .wl-activity-head { flex-wrap: wrap; }
  .wl-activity-head .wl-seg { margin-left: 0; order: 3; width: 100%; display: flex; }
  .wl-activity-head .wl-seg .filter-chip { flex: 1; }
  .wl-row { grid-template-columns: 30px minmax(0, 1fr) 110px 90px; }
  .wl-time { display: none; }
}
.history-panel { margin-top: 17px; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.history-table td, .history-table th { padding-left: 21px; padding-right: 21px; }
.tx-kind { display: flex; align-items: center; gap: 8px; }
.tx-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: rgba(74, 222, 128,.1); }
.tx-icon.negative { color: var(--red); background: rgba(255,113,142,.1); }
.tx-icon.neutral { color: var(--purple); background: rgba(74, 222, 128,.1); }
.tx-icon svg { width: 13px; height: 13px; }
/* Row one is the identity card beside the level card; everything below spans the full
   width. minmax(0, 1fr) on the second column is what stops a long number inside from
   forcing the column wider than the page. */
.profile-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.profile-layout > .level-panel { margin-bottom: 0; align-self: stretch; }
.profile-main { grid-column: 1 / -1; min-width: 0; }
.profile-card { min-width: 0; padding: 25px 20px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(28,26,48,.96), rgba(15,15,26,.96)); display: flex; flex-direction: column; align-items: center; }
.profile-avatar { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 14px; border: 5px solid rgba(74, 222, 128,.15); border-radius: 22px; color: #fff; background: linear-gradient(135deg, #6a49d1, #c76bf7); font-size: 28px; font-weight: 900; }
.profile-card h2 { margin: 0; font-size: 18px; }
.profile-card p { margin: 6px 0 9px; color: var(--muted); font-size: 10px; }
/* Separate tiles instead of cells divided by full-bleed rules. The old borders ran the
   whole width of the card and read as lines escaping past the numbers. */
.profile-stat-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.profile-stat { min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(126, 191, 255, .045); }
.profile-stat strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-stat span { display: block; color: var(--muted); margin-top: 4px; font-size: 9px; }
.profile-main { display: grid; gap: 16px; }
.settings-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.settings-panel h3 { margin: 0 0 17px; font-size: 14px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 53px; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { display: block; font-size: 11px; }
.setting-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.setting-value { color: #ddd6ee; font-size: 11px; }
.status-label { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 10px; font-weight: 800; }
.toggle { width: 38px; height: 22px; padding: 3px; border-radius: 30px; background: var(--purple); }
.toggle span { display: block; width: 16px; height: 16px; margin-left: auto; border-radius: 50%; background: #fff; }

/* Login and other modals */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(2, 5, 11, .8); backdrop-filter: blur(10px); animation: modal-bg .18s ease both; }
@keyframes modal-bg { from { opacity: 0; } to { opacity: 1; } }
.minecraft-auth-kicker { margin-bottom: 8px; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.minecraft-steps { display: grid; gap: 10px; margin: 18px 0 14px; }
.minecraft-step { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid rgba(126, 191, 255, .18); border-radius: 12px; background: linear-gradient(180deg, rgba(10, 17, 27, .78), rgba(8, 15, 24, .94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.step-number { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 23px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-size: 10px; font-weight: 900; }
.minecraft-step strong { display: block; color: #e8f5ff; font-size: 11px; line-height: 1.4; }
.minecraft-step small { display: block; color: var(--muted); margin-top: 5px; font-size: 9px; line-height: 1.45; }
.minecraft-step code { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.copy-inline { display: inline-flex; align-items: center; gap: 5px; padding: 0; margin-top: 8px; color: var(--purple); background: transparent; font-size: 9px; font-weight: 800; }
.copy-inline svg { width: 12px; height: 12px; }
.command-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(86, 184, 245,.18); border-radius: 7px; background: rgba(86, 184, 245,.05); }
.command-copy code { overflow: hidden; color: #e0f5ff; text-overflow: ellipsis; white-space: nowrap; }
.command-copy button { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border: 1px solid rgba(86, 184, 245,.2); border-radius: 6px; color: var(--cyan); background: transparent; }
.command-copy svg { width: 13px; height: 13px; }
.minecraft-offline { display: flex; gap: 8px; margin: 0 0 14px; padding: 11px 12px; border: 1px solid rgba(248, 113, 113, .35); border-radius: 10px; background: rgba(248, 113, 113, .08); color: #ffd3d3; font-size: 9px; line-height: 1.55; }
.minecraft-offline svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 1px; }
.minecraft-offline code { color: #ffe0ac; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* The amount picker sits inside a numbered step, so it must not carry the outer
   form-field's own top margin or it drifts away from the step it belongs to. */
.minecraft-step .amount-field { margin: 9px 0 0; }
.minecraft-step .amount-field .input-row { margin: 0; }
.minecraft-step .amount-field .quick-bets { margin-top: 7px; }
.field-hint.out-of-range { color: var(--amber); }
/* "verified" is a state the account already has, so it reads as a badge on the label
   rather than a sentence of help text under a field nobody can edit. */
/* An empty section should still look designed - a bare grey sentence under a heading
   reads as a page that failed to load. Named .panel-empty, not .empty-state: that name
   is already taken further down by the full-height centred block used for whole pages. */
.panel-empty { display: flex; gap: 13px; align-items: flex-start; padding: 18px 4px 6px; text-align: left; }
.panel-empty > svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--muted-2); margin-top: 1px; }
.panel-empty strong { display: block; color: #dbeafe; font-size: 13px; margin-bottom: 4px; }
.panel-empty p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 12px; line-height: 1.6; }

.verified-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 700; }
.verified-tag svg { width: 11px; height: 11px; }
/* The segmented picker that replaced the native dropdowns in the game panel. The real
   <select> stays in the DOM (everything reads it) but is taken out of the layout. */
.picker-select { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.option-picker { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(2, 12, 22, .6); }
.option-chip {
  flex: 1; min-width: 0; min-height: 34px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 7px;
  color: var(--muted); background: transparent;
  font-family: inherit; font-size: 10.5px; font-weight: 850; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap;
  transition: color .14s ease, background .14s ease, border-color .14s ease, transform .14s ease;
}
.option-chip:hover:not(:disabled):not(.active) { color: var(--text); background: rgba(126, 191, 255, .08); }
.option-chip.active { color: #05210f; background: linear-gradient(180deg, var(--mint), var(--green)); border-color: rgba(74, 222, 128, .55); box-shadow: 0 4px 12px rgba(74, 222, 128, .22); }
.option-chip:active:not(:disabled) { transform: scale(.97); }
.option-picker.disabled { opacity: .45; }
.option-chip:disabled { cursor: not-allowed; }
/* The payout destination is shown, not typed - it is fixed to the signed-in account. */
.payout-name { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(74, 222, 128, .07); }
.payout-name strong { flex: 1; min-width: 0; color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.payout-name span { display: grid; place-items: center; color: var(--muted-2); }
.payout-name svg { width: 14px; height: 14px; }
.text-input[readonly] { color: var(--muted); cursor: default; }
.text-input[readonly]:focus { border-color: var(--line); box-shadow: none; }

/* Live money signals: a pulsing dot while waiting, green when it lands. */
.deposit-status { min-height: 22px; display: flex; align-items: center; margin: 22px 0 12px; padding: 0 2px; color: var(--text); font-size: 12px; }
.deposit-modal .modal-form-actions { margin-bottom: 14px; }
.waiting-dot { width: 8px; height: 8px; flex: 0 0 8px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--amber); animation: waiting-pulse 1.4s ease-in-out infinite; }
@keyframes waiting-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.deposit-status.received { display: flex; align-items: center; gap: 9px; border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .12); color: var(--mint); }
.deposit-status.received svg { width: 18px; height: 18px; flex: 0 0 18px; }
.deposit-status.received strong { color: var(--mint); }
.minecraft-status.confirmed { display: flex; align-items: center; gap: 8px; border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .12); color: var(--mint); }
.minecraft-status.confirmed svg { width: 16px; height: 16px; flex: 0 0 16px; }
.balance-pill.credited { animation: balance-credited 1.1s ease-out; }
.balance-pill.debited { animation: balance-debited .7s ease-out; }
@keyframes balance-debited { 0% { box-shadow: 0 0 0 0 rgba(255, 113, 142, .55); border-color: rgba(255, 113, 142, .6); } 100% { box-shadow: 0 0 0 10px rgba(255, 113, 142, 0); border-color: var(--line-strong); } }
@keyframes balance-credited {
  0% { border-color: var(--green); box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  100% { border-color: var(--line-strong); box-shadow: 0 0 0 14px rgba(74, 222, 128, 0); }
}
.minecraft-status { min-height: 16px; margin: 13px 0 10px; color: var(--muted); font-size: 10px; text-align: center; }
.payout-target { margin: 4px 0 18px; }
.payout-target .step-number { display: grid; place-items: center; }
.payout-target .step-number svg { width: 15px; height: 15px; }
.minecraft-auth-card .form-submit { margin-top: 0; }
.modal-card { width: min(470px, 100%); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; position: relative; padding: 30px; border: 1px solid var(--line-strong); border-radius: 22px; background: linear-gradient(155deg, #172231, #101722 58%); box-shadow: 0 30px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255,255,255,.05); animation: modal-card-in .18s ease both; scrollbar-width: thin; scrollbar-color: #3c4a5e transparent; }
.modal-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(90% 35% at 0% 0%, rgba(134, 239, 172, .055), transparent 70%); pointer-events: none; }
.modal-card > * { position: relative; z-index: 1; }
.modal-card.wide { width: min(560px, 100%); }
@keyframes modal-card-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close { position: absolute; top: 14px; right: 14px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(126, 191, 255, .2); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.03); transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.modal-close:hover { color: #fff; background: rgba(126, 191, 255, .1); border-color: rgba(74, 222, 128, .42); transform: translateY(-1px); }
.modal-close svg { width: 15px; height: 15px; }
.modal-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }
.modal-brand .brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
.modal-brand strong { font-size: 14px; letter-spacing: .14em; }
.modal-card h2 { margin: 0; font-size: clamp(24px, 4vw, 29px); letter-spacing: -.04em; line-height: 1.2; }
.modal-card .modal-subtitle { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 10px 0 22px; }
.form-field { margin-bottom: 14px; }
/* :not(.control-label) matters - a bare `.form-field label` outranks `.control-label`
   on specificity and was flattening it back to display:block, which is what made
   every game panel read "Betmin 10" and "Win chance89%". */
.form-field label:not(.control-label) { display: block; color: #aaa5bc; font-size: 10px; font-weight: 800; margin-bottom: 7px; }
.form-error { min-height: 16px; margin: -2px 0 10px; color: var(--red); font-size: 10px; }
.form-submit { width: 100%; min-height: 45px; margin-top: 2px; }
.modal-note { display: flex; gap: 8px; margin-top: 16px; color: var(--muted-2); font-size: 9px; line-height: 1.5; }
/* the 18+ / no-real-money confirmation, in the sign-in card and on the gate */
.auth-agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(74, 222, 128, .3); border-radius: 10px; background: rgba(74, 222, 128, .07); color: var(--muted); font-size: 11px; line-height: 1.5; cursor: pointer; }
.auth-agree input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--green); cursor: pointer; }
.auth-agree strong { color: var(--text); }
.auth-agree a { color: var(--mint); text-decoration: underline; }
.auth-agree.done { opacity: .75; }
.age-gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(2, 8, 16, .9); backdrop-filter: blur(6px); }
.age-gate.hidden { display: none; }
.age-card { width: min(440px, 100%); padding: 28px; border: 1px solid rgba(74, 222, 128, .3); border-radius: 18px; background: linear-gradient(160deg, #10203a, #07101f); box-shadow: 0 30px 100px rgba(0, 0, 0, .6); animation: modal-card-in .24s ease both; }
.age-card h2 { margin: 12px 0 8px; font-family: var(--display); font-size: 22px; color: var(--mint); }
.age-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.age-card p strong { color: var(--text); }
.age-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.age-actions .primary-button:disabled { opacity: .45; cursor: not-allowed; }
.age-actions .outline-button { text-decoration: none; }
.modal-note svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--cyan); }
.wallet-modal-copy { margin: 8px 0 19px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.wallet-method { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.wallet-method.selected { border-color: rgba(74, 222, 128,.48); background: rgba(74, 222, 128,.09); }
.wallet-method-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--cyan); background: rgba(86, 184, 245,.1); }
.wallet-method-icon svg { width: 16px; height: 16px; }
.wallet-method strong { display: block; font-size: 11px; }
.wallet-method small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.wallet-method input { margin-left: auto; accent-color: var(--purple); }
.modal-form-actions { display: flex; gap: 8px; }
.modal-form-actions button { flex: 1; }

/* Account dialogs share one hierarchy through input, payment and confirmation. */
.account-flow-card { width: min(520px, 100%); border-color: rgba(99, 229, 255, .3); box-shadow: 0 30px 100px rgba(0, 0, 0, .65), 0 0 40px rgba(0, 220, 188, .1), inset 0 1px 0 rgba(160, 255, 209, .1); }
.account-flow-card .modal-close { top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 10px; }
.account-flow-header { padding-right: 34px; margin-bottom: 22px; }
.account-flow-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.account-flow-eyebrow svg { width: 15px; height: 15px; }
.account-flow-title { font-family: var(--body); font-weight: 800; }
.account-flow-description { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.account-flow-description strong { color: var(--text); font-weight: 600; }
.account-flow-steps { display: grid; gap: 10px; margin: 20px 0; }
.account-flow-step { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(3, 8, 16, .28); }
.account-flow-step .step-number { width: 26px; height: 26px; flex-basis: 26px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--muted); background: var(--panel-2); font-family: var(--body); font-size: 11px; font-weight: 800; }
.account-flow-step > div:last-child { flex: 1; min-width: 0; }
.account-flow-step strong { display: block; font-size: 13px; line-height: 1.5; }
.account-flow-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-flow-step.is-current { border-color: rgba(134, 239, 172, .28); background: rgba(74, 222, 128, .045); }
.account-flow-step.is-current .step-number, .account-flow-step.is-done .step-number { color: #082111; background: var(--mint); border-color: var(--mint); }
.account-flow-step.is-done { border-color: rgba(134, 239, 172, .18); }
.account-flow-card .text-input { min-height: 46px; padding: 0 13px; border-radius: 10px; background: #0b121d; font-size: 14px; }
.account-flow-card .form-field label:not(.control-label) { color: var(--muted); font-size: 12px; }
.account-flow-card .quick-bets { gap: 6px; }
.account-flow-card .quick-bets button { min-height: 32px; font-size: 11px; border-radius: 8px; }
.account-flow-card .field-hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
.account-flow-card .form-error { font-size: 12px; line-height: 1.5; }
.account-flow-payment { margin: 16px 0; padding: 4px 16px; border: 1px solid var(--line); border-radius: 13px; background: #0b121d; }
.account-flow-payment-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-flow-payment-row + .account-flow-payment-row { border-top: 1px solid var(--line); }
.account-flow-payment-row strong { display: inline; text-align: right; color: var(--text); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.account-flow-payment-row:last-child strong { color: var(--mint); }
.account-flow-command { gap: 12px; min-height: 54px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #080f19; }
.account-flow-command code { min-width: 0; color: #e3ebf6; font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.account-flow-command button { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; color: var(--mint); background: rgba(134, 239, 172, .07); }
.account-flow-command button:hover { background: rgba(134, 239, 172, .15); }
.account-flow-command svg { width: 16px; height: 16px; }
.account-flow-fee-note { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.account-flow-status { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(3, 8, 16, .35); font-size: 12px; line-height: 1.6; text-align: left; }
.account-flow-status svg { flex: 0 0 18px; width: 18px; height: 18px; }
.account-flow-status.is-working { color: #e3d6b2; border-color: rgba(245, 165, 36, .22); background: rgba(245, 165, 36, .045); }
.account-flow-status.is-working .waiting-dot { width: 14px; height: 14px; flex-basis: 14px; margin: 0; border: 2px solid rgba(245, 165, 36, .25); border-top-color: var(--amber); background: none; animation: account-flow-spin .8s linear infinite; }
.account-flow-status.is-success { color: var(--mint); border-color: rgba(134, 239, 172, .28); background: rgba(74, 222, 128, .055); }
.account-flow-status.is-error { color: #ffbaba; border-color: rgba(248, 113, 113, .28); background: rgba(248, 113, 113, .055); }
.account-flow-actions { display: flex; gap: 10px; margin-top: 18px; }
.account-flow-actions > button { flex: 1; min-height: 46px; font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.account-flow-card .form-submit { min-height: 46px; font-family: var(--body); font-size: 13px; letter-spacing: 0; }
.account-flow-card .modal-note { font-size: 11px; line-height: 1.6; }
.account-flow-card .auth-agree { padding: 12px 13px; border-color: var(--line); background: rgba(3, 8, 16, .25); font-size: 11px; line-height: 1.65; }
/* Progress is a compact indicator; transfer instructions keep their full rows. */
[data-account-flow="login"] .account-flow-header { margin-bottom: 18px; }
[data-account-flow="login"] .modal-brand { margin-bottom: 14px; }
[data-account-flow="login"] .account-flow-title { font-size: 26px; }
[data-account-flow="login"] .account-flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 20px; }
[data-account-flow="login"] .account-flow-step { align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 10px 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
[data-account-flow="login"] .account-flow-step .step-number { width: 22px; height: 22px; flex-basis: 22px; border-radius: 6px; }
[data-account-flow="login"] .auth-agree + .form-submit { margin-top: 14px; }
[data-account-flow="login"] .account-flow-actions:has(> :only-child.hidden) { display: none; }
@keyframes account-flow-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .modal-root { padding: 12px; }
  .modal-card.account-flow-card { max-height: calc(100dvh - 24px); padding: 24px 20px; border-radius: 18px; }
  .account-flow-card .modal-close { top: 16px; right: 16px; }
  .account-flow-step { padding: 12px; gap: 10px; }
  .account-flow-payment { padding: 3px 12px; }
  .account-flow-payment-row { gap: 10px; }
  .account-flow-actions { flex-wrap: wrap; }
  .account-flow-actions > button { flex: 1 0 140px; }
  [data-account-flow="login"] .account-flow-step { gap: 6px; padding: 9px 4px; font-size: 11px; }
  [data-account-flow="login"] .account-flow-step .step-number { width: 20px; height: 20px; flex-basis: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-root, .modal-card, .account-flow-status .waiting-dot { animation: none; }
  .game-card, .modal-close { transition: none; }
  .game-card:hover { transform: none; }
  .game-card:hover::before { animation: none; opacity: 0; }
}

.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 235px; max-width: 340px; display: flex; gap: 10px; align-items: flex-start; padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); animation: toast-in .2s ease both; pointer-events: auto; }
.toast.success { border-color: rgba(74, 222, 128,.35); }
.toast.error { border-color: rgba(255,113,142,.35); }
.toast-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--green); }
.toast.error .toast-icon { color: var(--red); }
.toast-text { color: #e4e0ec; font-size: 11px; line-height: 1.4; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Case visuals and opening animation */
.game-board-cases .case-chests { min-height: 156px; align-items: flex-end; gap: 10px; padding-top: 132px; }
.game-board-cases .chest { position: relative; width: 128px; height: 126px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; opacity: 1; }
.game-board-cases .chest::before, .game-board-cases .chest::after { display: none; }
.game-board-cases .chest:nth-child(2) { width: 150px; height: 148px; transform: none; background: transparent; }
.game-board-cases .chest:nth-child(3) { transform: none; }
.game-board-cases .chest > img { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 14px 19px rgba(0,0,0,.35)); transition: transform .22s ease, filter .22s ease; }
.game-board-cases .chest:not(:disabled):hover > img { transform: translateY(-8px) scale(1.06); filter: drop-shadow(0 19px 26px rgba(116,71,216,.42)); }
.game-board-cases .chest:disabled:not(.selected) > img { filter: grayscale(.35) brightness(.72) drop-shadow(0 10px 15px rgba(0,0,0,.28)); }
.game-board-cases .chest.selected > img { filter: drop-shadow(0 0 17px rgba(255,196,89,.6)); }
.game-board-cases .chest.opening > img { animation: chest-open-pulse .62s ease-in-out both; }
.game-board-cases .chest.opened > img { filter: drop-shadow(0 0 22px rgba(255,191,75,.68)); }
@keyframes chest-open-pulse { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-10px) rotate(-3deg) scale(1.08); } 70% { transform: translateY(2px) rotate(2deg) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
/* The drop is a child of the chest button, so it can climb out of the open lid.
   Rarity drives one --loot colour that the beam, glow and value text all share. */
.case-drop {
  position: absolute; z-index: 4;
  left: 50%; bottom: 76%;
  width: max-content;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  --loot: #cfe4f5;
}
/* A shaft of light from the chest lid up to the ore, drawn behind both. */
.case-drop .case-beam {
  position: absolute; z-index: -1;
  left: 50%; top: 2px;
  width: 96px; height: 158px; margin-left: -48px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--loot) 45%, transparent) 55%, color-mix(in srgb, var(--loot) 70%, transparent));
  clip-path: polygon(0 0, 100% 0, 68% 100%, 32% 100%);
  opacity: 0;
  transition: opacity .3s ease .1s;
}
.case-drop.revealed .case-beam { opacity: .5; animation: loot-beam 1.9s ease-in-out .35s infinite; }
.case-drop-item {
  display: block;
  opacity: 0;
  transform: translateY(34px) scale(.35) rotate(-25deg);
}
.case-drop.revealed .case-drop-item { animation: loot-rise .58s cubic-bezier(.18,.9,.3,1.25) forwards; }
.case-drop.settled .case-drop-item { animation: none; opacity: 1; transform: none; }
.case-drop.settled .case-drop-info { transition: none; }
.case-drop.settled .case-beam { transition: none; }
.case-drop-item img {
  width: 74px; height: 74px; display: block;
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 16px var(--loot)) drop-shadow(0 8px 12px rgba(0,0,0,.5));
}
.case-drop.revealed .case-drop-item img { animation: loot-bob 2.4s ease-in-out .6s infinite; }
.case-drop-info {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--loot) 45%, transparent);
  border-radius: 9px;
  background: rgba(2, 12, 22, .92);
  white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  transition: opacity .28s ease .34s, transform .28s ease .34s;
}
.case-drop.revealed .case-drop-info { opacity: 1; transform: translateY(0); }
.case-drop-info strong { color: var(--loot); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.case-drop-value { color: var(--green); font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.case-drop-value.below-stake { color: var(--red); }
.case-drop.rarity-empty .case-drop-value, .case-drop.rarity-stone .case-drop-value { color: var(--muted); }
.case-drop-info small { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; }

.rarity-netherite { --loot: #ff9d6b; }
.rarity-emerald { --loot: #4ade80; }
.rarity-diamond { --loot: #67e8f9; }
.rarity-gold { --loot: #fbbf24; }
.rarity-iron { --loot: #e2e8f0; }
.rarity-stone { --loot: #94a3b8; }
.rarity-empty { --loot: #64748b; }

@keyframes loot-rise {
  0% { opacity: 0; transform: translateY(34px) scale(.35) rotate(-25deg); }
  55% { opacity: 1; transform: translateY(-14px) scale(1.16) rotate(8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes loot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes loot-beam {
  0%, 100% { opacity: .34; }
  50% { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .case-drop.revealed .case-drop-item { animation: none; opacity: 1; transform: none; }
  .case-drop.revealed .case-drop-item img, .case-drop.revealed .case-beam { animation: none; }
}

.drop-chip { display: inline-flex; align-items: center; gap: 5px; }
.drop-chip img { width: 15px; height: 15px; image-rendering: pixelated; }
.drop-chip { border-color: color-mix(in srgb, var(--loot) 35%, transparent) !important; color: var(--loot) !important; }
/* The blank is a real outcome and now sits on the ladder, dimmed so it reads as one. */
.drop-chip.blank { opacity: .72; }
.drop-chip.blank img { filter: grayscale(.6); }

/* Crash mining animation */
.crash-mine-scene { width: min(500px, 92%); height: 178px; position: relative; z-index: 1; margin: 5px auto 12px; overflow: hidden; border-radius: 13px; background: linear-gradient(180deg, rgba(12,12,27,.1), rgba(3,4,11,.7)); }
/* the live chart: a dark glass panel, the canvas fills it; the frame flashes red on a crash */
.crash-chart-wrap { width: min(560px, 96%); height: 230px; position: relative; z-index: 1; margin: 2px auto 14px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(126, 191, 255, .14); background: linear-gradient(180deg, rgba(6, 12, 26, .55), rgba(3, 6, 14, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 30px rgba(0, 0, 0, .35); transition: border-color .2s ease, box-shadow .2s ease; }
.crash-chart-wrap.crashed { border-color: rgba(255, 113, 142, .45); box-shadow: inset 0 0 40px rgba(255, 113, 142, .08), 0 12px 30px rgba(0, 0, 0, .35); }
.crash-chart-wrap.betting { border-color: rgba(74, 222, 128, .18); }
.crash-chart { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) { .crash-chart-wrap { height: 190px; } }
.crash-depth-meter { position: absolute; z-index: 3; top: 6px; left: 17px; right: 17px; height: 4px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.1); }
.depth-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink)); box-shadow: 0 0 13px var(--cyan); transition: width .06s linear; }
.crash-block-layers { position: absolute; top: 20px; right: 28px; bottom: -10px; left: 28px; display: grid; grid-template-rows: repeat(5, 1fr); gap: 4px; }
.crash-layer { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; transition: transform .28s ease, opacity .28s ease, filter .2s ease; }
.crash-layer span { min-width: 0; position: relative; overflow: hidden; border: 1px solid rgba(114,126,170,.25); border-radius: 4px; background: linear-gradient(135deg, #2a2d4d, #14162a); box-shadow: inset 0 1px rgba(255,255,255,.07), inset -5px -5px 11px rgba(0,0,0,.25); }
.crash-layer span:nth-child(3) { background: linear-gradient(135deg, #34375a, #1a1b31); }
.crash-layer span::after { content: ""; position: absolute; width: 4px; height: 4px; right: 22%; top: 25%; border-radius: 1px; background: rgba(178,187,219,.3); box-shadow: -12px 7px rgba(104,111,155,.25), 10px 12px rgba(0,0,0,.26); }
.crash-layer .ore { border-color: rgba(74, 222, 128,.36); background: radial-gradient(circle at 32% 38%, #e9baff 0 5%, transparent 6%), radial-gradient(circle at 69% 63%, #b25cff 0 9%, transparent 10%), linear-gradient(135deg, #44245e, #1d183a); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 0 12px rgba(170,80,255,.13); }
.crash-layer.cracking { animation: layer-hit .2s ease-in-out infinite alternate; filter: brightness(1.38) saturate(1.22); }
.crash-layer.broken { opacity: .24; transform: translateY(5px) scale(.97); filter: grayscale(.65); }
.crash-layer.broken span:nth-child(odd) { transform: translate(-4px, 5px) rotate(-3deg); }
.crash-layer.broken span:nth-child(even) { transform: translate(5px, 8px) rotate(4deg); }
@keyframes layer-hit { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.crash-pickaxe { width: 70px; height: 70px; position: absolute; z-index: 4; left: 40%; top: 7px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(255,177,61,.45)); transition: left .08s linear, top .08s linear, transform .08s linear; }
.crash-pickaxe.pickaxe-broken { opacity: .58; filter: grayscale(.7) drop-shadow(0 0 4px rgba(255,113,142,.35)); transform: rotate(72deg) translate(11px, 8px) !important; animation: pickaxe-drop .5s ease-out both; }
.crash-mine-scene.crashed .crash-block-layers { filter: sepia(.15) saturate(.8); }
.crash-mine-scene.cashout .crash-block-layers { filter: brightness(1.1) saturate(1.18); }
@keyframes pickaxe-drop { from { opacity: 1; } to { opacity: .48; } }

.game-control-panel input:disabled, .game-control-panel select:disabled, .game-control-panel button:disabled:not(.mine-tile) { cursor: not-allowed; opacity: .55; }
/* The network round-trip can be slower than the interaction budget. The loading
   state is painted synchronously by withButtonLoading, so every game gives the
   player visible motion in the first frame instead of waiting for Supabase. */
button[data-loading="1"] { animation: action-button-pulse .72s ease-in-out infinite; }
@keyframes action-button-pulse {
  0%, 100% { filter: brightness(1); transform: translateY(0); }
  50% { filter: brightness(1.16); transform: translateY(-1px); }
}

/* Shared-round Crash lobby */
.game-board-crash { min-height: 650px; }
.game-board-crash .crash-stage { min-height: 405px; justify-content: flex-start; padding-top: 47px; }
.crash-round-line { width: min(530px, 92%); display: flex; justify-content: space-between; margin-bottom: 20px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.crash-round-line span:last-child { color: var(--cyan); }
.crash-action-stack { display: grid; gap: 8px; }
.crash-control-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid rgba(86, 184, 245,.14); border-radius: 9px; background: rgba(86, 184, 245,.04); }
.crash-control-icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 26px; color: var(--cyan); border-radius: 7px; background: rgba(86, 184, 245,.1); }
.crash-control-icon svg { width: 14px; height: 14px; }
.crash-control-note strong { display: block; color: #dbeafe; font-size: 10px; }
.crash-control-note small { display: block; color: var(--muted); margin-top: 4px; font-size: 9px; line-height: 1.4; }
.auto-cashout-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; align-items: center; margin-top: 10px; }
.auto-cashout-toggle { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(74, 222, 128,.22); border-radius: 9px; color: #cfc8e1; background: rgba(74, 222, 128,.06); font-size: 10px; font-weight: 850; }
.auto-cashout-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--purple); }
.auto-cashout-target { position: relative; }
.auto-cashout-target .text-input { padding-right: 23px; text-align: center; }
.auto-cashout-target > span { position: absolute; right: 10px; top: 12px; color: var(--muted); font-size: 11px; font-weight: 900; }
.crash-bets-panel { position: relative; z-index: 2; margin: 0 28px 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7,7,15,.4); }
.crash-bets-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crash-bets-head strong { display: block; font-size: 11px; }
.crash-bets-head small { display: block; color: var(--muted); margin-top: 4px; font-size: 9px; }
.crash-pool { text-align: right; }
.crash-pool strong { color: var(--cyan); font-size: 14px; }
/* The highlighted "mine" row bleeds 7px past the content box on each side, so the
   list carries matching padding to absorb it - otherwise the bleed counts as real
   overflow and the list grows a horizontal scrollbar under every round. */
.crash-bet-list { max-height: 168px; overflow-y: auto; overflow-x: hidden; margin-top: 10px; padding: 0 7px; display: grid; gap: 5px; }
/* Each row is its own card with a colour edge for its state, so a live bet, a cash-out
   and a bust are told apart by shape and colour rather than by reading 8px text. */
.crash-bet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -7px; padding: 8px 10px 8px 11px;
  border: 1px solid var(--line); border-left: 3px solid var(--cbet, var(--muted-2));
  border-radius: 8px; background: rgba(126, 191, 255, .04);
}
.crash-bet-row.cbet-live    { --cbet: #56b8f5; background: rgba(86, 184, 245, .09); }
.crash-bet-row.cbet-won     { --cbet: #4ade80; background: rgba(74, 222, 128, .1); }
.crash-bet-row.cbet-lost    { --cbet: #f87171; background: rgba(248, 113, 113, .08); }
.crash-bet-row.cbet-waiting { --cbet: #7f9cb8; }
/* Your own row is the one you look for first: brighter edge and a ring around it. */
.crash-bet-row.mine { box-shadow: 0 0 0 1px rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .12); }
.crash-bet-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crash-bet-player .tiny-avatar { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 7px; }
.crash-bet-player div { min-width: 0; }
.crash-bet-player strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.crash-bet-player strong i {
  font-style: normal; margin-left: 4px; padding: 1px 5px; border-radius: 4px;
  background: rgba(74, 222, 128, .22); color: #86efac; font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase; vertical-align: middle;
}
.cbet-pill {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cbet) 45%, transparent);
  background: color-mix(in srgb, var(--cbet) 16%, transparent);
  color: var(--cbet); font-family: var(--display); font-size: 8px; letter-spacing: .06em;
}
.crash-bet-amount { text-align: right; flex: 0 0 auto; }
.crash-bet-amount strong { display: block; color: #eaf4ff; font-size: 12px; font-weight: 800; }
.crash-bet-amount small { display: block; color: var(--muted); margin-top: 2px; font-size: 9.5px; font-weight: 800; }
.crash-bet-row.cbet-won .crash-bet-amount small { color: #86efac; }
.crash-bet-row.cbet-lost .crash-bet-amount small { color: #fca5a5; }

/* Promo page: the redeem box sits beside the totals, like the reward cards do. */
.promo-page-form { display: grid; gap: 10px; margin-top: 4px; }
.crash-empty-bets { padding: 11px 0 3px; color: var(--muted-2); font-size: 10px; text-align: center; }

/* Additional lobby and control details */
.game-picker { display: flex; align-items: center; gap: 9px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.game-select { min-width: 145px; min-height: 34px; padding: 0 29px 0 11px; outline: none; border: 1px solid rgba(74, 222, 128,.3); border-radius: 7px; color: #fff; background: rgba(74, 222, 128,.13); font-size: 10px; font-weight: 850; }
.game-select:focus { border-color: rgba(74, 222, 128,.7); box-shadow: 0 0 0 3px rgba(74, 222, 128,.1); }
.game-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.game-tab { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 7px; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); transition: .18s ease; }
.game-tab:hover { border-color: rgba(74, 222, 128,.35); background: rgba(74, 222, 128,.06); }
.game-tab.active { border-color: rgba(74, 222, 128,.56); background: linear-gradient(135deg, rgba(74, 222, 128,.18), rgba(74, 222, 128,.06)); box-shadow: inset 2px 0 var(--purple); }
.game-tab img { width: 50px; height: 50px; border-radius: 7px; object-fit: cover; }
.game-tab span { min-width: 0; display: flex; flex-direction: column; }
.game-tab strong { font-size: 11px; }
.game-tab small { overflow: hidden; color: var(--muted); margin-top: 4px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.control-kicker { font-size: 8px; margin-bottom: 9px; }
.control-kicker::before { width: 14px; }
.control-title { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.control-description { min-height: 31px; margin: 7px 0 21px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.range-input { width: 100%; height: 5px; display: block; margin: 17px 0 0; appearance: none; border-radius: 6px; outline: none; background: linear-gradient(90deg, var(--purple) 0 53%, rgba(255,255,255,.12) 53% 100%); accent-color: var(--purple); }
.range-input::-webkit-slider-thumb { width: 17px; height: 17px; appearance: none; border: 3px solid #fff; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgba(74, 222, 128,.2); cursor: pointer; }
.range-input::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgba(74, 222, 128,.2); cursor: pointer; }
.range-hints { display: flex; justify-content: space-between; color: var(--muted-2); margin-top: 11px; font-size: 9px; }
.empty-state { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; }
/* gated pages: the real page, dimmed and out of reach, with the sign-in card on top */
.gate-page.has-preview { position: relative; min-height: 520px; }
.gate-preview { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; opacity: .7; filter: saturate(.8); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.gate-page.has-preview .gate-card-main { position: relative; z-index: 1; min-height: 0; width: min(440px, 100%); margin: 120px auto 0; padding: 30px 28px; background: linear-gradient(160deg, rgba(8, 32, 54, .98), rgba(4, 18, 32, .98)); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(74, 222, 128, .18); }
.gate-page.has-preview .gate-card-main h1 { font-size: 19px; }
.gate-daily { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.gate-day { padding: 14px 8px; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 32, 54, .8); }
.gate-day.case { border-color: rgba(245, 197, 66, .35); background: rgba(245, 197, 66, .07); }
.gate-day small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.gate-day img { width: 34px; height: 34px; margin: 10px auto 8px; display: block; image-rendering: pixelated; }
.gate-day strong { display: block; font-family: var(--display); font-size: 12px; color: var(--mint); }
.gate-day.case strong { color: #ffd98a; }
.gate-day em { display: block; margin-top: 4px; color: var(--muted-2); font-size: 9px; font-style: normal; }
.gate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.gate-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 32, 54, .8); }
.gate-card small, .gate-balance small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.gate-card strong { display: block; margin-top: 8px; font-family: var(--display); font-size: 13px; color: var(--text); }
.gate-card em { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; font-style: normal; }
.gate-wallet { display: grid; gap: 10px; }
.gate-balance { padding: 22px; border: 1px solid rgba(74, 222, 128, .25); border-radius: 14px; background: radial-gradient(500px 160px at 0% 0%, rgba(74, 222, 128, .16), transparent 70%), linear-gradient(150deg, rgba(8, 32, 54, .96), rgba(4, 18, 32, .96)); }
.gate-balance strong { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--display); font-size: 26px; color: #fff; }
.gate-balance strong svg { width: 22px; height: 22px; color: var(--amber); }
.gate-balance .gate-link { font-size: 14px; color: var(--mint); word-break: break-all; }
.gate-balance em { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; font-style: normal; }
.gate-buttons { display: flex; gap: 8px; margin-top: 16px; }
.gate-input { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.gate-input > span:first-child { flex: 1; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(3, 16, 30, .8); color: var(--muted-2); font-family: var(--display); font-size: 12px; }
.gate-list { display: grid; gap: 6px; }
.gate-line { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 32, 54, .8); font-size: 12px; font-weight: 700; }
@media (max-width: 720px) { .gate-daily { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gate-page.has-preview .gate-card-main { margin-top: 90px; } }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(74, 222, 128,.3); border-radius: 15px; color: #c3b0ff; background: rgba(74, 222, 128,.11); }
.empty-icon svg { width: 23px; height: 23px; }
.empty-state h1 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.empty-state p { max-width: 390px; margin: 10px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* Game board polish */
.game-board::before { z-index: 0; }
.game-board::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .11; background-position: center; background-size: cover; mix-blend-mode: screen; }
.game-board-roll::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-roll.svg'); }
/* the chart's own backdrop: night sky, floor grid, candles, a curve to the moon
   (the old mine: url('/assets/crash-mine-bg.webp') at opacity .22, position center 58%) */
.game-board-crash::after { opacity: .34; background-image: linear-gradient(180deg, rgba(7,8,18,.12), rgba(7,8,18,.7)), url('/assets/crash-chart-bg.webp'); background-position: center 40%; mix-blend-mode: normal; }
.game-board-crash .crash-mine-scene { width: min(620px, 92%); height: 174px; margin-top: 0; border: 1px solid rgba(86, 184, 245,.18); background-image: linear-gradient(180deg, rgba(6,7,18,.08), rgba(6,7,18,.42)), url('/assets/crash-mine-bg.webp'); background-size: cover; background-position: center 58%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 34px rgba(0,0,0,.28); }
.game-board-crash .crash-block-layers { left: 23%; right: 23%; top: 28px; bottom: 7px; opacity: .54; transform: perspective(520px) rotateX(7deg); }
.game-board-crash .crash-pickaxe { width: 104px; height: 104px; filter: drop-shadow(0 0 13px rgba(255,181,70,.65)); }
.game-board-crash .crash-line { width: min(620px, 92%); margin-top: 0; opacity: .55; }
/* The mining viewport uses the actual Minecraft 16x16 resource textures bundled locally. */
.game-board-crash .crash-layer span { background-image: url('/assets/mc-cobblestone.png'); background-size: 100% 100%; image-rendering: pixelated; }
.game-board-crash .crash-layer span:nth-child(3) { background-image: url('/assets/mc-stone.png'); }
.game-board-crash .crash-layer .ore { background-image: url('/assets/mc-diamond-ore.png'); background-size: 100% 100%; box-shadow: 0 0 13px rgba(81,220,255,.16); }
.game-board-crash .crash-layer:nth-child(2n) .ore { background-image: url('/assets/mc-gold-ore.png'); }
.game-board-crash .crash-layer:nth-child(3n) .ore { background-image: url('/assets/mc-iron-ore.png'); }
.game-board-crash .crash-layer span::after { display: none; }
.game-board-crash .crash-pickaxe { image-rendering: pixelated; }
.game-board-mines::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-mines.svg'); }
/* Every board gets its own scene behind the stage - the game's cover art, dimmed and screened
   the same way Mines/Crash do it, so the boards feel like places rather than empty panels. */
.game-board-keno::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-keno.svg'); }
.game-board-limbo::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-limbo.svg'); }
.game-board-hilo::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-hilo.svg'); }
.game-board-jackpot::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-jackpot.svg'); }
.game-board-plinko::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-plinko.svg'); }
.game-board-towers::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-towers.svg'); }
.game-board-upgrade::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-upgrade.svg'); }
.game-board-boom::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-boom.svg'); }
.game-board-blackjack::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-blackjack.svg'); }
.game-board-duel::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-duel.svg'); }
.game-board-chicken::after { opacity: .13; background-image: linear-gradient(180deg, rgba(10,8,25,.25), rgba(10,8,25,.9)), url('/assets/game-chicken.svg'); }
.game-board-fishing::after { opacity: .13; background-image: linear-gradient(180deg, rgba(10,8,25,.25), rgba(10,8,25,.9)), url('/assets/game-fishing.svg'); }
.game-board-slots::after { opacity: .13; background-image: linear-gradient(180deg, rgba(10,8,25,.25), rgba(10,8,25,.9)), url('/assets/game-slots.svg?v=2'); }
.game-board-pigrace::after { opacity: .13; background-image: linear-gradient(180deg, rgba(10,8,25,.25), rgba(10,8,25,.9)), url('/assets/game-pigrace.svg'); }
/* stages that were never lifted above the backdrop layer */
.pigs-stage, .slots-stage, .upgrade-stage, .boom-stage, .bj-stage, .duel-stage,
.game-board-chicken .chicken-stage, .game-board-fishing .fishing-stage, .crash-history-panel { position: relative; z-index: 1; }
.game-board-cases::after { background-image: linear-gradient(180deg, rgba(10,8,25,.2), rgba(10,8,25,.9)), url('/assets/game-cases.svg'); }
.board-topline { position: absolute; z-index: 2; top: 26px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-label { display: inline-flex; align-items: center; gap: 7px; color: #c3b8e2; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.board-label svg { width: 14px; height: 14px; color: var(--purple); }
.board-status { padding: 5px 7px; border: 1px solid rgba(74, 222, 128,.18); border-radius: 5px; color: var(--green); background: rgba(74, 222, 128,.06); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.game-board.game-pending .board-status { animation: game-pending-pulse .7s ease-in-out infinite; }
@keyframes game-pending-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.board-tip { margin-top: 19px; color: var(--muted-2); font-size: 9px; }
.payout-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 10px 11px; margin-top: 17px; border: 1px solid rgba(86, 184, 245,.14); border-radius: 9px; background: linear-gradient(135deg, rgba(86, 184, 245,.07), rgba(74, 222, 128,.08)); }
.preview-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 8px; color: var(--cyan); background: rgba(86, 184, 245,.11); }
.preview-icon svg { width: 15px; height: 15px; }
.payout-preview div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.payout-preview small { color: var(--muted); font-size: 9px; }
/* The payout is the one number the player is here to read, so it wraps rather than
   ellipsising: "14,010 c..." tells them nothing. The note beside it yields first. */
.payout-preview strong { color: #f0ebff; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.preview-meta { margin-left: auto; color: var(--cyan); font-size: 8px; text-align: right; white-space: nowrap; flex: 0 1 auto; }
.drop-list { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: -8px 0 20px; }
.drop-list span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; color: #cfc6e7; background: rgba(255,255,255,.04); font-size: 8px; font-weight: 800; }
.game-board-cases .case-chests { margin-bottom: 22px; }
.case-stage { justify-content: flex-start; padding-top: 8px; }
.game-board-mines .mines-stage { padding-top: 20px; }

/* Horizontal mining line: the pickaxe moves along a real block path, breaks a block, then a new block spawns behind it. */
.game-board-crash .crash-mining-grid { position: absolute; z-index: 2; top: 24px; right: 34px; bottom: 24px; left: 34px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; transform: perspective(620px) rotateX(5deg); }
.game-board-crash .crash-block { min-width: 0; min-height: 0; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background-color: #252a37; background-position: center; background-size: 100% 100%; image-rendering: pixelated; box-shadow: inset 0 1px rgba(255,255,255,.16), inset -7px -8px 15px rgba(0,0,0,.27), 0 4px 7px rgba(0,0,0,.18); transition: opacity .25s ease, transform .25s ease, filter .25s ease; }
.game-board-crash .block-cobble { background-image: url('/assets/mc-cobblestone.png'); }
.game-board-crash .block-stone { background-image: url('/assets/mc-stone.png'); }
.game-board-crash .block-deepslate { background-image: url('/assets/mc-deepslate.png'); }
.game-board-crash .block-ore-diamond { background-image: url('/assets/mc-diamond-ore.png'); box-shadow: inset 0 0 15px rgba(32,188,255,.22), 0 0 9px rgba(32,188,255,.13); }
.game-board-crash .block-ore-gold { background-image: url('/assets/mc-gold-ore.png'); box-shadow: inset 0 0 15px rgba(255,191,57,.17), 0 0 9px rgba(255,191,57,.11); }
.game-board-crash .block-ore-iron { background-image: url('/assets/mc-iron-ore.png'); }
.game-board-crash .block-ore-emerald { background-image: url('/assets/mc-emerald-ore.png'); box-shadow: inset 0 0 15px rgba(69,255,157,.17), 0 0 9px rgba(69,255,157,.11); }
.game-board-crash .crash-block::before { content: ""; position: absolute; inset: -25%; z-index: 2; opacity: 0; background: linear-gradient(38deg, transparent 43%, rgba(245,248,255,.84) 44% 46%, transparent 47%), linear-gradient(132deg, transparent 48%, rgba(15,18,35,.9) 49% 51%, transparent 52%), linear-gradient(79deg, transparent 53%, rgba(232,238,255,.75) 54% 56%, transparent 57%); transform: scale(.4) rotate(-4deg); pointer-events: none; }
.game-board-crash .crash-block::after { content: ""; position: absolute; left: 42%; top: 42%; width: 5px; height: 5px; opacity: 0; border-radius: 1px; background: #d5ddf0; box-shadow: -16px 10px #9aa5c3, 17px -8px #6f7896, 7px 18px #b9c4dd, -12px -12px #727c9b; pointer-events: none; }
.game-board-crash .crash-block.crash-breaking { animation: minecraft-block-hit .38s ease-in-out infinite; filter: brightness(1.32) saturate(1.15); }
.game-board-crash .crash-block.crash-breaking::before { opacity: 1; animation: crack-spread .38s ease-in-out infinite alternate; }
.game-board-crash .crash-block.crash-breaking::after { opacity: 1; animation: debris-pop .38s ease-out infinite alternate; }
.game-board-crash .crash-block.crash-broken { opacity: 0; transform: translateY(12px) scale(.42) rotate(8deg); filter: brightness(1.8); }
.game-board-crash .crash-block.crash-new { animation: block-spawn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes minecraft-block-hit { 0% { transform: translate(0,0) rotate(0); } 28% { transform: translate(-2px,1px) rotate(1deg); } 54% { transform: translate(3px,-2px) rotate(-1deg); } 78% { transform: translate(-1px,0) rotate(.5deg); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes crack-spread { from { transform: scale(.55) rotate(-7deg); } to { transform: scale(1.14) rotate(7deg); } }
@keyframes debris-pop { from { transform: translate(0,0) scale(.6); } to { transform: translate(6px,-5px) scale(1.25); } }
@keyframes block-spawn { from { opacity: 0; transform: translateY(-13px) scale(.62); } to { opacity: 1; transform: translateY(0) scale(1); } }
.game-board-crash .crash-pickaxe { width: 100px; height: 100px; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%) rotate(-24deg); transition: left .2s linear, top .2s linear, transform .2s ease; pointer-events: none; }
.game-board-crash .crash-pickaxe.pickaxe-broken { transform: translate(-50%, -50%) rotate(73deg) translate(8px, 11px) !important; }

/* Crash conveyor: a single horizontal mining line moves toward the fixed pickaxe. */
.game-board-crash .crash-mining-grid { top: 50%; right: auto; bottom: auto; left: 50%; width: max-content; height: 64px; display: flex; align-items: center; gap: 6px; grid-template-columns: none; grid-template-rows: none; transform: translate(-50%, -50%); }
.game-board-crash .crash-block { flex: 0 0 58px; width: 58px; height: 58px; min-width: 58px; min-height: 58px; }
.game-board-crash .block-cobble { background-image: url('/assets/mc-cobblestone.png'); }
.game-board-crash .block-stone { background-image: url('/assets/mc-stone.png'); }
.game-board-crash .block-deepslate { background-image: url('/assets/mc-deepslate.png'); }
.game-board-crash .block-ore-diamond { background-image: url('/assets/mc-diamond-ore.png'); }
.game-board-crash .block-ore-gold { background-image: url('/assets/mc-gold-ore.png'); }
.game-board-crash .block-ore-iron { background-image: url('/assets/mc-iron-ore.png'); }
.game-board-crash .block-ore-emerald { background-image: url('/assets/mc-emerald-ore.png'); }
.game-board-crash .crash-block.crash-breaking { animation: minecraft-block-hit .38s ease-in-out infinite; }
.game-board-crash .crash-block.crash-broken { opacity: 0; transform: scale(.42) rotate(8deg); }
.game-board-crash .crash-pickaxe { left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%) rotate(-24deg); transition: transform .18s ease; }
.game-board-crash .crash-pickaxe { left: 39%; }
.game-board-crash .crash-pickaxe.pickaxe-swing { animation: pickaxe-swing .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pickaxe-swing { 0% { transform: translate(-50%, -50%) rotate(-24deg); } 28% { transform: translate(-50%, -50%) rotate(-30deg); } 58% { transform: translate(-50%, -50%) rotate(28deg) translate(6px, 4px); } 78% { transform: translate(-50%, -50%) rotate(12deg) translate(2px, 1px); } 100% { transform: translate(-50%, -50%) rotate(-24deg); } }
.pickaxe-break-effect { width: 116px; height: 116px; position: absolute; z-index: 6; left: 39%; top: 50%; display: block; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.pickaxe-break-effect::before { content: ""; position: absolute; width: 54px; height: 4px; left: 22px; top: 49px; border-radius: 4px; background: #fff1b0; box-shadow: 0 0 11px #ffad35, 0 0 22px rgba(255,113,142,.7); transform: rotate(-32deg) scaleX(.1); transform-origin: left center; }
.pickaxe-break-effect i { width: 8px; height: 8px; position: absolute; border-radius: 1px; background: #f6ae3e; box-shadow: 0 0 8px rgba(255,182,64,.8); }
.pickaxe-break-effect i:nth-child(1) { left: 14px; top: 38px; }
.pickaxe-break-effect i:nth-child(2) { left: 82px; top: 51px; background: #d7e2ee; }
.pickaxe-break-effect i:nth-child(3) { left: 53px; top: 20px; width: 6px; height: 6px; background: #8da4bc; }
.pickaxe-break-effect.active { opacity: 1; animation: pickaxe-shatter .72s ease-out both; }
.pickaxe-break-effect.active::before { animation: pickaxe-crack-flash .3s ease-out .05s both; }
@keyframes pickaxe-shatter { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.65) rotate(-10deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(5deg); } 100% { opacity: 0; transform: translate(-50%, -45%) scale(1.3) rotate(14deg); } }
@keyframes pickaxe-crack-flash { from { transform: rotate(-32deg) scaleX(.1); } to { transform: rotate(-32deg) scaleX(1); } }
/* Additional game boards */
.game-board-coinflip::after { background-image: linear-gradient(180deg, rgba(10,8,25,.15), rgba(10,8,25,.88)), url('/assets/game-coinflip.svg'); }
.game-board-wheel::after { background-image: linear-gradient(180deg, rgba(10,8,25,.1), rgba(10,8,25,.88)), url('/assets/game-wheel.svg'); }
.coinflip-stage { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; perspective: 1400px; perspective-origin: 50% 40%; padding-top: 70px; }
.coinflip-stage h2, .wheel-stage h2 { margin: 20px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.coinflip-coin { width: 168px; height: 168px; display: block; position: relative; border-radius: 50%; background: transparent; transform-style: preserve-3d; will-change: transform; }
.coinflip-coin.pending { animation: coin-pending 860ms ease-in-out infinite; }
@keyframes coin-pending { 0%, 100% { transform: rotateY(0deg) translateY(0); } 50% { transform: rotateY(180deg) translateY(-11px); } }
/* the shadow is a separate flat disc under the coin, so it does not spin with it */
.coinflip-coin-shadow { width: 136px; height: 20px; margin: 24px auto 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%); transition: transform .3s ease, opacity .3s ease; }
.coin-toss.tossing + .coinflip-coin-shadow { animation: coin-shadow 1.4s linear both; }
@keyframes coin-shadow { 0% { transform: scale(1); opacity: 1; } 44% { transform: scale(.6); opacity: .4; } 80% { transform: scale(1.04); opacity: 1; } 87% { transform: scale(.92); opacity: .85; } 100% { transform: scale(1); opacity: 1; } }
.coinflip-coin img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
/* Two animations, because animation-fill-mode:both keeps the final keyframe
   transform and would otherwise override .show-tails - the coin always rested
   on heads no matter what the server returned. Each one ends on its own face. */
.coinflip-coin.flip-heads { animation: coin-flip-heads 1.4s cubic-bezier(.22, .61, .3, 1) both; }
.coinflip-coin.flip-tails { animation: coin-flip-tails 1.4s cubic-bezier(.22, .61, .3, 1) both; }
/* The milled rim: one segment per slice of the circle, tipped upright so the coin has
   real thickness instead of being two stickers glued back to back. */
.coin-edge { position: absolute; left: 50%; top: 50%; height: 14px; margin: -7px 0 0 0; transform-origin: 50% 50%; background: linear-gradient(180deg, #f3c664 0%, #c9892b 50%, #8a4e14 100%); backface-visibility: hidden; }
.coin-edge:nth-child(4n) { background: linear-gradient(180deg, #fbe08f 0%, #d79c34 50%, #9c5c17 100%); }
.coinflip-coin { position: relative; transform-style: preserve-3d; }
.coinflip-coin::before {
    display: none;
}
.coinflip-coin::after { display: none; }
.coin-face {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden;
  border: 7px solid #d4922c;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), transparent 38%),
    repeating-conic-gradient(from 0deg, rgba(255, 240, 190, .18) 0deg 6deg, rgba(120, 60, 10, .12) 6deg 12deg),
    radial-gradient(circle at 50% 50%, #ffd76a 0%, #f0b13a 48%, #c47a1c 78%, #8d4d10 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 225, 140, .55), inset 0 0 0 6px rgba(140, 78, 16, .45), inset 0 0 26px rgba(120, 60, 10, .35), inset 0 6px 10px rgba(255, 255, 255, .22);
}
.coin-face::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 2px solid rgba(255, 236, 170, .55); box-shadow: inset 0 0 0 1px rgba(120, 60, 10, .35); pointer-events: none; }
/* The faces sit on either side of the rim, half its thickness out from the centre. */
.coin-face-front { transform: translateZ(7px); }
.coin-face-back {
  transform: rotateY(180deg) translateZ(7px); border-color: #2a9a67;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), transparent 38%),
    repeating-conic-gradient(from 0deg, rgba(190, 255, 220, .16) 0deg 6deg, rgba(4, 50, 34, .16) 6deg 12deg),
    radial-gradient(circle at 50% 50%, #8ff7bd 0%, #3ccf7a 48%, #158f5f 78%, #0a3a2c 100%);
  box-shadow: inset 0 0 0 4px rgba(170, 255, 210, .5), inset 0 0 0 6px rgba(6, 60, 40, .5), inset 0 0 26px rgba(4, 50, 34, .4), inset 0 6px 10px rgba(255, 255, 255, .2);
}
.coin-face-back::after { border-color: rgba(190, 255, 220, .5); box-shadow: inset 0 0 0 1px rgba(6, 60, 40, .45); }
.coin-face { flex-direction: column; gap: 2px; }
.coin-face img { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(4, 40, 30, .55)); }
.coin-face-back img { filter: drop-shadow(0 2px 3px rgba(4, 40, 30, .5)); }
/* The face has to say which side it is: gold vs green alone is not readable. */
.coin-glyph { width: 54px; height: 54px; display: block; color: #7a3d08; filter: drop-shadow(0 2px 0 rgba(255, 240, 190, .6)); }
.coin-glyph svg { width: 100%; height: 100%; stroke-width: 1.6; }
.coin-label {
  font-family: var(--display); font-size: 13px; letter-spacing: .02em;
  color: #63300a; text-shadow: 0 1px 0 rgba(255, 236, 179, .65);
}
.coin-face-back .coin-label { color: #f2fff8; text-shadow: 0 1px 0 rgba(3, 42, 30, .85), 0 0 8px rgba(3, 42, 30, .5); }
.side-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.side-button {
  min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: rgba(126, 191, 255, .05); color: var(--muted);
  font-size: 11px; font-weight: 850; letter-spacing: .06em;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.side-button i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.side-button i svg, .side-button i img { width: 15px; height: 15px; image-rendering: pixelated; }
.side-button[data-side="heads"] i { background: radial-gradient(circle at 34% 30%, #fff2a1, #e19a2d 60%, #a95615); color: #6b3407; }
.side-button[data-side="tails"] i { background: radial-gradient(circle at 34% 30%, #e4ffe9, #4ade80 55%, #16704f); }
.side-button:hover { color: var(--text); border-color: rgba(74, 222, 128, .4); }
.side-button.active { color: var(--text); border-color: var(--green); background: rgba(74, 222, 128, .14); box-shadow: 0 0 0 1px rgba(74, 222, 128, .25) inset; }
.coinflip-choice { margin-top: 14px; color: var(--muted-2); font-size: 11px; letter-spacing: .1em; font-weight: 800; }
.coinflip-choice strong { color: var(--mint); }
.coinflip-coin.show-tails { transform: rotateY(180deg); }
.coinflip-coin.show-heads { transform: rotateY(0deg); }
.coinflip-result { min-height: 20px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.coinflip-result strong { color: var(--green); }
/* The toss is a real arc: up fast, hang, fall, land with a small settle. rotateX tilts
   the coin out of the flat plane so the rim is visible through the spin, and the
   rotateY totals still land the right face at the pointer (1080 = heads, 1260 = tails). */
/* Two motions, two elements. The wrapper does the arc - up with ease-out, down with
   ease-in, one small bounce - and the coin itself only spins, at a speed that starts fast
   and bleeds off into the landing. Composed like that it moves like a thrown coin, not
   like a keyframe table. */
.coin-toss { transform-style: preserve-3d; will-change: transform; }
.coin-toss.pending { animation: coin-pending-arc 860ms ease-in-out infinite; }
@keyframes coin-pending-arc { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-18px) rotateX(-8deg); } }
.coin-toss.tossing { animation: coin-arc 2.2s linear both; }
@keyframes coin-arc {
  0%   { transform: translateY(0) rotateX(0deg); animation-timing-function: cubic-bezier(.17, .67, .35, 1); }
  44%  { transform: translateY(-64px) rotateX(-9deg); animation-timing-function: cubic-bezier(.6, 0, .85, .35); }
  80%  { transform: translateY(0) rotateX(0deg); animation-timing-function: ease-out; }
  87%  { transform: translateY(-12px) rotateX(0deg); animation-timing-function: ease-in; }
  93%  { transform: translateY(0) rotateX(0deg); animation-timing-function: ease-out; }
  96%  { transform: translateY(-3px) rotateX(0deg); animation-timing-function: ease-in; }
  100% { transform: translateY(0) rotateX(0deg); }
}
@keyframes coin-flip-heads { from { transform: rotateY(0deg); } to { transform: rotateY(1800deg); } }
@keyframes coin-flip-tails { from { transform: rotateY(0deg); } to { transform: rotateY(1980deg); } }
/* the verdict - transform only on the coin (a filter would flatten its 3D faces), the
   colour comes from the shadow disc underneath */
.coinflip-coin.coin-won { animation: coin-won-pop 1s ease-out both; }
.coinflip-coin.show-tails.coin-won { animation-name: coin-won-pop-tails; }
@keyframes coin-won-pop { 0% { transform: rotateY(0) scale(1); } 30% { transform: rotateY(0) scale(1.14); } 100% { transform: rotateY(0) scale(1); } }
@keyframes coin-won-pop-tails { 0% { transform: rotateY(180deg) scale(1); } 30% { transform: rotateY(180deg) scale(1.14); } 100% { transform: rotateY(180deg) scale(1); } }
.coin-toss:has(.coin-won) + .coinflip-coin-shadow { background: radial-gradient(ellipse at center, rgba(74, 222, 128, .75), rgba(74, 222, 128, .2) 45%, transparent 72%); box-shadow: 0 0 40px rgba(74, 222, 128, .35); }
.coin-toss:has(.coin-lost) + .coinflip-coin-shadow { background: radial-gradient(ellipse at center, rgba(255, 113, 142, .6), rgba(255, 113, 142, .15) 45%, transparent 72%); }
/* sparks on a win: 14 flecks flung out from the coin's centre */
.coin-sparks { position: absolute; left: 50%; top: 84px; width: 0; height: 0; pointer-events: none; z-index: 5; }
.coin-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 1px; background: #ffe08a; box-shadow: 0 0 8px #ffd76a; animation: coin-spark .9s cubic-bezier(.1, .8, .3, 1) both; animation-delay: var(--t, 0ms); transform: rotate(var(--a)) translateX(0); }
.coin-sparks i:nth-child(3n) { background: var(--mint); box-shadow: 0 0 8px var(--green); }
@keyframes coin-spark { 0% { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }
.coinflip-stage { position: relative; }
.wheel-stage { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
/* The wedges come from an inline conic-gradient built out of the live ladder, so the
   colours, the labels and the paid multiplier can never disagree. */
.wheel-disc { width: 292px; height: 292px; position: relative; border: 10px solid #241a3c; border-radius: 50%; box-shadow: 0 0 0 5px rgba(74, 222, 128,.12), 0 0 35px rgba(74, 222, 128,.3), inset 0 0 20px rgba(0,0,0,.35); transform: rotate(0deg); transition: transform 1.05s cubic-bezier(.12,.78,.2,1); will-change: transform; }
.wheel-disc.spinning { transition-duration: .95s; }
/* One label per wedge, parked at the centre and pushed out along its own angle. The
   old version scattered them on a circle with absolute left/top and they overlapped. */
.wheel-disc span.roulette-slot { position: absolute; left: 50%; top: 50%; width: 42px; height: 20px; margin: -10px 0 0 -21px; display: grid; place-items: center; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,.75); background: transparent; border: none; transform-origin: 50% 50%; }
.game-board-wheel .wheel-disc span.roulette-slot.blank { color: #a3a0b8; }
.game-board-wheel .wheel-disc span.roulette-slot.mid { color: #d7ecff; }
.game-board-wheel .wheel-disc span.roulette-slot.high { color: #c8ffe0; }
.game-board-wheel .wheel-disc span.roulette-slot.jackpot { color: #fff6d0; text-shadow: 0 1px 3px rgba(80,45,0,.9), 0 0 10px rgba(255,220,120,.7); font-size: 11px; }
.wheel-disc::before { content: ""; position: absolute; inset: 13px; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: inset 0 0 0 8px rgba(8,8,18,.12), inset 0 0 22px rgba(255,255,255,.16); pointer-events: none; }
.wheel-disc::after { content: ""; position: absolute; inset: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.wheel-disc span[style*="--slot"] { left: 50%; top: 50%; z-index: 2; min-width: 34px; padding: 4px 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; color: #fff; background: rgba(12,10,25,.3); font-size: 9px; text-align: center; transform: rotate(calc(var(--slot) * 30deg)) translateY(-107px) rotate(calc(var(--slot) * -30deg)); transform-origin: center; }
.wheel-pointer { width: 0; height: 0; position: absolute; z-index: 4; top: calc(50% - 150px); border-right: 11px solid transparent; border-left: 11px solid transparent; border-bottom: 0; border-top: 25px solid #f5a524; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.wheel-hub { width: 58px; height: 58px; position: absolute; z-index: 5; display: grid; place-items: center; border: 5px solid #3b2b61; border-radius: 50%; color: var(--cyan); background: #121224; box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 0 20px rgba(86, 184, 245,.35); }
.wheel-hub svg { width: 24px; height: 24px; }
.wheel-result { min-height: 20px; margin-top: 23px; color: var(--muted); font-size: 12px; }
.wheel-result strong { color: var(--amber); }
.wheel-mode { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: #cfe4f5; background: rgba(5,5,13,.45); font-size: 11px; }
.side-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.side-button { min-height: 42px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--muted); background: rgba(5,5,13,.45); font-size: 11px; font-weight: 850; transition: .18s ease; }
.side-button:hover { color: #fff; border-color: rgba(74, 222, 128,.55); }
.side-button.active { color: #fff; border-color: rgba(74, 222, 128,.65); background: linear-gradient(135deg, rgba(74, 222, 128,.28), rgba(207,114,255,.12)); box-shadow: inset 0 0 0 1px rgba(74, 222, 128,.16), 0 0 16px rgba(74, 222, 128,.1); }

/* Crash history is a compact card rail, not a decorative full-width line. */
.game-board-crash .crash-stage::before { display: none; }
.game-board-crash .crash-history-panel { position: relative; z-index: 3; margin: 0 28px; padding: 13px 15px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: linear-gradient(135deg, rgba(19,18,36,.9), rgba(11,12,23,.82)); box-shadow: 0 10px 23px rgba(0,0,0,.17); }
.crash-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crash-history-kicker { display: block; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.crash-history-head strong { display: block; margin-top: 4px; color: #e8f5ff; font-size: 12px; }
.crash-history-list { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 11px; overflow: hidden; padding-bottom: 2px; }
.crash-history-card { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(74, 222, 128,.18); border-bottom: 3px solid var(--purple); border-radius: 8px; background: rgba(74, 222, 128,.08); }
.crash-history-card small { color: var(--muted-2); font-size: 8px; }
.crash-history-card strong { color: #d8ceff; font-size: 11px; }
.crash-history-card.low { border-color: rgba(255,113,142,.2); border-bottom-color: var(--red); background: rgba(255,113,142,.07); }
.crash-history-card.low strong { color: #ffb1bf; }
.crash-history-card.high { border-color: rgba(74, 222, 128,.22); border-bottom-color: var(--green); background: rgba(74, 222, 128,.08); }
.crash-history-card.high strong { color: #a4f7d0; }
/* Over x10 is the round players screenshot, so it burns gold instead of blending in. */
.crash-history-card.gold { border-color: rgba(250, 204, 21, .45); border-bottom-color: #facc15; background: rgba(250, 204, 21, .12); }
.crash-history-card.gold strong { color: #ffe27a; }
.crash-history-empty { min-height: 41px; display: grid; place-items: center; grid-column: 1 / -1; color: var(--muted-2); font-size: 9px; }
.game-board-crash .crash-line { display: none; }

/* Roulette alignment: every value is positioned from the exact center of the wheel. */
.game-board-wheel .wheel-stage { position: relative; width: 100%; min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1000px; }
.game-board-wheel .wheel-assembly { width: 292px; height: 292px; position: relative; flex: 0 0 292px; }
.game-board-wheel .wheel-disc { position: absolute; inset: 0; margin: 0; overflow: visible; }
.game-board-wheel .wheel-pointer { left: 50%; top: -19px; transform: translateX(-50%); }
.game-board-wheel .wheel-hub { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.game-board-wheel .game-board-wheel .wheel-disc span.roulette-slot.blank { color: #a3a0b8; }
.game-board-wheel .wheel-disc span.roulette-slot.mid { color: #d7ecff; }
.game-board-wheel .wheel-disc span.roulette-slot.high { color: #c8ffe0; }
.game-board-wheel .wheel-disc span.roulette-slot.jackpot { color: #fff6d0; text-shadow: 0 1px 3px rgba(80,45,0,.9), 0 0 10px rgba(255,220,120,.7); font-size: 11px; }
.wheel-disc::before { inset: 12px; }
.game-board-wheel .wheel-disc::after { inset: 44px; }

/* -------------------------------------------------------- new surfaces */
.leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.podium-card { padding: 20px 16px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(8, 32, 54, .95), rgba(4, 18, 32, .95)); }
.podium-card.rank-1 { border-color: rgba(245, 165, 36, .45); background: linear-gradient(160deg, rgba(60, 42, 8, .8), rgba(4, 18, 32, .96)); transform: translateY(-8px); }
.podium-card.rank-2 { border-color: rgba(186, 210, 230, .3); }
.podium-card.rank-3 { border-color: rgba(190, 130, 78, .35); }
.podium-rank { font-family: var(--display); font-size: 22px; color: var(--amber); }
.podium-card.rank-2 .podium-rank { color: #cfe0ee; }
.podium-card.rank-3 .podium-rank { color: #d09a6a; }
.podium-avatar { width: 56px; height: 56px; margin: 12px auto 10px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #16a34a, #4ade80); color: #04200f; font-weight: 900; font-size: 20px; }
.podium-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.podium-card h3 { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.podium-card strong { display: block; margin-top: 8px; font-size: 16px; color: var(--mint); font-variant-numeric: tabular-nums; }
.podium-card small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filter-chip { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(126, 191, 255, .05); color: var(--muted); font-size: 11px; font-weight: 800; }
.filter-chip:hover { color: var(--text); }
.filter-chip.active { color: #05210f; background: linear-gradient(180deg, var(--mint), var(--green)); border-color: transparent; }

/* plinko */
.plinko-stage { height: 100%; min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; z-index: 1; }
.plinko-field { position: relative; width: min(470px, 100%); aspect-ratio: 1 / .82; border-radius: 14px; background:
  radial-gradient(120% 90% at 50% -10%, rgba(245, 165, 36, .09), transparent 60%),
  linear-gradient(180deg, rgba(126, 191, 255, .05), rgba(3, 12, 23, .35)); overflow: hidden; }
.plinko-wall { position: absolute; top: 4%; bottom: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, rgba(126,191,255,.05), rgba(126,191,255,.22)); }
.plinko-wall.left { left: 5.5%; }
.plinko-wall.right { right: 5.5%; }
.plinko-peg { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #ffffff, #9db8cf 60%, #56708a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 6px rgba(207, 228, 245, .3); }
.plinko-peg.lit { background: radial-gradient(circle at 34% 30%, #ffffff, var(--mint) 55%, var(--green-2)); box-shadow: 0 0 14px var(--green); }
.plinko-peg.hit { animation: peg-hit .34s ease-out; }
@keyframes peg-hit {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, .65); }
  35% { transform: translate(-50%, -50%) scale(1.75); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}
.plinko-trail { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 138, .9), rgba(245, 165, 36, 0) 70%); opacity: 0; pointer-events: none; }
.plinko-ball { position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 28%, #fff6dd 8%, #ffd166 45%, #d98a12);
  box-shadow: 0 0 16px rgba(245, 165, 36, .75), inset 0 -3px 5px rgba(140, 80, 0, .55); opacity: 0; z-index: 2; }
.plinko-ball::after { content: ''; position: absolute; inset: 30% 22% auto 22%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.plinko-ball.active { opacity: 1; }
/* Squash on contact - the one frame that makes a bounce read as a bounce. */
.plinko-ball.squash { animation: ball-squash .16s ease-out; }
/* Balls beyond the first are cloned in for multi-ball drops and removed when they land. */
.plinko-ball.extra { opacity: 0; }
.plinko-ball.extra.active { opacity: .95; }
@keyframes ball-squash {
  0% { width: 16px; height: 16px; }
  40% { width: 21px; height: 12px; }
  100% { width: 16px; height: 16px; }
}
.plinko-slots { position: relative; width: min(470px, 100%); height: 30px; }
.plinko-slot { position: absolute; top: 0; transform: translateX(-50%); padding: 8px 0; text-align: center;
  border-radius: 5px; background: rgba(126, 191, 255, .08); color: #bcd6ea; font-size: 8.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow: hidden; white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.plinko-slot.heat-0 { background: rgba(126, 191, 255, .07); }
/* The heat ramp runs blue - green - amber - gold. The top slot used to be red, which
   read as "you lost" on the single best payout on the board. */
.plinko-slot.heat-1 { background: rgba(86, 184, 245, .16); color: #d7ecff; }
.plinko-slot.heat-2 { background: rgba(74, 222, 128, .18); color: #bdf5d3; }
.plinko-slot.heat-3 { background: linear-gradient(180deg, rgba(250, 204, 21, .32), rgba(245, 158, 11, .26)); color: #ffe27a; box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .35); }
.plinko-slot.hot { background: linear-gradient(180deg, var(--mint), var(--green)); color: #05210f; transform: translateX(-50%) translateY(-4px); }
.plinko-slot.cold { background: rgba(248, 113, 113, .16); color: #ffc4c4; }
.plinko-slot.struck { animation: slot-struck .32s ease-out; }
@keyframes slot-struck {
  0% { transform: translateX(-50%) translateY(0); }
  45% { transform: translateX(-50%) translateY(6px); box-shadow: 0 0 18px rgba(245, 165, 36, .6); }
  100% { transform: translateX(-50%) translateY(0); }
}
.plinko-result { min-height: 22px; color: var(--muted); font-size: 12px; }
.plinko-result strong { color: var(--text); }

/* towers */
.towers-stage { height: 100%; min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 1; }
.towers-grid { display: flex; flex-direction: column-reverse; gap: 6px; width: min(430px, 100%); }
.towers-row { display: flex; gap: 6px; align-items: center; }
.towers-row-mult { width: 54px; flex: 0 0 54px; text-align: right; color: var(--muted-2); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.towers-row.current .towers-row-mult { color: var(--mint); }
.towers-cell {
  flex: 1; min-width: 0; height: 40px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: rgba(126, 191, 255, .06);
  display: grid; place-items: center; color: var(--muted-2); font-size: 13px; font-weight: 900;
  transition: background .18s ease, transform .12s ease, border-color .18s ease;
}
.towers-row.current .towers-cell:not(.safe):not(.bomb) { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .09); box-shadow: 0 0 0 1px rgba(74, 222, 128, .12) inset; }
.towers-row.current .towers-cell:not(:disabled):hover { background: rgba(74, 222, 128, .18); border-color: rgba(74, 222, 128, .5); transform: translateY(-2px); }
.towers-cell:disabled { cursor: default; }
.towers-cell.safe { background: radial-gradient(circle at 50% 45%, rgba(99, 227, 245, .28), rgba(74, 222, 128, .14) 75%); border-color: rgba(99, 227, 245, .6); color: #05210f; box-shadow: 0 0 14px rgba(99, 227, 245, .25); }
.towers-cell .tile-art { width: 26px; height: 26px; }
.towers-cell.ghost-bomb .tile-art, .towers-cell.ghost-safe .tile-art { opacity: .55; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); animation: none; }
.towers-cell.safe svg { width: 18px; height: 18px; stroke-width: 2.8; }
.towers-cell.bomb { background: rgba(248, 113, 113, .28); border-color: rgba(248, 113, 113, .5); color: #ffd7d7; }
/* Revealed at the end of a climb: every tile that hid a bomb shows the bomb icon, dimmed. */
.towers-cell.ghost-bomb { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .26); color: rgba(255, 150, 150, .8); }
.towers-cell.bomb svg, .towers-cell.ghost-bomb svg { width: 17px; height: 17px; }
.towers-cell.ghost-safe { background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .22); }
.towers-result { min-height: 22px; color: var(--muted); font-size: 12px; }
.towers-result strong { color: var(--text); }

/* ------------------------------------------------------------- chicken road ---
   A top-down road: pavements along the top and bottom, lanes running across it with proper
   markings, a zebra crossing down the centre line the bird walks, and the multipliers on
   the near pavement under each lane. Built once per round - steps only toggle lane classes
   and slide the bird, so the traffic never restarts. */
.game-board-chicken .chicken-stage { display: flex; flex-direction: column; gap: 14px; padding-top: 34px; }
.chicken-road {
  display: block; overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: #070c14;
  scroll-behavior: smooth;
}
.chicken-road.crash { animation: road-shake .5s ease; }
@keyframes road-shake { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-6px, 2px); } 35% { transform: translate(6px, -2px); } 55% { transform: translate(-4px, 1px); } 75% { transform: translate(3px, -1px); } }
.road-track {
  position: relative; display: flex; align-items: stretch; min-width: max-content;
  --pave-top: 18px; --road-h: 206px; --pave-bottom: 46px;
  --lane-h: calc(var(--pave-top) + var(--road-h) + var(--pave-bottom));
}
.road-track::after {   /* the far pavement falls into shadow */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 14%);
}

.chicken-kerb {
  position: relative; flex: 0 0 auto; width: 90px; min-height: var(--lane-h);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 12px 6px 14px;
  background: repeating-linear-gradient(45deg, #202a3a 0 9px, #182130 9px 18px);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.chicken-kerb .kerb-label { font-family: var(--display); font-size: 8px; letter-spacing: .14em; color: var(--muted-2); }
.chicken-kerb.finish { background: repeating-conic-gradient(#e8edf5 0 25%, #10161f 0 50%) 0 0 / 18px 18px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.chicken-kerb.finish .kerb-label { color: #17110a; background: linear-gradient(180deg, #ffe08a, #f5c542); padding: 3px 7px; border-radius: 5px; }

/* a lane: pavement, asphalt, pavement (with the multiplier on it) */
.chicken-lane {
  position: relative; flex: 0 0 auto; width: 86px; min-height: var(--lane-h);
  display: block; padding: var(--pave-top) 0 var(--pave-bottom); border: 0; border-radius: 0;
  background: #3b4556;
  background-image: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0, 0, 0, .18) 20px 21px);   /* paving slabs */
  transition: filter .16s ease;
}
.chicken-lane:disabled { cursor: default; }
.lane-road {
  position: relative; height: var(--road-h); width: 100%; overflow: hidden;
  background:
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.3px) 0 0 / 5px 5px,                 /* grain */
    linear-gradient(90deg, rgba(0, 0, 0, .28) 0 14%, transparent 22%, transparent 78%, rgba(0, 0, 0, .28) 86%),   /* worn wheel tracks */
    linear-gradient(180deg, #262e3b, #1f2631);
  box-shadow: inset 0 3px 0 #55606f, inset 0 -3px 0 #55606f;   /* kerb stones */
}
.lane-dash {   /* the white broken line between lanes */
  position: absolute; left: -2px; top: 6px; bottom: 6px; width: 3px; opacity: .8; z-index: 1;
  background: repeating-linear-gradient(180deg, #e9eef5 0 18px, transparent 18px 34px);
}
.zebra {   /* the crossing the bird walks */
  position: absolute; left: 0; right: 0; top: 50%; height: 46px; margin-top: -23px; z-index: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, #e9eef5 0 8px, transparent 8px 17px);
}
.lane-arrow {   /* painted direction arrow, pointing the way this lane's traffic runs */
  position: absolute; left: 50%; top: 12px; width: 16px; height: 26px; margin-left: -8px; opacity: .38; z-index: 0;
  background: linear-gradient(#fff, #fff) 6px 0 / 4px 16px no-repeat;
}
.lane-arrow::before { content: ''; position: absolute; left: 0; bottom: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #fff; }
.lane-arrow.up { top: auto; bottom: 12px; transform: rotate(180deg); }
.chicken-lane.lamp::before {   /* a lamp post on the top pavement every third lane - no light cast on the road */
  content: ''; position: absolute; left: 50%; top: 3px; width: 3px; height: 14px; margin-left: -1.5px; z-index: 5;
  background: linear-gradient(180deg, #b7c3d4, #5a6678);
  box-shadow: 0 -1px 0 2px #cfd6e0;
}

/* the multiplier, on the near pavement under the lane */
.lane-mult {
  position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); z-index: 4;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(6, 10, 16, .82);
  color: #cfd8e6; font-family: var(--display); font-size: 11px; font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lane-mult.small { font-size: 9.5px; }
.lane-mult.tiny { font-size: 8.5px; letter-spacing: 0; }
.chicken-lane.current .lane-mult { color: #14100a; background: linear-gradient(180deg, #ffe08a, #f5c542); border-color: transparent; transform: translateX(-50%) scale(1.14); box-shadow: 0 0 16px rgba(245, 197, 66, .65); }
.chicken-lane.crossed .lane-mult { color: #07230f; background: linear-gradient(180deg, #b8ffcf, #4ade80); border-color: transparent; }
.chicken-lane.had-car .lane-mult { color: #fff; background: linear-gradient(180deg, #ff8a8a, #e2445c); border-color: transparent; }

/* lane states */
.chicken-lane.current .lane-road {
  box-shadow: inset 0 3px 0 #55606f, inset 0 -3px 0 #55606f, inset 0 0 0 2px rgba(245, 197, 66, .7), inset 0 0 46px rgba(245, 197, 66, .22);
  animation: lane-pulse 1.3s ease-in-out infinite;
}
@keyframes lane-pulse { 50% { box-shadow: inset 0 3px 0 #55606f, inset 0 -3px 0 #55606f, inset 0 0 0 2px rgba(245, 197, 66, 1), inset 0 0 60px rgba(245, 197, 66, .34); } }
.chicken-lane.current:not(:disabled):hover { filter: brightness(1.12); }
.chicken-lane.ahead { cursor: pointer; }
.chicken-lane.ahead:not(:disabled):hover .lane-road { box-shadow: inset 0 3px 0 #55606f, inset 0 -3px 0 #55606f, inset 0 0 0 2px rgba(245, 197, 66, .35), inset 0 0 30px rgba(245, 197, 66, .1); }
.chicken-lane.crossed .lane-road { box-shadow: inset 0 3px 0 #55606f, inset 0 -3px 0 #55606f, inset 0 0 46px rgba(74, 222, 128, .16); }
.chicken-lane.crossed .road-car { opacity: 0; transition: opacity .35s ease; }   /* traffic clears behind the bird */
.chicken-lane.had-car .lane-road { box-shadow: inset 0 3px 0 #55606f, inset 0 -3px 0 #55606f, inset 0 0 46px rgba(226, 68, 92, .26); }
.chicken-lane.hit { animation: lane-shake .4s ease; }
.chicken-lane.hit .lane-road::before {   /* skid marks down to the crossing */
  content: ''; position: absolute; left: 50%; top: 8px; width: 26px; height: 96px; margin-left: -13px; z-index: 1; opacity: .7;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .6) 0 6px, transparent 6px 13px);
}
@keyframes lane-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* the bird jumps first; the impact waits for the landing */
.chicken-road.pre-crash .road-car.crashed, .chicken-road.pre-crash .smash-flash, .chicken-road.pre-crash .feather { visibility: hidden; animation-play-state: paused; }
.chicken-road.pre-crash .chicken-lane.hit { animation: none; }
.chicken-road.pre-crash .chicken-lane.hit .lane-road::before { opacity: 0; }

/* traffic */
.road-car {
  position: absolute; left: 50%; top: 0; width: 36px; margin-left: -18px; z-index: 2;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55));
  animation: chicken-drive linear var(--delay, 0s) infinite;
  animation-duration: calc(var(--dur, 3s) * var(--speed, 1));
  will-change: transform;
}
.road-car.k-sedan { height: 66px; } .road-car.k-sport { height: 60px; } .road-car.k-van { height: 90px; } .road-car.k-truck { height: 126px; }
.car-svg { display: block; width: 100%; height: 100%; }
.road-car i {   /* headlight wash on the road ahead */
  position: absolute; left: 50%; bottom: -36px; margin-left: -27px; width: 54px; height: 40px; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 244, 190, .45), rgba(255, 244, 190, 0));
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
@keyframes chicken-drive { from { transform: translateY(-150px); } to { transform: translateY(330px); } }
.road-car.up { animation-name: chicken-drive-up; }   /* the other carriageway, headlights leading */
@keyframes chicken-drive-up { from { transform: translateY(330px) rotate(180deg); } to { transform: translateY(-150px) rotate(180deg); } }
.road-car.parked { animation: none; top: 50%; transform: translateY(-50%); }   /* sits on the crossing */
.road-car.crashed { z-index: 7; animation: car-slam .45s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes car-slam { from { transform: translateY(-330px); } to { transform: translateY(-50%); } }

/* the bird - one element sliding along the crossing; the hop lives on the image so the
   vertical arc composes with the horizontal slide */
.chick {
  position: absolute; left: 0; top: calc(var(--pave-top) + var(--road-h) / 2); margin-top: -38px; width: 48px; height: 48px; z-index: 6;
  transform: translateX(21px);   /* centred on the 90px start kerb until the script places it */
  transition: transform .46s cubic-bezier(.25, 1.25, .4, 1); will-change: transform;
}
.chick::after {   /* ground shadow */
  content: ''; position: absolute; left: 50%; bottom: -3px; width: 34px; height: 10px; margin-left: -17px; z-index: -1;
  border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(2px);
}
.chick img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.chick.hop img { animation: chick-hop .46s ease; }
@keyframes chick-hop { 0% { transform: translateY(0) scale(.94); } 50% { transform: translateY(-26px) scale(1.06) rotate(-8deg); } 100% { transform: translateY(0) scale(1); } }
.chick.idle img { animation: chick-idle 1.5s ease-in-out infinite; }
@keyframes chick-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.chick.cheer img { animation: chick-cheer .55s ease-in-out infinite; }
@keyframes chick-cheer { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.chick.splat img { animation: chick-splat .4s ease both; }
@keyframes chick-splat { to { transform: rotate(96deg) scale(1.08); filter: grayscale(.55) brightness(.82); } }
.land-puff {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 5; pointer-events: none;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55);
  animation: land-puff .5s ease-out forwards;
}
@keyframes land-puff { to { transform: scale(3.2); opacity: 0; } }

/* the multiplier that floats up off a cleared lane, and the SPLAT on a crash */
.lane-pop {
  position: absolute; left: 50%; top: 50%; margin-top: -44px; transform: translateX(-50%); z-index: 8; pointer-events: none;
  font-family: var(--display); font-size: 13px; color: #b8ffcf; text-shadow: 0 0 12px rgba(74, 222, 128, .8), 0 2px 0 rgba(0, 0, 0, .8);
  animation: lane-pop .95s ease-out forwards;
}
.lane-pop.bad { color: #ff8a8a; font-size: 15px; text-shadow: 0 0 14px rgba(248, 113, 113, .9), 0 2px 0 rgba(0, 0, 0, .8); }
@keyframes lane-pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -54px) scale(1); } }

/* impact */
.smash-flash {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9), rgba(255, 200, 120, .35) 42%, transparent 72%);
  animation: smash-flash .5s ease-out forwards;
}
@keyframes smash-flash { from { opacity: 1; } to { opacity: 0; } }
.feather {
  position: absolute; left: 50%; top: 50%; z-index: 8; width: 7px; height: 10px;
  border-radius: 60% 60% 50% 50%; background: #fff6de; pointer-events: none;
  animation: feather-fly 1s ease-out forwards; animation-delay: calc(var(--k) * 45ms);
}
@keyframes feather-fly {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(calc((var(--k) - 3) * 17px), -64px) rotate(220deg); opacity: 0; }
}

/* the JUMP button in the panel - the same secondary control the other games use, with a
   small chip for what the next lane pays */
.chicken-jump { margin-top: 6px; gap: 8px; }
.random-tile { margin-top: 10px; gap: 8px; }
.random-tile:disabled { opacity: .45; cursor: not-allowed; }
.random-tile svg { width: 15px; height: 15px; }
.mine-tile.random-pick, .towers-cell.random-pick { animation: random-pick .22s ease-out both; }
@keyframes random-pick { 0% { transform: scale(.92); box-shadow: 0 0 0 0 rgba(245, 197, 66, .8); } 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(245, 197, 66, 0); } }
.chicken-jump .jump-mult { padding: 2px 7px; border-radius: 7px; background: rgba(245, 197, 66, .18); color: #ffd98a; font-family: var(--display); font-size: 10px; white-space: nowrap; }
.chicken-jump[hidden] { display: none !important; }

.chicken-result { min-height: 22px; color: var(--muted); font-size: 12px; }
.chicken-result strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .road-car, .chick img, .chicken-lane.current .lane-road, .feather, .lane-pop, .land-puff, .chicken-road.crash,
  .shadow-fish, .cloud, .reeds, .water-near .wave, .pond.waiting .bobber, .pond.landed .catch, .slots-lights { animation: none; }
  .chick { transition: none; }
}

/* legal + faq pages */
.doc-page { max-width: 860px; margin: 0 auto; }
.doc-card { padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(8, 32, 54, .95), rgba(4, 18, 32, .95)); }
.doc-card h2 { margin: 26px 0 10px; font-size: 15px; color: var(--mint); }
.doc-card h2:first-child { margin-top: 0; }
.doc-card p, .doc-card li { color: #b6cfe2; font-size: 13px; line-height: 1.75; }
.doc-card p { margin: 0 0 12px; }
.doc-card ul { margin: 0 0 12px; padding-left: 20px; }
.doc-card li { margin-bottom: 7px; }
.doc-card code { padding: 2px 6px; border-radius: 5px; background: rgba(126, 191, 255, .1); color: var(--mint); font-size: 12px; }
.doc-card strong { color: var(--text); }
.doc-updated { margin-bottom: 22px; color: var(--muted-2); font-size: 11px; letter-spacing: .1em; font-weight: 800; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 0; background: transparent; color: var(--text);
  font-size: 14px; font-weight: 800; text-align: left;
}
.faq-question svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); transition: transform .18s ease; }
.faq-item.open .faq-question svg { transform: rotate(180deg); color: var(--mint); }
.faq-answer { display: none; padding: 0 0 18px; color: #b6cfe2; font-size: 13px; line-height: 1.75; }
.faq-item.open .faq-answer { display: block; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* profile skin head */
.profile-skin { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; object-fit: cover; image-rendering: pixelated; }

/* The bar needs ~1600px to show everything at full size. Rather than dropping straight
   to a menu button on any laptop, it gives ground in stages: first the spacing, then the
   two items that are reachable elsewhere anyway (Promo lives in the footer, Leaderboard and
   Wallet in the account menu), and only then the whole nav. Hiding is scoped to
   :not(.mobile-open) so everything is still there once the menu button opens it. */
@media (max-width: 1600px) {
  .nav-cluster { gap: 4px; margin-left: 8px; }
  .nav-item { padding: 0 10px; gap: 6px; font-size: 11px; }
}
@media (max-width: 1560px) {
  
}
@media (max-width: 1460px) {
  .nav-cluster:not(.mobile-open) .nav-item[data-route="promo"] { display: none; }
}
@media (max-width: 1340px) {
  .nav-cluster:not(.mobile-open) .nav-item[data-route="leaderboard"] { display: none; }
}
@media (max-width: 1200px) {
  .nav-cluster:not(.mobile-open) .nav-item[data-route="wallet"] { display: none; }
}
@media (max-width: 1080px) {
  .nav-cluster { display: none; }
  .mobile-menu { display: grid; }
}
@media (max-width: 1400px) {
  .balance-plus-label { display: none; }
  .balance-plus { padding: 0; width: 32px; justify-content: center; }
}
@media (max-width: 1120px) {
  .content, .footer-inner, .footer-legal p { padding-left: 18px; padding-right: 18px; }
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 940px) {
  .home-top { grid-template-columns: 1fr; }
  .live-indicator, .live-pill { display: none; }
  .info-strip { grid-template-columns: repeat(2, 1fr); }
  .game-layout { grid-template-columns: 1fr; }
  .game-control-panel { order: -1; }
  .dashboard-columns, .wallet-top, .profile-layout { grid-template-columns: 1fr; }
  .leaderboard-podium { grid-template-columns: 1fr; }
  .podium-card.rank-1 { transform: none; }
  .nav-cluster.mobile-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    margin: 0; padding: 12px 18px 16px;
    border-bottom: 1px solid var(--line); background: var(--panel);
    box-shadow: var(--shadow); z-index: 50;
  }
  .nav-cluster.mobile-open .games-menu { position: static; width: auto; margin-top: 6px; box-shadow: none; }
}
@media (max-width: 760px) {
  .game-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-grid, .games-lobby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* Everything in the bar has to fit 375px, and the account chip must stay reachable -
     clipping it would leave no way to sign out on a phone. The wordmark goes first: the
     donut mark alone still identifies the site. */
  .brand-copy { display: none; }
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-actions { gap: 7px; }
  .balance-pill { padding: 4px 5px 4px 8px; gap: 7px; }
  .balance-copy { min-width: 0; }
  .balance-copy small { display: none; }
  .balance-copy strong { font-size: 12px; }
  .coin-image { width: 18px; height: 18px; }
  .account-chip .account-name { display: none; }
  .sound-toggle { width: 30px; height: 30px; flex-basis: 30px; }
  .balance-plus { width: 28px; height: 28px; }
}
@media (max-width: 600px) {
  .crash-history-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .topbar { padding: 0 12px; gap: 9px; }
  .brand-copy small { display: none; }
  .brand-copy strong { font-size: 13px; }
  .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .top-login { height: 36px; padding: 0 11px; font-size: 10px; white-space: nowrap; }
  .topbar-actions { gap: 8px; }
  .content { padding: 20px 14px 40px; }
  .account-name { display: none; }
  .balance-copy { min-width: 52px; }
  .top-login { padding: 0 12px; font-size: 10px; }
  .hero { min-height: 220px; padding: 22px 20px; }
  .hero h1 { font-size: 19px; }
  .section { margin-top: 26px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .info-strip { grid-template-columns: 1fr; gap: 8px; }
  .game-page-head, .page-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .game-page-head h1, .page-head h1 { font-size: 20px; }
  .game-board { min-height: 400px; padding: 14px; }
  .game-control-panel { padding: 14px; }
  .roll-board, .crash-stage, .mines-stage, .case-stage, .plinko-stage, .towers-stage { min-height: 360px; }
  .case-chests { transform: scale(.78); margin: 20px 0; }
  .wallet-actions-row, .modal-form-actions { flex-direction: column; }
  .history-panel .panel-heading { align-items: flex-start; flex-direction: column; }
  .table th, .table td { padding-left: 12px; padding-right: 12px; }
@media (max-width: 560px) { .modal-card { padding: 22px 17px; } }
  .toast-region { right: 12px; left: 12px; bottom: 12px; }
  .toast { min-width: 0; }
}
@media (max-width: 430px) {
  .game-tab img { width: 42px; height: 42px; }
  .game-tab { gap: 8px; }
  .game-tab small { font-size: 8px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ===================================================================
   Rewards, referrals, chat and the four newer games.
   Everything here reuses the panel/board vocabulary above so the new
   pages sit inside the same visual system rather than beside it.
   =================================================================== */

.page-heading { margin-bottom: 22px; }
.page-heading h1 { font-family: var(--body); font-size: clamp(28px, 3.5vw, 34px); font-weight: 800; letter-spacing: -.035em; margin: 8px 0 10px; text-shadow: 0 0 26px color-mix(in srgb, var(--page-accent) 30%, transparent); }
.page-heading p { color: var(--muted); font-size: 12.5px; line-height: 1.7; max-width: 78ch; }
.control-hint { color: var(--muted-2); font-size: 10.5px; line-height: 1.6; margin-top: 10px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
.positive { color: var(--green); }
.table-player { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------- rewards */

/* Both cards are the same component with different contents, so they are laid out as
   columns with the foot pushed down: the CLAIM buttons then sit on one line however
   many facts each card lists. */
.reward-card { display: flex; flex-direction: column; padding: 20px 22px 22px; }
.reward-card .reward-facts { flex: 1 1 auto; align-content: start; }
.reward-card .reward-foot { margin-top: auto; padding-top: 18px; }
.reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 16px 0; align-items: stretch; }
.reward-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reward-head h2 { font-family: var(--display); font-size: 15px; letter-spacing: .03em; margin-top: 6px; }
/* Silkscreen draws "%" as a dense little block that reads as anything but a percent
   sign at this size, so that one glyph drops back to the body font. */
.plain-glyph { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.reward-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.reward-kicker svg { width: 13px; height: 13px; }
.reward-amount { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 17px; color: var(--green); }
.reward-facts { list-style: none; margin: 16px 0 0; display: grid; gap: 8px; }
.reward-facts li { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--muted); border-bottom: 1px dashed rgba(126, 191, 255, .1); padding-bottom: 8px; }
.reward-facts strong { color: var(--text); }
/* Column, not a wrapping row: the paragraph sits on top and the button row is the last
   child of a bottom-anchored foot, so both cards put CLAIM on exactly the same line
   however many lines of text each one carries. */
.reward-foot { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 14px; }
.reward-foot p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.reward-foot strong { color: var(--text); }
.reward-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.reward-buttons .primary-button { flex: 1 1 auto; }

.daily-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; margin-top: 18px; }
.daily-day { position: relative; display: grid; gap: 4px; justify-items: center; padding: 14px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); }
.daily-day small { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.daily-day strong { font-family: var(--display); font-size: 13px; color: var(--text); }
.daily-day.claimed { border-color: rgba(74, 222, 128, .38); background: rgba(74, 222, 128, .08); }
.daily-day.claimed strong { color: var(--green); }
.daily-day.current { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245, 165, 36, .3), 0 10px 30px rgba(245, 165, 36, .12); }
.daily-day.is-case { background: linear-gradient(180deg, rgba(245, 197, 66, .12), rgba(245, 197, 66, .03)); border-color: rgba(245, 197, 66, .35); }
.daily-day.is-case strong { color: #ffd98a; }
.daily-day em { font-style: normal; color: var(--muted-2); font-size: 8.5px; font-weight: 800; }
.daily-chest { display: grid; place-items: center; width: 34px; height: 34px; }
.daily-chest img { width: 30px; height: 30px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.daily-day.current.is-case .daily-chest img { animation: chest-tease 1.4s ease-in-out infinite; }
@keyframes chest-tease { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-5deg); } 75% { transform: translateY(-3px) rotate(5deg); } }
.reward-chest { width: 28px; height: 28px; vertical-align: middle; image-rendering: pixelated; margin-right: 4px; }

/* the daily case spinner */
.case-modal { max-width: 560px; }
.case-reel-wrap { position: relative; margin: 18px -8px 12px; height: 128px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, #0b1220, #070c14); box-shadow: inset 0 0 40px rgba(0, 0, 0, .7); }
.case-reel { position: absolute; left: 0; top: 10px; display: flex; gap: 12px; padding-left: 12px; will-change: transform; }
.case-tile { flex: 0 0 120px; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(126, 191, 255, .05); transition: transform .3s ease, box-shadow .3s ease; }
.case-tile img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.case-tile b { font-family: var(--display); font-size: 13px; color: var(--text); }
.case-tile.tier-uncommon { border-color: rgba(245, 197, 66, .35); background: rgba(245, 197, 66, .07); }
.case-tile.tier-rare { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); }
.case-tile.tier-epic { border-color: rgba(79, 240, 216, .5); background: rgba(79, 240, 216, .12); }
.case-tile.tier-legendary { border-color: rgba(167, 139, 250, .65); background: linear-gradient(180deg, rgba(167, 139, 250, .22), rgba(167, 139, 250, .08)); box-shadow: 0 0 18px rgba(167, 139, 250, .35); }
.case-tile.won { transform: scale(1.08); box-shadow: 0 0 0 2px #ffe08a, 0 0 28px rgba(245, 197, 66, .7); animation: sym-win .55s ease-in-out infinite alternate; }
.case-pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 3; background: linear-gradient(180deg, #ffe08a, #f5c542); box-shadow: 0 0 12px rgba(245, 197, 66, .9); }
.case-pointer::before, .case-pointer::after { content: ''; position: absolute; left: 50%; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.case-pointer::before { top: 0; border-top: 9px solid #ffe08a; }
.case-pointer::after { bottom: 0; border-bottom: 9px solid #ffe08a; }
.case-fade { position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.case-fade.left { left: 0; background: linear-gradient(90deg, #070c14, transparent); }
.case-fade.right { right: 0; background: linear-gradient(270deg, #070c14, transparent); }
.case-outcome { min-height: 30px; text-align: center; font-family: var(--display); font-size: 20px; color: #ffe08a; text-shadow: 0 0 18px rgba(245, 197, 66, .6); }
.case-outcome strong { font-weight: 400; }
.daily-tick { position: absolute; top: 5px; right: 6px; color: var(--green); }
.daily-tick svg { width: 12px; height: 12px; }

.kind-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line-strong); }
.kind-daily { color: var(--amber); border-color: rgba(245, 165, 36, .4); }
.kind-cashback { color: var(--cyan); border-color: rgba(86, 184, 245, .4); }
.kind-referral { color: var(--green); border-color: rgba(74, 222, 128, .4); }

/* -------------------------------------------------------- referrals */

.referral-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; padding: 24px; }
.referral-code-block .input-row + .input-row { margin-top: 10px; }
.referral-code-edit .text-input { font-family: var(--display); font-size: 11px; letter-spacing: .08em; }
.referral-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.referral-stat { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); }
.referral-stat small { display: block; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.referral-stat strong { display: block; margin-top: 6px; font-family: var(--display); font-size: 16px; }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 18px; }
.tier-card { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); opacity: .55; }
.tier-card.unlocked { opacity: 1; }
.tier-card.current { border-color: var(--green); box-shadow: 0 0 0 1px rgba(74, 222, 128, .3); }
.tier-name { font-family: var(--display); font-size: 11px; letter-spacing: .06em; color: var(--amber); }
.tier-card strong { font-family: var(--display); font-size: 20px; color: var(--text); }
.tier-card small { color: var(--muted-2); font-size: 9.5px; }
.tier-req { margin-top: 6px; color: var(--muted); font-size: 10px; }

/* -------------------------------------------------------- blackjack */

.bj-stage { display: grid; gap: 18px; padding: 26px 22px 24px; justify-items: center; }
.bj-side { width: 100%; display: grid; gap: 10px; justify-items: center; }
.bj-side-head { display: flex; align-items: baseline; gap: 10px; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.bj-side-head strong { font-family: var(--display); font-size: 15px; color: var(--text); letter-spacing: .02em; }
.bj-hand { display: flex; gap: 8px; min-height: 104px; align-items: center; justify-content: center; flex-wrap: wrap; }
.playing-card { position: relative; width: 68px; height: 96px; border-radius: 8px; background: linear-gradient(180deg, #fdfbff, #e6dcf5); color: #1b1030; box-shadow: 0 10px 24px rgba(0, 4, 12, .5); display: grid; place-items: center; animation: card-deal .35s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * 70ms); }
.playing-card.red { color: #d4304a; }
.playing-card.face-down { background: repeating-linear-gradient(45deg, #123a5e 0 6px, #0d2b47 6px 12px); border: 2px solid rgba(126, 191, 255, .25); }
.playing-card .card-pip { font-size: 32px; line-height: 1; }
.playing-card .card-corner { position: absolute; top: 6px; left: 7px; font-size: 11px; font-weight: 900; line-height: 1; display: grid; justify-items: center; }
.playing-card .card-corner i { font-style: normal; font-size: 10px; }
.playing-card .card-corner-end { top: auto; left: auto; bottom: 6px; right: 7px; transform: rotate(180deg); }
@keyframes card-deal { from { opacity: 0; transform: translateY(-26px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.bj-verdict { font-family: var(--display); font-size: 12px; letter-spacing: .03em; color: var(--muted); text-align: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); }
.bj-verdict.live { color: var(--amber); border-color: rgba(245, 165, 36, .35); }
.bj-verdict.win { color: var(--green); border-color: rgba(74, 222, 128, .45); }
.bj-verdict.lose { color: var(--red); border-color: rgba(248, 113, 113, .45); }
.bj-verdict.push { color: var(--cyan); border-color: rgba(86, 184, 245, .45); }
.bj-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bj-actions button { padding: 12px 6px; font-size: 10px; }

/* ------------------------------------------------------------ duels */

.duel-stage { padding: 20px; display: grid; gap: 16px; }
.duel-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.duel-column h3 { font-family: var(--display); font-size: 11px; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 10px; }
/* Dice that actually get thrown when a duel resolves. */
.duel-dice { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.duel-die {
  min-width: 108px; padding: 12px 14px; display: grid; gap: 4px; justify-items: center;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel-2);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.duel-die small { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-die strong { font-family: var(--display); font-size: 26px; line-height: 1; color: var(--text); }
.duel-die.shaking { animation: duel-shake .16s linear infinite; border-color: rgba(126, 191, 255, .6); }
.duel-die.settled.won { border-color: rgba(74, 222, 128, .7); box-shadow: 0 8px 26px rgba(74, 222, 128, .28); transform: translateY(-2px); }
.duel-die.settled.won strong { color: var(--green); }
.duel-die.settled.lost { opacity: .62; }
.duel-vs { font-family: var(--display); font-size: 11px; letter-spacing: .12em; color: var(--muted-2); }
.duel-verdict { display: none; margin: -6px 0 14px; text-align: center; animation: duel-verdict-in .28s ease both; }
.duel-verdict.show { display: block; }
.duel-verdict strong { display: block; font-family: var(--display); font-size: 15px; letter-spacing: .06em; }
.duel-verdict span { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.duel-verdict.win strong { color: var(--green); text-shadow: 0 0 18px rgba(74, 222, 128, .45); }
.duel-verdict.lose strong { color: #f87171; }
@keyframes duel-verdict-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes duel-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-1.5deg); }
  50% { transform: translate(2px, -1px) rotate(1.5deg); }
  75% { transform: translate(-1px, -2px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .duel-die.shaking { animation: none; } }

.duel-list { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.duel-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); font-size: 11.5px; }
.duel-row.mine { border-color: rgba(245, 165, 36, .4); }
.duel-row.settled { justify-content: space-between; }
.duel-player { display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.duel-player strong { overflow: hidden; text-overflow: ellipsis; }
.duel-player i { font-style: normal; font-family: var(--display); font-size: 11px; color: var(--muted); }
.duel-player.won { color: var(--green); }
.duel-player.won i { color: var(--green); }
.duel-versus { color: var(--muted-2); font-size: 9px; letter-spacing: .1em; }
.duel-bet { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-size: 11px; color: var(--amber); }
.duel-empty { color: var(--muted-2); font-size: 11px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.duel-result { text-align: center; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.duel-result.win { border-color: rgba(74, 222, 128, .45); }
.duel-result.lose { border-color: rgba(248, 113, 113, .4); }
.duel-result .win { color: var(--green); }
.duel-result .lose { color: var(--red); }
button.tiny { padding: 6px 12px; font-size: 9px; }

/* ---------------------------------------------------------- upgrade */

.upgrade-stage { display: grid; gap: 18px; justify-items: center; padding: 28px 20px; }
.upgrade-wheel { position: relative; width: min(280px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.upgrade-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.upgrade-track { fill: none; stroke: rgba(126, 191, 255, .12); stroke-width: 18; }
.upgrade-arc { fill: none; stroke: var(--green); stroke-width: 18; filter: drop-shadow(0 0 10px rgba(74, 222, 128, .5)); transition: stroke-dasharray .2s ease; }
.upgrade-needle { position: absolute; inset: 0; transform-origin: 50% 50%; }
.upgrade-needle::before { content: ''; position: absolute; left: 50%; top: 4%; width: 4px; height: 26%; margin-left: -2px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 12px rgba(245, 165, 36, .8); }
.upgrade-core { display: grid; justify-items: center; gap: 4px; }
.upgrade-core strong { font-family: var(--display); font-size: 26px; }
.upgrade-core small { color: var(--muted); font-size: 11px; }
.upgrade-result { text-align: center; color: var(--muted); font-size: 12px; }
.upgrade-result.win { color: var(--green); }
.upgrade-result.lose { color: var(--red); }
.upgrade-wheel { --upgrade-glow: rgba(99, 229, 255, .35); }
.upgrade-wheel::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, var(--upgrade-glow), transparent 68%); pointer-events: none; }
.upgrade-wheel::after { content: ""; position: absolute; inset: -9px; border: 1px solid var(--upgrade-glow); border-radius: 50%; box-shadow: 0 0 24px var(--upgrade-glow), inset 0 0 20px var(--upgrade-glow); pointer-events: none; opacity: .45; transition: opacity .25s ease; }
.upgrade-wheel.is-spinning { --upgrade-glow: rgba(99, 229, 255, .55); }
.upgrade-wheel.is-spinning::after { opacity: 1; animation: upgrade-energy-pulse .7s ease-in-out infinite; }
.upgrade-wheel.is-spinning .upgrade-needle::before { background: #fff1b1; box-shadow: 0 0 20px rgba(255, 205, 77, .95); }
.upgrade-wheel.is-win { --upgrade-glow: rgba(96, 249, 155, .65); }
.upgrade-wheel.is-win::after { opacity: 1; border-color: var(--mint); }
.upgrade-wheel.is-win .upgrade-core { box-shadow: 0 0 30px var(--upgrade-glow), inset 0 0 15px rgba(96, 249, 155, .1); }
.upgrade-wheel.is-loss { --upgrade-glow: rgba(248, 113, 113, .28); }
.upgrade-wheel.is-loss::after { opacity: .8; border-color: var(--red); }
.upgrade-result.is-spinning { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); }
.upgrade-result.is-spinning::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(99, 229, 255, .2); border-top-color: var(--cyan); border-radius: 50%; animation: account-flow-spin .8s linear infinite; }
@keyframes upgrade-energy-pulse { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.035); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .upgrade-wheel.is-spinning::after, .upgrade-result.is-spinning::before { animation: none; } }
.quick-targets { margin-top: 10px; }

/* ------------------------------------------------------------- boom */

.game-board-boom { padding-top: 58px; }
.game-board-boom .board-topline { top: 22px; left: 28px; right: 28px; }
.boom-stage { display: grid; gap: 16px; padding: 10px 20px 22px; justify-items: center; }
.boom-arena { position: relative; width: 100%; min-height: 220px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(circle at 50% 62%, rgba(74, 222, 128, calc(.06 + var(--tension, 0) * .22)), transparent 62%), var(--panel-2); overflow: hidden; }
.boom-creeper { cursor: default; transform: scale(calc(1 + var(--tension, 0) * .22)); transition: transform .25s ease; }
.boom-arena.live .boom-creeper { cursor: pointer; animation: creeper-breathe calc(1.35s - var(--tension, 0) * .75s) ease-in-out infinite; }
@keyframes creeper-breathe { 0%, 100% { filter: brightness(1); transform: translateY(0) scale(calc(1 + var(--tension, 0) * .22)); } 35% { transform: translateY(-5px) rotate(-1.5deg) scale(calc(1.035 + var(--tension, 0) * .24)); } 65% { filter: brightness(calc(1.12 + var(--tension, 0) * .5)); transform: translateY(2px) rotate(1.5deg) scale(calc(1.02 + var(--tension, 0) * .23)); } }
.boom-creeper.hit-left { animation: creeper-hit-left .42s cubic-bezier(.18,.84,.3,1); }
.boom-creeper.hit-right { animation: creeper-hit-right .42s cubic-bezier(.18,.84,.3,1); }
@keyframes creeper-hit-left { 0% { transform: translate(0,0) scale(1) rotate(0); filter: brightness(1); } 22% { transform: translate(-28px,-7px) scale(1.13,.9) rotate(-11deg); filter: brightness(1.9); } 55% { transform: translate(14px,3px) scale(.96,1.07) rotate(6deg); } 100% { transform: translate(0,0) scale(1) rotate(0); filter: brightness(1); } }
@keyframes creeper-hit-right { 0% { transform: translate(0,0) scale(1) rotate(0); filter: brightness(1); } 22% { transform: translate(28px,-7px) scale(1.13,.9) rotate(11deg); filter: brightness(1.9); } 55% { transform: translate(-14px,3px) scale(.96,1.07) rotate(-6deg); } 100% { transform: translate(0,0) scale(1) rotate(0); filter: brightness(1); } }
.boom-creeper.blow { animation: creeper-blow .5s cubic-bezier(.3,.9,.3,1) forwards; }
@keyframes creeper-blow { 0% { transform: scale(1); } 45% { transform: scale(1.6); filter: brightness(3); } 100% { transform: scale(0); opacity: 0; } }
.creeper-sprite { position: relative; width: 132px; height: 132px; image-rendering: pixelated; background:
  repeating-linear-gradient(90deg, #4ade80 0 11px, #3fcf72 11px 22px),
  repeating-linear-gradient(0deg, #46d67a 0 11px, #37bd68 11px 22px); background-blend-mode: multiply; border-radius: 6px; box-shadow: inset 0 4px 0 rgba(255,255,255,.16), inset 0 -5px 0 rgba(0,0,0,.28); }
.creeper-eye { position: absolute; top: 34px; width: 30px; height: 30px; background: #0b1a11; box-shadow: inset 0 3px 0 rgba(0,0,0,.5); }
.creeper-eye.left { left: 20px; }
.creeper-eye.right { right: 20px; }
.boom-arena.live .creeper-eye { box-shadow: inset 0 0 0 4px rgba(248, 113, 113, calc(var(--tension, 0) * .9)); }
.creeper-mouth { position: absolute; top: 70px; left: 50%; width: 34px; height: 26px; margin-left: -17px; background: #0b1a11; }
.creeper-leg { position: absolute; top: 92px; width: 17px; height: 34px; background: #0b1a11; }
.creeper-leg.left { left: 33px; }
.creeper-leg.right { right: 33px; }
.boom-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff 0%, rgba(255,180,80,.85) 30%, transparent 70%); opacity: 0; pointer-events: none; }
.boom-flash.on { animation: boom-flash .55s ease-out; }
@keyframes boom-flash { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.6); } }
.boom-impact { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 5px solid rgba(255,255,255,.9); border-radius: 50%; opacity: 0; pointer-events: none; }
.boom-impact.on { animation: boom-impact .38s ease-out; }
@keyframes boom-impact { 0% { opacity: .95; transform: scale(.15); } 100% { opacity: 0; transform: scale(2.7); } }
.boom-particle { position: absolute; z-index: 6; left: 50%; top: 52%; width: 9px; height: 13px; border-radius: 2px; background: var(--c); pointer-events: none; animation: boom-particle .78s cubic-bezier(.16,.72,.3,1) forwards; }
@keyframes boom-particle { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.4) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); } }
/* Every click kicks the arena; the explosion kicks it much harder. */
.boom-arena.shake { animation: boom-shake .34s cubic-bezier(.36,.07,.19,.97); }
.boom-arena.shake-hard { animation: boom-shake-hard .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes boom-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes boom-shake-hard {
  0%, 100% { transform: translate(0, 0) scale(1); }
  10% { transform: translate(-13px, 7px) scale(1.02); }
  25% { transform: translate(12px, -9px) scale(1.015); }
  40% { transform: translate(-10px, 5px); }
  55% { transform: translate(8px, -4px); }
  70% { transform: translate(-5px, 3px); }
  85% { transform: translate(3px, -2px); }
}
/* A red danger glow that grows with the tension already tracked on the arena. */
.boom-arena::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgba(248, 113, 113, calc(var(--tension, 0) * .55)); opacity: calc(.35 + var(--tension, 0) * .65); transition: box-shadow .3s ease; }
.boom-arena.live::after { animation: boom-danger calc(1.5s - var(--tension, 0) * .9s) ease-in-out infinite; }
@keyframes boom-danger { 0%, 100% { opacity: calc(.25 + var(--tension, 0) * .35); } 50% { opacity: calc(.5 + var(--tension, 0) * .5); } }
.boom-readout strong.bump { animation: boom-bump .34s cubic-bezier(.2,.9,.25,1); }
@keyframes boom-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); color: var(--mint); } 100% { transform: scale(1); } }
.boom-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.boom-readout > div { padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); text-align: center; }
.boom-readout small { display: block; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.boom-readout strong { display: block; margin-top: 5px; font-family: var(--display); font-size: 15px; }
#boomNextRisk { font-family: var(--body); font-weight: 900; letter-spacing: 0; }
.boom-ladder { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.boom-step { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted-2); font-size: 9.5px; font-weight: 800; }
.boom-step.cleared { color: var(--green); border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); }
.boom-step.next { color: var(--amber); border-color: var(--amber); }
.boom-ladder-empty { color: var(--muted-2); font-size: 10.5px; }
.boom-result { color: var(--muted); font-size: 12px; text-align: center; }
.boom-result .win { color: var(--green); }
.boom-result .lose { color: var(--red); }
.boom-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.board-status.risk-critical { color: var(--red); }
.board-status.risk-danger { color: var(--amber); }
.board-status.risk-defused { color: var(--green); }

/* ------------------------------------------------------------- chat */

/* This used to be a panel-coloured pill on a dark page - technically visible, but nothing
   pulled the eye to it, and the chat stayed empty as a result. It now reads as the accent
   control it is, and carries a live count of what the player has not read. */
.chat-toggle {
  position: fixed; left: 18px; right: auto; bottom: 18px; z-index: 42;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 19px; border-radius: 999px;
  border: 1px solid rgba(134, 239, 172, .55);
  background: linear-gradient(180deg, #4ade80, #16a34a);
  color: #04160f; font-size: 10.5px; font-weight: 900; letter-spacing: .14em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(22, 163, 74, .38), var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.chat-toggle:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(22, 163, 74, .5), var(--shadow); }

/* Unread count. Sits on the pill itself so it is read as part of the button. */
.chat-unread {
  position: absolute; top: -6px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid var(--bg);
  background: #f87171; color: #2b0606;
  font-size: 10px; font-weight: 900; letter-spacing: 0;
}
.chat-unread[hidden] { display: none; }
/* Plain traffic gets a dot, not a number - see updateChatBadge for why. */
.chat-activity {
  position: absolute; top: -3px; right: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--bg); background: #bbf7d0;
}
.chat-activity[hidden] { display: none; }

/* A single expanding ring, only while something is actually unread - it stops the moment
   the chat is opened, so it never becomes background noise the eye learns to ignore. */
.chat-toggle.has-unread::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 2px solid rgba(134, 239, 172, .75);
  animation: chat-attention 2.1s ease-out infinite;
  pointer-events: none;
}
@keyframes chat-attention {
  0%   { transform: scale(1); opacity: .85; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-toggle.has-unread::after { animation: none; opacity: .55; }
  .chat-toggle:hover { transform: none; }
}
.chat-toggle svg { width: 17px; height: 17px; }
body.chat-open .chat-toggle { display: none; }
/* Full viewport height, above the top bar. It used to start at --nav-height, but the
   sticky header scrolls away on long pages, which left a 64px empty strip above the chat
   whenever it was opened anywhere but the very top. Now it always meets the top edge. */
.chat-dock { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; z-index: 41; display: none; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(0, 6, 16, .5); }
.chat-dock.open { display: grid; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 10px; letter-spacing: .1em; }
.chat-messages { overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; display: grid; gap: 10px; align-content: start; }
.chat-line { display: flex; gap: 8px; align-items: flex-start; }
.chat-line > div { min-width: 0; }
.chat-avatar { width: 26px; height: 26px; flex: 0 0 26px; }
.chat-name { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: var(--amber); }
.chat-line.mine .chat-name { color: var(--green); }
.chat-body { display: block; margin-top: 2px; font-size: 12px; line-height: 1.55; color: #c9dced; overflow-wrap: anywhere; }
/* A mention is a link to a person, so it looks like one and opens their profile. */
.chat-mention {
  display: inline; padding: 1px 4px; border-radius: 5px;
  background: rgba(86, 184, 245, .16); color: #9fd4ff;
  font-weight: 800; font-size: inherit; line-height: inherit;
}
.chat-mention:hover { background: rgba(86, 184, 245, .3); color: #d6efff; }
/* Being named yourself is the one that has to stand out. */
.chat-mention.me { background: rgba(245, 179, 1, .22); color: #ffd98a; }
.chat-line.pinged {
  padding: 6px 8px 6px 7px; margin-left: -2px;
  border-left: 2px solid var(--amber); border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(245, 179, 1, .13), transparent 78%);
}
/* The action buttons all sit absolutely in the top-right corner in one row. Fixed slots
   from the right edge (reply 0, mention 27, mute 54, ban 81) so they never overlap
   whatever the mix - a non-admin sees reply + mention, an admin adds mute + ban to the
   left of them. The @ used to be a normal flex child, which is what the absolute reply
   and mod buttons landed on top of. */
.chat-mention-button {
  position: absolute; top: 0; right: 27px;
  width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted-2); background: rgba(86, 184, 245, .06);
  font-size: 12px; font-weight: 900; line-height: 1;
  opacity: 0; transition: opacity .14s ease, color .14s ease, background .14s ease;
}
.chat-line:hover .chat-mention-button, .chat-mention-button:focus-visible { opacity: 1; }
.chat-mention-button:hover { color: var(--cyan); border-color: rgba(86, 184, 245, .45); background: rgba(86, 184, 245, .14); }
@media (hover: none) { .chat-mention-button { opacity: .6; } }
.chat-line.system { justify-content: center; }
.chat-line.system .chat-body { color: var(--muted-2); font-size: 10.5px; font-style: italic; text-align: center; }
.chat-empty { color: var(--muted-2); font-size: 11px; text-align: center; padding: 26px 12px; }
/* Replies: the arrow only appears on hover so the room stays quiet to read. */
.chat-line { position: relative; }
.chat-reply-button { position: absolute; right: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-2); background: rgba(126, 191, 255, .06); opacity: 0; transition: opacity .14s ease, color .14s ease; }
.chat-line:hover .chat-reply-button, .chat-reply-button:focus-visible { opacity: 1; }
.chat-reply-button:hover { color: var(--green); border-color: rgba(74, 222, 128, .45); }
.chat-reply-button svg { width: 11px; height: 11px; }
/* Operator promo-code creator: the four fields sit on one row on a wide console and
   wrap to a stack on a narrow one, with the Create button always last. */
.promo-create { display: grid; grid-template-columns: 1.4fr 1fr .8fr .9fr auto; gap: 10px; align-items: end; }
.promo-create .primary-button { height: 38px; white-space: nowrap; }
@media (max-width: 900px) { .promo-create { grid-template-columns: 1fr 1fr; } .promo-create .primary-button { grid-column: 1 / -1; } }
/* Operator-only mute / ban controls, revealed on hover next to the reply arrow. */
.chat-line { position: relative; }
.chat-mod-button { position: absolute; top: 0; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-2); background: rgba(255, 107, 107, .06); opacity: 0; transition: opacity .14s ease, color .14s ease, border-color .14s ease; }
.chat-mod-button.mute { right: 54px; }
.chat-mod-button.ban { right: 81px; }
.chat-line:hover .chat-mod-button, .chat-mod-button:focus-visible { opacity: 1; }
.chat-mod-button:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, .55); background: rgba(255, 107, 107, .12); }
.chat-mod-button:disabled { opacity: .35; cursor: default; }
.chat-mod-button svg { width: 12px; height: 12px; }
.chat-quote { display: block; margin: 3px 0 2px; padding: 4px 7px; border-left: 2px solid var(--purple); border-radius: 0 5px 5px 0; background: rgba(167, 139, 250, .08); color: var(--muted); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-quote strong { display: block; color: #c8b6ff; font-size: 9px; letter-spacing: .05em; }
.chat-reply-bar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 12px; border-top: 1px solid var(--line); background: rgba(167, 139, 250, .07); }
.chat-reply-bar.hidden { display: none; }
.chat-reply-to { flex: 1; min-width: 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-reply-to strong { color: #c8b6ff; }
.chat-reply-bar button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border-radius: 6px; color: var(--muted-2); background: transparent; }
.chat-reply-bar button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.chat-reply-bar button svg { width: 11px; height: 11px; }
/* The operator posts as the house bot, so their line is unmistakable. */
.chat-line.bot .chat-name { color: #ffe27a; }
.chat-level { display: inline-grid; place-items: center; min-width: 17px; height: 14px; margin-right: 5px; padding: 0 3px; border-radius: 4px; color: #05210f; background: linear-gradient(180deg, var(--mint), var(--green)); font-size: 8px; font-weight: 900; vertical-align: middle; }
/* Staff lines are gold whatever the level says: the chip drops the tier's own glow
   (a Netherite one was leaking its pink halo and shine under the gold) for a gold one. */
.chat-line.bot .chat-level { background: linear-gradient(180deg, #ffe393, #f5b301); color: #2a1a00; border-color: rgba(255, 227, 147, .6); box-shadow: 0 0 12px rgba(245, 179, 1, .5); }
.chat-line.bot .chat-level::after { background: linear-gradient(115deg, transparent 35%, rgba(255, 250, 220, .8) 50%, transparent 65%); }
.chat-tag { margin-left: 6px; padding: 1px 5px; border-radius: 4px; color: #2a1a00; background: linear-gradient(180deg, #ffe393, #f5b301); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.chat-form { display: flex; gap: 8px; padding: 12px 14px 6px; border-top: 1px solid var(--line); }
.chat-form .text-input { flex: 1; min-width: 0; }
.chat-form .primary-button { padding: 0 14px; }
.chat-form .primary-button svg { width: 16px; height: 16px; }
.chat-hint { padding: 2px 14px 8px; margin: 0; color: var(--muted-2); font-size: 9px; text-align: center; letter-spacing: .03em; }

@media (max-width: 1180px) {
  .chat-dock { width: 100%; max-width: 360px; }
  .referral-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bj-actions { grid-template-columns: 1fr 1fr; }
  .boom-readout { grid-template-columns: 1fr; }
  .chat-dock { max-width: none; top: auto; height: 70vh; border-left: none; border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
}

/* The dock is a pure overlay. It used to push the shell AND the top bar 320px left on
   open, which re-laid-out the entire page - the header jumped, the game board reflowed
   mid-round and anything measured in pixels (the plinko board, the wheel) went briefly
   wrong. Nothing outside the dock moves now; it slides in over the page instead. */
.chat-dock { transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.chat-dock.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .chat-dock { transition: none; }
}

/* On a phone the dock is a sheet: it sits above the page and above the toggle. */
@media (max-width: 720px) {
  .chat-dock { z-index: 41; box-shadow: 0 -20px 60px rgba(0, 6, 16, .65); }
  .chat-messages { padding-bottom: 12px; }
}

/* =============================================== limbo, hi-lo and jackpot */
.limbo-stage, .hilo-stage, .jackpot-stage {
  min-height: 450px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; z-index: 1; gap: 14px; padding: 20px;
}
.limbo-stage h2, .hilo-stage h2 { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.limbo-result {
  font-size: clamp(56px, 9vw, 100px); font-weight: 900; line-height: .9; letter-spacing: -.06em;
  color: var(--cyan); text-shadow: 0 0 30px rgba(79, 240, 216, .3);
  transition: color .25s ease, text-shadow .25s ease;
}
.limbo-result.rolling { color: #b9f5ea; }
.limbo-result.win { color: var(--green); text-shadow: 0 0 34px rgba(74, 222, 128, .45); }
.limbo-result.loss { color: var(--red); text-shadow: 0 0 30px rgba(255, 113, 142, .3); }
.limbo-target { color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.limbo-note { min-height: 20px; color: var(--muted); font-size: 12px; }

.hilo-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hilo-card {
  width: 64px; height: 90px; display: grid; place-items: center; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.18); border-radius: 10px;
  background: linear-gradient(160deg, #f8f4ff, #ddd3ef); color: #1b1030;
  font-family: var(--display); font-size: 24px;
  box-shadow: 0 10px 22px rgba(0,0,0,.4);
}
.hilo-card.red { color: #c9203f; }
.hilo-card.past { width: 42px; height: 60px; font-size: 15px; opacity: .45; }
.hilo-card.current { transform: scale(1.06); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 26px rgba(96, 165, 250, .35); }
.hilo-card.back { background: linear-gradient(160deg, #4d2478, #2a1240); border-color: rgba(192, 132, 252, .5); }
.hilo-card.back i { width: 26px; height: 40px; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(240, 216, 255, .5) 0 4px, transparent 4px 8px); }
.hilo-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(430px, 100%); }
.hilo-odds span { display: grid; gap: 2px; padding: 9px 6px; border: 1px solid var(--line); border-radius: 9px; background: rgba(126, 191, 255, .05); text-align: center; color: var(--muted-2); font-size: 8.5px; font-weight: 900; letter-spacing: .12em; }
.hilo-odds strong { color: var(--text); font-size: 15px; letter-spacing: 0; }
.hilo-odds small { color: var(--muted); font-size: 9.5px; letter-spacing: 0; }
.hilo-odds .hilo-holding { border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); color: var(--mint); }
.hilo-odds .dead { opacity: .3; }
.hilo-hint { color: var(--muted-2); font-size: 10.5px; }
.hilo-result { min-height: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.hilo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.hilo-actions .outline-button:disabled { opacity: .35; cursor: not-allowed; }

.jackpot-pot { display: grid; justify-items: center; gap: 4px; }
.jackpot-pot small { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .3em; }
.jackpot-pot strong {
  font-family: var(--display); font-size: clamp(38px, 7vw, 68px); line-height: 1;
  background: linear-gradient(180deg, #fff6cf 10%, #ffd561 46%, #f0a500);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 12px rgba(240, 165, 0, .45));
}
.jackpot-pot span { color: var(--muted); font-size: 11px; }
.jackpot-timer { color: var(--muted); font-size: 12px; text-align: center; }
.jackpot-timer strong { color: var(--text); }
/* Jackpot wheel: slice widths are the players' odds, the pointer sits at twelve o'clock
   and the wheel rotates so the winning slice lands under it. */
.jackpot-wheel-wrap { position: relative; width: min(250px, 62vw); aspect-ratio: 1; margin: 2px auto 4px; display: grid; place-items: center; }
/* The wedges are an SVG ring now, not a conic gradient. A stroked ring keeps every
   divider the same width from the hub to the rim, where a conic divider was a wedge and
   splayed outwards; it also drops the background-clip dance the gradient needed. */
.jackpot-wheel {
  position: absolute; inset: 0; border-radius: 50%;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .45));
}
.jackpot-ring { display: block; width: 100%; height: 100%; overflow: visible; }
.jw-rim { fill: #0a1220; stroke: #223247; stroke-width: 1.2; }
.jw-rim-edge { fill: none; stroke: rgba(255, 215, 106, .45); stroke-width: 1.4; }
.jw-ticks line { stroke: rgba(255, 224, 138, .45); stroke-width: .9; }
.jw-empty { fill: none; stroke: #101a2c; }
.jw-wedge { stroke: none; transition: filter .3s ease; }
.jw-wedge.winner { filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, .55)); animation: jw-win 1s ease-in-out 3; }
@keyframes jw-win { 50% { filter: brightness(1.6) saturate(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, .9)); } }
.jw-dividers line { stroke: #06101c; stroke-width: 2.4; stroke-linecap: round; }
.jw-inner-edge { fill: none; stroke: #06101c; stroke-width: 2.6; }
.jw-outer-edge { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.jw-head-ring { fill: #06101c; stroke: rgba(255, 255, 255, .55); stroke-width: 1.1; }
.jw-headwrap image { image-rendering: pixelated; }
.jw-share { font: 900 6.5px Inter, system-ui, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(6, 16, 28, .9); stroke-width: 2px; }
.jackpot-wheel.spinning { transition: transform 5.4s cubic-bezier(.11, .72, .11, 1); }
.jackpot-pointer {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 20px solid #ffd76a; filter: drop-shadow(0 0 2px #fff6cc) drop-shadow(0 3px 8px rgba(255, 215, 106, .6));
}
.jackpot-pointer::after { content: ''; position: absolute; left: -5px; top: -20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #fff3c4; }
.jackpot-wheel-hub {
  position: relative; z-index: 2; width: 46%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 2px; text-align: center;
  background: var(--panel); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
.jackpot-wheel-hub small { color: var(--muted-2); font-size: 7.5px; font-weight: 900; letter-spacing: .14em; }
.jackpot-wheel-hub strong { font-family: var(--display); font-size: 22px; color: var(--text); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .jackpot-wheel.spinning { transition: transform .4s ease; } }

/* Round verdict, pinned to the bottom-right of the jackpot stage. */
.jackpot-outcome {
  position: absolute; right: 16px; bottom: 16px; z-index: 4;
  display: none; min-width: 150px; padding: 10px 14px; text-align: right;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(6, 14, 26, .92); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: jackpot-outcome-in .28s ease both;
}
.jackpot-outcome.show { display: block; }
.jackpot-outcome small { display: block; color: var(--muted-2); font-size: 8.5px; font-weight: 900; letter-spacing: .14em; }
.jackpot-outcome strong { display: block; margin-top: 2px; font-family: var(--display); font-size: 20px; line-height: 1; color: var(--text); }
.jackpot-outcome span { display: block; margin-top: 4px; color: var(--muted); font-size: 9.5px; }
.jackpot-outcome.win { border-color: rgba(74, 222, 128, .55); box-shadow: 0 10px 30px rgba(74, 222, 128, .22); }
.jackpot-outcome.win strong { color: var(--green); }
.jackpot-outcome.lose { border-color: rgba(248, 113, 113, .45); }
.jackpot-outcome.lose strong { color: #f87171; }
@keyframes jackpot-outcome-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .jackpot-outcome { right: 10px; bottom: 10px; min-width: 0; padding: 8px 11px; } }

.jackpot-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.jackpot-players { width: min(460px, 100%); display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.jackpot-player { display: grid; grid-template-columns: 24px minmax(0, 1fr) 70px auto auto; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(126, 191, 255, .04); font-size: 11px; }
.jackpot-player.mine { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); }
.jackpot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.jackpot-share { height: 5px; border-radius: 4px; background: rgba(126, 191, 255, .14); overflow: hidden; }
.jackpot-share i { display: block; height: 100%; background: linear-gradient(90deg, #f5c542, #ffd561); }
.jackpot-player strong { font-size: 11.5px; }
.jackpot-player small { color: var(--muted-2); font-size: 9.5px; }
.jackpot-empty { padding: 22px; color: var(--muted-2); font-size: 11px; text-align: center; }
.jackpot-history { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.jackpot-past { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 9.5px; }
.jackpot-past strong { color: #ffe27a; }

/* ====================================================== operator console */
.admin-body { padding: 16px 20px 20px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.admin-tile { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(178, 196, 221, .04); }
.admin-tile span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.admin-tile strong { display: block; margin-top: 6px; font-family: var(--display); font-size: 17px; }
.admin-tile small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-tile.good { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); }
.admin-tile.good strong { color: var(--mint); }
.admin-tile.bad { border-color: rgba(255, 113, 142, .4); background: rgba(255, 113, 142, .08); }
.admin-tile.bad strong { color: var(--red); }
.admin-warning { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid rgba(255, 113, 142, .45); border-radius: 11px; background: rgba(255, 113, 142, .1); color: #ffc4cf; font-size: 11.5px; line-height: 1.6; }
.admin-warning svg { width: 17px; height: 17px; flex: 0 0 17px; }
.admin-actions { display: flex; gap: 6px; justify-content: flex-end; }
.admin-actions button { min-height: 28px; padding: 0 10px; font-size: 9.5px; }
.status-dot.off { background: var(--red); box-shadow: 0 0 8px rgba(255,113,142,.6); }

/* the share affordance on a feed row - only visible when the row is hovered */
.table tbody tr { position: relative; }
/* ------------------------------------------------------------- live feed v2 ---
   One row per bet: cover | player | when | bet | multiplier pill | payout | share.
   No header, no rules - the row shape says what each figure is. */
.feed-list { display: flex; flex-direction: column; gap: 3px; padding: 6px; }
.feed-item {
  display: grid; grid-template-columns: 136px minmax(0, 1fr) 70px 146px 68px 146px 26px;
  align-items: center; gap: 10px; min-height: 44px; padding: 5px 10px 5px 6px;
  border-radius: 10px; background: rgba(126, 191, 255, .03);
  transition: background .15s ease;
}
.feed-item:hover { background: rgba(126, 191, 255, .07); }
/* own rows are not highlighted - the name is enough, a permanent green stripe read as a win */
.feed-game { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 800; font-size: 11.5px; text-align: left; }
.feed-game img { width: 34px; height: 26px; flex: 0 0 34px; border-radius: 6px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 10px color-mix(in srgb, var(--dot) 35%, transparent); }
.feed-game i { width: 34px; height: 26px; border-radius: 6px; background: var(--dot); }
.feed-game span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-game:hover span { color: var(--dot); }
.feed-player { min-width: 0; }
.feed-player .player-cell { max-width: 100%; }
.feed-player .player-name { font-weight: 800; }
.feed-level { margin-left: 7px; }
.feed-time { color: var(--muted-2); font-size: 10.5px; white-space: nowrap; }
.feed-bet .amount-cell, .feed-payout .amount-cell { white-space: nowrap; }
.feed-bet .amount-cell { color: var(--muted); font-weight: 700; }
.feed-mult { justify-self: start; padding: 3px 8px; border-radius: 999px; font-family: var(--display); font-size: 9.5px; letter-spacing: .02em; background: rgba(126, 191, 255, .1); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed-item.win .feed-mult { background: rgba(74, 222, 128, .16); color: var(--mint); }
.feed-item.push .feed-mult { background: rgba(245, 197, 66, .14); color: #ffd98a; }
.feed-payout { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.feed-payout .amount-cell { justify-content: flex-end; }
.feed-item.win .feed-payout { color: var(--green); }
.feed-item.push .feed-payout { color: #ffd98a; }
.feed-item.partial .feed-payout { color: var(--muted); }
/* x0.01-x0.99: plain grey pill (money came back); a flat x0 loss is the red one */
.feed-item.loss .feed-mult { background: rgba(255, 113, 142, .12); color: #ffb4b4; }
.feed-payout em { font-style: normal; color: var(--muted-2); padding-right: 6px; }
.feed-item .feed-share { margin: 0; justify-self: end; opacity: .45; }
.feed-item:hover .feed-share { opacity: 1; }
.feed-item.arrive { animation: feed-arrive .62s cubic-bezier(.2,.85,.25,1) both, feed-item-flash 1.2s ease-out both; }
.feed-item.arrive.loss { --flash-tint: rgba(255, 113, 142, .14); }
.feed-item.arrive.win { --flash-tint: rgba(74, 222, 128, .18); }
@keyframes feed-item-flash { 0% { background: var(--flash-tint, rgba(74, 222, 128, .18)); } 100% { background: rgba(126, 191, 255, .03); } }
@media (max-width: 900px) {
  .feed-item { grid-template-columns: 104px minmax(0, 1fr) 134px 64px 134px; }
  .feed-time, .feed-item .feed-share { display: none; }
}
@media (max-width: 560px) {
  .feed-item { grid-template-columns: 38px minmax(0, 1fr) 62px 96px; gap: 8px; padding: 6px; }
  .feed-game span, .feed-bet, .feed-level { display: none; }
}

.feed-share { margin-left: 8px; width: 20px; height: 20px; padding: 0; display: inline-grid; place-items: center; vertical-align: middle; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); background: rgba(126, 191, 255, .06); opacity: 0; transition: opacity .14s ease, color .14s ease; }
.table tbody tr:hover .feed-share, .feed-share:focus-visible { opacity: 1; }
.feed-share:hover { color: var(--green); border-color: rgba(74, 222, 128, .45); }
.feed-share svg { width: 11px; height: 11px; }

/* ==================================================================== keno */
.keno-stage { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; position: relative; z-index: 1; }
.keno-stage h2 { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.keno-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: min(430px, 100%); }
.keno-cell {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--muted); background: rgba(2, 12, 22, .55);
  font-family: var(--display); font-size: 11px;
  transition: transform .12s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.keno-cell:hover:not(.picked):not(.hit):not(.drawn) { color: var(--text); border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .08); }
.keno-cell.picked { color: #05210f; border-color: rgba(79, 240, 216, .6); background: linear-gradient(180deg, #b8fff5, #4ff0d8); }
/* Mined, but not one of yours. */
.keno-cell.drawn { color: #cbd8e6; border-color: rgba(255, 255, 255, .2); background: rgba(126, 191, 255, .12); }
/* Mined AND marked - the only cell that pays. */
.keno-cell.hit { color: #2a1a00; border-color: rgba(250, 204, 21, .7); background: linear-gradient(180deg, #ffe393, #f5b301); box-shadow: 0 0 18px rgba(250, 204, 21, .45); }
.keno-cell.pop { animation: keno-pop .3s cubic-bezier(.2,.9,.25,1); }
@keyframes keno-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.keno-table { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: min(460px, 100%); }
.keno-pay { display: grid; gap: 1px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(126, 191, 255, .05); text-align: center; }
.keno-pay small { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.keno-pay strong { color: var(--text); font-size: 11px; }
.keno-pay em { color: var(--muted-2); font-size: 8.5px; font-style: normal; }
.keno-pay.landed { border-color: rgba(250, 204, 21, .55); background: rgba(250, 204, 21, .12); }
.keno-pay.landed strong { color: #ffe27a; }
.keno-hint { color: var(--muted-2); font-size: 10.5px; }
.keno-result { min-height: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.keno-buttons { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* lobby category chips - the counts make it obvious which shelves are stocked */
.lobby-filters { justify-content: center; margin-bottom: 18px; }
/* These replaced the ALL GAMES banner, so they have to carry that heading's weight:
   taller, wider and spaced like the chamfered plate they stand in for. */
.section-filters { gap: 8px; margin: 0 0 20px; }
.section-filters .filter-chip {
  min-width: 124px; height: 40px; padding: 0 18px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-color: var(--line-strong);
  font-family: var(--display); font-size: 10.5px; letter-spacing: .04em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.section-filters .filter-chip:hover { border-color: color-mix(in srgb, var(--page-accent) 55%, transparent); color: var(--text); }
/* The count is a badge, not part of the label: same size whatever the number, and it
   keeps the body font so a 2 and a 16 do not read as different weights. */
.section-filters .filter-chip span {
  min-width: 22px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 20px; background: rgba(126, 191, 255, .12); color: var(--muted);
  font-family: Inter, system-ui, sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: 0;
}
.section-filters .filter-chip.active span { background: rgba(4, 20, 14, .26); color: #06231a; }

/* The live feed's columns used to be sized by whatever the current filter happened to
   show, so every switch nudged them sideways. Fixed layout pins them for all four. */
.feed-table { table-layout: fixed; min-width: 620px; }
.feed-table th, .feed-table td { overflow: hidden; text-overflow: ellipsis; }
.feed-table th:nth-child(1), .feed-table td:nth-child(1) { width: 19%; }
.feed-table th:nth-child(2), .feed-table td:nth-child(2) { width: 23%; }
.feed-table th:nth-child(3), .feed-table td:nth-child(3) { width: 17%; }
.feed-table th:nth-child(4), .feed-table td:nth-child(4) { width: 15%; }
.feed-table th:nth-child(5), .feed-table td:nth-child(5) { width: 12%; }
.feed-table th:nth-child(6), .feed-table td:nth-child(6) { width: 14%; }
.lobby-filters .filter-chip { display: inline-flex; align-items: center; gap: 7px; }
.lobby-filters .filter-chip span { min-width: 18px; padding: 1px 5px; border-radius: 5px; background: rgba(126, 191, 255, .14); color: var(--muted-2); font-size: 9px; font-weight: 900; }
.lobby-filters .filter-chip.active span { background: rgba(4, 24, 14, .22); color: #062b18; }

/* The lobby filter is one segmented control, not three loose chips: a single dark track
   with the active segment filled, so ALL GAMES / DUEL / LIVE read as one switch. */
.section-filters.lobby-filters {
  display: flex; flex-wrap: nowrap; gap: 2px; width: max-content; max-width: 100%;
  margin: 0 auto 22px; padding: 4px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: rgba(3, 16, 30, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 26px rgba(0, 0, 0, .3);
}
.section-filters.lobby-filters .filter-chip {
  min-width: 118px; height: 36px; padding: 0 16px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--muted);
}
.section-filters.lobby-filters .filter-chip:hover { color: var(--text); background: rgba(126, 191, 255, .07); border-color: transparent; }
.section-filters.lobby-filters .filter-chip.active {
  color: #05210f; border-color: transparent;
  background: linear-gradient(180deg, var(--mint), var(--green));
  box-shadow: 0 4px 14px rgba(74, 222, 128, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.section-filters.lobby-filters .filter-chip span { background: rgba(126, 191, 255, .1); color: var(--muted-2); }
.section-filters.lobby-filters .filter-chip.locked { opacity: .55; gap: 6px; }
/* The lobby's sort control: its own pill to the right of the segment, reading
   "SORT · DEFAULT" or "SORT · BY ONLINE" with a live dot and the players icon. */
#homeGames { position: relative; }
.lobby-tools { display: flex; justify-content: center; margin: -10px 0 18px; }
.lobby-sort {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 11px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(3, 16, 30, .9);
  color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lobby-sort:hover { border-color: rgba(126, 191, 255, .35); color: var(--text); }
.lobby-sort .lobby-sort-text { color: var(--muted-2); transition: color .15s ease; }
/* the switch: a grey track with a knob that slides right and turns green when it is on */
.lobby-switch { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(126, 191, 255, .14); border: 1px solid rgba(126, 191, 255, .18); transition: background .18s ease, border-color .18s ease; }
.lobby-switch i { position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), background .18s ease, box-shadow .18s ease; }
.lobby-sort .lobby-sort-state { min-width: 22px; font-family: var(--display); font-size: 9.5px; letter-spacing: .04em; color: var(--muted-2); transition: color .15s ease; }
.lobby-sort.on { border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .09); }
.lobby-sort.on .lobby-sort-text { color: var(--text); }
.lobby-sort.on .lobby-switch { background: rgba(74, 222, 128, .28); border-color: rgba(74, 222, 128, .55); }
.lobby-sort.on .lobby-switch i { transform: translateX(12px); background: var(--green); box-shadow: 0 0 8px var(--green); }
.lobby-sort.on .lobby-sort-state { color: var(--mint); }
@media (min-width: 900px) {
  .lobby-tools { position: absolute; right: 0; top: 4px; margin: 0; }
}
.section-filters.lobby-filters .filter-chip.locked svg { width: 11px; height: 11px; }
.section-filters.lobby-filters .filter-chip.active span { background: rgba(4, 24, 14, .22); color: #062b18; }
@media (max-width: 720px) {
  .section-filters.lobby-filters { display: flex; width: 100%; }
  .section-filters.lobby-filters .filter-chip { flex: 1; min-width: 0; padding: 0 6px; font-size: 9px; white-space: nowrap; gap: 5px; }
}

/* Sign-in countdown: the player must be able to see the code dying. */
.minecraft-timer { margin-top: 8px; text-align: center; color: var(--muted-2); font-size: 10.5px; font-weight: 700; }
.minecraft-timer strong { font-family: var(--display); font-size: 13px; color: var(--text); }
.minecraft-timer.urgent strong { color: #f87171; }

/* Clicking anyone in chat opens their card. */
.chat-profile-open { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.chat-name-button { color: inherit; font-weight: 900; letter-spacing: inherit; }
.chat-name-button:hover { text-decoration: underline; }
.chat-profile-open:hover .tiny-avatar { outline: 1px solid rgba(74, 222, 128, .6); outline-offset: 1px; }
.player-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.player-card-avatar .tiny-avatar { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 12px; background: transparent; font-size: 18px; }
.player-card-head h2 { margin: 0; font-size: 19px; }
.player-card-head small { color: var(--muted-2); font-size: 10.5px; }
.player-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.player-stat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(126, 191, 255, .05); }
.player-stat.wide { grid-column: 1 / -1; }
.player-stat small { display: block; color: var(--muted-2); font-size: 8.5px; font-weight: 900; letter-spacing: .12em; }
.player-stat strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 15px; }

/* ===================================================================
   Topbar, signed in.
   The signed-out bar ends in a narrow SIGN IN button; the signed-in one carries the
   balance pill and the account chip and is roughly 250px wider. The nav cluster is
   flex: 0 1 auto with min-width: 0, so when the room runs out it shrinks below its
   content and the items spill out over the account block - visible, overlapping and
   unclickable. Rather than clip the cluster (which would cut off the Games dropdown),
   the bar gives ground earlier: first the wordmark, then the items that are reachable
   from the footer or the account menu, then the whole nav folds into the menu button.
   =================================================================== */
@media (max-width: 1560px) {
  body.is-signed-in .brand-copy { display: none; }
}
@media (max-width: 1440px) {
  body.is-signed-in .nav-cluster:not(.mobile-open) .nav-item[data-route="promo"] { display: none; }
}
@media (max-width: 1330px) {
  body.is-signed-in .nav-cluster:not(.mobile-open) .nav-item[data-route="leaderboard"] { display: none; }
}
@media (max-width: 1240px) {
  body.is-signed-in .nav-cluster:not(.mobile-open) .nav-item[data-route="wallet"] { display: none; }
  body.is-signed-in .live-indicator, body.is-signed-in .live-pill { display: none; }
}
@media (max-width: 1160px) {
  body.is-signed-in .nav-cluster:not(.mobile-open) .nav-item[data-route="referrals"] { display: none; }
}
@media (max-width: 1080px) {
  body.is-signed-in .nav-cluster:not(.mobile-open) .nav-item[data-route="rewards"] { display: none; }
}
/* Last resort: fold the whole nav away well before the items could reach the account
   block. Everything is still in the menu button, so nothing becomes unreachable. */
@media (max-width: 1020px) {
  body.is-signed-in .nav-cluster { display: none; }
  body.is-signed-in .mobile-menu { display: grid; }
}

/* With the chat pinned the bar is 300px narrower than the window, so the same ladder
   runs 300px earlier. Without this the items spilled over the Discord/sound/balance
   block between ~1000 and ~1350px. */
@media (min-width: 1025px) and (max-width: 1860px) { body.chat-pinned .brand-copy { display: none; } }
@media (min-width: 1025px) and (max-width: 1740px) { body.chat-pinned .nav-cluster:not(.mobile-open) .nav-item[data-route="promo"] { display: none; } }
@media (min-width: 1025px) and (max-width: 1630px) { body.chat-pinned .nav-cluster:not(.mobile-open) .nav-item[data-route="leaderboard"] { display: none; } }
@media (min-width: 1025px) and (max-width: 1540px) { body.chat-pinned .live-indicator, body.chat-pinned .live-pill { display: none; } }
@media (min-width: 1025px) and (max-width: 1460px) { body.chat-pinned .nav-cluster:not(.mobile-open) .nav-item[data-route="referrals"] { display: none; } }
@media (min-width: 1025px) and (max-width: 1380px) { body.chat-pinned .nav-cluster:not(.mobile-open) .nav-item[data-route="rewards"] { display: none; } }
@media (min-width: 1025px) and (max-width: 1320px) {
  body.chat-pinned .nav-cluster { display: none; }
  body.chat-pinned .mobile-menu { display: grid; }
  body.chat-pinned #navDiscord { display: none !important; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  body.chat-pinned #soundToggle, body.chat-pinned #blurNameToggle { display: none !important; }
}

/* Below this the bar is down to the essentials: the Discord shortcut lives in the footer
   too, and dropping it is what keeps a whale's balance from pushing the bar off screen. */
@media (max-width: 620px) {
  #navDiscord { display: none !important; }
}

/* ===================================================================
   Reachability of the collapsed nav.
   The bar starts hiding items at 1460 (1440 signed in) but only folded completely at
   1080/1020, so between those widths Leaderboard, Wallet and Promo were hidden with no
   way to open them. The menu button now appears as soon as the FIRST item goes, and the
   dropdown it opens is no longer scoped to phone widths, so it works at any size.
   The selector outweighs `body.is-signed-in .nav-cluster { display: none }`.
   =================================================================== */
@media (max-width: 1460px) {
  .mobile-menu { display: grid; }
}
.topbar .nav-cluster.mobile-open {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  position: absolute; top: var(--nav-height); left: 0; right: 0;
  margin: 0; padding: 12px 18px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--shadow); z-index: 50;
  max-height: calc(100vh - var(--nav-height)); overflow-y: auto;
}
.topbar .nav-cluster.mobile-open .nav-item { justify-content: flex-start; height: 40px; }
.topbar .nav-cluster.mobile-open .games-dropdown { display: block; }
.topbar .nav-cluster.mobile-open .games-menu { position: static; width: auto; margin-top: 6px; box-shadow: none; }

/* ===================================================================
   Phones: one row - logo, wallet / sign in, burger. Every nav item lives behind the
   burger (.mobile-open), and the bar's small extras (live count, Discord, sound, nick
   blur, the square Home) step aside; Home is the logo. The `!important`s override the
   staged-hiding cascade above, which is more specific than anything sane here.
   =================================================================== */
@media (max-width: 1020px) {
  .topbar { height: var(--nav-height); padding: 0 12px; gap: 8px; flex-wrap: nowrap; }
  /* The left group dissolves so its children sit directly on the bar and can be ordered. */
  .topbar-left { display: contents; }
  .brand { order: 1; margin-right: auto; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small { display: none; }
  .nav-home { display: none !important; }
  .topbar-actions { order: 2; margin-left: 0; gap: 8px; }
  .mobile-menu { display: grid !important; order: 3; }
  .live-indicator, .live-pill, #navDiscord, #soundToggle, #blurNameToggle { display: none !important; }
  .balance-pill { height: 38px; padding: 3px 3px 3px 8px; gap: 7px; }
  .balance-copy { min-width: 0; }
  .balance-copy small { display: none; }
  .balance-copy strong { font-size: 12px; margin-top: 0; }
  .balance-plus { height: 30px; width: 30px; }
  .top-login { height: 36px; padding: 0 12px; font-size: 10px; }
  .account-chip { padding: 3px 8px 3px 3px; }
  .account-chip .account-name { display: none; }

  /* Closed: nothing on the bar. Open: a full-width sheet under it. */
  .topbar .nav-cluster:not(.mobile-open), body.is-signed-in .topbar .nav-cluster:not(.mobile-open) { display: none !important; }
  .topbar .nav-cluster.mobile-open .nav-item { display: flex !important; height: 44px; font-size: 12px; }
  .topbar .nav-cluster.mobile-open .games-dropdown { flex: 0 0 auto; display: block; }
  .topbar .nav-cluster.mobile-open #gamesToggle { width: 100%; }
  .topbar .nav-cluster.mobile-open .games-menu {
    position: static; width: auto; margin-top: 6px; box-shadow: none;
    max-height: none;
  }
  .games-mega { flex-direction: column; gap: 12px; }
  .games-mega-col { padding: 0; }
  .games-mega-col + .games-mega-col { border-left: none; border-top: 1px solid var(--line); padding-top: 12px; }
  .games-mega-all .games-mega-list, .games-mega-duel .games-mega-list, .games-mega-live .games-mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The dock hangs off the bar, which is now two rows tall. */
  .chat-dock { top: var(--topbar-h, var(--nav-height)); }
}

/* No mask/filter on the strip: either would make it a containing block and clip the
   Games dropdown, even though that dropdown is position: fixed. The item cut off at the
   right edge is the affordance that there is more to swipe.  */

/* ===================================================================
   Level tiers.
   One set of `.tier-*` rules drives every badge - chat, the hero, the leaderboard and
   the profile card - so a level looks the same wherever it appears. They get richer as
   they climb: flat stone, then metal, then a glow, and Netherite finally moves.
   =================================================================== */
.level-chip, .chat-level, .welcome-level {
  display: inline-grid; place-items: center;
  font-weight: 900; font-variant-numeric: tabular-nums; font-style: normal;
  border: 1px solid transparent;
}
.level-chip {
  min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 10px;
}
.chat-level {
  min-width: 18px; height: 15px; margin-right: 5px; padding: 0 4px;
  border-radius: 4px; font-size: 8px; vertical-align: middle;
}
.welcome-level, .welcome-avatar .welcome-level.tier-netherite {
  position: absolute; right: -8px; bottom: -8px; z-index: 2;
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: 8px; font-size: 10.5px;
  border: 2px solid #071120; box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}

/* Stone - the starting tier, deliberately plain so climbing out of it reads as progress. */
.tier-stone { background: linear-gradient(180deg, #98a5b3, #6c7885); color: #10161c; border-color: rgba(255,255,255,.14); }
/* Iron */
.tier-iron { background: linear-gradient(180deg, #e6eef6, #a7bacb); color: #10161c; border-color: rgba(255,255,255,.3); }
/* Gold */
.tier-gold { background: linear-gradient(180deg, #ffe393, #f5b301); color: #2a1a00; border-color: rgba(255, 227, 147, .5); box-shadow: 0 0 10px rgba(245, 179, 1, .3); }
/* Diamond - the first tier that glows, and the first that is marked in chat. */
.tier-diamond { background: linear-gradient(180deg, #b8f6ff, #22d3ee); color: #04252b; border-color: rgba(165, 243, 252, .6); box-shadow: 0 0 12px rgba(34, 211, 238, .45); }
/* Emerald */
.tier-emerald { background: linear-gradient(180deg, #9df8c0, #10b981); color: #032516; border-color: rgba(134, 239, 172, .6); box-shadow: 0 0 14px rgba(16, 185, 129, .5); }
/* Netherite - the only animated one. Nobody has reached it yet; that is the point. */
.tier-netherite {
  background: linear-gradient(180deg, #6d5b74, #241d28);
  color: #ffd9f2; border-color: rgba(255, 141, 214, .65);
  box-shadow: 0 0 14px rgba(196, 89, 168, .55), inset 0 0 8px rgba(255, 200, 240, .25);
  position: relative; overflow: hidden;
}
.tier-netherite::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 214, 245, .75) 50%, transparent 65%);
  animation: tier-shine 2.6s ease-in-out infinite;
}
@keyframes tier-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .tier-netherite::after { animation: none; opacity: .25; } }

/* The profile card badge is bigger, so it carries the tier as a block of colour. */
.level-badge.tier-stone { background: linear-gradient(180deg, #98a5b3, #6c7885); color: #10161c; }
.level-badge.tier-iron { background: linear-gradient(180deg, #e6eef6, #a7bacb); color: #10161c; }
.level-badge.tier-gold { background: linear-gradient(180deg, #ffe393, #f5b301); color: #2a1a00; }
.level-badge.tier-diamond { background: linear-gradient(180deg, #b8f6ff, #22d3ee); color: #04252b; }
.level-badge.tier-emerald { background: linear-gradient(180deg, #9df8c0, #10b981); color: #032516; }
.level-badge.tier-netherite { background: linear-gradient(180deg, #6d5b74, #241d28); color: #ffd9f2; }

/* -------------------------------------------------- chat, from Diamond up ---
   A ranked line gets a tinted panel and an accent edge so it stands out while the room
   scrolls, without shouting over the message itself. */
.chat-line.ranked {
  padding: 6px 8px 6px 7px; margin-left: -2px;
  border-left: 2px solid var(--tier-accent, var(--green));
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, var(--tier-wash, rgba(74,222,128,.10)), transparent 78%);
}
.chat-line.ranked .chat-name { color: var(--tier-accent, var(--green)); }
.chat-line.ranked.ctier-diamond { --tier-accent: #22d3ee; --tier-wash: rgba(34, 211, 238, .13); }
.chat-line.ranked.ctier-emerald { --tier-accent: #34d399; --tier-wash: rgba(16, 185, 129, .13); }
.chat-line.ranked.ctier-netherite { --tier-accent: #ff8dd6; --tier-wash: rgba(196, 89, 168, .16); }

/* ===================================================================
   Referral tiers.
   The ladder is Sprinkle -> Glazed -> Frosted -> Golden -> Legendary, and each rung now
   carries a colour that matches its name: green, silver, ice, gold, and a legendary
   purple that shines. Locked rungs keep the existing .55 opacity, so the colour reads as
   a preview of what is coming rather than something already earned.
   =================================================================== */
.tier-card { border-color: var(--rtier-line, var(--line)); }
.tier-card .tier-name { color: var(--rtier, var(--amber)); }
.tier-card strong { color: var(--rtier-strong, var(--text)); }
.tier-card.unlocked { background: linear-gradient(160deg, var(--rtier-wash, transparent), transparent 70%), var(--panel-2); }
/* The "you are here" ring follows the tier colour instead of always being green. */
.tier-card.current { border-color: var(--rtier, var(--green)); box-shadow: 0 0 0 1px var(--rtier-glow, rgba(74, 222, 128, .3)); }

.rtier-sprinkle  { --rtier: #4ade80; --rtier-strong: #bdf5d3; --rtier-line: rgba(74, 222, 128, .35); --rtier-wash: rgba(74, 222, 128, .10); --rtier-glow: rgba(74, 222, 128, .3); }
.rtier-glazed    { --rtier: #dbe6f0; --rtier-strong: #f2f7fc; --rtier-line: rgba(219, 230, 240, .38); --rtier-wash: rgba(219, 230, 240, .10); --rtier-glow: rgba(219, 230, 240, .28); }
.rtier-frosted   { --rtier: #7dd3fc; --rtier-strong: #d8f3ff; --rtier-line: rgba(125, 211, 252, .40); --rtier-wash: rgba(56, 189, 248, .12); --rtier-glow: rgba(56, 189, 248, .3); }
.rtier-golden    { --rtier: #ffd98a; --rtier-strong: #ffe9b8; --rtier-line: rgba(245, 179, 1, .45); --rtier-wash: rgba(245, 179, 1, .12); --rtier-glow: rgba(245, 179, 1, .32); }
.rtier-legendary { --rtier: #f0a6ff; --rtier-strong: #ffdcff; --rtier-line: rgba(224, 132, 255, .48); --rtier-wash: rgba(196, 89, 240, .14); --rtier-glow: rgba(196, 89, 240, .35); }

/* Only the top rung moves, and only once it is actually unlocked. */
.tier-card.rtier-legendary.unlocked { position: relative; overflow: hidden; }
.tier-card.rtier-legendary.unlocked::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 214, 255, .30) 50%, transparent 62%);
  animation: rtier-shine 3.4s ease-in-out infinite;
}
@keyframes rtier-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .tier-card.rtier-legendary.unlocked::after { animation: none; opacity: .18; } }

/* Explains the three payout actions right where they are used. */
.admin-note { padding: 10px 20px 16px; color: var(--muted-2); font-size: 10px; line-height: 1.6; }

/* The failure note is a full sentence from the game server and was dragging the held
   payouts table past the panel, which put a scrollbar under it. Clip it and keep the
   whole message on hover; the action buttons must never be the thing that gets cut. */
.admin-why { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-actions { white-space: nowrap; }

/* ------------------------------------------------- the operator in chat ---
   An operator posts under the house alias, so their line is the one voice in the room
   that carries authority - a moderation notice or an answer from the site. It gets the
   same panel treatment as a ranked player, but in gold and with a crown, so nobody has
   to guess whether a message is official. */
.chat-line.bot {
  padding: 6px 8px 6px 7px; margin-left: -2px;
  border-left: 2px solid #f5b301;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(245, 179, 1, .14), transparent 78%);
}
.chat-line.bot .chat-name { color: #ffe27a; text-shadow: 0 0 14px rgba(245, 179, 1, .35); }
.chat-line.bot .chat-body { color: #f3e6c8; }
.chat-tag { display: inline-flex; align-items: center; gap: 3px; }
.chat-tag svg { width: 9px; height: 9px; }

/* ------------------------------------------------ the live bet feed ---
   Rows used to be a uniform wall of text, so nothing separated a win from a loss or
   one game from the next. Each row now carries a colour edge in its game's colour and
   a win/loss tint, and the player's own rounds are marked. */
/* A real element rather than a pseudo-element fed by an inherited custom property: the
   old version depended on --game-dot reaching ::before, which is exactly the sort of
   thing that renders inconsistently on a row that was just swapped in. */
.feed-row td:first-child { position: relative; }
.feed-dash {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; opacity: .85;
}
/* Game names jump straight to the game, so they must look clickable. */
.game-link { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; }
.game-link:hover { color: var(--mint); text-decoration: underline; }
.feed-row:nth-child(even) { background: rgba(126, 191, 255, .028); }
.feed-win  { box-shadow: inset 3px 0 0 -1px rgba(74, 222, 128, .0); }
.feed-win  td:nth-last-child(1) { color: var(--green); font-weight: 800; }
.feed-loss td:nth-last-child(1) { color: #86a0b8; }
/* Feed nicknames carry the colour the player has in chat, so the same person reads the
   same in both places: amber by default, the tier accent from Diamond up, green for your
   own rows. Order matters and mirrors chat - the tier accent wins over "mine", so a
   Diamond player still shows as Diamond on their own lines. */
.feed-row .player-name { color: var(--amber); font-weight: 800; }
.feed-mine .player-name { color: var(--green); }
.feed-row .ntier-diamond .player-name { color: #22d3ee; }
.feed-row .ntier-emerald .player-name { color: #34d399; }
.feed-row .ntier-netherite .player-name { color: #ff8dd6; }

/* The stake, shown under the payout preview with the coin so it is unmistakable. */
.bet-stake {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(126, 191, 255, .05);
}
.bet-stake[hidden] { display: none; }
.bet-stake span { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.bet-stake strong { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 14px; color: var(--text); }
.coin-inline { width: 15px; height: 15px; }

/* Clickable player cells - they behave like buttons, so they must not inherit the
   default button chrome that would box every name on the site. */
.player-open {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; text-align: left; border-radius: 6px;
}
/* only the name lights up on hover - the level chip keeps its tier colour so it stays readable */
.player-open:hover .player-name { color: var(--mint); }
.player-open:hover .tiny-avatar, .player-open:hover .podium-avatar { outline: 1px solid rgba(74, 222, 128, .55); }
.podium-open { display: block; margin: 0 auto; }

/* ------------------------------------------------------------ leaderboard v2 ---
   A real podium (gold / silver / bronze, #1 taller in the middle), one row of two
   segmented controls, a dense table and a pinned "you" row. */
.lb-heading { margin-bottom: 18px; }
.lb-heading p { max-width: 560px; }
.lb-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 26px; }
.lb-controls .lb-seg { margin: 0; }
.lb-controls .lb-seg .filter-chip { min-width: 0; padding: 0 16px; height: 34px; font-size: 10px; }
.lb-controls .lb-seg .filter-chip.active { background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 55%, #ffffff), var(--page-accent)); box-shadow: 0 4px 14px var(--page-accent-soft), inset 0 1px 0 rgba(255, 255, 255, .45); color: #2b1300; }

.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; margin: 0 auto 22px; max-width: 860px; }
.lb-podium-card {
  --medal: #cfe0ee; --medal-deep: #7d92a8; --medal-glow: rgba(207, 224, 238, .28);
  position: relative; padding: 22px 14px 0; text-align: center;
  border: 1px solid color-mix(in srgb, var(--medal) 32%, transparent); border-radius: 16px 16px 0 0;
  background: radial-gradient(70% 60% at 50% 0%, var(--medal-glow), transparent 70%), linear-gradient(180deg, rgba(8, 32, 54, .96), rgba(4, 18, 32, .98));
  overflow: hidden;
}
.lb-podium-card.p1 { --medal: #ffd76a; --medal-deep: #b7791f; --medal-glow: rgba(255, 215, 106, .32); }
.lb-podium-card.p3 { --medal: #e0a878; --medal-deep: #8a5a32; --medal-glow: rgba(224, 168, 120, .28); }
.lb-podium-card.p1 { padding-top: 30px; }
.lb-medal {
  position: relative; width: 44px; height: 44px; margin: 0 auto 12px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(160deg, var(--medal), var(--medal-deep));
  color: #101418; font-family: var(--display); font-size: 16px;
  box-shadow: 0 0 0 3px rgba(4, 18, 32, .9), 0 0 0 4px color-mix(in srgb, var(--medal) 50%, transparent), 0 8px 22px var(--medal-glow);
}
.lb-medal svg { position: absolute; top: -20px; left: 50%; width: 24px; height: 24px; transform: translateX(-50%); color: var(--medal); filter: drop-shadow(0 0 8px var(--medal-glow)); }
.lb-podium-card.p1 .lb-medal { width: 52px; height: 52px; font-size: 19px; }
.lb-podium-open { display: block; margin: 0 auto; }
.lb-podium-avatar { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #16a34a, #4ade80); color: #062b18; font-family: var(--display); font-size: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal) 60%, transparent), 0 10px 24px rgba(0, 0, 0, .45); }
.lb-podium-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.lb-podium-card.p1 .lb-podium-avatar { width: 96px; height: 96px; border-radius: 18px; }
.lb-podium-card h3 { margin: 0 0 8px; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium-card.p1 h3 { font-size: 16px; }
.lb-podium-level { margin-bottom: 10px; }
.lb-podium-card strong { display: block; font-family: var(--display); font-size: 15px; color: var(--medal); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px var(--medal-glow); }
.lb-podium-card.p1 strong { font-size: 19px; }
.lb-podium-card small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; }
.lb-step { height: 34px; margin-top: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 28%, transparent), color-mix(in srgb, var(--medal) 10%, transparent)); border-top: 1px solid color-mix(in srgb, var(--medal) 55%, transparent); }
.lb-podium-card.p1 .lb-step { height: 58px; }
.lb-podium-card.p3 .lb-step { height: 24px; }

.lb-panel { padding: 0; overflow: hidden; }
.lb-table { table-layout: fixed; }
.lb-table th:nth-child(1), .lb-table td:nth-child(1) { width: 64px; }
.lb-table th:nth-child(3), .lb-table td:nth-child(3) { width: 24%; text-align: right; }
.lb-table th:nth-child(4), .lb-table td:nth-child(4) { width: 24%; text-align: right; }
.lb-table td { padding-top: 9px; padding-bottom: 9px; }
.lb-rank span { font-family: var(--display); font-size: 12px; color: var(--muted-2); }
.lb-table tr.top-ten .lb-rank span { color: var(--text); }
.lb-table .player-cell { gap: 9px; }
.lb-row-level { margin-left: 8px; }
.lb-table .lb-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-table .lb-value .amount-cell { justify-content: flex-end; }
.lb-table .lb-sub { font-size: 10.5px; }
.lb-table tr.is-me td { background: var(--page-accent-soft); }
.lb-table tr.is-me .lb-rank span { color: var(--page-accent); }
.lb-me { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--page-accent) 40%, transparent); background: linear-gradient(90deg, var(--page-accent-soft), transparent 70%); }
.lb-me-kicker { flex: 0 0 auto; padding: 4px 8px; border-radius: 6px; background: var(--page-accent); color: #2b1300; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.lb-me-table { flex: 1; }
.lb-me-table td { background: transparent !important; border: 0; }
.lb-me-empty { font-size: 11px; }
@media (max-width: 760px) {
  .lb-controls { flex-direction: column; align-items: stretch; }
  .lb-controls .lb-seg { display: flex; width: 100%; }
  .lb-controls .lb-seg .filter-chip { flex: 1; padding: 0 6px; }
  .lb-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lb-podium-card { padding: 14px 6px 0; }
  .lb-podium-card.p1 .lb-podium-avatar { width: 64px; height: 64px; }
  .lb-podium-avatar { width: 48px; height: 48px; }
  .lb-podium-card strong { font-size: 11px; }
  .lb-podium-card.p1 strong { font-size: 13px; }
  .lb-podium-card h3 { font-size: 11px; }
  .lb-table th:nth-child(4), .lb-table td:nth-child(4) { display: none; }
  .lb-table th:nth-child(3), .lb-table td:nth-child(3) { width: 34%; }
}

/* Cash out is the one control a player needs to find in a hurry, so it stops being a
   muted secondary button and reads as gold the moment it appears. */
.cashout-button {
  color: #2a1a00 !important;
  background: linear-gradient(180deg, #ffe393, #f5b301) !important;
  border-color: rgba(250, 204, 21, .7) !important;
  box-shadow: 0 6px 20px rgba(245, 179, 1, .32);
  font-weight: 900;
}
.cashout-button:hover { background: linear-gradient(180deg, #fff0c2, #ffc93c) !important; }
.cashout-button:disabled { opacity: .45; box-shadow: none; }

/* A bet waiting for the next round. Deliberately not the gold cash-out look - nothing has
   been charged yet, and pressing it again takes the bet back. */
.queued-bet {
  background: rgba(126, 191, 255, .1) !important;
  border-color: rgba(86, 184, 245, .55) !important;
  color: var(--cyan) !important;
}
.queued-bet:hover { background: rgba(126, 191, 255, .18) !important; }

/* ---------------------------------------------------- per-page accent, part 2 ---
   These have to come last: each one beats an earlier rule of the same specificity that
   hardcodes the site green, so source order is what decides them. */
.section-banner::before, .section-banner::after {
  background: linear-gradient(90deg, transparent, var(--page-accent), transparent);
  opacity: .45;
}
.section-banner span {
  color: #05131d;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 52%, #ffffff), var(--page-accent));
}
.reward-kicker, .panel-heading h3 { color: var(--page-accent); }
/* 2. Wallet, History, Profile and the console use .page-head, not .page-heading, so the
      accent never reached their titles. */
.page-head h1 { color: var(--page-accent); }
/* The active chip on a page follows that page's colour rather than always being green. */
.filter-chip.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 55%, #ffffff), var(--page-accent));
  color: #06131f;
}
/* Leaderboard, wallet and the game pages have no .page-heading, so the wash is attached
   to their first banner instead - every route gets some of its own colour. */
.page > .section-banner:first-child { position: relative; }
.page > .section-banner:first-child::marker { content: none; }

/* ---------------------------------------------------------- operator console ---
   The bot card and the event feed sit side by side above the money tiles. */
.admin-top { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
@media (max-width: 900px) { .admin-top { grid-template-columns: 1fr; } }
.bot-card { padding: 18px 20px; }
.bot-card.offline { opacity: .85; }
.bot-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bot-head strong { font-size: 13px; }
.bot-head small { color: var(--muted-2); font-size: 10px; }
.bot-card.offline .bot-head strong { color: var(--muted); }
.bot-balance { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 14px 0 12px; }
.bot-balance img { width: 22px; height: 22px; align-self: center; }
.bot-balance strong { font-family: var(--display); font-size: 24px; color: #ffe9a6; letter-spacing: .02em; }
.bot-card.offline .bot-balance strong { color: var(--muted); }
.bot-balance small { flex-basis: 100%; color: var(--muted-2); font-size: 10px; }
.bot-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bot-facts li { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.bot-facts span { color: var(--muted-2); }
.bot-facts strong { color: var(--text); text-align: right; font-weight: 700; }
.admin-bank-float { display: grid; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-bank-float .field-label { color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-bank-float-row { display: flex; align-items: center; gap: 8px; }
.admin-bank-float-row .text-input { min-width: 0; min-height: 38px; font-variant-numeric: tabular-nums; }
.admin-bank-float-row .primary-button { min-height: 38px; flex: 0 0 auto; padding-inline: 12px; font-size: 10px; }
.admin-bank-float .muted { line-height: 1.5; }
.admin-console-panel { min-width: 0; }
.admin-console { max-height: 340px; overflow-y: auto; }
.admin-console .table td { padding: 8px 14px; }
.console-tag { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 8.5px; font-weight: 900; letter-spacing: .1em; border: 1px solid var(--line); color: var(--muted); }
.console-deposit .console-tag { color: #86efac; border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); }
.console-payout .console-tag { color: #fca5a5; border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .1); }
.console-payout.console-failed .console-tag, .console-payout.console-rejected .console-tag { color: #ffd98a; border-color: rgba(245, 179, 1, .45); background: rgba(245, 179, 1, .12); }
.console-signup .console-tag { color: #9fd4ff; border-color: rgba(86, 184, 245, .4); background: rgba(86, 184, 245, .1); }

/* --------------------------------------------------- operator player search ---
   The Players section is a search box over a results table now, with a detail card. */
.player-search { position: relative; margin-bottom: 12px; }
.player-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted-2); pointer-events: none; }
.player-search-icon svg { width: 100%; height: 100%; }
.player-search .text-input { padding-left: 34px; }
.admin-player-row { cursor: pointer; }
.admin-player-row:hover td { background: rgba(126, 191, 255, .06); }
.admin-player-row td:last-child { text-align: right; color: var(--muted-2); }
.admin-player-row td:last-child svg { width: 13px; height: 13px; vertical-align: middle; margin-left: 4px; opacity: .6; }

.player-card-modal { max-width: 720px; width: 100%; }
.pcard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pcard-avatar .tiny-avatar { width: 46px; height: 46px; border-radius: 10px; }
.pcard-head h2 { margin: 0 0 4px; font-size: 18px; }
.pcard-head small { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .pcard-grid { grid-template-columns: repeat(2, 1fr); } }
.pcard-stat { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.pcard-stat span { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pcard-stat strong { display: block; margin-top: 4px; font-size: 15px; }
.pcard-security { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.pcard-security h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.pcard-security p { margin: 0; font-size: 11px; }
.pcard-actions { margin-bottom: 16px; }
.pcard-tables h4 { margin: 14px 0 8px; font-size: 11px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.pcard-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .pcard-two { grid-template-columns: 1fr; } }
.pcard-scroll { max-height: 200px; overflow-y: auto; }
.pcard-scroll .table td { padding: 7px 12px; font-size: 10.5px; }
.wstatus { padding: 1px 7px; border-radius: 5px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.wstatus-completed { color: #86efac; background: rgba(74, 222, 128, .12); }
.wstatus-pending, .wstatus-processing { color: #ffd98a; background: rgba(245, 179, 1, .12); }
.wstatus-failed, .wstatus-rejected { color: #fca5a5; background: rgba(248, 113, 113, .12); }
.wstatus-closed { color: var(--muted); background: rgba(126, 191, 255, .08); }

/* Neutral avatar for a player whose nick is hidden - no skin fetch, just the kept initial. */
.avatar-hidden { display: inline-flex; align-items: center; justify-content: center; background: rgba(126, 191, 255, .12); color: var(--muted); font-weight: 900; }

/* Personal "hide my nick" toggle: masks the viewer's own name with stars in their view. */
.blur-name-toggle.active { color: var(--amber); border-color: rgba(245, 179, 1, .5); background: rgba(245, 179, 1, .12); }

/* Signup bonus callouts on the sign-in hero and the auth modal. */
.signup-bonus-badge { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(245, 179, 1, .5); background: rgba(245, 179, 1, .12); color: #ffe9a6; font-size: 12px; font-weight: 800; }
.signup-bonus-badge svg { width: 14px; height: 14px; }
.signup-bonus-badge strong { color: #fff; }
.auth-bonus { display: flex; align-items: center; gap: 11px; margin: 4px 0 16px; padding: 12px 15px; border-radius: 12px; border: 1px solid rgba(245, 179, 1, .4); background: linear-gradient(120deg, rgba(245, 179, 1, .14), transparent 70%), rgba(5, 11, 18, .94); color: var(--text); font-size: 12.5px; line-height: 1.5; }
.auth-bonus svg { width: 20px; height: 20px; color: var(--amber); flex: 0 0 auto; }
.auth-bonus strong { color: #ffe9a6; }
.auth-bonus-note { color: var(--muted); font-size: 11px; }

/* Legal framing in the footer. */
.footer-disclaimer { color: var(--muted); }
.footer-disclaimer strong { color: var(--text); }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.footer-badges span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

/* Home promo strip: the single loudest offer, full width under the hero. */
.promo-strip { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 20px; padding: 14px 20px; border: 1px solid rgba(245, 179, 1, .45); border-radius: var(--radius); background: linear-gradient(100deg, rgba(245, 179, 1, .16), rgba(74, 222, 128, .10) 60%, transparent); color: var(--text); text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.promo-strip:hover { transform: translateY(-2px); border-color: rgba(245, 179, 1, .7); box-shadow: 0 14px 34px rgba(245, 179, 1, .18); }
.promo-strip-glow { position: absolute; inset: -40% -20% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(245, 179, 1, .22), transparent 70%); pointer-events: none; }
.promo-strip-main { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; position: relative; }
.promo-strip-main svg { width: 18px; height: 18px; color: var(--amber); flex: 0 0 auto; }
.promo-strip-main strong { color: #ffe9a6; font-family: var(--display); font-size: 13px; letter-spacing: .02em; }
.promo-strip-cta { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; border-radius: 10px; background: linear-gradient(180deg, #ffe393, #f5b301); color: #2a1a00; font-weight: 900; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; position: relative; }
.promo-strip-cta svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .promo-strip { flex-direction: column; align-items: flex-start; gap: 10px; } .promo-strip-main { font-size: 12px; } }

/* ---------------------------------------------------- pinned left chat ---
   On desktop the chat is a persistent left column and the page content shifts right to
   make room. Collapsing it (the header arrow) drops the class, re-centres the content, and
   brings back the floating open button. Mobile keeps the old slide-in overlay untouched. */
@media (min-width: 1025px) {
  body.chat-pinned .chat-dock {
    display: grid; left: 0; right: auto; top: var(--nav-height); bottom: 0; width: var(--chat-w);
    /* the head is hidden here, so the rows shift up by one: messages must stay the 1fr row */
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    transform: none; border-left: none; border-right: 1px solid var(--line);
    box-shadow: 10px 0 44px rgba(0, 6, 16, .38);
  }
  body.chat-pinned .main-shell { margin-left: var(--chat-w); }
  body.chat-pinned .chat-toggle { display: none; }
  .chat-close-mobile { display: none; }        /* the collapse arrow is used on desktop */
  /* The left cluster (logo + Home button) spans exactly the chat column, so its Home square
     lands on the chat's right edge and the nav begins just past the chat instead of hard
     against the logo. calc subtracts the 22px topbar padding so the zone ends at 300px. */
  body.chat-pinned .topbar-left { width: calc(var(--chat-w) - 22px); }
  body.chat-pinned .nav-home { margin-left: auto; }
}
/* Above 1141 nothing in the nav is hidden, so the menu button is redundant; hiding it while
   the chat is pinned frees the wordmark enough to fit inside the chat column and lets the
   Home square land exactly on the chat's right edge. Below that it stays for reachability. */
@media (min-width: 1141px) {
  body.chat-pinned .mobile-menu { display: none; }
}
@media (max-width: 1024px) {
  .chat-collapse { display: none; }             /* mobile uses the close button + overlay */
}
.chat-collapse svg { transform: rotate(180deg); }
.chat-online { color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: 0; margin-left: 4px; }

/* Rain bar at the top of the chat. Sits a touch below the header (margin-top) rather than
   butting straight against it, and reads as a raised, glowing panel. */
.chat-rain {
  display: flex; align-items: center; gap: 11px; margin: 14px 12px 10px; padding: 12px 14px;
  border: 1px solid rgba(74, 222, 128, .36); border-radius: 14px;
  background: linear-gradient(100deg, rgba(74, 222, 128, .2), rgba(47, 127, 208, .11));
  box-shadow: 0 8px 22px rgba(0, 22, 12, .4), inset 0 1px rgba(255, 255, 255, .06);
  cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.chat-rain:hover { border-color: rgba(74, 222, 128, .62); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 24, 14, .48), inset 0 1px rgba(255, 255, 255, .08); }
.chat-rain-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(74, 222, 128, .2); color: var(--green); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .25); }
.chat-rain-icon svg { width: 17px; height: 17px; }
.chat-rain-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.05; flex: 1 1 auto; min-width: 0; }
.chat-rain-info strong { color: #d6ffe6; font-family: var(--display); font-size: 15px; text-shadow: 0 0 9px rgba(74, 222, 128, .3); white-space: nowrap; }
.chat-rain-info small { color: var(--muted-2); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; }
/* Right block reserves its own width so the pot figure can never paint under the timer. */
.chat-rain-right { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: 8px; }
.chat-rain-timer { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.chat-rain-timer svg { width: 12px; height: 12px; }
.chat-rain-join { flex: 0 0 auto; padding: 4px 10px; border-radius: 7px; background: linear-gradient(180deg, var(--mint), var(--green)); color: #05210f; font-size: 10px; font-weight: 900; letter-spacing: .04em; }

/* ----------------------------------------------------------------- pig race ---
   Four mud lanes seen from the side, a gate on the left and a chequered post on the right.
   The runners are placed from the server's race script each frame, so every viewer sees the
   same race; the lane colour feeds the pig sprite through --pig. */
.pigs-top { position: relative; z-index: 2; margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7, 7, 15, .4); }
.pigs-top-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pigs-kicker { display: flex; align-items: center; gap: 6px; color: #c3b8e2; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.pigs-kicker svg { width: 13px; height: 13px; color: var(--purple); }
.pigs-top-head strong { display: block; margin-top: 3px; font-size: 11px; }
.pigs-history { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pigs-history-empty { color: var(--muted-2); font-size: 10px; }
.pigs-history { flex-wrap: nowrap; overflow: hidden; }
.pig-hist { flex: 0 0 auto; width: 42px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pig) 55%, transparent); background: color-mix(in srgb, var(--pig) 16%, transparent); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.pig-hist svg { width: 30px; height: 22px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.pig-hist:first-child { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 12px color-mix(in srgb, var(--pig) 70%, transparent); }
.game-board-pigrace .board-topline { display: none; }
.pigs-bets { margin: 14px 0 0; }
.pig-pill { --cbet: var(--pig); }
.pigs-stage { display: flex; flex-direction: column; gap: 12px; }
.pigs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pigs-pot { display: flex; flex-direction: column; gap: 2px; }
.pigs-pot small { color: var(--muted-2); font-size: 9px; letter-spacing: .14em; font-weight: 800; }
.pigs-pot strong { font-family: var(--display); font-size: 24px; color: #ffd98a; text-shadow: 0 0 16px rgba(245, 197, 66, .4); }
.pigs-pot span { color: var(--muted); font-size: 11px; }
.pigs-timer { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(126, 191, 255, .05); font-family: var(--display); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.board-status.pigs-racing { color: #ffd98a; border-color: rgba(245, 197, 66, .5); animation: lane-pulse 1s ease-in-out infinite; }
.board-status.pigs-result { color: #b8ffcf; }
.pig-track { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, #2a1d12, #1c130b); box-shadow: inset 0 0 30px rgba(0, 0, 0, .5); }
.pig-lane { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 10px; transition: background .25s ease, opacity .25s ease; }
.pig-lane.mine { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pig) 55%, transparent); }
.pig-lane.winner { background: color-mix(in srgb, var(--pig) 16%, transparent); }
.pig-lane.loser { opacity: .55; }
.lane-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lane-meta b { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 12px; color: var(--text); }
.lane-meta b::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--pig); box-shadow: 0 0 8px var(--pig); }
.lane-pool { color: var(--muted); font-size: 10.5px; }
.lane-odds { color: #ffd98a; font-family: var(--display); font-size: 11px; }
.lane-run { position: relative; height: 46px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 30px, transparent 30px 60px), linear-gradient(180deg, #6b4a2b, #5a3c20 60%, #4a3118); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .35); }
.start-gate { position: absolute; left: 6px; top: 4px; bottom: 4px; width: 3px; background: #cfd6e0; opacity: .6; }
.finish-post { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: repeating-conic-gradient(#e8edf5 0 25%, #10161f 0 50%) 0 0 / 12px 12px; opacity: .55; }
.finish-line { position: absolute; right: 22px; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(180deg, #fff 0 6px, #10161f 6px 12px); box-shadow: 0 0 10px rgba(255, 255, 255, .55); z-index: 1; }
.pig-runner { position: absolute; left: 0; bottom: 6px; width: 64px; height: 42px; transition: left .12s linear; will-change: left; z-index: 2; }
.pig-runner svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55)); }
.pig-runner .dust { position: absolute; left: -10px; bottom: 2px; width: 22px; height: 12px; border-radius: 50%; background: rgba(214, 190, 160, .45); opacity: 0; }
.pig-track.racing .pig-runner svg { animation: pig-gallop .28s ease-in-out infinite; }
.pig-track.racing .pig-runner .leg.a { animation: pig-leg .28s ease-in-out infinite; }
.pig-track.racing .pig-runner .leg.b { animation: pig-leg .28s ease-in-out infinite reverse; }
.pig-track.racing .pig-runner .dust { animation: pig-dust .5s ease-out infinite; }
@keyframes pig-gallop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-5deg); } }
@keyframes pig-leg { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px) translateY(-1px); } }
@keyframes pig-dust { 0% { opacity: .7; transform: translateX(0) scale(.6); } 100% { opacity: 0; transform: translateX(-22px) scale(1.6); } }
.pig-lane.winner .pig-runner svg { animation: chick-cheer .55s ease-in-out infinite; }
.pigs-outcome { min-height: 20px; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .3s ease; }
.pigs-outcome.show { opacity: 1; }
.pigs-outcome strong { color: var(--pig); font-family: var(--display); font-size: 13px; }
.pigs-outcome em { font-style: normal; font-weight: 800; }
.pigs-history { display: flex; gap: 5px; flex-wrap: wrap; }
.pig-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--pig); color: #10161f; font-family: var(--display); font-size: 10px; box-shadow: inset 0 -2px rgba(0, 0, 0, .25); }
.pigs-mine { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pigs-mine small { flex: 0 0 100%; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.pigs-mine span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pig) 50%, transparent); background: color-mix(in srgb, var(--pig) 12%, transparent); font-size: 11px; }
.pigs-mine span i { width: 8px; height: 8px; border-radius: 2px; background: var(--pig); }
.pigs-mine span b { font-family: var(--display); font-weight: 400; }
@media (max-width: 720px) { .pig-lane { grid-template-columns: 110px 1fr; } .lane-run { height: 38px; } .pig-runner { width: 52px; height: 34px; } }

/* -------------------------------------------------------------------- slots ---
   A casino cabinet: a raised brass header bar carrying the name, a dark lacquered body
   with a double brass trim, a marquee of chasing bulbs around the glass, chrome side
   pillars and a glass reflection over the reels. */
.slots-stage { display: flex; flex-direction: column; gap: 14px; padding-top: 34px; }
.slots-cabinet {
  position: relative; padding: 58px 26px 20px; border-radius: 24px;
  background:
    radial-gradient(120% 70% at 50% 0, rgba(255, 210, 120, .16), transparent 55%),
    linear-gradient(180deg, #1b1224, #0e0a14 60%, #150d1c);
  border: 1px solid rgba(255, 214, 120, .4);
  box-shadow:
    inset 0 0 0 3px #2a1d3a, inset 0 0 0 5px rgba(255, 214, 120, .6), inset 0 0 0 7px #2a1d3a,
    inset 0 0 70px rgba(0, 0, 0, .65),
    0 22px 50px rgba(0, 0, 0, .65), 0 0 46px rgba(245, 197, 66, .14);
}
/* header bar: sits INSIDE the trim, so nothing can meet the frame */
.slots-cabinet::before {
  content: 'BLOCKY SPIN'; position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  padding: 7px 26px; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(180deg, #ffe8a6, #f5c542 55%, #b8841a);
  color: #2a1a00; font-family: var(--display); font-size: 12px; letter-spacing: .22em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .28);
  z-index: 3;
}
/* chrome pillars either side of the glass */
.slots-cabinet::after {
  content: ''; position: absolute; left: 14px; right: 14px; top: 54px; bottom: 16px; pointer-events: none; border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 8px) left / 8px 100% no-repeat,
    linear-gradient(270deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 8px) right / 8px 100% no-repeat;
}
.slots-lights {   /* the marquee: bulbs chase around the glass */
  position: absolute; left: 11px; right: 11px; top: 48px; bottom: 11px; pointer-events: none; border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255, 224, 138, .95) 0 2.3px, transparent 3.2px) 0 0 / 22px 8px repeat-x,
    radial-gradient(circle, rgba(255, 224, 138, .95) 0 2.3px, transparent 3.2px) 0 100% / 22px 8px repeat-x,
    radial-gradient(circle, rgba(255, 224, 138, .95) 0 2.3px, transparent 3.2px) 0 0 / 8px 22px repeat-y,
    radial-gradient(circle, rgba(255, 224, 138, .95) 0 2.3px, transparent 3.2px) 100% 0 / 8px 22px repeat-y;
  opacity: .6; transition: opacity .2s ease;
  animation: marquee-chase 1.1s steps(2) infinite;
}
@keyframes marquee-chase { 50% { background-position: 11px 0, 11px 100%, 0 11px, 100% 11px; } }
.slots-lights.win { opacity: 1; animation-duration: .28s; filter: drop-shadow(0 0 6px rgba(255, 224, 138, .9)); }
.slots-window {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 270px;
  padding: 0; margin: 8px 0 4px; border-radius: 14px; overflow: hidden;
  background: #070a10; box-shadow: inset 0 0 0 2px #0f1522, inset 0 0 0 4px rgba(255, 214, 120, .18), inset 0 0 40px rgba(0, 0, 0, .8);
}
.slots-window::after {   /* glass reflection */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255, 255, 255, .09) 0 18%, transparent 30%, transparent 70%, rgba(255, 255, 255, .04) 88%);
}
.reel { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #131a26, #0c1119 50%, #131a26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 40px; z-index: 2; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent); }
.reel::after { bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent); }
.reel-strip { will-change: transform; }
.reel-strip.settle { transition: transform .62s cubic-bezier(.2, 1.18, .3, 1); }
.reel.spinning .reel-strip { animation: reel-spin .3s linear infinite; filter: blur(1.6px); }
@keyframes reel-spin { from { transform: translateY(0); } to { transform: translateY(-1800px); } }
.sym { display: grid; place-items: center; height: 90px; }
.sym img { width: 62px; height: 62px; padding: 6px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%); image-rendering: pixelated; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .65)) saturate(1.15); transition: transform .2s ease; }
.sym-netherite img { filter: drop-shadow(0 0 10px rgba(167, 139, 250, .7)) drop-shadow(0 5px 7px rgba(0, 0, 0, .65)); }
.sym-diamond img { filter: drop-shadow(0 0 8px rgba(79, 240, 216, .55)) drop-shadow(0 5px 7px rgba(0, 0, 0, .65)); }
.sym-emerald img { filter: drop-shadow(0 0 8px rgba(74, 222, 128, .5)) drop-shadow(0 5px 7px rgba(0, 0, 0, .65)); }
.sym-gold img { filter: drop-shadow(0 0 8px rgba(245, 197, 66, .55)) drop-shadow(0 5px 7px rgba(0, 0, 0, .65)); }
.sym.win img { animation: sym-win .55s ease-in-out infinite alternate; filter: drop-shadow(0 0 16px rgba(255, 224, 138, .95)) drop-shadow(0 5px 7px rgba(0, 0, 0, .65)); }
@keyframes sym-win { from { transform: scale(1); } to { transform: scale(1.18) rotate(-4deg); } }
.payline-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.payline-overlay polyline { stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; stroke-dasharray: 600; stroke-dashoffset: 600; animation: line-draw .5s ease-out forwards; filter: drop-shadow(0 0 6px currentColor); }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
.slots-total {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); z-index: 4; pointer-events: none; opacity: 0;
  font-family: var(--display); font-size: 44px; color: #ffe08a; text-shadow: 0 0 24px rgba(245, 197, 66, .95), 0 4px 0 #3a2500, 0 0 2px #000;
  transition: opacity .2s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.slots-total.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.slots-result { min-height: 22px; color: var(--muted); font-size: 12px; }
.slots-result strong { color: var(--text); }
.slots-paytable { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pay-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 9px; border: 1px solid var(--line); background: rgba(126, 191, 255, .04); font-size: 11px; transition: border-color .2s ease, background .2s ease; }
.pay-chip img { width: 22px; height: 22px; image-rendering: pixelated; }
.pay-chip b { font-family: var(--display); font-weight: 400; color: var(--text); }
.pay-chip i { font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: .1em; color: #ffd98a; }
.pay-chip.wild { border-color: rgba(245, 197, 66, .4); }
.pay-chip.hit { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .12); box-shadow: 0 0 12px rgba(74, 222, 128, .25); }
.pay-note { color: var(--muted-2); font-size: 10px; margin-left: 4px; }
@media (max-width: 720px) { .sym img { width: 50px; height: 50px; } }   /* tile height stays 90px - the script positions by it */

/* ------------------------------------------------------------------ fishing ---
   A pond seen from the side. A grassy island on the left with the angler on it, a rod
   drawn in SVG so it bends, the line down to a bobber, and the catch lifted clear of the
   water on the reel. States live on #fishingPond: casting / waiting (+nibble) / bite /
   reeling / landed. Every element stays in the DOM - only classes change. */
.game-board-fishing .fishing-stage { display: flex; flex-direction: column; gap: 14px; padding-top: 34px; }
.pond {
  position: relative; height: 300px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b1a30 0, #143a66 52%, #0e4a78 52.4%, #082a48 100%);
}
.sky { position: absolute; inset: 0 0 48% 0; background: radial-gradient(120% 90% at 80% 0, rgba(255, 230, 166, .18), transparent 60%); }
.pond-sun { position: absolute; right: 14%; top: 24px; width: 36px; height: 36px; border-radius: 50%; background: #ffe6a6; box-shadow: 0 0 34px rgba(255, 230, 166, .6); }
.cloud { position: absolute; top: 34px; height: 14px; width: 60px; border-radius: 20px; background: rgba(255, 255, 255, .16); animation: cloud-drift 40s linear infinite; }
.cloud::before { content: ''; position: absolute; left: 14px; top: -9px; width: 30px; height: 20px; border-radius: 20px; background: inherit; }
.cloud.a { left: 30%; } .cloud.b { left: 62%; top: 60px; width: 44px; animation-duration: 55s; }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(120px); } }
.pond-hill { position: absolute; bottom: 48%; height: 70px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #17324f; }
.pond-hill.far { left: 34%; width: 62%; opacity: .7; height: 92px; }
.pond-hill.near { left: 58%; width: 56%; background: #1c3d5e; }
.water-far { position: absolute; left: 0; right: 0; top: 52%; height: 6px; background: rgba(255, 255, 255, .12); }
/* the island: a mound of earth with a grass top, a little tree and flowers */
.island { position: absolute; left: 0; bottom: 34%; width: 170px; height: 74px; border-radius: 0 60px 30px 0 / 0 60px 30px 0; background: linear-gradient(180deg, #6b4a2b 0, #5a3c20 55%, #3f2a15 100%); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .18); z-index: 1; }
.island .grass { position: absolute; left: 0; right: 0; top: -8px; height: 22px; border-radius: 0 60px 10px 0 / 0 60px 10px 0; background: linear-gradient(180deg, #5fb857, #3f8f3c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.island .grass::after { content: ''; position: absolute; left: 6px; right: 22px; top: -3px; height: 5px; background: repeating-linear-gradient(90deg, #7fd977 0 3px, transparent 3px 7px); }
.island .tree { position: absolute; left: 12px; top: -66px; width: 12px; height: 70px; background: #5a3c20; border-radius: 3px; }
.island .tree::before { content: ''; position: absolute; left: -22px; top: -18px; width: 56px; height: 52px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 40% 35%, #6fd062, #2f8a3c 70%); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .18); }
.island .flower { position: absolute; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #ff6f9c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35) inset; }
.island .flower.a { left: 84px; } .island .flower.b { left: 118px; background: #ffd166; }
.angler { position: absolute; left: 52px; bottom: calc(34% + 66px); z-index: 3; }
/* the rod: an SVG hung off the angler's hands; classes rotate and bend it */
.rod-svg { position: absolute; left: 84px; bottom: calc(34% + 70px); width: 112px; height: 72px; z-index: 3; overflow: visible; transform-origin: 4px 68px; transform: rotate(-4deg); }
/* the line: its own layer in pond pixels, drawn by the scene loop every frame */
.line-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.bobber { position: absolute; left: 50%; top: 52%; width: 18px; height: 18px; margin: -12px 0 0 -9px; border-radius: 50%; background: linear-gradient(180deg, #ff5a5a 0 50%, #fff 50%); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); z-index: 3; opacity: 0; visibility: hidden; }
.water-near { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; z-index: 0; background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(8, 42, 72, 0) 60%); }
.water-near .wave { position: absolute; left: -10%; right: -10%; top: 0; height: 6px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 18px, transparent 18px 36px); animation: wave-slide 4s linear infinite; }
.water-near .wave.two { top: 16px; opacity: .5; animation-duration: 6s; animation-direction: reverse; }
@keyframes wave-slide { to { transform: translateX(36px); } }
.ripple { position: absolute; left: 50%; top: 52%; width: 10px; height: 4px; margin: -2px 0 0 -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); opacity: 0; z-index: 2; }
.bite { position: absolute; left: calc(50% + 10px); top: calc(52% - 34px); z-index: 4; font-family: var(--display); font-size: 24px; color: #ffe08a; text-shadow: 0 0 12px rgba(245, 197, 66, .9), 0 2px 0 #000; opacity: 0; visibility: hidden; }
.catch { position: absolute; left: 50%; top: 52%; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, 20px); transform-origin: 50% 0; opacity: 0; z-index: 4; }
.catch .drops { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.catch .drops b { position: absolute; left: -3px; top: -3px; width: 6px; height: 8px; border-radius: 50% 50% 60% 60%; background: rgba(190, 230, 255, .9); opacity: 0; }
.catch .drops b:nth-child(1) { --dx: -38px; } .catch .drops b:nth-child(2) { --dx: -16px; } .catch .drops b:nth-child(3) { --dx: 6px; } .catch .drops b:nth-child(4) { --dx: 26px; } .catch .drops b:nth-child(5) { --dx: 44px; }
.catch .fish-svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.catch .catch-name { font-family: var(--display); font-size: 11px; color: #fff; text-shadow: 0 2px 0 #000; background: rgba(6, 10, 16, .75); padding: 3px 8px; border-radius: 8px; white-space: nowrap; }

/* casting: rod whips forward, the line flies out, the bobber lands with a ring */
.pond.is-casting .bobber, .pond.is-waiting .bobber, .pond.is-bite .bobber { visibility: visible; }
.pond.is-casting .ripple { animation: ripple-ring .6s ease-out .95s both; }
.pond.is-casting .water-near::after { content: ''; position: absolute; left: 50%; top: 0; width: 26px; height: 18px; margin-left: -13px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .55), transparent 70%); opacity: 0; animation: cast-plop .45s ease-out .96s both; }
@keyframes cast-plop { 0% { opacity: 0; transform: translateY(6px) scaleX(.4); } 30% { opacity: 1; transform: translateY(-4px) scaleX(1); } 100% { opacity: 0; transform: translateY(-14px) scaleX(1.3); } }
@keyframes ripple-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(7); } }
/* waiting: the bobber rides the ripples; a nibble is one quick dip */

@keyframes bobber-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@keyframes bobber-nibble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.pond.is-waiting.nibble .ripple { animation: ripple-ring .5s ease-out both; }
/* bite: it is dragged under, the rod tip pulls down, the "!" pops, rings spread */

@keyframes bobber-dip { from { transform: translateY(3px) rotate(-16deg); } to { transform: translateY(8px) rotate(16deg); } }

@keyframes rod-tug { from { transform: rotate(10deg); } to { transform: rotate(16deg); } }
.pond.is-bite .bite { opacity: 1; visibility: visible; animation: bite-pop .35s ease-out; }
@keyframes bite-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.pond.is-bite .ripple { animation: ripple-ring .45s ease-out infinite; }
/* reeling: rod bows back hard, line shortens, the catch comes up out of the water */

.pond.is-reeling .bobber, .pond.is-landed .bobber { opacity: 0; visibility: hidden; }
.pond.is-reeling .ripple { animation: ripple-burst .7s ease-out both; }
@keyframes ripple-burst { 0% { opacity: 1; transform: scale(1); border-width: 4px; } 100% { opacity: 0; transform: scale(12); border-width: 1px; } }
.pond.is-reeling .catch { opacity: 1; }
/* while still under the surface the catch is masked by the water itself, so no fade is needed */
.pond.is-reeling .catch, .pond.is-landed .catch { clip-path: none; }
.pond.is-reeling .catch .drops b { animation: drop-fly .7s ease-out .05s both; }
@keyframes drop-fly { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), 70px); } }
.pond.is-landed .catch { opacity: 1; }
.pond.is-landed.good .catch .fish-svg { animation: catch-wiggle .5s ease-in-out 2; }
.pond.is-landed.bad .catch .fish-svg { filter: grayscale(.4) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
@keyframes catch-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
.pond.is-landed.good::after { content: ''; position: absolute; left: var(--hang-x, 50%); top: calc(var(--hang-y, 30%) - 10px); width: 220px; height: 160px; margin-left: -110px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 138, .35), transparent 65%); animation: catch-glow 1.2s ease-out forwards; }
@keyframes catch-glow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }

/* life under the surface and at the far bank */
.shadow-fish { position: absolute; z-index: 0; bottom: 12%; width: 46px; height: 16px; border-radius: 50% 40% 40% 50%; background: rgba(4, 18, 34, .55); filter: blur(.4px); animation: shadow-swim 14s linear infinite; }
.shadow-fish::after { content: ''; position: absolute; right: -10px; top: 2px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid rgba(4, 18, 34, .55); }
.shadow-fish.a { animation-delay: -3s; bottom: 8%; }
.shadow-fish.b { animation-delay: -8s; bottom: 22%; width: 34px; height: 12px; animation-duration: 18s; }
.shadow-fish.c { animation-delay: -12s; bottom: 30%; width: 26px; height: 10px; animation-duration: 22s; opacity: .7; }
@keyframes shadow-swim {
  0% { transform: translateX(-60px) scaleX(1); left: 0; }
  48% { transform: translateX(0) scaleX(1); left: calc(100% - 20px); }
  52% { transform: translateX(0) scaleX(-1); left: calc(100% - 20px); }
  100% { transform: translateX(-60px) scaleX(-1); left: 0; }
}
.reeds { position: absolute; z-index: 1; right: 26px; bottom: 44%; width: 60px; height: 58px; pointer-events: none;
  background:
    linear-gradient(#2f6b3a, #2f6b3a) 4px 0 / 3px 100% no-repeat, linear-gradient(#3d8a48, #3d8a48) 16px 12px / 3px 88% no-repeat,
    linear-gradient(#2f6b3a, #2f6b3a) 30px 4px / 3px 96% no-repeat, linear-gradient(#3d8a48, #3d8a48) 44px 16px / 3px 84% no-repeat,
    radial-gradient(#6b4a2b 0 60%, transparent 62%) 1px 0 / 9px 14px no-repeat, radial-gradient(#6b4a2b 0 60%, transparent 62%) 27px 4px / 9px 14px no-repeat;
  transform-origin: 50% 100%; animation: reed-sway 4s ease-in-out infinite; }
@keyframes reed-sway { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(3deg); } }

.fishing-result { min-height: 22px; color: var(--muted); font-size: 12px; }
.fishing-result strong { color: var(--text); }
.fish-ladder { display: flex; flex-wrap: wrap; gap: 6px; }
/* Top catches under the pond */
.fish-catalog { border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 16, 30, .55); overflow: hidden; }
.fish-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 10px; }
.fish-card { --tier: #6b7f95; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 7px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 14%, transparent), color-mix(in srgb, var(--tier) 5%, transparent)); text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.fish-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.fish-card-art { display: grid; place-items: center; width: 44px; height: 34px; margin-bottom: 2px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.fish-card-art svg { width: 34px; height: auto; }
.fish-card b { font-family: var(--display); font-weight: 400; font-size: 12px; color: var(--tier); text-shadow: 0 0 10px color-mix(in srgb, var(--tier) 45%, transparent); }
.fish-card small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; color: var(--text); }
.fish-card em { font-style: normal; font-size: 9px; color: var(--muted-2); }
.fish-card.tier-blank { --tier: #566072; } .fish-card.tier-blank .fish-card-art { filter: grayscale(.5) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.fish-card.tier-junk { --tier: #8b9bb0; }
.fish-card.tier-common { --tier: #4ade80; }
.fish-card.tier-rare { --tier: #5ab9ff; }
.fish-card.tier-epic { --tier: #b48cff; }
.fish-card.tier-legendary { --tier: #ffd76a; }
.fish-card.tier-legendary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 50% 30%, rgba(255, 215, 106, .18), transparent 70%); pointer-events: none; }
.fish-card.caught { border-color: var(--tier); box-shadow: 0 0 0 1px var(--tier), 0 0 18px color-mix(in srgb, var(--tier) 45%, transparent); }
.fish-card.caught::after { content: 'LAST'; position: absolute; top: -6px; right: 6px; padding: 1px 5px; border-radius: 5px; background: var(--tier); color: #04121c; font-family: var(--display); font-size: 7px; letter-spacing: .1em; }
@media (max-width: 720px) { .fish-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 8px; } .fish-card small { font-size: 9px; } }
.fish-top { border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 16, 30, .55); overflow: hidden; }
.fish-top-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--mint); font-size: 9.5px; font-weight: 900; letter-spacing: .12em; }
.fish-top-head span { display: inline-flex; align-items: center; gap: 6px; }
.fish-top-head svg { width: 12px; height: 12px; color: #ffd76a; }
.fish-top-head small { color: var(--muted-2); font-size: 9px; letter-spacing: .06em; }
.fish-top-empty { padding: 14px 12px; color: var(--muted-2); font-size: 11px; }
.fish-top-list { display: flex; flex-direction: column; }
.fish-top-row { display: grid; grid-template-columns: 22px 34px minmax(80px, 1fr) minmax(0, 1.2fr) 62px 110px; align-items: center; gap: 10px; padding: 6px 12px; font-size: 11px; border-bottom: 1px solid rgba(126, 191, 255, .05); }
.fish-top-row:last-child { border-bottom: 0; }
.fish-top-row.best { background: linear-gradient(90deg, rgba(255, 215, 106, .1), transparent 70%); }
.fish-top-row.mine { box-shadow: inset 2px 0 0 var(--green); }
.fish-top-rank { font-family: var(--display); font-size: 10px; color: var(--muted-2); }
.fish-top-row.best .fish-top-rank { color: #ffd76a; }
.fish-top-row .fish-svg { width: 30px; height: 23px; }
.fish-top-name { font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fish-top-row .player-cell { min-width: 0; }
.fish-top-mult { font-family: var(--display); font-weight: 400; font-size: 11px; color: var(--mint); text-align: right; }
.fish-top-pay { text-align: right; }
.fish-top-pay .amount-cell { justify-content: flex-end; color: var(--green); font-weight: 800; }
@media (max-width: 600px) {
  .fish-top-row { grid-template-columns: 18px 30px minmax(0, 1fr) 56px; }
  .fish-top-row .player-cell, .fish-top-pay { display: none; }
}
/* The line under tension: brighter, a hair thicker. */
.rod-line { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.3; stroke-linecap: round; transition: stroke .2s ease, stroke-width .2s ease; }
.rod-line.taut { stroke: #ffffff; stroke-width: 1.7; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)); }
.fish-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 6px; border-radius: 9px; border: 1px solid var(--line); background: rgba(126, 191, 255, .04); font-size: 11px; transition: border-color .2s ease, background .2s ease; }
.fish-chip b { font-family: var(--display); font-weight: 400; color: var(--text); }
.fish-chip small { color: var(--muted-2); font-size: 9.5px; }
.fish-chip.blank b { color: var(--muted); }
.fish-chip.caught { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .12); box-shadow: 0 0 14px rgba(74, 222, 128, .25); }
.fish-chip.caught.blank { border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .1); box-shadow: none; }
@media (max-width: 720px) { .pond { height: 240px; } .island { width: 130px; } .rod-svg { left: 70px; width: 92px; height: 60px; transform-origin: 4px 56px; } .bobber, .ripple, .catch { left: 55%; } .bite { left: calc(55% + 10px); } }

/* ---------------------------------------------------- themed scrollbars ---
   Replace the default white scrollbars site-wide with slim green-tinted ones. */
* { scrollbar-width: thin; scrollbar-color: rgba(74, 222, 128, .35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(74, 222, 128, .28); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(74, 222, 128, .5); background-clip: padding-box; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(126, 191, 255, .3); background-clip: padding-box; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(126, 191, 255, .5); background-clip: padding-box; }

/* ---------------------------------------------------- chat chrome (v2) ---
   No LIVE CHAT title or online count; collapse is a button at the very bottom, DonutFlip
   style. The header only carries the close button on mobile. */
@media (min-width: 1025px) {
  body.chat-pinned .chat-head { display: none; }
  body.chat-pinned .chat-collapse-bottom { display: flex; }
}
.chat-messages { min-height: 80px; }
.chat-collapse-bottom { display: none; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 9px; border: 0; border-top: 1px solid var(--line);
  background: rgba(126, 191, 255, .04); color: var(--muted-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.chat-collapse-bottom:hover { color: var(--green); background: rgba(74, 222, 128, .07); }
.chat-collapse-bottom svg { width: 13px; height: 13px; }
.chat-head .chat-title { font-family: var(--display); font-size: 10px; letter-spacing: .12em; color: var(--muted); }

/* Rain bar, reformatted for the chat: label over the pot, timer + Tip on the right. */
.chat-rain { justify-content: flex-start; }
.chat-rain-info { gap: 0; }
.chat-rain-info small { order: -1; }
.chat-rain-right { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* Floating open button anchored bottom-left, clear of the chat area when collapsed. */
.chat-toggle { left: 18px; right: auto; }


/* =============================================================== rewards v2 --- */
.rw2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rw2-claim-all { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 42px; padding: 0 16px; border: 0; border-radius: 11px; color: #05210f; font-family: var(--display); font-size: 11px; background: linear-gradient(180deg, var(--mint), var(--green)); box-shadow: 0 6px 18px rgba(74, 222, 128, .3); animation: deposit-breathe 3s ease-in-out infinite; }
.rw2-claim-all span { padding: 2px 7px; border-radius: 999px; background: rgba(4, 24, 14, .22); font-family: Inter, sans-serif; font-size: 10px; font-weight: 900; }
.rw2-claim-all svg { width: 15px; height: 15px; }
.ready-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--muted-2); vertical-align: middle; }
.ready-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); animation: playing-pulse 1.6s ease-in-out infinite; }

.rw2-daily { padding: 24px; margin-bottom: 20px; }
.rw2-daily-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.rw2-daily-head h2 { margin: 8px 0 0; font-family: var(--body); font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.rw2-streak { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.rw2-streak-fire { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 138, 76, .12); color: #ffc7a8; font-weight: 800; }
.rw2-streak-fire svg { width: 13px; height: 13px; color: #ff8a4c; }
.rw2-streak-fire b { color: #fff; }
.rw2-next { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(126, 191, 255, .07); }
.rw2-next b { color: var(--text); font-variant-numeric: tabular-nums; }
.rw2-next .ready-dot { margin: 0; }
.dd-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.dd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 128px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dd small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.dd-art { width: 40px; height: 40px; display: grid; place-items: center; margin: 2px 0; }
.dd-art img { width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.dd-art.coin img { width: 30px; height: 30px; image-rendering: auto; }
.dd strong { font-family: var(--display); font-size: 13px; color: var(--text); }
.dd em { font-style: normal; color: var(--muted-2); font-size: 8.5px; font-weight: 800; }
.dd.claimed { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .07); opacity: .85; }
.dd.claimed strong { color: var(--green); }
.dd-tick { position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #05210f; }
.dd-tick svg { width: 10px; height: 10px; stroke-width: 3; }
.dd.locked { opacity: .5; }
.dd-lock { position: absolute; top: 7px; right: 7px; color: var(--muted-2); }
.dd-lock svg { width: 11px; height: 11px; }
.dd.is-case { background: linear-gradient(180deg, rgba(245, 197, 66, .12), rgba(245, 197, 66, .03)); border-color: rgba(245, 197, 66, .3); }
.dd.is-case strong { color: #ffd98a; }
.dd.final { border-color: rgba(255, 215, 106, .55); background: linear-gradient(180deg, rgba(255, 215, 106, .16), rgba(255, 215, 106, .04)); }
.dd.final strong { color: #ffd76a; }
.dd.current { min-height: 150px; transform: translateY(-4px); border-color: var(--page-accent); box-shadow: 0 0 0 1px var(--page-accent-soft), 0 14px 34px var(--page-accent-soft); background: linear-gradient(180deg, var(--page-accent-soft), var(--panel-2)); }
.dd.current.ready { animation: dd-breathe 2.4s ease-in-out infinite; }
.dd.current .dd-art img { animation: chest-tease 1.4s ease-in-out infinite; }
@keyframes dd-breathe { 0%, 100% { box-shadow: 0 0 0 1px var(--page-accent-soft), 0 14px 34px var(--page-accent-soft); } 50% { box-shadow: 0 0 0 2px var(--page-accent), 0 18px 44px var(--page-accent-soft); } }
.dd-claim { margin-top: auto; width: 100%; height: 30px; border: 0; border-radius: 8px; font-family: var(--display); font-size: 10px; color: #05210f; background: linear-gradient(180deg, var(--mint), var(--green)); box-shadow: 0 4px 12px rgba(74, 222, 128, .3); }
.dd-claim:disabled { background: rgba(126, 191, 255, .1); color: var(--muted); box-shadow: none; font-family: Inter, sans-serif; font-weight: 800; font-size: 10px; font-variant-numeric: tabular-nums; cursor: default; }
.rw2-daily-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; }

.rw2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rw2-card { position: relative; padding: 24px; }
.rw2-card.is-ready { border-color: rgba(96, 249, 155, .55); box-shadow: 0 0 22px rgba(96, 249, 155, .13), inset 0 1px 0 rgba(160, 255, 209, .1); }
.rw2-big { margin: 10px 0 4px; font-family: var(--display); font-size: 26px; color: #fff; }
.rw2-big .amount-cell { gap: 10px; }
.rw2-big .amount-cell img { width: 24px; height: 24px; }
.rw2-sub { color: var(--muted); font-size: 12px; line-height: 1.6; }
.rw2-bar { height: 6px; margin: 14px 0 6px; border-radius: 999px; background: rgba(126, 191, 255, .1); overflow: hidden; }
.rw2-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--page-accent), var(--mint)); transition: width .4s ease; }
.rw2-card.is-ready .rw2-bar i { background: linear-gradient(90deg, var(--green), var(--mint)); }
.rw2-bar-label { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; }
.rw2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin-top: 14px; border: 0; border-radius: 11px; font-family: var(--display); font-size: 11px; color: #05210f; background: linear-gradient(180deg, var(--mint), var(--green)); box-shadow: 0 6px 18px rgba(74, 222, 128, .28); transition: transform .12s ease, filter .12s ease; }
.rw2-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.rw2-btn svg { width: 15px; height: 15px; }
.rw2-btn:disabled { background: rgba(126, 191, 255, .08); border: 1px dashed var(--line-strong); color: var(--muted); box-shadow: none; font-family: Inter, sans-serif; font-weight: 800; font-size: 11px; cursor: default; }
.rw2-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.rw2-link { height: 42px; margin-top: 14px; border-radius: 11px; display: inline-flex; align-items: center; gap: 7px; }
.rw2-link svg { width: 14px; height: 14px; }
.rw2-fine { margin: 12px 0 0; color: var(--muted-2); font-size: 10.5px; line-height: 1.5; }
.rw2-history { padding: 0; overflow: hidden; }
.rw2-history-head, .rf2-tiers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rw2-history-head h3, .rf2-tiers-head h3 { margin: 0; font-size: 14px; }
.rw2-hist-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.rw2-hist-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(126, 191, 255, .03); }
.rw2-hist-row b { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .rw2-head { flex-direction: column; }
  .dd-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dd { min-height: 118px; }
  .dd.current { min-height: 140px; }
}

/* ============================================================= referrals v2 --- */
.rf2-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 0; padding: 0; margin-bottom: 16px; overflow: hidden; border-color: color-mix(in srgb, var(--page-accent) 30%, transparent); }
.rf2-link-block { padding: 26px; background: radial-gradient(70% 90% at 0% 0%, var(--page-accent-soft), transparent 60%); }
.rf2-label { display: block; margin-bottom: 8px; color: var(--page-accent); font-size: 9.5px; font-weight: 900; letter-spacing: .16em; }
.rf2-link-row { display: flex; gap: 8px; }
.rf2-link { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--page-accent) 45%, transparent); border-radius: 12px; background: rgba(3, 16, 30, .8); color: #fff; font-size: 13px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rf2-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; height: 46px; padding: 0 18px; border: 0; border-radius: 12px; color: #04262c; font-family: var(--display); font-size: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 55%, #ffffff), var(--page-accent)); box-shadow: 0 6px 18px var(--page-accent-soft); text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.rf2-copy:hover { transform: translateY(-1px); filter: brightness(1.06); }
.rf2-copy svg { width: 15px; height: 15px; }
.rf2-link-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.rf2-code b { color: var(--text); font-family: var(--display); font-size: 11px; letter-spacing: .04em; }
.rf2-edit { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); vertical-align: middle; }
.rf2-edit:hover { color: var(--page-accent); border-color: var(--page-accent); }
.rf2-edit svg { width: 11px; height: 11px; }
.rf2-share { display: inline-flex; align-items: center; gap: 6px; color: var(--page-accent); font-weight: 800; text-decoration: none; }
.rf2-share svg { width: 12px; height: 12px; }
.rf2-code-form { display: flex; gap: 8px; margin-top: 12px; }
.rf2-code-form .text-input { flex: 1; }
.rf2-money { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-left: 1px solid var(--line); background: rgba(3, 14, 26, .5); }
.rf2-money-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(126, 191, 255, .05); }
.rf2-money-item small { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.rf2-money-item b { font-family: var(--display); font-size: 18px; color: #fff; }
.rf2-money-item.pending { border: 1px solid rgba(74, 222, 128, .25); background: rgba(74, 222, 128, .06); }
.rf2-money-item.pending b { color: var(--mint); }
.rf2-money-item .rw2-btn { height: 36px; margin-top: 8px; font-size: 10px; }
.rf2-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rf2-step { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.rf2-step i { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-style: normal; font-size: 12px; color: #04262c; background: var(--page-accent); }
.rf2-step strong { display: block; font-size: 12px; margin-bottom: 3px; }
.rf2-step span { color: var(--muted); font-size: 12px; line-height: 1.65; }
.rf2-step span b { color: var(--mint); }
.rf2-tiers { padding: 0; margin-bottom: 16px; overflow: hidden; }
.rf2-tiers-head .muted b { color: var(--text); }
.rf2-ladder { position: relative; padding: 22px 40px 58px; }
.rf2-track { position: relative; height: 6px; border-radius: 999px; background: rgba(126, 191, 255, .1); }
.rf2-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--page-accent), var(--mint)); }
.rf2-stops { position: absolute; left: 40px; right: 40px; top: 18px; height: 0; }
.rf2-preview { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 138, 76, .18); color: #ff8a4c; font-family: var(--display); font-size: 9px; letter-spacing: .1em; }
.rf2-stop { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rf2-stop b { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.rf2-stop-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--panel); box-sizing: border-box; }
.rf2-stop small { margin-top: 8px; font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.rf2-stop em { font-style: normal; font-size: 9px; color: var(--muted-2); }
.rf2-stop.unlocked b, .rf2-stop.unlocked small { color: var(--text); }
.rf2-stop.unlocked .rf2-stop-dot { border-color: var(--page-accent); background: var(--page-accent); }
.rf2-stop.current .rf2-stop-dot { box-shadow: 0 0 0 4px var(--page-accent-soft), 0 0 14px var(--page-accent); }
.rf2-stop.current b { color: var(--page-accent); }
.rf2-players { padding: 0; overflow: hidden; }
.rf2-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.rf2-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(0, 1.4fr) 110px 130px 80px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(126, 191, 255, .03); }
.rf2-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.rf2-status.paid { color: var(--mint); }
.rf2-status svg { width: 12px; height: 12px; }
.rf2-cell { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.rf2-cell small { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rf2-cell b { font-variant-numeric: tabular-nums; }
.rf2-empty { display: flex; align-items: center; gap: 16px; padding: 22px 18px; }
.rf2-empty > svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--page-accent); }
.rf2-empty strong { display: block; margin-bottom: 4px; }
.rf2-empty p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; max-width: 460px; }
.rf2-empty .rf2-copy { margin-left: auto; }
@media (max-width: 900px) {
  .rf2-hero { grid-template-columns: 1fr; }
  .rf2-money { border-left: 0; border-top: 1px solid var(--line); }
  .rf2-steps { grid-template-columns: 1fr; }
  .rf2-row { grid-template-columns: minmax(0, 1fr) 100px; }
  .rf2-status, .rf2-cell.muted { display: none; }
  .rf2-empty { flex-direction: column; align-items: flex-start; }
  .rf2-empty .rf2-copy { margin-left: 0; }
}

/* ================================================================= promo v2 --- */
.pr2-coupon { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 12px 16px 12px 14px; border-radius: 12px; border: 1px solid rgba(250, 204, 21, .35); background: linear-gradient(90deg, rgba(250, 204, 21, .12), rgba(250, 204, 21, .03) 60%), linear-gradient(160deg, rgba(8, 32, 54, .96), rgba(4, 18, 32, .98)); box-shadow: 0 8px 22px rgba(250, 204, 21, .08); }
.pr2-coupon-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(250, 204, 21, .16); color: #ffd98a; }
.pr2-coupon-icon svg { width: 16px; height: 16px; }
.pr2-coupon-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr2-coupon-kicker { color: #ffd98a; font-size: 8.5px; font-weight: 900; letter-spacing: .16em; }
.pr2-coupon-code { font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: #fff; }
.pr2-coupon-meta { display: flex; gap: 10px; margin-left: auto; color: var(--muted-2); font-size: 10.5px; white-space: nowrap; }
.pr2-coupon-amount { font-family: var(--display); font-size: 14px; color: #ffd98a; white-space: nowrap; }
.pr2-coupon-amount .amount-cell img { width: 16px; height: 16px; }
.pr2-claim { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; font-family: var(--display); font-size: 10px; color: #2a1a00; background: linear-gradient(135deg, #fff1b8 0%, #ffe393 38%, #f5b301 100%); box-shadow: 0 0 0 1px rgba(255, 227, 147, .5), 0 4px 14px rgba(250, 204, 21, .35); }
.pr2-claim svg { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .pr2-coupon { flex-wrap: wrap; }
  .pr2-coupon-meta { margin-left: 0; width: 100%; }
}
.pr2-enter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.2fr); gap: 22px; align-items: center; padding: 22px 24px; margin-bottom: 16px; }
.pr2-enter-copy h2 { margin: 6px 0 4px; font-family: var(--display); font-size: 15px; }
.pr2-enter-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.pr2-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pr2-form .form-error { grid-column: 1 / -1; }
.pr2-input { height: 46px; font-family: var(--display); font-size: 13px; letter-spacing: .08em; }
.pr2-redeem { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 12px; font-family: var(--display); font-size: 11px; color: #33082a; background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 55%, #ffffff), var(--page-accent)); box-shadow: 0 6px 18px var(--page-accent-soft); }
.pr2-redeem svg { width: 14px; height: 14px; }
.pr2-history { padding: 0; overflow: hidden; }
.pr2-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 12px; }
.pr2-ticket { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--page-accent) 40%, transparent); background: rgba(126, 191, 255, .03); }
.pr2-ticket b { grid-column: 1; grid-row: 1; font-family: var(--display); font-size: 11px; letter-spacing: .04em; color: #fff; }
.pr2-ticket span { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 800; }
.pr2-ticket small { grid-column: 1; grid-row: 2; color: var(--muted-2); font-size: 9.5px; }
@media (max-width: 720px) {
  .pr2-enter { grid-template-columns: 1fr; }
}


/* =============================================================== profile v2 --- */
.pf2-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .95fr); gap: 0; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--panel-2), var(--panel)); overflow: hidden; }
.pf2-id { display: flex; gap: 22px; padding: 24px 26px; background: radial-gradient(70% 90% at 0% 0%, var(--page-accent-soft), transparent 60%); }
.pf2-skin { flex: 0 0 96px; height: 200px; display: grid; place-items: end center; }
.pf2-skin img { max-height: 200px; image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.pf2-who { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pf2-who h1 { margin: 0; font-family: var(--display); font-size: 22px; color: #fff; }
.pf2-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf2-level { font-size: 12px; }
.pf2-tier { padding: 4px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pf2-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; }
.pf2-badge.ok { color: var(--mint); border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); }
.pf2-badge.staff { color: #ffd98a; border-color: rgba(250, 204, 21, .35); }
.pf2-badge svg { width: 11px; height: 11px; }
.pf2-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pf2-stats span { display: flex; flex-direction: column; gap: 2px; }
.pf2-stats small { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pf2-stats b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pf2-levelbox { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 10px 18px; align-items: center; padding: 22px 24px; border-left: 1px solid var(--line); background: rgba(3, 14, 26, .5); }
.pf2-ring { position: relative; width: 120px; height: 120px; }
.pf2-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.pf2-ring-track { fill: none; stroke: rgba(126, 191, 255, .12); stroke-width: 9; }
.pf2-ring-fill { fill: none; stroke: var(--page-accent); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s ease; filter: drop-shadow(0 0 6px var(--page-accent-soft)); }
.pf2-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pf2-ring-text small { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.pf2-ring-text b { margin: 3px 0 2px; font-family: var(--display); font-size: 26px; color: #fff; }
.pf2-ring-text em { font-style: normal; color: var(--page-accent); font-size: 10px; font-weight: 900; }
.pf2-level-copy { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); }
.pf2-level-copy strong { color: #fff; font-size: 14px; }
.pf2-cb { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-weight: 800; }
.pf2-cb svg { width: 12px; height: 12px; }
.pf2-cb em { font-style: normal; color: var(--muted-2); font-weight: 600; }
.pf2-nexttier { color: var(--muted-2); font-size: 10.5px; }
.pf2-ranks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.pf2-rank { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 10px; opacity: .45; }
.pf2-rank.reached { opacity: 1; }
.pf2-rank.here { background: var(--page-accent-soft); box-shadow: inset 0 0 0 1px var(--page-accent); }
.pf2-rank small { font-size: 8.5px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.pf2-rank.here small { color: var(--text); }
.pf2-fine { grid-column: 1 / -1; margin: 0; color: var(--muted-2); font-size: 10px; }
.pf2-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pf2-record { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.pf2-record img { width: 44px; height: 33px; flex: 0 0 44px; border-radius: 7px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.pf2-record div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf2-record small { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pf2-record b { font-family: var(--display); font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-record span { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.pf2-chart, .pf2-games, .pf2-account { padding: 0; overflow: hidden; }
.pf2-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pf2-panel-head h3 { margin: 0; font-size: 14px; }
.pf2-panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }
/* Full-width chart under the game list: wide and short, the way a chart reads. */
.pf2-chart .chart-wrap { padding: 14px 18px 12px 18px; }
.pf2-chart .profit-chart { height: 220px; }
.pf2-game-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; }
.pf2-game { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(126, 191, 255, .03); color: var(--text); text-align: left; cursor: pointer; transition: background .15s ease; }
.pf2-game:hover { background: rgba(126, 191, 255, .07); }
.pf2-game img { width: 46px; height: 34px; border-radius: 7px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 10px color-mix(in srgb, var(--dot) 35%, transparent); }
.pf2-game i { width: 46px; height: 34px; border-radius: 7px; background: var(--dot); }
.pf2-game-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf2-game-main strong { font-size: 12px; }
.pf2-game-main small { color: var(--muted-2); font-size: 10px; }
.pf2-game-bar { display: block; height: 3px; margin-top: 2px; border-radius: 999px; background: rgba(126, 191, 255, .1); overflow: hidden; }
.pf2-game-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--dot); box-shadow: none; }
.pf2-game-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pf2-game-num b { font-variant-numeric: tabular-nums; font-size: 13px; }
.pf2-game-num small { color: var(--muted-2); font-size: 9.5px; }
.pf2-rows { display: flex; flex-direction: column; }
.pf2-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid rgba(126, 191, 255, .06); }
.pf2-row:last-child { border-bottom: 0; }
.pf2-row strong { display: block; font-size: 12px; }
.pf2-row small { color: var(--muted-2); font-size: 10.5px; }
.pf2-row-btns { display: flex; gap: 8px; }
.pf2-mini { min-height: 32px; padding: 0 12px; font-size: 10px; display: inline-flex; align-items: center; gap: 6px; }
.pf2-mini svg { width: 12px; height: 12px; }
.pf2-mini.danger { color: #ffb4b4; border-color: rgba(248, 113, 113, .35); }
.pf2-mini.danger:hover { background: rgba(248, 113, 113, .12); }
.pf2-switch { position: relative; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: rgba(126, 191, 255, .14); cursor: pointer; transition: background .2s ease; }
.pf2-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #dbe9f5; transition: transform .2s ease, background .2s ease; }
.pf2-switch.on { background: var(--green); }
.pf2-switch.on i { transform: translateX(18px); background: #05210f; }
@media (max-width: 960px) {
  .pf2-hero { grid-template-columns: 1fr; }
  .pf2-levelbox { border-left: 0; border-top: 1px solid var(--line); }
  .pf2-game-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pf2-id { flex-direction: column; align-items: center; text-align: center; }
  .pf2-badges, .pf2-stats { justify-content: center; }
  .pf2-ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------ profit chart v2 --- */
.chart-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.chart-range { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid var(--line); background: rgba(3, 16, 30, .8); }
.chart-range button { min-width: 38px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 900; }
.chart-range button.active { background: linear-gradient(180deg, var(--mint), var(--green)); color: #05210f; }
.chart-range button:disabled { opacity: .35; }
.chart-peaks { display: flex; gap: 12px; font-size: 10px; font-weight: 800; }
.chart-wrap .chart-axis { top: 46px; bottom: 44px; }
.chart-line-up, .chart-line-down { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1.1s ease-out forwards; }
.chart-line-up { stroke: var(--green); filter: drop-shadow(0 0 6px rgba(74, 222, 128, .45)); }
.chart-line-down { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(255, 113, 142, .45)); }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
.chart-area-up, .chart-area-down { stroke: none; animation: chart-fade .9s ease-out .3s both; }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }
.chart-peak { fill: var(--mint); stroke: rgba(5, 33, 15, .9); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-peak.low { fill: var(--red); }
.chart-cursor { stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-hover { fill: var(--mint); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-hover.neg { fill: var(--red); }
.chart-tip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; width: 180px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(4, 18, 32, .97); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); pointer-events: none; }
.chart-tip img { width: 34px; height: 26px; border-radius: 6px; object-fit: cover; image-rendering: pixelated; }
.chart-tip div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chart-tip b { font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-tip small { color: var(--muted-2); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profit-chart { cursor: crosshair; }
@media (prefers-reduced-motion: reduce) { .chart-line-up, .chart-line-down, .chart-area-up, .chart-area-down { animation: none; stroke-dashoffset: 0; } }


/* ------------------------------------------------------------- player card v2 --- */
.pc2 { max-width: 440px; }
.pc2-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pc2-avatar .tiny-avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 14px; font-size: 22px; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.pc2-who { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pc2-who h2 { margin: 0; font-family: var(--display); font-size: 17px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc2-who small { color: var(--muted-2); font-size: 10.5px; }
.pc2-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc2-tier { padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pc2-presence { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(126, 191, 255, .07); color: var(--muted); font-size: 10px; font-weight: 700; }
.pc2-presence.on { color: var(--mint); background: rgba(74, 222, 128, .1); }
.pc2-presence i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: playing-pulse 1.6s ease-in-out infinite; }
.pc2-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc2-stat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(126, 191, 255, .05); }
.pc2-stat.pc2-wide { grid-column: 1 / -1; }
.pc2-stat img { width: 46px; height: 34px; flex: 0 0 46px; border-radius: 7px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.pc2-stat > div { min-width: 0; display: flex; flex-direction: column; }
.pc2-stat small { display: block; color: var(--muted-2); font-size: 8.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pc2-stat strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc2-stat span { color: var(--muted); font-size: 10px; }
.pc2-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pc2-actions:empty { display: none; }
.pc2-btn { flex: 1; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 10.5px; }
.pc2-btn svg { width: 13px; height: 13px; }
.pc2-btn.danger { color: #ffb4b4; border-color: rgba(248, 113, 113, .35); }
.pc2-btn.danger:hover { background: rgba(248, 113, 113, .12); }

.rf2-frozen { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 170, 60, .12); color: #ffc46b; font-size: 13px; }

/* Races ------------------------------------------------------------------------ */
body[data-page="races"] { --page-accent: #ff6a3d; --page-accent-soft: rgba(255, 106, 61, .16); --page-haze: rgba(255, 106, 61, .1); --page-mote: rgba(255, 200, 170, .42); --page-mote-glow: rgba(255, 106, 61, .45); }
.hc2-slide.tone-flame { --tone: #ff6a3d; --tone-soft: rgba(255, 106, 61, .2); --tone-ink: #2a0d04; }
.races-link { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 38px; padding: 0 14px 0 12px; border: 1px solid rgba(255, 106, 61, .45); border-radius: 11px; background: linear-gradient(180deg, rgba(255, 106, 61, .22), rgba(255, 106, 61, .08)); color: #ffd2c2; font-family: var(--display); font-size: 11px; letter-spacing: .06em; box-shadow: 0 0 0 1px rgba(255, 106, 61, .08), 0 6px 18px rgba(255, 106, 61, .15); transition: transform .12s ease, filter .12s ease; }
.races-link:hover { transform: translateY(-1px); filter: brightness(1.12); }
.races-link svg { width: 15px; height: 15px; color: #ffd76a; }
.races-link-sub { font-family: var(--font); font-size: 9.5px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
@media (max-width: 640px) { .races-link-sub { display: none; } }

.race-banner { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; margin: 0 0 16px; padding: 12px 16px 12px 12px; border: 1px solid rgba(255, 106, 61, .35); border-radius: 14px; background: linear-gradient(90deg, rgba(255, 106, 61, .14), rgba(255, 106, 61, .04) 60%, transparent); color: var(--text); text-align: left; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.race-banner:hover { transform: translateY(-1px); border-color: rgba(255, 106, 61, .7); }
.race-banner-flag { width: 44px; height: 32px; border-radius: 6px; background: repeating-conic-gradient(#f4f6fb 0 25%, #0d1220 0 50%) 0 0 / 16px 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); transform: skewY(-6deg); }
.race-banner-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.race-banner-copy b { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 12px; color: #ffd2c2; }
.race-banner-copy b svg { width: 14px; height: 14px; color: #ffd76a; }
.race-banner-copy span { color: var(--muted); font-size: 11px; }
.race-banner-cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; background: linear-gradient(180deg, #ffb59a, #ff6a3d); color: #2a0d04; font-family: var(--display); font-size: 10px; white-space: nowrap; }
.race-banner-cta svg { width: 12px; height: 12px; }
@media (max-width: 560px) { .race-banner { grid-template-columns: minmax(0, 1fr); } .race-banner-flag { display: none; } }

.race-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.race-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--muted); text-align: left; cursor: pointer; transition: border-color .12s ease, transform .12s ease, background .12s ease; }
.race-tab small { font-size: 9px; font-weight: 900; letter-spacing: .14em; color: var(--muted-2); }
.race-tab b { font-family: var(--display); font-size: 15px; color: var(--text); }
.race-tab em { position: absolute; right: 12px; top: 12px; font-style: normal; font-size: 10px; font-weight: 800; color: var(--mint); }
.race-tab:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.race-tab.active { border-color: var(--page-accent); background: linear-gradient(180deg, rgba(255, 106, 61, .18), rgba(255, 106, 61, .06)); box-shadow: 0 0 0 1px rgba(255, 106, 61, .15), 0 8px 24px rgba(255, 106, 61, .12); }
.race-tab.active.referral { --page-accent: #5fe0f2; background: linear-gradient(180deg, rgba(95, 224, 242, .18), rgba(95, 224, 242, .06)); box-shadow: 0 0 0 1px rgba(95, 224, 242, .15), 0 8px 24px rgba(95, 224, 242, .12); }
.race-tab.active b { color: #fff; }
@media (max-width: 720px) { .race-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.race-hero { position: relative; overflow: hidden; margin-bottom: 16px; padding: 22px 22px 18px; border: 1px solid rgba(255, 106, 61, .35); border-radius: 18px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 106, 61, .22), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(255, 215, 106, .12), transparent 60%), linear-gradient(160deg, rgba(14, 20, 34, .96), rgba(6, 12, 24, .98)); }
.race-hero.referral { border-color: rgba(95, 224, 242, .35); background: radial-gradient(120% 90% at 0% 0%, rgba(95, 224, 242, .2), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(74, 222, 128, .12), transparent 60%), linear-gradient(160deg, rgba(10, 22, 34, .96), rgba(6, 12, 24, .98)); }
.race-flag { position: absolute; right: -40px; top: -30px; width: 260px; height: 160px; opacity: .07; background: repeating-conic-gradient(#ffffff 0 25%, transparent 0 50%) 0 0 / 28px 28px; transform: rotate(-12deg) skewY(-6deg); pointer-events: none; }
.race-hero-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.race-hero-top h2 { margin: 8px 0 6px; font-family: var(--display); font-size: clamp(20px, 3vw, 28px); color: #fff; }
.race-hero-top p { margin: 0; font-size: 11.5px; max-width: 520px; }
.race-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(3, 10, 20, .55); min-width: 170px; }
.race-clock small { font-size: 9px; font-weight: 900; letter-spacing: .16em; color: var(--muted-2); }
.race-clock > b { font-family: var(--display); font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px var(--page-accent-soft); }
.race-clock span { font-size: 10.5px; color: var(--muted); }
.race-clock span b { color: var(--mint); }
.race-podium { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 14px; }
.race-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(3, 10, 20, .5); text-align: center; min-height: 150px; }
.race-slot.p1 { order: 2; min-height: 176px; border-color: rgba(255, 215, 106, .55); background: linear-gradient(180deg, rgba(255, 215, 106, .14), rgba(3, 10, 20, .55)); box-shadow: 0 0 0 1px rgba(255, 215, 106, .12), 0 14px 34px rgba(255, 190, 60, .12); }
.race-slot.p2 { order: 1; border-color: rgba(200, 210, 225, .4); background: linear-gradient(180deg, rgba(200, 210, 225, .1), rgba(3, 10, 20, .55)); }
.race-slot.p3 { order: 3; border-color: rgba(205, 127, 50, .45); background: linear-gradient(180deg, rgba(205, 127, 50, .12), rgba(3, 10, 20, .55)); }
.race-slot:not(.taken) { border-style: dashed; }
.race-medal { font-size: 26px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.race-slot.p1 .race-medal { font-size: 34px; }
.race-prize { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(74, 222, 128, .14); color: var(--mint); font-family: var(--display); font-size: 11px; }
.race-slot-player .player-cell { flex-direction: column; gap: 6px; }
.race-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #16a34a, #4ade80); color: #062b18; font-family: var(--display); font-size: 14px; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.race-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.race-slot.p1 .race-avatar { width: 56px; height: 56px; flex-basis: 56px; }
.race-slot .player-cell .player-name { font-family: var(--display); font-size: 12px; }
.race-slot small { color: var(--muted); font-size: 10.5px; }
.race-slot-open { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 2px; color: var(--muted-2); font-family: var(--display); font-size: 12px; }
.race-slot-open svg { width: 26px; height: 26px; opacity: .6; }
.race-me { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(3, 10, 20, .5); }
.race-me.in-prizes { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .07); }
.race-me-rank { display: grid; place-items: center; height: 40px; border-radius: 10px; background: rgba(126, 191, 255, .08); font-family: var(--display); font-size: 15px; color: #fff; }
.race-me b { font-size: 12.5px; }
.race-me small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.race-me-prize { font-size: 11px; color: var(--muted); text-align: right; }
.race-me-prize b { color: var(--mint); }
.race-me-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 55%, #ffffff), var(--page-accent)); color: #2a0d04; font-family: var(--display); font-size: 10px; cursor: pointer; }
.race-board { padding: 0; overflow: hidden; margin-bottom: 16px; }
.race-table th.num, .race-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.race-table td.race-rank { font-family: var(--display); font-size: 13px; width: 44px; }
.race-table tr.top.p1 td { background: rgba(255, 215, 106, .06); }
.race-table tr.is-me td { background: rgba(74, 222, 128, .07); }
.race-table tr.is-staff td { opacity: .7; }
.race-staff { display: inline-block; padding: 2px 6px; border-radius: 6px; background: rgba(255, 215, 106, .16); color: #ffd76a; font-family: var(--display); font-size: 8px; letter-spacing: .1em; vertical-align: middle; }
.race-me-btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }
.race-empty { display: flex; align-items: center; gap: 16px; padding: 22px 18px; }
.race-empty > svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--page-accent); }
.race-empty strong { display: block; margin-bottom: 4px; }
.race-empty p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.race-last { padding: 0; overflow: hidden; margin-bottom: 16px; }
.race-last-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.race-last-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(126, 191, 255, .03); font-size: 12px; }
.race-last-row > span { font-size: 18px; }
.race-last-row small { color: var(--muted); font-size: 10.5px; }
.race-last-row b { color: var(--mint); font-variant-numeric: tabular-nums; }
.race-rules { padding: 0; overflow: hidden; }
@media (max-width: 640px) {
  .race-podium { grid-template-columns: 1fr; }
  .race-slot.p1, .race-slot.p2, .race-slot.p3 { order: initial; min-height: 0; }
  .race-me { grid-template-columns: 44px minmax(0, 1fr); }
  .race-me-prize, .race-me-btn { grid-column: 2; justify-self: start; text-align: left; }
}
/* home card art */
.hc2-flagwave { transform-origin: 8px 24px; animation: hc2-flagwave 2.6s ease-in-out infinite; }
@keyframes hc2-flagwave { 0%, 100% { transform: skewY(-4deg); } 50% { transform: skewY(4deg); } }
.hc2-flagcell { animation: hc2-flagcell 1.4s ease-in-out infinite; }
@keyframes hc2-flagcell { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.hc2-cupshine { animation: hc2-cupshine 2.4s ease-in-out infinite; }
@keyframes hc2-cupshine { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
.hc2-burst { transform: translate(var(--x), 44px); animation: hc2-burst 2.2s ease-out infinite; }
@keyframes hc2-burst { 0% { transform: translate(var(--x), 48px) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x), -6px) scale(1); opacity: 0; } }

/* Operator overview: clear hierarchy, event filters and mobile table scrolling. */
.admin-page .page-head { gap:16px; flex-wrap:wrap; padding:24px; border:1px solid #7959ff55; border-radius:18px; background:radial-gradient(ellipse at top right,#6633c944,transparent 65%),#121421; }
.admin-page .page-head h1 { color:#fff; letter-spacing:-.04em; }
.admin-page #adminRefreshStatus { display:block; color:#aab4d2; margin-top:8px; }
.admin-page .admin-grid { gap:12px; }
.admin-page .admin-grid > * { background:linear-gradient(140deg,#252044,#141a29); border:1px solid #8a6bff33; border-radius:12px; padding:18px; }
.console-filters { display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px; border-bottom:1px solid #ffffff12; }
.console-filters button { padding:8px 12px; border:1px solid #ffffff20; border-radius:8px; color:#b5bfd8; background:#191c2b; cursor:pointer; }
.console-filters button.active { color:#fff; background:#6f42d4; border-color:#ae8bff; }
.admin-console .console-tag { border-radius:6px; padding:5px 8px; background:#838ba322; color:#cbd2ec; }
.admin-console .console-deposit .console-tag { background:#29d9a320; color:#5df2be; }
.admin-console .console-payout .console-tag { background:#f1ac3220; color:#ffd273; }
.admin-console .console-signup .console-tag { background:#9172ff26; color:#bea7ff; }
.admin-console tbody tr:hover { background:#9878ff0d; }
@media(max-width:700px) { .admin-page .page-head { padding:18px; } .admin-page .admin-top { grid-template-columns:1fr; } }

/* Operator workspace: warm surfaces, readable data, and contained mobile tables. */
.admin-page {
  --admin-border: rgba(230, 174, 85, .22);
  --admin-muted: #c5aa92;
  --admin-gold: #ffd38a;
  color: #f6ebdd;
  max-width: 1440px;
  min-width: 0;
  padding-bottom: 48px;
}
.admin-page .page-head {
  padding: 28px;
  border-color: var(--admin-border);
  background: radial-gradient(ellipse at top right, #9b3b252e, transparent 65%), linear-gradient(120deg, #321911, #1d1110);
  box-shadow: 0 12px 36px #0003;
  align-items: center;
}
.admin-page .page-head > div { flex: 1 1 320px; min-width: 0; }
.admin-page .page-head h1 { font-family: var(--sans, sans-serif); font-size: clamp(24px, 3vw, 34px); color: var(--admin-gold); letter-spacing: -.025em; }
.admin-page .page-head p, .admin-page #adminRefreshStatus { color: var(--admin-muted); font-size: 12px; line-height: 1.6; }
.admin-page .status-label { padding: 10px 14px; border: 1px solid var(--admin-border); border-radius: 999px; background: #100c0980; font-size: 12px; white-space: nowrap; }
.admin-page .status-dot { background: #46dc80; box-shadow: 0 0 8px #46dc8066; }
.admin-page .status-dot.off { background: #fa7866; box-shadow: 0 0 8px #fa786666; }
.admin-page .admin-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 24px; padding: 16px; border: 1px solid var(--admin-border); border-radius: 14px; background: #21120e; }
.admin-page .admin-shortcuts strong { flex-basis: 100%; color: var(--admin-muted); font-size: 10px; letter-spacing: .12em; margin-bottom: 3px; }
.admin-page .admin-shortcuts button, .admin-page .console-filters button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--admin-border); border-radius: 8px; background: #342018; color: #ead5bb; font: inherit; font-size: 12px; cursor: pointer; }
.admin-page .admin-shortcuts button:hover, .admin-page .console-filters button:hover { background: #4c291b; border-color: #bc8650; color: #ffe3af; }
.admin-page .console-filters button.active { background: #673020; border-color: #d8a15d; color: #ffdf9f; }
.admin-page :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--admin-gold); outline-offset: 3px; }
.admin-page > .panel, .admin-page .admin-top > .panel { border: 1px solid var(--admin-border); border-radius: 16px; background: linear-gradient(145deg, #271711, #1b1210); box-shadow: 0 8px 24px #0002; overflow: hidden; min-width: 0; margin-bottom: 20px; scroll-margin-top: calc(var(--topbar-h, 72px) + 18px); }
.admin-page .panel-heading { padding: 20px 24px; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--admin-border); background: #5a2a141a; }
.admin-page .panel-heading h3, .admin-page .panel-heading h2 { color: #f8ddb3; font-family: var(--sans, sans-serif); font-size: 17px; letter-spacing: -.01em; }
.admin-page .panel-heading p { color: var(--admin-muted); font-size: 12px; line-height: 1.6; margin-top: 5px; }
.admin-page .admin-body { padding: 20px 24px 24px; }
.admin-page .admin-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.admin-page .admin-grid > * { min-width: 0; padding: 18px; border: 1px solid var(--admin-border); background: linear-gradient(145deg, #3b241a, #261915); border-radius: 12px; }
.admin-page .admin-stat span, .admin-page .admin-tile span { display: block; font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: var(--admin-muted); }
.admin-page .admin-stat strong, .admin-page .admin-tile strong { display: block; margin-top: 10px; font-family: var(--sans, sans-serif); font-size: clamp(19px, 2vw, 26px); font-weight: 750; color: var(--admin-gold); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-page .admin-tile.good { border-color: #53bc7959; background: #17312666; }
.admin-page .admin-tile.good strong { color: #8be5a7; }
.admin-page .admin-tile.bad { border-color: #ef765f66; background: #49201b66; }
.admin-page .admin-tile.bad strong { color: #ffa38e; }
.admin-page .admin-tile strong.win-text { color: #8be5a7; }
.admin-page .admin-tile strong.loss-text { color: #ffa38e; }
.admin-page .admin-top { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.7fr); gap: 20px; }
.admin-page .admin-top > .panel { margin-bottom: 0; }
.admin-page .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.admin-page .table { width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-page .table th { padding: 12px 16px; background: #311b13; color: #d2ad7c; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.admin-page .table td { padding: 14px 16px; border-color: #e6ae5514; vertical-align: middle; line-height: 1.5; }
.admin-page .table tbody tr:nth-child(even) { background: #f4c67c03; }
.admin-page .table tbody tr:hover td { background: #d68d3310; }
.admin-page .table code { color: #efd2a1; font-size: 11px; overflow-wrap: anywhere; }
.admin-page .muted, .admin-page .admin-note { color: var(--admin-muted); }
.admin-page .admin-note { font-size: 12px; line-height: 1.7; padding: 16px 24px; }
.admin-page .empty-table { padding: 28px 24px; color: var(--admin-muted); font-size: 13px; }
.admin-page .admin-console { max-height: 420px; }
.admin-page .admin-console .console-signup .console-tag { background: #d5a44c20; color: #edc98c; }
.admin-page .admin-actions { flex-wrap: wrap; gap: 7px; }
.admin-page .admin-actions button { min-height: 34px; font-size: 11px; }
.admin-page :is(.primary-button, .secondary-button, .outline-button, .ghost-button) { min-height: 38px; font-size: 11px; }
.admin-page .primary-button { background: linear-gradient(115deg, #efc477, #d99449); border-color: #efc477; color: #27150d; box-shadow: 0 4px 16px #d8944322; }
.admin-page :is(.secondary-button, .outline-button, .ghost-button) { border-color: var(--admin-border); color: #f1d4a4; background: #3b23177a; }
.admin-page button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.admin-page :is(.text-input, select, textarea) { background: #160f0d; border: 1px solid #9f744647; color: #f6ebdd; border-radius: 9px; min-height: 40px; padding: 10px 12px; font: inherit; font-size: 13px; min-width: 0; }
.admin-page :is(input, textarea)::placeholder { color: #a28b75; }
.admin-page .promo-create { display: grid; grid-template-columns: minmax(140px, 1.3fr) repeat(3, minmax(100px, 1fr)) auto; gap: 12px; align-items: end; }
.admin-page .promo-create .form-field { min-width: 0; }
.admin-page .control-label, .admin-page .field-label { color: var(--admin-muted); font-size: 11px; }
.admin-page .support-ticket-list { display: grid; gap: 16px; padding: 20px 24px; }
.admin-page .support-ticket-card { padding: 18px; border: 1px solid var(--admin-border); border-radius: 12px; background: #1b110e; }
.admin-page .support-ticket-card header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.admin-page .support-ticket-card header > div { min-width: 0; }
.admin-page .support-ticket-category { color: var(--admin-muted); font-size: 11px; }
.admin-page .support-ticket-card h3 { margin: 6px 0 16px; font-size: 16px; overflow-wrap: anywhere; }
.admin-page .support-ticket-status { padding: 5px 9px; border: 1px solid var(--admin-border); border-radius: 999px; color: var(--admin-gold); font-size: 11px; }
.admin-page .support-ticket-status.closed { color: var(--admin-muted); }
.admin-page .support-ticket-messages { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.admin-page .support-ticket-message { padding: 12px; border-radius: 8px; background: #f4d5a108; overflow-wrap: anywhere; }
.admin-page .support-ticket-message.operator { border-left: 2px solid #d8a15d; }
.admin-page .support-ticket-message small { display: inline-block; margin-left: 10px; color: var(--admin-muted); font-size: 11px; }
.admin-page .support-ticket-message p { margin: 8px 0 0; white-space: pre-wrap; font-size: 13px; line-height: 1.65; }
.admin-page .support-ticket-reply { display: grid; gap: 12px; margin-top: 16px; }
.admin-page .support-ticket-reply textarea { width: 100%; min-height: 96px; resize: vertical; }
.admin-page .support-ticket-reply > div { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1000px) {
  .admin-page .admin-top { grid-template-columns: 1fr; }
  .admin-page .promo-create { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .admin-page .page-head, .admin-page .admin-body, .admin-page .panel-heading { padding: 18px 16px; }
  .admin-page .page-head > div { flex-basis: 100%; }
  .admin-page .admin-shortcuts { flex-wrap: nowrap; overflow-x: auto; padding: 12px; }
  .admin-page .admin-shortcuts strong { display: none; }
  .admin-page .admin-shortcuts button { flex: 0 0 auto; }
  .admin-page .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-page .admin-grid > * { padding: 12px; }
  .admin-page .admin-stat strong { font-size: 19px; }
  .admin-page .support-ticket-list { padding: 16px; }
  .admin-page .admin-bank-float-row { flex-wrap: wrap; }
  .admin-page .admin-bank-float-row input { width: 100%; }
}

.owner-auth-panel { max-width: 520px; margin: 48px auto; padding: 28px; border: 1px solid #b886494d; border-radius: 18px; background: linear-gradient(145deg,#321b13,#1b110e); }
.owner-auth-panel h1 { margin: 10px 0 16px; color: #ffd38a; font: 700 28px sans-serif; }
.owner-auth-panel p { color: #c5aa92; line-height: 1.7; }
.owner-auth-panel form { display: grid; gap: 12px; margin-top: 24px; }
.owner-auth-tabs { display:flex; gap:8px; margin-top:24px; }
.owner-auth-tabs button { flex:1; padding:12px; border:1px solid #b886494d; border-radius:9px; background:#211510; color:#d8c2a5; cursor:pointer; }
.owner-auth-tabs button.active { background:#673020; color:#ffdf9f; border-color:#d8a15d; }
.owner-auth-panel .primary-button { background:linear-gradient(115deg,#efc477,#d99449); color:#27150d; }

/* First verified account welcome reward. */
.new-player-promo-card { position:relative; overflow:hidden; width:min(460px,calc(100vw - 32px)); padding:36px 30px 30px; text-align:center; border:1px solid rgba(255,194,78,.48); background:radial-gradient(ellipse at 50% -10%,rgba(255,178,50,.26),transparent 48%),linear-gradient(155deg,#351710,#1b0d0b 72%); box-shadow:0 28px 100px rgba(0,0,0,.68),0 0 48px rgba(217,71,36,.2); }
.new-player-promo-kicker { color:#ffcf72; font-size:10px; font-weight:900; letter-spacing:.24em; }
.new-player-promo-amount { margin:12px 0 2px; color:#ffe2a1; font-size:clamp(42px,12vw,64px); line-height:1; font-weight:1000; letter-spacing:-.06em; text-shadow:0 0 34px rgba(255,174,49,.35); }
.new-player-promo-card h2 { margin:10px 0 8px; color:#fff4df; font-size:22px; }
.new-player-promo-card p { margin:0 auto 18px; max-width:320px; color:#d6b8a5; line-height:1.55; }
.new-player-promo-code { display:inline-flex; min-width:138px; justify-content:center; padding:10px 18px; border:1px dashed rgba(255,205,110,.7); border-radius:10px; background:rgba(255,183,55,.1); color:#ffdc8c; font:900 22px/1.1 ui-monospace,monospace; letter-spacing:.18em; }
.new-player-promo-status { min-height:38px; display:grid; place-items:center; margin:10px 0 12px; color:#caa891; font-size:12px; }
.new-player-promo-claim { width:100%; border-color:#ffcf67; color:#35150d; background:linear-gradient(105deg,#ffd36e,#f39a32 58%,#e45436); box-shadow:0 8px 28px rgba(225,91,43,.23); font-weight:900; }
.new-player-promo-claim:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* Warm casino surfaces and the live winners strip below the sticky navigation. */
.topbar { background:linear-gradient(100deg,rgba(51,17,12,.98),rgba(35,15,12,.98) 54%,rgba(76,24,14,.98)); border-bottom-color:rgba(255,190,83,.3); box-shadow:0 1px 0 rgba(255,196,88,.18),0 8px 24px rgba(0,0,0,.2); }
.topbar .nav-item { color:#f2d3a0; border-color:rgba(255,190,83,.12); }
.topbar .nav-item:hover,.topbar .nav-item.active { color:#fff0c9; border-color:rgba(255,190,83,.58); background:linear-gradient(135deg,rgba(255,176,49,.2),rgba(193,52,31,.26)); }
.topbar .nav-item.active { color:#35150d; background:linear-gradient(105deg,#ffd36e,#ed7640); box-shadow:0 4px 16px rgba(192,48,29,.23); }
.topbar .games-menu { border-color:rgba(255,190,83,.35); background:linear-gradient(155deg,#351710,#1d100e); }
.topbar .top-login { color:#35150d; border-color:rgba(255,207,103,.7); background:linear-gradient(105deg,#ffd36e,#ed7640); box-shadow:0 5px 20px rgba(194,57,31,.2); }

.game-layout .game-board { border-color:rgba(255,190,83,.32); background:radial-gradient(ellipse at 50% 0%,rgba(243,112,47,.24),transparent 56%),radial-gradient(ellipse at 85% 100%,rgba(255,190,83,.1),transparent 54%),linear-gradient(150deg,#32170f,#1c0e0c 72%,#27110d); box-shadow:inset 0 1px rgba(255,224,158,.08),0 18px 48px rgba(67,16,10,.23); }
.game-layout .game-board::before { border-color:rgba(255,197,103,.11); }
.game-layout .game-board::after { filter:sepia(.7) saturate(1.3) hue-rotate(330deg); opacity:.18; }
.game-layout .game-control-panel { border-color:rgba(255,190,83,.26); background:linear-gradient(155deg,#311710,#1c100e 75%,#26120e); }
.game-layout .board-status { border-color:rgba(255,190,83,.34); color:#ffda88; background:rgba(196,69,34,.13); }

.whale-ticker { position:sticky; top:var(--topbar-h,var(--nav-height)); z-index:44; display:flex; align-items:center; gap:14px; min-height:58px; padding:9px clamp(12px,2.2vw,28px); overflow:hidden; border-bottom:1px solid rgba(255,190,83,.3); background:linear-gradient(100deg,rgba(51,17,12,.98),rgba(35,15,12,.98) 54%,rgba(76,24,14,.98)); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.whale-ticker[hidden] { display:none; }
.whale-ticker-label { display:flex; align-items:center; gap:8px; flex:0 0 auto; color:#ffda88; font-size:9px; font-weight:1000; letter-spacing:.14em; white-space:nowrap; }
.whale-ticker-label i { width:7px; height:7px; border-radius:50%; background:#ff6045; box-shadow:0 0 12px rgba(255,96,69,.8); animation:whale-live-pulse 1.5s ease-in-out infinite; }
.whale-ticker-label small { padding:3px 5px; border-radius:4px; background:rgba(229,69,46,.2); color:#ff9475; font-size:8px; }
.whale-ticker-track { display:flex; align-items:center; gap:8px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.whale-ticker-track::-webkit-scrollbar { display:none; }
.whale-win-card { display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:158px; padding:6px 10px; border:1px solid rgba(255,190,83,.19); border-radius:9px; background:linear-gradient(115deg,rgba(255,183,62,.09),rgba(190,49,31,.12)); }
.whale-win-card.is-new { animation:whale-win-arrive .55s cubic-bezier(.2,.8,.25,1) both; border-color:rgba(255,205,105,.68); box-shadow:0 0 20px rgba(230,100,39,.2); }
.whale-win-icon { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; overflow:hidden; border:1px solid rgba(255,190,83,.28); border-radius:6px; background:rgba(237,119,55,.16); }
.whale-win-icon img { display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.whale-win-player { display:grid; gap:2px; min-width:0; }
.whale-win-player strong { max-width:104px; overflow:hidden; color:#fff0d1; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.whale-win-player small { color:#b99679; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.whale-win-profit { margin-left:auto; color:#ffd36e; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
@keyframes whale-live-pulse { 50% { opacity:.45; transform:scale(.8); } }
@keyframes whale-win-arrive { from { opacity:0; transform:translateY(-12px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:640px) { .whale-ticker { min-height:52px; gap:9px; padding:7px 10px; } .whale-ticker-label { font-size:8px; gap:5px; } .whale-win-card { min-width:145px; } }
@media(prefers-reduced-motion:reduce) { .whale-ticker-label i { animation:none; } .whale-win-card.is-new { animation:none; } }
/* Persisted operator settings */
.admin-settings-editor{padding-top:24px;border-top:1px solid rgba(255,190,80,.25)}
.admin-game-editors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:16px}
.admin-settings-form{display:grid;gap:12px;padding:18px;border:1px solid rgba(255,190,80,.25);border-radius:16px;background:linear-gradient(130deg,#39160f,#1c0e0c);min-width:0}
.admin-settings-form label{display:grid;gap:6px;font-size:12px;color:#f1d2a1}
.admin-settings-form .admin-setting-check{display:flex;align-items:center;gap:10px}
.admin-settings-form input{min-width:0;width:100%}
.admin-settings-form input[type=checkbox]{width:auto;accent-color:#ffb842}
.admin-settings-form [data-settings-status]{font-size:12px;color:#ffe1a2}