/* Stake-inspired shell. Loaded after main.css. */
.gp-dice-marker-ico{display:block;width:28px;height:28px;position:absolute;left:50%;top:0;transform:translate(-50%,-120%);filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,255,255,.18))}
.gp-btn-mini{background:#1c2f3d;border:1px solid #2b4558;color:#cfe2f0;padding:6px 10px;border-radius:8px;font-size:12px;cursor:pointer;font-weight:600}
.gp-btn-mini.active{background:#00443a;border-color:#00e701;color:#00e701}
.hilo-odds{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#8bd0a3;opacity:.9}
.card-placeholder{background:repeating-linear-gradient(45deg,#1a2c38,#1a2c38 8px,#22394a 8px,#22394a 16px);border:2px solid #2b4558;min-width:110px;min-height:158px;width:110px;height:158px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#4e6c82;font-size:42px;font-weight:800}
.card-next-outline{border:2px dashed #3a5568;min-width:110px;min-height:158px;width:110px;height:158px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#4e6c82;font-size:12px;letter-spacing:2px;background:transparent}
/* The current (newest) card matches the NEXT/placeholder size so the two
   boxes read as a clear "now vs next" pair. Previous cards fall back to
   the default compact .card-face size and trail to the left. */
.card-face.card-current{width:110px!important;height:158px!important;font-size:34px;box-shadow:0 6px 22px rgba(0,0,0,.55);border-width:2px;transition:width .25s ease, height .25s ease, font-size .25s ease}
/* Legacy .rocket-boom left for any other page that references it; the
   #rocket.exploded display:none rule is intentionally removed so the
   new SVG rocket can fade out via opacity and be reused next round. */
.rocket-boom{position:absolute;width:90px;height:90px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0%,#ffd447 18%,#ff6a00 40%,rgba(255,0,0,0) 70%);animation:rocketBoom 800ms ease-out forwards;pointer-events:none;z-index:5}
@keyframes rocketBoom{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}60%{transform:translate(-50%,-50%) scale(2);opacity:.9}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}


:root {
  /* 888-inspired "bright on black" palette. The primary accent is a
     vivid lime green (#7ff800) — it's the dominant CTA, live indicator,
     nav active state, and jackpot highlight. Backgrounds are near-black
     so the green pops. Gold (#fce403) is reserved for jackpot figures
     and promo stars; red is kept only for hot/live badges.
     Psychology: bright green = winning, growth, money; pure black =
     premium/luxury; gold = wealth/jackpot; hot-pink red = urgency. */
  --s-bg:        #050608;   /* near-black page base */
  --s-bg-2:      #0b0d11;   /* panels / sidebar */
  --s-bg-3:      #14181f;   /* tile / card face */
  --s-bg-4:      #1c222b;   /* hover / elevated */
  --s-line:      #1f2630;   /* hairline dividers */
  --s-text:      #ffffff;
  --s-muted:     #9aa6b4;
  --s-muted-2:   #6a7483;
  --s-green:     #7ff800;   /* bright lime primary accent */
  --s-green-2:   #66cc66;   /* softer green for sub-states */
  --s-green-deep:#3aa700;   /* active button / pressed */
  --s-green-glow: rgba(127,248,0,.42);
  --s-gold:      #fce403;   /* jackpot / "MAX WIN" figures */
  --s-gold-glow: rgba(252,228,3,.38);
  --s-blue:      #007cf7;
  --s-orange:    #fc6200;   /* secondary accent — "hot" streaks, urgency */
  --s-red:       #ef3c4e;   /* kept for hot/live/PvP badges only */
  --s-red-2:     #ff5d6c;
  --s-red-glow:  rgba(239,60,78,.35);
  --s-amber:     var(--s-gold);

  /* ---------- QuiKash design-system accent palette ----------
     Promoted from the design-imports/* batch (qk-lobby, 404,
     maintenance, design-system). Cross-component accents that
     don't fit the per-game --bs-* / --pong-* namespaces.       */
  --qk-cyan:     #66ffe5;   /* "open lobby" cyan, info banners  */
  --qk-gold:     #ffd166;   /* warm ETA / promo highlight       */
  --qk-red:      #ff4567;   /* PvP danger / battleship accent   */
  --qk-blue:     #4fc3f7;   /* secondary info accent            */
  --qk-purp:     #b061ff;   /* RPS accent / level-up shimmer    */

  /* ---------- Currency palette (balance pill, future wallet)  */
  --c-btc:       #f7931a;
  --c-eth:       #627eea;
  --c-sol:       #14f195;
  --c-ltc:       #345d9d;
  --c-bnb:       #f3ba2f;
  --c-usd:       #7ff800;   /* aliases the lime accent for USD  */
  --c-pp:        #ffd166;   /* Promo Points = warm gold         */
  --c-pw:        #66ffe5;   /* Promo Winnings = cool cyan       */

  /* ---------- Notification-type palette (qk-notifications) -- */
  --t-win:       #7ff800;
  --t-match:     #66ffe5;
  --t-coin:      #ffd166;
  --t-friend:    #b061ff;
  --t-loss:      #ff4567;
  --t-system:    #9aa6b4;
  --t-promo:     #4fc3f7;
}

html, body {
  background: var(--s-bg) !important;
  color: var(--s-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hide number input spinners globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ============== LAYOUT ============== */
.s-shell {
  display: grid;
  grid-template-columns: 216px 1fr;
  min-height: 100vh;
}
/* Sidebar collapse handled in the comprehensive mobile section at bottom */

/* ============== SIDEBAR ============== */
.s-side {
  background: linear-gradient(180deg, #0b0d11 0%, #070809 100%);
  border-right: 1px solid var(--s-line);
  padding: 16px 10px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.s-side::-webkit-scrollbar { width: 6px; }
.s-side::-webkit-scrollbar-thumb { background: rgba(127,248,0,.35); border-radius: 3px; }
/* Clean wordmark — no icon, no gradient fill. Matches the Stake-like
   restrained look: single weight, tight letterspacing, subtle accent dot.
   The logo image is reserved for the browser tab favicon only. */
.s-side .s-brand {
  display: block;
  padding: 14px 12px 22px;
  text-decoration: none;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #f6f7fb;
  transition: color .2s ease;
}
.s-side .s-brand:hover { color: #ffffff; }
.s-side .s-brand .s-brand-dot {
  color: var(--s-green);
  margin-left: 1px;
}
.s-brand-mobile {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #f6f7fb;
  text-decoration: none;
}
.s-brand-mobile .s-brand-dot { color: var(--s-green); margin-left: 1px; }

.s-products {
  display: flex;
  background: var(--s-bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
}
.s-products button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--s-muted);
  font-weight: 800;
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.s-products button.active {
  background: var(--s-bg-3);
  color: var(--s-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* 888-inspired nav: icon + label. The SVG sits inside .s-nav-ico at a
   fixed 30x30 footprint so the label column stays aligned. Active state
   is a subtle red left-border + slightly brighter background. */
.s-nav { display: flex; flex-direction: column; gap: 2px; }
.s-nav a, .s-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border-radius: 8px;
  color: var(--s-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  letter-spacing: .01em;
  width: 100%;
}
.s-nav a:hover, .s-nav button:hover {
  background: rgba(127,248,0,.08);
  color: var(--s-text);
  transform: translateX(2px);
}
.s-nav a.active, .s-nav button.active {
  background: linear-gradient(90deg, rgba(127,248,0,.14), rgba(127,248,0,.02));
  color: var(--s-text);
  border-left-color: var(--s-green);
}
.s-nav .s-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.s-nav .s-nav-ico .s-nav-svg {
  width: 30px;
  height: 30px;
  display: block;
}
.s-nav .s-nav-label {
  flex: 1;
  min-width: 0;
}
/* Inline pending-count chip on a sidebar nav link (e.g. Friends incoming
   requests). Sits to the right of the label — same red as the bell badge. */
.s-nav .s-nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  background: #ef3c4e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  flex: 0 0 auto;
}
.s-nav a.s-nav-sub {
  padding-left: 28px;
  font-size: 13px;
  opacity: 0.8;
}
/* Thin horizontal rule as the group separator instead of an empty gap. */
.s-nav .sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,248,0,.28), transparent);
  margin: 10px 8px;
  border: 0;
}

/* ---- Sidebar nav refinements (from design-imports/sidebar-nav.html) ----
   Phase-2 refinements on top of the base .s-nav rules above. The default
   hover/active treatments already exist; this block adds:
     - A brighter glow on the active item's green left border.
     - A "currently playing" pulsing dot indicator (Versus).
     - Positioning + muted tint for the auth-only sub-links (e.g.
       "Versus stats" under Versus).
   None of these override the existing rules structurally — they layer
   on top with higher specificity or new selectors. */
.s-nav a.active, .s-nav button.active {
  box-shadow: inset 2px 0 8px rgba(127,248,0,.35);
}
/* Subtle underline fade on hover for labels — design wants a 1px scaleX
   underline that settles in from the left on hover. */
.s-nav a .s-nav-label,
.s-nav button .s-nav-label {
  position: relative;
}
.s-nav a:hover .s-nav-label::after,
.s-nav button:hover .s-nav-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--s-green);
  transform-origin: left;
  animation: sNavUnderline .25s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sNavUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* "Currently playing" dot — appears next to the Versus link's icon when
   the user has a live Battleship/Pong match. Delegated in shell.js via
   wireActiveMatch(). The dot is positioned over the icon's top-right
   corner so it reads as a live-indicator badge. */
.s-nav-playing-dot {
  position: absolute;
  top: 6px;
  left: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-green);
  border: 2px solid var(--s-bg-2);
  box-shadow: 0 0 0 0 rgba(127,248,0,.55);
  animation: sNavPlayPulse 1.6s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
}
@keyframes sNavPlayPulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,248,0,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(127,248,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,248,0,0); }
}
.s-nav a.s-nav-playing { position: relative; }
.s-nav a.s-nav-playing .s-nav-label::before {
  /* Small "In match" chip floated to the right of the label when the
     sidebar has room; hidden on narrow sidebars to avoid clipping. */
  content: "\2022";
  color: var(--s-green);
  font-weight: 900;
  margin-left: 6px;
}

/* Auth-only sub-links under a main nav entry (e.g. Versus stats). The
   .s-nav-sub class already reduces padding + opacity in the base rules;
   this refinement adds a subtle left-border-continuation so the indent
   reads as "belongs to the parent row above". */
.s-nav a.s-nav-sub {
  position: relative;
  font-size: 12.5px;
  color: var(--s-muted-2);
}
.s-nav a.s-nav-sub::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--s-line);
}
.s-nav a.s-nav-sub:hover::before {
  background: rgba(127,248,0,.3);
}
.s-nav a.s-nav-sub.active {
  color: var(--s-text);
}

/* ============== SIDEBAR HEADER (user card + notification bell) ============== */
/* Profile card sits at the very top of the sidebar (above the brand +
   nav). The bell is a standalone icon centered directly below the
   username — no row, no label, no border. Both are auth-only. */
.s-side-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 14px;
  border-bottom: 1px solid var(--s-line);
  margin-bottom: 12px;
}

.s-side-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(127,248,0,.16), transparent 65%),
    linear-gradient(180deg, rgba(127,248,0,.05), rgba(0,0,0,0));
  border: 1px solid rgba(127,248,0,.22);
  text-decoration: none;
  color: var(--s-text);
  width: 100%;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.s-side-user:hover {
  transform: translateY(-1px);
  border-color: var(--s-green);
  box-shadow: 0 10px 28px var(--s-green-glow);
}
.s-side-user-avatar {
  display: inline-flex;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #0a1f05, #050608);
  border: 2px solid var(--s-green);
  box-shadow:
    0 0 0 4px rgba(127,248,0,.08),
    inset 0 0 10px rgba(127,248,0,.35),
    0 6px 18px var(--s-green-glow);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s-side-user-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.s-side-user-avatar svg path,
.s-side-user-avatar svg circle { stroke: var(--s-green); }
.s-side-user-avatar svg circle { fill: var(--s-green); }
.s-side-user-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  gap: 2px;
  max-width: 100%;
}
.s-side-user-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--s-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
  letter-spacing: .01em;
}
.s-side-user-sub {
  font-size: 10px;
  color: var(--s-muted);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.s-side-user-caret { display: none; }

/* Notification bell — minimalist: just the icon, centered, with an
   overlaid red badge when there are unread notifications. */
.s-side-bell-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.s-side-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(127,248,0,.06);
  border: 1px solid rgba(127,248,0,.22);
  color: var(--s-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  position: relative;
}
.s-side-bell:hover {
  background: rgba(127,248,0,.14);
  border-color: var(--s-green);
  color: var(--s-green);
  transform: scale(1.06);
}
.s-side-bell-ico {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
.s-side-bell-ico svg { width: 20px; height: 20px; display: block; }
.s-side-bell-label { display: none; }
.s-side-bell .s-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--s-red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px var(--s-red-glow);
  border: 2px solid var(--s-bg-2);
}
/* When the bell lives in the sidebar, the dropdown is reparented to
   <body> and positioned via JS (getBoundingClientRect + position:fixed)
   so the sidebar's `overflow-y: auto` can't clip it. These rules cover
   the visual styling — position/left/top are set inline by shell.js. */
.s-notif-dropdown-side {
  width: 340px !important;
  max-height: 460px !important;
  background: var(--s-bg-2) !important;
  border: 1px solid rgba(127,248,0,.28) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 24px rgba(127,248,0,.12) !important;
  z-index: 500 !important;
}

/* ============== TOP BAR ============== */
.s-main { display: flex; flex-direction: column; min-width: 0; }
.s-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: rgba(5,6,8,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--s-line);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(127,248,0,.06);
}
.s-top .s-brand-mobile {
  display: none;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.3px;
  color: #f6f7fb;
  text-decoration: none;
}
@media (max-width: 900px) {
  .s-top .s-brand-mobile { display: inline-block; }
}
.s-top .spacer { flex: 1; }
.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.s-btn.ghost {
  background: transparent;
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.s-btn.ghost:hover { background: var(--s-bg-3); border-color: var(--s-green); color: var(--s-green); }
.s-btn.primary {
  background: var(--s-green);
  color: #001a00;
  text-shadow: none;
  box-shadow: 0 8px 22px var(--s-green-glow), inset 0 -2px 0 rgba(0,0,0,.18);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.s-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.s-btn.green {
  background: var(--s-green);
  color: #001a00;
  box-shadow: 0 8px 22px var(--s-green-glow), inset 0 -2px 0 rgba(0,0,0,.18);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.s-btn.green:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Balance pill — Stake-like restrained look. No moneybag, no decoration;
   just tabular numerics in a tight rounded rectangle. The crypto prefix
   (e.g. "0.3 SOL") is injected by common.js into #nav-balance-prefix with
   a slightly muted color so the USD figure stays the emphasis. */
.s-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  padding: 7px 12px;
  border-radius: 6px;
  font-weight: 700;
  color: var(--s-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
#nav-balance-prefix {
  color: var(--s-muted);
  font-weight: 600;
}
#nav-balance-amt {
  color: var(--s-text);
}
.s-balance-link { transition: border-color .15s, background .15s, box-shadow .15s; }
.s-balance-link:hover {
  border-color: var(--s-green);
  background: var(--s-bg-2);
  box-shadow: 0 0 16px var(--s-green-glow);
}
/* The pill is now a <button> — reset default button chrome. */
button.s-balance {
  font-family: inherit;
  cursor: pointer;
  outline: 0;
}
button.s-balance:focus-visible { border-color: var(--s-green); }

/* Balance menu wrapper: positions the dropdown absolutely over the topbar. */
.s-balance-wrap { position: relative; }
.s-balance-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(0,231,1,.08);
  z-index: 200;
  overflow: hidden;
  /* Subtle drop-in when opened. */
  transform-origin: top right;
  animation: sBalanceMenuIn .16s ease-out;
}
@keyframes sBalanceMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.s-balance-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--s-line);
  font-size: 12px;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.s-balance-menu-head strong {
  color: var(--s-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.s-balance-menu-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 360px;
  overflow-y: auto;
}
.s-balance-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  transition: background .12s;
}
.s-balance-menu-row:hover { background: var(--s-bg-3); }
.s-balance-menu-pp { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2px; padding-top: 12px; }
.s-balance-menu-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 28px;
  /* Belt-and-suspenders against parent flex shrinking the SVG to 0×0:
     enforce the box size as the minimum so it can never collapse. */
  min-width: 28px;
  min-height: 28px;
  display: block;
  object-fit: contain;
}
.s-balance-menu-name {
  flex: 1;
  min-width: 0;
}
.s-balance-menu-symbol {
  font-weight: 800;
  color: var(--s-text);
  font-size: 13px;
  letter-spacing: .3px;
}
.s-balance-menu-usd {
  font-size: 11px;
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}
.s-balance-menu-amt {
  font-weight: 700;
  font-size: 13px;
  color: var(--s-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.s-balance-menu-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--s-line);
  background: rgba(0,0,0,.15);
}
.s-balance-menu-actions .s-btn {
  flex: 1;
  text-align: center;
  font-size: 13px;
  padding: 10px 14px;
}

