/* ==========================================================================
   V2 — Vegas-Grade Slot Machine
   Isolated preview page. No shared selectors with main site.
   ========================================================================== */

:root {
  --bg-deep:       oklch(8%  0.015 255);
  --bg-mid:        oklch(14% 0.02  255);
  --bg-top:        oklch(20% 0.025 255);
  --panel:         oklch(12% 0.02  255);
  --panel-edge:    oklch(22% 0.03  255);

  --brass:         oklch(76% 0.16  85);
  --brass-hi:      oklch(88% 0.14  92);
  --brass-lo:      oklch(55% 0.14  75);

  --ink:           oklch(97% 0.01  100);
  --ink-muted:     oklch(72% 0.02  260);
  --ink-dim:       oklch(55% 0.02  260);

  --accent:        oklch(70% 0.26 340);   /* hot magenta */
  --accent-2:      oklch(78% 0.18 200);   /* cyan */
  --accent-3:      oklch(80% 0.19 85);    /* gold */

  --class-light:   oklch(82% 0.16 200);
  --class-medium:  oklch(80% 0.19 85);
  --class-heavy:   oklch(68% 0.25 22);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: 'Saira Extra Condensed', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, oklch(22% 0.05 280) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, oklch(18% 0.07 340) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-deep) 0%, oklch(5% 0.01 260) 100%);
  background-attachment: fixed;
}

/* Noise grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

.stage {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 4rem;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}

/* Ambient spotlight — anchors the cabinet to the page, reads like stage-light spill. */
.stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 32%;
  width: min(900px, 92vw);
  height: min(700px, 72vh);
  transform: translate(-50%, -20%);
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, oklch(26% 0.08 280 / 0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(12px);
}

/* ---------- Header ---------- */

.stage-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  isolation: isolate;
}

/* Neon aurora behind the logo — cyan + magenta to match the logo's own palette.
   Sized just slightly larger than the logo so the spill hugs it rather than
   flooding the upper fold. Falls off sharply beyond the logo silhouette. */
.stage-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 32vw, 420px);
  height: clamp(120px, 16vw, 200px);
  transform: translate(-50%, -60%);
  background:
    radial-gradient(ellipse 48% 55% at 36% 50%, oklch(72% 0.19 200 / 0.48) 0%, transparent 58%),
    radial-gradient(ellipse 48% 55% at 64% 50%, oklch(70% 0.24 340 / 0.44) 0%, transparent 58%),
    radial-gradient(ellipse 65% 50% at 50% 50%, oklch(60% 0.16 280 / 0.22) 0%, transparent 65%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  animation: logoAuroraDrift 9s ease-in-out infinite;
}

@keyframes logoAuroraDrift {
  0%, 100% { opacity: 0.9; transform: translate(-50%, -60%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -60%) scale(1.04); }
}

/* Visually silent — exists solely to give the logo an <h1> ancestor for SEO.
   Resets the UA stylesheet so the logo sizing stays controlled by .stage-logo. */
.stage-title {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  display: contents;
}

.stage-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(480px, 80vw);
  max-height: clamp(110px, 16vw, 180px);
  object-fit: contain;
  /* Drop-shadows follow the logo's alpha shape, so the cyan/magenta pair
     hugs the neon outline rather than sitting as a generic box. */
  filter:
    drop-shadow(0 0 22px oklch(75% 0.18 205 / 0.55))
    drop-shadow(0 0 34px oklch(68% 0.24 340 / 0.4))
    drop-shadow(0 4px 10px oklch(0% 0 0 / 0.55));
}

.subtitle {
  margin: 0;
  font-size: clamp(0.88rem, 1vw, 1rem);
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-shadow: 0 0 18px oklch(70% 0.18 340 / 0.15);
}

/* Brass flourish rules flanking the subtitle — casino-marquee cadence. */
.subtitle::before,
.subtitle::after {
  content: '';
  height: 1px;
  width: clamp(28px, 8vw, 68px);
  background: linear-gradient(90deg, transparent, var(--brass-lo) 40%, var(--brass) 100%);
}
.subtitle::after {
  background: linear-gradient(270deg, transparent, var(--brass-lo) 40%, var(--brass) 100%);
}

/* ---------- Class reel (top) ---------- */

.class-stage {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 0 28px;
}

.class-reel {
  position: relative;
  height: 88px;
  overflow: hidden;
  border-radius: 18px;
  perspective: 1200px;
  background:
    linear-gradient(180deg, oklch(6% 0.01 255) 0%, oklch(11% 0.02 255) 50%, oklch(7% 0.01 255) 100%);
  border: 1px solid oklch(28% 0.03 260);
  box-shadow:
    0 10px 40px oklch(0% 0 0 / 0.5),
    inset 0 1px 0 oklch(35% 0.04 260 / 0.5),
    inset 0 -2px 8px oklch(0% 0 0 / 0.6),
    inset 0 0 60px oklch(0% 0 0 / 0.4);
  transition: box-shadow 400ms var(--ease-out-expo), border-color 400ms var(--ease-out-expo);
}

.class-reel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 40%, oklch(0% 0 0 / 0.25) 100%);
  pointer-events: none;
  z-index: 2;
}

.class-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  transform-style: preserve-3d;
}

