:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #030207;
  --gold: #ffd77a;
  --cyan: #31e7ff;
  --violet: #b324ff;
  --heart: #ff3fa4;
  --canonical-reels-left: 5.65%;
  --canonical-reels-top: 31.9%;
  --canonical-reels-width: 88.8%;
  --canonical-reels-height: 47.35%;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, #231044 0, #090510 48%, #000 100%);
}

button { font: inherit; }

.return-slot-room {
  position: fixed;
  z-index: 90;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  padding: 9px 12px;
  border: 1px solid rgba(245, 201, 106, .62);
  border-radius: 6px;
  color: #fff8ea;
  background: rgba(7, 2, 13, .76);
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 10px rgba(197, 134, 255, .24), 0 0 14px rgba(0, 0, 0, .7);
}

.camera-toggle-btn {
  position: fixed;
  z-index: 90;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(49, 231, 255, 0.72);
  border-radius: 6px;
  color: #dffffb;
  background: rgba(8, 16, 28, 0.82);
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  text-shadow: 0 0 6px #00d9ff;
  box-shadow: inset 0 0 12px rgba(49, 231, 255, 0.28), 0 0 16px rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.camera-toggle-btn:hover {
  background: rgba(16, 32, 54, 0.95);
  border-color: #ffe66f;
  color: #fff9d7;
  box-shadow: inset 0 0 14px rgba(255, 230, 111, 0.35), 0 0 20px rgba(0, 217, 255, 0.4);
  transform: scale(1.03);
}

.camera-toggle-btn .camera-icon {
  font-size: 14px;
  line-height: 1;
}

.stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  overflow: hidden;
}

.cabinet {
  position: relative;
  height: min(95.5vh, 172vw);
  width: min(calc(100vw - 14px), 53.75vh);
  max-height: calc(100vh - 16px);
  max-width: calc(100vw - 14px);
  overflow: visible;
  isolation: isolate;
  background: #07030e;
  box-shadow: 0 0 42px #6b16a988, 0 0 120px #00d9ff22;
  user-select: none;
  touch-action: manipulation;
  container-type: inline-size;
  transform: scale(var(--camera-scale, 1.38)) translateY(var(--camera-pan-y, -1.8%));
  transform-origin: center 54.5%;
  transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1);
  will-change: transform;
}

.cabinet.view-cabinet {
  --camera-scale: 1;
  --camera-pan-y: 0%;
}

.cabinet.view-macro {
  --camera-scale: 1.38;
  --camera-pan-y: -1.8%;
}

@media (min-aspect-ratio: 16/10) {
  .cabinet.view-macro {
    --camera-scale: 1.40;
    --camera-pan-y: -1.8%;
  }
}

@media (min-aspect-ratio: 19/10) {
  .cabinet.view-macro {
    --camera-scale: 1.44;
    --camera-pan-y: -2%;
  }
}

@media (max-aspect-ratio: 4/3) {
  .cabinet.view-macro {
    --camera-scale: 1.24;
    --camera-pan-y: -1.2%;
  }
}

@media (max-aspect-ratio: 9/10) {
  .cabinet.view-macro {
    --camera-scale: 1.08;
    --camera-pan-y: -0.5%;
  }
}

@media (max-aspect-ratio: 7/10) {
  .cabinet.view-macro {
    --camera-scale: 1.02;
    --camera-pan-y: 0%;
  }
}

.side-extension-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.responsive-wing-art {
  position: absolute;
  left: 50%;
  top: 0;
  height: 103.2%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 14px #020005) saturate(1.08);
}

.wing-event-video,
.wing-event-image {
  position: absolute;
  left: 50%;
  top: 0;
  height: 103.2%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  filter: drop-shadow(0 0 16px #020005) saturate(1.12) contrast(1.04);
  transition: opacity .35s ease;
}

.wing-event-video.show,
.wing-event-image.show {
  opacity: 1;
  visibility: visible;
}

.cabinet.wing-event-active .responsive-wing-art {
  opacity: .2;
}

.side-world {
  position: absolute;
  top: 0;
  height: 100%;
  width: 136%;
  pointer-events: none;
}

.left-side-world {
  right: 50%;
}

.right-side-world {
  left: 50%;
}

.cameo-zone {
  position: absolute;
  display: block;
  pointer-events: none;
}

.timber-peek-zone { left: 8%; top: 28%; width: 13%; height: 12%; }
.timber-ledge-zone { left: 22%; top: 56%; width: 24%; height: 8%; }
.timber-reel-reach-zone { right: 6%; top: 38%; width: 16%; height: 20%; }
.upper-left-entry-zone { left: 18%; top: 4%; width: 24%; height: 14%; }
.lower-left-travel-zone { left: 14%; bottom: 6%; width: 44%; height: 11%; }

.nutt-peek-zone { right: 10%; top: 30%; width: 15%; height: 12%; }
.nutt-ledge-zone { right: 24%; top: 57%; width: 28%; height: 9%; }
.nutt-reel-reach-zone { left: 6%; top: 38%; width: 16%; height: 20%; }
.upper-right-entry-zone { right: 18%; top: 4%; width: 26%; height: 14%; }
.lower-right-travel-zone { right: 14%; bottom: 6%; width: 46%; height: 11%; }

.cabinet-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, #11052133 0 31%, #02030b 31% 82%, #160621 82%),
    url("assets/backgrounds/moonlit_oak.png") center top / cover no-repeat;
  filter: saturate(1.18) contrast(1.07);
}

.cabinet-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, transparent 0 26%, #02010a99 64%, #000c 100%);
  animation: worldBreath 7s ease-in-out infinite alternate;
}

@keyframes worldBreath {
  from { opacity: .62; filter: hue-rotate(-5deg); }
  to { opacity: .9; filter: hue-rotate(7deg); }
}

.upper-display {
  position: absolute;
  z-index: 2;
  left: 6.2%;
  top: 9.6%;
  width: 87.6%;
  height: 18.1%;
  overflow: hidden;
  display: block;
  color: white;
  text-align: center;
  background:
    linear-gradient(180deg, #02010a33, #10051dcc),
    url("assets/backgrounds/moonlit_oak.png") center / cover no-repeat;
  --display-font: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", "Papyrus", fantasy;
  --display-safe-x: 12.4%;
  --display-safe-top: 25%;
  --display-safe-bottom: 20%;
}

.upper-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 10%, #05020a77 70%, #020106dd 100%);
}

.jackpot-ribbon {
  position: absolute;
  z-index: 3;
  top: var(--display-safe-top);
  left: var(--display-safe-x);
  right: var(--display-safe-x);
  height: 15%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 1.2%;
  font-family: var(--display-font);
  font-size: clamp(8px, 1.82cqw, 17px);
  line-height: 1;
  letter-spacing: 0;
  color: #f9d2ff;
  text-shadow:
    0 1px 1px #160018,
    0 0 3px #fff7ff,
    0 0 7px #bf2cff,
    0 0 12px #5720ff;
}

.jackpot-ribbon span {
  width: 100%;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  justify-content: center;
  gap: .32em;
  transform-origin: center;
}

.jackpot-ribbon span:nth-child(1) { transform: translateY(10%) rotate(-4deg) scaleX(.84); }
.jackpot-ribbon span:nth-child(2) { transform: translateY(-8%) rotate(-1.4deg) scaleX(.82); }
.jackpot-ribbon span:nth-child(3) { transform: translateY(-8%) rotate(1.4deg) scaleX(.82); }
.jackpot-ribbon span:nth-child(4) { transform: translateY(10%) rotate(4deg) scaleX(.82); }

.jackpot-ribbon b {
  color: #5ff4ff;
  text-shadow:
    0 0 3px #e8feff,
    0 0 8px #29eaff,
    0 0 12px #7d30ff,
    0 1px 2px #000;
}

.title-lockup {
  position: absolute;
  z-index: 2;
  left: var(--display-safe-x);
  right: var(--display-safe-x);
  top: 37%;
  height: 28%;
  overflow: visible;
  isolation: isolate;
}

.title-lockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 13%;
  right: 13%;
  top: 2%;
  bottom: -8%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, #ca35ff5c 0 18%, #6b1fff2b 39%, transparent 72%),
    radial-gradient(ellipse at 50% 70%, #19f4ff28 0 18%, transparent 48%);
  filter: blur(5px);
  animation: titleNeonBreath 6.8s ease-in-out infinite alternate;
}

.title-lockup p {
  margin: 0 0 -.08em;
  font: 900 clamp(8px, 2.05cqw, 18px)/1 var(--display-font);
  letter-spacing: .28em;
  color: #f9d9ff;
  text-shadow:
    0 1px 1px #1b041f,
    0 0 4px #fff0ff,
    0 0 9px #b730ff,
    0 0 13px #18efff99;
}