/* Profile pill — top-bar, right of the balance. A small colored dot
   stands in for the old 👤 emoji: green ring, solid green core, no
   extra text. Matches Stake's avatar placeholders. */
.s-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: var(--s-text);
  transition: border-color .15s, background .15s;
}
.s-profile:hover { border-color: var(--s-green); background: var(--s-bg-2); }
.s-profile .s-profile-avatar {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--s-green) 0 38%, transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(0,231,1,.28) 66%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(0,231,1,.35) inset;
}

/* ============== CONTENT ============== */
.s-content {
  padding: 28px 24px 60px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* Hero with product cards */
.s-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
@media (max-width: 720px) {
  .s-hero { grid-template-columns: 1fr; }
}
.s-hero-card {
  position: relative;
  background: linear-gradient(135deg, var(--s-bg-3), var(--s-bg-2));
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 28px;
  overflow: hidden;
  text-decoration: none;
  color: var(--s-text);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .2s;
}
.s-hero-card:hover { transform: translateY(-3px); border-color: var(--s-green); box-shadow: 0 0 22px rgba(0,231,1,.25); }
.s-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(255,217,94,.15), transparent 60%);
  pointer-events: none;
}
.s-hero-card h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.5px;
}
.s-hero-card p {
  margin: 6px 0 0;
  color: var(--s-muted);
  font-size: 14px;
}
.s-hero-card .s-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--s-muted);
  font-weight: 700;
}
.s-hero-card .s-count::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--s-green);
  box-shadow: 0 0 8px var(--s-green);
}
.s-hero-card.casino h3 { color: var(--s-gold); }

/* Row header */
.s-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 14px;
}
.s-row-head h2,
.s-row-head h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.s-row-head .count-pill {
  font-size: 12px;
  color: var(--s-muted);
  background: var(--s-bg-3);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
}

/* Game tile grid — bigger, portrait-dominant like 888casino/Stake's
   single-game-image cards. The emoji icon still works as a fallback so
   existing pages keep working, but new tiles with class `.s-tile-card`
   use a big top image + name + max-win caption below. */
.s-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 14px;
}
.s-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--s-bg-3), var(--s-bg-2));
  border: 1px solid var(--s-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--s-text);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s;
}
.s-tile:hover {
  transform: translateY(-6px);
  border-color: var(--s-green);
  box-shadow: 0 14px 38px rgba(0,0,0,.55), 0 0 26px var(--s-green-glow);
}
.s-tile .s-ico {
  font-size: 56px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.s-tile:hover .s-ico { transform: scale(1.08) rotate(-3deg); }
/* When a tile uses a real SVG/PNG instead of an emoji, size it to match
   the 56px emoji footprint so tiles stay visually consistent. */
.s-tile .s-ico img {
  width: 64px;
  height: 64px;
  display: block;
  object-fit: contain;
}
.s-tile .s-name {
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  padding: 0 8px;
}
.s-tile .s-maxwin {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--s-gold);
  text-shadow: 0 0 10px var(--s-gold-glow);
  letter-spacing: .04em;
  padding: 0 8px;
}
.s-tile .s-live {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--s-muted);
  background: rgba(0,0,0,.4);
  padding: 3px 7px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.s-tile .s-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--s-green);
}

/* Footer */
.s-foot {
  border-top: 1px solid var(--s-line);
  padding: 24px;
  color: var(--s-muted-2);
  font-size: 13px;
}
.s-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}
.s-foot .big { color: var(--s-text); font-weight: 800; }
.s-foot-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.s-foot-links a { color: var(--s-muted); text-decoration: none; font-weight: 600; transition: color .15s; }
.s-foot-links a:hover { color: var(--s-text); }
.s-foot-copy {
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--s-line);
  color: var(--s-muted-2);
  font-size: 12px;
}

/* Landing-only: centered register hero */
.s-door {
  max-width: 560px;
  margin: 60px auto 40px;
  text-align: center;
  padding: 0 24px;
}
.s-door h1 {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  margin: 0 0 16px;
  letter-spacing: -1px;
  line-height: 1.1;
}
.s-door h1 .hl {
  background: linear-gradient(135deg, #8ab4ff, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s-door p { color: var(--s-muted); font-size: 17px; margin: 0 0 28px; line-height: 1.5; }
.s-door .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.s-lang {
  display: inline-flex;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 6px;
  padding: 2px;
}
.s-lang button {
  background: transparent;
  border: 0;
  color: var(--s-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.s-lang button.active { background: var(--s-bg-3); color: var(--s-text); }

/* ============== LEGAL (terms / privacy) ============== */
.s-tile.tc { display: block; width: 100%; }
.s-tile.tc h3 {
  color: var(--s-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin: 24px 0 10px;
}
.s-tile.tc h3:first-of-type { margin-top: 8px; }
.s-tile.tc p {
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 10px;
}
.s-tile.tc p strong { color: var(--s-text); font-weight: 700; }
.s-tile.tc a { color: var(--s-green); text-decoration: none; }
.s-tile.tc a:hover { text-decoration: underline; }
.s-tile.tc ul { margin: 0 0 12px 20px; color: var(--s-muted); line-height: 1.7; font-size: 14px; }

/* ============== RECENT BETS TICKER ============== */
.s-feed {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  overflow: hidden;
}
.s-feed-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--s-line);
}
.s-feed-rows { /* fixed-height rows, no scrollbar — feed trims its own tail */ }
.s-feed-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px 18px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  animation: feed-in .35s ease;
}
.s-feed-row:last-child { border-bottom: 0; }
.s-feed-row .user { color: var(--s-text); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.s-feed-row .user .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--s-green); box-shadow: 0 0 6px var(--s-green);
}
.s-feed-row .game { color: var(--s-muted); text-transform: capitalize; }
.s-feed-row .wager { color: var(--s-text); font-variant-numeric: tabular-nums; }
.s-feed-row .mult { color: var(--s-muted); font-variant-numeric: tabular-nums; }
.s-feed-row .payout { font-weight: 700; font-variant-numeric: tabular-nums; }
.s-feed-row.win .payout { color: var(--s-green); }
.s-feed-row.loss .payout { color: var(--s-muted-2); }
.s-feed-empty { padding: 30px; text-align: center; color: var(--s-muted); font-size: 14px; }
@keyframes feed-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .s-feed-head, .s-feed-row { grid-template-columns: 1.2fr 1fr 1fr; }
  .s-feed-head .c-mult, .s-feed-row .mult,
  .s-feed-head .c-wager, .s-feed-row .wager { display: none; }
}

/* ============== PROFILE / SETTINGS ============== */
.pf-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
  max-width: 1180px;
}
@media (max-width: 820px) {
  .pf-wrap { grid-template-columns: 1fr; }
}
.pf-side {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 18px;
}
.pf-side .pf-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--s-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.pf-side .pf-link:hover { background: var(--s-bg-3); color: var(--s-text); }
.pf-side .pf-link.active { background: var(--s-bg-3); color: var(--s-text); }
.pf-side .pf-link .ico { font-size: 16px; width: 22px; text-align: center; }

