/* The party picker is one scene, not a page to scroll through. */
#setup.active[data-step="0"]{height:calc(100svh - var(--rhr-header-height,90px));min-height:0;padding:4px 0 12px;display:flex;flex-direction:column;overflow:hidden}
#setup[data-step="0"]>.host-slot{flex:none;min-height:0}
#setup[data-step="0"]>.host-slot .avatar{width:clamp(42px,5.5svh,62px)!important}
#setup[data-step="0"]>.host-slot .speech{min-height:0;margin:0;padding:6px 12px;font-size:clamp(12px,1.5svh,15px);line-height:1.2}
#setup[data-step="0"] .setup-sheet{width:min(920px,100%);margin:3px auto 0;padding:clamp(9px,1.4svh,17px) clamp(10px,2vw,25px);flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;overflow:auto}
#setup[data-step="0"] .setup-sheet h1{font-size:clamp(25px,4svh,45px);line-height:1.02;margin:0 0 4px}
#setup[data-step="0"] .kicker{margin:0;font-size:clamp(10px,1.4svh,13px)}
#setup[data-step="0"] #setupBody>p{font-size:clamp(12px,1.7svh,16px);line-height:1.2;margin:3px 0 0}
#setup[data-step="0"] .rune-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;gap:clamp(3px,.8vw,11px);width:min(470px,100%);margin:clamp(6px,1.2svh,14px) auto}
#setup[data-step="0"] .player-rune{width:min(100%,11svh,95px);height:auto;min-width:0;aspect-ratio:1}
#setup[data-step="0"] .player-rune b{font-size:clamp(20px,3svh,37px)}
#setup[data-step="0"] .actions{margin:5px 0 0;flex-wrap:nowrap;gap:8px}
#setup[data-step="0"] .actions button{padding:clamp(8px,1.2svh,12px) 12px;font-size:clamp(13px,1.8svh,17px)}
#setup[data-step="0"] .actions .primary{flex:1;min-height:clamp(48px,7svh,68px);font-size:clamp(17px,2.4svh,23px);padding:10px 16px}
#setup[data-step="0"] #setupError{margin:2px 0;min-height:0;font-size:12px}

/* Desktop clock sits behind the Reaper. The wheel remains in front of both. */
@media(min-width:801px){
 #arena .host-slot{min-height:clamp(255px,31svh,375px);position:relative;overflow:visible}
 #arena .host{z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:4px}
 #arena .host .avatar{width:clamp(155px,20svh,215px)!important}
 #arena .host .speech{margin-top:0;max-width:650px}
 #wheelStage{z-index:4;position:relative;width:min(760px,100%);margin:auto}
 #wheelStage .wheel-wrap{width:min(560px,74vw,55svh);margin:6px auto}
}
#arena .clock-digits::after{content:attr(data-time);position:absolute;inset:0;color:#ed2138;-webkit-text-stroke:1px #ff9472;text-shadow:0 0 17px #e82929;clip-path:inset(calc(100% - var(--fill,0%)) 0 0 0);pointer-events:none}
#arena.clock-smoking .clock{box-shadow:inset 0 0 0 3px #180c11,inset 0 0 30px #f21b1838,0 8px 28px #000a,0 0 35px #b3857966}
#arena.clock-sparking .clock{box-shadow:inset 0 0 0 3px #180c11,inset 0 0 35px #f65a183c,0 8px 28px #000a,0 0 38px #e3342385}
@keyframes clockQuake{0%,100%{transform:none}15%{transform:translateX(-9px) scale(1.07)}30%{transform:translateX(9px) scale(1.07)}45%{transform:translateX(-6px) scale(1.04)}65%{transform:translateX(4px) scale(1.02)}}
@keyframes clockSlosh{0%,100%{transform:none}24%{transform:rotate(-4deg)}57%{transform:rotate(3deg)}77%{transform:rotate(-1deg)}}
#arena .clock{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
#arena .avatar{touch-action:none}
#arena .clock-digits{position:relative;display:inline-block;color:#ffe6ad;-webkit-text-stroke:1px #fff1d48c;user-select:none;-webkit-user-select:none}
#arena .clock-digits::after{color:#ee1832;-webkit-text-stroke:1px #ffbd80}
#arena .clock.clock-impact{animation:clockQuake 1.1s ease-out!important;filter:drop-shadow(0 0 35px #fc251f)!important}
#arena .clock::selection, #arena .clock-digits::selection{background:transparent;color:inherit}
#wheelStage .wheel-wrap::before{content:'';left:calc(50% - 16px);top:-15px;width:32px;height:38px;background:linear-gradient(90deg,#6f130d,#ffd693 45%,#ce3921);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 5px #000);font-size:0}
#wheelStage .wheel-image{aspect-ratio:1;object-fit:contain;transform-origin:50% 50%;filter:drop-shadow(0 10px 20px #000c)}

