/* ============================================================================
   TROLL CASINO  —  stylesheet
   Futuristic neon crypto casino for the Troll Runner Arcade.

   STRUCTURE
   1. Tokens + base            5. Game view (top bar / wheel / bets)
   2. Site header              6. Side rail (paytable / outcomes / activity)
   3. Scene stage + captions   7. Result banner + FX
   4. Walkthrough HUD          8. Responsive
   ============================================================================ */

/* ---------- 1 · Tokens + base ---------------------------------------------- */
:root {
  --tc-bg: #050008;
  --tc-panel: rgba(12, 8, 22, 0.78);
  --tc-panel-solid: #0d0918;
  --tc-line: rgba(160, 255, 200, 0.14);
  --tc-text: #eef2ff;
  --tc-dim: #9aa3c0;

  --tc-green: #3dff8a;
  --tc-purple: #9a5cff;
  --tc-blue: #3ea8ff;
  --tc-gold: #ffc94d;
  --tc-red: #ff3358;

  --tc-glow-green: 0 0 18px rgba(61, 255, 138, 0.55);
  --tc-glow-purple: 0 0 18px rgba(154, 92, 255, 0.55);
  --tc-glow-gold: 0 0 18px rgba(255, 201, 77, 0.5);

  --tc-font-display: "Audiowide", "DM Sans", sans-serif;
  --tc-font-body: "DM Sans", sans-serif;
  --tc-font-mono: "DM Mono", monospace;

  --tc-radius: 16px;
  --par-x: 0;   /* parallax offsets, set by scenes.js from pointer position */
  --par-y: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--tc-bg);
  color: var(--tc-text);
  font-family: var(--tc-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--tc-green);
  outline-offset: 2px;
}

/* ---------- 2 · Site header (matches arcade pages) -------------------------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(5, 0, 8, 0.85), transparent);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tc-text); }
.brand-mark {
  font-family: var(--tc-font-mono);
  font-weight: 700;
  color: var(--tc-green);
  border: 1px solid rgba(61, 255, 138, 0.5);
  border-radius: 8px;
  padding: 4px 8px;
  text-shadow: var(--tc-glow-green);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy span { font-weight: 900; }
.brand-copy small { color: var(--tc-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav { display: flex; gap: 18px; }
.site-nav a { color: var(--tc-dim); text-decoration: none; font-size: 14px; font-weight: 700; }
.site-nav a:hover { color: var(--tc-text); }

/* ---------- 3 · Scene stage -------------------------------------------------
   Five stacked full-viewport layers. scenes.js toggles .is-active plus a
   transition class (is-t-fade / is-t-zoom / is-t-slide / is-t-focus) on the
   stage. Each scene has a CSS-gradient fallback painted UNDER its image, so
   the page looks intentional before any scene art is dropped in.
----------------------------------------------------------------------------- */
.casino-viewport {
  position: relative;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
}

/* Framed screen — contains the cinematic instead of stretching it
   edge-to-edge, so the (low native-res) source footage isn't blown up
   nearly as far. Sized down on the long edge, not just capped, so it
   reads as a "screen" rather than a slightly-smaller fullscreen. */
.scene-frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 860px);
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--tc-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(0, 0, 0, 0.7), var(--tc-glow-purple);
}
.casino-viewport.is-gameplay .scene-frame { display: none; }

.scene-stage { position: absolute; inset: 0; background: var(--tc-bg); }

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.scene.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.scene-bg {
  position: absolute;
  inset: -6%;                       /* bleed for parallax + ken-burns drift */
  background-size: cover;
  background-position: center;
  transform: translate3d(calc(var(--par-x) * 1px), calc(var(--par-y) * 1px), 0) scale(1.02);
  will-change: transform;
}
.scene.is-active .scene-bg { animation: tc-kenburns 22s ease-in-out infinite alternate; }

@keyframes tc-kenburns {
  from { transform: translate3d(calc(var(--par-x) * 1px), calc(var(--par-y) * 1px), 0) scale(1.02); }
  to   { transform: translate3d(calc(var(--par-x) * -1px), calc(var(--par-y) * -1px), 0) scale(1.08); }
}

