/* ═══════════════════════════════════════════════════════════════════════════
   TestnetCasino.com: "Vegas Casino" theme
   Static, GitHub Pages friendly. Fonts: Bungee (signs, numbers) + Poppins.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --felt:       #0b5132;
  --felt-dark:  #052a19;
  --gold:       #f5c542;
  --gold-light: #ffe79a;
  --gold-dark:  #a87a12;
  --gold-deep:  #5c4410;
  --red:        #d7263d;
  --red-dark:   #7a0d17;
  --cream:      #fff6dc;
  --muted:      #b9cbbd;
  --panel-bg:   rgba(4, 22, 13, 0.82);
  --border:     rgba(245, 197, 66, 0.45);
  --lcd-amber:  #ffb300;
  --lcd-green:  #7dff8a;

  /* Cabinet skin (overridden per game) */
  --topper-a:   #c21f33;
  --topper-b:   #7a0d17;
  --cab-a:      #2a0a10;
  --cab-b:      #14050a;
  --cab-ring:   #3b0b12;
  --cab-glow:   rgba(215, 38, 61, .25);
  --reel-bg:    linear-gradient(180deg, #cfc6b0 0%, #fffdf6 16%, #fffdf6 84%, #cfc6b0 100%);

  --sign: "Bungee", "Poppins", system-ui, sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--body);
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--felt-dark);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 154, .10), transparent 55%),
    radial-gradient(ellipse at center, var(--felt) 0%, #083d25 55%, var(--felt-dark) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* soft vignette */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 180px rgba(0,0,0,.55);
}
a { color: var(--gold); }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
h1, h2, h3 { font-weight: 400; }

#casino-bg, #coin-shower { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#casino-bg { z-index: 0; }
#coin-shower { z-index: 300; }

.page { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 26px 16px 48px; }

/* ── Warning strip (game pages) ── */
.warning-strip {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #8f1220, var(--red-dark));
  border-bottom: 2px solid var(--gold);
  color: var(--cream); font-size: .82rem; font-weight: 500; text-align: center; padding: 7px 16px;
}
.warning-strip a { color: var(--gold-light); font-weight: 700; }

