/* Comet Chips Casino: lobby, cabinet chrome, overlays. Dark casino look only (a game screen, not a
 * document). Machine colours arrive as CSS variables (--m-*) from art.palette; every use of them has
 * a sensible default. Layouts: desktop landscape (default), .portrait (phones upright) and .compact
 * (short landscape phones), chosen in js/ui/cabinet.js from the screen's shape. */

:root {
  --bg: #05040f;
  --ink: #fff7e0;
  --ink-dim: #b9b2d6;
  --violet: #6c3ce1;
  --magenta: #d63af9;
  --cyan: #29e6ff;
  --gold-grad: linear-gradient(180deg, #fffbe0 0%, #ffe27a 22%, #f5b81c 46%, #b06f00 54%, #ffd54f 76%, #fff1a8 100%);
  --gold-edge: linear-gradient(160deg, #fff3b0 0%, #e2b23e 22%, #6b4400 48%, #f5d36a 70%, #8a5a00 100%);
  --font-ui: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-num: 'Bungee', 'Lilita One', Impact, 'Arial Black', sans-serif;
  --font-meter: 'Orbitron', 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-brand: 'Orbitron', 'Audiowide', 'Arial Black', sans-serif;
  --font-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* clip, not hidden: an overflow:hidden box still scrolls from code, and a focus() or scrollIntoView
   shifted a whole screen out of place with no way back (the lobby floor, the cabinet). */
#app { position: fixed; inset: 0; overflow: hidden; overflow: clip; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible, .mc:focus-visible { outline: 2px solid #ffe27a; outline-offset: 3px; }
canvas { display: block; }
.ico { width: 22px; height: 22px; flex: 0 0 auto; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; font-size: 18px; }

/* Gradient title text: a thick dark outline copy behind, the gradient fill in front. */
.tt-back, .tt-front { grid-area: 1 / 1; white-space: nowrap; }
.tt-back { color: #2a1400; -webkit-text-stroke: 0.16em #2a1400; text-shadow: 0 0.07em 0 #000, 0 0 0.35em rgba(0, 0, 0, 0.5); }
.tt-front { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- screens ------------------------------------------------------------------------- */

.screen {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.05);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
}
.screen.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
#screen-lobby:not(.on) { transform: scale(0.95); }
.screen.instant { transition: none !important; }
.screen.prep { visibility: hidden !important; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* #overlays makes no stacking context of its own, so the layers of a celebration interleave with
   the fx canvas (z 60): dim, rays and glow below the coins, panels and amounts above them (coins
   fly behind the numbers, which stay readable). Modal panels sit above everything (z 80). */
#overlays { position: absolute; inset: 0; pointer-events: none; }
#overlays > * { pointer-events: auto; }
.ov:not(.ov-modal) > .ov-dim, .ov > .ov-rays, .ov > .bw-rays, .ov > .bw-glow { z-index: 50; }
.ov > .bn-panel, .ov > .bw-content, .ov > .jp-panel, .ov > .burst-text { z-index: 70; }
.ov > .bw-flash { z-index: 72; }
.ov.ov-modal { z-index: 80; }

/* ---- boot splash ----------------------------------------------------------------------- */

#boot {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #241066 0%, #0b0626 45%, #05040f 75%);
  transition: opacity 0.6s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-coin {
  width: 86px; height: 86px; border-radius: 50%; margin-bottom: 8px;
  background: radial-gradient(circle at 35% 30%, #fffbe0 0%, #ffd95a 30%, #d39a12 70%, #7a4a00 100%);
  box-shadow: inset 0 0 0 6px rgba(120, 70, 0, 0.55), inset 0 0 0 9px rgba(255, 230, 140, 0.6), 0 0 40px rgba(255, 190, 60, 0.6);
  animation: coinSpin 1.6s ease-in-out infinite;
}
.boot-name { font: 900 clamp(30px, 6vw, 56px)/1 var(--font-brand); letter-spacing: 0.06em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #2a1400); }
.boot-sub { font: 700 14px var(--font-serif); letter-spacing: 0.7em; color: #ffd76a; padding-left: 0.7em; }
.boot-bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 18px; }
.boot-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, #ffe27a, transparent); animation: bootBar 1.1s ease-in-out infinite; }

/* ---- lobby: the promenade deck ---------------------------------------------------------- */

/* Cards grow with large screens (up to 300 px), but never taller than the window allows. With six
   or more cards (.six and --cards, set by js/ui/lobby.js) the row shares the width among them, and
   the 150 px floor gives way when that many would not fit (six at 1024 px touched); five keep the
   original sizes. */
.lobby { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: #05061a; --card-w: clamp(150px, min(calc((100vw - 190px) / 5.5), calc((100vh - 400px) * 0.62)), 300px); }
/* Six cards: the floor may grow to 1,980 px, and the card width shares that floor, not the whole
   window (on a window wider than about 1,980 px the row outgrew a 1,760 px floor and the cards
   overlapped: GRAVITY WELL under STARHORN AURORA on an ultrawide, the owner's note 2026-11-01). */
.lobby.six { --floor-max: 1980px; --card-w: clamp(min(150px, calc((100vw - 120px) / (var(--cards, 6) * 1.08))), min(calc((min(100vw, calc(var(--floor-max) + 190px)) - 190px) / (var(--cards, 6) * 1.1)), calc((100vh - 400px) * 0.62)), 300px); }
.lb-floor-c, .lb-window-c { position: absolute; left: 0; top: 0; pointer-events: none; }
.lb-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 20, 0.62) 0%, rgba(4, 5, 20, 0.12) 16%, rgba(4, 5, 20, 0) 30%); }
.lb-scroll {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  padding: calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) calc(22px + var(--safe-b)) calc(16px + var(--safe-l));
}
.lb-head { max-width: var(--floor-max, 1760px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: nowrap; }
/* The wordmark keeps its size; the side beside it steps down instead (lobby.js _fitHead). */
.lb-brand { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lb-wm { position: relative; width: clamp(270px, 33vw, 500px); height: clamp(58px, 6.6vw, 92px); filter: drop-shadow(0 0 18px rgba(255, 190, 60, 0.28)); }
.lb-wm-c { position: absolute; left: 0; top: 0; }
.lb-aboard { margin-top: -3px; font: 700 clamp(9px, 0.95vw, 12px)/1 var(--font-serif); letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: #ffd76a; text-shadow: 0 0 10px rgba(255, 190, 60, 0.55), 0 1px 0 #000; }
/* Two rows beside the wordmark (js/ui/lobby.js _fitHead): the rank badge and the balance, then the
   DAILY BONUS sign, the MISSION LOG and the buttons. The side is as wide as its longer row; the
   rank badge stretches to fill the first. */
.lb-side { display: grid; grid-template-columns: minmax(0, auto); row-gap: 8px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
/* Right-aligned by the first item's auto margin, so a row that is too long overflows to the right,
   where lobby.js _fitHead can measure it (overflow at the start is not counted in scrollWidth). */
.lb-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; }
.lb-row > :first-child { margin-left: auto; }
.lb-row > * { flex: 0 0 auto; }
.lb-bal {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 9px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(22, 16, 56, 0.94), rgba(8, 6, 22, 0.94));
  box-shadow: 0 0 0 1.5px rgba(255, 210, 90, 0.65), 0 0 26px rgba(255, 190, 60, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.lb-bal .coin-ico { width: 26px; height: 26px; }
.lb-bal-l { font: 800 10px var(--font-ui); letter-spacing: 0.22em; color: var(--ink-dim); }
.lb-bal-v { min-width: 0; overflow: hidden; white-space: nowrap; font: 400 22px/1 var(--font-num); color: #ffe27a; text-shadow: 0 0 12px rgba(255, 200, 60, 0.55); font-variant-numeric: tabular-nums; }
/* Clipped texts with a glow: padding as wide as the glow (taken back by a negative margin) keeps the
   glow inside the clip box, so it is not cut into a lit rectangle. Sideways no wider than the
   padding of the box around the text, so the text's box never reaches past it (lobby.js measures
   that as an overflow). */
.lb-bal-v { padding: 10px 8px; margin: -10px -8px; }
.lb-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.lb-btn {
  display: flex; align-items: center; gap: 7px; height: 44px; min-width: 44px; justify-content: center; padding: 0 15px; border-radius: 13px;
  font: 800 11.5px var(--font-ui); letter-spacing: 0.14em; color: #ece6ff;
  background: linear-gradient(180deg, rgba(70, 46, 160, 0.6), rgba(20, 12, 60, 0.85));
  box-shadow: inset 0 0 0 1px rgba(170, 140, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.2s;
}
.lb-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(210, 190, 255, 0.75), 0 0 20px rgba(140, 100, 255, 0.5); }
.lb-btn:active { transform: scale(0.96); }
.lb-btn .ico { width: 18px; height: 18px; }

/* ---- player extras in the lobby header (research/player-extras.md 2-4, 6) ------------------- */
/* PILOT RANK: the painted emblem (wings, stars, the level), the rank name, the XP numbers and bar. */
.lb-row > .lb-rank { flex: 1 1 auto; min-width: 0; }
.lb-rank {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 6px; border-radius: 999px; text-align: left;
  background: linear-gradient(180deg, rgba(10, 26, 52, 0.94), rgba(4, 8, 22, 0.94));
  box-shadow: 0 0 0 1.5px rgba(41, 230, 255, 0.6), 0 0 22px rgba(41, 230, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.2s, filter 0.2s;
}
.lb-rank:hover { filter: brightness(1.12); box-shadow: 0 0 0 1.5px rgba(120, 240, 255, 0.9), 0 0 26px rgba(41, 230, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.lb-rank-c { flex: 0 0 auto; width: 60px; height: 44px; }
.lb-rank-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; white-space: nowrap; }
.lb-rank-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 800 12px/1.1 var(--font-brand); letter-spacing: 0.14em; color: #e4fbff; text-shadow: 0 0 8px rgba(41, 230, 255, 0.75); padding: 8px 8px; margin: -8px -8px; }
.lb-rank-x { flex: 0 0 auto; font: 700 9.5px/1 var(--font-meter); letter-spacing: 0.08em; color: #9fc4dc; }
.lb-xp { position: relative; display: block; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); overflow: hidden; }
.lb-xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #29e6ff, #ffe27a); box-shadow: 0 0 6px rgba(41, 230, 255, 0.85); transition: width 0.6s ease-out; }
/* DAILY BONUS: a neon sign, dark when used ("NEXT IN 5H 12M"), lit and pulsing when ready. */
.lb-daily {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, rgba(20, 16, 44, 0.92), rgba(6, 5, 18, 0.94));
  box-shadow: 0 0 0 1.5px rgba(245, 197, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: filter 0.2s, transform 0.15s;
}
.lb-daily:hover { filter: brightness(1.15); }
.lb-daily-c { flex: 0 0 auto; width: 30px; height: 30px; }
.lb-daily-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-daily-n, .lb-daily-s { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 8px; margin: -10px -8px; }
.lb-daily-n { font: 900 11px/1.1 var(--font-brand); letter-spacing: 0.14em; color: #9c94c0; }
.lb-daily-s { font: 700 9px/1.1 var(--font-meter); letter-spacing: 0.1em; color: #8a86ad; }
/* The double ring is drawn inside the sign's box (cyan, a dark gap, gold), so only the soft glow
   reaches the rank badge and the MISSION LOG beside it. */
.lb-daily.ready {
  background: linear-gradient(180deg, rgba(40, 26, 6, 0.95), rgba(14, 8, 2, 0.95));
  box-shadow: inset 0 0 0 1.5px rgba(41, 230, 255, 0.8), inset 0 0 0 3px rgba(5, 6, 18, 0.9), inset 0 0 0 5px #ffd54a, 0 0 18px rgba(255, 200, 60, 0.5), inset 0 0 16px rgba(255, 200, 60, 0.3);
  animation: dailyPulse 1.6s ease-in-out infinite;
}
.lb-daily.ready .lb-daily-n { color: #fff3c4; text-shadow: 0 0 6px #ffcc33, 0 0 12px #ffaa00; }
.lb-daily.ready .lb-daily-s { color: #c9f8ff; text-shadow: 0 0 6px #29e6ff; }
/* Paused while a machine is open: the hidden lobby kept restyling it every frame. */
body.reduced .lb-daily.ready, .lobby.still .lb-daily.ready, #screen-lobby:not(.on) .lb-daily.ready { animation: none; }
/* MISSION LOG: a trophy and the count. */
.lb-log {
  display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px 0 8px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, rgba(70, 46, 160, 0.6), rgba(20, 12, 60, 0.85));
  box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, filter 0.2s;
}
.lb-log:hover { filter: brightness(1.15); }
.lb-log:active, .lb-daily:active { transform: scale(0.96); }
.lb-log-c { flex: 0 0 auto; width: 26px; height: 30px; }
.lb-log-t { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.lb-log-l { font: 800 9px/1 var(--font-ui); letter-spacing: 0.16em; color: #ddd4ff; }
.lb-log-v { font: 400 15px/1 var(--font-num); color: #ffe27a; text-shadow: 0 0 8px rgba(255, 200, 60, 0.5); font-variant-numeric: tabular-nums; }
/* The header's tighter steps (lobby.js _fitHead), when a row would not fit beside the wordmark.
   They touch the header only: beside the STATION COMET sign (.flank) the sign and log stay whole. */
.lobby.hd1 .lb-btn span, .lobby.hd1 .lb-head .lb-log-l { display: none; }
.lobby.hd1 .lb-btn { padding: 0 11px; }
.lobby.hd2 .lb-rank-x, .lobby.hd2 .lb-head .lb-daily-c { display: none; }
.lobby.hd2 .lb-head .lb-daily { padding: 0 12px; }
.lobby.hd2 .lb-row { gap: 8px; }
.lobby.hd3 .lb-head .lb-daily { padding: 0 9px; }
.lobby.hd3 .lb-head .lb-daily-n { font-size: 9.5px; letter-spacing: 0.08em; }
.lobby.hd3 .lb-head .lb-daily-s { font-size: 8.5px; letter-spacing: 0.05em; }
.lobby.hd3 .lb-head .lb-log { padding: 0 9px 0 6px; gap: 5px; }
.lobby.hd3 .lb-rank { padding-right: 12px; gap: 5px; }
.lobby.hd3 .lb-rank-c { width: 52px; }
.lobby.hd3 .lb-rank-n { font-size: 10.5px; letter-spacing: 0.08em; }
.lobby.hd3 .lb-row { gap: 6px; }
.lobby.hd3 .lb-btns { gap: 6px; }
.lobby.hd3 .lb-bal-l { display: none; }   /* the rank badge needs the room more than the label */
.lobby.hd4 .lb-head .lb-log-c { display: none; }
.lobby.hd4 .lb-head .lb-log { padding: 0 10px; }
.lobby.hd4 .lb-bal { padding: 0 9px 0 5px; gap: 5px; }   /* room for a seven-figure balance */
/* A phone on its side (lobby.js _placeExtras): one header row (the balance, the MISSION LOG, the
   buttons); the rank badge left and the DAILY BONUS sign right of the STATION COMET sign, each in
   the room between the screen's gutter and the sign (--flank-in: half the sign and a gap). */
.lb-flank { display: none; }
.lobby.flank .lb-row-b { display: none; }
.lobby.flank .lb-flank { display: flex; align-items: center; position: absolute; z-index: 3; top: 6px; min-width: 0; }
.lobby.flank .lb-flank-l { left: 0; right: calc(50% + var(--flank-in, 100px)); justify-content: flex-start; }
.lobby.flank .lb-flank-r { right: 0; left: calc(50% + var(--flank-in, 100px)); justify-content: flex-end; }
.lobby.flank .lb-flank > * { flex: 0 1 auto; min-width: 0; }
.lobby.flank .lb-row > .lb-bal { flex: 0 1 auto; min-width: 0; }   /* a long balance shrinks its number */
.lobby.opening .lb-flank { opacity: 0.25; transition: opacity 0.3s; }
@keyframes dailyPulse { 0%, 100% { filter: brightness(0.92); } 50% { filter: brightness(1.3); } }

.lb-ticker {
  position: relative; z-index: 3;   /* above the station sign's chains */
  max-width: 1760px; margin: 10px auto 0; overflow: hidden; white-space: nowrap; border-radius: 8px; padding: 6px 0;
  background: linear-gradient(180deg, rgba(10, 2, 6, 0.9), rgba(26, 6, 14, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 120, 90, 0.35), inset 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 90, 60, 0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.lb-ticker-in { display: inline-flex; animation: ticker 40s linear infinite; will-change: transform; }
.lb-ticker-in span { font: 700 12px/1 var(--font-meter); letter-spacing: 0.18em; color: #ffb347; text-shadow: 0 0 6px rgba(255, 120, 40, 0.9); padding-right: 0.2em; }
/* reduced motion: one item at a time, centred, cross-fading (lobby.js) instead of scrolling */
.lb-ticker.one { text-align: center; padding-left: 12px; padding-right: 12px; -webkit-mask-image: none; mask-image: none; }
.lb-ticker.one .lb-ticker-in { display: block; animation: none; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.6s; }
.lb-ticker.one .lb-ticker-in.fade { opacity: 0; }

/* the floor: station sign, banks of cabinets, the gloss strip */
.lb-floor { position: relative; max-width: var(--floor-max, 1760px); margin: 6px auto 0; display: flex; flex-direction: column; align-items: center; }
.lb-station { position: relative; padding-top: 16px; margin-bottom: 4px; z-index: 2; }
.lbs-chain, .lbg-chain { position: absolute; top: -40px; width: 2px; height: 56px; background: repeating-linear-gradient(180deg, #8a90b0 0 4px, #3a3f5c 4px 6px); }
.lbs-chain.l, .lbg-chain.l { left: 22%; } .lbs-chain.r, .lbg-chain.r { right: 22%; }
.lbs-sign {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 26px 7px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(6, 16, 34, 0.95), rgba(3, 8, 20, 0.95));
  box-shadow: 0 0 0 2px #29e6ff, 0 0 0 4px rgba(4, 10, 22, 0.9), 0 0 0 5px rgba(245, 197, 66, 0.7), 0 0 30px rgba(41, 230, 255, 0.45), inset 0 0 18px rgba(41, 230, 255, 0.25);
}
.lbs-name { font: 900 clamp(13px, 1.5vw, 18px)/1.1 var(--font-brand); letter-spacing: 0.24em; padding-left: 0.24em; color: #e8fdff; text-shadow: 0 0 6px #29e6ff, 0 0 16px #29e6ff, 0 0 30px #0a9dff; }
.lbs-row { display: flex; align-items: center; gap: 8px; }
.lbs-row .coin-ico { width: 22px; height: 22px; }
.lbs-val { font: 400 clamp(22px, 2.4vw, 30px)/1.05 var(--font-num); color: #ffe27a; text-shadow: 0 0 10px rgba(255, 190, 60, 0.75), 0 2px 0 #3a1d00; font-variant-numeric: tabular-nums; }
.lbs-must { font: 700 9px var(--font-meter); letter-spacing: 0.16em; color: #9fe8ff; opacity: 0.85; }
.lb-station.hit .lbs-sign { animation: signHit 0.4s ease-in-out 10 alternate; }

.lb-banks { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.2vw, 36px); width: 100%; padding-top: 6px; }
.lb-bank { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* With six cards a sign may reach 20 px past its bank's cards on each side without widening the
   bank (a one-card bank's long sign pushed six cards off the row). When the row is still too tight
   for the signs, js/ui/lobby.js sets .wrap-signs: they wrap onto two balanced lines. */
.lb-sign { position: relative; margin: 26px 0 20px; }
.lobby.six .lb-sign { margin: 26px -20px 20px; }
.lobby.tight-signs .lbg-plate { padding: 6px 12px; letter-spacing: 0.16em; }
.lobby.wrap-signs .lbg-plate { white-space: normal; text-wrap: balance; text-align: center; max-width: 132px; line-height: 1.25; padding: 5px 12px; letter-spacing: 0.16em; }
.lbg-plate {
  position: relative; padding: 6px 18px 6px; border-radius: 9px; white-space: nowrap;
  background: linear-gradient(180deg, #1d2142, #0b0e24);
  box-shadow: 0 0 0 1.5px #d6ac46, 0 0 0 3px rgba(5, 6, 18, 0.9), 0 0 22px rgba(41, 230, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font: 800 clamp(9px, 0.85vw, 11.5px)/1 var(--font-brand); letter-spacing: 0.22em; color: #c9f6ff; text-shadow: 0 0 6px #29e6ff, 0 0 14px rgba(41, 230, 255, 0.7);
}
.lbg-plate span { padding-left: 0.22em; }
.lb-sign .lbg-chain { top: -26px; height: 28px; }
.lb-cards { display: flex; gap: clamp(10px, 1.1vw, 18px); align-items: flex-end; }
.lb-gloss {
  width: min(100%, 1360px); height: 54px; margin-top: 4px; position: relative; pointer-events: none;
  background: linear-gradient(180deg, rgba(160, 220, 255, 0.35) 0, rgba(160, 220, 255, 0.35) 1px, rgba(14, 18, 44, 0.85) 1px, rgba(6, 8, 22, 0.25) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* cabinet cards: one shared chrome bezel with a chasing LED edge in the machine's accent */
.mc {
  position: relative; width: var(--card-w); padding: 5px; border-radius: 18px; cursor: pointer; outline: none; flex: 0 0 auto;
  transform: perspective(1100px) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s, opacity 0.3s;
  animation: mcIn 0.7s var(--d, 0ms) both cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The gloss-strip reflection, on large screens only (phones never get it; 'none' is not a valid
 * -webkit-box-reflect value, so it is switched off with 'unset'). */
@media (min-width: 761px) and (min-height: 501px) {
  .mc { -webkit-box-reflect: below 3px linear-gradient(transparent 80%, rgba(255, 255, 255, 0.15)); }
  .mc.zooming { -webkit-box-reflect: unset; }
}
.mc:hover, .mc:focus-visible { --lift: -6px; filter: brightness(1.08); }
.mc:focus-visible { outline: 2px solid #ffe27a; outline-offset: 4px; }
.mc-led { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; pointer-events: none; background: rgba(255, 255, 255, 0.14);
  -webkit-mask: radial-gradient(circle, #000 1.6px, transparent 2.3px) 1px 1px / 7px 7px; mask: radial-gradient(circle, #000 1.6px, transparent 2.3px) 1px 1px / 7px 7px; }
.mc-led::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%;
  background: conic-gradient(from 0deg, transparent 0 48%, var(--acc) 62%, #ffffff 70%, var(--acc) 76%, transparent 86%, transparent 100%);
  /* The chase runs on hover, focus and in attract mode only: a rotating gradient under a dot mask
   * repaints the card every frame, which costs phones their frame rate. */
  animation: spin 1.8s linear infinite paused;
}
.mc:hover .mc-led::before, .mc:focus-visible .mc-led::before, .mc.attract-on .mc-led::before { animation-play-state: running; }
.mc-bezel {
  position: relative; display: flex; flex-direction: column; gap: 5px; padding: 7px; border-radius: 14px;
  background: linear-gradient(165deg, #f6f8ff 0%, #a7aed0 14%, #4c5378 30%, #e3e7f8 46%, #737ba0 62%, #2c3150 80%, #b9c0dc 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6), 0 0 22px var(--acc-a), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.mc-bezel > * { position: relative; }
.mc-topper {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; min-height: 20px;
  background: radial-gradient(ellipse at 50% 0%, #b8102c, #4a0010 80%);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 110, 0.65), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.mc-tp-l { font: 900 10px/1 var(--font-serif); letter-spacing: 0.14em; color: #ffe7a0; text-shadow: 0 1px 0 #000; }
.mc-tp-v { font: 400 calc(var(--tp-fs, 13px) * var(--tp-k, 1))/1 var(--font-num); color: #fff3c4; text-shadow: 0 0 8px rgba(255, 210, 90, 0.9), 0 1px 0 #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-marquee { aspect-ratio: 10 / 3; border-radius: 6px; overflow: hidden; background: #0a0718; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.4); }
.mc-screen { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0b0820; box-shadow: inset 0 0 0 2px #0a0a14, 0 1px 0 rgba(255, 255, 255, 0.5); }
.mc-mq-c, .mc-scr-c { width: 100%; height: 100%; }
.mc-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%), radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.5), transparent 60%); box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6); }
.mc-soon-plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); padding: 4px 12px; border-radius: 6px; white-space: nowrap; font: 400 clamp(11px, 1vw, 14px)/1 var(--font-num); color: #3a1d00; background: var(--gold-grad); box-shadow: 0 0 0 2px #2a1400, 0 6px 14px rgba(0, 0, 0, 0.6); letter-spacing: 0.06em; }
/* Fixed heights (min-height) so every card is as tall as its neighbours, tagline or not. */
.mc-tag { min-height: 1.25em; padding: 1px 2px 0; font: 800 calc(var(--tag-fs, 10.5px) * var(--tag-k, 1))/1.25 var(--font-ui); letter-spacing: 0.04em; color: #10132a; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.mc-chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; min-height: 17px; }
.mc-chip { flex: 0 0 auto; font: 800 calc(var(--chip-fs, 9px) * var(--chip-k, 1))/1 var(--font-ui); letter-spacing: 0.08em; padding: calc(var(--chip-py, 4px) * var(--chip-k, 1)) calc(var(--chip-px, 7px) * var(--chip-k, 1)); border-radius: 999px; color: #fff; background: linear-gradient(180deg, #2a2f52, #10132a); box-shadow: inset 0 0 0 1px var(--acc-a); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mc-vol { display: flex; gap: 2px; min-width: 0; }
.mc-pip { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a6f8c, #2a2e48); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.mc-pip.on { background: radial-gradient(circle at 35% 30%, #fffbe0, #f5c542 50%, #8a5a00); box-shadow: 0 0 5px rgba(255, 200, 60, 0.8), inset 0 0 0 1px rgba(90, 50, 0, 0.6); }
.mc-badge { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.mc-badge .coin-ico { width: 22px; height: 22px; }
/* Every card's GRAND, tagline and chips read whole (js/ui/lobby.js _fitCards, one look for the whole
   row): the GRAND over its value (--tp-k shrinks the value if it must), the tagline smaller
   (--tag-k) or on two balanced lines, the chips smaller (--chip-k) or on two rows. */
.lobby.tp-stack .mc-topper { flex-direction: column; justify-content: center; gap: 2px; padding: 3px 5px; }
.lobby.tp-stack .mc-tp-l { font-size: 8.5px; letter-spacing: 0.12em; }
.lobby.tag2 .mc-tag, .lobby.tag3 .mc-tag { white-space: normal; text-wrap: balance; height: 2.5em; }
.lobby.tag3 .mc-tag { height: 3.75em; }
.lobby.chip2 .mc-chips { flex-wrap: wrap; align-content: flex-start; row-gap: 3px; height: calc((var(--chip-fs, 9px) + 2 * var(--chip-py, 4px)) * 2 * var(--chip-k, 1) + 3px); }
/* The centred coin needs room between the pips and PLAY: on a card under 170 px it sat on PLAY
   (the container is the card's content box, 10 px narrower). */
.mc { container: mc / inline-size; }
@container mc (max-width: 159px) { .mc-badge { display: none; } }
.mc-play { font: 400 12px/1 var(--font-num); letter-spacing: 0.1em; padding: 5px 10px; border-radius: 8px; color: #3a1d00; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.45); }
.mc:hover .mc-play, .mc:focus-visible .mc-play { filter: brightness(1.15); box-shadow: 0 0 14px rgba(255, 200, 60, 0.8); }
.mc-soon { cursor: default; }
.mc-soon .mc-bezel { filter: saturate(0.55) brightness(0.85); }
.mc-soon .mc-play { color: #d9ceff; background: linear-gradient(180deg, #3a2f6e, #1c1640); box-shadow: inset 0 0 0 1px rgba(170, 140, 255, 0.45); }
.mc-soon:hover { --lift: 0px; filter: none; }
/* the candle: a tower light on the cabinet top, flashing after this machine's MAJOR or GRAND */
.mc-candle { position: absolute; left: 50%; top: -19px; width: 14px; height: 20px; margin-left: -7px; display: flex; flex-direction: column; gap: 1px; z-index: 2; }
.mc-candle::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: -3px; height: 4px; border-radius: 1px; background: linear-gradient(180deg, #c9cfe6, #4c5378); }
.mc-candle i { flex: 1; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--acc) 30%, #111); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.mc-candle i.c2 { border-radius: 2px; background: #3a3420; }
.mc-candle.lit i.c1 { background: var(--acc); box-shadow: 0 0 10px var(--acc), 0 0 22px var(--acc); animation: candle 0.8s ease-in-out infinite alternate; }
.mc-candle.lit.grand i.c2 { background: #ffd84d; box-shadow: 0 0 10px #ffd84d; animation: candle 0.8s ease-in-out 0.4s infinite alternate; }
.lobby.attract .mc-candle i.c1 { animation: candleChase 2.4s linear var(--d, 0ms) infinite; }
.mc.attract-on .mc-topper { animation: topperFlash 0.5s ease-in-out 3 alternate; }
.mc.attract-on .mc-marquee { box-shadow: 0 0 22px var(--acc), inset 0 0 0 1px rgba(0, 0, 0, 0.7); }
/* opening: the card presses in, then a curtain with the machine's logo covers the switch */
.mc.pressing { transform: scale(0.965) !important; filter: brightness(1.25); transition: transform 0.14s ease-out, filter 0.14s; z-index: 5; }
.launch-curtain {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(70, 52, 150, 0.45) 0%, transparent 58%), radial-gradient(ellipse at 50% 45%, var(--lc-bg) 0%, var(--lc-bg) 40%, #020108 100%);
  opacity: 0; transition: opacity 0.3s ease-out;
}
.launch-curtain.on { opacity: 1; }
.launch-curtain.off { opacity: 0; transition: opacity 0.45s ease-in; }
.lc-logo { filter: drop-shadow(0 0 22px var(--lc-glow)); transform: scale(0.94); opacity: 0; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s; }
.launch-curtain.on .lc-logo { transform: scale(1); opacity: 1; }
.lc-sweep { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%); transform: translateX(-100%); }
.launch-curtain.on .lc-sweep { animation: lcSweep 0.9s 0.15s ease-out forwards; }
@keyframes lcSweep { to { transform: translateX(100%); } }
body.reduced .launch-curtain .lc-sweep { display: none; }
/* (the old zoom, kept harmless) */
.mc.zooming { transform: var(--zoom) !important; transition: transform 0.48s cubic-bezier(0.55, 0, 0.25, 1), opacity 0.48s; z-index: 100; }
.lobby.opening .mc:not(.zooming), .lobby.opening .lb-head, .lobby.opening .lb-hall, .lobby.opening .lb-station, .lobby.opening .lb-sign { opacity: 0.25; transition: opacity 0.3s; }
.lobby.still .mc-led::before, .lobby.still .lb-ticker-in, .lobby.still .mc-candle i, .lobby.still .mc-topper { animation: none !important; }
body.reduced .lb-ticker-in, body.reduced .mc.attract-on .mc-topper { animation: none; }

/* Hall of Hits */
.lb-hall {
  max-width: 780px; margin: 18px auto 0; padding: 14px clamp(12px, 2vw, 22px) 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 14, 48, 0.94), rgba(6, 6, 20, 0.94));
  box-shadow: 0 0 0 1.5px rgba(245, 197, 66, 0.6), 0 0 0 4px rgba(5, 5, 16, 0.9), 0 0 30px rgba(41, 230, 255, 0.14), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.lbh-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lbh-head h2 { margin: 0; font: 900 clamp(15px, 1.7vw, 20px)/1 var(--font-brand); letter-spacing: 0.3em; padding-left: 0.3em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7)); }
.lbh-star { width: 12px; height: 12px; background: #f5c542; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #f5c542); }
.lbh-sub { margin: 5px 0 8px; text-align: center; font: 600 11px var(--font-ui); color: #9a92bf; letter-spacing: 0.06em; }
.lbh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lbh-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.lbh-n { font: 700 11px var(--font-meter); color: #6d6893; text-align: right; }
.lbh-what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 12.5px var(--font-ui); color: #cfc7ef; }
.lbh-what b { font-weight: 900; letter-spacing: 0.06em; color: #fff3c4; }
.lbh-amt { font: 400 14px var(--font-num); color: #ffe27a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lbh-ago { font: 700 9.5px var(--font-meter); letter-spacing: 0.1em; color: #8d86ad; white-space: nowrap; }
.lbh-row.k-jp.t-grand b { color: #ffd84d; } .lbh-row.k-jp.t-major b { color: #e2a8ff; } .lbh-row.k-jp.t-minor b { color: #9fd4ff; } .lbh-row.k-jp.t-mini b { color: #9dffc0; }
.lbh-row.k-st b { color: #bff6ff; text-shadow: 0 0 8px rgba(41, 230, 255, 0.8); }
.lbh-empty { padding: 10px; text-align: center; font: 600 12.5px/1.5 var(--font-ui); color: #9a92bf; }
.lb-foot { max-width: 1760px; margin: 22px auto 0; text-align: center; color: #8d86ad; font: 600 12px/1.5 var(--font-ui); letter-spacing: 0.04em; }
.lb-foot p { margin: 2px 0; }
.lb-ver { font-size: 10px; opacity: 0.6; }

/* phones: the flagship full width on top, then two columns with the bank signs as headers
   (portrait only: a small phone on its side, 667x375, keeps the row of cabinets below) */
@media (max-width: 760px) and (min-height: 501px), (max-width: 760px) and (orientation: portrait) {
  .lb-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .lb-wm { width: min(330px, 86vw); height: 60px; }
  .lb-side { margin-left: 0; grid-template-columns: minmax(0, 1fr); }
  .lb-row { gap: 8px; }
  .lb-row > .lb-bal { flex: 0 1 auto; min-width: 0; justify-content: center; padding: 0 14px 0 8px; }
  .lb-row > .lb-rank { flex: 1 1 0; }
  .lb-row > .lb-daily { flex: 1 1 auto; min-width: 0; }
  .lb-bal-l { display: none; }
  .lb-bal-v { font-size: 20px; }
  .lb-btn { padding: 0 11px; height: 44px; }
  .lb-btn span { display: none; }
  .lb-btn .ico { width: 20px; height: 20px; }
  .lb-banks { flex-direction: column; align-items: stretch; gap: 4px; }
  .lb-bank.has-flag { order: -1; }
  .lb-bank { align-items: stretch; }
  .lb-sign, .lobby.six .lb-sign { align-self: center; margin: 22px 0 16px; }
  .lb-cards, .lb-cards.n1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .lb-cards.n1 > .mc, .lb-cards.n2 > .mc-flag ~ .mc:last-child, .lb-cards.n2 > .mc:first-child:not(.mc-flag):has(+ .mc-flag) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  /* An odd last card in a bank without the flagship (three video machines) is centred too. */
  .lb-bank:not(.has-flag) .lb-cards > .mc:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .mc { width: auto; transform: perspective(1100px) translateY(var(--lift, 0px)); }
  .mc-flag { grid-column: 1 / -1; order: -1; }
  .mc-flag .mc-tp-v { --tp-fs: 16px; } .mc-flag .mc-tp-l { font-size: 11px; }
  .mc-flag .mc-tag { --tag-fs: 11px; } .mc-flag .mc-chip { --chip-fs: 10px; --chip-py: 5px; --chip-px: 8px; }
  .mc-tp-v { --tp-fs: 11px; } .mc-tp-l { font-size: 9px; letter-spacing: 0.08em; }
  .mc-tag { --tag-fs: 9.5px; }
  .mc-chip { --chip-px: 6px; }
  /* The full-width flagship keeps one tagline line and one chip row when the half cards need two. */
  .lobby.tag2 .mc-flag .mc-tag, .lobby.tag3 .mc-flag .mc-tag { height: auto; }
  .lobby.chip2 .mc-flag .mc-chips { height: auto; }
  .mc:not(.mc-flag) .mc-chip:nth-child(n+3) { display: none; }   /* two chips fit a half-width card */
  .lb-gloss { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .lb-head { flex-wrap: nowrap; }
  .lb-wm { width: 240px; height: 50px; }
  .lb-bal-l { display: none; }
  .lb-bal-v { font-size: 18px; }
  .lb-btn { height: 44px; padding: 0 11px; }
  .lb-btn span { display: none; }
  .lobby, .lobby.six { --card-w: clamp(100px, calc((100vw - 150px) / (var(--cards, 5) * 1.06)), 190px); }
  .mc-tag, .mc-chips { display: none; }
  /* narrow cards: the GRAND label over its value (side by side they ran past the plate) */
  .mc-topper { flex-direction: column; justify-content: center; gap: 2px; padding: 3px 5px; }
  .mc-tp-l { font-size: 8px; letter-spacing: 0.12em; }
  .mc-tp-v { --tp-fs: 12px; }
  .mc-badge { display: none; }   /* narrow cards: the centred coin would sit on PLAY */
  .lb-ticker { margin-top: 6px; padding: 4px 0; }
  .lb-station { padding-top: 6px; }
  .lbs-sign { padding: 4px 18px; }
  .lbs-name { font-size: 11px; } .lbs-val { font-size: 18px; } .lbs-must { display: none; }
  .lb-sign, .lobby.six .lb-sign { margin: 14px 0 12px; }
}
/* the smallest phones on their side: room for PLAY only in the card's foot */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .mc-vol { display: none; }
  .mc-foot { justify-content: center; }
  /* Six cards on 667 px: smaller cards (the long bank signs wrap when the row needs it, .wrap-signs). */
  .lobby.six { --card-w: clamp(86px, calc((100vw - 150px) / (var(--cards, 6) * 1.06)), 190px); }
  .lbg-plate { padding: 5px 12px; letter-spacing: 0.16em; }
  /* the header on one line: smaller wordmark, tagline and balance */
  .lb-wm { width: 200px; height: 42px; }
  .lb-aboard { letter-spacing: 0.14em; padding-left: 0.14em; white-space: nowrap; }
  .lb-head { column-gap: 12px; }
  .lb-side { row-gap: 6px; }
  .lb-row { gap: 8px; }
  .lb-bal { padding: 0 12px 0 7px; gap: 7px; }
  .lb-bal .coin-ico { width: 22px; height: 22px; }
  .lb-bal-v { font-size: 16px; }
  .lb-btns { gap: 6px; }
  .lb-btn { padding: 0 10px; }
}

/* Tablets in portrait (761-1100 px wide): six cards in one row came out about 100 px wide, the
   GRAND values and the signs ran over each other. The banks wrap onto two rows instead, sized for
   three cards a row, and the row's curve straightens. */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .lobby.six { --card-w: clamp(150px, min(calc((100vw - 190px) / 3.3), calc((100vh - 400px) * 0.62)), 300px); }
  .lobby.six .lb-banks { flex-wrap: wrap; row-gap: 6px; }
  .lobby.six .mc { --ry: 0deg !important; }
  /* (the first row's gloss reflections fell on the second row's sign) */
  .lobby.six .lb-bank:not(:last-child) .mc { -webkit-box-reflect: unset; }
}

/* ---- the cabinet ------------------------------------------------------------------------- */

.cabinet {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; color: var(--m-text, #fff6d8);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top" "game" "msg" "deck";
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.cab-scene { position: absolute; inset: 0; z-index: -1; background: var(--m-bg, #0b0820); }
.cab-bg { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.8s ease; }
.cab-bg.on { opacity: 1; }
.cab-amb { position: absolute; left: 0; top: 0; pointer-events: none; }
.cab-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 20%, transparent 74%, rgba(0, 0, 0, 0.55) 100%);
}
.cabinet.mode-flash .cab-scene::after { content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none; animation: modeFlash 0.7s ease-out forwards; }
body.reduced .cabinet.mode-flash .cab-scene::after { display: none; }

/* top box: logo + jackpot plaques */
.cab-top {
  grid-area: top; display: grid; align-items: center; gap: clamp(8px, 1.4vw, 24px);
  grid-template-columns: minmax(0, 1fr) minmax(200px, 38vw) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: clamp(96px, 17.5vh, 196px); padding: 8px clamp(10px, 2vw, 32px) 0;
}
.cabinet.no-jp .cab-top { grid-template-columns: minmax(0, 1fr) minmax(200px, 52vw) minmax(0, 1fr); }
.cab-logo { height: 100%; min-width: 0; min-height: 0; position: relative; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.cab-logo-c { position: absolute; left: 0; top: 0; }
.cab-jps { min-width: 0; }
.cab-jps.left, .cab-jps.right { display: flex; flex-direction: column; justify-content: center; gap: clamp(5px, 1vh, 10px); }
.cab-jps.left { align-items: flex-end; }
.cab-jps.right { align-items: flex-start; }
.cab-jps.stack { display: none; }

.jp-plaque {
  --jp-a: #38b6ff; --jp-b: #0a2f6b; --jp-c: #cdeeff; --jp-glow: #2fa8ff;
  position: relative; width: min(100%, 310px); padding: 2px; border-radius: 13px;
  background: var(--gold-edge);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 16px var(--jp-glow);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--jp-glow) 50%, transparent);
}
.jp-in {
  position: relative; overflow: hidden; border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  padding: 0.28em 0.85em 0.32em; font-size: clamp(13px, 1.95vh, 22px);
  background: radial-gradient(ellipse 120% 140% at 50% -10%, var(--jp-a) 0%, var(--jp-a) 30%, var(--jp-b) 100%);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.jp-in::before { content: ''; position: absolute; left: 3%; right: 3%; top: 0; height: 48%; border-radius: 0 0 50% 50% / 0 0 30% 30%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.04)); pointer-events: none; }
.jp-label { position: relative; font: 900 0.7em/1 var(--font-serif); letter-spacing: 0.16em; color: var(--jp-c); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.4); white-space: nowrap; }
.jp-value { position: relative; flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; font: 400 1.28em/1.12 var(--font-num); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 12px var(--jp-glow); font-variant-numeric: tabular-nums; }
.jp-top { width: min(100%, 350px); }
.jp-top .jp-in { font-size: clamp(15px, 2.45vh, 28px); }
.jp-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); transform: translateX(-130%); animation: sheen 6s ease-in-out infinite; }
.cab-jps > .jp-plaque:nth-child(2) .jp-sheen { animation-delay: 1.4s; }
.cab-jps.right > .jp-plaque:nth-child(1) .jp-sheen { animation-delay: 0.7s; }
.cab-jps.right > .jp-plaque:nth-child(2) .jp-sheen { animation-delay: 2.1s; }
.jp-plaque.ticking .jp-value { color: #fffbe6; }
.jp-plaque.hit { animation: jpHit 0.45s ease-in-out 8 alternate; }

/* game area */
.cab-game { grid-area: game; position: relative; min-height: 0; }
.cab-reelwrap { position: absolute; }
.cab-glass { position: absolute; overflow: hidden; border-radius: calc(var(--frame-t, 16px) * 0.45); background: linear-gradient(180deg, var(--m-reel1, #1a1238), var(--m-reel2, #07051a)); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7); }
.cab-reels { position: absolute; left: 0; top: 0; touch-action: none; }
.cab-frame, .cab-lights { position: absolute; left: 0; top: 0; pointer-events: none; }
.cab-reelwrap::after {
  content: ''; position: absolute; inset: -4px; border-radius: calc(var(--frame-t, 16px) * 1.3); pointer-events: none; opacity: 0;
  box-shadow: 0 0 34px 6px var(--m-glow, #ffcc33), inset 0 0 22px 2px var(--m-glow, #ffcc33);
}
.cab-reelwrap.pulse-win::after { animation: framePulse 1.3s ease-out; }
.cab-reelwrap.pulse-feature::after { box-shadow: 0 0 44px 10px var(--m-accent, #ff3b6b), inset 0 0 26px 4px var(--m-accent, #ff3b6b); animation: framePulse 2s ease-out; }
.cab-reelwrap.antic::after { box-shadow: 0 0 40px 8px var(--m-accent, #ff3b6b), inset 0 0 24px 3px var(--m-accent, #ff3b6b); animation: anticPulse 0.42s ease-in-out infinite alternate; }
body.reduced .cab-reelwrap.antic::after { animation: none; opacity: 0.8; }
.cab-modebadge {
  position: absolute; left: 50%; top: 0; z-index: 3; display: none; transform: translate(-50%, -62%);
  padding: 0.35em 1.6em 0.4em; border-radius: 10px; white-space: nowrap;
  font: 400 clamp(13px, 2.2vh, 22px)/1 var(--m-font-num, var(--font-num)); letter-spacing: 0.08em; color: #2a1200;
  background: var(--gold-grad);
  box-shadow: 0 0 0 2px #2a1400, 0 0 0 3.5px var(--m-frame1, #f7e08a), 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 22px var(--m-glow, #ffcc33);
  /* grows about where it ends up (its centre after the translate) */
  transform-origin: 0% -12%; animation: badgeIn 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.cab-modebadge.on { display: block; }
.cab-winpop {
  position: absolute; left: 50%; top: 50%; z-index: 3; display: inline-grid; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(0.5); transition: opacity 0.25s, transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
  font: 400 clamp(26px, calc(var(--cell, 120px) * 0.5), 110px)/1 var(--m-font-num, var(--font-num));
  filter: drop-shadow(0 0 18px var(--m-glow, #ffcc33));
}
.cab-winpop.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cab-feature { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cab-feature > * { pointer-events: auto; }
.cab-stage {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;
}
/* The pick board or wheel plays on a dark pool whose top and bottom edges fade out; the reels step
   aside meanwhile (through a 90% sheet their values showed between the tiles). */
.cab-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 72% 70% at 50% 50%, rgba(16, 9, 46, 0.92), rgba(6, 3, 22, 0.86) 70%, rgba(2, 1, 10, 0.7));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.cab-stage.on { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.cab-reelwrap, .cab-feature { transition: opacity 0.3s ease-out; }
.cabinet.staged .cab-reelwrap, .cabinet.staged .cab-feature { opacity: 0; }

/* message bar */
.cab-msg {
  grid-area: msg; justify-self: center; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0;
  width: min(calc(100% - 24px), 920px); height: clamp(26px, 4.3vh, 40px); padding: 0 18px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.8));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.cab-msgtext { flex: 0 1 auto; min-width: 0; font: 800 calc(clamp(11px, 1.75vh, 16px) * var(--msg-k, 1))/1 var(--font-ui); letter-spacing: 0.14em; color: #f3ecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-msgtext.t-win { color: var(--m-meter, #ffd34d); text-shadow: 0 0 10px var(--m-glow-a, rgba(255, 200, 60, 0.45)); }
.cab-msgtext.t-warn { color: #ff9a8f; }
.cab-msgtext.in { animation: msgIn 0.3s ease-out; }
/* A short bar (phones) first shrinks both texts (cabinet.js _fitMsg sets --msg-k); past that the
   message ellipsizes and the counter keeps its count, the round's key number (RESPINS 2). */
.cab-counter { display: none; flex: 0 0 auto; max-width: 64%; overflow: hidden; text-overflow: ellipsis; padding: 0.3em 0.9em 0.25em; border-radius: 999px; white-space: nowrap; font: 400 calc(clamp(11px, 1.75vh, 16px) * var(--msg-k, 1))/1 var(--font-num); color: #2a1200; background: var(--gold-grad); box-shadow: 0 0 14px rgba(255, 200, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.cab-counter.on { display: inline-block; }
.cab-counter.tick { animation: counterTick 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* deck: buttons and meters */
.cab-deck {
  grid-area: deck; position: relative; display: grid; align-items: center; column-gap: clamp(6px, 0.85vw, 14px);
  grid-template-columns: auto auto minmax(0, 1.3fr) auto minmax(96px, 0.75fr) auto minmax(0, 1.3fr) auto auto auto auto;
  grid-template-areas: "lobby info bal minus bet plus win sound turbo auto spin";
  height: clamp(76px, 12vh, 112px); margin-top: 8px; padding: 0 clamp(10px, 2vw, 30px);
  background: linear-gradient(90deg, transparent, var(--m-frame1, #f7e08a), var(--m-frame2, #c8962a), var(--m-frame1, #f7e08a), transparent) top / 100% 2px no-repeat, linear-gradient(180deg, rgba(16, 11, 38, 0.9), rgba(4, 3, 12, 0.97));
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45);
}
body.lefty .cab-deck { grid-template-columns: auto auto auto auto minmax(0, 1.3fr) auto minmax(96px, 0.75fr) auto minmax(0, 1.3fr) auto auto; grid-template-areas: "spin auto turbo sound win minus bet plus bal info lobby"; }
.b-lobby { grid-area: lobby; } .b-info { grid-area: info; } .m-bal { grid-area: bal; } .b-minus { grid-area: minus; } .m-bet { grid-area: bet; }
.b-plus { grid-area: plus; } .m-win { grid-area: win; } .b-sound { grid-area: sound; } .b-turbo { grid-area: turbo; } .b-auto { grid-area: auto; } .cab-spin { grid-area: spin; }

.cab-btn {
  --s: clamp(44px, 5.6vh, 60px);
  position: relative; width: var(--s); height: var(--s); border-radius: 50%; justify-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #f2ecff;
  background: radial-gradient(circle at 50% 28%, #43367a 0%, #18123a 58%, #0a0818 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px #050310, 0 0 0 3.5px var(--m-frame2, #c8962a), 0 7px 14px rgba(0, 0, 0, 0.55);
  transition: transform 0.12s, filter 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.cab-btn .ico { width: 40%; height: 40%; }
.cab-btn .btn-label { font: 800 8px/1 var(--font-ui); letter-spacing: 0.1em; opacity: 0.85; }
.cab-btn:hover { filter: brightness(1.2); }
.cab-btn:active { transform: scale(0.92); }
.cab-btn.on { color: #2a1200; background: radial-gradient(circle at 50% 28%, #fff6c8 0%, var(--m-meter, #ffd34d) 55%, #8a5a00 100%); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.6), 0 0 0 2px #050310, 0 0 0 3.5px var(--m-frame1, #f7e08a), 0 0 18px var(--m-glow, #ffcc33); }
.cab-btn.off { color: #ff9a8f; }
.cab-btn.dis, .cabinet.busy .b-minus, .cabinet.busy .b-plus, .cabinet.busy .b-lobby, .cabinet.busy .b-info, .cabinet.autoplay .b-minus, .cabinet.autoplay .b-plus { opacity: 0.38; filter: grayscale(0.7); }
.b-minus .ico, .b-plus .ico { width: 46%; height: 46%; stroke-width: 3; }

.meter {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 12px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.38));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.m-label { font: 800 clamp(8px, 1.15vh, 11px)/1 var(--font-ui); letter-spacing: 0.26em; color: var(--m-meter, #ffd34d); opacity: 0.8; padding-left: 0.26em; }
.m-val { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; font: 800 clamp(16px, 3.1vh, 30px)/1.15 var(--font-meter); color: #fff; text-shadow: 0 0 12px var(--m-glow-a, rgba(255, 200, 60, 0.45)), 0 2px 0 rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.m-win.lit .m-val { color: var(--m-meter, #ffd34d); text-shadow: 0 0 16px var(--m-glow, #ffcc33), 0 2px 0 rgba(0, 0, 0, 0.6); }
.m-bal .coin-ico, .m-bet .coin-ico, .m-win .coin-ico { position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
/* The centred value keeps clear of the coin (and of the bet's caret): on a narrow meter (1024 px)
   the coin sat on the first digit. The value shrinks to fit instead. */
.m-bal .m-val, .m-bet .m-val, .m-win .m-val { box-sizing: border-box; padding: 0 20px; }
.m-bet { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-meter, #ffd34d) 35%, transparent), inset 0 2px 10px rgba(0, 0, 0, 0.7); }
.m-bet.bump .m-val { animation: bump 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* SPIN */
.cab-spin {
  --spin: clamp(92px, 15.5vh, 138px);
  position: relative; width: var(--spin); height: var(--spin); margin-top: calc(var(--spin) * -0.3); border-radius: 50%; justify-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.spin-glow { position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--m-glow, #ffcc33) 0%, transparent 66%); opacity: 0.55; animation: breathe 2.6s ease-in-out infinite; }
.spin-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--m-frame1, #f7e08a), var(--m-frame3, #5e3b00), var(--m-frame1, #f7e08a), var(--m-frame2, #c8962a), var(--m-frame3, #5e3b00), var(--m-frame1, #f7e08a));
  box-shadow: 0 0 0 2px #050310, 0 12px 26px rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.spin-dome {
  position: absolute; inset: 9%; border-radius: 50%; transition: background 0.25s;
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, var(--m-accent, #ff3b6b) 34%, #2a0010 100%);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--m-accent, #ff3b6b) 35%, #fff) 0%, var(--m-accent, #ff3b6b) 38%, color-mix(in srgb, var(--m-accent, #ff3b6b) 35%, #000) 100%);
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.45), inset 0 5px 10px rgba(255, 255, 255, 0.35), 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.spin-shine { position: absolute; left: 24%; right: 24%; top: 15%; height: 28%; border-radius: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)); }
.spin-label { position: relative; font: 400 clamp(19px, 3.1vh, 29px)/1 var(--font-num); letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.35); }
.spin-sub { position: relative; margin-top: 3px; min-height: 1px; font: 800 clamp(9px, 1.3vh, 12px)/1 var(--font-meter); letter-spacing: 0.08em; color: #fff; opacity: 0.9; }
.cab-spin:hover .spin-dome { filter: brightness(1.12); }
.cab-spin.press .spin-dome, .cab-spin.press .spin-label { animation: press 0.24s ease-out; }
.cab-spin[data-state="stop"] .spin-dome, .cab-spin[data-state="auto"] .spin-dome { background: radial-gradient(circle at 50% 32%, #ffd0c8 0%, #e8202a 38%, #4a0004 100%); }
.cab-spin[data-state="stop"] .spin-glow, .cab-spin[data-state="auto"] .spin-glow { animation: none; opacity: 0.3; background: radial-gradient(circle, #ff4040 0%, transparent 66%); }
.cab-spin[data-state="wait"] .spin-dome { background: radial-gradient(circle at 50% 32%, #eaffd8 0%, #2bc64a 38%, #023a10 100%); }
.cab-spin[data-state="wait"] .spin-glow { animation: breathe 0.9s ease-in-out infinite; background: radial-gradient(circle, #6dff7a 0%, transparent 66%); }
body.reduced .spin-glow { animation: none; }

/* phone portrait ---------------------------------------------------------------------- */
.cabinet.portrait { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.cabinet.portrait .cab-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; padding: 6px 10px 0; gap: 6px; }
.cabinet.portrait .cab-logo { height: clamp(70px, 14vh, 150px); margin: 0 56px; }
.cabinet.portrait .cab-jps.left, .cabinet.portrait .cab-jps.right { display: none; }
.cabinet.portrait .cab-jps.stack { display: grid; grid-template-columns: repeat(var(--jp-rest, 3), minmax(0, 1fr)); gap: 6px; }
.cabinet.portrait .jp-plaque { width: auto; }
.cabinet.portrait .jp-plaque.jp-top { grid-column: 1 / -1; justify-self: center; width: min(100%, 360px); }
.cabinet.portrait .jp-plaque:not(.jp-top) .jp-in { flex-direction: column; gap: 3px; padding: 0.35em 0.4em 0.3em; font-size: clamp(12px, 1.9vh, 18px); }
.cabinet.portrait .jp-plaque:not(.jp-top) .jp-value { text-align: center; width: 100%; flex: none; }
.cabinet.portrait .cab-msg { width: calc(100% - 16px); height: 30px; padding: 0 12px; }
.cabinet.portrait .cab-deck {
  position: static; height: auto; margin-top: 6px; padding: 8px 10px 10px; row-gap: 9px; column-gap: 8px;
  grid-template-columns: 52px minmax(0, 1fr) auto minmax(0, 1fr) 52px; grid-template-rows: auto auto;
  grid-template-areas: "bal bal bet win win" "auto minus spin plus turbo";
}
.cabinet.portrait .m-bet { width: 104px; }
.cabinet.portrait .meter { padding: 6px 8px; }
.cabinet.portrait .m-val { font-size: clamp(15px, 2.4vh, 22px); }
.cabinet.portrait .m-bal .coin-ico, .cabinet.portrait .m-bet .coin-ico, .cabinet.portrait .m-win .coin-ico { display: none; }
.cabinet.portrait .m-bal .m-val, .cabinet.portrait .m-bet .m-val, .cabinet.portrait .m-win .m-val { padding: 0; }
.cabinet.portrait .cab-spin { --spin: clamp(84px, 11.5vh, 112px); margin-top: 0; }
.cabinet.portrait .b-minus, .cabinet.portrait .b-plus { --s: 54px; }
.cabinet.portrait .b-auto, .cabinet.portrait .b-turbo { --s: 50px; }
/* 44 px: the smallest comfortable touch target */
.cabinet.portrait .b-lobby, .cabinet.portrait .b-info, .cabinet.portrait .b-sound { --s: 44px; position: absolute; top: calc(var(--safe-t) + 8px); }
.cabinet.portrait .b-lobby { left: calc(var(--safe-l) + 8px); }
.cabinet.portrait .b-sound { right: calc(var(--safe-r) + 8px); }
.cabinet.portrait .b-info { left: calc(var(--safe-l) + 8px); top: calc(var(--safe-t) + 60px); }
.cabinet.portrait .b-lobby .btn-label, .cabinet.portrait .b-info .btn-label { display: none; }
.cabinet.portrait .b-lobby .ico, .cabinet.portrait .b-info .ico, .cabinet.portrait .b-sound .ico { width: 48%; height: 48%; }

/* short landscape (phones on their side): controls in a rail on the right ---------------- */
.cabinet.compact { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top deck" "game deck" "msg deck"; }
body.lefty .cabinet.compact { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "deck top" "deck game" "deck msg"; }
.cabinet.compact .cab-top { height: clamp(52px, 17vh, 84px); padding: 4px 8px 0; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(130px, 30vw) minmax(0, 1fr); }
.cabinet.compact .cab-jps.left, .cabinet.compact .cab-jps.right { gap: 3px; }
.cabinet.compact .jp-in, .cabinet.compact .jp-top .jp-in { font-size: clamp(10px, 3vh, 13px); padding: 0.2em 0.6em; }
.cabinet.compact .cab-msg { height: 24px; margin-bottom: 4px; width: calc(100% - 16px); }
.cabinet.compact .cab-msgtext, .cabinet.compact .cab-counter { font-size: calc(11px * var(--msg-k, 1)); }
/* The rail: 44 px buttons in the side columns and SPIN in its own middle column (no overlap). */
.cabinet.compact .cab-deck {
  height: auto; margin: 0; padding: 6px 10px; width: clamp(190px, 24vw, 216px); align-content: center; row-gap: 6px; column-gap: 6px;
  grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas: "lobby info sound" "bal bal bal" "bet bet bet" "minus spin plus" "win win win" "auto station turbo";
  background: linear-gradient(180deg, transparent, var(--m-frame1, #f7e08a), transparent) left / 2px 100% no-repeat, linear-gradient(270deg, rgba(4, 3, 12, 0.97), rgba(14, 10, 34, 0.86));
}
body.lefty .cabinet.compact .cab-deck { background: linear-gradient(180deg, transparent, var(--m-frame1, #f7e08a), transparent) right / 2px 100% no-repeat, linear-gradient(90deg, rgba(4, 3, 12, 0.97), rgba(14, 10, 34, 0.86)); }
.cabinet.compact .cab-btn { --s: 44px; }
.cabinet.compact .cab-btn .btn-label { display: none; }
.cabinet.compact .cab-btn .ico { width: 46%; height: 46%; }
.cabinet.compact .meter { padding: 3px 6px; gap: 2px; }
.cabinet.compact .m-bet { min-height: 44px; }
.cabinet.compact .m-label { font-size: 8px; }
.cabinet.compact .m-val { font-size: 14px; }
.cabinet.compact .m-bal .coin-ico, .cabinet.compact .m-bet .coin-ico, .cabinet.compact .m-win .coin-ico { display: none; }
.cabinet.compact .m-bal .m-val, .cabinet.compact .m-bet .m-val, .cabinet.compact .m-win .m-val { padding: 0; }
.cabinet.compact .cab-spin { --spin: clamp(60px, 19vh, 80px); margin-top: 0; }
.cabinet.compact .spin-label { font-size: 16px; }

/* ---- overlays ------------------------------------------------------------------------------ */

.ov { position: absolute; inset: 0; }
.ov-dim { position: absolute; inset: 0; background: rgba(2, 1, 10, 0.62); animation: fadeIn 0.25s ease-out both; }
.ov-out { animation: fadeOut 0.26s ease-in forwards; pointer-events: none !important; }
.ov-rays, .bw-rays {
  /* Only as big as the visible part (the mask fades out at 60vmax): a smaller layer to rotate. */
  position: absolute; left: 50%; top: 46%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 130, 0.13) 0deg 6deg, rgba(255, 224, 130, 0) 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.5) 22%, transparent 56%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.5) 22%, transparent 56%);
  animation: spin 24s linear infinite, fadeIn 0.6s ease-out both; will-change: transform;
}
body.reduced .ov-rays, body.reduced .bw-rays { animation: fadeIn 0.6s ease-out both; }

/* feature banners */
.ov-banner { display: flex; align-items: center; justify-content: center; padding: 16px; }
.bn-panel {
  position: relative; overflow: hidden; text-align: center; min-width: min(520px, 92vw); max-width: 94vw;
  padding: clamp(18px, 4vh, 38px) clamp(22px, 5vw, 60px) clamp(16px, 3.2vh, 30px); border-radius: 26px; border: 4px solid transparent;
  background: radial-gradient(ellipse at 50% -10%, #5a1638 0%, #170c33 62%, #0a0720 100%) padding-box, var(--gold-edge) border-box;
  background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--m-accent, #ff3b6b) 55%, #000) 0%, #170c33 62%, #0a0720 100%) padding-box, var(--gold-edge) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 70px var(--m-glow-a, rgba(255, 200, 60, 0.4)), inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 220, 140, 0.35), inset 0 0 40px rgba(0, 0, 0, 0.45);
  animation: panelPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.bn-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%); transform: translateX(-120%); animation: panelShine 3.2s ease-in-out 0.5s infinite; }
.bn-kicker { position: relative; text-wrap: balance; font: 900 clamp(11px, 1.9vh, 17px)/1.2 var(--font-serif); letter-spacing: 0.42em; padding-left: 0.42em; color: #ffe7a0; text-shadow: 0 0 12px rgba(255, 190, 60, 0.6); }
.bn-title { position: relative; display: inline-grid; margin: 0.12em 0 0.08em; font: 400 clamp(32px, 8vh, 86px)/1.05 var(--m-font-num, var(--font-num)); }
.bn-line { position: relative; font: 700 clamp(13px, min(2.2vh, 3.7vw), 20px)/1.4 var(--font-ui); letter-spacing: 0.06em; color: #efe8ff; text-wrap: balance; }
.bn-amount { position: relative; margin-top: 6px; font: 400 clamp(30px, 7.2vh, 72px)/1.1 var(--font-num); color: #ffe27a; text-shadow: 0 3px 0 #3a1d00, 0 0 22px rgba(255, 190, 60, 0.6); font-variant-numeric: tabular-nums; }
.bn-prompt { position: relative; margin-top: 16px; font: 800 12px var(--font-ui); letter-spacing: 0.32em; padding-left: 0.32em; color: #fff; animation: blink 1.3s ease-in-out infinite; }
.k-retrigger .bn-panel, .k-info .bn-panel { min-width: min(420px, 90vw); }

.ov-burst { display: flex; align-items: center; justify-content: center; pointer-events: none !important; }
.burst-text { display: inline-grid; font: 400 clamp(40px, 9vw, 120px)/1 var(--m-font-num, var(--font-num)); filter: drop-shadow(0 0 24px var(--m-glow, #ffcc33)); animation: burstIn 1.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }

/* big win */
.ov-bigwin { display: flex; align-items: center; justify-content: center; overflow: hidden; --tier-glow: #ffb400; }
.bw-dim { background: radial-gradient(ellipse at 50% 46%, rgba(30, 10, 0, 0.45), rgba(0, 0, 0, 0.82)); }
.bw-glow { position: absolute; left: 50%; top: 46%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--tier-glow) 0%, transparent 62%); opacity: 0.45; animation: breathe 1.6s ease-in-out infinite; }
.bw-content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.bw-title { min-height: 1em; font: 400 clamp(52px, 12.5vw, 176px)/1 var(--font-num); }
.bw-tt { display: inline-grid; animation: titlePunch 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both, titlePulse 0.75s ease-in-out 0.6s infinite alternate; }
.bw-tt .tt-back { -webkit-text-stroke-width: 0.12em; text-shadow: 0 0.06em 0 #000, 0 0 0.25em var(--tier-glow), 0 0 0.6em var(--tier-glow); }
.bw-tt .tt-front {
  background-image: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%), var(--tier-grad, var(--gold-grad));
  background-size: 260% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat;
  animation: textShine 2.2s ease-in-out infinite;
}
.tier-big { --tier-glow: #ffb400; --tier-grad: linear-gradient(180deg, #fffbe0 0%, #ffe27a 26%, #f5b81c 48%, #a86400 55%, #ffd54f 78%, #fff6c8 100%); }
.tier-mega { --tier-glow: #ff3df0; --tier-grad: linear-gradient(180deg, #fff0ff 0%, #ffa6f2 26%, #ff3dd8 48%, #7a0cc0 55%, #ff7af0 80%, #ffe6ff 100%); }
.tier-epic { --tier-glow: #3fe4ff; --tier-grad: linear-gradient(180deg, #f0ffff 0%, #9af5ff 24%, #29c8ff 46%, #3a1cff 55%, #c07bff 78%, #fff0ff 100%); }
.tier-epic .bw-rays { background: repeating-conic-gradient(from 0deg, rgba(120, 230, 255, 0.24) 0deg 6deg, rgba(255, 120, 240, 0.12) 6deg 9deg, rgba(0, 0, 0, 0) 9deg 15deg); }
.tier-mega .bw-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 140, 240, 0.22) 0deg 6deg, rgba(255, 140, 240, 0) 6deg 15deg); }
.bw-amount { display: inline-grid; margin-top: 0.1em; font: 400 clamp(36px, 7.5vw, 104px)/1.05 var(--font-num); font-variant-numeric: tabular-nums; }
.bw-amount .tt-back { -webkit-text-stroke-width: 0.12em; text-shadow: 0 0.06em 0 #000, 0 0 0.4em rgba(255, 180, 0, 0.6); }
.bw-prompt { margin-top: 20px; font: 800 12px var(--font-ui); letter-spacing: 0.32em; color: #fff; opacity: 0.55; }
.bw-done .bw-prompt { opacity: 1; animation: blink 1.2s ease-in-out infinite; }
.bw-done .bw-amount { animation: settle 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.bw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.bw-flash.on { animation: flash 0.32s ease-out; }
body.reduced .bw-flash { display: none; }
body.reduced .bw-tt { animation: titlePunch 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both; }

/* jackpot */
.ov-jackpot { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jp-rays { background: repeating-conic-gradient(from 0deg, var(--jp-a, #ff4d5e) 0deg 5deg, transparent 5deg 15deg); opacity: 0.45; }
.jp-panel {
  position: relative; text-align: center; padding: clamp(18px, 4vh, 40px) clamp(24px, 6vw, 72px); border-radius: 28px; border: 4px solid transparent;
  background: radial-gradient(ellipse 120% 100% at 50% 0%, var(--jp-a, #ff4d5e) 0%, var(--jp-b, #7a0016) 70%) padding-box, var(--gold-edge) border-box;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), 0 0 80px var(--jp-glow, #ff3048), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.45);
  animation: panelPop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.jp-name { display: inline-grid; font: 400 clamp(46px, 10vw, 140px)/1 var(--font-num); animation: titlePulse 0.75s ease-in-out 0.7s infinite alternate; }
body.reduced .jp-name { animation: none; }
/* the brand coin beside celebration amounts */
.amt-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1vw, 16px); }
.amt-row > .coin-ico { flex: 0 0 auto; width: clamp(28px, 5.4vw, 72px); height: clamp(28px, 5.4vw, 72px); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.jp-panel .amt-row { margin-top: 10px; }
.jp-panel .amt-row .jp-amt { margin-top: 0; }
.jp-word { margin-top: 4px; font: 900 clamp(16px, 3vh, 30px)/1 var(--font-serif); letter-spacing: 0.55em; padding-left: 0.55em; color: #fff3c4; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 220, 120, 0.8); }
.jp-amt { display: inline-grid; margin-top: 10px; font: 400 clamp(34px, 7vw, 92px)/1.05 var(--font-num); font-variant-numeric: tabular-nums; }
.jp-prompt { margin-top: 14px; }

/* modal panels */
.ov-modal { display: flex; align-items: center; justify-content: center; padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l)); }
.md-backdrop { background: rgba(2, 1, 10, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.md-panel {
  position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: 100%; border-radius: 22px; border: 2px solid transparent;
  background: linear-gradient(180deg, #1a1240, #0b0822) padding-box, var(--gold-edge) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(120, 80, 255, 0.25);
  animation: panelIn 0.42s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
.md-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.md-title { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.md-title span { font: 900 clamp(16px, 2.6vh, 22px)/1.1 var(--m-font-title, var(--font-serif)); letter-spacing: 0.12em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-synthesis: none; }
.md-title small { font: 700 10px var(--font-ui); letter-spacing: 0.2em; color: #a99fd0; }
@media (max-width: 480px) { .md-title span { font-size: clamp(14px, 4.6vw, 20px); letter-spacing: 0.08em; } }
.md-x { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #e8e2ff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background 0.2s; }
.md-x:hover { background: rgba(255, 255, 255, 0.14); }
.md-body { padding: 4px 18px 12px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; min-height: 0; user-select: text; -webkit-user-select: text; }
.md-text { margin: 4px 0 8px; font: 600 15px/1.55 var(--font-ui); color: #ddd6f5; }
.md-label { margin: 16px 0 8px; font: 800 10.5px var(--font-ui); letter-spacing: 0.24em; color: #ffd76a; }
.md-label:first-child { margin-top: 4px; }
.md-note { margin: 14px 0 2px; font: 600 12px/1.5 var(--font-ui); color: #9a92bf; }
.md-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px 18px; flex-wrap: wrap; }
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 14px; transition: transform 0.12s, filter 0.2s; }
.btn-primary { font: 400 16px var(--font-num); letter-spacing: 0.08em; color: #3a1d00; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -3px 0 rgba(120, 60, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 190, 60, 0.35); }
.btn-primary .ico { width: 16px; height: 16px; }
.btn-ghost { font: 800 13px var(--font-ui); letter-spacing: 0.14em; color: #e8e2ff; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.btn-primary:hover, .btn-ghost:hover { filter: brightness(1.12); }
.btn-primary:active, .btn-ghost:active { transform: scale(0.96); }
.btn-big { height: 58px; padding: 0 44px; font-size: 22px; border-radius: 18px; }

/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; }
.set-label { display: flex; flex-direction: column; gap: 3px; font: 700 14px var(--font-ui); color: #f0eaff; }
.set-label small { font: 600 11px var(--font-ui); color: #948cb8; }
.switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: #2a2450; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 2px 6px rgba(0, 0, 0, 0.5); transition: background 0.2s; pointer-events: none; }
.switch-knob { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #c9c2e6); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
.switch input:checked + .switch-track { background: linear-gradient(180deg, #ffe27a, #c88a10); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 2px solid #ffe27a; outline-offset: 2px; }
.set-range { display: flex; align-items: center; gap: 10px; }
.set-val { width: 42px; text-align: right; font: 700 13px var(--font-meter); color: #ffe27a; }
.set-slider { -webkit-appearance: none; appearance: none; width: min(200px, 40vw); height: 6px; border-radius: 6px; background: linear-gradient(90deg, #c88a10, #ffe27a); outline: none; touch-action: pan-x; }
.set-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fff, #d8d0f0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; }
.set-slider::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #fff, #d8d0f0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; }

/* autoplay picker */
.auto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.auto-n { height: 62px; border-radius: 16px; font: 400 24px var(--font-num); color: #e8e2ff; background: linear-gradient(180deg, rgba(70, 46, 160, 0.5), rgba(20, 12, 60, 0.8)); box-shadow: inset 0 0 0 1px rgba(170, 140, 255, 0.4); transition: transform 0.12s; }
.auto-n:active { transform: scale(0.95); }
.auto-n.on { color: #3a1d00; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 18px rgba(255, 190, 60, 0.5); }

/* stats */
.md-stats .md-panel { width: min(700px, 100%); }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-tile { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); min-width: 0; }
.st-label { font: 800 9.5px var(--font-ui); letter-spacing: 0.2em; color: #a99fd0; }
.st-val { margin-top: 6px; font: 400 clamp(17px, 2.6vh, 24px)/1.1 var(--font-num); color: #ffe27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sub { margin-top: 4px; font: 600 11px var(--font-ui); color: #9a92bf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.st-chip { padding: 6px 11px; border-radius: 999px; font: 800 11px var(--font-ui); letter-spacing: 0.08em; color: #f0eaff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.st-chip.jp-chip { box-shadow: inset 0 0 0 1.5px var(--jp-a, #ffd76a); color: #fff; }
.st-table { width: 100%; border-collapse: collapse; font: 600 13px var(--font-ui); }
.st-table th { text-align: left; font: 800 9.5px var(--font-ui); letter-spacing: 0.18em; color: #a99fd0; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.st-table td { padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #ece6ff; }
.st-table td:not(:first-child), .st-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* game over */
.md-gameover .md-panel { width: min(600px, 100%); text-align: center; align-items: center; padding: 24px 10px 6px; background: radial-gradient(ellipse at 50% 0%, #3a0a2a, #0b0822 70%) padding-box, var(--gold-edge) border-box; }
.go-orbit { position: relative; width: 120px; height: 120px; margin: 4px auto 8px; }
.go-planet { position: absolute; inset: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2e8, #b03070 45%, #2a0618 100%); box-shadow: 0 0 30px rgba(255, 80, 150, 0.5); }
.go-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255, 220, 140, 0.55); animation: spin 14s linear infinite; }
.go-ring::after { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe0, #f5c542 50%, #7a4a00); box-shadow: 0 0 12px rgba(255, 200, 60, 0.8); }
.go-title { display: inline-grid; padding: 0 10px; font: 400 clamp(26px, 6vw, 46px)/1.1 var(--font-num); }
.go-title .tt-front { background: linear-gradient(180deg, #fff0e0 0%, #ffb27a 30%, #ff4d3a 52%, #8a1000 58%, #ff8a5a 82%, #ffe6d8 100%); -webkit-background-clip: text; background-clip: text; }
.go-text { max-width: 440px; margin: 10px auto 4px; font: 600 15px/1.55 var(--font-ui); color: #ddd6f5; }
.md-gameover .md-actions { justify-content: center; }

/* help / paytable */
.md-help .md-panel { width: min(1100px, 100%); height: min(780px, 100%); }
.hp-tabs { display: flex; gap: 6px; padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.hp-tabs::-webkit-scrollbar { display: none; }
.hp-tab { flex: 0 0 auto; height: 44px; padding: 0 14px; border-radius: 999px; font: 800 11px var(--font-ui); letter-spacing: 0.14em; color: #cfc7ef; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); white-space: nowrap; }
.hp-tab.on { color: #3a1d00; background: var(--gold-grad); box-shadow: 0 0 14px rgba(255, 190, 60, 0.4); }
.hp-body { flex: 1 1 auto; }
.hp-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 18px 14px; flex: 0 0 auto; }
.hp-nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #ffe27a; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 210, 110, 0.4); }
.hp-count { font: 700 12px var(--font-meter); color: #a99fd0; min-width: 48px; text-align: center; }
.hp-intro { margin: 6px 0 14px; font: 600 13.5px/1.6 var(--font-ui); color: #cfc7ef; }
.hp-legal { color: #8d86ad; font-size: 12px; }
.hp-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.hp-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.hp-group { flex: none; display: grid; grid-template-columns: repeat(2, 36px); gap: 4px; }
.hp-group .hp-sym { border-radius: 7px; }
.hp-card.kind-wild, .hp-card.kind-scatter, .hp-card.kind-bonus { background: linear-gradient(135deg, rgba(255, 200, 60, 0.1), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 210, 110, 0.32); }
.hp-sym { flex: 0 0 auto; border-radius: 10px; background: linear-gradient(180deg, var(--m-reel1, #1a1238), var(--m-reel2, #07051a)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.hp-info { min-width: 0; flex: 1; }
.hp-name { font: 900 12px var(--font-ui); letter-spacing: 0.12em; color: #fff3c4; margin-bottom: 4px; }
.hp-rows { display: grid; gap: 2px; }
.hp-payrow { display: flex; justify-content: space-between; gap: 10px; font: 700 13px var(--font-ui); }
.hp-n { color: #a99fd0; }
.hp-v { color: #ffe27a; font-family: var(--font-meter); font-variant-numeric: tabular-nums; }
.hp-note { margin-top: 4px; font: 600 11.5px/1.4 var(--font-ui); color: #b9b2d6; }
.hp-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.hp-line { display: flex; align-items: center; gap: 6px; font: 800 12px var(--font-meter); }
.hp-line span { width: 20px; text-align: right; }
.hp-line canvas { border-radius: 4px; }
.hp-ways { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.hp-ways canvas { margin: 6px auto 0; }
.hp-bigways { display: flex; flex-direction: column; align-items: center; }
.hp-bigways span { font: 400 clamp(48px, 9vh, 84px)/1 var(--font-num); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #2a1400); }
.hp-bigways small { font: 800 12px var(--font-ui); letter-spacing: 0.3em; color: #ffd76a; }
.hp-html { font: 600 14px/1.6 var(--font-ui); color: #ddd6f5; }
.hp-html h3, .hp-html h4 { font-family: var(--font-serif); color: #ffe7a0; letter-spacing: 0.08em; }
.hp-html b, .hp-html strong { color: #fff3c4; }
.hp-rules { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 4px 0 14px; font: 600 13.5px/1.4 var(--font-ui); }
.hp-rules dt { color: #a99fd0; font-weight: 700; }
.hp-rules dd { margin: 0; color: #f0eaff; }

/* pick board */
.pick-board { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 18px); opacity: 0; transform: scale(0.94); transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.pick-board.in { opacity: 1; transform: none; }
.pick-board.out { opacity: 0; transform: scale(0.97); }
.pick-prompt { display: inline-grid; text-align: center; padding: 0 10px; font: 400 clamp(18px, 3.6vh, 36px)/1.1 var(--m-font-num, var(--font-num)); }
.pick-prompt .tt-back, .pick-prompt .tt-front { white-space: normal; }
.pick-grid { display: grid; justify-content: center; perspective: 900px; }
.pick-tile { position: relative; width: var(--tile, 100px); height: var(--tile, 100px); animation: tileIn 0.5s calc(var(--i, 0) * 45ms) both cubic-bezier(0.2, 1.5, 0.4, 1); }
.pick-tile:disabled { cursor: default; }
.pick-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.3, 1.35, 0.5, 1); }
.pick-tile:not(:disabled):hover .pick-inner { transform: translateY(-4px) scale(1.05); }
.pick-tile.flipped .pick-inner { transform: rotateY(180deg); }
.pick-front, .pick-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pick-front { background-size: 100% 100%; background-repeat: no-repeat; }
.pick-back {
  transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; border-radius: 22%;
  background: radial-gradient(circle at 50% 28%, #4a3590, #140b38 75%);
  box-shadow: inset 0 0 0 3px var(--m-frame2, #c8962a), inset 0 0 0 5px rgba(0, 0, 0, 0.5), 0 0 20px var(--m-glow-a, rgba(255, 200, 60, 0.45));
}
.pick-label { padding: 0 7%; text-align: center; line-height: 1; word-break: break-word; font: 400 calc(var(--tile, 100px) * 0.21) var(--font-num); color: #ffe27a; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 200, 60, 0.6); }
.pick-label.long { font-size: calc(var(--tile, 100px) * 0.14); }
.pick-tile.k-jackpot .pick-back { background: radial-gradient(circle at 50% 28%, var(--jp-a, #ff4d5e), var(--jp-b, #7a0016) 80%); }
.pick-tile.k-jackpot .pick-label { color: #fff; }
.pick-tile.k-collect .pick-back, .pick-tile.k-end .pick-back { background: radial-gradient(circle at 50% 28%, #2a6a3a, #062010 80%); }
.pick-tile.dim { opacity: 0.42; filter: grayscale(0.6); }
.pick-tile.flipped:not(.dim) .pick-back { animation: revealGlow 0.9s ease-out; }
.pick-footer { min-height: 18px; font: 800 clamp(13px, 2vh, 18px) var(--font-meter); letter-spacing: 0.12em; color: #ffe27a; text-shadow: 0 0 10px rgba(255, 200, 60, 0.5); }

/* wheel stage */
.wheel-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 10px; }
.wheel-prompt { font: 400 clamp(18px, 3.4vh, 34px)/1 var(--font-num); color: #ffe27a; text-align: center;
  text-shadow: -2px 0 0 #1c0d00, 2px 0 0 #1c0d00, 0 -2px 0 #1c0d00, 0 2px 0 #1c0d00, -1.5px -1.5px 0 #1c0d00, 1.5px -1.5px 0 #1c0d00, -1.5px 1.5px 0 #1c0d00, 1.5px 1.5px 0 #1c0d00, 0 4px 0 #3a1d00, 0 0 18px rgba(255, 190, 60, 0.6); animation: blink 1.4s ease-in-out infinite; cursor: pointer; }
.wheel-prompt.won { animation: settle 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); font-size: clamp(24px, 5vh, 48px); }
.wheel-holder { position: relative; flex: 0 0 auto; cursor: pointer; }

/* ---- contract v2: cabinet additions ---------------------------------------------------------- */

.cab-top { position: relative; }
.cab-station {
  position: absolute; left: clamp(8px, 1.2vw, 18px); top: 7px; z-index: 5; display: flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: auto;
  background: linear-gradient(180deg, rgba(4, 12, 28, 0.92), rgba(2, 6, 16, 0.92));
  box-shadow: inset 0 0 0 1px rgba(90, 230, 255, 0.6), 0 0 14px rgba(41, 230, 255, 0.25), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.cs-dot { width: 7px; height: 7px; border-radius: 50%; background: #29e6ff; box-shadow: 0 0 8px #29e6ff; animation: blink 2.4s ease-in-out infinite; }
.cs-name { font: 800 10px/1 var(--font-brand); letter-spacing: 0.16em; color: #bff6ff; text-shadow: 0 0 6px rgba(41, 230, 255, 0.8); }
.cs-val { font: 400 14px/1 var(--font-num); color: #ffe27a; text-shadow: 0 0 6px rgba(255, 190, 60, 0.7); font-variant-numeric: tabular-nums; }
.cab-station.hit { animation: signHit 0.4s ease-in-out 10 alternate; }
/* Desktop: the sign has the top-left corner; both plaque columns start below it. */
.cab-jps.left, .cab-jps.right { align-self: stretch; padding-top: 24px; }
.cabinet.portrait .cab-jps.left, .cabinet.portrait .cab-jps.right, .cabinet.compact .cab-jps.left, .cabinet.compact .cab-jps.right { padding-top: 0; }
/* Short desktop windows (top box at its 96 px minimum): smaller plaques and a slimmer sign, so both
   fit without touching. */
@media (max-height: 700px) {
  .cabinet:not(.portrait):not(.compact) .cab-jps.left, .cabinet:not(.portrait):not(.compact) .cab-jps.right { padding-top: 20px; gap: 4px; }
  .cabinet:not(.portrait):not(.compact) .jp-in { font-size: clamp(11px, 1.95vh, 22px); }
  .cabinet:not(.portrait):not(.compact) .jp-top .jp-in { font-size: clamp(12px, 2.45vh, 28px); }
  .cabinet:not(.portrait):not(.compact) .cab-station { top: 5px; padding: 3px 11px 3px 8px; }
}
/* Phone portrait: its own row under the logo (over the logo box it covered a two-line logo). */
.cabinet.portrait .cab-top { grid-template-rows: auto auto auto; }
.cabinet.portrait .cab-logo { grid-row: 1; }
.cabinet.portrait .cab-jps.stack { grid-row: 3; }
.cabinet.portrait .cab-station { position: relative; grid-row: 2; justify-self: center; top: auto; left: auto; margin: -3px 0 -1px; padding: 2px 9px 2px 7px; }
.cabinet.portrait .cs-name { font-size: 9px; letter-spacing: 0.1em; }
.cabinet.portrait .cs-val { font-size: 11px; }
/* Phone landscape: in the rail between AUTO and TURBO (cabinet.js moves it), off the logo. */
.cabinet.compact .cab-station { position: relative; grid-area: station; justify-self: center; top: auto; left: auto; gap: 5px; padding: 3px 8px 3px 6px; }
.cabinet.compact .cs-dot { width: 6px; height: 6px; }
.cabinet.compact .cs-val { font-size: 11px; }
.cabinet.compact .cs-name { display: none; }
body.reduced .cs-dot, body.reduced .cab-station.hit, body.reduced .lb-station.hit .lbs-sign { animation: none; }

/* the bet meter opens the bet menu */
.m-bet { cursor: pointer; }
.m-bet:hover { filter: brightness(1.15); }
.m-caret { position: absolute; right: 7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--m-meter, #ffd34d); opacity: 0.7; }
.m-caret svg { width: 100%; height: 100%; display: block; }
.cabinet.busy .m-caret, .cabinet.autoplay .m-caret { opacity: 0.2; }

/* wheels placed in the top box (wheel events with place: 'topbox') */
.cab-topwheel { position: absolute; inset: 0; z-index: 4; display: flex; align-items: stretch; justify-content: center; pointer-events: none; }
.cab-topwheel > * { pointer-events: auto; }
.cabinet.topwheel .cab-top { height: clamp(250px, 50vh, 560px); }
.cabinet.topwheel .cab-logo { visibility: hidden; }
/* Phone portrait: the four plaques shrink into two small rows at the top (between the LOBBY and
 * SOUND buttons) so every MAJOR and GRAND wedge still has its value in view; the wheel sits below. */
.cabinet.portrait.topwheel .cab-top { height: 50vh; grid-template-rows: auto; }
.cabinet.portrait.topwheel .cab-logo { display: none; }
.cabinet.portrait.topwheel .cab-jps.stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; margin: 0 48px; align-self: start; }
.cabinet.portrait.topwheel .jp-plaque, .cabinet.portrait.topwheel .jp-plaque.jp-top { grid-column: auto; width: auto; }
.cabinet.portrait.topwheel .jp-plaque .jp-in { flex-direction: row; gap: 0.4em; padding: 0.22em 0.5em; font-size: 11px; }
.cabinet.portrait.topwheel .jp-plaque .jp-value { text-align: right; width: auto; flex: 1; }
.cabinet.portrait.topwheel .cab-topwheel { top: 60px; }
.cabinet.portrait.topwheel .cab-station { display: none; }
.cabinet.portrait.topwheel .cab-jps.stack { grid-row: 1; }
/* Phone landscape: the wheel takes the whole height left of the rail (the reels hide meanwhile;
 * cabinet.js keeps their size), the plaques stay at its sides. */
.cabinet.compact.topwheel .cab-top { grid-row: 1 / 3; height: auto; align-self: stretch; grid-template-columns: minmax(0, 1fr) minmax(130px, 40vw) minmax(0, 1fr); }
.cabinet.compact.topwheel .cab-game { visibility: hidden; }
.cabinet.compact .wheel-wrap.in-top .wheel-title { font-size: 15px; }
.cabinet.compact .wheel-wrap.in-top .wheel-prompt { font-size: 14px; }
.wheel-wrap.in-top { gap: 2px; padding: 2px 0 4px; animation: fadeIn 0.35s ease-out both; }
.wheel-wrap.in-top .wheel-prompt { font-size: clamp(14px, 2.4vh, 24px); }
.wheel-wrap.out { opacity: 0; transition: opacity 0.3s; }
.wheel-title { display: none; font: 400 clamp(16px, 3vh, 30px)/1 var(--m-font-num, var(--font-num)); color: #fff3c4; text-shadow: 0 3px 0 #3a1d00, 0 0 16px var(--m-glow, #ffcc33); letter-spacing: 0.04em; text-align: center; }
.wheel-title.on { display: block; }
.wheel-holder { transition: opacity 0.25s, transform 0.25s; }
.wheel-holder.swap { opacity: 0; transform: scale(0.82); }

/* ---- contract v2: floor theatre panels ---------------------------------------------------------- */

/* the JACKPOT lock screen and HAND PAY */
.jp-lockline { display: table; margin: 0 auto 10px; padding: 4px 12px 4px calc(12px + 0.4em); border-radius: 6px; font: 800 11px/1 var(--font-meter); letter-spacing: 0.4em; color: #fff; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); animation: blink 1.2s ease-in-out infinite; }
/* COLLECT shows dimmed while the count or the attendant runs (no empty band), lit when it works */
.jp-collect { margin: 16px auto 0; visibility: hidden; display: flex; }
.jp-locked .jp-collect, .ov-handpay .jp-collect { visibility: visible; opacity: 0.35; filter: grayscale(0.6); pointer-events: none; transition: opacity 0.3s, filter 0.3s; }
.jp-locked.jp-can-collect .jp-collect { opacity: 1; filter: none; pointer-events: auto; animation: panelPop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.jp-locked .jp-prompt:empty { display: none; }
.hpay-strip {
  display: none; align-items: center; gap: 12px; margin: 14px auto 0; padding: 10px 16px; border-radius: 14px; max-width: 470px; text-align: left;
  background: linear-gradient(180deg, #2c0a0a, #120404);
  box-shadow: inset 0 0 0 2px #ffcf4d, inset 0 0 0 4px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 70, 50, 0.45);
}
.hpay-strip.on { display: flex; animation: panelPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.hpay-bell { flex: 0 0 auto; width: 40px; height: 40px; color: #ffd84d; filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.8)); transform-origin: 50% 10%; }
.hpay-strip.on:not(.done) .hpay-bell { animation: bellRing 0.18s ease-in-out 14 alternate; }
.hpay-bell svg { width: 100%; height: 100%; display: block; }
.hpay-text { flex: 1; min-width: 0; }
.hpay-title { font: 400 22px/1 var(--font-num); color: #ffe27a; text-shadow: 0 2px 0 #3a1d00; }
.hpay-sub { margin-top: 4px; font: 800 10.5px/1.2 var(--font-meter); letter-spacing: 0.14em; color: #fff; }
.hpay-bar { position: relative; height: 6px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.hpay-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ffcf4d, #fff3c4); transition-property: width; transition-timing-function: linear; }
.hpay-fill.go { width: 100%; }
.hpay-strip.done { box-shadow: inset 0 0 0 2px #6dff7a, inset 0 0 0 4px rgba(0, 0, 0, 0.6), 0 0 26px rgba(80, 255, 120, 0.35); }
.ov-handpay { display: flex; align-items: center; justify-content: center; padding: 16px; }
.hpo-panel {
  position: relative; z-index: 70; text-align: center; padding: clamp(18px, 4vh, 34px) clamp(20px, 5vw, 56px) clamp(16px, 3vh, 26px); border-radius: 26px; border: 4px solid transparent;
  background: radial-gradient(ellipse at 50% 0%, #6a0a14 0%, #1d0610 65%, #0a0308 100%) padding-box, var(--gold-edge) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 70px rgba(255, 60, 40, 0.4);
  animation: panelPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.hpo-lamp { width: 70px; height: 26px; margin: 0 auto 10px; border-radius: 14px 14px 4px 4px; background: radial-gradient(ellipse at 50% 30%, #fff 0%, #ff3b2f 40%, #5a0004 100%); box-shadow: 0 0 30px #ff3b2f; animation: candle 0.35s ease-in-out infinite alternate; }
.hpo-amount { display: inline-grid; font: 400 clamp(38px, 8vh, 84px)/1.05 var(--font-num); font-variant-numeric: tabular-nums; }
.hpo-coins { font: 800 12px var(--font-ui); letter-spacing: 0.3em; color: #ffe7a0; }
.ov-handpay.can-collect .jp-collect { opacity: 1; filter: none; pointer-events: auto; animation: panelPop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
body.reduced .hpo-lamp, body.reduced .hpay-bell { animation: none !important; }

/* the choice screen */
.ov-choice { display: flex; align-items: center; justify-content: center; padding: max(12px, var(--safe-t)) 12px max(12px, var(--safe-b)); overflow-y: auto; }
.ov-choice > .ov-dim { background: rgba(2, 1, 10, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ch-panel { position: relative; z-index: 70; width: min(1100px, 100%); text-align: center; }
.ch-title-main { display: inline-grid; font: 400 clamp(28px, 6.4vh, 72px)/1.05 var(--m-font-num, var(--font-num)); animation: titlePunch 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both; }
.ch-prompt { margin: 6px 0 clamp(12px, 2.4vh, 22px); font: 800 clamp(11px, 1.8vh, 15px) var(--font-ui); letter-spacing: 0.3em; padding-left: 0.3em; color: #efe8ff; text-transform: uppercase; }
.ch-cards { display: grid; gap: clamp(10px, 1.6vw, 22px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ch-cards.n1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.ch-cards.n2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.ch-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: clamp(150px, 30vh, 260px); padding: 20px 12px 16px;
  border-radius: 22px; border: 3px solid transparent; color: #fff;
  background: radial-gradient(ellipse at 50% 0%, var(--ch-a) 0%, #120c30 62%, #08061a 100%) padding-box, linear-gradient(160deg, #fff3b0, var(--ch) 45%, #2a1a40 80%, var(--ch)) border-box;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 26px var(--ch-a);
  animation: panelPop 0.5s calc(var(--i, 0) * 90ms) cubic-bezier(0.2, 1.5, 0.4, 1) both; transition: transform 0.2s, opacity 0.3s, filter 0.3s;
}
.ch-card:hover, .ch-card:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.65), 0 0 40px var(--ch); }
.ch-gem { width: clamp(40px, 7vh, 64px); height: clamp(40px, 7vh, 64px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--ch) 42%, #050310 100%); box-shadow: 0 0 26px var(--ch), inset 0 -4px 10px rgba(0, 0, 0, 0.5); }
.ch-title { font: 400 clamp(17px, 2.8vh, 30px)/1.05 var(--m-font-num, var(--font-num)); text-shadow: 0 2px 0 #000, 0 0 14px var(--ch); }
.ch-lines { display: flex; flex-direction: column; gap: 3px; }
.ch-line { font: 700 clamp(11px, 1.6vh, 14px)/1.3 var(--font-ui); color: #ece6ff; text-wrap: balance; }
.ch-default { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; font: 800 10px/1 var(--font-ui); letter-spacing: 0.16em; color: #3a1d00; background: var(--gold-grad); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.ch-card.chosen { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 60px var(--ch); z-index: 2; }
.ov-choice.decided .ch-card:not(.chosen) { opacity: 0.32; filter: grayscale(0.6); }
.ch-timer { height: 5px; width: min(420px, 80%); margin: clamp(12px, 2.4vh, 20px) auto 0; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ch-timer-fill { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffe27a, #ff9a3c); transition-property: width; transition-timing-function: linear; }
.ch-timer-fill.go { width: 0; }
.ch-note { margin-top: 8px; font: 600 11px/1.4 var(--font-ui); color: #a99fd0; }
@media (max-width: 700px) {
  .ch-cards, .ch-cards.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-card { min-height: 128px; padding: 14px 8px 12px; gap: 5px; }
  /* Three options: the third card centred under the first two. */
  .ch-cards.n3 > .ch-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
}

/* STATION COMET award */
.ov-station { display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.st-rays { background: repeating-conic-gradient(from 0deg, rgba(90, 230, 255, 0.16) 0deg 6deg, rgba(90, 230, 255, 0) 6deg 15deg); }
.sa-panel {
  position: relative; z-index: 70; overflow: hidden; text-align: center; max-width: 94vw; padding: clamp(18px, 4vh, 36px) clamp(22px, 5vw, 60px) clamp(14px, 3vh, 26px);
  border-radius: 26px; border: 3px solid transparent;
  background: radial-gradient(ellipse at 50% 0%, #0d4a66 0%, #071226 70%) padding-box, linear-gradient(160deg, #bff6ff, #29e6ff 40%, #0a3a55 70%, #ffe27a) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 70px rgba(41, 230, 255, 0.45);
  animation: panelPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.sa-comet { position: absolute; top: 18%; left: -30%; width: 40%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #bff6ff 80%, #fff); box-shadow: 0 0 12px #29e6ff; transform: rotate(-12deg); animation: comet 1.6s ease-in 0.3s infinite; }
.sa-kicker { font: 800 11px/1.2 var(--font-meter); letter-spacing: 0.42em; padding-left: 0.42em; color: #ffe7a0; }
.sa-name { margin: 6px 0 4px; font: 900 clamp(26px, 6vh, 64px)/1.05 var(--font-brand); letter-spacing: 0.06em; color: #e8fdff; white-space: nowrap; text-shadow: 0 0 8px #29e6ff, 0 0 22px #29e6ff, 0 0 44px #0a9dff; }
.sa-amt { display: inline-grid; font: 400 clamp(36px, 7.4vh, 82px)/1.05 var(--font-num); font-variant-numeric: tabular-nums; }
.sa-sub { margin-top: 4px; font: 700 11px var(--font-ui); letter-spacing: 0.2em; color: #cfeaff; }
body.reduced .sa-comet { animation: none; display: none; }

/* the ticket voucher printed when leaving a machine */
/* It feeds upward out of a printer slot at the bottom right, just above the deck, under a neon
   CASH OUT sign (panels.js). --tk-bottom is measured from the deck when the ticket opens, and
   --tk-right moves the printer left of the SPIN button where the button rises under the slot. The
   slot reaches 20px past the paper on each side. */
.ov-ticket { background: rgba(2, 1, 10, 0.28); animation: fadeIn 0.2s ease-out both;
  --tk-right: clamp(28px, 3vw, 48px); --tk-w: min(300px, calc(100vw - var(--tk-right) - 26px)); }
.tk-slot { position: absolute; right: calc(var(--tk-right) - 20px); bottom: var(--tk-bottom, 130px); width: calc(var(--tk-w) + 40px); height: 14px; border-radius: 7px; z-index: 2;
  background: #04030a; box-shadow: inset 0 3px 6px #000, 0 0 0 2px #8a90b0, 0 0 0 4px #1d2038, 0 0 24px rgba(41, 230, 255, 0.3); }
.tk-unit { position: absolute; right: var(--tk-right); bottom: calc(var(--tk-bottom, 130px) + 7px); width: var(--tk-w); display: flex; flex-direction: column; align-items: center; }
/* The canvas has a 14px halo margin round the plate (SIGN.M), so the plate lines up with the paper. */
.tk-sign { display: block; flex: none; margin: -14px -14px -4px; animation: tkSignIn 0.18s ease-out both; }
.ov-ticket.tk-away .tk-sign { animation: tkSignOff 0.26s ease-in forwards; }
.tk-paper {
  position: relative; align-self: stretch; padding: 16px 16px 12px;
  color: #1d1a10; text-align: center; border-radius: 4px 4px 0 0;
  background: linear-gradient(0deg, #e8e2c8 0, #fffdf2 10px, #f4eed8 100%);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.55);
  clip-path: inset(100% 0 0 0); animation: tkPrint 0.9s steps(20) forwards;
}
.tk-head { font: 900 15px/1.1 var(--font-brand); letter-spacing: 0.08em; }
.tk-sub { font: 700 9px var(--font-meter); letter-spacing: 0.24em; margin-top: 2px; color: #5a5440; }
.tk-kind { margin: 10px 0 2px; font: 800 10px var(--font-ui); letter-spacing: 0.4em; padding-left: 0.4em; }
.tk-amt { font: 400 30px/1.1 var(--font-num); color: #1d1a10; font-variant-numeric: tabular-nums; }
.tk-words { font: 800 9px var(--font-ui); letter-spacing: 0.3em; color: #5a5440; }
.tk-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font: 700 10px/1.2 'Courier New', monospace; }
.tk-row span:first-child { text-align: left; }
.tk-small { margin-top: 2px; font-size: 9px; color: #5a5440; }
.tk-code { height: 32px; margin: 8px 0 0; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px, #111 12px 13px, transparent 13px 16px); }
.ov-ticket.tk-away .tk-paper { animation: tkAway 0.26s ease-in forwards; }
/* The slot sits over the message bar where the deck leaves no room (phones): its text steps aside
   rather than peeking out half covered. */
body:has(.ov-ticket) #screen-machine .cab-msg > * { opacity: 0; transition: opacity 0.2s; }

/* HOW IT WORKS, bet menu, settings button */
.md-how .md-panel { width: min(640px, 100%); }
.md-bet .md-panel { width: min(560px, 100%); }
/* minmax(0, 1fr): a long badge wraps inside its row instead of widening the panel past the screen. */
.bm-list { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.bm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 6px 14px; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background 0.15s, transform 0.12s; }
.bm-row:hover { background: rgba(255, 255, 255, 0.09); }
.bm-row:active { transform: scale(0.98); }
.bm-row.on { background: linear-gradient(180deg, rgba(255, 226, 122, 0.22), rgba(255, 180, 40, 0.08)); box-shadow: inset 0 0 0 1.5px #ffe27a, 0 0 18px rgba(255, 190, 60, 0.25); }
.bm-bet { flex: none; display: flex; align-items: center; gap: 8px; font: 400 18px/1 var(--font-num); color: #fff3c4; font-variant-numeric: tabular-nums; }
.bm-bet .coin-ico { width: 18px; height: 18px; }
.bm-badge { min-width: 0; overflow: hidden; text-align: right; font: 700 11.5px/1.3 var(--font-meter); letter-spacing: 0.06em; color: #ffd76a; }
.bm-actions { justify-content: space-between; align-items: center; }
.bm-stepper { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.bm-step { --s: 44px; }
.bm-step.dis { opacity: 0.38; }
.bm-val { min-width: 74px; text-align: center; font: 400 20px var(--font-num); color: #ffe27a; font-variant-numeric: tabular-nums; }
.bm-max { padding: 0 18px; }
@media (max-width: 480px) {
  /* the stepper on its own row, MAX BET and DONE side by side under it */
  .md-actions.bm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bm-stepper { grid-column: 1 / -1; justify-content: center; margin: 0; }
}
/* HOW IT WORKS: the toggle in the footer, a fade while more text waits below */
.how-actions { align-items: center; }
.how-toggle { flex: 1 1 220px; min-width: 0; }
.how-toggle .set-row { border-bottom: 0; padding: 4px 0; min-height: 44px; }
.md-body.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent); }
.set-btn { height: 44px; padding: 0 16px; font-size: 11px; }
.hp-ring { margin: 12px 0 6px; font: 800 11.5px var(--font-meter); letter-spacing: 0.14em; color: #9fe8ff; }
.hp-oddtab td:first-child { font-weight: 800; color: #fff3c4; }
/* Short screens (phones on their side): a one-line header, smaller tabs and pager, so the body
   gets most of the height (the header and tabs took over half of it). */
@media (max-height: 450px) {
  .ov-modal { padding-top: max(6px, var(--safe-t)); padding-bottom: max(6px, var(--safe-b)); }
  .md-panel { border-radius: 16px; }
  .md-head { padding: 7px 14px 4px; }
  .md-title { gap: 0; }
  .md-title small { display: none; }
  .md-title span { font-size: 15px; }
  .md-x { width: 38px; height: 38px; }
  .md-body { padding: 2px 14px 8px; }
  .md-actions { padding: 6px 14px 10px; }
  .hp-tabs { padding: 0 14px 6px; }
  .hp-tab { height: 34px; padding: 0 12px; font-size: 10px; }
  .hp-pager { padding: 2px 14px 6px; gap: 10px; }
  .hp-nav { width: 38px; height: 38px; }
  .btn-primary, .btn-ghost { height: 40px; }
}

/* ---- player extras: toasts, the DAILY BONUS overlay, the MISSION LOG (js/ui/extras.js) ---------- */

/* Toasts: one at a time, top centre under the top box (js/ui/extras.js places the stack), above
   panels; only the toast itself takes taps (a tap dismisses it). */
.toast-stack { position: fixed; z-index: 85; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 54px; padding: 5px 14px 5px 6px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 22, 52, 0.96), rgba(5, 6, 20, 0.96));
  box-shadow: 0 0 0 1.5px rgba(41, 230, 255, 0.75), 0 0 0 3px rgba(4, 6, 16, 0.9), 0 0 0 4px rgba(245, 197, 66, 0.55), 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 26px rgba(41, 230, 255, 0.28);
  opacity: 0; transform: translateY(-14px) scale(0.96);
}
.toast.in { opacity: 1; transform: none; transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.toast.out { opacity: 0; transform: translateY(-10px); transition: opacity 0.25s ease-in, transform 0.25s ease-in; }
.toast.still, .toast.still.in, .toast.still.out { transform: none; }
.toast.k-level, .toast.k-daily { box-shadow: 0 0 0 1.5px #ffd54a, 0 0 0 3px rgba(4, 6, 16, 0.9), 0 0 0 4px rgba(41, 230, 255, 0.6), 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 200, 60, 0.35); }
.toast-ico { flex: 0 0 auto; width: 44px; height: 44px; }
.toast-ico.rank { width: 58px; }
.toast-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.toast-k { font: 800 9.5px/1 var(--font-meter); letter-spacing: 0.22em; color: #9fe8ff; white-space: nowrap; }
.toast.k-level .toast-k, .toast.k-daily .toast-k { color: #ffd76a; }
.toast.rankup .toast-k { color: #fff3c4; text-shadow: 0 0 8px #ffcc33; }
.toast-n { font: 900 14px/1.15 var(--font-brand); letter-spacing: 0.08em; color: #f4fdff; text-shadow: 0 0 10px rgba(41, 230, 255, 0.6); overflow-wrap: break-word; text-wrap: balance; }
.toast-amt { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font: 400 18px/1 var(--font-num); color: #ffe27a; text-shadow: 0 0 10px rgba(255, 200, 60, 0.6), 0 2px 0 #3a1d00; }
.toast-amt .coin-ico { width: 18px; height: 18px; }
/* Phones: a slimmer toast (about 40 px), so it keeps clear of the reels and the machine's meters. */
@media (max-width: 420px), (max-height: 450px) {
  .toast { min-height: 40px; gap: 7px; padding: 3px 10px 3px 5px; border-radius: 13px; }
  .toast-ico { width: 32px; height: 32px; } .toast-ico.rank { width: 42px; }
  .toast-t { gap: 3px; }
  .toast-n { font-size: 12px; line-height: 1.1; letter-spacing: 0.05em; }
  .toast-k { font-size: 8px; letter-spacing: 0.16em; }
  .toast-amt { font-size: 15px; }
  .toast-amt .coin-ico { width: 16px; height: 16px; }
}

/* The DAILY BONUS overlay: streak lamps, the wheel, the prize, the odds under the wheel (side by side
   on a phone held sideways). js/ui/extras.js sizes the wheel to the room left. */
.md-daily .md-panel { width: min(680px, 100%); }
.db-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "streak" "wheel" "prize" "odds"; justify-items: center; gap: 8px; padding-top: 2px; }
.db-streak { grid-area: streak; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.db-lamps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: min(100%, 470px); }
.db-lamp { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.db-bulb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a6f8c, #23263c 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(245, 197, 66, 0.25); }
.db-lamp.lit .db-bulb { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd54a 45%, #b07400); box-shadow: 0 0 10px rgba(255, 200, 60, 0.9), 0 0 0 2px rgba(255, 230, 140, 0.6); }
.db-lamp.today .db-bulb { box-shadow: 0 0 0 2px #29e6ff, 0 0 14px rgba(41, 230, 255, 0.9); }
.db-lamp.next .db-bulb { animation: lampBlink 1.1s ease-in-out infinite; }
body.reduced .db-lamp.next .db-bulb { animation: none; }
/* The lamps' and the odds' type grows with the screen height (the wheel does too), never under 9.5 px. */
.db-day { font: 800 clamp(9.5px, 1.15vh, 12.5px)/1 var(--font-meter); letter-spacing: 0.06em; color: #8f89b3; white-space: nowrap; }
.db-mult { font: 400 clamp(12px, 1.35vh, 15px)/1 var(--font-num); color: #cfc7ef; white-space: nowrap; }
.db-lamp.lit .db-mult, .db-lamp.today .db-mult { color: #ffe27a; }
.db-lamp.today .db-day { color: #bff6ff; }
.db-streak-note { font: 800 clamp(10.5px, 1.2vh, 13px)/1.2 var(--font-meter); letter-spacing: 0.14em; color: #bff6ff; text-align: center; text-shadow: 0 0 8px rgba(41, 230, 255, 0.6); }
.db-wheel { grid-area: wheel; display: flex; align-items: center; justify-content: center; }
.db-holder { position: relative; width: 260px; height: 260px; cursor: pointer; touch-action: manipulation; }
.db-prizebox { grid-area: prize; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; text-align: center; }
.db-prize { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; font: 400 clamp(16px, 2.6vh, 22px)/1.1 var(--font-num); color: #ffe27a; text-shadow: 0 2px 0 #3a1d00, 0 0 14px rgba(255, 190, 60, 0.5); }
.db-prize.go { animation: blink 1.4s ease-in-out infinite; }
.db-prize.wait { color: #cfc7ef; font-size: clamp(15px, 2.2vh, 19px); text-shadow: 0 2px 0 #000; }
.db-prize.won { font-size: clamp(28px, 5vh, 42px); animation: settle 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.db-prize .coin-ico { width: 30px; height: 30px; }
body.reduced .db-prize.go, body.reduced .db-prize.won { animation: none; }
.db-prize-sub { font: 700 clamp(10.5px, 1.15vh, 12.5px)/1.3 var(--font-meter); letter-spacing: 0.1em; color: #a99fd0; }
.db-odds { grid-area: odds; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.db-table { border-collapse: collapse; width: min(100%, 560px); font-variant-numeric: tabular-nums; }
.db-table th { text-align: left; padding: 4px 6px 4px 0; font: 800 clamp(9.5px, 1.1vh, 12px) var(--font-ui); letter-spacing: 0.12em; color: #a99fd0; white-space: nowrap; }
.db-table td { text-align: center; padding: 4px 2px; font: 700 clamp(11.5px, 1.3vh, 14px) var(--font-meter); color: #ece6ff; border-left: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }
.db-table tr + tr th, .db-table tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.db-table .db-pr td { font: 400 clamp(13px, 1.5vh, 16px) var(--font-num); color: #ffe27a; }
.db-note { margin: 2px 0 0; max-width: 620px; text-align: center; font: 600 clamp(11px, 1.2vh, 13px)/1.45 var(--font-ui); color: #9a92bf; text-wrap: balance; }
.db-actions { justify-content: center; }
.db-actions .btn-big { min-width: 190px; }
/* Waiting (the wheel spinning): a dimmed gold, not a grey that looks broken. */
.db-actions .btn-primary:disabled { filter: saturate(0.6) brightness(0.72); cursor: default; font-size: 15px; }
@media (max-width: 480px) {
  .db-actions .btn-big { min-width: 0; flex: 1 1 auto; padding: 0 14px; }
  .db-table th { padding-right: 3px; font-size: 9px; letter-spacing: 0.03em; }
  .db-table td { font-size: 10px; padding: 4px 1px; }
  .db-table .db-pr td { font-size: 11px; }
}
/* A phone on its side: the wheel left, the lamps, prize and odds right. */
@media (orientation: landscape) and (max-height: 500px) {
  .md-daily .md-panel { width: min(840px, 100%); }
  .db-body { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "wheel streak" "wheel prize" "wheel odds"; align-items: center; column-gap: 16px; row-gap: 6px; }
  .db-bulb { width: 15px; height: 15px; }
  .db-prizebox { min-height: 36px; gap: 2px; }
  .db-streak { gap: 3px; }
  .db-prize.won { font-size: 26px; }
  .db-note { font-size: 10px; line-height: 1.35; }
}

/* The MISSION LOG: the PILOT RANK card, then each group's missions with medals. */
.md-missions .md-panel { width: min(900px, 100%); height: min(860px, 100%); }
.ml-body { padding-bottom: 6px; }
.ml-rank { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 8px; border-radius: 16px; background: linear-gradient(180deg, rgba(10, 26, 52, 0.8), rgba(4, 8, 22, 0.8)); box-shadow: inset 0 0 0 1.5px rgba(41, 230, 255, 0.45), 0 0 20px rgba(41, 230, 255, 0.12); }
.ml-emblem { flex: 0 0 auto; width: 104px; height: 78px; }
.ml-rank-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ml-rank-k { font: 800 9.5px/1 var(--font-meter); letter-spacing: 0.26em; color: #9fe8ff; }
.ml-rank-n { font: 900 clamp(15px, 2.4vh, 20px)/1.1 var(--font-brand); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; color: #f4fdff; text-shadow: 0 0 10px rgba(41, 230, 255, 0.6); }
.ml-xp { position: relative; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); }
.ml-xp i, .ml-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #29e6ff, #ffe27a); box-shadow: 0 0 6px rgba(41, 230, 255, 0.8); }
.ml-rank-s { font: 700 11px/1.3 var(--font-meter); letter-spacing: 0.08em; white-space: pre-line; color: #ffe27a; }
.ml-rank-note { font: 600 11px/1.4 var(--font-ui); color: #9a92bf; }
.ml-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 2px 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(245, 197, 66, 0.25); }
.ml-gname { font: 900 12px/1.1 var(--font-brand); letter-spacing: 0.2em; color: #ffd76a; }
.ml-gcount { font: 700 11px/1 var(--font-meter); letter-spacing: 0.1em; color: #a99fd0; white-space: nowrap; }
.ml-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ml-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.ml-row.done { background: linear-gradient(135deg, rgba(255, 200, 60, 0.12), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 210, 110, 0.38); }
.ml-medal { flex: 0 0 auto; width: 50px; height: 50px; }
.ml-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ml-name { font: 900 12.5px/1.15 var(--font-ui); letter-spacing: 0.08em; color: #cfc7ef; }
.ml-row.done .ml-name { color: #fff3c4; }
.ml-how { font: 600 11.5px/1.3 var(--font-ui); color: #9a92bf; }
.ml-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ml-bar { position: relative; flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ml-count { flex: 0 0 auto; font: 700 10px/1 var(--font-meter); letter-spacing: 0.04em; color: #bff6ff; white-space: nowrap; }
.ml-rew { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ml-amt { display: flex; align-items: center; gap: 4px; font: 400 15px/1 var(--font-num); color: #ffe27a; white-space: nowrap; }
.ml-row:not(.done) .ml-amt { color: #c9b77a; }
.ml-amt .coin-ico { width: 16px; height: 16px; }
.ml-done { padding: 2px 7px; border-radius: 999px; font: 800 8.5px/1.3 var(--font-ui); letter-spacing: 0.16em; color: #0b2a10; background: linear-gradient(180deg, #b6ffc8, #3ddc6a); }
@media (max-width: 560px) { .ml-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .ml-emblem { width: 80px; height: 60px; }
  .ml-rank { gap: 10px; padding: 8px 12px 8px 4px; }
}
@media (max-height: 450px) {
  .ml-emblem { width: 72px; height: 54px; }
  .ml-rank-note { display: none; }
}

/* Settings: RESET PROGRESS */
.set-danger { color: #ffb4a8; box-shadow: inset 0 0 0 1px rgba(255, 120, 100, 0.45); }
.set-danger:disabled { opacity: 0.6; cursor: default; }

/* ---- keyframes ---------------------------------------------------------------------------- */
@keyframes lampBlink { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.8); } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcIn { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes candle { from { filter: brightness(0.55); } to { filter: brightness(1.35); } }
@keyframes candleChase { 0%, 70%, 100% { filter: brightness(0.6); box-shadow: none; } 80% { filter: brightness(1.6); box-shadow: 0 0 14px var(--acc); } }
@keyframes topperFlash { from { filter: brightness(1); } to { filter: brightness(1.7); box-shadow: 0 0 18px #ff3048, inset 0 0 0 1px #ffe7a0; } }
@keyframes signHit { from { filter: brightness(1); } to { filter: brightness(1.7); } }
@keyframes bellRing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes comet { 0% { transform: translateX(0) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(420%) rotate(-12deg); opacity: 0; } }
@keyframes tkPrint { to { clip-path: inset(0 0 0 0); } }
@keyframes tkAway { to { transform: translateY(-30px); opacity: 0; } }
@keyframes tkSignIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes tkSignOff { to { opacity: 0; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nebulaDrift { from { transform: translate(2%, 1.5%) scale(1); } to { transform: translate(-2%, -1.5%) scale(1.04); } }
@keyframes planetBob { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-10px) rotate(2deg); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes coinSpin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.08); } }
@keyframes coinBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes bootBar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes textShine { 0%, 55% { background-position: 150% 0, 0 0; } 85%, 100% { background-position: -60% 0, 0 0; } }
@keyframes sheen { 0%, 70% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
@keyframes jpHit { from { filter: brightness(1); transform: scale(1); } to { filter: brightness(1.6); transform: scale(1.06); } }
@keyframes breathe { 0%, 100% { transform: scale(0.94); opacity: 0.4; } 50% { transform: scale(1.06); opacity: 0.75; } }
@keyframes press { 0% { transform: scale(1); } 35% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes counterTick { 0% { transform: scale(1.12); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@keyframes bump { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes framePulse { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes anticPulse { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes badgeIn { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@keyframes modeFlash { from { opacity: 0.75; } to { opacity: 0; } }
@keyframes panelPop { 0% { opacity: 0; transform: scale(0.55); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes panelShine { 0%, 50% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes burstIn { 0% { opacity: 0; transform: scale(0.3) rotate(-6deg); } 18% { opacity: 1; transform: scale(1.12) rotate(1deg); } 30% { transform: scale(1) rotate(0); } 78% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes titlePunch { 0% { opacity: 0; transform: scale(0.2); } 55% { opacity: 1; transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes titlePulse { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes settle { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes tileIn { from { opacity: 0; transform: translateY(18px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes revealGlow { 0% { box-shadow: inset 0 0 0 3px #fff, 0 0 46px #fff; } 100% { box-shadow: inset 0 0 0 3px var(--m-frame2, #c8962a), inset 0 0 0 5px rgba(0, 0, 0, 0.5), 0 0 20px var(--m-glow-a, rgba(255, 200, 60, 0.45)); } }

@media (prefers-reduced-motion: reduce) {
  .jp-sheen, .bn-shine { animation: none; }
}