:root {
  color-scheme: dark;
  --gold: #d946ef;
  --gold-bright: #f0abfc;
  --amber: #a855f7;
  --black: #030303;
  --panel: #10100f;
  --celebration-accent: #d946ef;
  --celebration-hot: #f8e7ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(217, 70, 239, .18), transparent 28%),
    linear-gradient(135deg, #050505 0%, #111 38%, #050505 100%);
  color: #f8e7ff;
  font-family: Georgia, "Times New Roman", serif;
}

button {
  font: inherit;
}

.slot-page {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch center;
  padding: clamp(3px, .5vw, 8px);
  overflow: hidden;
}

.slot-shell {
  width: min(96vw, 1180px);
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(3px, .48vw, 8px);
  align-items: center;
  position: relative;
}

.slot-shell::before {
  content: "";
  position: absolute;
  z-index: 40;
  left: 16%;
  right: 16%;
  top: 19%;
  height: 52%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 171, 252, .78), rgba(217, 70, 239, .36) 22%, transparent 56%),
    repeating-conic-gradient(from 0deg, rgba(217, 70, 239, .5) 0deg 8deg, transparent 8deg 20deg);
  mix-blend-mode: screen;
  filter: blur(1px) drop-shadow(0 0 28px rgba(217, 70, 239, .74));
  transform: scale(.76);
}

.win-celebration::before {
  animation: winBurst 1.45s ease-out both;
}

.jackpot-celebration::before {
  animation: jackpotBurst 2.3s ease-out both;
}