.class-card {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.18em;
  color: var(--ink);
  transform-origin: center center;
  backface-visibility: hidden;
}

.class-card[data-class="Light"]  { color: var(--class-light);  text-shadow: 0 0 22px currentColor, 0 0 2px currentColor; }
.class-card[data-class="Medium"] { color: var(--class-medium); text-shadow: 0 0 22px currentColor, 0 0 2px currentColor; }
.class-card[data-class="Heavy"]  { color: var(--class-heavy);  text-shadow: 0 0 22px currentColor, 0 0 2px currentColor; }

.class-warp {
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  pointer-events: none;
  z-index: 3;
}

.class-warp-top {
  top: 0;
  background: linear-gradient(180deg,
    oklch(6% 0.01 255) 0%,
    oklch(8% 0.01 255 / 0.9) 35%,
    oklch(10% 0.02 255 / 0.4) 70%,
    transparent 100%);
  backdrop-filter: blur(1px);
}

.class-warp-bottom {
  bottom: 0;
  background: linear-gradient(0deg,
    oklch(6% 0.01 255) 0%,
    oklch(8% 0.01 255 / 0.9) 35%,
    oklch(10% 0.02 255 / 0.4) 70%,
    transparent 100%);
  backdrop-filter: blur(1px);
}

.class-caret {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--brass-hi), var(--brass-lo));
  box-shadow: 0 0 12px oklch(75% 0.18 85 / 0.7);
  z-index: 4;
}
.class-caret-left  { left: 6px; clip-path: polygon(100% 0, 100% 100%, 0 50%); transform: translateY(-50%); background: linear-gradient(90deg, var(--brass-hi), var(--brass-lo)); }
.class-caret-right { right: 6px; clip-path: polygon(0 0, 0 100%, 100% 50%); transform: translateY(-50%); background: linear-gradient(270deg, var(--brass-hi), var(--brass-lo)); }

.class-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.28em;
  color: oklch(72% 0.04 260);
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(ellipse at 50% 50%, oklch(12% 0.02 260) 0%, oklch(6% 0.01 260) 90%);
  transition: opacity 280ms var(--ease-out-expo);
  overflow: hidden;
}

/* Slow marquee shimmer across the idle class slot — invites interaction. */
.class-initial::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    oklch(78% 0.12 85 / 0.12) 48%,
    oklch(88% 0.14 92 / 0.22) 50%,
    oklch(78% 0.12 85 / 0.12) 52%,
    transparent 65%);
  transform: translateX(-100%);
  animation: classShimmer 4.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes classShimmer {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

.class-initial-dash {
  opacity: 0.6;
  color: var(--brass);
  animation: dashPulse 2.4s ease-in-out infinite;
  text-shadow: 0 0 10px oklch(75% 0.18 85 / 0.6);
}

.class-initial-text {
  text-shadow:
    0 0 14px oklch(75% 0.18 85 / 0.35),
    0 0 2px oklch(85% 0.15 85 / 0.4);
  position: relative;
  z-index: 1;
}

@keyframes dashPulse {
  0%, 100% { opacity: 0.35; transform: scaleX(1); }
  50%      { opacity: 0.9;  transform: scaleX(1.25); }
}

.class-reel.has-spun .class-initial {
  opacity: 0;
}

/* Class-color glow on the cabinet once picked */
.stage[data-class="Light"]  .class-reel { border-color: var(--class-light);  box-shadow: 0 10px 40px oklch(0% 0 0 / 0.5), 0 0 40px var(--class-light)  inset, inset 0 1px 0 oklch(40% 0.04 260 / 0.6); }
.stage[data-class="Medium"] .class-reel { border-color: var(--class-medium); box-shadow: 0 10px 40px oklch(0% 0 0 / 0.5), 0 0 40px var(--class-medium) inset, inset 0 1px 0 oklch(40% 0.04 260 / 0.6); }
.stage[data-class="Heavy"]  .class-reel { border-color: var(--class-heavy);  box-shadow: 0 10px 40px oklch(0% 0 0 / 0.5), 0 0 40px var(--class-heavy)  inset, inset 0 1px 0 oklch(40% 0.04 260 / 0.6); }

.stage[data-class="Light"]  .cabinet-frame { --frame-glow: var(--class-light); }
.stage[data-class="Medium"] .cabinet-frame { --frame-glow: var(--class-medium); }
.stage[data-class="Heavy"]  .cabinet-frame { --frame-glow: var(--class-heavy); }

/* ---------- Cabinet ---------- */

.cabinet {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  perspective: 1800px;
}

.cabinet-frame {
  --frame-glow: transparent;
  position: relative;
  padding: clamp(16px, 2.5vw, 28px);
  border-radius: 24px;
  background:
    linear-gradient(180deg, oklch(20% 0.03 260) 0%, oklch(12% 0.02 260) 50%, oklch(7% 0.01 260) 100%);
  border: 2px solid var(--brass-lo);
  box-shadow:
    0 30px 80px oklch(0% 0 0 / 0.6),
    0 0 0 1px oklch(0% 0 0) inset,
    0 2px 0 oklch(30% 0.05 85 / 0.4) inset,
    0 -30px 60px oklch(0% 0 0 / 0.5) inset,
    0 0 60px var(--frame-glow);
  transition: box-shadow 500ms var(--ease-out-expo);
}

/* Brass trim inset */
.cabinet-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  border: 1px solid oklch(65% 0.14 85 / 0.5);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, oklch(0% 0 0 / 0.3) 100%);
}