/* Video loops — scenes.js mounts a .scene-video over the still when a
   same-named .mp4 exists. The still stays underneath as the poster; the video
   fades in once it's actually playing. Same bleed + parallax as .scene-bg so
   pointer drift moves footage and poster together (no drift seam). */
.scene-video {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  transform: translate3d(calc(var(--par-x) * 1px), calc(var(--par-y) * 1px), 0);
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.scene.is-active .scene-video { opacity: 1; }
/* Footage brings its own motion — stop the Ken Burns drift under a video. */
.scene.has-video.is-active .scene-bg { animation: none; }

/* Gradient fallbacks — one mood per scene, used until real art loads. */
.scene[data-scene="1"] .scene-bg { background-image: radial-gradient(120% 90% at 50% 0%, #1b0b33 0%, #07001a 55%, #030006 100%); }
.scene[data-scene="2"] .scene-bg { background-image: radial-gradient(90% 80% at 50% 55%, #101c33 0%, #0a0326 55%, #030006 100%); }
.scene[data-scene="3"] .scene-bg { background-image: radial-gradient(110% 90% at 30% 60%, #12082e 0%, #051424 55%, #030006 100%); }
.scene[data-scene="4"] .scene-bg { background-image: radial-gradient(80% 80% at 50% 40%, #123322 0%, #071a10 50%, #030006 100%); }
.scene[data-scene="5"] .scene-bg { background-image: radial-gradient(100% 90% at 50% 70%, #241238 0%, #0b0620 55%, #030006 100%); }

/* Neon haze + floor glow + vignette give the gradient fallbacks depth. */
.scene-haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 25% at 25% 80%, rgba(61, 255, 138, 0.10), transparent 70%),
    radial-gradient(40% 25% at 75% 80%, rgba(154, 92, 255, 0.12), transparent 70%),
    radial-gradient(50% 20% at 50% 100%, rgba(62, 168, 255, 0.08), transparent 70%);
  pointer-events: none;
}
.scene-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(3, 0, 6, 0.9) 100%);
  pointer-events: none;
}

/* Scene transitions — the stage carries the class, the incoming scene animates. */
.scene-stage.is-t-fade  .scene.is-active .scene-inner { animation: tc-in-fade 900ms ease both; }
.scene-stage.is-t-zoom  .scene.is-active .scene-inner { animation: tc-in-zoom 1100ms cubic-bezier(0.22, 0.9, 0.24, 1) both; }
.scene-stage.is-t-slide .scene.is-active .scene-inner { animation: tc-in-slide 1000ms cubic-bezier(0.22, 0.9, 0.24, 1) both; }
.scene-stage.is-t-focus .scene.is-active .scene-inner { animation: tc-in-focus 1400ms cubic-bezier(0.16, 0.8, 0.2, 1) both; }
.scene-inner { position: absolute; inset: 0; }

@keyframes tc-in-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-in-zoom  { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes tc-in-slide { from { opacity: 0; transform: translateX(9%); } to { opacity: 1; transform: translateX(0); } }
@keyframes tc-in-focus { from { opacity: 0; transform: scale(1.25); filter: blur(6px); }
                         to   { opacity: 1; transform: scale(1); filter: blur(0); } }

/* Gameplay hides the whole framed cinematic (.scene-frame above) — no
   video backdrop behind the floor/game view. Captions/CTA go with it. */
.casino-viewport.is-gameplay .scene-caption,
.casino-viewport.is-gameplay .landing-cta { display: none; }

/* ---------- Scene captions + landing ---------------------------------------- */
.scene-caption {
  position: absolute;
  left: 50%; bottom: clamp(72px, 12vh, 130px);
  transform: translateX(-50%);
  text-align: center;
  z-index: 20;
  max-width: min(680px, 88vw);
  pointer-events: none;
}
.scene-caption .kicker {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tc-green);
  text-shadow: var(--tc-glow-green);
}
.scene-caption h1, .scene-caption h2 {
  font-family: var(--tc-font-display);
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1.05;
  margin: 10px 0 8px;
  text-shadow: 0 0 24px rgba(61, 255, 138, 0.35), 0 0 60px rgba(154, 92, 255, 0.3);
}
.scene-caption p { color: var(--tc-dim); font-size: clamp(14px, 1.8vw, 17px); font-weight: 500; }

.landing-cta {
  position: absolute;
  left: 50%; bottom: clamp(20px, 5vh, 52px);
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.enter-btn {
  font-family: var(--tc-font-display);
  font-size: clamp(16px, 2.2vw, 21px);
  color: #04120a;
  background: linear-gradient(135deg, var(--tc-green), #19d968);
  border: 0;
  border-radius: 999px;
  padding: 16px 42px;
  letter-spacing: 0.06em;
  box-shadow: 0 0 28px rgba(61, 255, 138, 0.5), 0 8px 30px rgba(0, 0, 0, 0.6);
  animation: tc-pulse 2.6s ease-in-out infinite;
}
.enter-btn:hover { filter: brightness(1.08); }
@keyframes tc-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(61, 255, 138, 0.4), 0 8px 30px rgba(0, 0, 0, 0.6); }
  50%      { box-shadow: 0 0 44px rgba(61, 255, 138, 0.75), 0 8px 30px rgba(0, 0, 0, 0.6); }
}
.landing-note { font-family: var(--tc-font-mono); font-size: 12px; color: var(--tc-dim); }

/* ---------- 4 · Walkthrough HUD (skip + progress dots) ----------------------- */
.walkthrough-hud {
  position: absolute;
  right: clamp(14px, 3vw, 32px);
  bottom: clamp(14px, 3vh, 28px);
  z-index: 25;
  display: none;
  align-items: center;
  gap: 14px;
}
.casino-viewport.is-cinematic .walkthrough-hud { display: flex; }
.wt-dots { display: flex; gap: 7px; }
.wt-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 300ms, box-shadow 300ms;
}
.wt-dots span.is-on { background: var(--tc-green); box-shadow: var(--tc-glow-green); }
.skip-btn {
  font-family: var(--tc-font-mono);
  font-size: 13px;
  color: var(--tc-text);
  background: rgba(8, 4, 16, 0.6);
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  padding: 9px 18px;
  backdrop-filter: blur(6px);
}
.skip-btn:hover { border-color: var(--tc-green); }
.wt-tap-hint {
  font-family: var(--tc-font-mono); font-size: 11px; color: var(--tc-dim);
}

/* ---------- 5 · Game view ----------------------------------------------------
   Hidden until scenes.js fires "gameplay". Slides up over the dimmed scene-5
   backdrop. Internally scrollable so small screens never trap content.
----------------------------------------------------------------------------- */
.game-view {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  overflow-y: auto;
  padding: 76px clamp(12px, 2.5vw, 32px) 24px;
}
.casino-viewport.is-gameplay .game-view { display: block; animation: tc-in-fade 700ms ease both; }

.game-frame {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
}

/* --- top bar: balances / currency / wallet / utilities --- */
.game-topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--tc-panel);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: 10px 14px;
  backdrop-filter: blur(12px);
}
.balance-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tc-font-mono);
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--tc-dim);
  transition: border-color 200ms, color 200ms;
}
.balance-chip strong { color: var(--tc-text); font-weight: 700; }
.balance-chip .cur-dot { width: 10px; height: 10px; border-radius: 50%; }
.balance-chip[data-cur="TROLL"] .cur-dot { background: var(--tc-green); box-shadow: var(--tc-glow-green); }
.balance-chip[data-cur="USDC"]  .cur-dot { background: var(--tc-blue); box-shadow: 0 0 12px rgba(62, 168, 255, 0.6); }
.balance-chip.is-active { border-color: var(--tc-green); color: var(--tc-text); }
.balance-chip[data-cur="USDC"].is-active { border-color: var(--tc-blue); }

.topbar-spacer { flex: 1; }
.wallet-mount { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 17px;
  color: var(--tc-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--tc-line);
  border-radius: 11px;
}
.icon-btn:hover { border-color: var(--tc-green); }
.icon-btn[aria-pressed="false"] .when-on,
.icon-btn[aria-pressed="true"] .when-off { display: none; }

/* --- wheel column --- */
.wheel-panel {
  position: relative;
  background: var(--tc-panel);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: 18px 18px 14px;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wheel-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  align-self: stretch;
  justify-content: space-between;
}
.wheel-title h2 {
  font-family: var(--tc-font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.05em;
  text-shadow: 0 0 18px rgba(61, 255, 138, 0.4);
}
.wheel-title .table-tag { font-family: var(--tc-font-mono); font-size: 12px; color: var(--tc-dim); }

.wheel-wrap { position: relative; width: min(94%, 58vh, 460px); aspect-ratio: 1; }
#wheel-canvas { width: 100%; height: 100%; display: block; }
.wheel-pointer {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 24px solid var(--tc-gold);
  filter: drop-shadow(0 0 8px rgba(255, 201, 77, 0.8));
  z-index: 3;
}

/* --- bet board --- */
.bet-board {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.bet-zone {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--tc-line);
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 10px 10px;
  text-align: center;
  color: var(--tc-text);
  transition: transform 150ms, border-color 150ms, box-shadow 150ms;
}
.bet-zone:hover:not(:disabled) { transform: translateY(-2px); }
.bet-zone:disabled { opacity: 0.55; cursor: not-allowed; }
.bet-zone .bz-name { font-family: var(--tc-font-display); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 0.04em; display: block; }
.bet-zone .bz-pays { font-family: var(--tc-font-mono); font-size: 20px; font-weight: 700; display: block; margin: 4px 0 2px; }
.bet-zone .bz-odds { font-family: var(--tc-font-mono); font-size: 11px; color: var(--tc-dim); display: block; }
.bet-zone .bz-stake {
  margin-top: 8px;
  display: block;
  font-family: var(--tc-font-mono);
  font-size: 13px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  padding-top: 6px;
  min-height: 22px;
  color: var(--tc-dim);
}
.bet-zone.has-stake .bz-stake { color: var(--tc-text); font-weight: 700; }

.bet-zone[data-zone="troll"]  { --bz: var(--tc-green); }
.bet-zone[data-zone="double"] { --bz: var(--tc-purple); }
.bet-zone[data-zone="triple"] { --bz: var(--tc-blue); }
.bet-zone[data-zone="whale"]  { --bz: var(--tc-gold); }
.bet-zone .bz-pays { color: var(--bz); }
.bet-zone.has-stake, .bet-zone:hover:not(:disabled) {
  border-color: var(--bz);
  box-shadow: 0 0 16px color-mix(in srgb, var(--bz) 35%, transparent);
}
.bet-zone.is-hit { animation: tc-zone-hit 900ms ease 2; }
@keyframes tc-zone-hit {
  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--bz) 35%, transparent); }
  50%      { box-shadow: 0 0 42px var(--bz); }
}

