:root {
  color-scheme: light;
  --ink: #10131a;
  --muted: #525e70;
  --paper: #fffdf5;
  --line: #c8cbd1;
  --accent: #ff2d24;
  --accent-2: #00b7a8;
  --accent-3: #ffd447;
  --chrome: #d8dde4;
  --deep: #090c13;
  --shadow: 0 34px 80px rgba(8, 12, 19, .32);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(238, 244, 248, .2), rgba(238, 244, 248, .2)),
    url("assets/metal-pachinko-bg.png") center / cover fixed no-repeat,
    radial-gradient(circle at 22% 8%, rgba(255, 247, 177, .9), transparent 18%),
    radial-gradient(circle at 84% 12%, rgba(0, 183, 168, .28), transparent 24%),
    repeating-radial-gradient(circle at 0 0, rgba(0, 0, 0, .28) 0 2px, transparent 3px 12px),
    linear-gradient(135deg, #f3f5f7 0%, #c8ced8 42%, #f9faf7 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, .52) 42%, transparent 49% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, rgba(55, 62, 74, .08) 1px 3px);
  mix-blend-mode: screen;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1;
  background:
    conic-gradient(from 90deg at 50% 48%, rgba(255, 41, 41, .24), rgba(255, 212, 71, .2), rgba(0, 220, 180, .18), rgba(55, 120, 255, .16), rgba(255, 41, 41, .24));
  filter: blur(34px);
  opacity: .46;
  animation: ambientSpin 18s linear infinite;
  pointer-events: none;
}

body.jackpot::after {
  opacity: .95;
  animation-duration: 1.4s;
}

.celebration {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .96), transparent 8%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 235, 59, .7) 0 5deg, rgba(255, 38, 38, .42) 5deg 10deg, transparent 10deg 18deg);
  transform: scale(.4);
}

body.jackpot .celebration {
  animation: blissBurst 1150ms ease-out forwards;
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px 28px 28px;
}

.stage {
  width: min(1240px, 100%);
}

.topbar {
  display: none;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: #007c76;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 70px);
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, .86),
    0 10px 26px rgba(0, 0, 0, .18);
}

.counter {
  min-width: 116px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .96), transparent 42%),
    linear-gradient(145deg, #f9fbff, #bfc6cf);
  box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px rgba(56, 65, 78, .18), 0 16px 36px rgba(0, 0, 0, .16);
  text-align: right;
}

.counter span {
  display: block;
  font-size: 32px;
  font-weight: 900;
}

.counter small {
  color: var(--muted);
  font-weight: 700;
}

.roulette-layout {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) minmax(300px, 380px);
  gap: 34px;
  align-items: center;
}

.wheel-wrap {
  --screen-left: 13.2%;
  --screen-top: 23%;
  --screen-width: 73.6%;
  --screen-height: 56%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 1.817;
  margin: 0 auto;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 8px;
  background:
    url("assets/reel-frame-art.png") center / cover no-repeat,
    linear-gradient(145deg, #f7f9fb 0%, #929ba9 46%, #f7f9fc 100%);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
}

.reel-art-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 8px;
  background: url("assets/reel-frame-shell.png") center / cover no-repeat;
  pointer-events: none;
}

.wheel-wrap::before {
  content: none;
}

.wheel-wrap::after {
  content: none;
}

.reel-screen {
  position: absolute;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.reel-screen::after {
  content: none;
}

body.jackpot .wheel-wrap {
  animation: cabinetRapture 520ms ease-in-out infinite;
}

body.jackpot .stage {
  animation: stageShake 240ms steps(2, end) infinite;
}

body.jackpot .topbar {
  animation: chaosTopbar 520ms steps(2, end) infinite;
}

body.jackpot .result-panel {
  animation: chaosPanel 430ms steps(2, end) infinite;
}

body.jackpot .app-shell {
  animation: chaosShell 680ms steps(2, end) infinite;
}

body.jackpot .reel-art-frame {
  animation: chaosFrame 310ms steps(2, end) infinite;
  filter:
    brightness(1.24)
    saturate(1.45)
    drop-shadow(0 0 18px rgba(255, 45, 36, .95))
    drop-shadow(0 0 34px rgba(255, 212, 71, .85));
}

body.jackpot .reel-screen {
  animation: chaosScreen 260ms steps(2, end) infinite;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .68),
    inset 0 0 0 6px rgba(255, 45, 36, .22),
    inset 0 0 42px rgba(255, 212, 71, .32),
    0 0 26px rgba(255, 45, 36, .75),
    0 0 48px rgba(255, 212, 71, .52);
}

canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  border-radius: 8px;
  background: transparent;
}