.title-lockup h1 {
  margin: 0;
  font: 900 clamp(26px, 8.3cqw, 66px)/.84 var(--display-font);
  letter-spacing: .018em;
  background:
    linear-gradient(180deg, #fff7ff 0 6%, #ffb9ff 13%, #e244ff 32%, #8426ee 56%, #26006c 76%, #f1b764 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .55px #f0c575;
  white-space: nowrap;
  transform: scaleX(.88) rotate(-.35deg);
  transform-origin: center;
  filter: drop-shadow(0 1px 0 #6f3a08) drop-shadow(0 0 4px #ef66ff) drop-shadow(0 0 9px #842dff);
  text-shadow:
    0 1px 0 #2a1000,
    0 0 3px #fff3d1,
    0 0 10px #e64aff,
    0 0 15px #741eff,
    0 0 20px #19f1ff4d;
  animation: titleNeonBreath 6.8s ease-in-out infinite alternate;
}

.title-rule { display: none; }
.title-rule i { width: 34%; height: 1px; background: linear-gradient(90deg, transparent, #ffe9a7, transparent); }

@keyframes titleNeonBreath {
  from { opacity: .9; filter: drop-shadow(0 0 4px #a430ff) drop-shadow(0 0 10px #3a15a0); }
  to { opacity: 1; filter: drop-shadow(0 0 7px #e961ff) drop-shadow(0 0 15px #22eaff66); }
}

.message {
  position: absolute;
  z-index: 4;
  left: var(--display-safe-x);
  right: var(--display-safe-x);
  top: 61.8%;
  height: 14%;
  margin: 0;
  font-family: var(--display-font);
  font-weight: 900;
  font-size: clamp(10px, 2.25cqw, 20px);
  line-height: 1.05;
  letter-spacing: .02em;
  color: #f4ddff;
  text-shadow: 0 0 4px #fff, 0 0 9px #b725ff, 0 0 14px #22e7ff80, 0 2px 4px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  transform: scaleX(.88) rotate(.12deg);
  transform-origin: center;
}

.upper-display:has(.message.msg-win) .title-lockup,
.upper-display:has(.message.msg-big) .title-lockup,
.upper-display:has(.message.msg-jackpot) .title-lockup,
.upper-display:has(.message.msg-feature) .title-lockup,
.upper-display:has(.message.msg-free) .title-lockup,
.upper-display:has(.message.msg-hold) .title-lockup {
  top: 39%;
  transform: scale(.9);
}

.upper-display:has(.message.msg-win) .title-lockup p,
.upper-display:has(.message.msg-big) .title-lockup p,
.upper-display:has(.message.msg-jackpot) .title-lockup p,
.upper-display:has(.message.msg-feature) .title-lockup p,
.upper-display:has(.message.msg-free) .title-lockup p,
.upper-display:has(.message.msg-hold) .title-lockup p {
  visibility: hidden;
}

.upper-display:has(.message.msg-win) .message,
.upper-display:has(.message.msg-big) .message,
.upper-display:has(.message.msg-jackpot) .message,
.upper-display:has(.message.msg-feature) .message,
.upper-display:has(.message.msg-free) .message,
.upper-display:has(.message.msg-hold) .message {
  top: 59.5%;
  height: 17%;
}

.message.msg-info,
.message.msg-instruction {
  color: #dffcff;
}

.message.msg-win {
  color: #fff5b8;
  font-size: clamp(12px, 2.85cqw, 25px);
  text-shadow: 0 0 8px #fff3ac, 0 0 18px #ff43d6, 0 2px 4px #000;
}

.message.msg-big,
.message.msg-jackpot,
.message.msg-feature {
  color: #ffe7ff;
  font-size: clamp(13px, 3.08cqw, 28px);
  letter-spacing: .03em;
  text-shadow: 0 0 6px #fff, 0 0 15px #db44ff, 0 0 27px #32eaff99, 0 3px 5px #000;
}

.message.msg-free,
.message.msg-hold {
  color: #fff2bd;
  font-size: clamp(12px, 2.8cqw, 25px);
  text-shadow: 0 0 8px #ffe6a0, 0 0 18px #2defff, 0 2px 4px #000;
}

.feature-meter {
  position: absolute;
  z-index: 3;
  left: 5%;
  right: 5%;
  top: 18%;
  margin: 0;
  text-align: center;
  font: 900 clamp(7px, 1.85cqw, 16px)/1.15 var(--display-font);
  letter-spacing: .08em;
  color: #fff5b9;
  text-shadow: 0 0 7px #ffe9a0, 0 0 15px #ff36d3, 0 2px 4px #000;
}

.upper-display {
  left: 6.2%;
  top: 9.6%;
  width: 87.6%;
  height: 18.1%;
  aspect-ratio: auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 53%, #120522 0 46%, #06020d 72%, #010105 100%),
    url("assets/backgrounds/moonlit_oak.png") center / cover no-repeat;
  --display-safe-x: 11.8%;
  --display-font: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", "Papyrus", fantasy;
}

.jackpot-ribbon {
  top: 24.8%;
  left: 15.6%;
  right: 15.6%;
  gap: .8%;
  font-family: Arial Black, Impact, "Segoe UI", sans-serif;
  font-size: clamp(6px, 1.34cqw, 12px);
  letter-spacing: 0;
  text-transform: uppercase;
}

.jackpot-ribbon span {
  gap: .22em;
  transform-origin: center;
}

.jackpot-ribbon span:nth-child(1) { transform: translateY(8%) rotate(-3deg) scaleX(.78); }
.jackpot-ribbon span:nth-child(2) { transform: translateY(-4%) rotate(-1deg) scaleX(.76); }
.jackpot-ribbon span:nth-child(3) { transform: translateY(-4%) rotate(1deg) scaleX(.76); }
.jackpot-ribbon span:nth-child(4) { transform: translateY(8%) rotate(3deg) scaleX(.76); }

.title-lockup {
  left: 12.8%;
  right: 12.8%;
  top: 38.2%;
  height: 31%;
}

.title-lockup p {
  display: block;
  margin: 0 0 -.06em;
  font: 1000 clamp(7px, 1.55cqw, 14px)/1 var(--display-font);
  letter-spacing: .22em;
  color: #f5d7ff;
  transform: scaleX(.88);
}

.title-lockup h1 {
  font: 1000 clamp(22px, 6.5cqw, 55px)/.82 var(--display-font);
  transform: scaleX(.82) rotate(-.25deg);
}

.message {
  left: 16.2%;
  right: 16.2%;
  top: 69.2%;
  height: 13%;
  font: 1000 clamp(8px, 1.75cqw, 16px)/1 Arial Black, Impact, sans-serif;
  letter-spacing: .02em;
  transform: scaleX(.86);
}

.upper-display:has(.message.msg-win) .title-lockup,
.upper-display:has(.message.msg-big) .title-lockup,
.upper-display:has(.message.msg-jackpot) .title-lockup,
.upper-display:has(.message.msg-feature) .title-lockup,
.upper-display:has(.message.msg-free) .title-lockup,
.upper-display:has(.message.msg-hold) .title-lockup {
  top: 34.5%;
  transform: scale(.68);
}

.upper-display:has(.message.msg-win) .message,
.upper-display:has(.message.msg-big) .message,
.upper-display:has(.message.msg-jackpot) .message,
.upper-display:has(.message.msg-feature) .message,
.upper-display:has(.message.msg-free) .message,
.upper-display:has(.message.msg-hold) .message {
  top: 60.5%;
  height: 21%;
}

.message.msg-win,
.message.msg-big,
.message.msg-jackpot,
.message.msg-feature {
  font-size: clamp(11px, 2.75cqw, 25px);
  transform: scaleX(.76);
}

.upper-display {
  left: 5.7%;
  top: 8.15%;
  width: 88.6%;
  height: 21.2%;
  aspect-ratio: 1000 / 360;
  overflow: hidden;
  background: transparent;
}

.upper-shade,
.jackpot-ribbon,
.title-lockup {
  display: none;
}

.marquee-art-plate,
.marquee-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.marquee-art-plate {
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.marquee-svg {
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.marquee-state-source {
  position: absolute;
  display: none !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.marquee-zone {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .22s ease, transform .22s ease;
}

.jackpot-svg {
  font-family: Arial Black, Impact, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  fill: #f8eaff;
  stroke: #32104c;
  stroke-width: 1.8px;
  paint-order: stroke fill;
  filter: url(#numberNeon);
}

.jackpot-svg tspan {
  fill: #8ff8ff;
}

.title-zone {
  opacity: 1;
}

.marquee-title-small,
.marquee-title-big {
  font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", "Papyrus", fantasy;
  font-weight: 1000;
  paint-order: stroke fill;
  filter: url(#marqueeNeon);
}

.marquee-title-small {
  font-size: 34px;
  letter-spacing: 10px;
  fill: #f7d6ff;
  stroke: #46115f;
  stroke-width: 2px;
}

.marquee-title-big {
  font-size: 98px;
  letter-spacing: 5px;
  fill: #d846ff;
  stroke: #f1c16f;
  stroke-width: 3.4px;
}

.marquee-status,
.marquee-win-caption {
  font-family: Arial Black, Impact, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: 1px;
  fill: #fff4c5;
  stroke: #2b1238;
  stroke-width: 2px;
  paint-order: stroke fill;
  filter: url(#numberNeon);
}

.marquee-win-amount {
  font-family: Arial Black, Impact, "Segoe UI", sans-serif;
  font-size: 95px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums lining-nums;
  fill: #fff6d4;
  stroke: #8b4b10;
  stroke-width: 4px;
  paint-order: stroke fill;
  filter: url(#numberNeon);
}

.win-amount-zone,
.win-caption-zone {
  opacity: 0;
  transform: scale(.88);
}

.status-zone {
  opacity: 1;
}

.upper-display.marquee-mode-win .title-zone {
  opacity: .1;
  transform: translateY(-18px) scale(.72);
}

.upper-display.marquee-mode-win .status-zone {
  opacity: 0;
}

.upper-display.marquee-mode-win .win-amount-zone,
.upper-display.marquee-mode-win .win-caption-zone {
  opacity: 1;
  transform: scale(1);
}

.upper-display.marquee-mode-feature .title-zone {
  opacity: .22;
  transform: translateY(-20px) scale(.66);
}

.upper-display.marquee-mode-feature .status-zone {
  opacity: 1;
  transform: translateY(-42px) scale(.96);
}

.upper-display.marquee-mode-feature .marquee-status {
  font-size: 22px;
}

.upper-display.marquee-mode-feature .win-amount-zone,
.upper-display.marquee-mode-feature .win-caption-zone {
  opacity: 0;
}

.reels {
  position: absolute;
  z-index: 2;
  left: var(--canonical-reels-left);
  top: var(--canonical-reels-top);
  width: var(--canonical-reels-width);
  height: var(--canonical-reels-height);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at center, #201044 0, #06030e 73%),
    linear-gradient(#11051d, #020107);
  box-shadow: inset 0 0 35px #000;
}

.cabinet.is-spinning .reels::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(180deg, transparent 0 4%, #5cf6ff24 4.35%, transparent 5.4%),
    linear-gradient(180deg, #0008, transparent 18% 82%, #0009);
  animation: speedLines .14s linear infinite;
  mix-blend-mode: screen;
}

@keyframes speedLines { to { transform: translateY(12%); } }

.reel {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-inline: 1px solid #6c3f2066;
}

.reel::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #0009, transparent 7%, transparent 92%, #000a);
}

.reel-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

.symbol-cell {
  position: relative;
  width: 100%;
  height: calc(var(--reel-height, 700px) / 4);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle, #34135155 0, #04010911 68%);
}

.symbol-cell img {
  width: 118%;
  height: 118%;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px #000) saturate(1.12);
  transform: translateZ(0);
}

.land-animation {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  filter: saturate(1.2) contrast(1.12);
}

.symbol-cell.tall img { width: 126%; height: 126%; }
.symbol-cell.knock-stack-part img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transform: none;
}
.symbol-cell.knock-stack-row-0 img,
.symbol-cell.knock-stack-row-1 img,
.symbol-cell.knock-stack-row-2 img,
.symbol-cell.knock-stack-row-3 img {
  transform: none;
}
.symbol-cell.winner { z-index: 3; }
.symbol-cell.winner::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 18%;
  background: radial-gradient(circle, #fff7aadd, #ff2bbb77 40%, transparent 72%);
  box-shadow: 0 0 14px #fff3a8, 0 0 30px #ff23d7;
  animation: winnerPulse .58s ease-in-out infinite alternate;
}

.symbol-cell.winner img { animation: winnerLift .58s ease-in-out infinite alternate; }

@keyframes winnerPulse { to { transform: scale(1.08); opacity: .72; } }
@keyframes winnerLift { to { transform: scale(1.08); filter: drop-shadow(0 0 10px #fff6a3) saturate(1.35); } }

.symbol-cell.four-bang-active {
  z-index: 8;
  animation: fourBangCell .34s cubic-bezier(.14,1.58,.22,1);
}

.symbol-cell.four-bang-active::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 18%;
  background: radial-gradient(circle, #fff8b8ee 0, #ff2ccfaa 42%, transparent 72%);
  box-shadow: 0 0 22px #fff5ad, 0 0 46px #ff31da, 0 0 70px #47eeff;
  mix-blend-mode: screen;
  pointer-events: none;
}

.four-bang-video { z-index: 9; filter: saturate(1.35) contrast(1.2) brightness(1.08); }

.symbol-cell.four-bang-stage-1::after {
  background: radial-gradient(circle, #fff8b8cc 0, #ff2ccf80 34%, transparent 68%);
  box-shadow: 0 0 18px #fff5ad, 0 0 34px #ff31da;
}

.symbol-cell.four-bang-stage-2::after {
  background: radial-gradient(circle, #fff8b8ee 0, #42efffaa 35%, #ff2ccf88 52%, transparent 74%);
  box-shadow: 0 0 26px #fff5ad, 0 0 52px #47eeff;
}

.symbol-cell.four-bang-stage-3::after {
  background: conic-gradient(from 30deg, #fff8b8, #35eeff, #ff31da, #fff8b8);
  opacity: .78;
  box-shadow: 0 0 32px #fff5ad, 0 0 62px #ff31da, 0 0 84px #47eeff;
  animation: portalSpin .52s linear infinite;
}

.symbol-cell.four-bang-stage-4::after {
  background: radial-gradient(circle, #fff 0 8%, #fff8b8ee 20%, #ff2ccfaa 44%, #35eeff77 62%, transparent 78%);
  box-shadow: 0 0 38px #fff, 0 0 78px #ff31da, 0 0 112px #47eeff;
}

@keyframes portalSpin { to { transform: rotate(1turn) scale(1.06); } }

@keyframes fourBangCell {
  0% { transform: scale(.92) rotate(-1.5deg); filter: brightness(2); }
  54% { transform: scale(1.12) rotate(1deg); }
  100% { transform: scale(1); filter: none; }
}

.mode-free-horizontal .symbol-cell.free-moving {
  animation: freeRowSettle 2.15s cubic-bezier(.13,.82,.2,1);
}

.mode-free-horizontal.free-streaming .reels::after {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 7;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 7%, #3feeff28 9%, transparent 15%),
    linear-gradient(90deg, transparent, #ff35d72a 44%, #3feeff2c 58%, transparent);
  mix-blend-mode: screen;
  animation: horizontalStream .34s linear infinite;
}

@keyframes horizontalStream {
  to { transform: translateX(11%); opacity: .72; }
}

.mode-free-horizontal .symbol-cell.row-slide-right img {
  animation: rowSlideRight var(--free-travel-duration, 2.15s) cubic-bezier(.09,.73,.17,1) var(--free-travel-delay, 0ms) both;
}

.mode-free-horizontal .symbol-cell.row-slide-left img {
  animation: rowSlideLeft var(--free-travel-duration, 2.15s) cubic-bezier(.09,.73,.17,1) var(--free-travel-delay, 0ms) both;
}

.mode-free-horizontal .symbol-cell.row-landed {
  animation: reelStop .2s ease-out;
}

.symbol-cell.locked-wild {
  z-index: 5;
  background: radial-gradient(circle, #fff7c444 0, #23ecff33 36%, #04010922 74%);
}

.symbol-cell.locked-wild::before {
  content: "";
  position: absolute;
  inset: 4%;
  border: 2.5px solid #ffe66f;
  border-radius: 16%;
  box-shadow: inset 0 0 18px #46ecffaa, 0 0 22px #ffe66fcc, 0 0 38px #ff3fd4aa;
  animation: lockedCompassPulse 1.15s ease-in-out infinite alternate;
  pointer-events: none;
}

.symbol-cell.locked-wild::after {
  content: "WILD";
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: Arial Black, Impact, sans-serif;
  font-size: clamp(7px, 1.6cqw, 13px);
  font-weight: 1000;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(180deg, #ff2ccf, #750d5c);
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid #ffe66f;
  box-shadow: 0 0 10px #ff2ccf, 0 2px 4px #000;
  pointer-events: none;
  z-index: 6;
}

.symbol-cell.locked-wild.new-lock {
  animation: compassLockClunk .46s cubic-bezier(.12,1.75,.24,1);
}

@keyframes rowSlideRight {
  0% { transform: translateX(-330%) scale(.9); filter: blur(4px) brightness(1.7) saturate(1.25); opacity: .48; }
  18% { transform: translateX(-210%) scale(.94); filter: blur(3px) brightness(1.55) saturate(1.2); opacity: .68; }
  45% { transform: translateX(-88%) scale(1); filter: blur(1.6px) brightness(1.32); opacity: .9; }
  73% { transform: translateX(-16%) scale(1.025); filter: blur(.45px) brightness(1.12); opacity: 1; }
  88% { transform: translateX(4%) scale(1.035); filter: blur(.15px) brightness(1.08); }
  100% { transform: translateX(0) scale(1); filter: drop-shadow(0 3px 5px #000) saturate(1.12); opacity: 1; }
}

@keyframes rowSlideLeft {
  0% { transform: translateX(330%) scale(.9); filter: blur(4px) brightness(1.7) saturate(1.25); opacity: .48; }
  18% { transform: translateX(210%) scale(.94); filter: blur(3px) brightness(1.55) saturate(1.2); opacity: .68; }
  45% { transform: translateX(88%) scale(1); filter: blur(1.6px) brightness(1.32); opacity: .9; }
  73% { transform: translateX(16%) scale(1.025); filter: blur(.45px) brightness(1.12); opacity: 1; }
  88% { transform: translateX(-4%) scale(1.035); filter: blur(.15px) brightness(1.08); }
  100% { transform: translateX(0) scale(1); filter: drop-shadow(0 3px 5px #000) saturate(1.12); opacity: 1; }
}

@keyframes freeRowSettle {
  0% { background: radial-gradient(circle, #37f2ff33 0, #04010911 68%); }
  100% { background: radial-gradient(circle, #34135155 0, #04010911 68%); }
}

@keyframes lockedCompassPulse {
  to { transform: scale(1.035); opacity: .72; }
}

@keyframes compassLockClunk {
  0% { transform: scale(1.24) rotate(2deg); filter: brightness(2.6); }
  62% { transform: scale(.96) rotate(-1deg); }
  100% { transform: scale(1); filter: none; }
}

.reel.spinning .reel-track { filter: blur(1.05px) brightness(1.1) saturate(1.1); }
.reel.launching .reel-track { filter: blur(1.55px) brightness(1.18) saturate(1.18); }
.reel.anticipating .reel-track { filter: blur(.82px) brightness(1.18) saturate(1.22); }
.reel.stopped { animation: reelStop .18s ease-out; }
.reel.settling { animation: reelSettle .34s cubic-bezier(.13,1.65,.25,1); }
@keyframes reelStop { 0% { transform: translateY(-1.2%); } 55% { transform: translateY(.65%); } 100% { transform: none; } }
@keyframes reelSettle {
  0% { transform: translateY(-1.1%); filter: brightness(1.3); }
  58% { transform: translateY(.55%); }
  100% { transform: none; filter: none; }
}

.fascia {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 7px #020005);
}

.cabinet-living-grid {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  mix-blend-mode: screen;
  overflow: hidden;
}

.grid-video {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  filter: saturate(1.15) contrast(1.05);
}

.grid-video.active {
  opacity: .88;
}

.cabinet.is-spinning .grid-video-slow {
  opacity: 0;
}

.cabinet.is-spinning .grid-video-med {
  opacity: .95;
}

.cabinet.grid-fast-active .grid-video-fast {
  opacity: 1;
}

.cabinet.grid-fast-active .grid-video-med,
.cabinet.grid-fast-active .grid-video-slow {
  opacity: .08;
}

.payline-overlay {
  position: absolute;
  z-index: 5;
  left: var(--canonical-reels-left);
  top: var(--canonical-reels-top);
  width: var(--canonical-reels-width);
  height: var(--canonical-reels-height);
  pointer-events: none;
  overflow: visible;
}

.payline-overlay .line-rest {
  fill: none;
  stroke: #35e8ff;
  stroke-width: .62;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .32;
  filter: drop-shadow(0 0 2px #1ee8ff);
}

.payline-overlay .line-active {
  fill: none;
  stroke: #fff4a8;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
  filter: drop-shadow(0 0 3px #fff0a0) drop-shadow(0 0 8px #ff3fc7) drop-shadow(0 0 12px #22e9ff);
}

.living-cabinet {
  position: absolute;
  z-index: 3;
  inset: 0 -42%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .72;
  --cabinet-energy: .28;
}

@media (min-aspect-ratio: 3/2) {
  .responsive-wing-art { height: min(103.2%, 100vh); }
}

@media (max-aspect-ratio: 1/1) {
  .responsive-wing-art {
    opacity: .82;
  }

  .side-world {
    width: 84%;
  }
}

@media (max-aspect-ratio: 7/10) {
  .responsive-wing-art {
    opacity: .48;
  }

  .side-world {
    display: none;
  }
}

.cabinet-aura,
.cabinet-energy,
.cabinet-heart,
.cabinet-tesla,
.cabinet-stars,
.cabinet-animation-layer {
  display: none !important;
  position: absolute;
  pointer-events: none;
}

.cabinet-aura {
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, #3ff3ff33, transparent 14%),
    radial-gradient(circle at 50% 77%, #ff3fc733, transparent 17%),
    radial-gradient(circle at 12% 42%, #22e9ff33, transparent 22%),
    radial-gradient(circle at 88% 42%, #b824ff35, transparent 22%);
  opacity: calc(.28 + var(--cabinet-energy) * .48);
  animation: cabinetBreath 7.8s ease-in-out infinite alternate;
}

.cabinet-energy {
  width: 18%;
  height: 55%;
  top: 20%;
  opacity: calc(.23 + var(--cabinet-energy) * .55);
  background:
    linear-gradient(180deg, transparent, #25eaff88 20%, #a82cff77 52%, #25eaff88 83%, transparent),
    radial-gradient(circle, #fff8, transparent 42%);
  filter: blur(8px);
  animation: energyTravel 5.6s linear infinite;
}

.energy-left { left: 4%; transform: skewY(-8deg); }
.energy-right { right: 4%; transform: skewY(8deg) scaleX(-1); animation-delay: -2.8s; }

.cabinet-heart {
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 9%, #ff35b8 25%, #7514ff55 52%, transparent 70%);
  filter: blur(3px);
  opacity: calc(.26 + var(--cabinet-energy) * .58);
  animation: heartBreath 2.6s ease-in-out infinite alternate;
}

.heart-top { left: 45%; top: 3.4%; }
.heart-bottom { left: 45%; top: 76%; animation-delay: -1.2s; }

.cabinet-tesla {
  width: 15%;
  height: 25%;
  top: 18%;
  opacity: calc(.12 + var(--cabinet-energy) * .52);
  background: repeating-linear-gradient(120deg, transparent 0 12%, #59f4ff99 13%, transparent 15%);
  filter: blur(1.5px) drop-shadow(0 0 6px #3ef4ff);
  animation: teslaWhisper 1.7s steps(3, end) infinite;
}

.tesla-left { left: 7%; }
.tesla-right { right: 7%; animation-delay: -.8s; }

.cabinet-stars {
  inset: 6% 5%;
  opacity: calc(.2 + var(--cabinet-energy) * .42);
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle, #5ff1ff 0 1px, transparent 1.6px),
    radial-gradient(circle, #ff59d8 0 1px, transparent 1.7px);
  background-size: 17% 13%, 23% 19%, 31% 29%;
  animation: starDrift 14s linear infinite;
}

.cabinet.reel-pulse-1 .living-cabinet { --cabinet-energy: .42; }
.cabinet.reel-pulse-2 .living-cabinet { --cabinet-energy: .50; }
.cabinet.reel-pulse-3 .living-cabinet { --cabinet-energy: .58; }
.cabinet.reel-pulse-4 .living-cabinet { --cabinet-energy: .66; }
.cabinet.reel-pulse-5 .living-cabinet { --cabinet-energy: .82; }
.cabinet.spin-wake .living-cabinet { --cabinet-energy: .54; }
.cabinet.attract-awake .living-cabinet { --cabinet-energy: .92; }
.cabinet.knock-1 .living-cabinet { --cabinet-energy: .56; }
.cabinet.knock-2 .living-cabinet { --cabinet-energy: .66; }
.cabinet.knock-3 .living-cabinet { --cabinet-energy: .78; }
.cabinet.knock-4 .living-cabinet { --cabinet-energy: .94; }
.cabinet.mode-free .living-cabinet,
.cabinet.mode-free-horizontal .living-cabinet { --cabinet-energy: calc(.48 + min(var(--lock-count, 0), 20) * .018); }
.cabinet.mode-hold .living-cabinet { --cabinet-energy: .72; }
.cabinet.super-jackpot .living-cabinet { --cabinet-energy: 1; }

@keyframes cabinetBreath { to { filter: hue-rotate(10deg) brightness(1.18); opacity: .95; } }
@keyframes energyTravel { to { background-position: 0 180%, 0 0; } }
@keyframes heartBreath { to { transform: scale(1.18); filter: blur(2px) drop-shadow(0 0 18px #ff3fc7); } }
@keyframes teslaWhisper { 50% { opacity: .05; transform: translateY(1.2%); } }
@keyframes starDrift { to { background-position: 12% 18%, -16% 11%, 8% -22%; } }

.cabinet-animation-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% var(--canonical-reels-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--canonical-reels-top) + var(--canonical-reels-height)) / 100% calc(100% - (var(--canonical-reels-top) + var(--canonical-reels-height))) no-repeat,
    linear-gradient(#000 0 0) 0 var(--canonical-reels-top) / var(--canonical-reels-left) var(--canonical-reels-height) no-repeat,
    linear-gradient(#000 0 0) calc(var(--canonical-reels-left) + var(--canonical-reels-width)) var(--canonical-reels-top) / calc(100% - (var(--canonical-reels-left) + var(--canonical-reels-width))) var(--canonical-reels-height) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% var(--canonical-reels-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--canonical-reels-top) + var(--canonical-reels-height)) / 100% calc(100% - (var(--canonical-reels-top) + var(--canonical-reels-height))) no-repeat,
    linear-gradient(#000 0 0) 0 var(--canonical-reels-top) / var(--canonical-reels-left) var(--canonical-reels-height) no-repeat,
    linear-gradient(#000 0 0) calc(var(--canonical-reels-left) + var(--canonical-reels-width)) var(--canonical-reels-top) / calc(100% - (var(--canonical-reels-left) + var(--canonical-reels-width))) var(--canonical-reels-height) no-repeat;
}

.cabinet-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.18) contrast(1.08);
  transition: opacity .3s ease;
}

.cabinet-animation-main { opacity: .58; }
.cabinet.is-spinning .cabinet-animation-main { opacity: .34; }
.cabinet.is-spinning .cabinet-animation-spin { opacity: .68; }
.cabinet.mode-hold .cabinet-animation-hold { opacity: .72; }
.cabinet.super-jackpot .cabinet-animation-celebration { opacity: .54; }
.cabinet.attract-awake .cabinet-animation-main { opacity: .76; }
.cabinet.attract-awake .cabinet-animation-spin { opacity: .28; }
.cabinet.attract-awake .cabinet-animation-celebration { opacity: .22; }

.cabinet.attract-awake .cabinet-world::after {
  animation-duration: 2.8s;
  opacity: .36;
}

.cabinet.attract-awake .responsive-wing-art {
  animation: attractWingBreath 5.8s ease-in-out infinite alternate;
}

.cabinet.attract-awake .upper-display {
  animation: attractDisplayHum 3.8s ease-in-out infinite alternate;
}

.cabinet.attract-awake .title-lockup::before {
  animation-duration: 2.4s;
  filter: blur(6px) saturate(1.28);
}

.cabinet.attract-awake .title-lockup h1 {
  animation: attractTitlePulse 3.2s ease-in-out infinite alternate;
}

.cabinet.attract-awake .jackpot-ribbon {
  animation: attractArcSearch 6.2s ease-in-out infinite;
}

.cabinet.attract-awake .fascia {
  animation: attractFasciaCharge 2.7s ease-in-out infinite alternate;
}

.cabinet.attract-awake .spin-button {
  animation: attractSpinBeacon 2.1s ease-in-out infinite alternate;
}

.cabinet.attract-awake .reels {
  box-shadow:
    inset 0 0 18px #2af7ff55,
    inset 0 0 34px #a52cff44,
    0 0 24px #ff39d522;
}

.reel.attract-twitch {
  animation: attractReelTwitch .52s cubic-bezier(.16,1.65,.27,1);
}

.reel-track.attract-track-glint {
  filter: saturate(1.42) brightness(1.18);
}

.steampunk-radio.attract-awake .radio-full-shell {
  animation: attractRadioGlow 3.2s ease-in-out infinite alternate;
}

@keyframes attractWingBreath {
  0% { filter: drop-shadow(0 0 14px #020005) saturate(1.08) brightness(1); }
  45% { filter: drop-shadow(0 0 20px #7f2aff88) drop-shadow(0 0 14px #19edff55) saturate(1.22) brightness(1.06); }
  100% { filter: drop-shadow(0 0 22px #ff3fc766) drop-shadow(0 0 18px #20f4ff66) saturate(1.18) brightness(1.04); }
}

@keyframes attractDisplayHum {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.12) saturate(1.22) hue-rotate(8deg); }
  100% { filter: brightness(1.06) saturate(1.16) hue-rotate(-5deg); }
}

@keyframes attractTitlePulse {
  to {
    text-shadow:
      0 1px 0 #fff3,
      0 0 5px #fff,
      0 0 11px #ff45df,
      0 0 24px #8c2cff,
      0 0 36px #20f4ff,
      0 3px 4px #160018;
  }
}

@keyframes attractArcSearch {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  35% { transform: translateY(-5%) rotate(-.7deg); filter: brightness(1.18); }
  70% { transform: translateY(-3%) rotate(.7deg); filter: brightness(1.12); }
}

@keyframes attractFasciaCharge {
  to { filter: drop-shadow(0 0 12px #20f4ff) drop-shadow(0 0 24px #c12cff) brightness(1.18) saturate(1.12); }
}

@keyframes attractSpinBeacon {
  to {
    transform: scale(1.025);
    box-shadow:
      inset 0 0 30px #fff,
      0 0 38px #22f8ff,
      0 0 76px #ff36d3;
  }
}

@keyframes attractReelTwitch {
  0% { transform: translateY(0); }
  30% { transform: translateY(-1.8%) rotate(.25deg); }
  62% { transform: translateY(.7%) rotate(-.16deg); }
  100% { transform: translateY(0); }
}

@keyframes attractRadioGlow {
  to { filter: drop-shadow(0 0 12px #21f6ff99) drop-shadow(0 0 22px #b62cff88) brightness(1.08); }
}

.cabinet.is-spinning .fascia {
  animation: fasciaCharge .46s ease-in-out infinite alternate;
}

.cabinet.wing-event-active .reels {
  animation: wingReelHaywire .18s steps(2, end) infinite;
  box-shadow: inset 0 0 22px #21f6ff99, 0 0 22px #a12cff77;
}

.cabinet.wing-event-active .reel-track {
  filter: blur(.55px) saturate(1.35) brightness(1.1);
}

@keyframes wingReelHaywire {
  0% { transform: translate(0, 0) skewX(0deg); }
  25% { transform: translate(.35%, -.25%) skewX(.35deg); }
  50% { transform: translate(-.25%, .3%) skewX(-.3deg); }
  75% { transform: translate(.22%, .18%) skewX(.18deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

@keyframes fasciaCharge {
  to { filter: drop-shadow(0 0 10px #0ff) drop-shadow(0 0 18px #a22cff) brightness(1.12); }
}

.fx-layer {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.screen-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle, #fff 0, #67ffffcc 14%, #ff30d888 40%, transparent 73%);
  mix-blend-mode: screen;
}

.screen-flash.fire { animation: screenFlash .62s ease-out; }
@keyframes screenFlash { 0% { opacity: .95; } 18% { opacity: .22; } 36% { opacity: .8; } 100% { opacity: 0; } }

.shockwave {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 10%;
  aspect-ratio: 1;
  border: 4px solid #fff9b8;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  box-shadow: 0 0 16px #fff, inset 0 0 16px #4ff7ff;
}

.shockwave.fire { animation: shockwave 1.05s cubic-bezier(.05,.65,.2,1); }
@keyframes shockwave { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(14); } }

.impact-text {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 42%;
  opacity: 0;
  text-align: center;
  font: 1000 clamp(34px, 12cqw, 112px)/.82 Arial Black, Impact, sans-serif;
  letter-spacing: -.04em;
  color: #fff8bf;
  -webkit-text-stroke: 2px #7d1e57;
  text-shadow: 0 5px 0 #6c1c22, 0 9px 0 #2d0712, 0 0 13px #fff, 0 0 30px #ffca28, 0 0 70px #ff27dc;
  transform: scale(.12) rotate(-5deg);
}

.impact-text.fire { animation: impactText 1.45s cubic-bezier(.15,1.2,.2,1); }
@keyframes impactText {
  0% { opacity: 0; transform: scale(.12) rotate(-5deg); }
  18% { opacity: 1; transform: scale(1.1) rotate(1deg); }
  34% { transform: scale(.96) rotate(-1deg); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

.haywire-award {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  width: 40%;
  min-width: 170px;
  max-width: 360px;
  display: grid;
  justify-items: center;
  gap: 1.8%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
  transform-origin: center;
  text-align: center;
  filter: drop-shadow(0 9px 14px #000c);
}

.haywire-award.show {
  animation: haywireAwardBank 2.35s cubic-bezier(.16,.8,.2,1) forwards;
}

.haywire-coin {
  width: clamp(96px, 22cqw, 220px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 12px #fff2ac) drop-shadow(0 0 28px #ff3bd8) drop-shadow(0 0 34px #2cefff);
  animation: haywireCoinSpin .82s linear infinite;
}

.haywire-award strong {
  color: #fff6b6;
  font: 1000 clamp(31px, 9cqw, 86px)/.85 Arial Black, Impact, sans-serif;
  letter-spacing: 0;
  -webkit-text-stroke: 1.5px #612005;
  text-shadow: 0 2px 0 #7b2400, 0 0 10px #fff, 0 0 20px #ffbf24, 0 0 36px #ff32cc;
}

.haywire-award span {
  color: #8df8ff;
  font: 1000 clamp(18px, 4.2cqw, 42px)/.95 var(--display-font);
  letter-spacing: .04em;
  text-shadow: 0 0 7px #fff, 0 0 18px #30eaff, 0 0 26px #d43cff, 0 3px 4px #000;
  transform: scaleX(.88);
}

@keyframes haywireCoinSpin {
  to { transform: rotateY(360deg) rotateZ(8deg); }
}

@keyframes haywireAwardBank {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-7deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(2deg); }
  43% { opacity: 1; transform: translate(-50%, -50%) scale(.96) rotate(0); }
  67% { opacity: 1; transform: translate(-50%, -50%) scale(.78) rotate(6deg); }
  100% { opacity: 0; transform: translate(-137%, 247%) scale(.22) rotate(18deg); }
}

.particle {
  position: absolute;
  left: 50%;
  top: 53%;
  width: var(--size);
  height: calc(var(--size) * 2.8);
  border-radius: 50%;
  background: linear-gradient(#fff, var(--color));
  box-shadow: 0 0 8px var(--color), 0 0 18px var(--color);
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: particleBurst var(--time) cubic-bezier(.1,.6,.25,1) forwards;
}

@keyframes particleBurst {
  0% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(1); }
  78% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(var(--distance)) scale(.1); }
}

.cabinet.quake { animation: cabinetQuake .52s linear; }
.cabinet.quake-heavy { animation: cabinetQuakeHeavy .86s linear; }
@keyframes cabinetQuake {
  0%,100% { transform: translate(0); }
  16% { transform: translate(-.7%, .35%) rotate(-.25deg); }
  32% { transform: translate(.8%, -.35%) rotate(.22deg); }
  48% { transform: translate(-.55%, -.2%); }
  64% { transform: translate(.45%, .25%); }
}
@keyframes cabinetQuakeHeavy {
  0%,100% { transform: translate(0); }
  8% { transform: translate(-1.35%, .7%) rotate(-.55deg); }
  16% { transform: translate(1.5%, -.7%) rotate(.5deg); }
  25% { transform: translate(-1.1%, -.55%); }
  34% { transform: translate(1.2%, .6%); }
  44% { transform: translate(-.8%, .4%); }
  56% { transform: translate(.7%, -.35%); }
  72% { transform: translate(-.4%, .2%); }
}

.credits-panel, .bet-panel {
  position: absolute;
  z-index: 5;
  top: 86.5%;
  height: 8.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  color: #fff0c7;
  text-align: center;
  text-shadow: 0 0 7px #00d9ff, 0 2px 3px #000;
}

.credits-panel { left: 7%; top: 85%; width: 27%; }
.bet-panel { right: 6.5%; top: 85%; width: 28%; }
.credits-panel span, .bet-panel > span { font-size: clamp(8px, 1.72vw, 16px); letter-spacing: .05em; transform: scaleX(.9); }
.credits-panel strong, .bet-panel strong { font-size: clamp(18px, 5.1vw, 48px); line-height: .92; color: #fff7b7; }
.credits-panel small, .bet-panel small { font-size: clamp(7px, 1.52vw, 15px); color: #67f1ff; }
.credits-panel span,
.credits-panel strong,
.credits-panel small,
.bet-panel > span,
.bet-panel strong,
.bet-panel small,
.spin-button span,
.spin-button small {
  opacity: 0;
}

.bet-row {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  pointer-events: none;
}
.bet-row button {
  position: absolute;
  z-index: 10;
  top: 48%;
  width: 18%;
  aspect-ratio: 1;
  border: 1px solid #55eaff99;
  border-radius: 50%;
  color: white;
  background: #180c2ccc;
  box-shadow: inset 0 0 7px #00d5ff88;
  cursor: pointer;
  line-height: 1;
  pointer-events: auto;
}
#betDown { left: 0; transform: translate(-34%, -50%); }
#betUp { right: 0; transform: translate(34%, -50%); }

.control-svg {
  position: absolute;
  z-index: 8;
  left: 5.3%;
  top: 81.2%;
  width: 89.4%;
  height: 15.65%;
  pointer-events: none;
  overflow: visible;
}

.control-svg text {
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  font-family: "Arial Black", Impact, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.control-kicker {
  fill: #f7fbff;
  stroke: #092033;
  stroke-width: 3;
  font-size: 25px;
  font-weight: 900;
  filter: url(#controlTextGlow);
}

.control-value {
  fill: #fff6bb;
  stroke: #062237;
  stroke-width: 4;
  font-size: 64px;
  font-weight: 950;
  filter: url(#controlTextGlow);
}

.control-small-value,
.control-spin-sub {
  fill: #77f4ff;
  stroke: #071828;
  stroke-width: 3;
  font-size: 24px;
  font-weight: 900;
  filter: url(#controlTextGlow);
}

.control-spin-main {
  fill: #ffffff;
  stroke: #0b2940;
  stroke-width: 5;
  font-size: 82px;
  font-weight: 950;
  filter: url(#controlSpinGlow);
}

.control-spin-sub {
  fill: #f8fdff;
  font-size: 22px;
}

.spin-button {
  position: absolute;
  z-index: 6;
  left: 38.45%;
  top: 81.65%;
  width: 23.2%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  background:
    radial-gradient(circle at 40% 30%, #f9ffda 0 3%, #58ffdc 5%, #037aa2 34%, #151053 67%, #050314 73%);
  box-shadow: inset 0 0 0 4px #62efff55, inset 0 0 24px #00d9ff, 0 0 18px #15ddff, 0 0 42px #a22cff88;
  text-shadow: 0 1px 2px #001, 0 0 8px #fff;
  transition: transform .12s ease, filter .12s ease;
}

.spin-button span { font: 900 clamp(16px, 5.15vw, 50px)/.86 Arial, sans-serif; letter-spacing: .02em; }
.spin-button small { margin-top: 5%; font: 800 clamp(6px, 1.24vw, 12px)/1 Arial, sans-serif; letter-spacing: .04em; transform: scaleX(.88); }
.spin-button:hover { filter: brightness(1.16); transform: scale(1.02); }
.spin-button:active { transform: scale(.95); }
.spin-button:disabled { cursor: default; filter: saturate(.35) brightness(.72); }
.spin-button.spinning { animation: spinGlow .5s ease-in-out infinite alternate; }
@keyframes spinGlow { to { box-shadow: inset 0 0 28px #fff, 0 0 34px #24ffff, 0 0 70px #ff36d3; } }

.sound-button {
  position: absolute;
  z-index: 7;
  right: -3.8%;
  bottom: 23.6%;
  width: 4.9%;
  aspect-ratio: 1;
  border: 1px solid #ae78d5;
  border-radius: 50%;
  color: #fff;
  background: #120923cc;
  opacity: .72;
  cursor: pointer;
}
.sound-button.muted { opacity: .3; text-decoration: line-through; }

.steampunk-radio {
  position: fixed;
  z-index: 70;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: auto;
  width: auto;
  pointer-events: none;
  transform-origin: right bottom;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

/* Hidden Mode: "just a music button" in lower right */
.steampunk-radio.is-hidden {
  pointer-events: auto;
  width: auto;
}

.radio-music-btn {
  display: none;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #ffd77a;
  border-radius: 999px;
  padding: 8px 15px;
  background: radial-gradient(circle at 40% 30%, #fff7cf 0%, #e5aa37 42%, #572e09 88%, #251103 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .85), 0 0 16px rgba(255, 180, 44, .55), inset 0 1px 1px #fff;
  color: #1a0801;
  font: 900 clamp(11px, 1vw, 13px)/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.radio-music-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .9), 0 0 22px rgba(255, 190, 50, .85);
}

.radio-music-btn:active {
  transform: scale(.95);
}

.music-note-icon {
  font-size: 1.25em;
  color: #551d00;
  text-shadow: 0 0 4px #ffe699;
}

.steampunk-radio.is-hidden .radio-music-btn {
  display: inline-flex;
}

.steampunk-radio.is-hidden .radio-body-button,
.steampunk-radio.is-hidden .radio-full-shell {
  display: none;
}

/* Mini Mode: Compact vintage radio body */
.steampunk-radio.is-mini {
  width: clamp(140px, 12vw, 190px);
  pointer-events: auto;
}

.steampunk-radio.is-mini .radio-music-btn,
.steampunk-radio.is-mini .radio-full-shell {
  display: none;
}

.steampunk-radio.is-mini .radio-body-button {
  display: block;
  width: 100%;
}

.radio-body-button {
  display: none;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 14px #000c);
  transition: transform .18s ease, filter .18s ease;
}

.radio-body-button:hover {
  transform: scale(1.04) rotate(-1deg);
  filter: drop-shadow(0 10px 18px #000) drop-shadow(0 0 12px rgba(255, 186, 53, .45)) brightness(1.08);
}

.radio-body-button:active {
  transform: scale(.97);
}

.radio-body-button img,
.radio-control-art,
.radio-ambient-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Full Mode: Full expanded chassis */
.steampunk-radio.is-full {
  width: clamp(240px, 20vw, 330px);
  pointer-events: auto;
}

.steampunk-radio.is-full .radio-music-btn,
.steampunk-radio.is-full .radio-body-button {
  display: none;
}

.radio-full-shell {
  position: relative;
  pointer-events: auto;
  display: block;
  filter: drop-shadow(0 8px 14px #000d);
  opacity: .96;
}

.radio-ambient-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: contain;
  opacity: .58;
  mix-blend-mode: screen;
  pointer-events: none;
}

.radio-control-art {
  position: relative;
  z-index: 1;
  filter: saturate(1.06) contrast(1.04);
}

.radio-chassis-video {
  object-fit: contain;
  background: transparent;
  pointer-events: none;
}

.radio-readout {
  position: absolute;
  z-index: 2;
  left: 24%;
  top: 27%;
  width: 52%;
  height: 40%;
  display: grid;
  align-content: center;
  color: #7ff7ff;
  text-align: center;
  text-shadow: 0 0 5px #18eaff, 0 0 10px #b72cff, 0 1px 1px #210700;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(ellipse at center, #061327b5 0 55%, #04020bd8 100%);
  box-shadow: inset 0 0 10px #29eaff55, 0 0 12px #000b;
}

.radio-readout span {
  font: 1000 clamp(8px, 1.08vw, 17px)/1 Arial, sans-serif;
  transform: scaleX(.86);
}

.radio-readout strong {
  margin-top: 1%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 1000 clamp(10px, 1.28vw, 20px)/.98 Arial, sans-serif;
  transform: scaleX(.9);
}

.radio-readout small {
  color: #ffd77b;
  font: 1000 clamp(8px, 1vw, 15px)/1 Arial, sans-serif;
}

.radio-progress {
  height: 10%;
  margin: 2% auto;
  width: 84%;
  overflow: hidden;
  border-radius: 999px;
  background: #1d0803cc;
}

.radio-progress i {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #ff8f1a, #ffe36d);
  box-shadow: 0 0 8px #ff9b22;
}

.radio-hotspot {
  position: absolute;
  z-index: 3;
  top: 76%;
  height: 14%;
  border: 0;
  border-radius: 50%;
  color: #ffd781;
  background: radial-gradient(circle, #fff6b222 0 22%, #ffb42c33 42%, #18060bdd 76%);
  display: grid;
  place-items: center;
  text-indent: 0;
  overflow: visible;
  font: 1000 clamp(10px, 1.25vw, 20px)/1 Arial Black, Arial, sans-serif;
  text-shadow: 0 0 5px #fff3a5, 0 0 9px #ff8624, 0 1px 2px #000;
  cursor: pointer;
}

.radio-hotspot:hover {
  box-shadow: inset 0 0 10px #ffe38a99, 0 0 10px #ff8c1a99;
}

.radio-prev { left: 36.5%; width: 7.5%; }
.radio-play { left: 46.2%; top: 72%; width: 12.5%; height: 19%; }
.radio-next { left: 60.8%; width: 7.5%; }
.radio-mini {
  left: 20.5%;
  width: 7%;
}
.radio-hide {
  left: 72.3%;
  top: 72%;
  width: 10%;
  height: 19%;
}

.maker-signature {
  position: absolute;
  z-index: 4;
  right: 13.5%;
  bottom: 5.5%;
  display: flex;
  align-items: baseline;
  gap: .48em;
  pointer-events: none;
  opacity: .78;
  color: #ffe9a9;
  font: 800 clamp(5px, .56vw, 9px)/1 "Segoe Print", "Bradley Hand ITC", cursive;
  text-shadow: 0 0 5px #ff9b22, 0 0 9px #6ff5ff, 0 1px 2px #000;
  transform: rotate(-2.4deg);
}

.maker-signature span {
  color: #d7fbff;
}

.maker-signature strong {
  color: #fff4be;
  font: 900 clamp(8px, .9vw, 14px)/.8 "Segoe Print", "Bradley Hand ITC", cursive;
  letter-spacing: .02em;
  text-shadow: 0 0 4px #fff, 0 0 10px #ff3bd8, 0 0 16px #29eaff, 0 2px 2px #000;
  transform: translateY(.08em) rotate(-5deg);
}

.settings-button {
  position: absolute;
  z-index: 7;
  right: -3.8%;
  bottom: 17.2%;
  width: 4.9%;
  aspect-ratio: 1;
  border: 1px solid #55eaff99;
  border-radius: 50%;
  color: #fff;
  background: #120923cc;
  opacity: .78;
  cursor: pointer;
  box-shadow: inset 0 0 8px #00d5ff55;
}
.settings-button:hover { opacity: 1; filter: brightness(1.18); }

.guide-button {
  position: absolute;
  z-index: 7;
  right: -3.8%;
  bottom: 29.9%;
  width: 4.9%;
  aspect-ratio: 1;
  border: 1px solid #ff8bcb99;
  border-radius: 50%;
  color: #fff8cb;
  background:
    radial-gradient(circle at 42% 28%, #ffffff, #ff42cf 22%, #41106f 58%, #10081e 75%);
  opacity: .86;
  cursor: pointer;
  box-shadow: inset 0 0 9px #fff4, 0 0 12px #ff37cf88, 0 0 18px #1feeff44;
  font: 1000 clamp(10px, 2.2vw, 22px)/1 "Palatino Linotype", Georgia, serif;
}
.guide-button:hover { opacity: 1; filter: brightness(1.18); }

@media (max-height: 780px) {
  .steampunk-radio.is-full {
    width: clamp(200px, 18vw, 280px);
  }
  .steampunk-radio.is-mini {
    width: clamp(120px, 11vw, 160px);
  }
}

@media (max-width: 900px) {
  .steampunk-radio.is-full {
    width: min(72vw, 290px);
  }
  .steampunk-radio.is-mini {
    width: min(36vw, 150px);
  }
}

.bailout-button {
  position: absolute;
  z-index: 7;
  right: 1.2%;
  bottom: 1.15%;
  min-width: 12%;
  padding: 1.15% 1.5%;
  border: 1px solid #ff8bcb99;
  border-radius: 999px;
  color: #fff1f8;
  background: #18091fcc;
  box-shadow: inset 0 0 10px #ff3fa755, 0 0 10px #000;
  font: 800 clamp(5px, 1.15vw, 11px)/1 Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  opacity: .82;
  display: none;
}
.cabinet.mode-free .bailout-button,
.cabinet.mode-hold .bailout-button { display: block; }
.bailout-button:hover { opacity: 1; filter: brightness(1.2); }
.bailout-button:active { transform: scale(.96); }

.bonus-overlay {
  position: fixed;
  z-index: 95;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vh, 32px);
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(35, 10, 62, 0.92) 0%, rgba(2, 1, 9, 0.98) 78%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .32s ease, visibility .32s;
  pointer-events: auto;
}
.bonus-overlay.show { visibility: visible; opacity: 1; }
.bonus-card {
  position: relative;
  width: min(92vw, 540px);
  max-height: min(90vh, 720px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: clamp(16px, 2.8vh, 32px) clamp(16px, 3vw, 36px);
  border: 1.5px solid #ff9cfb66;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 12%, rgba(138, 38, 220, 0.45) 0%, transparent 60%),
    linear-gradient(180deg, rgba(38, 10, 64, 0.96) 0%, rgba(10, 3, 22, 0.98) 100%);
  box-shadow:
    0 0 50px rgba(188, 44, 255, 0.35),
    0 16px 48px rgba(0, 0, 0, 0.92),
    inset 0 0 24px rgba(255, 150, 250, 0.2);
  text-shadow: 0 2px 5px #000, 0 0 18px #d83bff;
}
.bonus-card img, .bonus-video {
  width: auto;
  max-width: 84%;
  max-height: min(30vh, 230px);
  object-fit: contain;
  filter: drop-shadow(0 0 24px #f64cff);
  animation: bonusArt 1s ease-in-out infinite alternate;
  margin-bottom: 6px;
}
.bonus-video { margin-inline: auto; mix-blend-mode: screen; }
.bonus-card p {
  margin: 4px 0;
  font: 800 clamp(11px, 1.7vw, 17px)/1.25 Arial, sans-serif;
  letter-spacing: .12em;
  color: #fff0b3;
  text-shadow: 0 1px 3px #000;
}
.bonus-card h2 {
  margin: 6px 0;
  font: 900 clamp(22px, 3.6vw, 40px)/1.08 Arial Black, Impact, sans-serif;
  letter-spacing: .02em;
  color: #fff7ba;
  text-shadow: 0 2px 4px #000, 0 0 16px #ffbe3b;
}
@keyframes bonusArt { to { transform: scale(1.045); filter: drop-shadow(0 0 45px #48edff); } }

.settings-menu {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8%;
  visibility: hidden;
  opacity: 0;
  background: radial-gradient(circle, #18092eb5, #020109e8 72%);
  transition: opacity .22s ease, visibility .22s;
}
.settings-menu.show { visibility: visible; opacity: 1; }
.settings-card {
  width: min(72%, 330px);
  padding: 5%;
  border: 1px solid #56ecff99;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #220835e8, #07020fde),
    radial-gradient(circle at 50% 0, #ab2cff66, transparent 44%);
  color: #fff7c8;
  box-shadow: inset 0 0 18px #28e9ff33, 0 0 28px #000, 0 0 34px #b42cff55;
  font: 900 clamp(9px, 2.2cqw, 18px)/1 "Palatino Linotype", Georgia, serif;
  letter-spacing: .1em;
}
.settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8%;
  color: #fff2bd;
  text-shadow: 0 0 8px #ff38d2, 0 0 14px #2cefff;
}
.settings-heading button {
  width: 2.1em;
  aspect-ratio: 1;
  border: 1px solid #ff8bcb99;
  border-radius: 50%;
  color: #fff;
  background: #18091fcc;
  cursor: pointer;
}
.settings-card label {
  display: grid;
  gap: .45em;
  margin-top: 7%;
}
.settings-card input[type="range"] {
  width: 100%;
  accent-color: #ce39ff;
}

.guide-menu {
  position: absolute;
  z-index: 42;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  padding: 3% 3.5%;
  background: radial-gradient(circle at 50% 35%, #421064d8, #06020def 72%);
  transition: opacity .24s ease, visibility .24s;
}
.guide-menu.show { visibility: visible; opacity: 1; }

.guide-card {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 2.5%;
  border: 1px solid #6ff0ff99;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0, #c22cff44, transparent 34%),
    linear-gradient(180deg, #170620f4, #06020bf2);
  color: #fff5d6;
  box-shadow: inset 0 0 24px #30eaff33, 0 0 34px #000, 0 0 42px #bc2cff66;
  scrollbar-color: #ff4fdb #12041f;
}

.guide-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
  margin-bottom: 2%;
  text-shadow: 0 0 8px #ff36d3, 0 0 16px #28eaff;
}
.guide-heading span {
  display: block;
  color: #69efff;
  font: 1000 clamp(10px, 1.55vw, 18px)/1 Arial, sans-serif;
  letter-spacing: .18em;
}
.guide-heading strong {
  display: block;
  color: #fff1ae;
  font: 1000 clamp(34px, 6.1vw, 66px)/.86 "Palatino Linotype", Georgia, serif;
}
.guide-heading button {
  width: clamp(44px, 6vw, 68px);
  aspect-ratio: 1;
  border: 1px solid #ff9bd899;
  border-radius: 50%;
  color: white;
  background: #190822;
  cursor: pointer;
  box-shadow: inset 0 0 10px #ff3fc766;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(220px, 34%) 1fr;
  gap: 3%;
  align-items: center;
  margin-bottom: 2.4%;
}
.guide-hero p {
  margin: .3em 0;
  font: 900 clamp(16px, 2.25vw, 26px)/1.18 "Palatino Linotype", Georgia, serif;
  color: #fff4c5;
}

.guide-tour {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 5%;
  aspect-ratio: 5 / 4;
  padding: 7%;
  border: 1px solid #43eaff99;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, #6312a466, transparent 56%),
    linear-gradient(180deg, #090314, #190424);
  box-shadow: inset 0 0 20px #2cefff33, 0 0 18px #ff37cf55;
}
.guide-tour::after {
  content: "LINE " attr(data-line);
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  color: #fff1a6;
  font: 1000 clamp(13px, 2.1vw, 24px)/1 Arial, sans-serif;
  text-shadow: 0 0 8px #ff38d2, 0 0 14px #2cefff;
}
.guide-tour i,
.guide-line i {
  border-radius: 50%;
  background: #35214b;
  box-shadow: inset 0 0 4px #000;
}
.guide-tour i.active,
.guide-line i.active {
  background: radial-gradient(circle, #ffffff, #ffe96c 34%, #ff45ce 66%);
  box-shadow: 0 0 8px #fff, 0 0 16px #ff36d3, 0 0 22px #31eaff;
}

.guide-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.2%;
  margin-bottom: 2.4%;
}
.guide-feature {
  min-height: 96px;
  padding: 7%;
  border: 1px solid #ffe17a66;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a0d3bbb, #090312d9);
  box-shadow: inset 0 0 15px #ff3fc733;
}
.guide-feature strong {
  display: block;
  margin-bottom: .4em;
  color: #74f5ff;
  font: 1000 clamp(14px, 1.85vw, 22px)/1 Arial, sans-serif;
}
.guide-feature span {
  display: block;
  color: #fff3c4;
  font: 900 clamp(12px, 1.55vw, 19px)/1.18 Arial, sans-serif;
}

.guide-payline-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .7%;
  margin-bottom: 2.4%;
}
.guide-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8%;
  aspect-ratio: 5 / 4;
  padding: 12%;
  border: 1px solid #5beeff44;
  border-radius: 6px;
  background: #090313cc;
}
.guide-line.touring {
  border-color: #ffe77f;
  box-shadow: 0 0 14px #ff37cf88, inset 0 0 12px #ffe77f33;
}
.guide-line span {
  position: absolute;
  right: 5%;
  bottom: 2%;
  color: #75efff;
  font: 1000 clamp(8px, 1.2vw, 14px)/1 Arial, sans-serif;
}

.guide-symbols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4%;
}
.guide-symbol {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 116px;
  padding: 12px;
  border: 1px solid #7ff4ff55;
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 50%, #5b1f8f77, transparent 38%),
    linear-gradient(180deg, #16061fd9, #08020edc);
  box-shadow: inset 0 0 13px #2cefff24;
}
.guide-symbol.is-wild { border-color: #ffe67d99; box-shadow: inset 0 0 16px #ffe67d33, 0 0 12px #ff39c555; }
.guide-symbol.is-scatter { border-color: #ff79d799; }
.guide-symbol.is-coin { border-color: #5cf3ff99; }
.guide-symbol img {
  width: 92px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 8px #ff3bd8) drop-shadow(0 0 10px #2cefff);
}
.guide-symbol strong {
  display: block;
  color: #fff6c9;
  font: 1000 clamp(17px, 2vw, 25px)/1.02 "Palatino Linotype", Georgia, serif;
}
.guide-symbol span {
  display: block;
  margin-top: .45em;
  color: #6ef4ff;
  font: 1000 clamp(14px, 1.65vw, 21px)/1.1 Arial, sans-serif;
}

@media (max-width: 780px) {
  .guide-menu { padding: 3%; }
  .guide-hero { grid-template-columns: 1fr; }
  .guide-features { grid-template-columns: repeat(2, 1fr); }
  .guide-payline-map { grid-template-columns: repeat(5, 1fr); }
  .guide-symbols { grid-template-columns: repeat(2, 1fr); }
  .guide-symbol {
    grid-template-columns: 72px 1fr;
    min-height: 96px;
  }
  .guide-symbol img { width: 72px; }
}

.mode-hold .upper-display {
  background: radial-gradient(circle at 50% 45%, #78248a, #0b081d 60%, #020107);
}
.mode-hold .reels { background: radial-gradient(circle, #52135a, #080212 68%); }
.mode-hold .symbol-cell.empty::after {
  content: "♥";
  color: #e341cf33;
  font-size: clamp(20px, 6vw, 56px);
  text-shadow: 0 0 12px #a000ff;
}
.mode-hold .symbol-cell.coin img { width: 96%; height: 96%; animation: coinLock .35s cubic-bezier(.2,1.5,.4,1); }
.mode-hold.hold-rolling .symbol-cell.empty { animation: holdCellRoll .18s ease-in-out infinite alternate; }
.mode-hold .symbol-cell.hold-cycling {
  background: radial-gradient(circle, #b52bdb55 0, #23ecff22 42%, #04010911 74%);
  box-shadow: inset 0 0 20px #ff4fdb77, inset 0 0 36px #40eaff44;
}
.mode-hold .symbol-cell.hold-cycling img {
  width: 96%;
  height: 96%;
  opacity: .82;
  animation: holdSymbolCycle .18s linear infinite alternate;
}
.mode-hold .symbol-cell.hold-landed {
  animation: holdLand .32s cubic-bezier(.16,1.5,.22,1);
}
.mode-hold .symbol-cell.hold-empty-landed::after {
  animation: emptyResolve .28s ease-out;
}
@keyframes coinLock { from { transform: scale(.1) rotate(-70deg); filter: brightness(4); } to { transform: scale(1); } }
@keyframes holdCellRoll { to { background: #b52bdb44; box-shadow: inset 0 0 28px #ff4fdb99; } }
@keyframes holdSymbolCycle { to { transform: translateY(8%) scale(1.05); filter: blur(1.2px) brightness(1.45); } }
@keyframes holdLand {
  0% { transform: scale(.92); filter: brightness(2.2); }
  68% { transform: scale(1.08); }
  100% { transform: scale(1); filter: none; }
}
@keyframes emptyResolve {
  0% { transform: scale(.7); opacity: .1; filter: blur(2px); }
  100% { transform: scale(1); opacity: 1; filter: none; }
}

.hold-coin-fly {
  position: fixed;
  z-index: 10000;
  width: clamp(42px, 5vw, 86px);
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px #fff5b8) drop-shadow(0 0 18px #35eeff);
  animation: holdCoinFly .72s cubic-bezier(.18,.78,.2,1) forwards;
}

.hold-coin-tag {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 5px 8px;
  border: 1px solid #ffeebbbb;
  border-radius: 7px;
  background: #130520e8;
  color: #fff4bc;
  font: 900 clamp(10px, 1.4vw, 18px)/1 "Segoe Print", "Bradley Hand ITC", fantasy;
  text-shadow: 0 0 6px #ff3bd8, 0 0 12px #35eeff;
  box-shadow: 0 0 16px #000, inset 0 0 12px #6e2cff66;
  animation: holdCoinTag .76s ease-out forwards;
}

.hold-coin-finale {
  width: clamp(56px, 6.4vw, 112px);
  filter: drop-shadow(0 0 10px #fff7cc) drop-shadow(0 0 24px #ffb21f) drop-shadow(0 0 36px #ff3bd8);
  animation: holdCoinFinaleFly .56s cubic-bezier(.16,.84,.18,1) forwards;
}

.hold-coin-finale-tag {
  border-color: #fff3c8;
  background: linear-gradient(180deg, #3b0908ee, #18041fea);
  color: #fff8ce;
  text-shadow: 0 0 7px #ffce63, 0 0 14px #ff3b2f, 0 0 22px #ff3bd8;
  box-shadow: 0 0 18px #ff881bbb, inset 0 0 16px #ffcc5466;
  animation: holdCoinFinaleTag .58s ease-out forwards;
}

@keyframes holdCoinFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-24deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(10deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(.35) rotate(1.2turn); }
}

@keyframes holdCoinTag {
  0% { opacity: 0; transform: translate(-50%, -78%) scale(.82); }
  18% { opacity: 1; transform: translate(-50%, -118%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -172%) scale(.92); }
}

@keyframes holdCoinFinaleFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.38) rotate(-35deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.34) rotate(13deg); }
  42% { filter: drop-shadow(0 0 16px #fff8cf) drop-shadow(0 0 34px #ff8b1f) drop-shadow(0 0 48px #ff2fd0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(.42) rotate(1.45turn); }
}

@keyframes holdCoinFinaleTag {
  0% { opacity: 0; transform: translate(-50%, -74%) scale(.8); }
  20% { opacity: 1; transform: translate(-50%, -122%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(.95); }
}

.mascot-registration-layer {
  --mascot-scale: 1;
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: min(100vw, 177.7778vh);
  height: min(100vh, 56.25vw);
  pointer-events: none;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.mascot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  filter: saturate(1.05) drop-shadow(0 0 12px #06000b);
}

.mascot-canvas.show {
  opacity: 1;
  visibility: visible;
}

.mascot-canvas.anchor-left {
  transform: scale(var(--mascot-scale));
  transform-origin: left center;
}

.mascot-canvas.anchor-right {
  transform: scale(var(--mascot-scale));
  transform-origin: right center;
}

.mascot-nudge-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: saturate(1.04) drop-shadow(0 0 12px #06000b);
}

.mascot-nudge-image.show {
  opacity: 1;
  visibility: visible;
}

.mascot-nudge-image.anchor-left {
  transform: scale(var(--mascot-scale));
  transform-origin: left center;
}

.mascot-nudge-image.anchor-right {
  transform: scale(var(--mascot-scale));
  transform-origin: right center;
}

.reel.mascot-nudging {
  animation: reelSettle .52s cubic-bezier(.13,1.65,.25,1);
  z-index: 4;
}

.reel.mascot-nudging-strong {
  animation: reelStop .16s ease-out 0s 2, reelSettle .62s cubic-bezier(.13,1.65,.25,1);
  z-index: 4;
}

.mascot-source-video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-aspect-ratio: 9/16) {
  .stage { padding: 0; }
}

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