/* Race-style countdown: huge centre numerals that rush toward the viewer. */
#countdown{isolation:isolate;overflow:hidden;justify-content:center}
#countdown .kicker{position:absolute;top:19%;left:0;width:100%;z-index:2}
#countdown h2{position:absolute;top:24%;left:0;width:100%;font-size:clamp(22px,3vw,44px);z-index:2}
#countdown .countdown-stage{width:100%;height:min(70svh,820px);margin:0;position:relative;display:grid;place-items:center}
#countdown .chip-sprite{position:absolute;z-index:0;width:clamp(300px,60vmin,750px);left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);opacity:.42;filter:drop-shadow(0 0 45px #e2342a)}
#countdown .countdown-sigil{position:relative;z-index:1;width:100%;height:100%;aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;display:grid;place-items:center}
#countdown #countNumber{font:900 clamp(240px,71svh,760px)/.8 Georgia,serif;letter-spacing:-.09em;color:#e61631;-webkit-text-stroke:2px #ff985c;text-shadow:0 9px 0 #55020b,0 0 38px #fa091c,0 0 100px #a30810;filter:drop-shadow(0 0 22px #ff251b);user-select:none;-webkit-user-select:none;will-change:transform,opacity}
#countdown.go #countNumber{font-size:clamp(125px,36svh,390px)}
#countdown.beat #countNumber{animation:reaperRace .96s cubic-bezier(.14,.67,.18,1) both}
@keyframes reaperRace{0%{opacity:0;transform:scale(1.55);filter:blur(8px)}17%{opacity:1;filter:blur(0)}55%{opacity:1;transform:scale(1)}100%{opacity:.1;transform:scale(.52)}}
#countdown .countdown-instruction{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:12px;right:12px;margin:0 auto;z-index:3}

