/* =====================================================================
   WIN PRESENTATION — depth, glow and light
   The win message was flat white on a black plate. It now has real
   extruded depth, a moving sheen across the letters, and a bloom behind
   the plate that scales with the tier.
   ===================================================================== */
#winMessage {
  /* Extruded downward, then lit from behind. The stack is deliberately
     short — a deep extrude at 5rem turns into an unreadable slab. */
  text-shadow:
    0 2px 0 #6b6b6b, 0 3px 0 #5a5a5a, 0 4px 0 #494949,
    0 6px 14px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(255, 255, 255, 0.35);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.82), rgba(0,0,0,0.6));
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

/* A sheen that sweeps across the text once as it lands. */
@keyframes winSheen {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}
#winMessage.show::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: winSheen 1100ms 180ms ease-out;
}

/* Tier bloom behind the plate. Bigger wins light more of the screen. */
#winMessage.big-win {
  box-shadow: 0 0 60px 14px rgba(255, 217, 77, 0.5), inset 0 0 34px rgba(255, 217, 77, 0.15);
  border-color: rgba(255, 217, 77, 0.55);
}
#winMessage.jackpot {
  box-shadow: 0 0 90px 26px rgba(255, 120, 200, 0.55), inset 0 0 40px rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
}

/* The rainbow jackpot text gets its own extrude, since a coloured
   gradient fill cannot carry a text-shadow of its own. */
.rainbow-text {
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.55)) drop-shadow(0 6px 16px rgba(0,0,0,0.9))
          drop-shadow(0 0 26px rgba(255, 120, 200, 0.85));
}

/* The floating "+N" that rises off a win. */
#floatingWin {
  text-shadow:
    0 2px 0 #7a5a00, 0 3px 0 #654a00, 0 5px 12px rgba(0,0,0,0.85),
    0 0 26px rgba(255, 217, 77, 0.9);
}

/* Winning symbols pulse rather than sitting statically lit. */
@keyframes symbolWinPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,217,77,0.85)) brightness(1.1); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 26px rgba(255,217,77,1)) brightness(1.35); transform: scale(1.07); }
}
.reel-track img.symbol-glow {
  animation: symbolWinPulse 900ms ease-in-out infinite;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  #winMessage.show::after,
  .reel-track img.symbol-glow { animation: none; }
}

/* =====================================================================
   CASTLE BACKDROP
   Sits behind the reels inside the machine frame. Every layer is
   pointer-transparent and below the reels, so none of it can interfere
   with play.
   ===================================================================== */
/* The whole backdrop lives behind the page, not inside the machine
   frame — the reels fill that frame completely, so nothing drawn there
   is ever visible. */
.terror-backdrop {
  position: fixed;
  /* Inset from the top so nothing drifts up through the site nav and
     theme switcher — a backdrop that swarms the chrome reads as broken
     rather than atmospheric. */
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Deepens the page itself while a visit is running. */
/* The Castle no longer redeclares the whole background shorthand here.
   It used to, which erased whatever body was painting — and the royal
   room now lives on its own element behind it, so the Castle only needs
   to re-tint the shared tokens. Those overrides are with THE ROOM. */
body.in-castle {
  background: var(--room-deep);
}
body.in-castle main.slot-machine { position: relative; z-index: 1; }

.terror-bg-piece {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* --- the castle skyline --- */
.terror-bg-castle {
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
}
.terror-tower {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, #0d0a12 0%, #050308 100%);
  /* Battlements, cut straight out of the tower's top edge. */
  clip-path: polygon(
    0% 100%, 0% 12%, 8% 12%, 8% 0%, 22% 0%, 22% 12%, 39% 12%,
    39% 0%, 55% 0%, 55% 12%, 72% 12%, 72% 0%, 88% 0%, 88% 12%,
    100% 12%, 100% 100%
  );
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
}
@keyframes terrorWindow {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 12px 3px rgba(255, 170, 60, 0.75); }
  45%      { opacity: 0.25; box-shadow: 0 0 5px 1px rgba(255, 170, 60, 0.35); }
  55%      { opacity: 0.95; box-shadow: 0 0 16px 5px rgba(255, 190, 90, 0.9); }
}
.terror-window {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 16%;
  border-radius: 40% 40% 8% 8%;
  background: #ffb43c;
  animation: terrorWindow 3.4s ease-in-out infinite;
}

/* --- bats --- */
@keyframes terrorBatFly {
  0%   { transform: translateX(-12vw) translateY(0) scaleX(1); }
  25%  { transform: translateX(28vw) translateY(-16px) scaleX(1); }
  50%  { transform: translateX(60vw) translateY(10px) scaleX(1); }
  75%  { transform: translateX(88vw) translateY(-12px) scaleX(1); }
  100% { transform: translateX(115vw) translateY(0) scaleX(1); }
}
.terror-bg-bat {
  left: 0;
  opacity: 0.42;
  /* Silhouetted rather than greyed: a washed-out emoji reads as a
     rendering fault, a solid black shape reads as a bat. */
  filter: brightness(0) drop-shadow(0 0 6px rgba(0, 0, 0, 0.8));
  animation: terrorBatFly linear infinite;
}

/* --- skulls rising --- */
@keyframes terrorSkullRise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.5; }
  88%  { opacity: 0.5; }
  100% { transform: translateY(-260px) rotate(24deg); opacity: 0; }
}
.terror-bg-skull {
  bottom: -8%;
  color: rgba(210, 235, 220, 0.55);
  text-shadow: 0 0 14px rgba(150, 255, 190, 0.55);
  animation: terrorSkullRise linear infinite;
}

