/* =========================================================================
   NEON KENO — styles.css
   Layout, glassmorphism surfaces, number board states, controls, overlays.
   ====================================================================== */

:root {
  --bg: #0b0e14;
  --bg-deep: #05070b;
  --cyan: #00f3ff;
  --magenta: #ff007f;
  --green: #00ff66;
  --gold: #ffd700;
  --white: #ffffff;
  --muted: #7f8a9a;

  --glass: linear-gradient(135deg, rgba(0, 243, 255, .12), rgba(255, 0, 127, .08));
  --panel: linear-gradient(160deg, rgba(24, 34, 48, .78), rgba(10, 15, 23, .86));
  --hairline: rgba(150, 190, 220, .16);
  --hairline-soft: rgba(150, 190, 220, .09);

  --radius-lg: 1.6cqw;
  --radius-md: 1.1cqw;
  --radius-sm: .75cqw;

  --font-ui: "Rajdhani", "Chakra Petch", "Bahnschrift", "DIN Alternate",
             "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "SF Mono", "Roboto Mono", "DejaVu Sans Mono", ui-monospace, monospace;
}

/* ------------------------------------------------------------- reset ---- */

*,
*::before,
*::after { box-sizing: border-box; }

/* The page scrolls when the cabinet cannot fit. The original build pinned
   html/body to 100% with overflow:hidden, so on any viewport shorter than
   the cabinet the controls were simply unreachable. */
html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, #16202e 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #12202b 0%, transparent 55%),
    var(--bg-deep);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;      /* becomes flex-start via min-height query below */
  justify-content: center;
}

/* When the cabinet is taller than the viewport, centring would clip the top
   half beyond the scroll origin. Anchor to the top and let the page scroll. */
@media (max-height: 560px) {
  body { align-items: flex-start; }
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* --------------------------------------------------------- app shell ----
   Sizing strategy
   ---------------
   The cabinet is a fixed-aspect portrait console. Rather than pinning it to
   100dvh (which clipped everything below the fold on short screens), the
   height is CLAMPED to a comfortable range and the width is derived from
   that height, so the aspect ratio is preserved at every size:

     effective height = clamp(min, 100dvh, max)
     width            = min(100vw, height * aspect)

   When the viewport is shorter than --cab-min-h the cabinet keeps its
   minimum height and the page scrolls instead of hiding the controls. */
#app {
  --cab-aspect: .615;
  --cab-min-h: 560px;
  --cab-max-h: 1040px;

  /* dvh where supported, vh as the fallback for older engines. */
  --cab-h: clamp(var(--cab-min-h), 100vh, var(--cab-max-h));
  --cab-h: clamp(var(--cab-min-h), 100dvh, var(--cab-max-h));

  position: relative;
  width: min(100vw, calc(var(--cab-h) * var(--cab-aspect)));
  height: var(--cab-h);
  flex: 0 0 auto;
  margin: auto;
  container-type: size;
  container-name: cabinet;
  overflow: hidden;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(0, 243, 255, .10), transparent 65%),
    linear-gradient(180deg, #0d1118 0%, var(--bg) 45%, #070a10 100%);
  box-shadow: 0 0 60px rgba(0, 0, 0, .9);
}

#cabinet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  padding: max(1.8cqw, env(safe-area-inset-top)) 2.4cqw
           max(1.8cqw, env(safe-area-inset-bottom)) 2.4cqw;
  font-size: 3.4cqw;
}

/* Faint scanline texture — kept extremely subtle. */
#app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .012) 0 1px,
    transparent 1px 3px
  );
  z-index: 60;
}

/* ----------------------------------------------------------- top hud ---- */

#topHud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 1.2cqw 1.6cqw;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(8px);
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  min-width: 0;
}

.brand-mark {
  width: 3.4cqw;
  height: 3.4cqw;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9fbff, var(--cyan) 45%, #05505f);
  box-shadow: 0 0 2cqw rgba(0, 243, 255, .8), inset 0 0 .6cqw rgba(0, 0, 0, .5);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}