.cabinet-bolt {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brass-hi), var(--brass-lo) 60%, oklch(30% 0.08 75) 100%);
  box-shadow:
    0 0 0 1px oklch(0% 0 0 / 0.6),
    0 2px 4px oklch(0% 0 0 / 0.8) inset,
    0 0 8px oklch(70% 0.16 85 / 0.4);
  z-index: 2;
}
.cabinet-bolt-tl { top: 14px; left: 14px; }
.cabinet-bolt-tr { top: 14px; right: 14px; }
.cabinet-bolt-bl { bottom: 14px; left: 14px; }
.cabinet-bolt-br { bottom: 14px; right: 14px; }

.reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1vw, 12px);
  z-index: 1;
}

.reel {
  position: relative;
  aspect-ratio: 1 / 1.55;
  perspective: 1400px;
  perspective-origin: 50% 50%;

  /* Reel box palette — isolated as vars so future tweaks are a 2-line change. */
  --reel-bg-center: oklch(16% 0.03 260);
  --reel-bg-edge:   oklch(8%  0.01 260);
  --reel-label:     oklch(92% 0.01 260);
}

.reel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 50%, var(--reel-bg-center) 0%, var(--reel-bg-edge) 90%);
  border: 1.5px solid oklch(55% 0.12 85 / 0.7);
  box-shadow:
    0 0 0 1px oklch(0% 0 0 / 0.8) inset,
    0 2px 12px oklch(0% 0 0 / 0.6) inset,
    0 0 20px oklch(0% 0 0 / 0.7) inset;
  transform: rotateX(-2deg);
  transform-style: preserve-3d;
}

.reel-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  transform-style: preserve-3d;
}

.reel-item {
  height: var(--item-h, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}

.reel-item img {
  width: clamp(48px, 5.6vw, 72px);
  height: clamp(48px, 5.6vw, 72px);
  object-fit: contain;
  filter: drop-shadow(0 4px 10px oklch(0% 0 0 / 0.7));
  pointer-events: none;
  flex-shrink: 0;
}

.reel-item-label {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(0.55rem, 0.88vw, 0.72rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--reel-label);
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.9), 0 0 6px oklch(0% 0 0 / 0.6);
  flex-shrink: 0;
}

.reel-item[data-winner="true"] .reel-item-label {
  color: var(--brass-hi);
}

/* Post-land highlight — applied L→R after all reels have stopped.
   Illuminated-frame treatment: gold border frames the winner cell (like a real
   slot-machine "this symbol hit" panel), backed by a flat warm wash so corners
   read evenly, with an animated outer bloom that breathes in sync with the
   border brightness. Image drop-shadow does the "item is glowing" heavy lift. */
.reel.is-winner-lit .reel-item[data-winner="true"] {
  animation: v2WinnerFlash 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             v2WinnerPulse 2.6s ease-in-out 700ms infinite;
  position: relative;
  z-index: 3;
  border-radius: 4px;
}

.reel.is-winner-lit .reel-item[data-winner="true"] img {
  filter:
    drop-shadow(0 4px 10px oklch(0% 0 0 / 0.7))
    drop-shadow(0 0 18px oklch(88% 0.2 85 / 0.9))
    drop-shadow(0 0 36px oklch(80% 0.22 85 / 0.45));
}

.reel.is-winner-lit .reel-item[data-winner="true"] .reel-item-label {
  color: oklch(95% 0.15 90);
  text-shadow:
    0 1px 2px oklch(0% 0 0 / 0.9),
    0 0 12px oklch(86% 0.18 85 / 0.85),
    0 0 2px oklch(100% 0 0);
}

@keyframes v2WinnerFlash {
  0% {
    background: transparent;
    transform: scale(1);
    box-shadow:
      inset 0 0 0 0 oklch(85% 0.18 85 / 0),
      0 0 0 0 oklch(85% 0.18 85 / 0);
  }
  40% {
    background: oklch(72% 0.14 88 / 0.14);
    transform: scale(1.08);
    box-shadow:
      inset 0 0 0 2px oklch(96% 0.14 90 / 1),
      inset 0 0 18px oklch(92% 0.18 88 / 0.25),
      0 0 32px oklch(90% 0.2 88 / 0.85),
      0 0 72px oklch(80% 0.22 88 / 0.45);
  }
  100% {
    background: oklch(68% 0.12 85 / 0.1);
    transform: scale(1.02);
    box-shadow:
      inset 0 0 0 2px oklch(86% 0.18 85 / 0.85),
      inset 0 0 10px oklch(85% 0.18 85 / 0.1),
      0 0 18px oklch(82% 0.18 85 / 0.55);
  }
}

@keyframes v2WinnerPulse {
  0%, 100% {
    background: oklch(68% 0.12 85 / 0.1);
    box-shadow:
      inset 0 0 0 2px oklch(86% 0.18 85 / 0.85),
      inset 0 0 10px oklch(85% 0.18 85 / 0.1),
      0 0 18px oklch(82% 0.18 85 / 0.5);
  }
  50% {
    background: oklch(70% 0.14 88 / 0.14);
    box-shadow:
      inset 0 0 0 2px oklch(94% 0.16 90 / 1),
      inset 0 0 14px oklch(90% 0.2 88 / 0.18),
      0 0 28px oklch(88% 0.2 88 / 0.8),
      0 0 56px oklch(80% 0.22 85 / 0.35);
  }
}