/* --- lightning, lighting the whole frame --- */
@keyframes terrorLightning {
  0%, 92%, 100% { opacity: 0; }
  93%  { opacity: 0.75; }
  94%  { opacity: 0.1; }
  95%  { opacity: 0.9; }
  97%  { opacity: 0; }
}
.terror-bg-lightning {
  inset: 0;
  background: linear-gradient(180deg, rgba(200, 225, 255, 0.85), rgba(140, 170, 220, 0.15) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: terrorLightning 9s linear infinite;
}

/* The reels must sit above all of it. */
.machine-frame[data-machine="terrorCastle"] .reels { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .terror-bg-bat, .terror-bg-skull, .terror-bg-lightning, .terror-window { animation: none; }
  .terror-bg-lightning { opacity: 0; }
}

/* =====================================================================
   ACCOUNT + LEADERBOARD
   ===================================================================== */
.btn.account {
  background: linear-gradient(180deg, var(--violet-mid), #7e22ce 55%, #4c1080);
  border-color: #e9d5ff;
}

.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 11800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.86);
}
.account-overlay.open { display: flex; }

.account-panel {
  width: min(30rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.3rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1a1030, #0a0616);
  border: 2px solid var(--violet-mid);
  box-shadow: 0 0 40px rgba(var(--violet-mid-rgb), 0.35);
}

.account-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.account-tab {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-pill);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  color: #d8c7f5;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(var(--violet-mid-rgb), 0.35);
}
.account-tab.active {
  color: #2a0a45;
  background: linear-gradient(180deg, #e9d5ff, var(--violet-mid));
  border-color: #f3e8ff;
}

.account-note { font-size: 0.78rem; line-height: 1.6; color: #c9b8e8; margin-bottom: 0.8rem; }
.account-note.small { font-size: 0.66rem; opacity: 0.75; margin-top: 0.8rem; }
.account-note b { color: #fff; }

.account-input {
  width: 100%;
  padding: 11px;
  margin-bottom: 0.55rem;
  border-radius: var(--radius-xs);
  background: #0a0616;
  border: 1px solid rgba(var(--violet-mid-rgb), 0.4);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
}
.account-actions { display: flex; gap: 0.5rem; }
.account-btn {
  flex: 1;
  padding: 11px;
  border-radius: var(--radius-pill);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  cursor: pointer;
  color: #d8c7f5;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(var(--violet-mid-rgb), 0.4);
}
.account-btn.primary { color: #2a0a45; background: linear-gradient(180deg, #e9d5ff, var(--violet-mid)); border-color: #f3e8ff; }
.account-btn.danger { color: #ffb3b3; background: #3a1116; border-color: #8a2530; width: 100%; }

.lb-metrics { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.8rem; }
.lb-metric {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.64rem;
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
  color: #c9b8e8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(var(--violet-mid-rgb), 0.3);
}
.lb-metric.active { color: #2a0a45; background: var(--violet-mid); border-color: #e9d5ff; }

.lb-head, .lb-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 3rem 5.5rem;
  gap: 0.5rem;
  align-items: center;
  padding: 7px 9px;
  font-size: 0.76rem;
}
.lb-head {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #8f7fb0;
  text-transform: uppercase;
}
.lb-row { border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.04); margin-bottom: 3px; color: #fff; }
.lb-row.is-you { background: rgba(var(--violet-mid-rgb), 0.22); border: 1px solid var(--violet-mid); }
.lb-rank { font-family: 'Orbitron', sans-serif; color: var(--gold); }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-lvl { color: #c9b8e8; font-size: 0.68rem; }
.lb-val { text-align: right; font-family: 'Orbitron', sans-serif; color: var(--gold); }

.account-close {
  width: 100%;
  margin-top: 1rem;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #c9b8e8;
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
}
.account-close:hover { color: #fff; border-color: #fff; }

/* =====================================================================
   REFILL READY
   The button sits in a row of six identical pills; nothing about it
   changed when it became usable, so it was easy to miss entirely.
   ===================================================================== */
@keyframes refillReady {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), 0 0 0 0 rgba(75, 224, 122, 0.6); }
  50%      { box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), 0 0 26px 7px rgba(75, 224, 122, 0.75); }
}
.btn.reset.is-ready {
  position: relative;
  overflow: visible;
  animation: refillReady 1.3s ease-in-out infinite;
  border-color: #b6ffcf;
}

@keyframes refillSpark {
  0%   { opacity: 0; transform: translateY(4px) scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.1); }
}
.refill-spark {
  position: absolute;
  bottom: 20%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  background: #b6ffcf;
  box-shadow: 0 0 8px 2px rgba(75, 224, 122, 0.95);
  animation: refillSpark var(--spark-dur, 2s) ease-out infinite;
  animation-delay: var(--spark-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .btn.reset.is-ready, .refill-spark { animation: none; }
  .refill-spark { opacity: 0; }
}

/* =====================================================================
   LAYOUT OVERHAUL
   The header banner is gone and the HUD moved to the top-left, so the
   machine gets the vertical space that strip was taking.
   ===================================================================== */

/* --- HUD, now directly under the home link --- */
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0.25rem 0 0.6rem;
  padding: 0;
  background: none;
  border: none;
}
.hud-stat {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 7px 14px 7px 9px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(12,26,36,0.96), rgba(4,10,16,0.96));
  border: 2px solid var(--border-dim);
  /* Reads as a physical counter rather than a label. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(0,0,0,0.5);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hud-stat .hud-icon { width: 30px; height: 30px; }
.hud-stat .hud-label {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hud-stat .hud-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 14px rgba(255,255,255,0.18);
}
.hud-spins { border-color: rgba(123, 243, 255, 0.5); }
.hud-spins .hud-value { color: #a8f4ff; }
.hud-coins { border-color: rgba(255, 217, 77, 0.5); }
.hud-coins .hud-value { color: var(--gold); }

/* The bump when a value changes now lifts the whole pill. */
@keyframes hudBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.hud-stat.bump {
  animation: hudBump 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
  border-color: #fff;
  box-shadow: 0 0 22px 4px rgba(255, 255, 255, 0.35);
}

.hud-level { flex: 1 1 12rem; min-width: 11rem; }

/* --- shop button, top right --- */
.shop-fab {
  width: 46px;
  height: 46px;
  padding: 3px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,217,77,0.2), rgba(0,0,0,0.5));
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(255, 217, 77, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.shop-fab img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.shop-fab:hover { transform: scale(1.08); box-shadow: 0 0 26px rgba(255, 217, 77, 0.8); }

/* --- bet ladder --- */
.bet-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.bet-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bet-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 2px;
}
.bet-current {
  min-width: 5.2rem;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, rgba(14,32,44,0.98), rgba(4,12,18,0.98));
  border: 2px solid var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.6);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bet-current:hover:not(:disabled) { box-shadow: 0 0 18px rgba(255, 217, 77, 0.5); }
.bet-current:disabled { opacity: 0.5; cursor: not-allowed; }
.bet-x { color: var(--gold); margin-left: 2px; }

.bet-group.doubled .bet-current {
  border-color: #fff3c4;
  box-shadow: 0 0 20px 4px rgba(255, 217, 77, 0.7);
}
.bet-group.doubled .bet-current::after {
  content: 'x2';
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 0.52rem;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #3a2600;
}

/* The full ladder, opening upward so it never covers the SPIN button. */
.bet-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, minmax(3.6rem, 1fr));
  gap: 4px;
  padding: 8px;
  width: max-content;
  max-width: min(24rem, 92vw);
  max-height: 40vh;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  background: rgba(4, 10, 16, 0.98);
  border: 2px solid var(--gold);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}
