/* Slot machine effects. Linked after the page's inline styles so these win
   ties. Written for old Chromebooks (Chrome ~76): no inset shorthand, no
   clamp()/min()/max(), and no flex `gap` for anything that matters. */

/* ── Tease ────────────────────────────────────────────────────────────────
   Two reels are down holding a pair worth chasing and the third is still
   running: the pair glows, the last reel throbs, the edges darken and the
   payline arrows pulse. */
@keyframes slotArmed {
  0%   { box-shadow: 0 0 0 2px #211d17, 0 0 0 4px #e9ce9290, 0 8px 20px #0008, 0 0 10px 1px var(--accent, #e6c590); }
  100% { box-shadow: 0 0 0 2px #211d17, 0 0 0 4px var(--accent, #e6c590), 0 8px 20px #0008, 0 0 26px 5px var(--accent, #e6c590); }
}
@keyframes slotTease {
  0%   { box-shadow: 0 0 0 2px #211d17, 0 0 0 4px var(--accent, #e6c590), 0 8px 20px #0008, 0 0 14px 2px var(--accent, #e6c590); }
  100% { box-shadow: 0 0 0 2px #211d17, 0 0 0 6px #fff4cf, 0 8px 20px #0008, 0 0 40px 10px var(--accent, #e6c590); }
}
@keyframes slotRing {
  0%   { opacity: .55; box-shadow: 0 0 10px 1px var(--accent, #e6c590), inset 0 0 14px 1px var(--accent, #e6c590); }
  100% { opacity: 1;   box-shadow: 0 0 26px 7px var(--accent, #e6c590), inset 0 0 26px 4px var(--accent, #e6c590); }
}
@keyframes slotArrow {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.6); opacity: 1; }
}
.slot-reel-window.armed   { animation: slotArmed .8s ease-in-out infinite alternate; }
.slot-reel-window.teasing { animation: slotTease .36s ease-in-out infinite alternate; }

/* A frame around the middle (payline) symbol of a reel. Lit for a held pair, a
   teasing reel, and the winning symbols. */
.slot-ring {
  position: absolute; left: 0; right: 0;
  z-index: 4; pointer-events: none;
  border: 3px solid #fff2c0; border-radius: 6px;
  opacity: 0;
}
.slot-reel-window.armed .slot-ring   { animation: slotRing .8s ease-in-out infinite alternate; }
.slot-reel-window.teasing .slot-ring { animation: slotRing .36s ease-in-out infinite alternate; }

.slot-frame::after {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .6) 100%);
}
.slot-frame.is-teasing::after { opacity: 1; }
.slot-frame.is-teasing .slot-payline-arrow { animation: slotArrow .36s ease-in-out infinite alternate; }

/* ── Winning symbols ──────────────────────────────────────────────────────
   The middle symbol of each reel is redrawn on top (same cream enamel behind
   it, so the patch is invisible) and bounces, inside a bright ring. */
@keyframes slotRingWin {
  0%   { opacity: .75; box-shadow: 0 0 14px 2px var(--accent, #e6c590), inset 0 0 14px 1px var(--accent, #e6c590); }
  100% { opacity: 1;   box-shadow: 0 0 36px 11px var(--accent, #e6c590), inset 0 0 30px 6px var(--accent, #e6c590); }
}
@keyframes slotSymPop {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
.slot-reel-window.hit .slot-ring { animation: slotRingWin .42s ease-in-out infinite alternate; border-color: #fff7d6; }
.slot-hit {
  position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  background-repeat: no-repeat;
  background-image: url('symbols.svg'), linear-gradient(90deg, #c6c3b6, #fffdf1 22%, #fffdf5 70%, #c7c7bc);
  animation: slotSymPop .42s ease-in-out infinite alternate;
}
.slot-payline.hit .slot-payline-line { border-color: #fff2c0; box-shadow: 0 0 22px 2px var(--accent, #e6c590); }

/* ── Win banner by tier ───────────────────────────────────────────────── */
.slot-win-banner.small .slot-win-amt,   .slot-readout-win.small .slot-win-amt   { font-size: 19px; }
.slot-win-banner.medium .slot-win-amt,  .slot-readout-win.medium .slot-win-amt  { font-size: 22px; }
.slot-win-banner.big,    .slot-readout-win.big    { box-shadow: 0 0 22px 2px currentColor; }
.slot-win-banner.big .slot-win-amt,     .slot-readout-win.big .slot-win-amt     { font-size: 26px; }
.slot-win-banner.mega,   .slot-readout-win.mega   { box-shadow: 0 0 34px 6px currentColor; animation: jackpotPulse .7s ease-in-out infinite alternate, winPulse .55s cubic-bezier(.2,.8,.25,1) backwards; }
.slot-win-banner.mega .slot-win-amt,    .slot-readout-win.mega .slot-win-amt    { font-size: 31px; }
.slot-win-banner.mega .slot-win-tag,    .slot-readout-win.mega .slot-win-tag    { font-size: 16px; }
.slot-readout-win.mega { animation: jackpotPulse .7s ease-in-out infinite alternate, readoutPop .45s cubic-bezier(.2,.8,.25,1) backwards; }
.slot-win-amt { font-variant-numeric: tabular-nums; }

/* ── Jackpot ──────────────────────────────────────────────────────────────
   Full-screen: a dimmed room, turning light rays, the amount counting up. */
@keyframes slotJpIn    { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slotJpSpin  { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes slotJpSlam  {
  0%   { transform: scale(3.2); opacity: 0; }
  55%  { transform: scale(.9);  opacity: 1; }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes slotJpThrob { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }
@keyframes slotJpHint  { 0% { opacity: .35; } 100% { opacity: 1; } }

.slot-jp {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(40, 24, 4, .82), rgba(4, 2, 0, .94) 78%);
  animation: slotJpIn .35s ease-out;
  cursor: pointer; outline: none; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.slot-jp.closing { opacity: 0; transition: opacity .25s; pointer-events: none; }
.slot-jp-rays {
  position: absolute; left: 50%; top: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .24) 0deg 7deg, rgba(255, 214, 110, 0) 7deg 20deg);
  animation: slotJpSpin 26s linear infinite;
  will-change: transform;
}
.slot-jp-rays.still { animation: none; }
/* Static fade over the turning rays (a mask on the rotating layer itself would
   be redone every frame). */
.slot-jp-vignette {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(3, 1, 0, 0) 0%, rgba(3, 1, 0, 0) 20%, rgba(3, 1, 0, .55) 52%, rgba(3, 1, 0, .94) 88%);
}
.slot-jp-card { position: relative; text-align: center; padding: 0 4vmin; }
.slot-jp-title {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 13vmin; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe27a 38%, #f0a81c 62%, #b8740a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(0 0 2.2vmin var(--accent, #e6c590)) drop-shadow(0 .6vmin 0 #4b2c00);
          filter: drop-shadow(0 0 2.2vmin var(--accent, #e6c590)) drop-shadow(0 .6vmin 0 #4b2c00);
  animation: slotJpSlam .8s cubic-bezier(.2, .9, .3, 1) both;
}
.slot-jp-sub {
  margin-top: 1.6vmin;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 2.6vmin; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent, #e6c590); opacity: .95;
}
.slot-jp-amt {
  margin-top: 3vmin;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 12vmin; line-height: 1.05; color: #fff6d4;
  text-shadow: 0 0 1.4vmin rgba(255, 214, 110, .85), 0 .5vmin 0 #5a3600;
  font-variant-numeric: tabular-nums;
  animation: slotJpThrob .32s ease-in-out infinite alternate;
}
.slot-jp.done .slot-jp-amt { animation-duration: .9s; }
.slot-jp-hint {
  margin-top: 4vmin; height: 3vmin;
  font-size: 2.4vmin; letter-spacing: .24em; text-transform: uppercase; color: #fff6d4; text-shadow: 0 0 1vmin #000, 0 0 2vmin #000;
}
.slot-jp.done .slot-jp-hint { animation: slotJpHint .9s ease-in-out infinite alternate; }

/* ── Sound button, beside the theme tabs ──────────────────────────────────
   Sound is off until chosen; until the player has ever chosen, the button
   pulses so it is noticed. */
@keyframes slotSoundHint {
  0%   { box-shadow: 0 0 0 0 rgba(230, 197, 144, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(230, 197, 144, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 197, 144, 0); }
}
.slot-tabrow { display: flex; align-items: center; justify-content: center; }
.slot-tabrow .slot-tabs { flex: 0 1 auto; }
.slot-sound {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; height: 42px; margin-left: 14px; padding: 0 18px;
  border: 1px solid rgba(201, 162, 106, .35); border-radius: 999px;
  background: rgba(0, 0, 0, .3); color: var(--ivory-dim, #d9cfb8);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .03em;
  transition: color .2s, border-color .2s, background .2s;
}
.slot-sound svg { margin-right: 8px; }
.slot-sound:hover { color: var(--brass, #c9a26a); border-color: var(--brass, #c9a26a); }
.slot-sound.on { color: var(--brass-2, #e6c590); border-color: var(--brass, #c9a26a); background: rgba(201, 162, 106, .14); }
.slot-sound.hint { animation: slotSoundHint 1.8s ease-out infinite; }
.is-phone .slot-tabrow { width: 100%; flex-shrink: 0; }
.is-phone .slot-tabrow .slot-tabs { flex: 1 1 0; min-width: 0; width: auto; }
.is-phone .slot-sound { width: 48px; height: 44px; margin-left: 8px; padding: 0; flex: 0 0 48px; }
.is-phone .slot-sound svg { margin-right: 0; }
.is-phone .slot-sound-lbl { display: none; }
.is-upright .slot-tabs { margin-top: 0; }
.is-upright .slot-tabrow { margin-top: 10px; }
.is-upright .slot-sound { height: 48px; }

/* ── The cabinet: wrapper, marquee bulbs, jackpot sign, glass glare, lever ──
   .slot-cab holds the sign and the body; the body is exactly the frame's box,
   so the bulbs (laid over the frame's 8px rim) and the lever (just outside it)
   can sit around the frame, which clips its own children. */
.slot-cab { position: relative; display: flex; flex-direction: column; flex-shrink: 0; margin: 8px auto 0; --chase: 1.5s; }
.slot-cab.is-spinning { --chase: .75s; }
.slot-cab.is-teasing  { --chase: .28s; }
.slot-cab.is-winning  { --chase: .36s; }
.slot-cab-body { position: relative; }
.slot-cab .slot-frame { margin: 0; }
.is-phone .slot-cab { margin: 0; align-self: center; }

/* Bulbs: a 24px pitch along each edge. The dim layer is every bulb; layers
   g1-g3 light every third one (tile = 72px), each a third of a cycle apart. */
@keyframes slotBulb { 0% { opacity: 1; } 33% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }
.slot-bulbs { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 8; }
.slot-bulbs .e { position: absolute; }
.slot-bulbs i { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.slot-bulbs .top, .slot-bulbs .bot { left: 18px; right: 18px; height: 8px; }
.slot-bulbs .top { top: 0; }
.slot-bulbs .bot { bottom: 0; }
.slot-bulbs .lft, .slot-bulbs .rgt { top: 18px; bottom: 18px; width: 8px; }
.slot-bulbs .lft { left: 0; }
.slot-bulbs .rgt { right: 0; }
.slot-bulbs .top .d, .slot-bulbs .bot .d { background: radial-gradient(circle at 12px 50%, #c99a45 0, #8a6420 2px, #3d280a 3.2px, transparent 3.8px) 0 0 / 24px 100% repeat-x; }
.slot-bulbs .lft .d, .slot-bulbs .rgt .d { background: radial-gradient(circle at 50% 12px, #c99a45 0, #8a6420 2px, #3d280a 3.2px, transparent 3.8px) 0 0 / 100% 24px repeat-y; }
.slot-bulbs .g { opacity: 0; animation: slotBulb var(--chase, 1.5s) linear infinite; }
.slot-bulbs .top .g, .slot-bulbs .bot .g { background-image: radial-gradient(circle at 12px 50%, #fffbe0 0, #ffe08a 1.8px, var(--accent, #e6c590) 3.4px, transparent 7px); background-size: 72px 100%; background-repeat: repeat-x; }
.slot-bulbs .lft .g, .slot-bulbs .rgt .g { background-image: radial-gradient(circle at 50% 12px, #fffbe0 0, #ffe08a 1.8px, var(--accent, #e6c590) 3.4px, transparent 7px); background-size: 100% 72px; background-repeat: repeat-y; }
.slot-bulbs .top .g2, .slot-bulbs .bot .g2 { background-position: 24px 0; }
.slot-bulbs .top .g3, .slot-bulbs .bot .g3 { background-position: 48px 0; }
.slot-bulbs .lft .g2, .slot-bulbs .rgt .g2 { background-position: 0 24px; }
.slot-bulbs .lft .g3, .slot-bulbs .rgt .g3 { background-position: 0 48px; }
.slot-bulbs .fwd .g2 { animation-delay: calc(var(--chase, 1.5s) / -1.5); }
.slot-bulbs .fwd .g3 { animation-delay: calc(var(--chase, 1.5s) / -3); }
.slot-bulbs .rev .g2 { animation-delay: calc(var(--chase, 1.5s) / -3); }
.slot-bulbs .rev .g3 { animation-delay: calc(var(--chase, 1.5s) / -1.5); }
html.slot-lite .slot-bulbs .g { animation: none; }
html.slot-lite .slot-bulbs .g1 { opacity: 1; }

/* Glass glare: a soft diagonal sheen that crosses the reels every few seconds. */
@keyframes slotGlare { 0%, 60% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(440%) skewX(-18deg); } }
.slot-glare { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.slot-glare::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -55%; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .24) 50%, rgba(255, 255, 255, .13) 54%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) skewX(-18deg);
  animation: slotGlare 8s ease-in-out infinite;
}
.slot-cab.is-winning .slot-glare::before { animation-duration: 1.8s; }
html.slot-lite .slot-glare { display: none; }

/* Jackpot sign */
@keyframes slotSignGlow { 0% { opacity: .8; } 100% { opacity: 1; } }
@keyframes slotSignHot {
  0%   { color: #ffe9a8; text-shadow: 0 0 10px #fff, 0 0 24px var(--accent, #e6c590); }
  50%  { color: #ff6a5a; text-shadow: 0 0 10px #ff2a1a, 0 0 24px #ff2a1a; }
}
.slot-sign {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; margin: 0 0 8px; padding: 0 18px; flex-shrink: 0;
  border: 2px solid var(--brass-deep, #8c6a3f); border-radius: 12px;
  background: linear-gradient(180deg, #1a0f08, #0a0503);
  box-shadow: inset 0 0 0 1px rgba(233, 206, 146, .35), inset 0 0 18px #000, 0 6px 16px rgba(0, 0, 0, .45);
}
.slot-sign-l, .slot-sign-r {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #e6c590); opacity: .85; white-space: nowrap;
}
.slot-sign-amt {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 24px; line-height: 1;
  color: #ffe9a8; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px var(--accent, #e6c590), 0 0 18px var(--accent, #e6c590);
  animation: slotSignGlow 2.2s ease-in-out infinite alternate;
}
.slot-sign.hot .slot-sign-amt { animation: slotSignHot .22s linear infinite; }
.slot-sign.hit .slot-sign-amt { animation: slotSignHot .16s linear infinite; }
.is-upright .slot-sign { height: 40px; margin-bottom: 10px; padding: 0 14px; }
.is-upright .slot-sign-amt { font-size: 24px; }
.is-upright .slot-sign-r { display: none; }

/* Pull lever (desktop): a chrome arm with a red ball, pivoting at the bottom. */
.slot-lever {
  position: absolute; right: -64px; top: 60px; width: 48px; height: 260px; padding: 0;
  border: 0; background: none; cursor: grab; touch-action: none; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.slot-lever:active { cursor: grabbing; }
.slot-lever.disabled { opacity: .5; cursor: not-allowed; }
.slot-lever-track {
  position: absolute; left: 50%; margin-left: -8px; top: 10px; bottom: 26px; width: 16px; border-radius: 8px;
  background: linear-gradient(90deg, #0d0804, #3a2a18 50%, #0d0804);
  box-shadow: inset 0 0 6px #000, 0 0 0 2px #8c6a3f;
}
.slot-lever-arm {
  position: absolute; left: 50%; margin-left: -5px; bottom: 26px; width: 10px; height: 200px;
  transform-origin: 50% 100%; border-radius: 5px;
  background: linear-gradient(90deg, #8d8d8d, #f6f6f6 45%, #8a8a8a);
  box-shadow: 0 0 0 1px #3a3a3a;
}
.slot-lever-ball {
  position: absolute; left: 50%; top: -20px; margin-left: -20px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb3a6, #d3221a 48%, #6e0a06);
  box-shadow: 0 5px 8px rgba(0, 0, 0, .55), inset 0 -3px 6px rgba(0, 0, 0, .35);
}
.slot-lever-pivot {
  position: absolute; left: 50%; margin-left: -20px; bottom: 6px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5dc9b, #947039 55%, #382516);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .55), inset 0 0 0 2px #3d2a1a;
}