.slot-bailout {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 120;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 0.95rem;
  border: 1px solid rgba(240, 171, 252, 0.74);
  border-radius: 8px;
  color: #f8e7ff;
  background:
    linear-gradient(180deg, rgba(68, 24, 92, 0.92), rgba(16, 10, 20, 0.9)),
    radial-gradient(circle at 50% 0, rgba(240, 171, 252, 0.28), transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(248, 231, 255, 0.42),
    0 0 22px rgba(217, 70, 239, 0.28);
  font: 900 clamp(10px, 0.86vw, 14px) Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.74;
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.slot-bailout:hover,
.slot-bailout:focus-visible {
  opacity: 1;
  outline: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(248, 231, 255, 0.62),
    0 0 34px rgba(217, 70, 239, 0.52);
}

.time-win-celebration {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  overflow: hidden;
}

.time-win-celebration::before,
.time-win-celebration::after {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  animation: timeRewardFlash var(--flash-duration, 3200ms) ease-out both;
}

.time-win-celebration::before {
  background: radial-gradient(circle, rgba(248, 231, 255, 0.74), rgba(217, 70, 239, 0.28) 24%, transparent 62%);
}

.time-win-celebration::after {
  inset: 4% -10%;
  background:
    conic-gradient(from 0deg, transparent, rgba(217, 70, 239, 0.68), rgba(232, 121, 249, 0.42), transparent 42%),
    radial-gradient(circle at 50% 48%, transparent 28%, rgba(255, 255, 255, 0.18), transparent 38%);
  animation-name: timeRewardHalo;
}

.time-win-celebration.is-jackpot {
  --flash-duration: 5000ms;
}

.time-win-headline {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 2;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(240, 171, 252, 0.72);
  border-radius: 8px;
  color: #f8e7ff;
  background: rgba(12, 4, 20, 0.76);
  box-shadow: 0 0 44px rgba(217, 70, 239, 0.48);
  font: 900 clamp(1.15rem, 3vw, 3.4rem) Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(240, 171, 252, 0.9), 0 3px 0 #000;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: timeRewardHeadline 2100ms ease-out both;
}

.time-win-celebration.is-jackpot .time-win-headline {
  top: 14%;
  animation-duration: 3200ms;
}

.time-dollar,
.time-confetti,
.time-spark {
  position: absolute;
  left: var(--x);
  top: -8vh;
  display: grid;
  place-items: center;
  animation: timeRewardRain var(--duration) linear var(--delay) both;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.time-dollar {
  width: clamp(54px, 6vw, 92px);
  height: clamp(24px, 2.8vw, 40px);
  border: 1px solid rgba(240, 171, 252, 0.9);
  border-radius: 6px;
  color: #1a0820;
  background:
    linear-gradient(135deg, #f8e7ff, #d946ef 48%, #6d28d9),
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.76), transparent 22%);
  box-shadow: 0 0 22px rgba(217, 70, 239, 0.48);
  font: 900 clamp(8px, 0.78vw, 12px) Georgia, "Times New Roman", serif;
}

.time-confetti {
  width: clamp(10px, 1.2vw, 18px);
  height: clamp(20px, 2.4vw, 34px);
  border-radius: 3px;
  background: linear-gradient(180deg, #f0abfc, #e879f9 52%, #67e8f9);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.52);
}

.time-spark {
  min-width: clamp(44px, 5vw, 76px);
  min-height: clamp(44px, 5vw, 76px);
  color: #f8e7ff;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(217, 70, 239, 0.44) 22%, transparent 64%);
  font: 900 clamp(10px, 1vw, 15px) Georgia, "Times New Roman", serif;
  text-shadow: 0 0 12px rgba(240, 171, 252, 0.9);
}

.celebration-atmosphere,
.celebration-atmosphere span {
  position: absolute;
  pointer-events: none;
}

.celebration-atmosphere {
  inset: 0;
  overflow: hidden;
}

.celebration-firework {
  left: var(--x);
  top: 62%;
  width: clamp(90px, 14vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background:
    repeating-conic-gradient(from 4deg, transparent 0 6deg, var(--celebration-hot) 7deg 8deg, transparent 9deg 18deg),
    radial-gradient(circle, #fff 0 2%, var(--celebration-accent) 3% 6%, transparent 7% 100%);
  filter: drop-shadow(0 0 8px var(--celebration-accent)) drop-shadow(0 0 26px var(--celebration-accent));
  transform: translate(-50%, -50%) scale(.08);
  animation: celebrationFirework 2.9s cubic-bezier(.18,.72,.2,1) var(--delay) both;
}

.celebration-smoke {
  left: var(--x);
  bottom: -16vh;
  width: clamp(130px, 18vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 32% 35%, rgba(255,255,255,.2), transparent 34%),
    radial-gradient(circle at 63% 45%, color-mix(in srgb, var(--celebration-accent) 38%, transparent), transparent 48%),
    radial-gradient(circle, rgba(38,26,42,.72), transparent 68%);
  filter: blur(10px);
  transform: translateX(-50%) scale(var(--scale));
  animation: celebrationSmoke 5.8s ease-out var(--delay) both;
}

.celebration-note {
  left: var(--x);
  bottom: -8vh;
  color: var(--celebration-hot);
  font: 900 clamp(2rem, 5vw, 5.5rem) Georgia, serif;
  text-shadow: 0 0 12px #fff, 0 0 32px var(--celebration-accent);
  opacity: 0;
  animation: celebrationNote 4.4s ease-out var(--delay) both;
}

.celebration-clock {
  left: var(--x);
  bottom: -12vh;
  width: clamp(54px, 7vw, 110px);
  aspect-ratio: 1;
  border: clamp(3px, .35vw, 6px) solid var(--celebration-hot);
  border-radius: 50%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 48%, var(--celebration-accent) 49% 51%, transparent 52%),
    linear-gradient(20deg, transparent 48%, var(--celebration-hot) 49% 51%, transparent 52%),
    radial-gradient(circle, #fff 0 4%, #2b0711 5% 12%, rgba(20,4,8,.88) 13% 100%);
  box-shadow: inset 0 0 18px var(--celebration-accent), 0 0 26px var(--celebration-accent);
  transform: translateX(-50%) scale(var(--scale));
  animation: celebrationClock 4.8s cubic-bezier(.16,.72,.28,1) var(--delay) both;
}

.cabinet {
  position: relative;
  aspect-ratio: 3 / 2;
  width: min(100%, calc((100vh - 250px) * 1.5));
  max-height: calc(100vh - 250px);
  justify-self: center;
  min-height: 0;
  isolation: isolate;
  filter: drop-shadow(0 24px 45px rgba(0, 0, 0, .75));
}

.cabinet-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../../assets/frame/kot-slot-clean.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.brand-mark {
  position: absolute;
  z-index: 6;
  left: 18.4%;
  top: 10.8%;
  width: 63.2%;
  text-align: center;
  color: var(--gold-bright);
  text-shadow: 0 0 10px #000, 0 0 18px rgba(217, 70, 239, .82);
  pointer-events: none;
}

.brand-777 {
  display: none;
}

.brand-kot {
  margin-top: 0;
  font-size: clamp(24px, 3.25vw, 56px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: .045em;
  color: var(--gold-bright);
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(50, 18, 76, .78);
  text-shadow:
    0 1px 0 #f8e7ff,
    0 2px 0 #4c1d95,
    0 4px 8px rgba(0, 0, 0, .95),
    0 0 16px rgba(217, 70, 239, .72);
}

.brand-kot::before {
  content: none;
}

.brand-kot strong {
  display: none;
}

.credit {
  position: relative;
  z-index: 4;
  padding: .34rem .58rem;
  border: 2px solid rgba(240, 171, 252, .78);
  background: linear-gradient(180deg, rgba(24, 12, 34, .95), rgba(0, 0, 0, .95));
  box-shadow: inset 0 0 14px rgba(217, 70, 239, .28), 0 0 14px rgba(168, 85, 247, .24);
  text-align: center;
}

.label {
  display: block;
  margin-bottom: .12rem;
  color: var(--gold);
  font-size: clamp(8px, .76vw, 12px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(248, 231, 255, .8),
    0 2px 0 rgba(50, 18, 76, .92),
    0 0 9px rgba(217, 70, 239, .5);
}

.credit strong,
.bet-meter strong {
  display: block;
  color: #f8e7ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.35vw, 22px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .04em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .75),
    0 2px 0 rgba(50, 18, 76, .95),
    0 0 12px rgba(217, 70, 239, .5);
}

.credit-balance {
  width: 100%;
}

.reel-stage {
  position: absolute;
  z-index: 5;
  left: 17.55%;
  top: 23.8%;
  width: 64.9%;
  height: 45.1%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.8%;
  padding: 0;
  background: transparent;
  border-radius: clamp(12px, 1.2vw, 18px);
  box-shadow: none;
}

.payline {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(240, 171, 252, .95), transparent);
  box-shadow: 0 0 10px rgba(217, 70, 239, .82);
  pointer-events: none;
}

.reel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100%;
  border: 0;
  border-radius: clamp(8px, 1vw, 14px);
  background: transparent;
  box-shadow:
    inset 0 24px 34px rgba(0, 0, 0, .58),
    inset 0 -28px 36px rgba(0, 0, 0, .72);
  contain: paint;
}

.reel::before,
.reel::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  height: 33.333%;
  pointer-events: none;
}

.reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .36), transparent);
}

.reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .36), transparent);
}