.pf-pane { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pf-head h2 { margin: 0 0 4px; font-size: 22px; color: var(--s-text); }
.pf-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 22px;
}
.pf-card .pf-h3 { margin: 0 0 12px; font-size: 15px; color: var(--s-text); }
.pf-card-label { color: var(--s-muted); font-size: 13px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.pf-note { color: var(--s-muted); font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.pf-empty { text-align: center; color: var(--s-muted); padding: 40px 22px; }
.pf-empty p { margin: 0; font-size: 14px; }

.pf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.pf-tabs {
  display: flex;
  gap: 4px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.pf-tab {
  background: transparent;
  border: 0;
  color: var(--s-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.pf-tab:hover { color: var(--s-text); }
.pf-tab.active { background: var(--s-bg-3); color: var(--s-text); }
.pf-tab-body { display: flex; flex-direction: column; gap: 14px; }

.pf-form { display: grid; gap: 10px; max-width: 380px; }
.pf-form input {
  padding: 10px 12px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  color: var(--s-text);
  font-size: 14px;
}
.pf-form input:focus { outline: none; border-color: var(--s-blue); }
.pf-form button { justify-self: start; }
.pf-msg { font-size: 13px; color: var(--s-muted); }
.pf-field { display: grid; gap: 6px; margin-bottom: 14px; }
.pf-field label { font-size: 12px; color: var(--s-muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-readonly { padding: 10px 12px; background: var(--s-bg); border: 1px solid var(--s-line); border-radius: 8px; color: var(--s-text); font-size: 14px; }

.pf-wallet-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.pf-wallet-card {
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.pf-wallet-icon { font-size: 32px; }
.pf-wallet-name { font-size: 13px; font-weight: 700; color: var(--s-text); }
.pf-wallet-addr { font-family: monospace; font-size: 12px; color: var(--s-muted); min-height: 16px; }
.pf-wallet-card .s-btn { width: 100%; justify-content: center; }

.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th, .pf-table td { padding: 10px 12px; border-bottom: 1px solid var(--s-line); text-align: left; }
.pf-table th { color: var(--s-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-table .pf-win { color: var(--s-green); }
.pf-table .pf-loss { color: #ff6b6b; }
.pf-table .pf-opponent {
  color: var(--s-muted);
  font-size: 12px;
  margin-left: 6px;
  font-style: italic;
}

/* ============== GAME PAGE (Stake-style layout) ============== */
.gp-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.gp-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gp-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--s-muted); text-decoration: none; font-size: 18px;
  transition: background 0.12s, color 0.12s;
  margin-right: -6px; flex-shrink: 0;
}
.gp-back:hover { background: var(--s-bg-3); color: var(--s-text); }
.gp-header h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.4px; color: var(--s-text); }
.gp-header .gp-tag { color: var(--s-muted); font-size: 14px; }
.gp-board {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 18px;
}
/* gp-board mobile collapse handled in comprehensive mobile section at bottom */
.gp-canvas {
  min-height: 360px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.gp-panel {
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gp-panel label {
  display: block;
  font-size: 11px;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  font-weight: 700;
}
.gp-panel input, .gp-panel select {
  width: 100%;
  padding: 10px 12px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  color: var(--s-text);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.gp-panel input:focus, .gp-panel select:focus { outline: none; border-color: var(--s-green); }
.gp-panel .gp-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--s-green);
  color: #001a00;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.gp-panel .gp-btn:hover:not(:disabled) { filter: brightness(1.1); }
.gp-panel .gp-btn:disabled { opacity: .5; cursor: not-allowed; }
.gp-panel .gp-btn.secondary {
  background: var(--s-bg-3);
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.gp-panel .gp-btn.secondary:hover:not(:disabled) { background: var(--s-bg-4); }
.gp-panel .gp-quick { display: flex; gap: 6px; margin-top: 8px; }
.gp-panel .gp-quick button {
  flex: 1;
  padding: 6px;
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 6px;
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.gp-panel .gp-quick button:hover { color: var(--s-text); }
.gp-stat {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--s-muted);
}
.gp-stat strong { color: var(--s-text); font-weight: 800; }
.gp-about {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 24px 28px;
}
.gp-about h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--s-text);
  display: flex; align-items: center; gap: 10px;
}
.gp-about p {
  margin: 0 0 10px;
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.65;
}
.gp-about p:last-child { margin-bottom: 0; }
.gp-about h3 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--s-text);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.gp-about h3:first-of-type { margin-top: 6px; }
.gp-about ul {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.65;
}
.gp-about ul li { margin-bottom: 4px; }
.gp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 4px 0 10px;
}
.gp-stats-grid .gp-stat-cell {
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  padding: 10px 12px;
}
.gp-stats-grid .gp-stat-cell small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--s-muted);
  margin-bottom: 4px;
}
.gp-stats-grid .gp-stat-cell strong {
  font-size: 16px;
  color: var(--s-text);
  font-weight: 800;
}
.gp-banner {
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}
.gp-banner.win { background: rgba(0,231,1,.12); color: var(--s-green); border: 1px solid rgba(0,231,1,.3); }
.gp-banner.lose { background: rgba(255,107,107,.1); color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }

/* Crash rocket */
.gp-crash-stage {
  flex: 1;
  position: relative;
  min-height: 360px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,231,1,.08), transparent 60%), linear-gradient(180deg, #0a1020 0%, var(--s-bg) 100%);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--s-line);
}
.gp-crash-mult {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 72px;
  font-weight: 900;
  color: var(--s-green);
  text-shadow: 0 0 30px rgba(0,231,1,.5);
  font-variant-numeric: tabular-nums;
  z-index: 2;
  pointer-events: none;
}
.gp-crash-mult.crashed { color: #ff6b6b; text-shadow: 0 0 30px rgba(255,107,107,.6); animation: gp-shake .4s; }
@keyframes gp-shake {
  0%,100% { transform: translate(-50%,-50%); }
  25% { transform: translate(-52%,-48%); }
  75% { transform: translate(-48%,-52%); }
}
/* --- Legacy rocket classes kept so other pages using emoji rocket don't break --- */
.gp-rocket {
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 44px;
  transition: left .12s linear, bottom .12s linear;
  filter: drop-shadow(0 0 16px rgba(0,231,1,.5));
  z-index: 3;
  transform: rotate(-30deg);
}
.gp-rocket-trail {
  position: absolute;
  bottom: 18px; left: 16px;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, rgba(0,231,1,0), rgba(0,231,1,.8));
  border-radius: 3px;
  filter: blur(1px);
  pointer-events: none;
  transition: width .12s linear, left .12s linear, bottom .12s linear;
  z-index: 2;
}

/* ============ Crash v2 — global rounds, SVG rocket + trail ============ */
/* Trail SVG covers the whole stage; the path inside is redrawn in JS. */
.crash-trail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
/* SVG rocket is positioned via transform:translate set from JS. The center
   of its viewBox (0,0) lands on the target pixel. */
.crash-rocket-svg {
  position: absolute;
  left: 0; top: 0;
  width: 64px;
  height: 84px;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 14px rgba(0,255,136,.5));
  transition: none;
  transform-origin: 50% 50%;
  margin-left: -32px;
  margin-top: -42px;
}
#rocket.exploded { opacity: 0; transition: opacity .1s; }
/* Rocket bobs gently. The outer #rocket element handles the directional
   rotation (set from JS to match the curve tangent), so the inner tilt
   only does a tiny vertical bob to give the flame some life. */
.crash-rocket-tilt {
  transform-origin: center;
  animation: crashRocketBob 1.6s ease-in-out infinite;
}
@keyframes crashRocketBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
/* Flame flicker — scales and shifts hue on a tight loop. */
.crash-rocket-flame {
  transform-origin: 0 14px;
  animation: crashFlameFlicker 120ms ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(255,170,0,.7));
}
@keyframes crashFlameFlicker {
  0%   { transform: scaleY(.85) scaleX(.95); opacity: .85; }
  100% { transform: scaleY(1.15) scaleX(1.02); opacity: 1; }
}

/* Explosion layer — covers the stage, holds particles + shockwave. */
.crash-boom-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.crash-shockwave {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255,220,120,.9);
  box-shadow: 0 0 30px rgba(255,140,0,.5), inset 0 0 20px rgba(255,200,80,.6);
  transform: translate(-50%, -50%) scale(.1);
  animation: crashShockwave 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes crashShockwave {
  0%   { transform: translate(-50%,-50%) scale(.1); opacity: 1; border-width: 6px; }
  60%  { opacity: .7; }
  100% { transform: translate(-50%,-50%) scale(10); opacity: 0; border-width: 1px; }
}
.crash-core-flash {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd447 20%, #ff6a00 45%, rgba(255,0,0,0) 75%);
  transform: translate(-50%,-50%) scale(.1);
  animation: crashCoreFlash 700ms ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes crashCoreFlash {
  0%   { transform: translate(-50%,-50%) scale(.1); opacity: 1; }
  50%  { transform: translate(-50%,-50%) scale(1.6); opacity: .95; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
.crash-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffd447;
  box-shadow: 0 0 10px rgba(255,180,50,.9);
  transform: translate(-50%,-50%);
  animation: crashParticle 900ms cubic-bezier(.2,.6,.3,1) forwards;
  --dx: 0px;
  --dy: 0px;
}
@keyframes crashParticle {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  80%  { opacity: .7; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) scale(.2);
    opacity: 0;
  }
}

/* Centered cash-out toast. Shown briefly on successful cashout. */
.crash-cashed-toast {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(.7);
  font-size: 56px;
  font-weight: 900;
  color: #00ff88;
  text-shadow: 0 0 25px rgba(0,255,136,.7), 0 4px 20px rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  letter-spacing: .5px;
  white-space: nowrap;
  background: rgba(10,20,30,.55);
  padding: 18px 34px;
  border-radius: 18px;
  border: 2px solid rgba(0,255,136,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .15s ease;
}
.crash-cashed-toast.show {
  animation: crashCashToast 2500ms cubic-bezier(.2,1.2,.3,1) forwards;
  opacity: 1;
}
@keyframes crashCashToast {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.55); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  25%  { transform: translate(-50%,-50%) scale(1.00); }
  70%  { opacity: 1; transform: translate(-50%,-50%) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.95); }
}

/* Countdown ticker — shown during 'waiting' phase. */
.crash-countdown {
  position: absolute;
  top: 18px; right: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--s-green);
  background: rgba(0,231,1,.08);
  border: 1px solid rgba(0,231,1,.25);
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 6;
  text-transform: uppercase;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.crash-status {
  position: absolute;
  top: 52px; right: 14px;
  font-size: 13px;
  color: var(--s-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 6;
  pointer-events: none;
}

/* Recent-rounds history ribbon along the top, tucked to the left of the
   countdown pill so it never collides with it. */
.crash-history {
  position: absolute;
  top: 12px; left: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 40%;
  z-index: 6;
  pointer-events: none;
}
.crash-hist-chip {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  background: rgba(30,45,70,.7);
  border: 1px solid var(--s-line);
  color: var(--s-muted);
}
.crash-hist-chip.lo  { color: #ff7676; border-color: rgba(255,118,118,.35); }
.crash-hist-chip.mid { color: #8ab4ff; border-color: rgba(138,180,255,.35); }
.crash-hist-chip.hi  { color: #00ff88; border-color: rgba(0,255,136,.4); background: rgba(0,80,50,.35); }

/* "Bet queued for next round" helper text under the bet panel. */
.crash-pending-note {
  font-size: 12px;
  color: var(--s-green);
  font-weight: 700;
  text-align: center;
  padding: 6px 8px;
  background: rgba(0,231,1,.08);
  border: 1px solid rgba(0,231,1,.25);
  border-radius: 6px;
}

/* Auto-cashout presets — list of saved { name, bet, target } rows. The
   panel sits between the single-value auto-cashout input and the Place bet
   button so it visually belongs to the betting controls. */
/* Crash active preset indicator (modal styles are injected by crash.js). */
.crash-active-preset {
  font-size: 11px;
  color: var(--s-green);
  padding: 4px 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Roulette payouts table — appears in the .gp-about section of roulette.html.
   Dark theme, tabular numerics, subtle striped rows, green accent on header. */
.gp-payouts-table {
  width: 100%;
  max-width: 720px;
  margin: 10px 0 6px;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--s-text);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--s-bg-2);
}
.gp-payouts-table thead {
  background: rgba(0,231,1,.08);
  border-bottom: 1px solid rgba(0,231,1,.25);
}
.gp-payouts-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--s-green);
  padding: 10px 12px;
}
.gp-payouts-table td {
  padding: 9px 12px;
  border-top: 1px solid var(--s-line);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.gp-payouts-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.gp-payouts-table tbody tr:hover { background: rgba(0,231,1,.05); }
.gp-payouts-table td:nth-child(3),
.gp-payouts-table td:nth-child(4),
.gp-payouts-table th:nth-child(3),
.gp-payouts-table th:nth-child(4) {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  width: 80px;
}
.gp-payouts-table td:nth-child(3) { color: var(--s-green); }
.gp-payouts-note {
  font-size: 12px;
  color: var(--s-muted);
  margin: 4px 0 14px;
  font-style: italic;
}

/* Strategy guide links list — clean bullet-less layout with green hover. */
.gp-guides-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp-guides-list li {
  padding: 8px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.gp-guides-list li:hover {
  border-color: rgba(0,231,1,.45);
  background: rgba(0,231,1,.05);
  box-shadow: 0 0 14px rgba(0,231,1,.15);
}
.gp-guides-list a {
  color: var(--s-text);
  text-decoration: none;
  font-size: 13px;
  display: block;
}
.gp-guides-list a:hover { color: var(--s-green); }
.gp-guides-list a::before {
  content: '↗  ';
  color: var(--s-green);
  font-weight: 800;
}

/* Dice — native range input slider */
.gp-dice-wrap { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.gp-dice-slider-box {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 22px 28px 28px;
}
.gp-dice-pips { display: flex; justify-content: space-between; font-size: 12px; color: var(--s-muted); margin-bottom: 14px; font-weight: 700; }
.gp-dice-slider-native {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 9px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  background: linear-gradient(90deg, #ff5b5b 0%, #ff5b5b 50%, #00e701 50%, #00e701 100%);
}
.gp-dice-slider-native input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: grab;
}
.gp-dice-slider-native input[type=range]:active { cursor: grabbing; }
.gp-dice-slider-native input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  height: 18px;
  border: none;
}
.gp-dice-slider-native input[type=range]::-moz-range-track {
  background: transparent;
  height: 18px;
  border: none;
}
.gp-dice-slider-native input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 38px;
  border-radius: 6px;
  background: linear-gradient(180deg, #5aa6ff 0%, #2b7fe0 100%);
  border: 2px solid #0a1a2e;
  box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
  margin-top: -10px;
  cursor: grab;
}
.gp-dice-slider-native input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 38px;
  border-radius: 6px;
  background: linear-gradient(180deg, #5aa6ff 0%, #2b7fe0 100%);
  border: 2px solid #0a1a2e;
  box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
  cursor: grab;
}
.gp-dice-result-marker {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 30px;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255,255,255,.8);
  pointer-events: none;
  transition: left .35s cubic-bezier(.2,.7,.3,1);
  z-index: 1;
}
.gp-dice-result-marker.win  { background: #00e701; box-shadow: 0 0 12px rgba(0,231,1,.8); }
.gp-dice-result-marker.lose { background: #ff5b5b; box-shadow: 0 0 12px rgba(255,91,91,.8); }
.gp-dice-roll {
  font-size: 56px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--s-text);
  padding: 20px 0;
}
.gp-dice-roll.win { color: var(--s-green); text-shadow: 0 0 20px rgba(0,231,1,.5); }
.gp-dice-roll.lose { color: #ff6b6b; }
.gp-dice-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gp-dice-info .gp-cell {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.gp-dice-info .gp-cell small {
  display: block;
  font-size: 10px;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.gp-dice-info .gp-cell strong {
  font-size: 15px;
  color: var(--s-text);
  font-weight: 800;
}
.gp-seg {
  display: flex;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  padding: 3px;
}
.gp-seg button {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: 0;
  color: var(--s-muted);
  font-weight: 700;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
}
.gp-seg button.active { background: var(--s-bg-3); color: var(--s-text); }

/* ============================================================
   Chicken — side-scrolling asphalt road
   Original art (no Stake assets): CSS gradients, SVG dashes,
   keyframe-driven background traffic, SVG chicken character.
   ============================================================ */
.gp-chicken-road-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,.05) 0%, transparent 60%),
    linear-gradient(180deg, #11151f 0%, #060810 100%);
  border-radius: 14px;
  border: 1px solid var(--s-line);
  padding: 0;
  overflow: hidden;
  min-height: 460px;
  max-width: 715px;
  margin: 0 auto;
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}
/* Sky strip + horizon line */
.gp-chicken-road-wrap::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 28px;
  background: linear-gradient(180deg, #1a2236 0%, #0c111e 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
  z-index: 1;
}
.gp-chicken-road {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 460px;
  position: relative;
  transition: transform .55s cubic-bezier(.22,.85,.3,1);
  will-change: transform;
  z-index: 2;
}
.gp-chicken-lane {
  flex: 0 0 110px;
  position: relative;
  background:
    /* dashed lane line on the LEFT edge using a repeating gradient */
    repeating-linear-gradient(180deg,
      rgba(255,217,0,.85) 0px,
      rgba(255,217,0,.85) 16px,
      transparent 16px,
      transparent 32px) left / 3px 100% no-repeat,
    linear-gradient(180deg, #2b2e36 0%, #1a1c22 50%, #2b2e36 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 28px 0 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--s-muted);
  text-align: center;
  transition: background-color .25s, box-shadow .25s;
  overflow: hidden;
}
.gp-chicken-lane.start {
  background:
    linear-gradient(180deg, #1f4d2a 0%, #0f2a16 100%);
  border-right: 2px solid rgba(255,217,0,.6);
}
.gp-chicken-lane.start::after {
  content: '';
  position: absolute; inset: 28px 6px 6px 6px;
  background:
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%) 50% / 12px 12px;
  opacity: .35;
  border-radius: 4px;
  pointer-events: none;
}
.gp-chicken-lane.current {
  box-shadow: inset 0 0 0 2px rgba(255,176,32,.55), inset 0 0 36px rgba(255,176,32,.25);
}
.gp-chicken-lane.safe {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,217,0,.85) 0px, rgba(255,217,0,.85) 16px,
      transparent 16px, transparent 32px) left / 3px 100% no-repeat,
    linear-gradient(180deg, #1d3a24 0%, #0f2516 100%);
}
.gp-chicken-lane.hit {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,80,80,.85) 0px, rgba(255,80,80,.85) 16px,
      transparent 16px, transparent 32px) left / 3px 100% no-repeat,
    linear-gradient(180deg, #4a1c1c 0%, #2a0d0d 100%);
}
.gp-chicken-lane.cashed {
  background:
    repeating-linear-gradient(180deg,
      rgba(0,231,1,.85) 0px, rgba(0,231,1,.85) 16px,
      transparent 16px, transparent 32px) left / 3px 100% no-repeat,
    linear-gradient(180deg, #1d3a4a 0%, #0f2230 100%);
}

/* Multiplier pill above each lane */
.gp-chicken-lane .lane-mult {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 900; color: #ffd34d;
  background: rgba(0,0,0,.7);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,211,77,.4);
  white-space: nowrap;
  z-index: 4;
}
.gp-chicken-lane.safe .lane-mult   { color: #00e701; border-color: rgba(0,231,1,.5); }
.gp-chicken-lane.hit  .lane-mult   { color: #ff6b6b; border-color: rgba(255,107,107,.5); }
.gp-chicken-lane.current .lane-mult { background: #ffb020; color: #000; border-color: #ffb020; }
.gp-chicken-lane .lane-num {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: rgba(255,255,255,.35); letter-spacing: .08em;
}

/* Background car — sits inside each lane and animates only on non-safe lanes */
.gp-chicken-lane .lane-car {
  width: 56px; height: 90px;
  position: relative;
  margin-bottom: 8px;
  z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.6));
  animation: ck-traffic 5.5s linear infinite;
}
.gp-chicken-lane:nth-child(2n) .lane-car { animation-duration: 6.2s; animation-delay: -1.4s; }
.gp-chicken-lane:nth-child(3n) .lane-car { animation-duration: 4.8s; animation-delay: -2.6s; }
.gp-chicken-lane:nth-child(4n) .lane-car { animation-duration: 5.8s; animation-delay: -0.7s; }
.gp-chicken-lane.safe .lane-car,
.gp-chicken-lane.cashed .lane-car { animation: none; opacity: 0; }
.gp-chicken-lane.start .lane-car { display: none; }
@keyframes ck-traffic {
  0%   { transform: translateY(-460px); opacity: 1; }
  100% { transform: translateY(460px);  opacity: 1; }
}
/* Losing lane: one-shot high-speed car sweep that slams into the chicken. */
.gp-chicken-lane.hit .lane-car {
  animation: ck-kill .85s cubic-bezier(.25,.1,.35,1) forwards;
  opacity: 1;
}
@keyframes ck-kill {
  0%   { transform: translateY(-460px); opacity: 1; }
  100% { transform: translateY(175px); }
}
/* Traffic cone dropped on cleared lanes — blocks cars from crossing visually. */
.gp-chicken-lane.safe::before,
.gp-chicken-lane.cashed::before {
  content: '🚧';
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%, 0);
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.7));
  z-index: 6;
  pointer-events: none;
}

/* Car body — pure CSS, no images */
.lane-car .car-body {
  position: absolute; inset: 6px 4px;
  background: linear-gradient(180deg, var(--car-c1, #d24747) 0%, var(--car-c2, #7a1f1f) 100%);
  border-radius: 10px 10px 6px 6px / 14px 14px 6px 6px;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.2);
}
.lane-car .car-body::before,
.lane-car .car-body::after {
  content: '';
  position: absolute; left: 6px; right: 6px; height: 14px;
  background: linear-gradient(180deg, rgba(150,200,255,.55), rgba(80,130,200,.3));
  border-radius: 4px;
}
.lane-car .car-body::before { top: 8px; }
.lane-car .car-body::after  { top: 32px; }
.lane-car .car-light {
  position: absolute; bottom: 0; width: 8px; height: 4px;
  background: #fff7c2;
  box-shadow: 0 0 8px #fff7c2;
  border-radius: 2px;
}
.lane-car .car-light.l { left: 4px; }
.lane-car .car-light.r { right: 4px; }
.gp-chicken-lane:nth-child(3n) .lane-car { --car-c1: #4a90e2; --car-c2: #1f3a6a; }
.gp-chicken-lane:nth-child(4n) .lane-car { --car-c1: #f0c020; --car-c2: #8a6500; }
.gp-chicken-lane:nth-child(5n) .lane-car { --car-c1: #2ecc71; --car-c2: #145a35; }

/* Chicken character — SVG, idle bob, hop, splat */
.gp-chicken-chicken {
  position: absolute;
  top: 50%;
  width: 72px; height: 72px;
  transform: translate(-50%,-50%);
  transition: left .55s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
  z-index: 8;
}
.gp-chicken-chicken svg.ck-body {
  display: block;
  width: 92px;
  height: 92px;
  /* SVG already faces right (head/beak on the right side at x~99). No mirror needed. */
  animation: ck-bob 0.9s ease-in-out infinite;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.55));
  overflow: visible;
}
@keyframes ck-bob {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  25%      { transform: translateY(-2px) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
  75%      { transform: translateY(-2px) rotate(0deg); }
}
.gp-chicken-chicken.hopping .ck-body { animation: ck-hop .55s ease-out; }
@keyframes ck-hop {
  0%   { transform: translateY(0)    rotate(0deg); }
  20%  { transform: translateY(-6px)  rotate(-6deg) scale(1.05, .95); }
  45%  { transform: translateY(-26px) rotate(-10deg) scale(.92, 1.08); }
  75%  { transform: translateY(-6px)  rotate(-4deg) scale(1.04, .96); }
  100% { transform: translateY(0)    rotate(0deg); }
}
/* Smooth wing-flap on the inline SVG wing group. */
.gp-chicken-chicken .ck-body .ck-wing {
  transform-box: fill-box;
  transform-origin: 70% 30%;
  animation: ck-wing-flap 0.45s ease-in-out infinite;
}
@keyframes ck-wing-flap {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(10deg) translateY(-1px); }
}
.gp-chicken-chicken.hopping .ck-body .ck-wing { animation: ck-wing-flap 0.18s ease-in-out infinite; }
/* Walking leg cycle. */
.gp-chicken-chicken .ck-body .ck-leg {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.gp-chicken-chicken .ck-body .ck-leg-front { animation: ck-leg-a 0.6s ease-in-out infinite; }
.gp-chicken-chicken .ck-body .ck-leg-back  { animation: ck-leg-b 0.6s ease-in-out infinite; }
@keyframes ck-leg-a {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(14deg); }
}
@keyframes ck-leg-b {
  0%, 100% { transform: rotate(14deg); }
  50%      { transform: rotate(-12deg); }
}
.gp-chicken-chicken.hit { animation: ck-flat .55s forwards; }
@keyframes ck-flat {
  0%   { transform: translate(-50%,-50%) scale(1,1); }
  40%  { transform: translate(-50%, -20%) scale(1.7, .25); filter: drop-shadow(0 0 12px rgba(255,80,80,.8)); }
  100% { transform: translate(-50%, -20%) scale(1.7, .25); opacity: .85; }
}

/* HUD */
.gp-chicken-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.gp-chicken-hud .gp-cell {
  background: linear-gradient(180deg, #1a1f2e 0%, #11151f 100%);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.gp-chicken-hud .gp-cell small {
  display: block; font-size: 10px; color: var(--s-muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.gp-chicken-hud .gp-cell strong {
  font-size: 18px; color: var(--s-text); font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.gp-chicken-hud .gp-cell.payout strong { color: #ffd34d; }

/* Action buttons */
.gp-chicken-actions { display: flex; gap: 10px; margin-top: 14px; }
.gp-chicken-actions .gp-btn { flex: 1; font-size: 14px; }
.gp-chicken-actions .gp-btn.cashout {
  background: linear-gradient(180deg, #ffd34d 0%, #ffb020 50%, #e08800 100%);
  color: #1a1100;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  border: 0;
}
.gp-chicken-actions .gp-btn.cashout:not(:disabled) {
  animation: ck-cashpulse 1.4s ease-in-out infinite;
}
@keyframes ck-cashpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,176,32,.55), 0 6px 14px rgba(0,0,0,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,176,32,0),  0 6px 18px rgba(255,176,32,.35); }
}

/* Difficulty badges (color-coded risk pills) */
.gp-chicken-diff {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.gp-chicken-diff button {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  color: var(--s-text);
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.gp-chicken-diff button:hover { background: var(--s-bg-3); }
.gp-chicken-diff button.active { box-shadow: inset 0 0 0 2px currentColor; }
.gp-chicken-diff button[data-d="easy"]      { color: #00e701; }
.gp-chicken-diff button[data-d="medium"]    { color: #ffd34d; }
.gp-chicken-diff button[data-d="hard"]      { color: #ff9020; }
.gp-chicken-diff button[data-d="daredevil"] { color: #ff4d4d; }
.gp-chicken-diff button.active[data-d="easy"]      { background: rgba(0,231,1,.12); }
.gp-chicken-diff button.active[data-d="medium"]    { background: rgba(255,211,77,.14); }
.gp-chicken-diff button.active[data-d="hard"]      { background: rgba(255,144,32,.14); }
.gp-chicken-diff button.active[data-d="daredevil"] { background: rgba(255,77,77,.16); }

.gp-chicken-hint { font-size: 11px; color: var(--s-muted); text-align: center; margin-top: 8px; }

.s-tile .s-maint{display:block;font-size:10px;color:#f5b400;font-weight:800;letter-spacing:1px;margin-top:4px}

/* Tower (Dragon Tower) styles live in /css/tower.css */

/* ---- Promo tiles ---- */
.promo-icon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 0 14px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.promo-icon-sm { width: 42px; height: 42px; margin: 0 0 10px; }
.promo-tier-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.promo-tier {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.4;
}
.promo-tier:last-child { border-bottom: 0; }
.promo-tier::before {
  content: '';
  display: block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.promo-tier.promo-tier-bronze::before  { background-image: url('/img/promo/tier-bronze.svg'); }
.promo-tier.promo-tier-silver::before  { background-image: url('/img/promo/tier-silver.svg'); }
.promo-tier.promo-tier-gold::before    { background-image: url('/img/promo/tier-gold.svg'); }
.promo-tier.promo-tier-diamond::before { background-image: url('/img/promo/tier-diamond.svg'); }
.promo-tier.promo-tier-crown::before   { background-image: url('/img/promo/tier-crown.svg'); }

/* ---- Deposits page ---- */
.dp-card {
  background: linear-gradient(160deg, var(--s-bg-3), var(--s-bg-2));
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px;
  color: var(--s-text);
}
.dp-title { display: block; font-size: 16px; font-weight: 800; color: var(--s-text); }
.dp-sub   { margin: 8px 0 14px; color: var(--s-muted); font-size: 14px; line-height: 1.55; }
.dp-muted { color: var(--s-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.dp-hint  { color: var(--s-muted); font-size: 12px; margin-top: 6px; }
.dp-warn  { margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(245,180,0,.4); background: rgba(245,180,0,.08); color: #f7c14e; border-radius: 10px; font-size: 13px; line-height: 1.5; }

.dp-balance-card { padding-bottom: 18px; }
.dp-balance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.dp-total {
  font-size: 34px;
  font-weight: 900;
  color: var(--s-green);
  line-height: 1.1;
  margin-top: 4px;
}
.dp-betting-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }

.dp-holdings {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.dp-holding {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
}
.dp-holding-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 50%;
  font-weight: 900;
  color: var(--s-text);
}
.dp-holding-meta   { display: flex; flex-direction: column; min-width: 0; }
.dp-holding-amt    { font-weight: 800; color: var(--s-text); font-size: 14px; }
.dp-holding-usd    { color: var(--s-muted); font-size: 12px; margin-top: 2px; }

.dp-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 6px;
}
.dp-field { display: flex; flex-direction: column; gap: 6px; }
.dp-field label { font-size: 12px; color: var(--s-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.dp-min { color: var(--s-muted-2); text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 6px; }
.dp-input,
.dp-select {
  background: var(--s-bg);
  color: var(--s-text);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dp-input:focus,
.dp-select:focus {
  border-color: var(--s-green);
  box-shadow: 0 0 0 3px rgba(0,231,1,.15);
}
.dp-usd-preview { font-size: 12px; color: var(--s-muted); margin-top: 4px; min-height: 14px; }

.dp-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

.dp-banner {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.dp-banner strong { display: block; margin-bottom: 4px; }
.dp-banner p      { margin: 0; font-size: 13px; line-height: 1.5; }
.dp-danger {
  background: rgba(255, 77, 77, 0.08);
  border: 1px solid rgba(255, 77, 77, 0.45);
  color: #ff9b9b;
}
.dp-warning {
  background: rgba(245, 180, 0, 0.08);
  border: 1px solid rgba(245, 180, 0, 0.45);
  color: #f7c14e;
}

.dp-address-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.dp-address-input {
  flex: 1 1 280px;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.dp-copy-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 12px;
  white-space: nowrap;
}
/* Real QR code (PNG, pre-rendered server-side at boot). The img sits in a
   white card so the dark-on-light QR remains scannable in dim themes. */
.dp-qr-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dp-qr-img {
  width: 200px;
  height: 200px;
  background: #f6f7fb;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  display: block;
}
.dp-qr-caption {
  font-size: 11px;
  color: var(--s-muted);
  text-align: center;
  max-width: 220px;
  line-height: 1.4;
}
/* Required-field asterisk used next to the Transaction hash label. */
.dp-required {
  color: #ff6b7c;
  font-weight: 800;
  margin-left: 2px;
}
/* ETA banner under the deposit form — the "5 min – 2 h" expectation block. */
.dp-eta {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(0, 231, 1, 0.06);
  border: 1px solid rgba(0, 231, 1, 0.25);
  border-radius: 8px;
  color: #c2e9d1;
  font-size: 12.5px;
  line-height: 1.55;
}

.dp-table-wrap { overflow-x: auto; }
.dp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 13px;
}
.dp-table th,
.dp-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--s-line);
}
.dp-table th {
  color: var(--s-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
}
.dp-table tr:last-child td { border-bottom: none; }
.dp-tx-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--s-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-empty {
  color: var(--s-muted);
  font-size: 13px;
  padding: 16px 4px;
  text-align: center;
}

.dp-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid transparent;
}
.dp-pill-ok      { background: rgba(0,231,1,.12);   color: #53e774; border-color: rgba(0,231,1,.35); }
.dp-pill-pending { background: rgba(245,180,0,.12); color: #f7c14e; border-color: rgba(245,180,0,.35); }
.dp-pill-bad     { background: rgba(255,77,77,.12); color: #ff8a8a; border-color: rgba(255,77,77,.45); }

.dp-acc {
  border: 1px solid var(--s-line);
  background: var(--s-bg-2);
  border-radius: 12px;
  padding: 0;
  margin-top: 10px;
  overflow: hidden;
}
.dp-acc summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--s-text);
  position: relative;
  user-select: none;
}
.dp-acc summary::-webkit-details-marker { display: none; }
.dp-acc summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--s-muted);
  transition: transform .2s;
}
.dp-acc[open] summary::after { content: '−'; }
.dp-acc summary:hover { background: var(--s-bg-3); }
.dp-acc-body {
  padding: 4px 16px 16px;
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid var(--s-line);
}
.dp-acc-body p       { margin: 10px 0; }
.dp-acc-body ul,
.dp-acc-body ol      { margin: 10px 0 10px 18px; padding: 0; }
.dp-acc-body li      { margin: 6px 0; }
.dp-acc-body strong  { color: var(--s-text); }

.dp-steps {
  margin: 10px 0 0 18px;
  padding: 0;
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.6;
}
.dp-steps li       { margin: 8px 0; }
.dp-steps strong   { color: var(--s-text); }

@media (max-width: 640px) {
  .dp-form { grid-template-columns: 1fr; }
  .dp-card { padding: 18px 16px; }
  .dp-total { font-size: 28px; }
  .dp-betting-wrap { width: 100%; }
}

/* ---- Withdrawals page ---- */
.wd-section { width: 100%; }
.wd-muted { color: var(--s-muted); font-size: 13px; line-height: 1.55; }
.wd-empty { margin-top: 6px; font-size: 13px; }

/* Section A — balance summary */
.wd-total-row {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s-line);
}
.wd-total-label { font-size: 12px; color: var(--s-muted); text-transform: uppercase; letter-spacing: .5px; }
.wd-total-value { font-size: 24px; font-weight: 900; color: var(--s-green); }
.wd-balance-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
}
.wd-bal-card {
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wd-bal-icon {
  width: 20px;
  height: 20px;
  display: block;
  margin-bottom: 2px;
}
.wd-bal-symbol { font-size: 11px; font-weight: 800; color: var(--s-muted); letter-spacing: 1px; text-transform: uppercase; }
.wd-bal-amount { font-size: 15px; font-weight: 700; color: var(--s-text); word-break: break-all; }
.wd-bal-usd    { font-size: 12px; color: var(--s-muted); }

/* Section B — form */
.wd-locked-banner {
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 14px;
  background: rgba(255, 77, 77, .12);
  border: 1px solid rgba(255, 77, 77, .45);
  color: #ff8a8a;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}
.wd-nobal {
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--s-bg-3);
  border: 1px dashed var(--s-line);
  border-radius: 8px;
  font-size: 13px;
}
.wd-form {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wd-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wd-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
}
.wd-avail { font-size: 11px; color: var(--s-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.wd-avail #wd-available { color: var(--s-text); font-weight: 700; }
.wd-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--s-bg-3);
  color: var(--s-text);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.wd-input:focus { outline: none; border-color: var(--s-green); }
.wd-input[disabled] { opacity: .5; cursor: not-allowed; }
.wd-hint {
  font-size: 12px;
  color: var(--s-muted);
  min-height: 14px;
}
.wd-hint.err { color: #ff8a8a; }
.wd-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.wd-form .gp-btn {
  padding: 11px 22px;
  background: var(--s-green);
  color: #001a00;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.wd-form .gp-btn:hover:not(:disabled) { filter: brightness(1.1); }
.wd-form .gp-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Sections C & D — request lists */
.wd-list {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wd-row {
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wd-row-main {
  display: grid;
  grid-template-columns: 1.1fr .6fr .8fr 1.6fr .7fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 720px) {
  .wd-row-main { grid-template-columns: 1fr 1fr; }
}
.wd-cell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wd-cell-label {
  font-size: 10px;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
}
.wd-cell-val { font-size: 13px; color: var(--s-text); font-weight: 600; word-break: break-word; }
.wd-cur-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--s-bg-4);
  border: 1px solid var(--s-line);
  font-size: 11px;
  letter-spacing: .5px;
  font-weight: 800;
  color: var(--s-text);
  width: max-content;
}
.wd-cur-pill-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.wd-address-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wd-address-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--s-text); }
.wd-copy-btn {
  background: var(--s-bg-4);
  border: 1px solid var(--s-line);
  color: var(--s-muted);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.wd-copy-btn:hover { color: var(--s-text); border-color: var(--s-green); }
.wd-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  width: max-content;
}
.wd-pill-open {
  background: rgba(245, 180, 0, .15);
  color: #f5b400;
  border: 1px solid rgba(245, 180, 0, .45);
}
.wd-pill-accepted {
  background: rgba(0, 231, 1, .14);
  color: #00e701;
  border: 1px solid rgba(0, 231, 1, .45);
}
.wd-pill-rejected {
  background: rgba(255, 77, 77, .14);
  color: #ff8a8a;
  border: 1px solid rgba(255, 77, 77, .45);
}
.wd-admin-note {
  font-size: 12px;
  color: var(--s-muted);
  padding: 8px 10px;
  background: var(--s-bg-2);
  border-radius: 6px;
  border-left: 3px solid var(--s-line);
}
.wd-admin-note-label { font-weight: 800; color: var(--s-text); }
.wd-admin-note-body { color: var(--s-muted); }

.wd-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wd-row-btn {
  width: auto;
  padding: 8px 16px;
  background: var(--s-green);
  color: #001a00;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.wd-row-btn:hover:not(:disabled) { filter: brightness(1.1); }
.wd-row-btn:disabled { opacity: .5; cursor: not-allowed; }
.wd-row-btn.secondary {
  background: var(--s-bg-4);
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.wd-row-btn.secondary:hover:not(:disabled) { background: var(--s-bg-3); }
.wd-delete-btn {
  background: rgba(255, 77, 77, .18);
  color: #ff8a8a;
  border: 1px solid rgba(255, 77, 77, .45);
}
.wd-delete-btn:hover:not(:disabled) { background: rgba(255, 77, 77, .28); filter: none; }

/* Modal overlay */
.wd-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, .7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.wd-modal.open { display: flex; }
.wd-modal-box {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.wd-modal-box h3 {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--s-text);
  font-weight: 800;
}
.wd-modal-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.wd-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.wd-modal-actions .gp-btn {
  padding: 10px 18px;
  background: var(--s-green);
  color: #001a00;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.wd-modal-actions .gp-btn:hover:not(:disabled) { filter: brightness(1.1); }
.wd-modal-actions .gp-btn:disabled { opacity: .5; cursor: not-allowed; }
.wd-modal-actions .gp-btn.secondary {
  background: var(--s-bg-4);
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.wd-modal-actions .gp-btn.secondary:hover:not(:disabled) { background: var(--s-bg-3); filter: none; }

@media (max-width: 640px) {
  .wd-row-main { grid-template-columns: 1fr; }
}

/* ==============================================================
   MOBILE RESPONSIVENESS — COMPREHENSIVE
   ============================================================== */

/* --- Hamburger button (hidden on desktop, shown on mobile) --- */
.s-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--s-text);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* --- Sidebar backdrop overlay --- */
.s-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}
.s-sidebar-backdrop.open { display: block; }

/* ===== Notification Bell ===== */
.s-notif-wrap { position: relative; display: flex; align-items: center; }
.s-notif-bell { background: none; border: none; color: var(--s-muted); cursor: pointer; padding: 6px; position: relative; transition: color 0.12s; }
.s-notif-bell:hover { color: var(--s-text); }
.s-notif-badge { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; background: #e53935; color: #fff; font-size: 10px; font-weight: 800; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* Notifications dropdown — refreshed from design-imports/notifications.html.
   Widened from 320 → 380px (design spec) and given a softer glow. Mobile
   override below drops width to full-viewport. */
.s-notif-dropdown {
  position: absolute; top: 100%; right: 0;
  width: 380px; max-height: 520px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  box-shadow:
    0 24px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(127,248,0,.04),
    0 0 32px rgba(127,248,0,.06);
  overflow: hidden;
  z-index: 200;
  animation: sNotifPopIn .16s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sNotifPopIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.s-notif-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--s-line);
  font-size: 13px; font-weight: 900;
  letter-spacing: .02em;
}
.s-notif-read-all {
  background: transparent; border: 0; cursor: pointer;
  color: var(--s-muted);
  font: inherit;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px;
  transition: background .12s, color .12s;
}
.s-notif-read-all:hover { background: var(--s-bg-3); color: var(--s-text); }
.s-notif-list { overflow-y: auto; max-height: 440px; padding: 2px 6px 6px; }
.s-notif-list::-webkit-scrollbar { width: 6px; }
.s-notif-list::-webkit-scrollbar-thumb { background: var(--s-bg-4); border-radius: 3px; }

/* Day-group header inside the list. Painted by the refactored renderer
   in shell.js as a leading <div class="s-notif-group">. */
.s-notif-group {
  padding: 10px 10px 4px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--s-muted-2); font-weight: 800;
}

.s-notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background .12s;
  border-bottom: 0; /* superseded by 1px gap from list padding */
}
.s-notif-item + .s-notif-item { margin-top: 1px; }
.s-notif-item:hover { background: var(--s-bg-3); }
.s-notif-item.unread { background: rgba(127,248,0,.04); border-left: 0; }

/* Small green "unread" dot on the left margin — supplants the heavy
   left-border treatment from the old rule. */
.s-notif-item.unread::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s-green);
  box-shadow: 0 0 6px var(--s-green);
}

/* Type-icon chip (sits left of the title/body). Tokens are the Phase-1
   promoted --t-* palette. */
.s-notif-ic {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  font-weight: 900;
}
.s-notif-ic.win    { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.3); color: var(--t-win); }
.s-notif-ic.match  { background: rgba(102,255,229,.10); border-color: rgba(102,255,229,.3); color: var(--t-match); }
.s-notif-ic.coin   { background: rgba(127,248,0,.10);   border-color: rgba(127,248,0,.3);   color: var(--t-coin); }
.s-notif-ic.friend { background: rgba(140,140,255,.10); border-color: rgba(140,140,255,.3); color: var(--t-friend); }
.s-notif-ic.loss   { background: rgba(255,69,103,.10);  border-color: rgba(255,69,103,.3);  color: var(--t-loss); }
.s-notif-ic.promo  { background: rgba(255,107,214,.10); border-color: rgba(255,107,214,.3); color: var(--t-promo); }
.s-notif-ic.system { background: rgba(154,166,180,.08); border-color: rgba(154,166,180,.25);color: var(--t-system); }

.s-notif-body { flex: 1; min-width: 0; }
.s-notif-item-title {
  font-size: 13px; font-weight: 800;
  margin-bottom: 2px;
  color: var(--s-text);
  line-height: 1.3;
}
.s-notif-item.unread .s-notif-item-title b,
.s-notif-item.unread .s-notif-item-title strong { color: var(--s-text); }
.s-notif-item:not(.unread) .s-notif-item-title { color: var(--s-muted); font-weight: 700; }
.s-notif-item-msg {
  font-size: 11px; color: var(--s-muted);
  line-height: 1.4;
}
.s-notif-item-time {
  font-size: 10px; color: var(--s-muted-2);
  margin-top: 4px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* Notification toast — slides in from the top, then shrinks toward the bell
   after a short display (animation handled inline from JS for precise delta). */
.s-notif-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--s-bg);
  border: 1px solid var(--s-green);
  border-radius: 12px;
  padding: 14px 20px;
  max-width: 360px;
  min-width: 240px;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(0,231,1,0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s-notif-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.s-notif-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--s-green);
  margin-bottom: 4px;
}
.s-notif-toast-msg {
  font-size: 13px;
  color: var(--s-text);
  line-height: 1.4;
}

/* Bell bounce/shake — triggered when a toast "enters" the bell. */
@keyframes bellBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20%      { transform: scale(1.2) rotate(-15deg); }
  40%      { transform: scale(1.1) rotate(15deg); }
  60%      { transform: scale(1.15) rotate(-10deg); }
  80%      { transform: scale(1.05) rotate(5deg); }
}
.s-notif-bell.bell-bounce {
  animation: bellBounce 0.6s ease-in-out;
}

/* Mobile: toast goes edge-to-edge so small screens don't feel cramped. */
@media (max-width: 480px) {
  .s-notif-toast {
    top: 10px;
    left: 10px;
    right: 10px;
    transform: translateX(0) translateY(-100px);
    max-width: none;
  }
  .s-notif-toast.visible {
    transform: translateX(0) translateY(0);
  }
}

/* ===== 900px: sidebar collapses (original breakpoint) ===== */
@media (max-width: 900px) {
  .s-shell { grid-template-columns: 1fr; }

  /* Sidebar: hidden by default, slides in as fixed overlay when .open */
  .s-side {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 1000;
    background: var(--s-bg-2);
    border-right: 1px solid var(--s-line);
    overflow-y: auto;
    padding: 20px 12px;
    height: 100vh;
  }
  .s-side.open { display: block; }

  /* Show hamburger */
  .s-hamburger { display: flex; }
}

/* ===== 768px: main mobile breakpoint ===== */
@media (max-width: 768px) {
  /* Top nav */
  .s-top {
    padding: 8px 12px;
    gap: 8px;
  }
  .s-top .s-brand-mobile {
    font-size: 16px;
  }
  /* Hide language switcher on narrow screens */
  .s-lang { display: none; }
  /* Balance pill */
  .s-balance {
    font-size: 12px;
    padding: 6px 10px;
  }
  /* Balance dropdown full-width */
  .s-balance-menu {
    width: calc(100vw - 24px);
    right: -8px;
  }
  /* Notification dropdown full-width on phones */
  .s-notif-dropdown {
    width: calc(100vw - 24px);
    right: -8px;
  }
  /* Profile pill compact */
  .s-profile {
    padding: 5px 10px 5px 6px;
    font-size: 12px;
    gap: 6px;
  }
  .s-profile .s-profile-avatar { width: 18px; height: 18px; }
  /* Auth buttons compact */
  .s-top .s-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Content area */
  .s-content {
    padding: 16px 12px 40px;
  }

  /* Game tiles — 2 columns */
  .s-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .s-tile {
    padding: 16px;
  }
  .s-tile .s-ico {
    font-size: 36px;
    margin-bottom: 8px;
  }
  .s-tile .s-ico img {
    width: 48px;
    height: 48px;
  }
  .s-tile .s-name {
    font-size: 12px;
  }

  /* Hero cards stack */
  .s-hero { grid-template-columns: 1fr; }
  .s-hero-card {
    padding: 20px;
    min-height: 120px;
  }
  .s-hero-card h3 { font-size: 20px; }

  /* Game page layout: single column, canvas on top, panel below */
  .gp-board {
    grid-template-columns: 1fr !important;
    gap: 0;
    overflow: hidden;
    padding: 0;
  }
  .gp-canvas {
    order: -1;  /* Canvas FIRST (top) */
    min-height: 280px;
    padding: 12px;
    overflow: hidden;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .gp-panel {
    position: static !important;
    order: 1;   /* Panel SECOND (below canvas) */
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Chicken road — scrollable horizontally */
  .gp-chicken-road-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 280px;
    max-width: 100%;
  }
  .gp-chicken-road {
    height: 280px;
  }
  .gp-wrap { gap: 14px; }
  .gp-header h1 { font-size: 20px; }
  .gp-header .gp-tag { font-size: 12px; }
  .gp-about {
    padding: 18px 14px;
  }
  .gp-about h2 { font-size: 15px; }
  .gp-about p { font-size: 13px; }

  /* Dice */
  .gp-dice-slider-box {
    padding: 16px 14px 20px;
  }
  .gp-dice-roll {
    font-size: 40px;
    padding: 12px 0;
  }
  .gp-dice-info {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .gp-dice-info .gp-cell {
    padding: 8px 6px;
  }
  .gp-dice-info .gp-cell strong { font-size: 13px; }

  /* Crash */
  .gp-crash-stage {
    min-height: 260px;
  }
  .gp-crash-mult {
    font-size: 44px;
  }
  .crash-rocket-svg {
    width: 48px;
    height: 64px;
    margin-left: -24px;
    margin-top: -32px;
  }
  .crash-cashed-toast {
    font-size: 32px;
    padding: 12px 20px;
  }
  .crash-history {
    max-width: 50%;
  }

  /* Hi-Lo cards */
  .card-face {
    width: 56px;
    height: 80px;
    font-size: 18px;
    margin: 3px;
    border-radius: 6px;
  }
  .card-face.card-current {
    width: 80px !important;
    height: 114px !important;
    font-size: 26px;
  }
  .card-placeholder,
  .card-next-outline {
    min-width: 80px;
    min-height: 114px;
    width: 80px;
    height: 114px;
    font-size: 32px;
  }
  .hand {
    gap: 2px;
    min-height: 90px;
  }

  /* Chicken road */
  .gp-chicken-road-wrap {
    min-height: 320px;
  }
  .gp-chicken-road {
    height: 320px;
  }
  .gp-chicken-lane {
    flex: 0 0 80px;
  }
  .gp-chicken-hud {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .gp-chicken-hud .gp-cell strong { font-size: 14px; }

  /* Profile page */
  .pf-wrap {
    grid-template-columns: 1fr;
  }
  .pf-side {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pf-side .pf-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .pf-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pf-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .pf-card {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pf-table { min-width: 500px; }
  .pf-form { max-width: 100%; }

  /* Recent bets feed */
  .s-feed-head, .s-feed-row {
    grid-template-columns: 1.2fr 1fr 1fr;
    font-size: 11px;
    padding: 10px 12px;
  }

  /* Deposit page */
  .dp-form {
    grid-template-columns: 1fr;
  }
  .dp-card {
    padding: 18px 14px;
  }
  .dp-total { font-size: 26px; }
  .dp-holdings {
    grid-template-columns: repeat(2, 1fr);
  }
  .dp-qr-img { width: 160px; height: 160px; }

  /* Withdraw page */
  .wd-row-main {
    grid-template-columns: 1fr 1fr;
  }
  .wd-total-value { font-size: 20px; }
  .wd-balance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .s-foot {
    padding: 18px 12px;
  }
  .s-foot-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .s-foot-links {
    flex-wrap: wrap;
    gap: 10px;
  }
  .s-foot .big { font-size: 14px; }

  /* Admin panel — horizontal scrolling tabs */
  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-section .card { overflow-x: auto; }

  /* Auth pages */
  .auth-wrap {
    padding: 16px;
  }
  .auth-card {
    padding: 24px 18px;
  }

  /* Promotions */
  .promo-tier {
    gap: 10px;
    padding: 8px 2px;
  }

  /* Extra bottom padding so fixed bar doesn't cover last content */
  .gp-wrap { padding-bottom: 80px; }

  /* Fixed bottom action bar — proxy buttons for Start/Cashout on mobile.
     Shown when original buttons scroll out of view; hidden when in view. */
  .gp-fixed-bar {
    display: none; /* Managed by JS via IntersectionObserver */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--s-bg);
    border-top: 1px solid var(--s-line);
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  }
  .gp-fixed-bar .gp-btn {
    width: 100%;
    /* Mobile redesign: slim the bar to ~42px tall (was ~50px) so the
       sticky overlay never eats more than ~12% of an iPhone-class
       viewport. Padding/font tuned for one-handed thumb reach. */
    min-height: 42px;
    padding: 10px 16px;
    background: var(--s-green);
    color: #001a00;
    border: 0;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
  }
  /* When the fixed bar is mirroring more than 2 primary buttons (e.g.
     Blackjack's deal/hit/stand/double/split, or Crash's place-bet/
     cashout + presets), wrap them onto two columns instead of stacking
     each at full-width — keeps the bar from growing past 15% of the
     viewport even with 4 active buttons. */
  .gp-fixed-bar { flex-wrap: wrap; flex-direction: row; gap: 6px; }
  .gp-fixed-bar .gp-btn { flex: 1 1 100%; }
  /* Blackjack action buttons in the fixed bar pack 2-per-row. The
     `.bj-act` class is preserved by safeHTML cloning (className copy). */
  .gp-fixed-bar .gp-btn.bj-act { flex: 1 1 calc(50% - 3px); min-height: 40px; padding: 8px 6px; font-size: 13px; }
  .gp-fixed-bar .gp-btn.bj-act:not(.is-legal) { display: none; }
  /* Hilo-style fixed Higher/Lower row already lives in its own
     .gp-fixed-hl-row container — leave that alone, just ensure the row
     itself is full-width within the wrapped flex flow. */
  .gp-fixed-bar .gp-fixed-hl-row { flex: 1 1 100%; }
  .gp-fixed-bar .gp-btn:hover:not(:disabled) { filter: brightness(1.1); }
  .gp-fixed-bar .gp-btn:disabled { opacity: .5; cursor: not-allowed; }
  .gp-fixed-bar .gp-btn.secondary {
    background: var(--s-bg-3);
    color: var(--s-text);
    border: 1px solid var(--s-line);
  }
  .gp-fixed-bar .gp-btn.secondary:hover:not(:disabled) { background: var(--s-bg-4); }

  /* Hi-Lo Higher/Lower row in fixed bar */
  .gp-fixed-hl-row {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .gp-fixed-bar .gp-fixed-hl {
    flex: 1;
    padding: 12px;
    font-size: 14px;
    font-weight: 800;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s, opacity .15s;
    text-align: center;
    box-sizing: border-box;
  }
  .gp-fixed-bar .gp-fixed-hl.gp-hl-higher {
    background: #0d7a3e;
    color: #fff;
  }
  .gp-fixed-bar .gp-fixed-hl.gp-hl-higher .hilo-odds {
    color: rgba(255,255,255,.85);
  }
  .gp-fixed-bar .gp-fixed-hl.gp-hl-lower {
    background: #e53935;
    color: #fff;
  }
  .gp-fixed-bar .gp-fixed-hl.gp-hl-lower .hilo-odds {
    color: rgba(255,255,255,.85);
  }
  .gp-fixed-bar .gp-fixed-hl:hover:not(:disabled) { filter: brightness(1.1); }
  .gp-fixed-bar .gp-fixed-hl:disabled { opacity: .4; cursor: not-allowed; }

  /* Wrapper for original action buttons inside .gp-panel (injected by JS) */
  .gp-actions-original {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Mobile-shrunk action buttons inside the panel + fixed bar.
     Spec target: phones see 40-44px tall buttons with 8-12px padding and
     13-14px font, vs the desktop 50-60px tall full-width slabs. The
     fixed-bar primary CTA stays at the larger 14px font for prominence,
     but the in-panel buttons are downsized so the action region never
     eats more than ~15% of the viewport height. */
  .gp-actions-original .gp-btn {
    flex: 1 1 100%;
    width: auto;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.15;
  }
  /* Secondary / utility buttons (Turbo, Presets, Quick pick, Clear, Skip)
     pack two-per-row so they don't each consume a full action-strip slot.
     Primary CTAs (Deal, Bet, Place bet, Roll, Play, SPIN, Cash out)
     keep the full-width treatment so the player always sees the main move
     as the most prominent target. */
  .gp-actions-original .gp-btn.secondary:not([id*="cashout" i]) {
    flex: 1 1 calc(50% - 4px);
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12.5px;
  }
  /* Hilo-specific groupings — the Higher/Lower row and the Skip/Cashout
     row keep their pairing on mobile too, even though game-nav.js
     flattens everything else into .gp-actions-original. */
  .hilo-guess-row,
  .hilo-meta-row {
    display: flex;
    gap: 6px;
    width: 100%;
  }
  .hilo-guess-row .gp-btn,
  .hilo-meta-row .gp-btn {
    flex: 1 1 0;
  }
  /* Crash active-preset chip stays full-width and doesn't get squashed
     onto a half-row. */
  .gp-actions-original .crash-active-preset { flex: 1 1 100%; }
}

/* Tighter mobile breakpoint — phones below 720px get a smaller in-panel
   button strip so the action area never crowds the playfield. This block
   piggybacks on the 768px shell-mobile breakpoint above (which already
   stacks the canvas on top + panel below) and tweaks ONLY button sizing
   for the narrowest screens. */
@media (max-width: 720px) {
  /* Sticky bottom positioning when the panel is short enough to fit
     the entire button strip + bet input above the fold. The
     gp-fixed-bar still overlays when the buttons scroll out of view —
     this just keeps the in-panel layout breathable in the mean time. */
  .gp-actions-original .gp-btn {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
  }
  /* The Hilo wrapper rows live INSIDE .gp-panel on desktop and may be
     flattened on mobile by game-nav.js. Ensure either way the buttons
     keep the smaller form factor and the row width. */
  .hilo-guess-row .gp-btn,
  .hilo-meta-row .gp-btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .hilo-guess-row .hilo-odds,
  .hilo-meta-row .hilo-odds {
    font-size: 11px;
    opacity: .85;
  }
  /* Slim the fixed-bar chrome at the narrowest breakpoint so the
     overlay stays inside the ~15% viewport-height budget even when
     mirroring 5 BJ buttons or the Hilo Higher/Lower + Deal + Cash-out
     trio. Padding shrinks 12→8 vertical, gap 8→6. */
  .gp-fixed-bar {
    padding: 8px 12px;
    gap: 6px;
  }
  .gp-fixed-bar .gp-btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .gp-fixed-bar .gp-fixed-hl {
    padding: 9px 8px;
    font-size: 12.5px;
  }
}

/* =================== ROCK PAPER SCISSORS =================== */

.rps-view {
  width: 100%;
}

/* Choose view needs to be a positioning context so the chat toggle +
   panel can anchor to its right edge instead of the whole viewport. */
#rps-choose { position: relative; }

/* ---- Match chat (realtime only) ---- */
.rps-chat-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 52px; height: 52px;
  border-radius: 50%;
  /* Single off-center radial — uniform spherical shading with no visible
     horizontal bands at top or bottom. No inset highlight/shadow pair
     (those were creating the weird two-tone look the user flagged). */
  background: radial-gradient(circle at 32% 28%,
    #b5ff4a 0%,
    #72d528 38%,
    #3ea80d 72%,
    #1d6a05 100%);
  border: none;
  color: #04240b;
  cursor: pointer;
  /* Flat outer shadow + green glow. Depth comes from the radial alone. */
  box-shadow:
    0 4px 14px rgba(0, 0, 0, .45),
    0 0 18px rgba(127, 248, 0, .28),
    0 0 0 2px rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rps-chat-toggle:hover {
  transform: scale(1.08);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .5),
    0 0 26px rgba(127, 248, 0, .5),
    0 0 0 2px rgba(255, 255, 255, .25);
}
.rps-chat-toggle[hidden] { display: none !important; }
.rps-chat-toggle-ico {
  width: 26px; height: 26px;
  display: block;
  /* Small dark outline on the glyph so it reads clearly over the green,
     regardless of which part of the radial it sits on. */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}

/* Shown below the chat toggle button when the opponent has opened their
   chat but this user hasn't yet. Anchors to the same top/right as the
   toggle with an extra offset so it hugs underneath the button. */
.rps-chat-opponent-hint {
  position: absolute;
  top: 74px;                  /* 14 (toggle top) + 52 (toggle h) + 8 gap */
  right: 14px;
  max-width: 150px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .5));
  border: 1px solid rgba(127, 248, 0, .45);
  border-radius: 10px;
  color: #d6ffb7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  pointer-events: none;
  animation: rpsHintPulse 1.8s ease-in-out infinite;
  z-index: 3;
}
.rps-chat-opponent-hint[hidden] { display: none !important; }
@keyframes rpsHintPulse {
  0%, 100% { transform: translateY(0);    box-shadow: 0 4px 10px rgba(0, 0, 0, .4), 0 0 0 rgba(127, 248, 0, .4); }
  50%      { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 14px rgba(127, 248, 0, .45); }
}

.rps-chat-panel {
  position: absolute;
  top: 12px; right: 12px; bottom: 12px;
  width: min(300px, 40vw);
  background: linear-gradient(180deg, rgba(10, 18, 28, .95), rgba(6, 12, 20, .95));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 4;
  animation: rpsChatSlideIn .25s cubic-bezier(.2, 1.2, .3, 1);
}
.rps-chat-panel[hidden] { display: none !important; }
@keyframes rpsChatSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.rps-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: 12px;
}
.rps-chat-close {
  background: transparent; border: none; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer;
  padding: 2px 6px;
}
.rps-chat-close:hover { color: #ef3c4e; }

.rps-chat-waiting {
  margin: 18px 14px;
  padding: 16px 12px;
  text-align: center;
  color: #ef3c4e;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  background: rgba(239, 60, 78, .08);
  border: 1px solid rgba(239, 60, 78, .35);
  border-radius: 10px;
}

.rps-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin;
}
.rps-chat-msg {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.3;
  word-break: break-word;
}
.rps-chat-msg-label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .7;
  margin-bottom: 2px;
}
.rps-chat-msg.me {
  align-self: flex-end;
  background: rgba(127, 248, 0, .14);
  border: 1px solid rgba(127, 248, 0, .28);
  color: #d6ffb7;
}
.rps-chat-msg.them {
  align-self: flex-start;
  background: rgba(58, 143, 255, .12);
  border: 1px solid rgba(58, 143, 255, .28);
  color: #cfe3ff;
}
.rps-chat-msg-body { font-weight: 600; }

.rps-chat-form {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02);
}
.rps-chat-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 13px;
}
.rps-chat-form input:focus { outline: none; border-color: rgba(127, 248, 0, .5); }
.rps-chat-send {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(160deg, #7ff800, #2c8b00);
  color: #06250a;
  font-weight: 800;
  cursor: pointer;
}
.rps-chat-send:hover { filter: brightness(1.1); }
.rps-chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* Mobile: panel takes near-full width so content is readable. */
@media (max-width: 720px) {
  .rps-chat-panel { width: calc(100% - 24px); right: 12px; }
}

/* Lobby view: grid + card shells now live in /css/qk-lobby.css under the
   .qk-lobby root (see #rps-lobby.qk-lobby[data-accent="rps"] in rps.html).
   Only RPS-specific internals (filter toggle, choice grid, lobby-card
   state modifiers) remain below. */

/* Open-lobbies header extras — the sort/filter toggle button sits to the
   right of the "Open lobbies" heading inside .qk-lobby-open-head. */
.rps-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(127,248,0,.06);
  border: 1px solid rgba(127,248,0,.22);
  border-radius: 999px;
  color: var(--s-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.rps-filter-toggle:hover {
  background: rgba(127,248,0,.14);
  color: var(--s-green, #7ff800);
  border-color: var(--s-green, #7ff800);
  transform: translateY(-1px);
}
.rps-filter-toggle.active {
  background: var(--s-green, #7ff800);
  color: #001a00;
  border-color: var(--s-green, #7ff800);
  box-shadow: 0 6px 16px rgba(127,248,0,.32);
}
.rps-filter-toggle svg {
  flex: 0 0 18px;
  display: block;
}
@media (max-width: 480px) {
  .rps-filter-toggle-label { display: none; }
  .rps-filter-toggle { padding: 7px; }
}

/* Hidden filter panel must actually hide. The base .rps-lobby-filters
   rule below uses display:flex which would otherwise win over the
   browser-default hidden attribute. */
.rps-lobby-filters[hidden] { display: none !important; }

/* The .rps-create-form form shell (layout, input) is now provided by
   .qk-lobby-form + .qk-lobby-input in /css/qk-lobby.css. The rps.html
   tag keeps the .rps-create-form class as a no-op marker that existing
   selectors (e.g. .rps-create-form .gp-btn below) can still target to
   size the green CTA inside the lobby's create card. */

/* RPS .gp-btn — mirrors .gp-panel .gp-btn since RPS is not inside .gp-panel */
.rps-create-form .gp-btn,
.rps-lobby-card .gp-btn,
.rps-result-inline .gp-btn,
.rps-waiting-card .gp-btn,
.rps-choose-card .gp-btn,
.rps-reveal-card .gp-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--s-green);
  color: #001a00;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
  font-family: inherit;
}
.rps-create-form .gp-btn:hover:not(:disabled),
.rps-lobby-card .gp-btn:hover:not(:disabled),
.rps-result-inline .gp-btn:hover:not(:disabled),
.rps-waiting-card .gp-btn:hover:not(:disabled),
.rps-choose-card .gp-btn:hover:not(:disabled),
.rps-reveal-card .gp-btn:hover:not(:disabled) { filter: brightness(1.1); }
.rps-create-form .gp-btn:disabled,
.rps-lobby-card .gp-btn:disabled,
.rps-result-inline .gp-btn:disabled,
.rps-waiting-card .gp-btn:disabled,
.rps-choose-card .gp-btn:disabled,
.rps-reveal-card .gp-btn:disabled { opacity: .5; cursor: not-allowed; }
.rps-create-form .gp-btn.secondary,
.rps-lobby-card .gp-btn.secondary,
.rps-waiting-card .gp-btn.secondary,
.rps-choose-card .gp-btn.secondary {
  background: var(--s-bg-3);
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.rps-create-form .gp-btn.secondary:hover:not(:disabled),
.rps-lobby-card .gp-btn.secondary:hover:not(:disabled),
.rps-waiting-card .gp-btn.secondary:hover:not(:disabled),
.rps-choose-card .gp-btn.secondary:hover:not(:disabled) { background: var(--s-bg-4); }

/* Mode pill group + mode buttons moved to .qk-lobby-pills / .qk-lobby-pill
   in /css/qk-lobby.css. The .rps-mode-info helper is now rendered next
   to the header via .qk-lobby-create-head (flex baseline), no extra
   margin rule needed. */

/* Choice grid — 3 columns */
.rps-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Small choice buttons (create form) */
.rps-choice-btn {
  background: var(--s-bg);
  border: 2px solid var(--s-line);
  border-radius: 12px;
  padding: 14px 8px;
  color: var(--s-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  text-align: center;
  font-family: inherit;
  line-height: 1.4;
}
.rps-choice-btn:hover {
  border-color: var(--s-muted-2);
  box-shadow: 0 0 12px rgba(0, 231, 1, .1);
}
.rps-choice-btn.selected {
  border-color: var(--s-green);
  box-shadow: 0 0 16px rgba(0, 231, 1, .25);
}
.rps-choice-ico {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
}

/* Big choice buttons (choose view) */
.rps-choice-grid-big {
  gap: 16px;
  margin-bottom: 16px;
}
.rps-choice-btn-big {
  background: var(--s-bg-2);
  border: 2px solid var(--s-line);
  border-radius: 16px;
  padding: 24px 12px;
  color: var(--s-text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  /* Fix 3: snappier cubic-bezier easing for the playful hover bounce, plus
     explicit animation property so the selected pulse keyframes can take
     over without fighting the base transition on properties they animate. */
  transition: border-color .18s ease, box-shadow .25s ease, transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  font-family: inherit;
  line-height: 1.3;
}
/* Fix 3: playful hover — a small lift + tilt. Uses the overshoot easing
   on the base .rps-choice-btn-big transition so the button "pops" into
   the raised state and settles. Disabled buttons get no animation. */
.rps-choice-btn-big:hover:not(:disabled) {
  border-color: var(--s-muted-2);
  box-shadow: 0 8px 20px rgba(0, 231, 1, .18), 0 0 16px rgba(0, 231, 1, .12);
  transform: translateY(-4px) rotate(-3deg);
}
/* Keep the icon glyph legible — the button rotates but we counter-rotate
   the icon so the emoji stays upright under the cursor. */
.rps-choice-btn-big:hover:not(:disabled) .rps-choice-ico-big {
  transform: rotate(3deg);
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rps-choice-btn-big .rps-choice-ico-big {
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Fix 3: selected state gets a glowing pulse so the user can see at a
   glance which choice they're about to Confirm. Runs on an infinite loop
   as long as .selected is applied. */
.rps-choice-btn-big.selected {
  border-color: var(--s-green);
  transform: translateY(-4px);
  animation: rpsChoicePulse 1.4s ease-in-out infinite;
}
.rps-choice-btn-big.selected:hover:not(:disabled) {
  /* Preserve the pulse animation on hover — don't let the hover transform
     knock it off. A tiny extra lift still reads as responsive. */
  transform: translateY(-6px) rotate(-3deg);
}
@keyframes rpsChoicePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 231, 1, .7), 0 0 12px rgba(0, 231, 1, .25);
    border-color: var(--s-green);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 231, 1, 0), 0 0 24px rgba(0, 231, 1, .45);
    border-color: rgba(0, 231, 1, .85);
  }
}
.rps-choice-btn-big:disabled {
  opacity: .5;
  cursor: not-allowed;
  /* Disabled buttons don't pulse or lift — animation: none prevents a
     still-selected-but-disabled button (post-submit) from looping. */
  animation: none;
  transform: none;
}
.rps-choice-btn-big:disabled:hover {
  transform: none;
  box-shadow: none;
}
.rps-choice-ico-big {
  font-size: 48px;
  display: block;
  margin-bottom: 6px;
}

/* Lobby card — rendered with .qk-lobby-card (shell: background, border,
   accent strip) + .rps-lobby-card (RPS-specific flex-column layout that
   overrides the qk-lobby-card 3-column grid because RPS cards show a
   mode badge + status + optional admin peek + action row). */
.rps-lobby-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  gap: 10px;
}
/* Hover highlight — skip it for our own lobbies (already visually distinct via
   the green tint) and for resolved rows (the result colouring should stay).
   The qk-lobby-card base provides a generic hover; our scoped rule wins
   thanks to the double-class selector specificity. */
.rps-lobby-card:hover:not(.rps-lobby-yours):not(.rps-lobby-resolved) {
  border-color: rgba(0, 231, 1, .35);
  background: rgba(0, 231, 1, .04);
  transform: translateY(-1px);
}
.rps-lobby-card.rps-lobby-yours {
  border-color: rgba(0, 231, 1, .4);
  background: rgba(0, 231, 1, .03);
}
.rps-lobby-card.rps-lobby-resolved {
  border-color: rgba(255, 215, 0, .3);
  background: rgba(255, 215, 0, .03);
}
.rps-lobby-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rps-lobby-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rps-lobby-creator {
  font-weight: 700;
  font-size: 14px;
  color: var(--s-text);
}
.rps-lobby-bet {
  font-weight: 800;
  font-size: 16px;
  color: var(--s-green);
  white-space: nowrap;
}
.rps-lobby-badge-yours {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  background: rgba(0, 231, 1, .15);
  color: var(--s-green);
  border: 1px solid rgba(0, 231, 1, .3);
}
.rps-lobby-badge-paused {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  background: rgba(255, 170, 0, .15);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, .3);
}
.rps-lobby-status-waiting {
  font-size: 12px;
  color: var(--s-muted);
  font-style: italic;
}
.rps-lobby-status-paused {
  font-size: 12px;
  color: #ffaa00;
  font-weight: 600;
}
.rps-lobby-paused {
  opacity: .8;
  border-color: rgba(255, 170, 0, .3);
}
.rps-lobby-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rps-lobby-cancel-btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
}
.rps-join-btn {
  white-space: nowrap;
  padding: 8px 20px !important;
  font-size: 13px !important;
}

/* Inline result in lobby card */
.rps-result-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rps-result-choices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--s-text);
}
.rps-result-vs {
  color: var(--s-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}
.rps-result-outcome {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .5px;
}
.rps-result-outcome.rps-result-win {
  color: var(--s-green);
}
.rps-result-outcome.rps-result-loss {
  color: #f87171;
}
.rps-result-outcome.rps-result-tie {
  color: var(--s-gold);
}
.rps-lobby-play-again {
  align-self: flex-start;
  font-size: 12px !important;
  padding: 6px 16px !important;
  margin-top: 4px;
}

/* Join modal overlay */
.rps-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.rps-join-modal-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 500px;
  width: 90%;
}
.rps-join-modal-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--s-text);
}
.rps-join-modal-info {
  color: var(--s-muted);
  font-size: 14px;
  margin: 0 0 20px;
}
.rps-join-choice-btn {
  background: var(--s-bg);
  border: 2px solid var(--s-line);
  border-radius: 16px;
  padding: 24px 12px;
  color: var(--s-text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: center;
  font-family: inherit;
  line-height: 1.3;
}
.rps-join-choice-btn:hover:not(:disabled) {
  border-color: var(--s-muted-2);
  box-shadow: 0 0 20px rgba(0, 231, 1, .15);
  transform: translateY(-2px);
}
.rps-join-choice-btn.selected {
  border-color: var(--s-green);
  box-shadow: 0 0 24px rgba(0, 231, 1, .3);
  transform: translateY(-4px);
}
.rps-join-choice-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.rps-join-cancel-btn {
  background: transparent;
  border: 1px solid var(--s-line);
  color: var(--s-muted);
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  margin-top: 12px;
  transition: color .15s, border-color .15s;
}
.rps-join-cancel-btn:hover {
  color: var(--s-text);
  border-color: var(--s-muted);
}

/* Random-pick button in the fast-join modal (Fix 2). Sits between the R/P/S
   grid above and the Cancel link below — styled as a subtle secondary
   action so it reads as "also an option" rather than competing with the
   main choice buttons. Mirrors the Cancel button's muted palette but with
   extra padding so it looks like a tappable CTA. Also reused for the
   realtime choose view (#rps-random-btn) for a coherent look. */
.rps-join-random-btn,
#rps-random-btn {
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  color: var(--s-text);
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
  transition: border-color .15s, background .15s, color .15s;
}
.rps-join-random-btn:hover:not(:disabled),
#rps-random-btn:hover:not(:disabled) {
  border-color: var(--s-green);
  color: var(--s-green);
  background: rgba(0, 231, 1, .05);
}
.rps-join-random-btn:disabled,
#rps-random-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Rematch challenge modal action row (v2 redesign). Accept is the primary
   green .gp-btn CTA; Decline is the .gp-btn.secondary variant so both sit
   visually at the same weight. Previously Accept fell outside the
   .rps-create-form / .rps-lobby-card scope chain and inherited nothing, so
   the button showed up unstyled. We scope the .gp-btn rules directly to
   .rps-rematch-actions here to guarantee the modal gets primary/secondary
   styling regardless of where it's mounted in the DOM. */
.rps-rematch-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin-top: 16px;
  flex-wrap: wrap;
}
.rps-rematch-actions .gp-btn {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 12px 20px;
  background: var(--s-green);
  color: #001a00;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: filter .15s, opacity .15s, background .15s;
  font-family: inherit;
  margin: 0;
}
.rps-rematch-actions .gp-btn:hover:not(:disabled) { filter: brightness(1.1); }
.rps-rematch-actions .gp-btn:disabled { opacity: .5; cursor: not-allowed; }
.rps-rematch-actions .gp-btn.secondary {
  background: var(--s-bg-3);
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.rps-rematch-actions .gp-btn.secondary:hover:not(:disabled) {
  background: var(--s-bg-4);
  filter: none;
}
/* Legacy: old markup used .rps-join-cancel-btn for Decline. Keep the margin
   fix so the button lines up with Accept if that class ever re-enters use. */
.rps-rematch-actions .rps-join-cancel-btn {
  margin-top: 0;
}

/* Inline Accept/Decline buttons on rps_rematch_challenge notifications in
   the bell dropdown (v2 redesign). Lives under .s-notif-item so it inherits
   the item padding context; the action row is a small second line below
   the message with two compact buttons. Accept matches the primary green;
   Decline is muted to mirror the modal's secondary style. Clicking either
   one should NOT propagate to the notification item click handler (which
   otherwise follows `data-link` to the RPS page) — the JS stops propagation,
   but we still render pointer affordances clearly. */
.qk-notif-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.qk-notif-actions .qk-notif-btn {
  flex: 1 1 auto;
  min-width: 80px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 0;
  transition: filter .15s, background .15s, opacity .15s;
}
.qk-notif-actions .qk-notif-btn.accept {
  background: var(--s-green);
  color: #001a00;
}
.qk-notif-actions .qk-notif-btn.accept:hover:not(:disabled) { filter: brightness(1.1); }
.qk-notif-actions .qk-notif-btn.decline {
  background: var(--s-bg-3);
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.qk-notif-actions .qk-notif-btn.decline:hover:not(:disabled) {
  background: var(--s-bg-4);
}
/* Bug 4: rps_rematch_challenge notifications time out at 60s server-side.
   Once expired, the bell swaps the green Accept chip for this disabled
   "Expired" badge — same shape/size as Accept (so the row layout doesn't
   reflow), but muted to read as inert. No hover effect, no pointer cursor.
   Still spans the same flex slot Accept occupied so Decline keeps its
   relative width. */
.qk-notif-actions .qk-notif-btn.qk-notif-btn-expired,
.qk-notif-actions .qk-notif-btn.qk-notif-btn-expired:disabled {
  background: var(--s-bg-3);
  color: var(--s-muted);
  border: 1px solid var(--s-line);
  cursor: not-allowed;
  opacity: 1; /* override the generic :disabled fade so the chip stays legible */
}
.qk-notif-actions .qk-notif-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Suspense overlay */
.rps-suspense-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  max-width: 480px;
  width: 90%;
}
.rps-suspense-hands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}
.rps-suspense-hand {
  background: var(--s-bg);
  border: 2px solid var(--s-line);
  border-radius: 16px;
  padding: 20px 28px;
  text-align: center;
  min-width: 100px;
}
.rps-suspense-hand span {
  font-size: 56px;
  display: block;
  min-height: 70px;
  line-height: 1.2;
}
.rps-suspense-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--s-muted);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rps-suspense-vs {
  font-size: 24px;
  font-weight: 900;
  color: var(--s-muted-2);
  letter-spacing: 2px;
}
.rps-suspense-status {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--s-muted);
  min-height: 36px;
}
.rps-suspense-status.rps-suspense-win {
  color: var(--s-green);
  text-shadow: 0 0 20px rgba(0, 231, 1, .5);
}
.rps-suspense-status.rps-suspense-loss {
  color: #f87171;
  text-shadow: 0 0 20px rgba(248, 113, 113, .4);
}
.rps-suspense-status.rps-suspense-tie {
  color: var(--s-gold);
}

/* Rejoin badge + card style */
.rps-lobby-card.rps-lobby-rejoin {
  border-color: rgba(0, 231, 1, .4);
  background: rgba(0, 231, 1, .04);
}
.rps-lobby-badge-rejoin {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  background: rgba(0, 231, 1, .12);
  color: var(--s-green-2);
  border: 1px solid rgba(0, 231, 1, .3);
}
.rps-rejoin-btn {
  background: var(--s-green) !important;
  color: #000 !important;
  font-weight: 700;
}
.rps-lobby-status-active {
  color: var(--s-green-2);
  font-size: 12px;
}

/* Opponent history panel in choose view */
.rps-opponent-history {
  text-align: center;
  padding: 8px 12px;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  font-size: 13px;
  max-width: 320px;
}
.rps-history-label {
  color: var(--s-muted);
  margin-right: 6px;
}
.rps-history-choices {
  font-size: 18px;
  letter-spacing: 2px;
}

/* Mode badge pill */
.rps-mode-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
}
.rps-mode-badge.fast {
  background: rgba(59, 130, 246, .15);
  color: var(--s-blue);
  border: 1px solid rgba(59, 130, 246, .3);
}
.rps-mode-badge.realtime {
  background: rgba(0, 231, 1, .1);
  color: var(--s-green-2);
  border: 1px solid rgba(0, 231, 1, .25);
}

/* .rps-no-lobbies retired — list empty state now renders with the
   shared .qk-lobby-empty class from /css/qk-lobby.css. */

/* Waiting view */
.rps-waiting-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.rps-waiting-card h3 {
  margin: 16px 0 8px;
  font-size: 18px;
  color: var(--s-text);
}
.rps-waiting-card p {
  color: var(--s-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

/* Pulsing circle */
.rps-waiting-pulse {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--s-green);
  margin: 0 auto;
  animation: rpsPulse 1.5s ease-in-out infinite;
}
@keyframes rpsPulse {
  0%, 100% { transform: scale(1); opacity: .6; box-shadow: 0 0 0 0 rgba(0, 231, 1, .4); }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 24px 8px rgba(0, 231, 1, .2); }
}

/* Choose view */
.rps-choose-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}
.rps-choose-card h3 {
  margin: 0 0 16px;
  font-size: 20px;
  color: var(--s-text);
}

/* Timer */
.rps-timer {
  font-size: 32px;
  font-weight: 800;
  color: var(--s-green);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.rps-status-text {
  color: var(--s-muted);
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
}

/* Reveal view */
.rps-reveal-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.rps-reveal-hands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.rps-hand {
  background: var(--s-bg);
  border: 2px solid var(--s-line);
  border-radius: 16px;
  padding: 20px 28px;
  text-align: center;
  min-width: 120px;
}
.rps-hand-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--s-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rps-hand-icon {
  font-size: 56px;
  line-height: 1.2;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rps-vs {
  font-size: 24px;
  font-weight: 900;
  color: var(--s-muted-2);
  letter-spacing: 2px;
}

/* Result banner */
.rps-result-banner {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 8px;
  min-height: 40px;
}
.rps-result-banner.rps-win {
  color: var(--s-green);
  text-shadow: 0 0 20px rgba(0, 231, 1, .5);
}
.rps-result-banner.rps-lose {
  color: #f87171;
  text-shadow: 0 0 20px rgba(248, 113, 113, .4);
}
.rps-result-banner.rps-tie {
  color: var(--s-gold);
}

.rps-payout {
  font-size: 16px;
  font-weight: 700;
  color: var(--s-muted);
  margin-bottom: 24px;
  min-height: 24px;
}

/* ===== RPS mobile overrides ===== */
@media (max-width: 768px) {
  #rps-lobby {
    grid-template-columns: 1fr;
  }
  .rps-reveal-hands {
    gap: 12px;
  }
  .rps-hand {
    padding: 14px 16px;
    min-width: 90px;
  }
  .rps-hand-icon {
    font-size: 40px;
    min-height: 50px;
  }
  .rps-vs {
    font-size: 18px;
  }
  .rps-result-banner {
    font-size: 22px;
  }
  .rps-choice-ico-big {
    font-size: 36px;
  }
  .rps-choice-btn-big,
  .rps-join-choice-btn {
    padding: 16px 8px;
    font-size: 14px;
  }
  .rps-suspense-hands {
    gap: 12px;
  }
  .rps-suspense-hand {
    padding: 14px 16px;
    min-width: 80px;
  }
  .rps-suspense-hand span {
    font-size: 40px;
    min-height: 50px;
  }
  .rps-suspense-vs {
    font-size: 18px;
  }
  .rps-suspense-status {
    font-size: 20px;
  }
  .rps-join-modal-card,
  .rps-suspense-card {
    padding: 24px 16px;
  }
}

@media (max-width: 480px) {
  .rps-reveal-hands {
    flex-direction: column;
    gap: 8px;
  }
  .rps-vs {
    font-size: 16px;
  }
  .rps-hand {
    width: 100%;
    box-sizing: border-box;
  }
  .rps-choose-card,
  .rps-waiting-card,
  .rps-reveal-card {
    padding: 20px 16px;
  }
  .rps-suspense-hands {
    flex-direction: column;
    gap: 8px;
  }
  .rps-suspense-hand {
    width: 100%;
    box-sizing: border-box;
  }
  .rps-result-choices {
    flex-direction: column;
    gap: 4px;
  }
}

/* ===== 480px: extra-small phones ===== */
@media (max-width: 480px) {
  .s-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .s-tile .s-ico {
    font-size: 28px;
  }
  .s-tile .s-ico img {
    width: 40px;
    height: 40px;
  }
  .s-balance {
    font-size: 11px;
    padding: 5px 8px;
  }
  .s-content {
    padding: 12px 8px 32px;
  }
  .gp-crash-mult { font-size: 32px; }
  .gp-dice-roll { font-size: 32px; }
  .card-face {
    width: 48px;
    height: 68px;
    font-size: 16px;
    margin: 2px;
  }
  .card-face.card-current {
    width: 68px !important;
    height: 98px !important;
    font-size: 22px;
  }
  .card-placeholder,
  .card-next-outline {
    min-width: 68px;
    min-height: 98px;
    width: 68px;
    height: 98px;
  }
  .dp-holdings { grid-template-columns: 1fr; }
  .wd-row-main { grid-template-columns: 1fr; }
  .wd-balance-grid { grid-template-columns: 1fr; }
  .gp-chicken-lane { flex: 0 0 64px; }
  /* Prevent top nav overflow on very small screens */
  .s-top {
    overflow: hidden;
    gap: 4px;
  }
  .s-balance {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Balance menu dropdown: edge-to-edge on small phones */
  .s-balance-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  /* Notification dropdown: edge-to-edge on small phones */
  .s-notif-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* Fixed bottom bar must be hidden on desktop regardless of JS state */
@media (min-width: 769px) {
  .gp-fixed-bar { display: none !important; }
}

/* RPS: Open-lobbies filter strip (Bug 1). Lives directly under the
   "Open lobbies" heading; mirrors the .rps-mode-select pill-button pattern
   for the mode toggle and uses the existing input chrome for numeric fields. */
.rps-lobby-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 10px;
}
.rps-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rps-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--s-muted);
  min-width: 60px;
}
.rps-filter-mode-select {
  display: inline-flex;
  background: var(--s-bg-2);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.rps-filter-mode-btn {
  background: transparent;
  border: none;
  color: var(--s-muted);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.rps-filter-mode-btn:hover {
  color: var(--s-text);
}
.rps-filter-mode-btn.active {
  background: var(--s-bg-3);
  color: var(--s-green);
}
/* Sort pills live on their own filter row now (below Bet range), but the
   label must still sit INLINE with the sort-select — the row is a flex
   container, so no extra display rule is needed. We keep the same
   min-width as the other filter labels so the three rows (Mode, Bet range,
   Sort) line up vertically and the buttons start at the same x-offset. */
.rps-filter-label-sort {
  min-width: 60px;
}
.rps-filter-sort-select {
  display: inline-flex;
  background: var(--s-bg-2);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  flex-wrap: nowrap;
}
.rps-filter-sort-btn {
  background: transparent;
  border: none;
  color: var(--s-muted);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.rps-filter-sort-btn:hover {
  color: var(--s-text);
}
.rps-filter-sort-btn.active {
  background: var(--s-bg-3);
  color: var(--s-green);
}
.rps-filter-input {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--s-text);
  font-size: 13px;
  font-family: inherit;
  width: 90px;
  box-sizing: border-box;
}
.rps-filter-input:focus {
  outline: none;
  border-color: var(--s-muted-2);
}
.rps-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--s-muted);
  cursor: pointer;
  user-select: none;
}
.rps-filter-checkbox input {
  margin: 0;
  cursor: pointer;
}

/* RPS: admin-only cheat-monitoring peek block (Bug 2). Rendered by rps.js on
   every lobby card (inline) for admins and as a banner in the realtime choose
   view. Orange/yellow border makes the privileged-data nature visually obvious
   so admins never confuse it with a normal player-facing hint. */
.rps-admin-peek {
  margin: 8px 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #ffd166;
  background: rgba(255, 180, 0, 0.08);
  border: 1px dashed #ffb020;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.rps-admin-peek-label {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffb020;
  text-transform: uppercase;
  font-size: 11px;
}
.rps-admin-peek-row {
  white-space: nowrap;
}
.rps-admin-peek em {
  font-style: italic;
  opacity: 0.7;
}
.rps-admin-peek-choose {
  justify-content: center;
  text-align: center;
  font-size: 13px;
  margin: 12px 0 8px;
}

/* RPS: creator's hidden fast-mode choice — click to reveal */
.rps-hidden-choice {
  margin-top: 8px;
  font-size: 12px;
  color: var(--s-muted);
}
.rps-hidden-choice .rps-choice-label {
  font-weight: 600;
}
/* Masked-choice uses a neutral "???" placeholder rendered by JS — no blur or
   opacity tricks that could leak the choice via glyph width / shape. The span
   body is swapped to the real icon+name when data-revealed=true via the click
   handler in rps.js. */
.rps-hidden-choice .rps-choice-masked {
  display: inline-block;
  cursor: pointer;
  color: var(--s-muted);
  padding: 2px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.rps-hidden-choice .rps-choice-masked:hover {
  color: var(--s-text);
}
.rps-hidden-choice .rps-choice-masked.revealed {
  color: var(--s-green);
  background: rgba(0, 231, 1, 0.1);
}

/* Info buttons (circled "i" next to section headers) */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--s-muted);
  background: transparent;
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  transition: all 0.15s;
  line-height: 1;
  padding: 0;
}
.info-btn:hover {
  border-color: var(--s-text);
  color: var(--s-text);
}

/* Info popup (centered modal card) */
.info-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 400px;
  width: 90%;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--s-text);
}
.info-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 499;
}

