/* Cartoon HUD (Claude Design, "Sushi Rush HUD"). Sizes are the design's own
   pixels on a 1920 × 1080 stage; app.js sets --k so the stage fills the window. */
/* Hard shadows carry a 1px ink ring: outer box-shadows stop at the border edge,
   and once the stage is scaled the page would show through as a thin line. */
:root{--ink:#2b1d14;--cream:#fff5dc;--paper:#fffdf6;--brown:#6b4a33;--muted:#8a6446}
.stage{position:absolute;left:0;top:0;width:calc(100% / var(--k,1));height:calc(100% / var(--k,1));transform:scale(var(--k,1));transform-origin:0 0;font-family:'Fredoka',system-ui,sans-serif;color:var(--ink)}
.stroke{-webkit-text-stroke:var(--sw,8px) var(--ink);paint-order:stroke fill}
.lilita,.stroke{font-family:'Lilita One','Fredoka',system-ui,sans-serif;font-weight:400}
kbd{display:inline-block;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:0 10px;box-shadow:0 3px 0 var(--ink),0 0 0 1px var(--ink);font:700 1em 'Fredoka',system-ui,sans-serif;line-height:1.3}
.ico{width:38px;height:38px;display:block}
.ico.lift{filter:drop-shadow(0 3px 0 var(--ink))}
.star{display:block;overflow:visible}
.star.on{filter:drop-shadow(0 0 10px rgba(255,214,90,.95)) drop-shadow(0 0 28px rgba(255,170,40,.7))}
.star.off{filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}

@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes slideIn{0%{transform:translateY(-150%)}70%{transform:translateY(6%)}100%{transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes rise{0%{transform:translateY(20px) scale(.6);opacity:0}15%{transform:translateY(0) scale(1.15);opacity:1}70%{opacity:1}100%{transform:translateY(-80px) scale(1);opacity:0}}
@keyframes toastIn{0%{transform:translateY(30px) scale(.8);opacity:0}70%{transform:translateY(-4px) scale(1.03);opacity:1}100%{transform:none;opacity:1}}
@keyframes stripes{to{background-position:56px 0}}
@keyframes print{0%{transform:translateY(-60px);clip-path:inset(0 -400px 100% -400px)}100%{transform:none;clip-path:inset(0 -400px -40px -400px)}}
@keyframes squash{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.65)}}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{transform:scale(.9) rotate(-14deg);opacity:1}100%{transform:scale(1) rotate(-14deg);opacity:1}}