.reel-track {
  width: 100%;
  height: auto;
  will-change: transform;
}

.symbol-row {
  display: grid;
  place-items: center;
  padding: 6% 6% 8%;
  background: transparent;
  overflow: hidden;
}

.symbol-row img {
  display: block;
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .62));
}

.symbol-row[data-symbol="timber_nutt_motorcycle_pose"] img,
.symbol-row[data-symbol="kot_mascots_summer"] img {
  max-width: 66%;
  max-height: 64%;
}

.symbol-row-blank::after {
  content: "";
  display: none;
}

.reel.is-settling {
  animation: reelSettle .26s ease-out;
}

.handle {
  position: absolute;
  z-index: 7;
  right: .1%;
  top: 23.8%;
  width: 9.6%;
  height: 50.6%;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 82%;
}

.handle:disabled {
  cursor: not-allowed;
}

.handle-knob,
.handle-stem,
.handle-base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 34% 22%, #f8e7ff 0 8%, var(--gold-bright) 16%, #a855f7 54%, #31104a 100%);
  box-shadow: inset -9px -10px 18px rgba(0, 0, 0, .42), 0 0 22px rgba(255, 184, 27, .56);
}

.handle-knob {
  display: block;
  top: 0;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.handle-stem {
  display: block;
  top: 14%;
  width: 22%;
  height: 72%;
  border-radius: 999px;
}

.handle-base {
  bottom: 0;
  width: 94%;
  height: 27%;
  border-radius: 999px;
}

.handle-pulled .handle {
  animation: handlePull .52s cubic-bezier(.28, .9, .18, 1);
}

.control-row {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.18fr 1fr .9fr;
  gap: clamp(5px, .7vw, 12px);
  align-items: center;
}

.panel-button,
.spin-button,
.bet-meter {
  min-height: clamp(34px, 4.05vw, 62px);
  border: 2px solid rgba(240, 171, 252, .86);
  border-radius: 5px;
  color: var(--gold-bright);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 18% 72%, rgba(0, 0, 0, .34)),
    linear-gradient(180deg, rgba(240, 171, 252, .18), transparent 26%),
    linear-gradient(180deg, #22142b, #070707 62%, #17091f);
  box-shadow:
    inset 0 1px 0 rgba(248, 231, 255, .42),
    inset 0 2px 8px rgba(255, 255, 255, .1),
    inset 0 -8px 18px rgba(0, 0, 0, .55),
    inset 0 0 16px rgba(217, 70, 239, .24),
    0 7px 0 rgba(34, 10, 52, .96),
    0 10px 15px rgba(0, 0, 0, .52),
    0 0 12px rgba(217, 70, 239, .26);
  text-align: center;
}

.panel-button,
.spin-button {
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(248, 231, 255, .85),
    0 2px 0 rgba(50, 18, 76, .95),
    0 4px 8px rgba(0, 0, 0, .9),
    0 0 12px rgba(217, 70, 239, .55);
  clip-path: polygon(7% 0, 93% 0, 100% 18%, 100% 82%, 93% 100%, 7% 100%, 0 82%, 0 18%);
  transform: perspective(400px) rotateX(2deg) translateY(0);
  transform-origin: center bottom;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.panel-button {
  padding: .24rem .38rem;
  font-size: clamp(9px, .84vw, 15px);
  line-height: 1.05;
}

.spin-button {
  min-height: clamp(46px, 5.2vw, 78px);
  border-radius: 50%;
  clip-path: none;
  font-size: clamp(16px, 1.68vw, 30px);
  background:
    radial-gradient(circle at 42% 37%, rgba(248, 231, 255, .2), transparent 18%),
    radial-gradient(circle at 35% 25%, #f8e7ff 0 6%, #d946ef 18%, #17101f 58%, #030303 100%);
}

.panel-button:hover:not(:disabled),
.spin-button:hover:not(:disabled),
.handle:hover:not(:disabled) {
  filter: brightness(1.18) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(248, 231, 255, .56),
    inset 0 2px 10px rgba(255, 255, 255, .14),
    inset 0 -8px 18px rgba(0, 0, 0, .55),
    inset 0 0 18px rgba(217, 70, 239, .32),
    0 9px 0 rgba(34, 10, 52, .96),
    0 13px 18px rgba(0, 0, 0, .58),
    0 0 24px rgba(217, 70, 239, .44);
}

.panel-button:hover:not(:disabled),
.spin-button:hover:not(:disabled) {
  transform: perspective(400px) rotateX(7deg) translateY(-3px) scale(1.025);
}

.panel-button:active:not(:disabled),
.spin-button:active:not(:disabled) {
  transform: perspective(400px) rotateX(0) translateY(5px) scale(.985);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.7),
    inset 0 0 18px rgba(217,70,239,.28),
    0 2px 0 rgba(34,10,52,.96),
    0 4px 8px rgba(0,0,0,.5);
}

button:disabled {
  opacity: .58;
}

.bet-meter {
  display: grid;
  place-items: center;
  padding: .18rem;
}

.bet-meter .label {
  font-size: clamp(7px, .7vw, 12px);
}

.bet-meter strong {
  font-size: clamp(14px, 1.52vw, 24px);
}

.status {
  position: absolute;
  z-index: 7;
  left: 40.4%;
  right: 40.4%;
  bottom: 16.2%;
  margin: 0;
  color: var(--gold-bright);
  font-size: clamp(8px, .94vw, 15px);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 14px rgba(217, 70, 239, .74), 0 2px 3px #000;
}

.disclaimer {
  position: absolute;
  z-index: 7;
  left: 19.8%;
  bottom: 11.3%;
  max-width: 17.2%;
  margin: 0;
  color: rgba(248, 231, 255, .74);
  font: 700 clamp(10px, .85vw, 14px) "Trebuchet MS", Arial, sans-serif;
}

.control-deck {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: clamp(4px, .55vw, 9px);
  border: 1px solid rgba(240, 171, 252, .72);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 18% 70%, rgba(0, 0, 0, .32)),
    linear-gradient(180deg, rgba(24, 14, 32, .95), rgba(2, 2, 2, .96)),
    #070707;
  box-shadow: 0 0 22px rgba(217, 70, 239, .28), inset 0 1px 0 rgba(248, 231, 255, .18), inset 0 0 22px rgba(217, 70, 239, .16);
}

.meter-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  gap: clamp(6px, .8vw, 12px);
  margin-bottom: clamp(5px, .7vw, 12px);
}