@media(max-width:800px){
 #setup.active[data-step="0"]{height:calc(100svh - var(--rhr-header-height,76px));padding:2px 0 max(5px,env(safe-area-inset-bottom))}
 #setup[data-step="0"] .rune-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,360px);gap:clamp(4px,1svh,10px);justify-content:center;margin:clamp(4px,1svh,10px) auto}
 #setup[data-step="0"] .player-rune{width:min(100%,11svh,82px);height:auto}
 #setup[data-step="0"] .player-rune b{font-size:clamp(22px,3.3svh,36px)}
 #arena .arena-center>.clock{display:inline-block}
 #wheelStage .wheel-wrap{width:min(470px,84vw,48svh)}
 #countdown .kicker{top:17%;font-size:16px}
 #countdown h2{top:22%;font-size:clamp(20px,5vw,33px)}
 #countdown .countdown-stage{height:70svh}
 #countdown #countNumber{font-size:min(69svh,85vw)}
 #countdown.go #countNumber{font-size:min(37svh,49vw)}
 #countdown .chip-sprite{width:min(78vw,58svh);opacity:.4}
}
@media(max-width:800px) and (max-height:680px){#setup[data-step="0"] .rune-grid{grid-template-columns:repeat(4,minmax(0,min(21vw,11svh,78px)));gap:clamp(4px,1vw,9px)}#setup[data-step="0"] .player-rune b{font-size:clamp(22px,4svh,34px)}}
@media(max-width:450px){#setup[data-step="0"] .setup-sheet{padding:7px 9px}#setup[data-step="0"]>.host-slot .speech{font-size:12px;max-height:45px;overflow:hidden}#setup[data-step="0"] .setup-sheet h1{font-size:clamp(25px,5svh,32px)}#setup[data-step="0"] .actions button{font-size:13px;padding:8px 8px}}

/* Android keyboards shrink the visible viewport; names remain editable and in view. */
#setup[data-step="0"] .player-nickname input{position:relative;z-index:1;display:block;min-height:48px;font-size:16px!important;line-height:1.3;color:#fff3df!important;-webkit-text-fill-color:#fff3df!important;caret-color:#ffcc81!important;background:#100b0c!important;opacity:1!important;user-select:text!important;-webkit-user-select:text!important;touch-action:manipulation}
#setup[data-step="0"] .player-nickname input::placeholder{color:#aa9788!important;-webkit-text-fill-color:#aa9788!important;opacity:1}
#setup[data-step="0"] .player-nickname:focus-within{position:relative;z-index:2}
@media(max-width:800px){#setup[data-step="0"] .names-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}#setup[data-step="0"] .player-nickname{margin:2px 0}#setup[data-step="0"] .setup-sheet{padding-bottom:max(12px,env(safe-area-inset-bottom));justify-content:flex-start;gap:7px}#setup[data-step="0"] .actions{margin-top:auto}}
@media(prefers-reduced-motion:reduce){.clock-slosh.clock,#countdown.beat #countNumber{animation:none!important}}

/* Keep the essential instruction visible among the tutorial illustrations. */
#tutorialCopy .rule-critical{font-weight:900;color:#ffe0aa;background:linear-gradient(110deg,#82120d,#351214);border:2px solid #e38d55;border-radius:10px;padding:clamp(8px,1.4svh,16px);box-shadow:0 0 22px #bd260e66}
#tutorialCopy .rule-critical::first-letter{color:#fff}

/* One carved notice descends on chains for milestones and wheel rewards. */
#milestoneShow[hidden]{display:none!important}
#milestoneShow{position:fixed;inset:0;z-index:85;pointer-events:none;display:grid;justify-items:center;align-content:start;padding-top:clamp(58px,14svh,145px);overflow:hidden;background:radial-gradient(ellipse at 50% 26%,#ff4a171f,transparent 70%)}
.milestone-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1svh,12px);width:min(780px,90vw);min-height:clamp(170px,27svh,270px);padding:clamp(17px,3vw,34px);text-align:center;background:linear-gradient(130deg,#3a353aeb,#1b1b24f5 45%,#2b1c20f5),url('assets/rhr-stone-wall.webp') center/cover;border:8px ridge #886a4c;border-radius:13px;box-shadow:inset 0 0 0 3px #100e15,inset 0 0 32px #000,0 22px 28px #000d,0 0 27px #e65c1855;animation:plaqueDrop 2.85s cubic-bezier(.21,.8,.22,1) both}
.milestone-copy:before,.milestone-copy:after,.badge-unlock-plaque:before,.badge-unlock-plaque:after{content:'';position:absolute;z-index:-1;bottom:calc(100% + 3px);width:10px;height:50svh;background:repeating-linear-gradient(180deg,#3b2f29 0 9px,#b7925d 10px 12px,#171016 13px 22px);border:2px solid #3b2519;box-shadow:1px 0 4px #000}
.milestone-copy:before,.badge-unlock-plaque:before{left:11%}.milestone-copy:after,.badge-unlock-plaque:after{right:11%}
.milestone-copy small{font:900 clamp(13px,2vw,20px)/1.2 Arial,sans-serif;letter-spacing:.19em;color:#ffd58e}
.milestone-copy strong{font:900 clamp(31px,6.8vw,83px)/.96 Georgia,serif;max-width:100%;color:#ffe9ba;text-shadow:0 3px 0 #54251a,0 0 16px #fb571b}
.milestone-copy span{font:800 clamp(15px,2.5vw,29px)/1.12 Arial,sans-serif;letter-spacing:.07em;color:#ffb77e}
.bone-rain{position:absolute;inset:0;overflow:hidden;z-index:1;mask-image:linear-gradient(to bottom,#000 75%,transparent)}
.bone-rain img{position:absolute;left:var(--bone-x);top:-100px;width:clamp(40px,9vw,140px);height:auto;opacity:0;filter:none;animation:boneFall 2.2s linear var(--bone-delay) both}
@keyframes plaqueDrop{0%{opacity:0;transform:translateY(-85svh) rotate(-4deg)}13%{opacity:1;transform:translateY(15px) rotate(2deg)}22%{transform:translateY(-6px) rotate(-1deg)}30%,76%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(-90svh) rotate(3deg)}}
@keyframes boneFall{0%{opacity:0;transform:translateY(-10vh) rotate(0)}12%{opacity:.85}95%{opacity:.8}100%{opacity:0;transform:translateY(120vh) rotate(var(--bone-turn))}}
@media(prefers-reduced-motion:reduce){.milestone-copy{animation:none;opacity:1}.bone-rain img{display:none}}

/* During a live attempt the guide is a harmless, evasive Reaper gag. */
body[data-scene="arena"] header nav>a,body[data-scene="arena"] header .language-picker{display:none!important}
body[data-scene="arena"] header>a{pointer-events:none}
body[data-scene="arena"] header [data-screen="map"]{position:relative;transform-origin:center}
#wheelReward[hidden]{display:none!important}
#wheelReward{position:fixed;inset:0;z-index:86;display:grid;justify-items:center;align-content:start;padding-top:clamp(58px,14svh,145px);pointer-events:none;background:radial-gradient(ellipse at 50% 26%,#d639193a,transparent 70%);overflow:hidden}
#wheelReward .wheel-reward-copy{animation:plaqueDrop 2.4s cubic-bezier(.21,.8,.22,1) both}
#wheelReward .wheel-reward-copy strong{font-size:clamp(37px,7.6vw,82px);color:#ffe1a7;overflow-wrap:anywhere}
#wheelReward .wheel-reward-copy span{max-width:min(90vw,760px);font-size:clamp(18px,3vw,34px)}
@media(max-width:800px){#setup[data-step="0"] .actions .primary{font-size:clamp(17px,2.5svh,22px)!important;padding:11px 12px!important}#wheelReward .wheel-reward-copy strong{font-size:clamp(32px,8vw,62px)}}

/* The Surface Pro has desktop width but a touch-sized, tall play area. */
@media (min-width:801px) and (min-height:700px){
 #setup[data-step="0"] .setup-sheet{width:min(1120px,100%);max-height:820px;justify-content:flex-start;gap:clamp(8px,1.5svh,18px);padding:clamp(18px,2.2svh,27px) clamp(24px,3vw,42px)}
 #setup[data-step="0"] #setupBody{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
 #setup[data-step="0"] .setup-sheet h1{font-size:clamp(40px,5.4svh,63px);margin-bottom:8px}
 #setup[data-step="0"] #setupBody>p{font-size:clamp(17px,2svh,22px);line-height:1.3}
 #setup[data-step="0"] .rune-grid{width:min(550px,100%);gap:clamp(8px,1.5vw,17px);margin:clamp(6px,1svh,10px) auto}
 #setup[data-step="0"] .player-rune{width:min(100%,12svh,108px)}
 #setup[data-step="0"] .player-rune b{font-size:clamp(30px,4svh,45px)}
 #setup[data-step="0"]>.host-slot .avatar{width:clamp(70px,8svh,95px)!important}
 #setup[data-step="0"]>.host-slot .speech{font-size:clamp(15px,1.8svh,19px);padding:9px 16px}
}

/* Flames mark the lobby and active run only; the lift and tunnel remain unobscured. */
body:not([data-scene="lobby"]):not([data-scene="arena"]) .floor-fire{display:none!important}
/* Return the live time to its carved case, with steady-width digits. */
#arena .arena-center>.clock{display:inline-block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.06em}
#arena .clock-digits{font-family:inherit;-webkit-text-stroke:0;color:#ffe6ad}
/* Only the opening invitation and the live arena show the red floor flames. */
body[data-scene="lobby"] .floor-fire{display:none}
body[data-scene="lobby"]:has(#intro.active) .floor-fire,
body[data-scene="lobby"]:has(#entry.active) .floor-fire{display:block}
@media(min-width:801px){#arena .host .avatar{width:clamp(145px,17svh,190px)!important}}

/* The wheel is a focused moment: no competing STOP prompt or player controls. */
.wheel-open #arena .arena-instruction,.wheel-open #arena .arena-notice,.wheel-open #arena .player-cards,.wheel-open #arena .milestones,.wheel-open #arena .reaction-prompt{display:none!important}
.wheel-open #wheelStage{padding:0;margin:0 auto}
.wheel-open #wheelStage .wheel-caption{font-size:clamp(16px,2svh,21px);min-height:1.3em;margin:3px 0}
.wheel-open #wheelStage .wheel-fairness{font:600 clamp(11px,1.5svh,14px)/1.35 system-ui,sans-serif;color:#ddbb93;margin:3px 0 8px}
.wheel-open #wheelStage .actions{justify-content:center;margin:5px auto}
.wheel-open #wheelStage .actions button{min-width:200px}
/* Only two primary choices appear at the end; optional records live below. */
body:has(#results.active) header nav{display:none}
#results .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 12px}
#results .result-actions>a,#results .result-actions>button{text-align:center;min-height:56px;display:grid;place-items:center}
#results .result-actions>button[hidden]{display:none!important}
#results .result-actions:has(#resultBack[hidden]){grid-template-columns:1fr}
#results .result-step{font:800 13px system-ui,sans-serif;color:#e9ba80;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 18px}
#results:has([data-result-stage="1"]:not([hidden])) .results-sheet{width:min(1120px,100%);max-width:none}
#results .result-halls{width:100%;min-width:0;margin:26px 0}
#results .result-halls .grave-stone{max-width:980px}
#results .result-halls .medal-guide,#results .result-halls .quarter-panel{margin:24px 0}
#results .result-halls .season-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#results .result-halls .stone-crest{pointer-events:none}
#results .certificate-section,#results .season-submit{padding:14px 0}
#results .aftercare-details{border-top:1px solid #73543c;padding-top:14px}
#results .aftercare-details>summary{cursor:pointer;color:#e9ba80;font-weight:700;padding:12px 0}
#results .aftercare-details>summary:focus-visible{outline:3px solid #ffe2aa;outline-offset:3px}
/* A calm, solid bone silhouette reads clearly during milestone celebrations. */
.bone-rain img{filter:none!important}
@media(max-width:800px){#results .result-actions{grid-template-columns:1fr 1fr;gap:8px}#results .result-actions>a,#results .result-actions>button{font-size:14px;padding:10px 6px;min-height:50px}}

/* The game area uses the available height, leaving all player controls reachable. */
body[data-scene="arena"] header{height:clamp(45px,6svh,60px);padding-block:3px;justify-content:flex-end}
body[data-scene="arena"] header>a{display:none!important}
#arena.active{padding:0 0 max(14px,env(safe-area-inset-bottom));min-height:calc(100svh - clamp(45px,6svh,60px));display:flex;flex-direction:column;justify-content:flex-start}
#arena .host-slot{min-height:0}
#arena .host .speech{font-size:clamp(13px,1.65svh,17px);min-height:0;padding:7px 12px;margin:2px auto}
#arena .clock{font-size:clamp(66px,10svh,118px);padding-block:6px 9px}
#arena .milestones{margin:6px auto 3px}
#arena .player-cards{margin-top:clamp(6px,1svh,12px)}
#arena .arena-notice{margin:7px auto 0}
.wheel-open #arena .host{display:none!important}
@media(min-width:801px){#arena .host .avatar{width:clamp(110px,18svh,180px)!important}}
@media(max-width:800px){#arena .host .avatar{width:clamp(72px,13svh,110px)!important}#arena .host .speech{font-size:clamp(12px,1.65svh,14px);padding:5px 9px}#arena .clock{font-size:clamp(57px,9svh,84px);min-width:min(360px,90vw)}#arena .arena-notice{font-size:12px}}
@media(max-height:670px){#arena .host .avatar{width:clamp(66px,11svh,96px)!important}#arena .arena-notice{display:none}}
/* Permanent stone sockets per soul: the same image lights up in place. */
#arena .player-emblems{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(2px,.5vw,6px);width:min(100%,370px);min-height:clamp(34px,5vw,53px);margin:10px 0 1px}
#results .result-emblems{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:38px}
.game-emblem{display:inline-grid;place-items:center;position:relative;width:36px;height:36px;flex:none;border-radius:50%;background:#161018ad;box-shadow:0 0 0 1px #956c50a1}
.game-emblem img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#arena .rune-slot{width:100%;height:auto;aspect-ratio:1;min-width:0;background:url('assets/badges/dormant-stone.svg') center/contain no-repeat;box-shadow:none;isolation:isolate;transition:filter .28s}
#arena .rune-slot img{position:relative;z-index:1;opacity:1;filter:drop-shadow(0 1px 2px #0009)}
#arena .rune-slot.is-locked img{filter:grayscale(1) brightness(.36);opacity:.2}
#arena .rune-slot.is-active{filter:drop-shadow(0 0 6px #f0392da8)}
#arena .rune-slot.badge-fallback img{opacity:.25}
#arena .rune-slot.badge-fallback:after{content:'✦';position:absolute;z-index:2;color:#f36a37;font-size:22px;text-shadow:0 0 8px #f40}
#arena .rune-slot.rune-awakening{animation:runeWake 1.1s ease-out both}
@keyframes runeWake{0%{transform:scale(.88);filter:grayscale(1) brightness(.45)}30%{transform:scale(1.38);filter:brightness(2.4) drop-shadow(0 0 16px #ef3c18)}62%{transform:scale(1.08);filter:brightness(1.6) drop-shadow(0 0 12px #fc7130)}100%{transform:scale(1);filter:drop-shadow(0 0 6px #f0392da8)}}
#results .game-emblem{width:44px;height:44px}
#badgeUnlock[hidden]{display:none!important}
#badgeUnlock{position:fixed;z-index:90;inset:0;display:grid;justify-items:center;align-content:start;padding-top:clamp(60px,12svh,130px);pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,#180a12d6,transparent 70%);text-align:center;color:#ffe9c3}
.badge-unlock-plaque{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:min(92vw,520px);padding:clamp(12px,2svh,22px) 14px clamp(15px,2svh,24px);background:linear-gradient(130deg,#363037,#14131e 55%,#36202a);border:7px ridge #9a704e;border-radius:12px;box-shadow:inset 0 0 0 3px #100d14,0 22px 35px #000d,0 0 32px #ef352f66;animation:plaqueDrop 2.55s cubic-bezier(.21,.8,.22,1) both}
.badge-unlock-plaque>small{font:900 clamp(12px,2vw,17px)/1.1 Arial,sans-serif;letter-spacing:.22em;color:#f6c99c}
.badge-unlock-plaque>strong{font:900 clamp(20px,4vw,31px)/1.1 Georgia,serif;max-width:100%;overflow-wrap:anywhere;color:#ffe3b4}
.badge-unlock-plaque>span{font:800 clamp(15px,2.9vw,23px)/1.15 Arial,sans-serif;color:#ffa774}
.badge-unlock-art{position:relative;width:clamp(132px,20svh,240px);aspect-ratio:1;margin:0 auto}
.badge-unlock-art>img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;opacity:1;animation:runeIgnite 2.55s ease-out both}
.badge-traces{position:absolute;inset:0}.badge-traces i{position:absolute;left:50%;top:50%;width:4px;height:29px;border-radius:5px;background:linear-gradient(#ffe0ae,#fb512e,transparent);box-shadow:0 0 6px #fb8a3a;transform:rotate(var(--ray)) translateY(-69px);opacity:0;animation:badgeSpark .9s ease-out var(--delay) both}
@keyframes runeIgnite{0%,10%{transform:scale(.85);filter:grayscale(1) brightness(.6)}30%{transform:scale(1.13);filter:brightness(2.2)}52%,84%{transform:scale(1);filter:brightness(1)}100%{transform:scale(.93);filter:brightness(.9)}}
@keyframes badgeSpark{0%{opacity:0;transform:rotate(var(--ray)) translateY(-35px) scaleY(.4)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--ray)) translateY(-135px) scaleY(.12)}}
.milestone-medal{width:clamp(65px,10svh,115px);height:clamp(65px,10svh,115px);object-fit:contain;filter:drop-shadow(0 4px 10px #000)}
@media(prefers-reduced-motion:reduce){.badge-traces i{display:none}.badge-unlock-plaque,.badge-unlock-art>img,.rune-slot.rune-awakening{animation:none!important;opacity:1}}

/* The clock stays in its case; the red layer follows a rippling liquid edge. */
#arena .clock{position:relative;overflow:visible;isolation:isolate;transform-origin:50% 86%}
#arena .clock-digits{color:#ffe9c1;text-shadow:0 2px 0 #714637,0 0 17px #ffcb9355,0 0 2px #fff;letter-spacing:inherit;font-variant-numeric:tabular-nums;line-height:1.05}
#arena .clock-digits::after{content:attr(data-time);position:absolute;inset:0;color:#ec233a;background:linear-gradient(180deg,#ffb096 0%,#f3374c 30%,#b90c21 75%,#8a0c1c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.5px #ff967c;filter:drop-shadow(0 0 8px #fb222c);text-shadow:none;clip-path:polygon(0 calc(100% - var(--fill) + 4px),12% calc(100% - var(--fill) + 1px),25% calc(100% - var(--fill) - 3px),39% calc(100% - var(--fill) - 4px),52% calc(100% - var(--fill) - 2px),66% calc(100% - var(--fill) + 2px),82% calc(100% - var(--fill) + 4px),100% calc(100% - var(--fill) + 1px),100% 100%,0 100%);pointer-events:none}
#arena .clock.clock-slosh{animation:clockSlosh .85s cubic-bezier(.19,.7,.2,1) both!important}
#arena .clock.clock-slosh .clock-digits::after{animation:liquidSlosh .85s ease-in-out both!important}
@keyframes liquidSlosh{0%,100%{transform:translateY(0) skewY(0)}25%{transform:translateY(-3px) skewY(-7deg)}55%{transform:translateY(3px) skewY(5deg)}77%{transform:translateY(-1px) skewY(-2deg)}}
#arena .clock:focus-visible{outline:3px solid #ffd192;outline-offset:4px}
#arena .clock::selection,#arena .clock *::selection{background:transparent;color:inherit}

/* Short, registered frame changes share the exact head and jaw artwork. */
.avatar.expression-hurt-left .skull-head{transform:translate(2%,.5%) rotate(4deg)}
.avatar.expression-hurt-right .skull-head{transform:translate(-2%,.5%) rotate(-4deg)}
.avatar.expression-hurt-left .skull-jaw{transform:translateX(3%) rotate(-5deg)}
.avatar.expression-hurt-right .skull-jaw{transform:translateX(-3%) rotate(5deg)}
.flying-tooth{position:fixed;z-index:235;width:clamp(16px,3vw,36px);height:auto;pointer-events:none;animation:flyTooth .85s ease-out forwards;filter:drop-shadow(0 3px 2px #000)}
@keyframes flyTooth{0%{transform:translate(0,0) rotate(0);opacity:1}65%{opacity:1}100%{transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--fly-turn));opacity:0}}
/* Scare tier 1 keeps empty sockets; later tiers use the skull's own fitted flame layers. */
.scare-blackout{pointer-events:none;animation:scareDark 2.05s ease-out both}
.scare-blackout .scare-avatar{aspect-ratio:1823/3169;width:min(91vw,52svh,370px);filter:none;animation:scareAttack 2.05s cubic-bezier(.18,.8,.23,1) both}
.scare-tier-1 .eye{opacity:0!important}
.scare-tier-2 .eye,.scare-tier-3 .eye{opacity:1!important}
.scare-tier-3 .skull-head{animation:skullFury .23s ease-in-out 8 alternate}
.scare-tier-3 .skull-jaw{animation:scareJawLaugh .17s ease-in-out 10 alternate!important}
.scare-level-1:before{background:#75101e}
.scare-level-2:before{background:#ef2f21}
.scare-level-3:before{background:#f50121;animation:scareFlash .43s steps(2,end) 4}
.scare-blackout.arena-scare{height:min(52svh,440px);bottom:auto;background:linear-gradient(#000b,#0000);animation:none}
.scare-blackout.arena-scare .scare-avatar{top:45%;width:min(42vw,29svh,260px)}
.scare-blackout.arena-scare:before{height:60%;bottom:auto}
@keyframes skullFury{to{transform:translateX(4%) rotate(4deg) scaleX(1.04)}}
.scare-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scare-sparks i{position:absolute;top:49%;left:50%;width:6px;height:clamp(40px,10svh,90px);background:linear-gradient(#fff0,#ffcd60,#f11a2c,#fff0);transform-origin:50% 100%;animation:rageSpark .75s ease-out infinite;animation-delay:calc(var(--index)*-.06s);--angle:calc(var(--index)*30deg)}
@keyframes rageSpark{0%{opacity:0;transform:rotate(var(--angle)) translateY(-55px) scaleY(.2)}45%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-180px) scaleY(1)}}
#sparring.active{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;min-height:calc(100svh - 76px);padding:8px 0 28px}
body:has(#sparring.active) header{display:none}
body:has(#sparring.active) #sparring.active{min-height:100svh}
#sparring h1{font-size:clamp(28px,5vw,64px);margin:4px}
#sparring .host-slot{min-height:0}
#sparring .host{flex-direction:column}
#sparring .avatar{width:clamp(185px,31svh,330px)!important}
#sparring .speech{max-width:600px}
#sparringHits{font:800 22px Georgia,serif;color:#ffd29a;margin:0}
#sparringExit{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(12px,env(safe-area-inset-right,0px));z-index:75;min-height:48px;padding:9px 16px;box-shadow:0 6px 20px #000b}
body:has(#sparring.active) .floor-fire{display:block}
@media(prefers-reduced-motion:reduce){.scare-blackout,.scare-blackout .scare-avatar,.scare-tier-3 .skull-head,.scare-tier-3 .skull-jaw,.scare-sparks i,.flying-tooth{animation:none!important}.scare-sparks{display:none}}

@keyframes scareDark{0%{background:#0000}9%,76%{background:#000}100%{background:#0000}}
@keyframes scareAttack{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}11%{transform:translate(-50%,-50%) scale(1.72);opacity:1}22%{transform:translate(-50%,-50%) scale(1.45)}35%,55%{transform:translate(-51%,-49%) scale(1.49) rotate(-3deg)}45%,65%{transform:translate(-49%,-51%) scale(1.52) rotate(3deg)}80%{transform:translate(-50%,-50%) scale(1.45);opacity:1}100%{transform:translate(-50%,-50%) scale(.18);opacity:0}}
@keyframes scareFlash{0%,100%{opacity:0}50%{opacity:.35}}
/* The secret room listens for directional strokes without stealing the match clock. */
body:has(#sparring.active),body:has(#sparring.active) *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
#sparring{position:relative;isolation:isolate;touch-action:none}
#sparring .host-slot{z-index:2;pointer-events:none}
#sparring .avatar{pointer-events:auto;touch-action:none}
#sparring .slash-layer,#sparring .pumpkin-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#sparring .slash-layer{z-index:9}
#sparring .pumpkin-layer{z-index:4}
.slash-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kitchen-target{position:absolute;top:-115px;width:clamp(65px,10svh,108px);height:clamp(65px,10svh,108px);animation:kitchenFall var(--flight) linear forwards;will-change:transform;filter:drop-shadow(0 8px 10px #0009)}
.kitchen-target[data-type="bone"]{width:clamp(90px,15svh,148px)}
.kitchen-sprite,.kitchen-piece>img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.bat-target{width:clamp(102px,16svh,155px)}
.bat-target .kitchen-sprite{position:relative;animation:batWobble .9s ease-in-out infinite alternate}
.bat-part{position:absolute;height:88%;top:5%;width:47%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.bat-left{left:0;transform:rotate(-8deg)}.bat-right{right:0;transform:rotate(8deg)}.bat-center{width:46%;left:27%;top:13%;z-index:2}
.bat-part.wing-cut{animation:wingDrop .6s ease-in forwards;pointer-events:none}
.bat-left.wing-cut{--wing-x:-55px;--wing-turn:-45deg}.bat-right.wing-cut{--wing-x:55px;--wing-turn:45deg}
.bat-target.grounded .kitchen-sprite{animation:none}
@keyframes kitchenFall{to{transform:translate3d(var(--drift),calc(100svh + 230px),0) rotate(12deg)}}
@keyframes batWobble{to{transform:translateX(24px) rotate(9deg)}}
@keyframes wingDrop{to{transform:translate(var(--wing-x),65px) rotate(var(--wing-turn));opacity:0}}
.kitchen-piece{position:fixed;z-index:12;pointer-events:none;animation:kitchenSplit .65s ease-in forwards}
.kitchen-piece.piece-left>img{clip-path:inset(0 50% 0 0)}.kitchen-piece.piece-right>img{clip-path:inset(0 0 0 50%)}
.kitchen-piece.piece-top>img{clip-path:inset(0 0 50% 0)}.kitchen-piece.piece-bottom>img{clip-path:inset(50% 0 0 0)}
@keyframes kitchenSplit{to{transform:translate(var(--split-x),calc(var(--split-y) + 75px)) rotate(var(--spin));opacity:0}}
.avatar.expression-hurt-low .skull-jaw{transform:translateY(4%) rotate(4deg)}
@media(prefers-reduced-motion:reduce){.kitchen-target{animation-duration:8s}.bat-target .kitchen-sprite{animation:none}.kitchen-piece{animation-duration:.15s}}
#sparring .avatar:after{content:'';position:absolute;inset:0;z-index:4;opacity:var(--missing-teeth,0);background:radial-gradient(ellipse 2% 1% at 37% 51.8%,#24030b 30%,transparent 85%),radial-gradient(ellipse 2% 1% at 48% 53%,#24030b 30%,transparent 85%),radial-gradient(ellipse 2% 1.1% at 61% 52%,#24030b 30%,transparent 85%);pointer-events:none}

/* The secret kitchen is a game scene, not part of the chip timer. */
#sparring.kitchen-phase{justify-content:flex-start;gap:5px;padding-top:calc(env(safe-area-inset-top,0px) + 12px);overflow:hidden}
#sparring.kitchen-phase h1{font-size:clamp(25px,4svh,38px);max-width:78%;line-height:1.04;margin:0}
#sparring.kitchen-phase>.fine{font-size:clamp(13px,1.9svh,17px);max-width:80%;line-height:1.2;margin:0}
#sparring.kitchen-phase .host-slot{position:absolute;right:8px;bottom:calc(16svh + 12px);z-index:6;width:clamp(94px,17svh,156px)}
#sparring.kitchen-phase .host{width:100%;filter:drop-shadow(0 8px 12px #000a);transition:transform .5s ease}
#sparring.kitchen-phase .avatar{width:100%!important;pointer-events:none}
#sparring.kitchen-phase .speech{max-width:200px;font-size:clamp(12px,1.8svh,15px);padding:6px;line-height:1.12}
#sparring.kitchen-phase .pumpkin-layer{z-index:7}
#sparring #kitchenHud{position:relative;z-index:5;width:min(94vw,670px);pointer-events:none;background:linear-gradient(#201a23ed,#140e19ed);border:2px solid #94654c;border-radius:10px;padding:8px 10px;box-shadow:0 12px 30px #000a}
.kitchen-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;text-align:center;color:#e9caa7;font-size:clamp(12px,1.8svh,17px)}
.kitchen-stats b{display:block;font-size:clamp(18px,3svh,28px);color:#fff1d4}
#kitchenOrder{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:7px}
.order-item{display:flex;align-items:center;gap:3px;font-size:clamp(11px,1.75svh,15px);background:#3b2733;border:1px solid #6c4542;border-radius:7px;padding:2px 5px;color:#ffdeab}
.order-item img{width:23px;height:23px;object-fit:contain}
#kitchenPot{position:fixed;bottom:-12px;left:50%;transform:translateX(-50%);z-index:5;width:clamp(160px,28vw,290px);pointer-events:none}
#kitchenPot>img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 12px #ec401d80)}
.kitchen-steam{position:absolute;inset:-28px 30% 65%;background:radial-gradient(ellipse,#f6b78277,transparent 74%);animation:soupSteam 2s ease-in-out infinite alternate}
@keyframes soupSteam{to{transform:translateY(-15px);opacity:.25}}
.kitchen-shout{position:fixed;z-index:15;left:50%;top:48%;transform:translate(-50%,-50%);font:900 clamp(40px,11vw,92px) Georgia,serif;color:#ffcc83;text-shadow:0 5px #921624,0 8px 18px #000;pointer-events:none;animation:comboPop .85s ease-out forwards}
@keyframes comboPop{from{opacity:0;transform:translate(-50%,-50%) scale(2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-75%) scale(.85)}}
#kitchenResult{position:fixed;z-index:13;top:50%;left:50%;transform:translate(-50%,-50%);width:min(88vw,580px);max-height:74svh;overflow:auto;background:linear-gradient(#2d1d22f5,#140e13fa);border:3px solid #a5684d;box-shadow:0 20px 80px #000d;padding:18px;border-radius:12px;margin:auto}
#sparring.kitchen-finished:before{content:'';position:fixed;inset:0;z-index:12;background:#07050bbb;pointer-events:none}
#kitchenResult h2{font-size:clamp(25px,5vw,44px);color:#ffce8d;margin:0}
#kitchenResult p{margin:10px 0;line-height:1.3}
#kitchenResult button{margin-top:6px;min-height:48px}
.sparring-invite[hidden]{display:none}
.sparring-invite{position:fixed;inset:0;z-index:110;background:#050309e8;display:grid;place-items:center;padding:20px}
.invite-card{width:min(100%,540px);padding:clamp(18px,5vw,36px);text-align:center;border:3px solid #aa6548;background:linear-gradient(145deg,#2f1920,#100d16);box-shadow:0 0 0 7px #140c12,0 22px 60px #000;color:#f9e9d2}
.invite-card h2{color:#ffcb87;font:900 clamp(28px,7vw,50px) Georgia,serif;margin:9px 0}
.invite-card p{line-height:1.45}.invite-card .actions{justify-content:center;flex-wrap:wrap}.invite-card button{min-height:48px}
@media(max-width:600px){#sparring.kitchen-phase .host-slot{right:3px;bottom:clamp(80px,14svh,135px);width:clamp(75px,14svh,108px)}#sparring.kitchen-phase .speech{max-width:130px;font-size:12px}#sparring.kitchen-phase h1{max-width:calc(100% - 85px)}#sparring.kitchen-phase>.fine{max-width:94%;font-size:12px}.kitchen-stats{gap:2px}#kitchenHud{padding:6px 4px!important}}

/* At one the chip is already down to its final bite; at GO it is gone. */
#countdown .kicker{top:8%}
#countdown h2{top:13%;padding:0 12px}
#countdown .countdown-stage{height:min(67svh,780px)}
#countdown #countChip.bite{animation:chipBite .32s ease-out both}
#countdown #countChip.last-bite{background-position:100% 50%;transform:translate(-50%,-50%) scale(.48) rotate(9deg);opacity:.34;transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .42s}
#countdown.go #countChip{opacity:0;transition:opacity .24s ease-out}
@keyframes chipBite{0%{transform:translate(-50%,-50%) scale(1.07) rotate(-4deg)}50%{transform:translate(-50%,-50%) scale(.91) rotate(3deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
@media(max-height:700px){#countdown .kicker{top:5%}#countdown h2{top:11%}#countdown .countdown-stage{height:65svh}}

#setup[data-step="0"] .names-grid{width:min(560px,100%);margin:3px auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
#setup[data-step="0"] .player-nickname{min-width:0;margin:0;text-align:left}
#setup[data-step="0"] .player-nickname span{margin-bottom:3px;font-size:clamp(12px,1.65svh,14px)}
#setup[data-step="0"] .player-nickname input{min-height:clamp(38px,5.8svh,48px);padding:7px 10px}
#setup[data-step="0"] .setup-sheet:focus-within{overflow-y:auto}

/* Scare returns to the exact location of the live host without a blank frame. */
.scare-blackout{animation:scareDarkReturn 3.4s ease-in-out both!important}
.scare-blackout .scare-avatar{animation:scareAttackReturn 3.4s ease-in-out both!important}
@keyframes scareDarkReturn{0%{background:#0000}8%,58%{background:#000}100%{background:#0000}}
@keyframes scareAttackReturn{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}10%{transform:translate(-50%,-50%) scale(1.72);opacity:1}24%,40%{transform:translate(-50%,-50%) scale(1.45)}53%{transform:translate(-50%,-50%) scale(1.4);opacity:1}100%{transform:translate(calc(-50% + var(--return-dx,0px)),calc(-50% + var(--return-dy,0px))) scale(var(--return-scale,.3));opacity:1}}
#milestoneShow[hidden],#badgeUnlock[hidden],#wheelReward[hidden]{display:none!important;filter:none!important;box-shadow:none!important}

/* Front-mounted lift cogs and heavier chains make event plaques read as machinery. */
.milestone-copy:before,.milestone-copy:after,.badge-unlock-plaque:before,.badge-unlock-plaque:after{width:16px;border-width:3px;background:repeating-linear-gradient(180deg,#1b1519 0 4px,#775539 5px 11px,#c0975d 12px 15px,#1a1118 16px 27px);box-shadow:inset 2px 0 2px #e5b47677,inset -2px 0 3px #000,0 0 6px #000}
.plaque-gear{position:absolute;top:-40px;width:clamp(43px,6vw,65px);height:auto;z-index:8;pointer-events:none;filter:drop-shadow(0 4px 5px #000c);animation:plaqueGearTurn 2.85s ease-out both}
.plaque-gear.left{left:calc(11% - 21px)}.plaque-gear.right{right:calc(11% - 21px);animation-direction:reverse}
.badge-unlock-plaque .plaque-gear{top:-39px}
@keyframes plaqueGearTurn{0%{transform:rotate(-100deg)}22%,77%{transform:rotate(0)}100%{transform:rotate(110deg)}}
@media(prefers-reduced-motion:reduce){.plaque-gear{animation:none}}