.brand-text b {
  font-size: 2.9cqw;
  letter-spacing: .16em;
  color: #dff6ff;
}
.brand-text i {
  font-style: normal;
  font-size: 2cqw;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.hud-meter {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  padding: .4cqw 1.6cqw .4cqw 0;
  border-right: 1px solid var(--hairline-soft);
}
.meter-label {
  font-size: 1.9cqw;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.meter-value {
  font-size: 3.4cqw;
  font-variant-numeric: tabular-nums;
  color: #eaf7ff;
  text-shadow: 0 0 1.6cqw rgba(0, 243, 255, .45);
}
.meter-value.flash { animation: valueFlash .55s ease-out; }

.hud-actions {
  display: flex;
  gap: 1cqw;
}

.icon-btn {
  width: 7cqw;
  height: 7cqw;
  padding: 1.7cqw;
  border-radius: var(--radius-md);
  color: #9fb4c6;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid var(--hairline-soft);
  transition: color .18s, border-color .18s, transform .1s, box-shadow .18s;
}
.icon-btn:hover { color: var(--cyan); border-color: rgba(0, 243, 255, .4); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ico-off { display: none; }
.icon-btn.is-muted { color: #6b7787; }
.icon-btn.is-muted .ico-on { display: none; }
.icon-btn.is-muted .ico-off { display: block; }
.icon-btn.is-active {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.7);
  background: rgba(255, 215, 0, 0.16);
  box-shadow: 0 0 2cqw rgba(255, 215, 0, 0.45);
}

/* ----------------------------------------------------------- tracker ---- */

#tracker {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  padding: 1.6cqw 1.8cqw;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1cqw 4cqw rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
}

.multiplier-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.8cqw;
  width: 100%;
}

.mult-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6cqw 0.3cqw;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .02);
  border: 1.5px solid rgba(150, 190, 220, .12);
  transition: all .2s cubic-bezier(.2, .8, .2, 1);
  min-height: 5cqw;
  user-select: none;
}

.mult-hits {
  font-size: 1.6cqw;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #526375;
  line-height: 1;
}

.mult-val {
  font-size: 2.3cqw;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #6e8297;
  margin-top: .2cqw;
  line-height: 1.1;
}

/* Dimmed unhit state */
.mult-box.is-dim {
  opacity: .45;
  filter: grayscale(0.4);
}

/* Has valid payout for selected spots */
.mult-box.has-multiplier {
  opacity: .85;
  border-color: rgba(0, 243, 255, .25);
  background: rgba(0, 243, 255, .03);
}
.mult-box.has-multiplier .mult-hits {
  color: #8da5ba;
}
.mult-box.has-multiplier .mult-val {
  color: var(--cyan);
}

/* When a hit occurs — LIGHTING UP! */
.mult-box.is-hit {
  opacity: 1;
  filter: none;
  background: rgba(0, 243, 255, .18);
  border-color: var(--cyan);
  box-shadow: 0 0 1.8cqw rgba(0, 243, 255, .6), inset 0 0 1cqw rgba(0, 243, 255, .35);
  transform: scale(1.03);
}
.mult-box.is-hit .mult-hits {
  color: #e0fdff;
  text-shadow: 0 0 .8cqw rgba(0, 243, 255, .8);
}
.mult-box.is-hit .mult-val {
  color: #ffffff;
  text-shadow: 0 0 1.2cqw rgba(0, 243, 255, .9);
}