/* RPS: fixed-height scrollable open lobbies list */
#rps-lobby-list {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
}
#rps-lobby-list::-webkit-scrollbar { width: 6px; }
#rps-lobby-list::-webkit-scrollbar-track { background: transparent; }
#rps-lobby-list::-webkit-scrollbar-thumb {
  background: var(--s-line);
  border-radius: 3px;
}
#rps-lobby-list::-webkit-scrollbar-thumb:hover {
  background: var(--s-muted);
}
@media (max-width: 768px) {
  #rps-lobby-list {
    max-height: 60vh;
  }
}

/* ===================== To Win component (Polymarket-style) =====================
   Used by every game via QK.buildToWin() / QK.setToWin(). Replaces the old
   ".gp-stat + Profit on win" read-out. Renders a trophy icon, label, optional
   subtitle, and a big green payout amount on the right. */
.gp-towin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 231, 1, 0.04);
  border: 1px solid rgba(0, 231, 1, 0.15);
  border-radius: 10px;
  margin: 8px 0 12px;
  flex-wrap: wrap; /* allow wrap when amount doesn't fit next to the label */
  min-width: 0;
}
.gp-towin-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  flex-shrink: 1;
}
.gp-towin-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.gp-towin-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gp-towin-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--s-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gp-towin-sub {
  font-size: 11px;
  color: var(--s-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.gp-towin-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--s-green);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  flex: 0 1 auto;
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}
.gp-towin-amount.range {
  font-size: 18px;
  flex-basis: auto;
}
@media (max-width: 480px) {
  .gp-towin {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .gp-towin-amount {
    font-size: 18px;
    text-align: right;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 231, 1, 0.08);
    margin-left: 0;
  }
  .gp-towin-amount.range { font-size: 15px; }
  .gp-towin-label { font-size: 12px; }
  .gp-towin-sub { font-size: 10px; }
}

