@font-face { font-family: Sora; src: url(fonts/sora.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: Manrope; src: url(fonts/manrope.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

/* GiftRoll is always dark: gift art and rarity glow are designed against the ink ground. */
:root {
  --ink: #120e22;
  --vault: #1b1533;
  --vault-2: #251d45;
  --line: #352a5e;
  --pearl: #f1ecff;
  --haze: #a79dcc;
  --dim: #6f6597;
  --star: #ffc94a;
  --star-deep: #ff9f2e;
  --rose: #ff4f86;
  --mint: #35d0a8;
  --display: Sora, 'Avenir Next', system-ui, sans-serif;
  --body: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom, 0px));
  --gutter: 16px;
  --column: 480px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--pearl); }
html { background: radial-gradient(80% 50% at 50% -10%, rgba(124, 82, 255, 0.16), transparent 70%), #0c0918; }
body {
  font: 500 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

/* Shell ------------------------------------------------------------------------------------- */
.shell {
  height: var(--app-height, 100dvh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  max-width: var(--column);
  margin: 0 auto;
  padding-top: var(--safe-top);
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(124, 82, 255, 0.22), transparent 60%),
    var(--ink);
}
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gutter) 8px;
  padding-left: calc(var(--gutter) + var(--tg-safe-left, 0px));
  padding-right: calc(var(--gutter) + var(--tg-safe-right, 0px));
}
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; color: var(--pearl); text-decoration: none; font: 700 17px var(--display); white-space: nowrap; }
@media (max-width: 359px) { .brand-name { display: none; } }
.brand-mark { width: 32px; height: 32px; object-fit: contain; flex: none; }
.brand-name { font-weight: 800; letter-spacing: -0.035em; }
.brand-accent { color: var(--star); }
.demo-flag { font-size: 11px; font-weight: 700; color: var(--haze); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.balance { margin-left: auto; display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; }
.balance-pill {
  display: flex; align-items: center; min-height: 36px; padding: 0 14px 0 10px;
  border-radius: 99px; border: 1px solid rgba(255, 201, 74, 0.45);
  background: linear-gradient(180deg, rgba(255, 201, 74, 0.14), rgba(255, 201, 74, 0.04));
}
.balance .stars b { font-size: 16px; }
.balance-off { color: var(--haze); font-weight: 700; font-size: 13px; }
.skeleton.sk-balance-skeleton { width: 72px; height: 16px; border-radius: 8px; }

.stars { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stars b { font: 700 1em var(--display); font-variant-numeric: tabular-nums; }
.star { width: 1em; height: 1em; fill: var(--star); flex: none; filter: drop-shadow(0 0 4px rgba(255, 201, 74, 0.4)); }

/* Live drops: only on the case screens, where they are social proof; elsewhere the room goes to play. */
.ticker { grid-row: 2; }
.shell:not([data-screen='cases']):not([data-screen='case']) .ticker { display: none; }
.view { grid-row: 3; }
.tabs { grid-row: 4; }
.ticker {
  display: flex; align-items: center; gap: 10px; padding: 0 0 10px var(--gutter);
  border-bottom: 1px solid rgba(53, 42, 94, 0.6);
}
.ticker-label { font-size: 12px; font-weight: 700; color: var(--mint); display: flex; align-items: center; gap: 6px; }
.ticker-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.ticker-track {
  display: flex; gap: 8px; overflow: hidden; flex: 1; min-width: 0; height: 38px; align-items: center;
  mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.ticker-empty { font-size: 12px; color: var(--dim); white-space: nowrap; }
.drop {
  display: flex; align-items: center; gap: 7px; flex: none; padding: 3px 10px 3px 3px; border-radius: 10px;
  background: var(--vault); border: 1px solid color-mix(in srgb, var(--rarity) 45%, transparent);
  animation: drop-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drop-art { width: 30px; height: 30px; border-radius: 7px; }
.drop > span { display: grid; line-height: 1.1; }
.drop b { font: 700 12px var(--display); color: var(--rarity); }
.drop small { font-size: 10.5px; color: var(--haze); white-space: nowrap; }
@keyframes drop-in { from { transform: translateX(-24px); opacity: 0; } }

.view {
  overflow-y: auto; overflow-x: hidden; padding: 16px var(--gutter) 24px; position: relative;
  padding-left: calc(var(--gutter) + var(--tg-safe-left, 0px));
  padding-right: calc(var(--gutter) + var(--tg-safe-right, 0px));
  -webkit-overflow-scrolling: touch;
}
.view:focus { outline: none; }

.tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px max(8px, var(--safe-bottom));
  background: rgba(18, 14, 34, 0.94); border-top: 1px solid rgba(53, 42, 94, 0.8);
}
.tab {
  display: grid; justify-items: center; gap: 2px; padding: 4px 0 2px; min-height: 48px; border-radius: 12px;
  color: #8a80b3; text-decoration: none; font-size: 11px; font-weight: 700;
}
.tab svg { width: 44px; height: 28px; padding: 3px 11px; border-radius: 99px; transition: background 160ms ease; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current='page'] { color: var(--star); }
.tab[aria-current='page'] svg { background: rgba(255, 201, 74, 0.14); }

/* Common blocks ------------------------------------------------------------------------------ */
.screen-head { margin-bottom: 16px; display: grid; gap: 4px; }
.screen-head h1 { font-size: clamp(22px, 6.8vw, 26px); font-weight: 800; }
.screen-head p { color: var(--haze); font-size: 14px; max-width: 34em; }
.screen-head.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.screen-head.row > div { display: grid; gap: 4px; }
.screen-head .stars { color: var(--pearl); }
.section-title { font-size: 16px; font-weight: 700; margin: 22px 0 10px; }
.muted { color: var(--haze); font-size: 13.5px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 0 18px; border-radius: 14px; border: 0;
  font: 700 15.5px var(--display); transition: transform 120ms ease, filter 120ms ease;
}
.button:active:not(:disabled) { transform: scale(0.98); }
.button.primary { background: linear-gradient(180deg, #ffd96e, #ffac38); color: #2a1a00; box-shadow: 0 6px 22px -8px rgba(255, 170, 56, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.button.primary .star { fill: #2a1a00; filter: none; }
.button.primary:disabled { background: var(--vault-2); color: var(--dim); box-shadow: none; }
.button.primary:disabled .star { fill: var(--dim); }
.button.secondary { background: var(--vault-2); border: 1px solid var(--line); color: var(--pearl); }
.button.ghost { background: transparent; color: var(--haze); border: 1px solid var(--line); }
.link { background: none; border: 0; color: var(--haze); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; padding: 8px; min-height: 44px; }

.input, .select {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px;
  background: var(--vault-2); border: 1px solid var(--line); color: var(--pearl);
}
.input:focus, .select:focus { border-color: var(--star); outline: none; }
.select { width: auto; appearance: none; padding-right: 34px; font-weight: 600; font-size: 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--haze) 50%), linear-gradient(135deg, var(--haze) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--haze); }

.gift-art { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--vault-2); }
.gift-art.thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; }

/* States */
.skeleton {
  border-radius: 14px; background: linear-gradient(100deg, var(--vault) 30%, #2a2150 50%, var(--vault) 70%);
  background-size: 300% 100%; animation: shimmer 1.4s linear infinite; margin-bottom: 12px;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton.sk-line-lg { height: 28px; width: 46%; }
.skeleton.sk-line { height: 16px; width: 82%; }
.skeleton.sk-case-card { aspect-ratio: 0.82; margin: 0; }
.skeleton.sk-reel { height: 176px; }
.skeleton.sk-button-lg { height: 50px; }
.skeleton.sk-row { height: 58px; }
.skeleton.sk-gift-card { aspect-ratio: 0.72; margin: 0; }
.skeleton.sk-wheel { width: 220px; height: 220px; border-radius: 50%; margin: 6px auto 18px; }
.skeleton.sk-gift-chip { width: 96px; height: 132px; flex: none; margin: 0; }
.skeleton.sk-chips { height: 30px; }
.skeleton.sk-chart { height: 220px; }
.skeleton.sk-panel { height: 150px; }
.skeleton.sk-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0; }
.profile-card .skeleton.sk-line-lg { margin: 0; }

.state { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 12px; }
.state h2 { font-size: 19px; }
.state p { color: var(--haze); max-width: 26em; font-size: 14px; }
.state .button { margin-top: 10px; min-width: 180px; }
.state-mark {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: radial-gradient(circle, rgba(255, 201, 74, 0.16), rgba(255, 201, 74, 0.04) 70%); border: 1px solid rgba(255, 201, 74, 0.3);
}
.state-mark .icon { width: 34px; height: 34px; fill: none; stroke: var(--star); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.state-error .state-mark { background: radial-gradient(circle, rgba(255, 79, 134, 0.16), rgba(255, 79, 134, 0.04) 70%); border-color: rgba(255, 79, 134, 0.4); }
.state-error .state-mark .icon { stroke: var(--rose); stroke-width: 1.8; }

/* Cases lobby -------------------------------------------------------------------------------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case-card {
  display: grid; grid-template-rows: 1fr auto auto; gap: 4px; padding: 12px 12px 12px; text-align: left;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--glow) 30%, var(--line));
  background:
    radial-gradient(90% 70% at 50% 34%, color-mix(in srgb, var(--glow) 32%, transparent), transparent 70%),
    var(--vault);
  min-height: 0; aspect-ratio: 0.82;
}
.case-card:active { transform: scale(0.985); }
.case-fan { position: relative; display: block; min-height: 0; }
.case-fan .case-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.case-fan .gift-art {
  position: absolute; width: 66%; left: 17%; top: 2%; border-radius: 16px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.7);
}
.case-fan .gift-art:nth-child(1) { transform: translateX(-30%) rotate(-11deg) scale(0.78); filter: brightness(0.7); }
.case-fan .gift-art:nth-child(2) { transform: translateX(30%) rotate(11deg) scale(0.78); filter: brightness(0.7); }
.case-fan .gift-art:nth-child(3) { transform: translateY(4%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--glow) 70%, transparent), 0 12px 28px -6px rgba(0, 0, 0, 0.8); }
/* The open box with the case's own gifts rising out of it (brand-art.ts caseBurst). */
/* The stage sits low in the art area, so the lid, its bow and the float never reach the card's top edge. */
.case-burst { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.case-burst-stage { position: relative; height: 86%; max-width: 100%; aspect-ratio: var(--ar); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45)); }
.case-burst-stage > * { position: absolute; display: block; }
.burst-lid, .burst-box { inset: 0; width: 100%; height: 100%; }
/* On a 2.4s beat (Ryan, 2026-10-19: "more energetic and less subtle"): each gift crouches, hops and lands with a
   squash; the lid pops and wobbles with the front gift, the glow flares and sparks rise. brand-art.ts sets the hop
   (--hop) so a gift's base stays behind the rim, and offsets each card's beat (--beat). The lid's lift and turn stay
   inside the 14% of the art area above the stage. */
.burst-lid { transform-origin: 50% calc(var(--lb) / 2); animation: burst-lid 2.4s calc(0s - var(--beat)) infinite; }
.burst-glow {
  left: calc(var(--ml) - 8%); width: calc(var(--mw) + 16%); top: calc(var(--rim) - 48%); height: 52%;
  background: radial-gradient(50% 50% at 50% 80%, rgba(255, 224, 120, 0.95), rgba(255, 159, 46, 0.45) 45%, transparent 72%);
  filter: blur(4px); transform-origin: 50% 80%;
  animation: burst-glow 2.4s ease-in-out calc(0s - var(--beat)) infinite;
}
.burst-gift {
  left: var(--x); bottom: var(--b); height: var(--h); width: var(--w); max-width: none;
  object-fit: contain; object-position: 50% 100%;
  translate: -50% 0; rotate: var(--tilt); filter: drop-shadow(0 4px 6px rgba(18, 14, 34, 0.55));
  animation: burst-rise 2.4s calc(var(--delay) - var(--beat)) infinite;
}
.case-burst-stage::after {
  content: ''; position: absolute; left: var(--ml); width: var(--mw); top: calc(var(--rim) - 62%); height: 56%;
  background:
    radial-gradient(circle at 14% 74%, #fff6d0 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 30% 34%, #ffe08a 0 2px, transparent 3px),
    radial-gradient(circle at 52% 18%, #fff6d0 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 46%, #ffe08a 0 2px, transparent 3px),
    radial-gradient(circle at 88% 26%, #fff6d0 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 42% 60%, #ffd36b 0 1.5px, transparent 2.5px);
  filter: drop-shadow(0 0 3px #ffc94d); opacity: 0;
  animation: burst-spark 2.4s ease-out calc(0s - var(--beat)) infinite;
}
@keyframes burst-rise {
  0%, 100% { transform: none; animation-timing-function: ease-out; }
  10% { transform: scale(1.06, 0.92); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  34% { transform: translateY(calc(-1 * var(--hop))) rotate(var(--wob)) scale(0.96, 1.07); animation-timing-function: ease-in; }
  56% { transform: scale(1.07, 0.9); animation-timing-function: ease-out; }
  68% { transform: translateY(calc(-0.18 * var(--hop))) scale(0.98, 1.03); animation-timing-function: ease-in-out; }
  80% { transform: none; }
}
@keyframes burst-lid {
  0%, 100% { transform: none; animation-timing-function: ease-out; }
  14% { transform: translateY(0.5%); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  36% { transform: translateY(-7%) rotate(-4deg); animation-timing-function: ease-in; }
  54% { transform: translateY(-1%) rotate(2deg); animation-timing-function: ease-out; }
  64% { transform: translateY(-2.5%) rotate(-1deg); animation-timing-function: ease-in-out; }
  78% { transform: none; }
}
@keyframes burst-glow { 0%, 100% { opacity: 0.65; transform: scale(0.9); } 34% { opacity: 1; transform: scale(1.15); } 60% { opacity: 0.8; transform: none; } }
@keyframes burst-spark { 0%, 22% { opacity: 0; transform: translateY(10%) scale(0.8); } 38% { opacity: 1; } 72%, 100% { opacity: 0; transform: translateY(-16%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .burst-lid, .burst-gift, .burst-glow { animation: none; } .case-burst-stage::after { display: none; } }
.case-name { font: 700 16px var(--display); }
.case-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.case-meta .stars { font-size: 15px; color: var(--star); }
.case-meta small { color: var(--dim); font-size: 12px; font-weight: 600; white-space: nowrap; }
.case-meta .count-short { display: none; }
@media (max-width: 374px) { .case-meta small { display: none; } }

/* Case detail and reel */
.detail-head h1 { font-size: 28px; }
.reel-stage {
  position: relative; height: 176px; border-radius: 20px; overflow: hidden; margin: 2px calc(-1 * var(--gutter) + 6px) 14px;
  background:
    radial-gradient(60% 90% at 50% 50%, rgba(124, 82, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #17112c, #1d1638);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.reel-stage { height: clamp(132px, 24vh, 176px); }
.reel-stage[data-lanes='3'] { height: clamp(204px, 40vh, 276px); }
.reel-stage[data-lanes='5'] { height: clamp(250px, 50vh, 340px); }
.reel-host { position: absolute; inset: 8px 0; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.reel-host canvas { display: block; }
.reel-needle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--star); box-shadow: 0 0 12px 1px rgba(255, 201, 74, 0.8); pointer-events: none; }
.reel-needle::before, .reel-needle::after { content: ''; position: absolute; left: -7px; border: 8px solid transparent; }
.reel-needle::before { top: 0; border-top-color: var(--star); }
.reel-needle::after { bottom: 0; border-bottom-color: var(--star); }
.open-row {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch;
  position: sticky; bottom: -24px; z-index: 2; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 14px;
  background: linear-gradient(180deg, rgba(18, 14, 34, 0), var(--ink) 35%);
}
.open-row .button { min-width: 0; white-space: nowrap; padding: 0 12px; }
.segmented { display: flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--vault); border: 1px solid var(--line); }
.segmented button { border: 0; background: none; color: var(--haze); padding: 0 11px; min-width: 44px; min-height: 44px; border-radius: 10px; font: 700 14px var(--display); }
.segmented button[aria-checked='true'] { background: var(--vault-2); color: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); }

.odds-list, .target-list, .players, .ledger, .seed-list, .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.odds-list li, .target-list button {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 7px 12px 7px 7px; border-radius: 14px; background: var(--vault); border: 1px solid transparent;
  box-shadow: inset 3px 0 0 var(--rarity); width: 100%; text-align: left;
}
.odds-name { display: grid; line-height: 1.25; min-width: 0; }
.odds-name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odds-name small { color: var(--rarity); font-size: 12px; font-weight: 700; }
.odds-list .stars, .target-list .stars { font-size: 14px; color: var(--pearl); }
.odds-chance { font: 700 14px var(--display); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; color: var(--haze); }

/* Result sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(8, 5, 18, 0); transition: background 220ms ease; }
.sheet-backdrop.open { background: rgba(8, 5, 18, 0.72); }
.sheet {
  width: 100%; max-width: var(--column); margin: 0 auto; max-height: 92%; overflow-y: auto; border-radius: 26px 26px 0 0;
  padding: 22px var(--gutter) calc(18px + var(--safe-bottom));
  background: var(--vault); border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet-backdrop.open .sheet { transform: none; }
.result {
  display: grid; justify-items: center; text-align: center; gap: 10px;
  background: radial-gradient(70% 40% at 50% 22%, color-mix(in srgb, var(--rarity) 30%, transparent), transparent 70%);
  margin: -22px calc(-1 * var(--gutter)) 0; padding: 26px var(--gutter) 0;
}
.result-kicker { color: var(--haze); font-weight: 700; }
.result h2 { font-size: 28px; font-weight: 800; }
.result-items { display: grid; gap: 10px; width: 100%; grid-template-columns: repeat(3, 1fr); }
.result-items.count-1 { grid-template-columns: minmax(0, 190px); justify-content: center; }
.result-items figure { margin: 0; display: grid; gap: 6px; }
.result-items .gift-art { box-shadow: 0 0 0 2px var(--rarity), 0 0 32px -4px var(--rarity); animation: reveal 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.result-items figcaption { display: grid; gap: 2px; font-size: 13px; }
.result-items figcaption .stars { justify-content: center; color: var(--star); }
.result-items.count-1 figcaption { font-size: 15px; }
@keyframes reveal { from { transform: scale(0.7); opacity: 0; } }
.result-net { font-size: 13.5px; font-weight: 700; }
.result-net.up { color: var(--mint); }
.result-net.down { color: var(--haze); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.result-actions .button { white-space: nowrap; padding: 0 12px; }
.result-again { width: 100%; margin-top: 4px; white-space: nowrap; }
.result-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.result-links .link { padding: 8px 10px; }

/* Inventory ---------------------------------------------------------------------------------- */
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gift-card {
  position: relative; display: grid; gap: 5px; padding: 6px 6px 9px; text-align: left; border-radius: 16px;
  background: var(--vault); border: 1px solid var(--line);
}
.gift-card .gift-art { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.gift-name { font-size: 12.5px; font-weight: 700; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 0 3px; }
.gift-foot .stars { font-size: 12.5px; color: var(--rarity); }
.gift-foot small { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
@media (max-width: 399px) { .gift-foot small { display: none; } }
.gift-card[aria-pressed='true'] { border-color: var(--star); box-shadow: 0 0 0 1px var(--star), 0 0 18px -6px var(--star); }
.gift-check { position: absolute; top: 11px; right: 11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(18, 14, 34, 0.5); }
.gift-card[aria-pressed='true'] .gift-check { background: var(--star); border-color: var(--star); }
.gift-card[aria-pressed='true'] .gift-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #2a1a00; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gift-lock { position: absolute; top: 11px; left: 11px; font-size: 10px; font-weight: 800; background: rgba(18, 14, 34, 0.8); padding: 2px 6px; border-radius: 6px; }
.action-bar {
  position: sticky; bottom: -24px; margin: 16px calc(-1 * var(--gutter)) -24px; padding: 10px var(--gutter) 14px;
  display: grid; grid-template-columns: auto 1fr; gap: 8px 10px;
  background: var(--vault); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.8);
  transform: translateY(110%); transition: transform 200ms ease; pointer-events: none;
}
.action-bar.show { transform: none; pointer-events: auto; }

/* Upgrade ------------------------------------------------------------------------------------ */
.wheel-box { position: relative; width: 220px; height: 220px; margin: 0 auto 8px; }
.wheel { width: 100%; height: 100%; overflow: visible; }
.wheel-track { fill: none; stroke: #2b2350; stroke-width: 16; }
.wheel-win { fill: none; stroke-width: 16; stroke-linecap: butt; transition: stroke-dasharray 420ms ease; filter: drop-shadow(0 0 8px rgba(255, 170, 56, 0.55)); }
.wheel-pointer { transform-origin: 110px 110px; fill: var(--pearl); }
.wheel-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.wheel-chance { font: 800 34px var(--display); font-variant-numeric: tabular-nums; }
.wheel-ppm { color: var(--haze); font-size: 12px; font-weight: 600; }
.wheel-box[data-result] .wheel-chance { font-size: 26px; }
.wheel-box[data-result='won'] .wheel-chance { color: var(--mint); }
.wheel-box[data-result='lost'] .wheel-chance { color: var(--rose); }
.upgrade-summary { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--haze); font-size: 13.5px; font-weight: 600; flex-wrap: wrap; min-height: 22px; }
.upgrade-summary .stars { color: var(--pearl); }
.upgrade-summary i { font-style: normal; color: var(--star); font-size: 20px; line-height: 1; }
.picker { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
.picker::-webkit-scrollbar { display: none; }
.gift-chip {
  flex: none; width: 96px; display: grid; gap: 4px; padding: 6px 6px 8px; border-radius: 14px; text-align: left;
  background: var(--vault); border: 1px solid var(--line); font-size: 12px; font-weight: 700;
}
.gift-chip .gift-art { border-radius: 10px; }
.gift-chip > span:not(.stars) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-chip .stars { color: var(--rarity); }
.gift-chip[aria-checked='true'], .gift-chip[aria-pressed='true'], .target-list button[aria-checked='true'] { border-color: var(--star); box-shadow: 0 0 0 1px var(--star), 0 0 18px -6px var(--star); }
.target-list button[aria-checked='true'] { box-shadow: inset 3px 0 0 var(--rarity), 0 0 0 1px var(--star); }
.target-list .odds-name small { color: var(--haze); }
.target-list button[aria-checked='true'] .odds-chance { color: var(--star); }
.target-none { color: var(--haze); font-size: 13.5px; padding: 12px; background: var(--vault); border-radius: 14px; }
.sticky-cta { position: sticky; bottom: -24px; margin: 18px calc(-1 * var(--gutter)) -24px; padding: 12px var(--gutter) 14px; background: linear-gradient(180deg, transparent, var(--ink) 30%); }
.sticky-cta .button { width: 100%; }

/* Crash -------------------------------------------------------------------------------------- */
.round-id { color: var(--dim); font-size: 13px; font-weight: 600; }
.crash-history { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 0 var(--gutter); scrollbar-width: none; }
.crash-history::-webkit-scrollbar { display: none; }
.chain-box:empty { display: none; }
.chain-box { display: grid; gap: 8px; margin-bottom: 12px; }
.chain-notice { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--vault); border-left: 3px solid var(--star); font-size: 13px; }
.chain-archive summary { cursor: pointer; font-size: 13px; color: var(--haze); }
.chain-notice.warning { border-left-color: var(--rose); }
.chain-archive.failures summary { color: var(--rose); font-weight: 700; }
.chain-archive .crash-history { margin-top: 8px; margin-bottom: 0; }
.crash-chip { flex: none; font: 700 12.5px var(--display); padding: 5px 10px; border-radius: 9px; background: var(--vault); font-variant-numeric: tabular-nums; }
.crash-chip.low { color: var(--haze); }
.crash-chip.mid { color: var(--mint); }
.crash-chip.high { color: var(--star); background: rgba(255, 201, 74, 0.12); }
.crash-chip.none { color: var(--dim); font: 600 12.5px var(--body); }
.crash-chart { position: relative; height: clamp(150px, 30vh, 228px); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #17112c, #1d1638); border: 1px solid var(--line); }
.chart-host { position: absolute; inset: 0; }
.chart-host canvas { display: block; }
.crash-overlay { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding-bottom: 18px; }
.crash-number { font: 800 clamp(36px, 11vw, 48px)/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.crash-status { color: var(--haze); font-weight: 700; font-size: 13px; margin-top: 6px; }
.crash-chart[data-phase='running'] .crash-number { color: var(--star); }
.crash-chart[data-phase='crashed'] .crash-number { color: var(--rose); }
.crash-chart[data-phase='crashed'] { border-color: rgba(255, 79, 134, 0.5); }
.crash-chart[data-phase='betting'] .crash-overlay { flex-direction: column-reverse; }
.bet-panel { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 10px; margin-top: 12px; align-items: end; }
.bet-field { grid-column: 1 / -1; }
.bet-row { display: flex; gap: 6px; }
.bet-row .input-wrap { flex: 1; min-width: 0; }
.bet-row .chip { flex: none; width: 48px; }
.bet-panel .crash-action { min-height: 46px; padding: 0 10px; white-space: nowrap; }
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-left: 32px; font: 700 16px var(--display); }
.input-wrap::before { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 700 15px var(--display); pointer-events: none; }
.star-input::before { content: '★'; color: var(--star); }
.times-input::before { content: '×'; color: var(--haze); }
.chips { display: flex; gap: 6px; }
.chip { flex: 1; min-height: 44px; border-radius: 9px; border: 1px solid var(--line); background: var(--vault); color: var(--haze); font: 700 12.5px var(--display); }

.crash-action[data-kind='cashout'] { background: linear-gradient(180deg, #5ef0c8, #22b48e); color: #032219; box-shadow: 0 6px 22px -8px rgba(53, 208, 168, 0.8); }
.crash-action[data-kind='cashout'] .star { fill: #032219; }
.players li { display: grid; grid-template-columns: 1fr auto 86px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--vault); font-size: 14px; }
.players .stars { font-size: 13.5px; }
.player-amount-unknown { color: var(--dim); font-size: 12.5px; font-weight: 600; }
.player-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-result { display: grid; justify-items: end; font: 700 13px var(--display); line-height: 1.2; }
.player-result .stars { font-size: 11.5px; }
.players li.won .player-result { color: var(--mint); }
.players li.busted { opacity: 0.55; }
.players li.busted .player-result { color: var(--rose); }
.players li.self { box-shadow: inset 0 0 0 1px rgba(255, 201, 74, 0.5); }
.players-empty { display: block !important; color: var(--dim); text-align: center; }

/* Profile ------------------------------------------------------------------------------------ */
.profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 18px; }
.profile-card h1 { font-size: 22px; }
.profile-card p { color: var(--haze); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 24px var(--display); color: #2a1a00; background: linear-gradient(145deg, #ffe08a, var(--star-deep)); }
.badge { font-size: 11px; font-weight: 800; color: #d9c8ff; background: rgba(166, 91, 255, 0.22); padding: 1px 7px; border-radius: 99px; }
.profile-balance { display: grid; justify-items: end; gap: 2px; }
.profile-balance small { color: var(--dim); font-size: 11.5px; font-weight: 700; }
.profile-balance .stars { font-size: 17px; }
.panel { background: var(--vault); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 12px; margin-bottom: 12px; }
.panel h2 { font-size: 17px; }
.kv { display: grid; gap: 4px; font-size: 13px; color: var(--haze); font-weight: 600; }
.kv.inline { grid-template-columns: 1fr auto; }
.kv b { color: var(--pearl); font: 700 14px var(--display); }
.hash { font: 500 12px/1.45 var(--mono); color: #d9d1ff; word-break: break-all; background: var(--ink); border-radius: 10px; padding: 8px 10px; display: block; }
.seed-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.seed-row .input { font: 500 14px var(--mono); min-width: 0; }
.seed-row .button { min-height: 46px; }
.receipt { min-height: 140px; padding: 10px 12px; font: 500 12px/1.45 var(--mono); resize: vertical; }
.verifier .select { width: 100%; }
.verdict { font: 700 15px var(--display); }
.verdict.ok { color: var(--mint); }
.verdict.bad { color: var(--rose); }
.verify-out { display: grid; gap: 8px; }
.checks li { display: grid; gap: 2px; padding: 8px 10px 8px 32px; border-radius: 10px; background: var(--ink); position: relative; font-size: 13.5px; }
.checks li small { color: var(--haze); font-size: 12px; overflow-wrap: anywhere; }
.checks li::before { position: absolute; left: 10px; top: 8px; font-weight: 800; }
.checks li.ok::before { content: '✓'; color: var(--mint); }
.checks li.bad::before { content: '✕'; color: var(--rose); }
.checks li.note::before { content: '!'; color: var(--star); }
.seed-list li { display: grid; gap: 4px; }
.seed-list small { color: var(--dim); font-size: 12px; }
.ledger li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(53, 42, 94, 0.6); }
.ledger li:last-child { border: 0; }
.ledger li > span:first-child { display: grid; font-size: 13.5px; }
.ledger small { color: var(--dim); font-size: 12px; }
.ledger .up, .ledger .down { display: flex; align-items: center; gap: 2px; font: 700 14px var(--display); }
.ledger .up { color: var(--mint); }
.ledger .down { color: var(--haze); }

/* Toast */
#toast {
  position: fixed; left: 50%; top: calc(var(--safe-top) + 6px); z-index: 40; max-width: min(92vw, 420px);
  transform: translate(-50%, -16px); opacity: 0; transition: transform 200ms ease, opacity 200ms ease; pointer-events: none;
  padding: 11px 16px; border-radius: 14px; background: #2d2454; border: 1px solid var(--line); font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast[data-tone='error'] { border-color: rgba(255, 79, 134, 0.6); }
#toast[data-tone='success'] { border-color: rgba(53, 208, 168, 0.6); }

@media (min-width: 420px) {
  .case-grid { gap: 14px; }
  .reel-stage { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .skeleton { animation: none; }
}

/* Sealed receipts and seed input */
.verify-body { display: grid; gap: 12px; }
.sealed { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--ink); border: 1px dashed var(--line); }
.sealed b { font: 700 15px var(--display); color: var(--pearl); }
.sealed p { color: var(--haze); font-size: 13px; margin-top: 2px; word-break: break-word; }
.sealed-mark { width: 30px; height: 30px; border-radius: 9px; position: relative; background: rgba(53, 208, 168, 0.12); border: 1.5px solid var(--mint); }
.sealed-mark::before { content: ''; position: absolute; left: 8px; top: 4px; width: 10px; height: 9px; border: 2px solid var(--mint); border-bottom: 0; border-radius: 6px 6px 0 0; }
.sealed-mark::after { content: ''; position: absolute; left: 6px; top: 12px; width: 15px; height: 11px; border-radius: 3px; background: var(--mint); }
.field-error { color: var(--rose); font-size: 12.5px; font-weight: 600; min-height: 1em; }
.muted.small { font-size: 12.5px; }
.action-bar[hidden] { display: none; }
.sealed.mismatch { border-color: rgba(255, 79, 134, 0.7); }
.sealed.mismatch b { color: var(--rose); }
.sealed.mismatch .sealed-mark { background: rgba(255, 79, 134, 0.14); border-color: var(--rose); }
.sealed.mismatch .sealed-mark::before { border-color: var(--rose); }
.sealed.mismatch .sealed-mark::after { background: var(--rose); }
.fair-status { font-size: 13.5px; font-weight: 600; color: var(--haze); }
.fair-status.ok { color: var(--mint); }
.fair-status.bad { color: var(--rose); }
/* Under a standing mismatch while a check runs: quiet, outside the alert (TGC-066). */
.fair-note { font-size: 13px; margin: 0; }
.fair-note[hidden] { display: none; }
.crash-chip.checked::after { content: '✓'; margin-left: 4px; color: var(--mint); font-size: 11px; }
.crash-chip.failed { color: var(--rose); box-shadow: inset 0 0 0 1px rgba(255, 79, 134, 0.6); }
.crash-chip.failed::after { content: '!'; margin-left: 4px; font-weight: 800; }
.fair-alert { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 79, 134, 0.1); border: 1px solid rgba(255, 79, 134, 0.6); }
.fair-alert b { font: 700 15px var(--display); color: var(--rose); }
.fair-alert p { font-size: 13px; color: var(--pearl); }
.fair-alert.warn { background: rgba(255, 201, 74, 0.08); border-color: rgba(255, 201, 74, 0.5); }
.fair-alert.warn b { color: var(--star); }
.fair-alert .button { min-height: 44px; justify-self: start; }
.fair-card { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.fair-card b { font: 700 15px var(--display); color: var(--pearl); }
.fair-card p { font-size: 13px; color: var(--pearl); }
.fair-card p.muted { color: var(--haze); }
.fair-card .button { min-height: 44px; justify-self: start; white-space: normal; text-align: center; }
.verdict.warn { color: var(--star); }

/* Loop 1: structure -------------------------------------------------------------------------- */
.case-price { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px; background: rgba(255, 201, 74, 0.12); border: 1px solid rgba(255, 201, 74, 0.35); }
.case-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.case-facts span { font-size: 12.5px; font-weight: 700; color: var(--haze); padding: 3px 9px; border-radius: 99px; background: var(--vault); border: 1px solid var(--line); }
.footnote { color: var(--dim); font-size: 12.5px; margin-top: 14px; }
.hint { color: var(--dim); font-size: 12.5px; margin: -6px 0 12px; }

.action-bar { grid-template-columns: 1fr auto; align-items: center; }
.action-count { font-weight: 700; color: var(--pearl); }
.action-bar .button.ghost { min-height: 44px; }
.action-bar > .button.primary { grid-column: 1 / -1; }
.action-bar.with-upgrade > .button.primary { grid-column: auto; }

.upgrade-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 4px; }
/* Height equals width outright: with height auto and aspect-ratio the box came out ~6px taller than
   the ring at 390px, so the chance text sat below the wheel's centre (capture-ux canvases check). */
.upgrade-stage .wheel-box { width: clamp(140px, 42vw, 220px); height: clamp(140px, 42vw, 220px); margin: 0; }
.slot { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; min-width: 0; }
.slot .gift-art { width: min(100%, 92px); border-radius: 14px; box-shadow: 0 0 0 2px var(--rarity), 0 0 22px -6px var(--rarity); }
.slot-empty { display: block; }
.slot-label { color: var(--haze); font-size: 12px; font-weight: 700; }
.slot-name { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .stars { font-size: 12.5px; color: var(--rarity); }
.slot-mark { position: absolute; top: 30%; padding: 2px 8px; border-radius: 6px; font: 800 12px var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.slot[data-mark='Gone'] .gift-art { filter: grayscale(1) brightness(0.5); box-shadow: 0 0 0 2px var(--rose); }
.slot[data-mark='Gone'] .slot-mark { background: var(--rose); color: #2a0010; }
.slot[data-mark='Won'] .slot-mark { background: var(--mint); color: #032219; }
.upgrade-stage .wheel-centre { inset: 17%; }
.upgrade-stage .wheel-chance { font-size: clamp(24px, 7.6vw, 34px); }
.wheel-box[data-result] .wheel-chance { font-size: clamp(15px, 4.6vw, 22px); }
.wheel-ppm { font-size: 11px; line-height: 1.25; }

details.fold { padding: 0; gap: 0; }
details.fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border: solid var(--haze); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 160ms ease; }
details.fold[open] > summary::after { transform: rotate(-135deg); }
.fold-body { display: grid; gap: 12px; padding: 0 16px 16px; }
.pill { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.pill.ok { color: var(--mint); background: rgba(53, 208, 168, 0.14); }
.pill.warn { color: var(--star); background: rgba(255, 201, 74, 0.14); }
.pill.bad { color: var(--rose); background: rgba(255, 79, 134, 0.14); }

.wallet { display: grid; justify-items: center; text-align: center; gap: 10px; }
.wallet h2 { font-size: 34px; }
.wallet .muted { max-width: 26em; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 6px; }
.wallet-actions .button.primary { grid-column: 1 / -1; }


/* Loop 2: layout ------------------------------------------------------------------------------ */
.target-list button { grid-template-columns: auto minmax(0, 1fr) auto; }
.target-list .odds-name small { display: flex; align-items: center; gap: 4px; }
.target-list .odds-name small .stars { font-size: 12px; color: var(--pearl); }
.action-bar .action-count { align-self: center; }
.upgrade-draw { text-align: center; color: var(--haze); font-size: 12.5px; font-weight: 600; min-height: 1.45em; font-variant-numeric: tabular-nums; }

/* Loop 3: navigation and discovery ------------------------------------------------------------- */
.case-facts .stars { font-size: 1em; }
.case-facts .star { filter: none; }
.mode-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mode-tile {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--vault); color: var(--pearl);
}
.mode-tile .icon { width: 40px; height: 40px; padding: 8px; border-radius: 12px; fill: none; stroke: var(--star); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: rgba(255, 201, 74, 0.1); }
.mode-crash .icon, .mode-games .icon { stroke: var(--mint); background: rgba(53, 208, 168, 0.1); }
/* The same 40px footprint as the icon it replaces, so the tile text keeps its room. */
.mode-tile .game-art-img { width: 40px; height: 40px; object-fit: contain; }
.mode-tile span { display: grid; gap: 1px; }
.mode-tile b { font: 700 15px var(--display); }
.mode-tile small { color: var(--haze); font-size: 12.5px; }
.mode-tile:active { transform: scale(0.99); }

/* Loop 4: column, docked case controls, wallet --------------------------------------------------- */
@media (min-width: 520px) {
  .shell { box-shadow: 0 0 0 1px rgba(53, 42, 94, 0.6), 0 0 80px rgba(0, 0, 0, 0.5); }
}
/* The case page is a sub-page: no tab bar, a back link, and the open controls docked at the bottom. */
.shell[data-screen='case'] .tabs { display: none; }
.shell[data-screen='case'] .open-row { padding-bottom: max(14px, calc(var(--safe-bottom) + 8px)); }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0 0 -6px; padding: 0 10px 0 6px;
  border: 0; background: none; color: var(--haze); font-weight: 700; font-size: 14px;
}
.back-link::before { content: ''; width: 9px; height: 9px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.open-row { margin-top: 16px; }
.section-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.range { display: inline-flex; align-items: center; gap: 4px; color: var(--haze); font-size: 13px; }
.range .stars { color: var(--pearl); }
.result-rarity { color: var(--rarity); font-weight: 800; font-size: 12px; text-transform: capitalize; }
.result-net { display: flex; align-items: center; gap: 8px; }
.multiplier { padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); font: 800 12.5px var(--display); }
.balance { gap: 0; }
.balance-group { margin-left: auto; display: flex; align-items: center; }
.balance-group .balance { margin-left: 0; }
/* The "+" is its own button: a 44px target around the 26px coin, overlapping the pill as before. */
.balance-add { width: 44px; height: 44px; margin-left: -21px; display: grid; place-items: center; flex: none; border: 0; padding: 0; background: none; cursor: pointer; }
.balance-add-dot {
  width: 26px; height: 26px; border-radius: 50%; position: relative;
  background: linear-gradient(180deg, #ffd96e, #ffac38); box-shadow: 0 0 0 3px var(--ink);
}
.balance-add-dot::before, .balance-add-dot::after { content: ''; position: absolute; left: 50%; top: 50%; background: #2a1a00; border-radius: 1px; transform: translate(-50%, -50%); }
.balance-add-dot::before { width: 11px; height: 2.5px; }
.balance-add-dot::after { width: 2.5px; height: 11px; }
.balance-pill { padding-right: 18px; }
.deposit-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.deposit-methods li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line); }
.deposit-methods span { display: grid; }
.deposit-methods b { font-size: 14px; }
.deposit-methods small { color: var(--haze); font-size: 12px; }
.deposit-methods em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--haze); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); }
.case-facts span { display: inline-flex; align-items: center; gap: 4px; }

/* Loop 5: guidance and quick picks -------------------------------------------------------------- */
.multipliers { display: flex; gap: 6px; margin-bottom: 10px; }
.multipliers .chip { flex: 1; }
.chip[aria-pressed='true'] { color: var(--ink); background: var(--star); border-color: var(--star); }
.chip:disabled, .bet-panel .input:disabled { opacity: 0.45; }

/* Loop 6: motion and feedback ------------------------------------------------------------------- */
/* While the reel spins the Open button stays gold with moving stripes instead of greying out. */
.button.primary.busy:disabled {
  color: #2a1a00; box-shadow: none;
  background: repeating-linear-gradient(-45deg, #ffd96e 0 14px, #ffc456 14px 28px) 0 0 / 40px 40px;
  animation: stripes 700ms linear infinite;
}
@keyframes stripes { to { background-position: 40px 0; } }
/* A slow ray burst behind the art for a result worth at least its price (data-won, gifts.ts
   resultWon), in the best gift's rarity colour; a loss shows none however rare the gift. */
.result { position: relative; isolation: isolate; overflow: hidden; }
.result[data-won='true']::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 190px; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rarity) 26%, transparent) 0 8deg, transparent 8deg 22deg);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  animation: rays 18s linear infinite;
}
@keyframes rays { to { transform: rotate(1turn); } }
.result h2 { text-shadow: 0 0 24px color-mix(in srgb, var(--rarity) 50%, transparent); }

/* Loop 7: sheets and profile ------------------------------------------------------------------- */
.sheet { position: relative; padding-top: 26px; }
.sheet-grabber { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
.sheet-close {
  position: absolute; right: 8px; top: 8px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none;
}
.sheet-close::before, .sheet-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: var(--haze); }
.sheet-close::before { transform: rotate(45deg); }
.sheet-close::after { transform: rotate(-45deg); }
.result { margin-top: -26px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat {
  display: grid; gap: 2px; justify-items: start; min-height: 60px; padding: 10px 12px; text-align: left;
  border-radius: 14px; border: 1px solid var(--line); background: var(--vault); color: var(--pearl);
}
.stat small { color: var(--haze); font-size: 12px; font-weight: 700; }
.stat b { font: 700 16px var(--display); font-variant-numeric: tabular-nums; }
.stat .stars { font-size: 1em; }

/* Loop 8: reel controls -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  .open-row { grid-template-columns: auto 1fr; }
  .open-row .segmented button { flex: none; min-width: 44px; padding: 0 6px; }
  .wide-only { display: none; }
}
.reel-fast {
  position: absolute; top: 0; right: 0; z-index: 2; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center;
}
.reel-fast svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 10px; fill: var(--haze); background: rgba(18, 14, 34, 0.72);
  border: 1px solid var(--line); transition: fill 160ms ease, background 160ms ease;
}
.reel-fast[aria-pressed='true'] svg { fill: #2a1a00; background: var(--star); border-color: var(--star); }
.reel-sound { left: 0; right: auto; }

/* Loop 9: states and badges -------------------------------------------------------------------- */
.tab { position: relative; }
.tab[data-badge]::after {
  content: attr(data-badge); position: absolute; top: 0; left: 50%; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--rose); color: #fff; font: 800 11px/18px var(--display); text-align: center; box-shadow: 0 0 0 2px var(--ink);
}

/* Loop 10: finish ------------------------------------------------------------------------------- */
.crash-chip.none { background: none; padding-left: 0; }
.screen-head.row .round-id { align-self: start; margin-top: 8px; white-space: nowrap; }
.view.enter > * { animation: enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
/* Short screens keep the bet button above the fold: the explainer gives way first. */
@media (max-height: 700px) { .crash-sub { display: none; } }

/* Loop 12: inventory filters ------------------------------------------------------------------- */
.filters { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 0 var(--gutter); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip.filter { flex: none; padding: 0 14px; border-radius: 99px; color: var(--pearl); }
.chip.filter[style]:not([aria-pressed='true'])::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--rarity, transparent); vertical-align: 1px; }

/* Review fixes (TGC-015) ------------------------------------------------------------------------- */
.stat { min-width: 0; }
.stat .stars { gap: 3px; }
/* Upgrade: the button pins to the top of the screen under the stage instead of floating over lists. */
.sticky-cta.pinned {
  top: -16px; bottom: auto; z-index: 3; margin: 6px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 10px;
  background: var(--ink); box-shadow: 0 10px 16px -12px rgba(0, 0, 0, 0.9);
}
.sticky-cta.pinned .button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 50px; }
/* Toasts sit above the tab bar or docked controls, clear of the balance. */
#toast { top: auto; bottom: calc(var(--safe-bottom) + 96px); transform: translate(-50%, 16px); }
#toast.show { transform: translate(-50%, 0); }
.shell[data-offline] .ticker-label { color: var(--dim); }
.shell[data-offline] .ticker-label::before { background: var(--dim); box-shadow: none; }
.sell-note { color: var(--dim); font-size: 12px; text-align: center; grid-column: 1 / -1; }
.action-bar .sell-note { margin: -2px 0 0; }
.receipt-data > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--haze); font-weight: 700; font-size: 13.5px; }
.receipt-data[open] > summary { margin-bottom: 6px; }
.checks.brief li.ok small { display: none; }
.check-list .link { justify-self: start; padding-left: 0; }
.check-list { display: grid; gap: 4px; }
/* Stat tiles size by the column, not the viewport: under 440px of content the balance takes a full row. */
.view { container-type: inline-size; }
/* Sized on the tile, so cqi resolves against the column (the tile is a container itself). */
.stat { font-size: clamp(14px, 4.4cqi, 16px); }
.stat b { font-size: 1em; }
@container (max-width: 439px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat:first-child { grid-column: 1 / -1; }
}
/* The open label sheds words as the column narrows: "Open ×3 for ★1,626" → "Open ×3 ★1,626" → "Open ★1,626". */
@container (max-width: 399px) {
  .roomy-only { display: none; }
  .open-row .button { padding: 0 8px; font-size: 15px; }
}
/* Russian (TGC-079): "Открыть" is three letters longer than "Open"; the narrowest column takes a smaller label. */
@container (max-width: 339px) {
  :root[lang='ru'] .open-row .button { padding: 0 6px; font-size: 13px; }
}
/* Russian gift counts ("6 подарков") need more room than the card's meta row has below 420px: "6 шт." stands in. */
@media (max-width: 419px) {
  :root[lang='ru'] .case-meta .count-long { display: none; }
  :root[lang='ru'] .case-meta .count-short { display: inline; }
}

/* TGC-034 ----------------------------------------------------------------------------------------- */
.receipt-data > summary { list-style: none; gap: 10px; }
.receipt-data > summary::-webkit-details-marker { display: none; }
.receipt-data > summary::after { content: ''; width: 7px; height: 7px; border: solid var(--haze); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 160ms ease; }
.receipt-data[open] > summary::after { transform: rotate(-135deg); }
/* Full numbers whenever they fit; the short form (1.2M) only in a tile too narrow for seven digits. */
.stat { container-type: inline-size; }
.stat .short { display: none; }
/* --chars is the number's length; 0.64em is Sora's tabular digit and comma average plus slack, and
   22px the star and its gap. The short form takes over below the width where 12px no longer fits. */
.stat .long { font-size: min(1em, calc((100cqi - 22px) / (var(--chars, 6) * 0.64))); }
@container (max-width: 92px) {
  .stat [data-len='9'] .long { display: none; }
  .stat [data-len='9'] .short { display: inline; }
}
@container (max-width: 99px) {
  .stat [data-len='10'] .long { display: none; }
  .stat [data-len='10'] .short { display: inline; }
}
@container (max-width: 107px) {
  .stat [data-len='11'] .long { display: none; }
  .stat [data-len='11'] .short { display: inline; }
}
@container (max-width: 114px) {
  .stat [data-len='12'] .long { display: none; }
  .stat [data-len='12'] .short { display: inline; }
}
@container (max-width: 122px) {
  .stat [data-len='13'] .long,
  .stat [data-len='14'] .long { display: none; }
  .stat [data-len='13'] .short,
  .stat [data-len='14'] .short { display: inline; }
}
/* Operator pause: the strip shows on every screen with the reason and a retry. */
.pause-note { display: none; }
.shell[data-paused][data-screen] .ticker { display: flex; padding-right: var(--gutter); }
.shell[data-paused] .ticker-track { display: none; }
.shell[data-paused] .pause-note { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.shell[data-paused] .ticker-label { color: var(--rose); }
.shell[data-paused] .ticker-label::before { background: var(--rose); box-shadow: 0 0 8px var(--rose); }
.pause-text { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--pearl); line-height: 1.3; }
.pause-retry { flex: none; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--vault-2); color: var(--pearl); font: 700 13px var(--display); }
.pause-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell[data-paused] .crash-chart { height: clamp(110px, 20vh, 228px); }

/* Activity: Stars and gift movements side by side (TGC-038). */
.ledger .amounts { display: grid; justify-items: end; gap: 2px; }
.ledger .gift-move { color: var(--pearl); font-size: 13px; }
.ledger .gift-move.down { color: var(--haze); }
.ledger .gift-move .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 3px; }

/* Upgrade after the last gift is gone: no empty picker rows under their headings. */
.view.no-gifts .with-gifts, .view.no-gifts .picker, .view.no-gifts .multipliers { display: none; }
.view.no-gifts .target-list { margin-top: 16px; }

/* Daily free case (TGC-055): a lobby card above the shelf, and its note on the case screen. */
.free-card {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 10px 12px; min-height: 64px; border-radius: 16px; text-align: left; color: var(--pearl);
  border: 1px solid rgba(53, 208, 168, 0.45); background: linear-gradient(120deg, rgba(53, 208, 168, 0.12), rgba(124, 82, 255, 0.1));
}
.free-card[data-ready='false'] { border-color: var(--line); background: var(--vault); }
.free-art { width: 44px; height: 44px; display: grid; place-items: center; }
.free-art .gift-art, .free-cover { width: 44px; height: 44px; object-fit: contain; }
.free-text { display: grid; gap: 2px; min-width: 0; }
.free-text b { font: 700 15px var(--display); }
.free-text small { color: var(--haze); font-size: 12.5px; }
.free-cta { font: 700 14px var(--display); color: var(--mint); white-space: nowrap; }
.free-cta.button { min-height: 44px; padding: 0 16px; font-size: 15px; }
.free-card[data-ready='false'] .free-cta { color: var(--haze); }
/* The opt-in reminder sits under the card, outside its button (Phase 2). */
.free-block { margin-bottom: 14px; }
.free-block .free-card { margin-bottom: 0; }
.free-remind {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 4px; color: var(--haze); font-size: 13px; cursor: pointer;
}
/* The reminder switch: the real checkbox, invisible, spans the row; the track and knob show its state. */
.free-remind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.free-remind .switch {
  position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--vault, #1e1838);
  border: 1px solid var(--line); transition: background 160ms ease, border-color 160ms ease;
}
.free-remind .switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--haze); transition: transform 160ms ease, background 160ms ease;
}
.free-remind input:checked ~ .switch { background: var(--mint); border-color: var(--mint); }
.free-remind input:checked ~ .switch::after { transform: translateX(16px); background: #0d2a22; }
.free-remind input:checked ~ span:not(.switch) { color: var(--pearl); }
.free-remind input:focus-visible ~ .switch { outline: 2px solid var(--pearl); outline-offset: 2px; }
.free-remind input:disabled ~ .switch { opacity: 0.5; }
.free-remind-note { display: block; color: var(--haze); font-size: 12px; padding: 0 4px; }
.free-remind-note:empty { display: none; }
.free-note { color: var(--mint); font-size: 13px; font-weight: 700; margin: 12px 0 0; }
/* The free case has no count picker: its button takes the whole row. */
.open-row:has(> .open:only-child) { grid-template-columns: 1fr; }
/* Under 360px a ready card keeps its welcome line and puts "Open free" on a row of its own; an opened
   card keeps its title and action, and the line under the title goes. */
@media (max-width: 359px) {
  .free-card { min-height: 52px; padding: 6px 12px; }
  .free-card[data-ready='false'] .free-text small { display: none; }
  .free-card[data-ready='true'] { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .free-card[data-ready='true'] .free-cta { grid-column: 1 / -1; }
  .free-art, .free-art .gift-art, .free-cover { width: 36px; height: 36px; }
}
/* Under 360px a long gift name in the odds list wraps rather than being cut short. */
@media (max-width: 359px) { .odds-list .odds-name b { white-space: normal; } }

/* Games hub and game screens (TGC-051 UI) ---------------------------------------------------------- */
/* Game screens are sub-pages of Games: no tab bar, controls docked at the bottom. */
.shell[data-screen='crash'] .tabs, .shell[data-screen='dice'] .tabs,
.shell[data-screen='limbo'] .tabs, .shell[data-screen='plinko'] .tabs,
.shell[data-screen='mines'] .tabs { display: none; }
.shell[data-screen='crash'] .view { padding-bottom: max(24px, calc(var(--safe-bottom) + 16px)); }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.game-card {
  position: relative; display: grid; align-content: end; gap: 3px; min-height: 160px; padding: 10px 14px 14px; text-align: left;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--line)); color: var(--pearl);
  background: radial-gradient(90% 70% at 50% 24%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 70%), var(--vault);
}
.game-card:active { transform: scale(0.985); }
.game-card[disabled] { opacity: 0.55; cursor: default; }
.game-card[disabled]:active { transform: none; }
.tag-soon { background: var(--vault); color: var(--haze); }
.tone-mint { --tone: var(--mint); }
.tone-rose { --tone: var(--rose); }
.tone-star { --tone: var(--star); }
.tone-violet { --tone: #a65bff; }
.game-art { justify-self: center; width: 84px; height: 84px; margin-bottom: 6px; display: grid; place-items: center; }
.game-art:has(.icon) { width: 52px; height: 52px; margin: 16px 0 22px; border-radius: 16px; background: color-mix(in srgb, var(--tone) 18%, transparent); }
.game-art-img { width: 84px; height: 84px; object-fit: contain; }
.game-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.game-art .icon { width: 30px; height: 30px; fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-tag { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.tag-new { color: #032219; background: var(--mint); }
.tag-live { color: #2a0010; background: var(--rose); }
.tag-preview { color: var(--star); background: rgba(255, 201, 74, 0.14); }
.game-card b { font: 700 17px var(--display); }
.game-card small { color: var(--haze); font-size: 12.5px; line-height: 1.3; }
/* At 320px the longest title and tag ("Limbo" + "Preview") must still share a line. */
@media (max-width: 359px) {
  .game-card { padding-inline: 10px; }
  .game-card b { font-size: 15px; }
  .game-title { gap: 4px 5px; }
  .game-tag { font-size: 10.5px; padding: 2px 6px; }
}
.screen-head h1 .pill { font: 800 12px var(--body); vertical-align: middle; }
.game-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.game-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-stats > span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--vault); border: 1px solid var(--line); min-width: 0; }
.game-stats small { color: var(--haze); font-size: 12px; font-weight: 700; }
.game-stats b { font: 700 16px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-stats .stars { font-size: 1em; }
.game-dock {
  position: sticky; bottom: -24px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 10px;
  margin: 16px calc(-1 * var(--gutter)) -24px; padding: 26px var(--gutter) max(14px, calc(var(--safe-bottom) + 8px));
  /* Content scrolling under the dock fades out above the button rather than peeking out beside it
     (a "Риск" label half under Plinko's Drop at 390x844, TGC-079 post-integration). */
  background: linear-gradient(180deg, rgba(18, 14, 34, 0), var(--ink) 22px);
}
.game-dock.single { grid-template-columns: 1fr; }
.game-action { width: 100%; }

/* Dice */
.dice-result {
  display: grid; justify-items: center; gap: 2px; padding: 18px 12px 14px; border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #17112c, #1d1638); transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dice-number { font: 800 clamp(44px, 14vw, 60px)/1 var(--display); font-variant-numeric: tabular-nums; }
.dice-result[data-result='won'] { border-color: rgba(53, 208, 168, 0.6); box-shadow: 0 0 28px -10px var(--mint); }
.dice-result[data-result='won'] .dice-number { color: var(--mint); }
.dice-result[data-result='lost'] .dice-number { color: var(--rose); }
.dice-outcome { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; color: var(--haze); font-weight: 700; min-height: 44px; }
.dice-outcome .link { padding: 0 8px; }
.dice-recent { display: flex; gap: 6px; overflow-x: auto; margin: 10px calc(-1 * var(--gutter)) 4px; padding: 0 var(--gutter); scrollbar-width: none; min-height: 26px; }
.dice-recent::-webkit-scrollbar { display: none; }
.roll-chip { flex: none; font: 700 12.5px var(--display); padding: 4px 9px; border-radius: 9px; background: var(--vault); font-variant-numeric: tabular-nums; }
.roll-chip.won { color: var(--mint); }
.roll-chip.lost { color: var(--rose); }
.dice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dice-target { font: 700 16px var(--display); font-variant-numeric: tabular-nums; }
.chip.coin { flex: none; padding: 0 14px; border-radius: 99px; }
.dice-track { position: relative; height: 44px; margin-top: 6px; }
.dice-rail { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: rgba(255, 79, 134, 0.35); overflow: hidden; }
.dice-win { position: absolute; top: 0; bottom: 0; background: var(--mint); }
.dice-range { position: absolute; inset: 0; width: 100%; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.dice-range::-webkit-slider-runnable-track { height: 44px; background: none; }
.dice-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 7px; border-radius: 10px; background: var(--pearl); border: 3px solid var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.dice-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 10px; background: var(--pearl); border: 3px solid var(--ink); }
.dice-marker { position: absolute; top: -4px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--pearl); opacity: 0; pointer-events: none; }
.dice-marker.live { opacity: 1; }
.dice-marker[data-result='won'] { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.dice-marker[data-result='lost'] { background: var(--rose); box-shadow: 0 0 10px var(--rose); }
.dice-scale { display: flex; justify-content: space-between; color: var(--dim); font-size: 11.5px; font-weight: 700; margin: 0 2px 12px; }
.receipt-rows { display: grid; gap: 6px; width: 100%; text-align: left; }
.receipt-rows .kv b { font: 600 13px var(--mono); overflow-wrap: anywhere; text-align: right; }

/* Mines (TGC-054): a 5×5 board, square tiles, the board narrower on short screens so the dock stays near. */
.skeleton.sk-mines-board { width: min(100%, 420px); aspect-ratio: 1; margin: 12px auto; border-radius: 20px; }
.mines-status {
  display: grid; justify-items: center; gap: 2px; padding: 10px 12px 6px; border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #17112c, #1d1638); transition: border-color 200ms ease, box-shadow 200ms ease;
}
.mines-number { font: 800 clamp(28px, 8vw, 36px)/1.1 var(--display); font-variant-numeric: tabular-nums; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.mines-status[data-result='won'] { border-color: rgba(53, 208, 168, 0.6); box-shadow: 0 0 28px -10px var(--mint); }
.mines-status[data-result='won'] .mines-number { color: var(--mint); }
.mines-status[data-result='lost'] .mines-number { color: var(--rose); }
.mines-outcome { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; color: var(--haze); font-weight: 700; min-height: 24px; text-align: center; }
/* TGC-121: the screen is a column; the stage takes the height the heading, the status and the pinned
   dock leave, and the board is the largest square in it, so its last row always ends above the dock
   in either language and under the pause strip. The board never goes below five 44px tiles with their
   gaps (TGC-054 r4): where that does not fit, the screen scrolls under the dock instead. */
.view:has(> .mines-stage) { display: flex; flex-direction: column; }
.view:has(> .mines-stage) > * { flex: none; }
.view:has(> .mines-stage) > .mines-stage { flex: 1 1 0; }
.mines-stage {
  --mines-gap: 8px; --mines-pad: 8px; --mines-least: calc(5 * 44px + 4 * var(--mines-gap) + 2 * var(--mines-pad) + 2px);
  min-height: var(--mines-least); container-type: size; display: grid; justify-items: center; align-items: start; margin-top: 10px;
}
.mines-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mines-gap); padding: var(--mines-pad);
  width: var(--mines-board, max(var(--mines-least), min(100cqw, 100cqh))); margin: 0;
}
.mine-tile {
  aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--vault-2), var(--vault));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35); transition: transform 140ms ease, background 160ms ease;
}
.mines-grid[data-round='open'] .mine-tile[data-state='hidden']:not(:disabled) { border-color: color-mix(in srgb, var(--star) 40%, var(--line)); }
.mines-grid[data-round='open'] .mine-tile[data-state='hidden']:not(:disabled):active { transform: scale(0.94); }
.mine-tile:disabled { cursor: default; }
.mine-tile[data-state='safe'] { background: rgba(53, 208, 168, 0.16); border-color: rgba(53, 208, 168, 0.55); animation: mine-flip 220ms ease; }
.mine-tile[data-state='hit'] { background: rgba(255, 79, 134, 0.28); border-color: var(--rose); box-shadow: 0 0 18px -4px var(--rose); animation: mine-flip 220ms ease; }
.mine-tile[data-state='mine'] { background: rgba(255, 79, 134, 0.08); border-color: rgba(255, 79, 134, 0.3); }
.mine-tile[data-state='clear'] { background: rgba(53, 208, 168, 0.05); opacity: 0.6; }
.mine-icon { width: 58%; height: 58%; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mine-tile[data-state='safe'] .mine-icon, .mine-tile[data-state='clear'] .mine-icon { stroke: var(--mint); fill: rgba(53, 208, 168, 0.22); }
.mine-tile[data-state='hit'] .mine-icon, .mine-tile[data-state='mine'] .mine-icon { stroke: var(--rose); fill: rgba(255, 79, 134, 0.3); }
.mine-icon .mine-shine { fill: var(--pearl); stroke: none; opacity: 0.7; }
@keyframes mine-flip { from { transform: rotateY(90deg) scale(0.9); } to { transform: none; } }
.mines-meta { color: var(--dim); font-size: 12.5px; font-weight: 700; min-height: 18px; display: flex; align-items: center; }
.mines-meta .link { min-height: 44px; margin: -13px 0 -11px; padding: 0 10px; font-size: 13px; }
/* Mines and Stake ride in the dock above Start; an open round shows Cash out only. */
.mines-dock { gap: 8px; }
.mines-dock .dock-field { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 6px; }
.mines-dock .dock-field > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--haze); }
.mines-dock .bet-row .chip { width: 44px; }
.mines-dock .bet-row .input-wrap { min-width: 76px; }
.mines-dock[data-round='open'] .mines-field { display: none; }
/* Under the pause strip (TGC-054 r2) the board loses the strip's height, so its last row stays above
   the dock. With Mines itself paused and no round there is nothing to set or reveal: the dock holds
   the paused button only, and the board, its tiles disabled, may shrink below the 44px touch size. */
.mines-dock[data-held='true'] .mines-field, .mines-dock[data-held='true'] .mines-hint { display: none; }
.mines-stage:has(> .mines-grid[data-held='true']) { --mines-least: 150px; }
.mines-grid[data-held='true'] .mine-tile { min-width: 0; min-height: 0; border-radius: 8px; }
.mines-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mines-count { flex: none; min-width: 2ch; font: 700 16px var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.mines-range { flex: 1; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--star); }
.mines-range:disabled { opacity: 0.45; }
.mines-hint { margin: 0; font-size: 12.5px; }
.mines-hint:empty { display: none; }
.mines-hint.warn { color: var(--star); }

/* Limbo (TGC-092): the result counts up on the stage; the target field and its chance sit below. */
.limbo-stage { display: grid; justify-items: center; gap: 6px; padding: 24px 12px 14px; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(70% 80% at 50% 40%, rgba(255, 201, 74, 0.14), transparent 70%), #17112c; min-width: 0; }
/* Sized by the final number's length (app/screens/limbo.ts), so 1,000,000.00× fits a 320px screen. */
.limbo-number { font: 800 clamp(44px, 15vw, 72px)/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; }
.limbo-stage[data-size='m'] .limbo-number { font-size: clamp(34px, 11vw, 56px); }
.limbo-stage[data-size='l'] .limbo-number { font-size: clamp(26px, 8.2vw, 44px); }
.limbo-stage[data-passing='true'] .limbo-number, .limbo-stage[data-result='won'] .limbo-number { color: var(--mint); }
.limbo-stage[data-result='won'] { border-color: rgba(53, 208, 168, 0.6); box-shadow: 0 0 28px -10px var(--mint); }
.limbo-stage[data-result='lost'] .limbo-number { color: var(--rose); }
.limbo-caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; min-height: 44px; color: var(--haze); font-weight: 700; text-align: center; }
.limbo-caption .link { padding: 0 8px; }
.limbo-recent { margin-bottom: 10px; }
.limbo-target { font-variant-numeric: tabular-nums; }
/* 10000.00 fits beside three chips at 320px. */
@media (max-width: 359px) { .input-wrap .limbo-target { font-size: 15px; padding-left: 28px; padding-right: 8px; } }
/* A twelve-digit payout (99,999,999 Stars at the top target) fits a 320px screen. */
@media (max-width: 359px) { .shell[data-screen='limbo'] .game-stats > span { padding: 10px 8px; } .shell[data-screen='limbo'] .game-stats b { font-size: 12px; } }
.limbo-target[aria-invalid='true'] { border-color: var(--rose); }
.limbo-hint { min-height: 18px; margin: 8px 0 0; font-size: 13px; }
.limbo-hint[data-tone='warn'] { color: var(--star); }
.tone-sky { --tone: #4cc3ff; }

/* Plinko preview */
.plinko { display: grid; gap: 8px; padding: 14px 10px 10px; border-radius: 20px; border: 1px solid var(--line); background: #17112c; }
/* Full width always: with an automatic width, aspect-ratio would narrow the board when the height cap
   binds and leave it off its bucket row. With a set width the cap only lowers the board, and the
   canvas spaces the rows to fit (tgc-review-games, 701–850 px tall). */
.plinko-board { position: relative; width: 100%; aspect-ratio: 1.15; max-height: max(120px, calc(100svh - 505px)); }
/* Pegs and balls are drawn on one canvas, sized for the device pixel ratio (app/plinko-board.ts). */
.plinko-canvas { position: absolute; top: 0; bottom: 0; left: -8px; width: calc(100% + 16px); height: 100%; display: block; }
.plinko-buckets { display: grid; grid-template-columns: repeat(var(--buckets, 9), minmax(0, 1fr)); gap: 3px; }
/* 14–17 buckets: labels run upright in a taller bucket, so four characters fit a 14px column at 320px. */
.plinko-buckets[data-dense='true'] { gap: 2px; }
.plinko-buckets[data-dense='true'] .bucket { writing-mode: vertical-rl; transform: rotate(180deg); padding: 5px 0; font-size: 10px; line-height: 1; display: grid; place-items: center; }
.plinko-outcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; min-height: 28px; margin: 10px 0 0; color: var(--haze); font-weight: 700; text-align: center; }
.plinko-outcome[data-result='won'] { color: var(--mint); }
.plinko-outcome .link { font-weight: 700; }
.plinko-rows { width: 100%; accent-color: var(--violet, #9b7bff); min-height: 44px; }
.plinko-hint { margin: 2px 0 0; }
.plinko-hint.warn { color: var(--star); }
.bucket { text-align: center; padding: 6px 0; border-radius: 6px; font: 800 clamp(9px, 2.6vw, 12px) var(--display); color: #120e22; transition: transform 160ms ease; }
.bucket.hot { background: var(--rose); }
.bucket.warm { background: #ff8a4f; }
.bucket.even { background: var(--star); }
.bucket.cold { background: #8a9bc4; }
.bucket.landed { box-shadow: 0 0 0 2px var(--pearl); }
/* The last drops, newest first: one chip a ball, so a stream of drops can be read back. */
.plinko-history { display: flex; gap: 4px; min-height: 22px; margin: 2px 0 0; padding: 0; list-style: none; overflow: hidden; }
.plinko-history .bucket { flex: 0 0 auto; min-width: 34px; padding: 3px 6px; font-size: 11px; }
.plinko-history .bucket:first-child { box-shadow: 0 0 0 2px var(--pearl); }
.game-controls { display: grid; gap: 8px; margin-top: 12px; }
/* Previews on short screens: the board shrinks so its controls stay above the dock; labels stay on one line. */
@media (max-height: 700px) { .plinko-board { aspect-ratio: 1.6; } .limbo-stage { padding: 18px 12px; } }
.game-dock .button { white-space: nowrap; padding: 0 12px; }
.fair-alert .button { white-space: normal; text-align: center; }
.game-dock:not(.single) { grid-template-columns: 1fr 1fr; }
/* Crash auto cash-out in words, with a one-tap switch (journey #7). */
.auto-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: 13px; color: var(--haze); }
.auto-note[data-on='true'] { color: var(--pearl); }
.auto-note .auto-toggle { flex: none; min-height: 44px; padding: 0 4px; font-weight: 700; }
.auto-note .auto-toggle:disabled { opacity: 0.45; }
/* Plinko: Risk and Stake ride in the dock above Drop, one compact row each (journey #8). */
.plinko-dock { gap: 8px; }
.plinko-dock .dock-field { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 6px; }
.plinko-dock .bet-row .chip { width: 44px; }
.plinko-dock .bet-row .input-wrap { min-width: 76px; }
.plinko-dock .dock-field > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--haze); }
.plinko-dock .plinko-outcome { margin: 0; min-height: 22px; font-size: 14px; }
.plinko-dock .plinko-hint { margin: -2px 0 0 48px; font-size: 12.5px; }
.plinko-dock .plinko-hint:not(.warn) { display: none; }
/* Balls per drop sit beside Drop, whose label gives the total stake (2026-10-19), so the dock gains no row. */
.plinko-drop-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.plinko-dock .plinko-balls { min-height: 50px; min-width: 84px; padding-left: 14px; font: 700 15.5px var(--display); font-variant-numeric: tabular-nums;
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px; }
.plinko-dock .plinko-balls:disabled { opacity: 0.45; }
/* Short phones: the board shrinks to what is left above the dock, so the landed bucket stays in view
   with the outcome in the dock under it (1C review: 320x568 to 375x667). */
@media (max-height: 700px) {
  .shell[data-screen='plinko'] .screen-head p { display: none; }
  .plinko-board { aspect-ratio: auto; height: clamp(96px, calc(100svh - 466px), 280px); }
  .plinko-dock { padding-top: 14px; }
  .plinko-dock .plinko-outcome { font-size: 13px; gap: 2px 5px; }
}
/* Games hub: the one highlighted pick spans the row (journey #9). */
.game-card.pick { grid-column: 1 / -1; min-height: 132px; border-color: color-mix(in srgb, var(--tone) 60%, var(--line)); }
/* Lobby: Crash and Upgrade as a compact pair above the case shelf (journey #7). */
.mode-tiles.compact { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.mode-tiles.compact .mode-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; min-height: 56px; }
/* The lobby pair at 320px: the art gives way so "Upgrade" fits its tile. */
@media (max-width: 359px) {
  .mode-tiles.compact .mode-tile { gap: 7px; padding-inline: 10px; }
  .mode-tiles.compact .game-art-img { width: 32px; height: 32px; }
}
.mode-tiles.compact .mode-tile .icon { width: 32px; height: 32px; padding: 6px; }
.mode-tiles.compact .mode-tile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.mode-crash .icon { stroke: var(--rose); background: rgba(255, 79, 134, 0.1); }
/* Short screens keep the first case cards in view: the pair drops its heading and its second line. */
@media (max-height: 700px) {
  .lobby-modes-title { display: none; }
  .mode-tiles.compact .mode-tile small { display: none; }
}
/* The smallest phones (568 px tall) keep the first case cards whole: the lobby's subtitle goes. */
@media (max-height: 600px) { .shell[data-screen='cases'] .screen-head p { display: none; } }
/* The "+" sheet: both actions span the sheet (review 1B, N1). */
.add-stars .wallet-actions .button { grid-column: 1 / -1; }

/* A real server opened in a plain browser (outside-telegram.ts): one centred screen with the bot link. */
.outside-telegram {
  min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px 16px; text-align: center;
}
.outside-telegram .brand-mark { width: 88px; height: 88px; margin-bottom: 6px; }
.outside-telegram h1 { font: 700 24px var(--display); max-width: 16em; }
.outside-telegram p { color: var(--haze); font-size: 14.5px; max-width: 24em; }
.outside-telegram .button { margin-top: 8px; min-width: 220px; min-height: 48px; text-decoration: none; }
.outside-telegram .outside-link { font-size: 13px; color: var(--dim); }

/* TGC-098 — the collection room. Real game surfaces share materials, not results. */
:root { --ink: #0c0916; --vault: #151021; --vault-2: #211731; --line: #3f2c5b; --haze: #b9abd4; --dim: #9485ae; --pearl: #faf6ff; --column: 560px; }
html { background: radial-gradient(ellipse at 50% 25%, #211236, #07060e 70%); }
.shell { background: radial-gradient(100% 45% at 100% 0, #22103366, transparent), #0c0916; border-inline: 1px solid #cda8ff12; box-shadow: 0 0 120px #0008; }
.top { padding-block: 12px; background: linear-gradient(115deg, #171021, #0c0918); border-bottom: 1px solid #b78add25; }
.brand-mark { width: 38px; height: 38px; }
.balance-pill { min-height: 40px; background: linear-gradient(160deg,#51392766,#211528); border-color: #eab95b80; box-shadow: inset 0 1px 0 #ffe9ac40, 0 0 22px #efb44212; }
.tabs { background: linear-gradient(#171020f5,#0c0817); border-top-color: #b38ae83d; padding-top: 9px; }
.tab { color: #b6a2d5; }
.tab[aria-current='page'] svg { background: #ffcc5124; box-shadow: inset 0 1px 0 #ffefad18; }
.view { scrollbar-width: thin; scrollbar-color: #56406c #0c0916; }
.button.primary { background: linear-gradient(165deg,#ffe995 0%,#ffd15a 40%,#f39b27 100%); border: 1px solid #ffdf8d; box-shadow: inset 0 2px 0 #fff6c890, inset 0 -3px 0 #b2662638, 0 8px 24px #e59c2429; }
.button.secondary, .button.ghost { background: linear-gradient(135deg,#2c1c3d,#171122); box-shadow: inset 0 1px 0 #f1d9ff16; }
.button, .chip, .mine-tile { touch-action: manipulation; }
.input { background: linear-gradient(#110d1b,#1b1327); border-color: #6e4b855e; box-shadow: inset 0 2px 5px #0006; }
.segmented { padding: 4px; background: #0d0915; border: 1px solid #563969; box-shadow: inset 0 2px 5px #0007; }
.segmented button[aria-checked='true'], .chip[aria-pressed='true'] { background: linear-gradient(150deg,#654080,#39214e); box-shadow: inset 0 1px 0 #e8caff40,0 2px 7px #0005; color: #fff5ff; }
.chip { background: linear-gradient(#332341,#20142e); border-color: #634779; box-shadow: inset 0 1px 0 #e7ccff14; }
.eyebrow { color: #d0acd9; font: 700 9px/1.4 var(--body); letter-spacing: .17em; }
.lobby-hero { position: relative; isolation: isolate; min-height: 275px; margin: -16px calc(-1 * var(--gutter)) 0; padding: 27px var(--gutter) 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: #0d0a17; }
.lobby-hero-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.lobby-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#0c0916dd 0%,#0c091696 36%,transparent 78%),linear-gradient(0deg,#0c0916,transparent 28%); }
.lobby-hero-copy { max-width: 72%; }
.lobby-hero h1 { font-size: clamp(28px,8.2vw,42px); line-height: 1.08; letter-spacing: -.055em; margin-top: 11px; text-shadow: 0 3px 30px #0009; }
.lobby-hero h1 span { display: block; color: #ffd46c; }
.lobby-hero p { max-width: 19em; font-size: 13px; color: #e1d1ec; line-height: 1.55; margin-top: 13px; }
.hero-proof { display: flex; gap: 18px; margin-top: 24px; color: #d6c4e8; font-size: 10px; }
.hero-proof > span { display: flex; align-items: center; gap: 6px; }
.hero-proof .icon { width: 18px; height: 18px; fill: none; stroke: #d9a5ff; stroke-width: 1.5; }
.shell[data-screen='cases'] .free-card { margin-top: 0; border: 1px solid #e7bf65; border-radius: 17px; background: linear-gradient(115deg,#ffe38b,#f5ab3b); color: #251400; box-shadow: inset 0 1px 0 #fff6d1,0 8px 25px #0004; grid-template-columns: 45px minmax(0,1fr) auto; padding: 14px; gap: 12px; }
.shell[data-screen='cases'] .free-card small { color: #583513; font-size: 12px; }
.shell[data-screen='cases'] .free-card b { font: 800 17px var(--display); letter-spacing: -.04em; }
.shell[data-screen='cases'] .free-cta { font-size: 12px; min-height: 44px; padding: 0 8px; background: #fff3bf50; border: 1px solid #9e642733; color: #261400; box-shadow: none; border-radius: 11px; grid-column: auto; }
.free-remind { color: #bba9d0; }
.section-title { font-size: 18px; letter-spacing: -.035em; margin-top: 26px; }
.case-card { border-radius: 20px; aspect-ratio: .76; padding: 12px; position: relative; overflow: hidden; gap: 7px; background: radial-gradient(ellipse at 45% 35%,color-mix(in srgb,var(--glow) 28%,transparent),transparent 72%),linear-gradient(145deg,#241330,#110c1d); border-color: color-mix(in srgb,var(--glow) 55%,#735581); box-shadow: inset 0 1px 0 #e2aaff24,0 12px 20px #0003; }
.case-fan .case-cover { filter: drop-shadow(0 12px 10px #0008); transform: scale(1.06); }
.case-name { font-size: 18px; letter-spacing: -.045em; }
.case-price { border: 1px solid #e1ad4966; border-radius: 99px; padding: 4px 9px; background: linear-gradient(#4b342a80,#201323); }
.case-meta small { color: #bda7cd; font-size: 11px; }
.showcase-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.showcase-modes .mode-tile { display: grid; gap: 7px; min-width: 0; padding: 12px 9px; border: 1px solid #8760a8; border-radius: 17px; background: radial-gradient(ellipse at top,#56357570,transparent 75%),#130d20; }
.showcase-modes .game-art-img { width: 61px; height: 61px; justify-self: center; }
.showcase-modes .mode-tile .icon { width: 51px; height: 61px; justify-self: center; stroke: #e8b4ff; background: transparent; padding: 5px; }
.showcase-modes .mode-tile b { font-size: 13px; }
.showcase-modes .mode-tile small { font-size: 10px; line-height: 1.4; display: block; color: #bcabd0; margin-top: 4px; }
.detail-head { text-align: center; margin-bottom: 4px; }
.detail-head h1 { font-size: 34px; letter-spacing: -.06em; }
.case-facts { justify-content: center; font-size: 11px; }
.case-showcase { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 210px; margin: 0 -8px 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 68%,#9f56ed38,transparent 58%); }
.case-showcase > img { width: 190px; height: 190px; object-fit: contain; background: transparent; filter: drop-shadow(0 15px 15px #0009); transform: translateY(-4px); }
.reel-stage { border-color: #775095; background: linear-gradient(120deg,#23122e,#100b1d,#24132d); box-shadow: inset 0 2px 12px #0008,0 0 30px #a656ff0c; }
.open-row { border-top: 1px solid #855a9a55; background: linear-gradient(#20142cf5,#100b1bf5); box-shadow: 0 -12px 30px #0005; }
.odds-list { border-color: #72538155; background: #110b1c; }
.result-sheet { background: radial-gradient(ellipse at top,#70428650,transparent 65%),#120c1f; }
.result-hero { filter: drop-shadow(0 15px 30px #0008); }
.game-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; }
.game-heading > div { min-width: 0; }
.game-heading h1 { font-size: 31px; letter-spacing: -.05em; line-height: 1.2; margin-top: 3px; }
.game-heading p { font-size: 12px; line-height: 1.5; margin-top: 5px; max-width: 32em; }
.game-heading-art { display: grid; place-items: center; flex: none; width: 65px; height: 74px; }
.game-heading-art img { width: 74px; height: 74px; filter: drop-shadow(0 5px 15px #8f3dce55); }
.game-heading-art .icon { width: 46px; height: 46px; fill: none; stroke: #d399fc; stroke-width: 1.5; filter: drop-shadow(0 0 14px #b666ec88); }
.games-heading { padding: 15px 0 10px; }
.games-heading h1 { font-size: 38px; letter-spacing: -.055em; }
.game-card { min-height: 215px; border-radius: 22px; padding: 18px; background: radial-gradient(ellipse at 50% 24%,color-mix(in srgb,var(--tone) 24%,transparent),transparent 75%),linear-gradient(145deg,#21132f,#110c1b); box-shadow: inset 0 1px 0 #e3c4ff2b,0 8px 22px #0004; }
.game-card .game-art, .game-card .game-art-img { width: 110px; height: 110px; }
.game-card .game-art { margin-bottom: 16px; }
.game-card.pick { min-height: 190px; grid-template-columns: 1fr 1fr; align-content: center; column-gap: 16px; }
.game-card.pick .game-art { grid-column: 2; grid-row: 1 / 3; margin: 0; width: 140px; height: 140px; }
.game-card.pick .game-art img { width: 140px; height: 140px; }
.game-card.pick .game-title { grid-column: 1; grid-row: 1; align-self: end; }
.game-card.pick small { grid-column: 1; grid-row: 2; }
.game-card.pick b { font-size: 27px; }
.game-stats > span { background: linear-gradient(145deg,#24172e,#130d1e); border-color: #66457d88; box-shadow: inset 0 1px 0 #dcb6ff13; padding: 13px 12px; }
.game-stats b { color: #ffe09b; font-size: 18px; }
.game-stats small { font-size: 11px; }
.game-dock { background: linear-gradient(0deg,#100a1bf7 88%,#100a1b00); padding-top: 24px; }
.bet-panel { background: linear-gradient(140deg,#21142b,#100b1b); border: 1px solid #5d3d76; border-radius: 20px; padding: 16px; box-shadow: inset 0 1px 0 #e6c3ff19; }
.dice-result, .limbo-stage, .crash-chart, .upgrade-stage, .plinko { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #765292; border-radius: 23px; box-shadow: inset 0 1px 0 #d8b4ff38, inset 0 -15px 35px #0005,0 16px 35px #0004; }
.dice-result { min-height: 185px; justify-content: center; background: radial-gradient(ellipse at 50% 95%,#30b39733,transparent 65%),linear-gradient(125deg,#182b2b,#130d1f 70%); }
.dice-result::before { content: ''; position: absolute; z-index: -1; width: 135px; height: 135px; border: 1px solid #5ee7c640; transform: rotate(45deg); border-radius: 25px; box-shadow: 0 0 0 15px #4be4bf06,0 0 0 36px #4be4bf04; }
.dice-number { text-shadow: 0 4px 0 #0005,0 0 30px #8ce9ce30; }
.limbo-stage { min-height: 210px; justify-content: center; background: radial-gradient(ellipse at 50% 95%,#65b6f547,transparent 65%),linear-gradient(140deg,#182641,#120e23 65%); }
.limbo-stage::before { content: ''; position: absolute; z-index: -1; width: 170px; height: 170px; border-radius: 50%; border: 1px solid #6dcaff55; box-shadow: 0 0 0 13px #75c8ff08,0 0 0 31px #75c8ff05,inset 0 0 35px #72baff0c; transform: rotateX(30deg); }
.limbo-number { text-shadow: 0 3px 0 #0005,0 0 32px #7dcbff33; }
.crash-chart { background: radial-gradient(ellipse at 80% 85%,#b52a7b38,transparent 70%),linear-gradient(140deg,#241027,#100a1a); }
.crash-number { text-shadow: 0 4px 0 #0006,0 0 35px #ff75bb3b; }
.crash-history { margin-block: 12px; }
.crash-chip { border: 1px solid #ffffff12; background: #21152f; }
.round-id { font-size: 11px; color: var(--dim); text-align: right; }
.upgrade-stage { background: radial-gradient(ellipse at 50% 65%,#bd68ff29,transparent 65%),linear-gradient(120deg,#251437,#110c1d); padding: 24px 12px; }
.wheel-box { filter: drop-shadow(0 0 14px #a95bfb35); }
.slot .gift-art { background: radial-gradient(#6d39782b,transparent 70%); border-radius: 16px; }
.plinko { background: radial-gradient(ellipse at 50% 65%,#8d40bd27,transparent 65%),linear-gradient(160deg,#231132,#100b1a); padding: 18px 12px 13px; }
.plinko-board { max-height: none; aspect-ratio: 1.35; }
.bucket { box-shadow: inset 0 1px 0 #fff6,inset 0 -3px 0 #0002; }
.mines-status { border: 1px solid #674783; border-radius: 19px; background: linear-gradient(115deg,#251631,#120b20); padding: 15px 12px; margin-bottom: 16px; box-shadow: inset 0 1px 0 #dbb4ff17; }
.mines-grid { aspect-ratio: 1; border: 1px solid #ce9e6d66; border-radius: 20px; background: linear-gradient(135deg,#21172f,#0d0817); box-shadow: inset 0 1px 0 #ffddab4d,0 16px 32px #0005; }
.mine-tile { min-height: 44px; border-radius: 12px; border: 1px solid #b48acc85; background: radial-gradient(ellipse at 25% 10%,#78509877,transparent 75%),linear-gradient(145deg,#39244e,#171124); box-shadow: inset 2px 2px 2px #ddbbff44,inset -2px -3px 3px #05020dd9,0 1px 0 #ffd2826b; }
.mine-tile[data-state='hidden']::after { content: '✦'; font-size: 29px; color: #9872b9; text-shadow: 0 1px 0 #dcadff44,0 0 16px #a264da33; }
.mine-tile[data-state='safe'] { background: radial-gradient(ellipse at top,#326959,#102a26); box-shadow: inset 0 2px 3px #9ee4ca4d,0 0 18px #31d1a51c; }
.mine-tile[data-state='hit'] { background: radial-gradient(ellipse at top,#813c61,#301020); }
.mines-dock { border-top: 1px solid #734d8750; }
.mines-dock .mines-field { padding: 8px 10px; background: #1a1127; border: 1px solid #65477966; border-radius: 13px; }
@media (hover:hover) { .case-card:hover, .game-card:hover, .mode-tile:hover { border-color:#d7a9f4; box-shadow:inset 0 1px 0 #f4d2ff33,0 0 26px #aa54e319; } .mine-tile[data-state='hidden']:not(:disabled):hover { border-color:#ffe2aa; filter:brightness(1.16); } }
@media (min-width:700px) { :root { --gutter:24px; } .shell { margin-block:16px; height:calc(var(--app-height,100dvh) - 32px); border:1px solid #8b5cba35; border-radius:24px; } .lobby-hero { min-height:320px; } .lobby-hero p { font-size:15px; } .game-heading h1 { font-size:36px; } }
@media (max-width:359px) { .top { gap:7px; } .lobby-hero { min-height:250px; } .lobby-hero-copy { max-width:79%; } .lobby-hero h1 { font-size:29px; } .hero-proof { gap:10px; font-size:9px; } .shell[data-screen='cases'] .free-card { gap:8px; padding:10px; grid-template-columns:33px minmax(0,1fr) auto; } .shell[data-screen='cases'] .free-card b { font-size:14px; } .shell[data-screen='cases'] .free-card small { font-size:10px; } .shell[data-screen='cases'] .free-cta { font-size:10px; padding-inline:7px; } .case-name { font-size:16px; } .case-card { padding:10px; } .game-heading { gap:8px; } .game-heading-art { width:48px; } .game-heading-art img { width:57px; height:57px; } .game-heading h1 { font-size:27px; } .game-heading p { font-size:11px; } .game-card { padding:12px; } .game-card.pick .game-art,.game-card.pick .game-art img { width:105px; height:105px; } .mines-stage { --mines-gap:6px; --mines-pad:6px; } .mine-tile { border-radius:9px; } }
@media (max-height:700px) { .plinko-board { height:auto; aspect-ratio:1.4; } .limbo-stage { min-height:170px; } .shell[data-screen='plinko'] .game-heading p { display:block; } }
/* TGC-121: Mines keeps its whole board and Start or Cash out on screen without scrolling, 320x568 to
   1440x900, in English and Russian. The dock is pinned again (ed618cfef had set it relative) and gives
   up spacing, not looks; the status's margin sits inside its head, so the stage adds none. */
.mines-stage { margin-top: 0; }
.view:has(> .mines-stage) > .back-link { align-self: flex-start; }
.mines-dock { padding-top: 14px; }
.mines-dock .mines-field { padding-block: 0; }
/* The stake row under 370px wide (320 and 360): the stake's label is for screen readers only (the field
   shows ★), so the whole stake and the Max chip fit inside the field. */
@media (max-width:369px) {
  .mines-dock .mines-field:has(.bet-row) { grid-template-columns: minmax(0, 1fr); }
  .mines-dock .bet-row .input { padding-right: 6px; }
  .mines-dock .mines-field:has(.bet-row) > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* TGC-123: no height cut-offs. The screen measures itself (app/screens/mines.ts, fitMines) and adds these
   steps one at a time until nothing overflows, so the board always keeps its whole square above the dock:
   intro — the intro line gives way unless the board already has its full width;
   compact — Telegram's Back button replaces the link, the heading tightens, the status is one row (the
     idle instruction drops; the receipt link stays), an open round's cap line drops and the dock tightens;
   tight — the board's gaps narrow; bare — the heading gives way; flat — the last spacing in the status,
   board and dock closes, and an open round's count line drops (the board shows the tiles found).
   TGC-124: one step holds through a whole round, so it is chosen for the tallest status and dock. */
.view[data-mines-fit~='intro'] .game-heading p { display: none; }
.view[data-mines-fit~='compact']:has(> .mines-stage) { padding-top: 6px; }
.view[data-mines-fit~='compact'] > .back-link { display: none; }
.view[data-mines-fit~='compact'] .game-heading { margin-bottom: 8px; }
.view[data-mines-fit~='compact'] .game-heading-art { width: 44px; height: 44px; border-radius: 14px; }
.view[data-mines-fit~='compact'] .game-heading-art .icon { width: 26px; height: 26px; }
.view[data-mines-fit~='compact'] .game-heading h1 { font-size: 27px; margin-top: 0; }
.view[data-mines-fit~='compact'] .mines-feedback-head .mines-status { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 0 10px; padding: 6px 42px 6px 14px; margin-bottom: 6px; }
.view[data-mines-fit~='compact'] .mines-status .mines-number { font-size: 26px; white-space: nowrap; overflow-wrap: normal; }
.view[data-mines-fit~='compact'] .mines-status .mines-meta { grid-column: 2; }
.view[data-mines-fit~='compact'] .mines-status .mines-outcome { justify-content: flex-start; text-align: left; min-height: 0; font-size: 13px; line-height: 1.35; gap: 0 5px; }
.view[data-mines-fit~='compact'] .mines-status .mines-meta .link { padding-inline: 0; }
.view[data-mines-fit~='compact'] .mines-feedback-head .reel-sound { top: 50%; right: 6px; transform: translateY(-50%); }
.view[data-mines-fit~='compact'] .mines-status[data-phase='idle'] .mines-meta { display: none; }
.view[data-mines-fit~='compact'] .mines-dock[data-round='open'] .mines-hint { display: none; }
.view[data-mines-fit~='compact'] .mines-dock { gap: 6px; padding-top: 8px; padding-bottom: max(8px, var(--safe-bottom)); }
.view[data-mines-fit~='compact'] .mines-dock .game-action { min-height: 44px; }
.view[data-mines-fit~='tight'] .mines-stage { --mines-gap: 4px; --mines-pad: 4px; }
.view[data-mines-fit~='bare'] .game-heading { display: none; }
.view[data-mines-fit~='flat']:has(> .mines-stage) { padding-top: 2px; }
.view[data-mines-fit~='flat'] .mines-feedback-head .mines-status { padding-block: 3px; margin-bottom: 4px; }
.view[data-mines-fit~='flat'] .mines-status[data-phase='open'] .mines-meta { display: none; }
.view[data-mines-fit~='flat'] .mines-stage { --mines-gap: 2px; --mines-pad: 2px; }
.view[data-mines-fit~='flat'] .mines-dock { gap: 4px; padding-top: 4px; padding-bottom: max(4px, var(--safe-bottom)); }
/* Reduced motion turns every change into a 1ms transition (above); the fit reads the layout straight after
   each step, so on Mines that change is instant instead, as reduced motion intends. */
@media (prefers-reduced-motion: reduce) { .view:has(> .mines-stage), .view:has(> .mines-stage) * { transition-property: none !important; } }
@media (prefers-reduced-motion:reduce) { .case-card,.game-card,.mine-tile,.button { transition:none; } .case-card:active,.game-card:active,.button:active:not(:disabled) { transform:none; } .case-showcase > img { transform:none; } }
.crash-chart::before { content: ''; position: absolute; z-index: -1; width: 145%; height: 75%; left: -22%; bottom: -48%; border-radius: 50%; border: 2px solid #e1acff78; background: radial-gradient(ellipse at 50% 0,#9863c64d,#271d3c 40%,#100919 65%); box-shadow: 0 -4px 15px #b676f966,0 -14px 45px #6b448744; transform: rotate(-13deg); }
.crash-chart::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(circle at 13% 22%,#fff9 0 1px,transparent 1.5px),radial-gradient(circle at 82% 30%,#f7c5ff8f 0 1px,transparent 1.5px),radial-gradient(circle at 64% 14%,#fff7 0 1px,transparent 1.5px),radial-gradient(circle at 35% 43%,#fff5 0 1px,transparent 1.5px); }
.plinko { border: 1px solid #c39862; border-radius: 29px 29px 21px 21px; box-shadow: inset 2px 1px 0 #ffdf9a80,inset -3px -2px 0 #3d233b,0 0 0 4px #3a244b,0 0 0 5px #d09e692e,0 18px 35px #0005; margin: 5px 5px 18px; }
.plinko::before { content: ''; pointer-events: none; position: absolute; inset: 8px; z-index: -1; border: 1px solid #d7a15c42; border-radius: 21px; background: linear-gradient(115deg,#dab3fc12,transparent 25%,transparent 70%,#dab3fc0c); }
.plinko-board { margin-top: 14px; }
.plinko-buckets .bucket { border: 1px solid #ffe1ab40; border-radius: 6px 6px 9px 9px; padding-block: 9px; }
.upgrade-stage { min-height: 245px; border-color: #a26bc1; background: radial-gradient(ellipse at 50% 5%,#9743bc38,transparent 70%),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 30px),#100b1c; }
.upgrade-stage .slot { position: relative; padding-bottom: 15px; }
.upgrade-stage .slot::after { content: ''; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: 0; height: 15px; border-radius: 50%; background: linear-gradient(#39213c,#0a0712); border: 1px solid #dda75d88; box-shadow: 0 6px 0 #0a0610,0 7px 0 #624b2c; }
.upgrade-stage .wheel-box { filter: drop-shadow(0 0 16px #a460ed40); }
.wheel-chance { text-shadow: 0 3px 0 #0008; }
.shell[data-screen='plinko'] .game-dock { position: sticky; bottom: -24px; }
.game-card .game-art:has(.icon) { background: radial-gradient(ellipse,#7e4f9945,transparent 70%); border-radius: 30%; }
.game-card .game-art .icon { width: 66px; height: 66px; filter: drop-shadow(0 4px 12px #af6fe56b); }
.shell[data-screen='case'] .ticker { display: none; }
.case-showcase { height: 230px; }
.case-showcase .showcase-image { width: 100%; height: 100%; object-fit: cover; object-position: 77% center; transform: none; filter: none; mask-image: linear-gradient(0deg,transparent,#000 12%,#000 87%,transparent); }
@media (max-width:359px) { .game-stats b { font-size:15px; } .game-stats > span { padding-inline:9px; } .case-showcase { height:205px; } }
@media (prefers-reduced-motion:reduce) { .view.enter > * { animation:none; } }
.case-card { aspect-ratio: .78; }
.case-card .case-fan { margin: -12px -12px 0; overflow: hidden; border-radius: 18px 18px 0 0; }
.case-fan .showcase-cover { object-fit: cover; object-position: 82% 50%; transform: none; filter: none; }
.case-card[data-case='collector'] { border-color: #ca9e65; background: linear-gradient(150deg,#362135,#15101c); }
.case-card[data-case='premium'] { border-color: #c294d1; background: linear-gradient(150deg,#302144,#130c20); }
.case-card[data-case='collector'] .showcase-cover { object-position: 72% 40%; transform: scale(1.08); }
.case-card[data-case='premium'] .showcase-cover { object-position: 90% 60%; transform: scale(1.17); }
.game-heading-art { width: 60px; height: 60px; border-radius: 19px; border: 1px solid #b087c66e; background: radial-gradient(ellipse at 25% 5%,#9b65b047,transparent 70%),linear-gradient(135deg,#34203e,#120b1f); box-shadow: inset 1px 1px 0 #ead3ff30,inset -2px -3px 0 #080410,0 6px 15px #0004; }
.game-heading-art .icon { width: 34px; height: 34px; stroke: #e4bdff; filter: drop-shadow(0 2px 8px #c16cff5c); }
.heading-crash .game-heading-art { background: radial-gradient(ellipse at top,#9e456551,#1d0e25); }
.heading-crash .game-heading-art .icon { stroke: #ffa8ce; }
.heading-dice .game-heading-art { background: radial-gradient(ellipse at top,#32715a66,#0b211f); }
.heading-dice .game-heading-art .icon { stroke: #a6e7c9; }
.heading-limbo .game-heading-art { background: radial-gradient(ellipse at top,#376e9b55,#101a2d); }
.heading-limbo .game-heading-art .icon { stroke: #a8daff; }
.heading-plinko .game-heading-art .icon,.heading-upgrade .game-heading-art .icon { stroke: #ffe3a8; }
.game-heading p { max-width: 37em; }
.case-showcase::before,.case-showcase { border-radius: 22px; background: #100a19; margin-block: 14px; }
.case-showcase .showcase-image { object-position: 80% 50%; mask-image: none; }
.lobby-hero-copy { max-width: 67%; }
.lobby-hero p { max-width: 16em; font-size: 12px; }
.lobby-hero::after { background: linear-gradient(90deg,#0c0916d9 0%,#0c09168c 36%,transparent 72%),linear-gradient(0deg,#0c0916,transparent 25%); }
@media (max-width:359px) { .case-card .case-fan { margin:-10px -10px 0; } .lobby-hero-copy { max-width:73%; } .lobby-hero p { max-width:14em; font-size:11px; } .lobby-hero h1 { font-size:27px; } .game-heading-art { width:49px; height:49px; border-radius:15px; } .game-heading-art .icon { width:29px; height:29px; } }
/* Keep the complete first shelf visible on a standard phone; shorter phones scroll safely. */
@media (max-width:699px) { .lobby-hero { min-height:244px; padding-top:22px; } .hero-proof { margin-top:18px; } .case-card { aspect-ratio:.86; } .shelf-title { margin-top:18px; } }
.game-heading-art .icon { stroke-linecap: round; stroke-linejoin: round; }
.case-card[data-case='collector'] .showcase-cover { filter: sepia(.32) saturate(.86); object-position: 90% 15%; transform: scale(1.2); }
.case-card[data-case='premium'] .showcase-cover { filter: hue-rotate(310deg) saturate(.65); object-position: 100% 90%; transform: scale(1.4); }
.showcase-modes .mode-tile { grid-template-columns: minmax(0,1fr); }
.showcase-modes .mode-tile > span { min-width: 0; }
.sticky-cta.pinned { top: 0; }
.sticky-cta.pinned .button { scroll-margin-block: 16px; }
.sheet { border: 1px solid #9367b176; background: linear-gradient(145deg,#20132c,#0f0a19); box-shadow: 0 -20px 60px #0008,inset 0 1px 0 #e3bcff2b; }
.result { background: radial-gradient(ellipse at 50% 15%,#68347d29,transparent 65%); }
.result-items .gift-art { border-radius: 22px; }
.result-actions .button { min-height: 54px; }
.mines-feedback-head { position: relative; }
.mines-feedback-head .reel-sound { top: 10px; right: 10px; left: auto; }
.mines-feedback-head .mines-status { padding-inline: 40px; }
.mine-tile { position: relative; }
/* TGC-091: a mine shakes the board (300 ms, largest first, decaying, under a degree of roll), the hit tile
   flashes, swells and bursts, and the other mines appear one after another (app/screens/mines.ts sets
   each tile's animation-delay); safe tiles nobody found fade in last. Reduced motion: no shake and no
   scaling; the hit tile flashes in colour instead (research: .claude/research/tgc-mines-feel.md). */
.mine-tile[data-state='hit'] { z-index: 1; animation: mine-explode 420ms cubic-bezier(.2,.8,.3,1) both; }
.mine-tile[data-state='hit']::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle,#fff3d6 0,#ffb067 30%,#ff4f8655 55%,transparent 72%); animation: mine-fireball 380ms ease-out both; pointer-events: none; }
.mine-tile[data-state='hit']::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 2px solid #ffc18b; background: radial-gradient(circle,#f79a6a66,transparent 70%); animation: mine-burst 420ms ease-out both; pointer-events: none; }
.mine-tile[data-state='mine'] { animation: mine-reveal 240ms ease-out var(--reveal-delay, 0ms) both; }
.mine-tile[data-state='mine'] .mine-icon { animation: mine-pop 240ms ease-out var(--reveal-delay, 0ms) both; }
.mine-tile[data-state='clear'] { animation: mine-clear 300ms ease-out var(--reveal-delay, 0ms) both; }
.mines-grid[data-end='mine'] { animation: mine-impact 300ms linear; }
@keyframes mine-impact { 0%,100% { transform:none; } 10% { transform:translate(-7px,2px) rotate(-.6deg); } 25% { transform:translate(6px,-2px) rotate(.5deg); } 40% { transform:translate(-4px,1px) rotate(-.3deg); } 55% { transform:translate(3px,-1px) rotate(.2deg); } 70% { transform:translate(-2px,0); } 85% { transform:translate(1px,0); } }
@keyframes mine-explode { 0% { transform:scale(.8); filter:brightness(2.6) saturate(1.5); } 20% { transform:scale(1.24); filter:brightness(2); } 45% { transform:scale(.94); filter:brightness(1.3); } 100% { transform:none; filter:none; } }
@keyframes mine-fireball { from { opacity:1; transform:scale(.3); } 40% { opacity:.9; } to { opacity:0; transform:scale(1.25); } }
@keyframes mine-burst { from { opacity:.9; transform:scale(.35); } to { opacity:0; transform:scale(1.7); } }
@keyframes mine-reveal { from { opacity:.3; transform:scale(.9); } 60% { opacity:1; transform:scale(1.06); } to { opacity:1; transform:none; } }
@keyframes mine-pop { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:none; } }
@keyframes mine-clear { from { opacity:.2; } }
@keyframes mine-fade { from { opacity:0; } }
@keyframes mine-flash { 0% { opacity:.3; background:#ff4f86; } 35% { opacity:1; background:#ffb38a; } }
@media (prefers-reduced-motion:reduce) {
  .mines-grid[data-end='mine'],.mine-tile[data-state='safe'] { animation:none; }
  .mine-tile[data-state='hit']::before,.mine-tile[data-state='hit']::after { display:none; animation:none; }
  .mine-tile[data-state='mine'] { animation-name: mine-clear; }
  .mine-tile[data-state='mine'] .mine-icon { animation-name: mine-fade; }
  /* Beats the global 1 ms cut above: a colour flash is not motion. */
  .mine-tile[data-state='hit'] { animation: mine-flash 600ms ease-out both !important; }
}

/* TGC-105: native video remains behind copy; static art survives every media failure. */
.lobby-hero-motion { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:66% 50%; opacity:0; pointer-events:none; }
.lobby-hero-motion.is-playing { opacity:1; }
.hero-motion-toggle { align-self:flex-end; min-height:44px; max-width:100%; margin-top:8px; padding:8px 12px; border:1px solid #cfb0f466; border-radius:20px; color:#f4eafa; background:#140c24d9; font-size:11px; cursor:pointer; }
.hero-motion-toggle[hidden] { display:none; }
.hero-motion-toggle:focus-visible { outline:2px solid #ffd46c; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .lobby-hero-motion,.hero-motion-toggle { display:none; } }

/* TGC-109: keep the phone board and Drop visible together; settings open on request. */
.shell[data-screen='plinko'] .plinko-board { max-height:max(80px,calc(var(--app-height,100dvh) - 620px)); }
.heading-plinko { position:relative; }
.plinko-settings { position:absolute; top:0; right:0; z-index:4; font-size:12px; }
.plinko-settings summary { min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--line); border-radius:12px; background:var(--vault); cursor:pointer; list-style:none; }
.plinko-settings summary::-webkit-details-marker { display:none; }
.plinko-settings summary::after { content:'⌄'; color:var(--haze); }
.plinko-settings[open] summary::after { transform:rotate(180deg); }
.plinko-settings summary:focus-visible { outline:2px solid var(--star); outline-offset:3px; }
.plinko-settings-panel { position:absolute; top:50px; right:0; width:min(300px,calc(100vw - 34px)); padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--ink); box-shadow:0 12px 30px #0009; }
.plinko-settings-panel .game-stats { margin:12px 0 0; }
@media(max-height:700px) {
  .shell[data-screen='plinko'] .game-heading p,.heading-plinko .eyebrow { display:none; }
  .heading-plinko { margin-bottom:10px; }
  .heading-plinko .game-heading-art { width:38px; height:38px; border-radius:12px; }
  .heading-plinko h1 { font-size:25px; }
  .shell[data-screen='plinko'] .plinko-board { height:clamp(80px,calc(var(--app-height,100dvh) - 480px),180px); max-height:none; aspect-ratio:auto; margin-top:0; }
  .shell[data-screen='plinko'] .plinko { padding-top:8px; }
}

/* Two balances (2026-10-19): Stars ⭐ and GRAM, each with its own mark and accent, never converted. */
:root { --gram: #6cc3ff; }
.gram-mark { width: 1em; height: 1em; flex: none; fill: none; stroke: var(--gram); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(108, 195, 255, 0.4)); }
/* Every rule that tints an amount with --star tints a GRAM amount with --gram instead. */
.stars.gram { --star: var(--gram); }
.gram-input::before {
  content: ''; width: 16px; height: 16px; background: var(--gram);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M4.2 5.5h15.6L12 20.2zM12 5.5v14.7M4.2 5.5l7.8 6.3 7.8-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M4.2 5.5h15.6L12 20.2zM12 5.5v14.7M4.2 5.5l7.8 6.3 7.8-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The switch beside the balance: two icon segments, the active one filled in its currency's colour. */
.currency-switch { display: flex; align-items: center; gap: 2px; margin-right: 8px; padding: 3px; border-radius: 99px; background: #0c0916; border: 1px solid var(--line); flex: none; }
.currency-switch[hidden] { display: none; }
.currency-option { position: relative; display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--haze); cursor: pointer; touch-action: manipulation; }
/* A 44px target around each 34×32 segment. */
.currency-option::after { content: ''; position: absolute; inset: -6px -3px; }
.currency-option svg { width: 17px; height: 17px; }
.currency-option span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.currency-option:focus-visible { outline: 2px solid var(--pearl); outline-offset: 2px; }
.currency-stars[aria-checked='true'] { background: linear-gradient(180deg, #ffd96e, #ffac38); }
.currency-stars[aria-checked='true'] .star { fill: #2a1a00; filter: none; }
.currency-gram[aria-checked='true'] { background: linear-gradient(180deg, #9ad8ff, #3c9bea); }
.currency-gram[aria-checked='true'] .gram-mark { stroke: #04223a; filter: none; }
/* Playing GRAM, the balance pill and its "+" wear the GRAM accent. */
.shell[data-currency='gram'] .balance-pill { border-color: #6cc3ff80; background: linear-gradient(160deg, #1d3a5466, #121a2e); box-shadow: inset 0 1px 0 #c8ecff30, 0 0 22px #6cc3ff14; }
.shell[data-currency='gram'] .balance-add-dot { background: linear-gradient(180deg, #9ad8ff, #3c9bea); }
.shell[data-currency='gram'] .balance-add-dot::before, .shell[data-currency='gram'] .balance-add-dot::after { background: #04223a; }
/* With the switch in the top bar, a phone keeps the logo and drops the name, so the balance always fits. */
@media (max-width: 420px) { .top:has(.currency-switch:not([hidden])) .brand-name { display: none; } }

/* The wallet: one row per balance, the one being played marked. */
.wallet-balances { display: grid; gap: 8px; width: 100%; }
.wallet-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink); color: var(--pearl); text-align: left; cursor: pointer; }
.wallet-balance > span:first-child { display: grid; gap: 2px; }
.wallet-balance b { font-size: 14px; }
.wallet-balance small { color: var(--haze); font-size: 12px; }
.wallet-balance > .stars { font-size: 19px; }
.wallet-balance[aria-pressed='true'] { border-color: #eab95b99; box-shadow: inset 0 0 0 1px #eab95b33; }
.wallet-balance[aria-pressed='true']:has(.gram) { border-color: #6cc3ff99; box-shadow: inset 0 0 0 1px #6cc3ff33; }

/* Deposit tabs name where each rail lands. */
.deposit-tab { display: grid; place-content: center; gap: 1px; min-height: 46px; padding: 4px 6px; }
.deposit-tab b { font: 700 13px var(--display); }
.deposit-tab small { font-size: 10.5px; font-weight: 600; opacity: 0.85; }

/* Gifts won with the other balance, one tap away. */
.screen-head .other-gifts { display: block; margin: 2px 0 0 -8px; }
/* A GRAM win in the live drops: its mark and the amount, on one line like a Stars win. */
.drop-gram-value { display: inline-flex; align-items: center; gap: 3px; }
.drop-gram-value .gram-mark { width: 11px; height: 11px; }

/* An empty balance's way forward (2026-10-19): the free case, selling gifts, the deposits. */
.start-card { display: grid; gap: 8px; margin: 12px 0 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--vault); }
.start-card[hidden] { display: none; }
.start-card b { font: 700 15px var(--display); }
.start-card p { margin: 0; color: var(--haze); font-size: 13.5px; line-height: 1.45; }
.start-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.start-actions .button { flex: 1 1 auto; min-height: 44px; }
.shell[data-currency='gram'] .start-card { border-color: #6cc3ff55; }

/* Multi-gift upgrades (2026-10-19): each picked gift wears its place in the stake; the title counts them. */
.gift-chip { position: relative; }
.gift-chip-order {
  position: absolute; top: 4px; right: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; font: 800 12px var(--display); font-style: normal; color: #2a1a00;
  background: var(--star); box-shadow: 0 0 0 2px var(--vault);
}
.shell[data-currency='gram'] .gift-chip-order { color: #04223a; background: var(--gram); }
.stake-count { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--haze); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.stake-count .stars { font-size: 13px; color: var(--pearl); }

/* Deposit journey (2026-10-19): one sheet from the balance pill and its "+": the balances, a tab per way
   to deposit, one way through each, then a progress view for the deposit itself (app/deposit.ts,
   gram-deposit.ts, deposit-progress.ts). GRAM wears --gram, Stars --star; motion stops under reduced motion. */
.dj { --dj-accent: var(--star); display: grid; }
.dj-home { display: grid; gap: 14px; }
.dj-home[hidden], .dj-flow[hidden] { display: none; }
.dj-title { font-size: 22px; font-weight: 800; padding-right: 44px; outline: none; }
.dj [data-rail='gram'], .dj-panel[data-method='gram'] { --dj-accent: var(--gram); }
.dj-mono { font-family: var(--mono); }

.dj-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.dj-balance {
  position: relative; display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 66px; padding: 10px 12px;
  border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, #1a1228, #0e0a17); color: var(--pearl);
  text-align: left; font: inherit;
}
button.dj-balance { cursor: pointer; touch-action: manipulation; }
.dj-balance-name { color: var(--haze); font: 700 11.5px var(--body); letter-spacing: 0.05em; text-transform: uppercase; }
.dj-balance .dj-balance-amount { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dj-balance-tag { position: absolute; top: 9px; right: 12px; padding: 1px 7px; border-radius: 99px; font: 800 10.5px var(--body); color: var(--star); background: #ffc94a1f; }
.dj-balance[data-currency='gram'] .dj-balance-tag { color: var(--gram); background: #6cc3ff1f; }
.dj-balance[aria-pressed='true'] { border-color: #eab95b99; box-shadow: inset 0 0 0 1px #eab95b33, 0 0 24px #efb44214; }
.dj-balance[aria-pressed='true'][data-currency='gram'] { border-color: #6cc3ff99; box-shadow: inset 0 0 0 1px #6cc3ff33, 0 0 24px #6cc3ff14; }
.dj-balance:focus-visible, .dj-tab-button:focus-visible, .dj-package:focus-visible, .dj-chip:focus-visible, .dj-quiet:focus-visible, .dj-copy:focus-visible { outline: 2px solid var(--pearl); outline-offset: 2px; }

.dj-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: 14px; background: #0d0915; border: 1px solid #563969; box-shadow: inset 0 2px 5px #0007; }
.dj-tab-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--haze); font: 700 14px var(--display); cursor: pointer; touch-action: manipulation; }
.dj-tab-button svg { width: 16px; height: 16px; }
.dj-tab-button[aria-selected='true'] { background: linear-gradient(150deg, #654080, #39214e); box-shadow: inset 0 1px 0 #e8caff40, 0 2px 7px #0005; color: #fff5ff; }

.dj-panel { display: grid; min-height: 280px; outline: none; }
.dj-tab { display: grid; gap: 14px; align-content: start; animation: enter 220ms ease; }
.dj-tab-lead { margin: 0; color: var(--haze); font-size: 13.5px; line-height: 1.45; }
.dj-loading { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 240px; }
.dj-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--haze); opacity: 0.3; animation: dj-blink 1s ease-in-out infinite; }
.dj-loading span:nth-child(2) { animation-delay: 0.15s; }
.dj-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dj-blink { 50% { opacity: 1; transform: translateY(-3px); } }

/* The round mark: a glyph, the GRAM mark, a star or the wallet's icon, in the rail's or the state's colour. */
.dj-medal { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 2px auto 4px; flex: none; }
.dj-medal-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dj-accent) 45%, transparent); }
.dj-medal-core {
  position: relative; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dj-accent) 60%, transparent);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--dj-accent) 32%, #1b1330), #110c1c 75%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--dj-accent) 22%, transparent), inset 0 1px 0 #ffffff26;
}
.dj-medal-core .gram-mark, .dj-medal-core .star { width: 34px; height: 34px; }
.dj-medal-core .gram-mark { stroke-width: 1.9; }
.dj-medal-core .dj-wallet-icon { width: 46px; height: 46px; border-radius: 13px; }
.dj-glyph { width: 34px; height: 34px; fill: none; stroke: var(--dj-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dj-medal.dj-medal-ok { --dj-accent: var(--mint); }
.dj-medal.dj-medal-bad { --dj-accent: var(--rose); }
.dj-medal.dj-medal-warn { --dj-accent: var(--star); }
.dj-medal-wait .dj-medal-ring { animation: dj-pulse 1.8s ease-out infinite; }
.dj-medal-wait::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dj-accent) 35%, transparent); animation: dj-pulse 1.8s 0.9s ease-out infinite; }
@keyframes dj-pulse { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.32); opacity: 0; } }
.dj-medal-move .dj-medal-ring {
  border: 0; background: conic-gradient(from 0deg, transparent 0 62%, var(--dj-accent) 100%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 69%, transparent 70%);
  animation: dj-spin 1.1s linear infinite;
}
@keyframes dj-spin { to { transform: rotate(1turn); } }
.dj-medal-ok .dj-medal-ring {
  border: 0; background: repeating-conic-gradient(color-mix(in srgb, var(--dj-accent) 40%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 52%, transparent 72%); mask: radial-gradient(circle, transparent 40%, #000 52%, transparent 72%);
  transform: scale(1.5); animation: dj-rays 900ms ease-out both, dj-spin 14s linear infinite;
}
.dj-medal-ok .dj-medal-core { animation: dj-pop 520ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.dj-medal-ok .dj-glyph path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: dj-draw 420ms 260ms ease-out forwards; }
@keyframes dj-rays { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1.5); } }
@keyframes dj-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dj-draw { to { stroke-dashoffset: 0; } }

/* Not connected, a rail that is off, or a frozen account: one centred card. */
.dj-hero, .dj-notice { display: grid; justify-items: center; gap: 8px; padding: 14px 4px 2px; text-align: center; }
.dj-hero-title { font-size: 19px; font-weight: 800; }
.dj-hero-text { margin: 0; max-width: 27em; color: var(--haze); font-size: 13.5px; line-height: 1.45; text-wrap: balance; }
.dj-notice { min-height: 260px; align-content: center; }
.dj-notice-actions { display: grid; gap: 2px; justify-items: center; width: 100%; margin-top: 6px; }
.dj-cta { width: 100%; }
.dj-brands { display: flex; justify-content: center; gap: 8px; min-height: 44px; margin: 6px 0 8px; }
.dj-brand { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; overflow: hidden; background: #1d1530; box-shadow: 0 0 0 1px #ffffff14, 0 6px 14px #0006; }
.dj-brand-icon { width: 100%; height: 100%; object-fit: cover; }
.dj-brand-more { color: var(--haze); font: 800 13px var(--display); }
.dj-monogram { display: grid; place-items: center; background: linear-gradient(150deg, #4a3570, #241a38); color: var(--pearl); font: 800 17px var(--display); }

/* Connected: the wallet, the amount and one button. */
.dj-amount-view { display: grid; gap: 14px; }
.dj-wallet-chip { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 4px 6px 8px; border-radius: 14px; border: 1px solid var(--line); background: #0f0b18; }
.dj-wallet-icon { width: 38px; height: 38px; border-radius: 11px; flex: none; object-fit: cover; }
.dj-wallet-id { display: grid; gap: 1px; min-width: 0; }
.dj-wallet-id b { font: 700 14px var(--display); }
.dj-wallet-id small { color: var(--haze); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-quiet { margin-left: auto; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--haze); font: 700 13px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; flex: none; }
.dj-amount { display: grid; justify-items: center; gap: 10px; }
.dj-amount-label { color: var(--haze); font: 700 11.5px var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.dj-amount-field {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 76px; padding: 8px 14px;
  border-radius: 20px; border: 1px solid #6cc3ff3d; background: radial-gradient(90% 120% at 50% 0, #1d3a5466, #0d0a17 70%);
  box-shadow: inset 0 1px 0 #c8ecff1c; cursor: text;
}
.dj-amount-field:focus-within { border-color: #6cc3ffaa; box-shadow: 0 0 0 3px #6cc3ff22, inset 0 1px 0 #c8ecff1c; }
.dj-amount-field .gram-mark { width: 30px; height: 30px; }
.dj-amount-input {
  width: 3.2ch; min-width: 1.5ch; max-width: 7ch; padding: 0; border: 0; background: none; outline: none;
  color: var(--pearl); caret-color: var(--gram); font: 800 42px/1.1 var(--display); font-variant-numeric: tabular-nums; text-align: center;
}
.dj-amount-unit { color: var(--haze); font: 800 15px var(--display); }
@supports (field-sizing: content) { .dj-amount-input { width: auto; field-sizing: content; } }
.dj-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.dj-chip { min-height: 44px; border-radius: 12px; font: 800 15px var(--display); color: var(--pearl); cursor: pointer; }
.dj-chip[aria-pressed='true'] { background: linear-gradient(180deg, #9ad8ff, #3c9bea); border-color: #9ad8ff; color: #04223a; box-shadow: 0 4px 16px #3c9bea40; }
.dj-hint { margin: 0; min-height: 1.4em; color: var(--haze); font-size: 12.5px; text-align: center; }
.dj-hint[data-problem='min'], .dj-hint[data-problem='cap'] { color: #ff8fb0; }
.dj-cta-label { display: inline-flex; align-items: center; gap: 6px; }
.dj-quiet-line { margin: -4px 0 0; color: var(--dim); font-size: 12px; text-align: center; line-height: 1.45; text-wrap: balance; }

/* "How deposits work": the rules, the address and a manual transfer, out of the way. */
.dj-how { border-radius: 14px; border: 1px solid var(--line); background: #0f0b18; }
.dj-how > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; cursor: pointer; font: 700 14px var(--display); color: var(--pearl); }
.dj-how > summary::-webkit-details-marker { display: none; }
.dj-how > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border: solid var(--haze); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 160ms ease; }
.dj-how[open] > summary::after { transform: rotate(-135deg); }
.dj-how > summary:focus-visible { outline: 2px solid var(--pearl); outline-offset: -2px; border-radius: 14px; }
.dj-how-body { display: grid; gap: 12px; padding: 0 14px 14px; }
.dj-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dj-facts li { position: relative; padding-left: 16px; color: var(--haze); font-size: 13px; line-height: 1.45; }
.dj-facts li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--dj-accent); }
.dj-address { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--pearl); font-size: 12px; word-break: break-all; }
.dj-manual-head { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.dj-manual-head b { font-size: 13px; color: var(--pearl); }
.dj-manual { display: grid; gap: 8px; }
.dj-manual:empty { display: none; }
.dj-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label label' 'value copy'; align-items: center; column-gap: 8px; row-gap: 2px; padding: 8px 6px 4px 10px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line); }
.dj-copy-label { grid-area: label; color: var(--haze); font: 700 11px var(--body); letter-spacing: 0.05em; text-transform: uppercase; }
.dj-copy-value { grid-area: value; color: var(--pearl); font-size: 12.5px; word-break: break-all; }
.dj-copy { grid-area: copy; min-width: 64px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(135deg, #2c1c3d, #171122); color: var(--pearl); font: 700 12.5px var(--body); cursor: pointer; }
.dj-fact-note { margin: 0; color: var(--haze); font-size: 12px; line-height: 1.45; }

/* Recent deposits, under each tab. */
.dj-recent { display: grid; gap: 6px; }
.dj-recent-head { display: flex; align-items: center; }
.dj-recent-head h3 { color: var(--haze); font: 700 11.5px var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.dj-recent ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dj-recent-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: #0f0b18; }
.dj-recent-row .stars { font-size: 14px; color: var(--pearl); }
.dj-recent-row small { color: var(--dim); font-size: 12px; }

/* Stars packages: three across, then two wider; each pays through Telegram's own sheet. */
.dj-packages { display: flex; flex-wrap: wrap; gap: 8px; }
.dj-package {
  flex: 1 1 calc(33.333% - 6px); min-width: 0; min-height: 98px; display: grid; justify-items: center; align-content: center; gap: 3px;
  border-radius: 16px; border: 1px solid #eab95b4d; color: var(--pearl); cursor: pointer; touch-action: manipulation; font: inherit;
  background: radial-gradient(80% 70% at 50% 0, #ffc94a26, transparent 70%), linear-gradient(160deg, #2a1d33, #150f20);
  box-shadow: inset 0 1px 0 #ffe9ac1f; transition: transform 120ms ease;
}
.dj-package:nth-child(n + 4) { flex-basis: calc(50% - 4px); }
.dj-package:active:not(:disabled) { transform: scale(0.97); }
.dj-package:disabled { opacity: 0.45; cursor: default; }
.dj-package[data-tier='3'], .dj-package[data-tier='4'] { border-color: #eab95b80; background: radial-gradient(80% 80% at 50% 0, #ffc94a3d, transparent 72%), linear-gradient(160deg, #33223a, #170f22); }
.dj-package-stars { display: flex; min-height: 18px; }
.dj-package-stars .star { width: 17px; height: 17px; }
.dj-package-stars .star + .star { margin-left: -6px; }
.dj-package-amount { font: 800 22px var(--display); font-variant-numeric: tabular-nums; }
.dj-package-unit { color: var(--haze); font-size: 11.5px; font-weight: 700; }

/* The deposit itself: one state at a time, its heading read out. */
.dj-flow { padding-top: 4px; }
.dj-progress { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 360px; padding: 12px 4px 2px; text-align: center; animation: enter 220ms ease; }
.dj-progress-title { font-size: 22px; font-weight: 800; outline: none; text-wrap: balance; }
.dj-progress-text { margin: 0; max-width: 26em; color: var(--haze); font-size: 14px; line-height: 1.5; text-wrap: balance; }
.dj-progress-note { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.dj-progress-balance { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: #0f0b18; }
.dj-progress-balance > span:first-child { color: var(--haze); font-size: 13px; }
.dj-progress-balance .stars { font-size: 17px; }
.dj-actions { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
.dj-actions .button { width: 100%; text-decoration: none; }
.dj-legal { justify-self: center; margin-top: -6px; }

@media (prefers-reduced-motion: reduce) {
  .dj-medal-ring, .dj-medal::after, .dj-medal-core, .dj-loading span, .dj-tab, .dj-progress { animation: none !important; }
  .dj-medal-ok .dj-medal-ring { opacity: 1; transform: scale(1.5); }
  .dj-medal-ok .dj-glyph path { animation: none; stroke-dashoffset: 0; }
  .dj-package { transition: none; }
}

/* The designed dropdown (Ryan, 2026-10-19: "dropdowns never ever have basic text design"; app/dropdown.ts).
   The trigger keeps the .select pill; the list is a popover of 44px rows, never the system picker. */
.select.dropdown { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; background-image: none; text-align: left; cursor: pointer; touch-action: manipulation; }
.dropdown-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-chevron { width: 8px; height: 8px; flex: none; margin: -3px 2px 0 0; border-right: 2px solid var(--haze); border-bottom: 2px solid var(--haze); transform: rotate(45deg); transition: transform 160ms ease, margin 160ms ease; }
.select.dropdown[aria-expanded='true'] { border-color: var(--star); }
.select.dropdown[aria-expanded='true'] .dropdown-chevron { margin-top: 4px; transform: rotate(-135deg); border-color: var(--star); }
.select.dropdown:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.shell[data-currency='gram'] .select.dropdown[aria-expanded='true'] { border-color: var(--gram); }
.shell[data-currency='gram'] .select.dropdown[aria-expanded='true'] .dropdown-chevron { border-color: var(--gram); }
.verifier .select.dropdown { width: 100%; }
.plinko-dock .plinko-balls.dropdown { justify-content: space-between; }

.dropdown-panel {
  position: fixed; z-index: 50; display: grid; gap: 2px; padding: 6px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px; border: 1px solid #b78add4d; background: linear-gradient(180deg, #221733, #140e20);
  box-shadow: 0 18px 44px #000000b3, 0 2px 0 #ffffff0a inset; color: var(--pearl); font-size: 14.5px;
  transform-origin: top center; animation: dropdown-in 150ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dropdown-panel[data-side='up'] { transform-origin: bottom center; animation-name: dropdown-in-up; }
.dropdown-panel.gram { border-color: #6cc3ff4d; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@keyframes dropdown-in-up { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
.dropdown-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 12px 7px 10px; border-radius: 11px; font-weight: 600; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dropdown-option.active { background: #ffffff10; }
.dropdown-text { display: flex; flex: 1; min-width: 0; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.dropdown-label { min-width: 0; overflow-wrap: anywhere; }
.dropdown-detail { color: var(--haze); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The chosen row: tinted in the balance's colour (Stars gold, GRAM blue), with a drawn check. */
.dropdown-check { width: 16px; height: 16px; flex: none; position: relative; }
.dropdown-option[aria-selected='true'] { color: var(--star); background: #ffc94a1f; }
.dropdown-option[aria-selected='true'] .dropdown-detail { color: #ffe3a6; }
.dropdown-option[aria-selected='true'] .dropdown-check::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.dropdown-panel.gram .dropdown-option[aria-selected='true'] { color: var(--gram); background: #6cc3ff1f; }
.dropdown-panel.gram .dropdown-option[aria-selected='true'] .dropdown-detail { color: #c8ecff; }
@media (prefers-reduced-motion: reduce) {
  .dropdown-panel { animation: none; }
  .dropdown-chevron { transition: none; }
}