/* Winning hit multiplier (hits >= min paying hit for spot count) */
.mult-box.is-winning-hit {
  background: linear-gradient(135deg, rgba(255, 215, 0, .28), rgba(0, 255, 102, .22));
  border-color: var(--gold);
  box-shadow: 0 0 2.5cqw rgba(255, 215, 0, .85), inset 0 0 1.2cqw rgba(255, 215, 0, .5);
  animation: multLighting .45s cubic-bezier(.2, 1.5, .4, 1);
}
.mult-box.is-winning-hit .mult-hits {
  color: #fff9db;
  text-shadow: 0 0 1cqw rgba(255, 215, 0, .9);
}
.mult-box.is-winning-hit .mult-val {
  color: #ffe600;
  text-shadow: 0 0 1.6cqw rgba(255, 215, 0, 1);
}

/* The rung that just landed — a brighter ring on top of is-hit /
   is-winning-hit so the eye tracks the newest ball. */
.mult-box.is-current-hit {
  transform: scale(1.09);
  border-color: #ffffff;
  box-shadow:
    0 0 2.2cqw rgba(255, 255, 255, .75),
    0 0 3.4cqw rgba(0, 243, 255, .55),
    inset 0 0 1.2cqw rgba(255, 255, 255, .4);
}

.mult-box.is-current-hit.is-winning-hit {
  box-shadow:
    0 0 2.6cqw rgba(255, 255, 255, .8),
    0 0 4cqw rgba(255, 215, 0, .9),
    inset 0 0 1.4cqw rgba(255, 240, 180, .5);
}

.mult-box.is-current-hit .mult-val {
  color: #ffffff;
  text-shadow: 0 0 1.6cqw rgba(255, 255, 255, .95);
}

@media (prefers-reduced-motion: reduce) {
  .mult-box.is-current-hit { transform: none; }
}

@keyframes multLighting {
  0% { transform: scale(.92); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.8); }
  100% { transform: scale(1.03); filter: brightness(1); }
}

.tracker-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1cqw;
  margin-top: .3cqw;
  padding-top: 1.2cqw;
  border-top: 1px solid var(--hairline-soft);
}
.stat {
  display: flex;
  align-items: baseline;
  gap: .8cqw;
  min-width: 0;
}
.stat em {
  font-style: normal;
  font-size: 1.95cqw;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat b {
  font-size: 3.1cqw;
  font-variant-numeric: tabular-nums;
  color: #e8f6ff;
}
.stat b i {
  font-style: normal;
  color: var(--muted);
  font-size: .72em;
}
.stat-hits b { color: var(--green); text-shadow: 0 0 1.6cqw rgba(0, 255, 102, .5); }
.stat-win b { color: var(--gold); text-shadow: 0 0 1.6cqw rgba(255, 215, 0, .45); }
.stat-win.bump b { animation: valueFlash .5s ease-out; }

/* ------------------------------------------------------------- stage ---- */

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

#machineCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.stage-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
  margin: 0;
  text-align: center;
  font-size: 2.1cqw;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 3;
  transition: opacity .3s;
  pointer-events: none;
}
.stage-hint.is-hidden { opacity: 0; }

/* ------------------------------------------------------- number board --- */

#numberBoard {
  /* These match LAYOUT in machineCanvas.js. app.js rewrites them at boot
     from the same constants; keeping them in sync here avoids a jump on
     the very first paint. */
  position: absolute;
  left: 10%;
  right: 10%;
  top: 35%;
  bottom: 14.5%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
  gap: 1.1cqw;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 1.4cqw;
  font-size: 3cqw;
  font-variant-numeric: tabular-nums;
  color: #b6c6d6;
  background:
    linear-gradient(165deg, rgba(58, 74, 94, .55), rgba(18, 25, 36, .8));
  border: 1px solid rgba(160, 195, 225, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -2px 4px rgba(0, 0, 0, .45),
    0 .5cqw 1.4cqw rgba(0, 0, 0, .5);
  transition: transform .14s cubic-bezier(.2, 1.4, .4, 1), color .2s,
              border-color .2s, box-shadow .25s, background .25s;
}

@media (hover: hover) {
  .cell:not(.is-locked):hover {
    color: #e6f6ff;
    border-color: rgba(0, 243, 255, .45);
    transform: translateY(-2%);
  }
}
.cell:active:not(.is-locked) { transform: scale(.94); }