/* ── Marquee sign ── */
.logo-area { text-align: center; margin: 8px auto 22px; }
.marquee {
  position: relative; display: inline-block; max-width: 100%;
  padding: 26px 46px 22px; text-decoration: none;
  background: linear-gradient(180deg, #8f1220 0%, var(--red-dark) 100%);
  border: 3px solid var(--gold); border-radius: 18px;
  box-shadow: 0 0 0 6px var(--red-dark), 0 0 0 8px var(--gold-dark),
              0 10px 40px rgba(0,0,0,.55), 0 0 50px rgba(245,197,66,.25);
}
.marquee .bulb {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--gold-deep); animation: bulb 1.2s steps(1) infinite;
}
.marquee .bulb.odd { animation-delay: .6s; }
.marquee.jackpot .bulb { animation-duration: .25s; }
.marquee.jackpot .bulb.odd { animation-delay: .125s; }
@keyframes bulb {
  0%  { background: var(--gold-light); box-shadow: 0 0 8px 2px rgba(255,231,154,.9); }
  50% { background: var(--gold-deep); box-shadow: none; }
}
.mq-title {
  display: block; font-family: var(--sign); font-size: clamp(1.5rem, 6vw, 3rem);
  letter-spacing: 2px; line-height: 1.05; color: var(--gold-light);
  text-shadow: 0 2px 0 var(--gold-dark), 0 4px 0 var(--gold-deep), 0 0 22px rgba(245,197,66,.55);
}
.mq-title .dot { color: var(--cream); font-size: .56em; letter-spacing: 3px; text-shadow: 0 0 10px rgba(255,255,255,.5); }
.mq-sub { display: block; font-family: var(--sign); font-size: .72rem; letter-spacing: 4px; color: var(--cream); margin-top: 8px; }
.suit-red { color: #ff5a6e; }
.marquee.small { padding: 18px 34px 15px; }
.marquee.small .mq-title { font-size: clamp(1.2rem, 4.6vw, 2rem); }
.marquee.small .mq-sub { font-size: .7rem; letter-spacing: 3px; margin-top: 5px; }
.mottos { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px auto 0; max-width: 760px; }
.motto { margin: 0; font-family: var(--sign); letter-spacing: 1px; line-height: 1.25; text-wrap: balance; }
.motto-main {
  font-size: clamp(1.05rem, 3.8vw, 1.6rem); color: var(--gold-light);
  text-shadow: 0 2px 0 var(--gold-deep), 0 0 16px rgba(245,197,66,.6);
}
.motto-rtp {
  display: inline-block; padding: 6px 18px; border-radius: 999px; font-size: clamp(.82rem, 2.8vw, 1.05rem); color: var(--cream);
  background: rgba(0,0,0,.35); border: 2px solid rgba(245,197,66,.55); box-shadow: 0 0 18px rgba(215,38,61,.25);
}
.motto-rtp strong { font-weight: 400; color: #ff5a6e; text-shadow: 0 0 10px rgba(255,90,110,.7); }
.tagline { font-size: 1rem; color: var(--muted); margin: 22px auto 0; font-style: italic; max-width: 640px; }
.by { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.by a { font-weight: 700; }

/* ── Nav chips ── */
.nav-bar { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.chip-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  font-family: var(--sign); font-size: .74rem; letter-spacing: 1px; color: var(--cream); text-decoration: none;
  background: rgba(0,0,0,.35); border: 2px dashed rgba(245,197,66,.55); transition: background .2s, transform .2s;
}
.chip-link:hover { background: rgba(245,197,66,.15); transform: translateY(-2px); color: var(--cream); }
.chip-link[aria-current="page"] {
  background: var(--red); border: 2px dashed var(--cream);
  box-shadow: 0 0 0 3px var(--red), 0 4px 14px rgba(0,0,0,.4);
}
.chip-emoji { font-family: var(--emoji); }
.chip-balance {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: #2a1c02; box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(0,0,0,.35);
  font-family: var(--sign); font-size: .78rem; letter-spacing: 1px; white-space: nowrap;
}
.chip-balance .tag { background: #2a1c02; color: var(--gold-light); border-radius: 999px; padding: 2px 8px; font-size: .7rem; letter-spacing: 1.5px; }
.chip-balance strong { font-weight: 400; font-size: .95rem; }
.flash-up { animation: flashUp .8s ease-out; }
@keyframes flashUp { 0% { color: #0d6b2a; text-shadow: 0 0 12px #fff; } }

/* ── Gold divider ── */
.gold-divider {
  border: none; height: 2px; margin: 30px 0; position: relative; overflow: visible;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gold-divider::after {
  content: "♠ ♥ ♣ ♦"; font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", serif;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0 12px; font-size: .8rem; letter-spacing: 4px; color: var(--gold);
  background: #07391f; border-radius: 6px;
}

/* ── Panels ── */
.panel {
  position: relative; background: var(--panel-bg); border: 2px solid var(--border); border-radius: 16px;
  padding: 28px 24px 22px; margin: 30px 0 22px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 24px rgba(245,197,66,.06), 0 8px 30px rgba(0,0,0,.35);
}
.panel::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(245,197,66,.14); border-radius: 12px; pointer-events: none;
}
.panel-label {
  position: absolute; top: -14px; left: 20px; margin: 0; padding: 3px 14px; z-index: 1;
  font-family: var(--sign); font-size: .72rem; letter-spacing: 2px; color: #2a1c02;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.panel-sub { margin: -6px 0 16px; color: var(--muted); font-size: .88rem; }

/* House notice (the "not a real casino" warning) */
.notice {
  border-color: var(--red); background: linear-gradient(180deg, rgba(122,13,23,.92), rgba(60,6,12,.92));
}
.notice .panel-label { background: linear-gradient(180deg, #ff8a96, var(--red)); color: #fff; }
.notice-body { display: flex; gap: 16px; align-items: flex-start; }
.notice-icon { font-family: var(--emoji); font-size: 2rem; line-height: 1.1; }
.notice h2 { font-family: var(--sign); font-size: 1.1rem; letter-spacing: 1px; color: var(--gold-light); margin: 0 0 6px; }
.notice p { margin: 0; color: #ffe9e2; }
.notice strong { color: #fff; }

/* ── Buttons ── */
.btn-gold, .btn-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px;
  font-family: var(--sign); font-size: .8rem; letter-spacing: 1px; text-decoration: none; white-space: nowrap;
  border: none; border-radius: 999px; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-gold { color: #2a1c02; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(0,0,0,.35); }
.btn-red { color: var(--cream); background: linear-gradient(180deg, #ff4d5e, var(--red) 55%, var(--red-dark)); box-shadow: 0 0 0 2px var(--gold), 0 3px 0 2px var(--gold-deep), 0 6px 14px rgba(0,0,0,.35); }
.btn-gold:hover, .btn-red:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-gold:hover { color: #2a1c02; }
.btn-red:hover { color: var(--cream); }
.btn-gold:active, .btn-red:active { transform: translateY(2px); }
.btn-gold:disabled, .btn-red:disabled, .btn-ghost:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.6); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 600 .78rem var(--body); color: var(--cream); background: rgba(0,0,0,.35); border: 1px dashed rgba(245,197,66,.45);
}
.btn-ghost:hover:not(:disabled) { background: rgba(245,197,66,.15); }

/* ── Landing ── */
.hero { text-align: center; padding: 18px 0 6px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.game-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--cream);
  border-radius: 18px 18px 14px 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--cab-a), var(--cab-b));
  border: 3px solid var(--gold); box-shadow: 0 0 0 4px var(--cab-ring), 0 0 0 6px var(--gold-dark), 0 12px 30px rgba(0,0,0,.5);
  transition: transform .2s, box-shadow .2s;
}
.game-card:hover { transform: translateY(-4px); color: var(--cream); box-shadow: 0 0 0 4px var(--cab-ring), 0 0 0 6px var(--gold-dark), 0 16px 40px rgba(0,0,0,.6), 0 0 40px var(--cab-glow); }
.gc-topper {
  position: relative; padding: 14px 12px 12px; text-align: center;
  background: linear-gradient(180deg, var(--topper-a), var(--topper-b)); border-bottom: 3px solid var(--gold);
}
.gc-topper h3 {
  margin: 0; font-family: var(--sign); font-size: 1.15rem; letter-spacing: 2px; color: var(--gold-light);
  text-shadow: 0 2px 0 var(--gold-dark), 0 0 14px rgba(245,197,66,.6);
}
.gc-reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 14px 14px 0; padding: 5px; background: #0d0306; border: 2px solid var(--gold-dark); border-radius: 10px; }
.gc-reels span { background: var(--reel-bg); border-radius: 6px; font-family: var(--emoji); font-size: 1.7rem; text-align: center; padding: 8px 0; line-height: 1.2; }
.gc-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gc-body p { margin: 0; color: var(--muted); font-size: .92rem; }
.gc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.badge { font-family: var(--sign); font-size: .7rem; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,197,66,.4); color: var(--gold-light); }
.badge.hot { background: var(--red); border-color: var(--gold); color: #fff; }
.gc-play { align-self: flex-start; margin-top: 8px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.steps li { background: rgba(0,0,0,.3); border: 1px dashed rgba(245,197,66,.35); border-radius: 12px; padding: 18px; }
.step-emoji { font-family: var(--emoji); font-size: 1.8rem; }
.steps h3 { font-family: var(--sign); font-size: .95rem; letter-spacing: 1px; color: var(--gold); margin: 8px 0 4px; }
.steps p { margin: 0; color: #dfe8e1; font-size: .92rem; }
.soon { font-family: var(--sign); font-size: .7rem; letter-spacing: 1px; background: var(--red); color: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

.faq details { border-bottom: 1px dashed rgba(245,197,66,.25); padding: 12px 2px; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--gold); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "♦ "; color: #ff5a6e; }
.faq details[open] summary::before { content: "♠ "; color: var(--cream); }
.faq details p { color: #dfe8e1; margin: 8px 0 0; font-size: .92rem; }

/* ── Footer ── */
/* Footer: the SoloChance.org family layout (solo100.org, bch.ee, bitcoincash.ee):
   links row, network row, then copyright and origin. */
.casino-footer { margin-top: 40px; padding-top: 20px; border-top: 2px solid rgba(245,197,66,.3); text-align: center; font-size: .85rem; color: var(--muted); }
.casino-footer a { color: var(--gold); text-decoration: none; transition: color .2s; }
.casino-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.cf-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 2rem; }
.cf-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 24px; font-weight: 600; }
.cf-networks { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: .85rem; }
.cf-bottom { margin-top: .85rem; font-size: .8rem; }
.cf-bottom > div + div { margin-top: .3rem; }
.casino-footer a.cf-solochance { color: var(--muted); }
/* A nod to the sister projects' footers: SoloChance.org lights up in Bitcoin orange. */
.casino-footer a.cf-solochance:hover { color: #F7931A; }
.cf-disclaimer { margin-top: .6rem !important; color: rgba(255,240,214,.55); }
@media (max-width: 600px) {
  .cf-links { flex-direction: column; gap: 6px; }
}


/* ═══════════════════════ Game page: reels, display, wins ═══════════════════════ */

/* Reels */
.reels-window {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px;
  border-radius: 14px; background: #0d0306; border: 3px solid var(--gold-dark);
  box-shadow: inset 0 8px 18px rgba(0,0,0,.9), 0 0 0 2px #000;
}
.reels-window::after {
  content: ""; position: absolute; inset: 8px; border-radius: 8px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.3) 100%);
}
.reel {
  position: relative; height: calc(var(--sym) * 3); overflow: hidden; border-radius: 8px;
  background: var(--reel-bg); box-shadow: inset 0 0 10px rgba(0,0,0,.35); transition: box-shadow .3s;
}
.reel.anticipate {
  box-shadow: 0 0 0 3px var(--gold-light), 0 0 24px 6px rgba(245,197,66,.85), inset 0 0 18px rgba(245,197,66,.6);
  animation: antic-pulse .3s ease-in-out infinite alternate;
}
@keyframes antic-pulse { to { box-shadow: 0 0 0 3px #fff, 0 0 34px 10px rgba(255,231,154,1), inset 0 0 24px rgba(245,197,66,.8); } }
.chrome { position: absolute; top: 8px; bottom: 8px; width: 4px; margin-left: -2px; z-index: 2; pointer-events: none; border-radius: 2px; background: linear-gradient(90deg, #555, #eee, #777); }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; transform: translateY(calc(var(--sym) * -1)); }
.reel-strip.spinning { animation: reel-loop .36s linear infinite; filter: blur(2px); }
.reel-strip.landing { filter: blur(1px); }
.reel-strip.bounce { animation: reel-bounce .28s ease-out; }
@keyframes reel-loop { from { transform: translateY(calc(var(--sym) * -12)); } to { transform: translateY(0); } }
@keyframes reel-bounce {
  0% { transform: translateY(calc(var(--sym) * -1)); }
  45% { transform: translateY(calc(var(--sym) * -.88)); }
  100% { transform: translateY(calc(var(--sym) * -1)); }
}
.symbol {
  position: relative; height: var(--sym); display: flex; align-items: center; justify-content: center;
  font-family: var(--emoji); font-size: calc(var(--sym) * .56); line-height: 1; user-select: none; transition: opacity .3s;
}
.symbol .g { position: relative; z-index: 1; }
.symbol.wild::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,147,26,.55), rgba(245,197,66,.25) 55%, transparent 72%);
}
.symbol.wild::after, .symbol.scatter::after {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--sign); line-height: 1.25; border-radius: 4px; padding: 0 4px; white-space: nowrap;
}
.symbol.wild::after { content: "WILD"; font-size: calc(var(--sym) * .13); letter-spacing: 1px; color: #fff; background: linear-gradient(90deg, #d7263d, #f7931a); }
.symbol.scatter .g { filter: drop-shadow(0 0 6px rgba(245,197,66,.95)); }
.symbol.scatter::after { content: "SCATTER"; font-size: calc(var(--sym) * .105); letter-spacing: .5px; color: #2a1c02; background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.reels-window.has-win .symbol { opacity: .3; }
.reels-window.has-win .symbol.hit { opacity: 1; animation: hit-pop .5s ease-in-out infinite alternate; }
.reels-window.has-focus .symbol.hit:not(.focus) { opacity: .3; animation: none; }
.reels-window.has-focus .symbol.hit:not(.focus) .frame { display: none; }
.symbol .frame {
  position: absolute; inset: 4px; border-radius: 10px; z-index: 3; pointer-events: none;
  border: 3px solid var(--gold); box-shadow: 0 0 12px rgba(245,197,66,.8), inset 0 0 12px rgba(245,197,66,.45);
}
@keyframes hit-pop { from { transform: scale(1); } to { transform: scale(1.1); } }

.paylines-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.paylines-svg polyline { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .95; transition: opacity .2s; }
.reels-window.has-focus .paylines-svg polyline:not(.focus) { opacity: .12; }

/* Win banner */
.win-banner {
  position: absolute; inset: 8px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(.6);
  transition: opacity .25s, transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
.win-banner.show { opacity: 1; transform: none; }
.win-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.15) 100%);
}
.win-banner .rays {
  position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(245,197,66,.22) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%); mask: radial-gradient(circle, #000 15%, transparent 60%);
  animation: rays-spin 8s linear infinite;
}
@keyframes rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.wb-title, .wb-amount { position: relative; text-align: center; }
.wb-title {
  font-family: var(--sign); font-size: clamp(1.4rem, 6.5vw, 3.1rem); letter-spacing: 2px; line-height: 1.05; color: var(--gold-light);
  text-shadow: 0 3px 0 var(--gold-dark), 0 6px 0 var(--gold-deep), 0 0 30px rgba(245,197,66,.9);
}
.win-banner.mega .wb-title { color: #ffb3e6; text-shadow: 0 3px 0 #a3127a, 0 6px 0 #5a0844, 0 0 30px rgba(255,90,200,.9); }
.win-banner.free .wb-title { color: #b6ffbd; text-shadow: 0 3px 0 #13703a, 0 6px 0 #0a3d1f, 0 0 30px rgba(125,255,138,.9); }
.win-banner.jackpot .wb-title {
  background: linear-gradient(90deg, #ff3047, #f5c542, #38d16a, #2aa8ff, #c86bff, #ff3047); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 3px 0 var(--gold-deep)) drop-shadow(0 0 16px rgba(255,231,154,.8));
  animation: rainbow 1.2s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }
.wb-amount { margin-top: 6px; font-family: var(--sign); font-size: clamp(.95rem, 3.6vw, 1.6rem); color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.8); }

/* LCD */
.slot-lcd {
  margin-top: 14px; padding: 9px 12px; min-height: 58px; border-radius: 8px; background: #0b0b05; border: 2px solid #3a2a06;
  box-shadow: inset 0 0 10px rgba(0,0,0,.9); font-family: "Courier New", monospace; font-weight: 700;
  text-align: center; text-transform: uppercase; letter-spacing: 1px;
}
.lcd-main { font-size: .88rem; color: var(--lcd-amber); text-shadow: 0 0 6px rgba(255,179,0,.8); }
.lcd-sub { margin-top: 4px; font-size: .72rem; color: var(--lcd-green); text-shadow: 0 0 6px rgba(125,255,138,.6); min-height: 1em; }
.slot-lcd.win .lcd-main { color: var(--lcd-green); text-shadow: 0 0 6px rgba(125,255,138,.8); }
.slot-lcd.tilt .lcd-main { color: #ff4d5e; text-shadow: 0 0 6px rgba(255,77,94,.8); }
.slot-lcd.blink .lcd-main { animation: lcd-blink .5s steps(1) 6; }
@keyframes lcd-blink { 50% { opacity: .2; } }

/* Win breakdown chips */
.breakdown { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.breakdown:empty { display: none; }
.bd-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 999px; cursor: default;
  font-size: .76rem; font-weight: 600; background: rgba(0,0,0,.45); border: 1px solid rgba(245,197,66,.35);
}
.bd-item:hover, .bd-item:focus-visible { background: rgba(245,197,66,.15); }
.bd-tag { font-family: var(--sign); font-size: .7rem; letter-spacing: 1px; color: #111; background: var(--lc, var(--gold)); border-radius: 999px; padding: 2px 7px; }
.bd-combo { font-family: var(--emoji); letter-spacing: .02em; }
.bd-note { color: var(--gold-light); font-size: .7rem; }
.bd-amt { color: var(--lcd-green); font-family: var(--sign); font-weight: 400; font-size: .7rem; letter-spacing: .5px; }

/* Paytable & rules */
.paytable { margin-top: 18px; border: 1px dashed rgba(245,197,66,.35); border-radius: 12px; background: rgba(0,0,0,.25); }
.paytable summary { cursor: pointer; padding: 11px 14px; font-family: var(--sign); font-size: .74rem; letter-spacing: 1.5px; color: var(--gold); list-style: none; }
.paytable summary::-webkit-details-marker { display: none; }
.paytable summary::before { content: "▸ "; }
.paytable[open] summary::before { content: "▾ "; }
.pt-section { padding: 0 14px 14px; }
.pt-h { font-family: var(--sign); font-size: .72rem; letter-spacing: 1.5px; color: var(--gold-light); margin: 6px 0 8px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pt-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.35); }
.pt-item.special { border: 1px solid rgba(245,197,66,.45); }
.pt-sym { --sym: 44px; flex: 0 0 44px; height: 44px; border-radius: 6px; background: #fffdf6; overflow: hidden; }
.pt-pays { font-size: .74rem; color: var(--muted); line-height: 1.5; }
.pt-pays b { color: var(--cream); font-weight: 700; }
.pt-pays .nm { display: block; color: var(--gold); font-weight: 700; font-size: .72rem; }
.pt-pays .jp { color: var(--lcd-green); font-weight: 700; }
.rules { margin: 0; padding-left: 18px; color: #dfe8e1; font-size: .84rem; line-height: 1.7; }
.rules b { color: var(--gold-light); }
.lines-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; }
.pl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pl-num { font-family: var(--sign); font-size: .72rem; color: var(--lc); }
.pl-grid { display: grid; grid-template-columns: repeat(5, 8px); grid-auto-rows: 8px; gap: 2px; padding: 3px; background: #0d0306; border-radius: 4px; }
.pl-grid i { background: #2b2b2b; border-radius: 2px; }
.pl-grid i.on { background: var(--lc); box-shadow: 0 0 4px var(--lc); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.facts div { background: #0b0b05; border: 2px solid #3a2a06; border-radius: 10px; padding: 8px; text-align: center; }
.facts dt { font-size: .7rem; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.facts dd { margin: 0; font-family: var(--sign); color: var(--gold-light); }
.pt-note { margin: 10px 0 0; font-size: .76rem; color: var(--muted); }

/* Recent spins */
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px dashed rgba(245,197,66,.2); font-variant-numeric: tabular-nums; }
.history li:last-child { border-bottom: 0; }
.h-line { font-family: var(--emoji); letter-spacing: .05em; flex: 1; min-width: 0; }
.h-kind { color: var(--muted); font-size: .76rem; }
.h-amt { font-family: var(--sign); font-size: .82rem; color: var(--muted); min-width: 5em; text-align: right; }
.history .is-win .h-amt { color: var(--lcd-green); }
.history .is-big .h-amt { color: var(--gold-light); text-shadow: 0 0 8px rgba(245,197,66,.8); }
.history-empty { color: var(--muted); }

/* ── Per-game cabinet skins (Fruit Orchard uses the default casino red) ── */
.theme-deepsea {
  --topper-a: #1683c9; --topper-b: #0a2f55; --cab-a: #06263b; --cab-b: #020c16; --cab-ring: #062a44;
  --cab-glow: rgba(46, 197, 255, .25);
  --reel-bg: linear-gradient(180deg, #b6d5e3 0%, #f2fbff 16%, #f2fbff 84%, #b6d5e3 100%);
}
.theme-cosmic {
  --topper-a: #8a46f0; --topper-b: #2e1065; --cab-a: #1f0b3a; --cab-b: #0a0418; --cab-ring: #2a0f52;
  --cab-glow: rgba(179, 136, 255, .3);
  --reel-bg: linear-gradient(180deg, #c9bfe0 0%, #f6f2ff 16%, #f6f2ff 84%, #c9bfe0 100%);
}


/* ═══════════════════════ Features, bonus games & themed worlds ═══════════════════════ */

/* Feature bar under the topper */
.feature-bar { list-style: none; margin: -4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.feature-bar li {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--sign); font-size: .7rem; letter-spacing: 1px; color: var(--gold-light);
  background: rgba(0,0,0,.45); border: 1px solid rgba(245,197,66,.45);
}
.feature-bar .e { font-family: var(--emoji); font-size: .85rem; letter-spacing: 0; }

/* Bonus symbol label */
.symbol.bonus .g { filter: drop-shadow(0 0 6px rgba(125,255,138,.9)); }
.symbol.bonus::after {
  content: "BONUS"; position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--sign); font-size: calc(var(--sym) * .12); letter-spacing: .5px; line-height: 1.25; white-space: nowrap;
  color: #062a14; background: linear-gradient(90deg, #b6ffbd, #38d16a); border-radius: 4px; padding: 0 4px;
}

/* Sticky wilds overlay (Lucky Respin / sticky free spins) */
.sticky-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sticky-cell { position: absolute; display: flex; align-items: center; justify-content: center; }
.sticky-cell .symbol { width: 100%; height: 100%; border-radius: 8px; background: radial-gradient(circle, rgba(255,231,154,.85), rgba(245,197,66,.35) 70%); box-shadow: inset 0 0 0 3px var(--gold), 0 0 16px rgba(245,197,66,.9); animation: sticky-glow .6s ease-in-out infinite alternate; }
@keyframes sticky-glow { to { box-shadow: inset 0 0 0 3px #fff, 0 0 26px rgba(255,231,154,1); } }

/* Reel toast (feature call-outs) */
.reel-toast {
  position: absolute; left: 50%; top: 10px; z-index: 6; transform: translate(-50%, -10px) scale(.8); opacity: 0; pointer-events: none;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis;
  font-family: var(--sign); font-size: .78rem; letter-spacing: 1px; color: #2a1c02;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 20px rgba(245,197,66,.6);
  transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.reel-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Expanding wild */
.reel.expanded { box-shadow: 0 0 0 3px var(--gold-light), 0 0 26px 6px rgba(245,197,66,.8), inset 0 0 22px rgba(46,197,255,.6); }
.reel.expanded .reel-strip { background: linear-gradient(180deg, rgba(46,197,255,.25), rgba(255,231,154,.45), rgba(46,197,255,.25)); }
.symbol.grow .g { animation: grow-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.symbol.grow:nth-child(2) .g { animation-delay: .08s; }
.symbol.grow:nth-child(4) .g { animation-delay: .16s; }
@keyframes grow-in { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* Multiplier wild badge */
.symbol.has-mult::after { display: none; }
.wmult {
  position: absolute; right: 6%; top: 6%; z-index: 4; padding: 0 5px; border-radius: 6px; line-height: 1.3;
  font-family: var(--sign); font-size: calc(var(--sym) * .2); color: #fff; background: linear-gradient(180deg, #ff4d5e, #b0102a);
  box-shadow: 0 0 0 2px var(--gold-light), 0 0 12px rgba(255,77,94,.9); animation: badge-pop .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes badge-pop { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }


/* Bonus stage (covers the whole cabinet) */
.bonus-stage {
  position: absolute; inset: 0; z-index: 20; border-radius: 23px 23px 16px 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,231,154,.18), transparent 60%), linear-gradient(180deg, var(--cab-a), var(--cab-b));
  border: 3px solid var(--gold); animation: stage-in .45s cubic-bezier(.2, 1.4, .4, 1);
}
.bonus-stage[hidden] { display: none; }
@keyframes stage-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.bs-head { text-align: center; }
.bs-title { font-family: var(--sign); font-size: clamp(1.2rem, 4.6vw, 1.9rem); letter-spacing: 2px; color: var(--gold-light); text-shadow: 0 2px 0 var(--gold-dark), 0 0 18px rgba(245,197,66,.7); }
.bs-sub { margin-top: 4px; min-height: 2.6em; font-family: "Courier New", monospace; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; color: var(--lcd-green); text-shadow: 0 0 6px rgba(125,255,138,.6); }
.bs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bs-total { font-family: var(--sign); color: var(--gold-light); font-size: 1rem; }

/* Pick bonus */
.pick-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: center; }
.pick-tile {
  aspect-ratio: 1; min-height: 0; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--emoji); font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1;
  background: radial-gradient(circle at 50% 35%, #fff6dc, #e9c98b 70%, #b98a3c); border: 3px solid var(--gold-dark);
  box-shadow: 0 4px 0 #5c4410, 0 8px 14px rgba(0,0,0,.4); transition: transform .15s;
}
.pick-tile:hover:not(:disabled) { transform: translateY(-3px) rotate(-2deg); }
.pick-tile:disabled { cursor: default; }
.pick-tile small { font-family: var(--sign); font-size: clamp(.6rem, 2vw, .8rem); color: #2a1c02; margin-top: 2px; }
.pick-tile.open { animation: flip .35s ease; background: radial-gradient(circle at 50% 35%, #fffef6, #fff1c4 70%, #f5c542); }
.pick-tile.worm { background: radial-gradient(circle, #ffd0d6, #ff8a96); border-color: var(--red); }
.pick-tile.ghost { opacity: .4; animation: none; }
@keyframes flip { 0% { transform: rotateY(90deg); } 100% { transform: none; } }

/* Wheel bonus */
.wheel-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: relative; }
.wheel { width: min(320px, 78%); height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.wheel-pointer { position: relative; z-index: 2; margin-bottom: -22px; font-size: 1.8rem; color: var(--red); text-shadow: 0 0 0 #fff, 0 2px 0 var(--gold-deep), 0 0 12px rgba(215,38,61,.8); }
.wheel-txt { font-family: "Bungee", sans-serif; font-size: 10px; fill: #fff6dc; text-anchor: middle; dominant-baseline: middle; }
.wheel-txt.big { fill: #2a1c02; }
.wheel-hub { font-family: var(--emoji); font-size: 16px; text-anchor: middle; }
.wheel .win-seg { fill: #7dff8a; animation: seg-flash .4s steps(1) 6; }
@keyframes seg-flash { 50% { fill: #fff; } }

/* Ladder bonus */
.ladder-wrap { flex: 1; display: flex; gap: 14px; align-items: stretch; min-height: 0; }
.ladder { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ladder li {
  flex: 1; display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: 8px; padding: 2px 10px; border-radius: 8px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(179,136,255,.35); font-variant-numeric: tabular-nums; transition: background .3s, transform .3s;
}
.lv-n { font-family: var(--sign); font-size: .7rem; color: var(--muted); }
.lv-v { font-family: var(--sign); color: var(--gold-light); }
.lv-s { font-size: .72rem; color: var(--muted); }
.ladder li.past { background: rgba(125,255,138,.12); border-color: rgba(125,255,138,.4); }
.ladder li.on { background: linear-gradient(90deg, #8a46f0, #2ec5ff); border-color: #fff; transform: scale(1.03); box-shadow: 0 0 18px rgba(179,136,255,.9); }
.ladder li.on .lv-n, .ladder li.on .lv-s { color: #fff; }
.ladder.fail li.on { background: linear-gradient(90deg, #7a0d17, #d7263d); animation: machine-shake .45s ease-in-out 1; }
.ladder-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.rocket { font-family: var(--emoji); font-size: 3rem; transform: rotate(-45deg); transition: transform .3s; }
.rocket.boost { animation: boost .15s linear infinite; filter: drop-shadow(0 12px 10px rgba(255,140,0,.9)); }
.rocket.fail { transform: rotate(135deg); opacity: .5; }
@keyframes boost { 50% { transform: rotate(-45deg) translate(2px, -2px); } }

/* ── Themed worlds (game pages) ── */
body.theme-orchard {
  background-color: #142c10;
  background-image:
    radial-gradient(circle at 82% 6%, rgba(255,214,102,.55), rgba(255,180,60,.15) 18%, transparent 34%),
    radial-gradient(ellipse 120% 40% at 30% 100%, #2f5c1f 0%, transparent 60%),
    radial-gradient(ellipse 100% 35% at 85% 100%, #3a6d24 0%, transparent 60%),
    linear-gradient(180deg, #5d7f2c 0%, #33591c 40%, #142c10 100%);
}
body.theme-deepsea {
  background-color: #021526;
  background-image:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(140,220,255,.25), transparent 70%),
    linear-gradient(180deg, #0b5a85 0%, #063256 38%, #031a2f 70%, #010b15 100%);
}
body.theme-deepsea::after { /* light shafts from the surface */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(105deg, rgba(200,240,255,.05) 0 50px, transparent 50px 140px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%);
  animation: shafts 14s ease-in-out infinite alternate;
}
@keyframes shafts { to { transform: translateX(60px); } }
body.theme-cosmic {
  background-color: #050210;
  background-image:
    radial-gradient(ellipse at 18% 22%, rgba(138,70,240,.38), transparent 45%),
    radial-gradient(ellipse at 85% 65%, rgba(46,197,255,.18), transparent 45%),
    radial-gradient(ellipse at 60% 105%, rgba(255,90,200,.15), transparent 40%),
    linear-gradient(180deg, #0a0418 0%, #050210 100%);
}
.theme-orchard .panel, .theme-deepsea .panel, .theme-cosmic .panel { background: rgba(6, 14, 10, .78); }
.theme-deepsea .panel { background: rgba(2, 16, 28, .8); border-color: rgba(140, 220, 255, .4); }
.theme-cosmic .panel { background: rgba(10, 4, 24, .8); border-color: rgba(179, 136, 255, .45); }
.theme-deepsea .reels-window { border-color: #b08d57; box-shadow: inset 0 8px 18px rgba(0,0,0,.9), 0 0 0 2px #000, 0 0 30px rgba(46,197,255,.25); }
.theme-cosmic .reels-window { border-color: #8a46f0; box-shadow: inset 0 8px 18px rgba(0,0,0,.9), 0 0 0 2px #000, 0 0 30px rgba(179,136,255,.45); }
.theme-orchard .reels-window { border-color: #6b8e23; box-shadow: inset 0 8px 18px rgba(0,0,0,.9), 0 0 0 2px #000, 0 0 26px rgba(255,214,102,.3); }

@media (max-width: 420px) {
  .bonus-stage { padding: 14px 10px 12px; }
  .pick-grid { gap: 8px; grid-template-columns: repeat(3, 1fr); padding: 0 6px; }
  .ladder li { grid-template-columns: 1.6em 1fr auto; padding: 1px 6px; }
  .rocket { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cell .symbol, .symbol.grow .g, .wmult, .bonus-stage, .pick-tile.open, .rocket.boost, body.theme-deepsea::after { animation: none; }
}
.gc-feats { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .84rem; color: #dfe8e1; }
.gc-feats b { color: var(--gold-light); font-weight: 600; }


/* ═══════════════════════ Machines: shared parts ═══════════════════════ */
.machine-stage { display: flex; justify-content: center; margin: 4px 0 8px; }
.machine { --sym: 84px; position: relative; width: 100%; max-width: 700px; }
.machine.shake { animation: machine-shake .45s ease-in-out 2; }
@keyframes machine-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-5px, 2px) rotate(-.4deg); }
  40% { transform: translate(5px, -2px) rotate(.4deg); }
  60% { transform: translate(-4px, 1px); }
  80% { transform: translate(4px, -1px); }
}
.m-title { margin: 0; font-family: var(--sign); font-size: clamp(1.15rem, 4.4vw, 2rem); letter-spacing: 2px; line-height: 1.05; }
.feature-bar .e { font-family: var(--emoji); letter-spacing: 0; }
/* Machine corner buttons: sound in the top-left corner, full screen in the top-right. */
.m-tools { position: absolute; z-index: 8; display: flex; justify-content: space-between; pointer-events: none; }
.m-tools .m-tool { pointer-events: auto; }
.m-tool {
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-light);
  font-size: .95rem; line-height: 1; cursor: pointer; border-radius: 50%; background: rgba(0,0,0,.4); border: 1px solid rgba(245,197,66,.6);
}
.m-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-tool[hidden] { display: none; }
.m-tool:hover { background: rgba(245,197,66,.25); }
.sound-toggle[aria-pressed="true"] { opacity: .6; }

/* Feature strip + free-spins sign share one fixed slot (no layout shift). */
.sign-slot { position: relative; margin: 0 0 12px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.sign-slot .feature-bar { margin: 0; }
.fs-sign {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 4px 14px;
  padding: 6px 10px; border-radius: 10px; background: #0b0b05; border: 2px solid var(--gold);
  box-shadow: 0 0 18px rgba(245,197,66,.5), inset 0 0 10px #000;
  font-family: var(--sign); font-size: .8rem; letter-spacing: 1.5px; color: var(--gold-light); animation: fs-glow 1s ease-in-out infinite alternate;
}
.fs-sign[hidden] { display: none; }
.fs-sign .e { font-family: var(--emoji); }
.fs-sign .mult { background: var(--red); color: #fff; padding: 1px 8px; border-radius: 999px; }
@keyframes fs-glow { to { box-shadow: 0 0 28px rgba(245,197,66,.9), inset 0 0 10px #000; } }

/* Display: fixed number of lines so nothing below it ever moves. */
.slot-lcd { display: flex; align-items: center; gap: 10px; min-height: 0; margin-top: 14px; }
.lcd-text { flex: 1; min-width: 0; }
.lcd-main, .lcd-sub { line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.lcd-main { min-height: 2.7em; max-height: 2.7em; -webkit-line-clamp: 2; line-clamp: 2; }
.lcd-sub { min-height: 1.35em; max-height: 1.35em; -webkit-line-clamp: 1; line-clamp: 1; }

/* Readouts (WIN / BALANCE) */
.m-readout { text-align: center; min-width: 0; }
.ro-label { font-size: .7rem; font-weight: 700; letter-spacing: 2px; }
.ro-value { font-family: var(--sign); font-size: 1.25rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-value.counting { color: var(--lcd-green) !important; text-shadow: 0 0 10px rgba(125,255,138,.9) !important; }
.ro-unit { font-size: .7rem; letter-spacing: 1.5px; opacity: .8; }

.breakdown { margin: 14px 0 0; }
.m-hint { text-align: center; font-size: .8rem; margin: 12px 0 0; line-height: 1.6; opacity: .85; }
.m-util { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.machine button:focus-visible, .machine input:focus-visible, .ds-dial:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.machine input[type="number"] { -moz-appearance: textfield; }
.machine input[type="number"]::-webkit-inner-spin-button, .machine input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══════════════════════ 🍒 Fruit Orchard: wooden fruit stand + SPIN button ═══════════════════════ */
.m-orchard { max-width: 680px; color: #fff1d6; }
.or-awning {
  position: relative; z-index: 2; height: 54px; margin: 10px -10px 0; border-radius: 8px 8px 0 0;
  background: repeating-linear-gradient(90deg, #d7263d 0 40px, #fff6dc 40px 80px);
  box-shadow: inset 0 -10px 14px rgba(0,0,0,.22);
}
.or-awning::before { /* wooden beam */
  content: ""; position: absolute; left: -6px; right: -6px; top: -12px; height: 14px; border-radius: 7px;
  background: linear-gradient(180deg, #a86b32, #5b3412); box-shadow: 0 3px 6px rgba(0,0,0,.4);
}
.or-awning::after { /* scalloped edge */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
  background:
    radial-gradient(circle at 20px 0, #d7263d 19px, transparent 20px) 0 0 / 80px 20px repeat-x,
    radial-gradient(circle at 60px 0, #fff6dc 19px, transparent 20px) 0 0 / 80px 20px repeat-x;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.3));
}
.or-bulbs { /* string lights on the beam */
  position: absolute; left: 6px; right: 6px; top: -9px; height: 9px; z-index: 1;
}
.or-bulbs::before, .or-bulbs::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, #ffe79a 0 3px, transparent 4px) 0 50% / 22px 9px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255,231,154,.95)); animation: chase .9s steps(1) infinite;
}
.or-bulbs::after { background-position: 11px 50%; animation-delay: .45s; }
@keyframes chase { 50% { opacity: 0; } }
.m-orchard.celebrate .or-bulbs::before, .m-orchard.celebrate .or-bulbs::after { animation-duration: .2s; }
.m-orchard.celebrate .or-bulbs::after { animation-delay: .1s; }

.or-sign {
  position: relative; z-index: 3; width: fit-content; max-width: calc(100% - 40px); margin: 4px auto -16px; padding: 12px 24px 10px; text-align: center;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 9px), linear-gradient(180deg, #c3843f, #8a5527);
  border: 3px solid #5b3412; border-radius: 10px; box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25);
  transform: rotate(-1.2deg);
}
.or-sign .m-title { color: #fff6dc; text-shadow: 0 2px 0 #5b3412, 0 0 14px rgba(255,214,102,.6); }
.or-sign .m-title span { color: #ffd166; }
.or-sign .m-sub { color: #fff1d6; }

.or-crate {
  position: relative; padding: 34px 18px 18px; border-radius: 0 0 18px 18px;
  background:
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(0,0,0,.35) 46px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #b07138, #8a5527 60%, #6e421c);
  border: 6px solid #5b3412; border-top: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,214,102,.12);
}
.m-orchard.in-feature .or-crate { box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 60px rgba(255,214,102,.65), inset 0 0 0 2px rgba(255,214,102,.4); }
.m-orchard .m-tools { top: 18px; left: 4px; right: 4px; }
.m-orchard .m-tool { background: #5b3412; border-color: #ffd166; color: #ffd166; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.or-window { padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #6e421c, #4a2a10); box-shadow: inset 0 3px 8px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.15); }
.m-orchard .reels-window { border-color: #3b2109; background: #2b1606; }
.m-orchard .slot-lcd { /* chalkboard */
  padding: 9px 14px; border-radius: 6px; text-align: center;
  background: radial-gradient(ellipse at 30% 30%, #34483b, #1d2b22); border: 7px solid #8a5527;
  box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 3px 0 #5b3412;
  font-family: "Chalkboard SE", "Comic Sans MS", "Segoe Print", var(--body); font-weight: 700; letter-spacing: .5px;
}
.m-orchard .lcd-main { font-size: .95rem; color: #f6f3e8; text-shadow: 0 0 1px #fff, 0 0 6px rgba(255,255,255,.25); }
.m-orchard .lcd-sub { font-size: .76rem; color: #ffd166; }
.m-orchard .slot-lcd.win .lcd-main { color: #c8ffb0; }
.m-orchard .slot-lcd.tilt .lcd-main { color: #ffb3bb; }
.m-orchard .slot-lcd.blink .lcd-main { animation: lcd-blink .5s steps(1) 6; }

.or-deck {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch; margin-top: 14px; padding: 14px;
  border-radius: 12px; background: linear-gradient(180deg, #6e421c, #4a2a10); box-shadow: inset 0 3px 8px rgba(0,0,0,.5);
}
.or-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.or-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-orchard .m-readout { padding: 6px; border-radius: 6px; background: radial-gradient(ellipse at 30% 30%, #34483b, #1d2b22); border: 4px solid #8a5527; }
.m-orchard .ro-label { color: #ffd166; }
.m-orchard .ro-value { color: #f6f3e8; }
.m-orchard .ro-unit { color: #e9d6b0; }
.or-betbox { padding: 10px; border-radius: 10px; background: rgba(0,0,0,.22); }
.or-label { display: block; margin-bottom: 8px; font-family: var(--sign); font-size: .72rem; letter-spacing: 1.5px; color: #ffd166; }
.or-label small { font-family: var(--body); font-size: .72rem; letter-spacing: 0; color: #e9d6b0; }
.or-stepper { display: flex; gap: 8px; align-items: center; }
.or-crate-btn {
  flex: none; width: 48px; height: 48px; border-radius: 8px; border: 3px solid #3b2109; cursor: pointer;
  font: 400 1.4rem var(--sign); color: #fff6dc;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 10px), linear-gradient(180deg, #c98a4b, #8a5527);
  box-shadow: 0 4px 0 #3b2109; transition: transform .08s, box-shadow .08s;
}
.or-crate-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #3b2109; }
.or-chalk {
  flex: 1; min-width: 0; height: 48px; text-align: center; font: 400 1.5rem var(--sign); color: #f6f3e8;
  background: radial-gradient(ellipse at 30% 30%, #34483b, #1d2b22); border: 4px solid #8a5527; border-radius: 6px;
}
.or-tags { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.or-tag {
  position: relative; padding: 7px 12px 7px 20px; border: none; cursor: pointer;
  font: 400 .8rem var(--sign); color: #3b2109;
  background: linear-gradient(180deg, #f6e3b8, #e2c38a);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  transform: rotate(-3deg); transition: transform .15s, background .15s;
}
.or-tag:nth-child(even) { transform: rotate(2.5deg); }
.or-tag::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #4a2a10; }
.or-tag:hover:not(:disabled) { transform: translateY(-2px) rotate(0deg); }
.or-tag.is-active { background: linear-gradient(180deg, #ffe79a, #f5c542); color: #7a0d17; transform: translateY(-2px) rotate(0deg); }
.or-tag:disabled, .or-crate-btn:disabled { opacity: .5; cursor: not-allowed; }

/* SPIN: a glossy candy-apple 3D push button in a wooden bezel (see "3D push button" below). */
.or-spin-wrap {
  position: relative; align-self: center; padding: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #b97a3c, #7a4a1f 55%, #4a2a10);
  box-shadow: inset 0 3px 3px rgba(255,222,170,.4), inset 0 -5px 9px rgba(0,0,0,.55), 0 9px 0 #3f230b, 0 16px 20px rgba(0,0,0,.55);
}
.or-spin-wrap::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(255,209,102,.8); pointer-events: none; animation: ping 2.4s ease-out infinite; }
.or-spin-wrap.busy::before, .or-spin-wrap.off::before { animation: none; opacity: 0; }
/* A ring of bulbs set into the bezel (shared, colour from --bulb): they twinkle while
   idle and chase while the reels run. */
.b3-wrap::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--bulb, #ffe79a) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 2px), transparent 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 2px), transparent 100%);
  filter: drop-shadow(0 0 3px var(--bulb, #ffe79a)); opacity: .45; animation: b3-twinkle 2.2s ease-in-out infinite;
}
.b3-wrap.busy::after { opacity: 1; animation: b3-chase .36s steps(1) infinite; }
.b3-wrap.off::after { opacity: .15; animation: none; }
.or-spin {
  --w: 136px; --h: 108px; --depth: 16px;
  --cap: radial-gradient(ellipse at 50% 26%, #ffc2c2 0%, #ff4458 26%, #c3101f 62%, #7a0b15 100%);
  --side: linear-gradient(90deg, #3d050a 0%, #8f0f1b 22%, #c0202d 50%, #8f0f1b 78%, #3d050a 100%);
  --glow: rgba(255,110,110,.95);
  font: 400 1.6rem var(--sign); letter-spacing: 2px; color: #fff8ec; text-shadow: 0 2px 0 #6e0a12, 0 0 12px rgba(255,190,190,.7);
}
.or-leaf {
  position: absolute; top: -8px; left: 57%; z-index: 2; width: 26px; height: 14px; border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #8ee06a, #2f8f2a); box-shadow: inset 0 -2px 3px rgba(0,0,0,.25); transform: rotate(-18deg); pointer-events: none;
}
.or-leaf::before { content: ""; position: absolute; left: -9px; top: 6px; width: 10px; height: 3px; border-radius: 2px; background: #6b3f17; transform: rotate(35deg); }

/* ═══════════════════════ 3D push button (shared) ═══════════════════════
   A glossy cap (.b3-cap) on a base (.b3-base), seen slightly from above: the
   base shows below the cap as the button's side wall. The cap
     · idles with a shine sweep and an occasional half press,
     · sinks fully when pressed,
     · stays half pressed and glows while the spin plays,
     · springs back when it ends.
   Per button: --w, --h (cap), --depth (side wall), --cap, --side, --glow. */
.btn3d {
  position: relative; display: block; width: var(--w); height: calc(var(--h) + var(--depth)); padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b3-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 50%;
  background: var(--side); box-shadow: 0 6px 10px rgba(0,0,0,.55), inset 0 -3px 6px rgba(0,0,0,.4);
}
.b3-cap {
  position: absolute; left: 0; right: 0; top: 0; height: var(--h); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cap); box-shadow: inset 0 -9px 14px rgba(0,0,0,.4), inset 0 6px 12px rgba(255,255,255,.45), 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(0); transition: transform .32s cubic-bezier(.3, 1.8, .5, 1), filter .2s;
}
.b3-cap::after { /* glossy highlight */
  content: ""; position: absolute; top: 7%; left: 20%; width: 60%; height: 32%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
}
.b3-shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.b3-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg);
  animation: b3-shine 3.6s ease-in-out infinite;
}
.btn3d .spin-label, .btn3d .spin-sub { position: relative; z-index: 1; }
.btn3d .spin-sub { margin-top: 2px; font: 700 .7rem var(--body); letter-spacing: 1.5px; text-shadow: none; opacity: .92; }
.spin-wrap:not(.busy):not(.off) .b3-cap { animation: b3-idle 4.2s ease-in-out infinite; }
.btn3d:hover:not(:disabled) .b3-cap { filter: brightness(1.08); }
.spin-wrap.busy .b3-cap { transform: translateY(calc(var(--depth) * .55)); animation: b3-glow .55s ease-in-out infinite alternate; }
.spin-wrap.busy .b3-shine::before { animation-duration: 1.1s; }
.btn3d.pressed .b3-cap, .btn3d:active:not(:disabled) .b3-cap { transform: translateY(calc(var(--depth) - 2px)); animation: none; transition-duration: .06s; }
.btn3d:disabled { cursor: not-allowed; }
.spin-wrap.busy .btn3d:disabled { cursor: progress; }
.spin-wrap.off .b3-cap { filter: grayscale(.8) brightness(.7); }
.spin-wrap.off .b3-shine::before { animation: none; opacity: 0; }
.btn3d:focus-visible { outline: none; }
.btn3d:focus-visible .b3-cap { outline: 3px solid var(--gold-light); outline-offset: 4px; }
@keyframes b3-idle { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(calc(var(--depth) * .5)); } 86% { transform: translateY(-1px); } }
@keyframes b3-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes b3-glow { from { filter: brightness(1.05); } to { filter: brightness(1.3) drop-shadow(0 0 14px var(--glow)); } }
@keyframes b3-twinkle { 50% { opacity: .85; } }
@keyframes b3-chase { 50% { transform: rotate(15deg); } }

/* ═══════════════════════ 🍒 Fruit Orchard in 3D ═══════════════════════
   The cabinet leans back a little (like a real machine), the control deck
   slopes toward the player, and every control is a raised or recessed part. */
.ms-orchard { perspective: 1600px; perspective-origin: 50% 25%; }
.m-orchard { rotate: x 4deg; transform-origin: 50% 100%; }
.or-crate { box-shadow: 0 14px 0 #3f230b, 0 30px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,214,102,.12); }
.m-orchard.in-feature .or-crate { box-shadow: 0 14px 0 #3f230b, 0 30px 40px rgba(0,0,0,.6), 0 0 60px rgba(255,214,102,.65), inset 0 0 0 2px rgba(255,214,102,.4); }
.or-window { border: 3px solid; border-color: #3b2109 #a8672c #c3843f #3b2109; box-shadow: inset 0 5px 12px rgba(0,0,0,.7), 0 3px 0 rgba(255,222,170,.2); }
.or-deck {
  transform: perspective(900px) rotateX(14deg); transform-origin: 50% 0;
  background: linear-gradient(180deg, #7a4a1f, #4a2a10); border: 3px solid; border-color: #a8672c #3b2109 #2a1606 #3b2109;
  box-shadow: inset 0 2px 0 rgba(255,222,170,.25), 0 10px 0 #2e1806, 0 18px 20px rgba(0,0,0,.5);
}
.m-orchard .slot-lcd { border-color: #6e421c #a8672c #c3843f #6e421c; box-shadow: inset 0 4px 16px rgba(0,0,0,.75), 0 3px 0 #5b3412; }
.m-orchard .m-readout { border-color: #5b3412 #a8672c #c3843f #5b3412; box-shadow: inset 0 4px 12px rgba(0,0,0,.7), 0 2px 0 rgba(255,222,170,.18); }
.or-chalk { border-color: #5b3412 #a8672c #c3843f #5b3412; box-shadow: inset 0 4px 10px rgba(0,0,0,.7); }
.or-betbox { box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 1px 0 rgba(255,222,170,.18); }
.or-crate-btn {
  border-color: #c98a4b #3b2109 #3b2109 #c98a4b;
  box-shadow: inset 0 2px 0 rgba(255,236,200,.4), 0 7px 0 #3b2109, 0 11px 10px rgba(0,0,0,.45);
  transform: translateY(-3px);
}
.or-crate-btn:hover:not(:disabled) { filter: brightness(1.08); }
.or-crate-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,236,200,.3), 0 0 0 #3b2109, 0 2px 4px rgba(0,0,0,.4); }
.or-tag { filter: drop-shadow(0 4px 0 #9c7a44) drop-shadow(0 7px 6px rgba(0,0,0,.35)); }
.or-tag:hover:not(:disabled) { transform: translateY(-3px) rotate(0deg); }
.or-tag:active:not(:disabled), .or-tag.is-active { transform: translateY(3px) rotate(0deg); filter: drop-shadow(0 1px 0 #9c7a44) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.m-orchard .m-tool { box-shadow: inset 0 2px 0 rgba(255,236,200,.25), 0 4px 0 #2e1806, 0 7px 8px rgba(0,0,0,.45); transform: translateY(-2px); transition: transform .08s, box-shadow .08s; }
.m-orchard .m-tool:active { transform: translateY(2px); box-shadow: 0 0 0 #2e1806, 0 2px 3px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) {
  .b3-cap, .spin-wrap:not(.busy):not(.off) .b3-cap, .spin-wrap.busy .b3-cap { animation: none !important; }
  .b3-shine::before, .b3-wrap::after { animation: none !important; }
}
.m-orchard .m-hint { color: #f3e2c0; margin-top: 22px; }   /* clears the sloped deck and its plinth */
.m-orchard .bonus-stage { border-radius: 8px 8px 18px 18px; }

/* ═══════════════════════ 🐚 Deep Sea: brass submarine + dial + DIVE ═══════════════════════ */
.m-deepsea { max-width: 700px; color: #d8f3ff; }
.ds-hull {
  position: relative; padding: 18px 20px; border-radius: 34px;
  background: radial-gradient(ellipse at 50% 0%, rgba(140,220,255,.18), transparent 60%), linear-gradient(180deg, #2f5566 0%, #173040 55%, #0b1c27 100%);
  border: 6px solid #8c6b3e; box-shadow: 0 0 0 3px #3b2a12, 0 18px 50px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.6), 0 0 60px rgba(46,197,255,.2);
}
.ds-hull::before { /* rivets */
  content: ""; position: absolute; inset: 5px; border-radius: 28px; pointer-events: none;
  background:
    radial-gradient(circle, #f0d38a 0 2.5px, #6b4e22 3px, transparent 3.5px) 0 0 / 26px 12px repeat-x,
    radial-gradient(circle, #f0d38a 0 2.5px, #6b4e22 3px, transparent 3.5px) 0 100% / 26px 12px repeat-x;
  opacity: .85;
}
.m-deepsea.in-feature .ds-hull { box-shadow: 0 0 0 3px #3b2a12, 0 18px 50px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.6), 0 0 90px rgba(46,197,255,.7); }
.m-deepsea .m-tools { top: 18px; left: 22px; right: 22px; }
.m-deepsea .m-tool { background: #0b2230; border-color: #f0d38a; color: #f0d38a; }
.ds-plate {
  position: relative; width: fit-content; max-width: calc(100% - 80px); margin: 4px auto 14px; padding: 10px 34px; text-align: center; border-radius: 10px;
  background: linear-gradient(180deg, #f6dd9b, #c99a3e 50%, #a87a12); box-shadow: 0 4px 0 #5c4410, 0 8px 16px rgba(0,0,0,.4), inset 0 1px 0 #fff6dc;
}
.ds-plate::before, .ds-plate::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle, #7a5a20 30%, #e8c78a 38%, #7a5a20 72%);
}
.ds-plate::before { left: 11px; }
.ds-plate::after { right: 11px; }
.ds-plate .m-title { color: #2a1c02; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.ds-plate .m-title span { color: #0a5a8a; }
.ds-plate .m-sub { color: #3b2a0a; }
.m-deepsea .feature-bar li { background: rgba(2,26,40,.7); border-color: rgba(240,211,138,.6); color: #f0d38a; }
.ds-porthole {
  position: relative; padding: 14px; border-radius: 40px;
  background: linear-gradient(145deg, #f0d38a, #a87a12 45%, #6b4e22 70%, #d9b56a);
  box-shadow: 0 6px 16px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.5);
}
.ds-bolts {
  position: absolute; inset: 2px 30px; pointer-events: none;
  background:
    radial-gradient(circle, #fff1c4 0 2px, #6b4e22 2.5px, transparent 3px) 0 0 / 40px 10px repeat-x,
    radial-gradient(circle, #fff1c4 0 2px, #6b4e22 2.5px, transparent 3px) 0 100% / 40px 10px repeat-x;
}
.m-deepsea .reels-window { border-radius: 28px; border: 3px solid #3b2a12; background: #021018; }
.m-deepsea .reels-window::after { border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 28%), linear-gradient(180deg, rgba(46,197,255,.1), rgba(0,0,0,.28)); }
.m-deepsea .reel:first-child { border-radius: 20px 6px 6px 20px; }
.m-deepsea .reel:nth-child(5) { border-radius: 6px 20px 20px 6px; }
.m-deepsea.celebrate .ds-porthole { animation: porthole-glow .4s ease-in-out infinite alternate; }
@keyframes porthole-glow { to { box-shadow: 0 0 30px 6px rgba(46,197,255,.9), inset 0 2px 2px rgba(255,255,255,.5); } }

.m-deepsea .slot-lcd { /* sonar screen */
  position: relative; overflow: hidden; padding: 8px 12px; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 50%, #05392a, #021a12); border: 4px solid #8c6b3e; box-shadow: inset 0 0 16px #000, 0 2px 0 #3b2a12;
  font-family: "Courier New", monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center;
}
.m-deepsea .slot-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.m-deepsea .lcd-main { font-size: .86rem; color: var(--lcd-green); text-shadow: 0 0 6px rgba(125,255,138,.8); }
.m-deepsea .lcd-sub { font-size: .7rem; color: #5fdcff; text-shadow: 0 0 6px rgba(46,197,255,.6); }
.m-deepsea .slot-lcd.tilt .lcd-main { color: #ff6b7a; text-shadow: 0 0 6px rgba(255,77,94,.8); }
.m-deepsea .slot-lcd.blink .lcd-main { animation: lcd-blink .5s steps(1) 6; }
.ds-sonar {
  flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, transparent 0 30%, rgba(125,255,138,.3) 31% 33%, transparent 34% 62%, rgba(125,255,138,.3) 63% 65%, transparent 66%), #031f14;
  border: 2px solid rgba(125,255,138,.55);
}
.ds-sonar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(125,255,138,.65), transparent 28%); animation: sweep 2.4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }

.ds-console {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "dial dive gauges"; align-items: center; gap: 14px;
  margin-top: 14px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, #203f4f, #0d2230);
  border: 3px solid #6b4e22; box-shadow: inset 0 3px 10px rgba(0,0,0,.6);
}
.ds-dialbox { grid-area: dial; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ds-dial {
  --dial-r: 56px;
  position: relative; width: 164px; height: 164px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none;
  background:
    radial-gradient(circle, #0b2230 0 75%, transparent 76% 83%, #0b2230 84%),
    conic-gradient(from -135deg, #2ec5ff 0deg, #7dff8a 135deg, #ffd166 270deg, transparent 270deg);
  box-shadow: 0 0 0 6px #b08d57, 0 0 0 9px #6b4e22, 0 6px 16px rgba(0,0,0,.6), inset 0 0 14px #000;
}
.ds-dial.turning { cursor: grabbing; }
.ds-dial[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.ds-tick {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 26px; margin: -13px 0 0 -17px; padding: 0; border: none; background: none; cursor: pointer;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--dial-r))) rotate(calc(-1 * var(--a)));
  font: 400 .7rem var(--sign); color: #9fdcf5;
}
.ds-tick.is-active span { color: #ffd166; text-shadow: 0 0 6px #ffd166; }
.ds-tick:disabled { cursor: not-allowed; }
.ds-knob {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(0,0,0,.12) 0 6deg, transparent 6deg 12deg), radial-gradient(circle at 40% 35%, #f6dd9b, #a87a12 60%, #5c4410);
  box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.5);
  transform: rotate(var(--dial, 0deg)); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.ds-knob::before { content: ""; position: absolute; left: 50%; top: 3px; width: 6px; height: 15px; margin-left: -3px; border-radius: 3px; background: #ff4d5e; box-shadow: 0 0 6px #ff4d5e; }
.ds-dial-center { position: absolute; left: 50%; top: 50%; width: 56px; margin: -17px 0 0 -28px; text-align: center; pointer-events: none; }
.ds-input {
  pointer-events: auto; width: 56px; height: 24px; padding: 0; text-align: center; font: 400 .85rem var(--sign); color: var(--lcd-green);
  background: #021a12; border: 2px solid #6b4e22; border-radius: 6px;
}
.ds-dial-center span { display: block; margin-top: 1px; font-size: .7rem; font-weight: 800; letter-spacing: 1.5px; color: #2a1c02; }
.ds-dial-btns { display: flex; align-items: center; gap: 10px; }
.ds-dial-btns span { font-size: .7rem; font-weight: 700; letter-spacing: 2px; color: #9fdcf5; white-space: nowrap; }
.ds-dial-btns button {
  width: 40px; height: 32px; border: none; border-radius: 8px; cursor: pointer; font: 400 .85rem var(--sign); color: #2a1c02;
  background: linear-gradient(180deg, #f6dd9b, #a87a12); box-shadow: 0 3px 0 #5c4410;
}
.ds-dial-btns button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #5c4410; }
.ds-dial-btns button:disabled { opacity: .5; cursor: not-allowed; }

.ds-dive-wrap {
  grid-area: dive; justify-self: center; position: relative; padding: 12px; border-radius: 50%; --bulb: #7ff3ff;
  background: conic-gradient(from 200deg, #f6dd9b, #6b4e22, #e8c78a, #5c4410, #f6dd9b);
  box-shadow: inset 0 3px 3px rgba(255,246,220,.5), inset 0 -5px 9px rgba(0,0,0,.5), 0 9px 0 #4a3510, 0 16px 20px rgba(0,0,0,.6);
}
.ds-dive-wrap::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(46,197,255,.8); pointer-events: none; animation: ping 2.4s ease-out infinite; }
.ds-dive-wrap.busy::before, .ds-dive-wrap.off::before { animation: none; opacity: 0; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
/* DIVE: a glossy sea-blue 3D push button (see "3D push button"). */
.ds-dive {
  --w: 128px; --h: 102px; --depth: 15px;
  --cap: radial-gradient(ellipse at 50% 26%, #d6fbff 0%, #48d4ff 26%, #0a6aa0 62%, #04304d 100%);
  --side: linear-gradient(90deg, #021624 0%, #063a5c 22%, #0a5a8a 50%, #063a5c 78%, #021624 100%);
  --glow: rgba(90,220,255,.95);
  font: 400 1.5rem var(--sign); letter-spacing: 2px; color: #eaffff; text-shadow: 0 2px 0 #03263d, 0 0 12px rgba(160,240,255,.8);
}
.ds-gauges { grid-area: gauges; display: flex; flex-direction: column; gap: 10px; }
.m-deepsea .m-readout { padding: 6px 8px; border-radius: 12px; background: #021a12; border: 3px solid #b08d57; box-shadow: inset 0 0 10px #000; }
.m-deepsea .ro-label { color: #f0d38a; }
.m-deepsea .ro-value { color: var(--lcd-green); text-shadow: 0 0 8px rgba(125,255,138,.6); }
.m-deepsea .ro-unit { color: #6fb9d6; }
.m-deepsea .m-hint { color: #a8d8ea; }
.m-deepsea .bonus-stage { border-radius: 30px; }

/* ═══════════════════════ 🐚 Deep Sea in 3D ═══════════════════════
   The hull leans back, the console slopes toward the player, the brass keys
   are raised and the screens are recessed. */
.ms-deepsea { perspective: 1600px; perspective-origin: 50% 25%; }
.m-deepsea { rotate: x 4deg; transform-origin: 50% 100%; }
.ds-hull { box-shadow: 0 0 0 3px #3b2a12, 0 14px 0 #2a1d0b, 0 30px 46px rgba(0,0,0,.65), inset 0 0 30px rgba(0,0,0,.6), 0 0 60px rgba(46,197,255,.2); }
.m-deepsea.in-feature .ds-hull { box-shadow: 0 0 0 3px #3b2a12, 0 14px 0 #2a1d0b, 0 30px 46px rgba(0,0,0,.65), inset 0 0 30px rgba(0,0,0,.6), 0 0 90px rgba(46,197,255,.7); }
.ds-plate { box-shadow: 0 6px 0 #5c4410, 0 12px 16px rgba(0,0,0,.45), inset 0 1px 0 #fff6dc; }
.ds-porthole { box-shadow: 0 8px 0 #4a3510, 0 14px 20px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.5); }
.ds-console {
  transform: perspective(900px) rotateX(14deg); transform-origin: 50% 0;
  border-color: #b08d57 #4a3510 #3b2a12 #4a3510;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(240,211,138,.35), 0 10px 0 #2a1d0b, 0 18px 22px rgba(0,0,0,.55);
}
.m-deepsea .slot-lcd { border-color: #5c4410 #b08d57 #d9b56a #5c4410; box-shadow: inset 0 4px 16px #000, 0 3px 0 #3b2a12; }
.m-deepsea .m-readout { border-color: #6b4e22 #c9a46a #e8c78a #6b4e22; box-shadow: inset 0 4px 12px #000, 0 2px 0 rgba(240,211,138,.2); }
.ds-input { border-color: #3b2a12 #b08d57 #c9a46a #3b2a12; box-shadow: inset 0 2px 6px rgba(0,0,0,.8); }
.ds-dial { box-shadow: 0 0 0 6px #b08d57, 0 0 0 9px #6b4e22, 0 9px 0 3px #3b2a12, 0 14px 20px rgba(0,0,0,.6), inset 0 0 16px #000; }
.ds-knob {
  box-shadow: 0 6px 0 #5c4410, 0 10px 14px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.35);
  translate: 0 -4px;
}
.ds-dial.turning .ds-knob { translate: 0 -1px; box-shadow: 0 3px 0 #5c4410, 0 5px 8px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.5); }
.ds-dial-btns button {
  box-shadow: inset 0 2px 0 rgba(255,246,220,.6), 0 6px 0 #5c4410, 0 10px 10px rgba(0,0,0,.45);
  transform: translateY(-3px); transition: transform .08s, box-shadow .08s;
}
.ds-dial-btns button:hover:not(:disabled) { filter: brightness(1.08); }
.ds-dial-btns button:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,246,220,.4), 0 0 0 #5c4410, 0 2px 4px rgba(0,0,0,.4); }
.m-deepsea .m-tool { box-shadow: inset 0 2px 0 rgba(240,211,138,.3), 0 4px 0 #3b2a12, 0 7px 8px rgba(0,0,0,.5); transform: translateY(-2px); transition: transform .08s, box-shadow .08s; }
.m-deepsea .m-tool:active { transform: translateY(2px); box-shadow: 0 0 0 #3b2a12, 0 2px 3px rgba(0,0,0,.4); }
.m-deepsea .m-hint { margin-top: 22px; }   /* clears the sloped console and its plinth */

/* ═══════════════════════ 🌙 Cosmic: starship cockpit + throttle + LAUNCH ═══════════════════════ */
.m-cosmic { max-width: 720px; color: #e0eaff; filter: drop-shadow(0 0 22px rgba(138,70,240,.45)) drop-shadow(0 18px 28px rgba(0,0,0,.6)); }
.m-cosmic.in-feature { filter: drop-shadow(0 0 32px rgba(255,214,102,.7)) drop-shadow(0 18px 28px rgba(0,0,0,.6)); }
.m-cosmic { --cut: 26px; }
.cx-hull {
  position: relative; padding: 20px 22px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(46,197,255,.07) 1px, transparent 1px) 0 0 / 100% 24px padding-box,
    linear-gradient(90deg, rgba(46,197,255,.07) 1px, transparent 1px) 0 0 / 24px 100% padding-box,
    radial-gradient(ellipse at 50% 0%, rgba(138,70,240,.35), transparent 60%) padding-box,
    linear-gradient(180deg, #120a2e, #07041a) padding-box,
    linear-gradient(135deg, #b388ff, #2ec5ff 50%, #ff5ac8) border-box;
}
.m-cosmic .m-tools { top: 18px; left: 30px; right: 30px; }
.m-cosmic .m-tool { background: rgba(46,197,255,.12); border-color: #2ec5ff; color: #9ff0ff; }
.cx-head { margin: 0 44px 12px; text-align: center; }
.m-cosmic .m-title {
  background: linear-gradient(90deg, #9ff0ff, #e0c3ff, #ff9ae6, #9ff0ff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(179,136,255,.8)); animation: holo 6s linear infinite;
}
.m-cosmic .m-title span { color: #ffe79a; -webkit-text-fill-color: #ffe79a; }
@keyframes holo { to { background-position: 200% 0; } }
.m-cosmic .m-sub { color: #9fdcf5; letter-spacing: 3px; }
.m-cosmic .feature-bar li { background: rgba(46,197,255,.08); border-color: rgba(46,197,255,.5); color: #9ff0ff; border-radius: 4px; }
.cx-hud { position: relative; padding: 10px; }
.cx-corners {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; background-repeat: no-repeat;
  background-image:
    linear-gradient(#2ec5ff, #2ec5ff), linear-gradient(#2ec5ff, #2ec5ff), linear-gradient(#2ec5ff, #2ec5ff), linear-gradient(#2ec5ff, #2ec5ff),
    linear-gradient(#ff5ac8, #ff5ac8), linear-gradient(#ff5ac8, #ff5ac8), linear-gradient(#ff5ac8, #ff5ac8), linear-gradient(#ff5ac8, #ff5ac8);
  background-size: 28px 3px, 3px 28px, 28px 3px, 3px 28px, 28px 3px, 3px 28px, 28px 3px, 3px 28px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  filter: drop-shadow(0 0 5px #2ec5ff);
}
.m-cosmic.celebrate .cx-corners { animation: corners .3s steps(1) infinite; }
@keyframes corners { 50% { opacity: .2; } }
.m-cosmic .reels-window { border: 1px solid rgba(46,197,255,.55); border-radius: 6px; background: #05030f; }
.m-cosmic .reels-window::after { background: repeating-linear-gradient(0deg, rgba(46,197,255,.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(179,136,255,.14), transparent 30%, transparent 70%, rgba(0,0,0,.3)); }

.m-cosmic .slot-lcd { /* holographic HUD */
  padding: 9px 14px; border: 1px solid rgba(46,197,255,.6); border-radius: 0;
  background: linear-gradient(180deg, rgba(46,197,255,.08), rgba(138,70,240,.1)), #070418;
  box-shadow: 0 0 14px rgba(46,197,255,.25), inset 0 0 14px rgba(46,197,255,.15);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  font-family: "Courier New", monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; text-align: left;
}
.m-cosmic .lcd-main { font-size: .86rem; color: #9ff0ff; text-shadow: 0 0 8px rgba(46,197,255,.8); }
.m-cosmic .lcd-sub { font-size: .7rem; color: #e0c3ff; }
.m-cosmic .slot-lcd.win .lcd-main { color: #b6ffbd; text-shadow: 0 0 8px rgba(125,255,138,.8); }
.m-cosmic .slot-lcd.tilt .lcd-main { color: #ff7ab6; }
.m-cosmic .slot-lcd.blink .lcd-main { animation: lcd-blink .5s steps(1) 6; }
.cx-cursor { order: 2; flex: none; width: 10px; height: 18px; background: #9ff0ff; box-shadow: 0 0 8px #2ec5ff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cx-cockpit {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "read launch thr"; align-items: center; gap: 16px;
  margin-top: 14px; padding: 14px; border: 1px solid rgba(179,136,255,.4); background: rgba(10,4,30,.6);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.cx-readouts { grid-area: read; display: flex; flex-direction: column; gap: 10px; }
.m-cosmic .m-readout { padding: 6px 8px; border: 1px solid rgba(46,197,255,.5); background: rgba(46,197,255,.06); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.m-cosmic .ro-label { color: #9fdcf5; }
.m-cosmic .ro-value { color: #fff; text-shadow: 0 0 10px rgba(46,197,255,.9); }
.m-cosmic .ro-unit { color: #b388ff; }
/* LAUNCH: a glossy hexagonal 3D push button (see "3D push button") in a two-layer
   metal hex frame with runway lights along its top and bottom edges. */
.cx-launch-wrap {
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  grid-area: launch; justify-self: center; position: relative; padding: 13px 16px; isolation: isolate;
  filter: drop-shadow(0 0 14px rgba(255,90,200,.6)); animation: launch-glow 1.8s ease-in-out infinite alternate;
}
.cx-launch-wrap::before, .cx-launch-wrap::after { content: ""; position: absolute; clip-path: var(--hex); z-index: -1; }
.cx-launch-wrap::before { inset: 9px 0 -9px; background: linear-gradient(180deg, #2a1660, #0e0628); }   /* frame thickness */
.cx-launch-wrap::after { inset: 0; background: linear-gradient(160deg, #b9a6ff 0%, #5a3fb0 30%, #2c1a66 70%, #8a6cff 100%); }
.cx-launch-wrap.busy, .cx-launch-wrap.off { animation: none; filter: drop-shadow(0 0 6px rgba(255,90,200,.35)); }
@keyframes launch-glow { to { filter: drop-shadow(0 0 28px rgba(255,90,200,1)); } }
.cx-lights {
  position: absolute; inset: 2px 0; z-index: 0; clip-path: var(--hex); pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #9ff0ff 0 7px, transparent 7px 17px) 0 0 / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #9ff0ff 0 7px, transparent 7px 17px) 0 100% / 100% 4px no-repeat;
  filter: drop-shadow(0 0 3px #2ec5ff); opacity: .5; animation: b3-twinkle 2.2s ease-in-out infinite;
}
.cx-launch-wrap.busy .cx-lights { opacity: 1; animation: cx-runway .3s steps(1) infinite; }
.cx-launch-wrap.off .cx-lights { opacity: .15; animation: none; }
@keyframes cx-runway { 50% { background-position: 9px 0, 9px 100%; } }
.cx-launch {
  --w: 136px; --h: 100px; --depth: 14px;
  --cap: radial-gradient(ellipse at 50% 26%, #ffd6f6 0%, #ff5ac8 30%, #8a46f0 70%, #3b1478 100%);
  --side: linear-gradient(90deg, #1c0942 0%, #4a1a8f 25%, #6a2ab8 50%, #4a1a8f 75%, #1c0942 100%);
  --glow: rgba(255,120,220,.95);
  z-index: 1; font: 400 1.15rem var(--sign); letter-spacing: 2px; color: #fff; text-shadow: 0 2px 0 #3b1478, 0 0 10px #fff;
}
.cx-launch .b3-base, .cx-launch .b3-cap, .cx-launch .b3-shine { border-radius: 0; clip-path: var(--hex); }
.cx-launch .b3-base { box-shadow: inset 0 -3px 6px rgba(0,0,0,.4); }
.cx-launch .b3-cap::after { left: 24%; width: 52%; }
.cx-throttle { grid-area: thr; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.thr-head { font: 400 .72rem var(--sign); letter-spacing: 2px; color: #9ff0ff; }
.thr-head small { font: 600 .72rem var(--body); letter-spacing: 0; color: #b388ff; }
.thr-body { display: flex; gap: 10px; align-items: stretch; height: 170px; }
.thr-scale { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
.thr-mark { min-width: 24px; padding: 0 2px; border: none; background: none; cursor: pointer; font: 400 .7rem var(--sign); color: #7d6fb0; line-height: 1; text-align: right; }
.thr-mark.is-active { color: #ffe79a; text-shadow: 0 0 6px #ffe79a; }
.thr-mark:disabled { cursor: not-allowed; }
.thr-rail {
  width: 40px; display: flex; justify-content: center; border: 1px solid rgba(46,197,255,.55); border-radius: 20px;
  background: linear-gradient(0deg, #ff5ac8 0%, #8a46f0 calc(var(--thr, 0) * 100%), rgba(46,197,255,.06) calc(var(--thr, 0) * 100%));
  box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
#bet-range {
  -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl;
  width: 40px; height: 100%; margin: 0; background: transparent; cursor: pointer;
}
#bet-range::-webkit-slider-runnable-track { background: transparent; }
#bet-range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 22px; border-radius: 6px; background: linear-gradient(180deg, #ffffff, #e0c3ff 40%, #8a46f0); box-shadow: 0 0 12px #b388ff, inset 0 0 0 2px #fff; }
#bet-range::-moz-range-thumb { width: 38px; height: 20px; border: none; border-radius: 6px; background: linear-gradient(180deg, #ffffff, #e0c3ff 40%, #8a46f0); box-shadow: 0 0 12px #b388ff; }
#bet-range::-moz-range-track { background: transparent; }
#bet-range:disabled { cursor: not-allowed; opacity: .6; }
.thr-input { display: flex; gap: 6px; align-items: center; }
.thr-input button {
  width: 34px; height: 34px; border: 1px solid rgba(46,197,255,.7); cursor: pointer; font: 400 .8rem var(--sign); color: #9ff0ff;
  background: rgba(46,197,255,.1); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.thr-input button:hover:not(:disabled) { background: rgba(46,197,255,.3); }
.thr-input button:disabled { opacity: .5; cursor: not-allowed; }
.cx-input { width: 84px; height: 34px; padding: 0; text-align: center; font: 400 1rem var(--sign); color: #fff; background: #070418; border: 1px solid rgba(46,197,255,.6); }
.m-cosmic .m-hint { color: #b9c6ea; }
.m-cosmic .bonus-stage {
  border-radius: 0; border: 2px solid #8a46f0;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

/* ═══════════════════════ 🌙 Cosmic Voyage in 3D ═══════════════════════
   The hull leans back on a dark base plate, the cockpit slopes toward the
   player, keys are raised and screens are recessed. */
.ms-cosmic { perspective: 1600px; perspective-origin: 50% 25%; }
.m-cosmic { rotate: x 4deg; transform-origin: 50% 100%; isolation: isolate; }
.m-cosmic::after { /* hull thickness under the octagon */
  content: ""; position: absolute; left: 0; right: 0; top: 14px; bottom: -14px; z-index: -1; pointer-events: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: linear-gradient(180deg, #2a1660, #0b0522);
}
.cx-cockpit {
  transform: perspective(900px) rotateX(14deg); transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(40,20,90,.75), rgba(10,4,30,.85));
  box-shadow: inset 0 2px 0 rgba(179,136,255,.45), inset 0 -10px 0 rgba(0,0,0,.45), inset 0 0 24px rgba(46,197,255,.12);
}
.m-cosmic .slot-lcd { box-shadow: 0 0 14px rgba(46,197,255,.25), inset 0 4px 14px rgba(0,0,0,.8), inset 0 0 14px rgba(46,197,255,.15); }
.m-cosmic .m-readout { box-shadow: inset 0 4px 12px rgba(0,0,0,.8), inset 0 0 10px rgba(46,197,255,.15); background: rgba(5,3,15,.85); }
.cx-input { box-shadow: inset 0 3px 8px rgba(0,0,0,.85); }
.thr-rail { box-shadow: inset 0 4px 12px rgba(0,0,0,.85), inset 0 0 0 1px rgba(46,197,255,.25); }
#bet-range::-webkit-slider-thumb { box-shadow: 0 0 12px #b388ff, inset 0 0 0 2px #fff, inset 0 -5px 0 rgba(59,20,120,.6); }
.thr-input button {
  background: linear-gradient(180deg, rgba(120,90,220,.55), rgba(46,197,255,.18));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 0 rgba(10,4,30,.75);
  transform: translateY(-2px); transition: transform .08s, box-shadow .08s;
}
.thr-input button:hover:not(:disabled) { background: linear-gradient(180deg, rgba(150,120,255,.7), rgba(46,197,255,.3)); }
.thr-input button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(10,4,30,.75); }
.m-cosmic .m-tool { box-shadow: inset 0 2px 0 rgba(159,240,255,.35), 0 4px 0 #0e3a5c, 0 7px 8px rgba(0,0,0,.5); transform: translateY(-2px); transition: transform .08s, box-shadow .08s; }
.m-cosmic .m-tool:active { transform: translateY(2px); box-shadow: 0 0 0 #0e3a5c, 0 2px 3px rgba(0,0,0,.4); }
.m-cosmic .m-hint { margin-top: 22px; }   /* clears the sloped cockpit */
@media (prefers-reduced-motion: reduce) { .cx-lights { animation: none !important; } }

/* ── Responsive ── */
@media (max-width: 700px) {
  .machine { --sym: 62px; }
  .reels-window { gap: 4px; padding: 6px; }
  .reels-window::after, .win-banner { inset: 6px; }
  .chrome { top: 6px; bottom: 6px; width: 3px; margin-left: -1.5px; }
  .ro-value { font-size: 1rem; }
  .lcd-main { min-height: 4.05em; max-height: 4.05em; -webkit-line-clamp: 3; line-clamp: 3; }
  .lcd-sub { min-height: 2.7em; max-height: 2.7em; -webkit-line-clamp: 2; line-clamp: 2; }
  .panel { padding: 26px 14px 18px; }
  .marquee { padding: 22px 28px 18px; }

  .or-crate { padding: 30px 10px 14px; border-width: 4px; }
  .or-awning { margin: 10px -6px 0; }
  .or-deck { padding: 10px; gap: 10px; }
  .or-window { padding: 6px; }

  .ds-hull { padding: 14px 10px; border-radius: 26px; }
  .ds-porthole { padding: 9px; border-radius: 30px; }
  .m-deepsea .reels-window { border-radius: 22px; }
  .ds-console { grid-template-columns: 1fr 1fr; grid-template-areas: "dial dive" "gauges gauges"; padding: 12px 10px; }
  .ds-gauges { flex-direction: row; }
  .ds-gauges .m-readout { flex: 1; }

  .m-cosmic { --cut: 18px; }
  .cx-hull { padding: 16px 10px; }
  .cx-cockpit { grid-template-columns: 1fr auto; grid-template-areas: "read launch" "thr thr"; padding: 12px 10px; }
  .cx-throttle { width: 100%; }
  .thr-body { flex-direction: column; height: auto; width: 100%; gap: 6px; }
  .thr-scale { flex-direction: row-reverse; padding: 0 10px; }
  .thr-rail { width: 100%; height: 40px; background: linear-gradient(90deg, #ff5ac8 0%, #8a46f0 calc(var(--thr, 0) * 100%), rgba(46,197,255,.06) calc(var(--thr, 0) * 100%)); }
  #bet-range { writing-mode: horizontal-tb; direction: ltr; width: 100%; height: 40px; }
  #bet-range::-webkit-slider-thumb { width: 24px; height: 40px; }
  #bet-range::-moz-range-thumb { width: 22px; height: 38px; }
}
@media (max-width: 420px) {
  .machine { --sym: 50px; }
  .reels-window { gap: 3px; padding: 5px; }
  .reels-window::after, .win-banner { inset: 5px; }
  .chrome { top: 5px; bottom: 5px; }
  .ro-value { font-size: .85rem; }
  .ro-label { font-size: .7rem; letter-spacing: 1px; }
  .ro-unit { font-size: .7rem; letter-spacing: .5px; }
  .m-tool { width: 28px; height: 28px; font-size: .8rem; }
  .m-tool svg { width: 15px; height: 15px; }
  .panel { padding: 24px 10px 16px; }
  .marquee { padding: 20px 20px 16px; }
  .marquee.small { padding: 16px 18px 13px; }
  .mq-sub { letter-spacing: 2px; }
  .chip-link { padding: 8px 12px; font-size: .72rem; }

  .or-sign { padding: 10px 14px 8px; max-width: calc(100% - 24px); }
  .or-spin { --w: 96px; --h: 76px; --depth: 12px; font-size: 1.15rem; }
  .or-spin-wrap { padding: 8px; }
  .or-leaf { width: 20px; height: 11px; top: -6px; }
  .ms-orchard { perspective: 1100px; }
  .or-deck { transform: perspective(700px) rotateX(10deg); }
  .or-crate-btn { width: 42px; height: 42px; }
  .or-chalk { height: 42px; font-size: 1.2rem; }
  .or-tag { padding: 6px 9px 6px 18px; font-size: .72rem; }
  .m-orchard .m-tools { top: 20px; left: 2px; right: 2px; }

  .ds-plate { padding: 8px 24px; max-width: calc(100% - 80px); }
  .m-deepsea .m-tools { top: 12px; left: 12px; right: 12px; }
  .ds-dial { --dial-r: 47px; width: 138px; height: 138px; }
  .ds-knob { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .ds-tick { width: 28px; height: 24px; margin: -12px 0 0 -14px; font-size: .64rem; }
  .ds-dive { --w: 96px; --h: 76px; --depth: 12px; font-size: 1.15rem; }
  .ds-dive-wrap { padding: 8px; }
  .ms-deepsea { perspective: 1100px; }
  .ds-console { transform: perspective(700px) rotateX(10deg); }

  .cx-launch { --w: 108px; --h: 80px; --depth: 12px; font-size: .95rem; }
  .cx-launch-wrap { padding: 11px 13px; }
  .ms-cosmic { perspective: 1100px; }
  .cx-cockpit { transform: perspective(700px) rotateX(10deg); }
  .m-cosmic .m-tools { top: 8px; left: 16px; right: 16px; }
  .cx-head { margin: 0 40px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .machine.shake { animation: none; }
  .reel-strip.spinning { animation-duration: 1.2s; filter: none; }
  .win-banner .rays, .marquee .bulb, .fs-sign, .reels-window.has-win .symbol.hit,
  .or-bulbs::before, .or-bulbs::after, .or-spin-wrap::before, .ds-sonar::after, .ds-dive-wrap::before, .cx-launch-wrap, .m-cosmic .m-title, .cx-cursor,
  .m-deepsea.celebrate .ds-porthole, .m-cosmic.celebrate .cx-corners { animation: none !important; }
  .game-card:hover, .chip-link:hover, .btn-gold:hover, .btn-red:hover { transform: none; }
}

/* ═══════════════════════ Jukebox (lobby + each game, themed) ═══════════════════════ */
.jukebox {
  --jb-bg: linear-gradient(180deg, #6b3410, #3a1a06 70%, #2a1204);
  --jb-edge: #f5c542; --jb-text: #fff6dc; --jb-muted: #e9c98b;
  --jb-screen: #0b0b05; --jb-screen-text: #ffb300; --jb-viz1: #ff5a6e; --jb-viz2: #ffe79a;
  --jb-btn: linear-gradient(180deg, #ffe79a, #f5c542 55%, #a87a12); --jb-btn-text: #2a1c02;
  --jb-radius: 110px 110px 16px 16px;
  position: fixed; right: 16px; bottom: 16px; z-index: 250; font-family: var(--body); color: var(--jb-text);
}
.jb-fab {
  position: relative; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-family: var(--emoji);
  background: var(--jb-bg); border: 3px solid var(--jb-edge); box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 18px rgba(245,197,66,.35);
}
.jukebox.is-open .jb-fab { display: none; }
.jb-eq { position: absolute; right: 6px; bottom: 6px; display: none; gap: 2px; align-items: flex-end; height: 12px; }
.jukebox.is-playing .jb-eq { display: flex; }
.jb-eq i { width: 3px; background: var(--jb-viz2); border-radius: 1px; animation: eq .8s ease-in-out infinite alternate; }
.jb-eq i:nth-child(2) { animation-delay: -.3s; } .jb-eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }

.jb-panel {
  display: none; position: relative; width: 248px; padding: 34px 14px 12px; border-radius: var(--jb-radius);
  background: var(--jb-bg); border: 3px solid var(--jb-edge);
  box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.35);
}
.jukebox.is-open .jb-panel { display: block; }
.jb-arch { text-align: center; margin-bottom: 8px; }
.jb-name { display: block; font-family: var(--sign); font-size: 1rem; letter-spacing: 3px; color: var(--jb-edge); text-shadow: 0 0 10px rgba(245,197,66,.6); }
.jb-venue { display: block; font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--jb-muted); }
.jb-min {
  position: absolute; top: 10px; right: 14px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.35); color: var(--jb-text); border: 1px solid var(--jb-edge); font-size: .8rem; line-height: 1;
}
.jb-screen { padding: 8px; border-radius: 8px; background: var(--jb-screen); box-shadow: inset 0 0 10px rgba(0,0,0,.8); border: 2px solid rgba(0,0,0,.4); }
.jb-viz { display: block; width: 100%; height: 34px; }
.jb-track { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font-family: "Courier New", monospace; font-weight: 700; color: var(--jb-screen-text); text-shadow: 0 0 6px currentColor; }
.jb-num { font-size: .7rem; opacity: .8; flex: none; }
.jb-title { font-size: .86rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-genre { font-size: .72rem; color: var(--jb-muted); margin-top: 2px; }
.jb-ctrls { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 0 8px; }
.jb-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: .95rem; line-height: 1;
  color: var(--jb-btn-text); background: var(--jb-btn); box-shadow: 0 3px 0 rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; transition: transform .08s;
}
.jb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.jb-play { width: 52px; height: 52px; font-size: 1.2rem; }
.jukebox.is-playing .jb-play { box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 16px var(--jb-viz2); }
.jb-vol { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.jb-vol span:first-child { font-family: var(--emoji); }
.jb-vol input { flex: 1; accent-color: var(--jb-edge); min-width: 0; }
.jb-volv { width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--jb-muted); font-size: .72rem; }
.jb-note { min-height: 0; font-size: .7rem; text-align: center; color: var(--jb-muted); margin-top: 4px; }
.jb-note:empty { display: none; }
.jukebox button:focus-visible, .jukebox input:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* Lobby: classic jukebox with rainbow neon arch */
.jb-lobby .jb-panel::before {
  content: ""; position: absolute; inset: 6px 6px auto; height: 70px; border-radius: 104px 104px 0 0; pointer-events: none;
  border: 4px solid transparent; border-bottom: 0;
  background: linear-gradient(90deg, #ff3047, #f5c542, #38d16a, #2aa8ff, #c86bff, #ff3047) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
.jb-lobby.is-playing .jb-panel::before { animation: neon-hue 4s linear infinite; }
@keyframes neon-hue { to { filter: hue-rotate(360deg) drop-shadow(0 0 6px rgba(255,255,255,.6)); } }

/* Orchard: wooden country radio */
.jb-orchard {
  --jb-bg: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 9px), linear-gradient(180deg, #c3843f, #8a5527);
  --jb-edge: #5b3412; --jb-text: #fff6dc; --jb-muted: #fff1d6;
  --jb-screen: radial-gradient(ellipse at 30% 30%, #34483b, #1d2b22); --jb-screen-text: #f6f3e8; --jb-viz1: #ffd166; --jb-viz2: #c8ffb0;
  --jb-btn: radial-gradient(circle at 40% 35%, #ffb3bb, #e0283f 50%, #7a0d17); --jb-btn-text: #fff;
  --jb-radius: 40px 40px 14px 14px;
}
.jb-orchard .jb-name { color: #fff6dc; text-shadow: 0 2px 0 #5b3412; }
.jb-orchard .jb-min { border-color: #ffd166; }

/* Deep Sea: brass ship's gramophone */
.jb-deepsea {
  --jb-bg: radial-gradient(ellipse at 50% 0%, rgba(140,220,255,.2), transparent 60%), linear-gradient(180deg, #2f5566, #0b1c27);
  --jb-edge: #c99a3e; --jb-text: #d8f3ff; --jb-muted: #a8d8ea;
  --jb-screen: radial-gradient(ellipse at 50% 50%, #05392a, #021a12); --jb-screen-text: #7dff8a; --jb-viz1: #2ec5ff; --jb-viz2: #7dff8a;
  --jb-btn: radial-gradient(circle at 50% 30%, #b8f6ff, #2ec5ff 30%, #0a5a8a 75%); --jb-btn-text: #02263d;
  --jb-radius: 60px 60px 24px 24px;
}
.jb-deepsea .jb-name { color: #f0d38a; }

/* Cosmic: holographic console */
.jb-cosmic {
  --jb-bg: linear-gradient(rgba(46,197,255,.07) 1px, transparent 1px) 0 0 / 100% 18px, linear-gradient(180deg, #120a2e, #07041a);
  --jb-edge: #8a46f0; --jb-text: #e0eaff; --jb-muted: #b9c6ea;
  --jb-screen: #070418; --jb-screen-text: #9ff0ff; --jb-viz1: #ff5ac8; --jb-viz2: #2ec5ff;
  --jb-btn: linear-gradient(180deg, #e0c3ff, #8a46f0); --jb-btn-text: #fff;
  --jb-radius: 0;
}
.jb-cosmic .jb-panel { clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px); box-shadow: none; }
.jb-cosmic .jb-name { background: linear-gradient(90deg, #9ff0ff, #e0c3ff, #ff9ae6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jb-cosmic .jb-btn { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 0; box-shadow: none; }

@media (max-width: 520px) {
  .jukebox { right: 10px; bottom: 10px; }
  .jb-panel { width: min(248px, calc(100vw - 20px)); }
  .jb-fab { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .jb-eq i, .jb-lobby.is-playing .jb-panel::before { animation: none; }
}

/* ═══════════════════════ Sign-in (login.html + nav pill) ═══════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Nav pill */
.auth-nav { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.auth-pill { border-style: solid; border-color: var(--gold); background: rgba(245,197,66,.12); }
.auth-user { border-style: solid; border-color: rgba(125,255,138,.6); background: rgba(0,0,0,.45); max-width: 100%; }
.auth-out { cursor: pointer; }
button.chip-link { font-family: var(--sign); }
button.chip-link:disabled { opacity: .5; cursor: progress; }
.chip-link:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* Card */
.auth-main { max-width: 640px; margin: 0 auto; }
.auth-card { padding-top: 30px; }
.auth-title { margin: 0 0 6px; font-family: var(--sign); font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: 1px; color: var(--gold-light); text-shadow: 0 2px 0 var(--gold-dark), 0 0 16px rgba(245,197,66,.45); }
.auth-lead { margin: 0 0 14px; color: #dfe8e1; }
.auth-mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace; }

/* Tabs */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 18px; border-radius: 999px; padding: 4px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,197,66,.45); }
.auth-tab {
  appearance: none; border: 0; border-radius: 999px; padding: 10px 8px; cursor: pointer; min-width: 0;
  font: 400 .78rem var(--sign); letter-spacing: 1px; color: var(--cream); background: transparent;
}
.auth-tab[aria-selected="true"] { color: #2a1c02; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); box-shadow: 0 2px 0 var(--gold-deep); }
.auth-tab:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* Steps */
.auth-steps { list-style: none; display: flex; justify-content: space-between; gap: 6px; padding: 0; margin: 0 0 16px; counter-reset: none; }
.auth-steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.auth-steps li span {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 400 .7rem var(--sign); color: var(--cream); background: rgba(0,0,0,.5); border: 1px solid rgba(245,197,66,.45);
}
.auth-steps li[aria-current="step"] { color: var(--gold-light); }
.auth-steps li[aria-current="step"] span { color: #2a1c02; background: var(--gold); border-color: var(--gold-light); }
.auth-steps li.is-done span { color: #062a14; background: var(--lcd-green); border-color: var(--lcd-green); }
.auth-steps li + li::before { content: ""; flex: 0 1 18px; height: 2px; background: rgba(245,197,66,.35); margin-right: 2px; }

/* Fields */
.auth-label { display: block; margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.auth-input {
  display: block; width: 100%; padding: 12px 14px; border-radius: 10px; font-size: .95rem; color: var(--cream);
  background: rgba(0,0,0,.5); border: 1px solid rgba(245,197,66,.45); outline: none; resize: vertical;
}
.auth-input::placeholder { color: rgba(185,203,189,.6); }
.auth-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,.25); }
.auth-input[aria-invalid="true"] { border-color: #ff6b7a; box-shadow: 0 0 0 3px rgba(255,107,122,.25); }
.auth-message { font-size: .8rem; line-height: 1.5; color: var(--lcd-green); background: #0b0b05; word-break: break-all; resize: none; }
.auth-hint { margin: 6px 0 12px; font-size: .82rem; color: var(--muted); }
.auth-error { margin: 6px 0 10px; font-size: .86rem; font-weight: 600; color: #ff9aa5; }
.auth-error::before { content: "⚠ "; }
.auth-error-block { padding: 12px 14px; border-radius: 10px; background: rgba(122,13,23,.6); border: 1px solid var(--red); }
.auth-for { margin: 0 0 14px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.auth-howto { margin: 12px 0 14px; padding: 10px 12px; border-radius: 10px; font-size: .84rem; color: #dfe8e1; background: rgba(0,0,0,.3); border: 1px dashed rgba(245,197,66,.35); }

/* Buttons + rows */
.auth-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.auth-row-tight { margin-top: 8px; }
.auth-col { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.auth-wide { flex: 1 1 200px; min-height: 48px; }
.auth-col .auth-wide { flex: none; width: 100%; }
.btn-red:disabled, .btn-gold:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn-red[aria-busy="true"], .btn-gold[aria-busy="true"] { cursor: progress; }
.btn-red:focus-visible, .btn-gold:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.auth-link {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  font: 600 .84rem var(--body); color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}
.auth-link:hover { color: var(--gold-light); }
.auth-link:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; border-radius: 4px; }
#w-copy.is-copied { border-color: var(--lcd-green); color: var(--lcd-green); }
.auth-copied { font-size: .8rem; font-weight: 700; color: var(--lcd-green); }
.auth-expiry { margin-left: auto; font-size: .82rem; color: var(--muted); }
.auth-expiry strong { font-family: var(--sign); font-weight: 400; color: var(--gold-light); }
.auth-expiry.is-low strong { color: #ff9aa5; }

/* Status + success */
.auth-status { min-height: 1.4em; margin: 12px 0 0; font-size: .88rem; font-weight: 600; color: var(--muted); }
.auth-status:empty { margin: 0; min-height: 0; }
.auth-status.is-error { color: #ff9aa5; }
.auth-status.is-ok { color: var(--lcd-green); }
.auth-done, .auth-signed-in { text-align: center; }
.auth-done:focus { outline: none; }
.auth-ok-big { margin: 0; font-size: 2.4rem; font-family: var(--emoji); }
.auth-signed-in .auth-row { justify-content: center; }
.auth-done .auth-mono, .auth-signed-in .auth-mono { word-break: break-all; }
.auth-notice { margin-top: 26px; }

@media (max-width: 420px) {
  .auth-tab { font-size: .7rem; letter-spacing: .3px; padding: 10px 4px; }
  .auth-steps li { font-size: .7rem; gap: 4px; }
  .auth-steps li + li::before { flex-basis: 8px; }
  .auth-expiry { margin-left: 0; }
}

/* ═══════════════════════ Layout & accessibility fixes (UI/UX audit) ═══════════════════════ */
/* Skip link: hidden until focused with the keyboard. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 16px; border-radius: 999px;
  font: 700 .9rem var(--body); color: #2a1c02; text-decoration: none;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.skip-link:focus { top: 10px; color: #2a1c02; }
main:focus { outline: none; }

/* Lobby: the marquee is the page heading. */
.logo-h1 { margin: 0; font: inherit; }

/* Game pages: a compact header so the reels and spin control are reachable at once. */
body[data-game] .logo-area { margin: 4px auto 12px; }
body[data-game] .nav-bar { margin-bottom: 14px; gap: 8px; }
body[data-game] .machine-stage { margin-top: 0; }

/* Quick bet tags never leave one tag alone on a row. */
.or-tags { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; }

/* Bet scale shortcuts: comfortable pointer targets (keyboard uses the slider / dial). */
.thr-mark { min-height: 17px; }

@media (max-width: 600px) {
  body[data-game] .warning-strip, body[data-page="login"] .warning-strip { font-size: .78rem; padding: 6px 58px 6px 12px; }
  body[data-game] .page { padding-top: 12px; }
  body[data-game] .logo-area { margin: 0 auto 10px; }
  body[data-game] .marquee.small { padding: 9px 18px 8px; border-radius: 14px; box-shadow: 0 0 0 4px var(--red-dark), 0 0 0 6px var(--gold-dark), 0 6px 20px rgba(0,0,0,.5); }
  body[data-game] .marquee.small .mq-title { font-size: 1.15rem; }
  body[data-game] .marquee.small .mq-sub, body[data-game] .marquee .bulb { display: none; }

  /* One swipeable row of chips instead of three wrapped rows. */
  body[data-game] .nav-bar {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 -16px 12px; padding: 4px 16px 6px; scroll-padding: 0 16px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  body[data-game] .nav-bar::-webkit-scrollbar { display: none; }
  body[data-game] .nav-bar > * { flex: none; }
  body[data-game] .nav-bar .auth-nav { flex-wrap: nowrap; }
  body[data-game] .chip-link { white-space: nowrap; }
  body[data-game] .chip-link[aria-current="page"] { box-shadow: 0 0 0 2px var(--red), 0 3px 8px rgba(0,0,0,.4); }
  /* The machine has its own BALANCE meter, so the header chip is hidden on phones. */
  body[data-game] .chip-balance { display: none; }

  /* Feature strip: three compact columns. */
  .sign-slot .feature-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .sign-slot .feature-bar li {
    flex-direction: column; justify-content: center; gap: 2px; padding: 4px 4px; border-radius: 10px;
    font: 700 .7rem/1.2 var(--body); letter-spacing: 0; text-align: center; text-transform: uppercase;
  }
  .sign-slot .feature-bar .e { font-size: .95rem; }

  .thr-mark { min-height: 28px; }
}
@media (max-width: 420px) {
  .or-tags { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .or-tag { text-align: center; }
}

/* Jukebox: below 900px the floating button would sit on top of the machine
   (it covered the spin control on phones). Dock it to the top-right corner of
   the page instead, so it scrolls away with the header. */
@media (max-width: 899px) {
  .jukebox { position: absolute; top: 5px; right: 8px; bottom: auto; }
  .jb-fab { width: 42px; height: 42px; font-size: 1.15rem; border-width: 2px; }
  .jb-eq { right: 4px; bottom: 4px; }
  .jukebox.is-open { z-index: 260; }
  .warning-strip { padding-right: 58px; padding-left: 12px; min-height: 52px; }
  body[data-page="lobby"] .page { padding-top: 58px; }
}

/* ═══════════════════════ Full screen (game pages) ═══════════════════════ */
/* The whole page goes full screen (so coin showers, effects and the jukebox
   still work); everything but the machine is hidden and the machine is scaled
   by slot.js to fit the screen. */
body.is-fullscreen .warning-strip, body.is-fullscreen .logo-area, body.is-fullscreen .nav-bar,
body.is-fullscreen #app > .panel, body.is-fullscreen .casino-footer { display: none; }
body.is-fullscreen .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; }
body.is-fullscreen .machine-stage { margin: 0; align-items: flex-start; }
body.is-fullscreen .machine { transform-origin: top center; }
/* The win list normally appears only after a win, which makes the machine
   taller and would make the fit-to-screen scale shrink on every win. In full
   screen it always keeps exactly one row; extra wins scroll sideways. */
body.is-fullscreen .breakdown, body.is-fullscreen .breakdown:empty {
  display: flex; flex-wrap: nowrap; height: 30px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  justify-content: flex-start; justify-content: safe center;
}
body.is-fullscreen .breakdown::-webkit-scrollbar { display: none; }
body.is-fullscreen .bd-item { flex: none; }
@media (max-width: 899px) {
  /* The jukebox button sits in the top-right corner: keep it clear of the machine. */
  body.is-fullscreen .page { padding-top: 56px; justify-content: flex-start; }
}

/* ═══════════════════════ BCH Testnet4 coin icon ═══════════════════════ */
.tbch { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.28em; }
.chip-balance .tbch { width: 1.35em; height: 1.35em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.step-coin { display: block; width: 30px; height: 30px; margin: 8px 0; filter: drop-shadow(0 2px 6px rgba(245,197,66,.45)); }

/* ═══════════════════════ Return to the house (address + copy) ═══════════════════════ */
.hr-body { display: flex; gap: 16px; align-items: flex-start; }
.hr-coin { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 2px 8px rgba(245,197,66,.5)); }
.hr-text { flex: 1; min-width: 0; }
.hr-text p { margin: 0 0 12px; color: #dfe8e1; }
.copy-field { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.copy-code {
  flex: 1 1 320px; min-width: 0; padding: 10px 14px; border-radius: 10px; word-break: break-all;
  font: 500 .92rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--lcd-green);
  background: #04120b; border: 1px solid rgba(245,197,66,.45); box-shadow: inset 0 0 12px rgba(0,0,0,.6);
  user-select: all; -webkit-user-select: all;
}
.copy-btn { flex: none; min-width: 112px; }
.hr-note { margin: 8px 0 0 !important; min-height: 1.2em; font-size: .82rem; color: var(--lcd-green) !important; }
body.is-fullscreen .house-return { display: none; }
@media (max-width: 420px) {
  .hr-body { gap: 10px; }
  .hr-coin { width: 32px; height: 32px; }
  .copy-btn { width: 100%; }
}

/* ═══════════════════════ Donations (lobby) ═══════════════════════ */
.donate { border-color: rgba(255,90,110,.55); }
.donate .panel-label { background: linear-gradient(180deg, #ff8a96, var(--red)); color: #fff; }
.dn-lead { margin: 0 0 14px; color: #dfe8e1; font-weight: 600; }
.dn-list { display: grid; gap: 14px; }
.dn-label { margin: 0 0 6px; font-family: var(--sign); font-size: .78rem; letter-spacing: 1.5px; color: var(--gold); }
.dn-coin .hr-note { margin-top: 4px !important; }
.dn-note { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
@media (max-width: 420px) { .donate .copy-btn { width: 100%; } }

/* ═══════════════════════ Live faucet bar (all pages) ═══════════════════════ */
.faucet-bar {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #160409, #0d0306);
  border-bottom: 1px solid rgba(245,197,66,.45);
  color: var(--cream); font-size: .8rem;
}
.fb-inner {
  max-width: 1240px; margin: 0 auto; padding: 6px 16px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
}
.fb-live {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 .7rem/1 var(--sign); letter-spacing: 1.5px; color: var(--lcd-green);
}
.fb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lcd-green); box-shadow: 0 0 6px var(--lcd-green); animation: fb-pulse 1.6s ease-in-out infinite; }
@keyframes fb-pulse { 50% { opacity: .35; } }
.faucet-bar.is-error .fb-live { color: #ff8a8a; }
.faucet-bar.is-error .fb-dot { background: #ff5a5a; box-shadow: 0 0 6px #ff5a5a; animation: none; }
.fb-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; }
.fb-stat { display: flex; align-items: center; gap: 6px; }
.fb-stat dt { color: rgba(255,240,214,.7); font-weight: 500; }
.fb-stat dt::after { content: ":"; }
.fb-stat dd { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-stat .tbch { width: 14px; height: 14px; }
.fb-time { color: rgba(255,240,214,.6); font-size: .74rem; white-space: nowrap; }
.fb-time:empty { display: none; }

/* tSats / tBCH switch (game machines) */
.unit-switch {
  display: inline-flex; align-items: center; padding: 3px; gap: 0; cursor: pointer; min-height: 40px;
  border: 1px solid var(--gold-dark); border-radius: 999px; background: #2a0a10;
  font: 700 .8rem/1 var(--body); color: rgba(255,240,214,.75);
}
.us-opt { padding: 8px 14px; border-radius: 999px; transition: background .15s, color .15s; }
.unit-switch[aria-checked="false"] .us-opt[data-u="sat"],
.unit-switch[aria-checked="true"] .us-opt[data-u="bch"] {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); color: #2a1c02;
}
.unit-switch:hover { border-color: var(--gold); }
.unit-switch:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
/* tBCH values are longer (0.00012340): shrink the meters a little. */
.machine.unit-bch .ro-value { font-size: .8em; letter-spacing: 0; }

@media (max-width: 899px) {
  /* Lobby: the bar is the top strip, so it makes room for the jukebox button. */
  body[data-page="lobby"] .faucet-bar .fb-inner { padding-right: 58px; padding-left: 12px; min-height: 52px; }
  body[data-page="lobby"] .page { padding-top: 26px; }
}
@media (max-width: 600px) {
  .faucet-bar { font-size: .74rem; }
  .fb-inner { gap: 6px 10px; }
  .fb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; width: 100%; }
  .fb-stat { flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
  .fb-stat dt { font-size: .68rem; }
  .fb-stat dt::after { content: none; }
  .fb-stat dd { font-size: .76rem; }
  .fb-stat .tbch { width: 12px; height: 12px; }
  .fb-live { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fb-dot { animation: none; } }
body.is-fullscreen .faucet-bar { display: none; }

/* Faucet bar: "Left in the faucet" leads; stale data dims the dot. */
.fb-main dd { font-size: 1.08em; color: #fff; }
.faucet-bar.is-stale .fb-live { color: var(--lcd-amber); }
.faucet-bar.is-stale .fb-dot { background: var(--lcd-amber); box-shadow: 0 0 6px var(--lcd-amber); animation: none; }

/* ═══════════════════════ Daily bonus ═══════════════════════ */
/* Nav pill (every page) */
.bonus-pill { border-style: solid; border-color: rgba(245,197,66,.45); cursor: default; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus-pill:hover { transform: none; background: rgba(0,0,0,.35); }
button.bonus-pill { font: inherit; cursor: pointer; }
.bonus-pill.is-ready {
  color: #fff; border-color: var(--gold); background: linear-gradient(180deg, #ff4d5e, var(--red) 55%, var(--red-dark));
  box-shadow: 0 0 0 2px rgba(245,197,66,.35), 0 0 14px rgba(255,77,94,.55); animation: bonus-glow 1.8s ease-in-out infinite;
}
.bonus-pill.is-ready:hover { transform: translateY(-2px); background: linear-gradient(180deg, #ff6b7a, var(--red) 55%, var(--red-dark)); }
.bonus-pill:disabled { opacity: .7; cursor: progress; animation: none; }
@keyframes bonus-glow { 50% { box-shadow: 0 0 0 2px rgba(245,197,66,.6), 0 0 22px rgba(255,77,94,.85); } }

/* Lobby card */
.daily-bonus .panel-label { background: linear-gradient(180deg, #ff8a96, var(--red)); color: #fff; }
.db-body { display: flex; align-items: center; gap: 18px; }
.db-gift { font-family: var(--emoji); font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); animation: db-bob 2.4s ease-in-out infinite; }
@keyframes db-bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.db-main { flex: 1; min-width: 0; }
.db-text { margin: 0 0 10px; color: var(--cream); }
.db-btn { display: inline-flex; min-height: 48px; align-items: center; }
.db-left { margin: 0 0 6px; font-family: var(--sign); font-size: clamp(1.4rem, 5vw, 1.9rem); letter-spacing: 1px; color: var(--gold-light); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--gold-deep), 0 0 14px rgba(245,197,66,.5); }
.db-note { margin: 0; font-size: .84rem; color: var(--muted); }
.db-note.is-error { margin-top: 8px; color: #ff9aa5; font-weight: 600; }
@media (max-width: 480px) {
  .db-body { flex-direction: column; text-align: center; gap: 10px; }
  .db-gift { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-pill.is-ready, .db-gift { animation: none; }
}

/* ═══════════════════════ Server-driven machine ═══════════════════════ */
.m-loading { text-align: center; color: var(--muted); }
.m-loading .btn-gold { margin-left: 8px; }
.or-window { position: relative; }
/* Signed out: the machine stays visible, the reels carry a sign-in call. */
.m-lock {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; text-align: center; border-radius: inherit; background: rgba(6, 3, 8, .62); backdrop-filter: blur(2px);
}
.m-lock[hidden] { display: none; }
.m-lock-btn { min-height: 48px; display: inline-flex; align-items: center; font-size: 1rem; }
.m-lock p { margin: 0; font-size: .86rem; font-weight: 600; color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* ═══════════════════════ Account and fairness pages ═══════════════════════ */
.acct-main { max-width: 860px; margin: 0 auto; }
.page-title { margin: 0 0 18px; text-align: center; font-family: var(--sign); font-weight: 400; font-size: clamp(1.5rem, 5vw, 2.2rem); letter-spacing: 1px; color: var(--gold-light); text-shadow: 0 2px 0 var(--gold-dark), 0 0 16px rgba(245,197,66,.45); }
.acct-loading { text-align: center; color: var(--muted); }
.acct-balance { margin: 0 0 6px; font-size: 1rem; color: var(--muted); }
.acct-balance strong { display: block; font-family: var(--sign); font-weight: 400; font-size: clamp(1.3rem, 4.5vw, 1.8rem); color: var(--gold-light); font-variant-numeric: tabular-nums; }
.acct-dest { margin: 0 0 14px; line-height: 1.7; }
.acct-dest .copy-code { display: inline; padding: 2px 6px; }
.acct-amount { display: flex; gap: 8px; align-items: stretch; }
.acct-amount .auth-input { flex: 1; min-width: 0; }
.acct-amount .btn-ghost { flex: none; }
.acct-empty { margin: 10px 0 0; color: var(--muted); }
.acct-more { margin-top: 12px; }
.acct-foot { text-align: center; margin: 4px 0 0; }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.acct-table th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); padding: 6px 8px; border-bottom: 1px solid rgba(245,197,66,.35); white-space: nowrap; }
.acct-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; white-space: nowrap; }
.acct-table .num { text-align: right; }
.acct-table .is-plus { color: var(--lcd-green); font-weight: 700; }
.acct-table .is-minus { color: #ff9aa5; font-weight: 700; }
.wl-status.is-sent { color: var(--lcd-green); font-weight: 700; }
.wl-status.is-failed { color: #ff9aa5; }
.wl-status.is-pending, .wl-status.is-sending { color: var(--lcd-amber); }
.acct-table a { font-weight: 700; }

.fair-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.seed-list { display: grid; gap: 8px; margin: 0 0 14px; }
.seed-list div { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.seed-list dt { font-size: .74rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.seed-list dd { margin: 0; min-width: 0; word-break: break-all; overflow-wrap: anywhere; color: var(--cream); }
.reveal-box, .vf-result:not(:empty) { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(245,197,66,.35); }
.reveal-box.is-ok, .vf-result.is-ok { border-color: rgba(125,255,138,.6); }
.reveal-box.is-bad, .vf-result.is-bad { border-color: #ff6b7a; background: rgba(122,13,23,.45); }
.rv-title { margin: 0 0 10px; font-weight: 700; color: var(--gold-light); }
.reveal-box.is-ok .rv-title, .vf-result.is-ok .rv-title { color: var(--lcd-green); }
.sp-check { white-space: normal !important; min-width: 120px; }
.sp-verify { padding: 4px 12px; min-height: 30px; font-size: .8rem; }
.sp-hidden { color: var(--muted); font-size: .8rem; }
.sp-result { font-weight: 700; }
.sp-result.is-ok { color: var(--lcd-green); }
.sp-result.is-bad { color: #ff9aa5; }
.sp-result.is-na { color: var(--muted); }
.sp-note { display: block; color: var(--muted); }

.vf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.vf-grid .vf-wide { grid-column: 1 / -1; }
.vf-grid select.auth-input { appearance: auto; }
.vf-reels { display: inline-grid; gap: 4px; margin: 4px 0 10px; padding: 8px; border-radius: 10px; background: #0d0306; border: 2px solid var(--gold-dark); }
.vf-row { display: grid; grid-template-columns: repeat(5, 2rem); gap: 4px; text-align: center; font-family: var(--emoji); font-size: 1.4rem; }
.vf-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
@media (max-width: 520px) {
  .vf-grid { grid-template-columns: 1fr; }
  .seed-list div { grid-template-columns: 1fr; }
}
.history-foot { margin: 10px 0 0; font-size: .84rem; color: var(--muted); }

/* Faucet bar: player counts on their own line */
.fb-players { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; margin: 0; font-size: .92em; color: rgba(255,240,214,.7); }
.fb-players[hidden] { display: none; }
.fb-players dt { font-weight: 600; color: rgba(255,240,214,.85); }
.fb-players dd { margin: 0; white-space: nowrap; }
.fb-players dd + dd::before { content: "·"; margin-right: 12px; color: rgba(245,197,66,.6); }
.fb-players strong { color: var(--gold-light); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  /* Phones: "Players" on its own row, then the four counts as a 2 × 2 grid. */
  .fb-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; justify-items: start; }
  .fb-players dt { grid-column: 1 / -1; }
  .fb-players dd + dd::before { content: none; }
}

/* ═══════════════════════ Leaderboards ═══════════════════════ */
.lb-lead { margin: -6px 0 16px; text-align: center; color: var(--muted); }
.lb-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; padding: 5px; border-radius: 16px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,197,66,.45); }
.lb-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 4px;
  border: 0; border-radius: 12px; background: transparent; color: var(--cream); cursor: pointer; text-align: center;
  font: 700 .8rem/1.15 var(--body);
}
.lb-tab-sub { font-weight: 500; font-size: .74rem; opacity: .8; }
.lb-tab:hover { background: rgba(245,197,66,.12); }
.lb-tab[aria-selected="true"] { color: #2a1c02; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); box-shadow: 0 2px 0 var(--gold-deep); }
.lb-tab:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.lb-panel { position: relative; }
.lb-panel:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.lb-note { margin: 0 0 8px; font-size: .86rem; color: var(--muted); }
.lb-you { margin: 0 0 12px; font-size: .92rem; }
.lb-you strong { color: var(--gold-light); }
.lb-empty { text-align: center; padding: 18px 0; font-size: 1rem; }
.lb-table-wrap { margin: 0 -4px; }
.lb-table { table-layout: fixed; }
.lb-table th.lb-rank, .lb-table td.lb-rank { width: 78px; }
.lb-table th.lb-amount, .lb-table td.lb-amount { width: 130px; }
.lb-table td { vertical-align: middle; }
.lb-table th { white-space: normal; vertical-align: bottom; }
.lb-table td.lb-player { position: relative; }
.lb-rank-n { font-weight: 700; color: var(--cream); }
.lb-medal { margin-left: 6px; font-family: var(--emoji); }
.lb-player { overflow: hidden; text-overflow: ellipsis; }
.lb-method { margin-right: 6px; font-family: var(--emoji); }
.lb-name { overflow-wrap: anywhere; }
.lb-table .lb-amount { font-weight: 700; color: var(--gold-light); }
.lb-row.is-top .lb-rank-n { color: var(--gold-light); }
/* The signed-in player's row: a distinct band, a gold edge and a "You" badge. */
.lb-row.is-me td { background: rgba(125,255,138,.16); }
.lb-row.is-me td:first-child { box-shadow: inset 4px 0 0 var(--lcd-green); }
.lb-row.is-me .lb-name { color: #fff; font-weight: 700; }
.lb-row.is-me:focus { outline: 3px solid var(--gold-light); outline-offset: -3px; }
.lb-you-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  font: 800 .68rem/1.5 var(--body); letter-spacing: 1px; text-transform: uppercase; color: #062a14; background: var(--lcd-green);
}
.lb-row.is-flash td { animation: lb-flash 2s ease-out; }
@keyframes lb-flash { 0%, 30% { background: rgba(245,197,66,.55); } 100% { background: rgba(125,255,138,.16); } }
.lb-more { display: block; margin: 12px auto 0; }
.lb-sentinel { height: 1px; }
.lb-jump { position: sticky; bottom: 14px; z-index: 5; display: block; margin: 14px auto 0; box-shadow: 0 3px 0 var(--gold-deep), 0 8px 20px rgba(0,0,0,.55); }
.lb-jump[hidden] { display: none; }
@media (max-width: 760px) {
  .lb-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .lb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-table { font-size: .8rem; }
  .lb-table th.lb-rank, .lb-table td.lb-rank { width: 50px; }
  .lb-table th.lb-amount, .lb-table td.lb-amount { width: 90px; }
  /* Labels are shown in full: they wrap instead of being cut off. */
  .lb-table td.lb-player { white-space: normal; text-overflow: clip; }
  .lb-name.auth-mono { font-size: .74rem; }
  .lb-table td, .lb-table th { padding: 7px 5px; }
  .lb-medal { margin-left: 3px; }
  .lb-method { margin-right: 3px; }
  .lb-you-badge { margin-left: 4px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .lb-row.is-flash td { animation: none; } }
.auth-legal { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(245,197,66,.25); font-size: .82rem; color: var(--muted); text-align: center; }