/* Oh My Gato! Bonus Round (the Midway world, data-world="bonus" on the overlay): the look of the slot-machine show (site/bonus.js), shared since 22 Oct 2026 by
   every way to play: Play STEEP and Pass one phone (/), You vs CPU (/cpu/), the player phones (/join/)
   and the TV (/room/). Lifted from site/index.html, where it lived from 13 Oct 2026
   (storyboards/bonus-round-shotlist.html), so solo looks exactly as it did. One change: the classes
   inside the overlay are b- prefixed (b-ch, b-spin, b-flash ...), because a host page's own classes
   reached in (/room/ and /cpu/ style their answer tiles .ch, which boxed every letter of the title).
   A full-screen takeover, not a card. The clip plays edge to edge (cropped to its safe middle on a
   phone, feathered into the page), a live glow sampled from the clip fills the rest of the screen, the
   contour lines sit over it, and bulbs chase around the screen edge while the reels spin. Everything
   that moves is transform or opacity, and reduced motion gets stills.
   The host page supplies --ink, --accent, --accent-ink and --display (all four pages define them) and
   the body font; bonus.js injects the overlay at the end of <body> on first use. */
.bonus{position:fixed;inset:0;z-index:70;background:var(--ground,#050b0e);overflow:hidden;color:var(--ink);touch-action:none}
.bonus .bglow{position:absolute;inset:-12%;width:124%;height:124%;filter:blur(26px) saturate(1.25);opacity:.75}
/* Static velvet glow (no topo lines: the Midway has none). */
.bonus .btopo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--surface-2,#2a1018) 80%,transparent),transparent 72%);pointer-events:none}
.bonus .bvignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 38%,rgba(5,11,14,.55) 78%,rgba(5,11,14,.9));pointer-events:none}
.bonus .bscene{position:absolute;left:50%;top:42%;width:var(--bs);height:var(--bs);--bs:min(140vw,86vh);transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
@media (min-aspect-ratio:1/1){.bonus .bscene{--bs:min(100vw,100vh)}}
.bonus video,.bonus .bposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bonus .bscene.b-shake{animation:bshake .32s cubic-bezier(.36,.07,.19,.97) both}
@keyframes bshake{10%,90%{transform:translate(calc(-50% - 2px),-50%)}20%,80%{transform:translate(calc(-50% + 5px),calc(-50% + 2px))}30%,50%,70%{transform:translate(calc(-50% - 9px),calc(-50% - 3px))}40%,60%{transform:translate(calc(-50% + 9px),calc(-50% + 3px))}}
.bonus .bbulbs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 6px rgba(255,176,32,.8))}
.bonus .bbulbs rect{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:0 26;opacity:.55}
.bonus.b-spin .bbulbs rect{opacity:1;animation:bchase .24s steps(2) infinite}
.bonus.b-win .bbulbs rect{opacity:1;animation:bwin .18s steps(2) 6}
@keyframes bchase{to{stroke-dashoffset:-26}}
@keyframes bwin{50%{opacity:.15}}
.bonus .reels{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;gap:min(3vw,18px);width:min(92vw,680px)}
.bonus .reel{flex:1;aspect-ratio:3/4;overflow:hidden;border-radius:16px;background:#f3ead8;box-shadow:inset 0 14px 18px rgba(0,0,0,.38),inset 0 -14px 18px rgba(0,0,0,.38),0 0 0 4px #c9cfd1,0 18px 50px rgba(0,0,0,.55);transition:box-shadow .25s}
.bonus .reel i{display:block;font-style:normal}
.bonus .reel b{display:flex;align-items:center;justify-content:center;height:var(--row,100px);font-family:var(--display);font-weight:800;font-size:calc(var(--row,100px) * .3);color:var(--ground,#0b1418)}
.bonus .reels.b-lock .reel{box-shadow:inset 0 14px 18px rgba(0,0,0,.25),inset 0 -14px 18px rgba(0,0,0,.25),0 0 0 4px var(--accent),0 0 46px rgba(255,176,32,.75)}
.bonus .bfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bonus .btop{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.bonus .btop button{pointer-events:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(5,11,14,.55);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.bonus .btop .bsound{border-color:var(--accent);color:var(--accent)}
.bonus .bskip{margin-left:auto}
.bonus .bbottom{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:14px;padding:0 max(18px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:linear-gradient(transparent,rgba(5,11,14,.85) 38%)}
.bonus .btitle{text-align:center;font-family:var(--brand);font-weight:800;text-transform:none;font-size:clamp(46px,14vw,120px);line-height:.92;color:var(--accent);text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 40px rgba(255,176,32,.5);letter-spacing:.01em;min-height:.92em}
.bonus .btitle:empty{min-height:0}
.bonus .btitle.b-slam{animation:bslam .5s cubic-bezier(.2,.9,.2,1.15) both}
@keyframes bslam{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
.bonus .bline{margin:0;text-align:center;font-weight:600;font-size:clamp(16px,4.6vw,22px);max-width:640px}
.bonus .bline:empty{display:none}
/* Tombola on the intro card, the Bonus Round tier cat over the picker. Fixed boxes: no layout shift. */
.bonus .bart{display:block;width:min(176px,42vw);height:auto;aspect-ratio:480/323;border:2px solid var(--accent);border-radius:14px;object-fit:cover}
.bonus .btier{display:block;width:min(120px,30vw);height:auto;aspect-ratio:1/1;object-fit:contain}
.bonus .bpull,.bonus .bgo{min-height:58px;padding:0 34px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:800;font-size:19px;letter-spacing:.02em;cursor:pointer;box-shadow:0 0 0 6px rgba(255,176,32,.18),0 12px 30px rgba(0,0,0,.45)}
.bonus .bpull::after{content:"\2193";margin-left:10px}
.bonus .bcats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:min(100%,640px)}
.bonus .bcats button{min-height:52px;border-radius:14px;border:1px solid rgba(255,176,32,.45);background:rgba(5,11,14,.7);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion:reduce){.bonus .btitle.b-slam,.bonus .bscene.b-shake,.bonus.b-spin .bbulbs rect,.bonus.b-win .bbulbs rect{animation:none}.bonus .reel{transition:none}}
/* Catalog techniques, translated for the page (offline HyperFrames registry, Apache-2.0; timings
   from each item's source). Transform and opacity only, staggers under 60 ms, nothing loops.
     shutter-slam      entry: two panels slam shut on the game and open on the machine
     char-slam-explode titles (BONUS ROUND, JACKPOT!, the bonus name) slam in letter by letter
     beat-accent       a full-screen impact flash on the shutter, the lever and the jackpot (--bslam)
     light-sweep-pass  one light band crosses each reel as it locks
     per-word-rise     the rule line rises word by word
     cinematic-zoom    exit: the takeover zooms through and fades back to the question
     badge-pop         the bonus badge on the next question pops in */
.bonus{--bslam:cubic-bezier(.19,1,.22,1)}
.bonus .btitle .b-wd{display:inline-block;white-space:nowrap}
.bonus .btitle .b-ch{display:inline-block;white-space:pre}
.bonus .btitle.b-chars .b-ch{animation:bchar .44s var(--bslam) both;animation-delay:calc(var(--i) * 36ms)}
@keyframes bchar{from{transform:translateY(-.32em) scale(2.1);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
.bonus .bline .b-w{display:inline-block;white-space:pre}
.bonus .bline.b-rise .b-w{animation:brise .46s var(--bslam) both;animation-delay:calc(var(--i) * 45ms + 120ms)}
@keyframes brise{from{transform:translateY(.7em);opacity:0}to{transform:none;opacity:1}}
.bonus .bflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,240,205,.95),rgba(255,176,32,.38) 45%,transparent 76%);opacity:0;pointer-events:none}
.bonus .bflash.b-flash{animation:bflash .4s var(--bslam) both}
@keyframes bflash{from{opacity:.95}to{opacity:0}}
.bonus .bshut{position:absolute;left:0;right:0;height:50.5%;background:#050b0e;pointer-events:none;z-index:3}
.bonus .bshut.b-top{top:0;border-bottom:3px solid var(--accent);transform:translateY(-102%)}
.bonus .bshut.b-bot{bottom:0;border-top:3px solid var(--accent);transform:translateY(102%)}
.bonus.b-enter .bshut.b-top{animation:bshutT .66s cubic-bezier(.45,0,.55,1) both}
.bonus.b-enter .bshut.b-bot{animation:bshutB .66s cubic-bezier(.45,0,.55,1) both}
@keyframes bshutT{0%{transform:translateY(-102%)}36%,54%{transform:none}100%{transform:translateY(-102%)}}
@keyframes bshutB{0%{transform:translateY(102%)}36%,54%{transform:none}100%{transform:translateY(102%)}}
.bonus .reel{position:relative}
.bonus .reel::after{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-100%);pointer-events:none}
.bonus .reels.b-lock .reel::after{animation:bsweep .62s cubic-bezier(.45,0,.55,1) both}
.bonus .reels.b-lock .reel:nth-child(2)::after{animation-delay:.07s}
.bonus .reels.b-lock .reel:nth-child(3)::after{animation-delay:.14s}
@keyframes bsweep{to{transform:translateX(100%)}}
.bonus.b-leave{animation:bleave .42s cubic-bezier(.65,0,.35,1) both}
@keyframes bleave{to{transform:scale(1.14);opacity:0}}
.bonuschip.pop{animation:bpop .9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bpop{0%{transform:scale(0);opacity:0}40%{transform:scale(1);opacity:1}62%{transform:scale(1.18)}80%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bonus .btitle .b-ch,.bonus .bline .b-w,.bonus .bflash,.bonus .bshut,.bonus.b-leave,.bonus .reel::after,.bonuschip.pop{animation:none!important}}
.bonuschip{display:inline-block;margin-left:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:11px;letter-spacing:.08em;border-radius:6px;padding:2px 7px;vertical-align:1px}
/* The overlay hides its parts with the hidden attribute; .bcats and .reels set display, so a page
   without its own [hidden] rule would still show them (all four pages have one; this keeps the overlay
   right on any page). */
.bonus[hidden],.bonus [hidden]{display:none!important}
/* The show's own screen-reader line, used when the page doesn't pass one (opts.live). */
.bonus .bsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}