:root {
  --gold: #f6c65b;
  --gold-deep: #b9711d;
  --ink: #070916;
  --panel: #11152a;
  --cyan: #65e4ff;
  --text: #f7f3e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 5%, rgba(80, 55, 160, .38), transparent 32rem),
    linear-gradient(145deg, #04050c, #0b1024 52%, #03040a);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.35) .7px, transparent .7px);
  background-size: 31px 31px;
}

.game-shell { width: min(1360px, 96vw); margin: 0 auto; padding: 34px 0 64px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.debug-open .game-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.masthead { text-align: center; margin-bottom: 22px; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); letter-spacing: .24em; font-size: 11px; font-weight: 800; }
h1 { margin: 0; color: var(--gold); font-family: Georgia, serif; font-size: clamp(35px, 6vw, 62px); letter-spacing: .08em; text-shadow: 0 2px 0 #7c4213, 0 0 28px rgba(246,198,91,.3); }
h1 span { color: #fff4c9; }
.subtitle { margin: 8px 0 0; color: #969db8; font-size: 14px; letter-spacing: .05em; }

.machine {
  position: relative;
  width: 100%;
  max-width: 1020px;
  justify-self: center;
  padding: 30px clamp(18px, 4vw, 48px) 28px;
  border: 2px solid #8d5a20;
  border-radius: 32px;
  background: linear-gradient(155deg, #1e1832, #090b17 32%, #151023);
  box-shadow: 0 30px 90px #000, inset 0 0 0 5px #27213a, inset 0 0 50px rgba(107,57,176,.3);
  transition: box-shadow .35s, border-color .35s;
}

.machine.is-anticipating { border-color: #70e8f7; box-shadow: 0 30px 90px #000, 0 0 38px rgba(101,228,255,.24), inset 0 0 0 5px #27213a, inset 0 0 62px rgba(67,171,218,.25); }
.machine.is-anticipating .reel-window { box-shadow: 0 0 0 3px #4d3015, 0 0 38px rgba(101,228,255,.28); }

.machine-lights { position: absolute; inset: 10px; border: 1px solid rgba(246,198,91,.25); border-radius: 23px; pointer-events: none; }
.reel-window { position: relative; padding: 9px; border: 4px solid var(--gold-deep); border-radius: 18px; background: #03040a; box-shadow: 0 0 0 3px #4d3015, 0 0 32px rgba(238,178,54,.16); }
.reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.reel-viewport {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 2.42;
  overflow: hidden;
  border-radius: 10px;
  background: #080b15;
  contain: paint;
  transition: box-shadow .25s, filter .25s;
}
.reel-viewport::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 18px 17px -20px #000, inset 0 -18px 17px -20px #000;
}
.reel-strip { width: 100%; }
.reel-strip.is-static { height: 100%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 7px; }
.reel-strip.is-spinning { display: flex; flex-direction: column; gap: 7px; will-change: transform; backface-visibility: hidden; }
.symbol-cell { position: relative; min-height: 0; overflow: hidden; border: 1px solid #393e58; border-radius: 10px; background: linear-gradient(#1c2035, #0d1020); transition: filter .2s, transform .2s, box-shadow .2s; }
.symbol-cell img { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; }
.reel-viewport.is-spinning .symbol-cell img { filter: blur(1.4px) brightness(.72) saturate(.8); }
.reel-viewport.is-spinning { box-shadow: inset 0 0 24px rgba(0,0,0,.72); }
.reel-viewport.is-anticipating { z-index: 3; box-shadow: 0 0 8px #fff, 0 0 29px var(--cyan), inset 0 0 25px rgba(101,228,255,.22); animation: anticipation-pulse .42s ease-in-out infinite alternate; }
.reel-viewport.is-anticipating .symbol-cell img { filter: blur(1.05px) brightness(.96) saturate(1.08); }
.reel-viewport.is-slowing .symbol-cell img { filter: blur(.72px) brightness(.99) saturate(1.05); }
.reel-viewport.is-final-settle .symbol-cell img { filter: blur(.24px) brightness(1.03) saturate(1.06); }
.reel-viewport.just-stopped { animation: reel-land .18s ease-out; }
.symbol-cell.winner { z-index: 2; transform: scale(1.035); border-color: #fff3a2; box-shadow: 0 0 7px #fff, 0 0 22px var(--gold), inset 0 0 14px rgba(255,227,116,.5); animation: win-pulse .75s ease-in-out infinite alternate; }
.symbol-cell.payline-path-cell { z-index: 2; border-color: rgba(246,198,91,.68); box-shadow: inset 0 0 15px rgba(246,198,91,.24); }
.symbol-cell.payline-contributor { transform: scale(1.035); border-color: #fff4ae; box-shadow: 0 0 7px #fff, 0 0 24px var(--gold), inset 0 0 16px rgba(255,227,116,.55); animation: win-pulse .6s ease-in-out infinite alternate; }
.symbol-cell.scatter-landed { border-color: #a7fff7; animation: scatter-land .58s ease-out; }
.symbol-cell.chaos-landed { border-color: #d59aff; animation: chaos-land .58s ease-out; }
.symbol-cell.scatter-hit { border-color: var(--cyan); box-shadow: 0 0 24px var(--cyan); animation: scatter-feature .7s ease-in-out infinite alternate; }

@keyframes win-pulse { to { filter: brightness(1.35); transform: scale(1.06); } }
@keyframes anticipation-pulse { to { filter: brightness(1.14); box-shadow: 0 0 10px #fff, 0 0 38px var(--cyan), inset 0 0 30px rgba(101,228,255,.3); } }
@keyframes reel-land { 50% { filter: brightness(1.24); transform: translateY(2px); } }
@keyframes scatter-land { 45% { filter: brightness(1.5); box-shadow: 0 0 27px var(--cyan); transform: scale(1.04); } }
@keyframes chaos-land { 45% { filter: brightness(1.55); box-shadow: 0 0 29px #a04dff; transform: scale(1.04); } }
@keyframes scatter-feature { to { filter: brightness(1.55); box-shadow: 0 0 10px #fff, 0 0 32px var(--cyan); transform: scale(1.055); } }
@keyframes message-tension { to { letter-spacing: .21em; filter: brightness(1.2); } }

.payline-overlay { position: absolute; z-index: 7; inset: 9px; pointer-events: none; opacity: 0; transition: opacity .1s ease; }
.payline-overlay.is-visible { opacity: 1; }
.payline-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.payline-overlay polyline { fill: none; stroke: #ffe784; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(246,198,91,.92)); }
.payline-win-label { position: absolute; left: 50%; top: 69%; min-width: 290px; padding: 16px 26px; border: 1px solid #ffe98e; border-radius: 999px; transform: translate(-50%, -50%) scale(.92); color: #fff8ce; background: rgba(12,9,27,.94); box-shadow: 0 0 20px rgba(246,198,91,.48), inset 0 0 13px rgba(101,228,255,.12); text-align: center; font-size: clamp(22px, 4vw, 28px); font-weight: 900; letter-spacing: .1em; white-space: nowrap; transition: transform .12s ease; }
.payline-overlay.is-visible .payline-win-label { transform: translate(-50%, -50%) scale(1); }

.payline-label { position: absolute; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; border-radius: 50%; color: #201000; background: var(--gold); display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.payline-label.left { left: -17px; }
.payline-label.right { right: -17px; }
.message { min-height: 31px; padding: 13px 0 5px; color: #aeb5ce; text-align: center; letter-spacing: .16em; font-size: 13px; font-weight: 800; }
.message.win { color: var(--gold); text-shadow: 0 0 15px rgba(246,198,91,.5); }
.message.anticipation { color: var(--cyan); text-shadow: 0 0 18px rgba(101,228,255,.55); animation: message-tension .65s ease-in-out infinite alternate; }
.mirror-collection { width: min(570px, 92%); margin: 8px auto 4px; padding: 9px 12px 11px; border: 1px solid #303852; border-radius: 13px; background: linear-gradient(180deg, rgba(4,7,17,.9), rgba(13,17,33,.86)); box-shadow: inset 0 3px 12px rgba(0,0,0,.66), 0 0 18px rgba(101,228,255,.05); }
.mirror-collection-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; color: #7f89a9; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.mirror-collection-heading strong { color: var(--cyan); font-size: 11px; font-variant-numeric: tabular-nums; }
.mirror-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(5px, 1.2vw, 11px); }
.mirror-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1.36 / 1; overflow: hidden; border: 1px solid #3a435d; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #111a2c, #050812 72%); box-shadow: inset 0 3px 11px rgba(0,0,0,.82), inset 0 0 0 2px rgba(151,171,205,.035); transition: border-color .25s, box-shadow .25s, filter .25s, transform .25s; }
.mirror-slot::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(126,153,187,.1); border-radius: 6px; pointer-events: none; }
.mirror-slot img { width: 76%; height: 76%; object-fit: contain; opacity: 0; transform: scale(.72); filter: saturate(.82) brightness(.86); transition: opacity .28s, transform .28s, filter .28s; }
.mirror-slot.is-filled { border-color: #9befff; box-shadow: 0 0 9px rgba(101,228,255,.62), inset 0 0 18px rgba(101,228,255,.18); }
.mirror-slot.is-filled img { opacity: 1; transform: scale(1); filter: saturate(1.08) brightness(1.16) drop-shadow(0 0 7px rgba(170,245,255,.72)); }
.mirror-slot.is-landing { animation: mirror-slot-land .36s ease-out; }
.mirror-collection.is-complete { border-color: #d8fbff; animation: mirror-track-complete .46s ease-in-out infinite alternate; }
.mirror-collection.is-resetting .mirror-slot { opacity: .15; transform: scale(.84); filter: brightness(1.7); }
.symbol-cell.mirror-landing { z-index: 6; animation: mirror-reel-land .52s ease-in-out; }
.flying-mirror { position: fixed; z-index: 40; margin: 0; pointer-events: none; object-fit: contain; filter: brightness(1.2) drop-shadow(0 0 9px #b9f8ff) drop-shadow(0 0 20px rgba(101,228,255,.72)); will-change: transform, opacity; }

@keyframes mirror-reel-land { 25% { transform: scale(1.1); filter: brightness(1.35); } 42% { transform: translateX(-3px) rotate(-2deg) scale(1.08); } 58% { transform: translateX(3px) rotate(2deg) scale(1.08); } 74% { transform: translateX(-2px) rotate(-1deg) scale(1.06); } 100% { transform: none; } }
@keyframes mirror-slot-land { 45% { transform: scale(1.13); filter: brightness(1.7); box-shadow: 0 0 24px #c5fbff, inset 0 0 22px rgba(101,228,255,.42); } }
@keyframes mirror-track-complete { to { filter: brightness(1.3); box-shadow: 0 0 25px rgba(101,228,255,.72), inset 0 0 20px rgba(246,198,91,.17); transform: scale(1.012); } }

.meter-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; margin-top: 9px; }
.meter { padding: 12px 14px; border: 1px solid #323750; border-radius: 12px; background: rgba(5,7,17,.72); text-align: center; }
.meter span { display: block; margin-bottom: 3px; color: #747c9a; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.meter strong { color: #f3f5ff; font-size: clamp(15px, 2.4vw, 22px); font-variant-numeric: tabular-nums; }
.main-meter strong { color: var(--gold); }

.controls { display: grid; grid-template-columns: 1fr 128px 1fr; align-items: center; gap: 16px; width: min(480px, 100%); margin: 21px auto 0; }
button { font: inherit; cursor: pointer; }
.spin-button { width: 116px; height: 116px; margin: auto; border: 5px solid #fbd779; border-radius: 50%; color: #241000; background: radial-gradient(circle at 42% 34%, #fff0a7, #f3ad29 55%, #9b5112 100%); box-shadow: 0 0 0 5px #5c3215, 0 8px 0 #522b11, 0 12px 28px #000, 0 0 28px rgba(246,198,91,.28); font-size: 22px; font-weight: 950; letter-spacing: .08em; transition: transform .12s, filter .2s; }
.spin-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
.spin-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 5px #5c3215, 0 3px 0 #522b11; }
.spin-button:disabled { cursor: wait; filter: saturate(.3) brightness(.6); }
.secondary-button { padding: 11px 15px; border: 1px solid #424964; border-radius: 9px; color: #aab1c9; background: #111528; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.secondary-button:hover { color: white; border-color: #737c9e; }
.mute-button { position: absolute; z-index: 6; top: 17px; right: 28px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #3d435d; border-radius: 999px; color: #9da5c0; background: rgba(6,8,18,.8); font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.mute-button:hover { color: white; border-color: #737c9e; }
.mute-button[aria-pressed="true"] .sound-icon { color: #70758a; text-decoration: line-through; }
.sound-icon { color: var(--cyan); font-size: 15px; line-height: 1; }

.feature-banner { position: absolute; z-index: 10; left: 50%; top: 33%; width: min(650px, 88%); padding: 24px 15px; border: 2px solid #fff2a3; border-radius: 16px; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; color: #fff6bd; background: rgba(17,6,39,.94); box-shadow: 0 0 60px #9b48ff, inset 0 0 35px rgba(101,228,255,.2); text-align: center; font-family: Georgia, serif; font-size: clamp(23px, 5vw, 44px); font-weight: 900; letter-spacing: .05em; transition: .35s ease; }
.feature-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.debug-panel { position: sticky; top: 18px; min-width: 0; max-height: calc(100vh - 36px); padding: 20px; overflow: auto; border: 1px solid #3e4968; border-radius: 16px; background: rgba(7,10,22,.97); box-shadow: 0 22px 55px rgba(0,0,0,.52), inset 0 0 28px rgba(101,228,255,.035); }
.debug-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.debug-heading h2 { margin: 0; font-size: 18px; }
.debug-primary-action { width: 100%; margin: 17px 0 13px; padding: 13px 12px; border: 1px solid #8eeeff; border-radius: 9px; color: #e9fdff; background: linear-gradient(180deg, #174153, #0c2533); box-shadow: 0 0 16px rgba(101,228,255,.16); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.legacy-debug-tools { border-top: 1px solid #29324a; padding-top: 11px; color: #8792af; font-size: 11px; }
.legacy-debug-tools summary { margin-bottom: 10px; cursor: pointer; font-weight: 800; letter-spacing: .08em; }
.force-controls { display: flex; flex-wrap: wrap; gap: 7px; }
.force-controls button { padding: 8px 10px; border: 1px solid #39415f; border-radius: 7px; color: #c7cce0; background: #171c32; font-size: 11px; }
.debug-stats { display: flex; flex-wrap: wrap; gap: 10px 25px; margin: 18px 0 10px; color: #8d95b0; font-size: 12px; }
.debug-stats b { color: var(--cyan); }
pre { width: 100%; max-width: 100%; max-height: 280px; overflow: auto; margin: 0; padding: 15px; border-radius: 10px; color: #9fe7d0; background: #050711; font: 11px/1.55 Consolas, monospace; }

@media (max-width: 640px) {
  .game-shell { width: 98vw; padding-top: 20px; }
  .machine { padding: 21px 13px; border-radius: 22px; }
  .reels, .reel-strip.is-static, .reel-strip.is-spinning { gap: 3px; }
  .symbol-cell { border-radius: 6px; }
  .reel-viewport { border-radius: 6px; }
  .mute-button { position: relative; top: auto; right: auto; width: max-content; margin: -8px 0 10px auto; }
  .controls { grid-template-columns: 1fr 105px 1fr; gap: 8px; }
  .spin-button { width: 94px; height: 94px; font-size: 18px; }
  .debug-heading { align-items: flex-start; flex-direction: column; }
  .mirror-collection { width: 98%; padding-inline: 8px; }
}

@media (max-width: 1100px) {
  .debug-open .game-layout { grid-template-columns: minmax(0, 1fr); }
  .debug-panel { position: fixed; z-index: 30; top: 12px; right: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .symbol-cell.winner, .symbol-cell.payline-contributor, .symbol-cell.scatter-hit, .reel-viewport.is-anticipating { animation-duration: 1.4s; }
  .mirror-slot, .mirror-slot img, .mirror-collection { transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}