.menu-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: clamp(5px, .7vw, 12px);
  margin-bottom: clamp(5px, .62vw, 10px);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .68);
}

.modal-backdrop[hidden] {
  display: none;
}

.slot-modal {
  position: relative;
  width: min(76%, 780px);
  max-height: 76%;
  overflow: auto;
  padding: clamp(16px, 2vw, 28px);
  border: 2px solid rgba(240, 171, 252, .9);
  background: linear-gradient(180deg, rgba(24, 14, 32, .98), rgba(2, 2, 2, .98));
  box-shadow: 0 0 30px rgba(217, 70, 239, .34), inset 0 0 18px rgba(217, 70, 239, .2);
  color: #f8e7ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.slot-modal h2 {
  margin: 0 0 .8rem;
  color: var(--gold-bright);
  font: 900 clamp(20px, 2vw, 32px) Georgia, "Times New Roman", serif;
}

.modal-content {
  display: grid;
  gap: .65rem;
  font-size: clamp(12px, 1vw, 16px);
}

.modal-content table {
  width: 100%;
  border-collapse: collapse;
}

.modal-content th,
.modal-content td {
  padding: .4rem .5rem;
  border-bottom: 1px solid rgba(240, 171, 252, .3);
  text-align: left;
}

.modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(240, 171, 252, .62);
  color: var(--gold-bright);
  background: #080808;
  cursor: pointer;
}