/* Post-landing polish — fade non-winner neighbors so the winning item reads clearly.
   Applied once the column's full spin timeline resolves; cleared on the next spin. */
.reel.is-settled .reel-item:not([data-winner="true"]) {
  opacity: 0.22;
  filter: blur(3.2px);
  transition: opacity 360ms var(--ease-out-expo), filter 360ms var(--ease-out-expo);
}

/* Edge warp overlays — the drum illusion */
.reel-warp {
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  pointer-events: none;
  z-index: 3;
}

.reel-warp-top {
  top: 0;
  background: linear-gradient(180deg,
    var(--reel-bg-edge) 0%,
    color-mix(in oklab, var(--reel-bg-edge) 92%, transparent) 30%,
    color-mix(in oklab, var(--reel-bg-center) 45%, transparent) 70%,
    transparent 100%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 10px 24px -10px oklch(0% 0 0) inset;
}

.reel-warp-bottom {
  bottom: 0;
  background: linear-gradient(0deg,
    var(--reel-bg-edge) 0%,
    color-mix(in oklab, var(--reel-bg-edge) 92%, transparent) 30%,
    color-mix(in oklab, var(--reel-bg-center) 45%, transparent) 70%,
    transparent 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 -10px 24px -10px oklch(0% 0 0) inset;
}

/* Winline — endpoint tabs at cabinet level; the gold bar now lives per-reel behind the items. */
.winline {
  position: absolute;
  top: 50%;
  left: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
  height: 0;
}

/* Per-reel winline — inside each viewport BEFORE the strip in DOM order, so item
   images occlude it. Sits above the viewport background but below the strip items. */
.reel-winline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  background: linear-gradient(90deg,
    oklch(78% 0.15 85 / 0) 0%,
    oklch(86% 0.14 92 / 0.85) 15%,
    var(--brass-hi) 50%,
    oklch(86% 0.14 92 / 0.85) 85%,
    oklch(78% 0.15 85 / 0) 100%);
  box-shadow:
    0 0 6px var(--brass-hi),
    0 0 14px oklch(70% 0.18 85 / 0.55),
    0 0 26px oklch(70% 0.26 340 / 0.22);
}

.winline-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass-lo));
  box-shadow: 0 0 12px var(--brass-hi), 0 0 0 1px oklch(0% 0 0);
}
.winline-tab-left  { left: -20px;  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.winline-tab-right { right: -20px; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Locked flash on a reel — payline bloom + vertical polish sweep.
   Replaces the old radial oval (which read as a flat blob) with a payline
   bloom: the gold winline briefly fattens, brightens, and radiates outward
   like a real slot-machine payline firing, then settles back to rest. */
.reel.is-locked .reel-winline {
  animation: paylineBloom 560ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}

.reel-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(80% 0.13 85 / 0.45) 42%,
    oklch(95% 0.14 92 / 0.9) 50%,
    oklch(80% 0.13 85 / 0.45) 58%,
    transparent 100%);
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.reel.is-locked .reel-viewport::before {
  animation: lockSweep 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes paylineBloom {
  0% {
    transform: translateY(-50%) scaleY(1);
    filter: brightness(1) saturate(1);
    box-shadow:
      0 0 6px var(--brass-hi),
      0 0 14px oklch(70% 0.18 85 / 0.55),
      0 0 26px oklch(70% 0.26 340 / 0.22);
  }
  18% {
    transform: translateY(-50%) scaleY(3.6);
    filter: brightness(2.4) saturate(1.3);
    box-shadow:
      0 0 16px oklch(98% 0.10 92 / 0.98),
      0 0 40px oklch(88% 0.22 88 / 0.9),
      0 0 90px oklch(80% 0.26 85 / 0.55),
      0 0 160px oklch(72% 0.26 340 / 0.32);
  }
  48% {
    transform: translateY(-50%) scaleY(2.1);
    filter: brightness(1.6) saturate(1.15);
    box-shadow:
      0 0 12px oklch(92% 0.14 90 / 0.9),
      0 0 30px oklch(82% 0.2 85 / 0.75),
      0 0 64px oklch(72% 0.22 88 / 0.4),
      0 0 120px oklch(70% 0.22 340 / 0.2);
  }
  100% {
    transform: translateY(-50%) scaleY(1);
    filter: brightness(1) saturate(1);
    box-shadow:
      0 0 6px var(--brass-hi),
      0 0 14px oklch(70% 0.18 85 / 0.55),
      0 0 26px oklch(70% 0.26 340 / 0.22);
  }
}

@keyframes lockSweep {
  0%   { opacity: 0;   transform: translateY(-110%); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0;   transform: translateY(110%); }
}

/* Reel shake on lock — subtle downward punch */
.reel.is-locked {
  animation: lockShake 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lockShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  22%      { transform: translate3d(0, 4px, 0); }
  46%      { transform: translate3d(0, -2px, 0); }
  70%      { transform: translate3d(0, 1px, 0); }
}

/* Celebration: subtle reel shimmer after final spin */
.reel.is-celebrating {
  animation: celebrate 1.2s ease-out;
}

@keyframes celebrate {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-3px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-2px); }
}

