@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;0,6..96,800;1,6..96,500&family=Inter:wght@400;600;800&display=swap');

:root {
  --maroon: #5c1519;
  --maroon-deep: #2a0709;
  --maroon-ink: #1a0405;
  --cream: #f3e6cf;
  --cream-dim: #cdbb9c;
  --gold: #e7b54a;
  --gold-hi: #fff1b8;
  --gold-lo: #8a5a12;
  --green: #7fd14a;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --serif: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  --font: 'Inter', 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--maroon-ink); color: var(--cream); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body.offline::after {
  content: 'Reconnecting…'; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: var(--gold); color: var(--maroon-ink); font-weight: 800; padding: 6px 14px; border-radius: 4px; z-index: 99;
}

/* ---------- reels ---------- */
/* the window: five cream drums behind a gold bezel, shaded top and bottom so they read as cylinders */
.reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2%; position: relative; }
.reel {
  position: relative; overflow: hidden; aspect-ratio: 1 / 2.9;
  background: linear-gradient(90deg, #d9c7a6, #fbf3e3 18%, #fffaf0 50%, #fbf3e3 82%, #d9c7a6);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.reel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(40,6,8,.72) 0%, rgba(40,6,8,.18) 22%, transparent 36%, transparent 64%, rgba(40,6,8,.18) 78%, rgba(40,6,8,.72) 100%);
}
.cell { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.cell img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.reel.blur .cell img { filter: blur(3px) drop-shadow(0 4px 4px rgba(0,0,0,.25)); transform: scaleY(1.12); }
.cell img { position: relative; z-index: 1; }
.cell.hit::before {
  content: ''; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,90,.95), rgba(255,190,60,.45) 45%, transparent 70%);
  animation: winglow .55s ease-in-out infinite alternate;
}
.cell.hit img { animation: winpop .55s ease-in-out infinite alternate; }
@keyframes winglow { from { opacity: .35; } to { opacity: 1; } }
@keyframes winpop { from { scale: 1; } to { scale: 1.12; } }

/* pay line */
.payline { position: absolute; left: -2%; right: -2%; top: 50%; height: 0; border-top: 3px solid rgba(200,36,58,.55); pointer-events: none; z-index: 2; }
.payline::before, .payline::after {
  content: ''; position: absolute; top: -13px; border: 12px solid transparent;
}
.payline::before { left: -16px; border-left: 16px solid var(--gold); }
.payline::after { right: -16px; border-right: 16px solid var(--gold); }

/* gold frame */
.bezel {
  padding: 2.2%; border-radius: 18px; position: relative;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 22%, var(--gold-lo) 50%, var(--gold) 78%, var(--gold-hi));
  box-shadow: 0 0 0 4px #1a0405, 0 18px 40px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.6);
}
.bezel-in { background: var(--maroon-ink); padding: 3%; border-radius: 10px; box-shadow: inset 0 6px 18px rgba(0,0,0,.8); }

/* bulbs that chase round the marquee */
.bulbs { position: absolute; inset: 0; pointer-events: none; }
.bulbs i {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #ffe9a8 35%, #c8892a 75%);
  box-shadow: 0 0 10px 3px rgba(255,210,110,.55);
  opacity: .35; transition: opacity .1s;
}
.bulbs i.on { opacity: 1; }

.kicker { font: 800 13px var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.display { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; line-height: .92; }