.is-spinning .payline {
  animation: paylinePulse .35s linear infinite alternate;
}

.needs-credits .credit-balance {
  animation: creditAlert .6s ease-in-out;
}

.win-celebration .cabinet {
  animation: cabinetWinKick .52s ease-out;
}

.jackpot-celebration .cabinet {
  animation: cabinetJackpotKick .9s ease-out;
}

.win-celebration .payline,
.jackpot-celebration .payline {
  height: 5px;
  animation: paylineWinFlash 1.2s ease-out both;
}

.win-celebration .status,
.jackpot-celebration .status {
  animation: statusWinPop 1.2s ease-out both;
}

@keyframes reelSettle {
  0% { transform: translateY(0); }
  42% { transform: translateY(9px); }
  72% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes handlePull {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(14deg) translateY(6%); }
  100% { transform: rotate(0deg); }
}

@keyframes paylinePulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

@keyframes creditAlert {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 30px rgba(255, 63, 38, .8); }
}

@keyframes winBurst {
  0% { opacity: 0; transform: scale(.72) rotate(0deg); }
  18% { opacity: .9; transform: scale(1.02) rotate(8deg); }
  72% { opacity: .48; transform: scale(1.18) rotate(28deg); }
  100% { opacity: 0; transform: scale(1.34) rotate(38deg); }
}

@keyframes jackpotBurst {
  0% { opacity: 0; transform: scale(.62) rotate(0deg); filter: blur(0) drop-shadow(0 0 20px rgba(217, 70, 239, .58)); }
  12% { opacity: 1; transform: scale(1.02) rotate(10deg); }
  36% { opacity: .9; transform: scale(1.2) rotate(46deg); filter: blur(1px) drop-shadow(0 0 46px rgba(240, 171, 252, .92)); }
  70% { opacity: .62; transform: scale(1.42) rotate(98deg); }
  100% { opacity: 0; transform: scale(1.7) rotate(138deg); }
}

@keyframes cabinetWinKick {
  0%, 100% { transform: translateX(0); filter: drop-shadow(0 24px 45px rgba(0, 0, 0, .75)); }
  20% { transform: translateX(-3px); filter: drop-shadow(0 24px 55px rgba(217, 70, 239, .46)); }
  42% { transform: translateX(4px); }
  64% { transform: translateX(-2px); }
}

@keyframes cabinetJackpotKick {
  0%, 100% { transform: translateX(0) scale(1); filter: drop-shadow(0 24px 45px rgba(0, 0, 0, .75)); }
  18% { transform: translateX(-5px) scale(1.008); filter: drop-shadow(0 24px 72px rgba(217, 70, 239, .74)); }
  36% { transform: translateX(6px) scale(1.012); }
  56% { transform: translateX(-4px) scale(1.006); }
  76% { transform: translateX(2px) scale(1); }
}