.light-rig {
  position: absolute;
  left: 34px;
  right: 34px;
  z-index: 5;
  height: 18px;
  background:
    radial-gradient(circle, #fff 0 16%, #fff7ad 17% 31%, #ff2537 32% 43%, transparent 44%) 0 0 / 44px 18px repeat-x;
  filter: drop-shadow(0 0 8px rgba(255, 216, 0, .8));
  opacity: 0;
}

.light-rig-top {
  top: 15px;
}

.light-rig-bottom {
  bottom: 15px;
}

body.jackpot .light-rig {
  animation: lightChase 220ms linear infinite;
  opacity: .96;
  filter:
    drop-shadow(0 0 18px rgba(255, 45, 36, 1))
    drop-shadow(0 0 30px rgba(255, 212, 71, .98))
    drop-shadow(0 0 44px rgba(55, 230, 255, .72));
}

.pointer {
  position: absolute;
  top: 51%;
  left: 13.8%;
  z-index: 5;
  width: 46px;
  height: 62px;
  transform: translateY(-50%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: linear-gradient(145deg, #fff1a6, #ff2d24 52%, #a80012);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .72),
    0 0 24px rgba(255, 45, 36, .86),
    0 12px 24px rgba(0, 0, 0, .3);
}

body.jackpot .pointer {
  animation: pointerPulse 220ms steps(2, end) infinite;
}

.spin-button {
  position: absolute;
  right: 4.2%;
  bottom: 7.8%;
  z-index: 5;
  width: 112px;
  height: 112px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background:
    linear-gradient(rgba(255, 0, 24, .04), rgba(255, 0, 24, .04)),
    url("assets/spin-button-art.png") center / 138% 138% no-repeat,
    radial-gradient(circle at 36% 24%, #fff6d1 0 8%, transparent 9%),
    linear-gradient(145deg, #ff665b, #e8001f 45%, #8d0013);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, .42),
    inset 0 -13px 0 rgba(0, 0, 0, .25),
    0 0 0 7px rgba(255, 255, 255, .7),
    0 0 0 13px rgba(136, 0, 19, .42),
    0 22px 40px rgba(191, 51, 39, .45),
    0 0 38px rgba(255, 45, 36, .7);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.spin-button span {
  font-size: 26px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .32), 0 0 12px rgba(255, 255, 255, .8);
}

.spin-button:disabled {
  cursor: wait;
  filter: saturate(1.5) brightness(1.1);
  opacity: 1;
  animation: buttonRave 260ms steps(2, end) infinite;
}

.result-panel {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .92), transparent 24%),
    repeating-radial-gradient(circle at 0 0, rgba(0, 0, 0, .18) 0 1px, transparent 2px 12px),
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(193, 202, 212, .94));
  box-shadow:
    0 24px 56px rgba(23, 32, 42, .2),
    inset 0 1px 0 #fff,
    inset 0 -18px 32px rgba(0, 0, 0, .12);
}

.panel-label {
  margin: 0 0 14px;
  color: var(--accent-2);
  font-weight: 900;
}

h2 {
  min-height: 4.2em;
  margin: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(0,0,0,.08);
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .86);
}

body.jackpot h2 {
  animation: resultGlow 600ms ease-in-out infinite alternate;
}

#result-meta {
  min-height: 3em;
  margin: 18px 0 24px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
  color: #374151;
  line-height: 1.7;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #c8ced8);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, inset 0 -4px 8px rgba(0, 0, 0, .12), 0 8px 18px rgba(0, 0, 0, .12);
}

.actions button:hover,
.spin-button:hover {
  transform: scale(1.03);
}

.actions button:hover {
  transform: translateY(-1px);
}