/* Particle layer — win burst */
.particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 8;
}

.particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  transform-origin: center;
}

.particle-flash {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  background: radial-gradient(circle,
    oklch(100% 0 0 / 0.9) 0%,
    oklch(92% 0.18 90 / 0.7) 30%,
    oklch(80% 0.2 85 / 0.3) 60%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: particleFlash 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes particleFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

/* Cabinet base plinth — reads as a continuous extension of the cabinet frame. */
.cabinet-base {
  min-height: 70px;
  padding: 12px 40px 10px;
  margin: -2px auto 0;
  width: fit-content;
  max-width: min(520px, 92%);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, oklch(18% 0.03 260) 0%, oklch(11% 0.02 260) 55%, oklch(6% 0.01 260) 100%);
  border-radius: 0 0 22px 22px;
  border: 2px solid var(--brass-lo);
  border-top: none;
  box-shadow:
    0 26px 50px oklch(0% 0 0 / 0.65),
    0 2px 0 oklch(40% 0.08 85 / 0.45) inset,
    0 -8px 24px oklch(0% 0 0 / 0.45) inset,
    0 0 36px var(--frame-glow, transparent);
  position: relative;
  transition: box-shadow 500ms var(--ease-out-expo);
}

/* Brass inner rule — ties the plinth to the brass trim on the frame above. */
.cabinet-base::before {
  content: '';
  position: absolute;
  inset: 4px 6px 4px 6px;
  border-radius: 0 0 16px 16px;
  border: 1px solid oklch(65% 0.14 85 / 0.35);
  border-top: none;
  pointer-events: none;
}

.cabinet-strip {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 3px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    oklch(65% 0.14 85 / 0.4) 20%,
    var(--brass-hi) 50%,
    oklch(65% 0.14 85 / 0.4) 80%,
    transparent);
  opacity: 0.85;
  box-shadow: 0 0 6px oklch(80% 0.18 85 / 0.4);
}

/* Jackpot nameplate embedded in the cabinet base — reads as part of the machine.
   Stacked: big count (star … star) on top, "LOADOUTS GENERATED" label below. */
.cabinet-scoreboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
}

.scoreboard-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.cabinet-scoreboard-ornament {
  font-size: 0.72rem;
  color: var(--brass);
  text-shadow: 0 0 8px oklch(80% 0.18 85 / 0.6);
  animation: scoreboardTwinkle 2.4s ease-in-out infinite;
  position: relative;
  top: -1px;
}

.cabinet-scoreboard-ornament:last-child { animation-delay: 1.2s; }

@keyframes scoreboardTwinkle {
  0%, 100% { opacity: 0.75; text-shadow: 0 0 6px oklch(80% 0.18 85 / 0.5); }
  50%      { opacity: 1;    text-shadow: 0 0 14px oklch(85% 0.20 85 / 0.9); }
}

.scoreboard-value {
  font-family: 'Bebas Neue', 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: 0.08em;
  color: oklch(90% 0.17 85);
  text-shadow:
    0 0 14px oklch(82% 0.20 85 / 0.6),
    0 0 2px oklch(94% 0.10 85 / 0.95);
  font-variant-numeric: tabular-nums;
  transition: transform 240ms var(--ease-out-back);
  display: inline-block;
}

.scoreboard-value.tick {
  animation: scoreboardTick 0.5s var(--ease-out-back);
}

@keyframes scoreboardTick {
  0%   { transform: scale(1);    text-shadow: 0 0 10px oklch(80% 0.20 85 / 0.5); }
  45%  { transform: scale(1.18); text-shadow: 0 0 22px oklch(88% 0.24 85 / 0.95), 0 0 3px oklch(92% 0.10 85 / 1); }
  100% { transform: scale(1);    text-shadow: 0 0 10px oklch(80% 0.20 85 / 0.5); }
}

.scoreboard-label {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: oklch(78% 0.03 260);
  text-transform: uppercase;
}


@media (max-width: 560px) {
  .cabinet-base { padding: 8px 14px; }
  .cabinet-scoreboard { gap: 0.45rem; }
  .scoreboard-label { font-size: 0.5rem; letter-spacing: 0.18em; }
  .cabinet-scoreboard-ornament { display: none; }
}

/* ---------- History stack ---------- */

.history {
  max-width: 720px;
  width: 100%;
  margin: 14px auto 0;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
  gap: 14px;
}

.history-header[hidden] { display: none; }

.history-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.28em;
  color: var(--brass);
  text-shadow: 0 0 14px oklch(75% 0.16 85 / 0.35);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Brass rule trailing the HISTORY label — stretches across any free width to the pagination. */
.history-title::after {
  content: '';
  height: 1px;
  width: clamp(60px, 18vw, 220px);
  background: linear-gradient(90deg, var(--brass) 0%, oklch(60% 0.12 85 / 0.4) 60%, transparent 100%);
}

.history-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-pagination[hidden] { display: none; }