/* --- controls: chips / currency / spin --- */
.bet-controls {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.chip-rack { display: flex; gap: 8px; }
.chip-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-text);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.16), transparent 60%),
    repeating-conic-gradient(var(--chip, var(--tc-green)) 0 20deg, transparent 20deg 40deg),
    var(--tc-panel-solid);
  border: 3px dashed var(--chip, var(--tc-green));
  transition: transform 140ms, box-shadow 140ms;
}
.chip-btn:hover { transform: translateY(-3px); }
.chip-btn.is-selected {
  box-shadow: 0 0 0 3px var(--tc-bg), 0 0 0 5px var(--chip, var(--tc-green)), 0 0 22px var(--chip, var(--tc-green));
  transform: translateY(-3px);
}
.cur-toggle {
  display: flex;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  overflow: hidden;
}
.cur-toggle button {
  font-family: var(--tc-font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--tc-dim);
}
.cur-toggle button[aria-pressed="true"] { background: rgba(61, 255, 138, 0.14); color: var(--tc-green); }
.cur-toggle button[data-cur="USDC"][aria-pressed="true"] { background: rgba(62, 168, 255, 0.14); color: var(--tc-blue); }

.spin-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ghost-btn {
  font-family: var(--tc-font-mono);
  font-size: 13px;
  color: var(--tc-dim);
  background: transparent;
  border: 1px solid var(--tc-line);
  border-radius: 11px;
  padding: 11px 16px;
}
.ghost-btn:hover:not(:disabled) { color: var(--tc-text); border-color: var(--tc-purple); }
.ghost-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.spin-btn {
  font-family: var(--tc-font-display);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #1d1200;
  background: linear-gradient(135deg, var(--tc-gold), #ff9d2e);
  border: 0;
  border-radius: 13px;
  padding: 14px 34px;
  box-shadow: var(--tc-glow-gold), 0 6px 22px rgba(0, 0, 0, 0.55);
}
.spin-btn:hover:not(:disabled) { filter: brightness(1.07); }
.spin-btn:disabled { filter: grayscale(0.7) brightness(0.7); cursor: not-allowed; box-shadow: none; }
.total-staked { font-family: var(--tc-font-mono); font-size: 13px; color: var(--tc-dim); }
.total-staked strong { color: var(--tc-gold); }

/* ---------- 6 · Side rail ---------------------------------------------------- */
.side-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rail-card {
  background: var(--tc-panel);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: 14px 16px;
  backdrop-filter: blur(12px);
}
.rail-card h3 {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tc-dim);
  margin-bottom: 10px;
}
.paytable { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.paytable li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-family: var(--tc-font-mono);
}
.paytable .pt-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.paytable .pt-name { flex: 1; }
.paytable .pt-odds { color: var(--tc-dim); font-size: 11px; }
.paytable .pt-pays { font-weight: 700; }