/* Selected — magenta neon (the player's own marks). */
.cell.is-selected {
  color: #ffe3f0;
  border-color: var(--magenta);
  background: linear-gradient(165deg, rgba(255, 0, 127, .3), rgba(60, 8, 33, .8));
  box-shadow:
    inset 0 0 1.6cqw rgba(255, 0, 127, .45),
    0 0 2.4cqw rgba(255, 0, 127, .55);
}
.cell.is-selected::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .35);
  opacity: .5;
  pointer-events: none;
}

/* Drawn but not chosen — cool cyan acknowledgement. */
.cell.is-drawn {
  color: #d9f7ff;
  border-color: rgba(0, 243, 255, .6);
  background: linear-gradient(165deg, rgba(0, 243, 255, .16), rgba(8, 28, 38, .82));
  box-shadow: inset 0 0 1.2cqw rgba(0, 243, 255, .3), 0 0 1.6cqw rgba(0, 243, 255, .3);
}

/* Chosen AND drawn — the payline. */
.cell.is-hit {
  color: #0a1a10;
  border-color: var(--green);
  background: linear-gradient(165deg, #7dffb4, #00d64f 60%, #009a38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 3.2cqw rgba(0, 255, 102, .8);
  text-shadow: none;
}

.cell.is-locked { cursor: default; }
.cell.pop { animation: cellPop .42s cubic-bezier(.2, 1.5, .4, 1); }
.cell.flash-hit { animation: hitFlash .7s ease-out; }
.cell.flash-miss { animation: missFlash .5s ease-out; }

/* ---------------------------------------------------------- controls ---- */

#controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.3cqw;
  padding: 1.6cqw;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 -1cqw 4cqw rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
}

.control-row {
  display: flex;
  align-items: stretch;
  gap: 1.3cqw;
}

.bet-stepper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: .8cqw;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline-soft);
}

.step-btn {
  width: 8cqw;
  height: 8cqw;
  flex: none;
  padding: 2.2cqw;
  border-radius: 1cqw;
  color: #cfe4f2;
  background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  border: 1px solid var(--hairline);
  transition: transform .1s, color .18s, border-color .18s;
}
.step-btn:hover { color: var(--cyan); border-color: rgba(0, 243, 255, .45); }
.step-btn:active { transform: scale(.9); }
.step-btn[disabled] { opacity: .3; cursor: default; transform: none; }