@keyframes paylineWinFlash {
  0% { opacity: .65; box-shadow: 0 0 10px rgba(240, 171, 252, .82); }
  24% { opacity: 1; box-shadow: 0 0 18px rgba(248, 231, 255, 1), 0 0 46px rgba(217, 70, 239, .92); }
  100% { opacity: .72; box-shadow: 0 0 10px rgba(240, 171, 252, .82); }
}

@keyframes statusWinPop {
  0% { transform: scale(.94); }
  20% { transform: scale(1.12); color: #f8e7ff; text-shadow: 0 0 22px rgba(240, 171, 252, 1), 0 2px 3px #000; }
  100% { transform: scale(1); }
}

@keyframes timeRewardFlash {
  0% { opacity: 0; transform: scale(0.6); filter: blur(0); }
  14% { opacity: 0.98; transform: scale(0.98); }
  54% { opacity: 0.42; transform: scale(1.28); filter: blur(1px); }
  100% { opacity: 0; transform: scale(1.62); filter: blur(4px); }
}

@keyframes timeRewardHalo {
  0% { opacity: 0; transform: scale(0.72) rotate(0deg); }
  18% { opacity: 0.84; transform: scale(1) rotate(26deg); }
  68% { opacity: 0.38; transform: scale(1.18) rotate(190deg); }
  100% { opacity: 0; transform: scale(1.36) rotate(280deg); }
}

@keyframes timeRewardHeadline {
  0% { opacity: 0; transform: translateX(-50%) translateY(26px) scale(0.72); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  68% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scale(0.94); }
}

@keyframes timeRewardRain {
  0% {
    opacity: 0;
    transform: translate3d(0, -10vh, 0) rotate(0deg) scale(0.78);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 118vh, 0) rotate(var(--spin)) scale(1);
  }
}

@keyframes celebrationFirework {
  0% { opacity: 0; transform: translate(-50%, 42vh) scale(.04) rotate(0deg); }
  34% { opacity: .9; transform: translate(-50%, -50%) scale(.08) rotate(28deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(var(--scale)) rotate(58deg); }
  78% { opacity: .78; transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.2)) rotate(96deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.42)) rotate(132deg); filter: blur(2px); }
}

@keyframes celebrationSmoke {
  0% { opacity: 0; transform: translate(-50%, 8vh) scale(calc(var(--scale) * .55)); }
  18% { opacity: .68; }
  100% { opacity: 0; transform: translate(-50%, -108vh) scale(calc(var(--scale) * 1.9)) rotate(24deg); }
}

@keyframes celebrationNote {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(-12deg) scale(.5); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -112vh) rotate(32deg) scale(var(--scale)); }
}

@keyframes celebrationClock {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(-160deg) scale(.36); }
  18% { opacity: .96; }
  100% { opacity: 0; transform: translate(-50%, -112vh) rotate(380deg) scale(calc(var(--scale) * 1.22)); }
}

@media (max-width: 800px) {
  .slot-page {
    padding: 3px;
  }

  .slot-shell {
    width: min(96vw, 780px);
  }

  .cabinet {
    aspect-ratio: 3 / 2;
    width: min(100%, calc((100vh - 300px) * 1.5));
    max-height: calc(100vh - 300px);
    min-height: auto;
  }

  .brand-mark {
    left: 18.4%;
    top: 10.7%;
    width: 63.2%;
  }

  .brand-kot {
    font-size: clamp(19px, 5.4vw, 36px);
  }

  .credit {
    min-width: 0;
    padding: .18rem .32rem;
  }

  .reel-stage {
    left: 17.55%;
    top: 23.8%;
    width: 64.9%;
    height: 45.1%;
    gap: 5.8%;
  }

  .handle {
    right: .1%;
    top: 23.8%;
    width: 9.6%;
    height: 50.6%;
  }

  .spin-button {
    grid-column: auto;
    grid-row: auto;
    min-height: clamp(38px, 7.8vw, 60px);
  }

  .bet-meter {
    grid-column: auto;
    grid-row: auto;
  }

  .panel-button {
    min-height: clamp(31px, 5.9vw, 46px);
    font-size: clamp(7px, 1.55vw, 12px);
  }

  .status {
    left: 40.4%;
    right: 40.4%;
    bottom: 15.7%;
    font-size: clamp(8px, 2vw, 13px);
  }

  .disclaimer {
    left: 19.8%;
    right: auto;
    bottom: 11.3%;
    max-width: 17.2%;
    text-align: center;
  }
}