.outcome-strip { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.outcome-strip span {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--o, #333);
  box-shadow: 0 0 8px color-mix(in srgb, var(--o, #333) 60%, transparent);
}
.outcome-strip .os-empty { font-family: var(--tc-font-mono); font-size: 12px; color: var(--tc-dim); width: auto; height: auto; border: 0; background: none; box-shadow: none; }

.activity-list { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto; }
.activity-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-dim);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 7px;
}
.activity-list .amt-win { color: var(--tc-green); font-weight: 700; }
.activity-list .amt-loss { color: var(--tc-red); }

.more-tables { display: flex; flex-wrap: wrap; gap: 8px; }
.more-tables span {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-dim);
  border: 1px dashed var(--tc-line);
  border-radius: 999px;
  padding: 7px 13px;
}

.rail-note { font-size: 12px; color: var(--tc-dim); line-height: 1.5; margin-top: 10px; }
.rail-note a { color: var(--tc-green); }

/* ---------- 7 · Result banner + FX ------------------------------------------ */
.result-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 6;
  text-align: center;
  padding: 22px 40px;
  border-radius: 18px;
  background: rgba(5, 0, 10, 0.82);
  border: 1px solid var(--tc-line);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.result-banner.is-shown { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.result-banner .rb-zone {
  font-family: var(--tc-font-display);
  font-size: clamp(24px, 4vw, 40px);
  display: block;
  color: var(--rb, var(--tc-green));
  text-shadow: 0 0 26px var(--rb, var(--tc-green));
}
.result-banner .rb-payout { font-family: var(--tc-font-mono); font-size: 17px; display: block; margin-top: 8px; }
.result-banner .rb-payout.is-win { color: var(--tc-gold); }
.result-banner .rb-payout.is-loss { color: var(--tc-dim); }

#fx-canvas {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ---------- Leaderboard rack below the viewport ------------------------------ */
.arcade-rack {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 40px) 80px;
}
.section-heading .eyebrow {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tc-purple);
}
.section-heading h2 {
  font-family: var(--tc-font-display);
  font-size: clamp(22px, 3.4vw, 34px);
  margin: 8px 0 22px;
}