.bet-face {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.bet-face em {
  font-style: normal;
  font-size: 1.85cqw;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.bet-face b {
  font-size: 3.6cqw;
  font-variant-numeric: tabular-nums;
  color: #f0faff;
}

.payout-face {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  padding: .8cqw 1cqw;
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, rgba(255, 215, 0, .2), rgba(90, 66, 6, .35));
  border: 1px solid rgba(255, 215, 0, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.payout-face em {
  font-style: normal;
  font-size: 1.85cqw;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 226, 130, .75);
}
.payout-face b {
  font-size: 3.6cqw;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 0 2cqw rgba(255, 215, 0, .6);
}
.payout-face.bump { animation: goldBump .6s ease-out; }

.control-row-main { align-items: center; }

.ghost-btn {
  flex: 0 0 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5cqw;
  padding: 1.3cqw .6cqw;
  border-radius: var(--radius-md);
  color: #9fb4c6;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline-soft);
  font-size: 1.85cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .18s, border-color .18s, transform .1s, opacity .2s;
}
.ghost-btn svg { width: 4.4cqw; height: 4.4cqw; }
.ghost-btn:hover { color: var(--cyan); border-color: rgba(0, 243, 255, .35); }
.ghost-btn:active { transform: scale(.94); }
.ghost-btn[disabled] { opacity: .32; cursor: default; transform: none; }

.play-btn {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  height: 11cqw;
  border-radius: 1.6cqw;
  overflow: hidden;
  color: #04220f;
  background: linear-gradient(180deg, #96ffc4 0%, #14e36a 42%, #05a648 100%);
  border: 1px solid rgba(200, 255, 220, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -3px 6px rgba(0, 60, 25, .5),
    0 0 3.6cqw rgba(0, 255, 102, .5);
  transition: transform .1s, box-shadow .3s, filter .3s;
  animation: playBreathe 3.2s ease-in-out infinite;
}
.play-btn .play-ico { width: 4.6cqw; height: 4.6cqw; fill: currentColor; stroke: none; }
.play-label {
  font-size: 4cqw;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding-left: .3em;
}
.play-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .85), transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.play-btn:hover { transform: scale(1.03); }
.play-btn:active { transform: scale(.96); }
.play-btn.ignite .play-glow { animation: ignite .55s ease-out; }

.play-btn[disabled] {
  cursor: default;
  animation: none;
  transform: none;
  filter: saturate(.15) brightness(.6);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .4);
}
.play-btn.is-busy {
  background: linear-gradient(180deg, #7fd9ff 0%, #12a9d8 42%, #0a6c8e 100%);
  color: #032230;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 3cqw rgba(0, 243, 255, .45);
}

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

.overlay-result {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.overlay-result.is-open { opacity: 1; }

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6cqw;
  padding: 4cqw 8cqw;
  border-radius: 2.4cqw;
  background: linear-gradient(160deg, rgba(10, 24, 18, .92), rgba(5, 10, 14, .95));
  border: 1px solid rgba(0, 255, 102, .5);
  box-shadow: 0 0 8cqw rgba(0, 255, 102, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: scale(.85);
  transition: transform .38s cubic-bezier(.2, 1.5, .4, 1);
}
.is-open .result-card { transform: scale(1); }

.overlay-result.is-loss .result-card {
  border-color: rgba(150, 175, 200, .3);
  box-shadow: 0 0 5cqw rgba(0, 0, 0, .6);
}

.result-title {
  font-size: 3.2cqw;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 2.4cqw rgba(0, 255, 102, .8);
}
.overlay-result.is-loss .result-title { color: var(--muted); text-shadow: none; }

.result-amount {
  font-size: 8cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 0 3.4cqw rgba(255, 215, 0, .7);
  line-height: 1;
}
.overlay-result.is-loss .result-amount { font-size: 5cqw; color: #b9c8d6; text-shadow: none; }

.result-sub {
  font-size: 2.2cqw;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translate(-50%, 1cqw);
  z-index: 50;
  padding: 1.4cqw 3cqw;
  border-radius: 10cqw;
  font-size: 2.4cqw;
  letter-spacing: .1em;
  color: #ffe3ef;
  background: rgba(38, 8, 22, .92);
  border: 1px solid rgba(255, 0, 127, .5);
  box-shadow: 0 0 3cqw rgba(255, 0, 127, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  white-space: nowrap;
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ sheets ---- */

.sheet-layer {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 4cqw;
}
.sheet-layer[hidden] { display: none; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 10, .78);
  backdrop-filter: blur(6px);
}

.sheet {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 3cqw;
  border-radius: 2.2cqw;
  background: linear-gradient(160deg, rgba(22, 32, 45, .96), rgba(8, 12, 19, .98));
  border: 1px solid var(--hairline);
  box-shadow: 0 2cqw 8cqw rgba(0, 0, 0, .8);
  animation: sheetIn .3s cubic-bezier(.2, 1.2, .4, 1);
}
.sheet[hidden] { display: none; }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  margin-bottom: 1.6cqw;
}
.sheet-head h2 {
  margin: 0;
  font-size: 3.4cqw;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #dff4ff;
}
.sheet-close { flex: none; }

.sheet-note {
  margin: 0 0 2cqw;
  font-size: 2.1cqw;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted);
  line-height: 1.5;
}

.spot-tabs {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .8cqw;
  margin-bottom: 2.2cqw;
}
.spot-tab {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: .9cqw;
  font-size: 2.4cqw;
  color: #93a6b8;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hairline-soft);
  transition: color .2s, border-color .2s, background .2s;
}
.spot-tab.is-on {
  color: #04220f;
  background: linear-gradient(180deg, #8dffbd, #0fce62);
  border-color: rgba(0, 255, 102, .6);
}

.pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7cqw;
}
.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1.1cqw 1.6cqw;
  border-radius: .9cqw;
  font-size: 2.5cqw;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline-soft);
}
.pay-row span { color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: 2.1cqw; }
.pay-row b { color: var(--gold); font-variant-numeric: tabular-nums; }
.pay-row.is-zero b { color: #5d6875; }
.pay-row.is-top { border-color: rgba(255, 215, 0, .4); background: rgba(255, 215, 0, .07); }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.8cqw 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 2.8cqw;
  color: #cfe0ee;
}

.switch {
  width: 11cqw;
  height: 5.6cqw;
  flex: none;
  border-radius: 10cqw;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--hairline);
  position: relative;
  transition: background .22s, border-color .22s;
}
.switch i {
  position: absolute;
  top: 50%;
  left: .6cqw;
  width: 4cqw;
  height: 4cqw;
  border-radius: 50%;
  background: #8fa3b5;
  transform: translateY(-50%);
  transition: left .22s cubic-bezier(.3, 1.4, .4, 1), background .22s;
}
.switch[aria-checked="true"] {
  background: rgba(0, 255, 102, .22);
  border-color: rgba(0, 255, 102, .55);
}
.switch[aria-checked="true"] i { left: calc(100% - 4.6cqw); background: var(--green); }

.sheet-action {
  width: 100%;
  margin-top: 2.4cqw;
  padding: 1.8cqw;
  border-radius: 1.2cqw;
  font-size: 2.6cqw;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #cfe4f2;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hairline);
  transition: color .2s, border-color .2s;
}
.sheet-action:hover { color: var(--cyan); border-color: rgba(0, 243, 255, .45); }

/* ------------------------------------------------------------- debug ---- */

.debug-panel {
  position: absolute;
  top: 12cqw;
  left: 2.4cqw;
  z-index: 58;
  margin: 0;
  padding: 1.4cqw;
  border-radius: 1cqw;
  font-family: var(--font-num);
  font-size: 1.9cqw;
  line-height: 1.55;
  color: #8ef0ff;
  background: rgba(3, 8, 12, .85);
  border: 1px solid rgba(0, 243, 255, .3);
  pointer-events: none;
  white-space: pre;
}
.debug-panel[hidden] { display: none; }

/* -------------------------------------------------------- animations ---- */

@keyframes pipPulse {
  0%, 100% { box-shadow: 0 0 1.4cqw rgba(0, 243, 255, .4), inset 0 0 .8cqw rgba(0, 243, 255, .25); }
  50%      { box-shadow: 0 0 3cqw rgba(0, 243, 255, .85), inset 0 0 1.6cqw rgba(0, 243, 255, .45); }
}
@keyframes pipPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@keyframes cellPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes hitFlash {
  0%   { transform: scale(1);   filter: brightness(2.4); }
  35%  { transform: scale(1.16); filter: brightness(1.4); }
  100% { transform: scale(1);   filter: brightness(1); }
}
@keyframes missFlash {
  0%   { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}
@keyframes valueFlash {
  0%   { transform: scale(1);    filter: brightness(2); }
  40%  { transform: scale(1.14); filter: brightness(1.3); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@keyframes goldBump {
  0%   { transform: scale(1);   box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(255,215,0,0); }
  40%  { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 4cqw rgba(255,215,0,.7); }
  100% { transform: scale(1);   box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(255,215,0,0); }
}
@keyframes playBreathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 6px rgba(0,60,25,.5), 0 0 2.4cqw rgba(0,255,102,.35); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 6px rgba(0,60,25,.5), 0 0 5cqw rgba(0,255,102,.7); }
}
@keyframes ignite {
  0%   { opacity: .95; transform: scale(.25); }
  100% { opacity: 0;   transform: scale(2.2); }
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(3cqw) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- responsive tweaks ---- */

/* Wide/short cabinets (mobile landscape, small laptops): tighten vertical
   rhythm so the machine keeps its presence. */
@container cabinet (max-height: 520px) {
  #cabinet { gap: 1cqw; padding: 1.4cqw 1.8cqw; }
  #tracker { gap: .8cqw; padding: 1.2cqw 1.4cqw; }
  #controls { gap: 1cqw; padding: 1.2cqw; }
}

/* Very large cabinets (desktop): stop type from becoming cartoonish. */
@media (min-width: 1100px) and (min-height: 900px) {
  #cabinet { font-size: min(3.4cqw, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   BOOT / PRELOADER
   Sits inside the cabinet so it inherits the frame, and is removed from the
   DOM once the assets are ready.
   ========================================================================== */

.boot-screen {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  padding: 8cqw;
  text-align: center;
  background:
    radial-gradient(70% 50% at 50% 35%, rgba(0, 243, 255, .10), transparent 70%),
    linear-gradient(180deg, #0d1118 0%, var(--bg) 55%, #070a10 100%);
  transition: opacity .45s ease, visibility .45s ease;
}

.boot-screen.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4cqw;
}

.boot-ring {
  width: 16cqw;
  height: 16cqw;
  margin-bottom: 2cqw;
  border-radius: 50%;
  border: .9cqw solid rgba(0, 243, 255, .18);
  border-top-color: var(--cyan);
  box-shadow: 0 0 4cqw rgba(0, 243, 255, .35);
  animation: bootSpin 1s linear infinite;
}

.boot-name {
  font-size: 6.4cqw;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--white);
  text-shadow: 0 0 3cqw rgba(0, 243, 255, .5);
}

.boot-sub {
  font-size: 2.6cqw;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}

.boot-track {
  width: min(56cqw, 320px);
  height: 1.1cqw;
  min-height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.boot-bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}

.boot-label {
  margin: 0;
  font-size: 2.3cqw;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

@keyframes bootSpin { to { transform: rotate(360deg); } }

/* Hide the cabinet chrome until boot finishes so nothing flashes unstyled. */
body:not(.is-booted) #cabinet > *:not(.boot-screen) { opacity: 0; }
#cabinet > * { transition: opacity .4s ease; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Wider, shorter windows: let the console grow a little rather than
   staying a narrow sliver in the middle of a desktop display. */
@media (min-width: 900px) and (min-height: 700px) {
  #app { --cab-max-h: 1100px; }
}

/* Very short viewports — phones in landscape, small laptops. The cabinet
   holds its minimum height and the page scrolls to reach the controls. */
@media (max-height: 620px) {
  #app {
    --cab-min-h: 580px;
    box-shadow: none;
  }
  body { padding-block: 12px; }
}

/* Narrow phones: reclaim padding so the board keeps its tap targets. */
@media (max-width: 360px) {
  #cabinet { padding-left: 1.6cqw; padding-right: 1.6cqw; }
}

/* Coarse pointers get larger minimum hit areas regardless of cqw scaling. */
@media (pointer: coarse) {
  /* NOTE: never give .cell a min-height here. The board is an absolutely
     positioned band between the sphere and the pipe; a minimum row height
     makes the grid overflow that band and collide with the pipe. Cell size
     is governed by the band itself. */
  .icon-btn { min-width: 32px; min-height: 32px; }
  .step-btn { min-width: 34px; min-height: 34px; }
}

/* Respect reduced-motion for the boot sequence too. */
@media (prefers-reduced-motion: reduce) {
  .boot-ring { animation: none; }
  .boot-bar { transition: none; }
  #cabinet > * { transition: none; }
}