body { margin: 0; background: #0a0714; }
.slayers { --c: 104px; container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 10px 4px; box-sizing: border-box; background: #0a0714 url('./assets/street.webp') center / cover no-repeat; min-height: 100%; overflow: hidden; }
/* FIXED-RESOLUTION STAGE: designed once at 590 x 520 and scaled
   uniformly by game.js to fit the zone. Inside, a flex column stacks
   the RESULT STRIP (24px) over the board (cell 104px -> grid
   544 x 437); every board-relative effect derives from the board
   element's own box. */
.sl-stage { position: absolute; left: 50%; top: 50%; z-index: 1; width: 590px; height: 520px; transform: translate(-50%, -50%); transform-origin: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; container-type: inline-size; }
.slayers::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,4,18,.66), rgba(7,4,18,.38) 42%, rgba(7,4,18,.72)); pointer-events: none; }
.topbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; width: 100%; height: 22px; }
.banner { color: rgba(224,240,255,.92); font: 700 12px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.9); text-align: center; transition: opacity .25s ease; }
.hbtn { position: absolute; right: 2px; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,217,77,.55); background: rgba(10,7,20,.8); color: #ffd94d; font: 800 13px system-ui, sans-serif; cursor: pointer; transition: transform .1s ease; }
.hbtn:active { transform: scale(.92); }
.tools { position: absolute; right: 2px; top: 0; display: flex; gap: 5px; }
.tools .hbtn { position: static; display: grid; place-items: center; padding: 0; }
.tools .hbtn svg { display: block; }
/* --- settings screen (same gold card family as the rules screen) --- */
.settings { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 14px; background: rgba(4, 8, 10, .72); box-sizing: border-box; }
.settings[hidden] { display: none; }
.settings-card { width: min(430px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid #c99a2e; background: linear-gradient(170deg, #1d180b, #100d06); box-shadow: 0 18px 60px rgba(0, 0, 0, .7), 0 0 26px rgba(245, 179, 1, .15); overflow: hidden; color: #f5ecd7; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 10px; font: 800 17px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .05em; color: #ffe9a8; }
.settings-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #6b5316; background: #171106; color: #ffe9a8; font-size: 17px; line-height: 1; cursor: pointer; }
.settings-body { overflow-y: auto; padding: 2px 16px 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(245, 179, 1, .12); }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-name { font: 800 14px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .04em; color: #ffe9a8; }
.set-desc { font-size: 12px; line-height: 1.45; color: #a8976b; }
.switch { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #241a08; border: 1px solid #6b5316; transition: background .15s ease, border-color .15s ease; pointer-events: none; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #8a7648; transition: transform .15s ease, background .15s ease; }
.switch input:checked + .track { background: #3a2c07; border-color: #f5b301; }
.switch input:checked + .track::after { transform: translateX(20px); background: linear-gradient(180deg, #ffd94d, #f5b301); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 2px rgba(245, 179, 1, .55); }
.set-keys { padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.set-keys.off { opacity: .38; }
.set-keyrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #e8dcbc; }
.set-kbds { flex: none; min-width: 76px; display: flex; gap: 4px; }
.set-kbds kbd { padding: 2px 7px; border-radius: 6px; border: 1px solid #6b5316; border-bottom-width: 2px; background: #171106; color: #ffe9a8; font: 700 11.5px 'Figtree', system-ui, sans-serif; white-space: nowrap; }
.board { position: relative; }
.grid { position: relative; width: calc(var(--c) * 5 + 24px); height: calc(var(--c) * 4 + 21px); border-radius: 14px; background: rgba(6,4,18,.88); box-shadow: inset 0 0 0 1px rgba(255,217,77,.25), 0 18px 44px rgba(0,0,0,.62); overflow: hidden; transition: box-shadow .3s ease; }
.grid::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.032) 50%, transparent 58%); background-size: 280% 100%; animation: sheen 11s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -130% 0; } }
.grid.anticip { animation: anticip 1s ease-in-out infinite alternate; }
@keyframes anticip { from { box-shadow: inset 0 0 0 1px rgba(255,217,77,.25), 0 18px 44px rgba(0,0,0,.62), 0 0 12px rgba(255,180,0,.25); } to { box-shadow: inset 0 0 0 2px rgba(255,217,77,.8), 0 18px 44px rgba(0,0,0,.62), 0 0 34px rgba(255,180,0,.65); } }
.cell { position: absolute; left: 0; top: 0; z-index: 1; width: var(--c); height: var(--c); will-change: transform; }
.reel { position: absolute; top: 0; height: 100%; overflow: hidden; z-index: 4; pointer-events: none; contain: strict; }
.rmove { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.rstrip { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; box-sizing: border-box; }
.rstrip.ghost { position: absolute; left: 0; top: 0; width: 100%; }
.rstrip.g1 { transform: translateY(var(--g1, 0px)); opacity: var(--g1o, 0); }
.rstrip.g2 { transform: translateY(var(--g2, 0px)); opacity: var(--g2o, 0); }
.ritem { position: relative; flex: 0 0 auto; width: var(--c); height: var(--c); margin: 0 auto; }
.reel .tile { transition: none; scale: 1 var(--sm, 1); }
.tile { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 42%, rgba(0,0,0,.30)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.42); transition: scale .13s ease-out; }
.tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.tile::before { content: ''; position: absolute; inset: 0; border-radius: 9px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 34%, transparent 55%, rgba(0,0,0,.16)); box-shadow: inset 0 0 20px var(--tglow, transparent); }
.tile.sA { --tglow: rgba(255,90,60,.20); }
.tile.sB { --tglow: rgba(120,200,255,.18); }
.tile.sC { --tglow: rgba(255,217,77,.18); }
.tile.sD { --tglow: rgba(255,92,168,.18); }
.tile.sE { --tglow: rgba(248,113,113,.18); }
.tile.sW { --tglow: rgba(255,150,40,.24); }
.tile.sV { --tglow: rgba(255,60,60,.28); }
.tile.sS { --tglow: rgba(245,179,1,.22); }
.tile::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 9px; background: #04020d; opacity: 0; transition: opacity .24s ease; pointer-events: none; }
.grid.focus .tile::after { opacity: .52; }
.grid.focus .tile.won::after, .grid.focus .tile.scatwon::after { opacity: 0; }
.grid.focus .tile.won, .grid.focus .tile.scatwon { scale: 1.05; }
.tile.won { box-shadow: inset 0 0 0 2px rgba(255,217,77,.95), inset 0 1px 0 rgba(255,255,255,.25), 0 0 16px rgba(255,217,77,.55); background: linear-gradient(180deg, rgba(255,217,77,.30), rgba(255,217,77,.13) 45%, rgba(0,0,0,.2)); animation: crackle .28s linear 2; }
.tile.scatwon { box-shadow: inset 0 0 0 2px rgba(255,150,60,.98), 0 0 18px rgba(255,150,60,.6); background: rgba(255,150,60,.25); }
.tile.scatpulse { animation: scatpulse .5s ease-in-out 2 alternate; }
@keyframes scatpulse { from { box-shadow: inset 0 0 0 2px rgba(255,180,0,.7), 0 0 8px rgba(255,180,0,.4); } to { box-shadow: inset 0 0 0 3px rgba(255,217,77,1), 0 0 24px rgba(255,180,0,.85); filter: brightness(1.3); } }
@keyframes crackle { 0%, 100% { filter: brightness(1.25); } 50% { filter: brightness(1.9); } }
.tile.hitpop { animation: hitpop .34s cubic-bezier(.2, 2.2, .4, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes hitpop { 0% { transform: scale(.82); filter: brightness(2.3); } 55% { transform: scale(1.15); filter: brightness(1.65); } 100% { transform: scale(1); filter: brightness(1); } }
.tile.fillpop { animation: fillpop .3s cubic-bezier(.2, 2.2, .4, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes fillpop { 0% { transform: scale(.6); filter: brightness(2.4); } 100% { transform: scale(1); filter: brightness(1); } }
/* A cell that will become WILD (duelled reel / sliced row) lands as a
   dark pre-wild tile; the duel / slicer reveal fills it. */
.tile.prewild { background: radial-gradient(circle at 50% 42%, rgba(255,190,40,.28), rgba(10,6,20,.92) 70%); box-shadow: inset 0 0 0 2px rgba(255,190,40,.75), 0 0 14px rgba(255,180,0,.35); }
.tile.prewild::before { content: '\2726'; position: absolute; inset: 0; display: grid; place-items: center; color: #ffd94d; font-size: 34px; text-shadow: 0 0 12px rgba(255,190,0,.9); background: none; box-shadow: none; }
.tile.duelled { box-shadow: inset 0 0 0 2px rgba(255,120,60,.95), 0 0 18px rgba(255,110,40,.55); }
/* DUEL stamps: the winning multiplier riding its reel. */
.stamps { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.stamp { position: absolute; transform: translate(-50%, -50%); padding: 2px 10px; border-radius: 999px; background: linear-gradient(180deg, #fff3b0, #ffd94d 45%, #d99a06); color: #241a03; font: 900 17px 'Red Hat Display', system-ui, sans-serif; border: 1px solid #7a5203; box-shadow: 0 2px 10px rgba(0,0,0,.6), 0 0 18px rgba(255,190,0,.65); white-space: nowrap; }
.stamp.go { animation: stampin .34s cubic-bezier(.16, 1.5, .3, 1); }
@keyframes stampin { 0% { scale: 2.1; opacity: 0; } 55% { opacity: 1; } 100% { scale: 1; opacity: 1; } }
/* DUEL overlay: Boss (top) vs Sloth (bottom) over the duelling reel,
   their two multiplier values flashing until the slash picks one. */
.duelbox { position: absolute; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 4px; box-sizing: border-box; border-radius: 12px; background: rgba(5,3,14,.78); box-shadow: inset 0 0 0 2px rgba(255,90,60,.8), 0 0 26px rgba(255,80,40,.45); pointer-events: none; }
.duelbox[hidden] { display: none; }
.duel-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.duel-side img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(255,217,77,.8); }
.duel-val { font: 900 21px 'Red Hat Display', system-ui, sans-serif; color: #fff; text-shadow: 0 0 10px rgba(255,190,0,.8), 0 2px 6px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; }
.duel-side.win .duel-val { color: #ffd94d; animation: stampin .3s cubic-bezier(.16, 1.5, .3, 1); }
.duel-side.lose { opacity: .38; filter: grayscale(.7); }
.duel-vs { font: 900 19px 'Red Hat Display', system-ui, sans-serif; color: #ff6a3d; letter-spacing: .08em; text-shadow: 0 0 12px rgba(255,90,40,.9); }
.duel-slash { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.duel-slash.go { animation: slashgo .28s ease-out; }
@keyframes slashgo { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.win { position: relative; z-index: 3; flex: none; width: calc(var(--c) * 5 + 24px); height: 24px; line-height: 24px; padding: 0 10px; box-sizing: border-box; border-radius: 8px; background: rgba(7, 4, 18, .45); text-align: center; white-space: nowrap; overflow: hidden; color: #ffd94d; font: 800 17px 'Red Hat Display', 'Figtree', system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.9); transition: opacity .25s ease; }
.card { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(4,2,12,.62); text-align: center; }
.card[hidden] { display: none; }
.card:not([hidden]) { animation: cardin .32s cubic-bezier(.2, 1.2, .3, 1); }
@keyframes cardin { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.card-tier { color: #ffd94d; font: 900 26px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .04em; text-shadow: 0 0 20px rgba(255,180,0,.8); }
.card-main { color: #fff; font: 900 30px 'Red Hat Display', system-ui, sans-serif; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.card-sub { color: #c9d6f2; font: 600 12px system-ui, sans-serif; letter-spacing: .05em; padding: 0 18px; }
.intro-hide { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto 10px; font: 700 12.5px system-ui, sans-serif; color: #a8976b; cursor: pointer; }
.rules-intro-btn { display: block; width: 100%; margin-top: 12px; height: 38px; border-radius: 9px; border: 1px solid #6b5316; background: #171106; color: #ffe9a8; font: 800 12px system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; }
.slayers.noanim .grid::after, .slayers.noanim .tile.scatpulse, .slayers.noanim .award-cta { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tile.won, .tile.scatpulse, .tile.hitpop, .tile.fillpop, .celeb-rays, .award-cta, .grid::after { animation: none; } }
/* --- BONUS AWARD screen: waits for CLICK TO CONTINUE -------------------- */
.award { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px 14px; box-sizing: border-box; background: linear-gradient(180deg, rgba(5,3,14,.60), rgba(5,3,14,.82)); overflow: hidden; cursor: pointer; transition: opacity .24s ease; }
.award[hidden] { display: none; }
.award.out { opacity: 0; }
.award::before, .award::after { content: ''; position: absolute; top: -25%; bottom: -25%; width: 90px; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,233,138,.20), transparent); pointer-events: none; }
.award.show::before { animation: awstrobe .7s ease-out; }
.award.show::after { animation: awstrobe .7s .14s ease-out; }
@keyframes awstrobe { 0% { left: -12%; opacity: 0; } 25% { opacity: 1; } 100% { left: 108%; opacity: 0; } }
.award-title { position: relative; z-index: 2; text-align: center; font: 900 min(50px, 11cqi) 'Red Hat Display', system-ui, sans-serif; letter-spacing: .015em; line-height: 1.04; background: linear-gradient(180deg, #fff6c9 8%, #ffd94d 48%, #e89b00 96%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(60,32,0,.9)) drop-shadow(0 0 20px rgba(255,180,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
.award.show .award-title { animation: slam .38s cubic-bezier(.16, 1.4, .3, 1) backwards; }
.award-panel { position: relative; z-index: 2; width: min(500px, 88%); border-radius: 22px; padding: 24px 26px 20px; box-sizing: border-box; text-align: center; background: linear-gradient(160deg, #4a1030 0%, #2c0a26 55%, #1c0716 100%); border: 3px solid #ffd94d; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 34px rgba(255,190,0,.5), inset 0 0 44px rgba(255,80,160,.16); }
.award-panel::before { content: ''; position: absolute; inset: -10px; border-radius: 30px; border: 2px solid rgba(255,233,138,.55); box-shadow: 0 0 18px rgba(255,217,77,.35), inset 0 0 18px rgba(255,217,77,.22); pointer-events: none; }
.award-panel::after { content: ''; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); pointer-events: none; }
.award.show .award-panel { animation: panelin .5s .12s cubic-bezier(.2, 1.15, .3, 1) backwards; }
@keyframes panelin { from { opacity: 0; transform: translateY(28px) scale(.92); } to { opacity: 1; transform: none; } }
.award-star { position: absolute; top: -26px; left: -20px; z-index: 3; font-size: 46px; line-height: 1; color: #ffb52e; transform: rotate(-14deg); text-shadow: 0 0 16px rgba(255,181,46,.95), 0 2px 0 #7a4a00, 0 3px 8px rgba(0,0,0,.6); }
.award-head { color: #ffe98a; font: 900 min(25px, 6cqi) 'Red Hat Display', system-ui, sans-serif; letter-spacing: .03em; text-shadow: 0 0 14px rgba(255,190,0,.65), 0 2px 6px rgba(0,0,0,.7); }
.award-body { margin: 12px 0 0; color: #ffe9c4; font: 700 min(15.5px, 3.9cqi)/1.55 'Figtree', system-ui, sans-serif; text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.award-mascot { position: absolute; z-index: 1; right: -8px; bottom: 0; height: min(250px, 46%); object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); pointer-events: none; }
.award-cta { position: relative; z-index: 2; font: 900 min(24px, 6cqi) 'Red Hat Display', system-ui, sans-serif; letter-spacing: .05em; background: linear-gradient(180deg, #ffe98a, #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(60,32,0,.85)) drop-shadow(0 0 14px rgba(255,170,0,.55)); animation: ctapulse 1.1s ease-in-out infinite alternate; }
@keyframes ctapulse { from { scale: 1; } to { scale: 1.055; } }
@media (max-width: 480px) {
  .award { gap: 8px; padding: 10px; }
  .award-panel { z-index: 2; width: 94%; padding: 15px 14px 11px; }
  .award-body { margin-top: 8px; }
  .award-mascot { z-index: 0; height: 27%; right: -16px; opacity: .92; }
  .award-star { font-size: 36px; top: -20px; left: -12px; }
}
/* --- short title slam (Midas Spin) --------------------------------------- */
.bintro { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, rgba(5,3,14,.55), rgba(5,3,14,.8)); overflow: hidden; text-align: center; }
.bintro[hidden] { display: none; }
.bintro::before, .bintro::after { content: ''; position: absolute; top: -25%; bottom: -25%; width: 80px; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,233,138,.22), transparent); pointer-events: none; }
.bintro.show::before { animation: awstrobe .65s ease-out; }
.bintro.show::after { animation: awstrobe .65s .12s ease-out; }
.bi-kicker { color: #ffd94d; font: 900 13px system-ui, sans-serif; letter-spacing: .34em; text-shadow: 0 0 12px rgba(255,180,0,.7); }
.bi-title { font: 900 min(52px, 12cqi) 'Red Hat Display', system-ui, sans-serif; line-height: 1.05; background: linear-gradient(180deg, #fff6c9 8%, #ffd94d 48%, #e89b00 96%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(60,32,0,.9)) drop-shadow(0 0 22px rgba(255,180,0,.6)); }
.bintro.show .bi-title { animation: slam .38s cubic-bezier(.16, 1.4, .3, 1) backwards; }
.bi-sub { color: #e8ecf4; font: 800 12.5px system-ui, sans-serif; letter-spacing: .14em; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
/* --- three-box intro popup (platform requirement) — mirrors the
   ROOSTUDIOS house template (Gold Rush intro): wordmark logo on top,
   three illustrated boxes, fair-play small print, don't-show-again
   centred under the boxes, one big gold start button. --- */
.rules { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(3,2,10,.72); padding: 10px; box-sizing: border-box; }
.rules-card { position: relative; width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; border-radius: 16px; background: #0d0919; box-shadow: inset 0 0 0 1px rgba(255,217,77,.4), 0 24px 60px rgba(0,0,0,.7); padding: 14px 16px 16px; box-sizing: border-box; text-align: center; }
.rules-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 16px; cursor: pointer; transition: transform .1s ease; }
.rules-x:active { transform: scale(.92); }
/* Top-anchored rather than centred (the one deviation from the GR
   template): the card is taller than GR's, and centred it would put
   the start button under the demo shell's fixed bottom bar at laptop
   heights. Anchored to the top of the stage it always stays clear. */
.intro { position: absolute; inset: 0; z-index: 11; display: grid; place-items: start center; padding: 14px; background: rgba(4, 8, 10, .55); box-sizing: border-box; }
.intro[hidden], .rules[hidden] { display: none; }
.intro:not([hidden]) .intro-card, .rules:not([hidden]) .rules-card { animation: cardin .3s cubic-bezier(.2, 1.2, .3, 1); }
.intro-card { position: relative; width: min(648px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid #c99a2e; background: linear-gradient(170deg, #221b0d, #100d06); box-shadow: 0 18px 60px rgba(0, 0, 0, .7), 0 0 34px rgba(245, 179, 1, .22), inset 0 1px 0 rgba(255, 233, 138, .18); color: #f5ecd7; text-align: center; }
.intro-logo { display: block; width: min(264px, 78%); height: auto; margin: 0 auto 12px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }
.intro-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #6b5316; background: #171106; color: #ffe9a8; font-size: 17px; line-height: 1; cursor: pointer; transition: transform .1s ease; }
.intro-x:active { transform: scale(.92); }
.intro-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.intro-box { border: 1px solid #6b5316; border-radius: 12px; background: rgba(245, 179, 1, .05); padding: 12px 10px 11px; text-align: center; overflow: hidden; }
/* Full-bleed art bands: the symbol art runs edge-to-edge across the
   top of each box at full resolution (no padded, inset thumbnails),
   so the card reads premium next to the studio sting. */
.intro-band { position: relative; height: 92px; margin: -12px -10px 10px; overflow: hidden; background: rgba(0, 0, 0, .35); }
.intro-band-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.intro-cluster { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.intro-cluster img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.intro-band-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #f5b301, inset 0 0 16px rgba(245, 179, 1, .45); pointer-events: none; }
.intro-box-t { font: 800 15px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .03em; color: #ffd94d; margin-bottom: 4px; }
.intro-box-p { margin: 0; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #f5ecd7; }
.intro-fair { margin: 0 auto 12px; max-width: 540px; text-align: center; font-size: 11.5px; line-height: 1.5; font-weight: 600; color: #a8976b; }
.intro-go { display: block; width: min(320px, 100%); margin: 0 auto; height: 46px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #ffd94d, #f5b301); color: #2b1d00; font: 800 15px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; transition: transform .1s ease; }
.intro-go:active { transform: scale(.97); }
/* Narrower stages: stack the intro's three boxes; the card scrolls. */
@media (max-width: 900px) {
  .intro-boxes { grid-template-columns: 1fr; }
  .intro-band { height: 64px; }
}
@media (max-width: 699px) {
  .intro { padding: 8px; }
  .intro-card { padding: 12px 13px 11px; }
  .intro-box { padding: 10px; }
  .intro-band { margin: -10px -10px 9px; }
  .intro-box-t { font-size: 14px; }
  .intro-box-p { font-size: 12px; }
}
/* Short phone frame (364×440): compact the intro so it fits the frame. */
@media (max-width: 699px) and (max-height: 500px) {
  .intro-boxes { gap: 7px; margin-bottom: 9px; }
  .intro-box { padding: 8px; }
  .intro-band { height: 52px; margin: -8px -8px 8px; }
  .intro-box-p { line-height: 1.4; }
  .intro-fair { font-size: 11px; margin-bottom: 9px; }
  .intro-go { height: 40px; }
  .intro-card { padding: 10px 12px 9px; }
  .intro-logo { width: min(160px, 58%); margin-bottom: 5px; }
}
.rules-card { text-align: left; }
.rules-head { display: flex; justify-content: space-between; align-items: center; color: #fff; font: 800 15px system-ui, sans-serif; }
.rules-x { position: static; }
.rules-body { margin-top: 8px; color: #b9c4da; font: 500 12.5px/1.55 system-ui, sans-serif; }
.rules-body .paytab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rules-body .paytab th { text-align: left; color: #8fa0c0; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.rules-body .paytab td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.rules-body .paytab td img { width: 20px; height: 20px; object-fit: cover; border-radius: 5px; vertical-align: -6px; margin-right: 6px; }
/* --- FX: lightning, sparks, combo, celebrations ----------------------- */
.fxlayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fxSvg { z-index: 5; overflow: visible; }
#fxCanvas { z-index: 6; }
/* SKY STRIKE: the bolt itself is an SVG group of filled tapered
   polygons, animated by WAAPI (slam-in scaleY, flicker, dissolve) from
   game.js — no CSS animation needed here. What lives here is the sky
   flash that precedes it, the impact flash disc, the hit-stop freeze
   and the tiered board shakes that sell the impact. */
.skyflash { position: absolute; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(255,246,214,.85), rgba(255,220,130,.28) 55%, transparent); }
.flashdisc { position: absolute; z-index: 6; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.grid.hitstop .tile { animation-play-state: paused; }
.board.shk1 { animation: shkA .2s linear; }
@keyframes shkA { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, .8px); } 55% { transform: translate(1.3px, -1px); } 80% { transform: translate(-.7px, -.5px); } }
.board.shk2 { animation: shkB .28s linear; }
@keyframes shkB { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 1.2px); } 45% { transform: translate(2.6px, -1.8px); } 70% { transform: translate(-1.6px, -1px); } }
.tile.hitpop { animation: hitpop .34s cubic-bezier(.2, 2.2, .4, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes hitpop { 0% { transform: scale(.82); filter: brightness(2.3); } 55% { transform: scale(1.15); filter: brightness(1.65); } 100% { transform: scale(1); filter: brightness(1); } }
.tile.won { animation: crackle .28s linear 2; }
@keyframes crackle { 0%, 100% { filter: brightness(1.25); } 50% { filter: brightness(1.9); } }
.ring { position: absolute; z-index: 6; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2.5px solid #fff; border-radius: 50%; pointer-events: none; animation: ringx .55s cubic-bezier(.17, .61, .35, 1) forwards; }
@keyframes ringx { 0% { transform: scale(.4); opacity: .95; } 55% { opacity: .5; } 100% { transform: scale(3.4); opacity: 0; } }
.board.shake { animation: shk .24s linear; }
@keyframes shk { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2.5px, 1px); } 45% { transform: translate(2px, -1.5px); } 70% { transform: translate(-1.5px, -1px); } }
.board.thud { animation: thd .14s ease-out; }
@keyframes thd { 0% { transform: translateY(0); } 40% { transform: translateY(1.6px); } 100% { transform: translateY(0); } }
.grid.storm { animation: stormf .16s steps(2) infinite alternate; }
@keyframes stormf { from { filter: brightness(1); } to { filter: brightness(1.22); } }
.grid.anticip { animation: anticip 1s ease-in-out infinite alternate; }
@keyframes anticip { from { box-shadow: inset 0 0 0 1px rgba(255,217,77,.25), 0 18px 44px rgba(0,0,0,.62), 0 0 12px rgba(255,180,0,.25); } to { box-shadow: inset 0 0 0 2px rgba(255,217,77,.8), 0 18px 44px rgba(0,0,0,.62), 0 0 34px rgba(255,180,0,.65); } }
@keyframes sqpulse { 0% { filter: brightness(1); } 40% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
@keyframes sqglow { 0% { opacity: 0; } 30% { opacity: .85; } 100% { opacity: 0; } }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes punch { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.7); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes comboin { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }/* --- win-tier celebrations --- */
.celeb { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, rgba(3,2,10,.52), rgba(3,2,10,.93) 80%); }
.celeb[hidden] { display: none; }
.celeb.t1 { --c1: #aee6ff; --c2: #1f7fe0; --ray: rgba(87,200,255,.15); --glow: rgba(87,200,255,.85); }
.celeb.t2 { --c1: #e3ccff; --c2: #6a1fe0; --ray: rgba(183,140,255,.15); --glow: rgba(150,90,255,.9); }
.celeb.t3 { --c1: #fff3b0; --c2: #f5a301; --ray: rgba(255,217,77,.16); --glow: rgba(255,190,0,.9); }
.celeb.t4 { --c1: #ffc46b; --c2: #e63e00; --ray: rgba(255,110,26,.16); --glow: rgba(255,90,0,.95); }
.celeb.t5 { --c1: #ffe3fb; --c2: #ff2fb3; --ray: rgba(255,79,216,.17); --glow: rgba(255,47,179,.95); }
.celeb-rays { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(var(--ray) 0deg 11deg, transparent 11deg 23deg); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 64%); mask-image: radial-gradient(circle, #000 0%, transparent 64%); animation: rayspin 7s linear infinite; }
@keyframes rayspin { to { transform: rotate(360deg); } }
.celeb-rays2 { animation-duration: 13.5s; animation-direction: reverse; opacity: .5; }
.celeb-core { position: absolute; left: 50%; top: 50%; width: 125%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 62%); opacity: .26; pointer-events: none; animation: corepulse 1.6s ease-in-out infinite alternate; }
@keyframes corepulse { from { scale: .94; opacity: .2; } to { scale: 1.05; opacity: .3; } }
.celeb-canvas, .celeb-bolts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celeb-bolts { overflow: visible; }
.celeb-inner { position: relative; text-align: center; padding: 0 10px; }
.celeb-tier { font: 900 min(54px, 12.5cqi) 'Red Hat Display', system-ui, sans-serif; letter-spacing: .02em; line-height: 1.05; background: linear-gradient(180deg, #ffffff 5%, var(--c1) 45%, var(--c2) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px var(--glow)) drop-shadow(0 3px 7px rgba(0,0,0,.65)); }
.celeb-tier .ch { display: inline-block; background-image: linear-gradient(180deg, #ffffff 5%, var(--c1) 48%, var(--c2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: chslam .5s cubic-bezier(.16, 1.6, .3, 1) backwards; animation-delay: var(--chd, 0ms); }
@keyframes chslam { 0% { transform: translateY(-46px) scale(2.6); opacity: 0; } 55% { opacity: 1; } 72% { transform: translateY(3px) scale(.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes slam { 0% { transform: scale(3); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.celeb-money { margin-top: 10px; font: 900 min(72px, 17cqi) 'Red Hat Display', system-ui, sans-serif; font-variant-numeric: tabular-nums; line-height: 1.02; background-image: linear-gradient(100deg, #e89b00 0%, #ffd94d 34%, #fffbe8 50%, #ffd94d 66%, #e89b00 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255,190,0,.55)) drop-shadow(0 3px 8px rgba(0,0,0,.7)); animation: moneyshine 1.8s linear infinite; }
.celeb-money[hidden] { display: none; }
@keyframes moneyshine { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.celeb-amt { margin-top: 4px; color: var(--c1); font: 800 min(21px, 5.4cqi) 'Red Hat Display', system-ui, sans-serif; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px var(--glow), 0 2px 7px rgba(0,0,0,.8); }
.celeb-amt.landed { animation: punch2 .28s cubic-bezier(.2, 2.4, .4, 1); }
.celeb-ringpulse { position: absolute; left: 50%; top: 55%; width: 130px; height: 130px; border: 3px solid var(--c1, #ffd94d); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.celeb-ringpulse.go { animation: ringpulse .7s ease-out forwards; }
@keyframes ringpulse { 0% { transform: translate(-50%, -50%) scale(.35); opacity: .85; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
.slayers { transition: box-shadow .35s ease; }
.slayers.celeb-edge-on { box-shadow: inset 0 0 0 3px var(--celeb-edge, rgba(255,217,77,.8)), inset 0 0 72px -4px var(--celeb-edge, rgba(255,217,77,.8)); }
@keyframes punch2 { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.cshake-sm { animation: shk .26s linear 2; }
.cshake-md { animation: shk .26s linear 3; }
.cshake-lg { animation: shkbig .3s linear 3; }
.cshake-xl { animation: shkbig .3s linear 4; }
@keyframes shkbig { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 2px) rotate(-.3deg); } 45% { transform: translate(4.5px, -3px) rotate(.3deg); } 70% { transform: translate(-3.5px, -2px); } }
/* CREDIT pill (topbar left): the engine balance, live via
   engine.on('balance'); hidden until a shell reports one. */
.credit { position: absolute; left: 2px; top: 0; display: flex; align-items: baseline; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,217,77,.45); background: rgba(10,7,20,.8); color: #e8dcbc; font: 700 10px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .12em; white-space: nowrap; }
.credit b { color: #ffe98a; font-size: 11.5px; letter-spacing: .03em; }
.credit[hidden] { display: none; }
/* --- LEFT RAIL (per roo's reference card stack, gold skin) ----------
   Lives in the zone's LEFT gutter, outside the fixed stage; game.js
   adds .has-rail to the zone only when the gutter is wide enough.
   Card A mirrors the bet + the Gold Chance ante; Card B is the buy
   entry (the Golden buy price, opening the shell's BONUS BUY popup —
   the bottom bar no longer carries a buy button) and doubles as the
   free-spins counter while a bonus runs; Card C shows the current
   round's WIN + multiplier. All drive the SAME state as the shell —
   no second source of truth. */
.rail { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 2; display: none; flex-direction: column; gap: 14px; width: 194px; }
.slayers.has-rail .rail { display: flex; }
.rail-card { border-radius: 16px; border: 2px solid rgba(255,217,77,.75); background: linear-gradient(165deg, rgba(26,19,6,.93), rgba(10,7,3,.95)); box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,233,138,.25), 0 0 18px rgba(255,190,0,.14); padding: 14px 14px 13px; color: #f5ecd7; text-align: center; box-sizing: border-box; }
.rail-lbl { display: block; font: 900 15px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .18em; color: #ffe9a8; }
.rail-amt { display: block; margin-top: 3px; font: 900 30px 'Red Hat Display', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.rail-sub { display: block; margin-top: 3px; font: 700 10.5px system-ui, sans-serif; letter-spacing: .09em; color: #a8976b; }
.rail-flbl { margin-top: 13px; font: 800 11.5px/1.5 system-ui, sans-serif; letter-spacing: .06em; color: #e8dcbc; }
.rail-swrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 9px; }
.rail-state { font: 900 13px system-ui, sans-serif; letter-spacing: .06em; color: #8fa0c0; min-width: 32px; text-align: left; }
.rail.ante-on .rail-state { color: #ffd94d; }
button.rail-buy { width: 100%; font: inherit; cursor: pointer; transition: transform .1s ease, box-shadow .15s ease; }
button.rail-buy:hover { box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,233,138,.25), 0 0 26px rgba(255,190,0,.3); }
button.rail-buy:active { transform: scale(.97); }
/* During free spins the BUY card is a status card, not a button:
   FREE SPINS + the spins remaining, buying disabled until it ends. */
button.rail-buy.fs { cursor: default; border-color: rgba(110,231,255,.75); box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(190,240,255,.25), 0 0 20px rgba(110,231,255,.22); }
button.rail-buy.fs:hover { box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(190,240,255,.25), 0 0 20px rgba(110,231,255,.22); }
button.rail-buy.fs:active { transform: none; }
button.rail-buy.fs .rail-lbl { color: #aee6ff; }
button.rail-buy.fs .rail-amt { color: #6ee7ff; }
/* Card C — WIN: the current round's winnings and its multiplier
   (win ÷ total bet). While free spins run it carries the BONUS
   TOTAL accumulating across the bonus. */
.rail-mult { display: block; margin-top: 1px; font: 900 19px 'Red Hat Display', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #ffd94d; text-shadow: 0 0 14px rgba(255,190,0,.35), 0 2px 8px rgba(0,0,0,.7); }