/* ---- Buttons (1i kit) ---- */
.rbtn{width:84px;height:84px;flex:none;border-radius:50%;border:5px solid var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:transform .12s;pointer-events:auto}
.rbtn:hover{transform:translateY(-3px)}
.rbtn:active{transform:translateY(4px)}
.rbtn .q{font-family:'Lilita One';font-size:46px;color:#fff;text-shadow:0 4px 0 var(--ink),0 0 0 1px var(--ink);line-height:1}
.rbtn.orange{background:linear-gradient(#ffc86b,#ff8a12);box-shadow:inset 0 -8px 0 #d9620a,inset 0 4px 0 rgba(255,255,255,.5),0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.rbtn.blue{background:linear-gradient(#8fe3f3,#2ea3c4);box-shadow:inset 0 -8px 0 #1d7f9c,inset 0 4px 0 rgba(255,255,255,.5),0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.rbtn.cream{background:linear-gradient(#fffaf0,#efd9ad);box-shadow:inset 0 -8px 0 #cfb27c,inset 0 4px 0 rgba(255,255,255,.6),0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.rbtn.red{background:linear-gradient(#ff8f80,#e9473b);box-shadow:inset 0 -8px 0 #b8302a,0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.rbtn.cream .gear{width:42px;height:42px}
.rbtn.cream:hover .gear{transform:rotate(30deg)}
.rbtn.small{width:80px;height:80px}
.rbtn.mid{width:92px;height:92px}
.rbtn.mid .ico{width:42px;height:42px}
.rbtn.tiny{width:70px;height:70px;cursor:default;box-shadow:inset 0 -6px 0 #d9620a,0 5px 0 var(--ink),0 0 0 1px var(--ink)}
.rbtn.tiny .ico{width:34px;height:34px;filter:none}
.rbtn.tiny .mute-slash{display:none}
.rbtn:disabled{filter:grayscale(1);opacity:.6;cursor:default;transform:none}
.mute-slash{display:none}
.muted .mute-slash{display:block}
.rbtn.muted{background:linear-gradient(#cfd6d8,#8e9a9e);box-shadow:inset 0 -8px 0 #6c787c,0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.pill{position:relative;display:inline-flex;align-items:center;gap:14px;border:6px solid var(--ink);border-radius:999px;padding:12px 44px 16px;cursor:pointer;font-family:'Lilita One';font-size:40px;color:#fff;--sw:8px;transition:transform .12s;pointer-events:auto}
.pill:hover{transform:translateY(-3px)}
.pill:active{transform:translateY(4px)}
.pill .ico{width:44px;height:44px}
.pill.green{background:linear-gradient(#b7ec82,#5fb52f);box-shadow:inset 0 -9px 0 #3f8a1f,inset 0 5px 0 rgba(255,255,255,.5),0 7px 0 var(--ink),0 0 0 1px var(--ink)}
.pill.orange{background:linear-gradient(#ffc86b,#ff8a12);box-shadow:inset 0 -9px 0 #d9620a,inset 0 5px 0 rgba(255,255,255,.5),0 7px 0 var(--ink),0 0 0 1px var(--ink)}
.pill.big{font-size:46px;padding:16px 48px 20px 30px}
.pill.pulse{animation:pulse 1.6s ease-in-out infinite}
.pill.pulse:hover{animation-play-state:paused}

/* ---- In-game HUD (1a) ---- */
#hud{pointer-events:none;z-index:20}
#hud.off .ingame{display:none}
.rail{display:none}
/* The iron rail is drawn by #orders itself, so it is only as long as the tickets on it. */
#orders::before{content:'';position:absolute;top:-10px;left:-14px;right:-26px;height:10px;border-radius:8px;background:linear-gradient(#eef1f3,#8d969c);border:3px solid var(--ink);box-shadow:0 3px 0 rgba(43,29,20,.4);transition:right .3s}
#orders{position:absolute;top:28px;left:44px;display:flex;gap:26px;align-items:flex-start;min-width:118px}
/* Tickets drawn 30% larger than their base size (20% on phones, so four still clear the centered phase banner). */
#orders{transform:scale(1.3);transform-origin:0 0}
.mobile #orders{transform:scale(1.2)}
.ticket{width:118px;flex:none}
.ticket-swing{position:relative;transform-origin:50% 0;animation:sway 3.2s ease-in-out infinite}
.ticket.new .ticket-swing{animation:slideIn .9s ease-out both,sway 3s ease-in-out .9s infinite}
.ticket.urgent .ticket-swing{animation:sway .9s ease-in-out infinite}
.ticket-clip{position:absolute;top:-6px;left:50%;margin-left:-22px;width:44px;height:20px;border-radius:6px;background:linear-gradient(#59646b,#2f383d);border:3px solid var(--ink);z-index:2}
.ticket-outline,.receipt-outline{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 8px 0 rgba(43,29,20,.35))}
.ticket-paper{background:var(--paper);border-radius:8px 8px 0 0;padding:16px 8px 6px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ticket-paper hr,.receipt hr{width:100%;border:0;border-top:3px dashed #cfc3a8;margin:0}
.ticket-no{display:flex;gap:4px;width:100%;padding-right:26px;font:700 12px 'Courier Prime',monospace}
.txt-red{color:#e9473b}.txt-green{color:#3f8a1f}
.ticket-dish{width:66px;height:62px;object-fit:contain}
.ticket-ings{display:flex;gap:2px;justify-content:center;padding:2px 0 0}
.chip{width:40px;height:40px;position:relative;display:flex;align-items:center;justify-content:center}
.chip img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(43,29,20,.25))}
.chip-cook{position:absolute;top:-4px;left:-4px;width:18px;height:18px;border-radius:50%;background:#ff8a12;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.chip-cook i{width:8px;height:5px;background:#fff;border-radius:0 0 3px 3px}
.chip-done{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:#63b94c;border:2px solid var(--ink);display:none;align-items:center;justify-content:center}
.chip-done .ico{width:12px;height:12px}
.chip.done .chip-done{display:flex}
.tear{display:block;width:100%;height:12px;margin-top:-1px}
.patience{position:absolute;right:-16px;top:2px;width:42px;height:42px;z-index:3;border-radius:50%;border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink),0 0 0 1px var(--ink)}
.ticket.urgent .patience{animation:shake .35s ease-in-out infinite}
.stamp-new{position:absolute;top:40px;left:-12px;font:400 18px 'Lilita One',sans-serif;color:#e9473b;border:3px solid #e9473b;border-radius:9px;padding:0 6px;background:rgba(255,253,246,.85);display:none;transform:rotate(-14deg)}
.ticket.fresh .stamp-new{display:block;animation:stamp .6s .9s both}

.hud-buttons{position:absolute;top:28px;right:36px;display:flex;gap:16px}
.phase-banner{position:absolute;top:140px;right:36px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#phaseName{background:linear-gradient(#4f7d58,#35573e);border:4px solid var(--ink);border-radius:14px;padding:5px 16px;box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink);font:400 22px 'Lilita One',sans-serif;color:#fff8e8;letter-spacing:1px;white-space:nowrap;display:flex}
#phaseName .phase-title{display:inline-block;max-width:420px;overflow:hidden;vertical-align:bottom;transition:max-width .45s ease,opacity .3s}
.phase-banner.collapsed #phaseName .phase-title{max-width:0;opacity:0}
#phaseInfo{background:#fff8e8;border:3px solid var(--ink);border-radius:12px;padding:2px 12px;font-weight:600;font-size:17px;margin-right:10px;transition:opacity .3s,transform .3s}

#heldBubble{position:absolute;left:40px;bottom:246px;display:flex;align-items:center;gap:10px}
#heldBubble[hidden]{display:none}
.held-disc{width:86px;height:86px;border-radius:50%;background:#fff;border:5px solid var(--ink);box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink);display:flex;align-items:center;justify-content:center;position:relative;animation:bob 1.4s ease-in-out infinite}
.held-disc img{width:64px;height:64px;object-fit:contain}
.held-count{position:absolute;bottom:-8px;right:-10px;font:400 20px 'Lilita One',sans-serif;background:#ffbd00;border:3px solid var(--ink);border-radius:10px;padding:0 6px}
.held-label{font:400 22px 'Lilita One',sans-serif;color:#fff;--sw:6px}

.coin-panel{position:absolute;left:40px;bottom:34px;display:flex;align-items:center}
.coin{width:124px;height:124px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1a0,#ffc400 45%,#e89400);border:6px solid var(--ink);box-shadow:0 7px 0 var(--ink),0 0 0 1px var(--ink);display:flex;align-items:center;justify-content:center;z-index:2;position:relative}
.coin span{width:90px;height:90px;border-radius:50%;border:4px solid #d98a00;display:flex;align-items:center;justify-content:center;font:400 44px 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:7px #b86e00;paint-order:stroke fill;transform:rotate(-8deg)}
.score-box{margin-left:-36px;padding:12px 26px 16px 52px;min-width:190px;background:#fff8e8;border:5px solid var(--ink);border-radius:0 26px 26px 0;box-shadow:0 7px 0 var(--ink),0 0 0 1px var(--ink);position:relative}
#score{font:400 58px/1 'Lilita One',sans-serif;color:#ffbd00;-webkit-text-stroke:10px #172a30;paint-order:stroke fill;display:block}
.score-pop{position:absolute;bottom:120px;left:160px;font:400 52px 'Lilita One',sans-serif;-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;animation:rise 2.4s ease-out both;pointer-events:none;z-index:3}
.score-pop.plus{color:#9be05a}.score-pop.minus{color:#ff5a4f}

.clock-panel{position:absolute;right:24px;bottom:34px;display:flex;align-items:center;flex-direction:row-reverse}
.clock-body{width:132px;height:132px;border-radius:50%;background:linear-gradient(#8fe3f3,#2ea3c4);border:6px solid var(--ink);box-shadow:0 7px 0 var(--ink),0 0 0 1px var(--ink);display:flex;align-items:center;justify-content:center;z-index:2}
.clock-face{width:96px;height:96px;border-radius:50%;background:var(--paper);border:4px solid var(--ink);position:relative}
.clock-hour{position:absolute;left:50%;top:14px;width:6px;height:34px;margin-left:-3px;background:var(--ink);border-radius:4px;transform-origin:50% 100%;transform:rotate(20deg)}
.clock-hand{position:absolute;left:50%;top:6px;width:4px;height:42px;margin-left:-2px;background:#e9473b;border-radius:4px;transform-origin:50% 100%}
.clock-pin{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink)}
.clock-box{margin-right:-36px;padding:14px 56px 14px 28px;background:#fff8e8;border:5px solid var(--ink);border-radius:26px 0 0 26px;box-shadow:0 7px 0 var(--ink),0 0 0 1px var(--ink);display:flex;flex-direction:column;align-items:flex-end;gap:2px}
/* Fixed size: digits differ in width in Lilita One, so the box would breathe every second. */
.clock-box{width:290px;box-sizing:border-box}
#clock{display:block;width:100%;text-align:right;font-variant-numeric:tabular-nums}
#clockLabel{white-space:nowrap}
#clock{font:400 62px/1 'Lilita One',sans-serif;color:#fa780c;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill}
#clockLabel{font-weight:700;font-size:18px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.clock-panel.late .clock-body{background:linear-gradient(#ff7a6b,#e9473b);animation:shake .5s ease-in-out infinite}
.clock-panel.late #clock{color:#ff5a4f;animation:pulse .9s ease-in-out infinite}
.clock-panel.late #clockLabel{color:#e9473b}

#toast{position:absolute;left:50%;bottom:226px;transform:translateX(-50%)}
.toast{display:flex;align-items:center;gap:14px;border:5px solid var(--ink);border-radius:999px;padding:8px 28px 8px 8px;animation:toastIn .5s ease-out both;font-weight:700;font-size:26px;white-space:nowrap}
.toast-icon{width:50px;height:50px;flex:none;border-radius:50%;background:#fff;border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font:400 32px 'Lilita One',sans-serif;color:#d9620a}
.toast-icon .ico{width:28px;height:28px}
.toast.good{background:linear-gradient(#b7ec82,#7cc243);box-shadow:inset 0 -6px 0 #4e9a2a,0 6px 0 var(--ink),0 0 0 1px var(--ink);color:#1f3d12}
.toast.alert{background:linear-gradient(#ffd98a,#ffb12b);box-shadow:inset 0 -6px 0 #d98a00,0 6px 0 var(--ink),0 0 0 1px var(--ink);color:#4a2a00;animation:toastIn .5s ease-out both,shake .6s ease-in-out .5s 3}
.toast.error{background:linear-gradient(#ff8f80,#e9473b);box-shadow:inset 0 -6px 0 #b8302a,0 6px 0 var(--ink),0 0 0 1px var(--ink);color:#fff;border-radius:22px}
.toast.error .toast-icon{border-radius:14px}
.toast.error .ico{width:24px;height:24px}

#stationHint{position:absolute;left:50%;bottom:134px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#fff8e8;border:4px solid var(--ink);border-radius:18px;padding:10px 20px;box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink);font-weight:600;font-size:22px;white-space:nowrap}
#stationHint[hidden]{display:none}
#stationHint kbd{font-size:22px;border-radius:10px;padding:2px 12px;box-shadow:0 4px 0 var(--ink),0 0 0 1px var(--ink)}
#stationHint .sep{color:#cfb27c}
.controls{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:20px}
.controls-keys{display:flex;align-items:center;gap:14px;background:rgba(43,29,20,.72);border-radius:999px;padding:10px 22px;color:#fff8e8;font-weight:500;font-size:18px;white-space:nowrap}
.controls-keys span{display:flex;gap:6px;align-items:center}
.controls-keys kbd{background:#fff8e8;border:0;border-radius:8px;padding:1px 8px;box-shadow:0 3px 0 #000}
.rbtn.camera{width:54px;height:54px;border-width:4px;box-shadow:inset 0 -5px 0 #cfb27c,0 4px 0 var(--ink),0 0 0 1px var(--ink)}
.rbtn.camera .ico{width:28px;height:28px}
.no-hints .controls,.no-hints #stationHint{display:none!important}

/* ---- Menu screens ---- */
#screen{z-index:30;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px) brightness(.58) saturate(1.15);-webkit-backdrop-filter:blur(10px) brightness(.58) saturate(1.15);background:rgba(58,44,34,.25)}
#screen.hidden{display:none}
#screen.lost{backdrop-filter:blur(10px) brightness(.45) saturate(.6);-webkit-backdrop-filter:blur(10px) brightness(.45) saturate(.6)}
.panel{background:var(--cream);border:6px solid var(--ink);border-radius:44px;box-shadow:inset 0 -10px 0 #f1dfb6,0 12px 0 var(--ink),0 0 0 1px var(--ink);position:relative}
.tape-title{z-index:2;position:relative;background:#d99a5b;border:6px solid var(--ink);border-radius:26px;box-shadow:inset 0 -8px 0 #b97530,0 7px 0 var(--ink),0 0 0 1px var(--ink);padding:8px 54px 14px;font:400 58px 'Lilita One',sans-serif;color:#fff8e8;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;white-space:nowrap}
.tape-title.tilt{transform:rotate(-2deg);font-size:64px;padding:10px 60px 16px}
.tape-title.yellow{background:linear-gradient(#ffe08a,#ffbd00);box-shadow:inset 0 -8px 0 #e09400,0 7px 0 var(--ink),0 0 0 1px var(--ink);color:#fa780c}
.tape{position:absolute;top:-16px;width:90px;height:30px;background:rgba(255,240,200,.8)}
.tape.l{left:-26px;transform:rotate(-28deg)}.tape.r{right:-26px;transform:rotate(28deg)}
.dialog-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.dialog-wrap.narrow{width:760px}.dialog-wrap.wide{width:920px}.dialog-wrap.help{width:1540px}
.dialog-wrap>.panel{margin-top:-40px;width:100%}
.panel-title{font:400 54px/1 'Lilita One',sans-serif}
.panel-sub{font-size:24px;color:var(--brown)}
.eyebrow{font-weight:700;font-size:20px;letter-spacing:3px;color:#b97530}

/* Intro (1b) */
.screen-intro{position:absolute;inset:0}
.total-stars{position:absolute;top:32px;left:36px;display:flex;align-items:center;gap:10px;background:rgba(43,29,20,.75);border:4px solid var(--ink);border-radius:999px;padding:6px 22px 6px 8px;font:400 34px 'Lilita One',sans-serif;color:#fff8e8}
.corner-buttons{position:absolute;top:28px;right:36px;display:flex;gap:16px}
.logo-block{position:absolute;top:56px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.tape-label{background:#d99a5b;border:4px solid var(--ink);padding:6px 26px;transform:rotate(-2deg);font:400 26px 'Lilita One',sans-serif;letter-spacing:2px;color:#fff8e8;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink);position:relative}
.tape-label .tape{top:-14px;width:70px;height:26px}
.tape-label .tape.l{left:-20px;transform:rotate(-24deg)}.tape-label .tape.r{right:-20px;transform:rotate(24deg)}
.logo{display:flex;gap:28px;transform:rotate(-3deg);animation:bob 2.4s ease-in-out infinite}
.logo span{font-size:170px;line-height:1.05;--sw:22px;text-shadow:0 14px 0 var(--ink),0 0 0 1px var(--ink)}
.logo .sushi{color:#fa780c}.logo .rush{color:#7cc243}
.road{position:absolute;top:368px;left:50%;margin-left:-660px;width:1320px;height:200px}
.road-strip{position:absolute;left:60px;right:60px;top:46px;height:56px;border-radius:999px;background:#4b4f55;border:5px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.road-dash{position:absolute;left:90px;right:90px;top:70px;border-top:7px dashed #ffd23a}
.road-nodes{position:absolute;inset:0;display:flex;justify-content:space-between;padding:0 40px}
.node{display:flex;flex-direction:column;align-items:center;gap:8px;width:160px}
.node-disc{width:120px;height:120px;margin-top:15px;border-radius:50%;border:6px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:58px;color:#fff;--sw:9px;cursor:pointer;padding:0;transition:transform .12s}
.node-disc .ico{width:44px;height:44px}
.node.done .node-disc{background:linear-gradient(#b7ec82,#5fb52f);box-shadow:inset 0 -8px 0 #3f8a1f,0 6px 0 var(--ink),0 0 0 1px var(--ink)}
.node.done .node-disc:hover{transform:translateY(-3px)}
.node.current .node-disc{width:150px;height:150px;margin-top:0;background:linear-gradient(#ffc86b,#ff8a12);box-shadow:inset 0 -10px 0 #d9620a,0 8px 0 var(--ink),0 0 0 10px rgba(255,210,58,.45);animation:bob 1.3s ease-in-out infinite}
.node.locked .node-disc{background:linear-gradient(#b5aea6,#857d74);box-shadow:inset 0 -8px 0 #6f6a66,0 6px 0 var(--ink),0 0 0 1px var(--ink);cursor:not-allowed}
.node-stars{display:flex;gap:2px;margin-top:-24px;min-height:44px}
.node.current .node-stars{margin-top:-30px}
.phase-card-wrap{position:absolute;top:600px;left:50%;margin-left:-600px;width:1200px;display:flex;flex-direction:column;align-items:center}
.phase-card{width:100%;border-radius:40px;padding:30px 44px 60px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}
.phase-text{display:flex;flex-direction:column;gap:14px}
.phase-name{font:400 46px/1 'Lilita One',sans-serif}
.dish-chips{display:flex;gap:16px;flex-wrap:wrap}
.dish-chip{display:flex;align-items:center;gap:10px;background:#fff;border:4px solid var(--ink);border-radius:20px;padding:6px 18px 6px 8px;font-weight:700;font-size:22px}
.dish-chip img{width:60px;height:52px;object-fit:contain}
.phase-rules{font-weight:600;font-size:24px}
.phase-note{font-size:21px;color:var(--brown)}
.star-box{background:#d99a5b;border:5px solid var(--ink);border-radius:24px;box-shadow:inset 0 -6px 0 #b97530;padding:16px 20px;display:flex;flex-direction:column;gap:8px;transform:rotate(2deg);align-self:start}
.star-box>.stroke{font-size:24px;color:#fff8e8;--sw:5px}
.star-row{display:flex;align-items:center;justify-content:space-between;background:#fff8e8;border:3px solid var(--ink);border-radius:14px;padding:2px 12px;font:400 26px 'Lilita One',sans-serif}
.star-row>div{display:flex}
.star-row .star.on{filter:drop-shadow(0 0 4px rgba(255,170,40,.7))}
.phase-card-wrap .pill{margin-top:-46px}
.footnote{margin:22px 0 0;max-width:980px;text-align:center;font-size:19px;color:#fff8e8}

/* Pause (1c) */
.pause-panel{padding:56px 56px 40px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.sleeper{position:relative;width:240px;height:170px;margin-top:-10px}
.sleeper img{position:absolute;left:40px;bottom:10px;width:160px;animation:pulse 2.4s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 4px 0 rgba(43,29,20,.35))}
.z{position:absolute;font:400 26px 'Lilita One',sans-serif;font-style:normal;color:#7ec8e8;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;animation:rise 3s ease-out infinite}
.z1{right:20px;top:20px}.z2{right:0;top:4px;font-size:36px;animation-delay:1s}.z3{right:34px;top:40px;font-size:20px;animation-delay:2s}
.stat-row{display:flex;gap:14px;margin:6px 0}
.stat-row div{background:#fff;border:4px solid var(--ink);border-radius:18px;padding:6px 20px;font-weight:600;font-size:20px;white-space:nowrap}
.stat-row b{font:400 28px 'Lilita One',sans-serif}
.orange-num{color:#e0700c}
.icon-actions{display:flex;gap:36px;margin-top:10px}
.icon-actions>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;font-size:19px}
.key-note{font-size:19px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* Settings (1d) */
.settings-panel{padding:70px 56px 70px;display:flex;flex-direction:column;gap:22px}
.settings-panel hr{border:0;border-top:4px dashed #d9c193;margin:4px 0;width:100%}
.slider-row{display:flex;align-items:center;gap:24px}
.slider-row label{width:150px;flex:none;font-weight:700;font-size:26px}
.slider-row output{width:80px;text-align:right;font:400 32px 'Lilita One',sans-serif}
.slider{position:relative;flex:1;height:30px;border-radius:999px;background:#5a3a25;border:4px solid var(--ink);box-shadow:inset 0 5px 0 rgba(0,0,0,.25)}
.slider-fill{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:999px;background:linear-gradient(#8fe3f3,#2ea3c4);box-shadow:inset 0 -5px 0 #1d7f9c}
.slider-knob{position:absolute;top:50%;left:var(--v);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:linear-gradient(#fffaf0,#efd9ad);border:4px solid var(--ink);box-shadow:inset 0 -5px 0 #cfb27c,0 4px 0 var(--ink),0 0 0 1px var(--ink);pointer-events:none}
.slider input{position:absolute;left:0;right:0;top:-14px;bottom:-14px;width:100%;margin:0;opacity:0;cursor:pointer}
.slider:focus-within .slider-knob{outline:4px solid #ffd23a;outline-offset:2px}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:4px solid var(--ink);border-radius:22px;padding:10px 14px 10px 20px;cursor:pointer;font:600 22px 'Fredoka',sans-serif;color:var(--ink);text-align:left}
.switch{width:90px;height:46px;flex:none;border-radius:999px;background:#a39a90;border:4px solid var(--ink);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);position:relative}
.switch.on{background:linear-gradient(#b7ec82,#5fb52f)}
.switch i{position:absolute;top:3px;left:3px;width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--ink);transition:left .2s}
.switch.on i{left:47px}
.camera-row{display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:700;font-size:24px}
.segmented{display:flex;background:#5a3a25;border:4px solid var(--ink);border-radius:999px;padding:4px;gap:4px}
.segmented button{padding:6px 26px;border-radius:999px;font:700 20px 'Fredoka',sans-serif;cursor:pointer;background:transparent;color:#fff8e8;border:0}
.segmented button.on{background:#fff8e8;color:var(--ink)}
.settings-foot{display:flex;justify-content:space-between;align-items:center;gap:20px}
.link-danger,.link-muted{background:none;border:0;padding:0;cursor:pointer;font:600 20px 'Fredoka',sans-serif}
.link-danger{color:#e9473b;text-decoration:underline}
.link-muted{font-size:19px;font-weight:500;color:var(--muted)}
.link-muted:hover{text-decoration:underline}
.pill.ok{margin-top:-46px;font-size:50px;padding:10px 80px 16px;--sw:9px}
.credits-panel{padding:60px 56px 44px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;font-size:22px}
.credits-panel p{margin:0;color:var(--brown)}
.close-x{position:absolute;top:-30px;right:-30px}

/* Result (1e / 1f) */
.screen-result{position:absolute;inset:0}
.rays{position:absolute;left:50%;top:190px;width:1500px;height:1500px;margin:-750px 0 0 -750px;border-radius:50%;background:repeating-conic-gradient(rgba(255,226,120,.35) 0 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 60%);mask:radial-gradient(circle,#000 10%,transparent 60%);animation:spin 24s linear infinite}
.result-col{position:absolute;left:0;right:0;top:40px;display:flex;flex-direction:column;align-items:center}
/* Tall enough for the raised middle star, and fully above the ribbon. */
.result-stars{display:flex;align-items:flex-end;gap:6px;height:244px;position:relative;z-index:3;padding-top:8px}
.result-star{transform-origin:50% 60%;margin-bottom:0}
.result-star.mid{margin-bottom:40px}
.won .result-star:has(.on){animation:pop .6s both}
.ribbon{position:relative;z-index:1;margin-top:14px}
.ribbon .tail{position:absolute;top:34px;width:140px;height:84px;border:6px solid var(--ink)}
.ribbon .tail.l{left:-70px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,28% 50%)}
.ribbon .tail.r{right:-70px;clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
.ribbon.green .tail{background:#4e9a2a}.ribbon.red .tail{background:#b8302a}
.ribbon-body{position:relative;border:6px solid var(--ink);border-radius:26px;padding:8px 70px 16px;font-size:72px;color:#fff;--sw:12px}
.ribbon.green .ribbon-body{background:linear-gradient(#b7ec82,#7cc243);box-shadow:inset 0 -9px 0 #4e9a2a,0 8px 0 var(--ink),0 0 0 1px var(--ink)}
.ribbon.red .ribbon-body{background:linear-gradient(#ff8f80,#e9473b);box-shadow:inset 0 -9px 0 #b8302a,0 8px 0 var(--ink),0 0 0 1px var(--ink)}
.receipt-wrap{position:relative;margin-top:26px;width:600px}
.receipt-rail{position:absolute;left:-30px;right:-30px;top:-14px;height:30px;border-radius:999px;background:#4b4f55;border:5px solid var(--ink);z-index:2}
.receipt-print{animation:print 1.2s 1.1s cubic-bezier(.2,.8,.3,1) both}
.lost .receipt-print{animation-delay:.4s}
.receipt-outline{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 10px 0 rgba(0,0,0,.35))}
.receipt{background:var(--paper);padding:40px 40px 18px;font:400 24px 'Courier Prime',monospace;display:flex;flex-direction:column;gap:8px}
.receipt hr{margin:4px 0}
.r-title{text-align:center;font-weight:700;letter-spacing:3px}
.r-sub{text-align:center;font-size:20px;color:var(--brown)}
.r-line,.r-total,.r-goals{display:flex;justify-content:space-between;align-items:center}
.r-total span:first-child{font-weight:700}
.r-total .stroke{font-size:64px;line-height:1;color:#ffbd00;--sw:9px}
.r-goals{font-size:19px;color:var(--brown)}
.r-miss{text-align:center;font-size:20px;color:#b8302a;font-weight:700}
.receipt .tear{height:16px}
.stamp{position:absolute;right:-250px;top:200px;white-space:nowrap;font:400 34px 'Lilita One',sans-serif;color:#e9473b;border:5px solid #e9473b;border-radius:14px;padding:2px 14px;background:var(--paper);box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink);animation:stamp .5s 2.4s both}
.stamp.big{right:-190px;font-size:40px;padding:2px 18px;animation-delay:1.7s}
.result-buttons{display:flex;align-items:center;gap:30px;margin-top:30px}
.result-buttons .pill{font-size:44px;padding:14px 50px 20px}
.result-buttons .pill.orange{padding-left:30px}

/* Help (1g) */
.help-panel{padding:80px 50px 44px;display:flex;flex-direction:column;gap:36px}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.step{background:#fff;border:4px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink),0 0 0 1px var(--ink);padding:18px 18px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;position:relative}
.step p{margin:0;font-weight:600;font-size:22px;line-height:1.25}
.step-n{position:absolute;top:-24px;left:-14px;width:54px;height:54px;border-radius:50%;background:linear-gradient(#ffc86b,#ff8a12);border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink),0 0 0 1px var(--ink);font-size:30px;color:#fff;--sw:6px;display:flex;align-items:center;justify-content:center}
.step-art{height:150px;width:100%;border-radius:20px;background:#fbf1da;display:flex;align-items:center;justify-content:center;gap:4px;position:relative}
.step-art img{width:96px;height:96px;object-fit:contain}
.step-tag{position:absolute;bottom:8px;right:8px;font:400 22px 'Lilita One',sans-serif;background:#ffbd00;border:3px solid var(--ink);border-radius:10px;padding:0 8px}
.cardboard{width:96px;height:76px;background:linear-gradient(#e0a86b,#c98a4c);border:4px solid var(--ink);border-radius:10px;position:relative;box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink)}
.cardboard i{position:absolute;left:34px;top:-4px;bottom:-4px;width:20px;background:rgba(255,240,200,.75)}
.key-legend{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-weight:600;font-size:22px}
.key-legend span{display:flex;gap:10px;align-items:center}
.key-legend kbd{border-radius:10px;padding:2px 12px;box-shadow:0 4px 0 var(--ink),0 0 0 1px var(--ink)}

/* Loading (1h) */
#loading{z-index:40;background:radial-gradient(circle,rgba(255,255,255,.18) 6px,transparent 7px) 0 0/60px 60px,#7cc243;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:opacity .4s}
#loading.hidden{opacity:0;pointer-events:none}
.loading-food{display:flex;flex-direction:column;align-items:center}
.loading-food img{width:260px;animation:bob .8s ease-in-out infinite}
.loading-food i{width:180px;height:26px;border-radius:50%;background:rgba(43,29,20,.3);animation:squash .8s ease-in-out infinite}
.loading-title{font-size:72px;color:#fff;--sw:12px;text-shadow:0 8px 0 var(--ink),0 0 0 1px var(--ink)}
.loading-bar{width:760px;height:44px;border-radius:999px;background:#2f5e1c;border:6px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 0 0 1px var(--ink);overflow:hidden}
.loading-bar i{display:block;width:var(--p,5%);height:100%;border-radius:999px;background:repeating-linear-gradient(-45deg,#ffc86b 0 14px,#ff9a1f 14px 28px);background-size:56px 100%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15);animation:stripes .8s linear infinite;transition:width .3s}
.loading-tip{background:#fff8e8;border:4px solid var(--ink);border-radius:20px;padding:10px 26px;font-weight:600;font-size:24px;box-shadow:0 5px 0 var(--ink),0 0 0 1px var(--ink)}
.loading-error{max-width:1100px;text-align:center}

/* Settings: fewer animations, no shaking. */
.reduce-motion .stage *,.reduce-motion .stage *::before,.reduce-motion .stage *::after{animation:none!important;transition:none!important}
.reduce-motion .packaging-guide-pop{animation:none}
.no-shake .ticket.urgent .patience,.no-shake .clock-panel.late .clock-body,.no-shake .toast.alert{animation:toastIn .5s ease-out both}
.no-shake .ticket.urgent .patience,.no-shake .clock-panel.late .clock-body{animation:none}
.no-shake .ticket.urgent .ticket-swing{animation:sway 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.stage *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Windows taller than 16:9: keep the intro and result layouts centered. */
.screen-intro .logo-block{top:calc(56px + max(0px,(100% - 1080px) / 2))}
.screen-intro .road{top:calc(368px + max(0px,(100% - 1080px) / 2))}
.screen-intro .phase-card-wrap{top:calc(600px + max(0px,(100% - 1080px) / 2))}
.result-col{top:calc(40px + max(0px,(100% - 1080px) / 2))}
.rays{top:calc(190px + max(0px,(100% - 1080px) / 2))}

/* ---- Phones (#viewport.mobile): HUD on a 1280 × 720 stage, so it reads larger.
   Corners are kept for the joystick (left) and buttons (right); score and
   clock sit together at the bottom center, the held item under the tickets. */
/* No key or button reminders on phones: the touch buttons are always in view. */
.mobile .controls,.mobile .key-note,.mobile #stationHint{display:none!important}
.mobile .coin-panel{left:50%;bottom:16px;transform:translateX(-100%) scale(.8);transform-origin:100% 100%;margin-left:-14px}
.mobile .clock-panel{right:auto;left:50%;bottom:16px;transform:scale(.8);transform-origin:0 100%;margin-left:14px}
.mobile #heldBubble{bottom:auto;top:300px;left:40px}
.mobile #stationHint{bottom:150px;max-width:62%;white-space:normal;justify-content:center;text-align:center;flex-wrap:wrap;row-gap:4px}
.mobile #toast{bottom:auto;top:112px}
.mobile .toast{font-size:21px;padding:5px 22px 5px 6px}
.mobile .toast-icon{width:40px;height:40px;font-size:26px}
.mobile .toast{white-space:normal;max-width:900px}
.mobile .hud-buttons{top:20px;right:calc(28px + env(safe-area-inset-right))}
.mobile .phase-banner{top:20px;right:auto;left:50%;transform:translateX(-50%);align-items:center}
.mobile #phaseInfo{margin-right:0}
.mobile #orders,.mobile .rail{margin-left:env(safe-area-inset-left)}
/* Menus: each screen is laid out at a fixed, compact size and app.js scales it
   (fitScreen) so the whole screen fits the phone, with no scrolling. */
.mobile #screen{align-items:center;justify-content:center}
.mobile #screen>*{flex:none}
.mobile .screen-intro{position:relative;inset:auto;width:1400px;height:800px}
.mobile .screen-intro .total-stars{top:0;left:0}
.mobile .screen-intro .corner-buttons{top:0;right:0}
.mobile .screen-intro .logo-block{top:0}
.mobile .logo span{font-size:120px;--sw:18px;text-shadow:0 10px 0 var(--ink)}
.mobile .screen-intro .road{top:215px;left:40px;margin-left:0}
.mobile .screen-intro .phase-card-wrap{top:430px;left:100px;margin-left:0}
.mobile .phase-card{padding:24px 40px 54px}
.mobile .footnote{display:none}
.mobile .screen-result{position:relative;inset:auto;width:1300px;height:930px}
.mobile .result-col,.mobile .screen-result .result-col{top:0}
.mobile .rays{top:120px}
.mobile .result-stars{height:190px}
.mobile .result-star svg{width:116px;height:116px}
.mobile .result-star.mid svg{width:146px;height:146px}
.mobile .result-star.mid{margin-bottom:30px}
.mobile .receipt{padding:34px 36px 14px;gap:6px}
.mobile .sleeper{height:120px;width:200px}
.mobile .sleeper img{width:120px;left:40px}
.mobile .pause-panel{padding:50px 50px 34px;gap:12px}
.mobile .settings-panel{padding:60px 50px 64px;gap:18px}
.mobile .help-panel{padding:70px 44px 36px;gap:28px}
.fs-btn{display:none}
.mobile .fs-btn.supported,.mobile .fs-btn.ios{display:flex}
.fs-btn .ico{width:40px;height:40px}
.screen-note{position:fixed;left:0;right:0;margin:0 auto;bottom:24px;white-space:normal;width:max-content;max-width:90%;z-index:5}

/* ---- Playing together: start row, account, friend and room screens ---- */
.pill.blue{background:linear-gradient(#8fe3f3,#2ea3c4);box-shadow:inset 0 -9px 0 #1d7f9c,inset 0 5px 0 rgba(255,255,255,.5),0 7px 0 var(--ink),0 0 0 1px var(--ink)}
.pill.cream{background:linear-gradient(#fffaf0,#efd9ad);box-shadow:inset 0 -9px 0 #cfb27c,0 7px 0 var(--ink),0 0 0 1px var(--ink);color:#6b4a33;--sw:0px}
.pill.cream .stroke{-webkit-text-stroke:0}
.pill.red{background:linear-gradient(#ff8f80,#e9473b);box-shadow:inset 0 -9px 0 #b8302a,0 7px 0 var(--ink),0 0 0 1px var(--ink)}
.pill:disabled{background:#a39a90;box-shadow:inset 0 -7px 0 #7d756c,0 6px 0 var(--ink);opacity:.8;cursor:not-allowed;animation:none;transform:none}
.pill.wide{width:100%;justify-content:center}
.start-row{display:flex;gap:22px;margin-top:-46px;position:relative}
.phase-card-wrap .start-row .pill{margin-top:0}
.rbtn.account{position:relative;cursor:not-allowed;filter:grayscale(.35);opacity:.85}
.rbtn.account:hover{transform:none}
.rbtn.account .soon{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#ffbd00;border:3px solid var(--ink);border-radius:10px;padding:0 6px;font:400 15px 'Lilita One',sans-serif;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:22px;text-align:left}
.field input{font:600 26px 'Fredoka',sans-serif;color:var(--ink);background:#fff;border:4px solid var(--ink);border-radius:18px;padding:10px 18px;outline:none;box-shadow:inset 0 4px 0 rgba(0,0,0,.06)}
.field input:focus{box-shadow:0 0 0 4px #ffd23a}
.field small{font-size:18px;color:var(--muted);font-weight:600}
.friend-panel{padding:60px 52px 40px;display:flex;flex-direction:column;gap:20px}
.or{display:flex;align-items:center;gap:14px;color:var(--muted);font-weight:600;font-size:19px}
.or i{flex:1;border-top:3px dashed #d9c193}
.code-row{display:flex;gap:16px;align-items:center}
.code-row input{flex:1;min-width:0;font:400 44px 'Lilita One',sans-serif;letter-spacing:10px;text-transform:uppercase;text-align:center;background:#fff;border:4px solid var(--ink);border-radius:18px;padding:6px 10px;color:var(--ink);outline:none}
.code-row input:focus{box-shadow:0 0 0 4px #ffd23a}
.room-error{margin:0;color:#b8302a;font-weight:700;font-size:20px;text-align:center}
.account-row{display:flex;align-items:center;gap:18px;font-size:18px;color:var(--brown);font-weight:600;border-top:3px dashed #d9c193;padding-top:18px}
.account-row .rbtn{width:64px;height:64px}
.account-row .rbtn .ico{width:32px;height:32px}
.room-panel{padding:64px 52px 70px;display:flex;flex-direction:column;gap:22px}
.link-row{display:flex;gap:14px;align-items:center}
.link-row input{flex:1;min-width:0;font:600 20px 'Fredoka',sans-serif;color:var(--brown);background:#fff;border:4px solid var(--ink);border-radius:16px;padding:10px 14px;outline:none}
.link-row .pill{font-size:28px;padding:8px 24px 12px;white-space:nowrap}
.link-row .pill .ico{width:32px;height:32px}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.seat-card{display:flex;align-items:center;gap:16px;background:#fff;border:4px solid var(--ink);border-radius:24px;padding:14px 18px;box-shadow:0 5px 0 var(--ink),inset 0 0 0 4px color-mix(in srgb,var(--seat) 35%,transparent)}
.seat-card.ready{background:color-mix(in srgb,var(--seat) 12%,#fff)}
.seat-card.empty{opacity:.65;border-style:dashed;box-shadow:none}
.seat-disc{position:relative;flex:none;width:72px;height:72px;border-radius:50%;background:var(--seat);border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;--sw:6px}
.seat-card.empty .seat-disc{background:#e9e2d6}
.seat-disc .crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%)}
.seat-disc .crown .ico{width:34px;height:34px}
.seat-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.seat-text b{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat-text span{font-size:18px;color:var(--brown);font-weight:600}
.seat-text .you{font-style:normal;font-size:15px;background:var(--ink);color:#fff8e8;border-radius:999px;padding:1px 8px;vertical-align:middle}
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.room-phases{display:flex;gap:10px}
.room-phase{width:58px;height:58px;border-radius:50%;border:4px solid var(--ink);background:linear-gradient(#b7ec82,#5fb52f);box-shadow:inset 0 -5px 0 #3f8a1f,0 4px 0 var(--ink);font:400 28px 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;cursor:pointer;padding:0}
.room-phase.on{background:linear-gradient(#ffc86b,#ff8a12);box-shadow:inset 0 -5px 0 #d9620a,0 4px 0 var(--ink),0 0 0 5px rgba(255,210,58,.5)}
.room-phase:disabled{cursor:default;filter:grayscale(.6);opacity:.6}
.room-phase.on:disabled{filter:none;opacity:1}
.room-status{margin:0;text-align:center;font-weight:700;font-size:22px;color:var(--brown)}
.room-buttons{display:flex;align-items:center;gap:24px;margin-top:-46px;position:relative}
.room-buttons .pill{font-size:38px}