.history-nav {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid oklch(32% 0.05 260);
  background: oklch(14% 0.02 260);
  color: var(--ink-muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: color 180ms, background 180ms, border-color 180ms;
}

.history-nav:hover:not(:disabled) {
  color: var(--brass);
  border-color: var(--brass-lo);
  background: oklch(18% 0.03 260);
}

.history-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.history-page {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  min-width: 44px;
  text-align: center;
}

.history-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-card {
  position: relative;
  padding: 14px 18px 12px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, oklch(13% 0.025 260) 0%, oklch(8% 0.015 260) 100%);
  border: 1px solid oklch(26% 0.03 260);
  box-shadow:
    0 8px 22px oklch(0% 0 0 / 0.4),
    inset 0 1px 0 oklch(26% 0.04 260 / 0.5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 420ms var(--ease-out-expo), transform 420ms var(--ease-out-expo);
}

.history-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Class-colored accent strip on the left edge */
.history-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent, var(--brass));
  box-shadow: 0 0 12px var(--card-accent, var(--brass-lo));
}

.history-card[data-class="Light"]  { --card-accent: var(--class-light);  }
.history-card[data-class="Medium"] { --card-accent: var(--class-medium); }
.history-card[data-class="Heavy"]  { --card-accent: var(--class-heavy);  }

.history-card-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed oklch(26% 0.03 260);
}

.history-card-number {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  padding: 2px 8px;
  background: oklch(14% 0.02 260);
  border: 1px solid oklch(28% 0.04 260);
  border-radius: 999px;
  flex-shrink: 0;
}

.history-card-class {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--card-accent);
  text-shadow: 0 0 14px var(--card-accent);
  flex: 1;
}

.history-card-time {
  font-family: 'Space Mono', 'Saira Extra Condensed', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.history-card-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px 22px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
  min-width: 0;
}

.history-item-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-transform: uppercase;
  flex-shrink: 0;
}

.history-item-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Controls ---------- */

.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 18px;
  margin-top: clamp(-4px, -0.5vw, 0px);
}

.controls .spin-btn  { grid-column: 2; }
.controls .sound-btn { grid-column: 3; justify-self: start; }

.spin-btn {
  position: relative;
  min-width: 260px;
  padding: 18px 44px;
  border: none;
  border-radius: 999px;
  background:
    linear-gradient(180deg, oklch(75% 0.28 340) 0%, oklch(55% 0.3 340) 55%, oklch(40% 0.26 340) 100%);
  color: var(--ink);
  font-family: 'Bebas Neue', sans-serif;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 14px 32px oklch(0% 0 0 / 0.5),
    0 0 40px oklch(65% 0.28 340 / 0.35),
    inset 0 2px 0 oklch(95% 0.1 340 / 0.4),
    inset 0 -3px 6px oklch(0% 0 0 / 0.3),
    0 0 0 2px var(--brass-lo);
  transition: transform 180ms var(--ease-out-expo), box-shadow 180ms var(--ease-out-expo);
}

.spin-btn-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 2;
}

.spin-btn-label {
  font-size: 1.8rem;
  letter-spacing: 0.28em;
  text-shadow: 0 2px 0 oklch(0% 0 0 / 0.5), 0 0 20px oklch(100% 0 0 / 0.5);
}

.spin-btn-sub {
  font-family: 'Saira Extra Condensed', 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: oklch(96% 0.05 340 / 0.75);
}

.spin-btn-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, oklch(80% 0.2 340 / 0.6) 0%, transparent 60%);
  opacity: 0.5;
  animation: btnPulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes btnPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.05); }
}

.spin-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow:
    0 22px 44px oklch(0% 0 0 / 0.55),
    0 0 72px oklch(65% 0.28 340 / 0.65),
    inset 0 2px 0 oklch(95% 0.1 340 / 0.55),
    inset 0 -3px 6px oklch(0% 0 0 / 0.3),
    0 0 0 2px var(--brass);
}

.spin-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 80ms;
  box-shadow:
    0 10px 20px oklch(0% 0 0 / 0.45),
    0 0 30px oklch(65% 0.28 340 / 0.45),
    inset 0 1px 0 oklch(95% 0.1 340 / 0.3),
    inset 0 -2px 4px oklch(0% 0 0 / 0.3),
    0 0 0 2px var(--brass-lo);
}

.spin-btn:focus-visible {
  outline: none;
  box-shadow:
    0 14px 32px oklch(0% 0 0 / 0.5),
    0 0 40px oklch(65% 0.28 340 / 0.4),
    inset 0 2px 0 oklch(95% 0.1 340 / 0.4),
    inset 0 -3px 6px oklch(0% 0 0 / 0.3),
    0 0 0 3px oklch(95% 0.12 340 / 0.85),
    0 0 0 6px oklch(0% 0 0 / 0.7);
}

.spin-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  filter: grayscale(0.3);
}

/* Pause the halo pulse while the reels are resolving — keeps focus on the machine. */
.spin-btn:disabled .spin-btn-glow {
  animation-play-state: paused;
  opacity: 0.25;
}

.sound-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 20%, oklch(22% 0.03 260) 0%, oklch(10% 0.015 260) 85%);
  border: 1px solid oklch(32% 0.03 260);
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms, background 180ms, border-color 180ms, transform 180ms;
  box-shadow:
    0 4px 10px oklch(0% 0 0 / 0.35),
    inset 0 1px 0 oklch(40% 0.04 260 / 0.4);
}