.bet-menu[hidden] { display: none !important; }
.bet-rung {
  padding: 8px 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  color: #cfe9ef;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dim);
}
.bet-rung:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
.bet-rung.active { background: var(--gold); color: #3a2600; border-color: #fff3c4; }
.bet-rung:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- STATS was white-on-white --- */
.btn.stats {
  background: linear-gradient(180deg, #f2f6f8, #c9d6de 55%, #93a3ad);
  border-color: #ffffff;
  color: #10202b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- paytable: coin at text size, a real grid --- */
.paytable-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.5rem;
}
.paytable-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
}
.paytable-row img { width: 40px; height: 40px; }
.paytable-row .pay-name {
  font-size: 0.74rem;
  color: #cfe9ef;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paytable-row .amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  white-space: nowrap;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.88rem;
}
/* The coin was rendering at icon size next to 0.9rem text. */
.paytable-row .amount img,
.paytable-row .amount .inline-coin {
  width: 0.95em !important;
  height: 0.95em !important;
  object-fit: contain;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .hud-stat { padding: 5px 11px 5px 7px; }
  .hud-stat .hud-icon { width: 24px; height: 24px; }
  .hud-stat .hud-value { font-size: 0.9rem; }
  .shop-fab { width: 40px; height: 40px; }
  .bet-menu { grid-template-columns: repeat(3, minmax(3.2rem, 1fr)); }
  .paytable-grid { grid-template-columns: 1fr 1fr; }
  .paytable-row { grid-template-columns: 34px 1fr; }
  .paytable-row .amount { grid-column: 1 / -1; justify-content: flex-start; }
}

/* The refill line is a footnote, not a headline. Left to wrap it broke
   out of its pill and collided with the coins counter beside it. */
.hud-regen {
  display: block;
  font-size: 0.5rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-regen[hidden] { display: none !important; }
/* The stat body must be allowed to shrink, or a long line pushes the
   pill wider than its container instead of ellipsing. */
.hud-stat-body { min-width: 0; display: flex; flex-direction: column; }
.hud-stat { max-width: 100%; }

/* The value line must never be the thing that ellipses — "180/1.3…" is
   worse than a slightly wider pill. Only the footnote below it clips. */
.hud-stat .hud-value { white-space: nowrap; }
.hud-stat .hud-max { font-size: 0.7em; opacity: 0.75; }
.hud-spins { min-width: 9.5rem; }
.hud-coins { min-width: 8.5rem; }
@media (max-width: 768px) {
  .hud-spins { min-width: 8rem; }
  .hud-coins { min-width: 7rem; }
}

/* =====================================================================
   CABINET LAYOUT — one viewport, no scrolling
   ---------------------------------------------------------------------
   The game is a fixed three-row grid the exact height of the viewport:
   an instrument bar, a cabinet that takes whatever is left, and a deck.
   The reels size themselves from the cabinet row, so on a short laptop
   screen the symbols get smaller rather than the page getting longer.

   This block is deliberately last in the file: it overrides the older
   flow-layout rules by cascade order instead of by editing them in
   place, which keeps every machine-specific and effect rule above it
   working untouched.
   ===================================================================== */

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  justify-content: flex-start;
}

main.slot-machine {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: 100%;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  gap: 8px;
  padding: 8px clamp(8px, 1.4vw, 20px) 10px;
  overflow: hidden;
  justify-content: initial;
}

/* ---------- Row 1: the instrument bar ---------- */

.top-controls {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  margin: 0;
  position: static;
}

.top-controls .home-link { flex: 0 0 auto; }

.slot-machine .hud {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  flex-wrap: nowrap;
  overflow: hidden;
}

.slot-machine .hud-stat { padding: 4px 10px; }
.slot-machine .hud-stat .hud-icon { width: 26px; height: 26px; }
.slot-machine .hud-level { flex: 1 1 10rem; min-width: 8rem; max-width: 22rem; }

.top-controls-right { flex: 0 0 auto; margin-left: auto; }

/* ---------- Row 2: the cabinet ---------- */

.cabinet {
  display: grid;
  grid-template-columns:
    minmax(96px, 9vw)
    minmax(0, 1fr)
    minmax(132px, 12vw);
  gap: clamp(6px, 0.9vw, 14px);
  min-height: 0;
  min-width: 0;
  align-items: stretch;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.rail-left { justify-content: space-between; }
.rail-right { justify-content: space-between; align-items: stretch; }

/* The stage no longer sets its own height — it inherits the row's. */
.cabinet .machine-stage {
  display: flex;
  min-height: 0;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.cabinet .machine-frame {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Five reels want tighter gutters than three did, or the symbols lose
   more width to the gaps than they can spare. */
.reels { gap: clamp(4px, 0.55vw, 9px); }

/* ---------- Ways plate ---------- */

.ways-plate {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 8px 4px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gold-deep);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 77, 0.22), transparent 70%),
    linear-gradient(180deg, #24180a, #0d0904);
  box-shadow: inset 0 0 12px rgba(255, 184, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.5);
}

.ways-count {
  font-size: clamp(1.1rem, 2.1vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.6), 0 2px 0 #6b4a00;
}

.ways-word {
  font-size: clamp(0.48rem, 0.75vw, 0.62rem);
  letter-spacing: 3px;
  color: var(--gold);
  font-weight: 700;
}

/* ---------- Left rail utilities ---------- */

.slot-machine .modifier-bar {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.slot-machine .modifier-bar[hidden] { display: none; }

.rail-utils {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rail-utils .btn {
  width: 100%;
  min-width: 0;
  padding: 7px 4px;
  font-size: clamp(0.55rem, 0.85vw, 0.72rem);
  letter-spacing: 1px;
}

.rail-utils .btn[hidden] { display: none; }

/* ---------- Prize ladder ---------- */

.prize-ladder {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

.prize-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.35));
}

.prize-row img {
  width: clamp(20px, 2.2vw, 30px);
  height: clamp(20px, 2.2vw, 30px);
  object-fit: contain;
}

.prize-row-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }

.prize-row-tier {
  font-size: clamp(0.44rem, 0.66vw, 0.56rem);
  letter-spacing: 2px;
  color: var(--text-dim);
  font-weight: 700;
}

.prize-row-value {
  font-size: clamp(0.62rem, 1vw, 0.85rem);
  font-weight: 700;
  color: var(--gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The machine's best symbol gets the treatment its payout deserves. */
.prize-row.tier-grand {
  border-color: var(--gold);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 77, 0.28), transparent 70%),
    linear-gradient(180deg, #2a1c06, #100a02);
  box-shadow: 0 0 14px rgba(255, 184, 0, 0.3);
}

.prize-row.tier-grand .prize-row-tier { color: var(--gold); }

.prize-row.tier-grand .prize-row-value {
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.75);
  animation: prizeGrandPulse 2.4s ease-in-out infinite;
}

@keyframes prizeGrandPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* ---------- The dial ---------- */

.spin-cluster {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}


.spin-cluster .hold {
  width: 100%;
  min-width: 0;
  padding: 7px 4px;
  font-size: clamp(0.55rem, 0.85vw, 0.72rem);
}

/* ---------- Row 3: the deck ---------- */

section.control-bar {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  width: 100%;
  margin: 0;
  padding: 6px clamp(8px, 1.2vw, 16px);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.45));
  min-width: 0;
}