.slot-route-nav {
  width: min(94vw, 1320px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem 1rem;
  margin: .2rem auto 0;
  color: #fff6cb;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(.58rem, .68vw, .7rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  grid-row: 2;
}

.slot-route-title {
  color: rgba(255, 246, 203, .66);
  white-space: nowrap;
}

.slot-route-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(.28rem, .6vw, .5rem);
}

.slot-route-actions a {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: .34rem clamp(.45rem, .8vw, .72rem);
  border: 2px solid rgba(240, 171, 252, .52);
  border-radius: 3px;
  color: #ffe38a;
  background: linear-gradient(180deg, rgba(67, 24, 89, .78), rgba(10, 6, 14, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -7px 12px rgba(0,0,0,.38), 0 5px 0 #210b2e, 0 8px 12px rgba(0,0,0,.48), 0 0 10px rgba(217, 70, 239, .12);
  clip-path: polygon(8% 0, 92% 0, 100% 26%, 100% 74%, 92% 100%, 8% 100%, 0 74%, 0 26%);
  text-decoration: none;
  white-space: nowrap;
  transform: perspective(320px) rotateX(3deg);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

.slot-route-actions a:hover,
.slot-route-actions a:focus-visible {
  color: #fff;
  border-color: rgba(240, 171, 252, .9);
  outline: none;
  filter: brightness(1.2) saturate(1.18);
  transform: perspective(320px) rotateX(8deg) translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -7px 12px rgba(0,0,0,.3), 0 7px 0 #210b2e, 0 11px 14px rgba(0,0,0,.52), 0 0 22px rgba(217, 70, 239, .42);
}

.slot-route-actions a:active {
  transform: translateY(4px) scale(.98);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.62), 0 1px 0 #210b2e, 0 3px 6px rgba(0,0,0,.44);
}

.slot-theme-symphony {
  --gold: #22d3ee;
  --gold-bright: #f8fafc;
  --amber: #f59e0b;
  --celebration-accent: #22d3ee;
  --celebration-hot: #fef3c7;
  background:
    radial-gradient(circle at 50% 10%, rgba(34, 211, 238, .2), transparent 30%),
    linear-gradient(135deg, #020617 0%, #10233c 46%, #020617 100%);
}

.slot-theme-symphony .cabinet-art {
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, .06), rgba(8, 47, 73, .34)),
    url("../../../assets/images/slot-room/jackpot-symphony-strategy.png"),
    url("../../assets/frame/kot-slot-clean.png");
  background-position: center, 9% 12%, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 16% auto, 100% 100%;
}

.slot-theme-symphony {
  --gold: #f7c94b;
  --gold-bright: #fff1a8;
  --celebration-accent: #f7c94b;
  --celebration-hot: #fff7cf;
  background: radial-gradient(circle at 50% 8%, rgba(247,201,75,.18), transparent 30%), #030303;
}

.slot-theme-symphony .brand-kot {
  color: #cffafe;
  text-shadow: 0 1px 0 #fff, 0 3px 0 #164e63, 0 0 18px rgba(34, 211, 238, .88);
}

.slot-theme-symphony .symbol-row img {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .62)) hue-rotate(24deg) saturate(1.12);
}

.slot-theme-symphony .slot-route-actions a {
  border-color: rgba(34, 211, 238, .58);
  color: #cffafe;
  background: linear-gradient(180deg, rgba(8, 47, 73, .9), rgba(2, 6, 23, .94));
}