.sound-btn:hover {
  color: var(--brass);
  border-color: var(--brass-lo);
  background:
    radial-gradient(ellipse at 30% 20%, oklch(26% 0.04 260) 0%, oklch(12% 0.02 260) 85%);
  transform: translateY(-1px);
}

.sound-btn:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow:
    0 0 0 3px oklch(80% 0.15 85 / 0.4),
    0 4px 10px oklch(0% 0 0 / 0.35);
}

.sound-icon {
  width: 22px;
  height: 22px;
}

.sound-btn .sound-off { display: none; }
.sound-btn.muted .sound-on  { display: none; }
.sound-btn.muted .sound-off { display: block; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .stage { padding: 0.75rem 0.6rem 2.5rem; gap: 0.85rem; }

  /* Give mobile reels more vertical breathing room — a taller aspect ratio
     lets the 48px+ image and its label each claim their own space instead
     of compressing into a ~35px cell. Per-reel image/label bumps below. */
  .reels { gap: 5px; }
  .reel { aspect-ratio: 1 / 1.95; }
  .reel-item img { width: 52px; height: 52px; }
  .reel-item-label { font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1.15; }

  .winline { left: 6px; right: 6px; }
  .winline-tab-left  { left: -14px; }
  .winline-tab-right { right: -14px; }

  /* Single-column history keeps labels and values from squishing. */
  .history-card-body { grid-template-columns: 1fr; gap: 4px 0; }
  .history-card { padding: 14px 16px 12px 20px; }
  .history-card-class { font-size: 1.25rem; }

  .spin-btn { min-width: 230px; padding: 16px 30px; }
  .spin-btn-label { font-size: 1.55rem; letter-spacing: 0.24em; }
  .spin-btn-sub { font-size: 0.58rem; letter-spacing: 0.22em; }

  .cabinet-frame { padding: 14px 12px; border-radius: 20px; }
  .cabinet-bolt { width: 9px; height: 9px; }
  .cabinet-base { padding: 10px 16px; }

  .class-stage { padding: 0 22px; }
  .class-reel { height: 76px; border-radius: 16px; }
  .class-card { height: 76px; font-size: 2.1rem; }

  .controls { column-gap: 12px; }
  .sound-btn { width: 48px; height: 48px; }

  .subtitle { gap: 0.55rem; letter-spacing: 0.14em; }
  .subtitle::before, .subtitle::after { width: clamp(22px, 6vw, 46px); }

  .history-title::after { width: clamp(40px, 10vw, 90px); }
}

@media (max-width: 400px) {
  /* On very narrow phones, drop one more notch of density so the 5 reels stay legible. */
  .reel-item img { width: 46px; height: 46px; }
  .reel-item-label { font-size: 0.58rem; }
  .spin-btn { min-width: 200px; padding: 14px 24px; }
  .spin-btn-label { font-size: 1.4rem; letter-spacing: 0.2em; }
}

/* ==========================================================================
   Polish pass — accessibility, mobile native-feel, perf
   ========================================================================== */

/* Reduced motion — pause every ambient loop; preserve user-initiated spin motion
   and the final winner-highlight end state (forwards-filled flash). */
@media (prefers-reduced-motion: reduce) {
  .spin-btn-glow,
  .stage-header::before,
  .class-initial::after,
  .class-initial-dash,
  .cabinet-scoreboard-ornament,
  .reel.is-celebrating {
    animation: none !important;
  }
  /* Keep the flash's forwards-fill end state, drop the 2.6s infinite pulse. */
  .reel.is-winner-lit .reel-item[data-winner="true"] {
    animation: v2WinnerFlash 500ms ease-out forwards !important;
  }
}

/* Reduced transparency — replace backdrop-filter warp blurs with flat stops. */
@media (prefers-reduced-transparency: reduce) {
  .class-warp-top,
  .class-warp-bottom { backdrop-filter: none; }
  body::before { display: none; }
}

/* High contrast — lift muted inks and firm up brass borders. */
@media (prefers-contrast: more) {
  :root {
    --ink-muted: oklch(88% 0.02 260);
    --ink-dim:   oklch(74% 0.02 260);
  }
  .reel-viewport { border-color: var(--brass-hi); }
  .history-nav   { border-color: oklch(55% 0.05 260); }
  .scoreboard-label,
  .reel-item-label { text-shadow: 0 1px 2px oklch(0% 0 0 / 0.95); }
}

/* Safe-area insets — respect iPhone home indicator; side safe-areas are
   additive so mobile's tight 0.6rem padding is preserved. */
.stage {
  padding-bottom: max(4rem, calc(3rem + env(safe-area-inset-bottom)));
  padding-left:  calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-left));
  padding-right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right));
}
@media (max-width: 720px) {
  .stage {
    padding-left:  calc(0.6rem + env(safe-area-inset-left));
    padding-right: calc(0.6rem + env(safe-area-inset-right));
  }
}