.meter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.meter-label {
  font-size: clamp(0.46rem, 0.7vw, 0.6rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

/* Inset digits, so the numbers read as a meter rather than as text. */
.meter-value {
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  font-weight: 700;
  color: var(--gold-bright);
  padding: 3px 12px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meter-win .meter-value { justify-self: start; min-width: 7ch; }

/* Flashes once when a win lands, so the meter itself acknowledges it. */
.meter-win.paid .meter-value {
  animation: meterPaid 700ms ease-out;
}

@keyframes meterPaid {
  0%   { transform: scale(1);    box-shadow: inset 0 2px 8px rgba(0,0,0,0.7); }
  35%  { transform: scale(1.12); box-shadow: 0 0 22px rgba(255, 184, 0, 0.8); }
  100% { transform: scale(1);    box-shadow: inset 0 2px 8px rgba(0,0,0,0.7); }
}

.control-bar .bet-group { margin: 0; }

.deck-refill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  justify-self: end;
}

/* ---------- Ways win presentation ---------- */

/* A ways win lights the REELS that carried it. Paylines drew a line
   through a row; there is no row here to draw through. */
.win-reel-band {
  position: absolute;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 9;
  border: 2px solid rgba(255, 217, 77, 0.9);
  background: linear-gradient(180deg, rgba(255, 217, 77, 0.16), rgba(255, 184, 0, 0.06));
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.55), inset 0 0 18px rgba(255, 217, 77, 0.3);
  animation: winBandIn 480ms cubic-bezier(0.2, 1.3, 0.4, 1) both,
             winBandPulse 1.1s ease-in-out 480ms infinite;
}

@keyframes winBandIn {
  from { opacity: 0; transform: scaleY(0.7); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes winBandPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.win-ways-badge {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #0a0500;
  background: linear-gradient(180deg, #fff6cf, #ffd94d 45%, #ffb800);
  box-shadow: 0 0 18px rgba(255, 184, 0, 0.7);
  pointer-events: none;
  z-index: 11;
  animation: winBandIn 420ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

/* Everything that did not contribute steps back, so the eye lands on
   the cells that paid without having to compare five reels. */
.symbol-dim {
  filter: grayscale(0.85) brightness(0.42);
  transition: filter 260ms ease;
}

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

/* The rails fold above and below the reels rather than disappearing:
   the dial and the prize ladder are the two things worth keeping, and
   the row heights are fixed so the page still cannot scroll. */
@media (max-width: 900px) {
  .cabinet {
    grid-template-columns: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .rail {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .ways-plate { flex-direction: row; gap: 6px; padding: 5px 10px; }
  .rail-utils { flex-direction: row; flex: 1 1 auto; }
  .rail-utils .btn { flex: 1 1 0; }
  .slot-machine .modifier-bar { flex-direction: row; overflow-x: auto; overflow-y: hidden; }

  .prize-ladder { flex-direction: row; flex: 1 1 auto; }
  .prize-row { flex: 1 1 0; padding: 4px 5px; }

  .spin-cluster { flex-direction: row; flex: 0 0 auto; align-items: center; }
  .spin-cluster .hold { width: auto; padding: 10px 12px; }
}

@media (max-width: 720px) {
  main.slot-machine { padding: 6px 8px 8px; gap: 6px; }

  .slot-machine .hud { flex-wrap: nowrap; gap: 5px; }
  .slot-machine .hud-stat { padding: 3px 7px; }
  .slot-machine .hud-stat .hud-icon { width: 20px; height: 20px; }
  .slot-machine .hud-level { flex: 1 1 6rem; min-width: 5.5rem; }

  section.control-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .rail-utils .btn { font-size: 0.5rem; padding: 6px 2px; letter-spacing: 0; }
  .prize-row img { width: 18px; height: 18px; }
  .prize-row-tier { display: none; }
}

/* Short-and-wide screens: the deck and bar shrink before the reels do. */
@media (max-height: 620px) {
  main.slot-machine { gap: 5px; padding: 5px 8px 6px; }
  .slot-machine .hud-stat { padding: 2px 7px; }
  /* (was: .hud-level-next display:none) Removed. That was written when this
     was always-on text in the deck competing for vertical space. As a
     click-triggered popover it costs no layout height, and hiding it here
     made the info button do nothing on short screens. */
  .meter-value { font-size: 0.85rem; padding: 2px 8px; }
  .rail-utils .btn { padding: 4px 3px; }
}

/* ---------- The dial while free spins are running ---------- */




/* ---------- Paytable: three lengths per symbol ---------- */

/* The header row is a key, not a payout, so it is set apart. */
.paytable-row.paytable-head {
  background: none;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.paytable-row.paytable-head .pay-name {
  font-weight: 500;
  color: var(--text-dim);
  text-transform: none;
}

.paytable-head .pay-lengths {
  display: grid;
  grid-template-columns: repeat(3, minmax(3.6rem, 1fr));
  gap: 4px;
  text-align: right;
}

.paytable-head .pay-lengths span {
  font-weight: 700;
  color: var(--gold);
}

/* Three columns of figures, right-aligned so the eye can compare down
   a column instead of reading each row separately. */
.paytable-row .amount {
  display: grid;
  grid-template-columns: repeat(3, minmax(3.6rem, 1fr));
  gap: 4px;
  align-items: center;
}

.pay-len {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Five of a kind is the number worth looking at. */
.pay-len:last-child {
  color: var(--gold-bright);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
}

.pay-len:first-child { color: var(--text-dim); }

/* Symbols that do not pay by length get one cell across all three. */
.amount-single {
  grid-column: 1 / -1;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .paytable-head .pay-lengths,
  .paytable-row .amount {
    grid-template-columns: repeat(3, minmax(2.6rem, 1fr));
    font-size: 0.72rem;
  }
}

/* ---------- Deck proportions ---------- */

/* The deck is instrumentation, not a panel: it gets the height its
   controls need and nothing more, because every pixel it takes comes
   straight off the reels. */
section.control-bar {
  max-height: 22vh;
  align-content: center;
}

/* Left-aligned so the meter is the width of the number rather than the
   width of the gap it happens to sit in. */
.meter { align-items: flex-start; }
.meter-value { min-width: 7ch; max-width: 14ch; }
.meter-win { justify-self: start; }

/* ---------- Phone: the bar and the deck each get honest room ---------- */

@media (max-width: 720px) {
  /* At 375px the home link, the three HUD tiles and the three control
     buttons cannot share one line without the HUD being crushed to
     nothing, which is exactly what happened. The HUD drops to its own
     line instead — two short rows read better than one unreadable one. */
  .top-controls { flex-wrap: wrap; row-gap: 4px; }

  .top-controls .home-link { order: 1; }
  .top-controls-right { order: 2; }

  .slot-machine .hud {
    order: 3;
    flex: 1 0 100%;
    overflow: visible;
    gap: 6px;
  }

  .slot-machine .hud-stat { flex: 0 1 auto; min-width: 0; }
  .slot-machine .hud-level { flex: 1 1 auto; min-width: 6rem; }

  /* The deck's middle column was being squeezed to zero width by a
     stake group wide enough to wrap, which put the WIN meter on top of
     REFILL. The stake column is now the one that gives. */
  section.control-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .meter-stake { min-width: 0; }
  .control-bar .bet-group { flex-wrap: nowrap; gap: 4px; padding: 3px 5px; }
  .control-bar .bet-step,
  .control-bar .bet-current { padding: 4px 8px; min-width: 0; }

  /* MAX has no room on a phone and is not lost: every rung, the top one
     included, is in the menu behind the current-bet button. */
  .control-bar .bet-max { display: none; }

  .meter-win .meter-value { min-width: 5ch; padding: 3px 7px; }
  .deck-refill .btn { padding: 7px 9px; font-size: 0.62rem; }
}

/* On a phone the ladder shares its row with the dial, which leaves each
   of four chips too little width to show its number — they were all
   rendering as an ellipsis, which is worse than not showing them. The
   two prizes actually worth chasing are kept; the full table is one tap
   away behind PAYS. */
@media (max-width: 720px) {
  .prize-row:nth-child(n + 3) { display: none; }
  .prize-row-tier { display: block; font-size: 0.42rem; letter-spacing: 1px; }
  .prize-row-value { font-size: 0.7rem; }
  .prize-row img { width: 22px; height: 22px; }
}

/* The deck is short enough that a bubble anchored to the mascot's own
   box lands on top of the bet controls. Anchoring it to the deck lifts
   it clear of the whole row instead, and left-aligning it stops it
   sprawling rightward across the stake. */
section.control-bar { position: relative; }

/* ---------- The two countdowns ---------- */

/* Both timers are children of the same grid as the bar, the cabinet and
   the deck. Left in flow they would each claim a row of their own the
   moment they appeared, shunting the deck out of its explicit row and
   off the bottom of a page that is not allowed to scroll.
   They float over the top of the cabinet instead, which is where a
   countdown belongs anyway — the reels are what it is counting down. */
/* THIS BLOCK IS DELIBERATELY EMPTY.

   It used to float both visit timers over the top of the cabinet:

     .slot-machine .terror-timer,
     .slot-machine .alice-timer {
       position: absolute; left: 50%; transform: translateX(-50%);
       top: calc(var(--topbar-h, 64px) + 6px); z-index: 40; ...
     }

   Both timers now sit in flow in the right rail. Leaving the rule here
   would have been a trap rather than dead weight: it is (0,2,0) and the
   rail is inside main.slot-machine, so the moment #terrorTimer moved
   into <main> this would have out-specified the rail styling and pulled
   it straight back over the reels — with the move looking as if it had
   simply not worked. It also set pointer-events: none, which would have
   killed the hover on the clocks.

   See .rail-clocks in arcade.css for what replaced it. */

main.slot-machine { position: relative; }

/* =====================================================================
   MACHINE CHROME — the frame belongs to the machine
   ---------------------------------------------------------------------
   Every machine had the same cyan frame, which meant the biggest shape
   on screen said nothing about where you were. Each now carries its own
   border, animated, so a rotation is legible from the edge of the
   cabinet before a single symbol is read.
   ===================================================================== */

/* The angle has to be a real animatable property or the gradient jumps
   between keyframes instead of sweeping. */
@property --frame-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes frameSweep {
  to { --frame-angle: 360deg; }
}

.cabinet .machine-frame {
  border: none;
  padding: 4px;
  border-radius: var(--radius-lg);
  position: relative;
  background-clip: padding-box;
}

/* The frame itself: a conic sweep painted behind the reels' own panel,
   so the border is a gradient rather than a flat colour. */
.cabinet .machine-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background: var(--frame-paint, conic-gradient(from var(--frame-angle),
    #22e3ff, #c81b28 33%, #05070a 66%, #22e3ff));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: frameSweep 9s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* Generic: cyan into red into black, the site's own three colours. */
.cabinet .machine-frame[data-machine="generic"] {
  --frame-paint: conic-gradient(from var(--frame-angle),
    #22e3ff, #7bf3ff 12%, #c81b28 38%, #6a0d16 55%, #05070a 78%, #22e3ff);
  box-shadow: 0 0 26px rgba(34, 227, 255, 0.28), 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Fruits: the full wheel, because the machine is a bowl of sweets. */
.cabinet .machine-frame[data-machine="fruits"] {
  --frame-paint: conic-gradient(from var(--frame-angle),
    #ff2d55, #ff9500, #ffd60a, #34c759, #22e3ff, #5e5ce6, #bf5af2, #ff2d55);
  box-shadow: 0 0 30px rgba(255, 214, 10, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Terror: almost no light in it. Blood and bruise over black, and the
   sweep runs slow so it creeps rather than spins. */
.cabinet .machine-frame[data-machine="terrorCastle"] {
  --frame-paint: conic-gradient(from var(--frame-angle),
    #1a0206, #6a0d16 15%, #2b0a3d 38%, #0a0410 60%, #4a0a12 82%, #1a0206);
  box-shadow: 0 0 34px rgba(120, 12, 22, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.cabinet .machine-frame[data-machine="terrorCastle"]::after {
  animation-duration: 22s;
}

/* Halloween: pumpkin and poison. */
.cabinet .machine-frame[data-machine="halloween"] {
  --frame-paint: conic-gradient(from var(--frame-angle),
    #ff7518, #ffb800 20%, #7b2cbf 48%, #2b0a3d 70%, #ff7518);
  box-shadow: 0 0 28px rgba(255, 117, 24, 0.32), 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Wonderland: tea-party pastels with the Queen's red running through. */
.cabinet .machine-frame[data-machine="aliceWonderland"] {
  --frame-paint: conic-gradient(from var(--frame-angle),
    #8ecae6, #ffb3c6 22%, #d62828 45%, #f7e1a0 68%, #6a4c93 86%, #8ecae6);
  box-shadow: 0 0 28px rgba(142, 202, 230, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* jk1x mode dresses whichever machine you are standing on, so it wins
   over the machine's own frame while it runs. */
body.jk1x-active .cabinet .machine-frame {
  --frame-paint: conic-gradient(from var(--frame-angle),
    #ffd94d, #fff 10%, #22e3ff 30%, #bf5af2 50%, #ff2d55 70%, #ffd94d);
  box-shadow: 0 0 40px rgba(255, 217, 77, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.jk1x-active .cabinet .machine-frame::after { animation-duration: 3.5s; }

@media (prefers-reduced-motion: reduce) {
  .cabinet .machine-frame::after { animation: none; }
}

/* =====================================================================
   THE SPIN BUTTON
   ===================================================================== */

.spin-btn {
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 18px rgba(255, 184, 0, 0.35));
  transition: transform 120ms ease, filter 220ms ease;
}

.spin-btn-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* A slow breath while it is waiting to be pressed, so the eye is drawn
   to it without anything actually moving on the reels. */
@keyframes spinBtnBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.spin-btn:not(:disabled) { animation: spinBtnBreathe 2.6s ease-in-out infinite; }

/* A highlight that travels across the artwork, masked to the button so
   it reads as light moving over plastic rather than a box sliding past. */
.spin-btn::after {
  content: '';
  position: absolute;
  inset: 6% 4%;
  border-radius: 50%;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.08) 56%,
    transparent 64%);
  background-size: 260% 100%;
  background-position: 200% 0;
  animation: spinBtnShine 3.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes spinBtnShine {
  0%, 62% { background-position: 200% 0; }
  92%     { background-position: -60% 0; }
  100%    { background-position: -60% 0; }
}

.spin-btn:hover:not(:disabled) {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 26px rgba(255, 184, 0, 0.6));
}

.spin-btn:active:not(:disabled) { transform: scale(0.94); animation: none; }

.spin-btn:disabled {
  cursor: not-allowed;
  animation: none;
  filter: grayscale(0.8) brightness(0.55);
}

.spin-btn:disabled::after { animation: none; opacity: 0; }

/* While free spins run the artwork stays but the count sits on top of
   it, tinted so it is obvious the press is not costing anything. */
.spin-btn-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 50%;
  background: rgba(6, 40, 52, 0.82);
  color: #a8f4ff;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 0 12px rgba(34, 227, 255, 0.8);
  pointer-events: none;
}

.spin-btn-overlay[hidden] { display: none; }
.spin-btn-overlay b { font-size: clamp(0.72rem, 1.3vw, 1.05rem); letter-spacing: 2px; }
.spin-btn-overlay span { font-size: clamp(0.5rem, 0.85vw, 0.68rem); opacity: 0.85; }

.spin-btn.free {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 22px rgba(34, 227, 255, 0.55));
}

/* =====================================================================
   THE SHOP CALL TO ACTION
   ===================================================================== */

.shop-cta {
  position: relative;
  width: 100%;
  padding: 9px 6px;
  border-radius: var(--radius-md);
  border: 2px solid var(--gold);
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: clamp(0.6rem, 0.95vw, 0.82rem);
  color: #1a0f00;
  background: linear-gradient(180deg, #fff3c4, #ffd94d 40%, #ffb800 70%, #d18a00);
  box-shadow: 0 0 18px rgba(255, 184, 0, 0.45), inset 0 -3px 8px rgba(140, 90, 0, 0.45),
              inset 0 3px 8px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 120ms ease, box-shadow 220ms ease;
}

.shop-cta-label { position: relative; z-index: 2; }

/* The shine is its own element rather than a pseudo-element so it can
   sit under the label and above the gradient. */
.shop-cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
  background-size: 300% 100%;
  background-position: 200% 0;
  animation: shopCtaShine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes shopCtaShine {
  0%, 55% { background-position: 200% 0; }
  85%     { background-position: -80% 0; }
  100%    { background-position: -80% 0; }
}

.shop-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(255, 184, 0, 0.7), inset 0 -3px 8px rgba(140, 90, 0, 0.45),
              inset 0 3px 8px rgba(255, 255, 255, 0.6);
}

.shop-cta:active { transform: translateY(1px) scale(0.97); }

/* =====================================================================
   THE + ON THE CURRENCY TILES
   ===================================================================== */

.hud-plus {
  flex: 0 0 auto;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  color: #1a0f00;
  background: linear-gradient(180deg, #ffe9a3, #ffb800);
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.5);
  transition: transform 130ms ease, box-shadow 200ms ease;
}

.hud-plus:hover {
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(255, 184, 0, 0.9);
}

.hud-plus:active { transform: scale(0.9); }

/* =====================================================================
   NEXT-LEVEL REWARDS: INFO BUTTON + POPOVER
   ===================================================================== */

.hud-level-info {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-dim);
  cursor: pointer;
  font-family: inherit;
  font-style: italic;
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.08);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.hud-level-info:hover,
.hud-level-info.open {
  color: #06212b;
  border-color: var(--cyan);
  background: var(--cyan-bright);
}

.hud-level-info[hidden] { display: none; }

/* Floats out of the bar rather than pushing it around — the bar is a
   fixed-height thing in a fixed-height row. */
.hud-level-next {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: min(20rem, 60vw);
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cyan-deep);
  background: linear-gradient(180deg, rgba(10, 26, 32, 0.98), rgba(4, 10, 14, 0.98));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 18px rgba(34, 227, 255, 0.2);
  animation: levelInfoIn 180ms ease-out both;
}

@keyframes levelInfoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .hud-level / .hud-level-top were dissolved when the level block moved into
   .player-card in the top bar. Their "position: relative" was the containing
   block for .hud-level-next; that job now belongs to .player-card, which
   declares it in arcade.css. Left as a note because losing that anchor is
   exactly what made the info popover open below the bottom of the screen. */
.hud-level-next[hidden] { display: none; }

/* =====================================================================
   SOCIALS IN THE DECK
   ===================================================================== */

.deck-socials {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.7vw, 9px);
  justify-self: end;
  padding-right: clamp(2px, 0.6vw, 10px);
}

.deck-social {
  display: grid;
  place-items: center;
  width: clamp(26px, 2.4vw, 32px);
  height: clamp(26px, 2.4vw, 32px);
  border-radius: 50%;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease,
              background 180ms ease, box-shadow 180ms ease;
}

.deck-social svg { width: 55%; height: 55%; }

.deck-social:hover {
  transform: translateY(-3px);
  color: #fff;
  border-color: currentColor;
}

/* Each service in its own colour on hover — the icons are recognisable
   by shape, but the colour is what makes them read as links. */
.deck-social[data-social="youtube"]:hover { color: #ff0033; background: rgba(255, 0, 51, 0.14); box-shadow: 0 0 14px rgba(255, 0, 51, 0.45); }
.deck-social[data-social="discord"]:hover { color: #5865f2; background: rgba(88, 101, 242, 0.16); box-shadow: 0 0 14px rgba(88, 101, 242, 0.45); }
.deck-social[data-social="steam"]:hover   { color: #7bc6e8; background: rgba(123, 198, 232, 0.16); box-shadow: 0 0 14px rgba(123, 198, 232, 0.45); }
.deck-social[data-social="spotify"]:hover { color: #1ed760; background: rgba(30, 215, 96, 0.16); box-shadow: 0 0 14px rgba(30, 215, 96, 0.45); }

/* =====================================================================
   THE REFILL PILL
   ---------------------------------------------------------------------
   Was a button with a caption floating under it. One control now, with
   the state written into it: how many spins it will give, how long until
   it can, or how full you already are.
   ===================================================================== */

.refill-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 5.5rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-dim);
  cursor: pointer;
  overflow: hidden;
  justify-self: end;
  font-family: inherit;
  color: var(--text-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
  transition: color 200ms ease, border-color 200ms ease, box-shadow 250ms ease,
              background 250ms ease, transform 130ms ease;
}

.refill-pill-title {
  font-size: clamp(0.5rem, 0.78vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 2px;
}

.refill-pill-sub {
  font-size: clamp(0.6rem, 0.95vw, 0.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Ready: it lights up, because it sits in a corner and nothing else
   about it changes when it becomes usable. */
.refill-pill.is-ready {
  color: #06251c;
  border-color: var(--green, #34c759);
  background: linear-gradient(180deg, #b8ffd9, #34c759 55%, #1a8f43);
  box-shadow: 0 0 20px rgba(52, 199, 89, 0.55);
  animation: refillReadyPulse 1.9s ease-in-out infinite;
}

.refill-pill.is-ready .refill-pill-sub { color: #06251c; }

@keyframes refillReadyPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(52, 199, 89, 0.45); }
  50%      { box-shadow: 0 0 30px rgba(52, 199, 89, 0.85); }
}

/* Full: not an error, just nothing to do. Gold, because being over the
   cap is a good problem. */
.refill-pill.is-full {
  cursor: not-allowed;
  color: var(--gold-deep);
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, rgba(255, 217, 77, 0.12), rgba(0, 0, 0, 0.4));
  animation: none;
}

.refill-pill.is-full .refill-pill-sub { color: var(--gold); }

.refill-pill:disabled:not(.is-full) { cursor: not-allowed; opacity: 0.75; }
.refill-pill:not(:disabled):hover { transform: translateY(-2px); }
.refill-pill:not(:disabled):active { transform: translateY(1px) scale(0.97); }