@media (max-width: 1120px) {
  .app-shell {
    padding: 16px 10px 24px;
  }

  .topbar,
  .roulette-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topbar {
    display: none;
  }

  .counter {
    width: 116px;
    text-align: left;
  }

  h1 {
    font-size: 31px;
    line-height: 1.12;
  }

  .wheel-wrap {
    width: min(100%, calc(100vw - 20px), 720px);
  }

  .spin-button {
    width: 68px;
    height: 68px;
    right: 4%;
    bottom: 7%;
  }

  .pointer {
    top: 51%;
    left: 9.8%;
    width: 32px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spin-button,
  .actions button {
    transition: none;
  }
}

@keyframes ambientSpin {
  to { transform: rotate(1turn); }
}

@keyframes blissBurst {
  0% { opacity: 0; transform: scale(.18) rotate(0deg); filter: saturate(1); }
  12% { opacity: 1; transform: scale(1.18) rotate(22deg); filter: saturate(2.4) brightness(1.4); }
  100% { opacity: 0; transform: scale(3.4) rotate(92deg); filter: saturate(2) brightness(1.15); }
}

@keyframes cabinetRapture {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  16% { transform: translate(92px, -74px) scale(1.22) rotate(5deg); opacity: .72; }
  32% { transform: translate(-118px, 86px) scale(.82) rotate(-7deg); opacity: 1; }
  48% { transform: translate(134px, 96px) scale(1.34) rotate(-4deg); opacity: .58; }
  64% { transform: translate(-96px, -112px) scale(.74) rotate(8deg); opacity: .95; }
  82% { transform: translate(58px, 124px) scale(1.18) rotate(-9deg); opacity: .68; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes lightChase {
  to { background-position: 88px 0; }
}

@keyframes stageShake {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  20% { transform: translate(80px, -70px) rotate(4deg) scale(1.08); opacity: .64; }
  40% { transform: translate(-110px, 92px) rotate(-5deg) scale(.94); opacity: 1; }
  60% { transform: translate(122px, 108px) rotate(6deg) scale(1.14); opacity: .72; }
  80% { transform: translate(-88px, -118px) rotate(-7deg) scale(.9); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: .82; }
}

@keyframes pointerPulse {
  0% { filter: brightness(1) saturate(1); transform: translate(-60px, -50%) scale(1) rotate(0deg); opacity: 1; }
  25% { filter: brightness(2.4) saturate(2.6); transform: translate(92px, calc(-50% - 60px)) scale(1.8) rotate(18deg); opacity: .42; }
  50% { filter: brightness(.9) saturate(1.2); transform: translate(-118px, calc(-50% + 78px)) scale(.62) rotate(-22deg); opacity: 1; }
  75% { filter: brightness(2.2) saturate(2.2); transform: translate(68px, calc(-50% + 112px)) scale(1.55) rotate(-16deg); opacity: .55; }
  100% { filter: brightness(1.7) saturate(1.8); transform: translateY(-50%) scale(1.1); opacity: 1; }
}

@keyframes buttonRave {
  0% { transform: translate(0, 0) scale(1.03) rotate(0deg); opacity: 1; box-shadow: 0 0 0 7px rgba(255, 255, 255, .7), 0 0 0 13px rgba(136, 0, 19, .42), 0 22px 40px rgba(191, 51, 39, .45), 0 0 38px rgba(255, 45, 36, .7); }
  25% { transform: translate(-94px, -118px) scale(1.8) rotate(-28deg); opacity: .58; box-shadow: 0 0 0 18px rgba(255,255,255,.9), 0 0 90px rgba(255, 212, 71, 1); }
  50% { transform: translate(84px, 74px) scale(.72) rotate(24deg); opacity: 1; box-shadow: 0 0 0 6px rgba(55,230,255,.8), 0 0 70px rgba(255,45,36,1); }
  75% { transform: translate(-126px, 96px) scale(1.45) rotate(36deg); opacity: .48; box-shadow: 0 0 0 24px rgba(255,212,71,.8), 0 0 110px rgba(255,45,36,1); }
  100% { transform: translate(0, 0) scale(1.1) rotate(0deg); opacity: 1; box-shadow: 0 0 0 9px rgba(255, 255, 255, .9), 0 0 0 16px rgba(255, 212, 71, .62), 0 24px 54px rgba(191, 51, 39, .62), 0 0 68px rgba(255, 212, 71, .92); }
}

@keyframes chaosShell {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1); }
  25% { transform: translate(-70px, 44px) rotate(-3deg) scale(1.08); filter: brightness(1.7) saturate(2); }
  50% { transform: translate(96px, -62px) rotate(4deg) scale(.92); filter: brightness(.7) saturate(1.4); }
  75% { transform: translate(-120px, -88px) rotate(6deg) scale(1.16); filter: brightness(2.1) saturate(2.5); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1); }
}

@keyframes chaosTopbar {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  33% { transform: translate(110px, -80px) scale(1.5) rotate(12deg); opacity: .35; }
  66% { transform: translate(-130px, 100px) scale(.65) rotate(-18deg); opacity: .95; }
  100% { transform: translate(40px, -120px) scale(1.2) rotate(8deg); opacity: .5; }
}

@keyframes chaosPanel {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  20% { transform: translate(124px, -82px) scale(1.36) rotate(-7deg); opacity: .62; }
  45% { transform: translate(-118px, 104px) scale(.78) rotate(9deg); opacity: 1; }
  70% { transform: translate(86px, 128px) scale(1.22) rotate(14deg); opacity: .45; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: .92; }
}

@keyframes chaosFrame {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  33% { transform: translate(-96px, 72px) scale(1.16) rotate(-5deg); opacity: .8; }
  66% { transform: translate(118px, -104px) scale(.88) rotate(7deg); opacity: .55; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes chaosScreen {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  25% { transform: translate(104px, 76px) scale(.72) rotate(11deg); opacity: .5; }
  50% { transform: translate(-126px, -96px) scale(1.38) rotate(-13deg); opacity: 1; }
  75% { transform: translate(76px, -118px) scale(1.05) rotate(18deg); opacity: .38; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes resultGlow {
  from { color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .86); }
  to { color: #b80018; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 212, 71, .95), 0 0 36px rgba(255, 45, 36, .62); }
}