/* Kill iOS long-press callout / tap highlight on all game controls — arcade feel. */
.spin-btn,
.sound-btn,
.history-nav,
.reel {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Spin button — disabled state is now an animated sheen sweep, not flat gray.
   Reads as "the machine is working" rather than "the button is broken." */
.spin-btn:disabled {
  cursor: not-allowed;
  opacity: 1;
  filter: saturate(0.88) brightness(0.92);
}

.spin-btn:disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 32%,
    oklch(96% 0.08 340 / 0.22) 48%,
    oklch(98% 0.12 340 / 0.38) 50%,
    oklch(96% 0.08 340 / 0.22) 52%,
    transparent 68%);
  transform: translateX(-120%);
  animation: spinSheen 1.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
  z-index: 1;
}

@keyframes spinSheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-btn:disabled::after { animation: none; }
  .spin-btn:disabled { opacity: 0.7; filter: saturate(0.7); }
}

/* Focus-visible polish on secondary controls — brass ring, not default blue. */
.history-nav:focus-visible {
  outline: none;
  color: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 2px oklch(80% 0.15 85 / 0.5);
}

/* Off-screen history rendering skip — meaningful once a session grows past
   one page. Intrinsic-size prevents scrollbar jump on first paint. */
.history-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}

/* ---------- Mobile-specific polish (≤720px) ---------- */

@media (max-width: 720px) {
  /* History nav was 30×30 — below Apple's 44px touch target guidance.
     Bump padding into a comfortable 40px square with a larger chevron. */
  .history-nav {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  .history-page { min-width: 52px; }

  /* Sound button stays a comfortable thumb target. */
  .sound-btn { width: 48px; height: 48px; }

  /* Subtitle flourishes get cramped on narrow phones — let the copy breathe. */
  .subtitle::before,
  .subtitle::after { width: clamp(18px, 5vw, 36px); }
}

/* ---------- Payline marquee shimmer — casino "alive between spins" tell ----------
   A thin light comet travels along each reel's payline in a cascading L→R chain,
   then rests. Paused during lock bloom (owned by the bloom) and while winner-lit. */
.reel-winline::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 35%;
  left: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(95% 0.08 92 / 0.55) 40%,
    oklch(100% 0 0 / 0.95) 50%,
    oklch(95% 0.08 92 / 0.55) 60%,
    transparent 100%);
  box-shadow:
    0 0 10px oklch(92% 0.14 92 / 0.7),
    0 0 18px oklch(80% 0.2 85 / 0.4);
  transform: translateX(-150%);
  animation: paylineMarquee 6.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* Cascaded start offsets — reads as a light chasing left to right across the cabinet. */
.reel:nth-child(1) .reel-winline::after { animation-delay: 0s; }
.reel:nth-child(2) .reel-winline::after { animation-delay: 0.22s; }
.reel:nth-child(3) .reel-winline::after { animation-delay: 0.44s; }
.reel:nth-child(4) .reel-winline::after { animation-delay: 0.66s; }
.reel:nth-child(5) .reel-winline::after { animation-delay: 0.88s; }

@keyframes paylineMarquee {
  0%        { transform: translateX(-150%); opacity: 0; }
  4%        { opacity: 1; }
  26%       { transform: translateX(300%); opacity: 1; }
  30%, 100% { transform: translateX(300%); opacity: 0; }
}

/* During lock bloom the payline owns the moment — pause the chase. */
.reel.is-locked .reel-winline::after,
.reel.is-winner-lit .reel-winline::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reel-winline::after { animation: none; opacity: 0; }
}

/* ---------- History card entrance — slide + subtle scale ----------
   The extra scale(0.98) gives the card a sense of "arriving from depth" rather
   than just sliding down; 10px translate softens the original 14px a touch. */
.history-card {
  transform: translateY(-10px) scale(0.98);
  transition: opacity 440ms var(--ease-out-expo), transform 440ms var(--ease-out-expo);
}
.history-card.is-visible {
  transform: translateY(0) scale(1);
}

/* ---------- Sound button — muted state reads with warm amber semantic tint ----------
   The icon swap already communicates off/on; tinting the vessel reinforces that
   state persists (it survives page reloads via localStorage). */
.sound-btn.muted {
  color: oklch(70% 0.14 30);
  border-color: oklch(42% 0.12 30);
  background: radial-gradient(ellipse at 30% 20%, oklch(19% 0.04 30) 0%, oklch(9% 0.02 30) 85%);
}
.sound-btn.muted:hover {
  color: oklch(80% 0.16 30);
  border-color: oklch(56% 0.15 30);
  background: radial-gradient(ellipse at 30% 20%, oklch(23% 0.05 30) 0%, oklch(11% 0.03 30) 85%);
}
.sound-btn.muted:focus-visible {
  border-color: oklch(72% 0.16 30);
  box-shadow:
    0 0 0 3px oklch(70% 0.15 30 / 0.4),
    0 4px 10px oklch(0% 0 0 / 0.35);
}

/* ---------- Hover-capable pointer polish (desktop / trackpad) ---------- */

@media (hover: hover) and (pointer: fine) {
  /* Subtle reel "alive" tell on hover — brass border kisses brighter without
     suggesting clickability (reels aren't interactive). Communicates
     "this surface is current" while the cabinet rests between spins. */
  .reel:hover .reel-viewport {
    border-color: oklch(68% 0.16 85 / 0.85);
    transition: border-color 220ms var(--ease-out-expo);
  }

  /* Sound button — communicate "click target" on desktop with a tiny lift. */
  .sound-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px oklch(0% 0 0 / 0.4);
  }
}