/* ---------- 8 · Responsive --------------------------------------------------- */
@media (max-width: 980px) {
  .game-frame { grid-template-columns: 1fr; }
  .side-rail { flex-direction: row; flex-wrap: wrap; }
  .side-rail .rail-card { flex: 1 1 260px; }
}
@media (max-width: 640px) {
  .site-nav { display: none; }
  .game-view { padding-top: 64px; }
  .bet-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-btn { width: 52px; height: 52px; }
  .spin-actions { margin-left: 0; width: 100%; justify-content: stretch; }
  .spin-btn { flex: 1; }
  .wheel-wrap { width: min(100%, 78vw); }
  .scene-caption { bottom: 96px; }
}

/* Reduced motion: kill the drift/pulse; scenes.js also switches to plain cuts. */
@media (prefers-reduced-motion: reduce) {
  .scene.is-active .scene-bg { animation: none; }
  .enter-btn { animation: none; }
  .scene, .scene-inner { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- 9 · Shared modal + hard-gate overlay (login, deposit, redeem, admin) */
.tc-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(3, 1, 8, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tc-modal {
  width: min(420px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--tc-panel-solid);
  border: 0.5px solid var(--tc-line);
  border-radius: var(--tc-radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 28px 26px;
  position: relative;
}
.tc-modal h2 {
  font-family: var(--tc-font-display);
  font-size: 22px;
  margin-bottom: 6px;
}
.tc-modal p.tc-sub { color: var(--tc-dim); font-size: 13px; margin-bottom: 18px; line-height: 1.5; }
.tc-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--tc-dim);
  font-size: 18px; line-height: 1;
}
.tc-field { margin-bottom: 14px; }
.tc-field label { display: block; font-size: 12px; color: var(--tc-dim); margin-bottom: 6px; font-family: var(--tc-font-mono); }
.tc-field input, .tc-field select {
  width: 100%; padding: 11px 12px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--tc-line);
  border-radius: 10px;
  color: var(--tc-text);
  font-family: var(--tc-font-mono);
  font-size: 15px;
}
.tc-token-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.tc-token-toggle button {
  flex: 1; padding: 10px; border-radius: 10px;
  border: 0.5px solid var(--tc-line);
  background: rgba(255,255,255,0.03);
  color: var(--tc-dim); font-weight: 700;
}
.tc-token-toggle button.is-active { color: var(--tc-bg); background: var(--tc-green); border-color: var(--tc-green); }
.tc-preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tc-preset-btn {
  flex: 1 1 auto; padding: 8px 10px; border-radius: 10px;
  border: 0.5px solid var(--tc-line);
  background: rgba(255,255,255,0.03);
  color: var(--tc-dim); font-weight: 700; font-size: 13px;
}
.tc-preset-btn.is-active { color: var(--tc-bg); background: var(--tc-green); border-color: var(--tc-green); }
.tc-btn {
  width: 100%; padding: 13px; border-radius: 12px; border: none;
  background: var(--tc-green); color: #04150a; font-weight: 900;
  font-family: var(--tc-font-display); font-size: 14px; letter-spacing: 0.02em;
  margin-top: 4px;
}
.tc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tc-btn--ghost { background: none; border: 0.5px solid var(--tc-line); color: var(--tc-text); }
.tc-status { font-size: 13px; margin-top: 12px; min-height: 18px; }
.tc-status.is-bad { color: var(--tc-red); }
.tc-status.is-ok { color: var(--tc-green); }
.tc-tab-row { display: flex; gap: 6px; margin-bottom: 18px; }
.tc-tab-row button {
  flex: 1; padding: 9px; border-radius: 10px; border: 0.5px solid var(--tc-line);
  background: none; color: var(--tc-dim); font-size: 13px; font-weight: 700;
}
.tc-tab-row button.is-active { color: var(--tc-text); border-color: var(--tc-green); background: rgba(61,255,138,0.08); }
.tc-req-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.tc-req-list li {
  border: 0.5px solid var(--tc-line); border-radius: 10px; padding: 10px 12px;
  font-size: 12px; font-family: var(--tc-font-mono); display: flex; justify-content: space-between; gap: 10px;
}
.tc-req-status { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }
.tc-req-status.pending { color: var(--tc-gold); }
.tc-req-status.paid { color: var(--tc-green); }
.tc-req-status.rejected { color: var(--tc-red); }

/* Hard login gate — covers the whole casino viewport for guests. */
.tc-gate {
  position: absolute; inset: 0; z-index: 900;
  background: linear-gradient(180deg, rgba(5,0,8,0.96), rgba(5,0,8,0.99));
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.tc-gate-card { max-width: 420px; }
.tc-gate-card h2 { font-family: var(--tc-font-display); font-size: 26px; margin-bottom: 10px; }
.tc-gate-card p { color: var(--tc-dim); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.tc-gate-card .tc-btn { margin-bottom: 10px; }