.slot-theme-symphony .panel-button,
.slot-theme-symphony .spin-button,
.slot-theme-symphony .bet-meter,
.slot-theme-symphony .credit {
  border-color: rgba(103, 232, 249, .88);
  color: #cffafe;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 20% 72%, rgba(0,0,0,.36)),
    linear-gradient(180deg, rgba(34,211,238,.18), transparent 28%),
    linear-gradient(180deg, #14334b, #020617 68%, #071b2c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -9px 18px rgba(0,0,0,.62), inset 0 0 18px rgba(34,211,238,.24), 0 7px 0 #06263a, 0 10px 15px rgba(0,0,0,.5), 0 0 16px rgba(34,211,238,.28);
}

.slot-theme-time {
  --gold: #fb7185;
  --gold-bright: #ffe4e6;
  --amber: #f97316;
  --celebration-accent: #fb7185;
  --celebration-hot: #ffe4e6;
  background:
    radial-gradient(circle at 50% 10%, rgba(251, 113, 133, .2), transparent 30%),
    linear-gradient(135deg, #18070c 0%, #3a171d 46%, #080304 100%);
}

.slot-theme-time .cabinet-art {
  background-image:
    linear-gradient(180deg, rgba(69, 10, 10, .04), rgba(76, 5, 25, .34)),
    url("../../../assets/images/kot-art/time-is-the-win-store.jpg"),
    url("../../assets/frame/kot-slot-clean.png");
  background-position: center, 9% 12%, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 16% auto, 100% 100%;
}

.slot-theme-time {
  --gold: #bc78ff;
  --gold-bright: #f0d8ff;
  --celebration-accent: #a855f7;
  --celebration-hot: #f3e8ff;
  background: radial-gradient(circle at 50% 8%, rgba(168,85,247,.2), transparent 30%), #030104;
}

.slot-theme-time .brand-kot {
  color: #ffe4e6;
  text-shadow: 0 1px 0 #fff, 0 3px 0 #881337, 0 0 18px rgba(251, 113, 133, .9);
}

.slot-theme-time .symbol-row img {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .62)) hue-rotate(-32deg) saturate(1.18);
}

.slot-theme-time .slot-route-actions a {
  border-color: rgba(251, 113, 133, .62);
  color: #ffe4e6;
  background: linear-gradient(180deg, rgba(76, 5, 25, .9), rgba(15, 3, 7, .94));
}

.slot-theme-time .panel-button,
.slot-theme-time .spin-button,
.slot-theme-time .bet-meter,
.slot-theme-time .credit {
  border-color: rgba(253, 164, 175, .88);
  color: #ffe4e6;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 20% 72%, rgba(0,0,0,.38)),
    linear-gradient(180deg, rgba(251,113,133,.2), transparent 28%),
    linear-gradient(180deg, #4a1823, #100306 68%, #2b0810);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -9px 18px rgba(0,0,0,.62), inset 0 0 18px rgba(251,113,133,.24), 0 7px 0 #3a0812, 0 10px 15px rgba(0,0,0,.5), 0 0 16px rgba(251,113,133,.28);
}

/* Custom V60 faces and compact illuminated controls. Slot 1 is intentionally untouched. */
.slot-theme-symphony .cabinet-art {
  background-image: url("../../../assets/images/slot-custom/slot-2-gold-face.png");
  background-position: center;
  background-size: 100% 100%;
}

.slot-theme-time .cabinet-art {
  background-image: url("../../../assets/images/slot-custom/slot-3-five-reel-face.png");
  background-position: center;
  background-size: 100% 100%;
}

.slot-theme-symphony .brand-mark,
.slot-theme-time .brand-mark { display: none; }

.slot-theme-time .reel-stage {
  left: 8.4%;
  top: 25.3%;
  width: 79.1%;
  height: 44.2%;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.35%;
}

.forest-symbol {
  display: block;
  width: 88%;
  height: 88%;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.75));
}

.slot-theme-symphony .panel-button,
.slot-theme-time .panel-button {
  position: relative;
  width: min(100%, 8.5rem);
  min-height: clamp(34px, 3.4vw, 50px);
  justify-self: center;
  overflow: hidden;
  border-radius: 0;
  background-image:
    linear-gradient(180deg, rgba(12,8,18,.28), rgba(3,2,5,.78)),
    url("../../../assets/images/slot-custom/custom-button-atlas.png");
  background-size: 100% 100%, 340% 340%;
  background-position: center, 10% 88%;
}

.slot-theme-symphony .panel-button::before,
.slot-theme-time .panel-button::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 0 5px currentColor, 0 0 12px currentColor;
  animation: cabinetLed 1.35s ease-in-out infinite alternate;
}

.slot-theme-symphony .spin-button,
.slot-theme-time .spin-button {
  min-width: 4.8rem;
  max-width: 6.8rem;
  justify-self: center;
  box-shadow: inset 0 0 16px rgba(255,255,255,.22), 0 0 12px currentColor, 0 7px 0 rgba(0,0,0,.85);
  animation: cabinetLed 1.15s ease-in-out infinite alternate;
}

@keyframes cabinetLed {
  from { filter: brightness(.78); }
  to { filter: brightness(1.35) drop-shadow(0 0 7px currentColor); }
}

@media (max-width: 720px) {
  .slot-route-nav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .3rem;
  }

  .slot-route-actions {
    justify-content: center;
  }
}