/* ============================================================
   Per-game leaderboard
   Drops in under each game's .gp-board. Two-tab panel (Recent /
   Max Wins) styled to match the global recent-bets ticker so the
   eye flows between them without relearning the layout.
   ============================================================ */
.gp-leaderboard {
  margin-top: 28px;
  padding: 18px 20px 20px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
}
.gp-lb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}
.gp-lb-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--s-text);
}
.gp-lb-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--s-bg);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--s-line);
}
.gp-lb-tab {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--s-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.gp-lb-tab:hover { color: var(--s-text); }
.gp-lb-tab.active {
  background: var(--s-bg-3);
  color: var(--s-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
/* Column-header strip injected once by leaderboard.js. Uses the same
   grid template as .gp-lb-row so the labels sit directly over their
   columns. Rank column is intentionally left blank — "1.", "2." etc.
   already communicate the rank axis. */
.gp-lb-cols {
  display: grid;
  grid-template-columns: 36px 1.2fr 36px 1fr 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--s-muted);
}
.gp-lb-col-user { text-align: left; }
.gp-lb-col-game { text-align: center; }
.gp-lb-col-wager,
.gp-lb-col-mult,
.gp-lb-col-payout { text-align: right; }
.gp-lb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp-lb-row {
  display: grid;
  grid-template-columns: 36px 1.2fr 36px 1fr 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--s-bg);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
}
.gp-lb-row:hover {
  background: var(--s-bg-3);
  border-color: var(--s-line);
}
.gp-lb-rank {
  font-weight: 800;
  color: var(--s-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.gp-lb-row:nth-child(1) .gp-lb-rank { color: #ffd447; }
.gp-lb-row:nth-child(2) .gp-lb-rank { color: #d0d0d0; }
.gp-lb-row:nth-child(3) .gp-lb-rank { color: #cd7f32; }
.gp-lb-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--s-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-lb-user.versus {
  /* Stack winner over "vs opponent" without letting the row grow — same height
     as a solo row. Dot sits beside the winner name; the subtitle below is
     muted to match the look of the recent-bets ticker. */
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
}
.gp-lb-user.versus .gp-lb-user-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gp-lb-user.versus .gp-lb-user-vs {
  flex: 1 0 100%;
  font-size: 10px;
  font-weight: 500;
  color: var(--s-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-lb-user .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--s-green);
  box-shadow: 0 0 6px var(--s-green);
  flex-shrink: 0;
}
.gp-lb-game {
  text-align: center;
  color: var(--s-muted);
}
.gp-lb-wager,
.gp-lb-mult {
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gp-lb-payout {
  font-weight: 800;
  color: var(--s-green);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gp-lb-empty {
  text-align: center;
  padding: 24px;
  color: var(--s-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .gp-leaderboard { padding: 14px; }
  .gp-lb-row {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    font-size: 12px;
  }
  .gp-lb-game,
  .gp-lb-wager,
  .gp-lb-mult { display: none; }
  /* Mirror the row collapse on the header strip so the two stay aligned. */
  .gp-lb-cols {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
  }
  .gp-lb-col-game,
  .gp-lb-col-wager,
  .gp-lb-col-mult { display: none; }
}

/* ============================================================
   Crash — decouple canvas height from bet panel height.

   The default .gp-board grid stretches both columns to the tallest
   item's content. With the new QKAutoBet Manual/Auto toggle + the
   optional Advanced config block, the right-hand .gp-panel can grow
   very tall, dragging the left-hand canvas (and the 1.00× multiplier)
   down off-screen.

   Scoped to body[data-game="crash"] so other games are untouched.
   - Canvas column: pinned to start with a fixed/viewport-capped height
   - Panel column:  can scroll internally when content overflows
   - Mobile (<=768px) still stacks via the existing grid override
   ============================================================ */
body[data-game="crash"] .gp-board {
  align-items: start;
}
body[data-game="crash"] .gp-canvas {
  align-self: start;
  min-height: 420px;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}
body[data-game="crash"] .gp-crash-stage {
  min-height: 360px;
  max-height: calc(100vh - 240px);
}
body[data-game="crash"] .gp-panel {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
@media (max-width: 768px) {
  /* Reset caps so the mobile stacked layout (panel below board) is
     unaffected — the viewport-cap math assumes the desktop two-column
     layout where both columns share the same vertical space. */
  body[data-game="crash"] .gp-canvas,
  body[data-game="crash"] .gp-crash-stage,
  body[data-game="crash"] .gp-panel {
    max-height: none;
    overflow-y: visible;
  }
}

/* Disable text selection globally on game pages (casino + versus).
   Game UIs are presentational — drag-selecting numbers, labels, or
   button text looks messy. Inputs and textareas keep their normal
   selection behaviour so bet amounts remain editable. */
body[data-page="casino"],
body[data-page="versus"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
body[data-page="casino"] input,
body[data-page="casino"] textarea,
body[data-page="casino"] [contenteditable="true"],
body[data-page="versus"] input,
body[data-page="versus"] textarea,
body[data-page="versus"] [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}

/* Chevron arrows (‹ / ›) used as carousel/row controls should never be
   text-selectable. The .s-row-arrow class is used on lobby pages outside
   the body-data-page scope above, so cover it explicitly here. */
.s-row-arrow,
.qk-promo-arrow {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* =====================================================================
   QK shared utilities
   Hoisted from design-imports/* — these are intentionally generic
   building blocks Phase 2 page redesigns can rely on.
   - .qk-card     — neutral panel surface (bg-2 + 1px line + 14px radius)
   - .qk-pill     — small uppercase capsule used for tags / counts
   - .qk-input    — text/number input with green focus ring
   - .qk-badge    — coloured chip for status / role / count
   - .qk-cta      — neutral version of the green CTA button
   The legacy .qk-cta-btn used inside .qk-promo-teaser is unaffected;
   .qk-cta is namespaced to avoid colliding with that promo styling.
   ===================================================================== */
.qk-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 18px;
}
.qk-card.qk-card-elev {
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.qk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--s-muted);
  letter-spacing: .04em;
}
.qk-pill.qk-pill-live {
  color: var(--s-green);
  border-color: rgba(127,248,0,.35);
}
.qk-pill.qk-pill-warn {
  color: var(--qk-gold);
  border-color: rgba(255,209,102,.35);
}
.qk-pill.qk-pill-danger {
  color: var(--qk-red);
  border-color: rgba(255,69,103,.35);
}

.qk-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  color: var(--s-text);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.qk-input:focus {
  border-color: rgba(127,248,0,.55);
  box-shadow: 0 0 0 3px rgba(127,248,0,.15);
}
.qk-input::placeholder { color: var(--s-muted-2); }

.qk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--s-muted);
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
}
.qk-badge.qk-badge-admin { color: var(--qk-gold); border-color: rgba(255,209,102,.35); }
.qk-badge.qk-badge-mod   { color: var(--qk-blue); border-color: rgba(79,195,247,.35); }
.qk-badge.qk-badge-live  { color: var(--s-green); border-color: rgba(127,248,0,.35); }

.qk-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 0;
  font: inherit;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--s-green);
  color: #061108;
  box-shadow: 0 8px 22px rgba(127,248,0,.28);
  transition: transform .12s, box-shadow .15s, background .15s, color .15s;
}
.qk-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(127,248,0,.5), 0 8px 22px rgba(127,248,0,.4);
}
.qk-cta.qk-cta-ghost {
  background: transparent;
  color: var(--s-text);
  border: 1px solid var(--s-line);
  box-shadow: none;
}
.qk-cta.qk-cta-ghost:hover {
  border-color: var(--qk-cyan);
  color: var(--qk-cyan);
  transform: none;
  box-shadow: none;
}

/* =====================================================================
   QK shared maintenance overlay
   Replaces the per-game .chicken-maint-overlay inline blocks in
   chicken.html / pong.html / roulette.html. Identical visual contract,
   one source of truth so the design pass can update one place. The
   legacy class names are kept as aliases for the existing markup; the
   new .qk-maint-overlay is the canonical name going forward.
   ===================================================================== */
.qk-maint-overlay,
.chicken-maint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,12,20,.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qk-maint-box,
.chicken-maint-box {
  background: #161e2e;
  border: 2px solid var(--qk-gold);
  border-radius: 14px;
  padding: 42px 56px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255,209,102,.35);
  max-width: 520px;
}
.qk-maint-icon,
.chicken-maint-icon {
  font-size: 72px;
  margin-bottom: 8px;
}
.qk-maint-title,
.chicken-maint-title {
  font-size: 36px;
  font-weight: 900;
  color: var(--qk-gold);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.qk-maint-sub,
.chicken-maint-sub {
  color: #cbd5e1;
  margin-bottom: 22px;
}
.qk-maint-back,
.chicken-maint-back {
  display: inline-block;
  background: var(--qk-gold);
  color: #161e2e;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}
.qk-maint-back-secondary {
  margin-left: 8px;
  background: var(--s-bg-3);
  color: #fff;
}

/* Illustration placeholder hook used in the new 404 / maintenance / empty
   states. Designers can swap by their data-illo-slot. Keeps a labelled
   diagonal-striped box so PRs aren't confused about missing art. */
.illo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,.12);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.02) 0 6px,
      rgba(255,255,255,.05) 6px 12px);
  border-radius: 10px;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--s-muted-2);
  text-transform: uppercase;
  font-weight: 700;
  min-width: 96px;
  min-height: 60px;
  padding: 8px 12px;
}