:root {
  --bg: #0b0b0c;
  --panel: #1b1c1d;
  --panel-2: #141516;
  --panel-3: #252628;
  --row: #1f2021;
  --row-alt: #1a1b1c;
  --text: #e9e9ea;
  --muted: #9aa0a6;
  --muted-2: #6d7177;
  --green: #28a909;
  --green-2: #2bb014;
  --red: #e7373f;
  --red-deep: #c1121f;
  --line: #2a2b2d;
  --blue: #34b4ff;
  --purple: #913ef8;
  --pink: #c01bd8;
  --radius: 12px;
  --header-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }

.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* ===================== HEADER ===================== */
.topbar {
  height: var(--header-h);
  flex: 0 0 var(--header-h);
  background: #141414;
  border-bottom: 1px solid #000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  z-index: 30;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; }
.logo__text {
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #e7373f, #ff6a00 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(231, 55, 63, 0.25);
}
.balance {
  display: flex; align-items: baseline; gap: 4px;
  background: #0e0f10; border: 1px solid #2a2b2d; border-radius: 14px;
  padding: 4px 10px;
}
.balance[hidden] { display: none; }
.balance__amount { color: var(--green-2); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.balance__cur { color: var(--muted); font-size: 9px; font-weight: 600; }

.icon-btn {
  background: transparent; border: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 8px; transition: .15s;
}
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* daily streak chip — flame + day count, links to the dashboard streak page */
.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #2a1a10, #1d130c);
  border: 1px solid rgba(255, 122, 44, .45); border-radius: 14px;
  padding: 4px 10px; color: #ffb37c; text-decoration: none;
  font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums;
  transition: .15s; white-space: nowrap;
}
.streak-chip[hidden] { display: none; }
.streak-chip:hover { border-color: #ff7a2c; background: linear-gradient(180deg, #33200f, #241710); }
.streak-chip svg { animation: streak-flame 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes streak-flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .streak-chip svg { animation: none; } }

/* deposit button (header) */
.deposit-btn {
  border: 1px solid #2a2b2d;
  background: linear-gradient(180deg, #1a2a1c, #122015);
  color: #eafff0; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 14px;
  display: inline-flex; align-items: center; gap: 6px; transition: .15s; white-space: nowrap;
}
.deposit-btn svg { color: var(--green-2); }
.deposit-btn[hidden] { display: none; }
.deposit-btn:hover { border-color: var(--green); background: linear-gradient(180deg, #1e341f, #16281a); }
.only-mobile-hide { }
/* compact header on small screens — everything shrinks a step so the streak
   chip has room without pushing the icons off the edge */
@media (max-width: 560px) {
  .deposit-btn span { display: none; }
  .deposit-btn { padding: 5px 8px; }
  .topbar { padding: 0 10px; }
  .topbar__left, .topbar__right { gap: 7px; }
  .logo__text { font-size: 21px; }
  .balance { padding: 3px 8px; }
  .balance__amount { font-size: 12px; }
  .streak-chip { padding: 3px 8px; font-size: 11px; }
  .icon-btn { padding: 4px; }
}
/* 320px-class phones: one more step down or the row clips its last icon */
@media (max-width: 380px) {
  .topbar { padding: 0 8px; }
  .topbar__left, .topbar__right { gap: 5px; }
  .logo__text { font-size: 18px; }
  .balance { padding: 3px 6px; }
  .balance__cur { display: none; }
  .streak-chip { padding: 3px 6px; gap: 4px; }
}

/* deposit modal extras (reuses .auth box styling) */
.deposit__lead { color: var(--muted); font-size: 13px; text-align: center; margin: -4px 0 14px; }
.dep-status {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.dep-status[hidden] { display: none; }
.dep-status__row { display: flex; align-items: center; gap: 10px; }
.dep-status__spin {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.18); border-top-color: var(--green-2);
  animation: dep-spin .8s linear infinite;
}
.dep-status__spin.is-done { border: none; animation: none; background: var(--green-2);
  box-shadow: 0 0 8px rgba(43,176,20,.7); position: relative; }
.dep-status__spin.is-done::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #06210d; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dep-status__spin.is-fail { border: none; animation: none; background: var(--red); }
.dep-status__text { color: var(--text); font-size: 13px; font-weight: 600; }
.dep-status__amount { margin-top: 8px; color: var(--green-2); font-weight: 800; font-size: 18px; }
.dep-status__amount[hidden] { display: none; }
@keyframes dep-spin { to { transform: rotate(360deg); } }

/* account / login button */
.account-btn {
  border: 1px solid #2a2b2d; background: #0e0f10; color: var(--text);
  font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 14px;
  display: inline-flex; align-items: center; gap: 6px; transition: .15s; white-space: nowrap;
}
.account-btn[hidden] { display: none; }
.account-btn:hover { border-color: #3a3b3d; background: #17181a; }
.account-btn.is-auth { color: #cfd2d6; }
.account-btn.is-auth::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-2);
  box-shadow: 0 0 6px rgba(43,176,20,.8);
}

/* ===================== AUTH MODAL ===================== */
.auth {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.66); backdrop-filter: blur(3px); padding: 16px;
}
.auth[hidden] { display: none; }
.auth__box {
  position: relative; width: 100%; max-width: 360px;
  background: linear-gradient(180deg, #1c1d1f, #141517);
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 22px 20px 18px;
  animation: authPop .2s ease;
}
@keyframes authPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.auth__close {
  position: absolute; top: 12px; right: 12px; border: none; background: transparent; color: var(--muted-2);
  display: inline-flex; padding: 4px; border-radius: 8px; transition: .15s;
}
.auth__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.auth__logo { text-align: center; margin-bottom: 16px; }
.auth__logo .logo__text { font-size: 30px; }
.auth__tabs {
  display: flex; gap: 4px; background: var(--panel-2); border-radius: 14px; padding: 4px; margin-bottom: 16px;
}
.auth__tab { flex: 1; border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 9px; border-radius: 10px; transition: .15s; }
.auth__tab.is-active { background: var(--panel-3); color: #fff; }
.auth__form { display: flex; flex-direction: column; gap: 12px; }
.auth__field { display: flex; flex-direction: column; gap: 5px; }
.auth__field[hidden] { display: none; }
.auth__field span { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.auth__field input {
  background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 10px;
  color: #fff; font-family: inherit; font-size: 14px; padding: 11px 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.auth__field input:focus { border-color: rgba(231,55,63,.7); box-shadow: 0 0 0 3px rgba(231,55,63,.14); }
.auth__error { color: #ff8a8f; font-size: 12px; min-height: 0; }
.auth__error:not(:empty) { min-height: 16px; }
.auth__submit {
  margin-top: 4px; border: none; border-radius: 12px; padding: 13px; font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, #58d11d, #2c9e0c);
  box-shadow: 0 4px 14px rgba(40,169,9,.4), inset 0 1px 0 rgba(255,255,255,.3); transition: filter .12s, transform .08s;
}
.auth__submit:hover { filter: brightness(1.06); }
.auth__submit:active { transform: translateY(1px); }
.auth__submit:disabled { opacity: .6; cursor: default; }
.auth__hint { text-align: center; color: var(--muted-2); font-size: 11px; margin: 14px 2px 0; line-height: 1.5; }
.auth__hint b { color: #cfd2d6; font-weight: 700; }

/* ---- free/referral R2 win-cap popup (reuses .auth backdrop + .auth__box) ---- */
.capbox { max-width: 340px; text-align: center; }
.capbox__ico {
  font-size: 40px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 12px rgba(88,209,29,.45));
  animation: capPop .4s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes capPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.capbox__title { font-size: 19px; font-weight: 900; color: #fff; margin-bottom: 10px; letter-spacing: -.2px; }
.capbox__title span { color: #ffd24a; }
.capbox__lead { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 2px 12px; }
.capbox__lead b { color: #fff; font-weight: 800; }
.capbox__lead span { color: #ffd24a; font-weight: 800; }
.capbox__hint {
  font-size: 12px; line-height: 1.5; color: #cfe9bf; margin: 0 4px 16px;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(88,209,29,.10); border: 1px solid rgba(88,209,29,.22);
}
.capbox__hint b { color: #b6f097; font-weight: 800; }
.capbox__cta {
  display: block; width: 100%; text-decoration: none; text-align: center;
}
/* secondary (outlined) CTA — for a modal with two choices, e.g. invite vs upgrade */
.capbox__cta2 {
  display: block; text-decoration: none; text-align: center; margin-top: 8px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 12px;
  font-weight: 700; font-size: 14px; color: #ece7e4;
  transition: border-color .15s, background .15s;
}
.capbox__cta2:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.capbox__dismiss {
  margin-top: 10px; width: 100%; border: none; background: transparent;
  color: var(--muted-2); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px;
  transition: color .15s;
}
.capbox__dismiss:hover { color: #fff; }

/* ===================== AUTH GATE (landing) =====================
   Full-screen sign-in wall. Shown to every guest; hidden the instant a valid
   session exists (html.authed). Sized to 100dvh with the form always inside the
   first viewport — no scrolling to reach it. */
.gate {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 56px 24px 28px;
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(120% 92% at 6% 100%, rgba(231,55,63,.22), rgba(60,12,18,.05) 30%, transparent 60%),
    radial-gradient(78% 60% at 100% 0%, rgba(255,120,60,.10), transparent 55%),
    #08090b;
}
html.authed .gate { display: none; }
.gate__glow {
  position: absolute; inset: -20% -20% auto -20%; height: 150%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 208deg at 50% 118%, rgba(255,255,255,.035) 0 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(62% 60% at 50% 100%, #000, transparent 72%);
          mask-image: radial-gradient(62% 60% at 50% 100%, #000, transparent 72%);
  animation: gateBreathe 6s ease-in-out infinite;
}
@keyframes gateBreathe { 0%,100% { opacity: .38 } 50% { opacity: .62 } }

/* the game's plane, drifting on a red trail */
.gate__plane { position: relative; display: inline-block; }
.gate__plane img { display: block; width: 112px; height: auto;
  filter: drop-shadow(0 10px 26px rgba(231,55,63,.5)); animation: gatePlane 3.4s ease-in-out infinite; }
.gate__plane-trail {
  position: absolute; right: 62%; top: 54%; width: 120px; height: 5px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(231,55,63,.55)); border-radius: 4px; filter: blur(1.5px);
}
@keyframes gatePlane { 0%,100% { transform: translateY(0) rotate(-2.5deg) } 50% { transform: translateY(-9px) rotate(1deg) } }

/* entrance — the hero and card ease in on load */
.gate__inner > * { animation: gateRise .55s cubic-bezier(.16,1,.3,1) both; }
.gate__hero { animation-delay: .04s; }
.gate__card { animation-delay: .13s; }
@keyframes gateRise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
.gate__inner {
  position: relative; z-index: 1; width: 100%; max-width: 940px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
}
.gate__hero { min-width: 0; }
.gate__hero .gate__plane { margin-bottom: 10px; }
.gate__brand .logo__text { font-size: 42px; }
.gate__title {
  margin: 20px 0 10px; font-size: 40px; line-height: 1.04; font-weight: 800;
  letter-spacing: -.6px; color: #fff;
}
.gate__sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 30em; }
.gate__pts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gate__pts li { position: relative; padding-left: 28px; color: #d3d6da; font-size: 13.5px; line-height: 1.45; }
.gate__pts li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(43,176,20,.14); border: 1px solid rgba(43,176,20,.55);
}
.gate__pts li::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 4px; height: 8px;
  border: solid var(--green-2); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gate__card {
  width: 100%; max-width: 380px; justify-self: end;
  background: linear-gradient(180deg, #1c1d1f, #141517);
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.62); padding: 22px 20px 18px;
}
.gate__card-brand { display: none; text-align: center; margin-bottom: 14px; }
.gate__card-brand .logo__text { font-size: 30px; }
.gate__card .auth__tabs { margin-bottom: 16px; }
/* compact landing chips — mobile hero only */
.gate__chips { display: none; }
.gate__chips span {
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--green-2); background: rgba(43,176,20,.12); border: 1px solid rgba(43,176,20,.32);
}

/* Stacked on phones: the hero stays as a compact, branded top section so the
   screen still reads like a landing page — brand, tagline, feature chips —
   with the form sitting right below it, all inside the first viewport. */
@media (max-width: 820px) {
  /* overflow-y auto is a safety net only — login (the default) fits without it */
  .gate { padding: 50px 18px 22px; align-items: center; overflow-y: auto; }
  .gate__inner { grid-template-columns: 1fr; max-width: 400px; gap: 18px; }
  .gate__hero { display: block; text-align: center; }
  .gate__plane img { width: 96px; }
  .gate__hero .gate__plane { margin-bottom: 6px; }
  .gate__brand .logo__text { font-size: 34px; }
  .gate__title { font-size: 25px; margin: 8px 0 0; }
  .gate__sub { display: none; }                 /* chips carry the value props on mobile */
  .gate__pts { display: none; }                 /* long bullets → chips on mobile */
  .gate__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 13px; }
  .gate__card-brand { display: none; }           /* the hero carries the brand now */
  .gate__card { justify-self: center; max-width: 400px; }
}
/* Shorter phones (≤700 tall): trim the plane so the form still lands in view. */
@media (max-width: 820px) and (max-height: 700px) {
  .gate { padding-top: 46px; }
  .gate__inner { gap: 14px; }
  .gate__plane img { width: 78px; }
  .gate__title { font-size: 22px; }
  .gate__chips { margin-top: 10px; }
}
/* Very short viewports (landscape phones): keep the form reachable, trim chrome. */
@media (max-height: 520px) {
  .gate { align-items: flex-start; }
  .gate__plane, .gate__chips { display: none !important; }
  .gate__title { font-size: 20px; margin-top: 8px; }
  .gate__card { padding: 18px 18px 14px; }
}

/* honour reduced-motion for every gate flourish */
@media (prefers-reduced-motion: reduce) {
  .gate__glow, .gate__plane img,
  .gate__inner > * { animation: none !important; }
}

/* ===================== LAYOUT GRID ===================== */
.layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 290px 1fr 320px;
  gap: 8px;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  min-height: 0;
  overflow: hidden;
}

/* ===================== BETS PANEL ===================== */
.bets {
  background: var(--panel);
  border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.bets__tabs {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-2);
  margin: 8px; padding: 4px; border-radius: 20px;
}
.bets__tab {
  flex: 1; border: none; background: transparent; color: var(--muted);
  padding: 7px 6px; border-radius: 16px; font-size: 12px; font-weight: 600; transition: .15s;
}
.bets__tab.is-active { background: var(--panel-3); color: var(--text); }
.bets__close { flex: 0 0 auto; margin-left: 2px; }

.bets__summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px 2px;
}
.bets__count { font-size: 12px; color: var(--text); font-weight: 600; }
.bets__win { text-align: right; }
.bets__win-amount { color: var(--text); font-weight: 700; font-size: 14px; display: block; }
.muted { color: var(--muted); font-weight: 500; font-size: 11px; }
.bets__progress { height: 3px; background: #2a2b2d; margin: 6px 14px 4px; border-radius: 3px; overflow: hidden; }
.bets__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-2)); }

.bets__table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 6px 6px; }
.bets__thead, .bet-row {
  display: grid; grid-template-columns: 1.4fr 1fr .8fr 1.1fr; align-items: center;
  gap: 4px; padding: 6px 8px;
}
.bets__thead { color: var(--muted); font-size: 11px; font-weight: 600; }
.bets__tbody { overflow-y: auto; flex: 1 1 auto; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }

.bet-row { border-radius: 8px; font-size: 12.5px; }
.bet-row:nth-child(odd) { background: var(--row-alt); }
.bet-row.is-win { background: rgba(40,169,9,.10); box-shadow: inset 0 0 0 1px rgba(40,169,9,.25); }
.bet-row .player { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.bet-row .avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background-size: cover; background-position: center;
}
.bet-row .pname { color: #c7cace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-row .bet-amt { color: #c7cace; }
.bet-row .mult { text-align: center; }
.bet-row .mult span {
  display: inline-block; padding: 2px 7px; border-radius: 11px; font-weight: 700; font-size: 11px;
  background: rgba(255,255,255,.08); color: var(--muted);
}
.bet-row.is-win .mult span { background: rgba(40,169,9,.18); color: #6fdc4e; }
.bet-row .win-amt { text-align: right; color: var(--muted-2); }
.bet-row.is-win .win-amt { color: #6fdc4e; font-weight: 600; }

.bets__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 11px;
}
.fair { display: inline-flex; align-items: center; gap: 5px; }
.powered b { color: #b9bdc2; }

/* ===================== GAME (CENTER) ===================== */
.game {
  display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0;
}

/* history */
.history {
  background: var(--panel-2); border-radius: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; position: relative;
}
.history__list { display: flex; gap: 6px; overflow: hidden; flex: 1 1 auto; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 92%, transparent); }
.history__pill {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.06);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.history__pill.is-new { animation: pillIn .4s cubic-bezier(.2,.8,.3,1.25); }
@keyframes pillIn { from { transform: translateX(-10px) scale(.6); opacity: 0; } }
.history__more {
  flex: 0 0 auto; border: none; background: rgba(255,255,255,.06); color: var(--muted);
  width: 28px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
}

/* stage */
.stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  background:
    radial-gradient(circle at 4% 100%, rgba(150,30,40,.16) 0%, rgba(60,12,18,.06) 26%, transparent 50%),
    #0a0b0d;
  border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 18px;
  box-shadow: inset 0 0 90px rgba(0,0,0,.5);
}
/* red flash washed over the stage the instant the plane flies away */
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 18px;
  background: radial-gradient(circle at 50% 60%, rgba(231,55,63,.30), transparent 70%);
  opacity: 0;
}
.stage.is-crashed::before { animation: crashFlash .7s ease-out; }
@keyframes crashFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__sound {
  position: absolute; top: 10px; left: 10px; z-index: 8;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.4);
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); transition: .15s;
}
.stage__sound:hover { color: #fff; background: rgba(0,0,0,.6); }
.stage__multiplier {
  position: relative; z-index: 5; font-size: clamp(40px, 9vw, 96px); font-weight: 800; letter-spacing: -1px;
  color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.25), 0 6px 30px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  transition: color .2s, text-shadow .2s;
}
.stage.is-crashed .stage__multiplier { text-shadow: 0 0 40px rgba(231,55,63,.4), 0 6px 30px rgba(0,0,0,.6); }
.stage__multiplier span { font-size: .65em; }
.stage.is-crashed .stage__multiplier { color: var(--red); }
.stage__status {
  position: absolute; z-index: 6; top: 30%; left: 50%; transform: translateX(-50%);
  font-size: clamp(16px, 3vw, 26px); font-weight: 700; color: var(--red); letter-spacing: 2px;
  text-transform: uppercase; opacity: 0; transition: opacity .2s; pointer-events: none;
  text-shadow: 0 0 24px rgba(231,55,63,.5), 0 4px 18px rgba(0,0,0,.6);
}
.stage.is-crashed .stage__status { opacity: 1; animation: flewPop .45s cubic-bezier(.2,.9,.3,1.35); }
@keyframes flewPop {
  0% { transform: translateX(-50%) scale(.6); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* waiting loader */
.stage__loader {
  position: absolute; z-index: 7; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.stage.is-waiting .stage__loader { display: flex; }
.stage.is-waiting .stage__multiplier { opacity: 0; }
.loader-plane { animation: floaty 1.2s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(231,55,63,.5)); }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.loader-bar { width: 200px; height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #e7373f, #ff6a00); }
.loader-text { color: #ffb3b6; font-size: 12px; letter-spacing: 3px; font-weight: 600; }


/* ===================== PREDICTION STRIP ===================== */
.pred-strip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 480px; margin: 0 auto 8px;
  padding: 8px 10px 8px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(247,183,51,.10), rgba(247,183,51,.03)), rgba(16,17,19,.85);
  border: 1px solid rgba(247,183,51,.28);
}
.pred-strip[hidden] { display: none; }
.pred-strip__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pred-strip__ico { font-size: 18px; filter: drop-shadow(0 0 6px rgba(247,183,51,.5)); }
.pred-strip__title { font-size: 13px; font-weight: 800; color: #ffe1a1; }
.pred-strip__sub { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-strip.is-armed { border-color: rgba(46,204,113,.45); }
.pred-strip.is-armed .pred-strip__title { color: #6fdc7e; }
.pred-toggle {
  position: relative; flex: 0 0 auto; width: 44px; height: 25px; padding: 0; border: none; cursor: pointer;
  border-radius: 20px; background: rgba(255,255,255,.16); transition: background .18s;
}
.pred-toggle span { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.pred-toggle[aria-checked="true"] { background: linear-gradient(180deg, #ffd35c, #f39c0c); }
.pred-toggle[aria-checked="true"] span { transform: translateX(19px); }
.pred-get {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #3a2400; text-decoration: none;
  background: linear-gradient(180deg, #ffd35c, #f39c0c); padding: 8px 12px; border-radius: 11px;
  box-shadow: 0 4px 10px -3px rgba(243,156,12,.5);
}
.pred-get[hidden] { display: none; }

/* free-round upsell strip — same silhouette as .pred-strip, gold accent */
.upsell-strip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 480px; margin: 0 auto 8px;
  padding: 8px 10px 8px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(247,183,51,.14), rgba(247,183,51,.04)), rgba(16,17,19,.85);
  border: 1px solid rgba(247,183,51,.38);
}
.upsell-strip[hidden] { display: none; }
.upsell-strip__ico { font-size: 16px; filter: drop-shadow(0 0 6px rgba(247,183,51,.5)); }
.upsell-strip__txt { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); }
.upsell-strip__txt b { color: #ffe1a1; font-weight: 800; }
.upsell-strip__close {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px;
  border: none; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--muted); cursor: pointer;
}
.upsell-strip__close:hover { background: rgba(255,255,255,.16); color: #fff; }

/* FREE tag inside the cash-out toast (free-prediction wins → Free wallet) */
.cashout-toast__tag {
  display: inline-block; vertical-align: 1px; margin-right: 5px;
  padding: 1px 6px 2px; border-radius: 999px;
  background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.35);
  font-size: 8px; font-weight: 800; letter-spacing: 1px;
}

/* ===================== BET CONTROLS ===================== */
.controls { display: flex; justify-content: center; flex: 0 0 auto; }

/* Single input-driven bet bar: amount on the left, one action button on the right */
.bet-card {
  display: flex; align-items: stretch; gap: 8px;
  width: 100%; max-width: 480px;
  padding: 7px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(22, 23, 26, .92), rgba(12, 13, 15, .92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s, box-shadow .2s;
}
.bet-card.is-queued { border-color: rgba(40, 169, 9, 0.5); }
.bet-card.is-active { border-color: rgba(229, 138, 12, 0.5); }
.bet-card.flash-win { animation: flashWin .7s ease; }
.bet-card.flash-lose { animation: flashLose .7s ease; }
@keyframes flashWin {
  0% { box-shadow: 0 0 0 2px rgba(40,169,9,0), 0 8px 24px rgba(0,0,0,.45); }
  30% { box-shadow: 0 0 0 2px rgba(40,169,9,.7), 0 0 26px rgba(40,169,9,.45); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
}
@keyframes flashLose {
  0% { box-shadow: 0 0 0 2px rgba(231,55,63,0), 0 8px 24px rgba(0,0,0,.45); }
  30% { box-shadow: 0 0 0 2px rgba(231,55,63,.6), 0 0 22px rgba(231,55,63,.35); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
}

/* the amount input field */
.bet-field {
  flex: 1 1 auto; position: relative; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 20px;
  border-radius: 18px; /* match the action button */
  /* recessed graphite well: the neutral counterpart to the raised button —
     same shape & crisp edges, opposite depth, no colour */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 16px),
    linear-gradient(180deg, #17191c, #0e0f11);
  border: 1px solid transparent;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.bet-field:hover {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.bet-field:focus-within {
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .55),
    0 0 0 3px rgba(255, 255, 255, .06);
}
.bet-field.is-locked { opacity: .55; }
.bet-field__label {
  position: absolute; top: 9px; left: 20px;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2);
  pointer-events: none;
}
.bet-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: transparent; border: none; outline: none;
  color: #fff; font-family: inherit; font-weight: 800; font-size: 24px; letter-spacing: .5px;
  padding: 18px 0 8px; caret-color: var(--red);
}
.bet-input::-webkit-outer-spin-button,
.bet-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* auto stake: read-only, not editable */
.bet-input[readonly] { caret-color: transparent; cursor: default; }
.bet-field.is-autostake:focus-within {
  border-color: transparent;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.bet-field__cur {
  flex: 0 0 auto; align-self: flex-end; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}

/* the single action button */
.bet-btn {
  --btn-a: #41ea8b; --btn-b: #17b757; --btn-c: #0b8f43; --btn-glow: 40, 210, 120; /* Bet = emerald */
  --btn-tsh: 0 1px 1px rgba(0, 0, 0, .28);
  /* structural shadow kept in a var so the pulse keyframes can layer a glow on top without redefining it */
  --btn-shadow:
    0 12px 26px -8px rgba(var(--btn-glow), .55),
    0 3px 6px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 9px rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
  position: relative; overflow: hidden; isolation: isolate;
  /* the amount field is gone — the button is the whole control now */
  flex: 1 1 auto; min-width: 0; min-height: 64px;
  border: none; border-radius: 18px; padding: 0 24px; color: #fff; font-weight: 800;
  background: linear-gradient(180deg, var(--btn-a) 0%, var(--btn-b) 52%, var(--btn-c) 100%);
  box-shadow: var(--btn-shadow);
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 11px;
  line-height: 1.1; cursor: pointer; text-shadow: var(--btn-tsh);
  transition: transform .14s cubic-bezier(.2, .7, .3, 1), filter .16s ease, box-shadow .2s ease;
  animation: betPulse 2.8s ease-in-out infinite; /* gentle breathing glow to invite the tap */
}
/* glossy top sheen */
.bet-btn::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 48%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0));
}
/* light bar that sweeps across on hover */
.bet-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .40), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
.bet-btn__txt { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* single label, so it can carry more weight than it did above a sub-line */
.bet-btn .b1 { font-size: 20px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }

.bet-btn:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.05); }
.bet-btn:hover::after { left: 120%; }
.bet-btn:active { transform: translateY(1px) scale(.985); filter: brightness(.97); }

@keyframes betPulse {
  0%, 100% { box-shadow: var(--btn-shadow), 0 0 0 0 rgba(var(--btn-glow), 0); }
  50%      { box-shadow: var(--btn-shadow), 0 0 22px 2px rgba(var(--btn-glow), .40); }
}

.bet-btn.is-cashout { --btn-a: #ffd76a; --btn-b: #f7ab1e; --btn-c: #e0890b; --btn-glow: 240, 165, 20; color: #3a2400; --btn-tsh: 0 1px 1px rgba(255, 255, 255, .35); } /* Cash Out = gold */
.bet-btn.is-cancel  { --btn-a: #ff6b70; --btn-b: #e5323b; --btn-c: #c11d27; --btn-glow: 224, 45, 55; } /* Cancel = red */
/* in-flight: predictions auto-cash-out, so the button just shows a calm locked state */
.bet-btn.is-flying {
  --btn-a: #3c3f43; --btn-b: #303336; --btn-c: #26282b; --btn-glow: 0, 0, 0;
  color: #cfd2d6; cursor: default; text-shadow: none; animation: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.bet-btn.is-flying::before, .bet-btn.is-flying::after { display: none; }
.bet-btn:disabled { pointer-events: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .bet-btn { animation: none; }
  .bet-btn::after { transition: none; }
}

/* cash-out toast */
.cashout-toast {
  position: absolute; z-index: 9; left: 50%; top: 24%;
  transform: translate(-50%, 0) scale(.85);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 30px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, #34cf17, #1f9b0c); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 12px 30px rgba(20, 120, 10, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.cashout-toast.is-show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cashout-toast__label { font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .92; order: -1; }
.cashout-toast__mult { font-size: 24px; font-weight: 800; line-height: 1; }
.cashout-toast__win { font-size: 20px; font-weight: 800; }
.cashout-toast__win b { font-size: 12px; opacity: .85; font-weight: 700; }

.stage__multiplier.pulse { animation: multPulse .5s ease; }
@keyframes multPulse { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }

/* ===================== CHAT ===================== */
.chat {
  background: var(--panel); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.chat__online { flex: 1; text-align: center; color: var(--muted); font-size: 13px; }
.chat__online b { color: var(--green-2); }
.chat__body { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 8px; }
.msg .avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; }
.msg__main { flex: 1; min-width: 0; }
.msg__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted-2); margin-bottom: 2px; }
.msg__name { color: #f0a93a; font-weight: 600; }
.msg__bubble {
  background: var(--panel-2); border-radius: 10px; padding: 7px 10px; font-size: 13px; color: #dfe1e4;
  word-wrap: break-word; display: inline-block; max-width: 100%;
}
.msg__like { color: var(--muted-2); display: inline-flex; align-items: center; gap: 3px; font-size: 11px; align-self: flex-start; margin-top: 4px; }

.chat__input {
  display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--line);
  position: relative;
}
.chat__input input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 18px; padding: 9px 70px 9px 12px; font-size: 13px; outline: none;
}
.chat__count { position: absolute; right: 90px; color: var(--muted-2); font-size: 10px; pointer-events: none; }
.chat__send {
  border: none; background: #2c2d2f; color: #cfd2d6; border-radius: 16px; padding: 8px 12px;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
}
.chat__send:hover { background: #3a3b3d; }

/* ===================== MOBILE ===================== */
.only-mobile { display: none; }
.backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40;
}
.backdrop.is-open { display: block; }

@media (max-width: 1200px) and (min-width: 901px) {
  .layout { grid-template-columns: 250px 1fr 280px; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .bets, .chat {
    position: fixed; top: 0; bottom: 0; width: min(86vw, 360px); z-index: 50;
    border-radius: 0; transition: transform .25s ease;
  }
  .bets { left: 0; transform: translateX(-105%); }
  .chat { right: 0; transform: translateX(105%); }
  .bets.is-open { transform: translateX(0); }
  .chat.is-open { transform: translateX(0); }
  .only-mobile { display: inline-flex; }
  /* hide the login button and chat icon on mobile */
  #accountBtn, #openChat { display: none; }
  .game {
    min-height: calc(100vh - var(--header-h) - 16px);
    min-height: calc(100dvh - var(--header-h) - 16px);
    height: calc(100dvh - var(--header-h) - 16px);
  }
  /* let the stage absorb the spare space so the bet bar is never pushed off-screen */
  .stage { flex: 1 1 0; min-height: 160px; }
}

@media (max-width: 560px) {
  :root { --header-h: 50px; }
  .stage { flex: 1 1 0; min-height: 150px; }
  .bet-card { flex-direction: column; border-radius: 18px; gap: 8px; }
  .bet-field { padding: 0 16px; }
  .bet-btn { width: 100%; flex-direction: row; gap: 8px; padding: 14px; min-width: 0; }
  .stage__multiplier { font-size: clamp(36px, 14vw, 64px); }
  .cashout-toast { top: 18%; padding: 8px 22px; }
  .cashout-toast__mult { font-size: 21px; }
  .cashout-toast__win { font-size: 18px; }
}

/* ===================== NO ZOOM-ON-FOCUS ===================== */
/* Mobile Safari/Chrome auto-zoom the page when you focus a field whose
   font-size is under 16px — and never zoom back out, so every tap on an input
   left the UI stuck scaled in. Bumping those fields to 16px on touch pointers
   is the only reliable fix (iOS ignores user-scalable=no). Listed explicitly
   rather than as a blanket `input {}` so .bet-input keeps its 24px display
   size; pointer-fine devices keep the tighter desktop type throughout. */
@media (pointer: coarse) {
  .auth__field input,
  .chat__input input { font-size: 16px; }
}