/* One 1280 x 720 design space for HUD and Start, independent of viewport breakpoints. */
#game{object-fit:contain}
#hud{left:calc(var(--scene-left) + var(--scene-width)*.02);top:calc(var(--scene-top) + var(--scene-height)*.03);right:auto;transform:scale(var(--ui-scale));transform-origin:top left}
#hud .player-panel{transform:none;grid-template-columns:145px 168px;grid-template-rows:24px 42px;gap:4px 10px;width:350px;height:94px;padding:10px;border-width:2px;border-left-width:5px}
#hud .player-stats>strong{font-size:16px;line-height:24px}
#hud .player-stats .health-row{height:18px;min-height:0;margin:5px 0;gap:0}
#hud .player-stats .votes{font-size:11px;line-height:18px}
#hud #lives-status{font-size:18px;line-height:24px;gap:5px}
#hud #buff-icons{width:168px;height:42px}
#hud .hit-counter{gap:5px;height:24px;margin:4px 0}
#hud .hit-counter i{width:19px;height:15px}
#mount-hud{left:calc(var(--scene-left) + var(--scene-width)*.02);top:calc(var(--scene-top) + var(--scene-height)*.03 + 100px*var(--ui-scale));right:auto;width:220px;transform:scale(var(--ui-scale));transform-origin:top left}
/* Pausing must not resize the game area or switch to a different layout. */
#arena,#arena:has(#pause-screen:not(.hidden)),#arena:has(#menu:not(.hidden)){min-height:0;height:auto;aspect-ratio:16/9}
#pause-screen{inset:auto;left:var(--scene-left);top:var(--scene-top);width:1280px;height:720px;padding:38.4px;transform:scale(var(--ui-scale));transform-origin:top left;font-size:14px}
#pause-screen .pause-layout{grid-template-columns:minmax(180px,29%) 1fr;gap:4%;align-items:start;min-height:100%;max-width:1100px;margin:auto}
#pause-screen .pause-actions{display:block;position:static}
#pause-screen .eyebrow{font-size:12px;letter-spacing:2px}
#pause-screen .pause-actions h2{font-size:40px;line-height:1.1;margin:12px 0 22px}
#pause-screen .pause-actions button{display:block;width:100%;margin:10px 0;font-size:14px;padding:10px}
#pause-screen .command-guide{padding-bottom:12px;margin-bottom:14px}
#pause-screen h3{font-size:24px;margin:0}
#pause-screen .command-guide dl{grid-template-columns:1fr 1fr;gap:7px 18px;margin:10px 0}
#pause-screen .command-guide dl>div{display:flex;align-items:baseline;gap:10px}
#pause-screen .command-guide dt,#pause-screen .command-guide dd{font-size:12px}
#pause-screen #item-guide{grid-template-columns:1fr 1fr;gap:9px 14px}
#pause-screen #item-guide li{min-height:73px;gap:9px;padding:0;border:0}
#pause-screen #item-guide button{gap:9px;padding:6px}
#pause-screen #item-guide canvas{flex:0 0 60px;width:60px;height:66px}
#pause-screen #item-guide strong{font-size:14px}
#pause-screen #item-guide span{font-size:12px}

/* Dialogue controls use the same scene coordinates as the HUD, never viewport font clamps. */
#intro-advance,#intro-advance.tally-advance{left:calc(var(--scene-left) + var(--scene-width)*.98);top:calc(var(--scene-top) + var(--scene-height)*.975);right:auto;bottom:auto;transform:scale(var(--ui-scale)) translate(-100%,-100%);transform-origin:top left;min-height:40px;min-width:174px;max-width:none;width:max-content;padding:7px 11px;gap:9px;font-size:15px;white-space:nowrap;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#intro-advance.summon-advance{left:calc(var(--scene-left) + var(--scene-width)*.02);transform:scale(var(--ui-scale)) translate(0,-100%)}
#intro-advance kbd{padding:4px 7px;font-size:12px;min-width:35px}
#intro-advance,#intro-advance.tally-advance{width:236px;justify-content:center}
#intro-advance::before{content:"";position:absolute;inset:0;background:#d4ed7670;transform:scaleX(var(--skip-progress,0));transform-origin:left;z-index:-1}
#intro-advance.skip-holding{border-color:#d4ed76;box-shadow:0 0 0 2px #d4ed76}
#end.has-awards .panel{width:960px;max-width:94%}
#end.has-awards #result-art{max-height:none}
/* The ballot and stamps share the scene's design space on every device. */
#end{inset:auto;left:var(--scene-left);top:var(--scene-top);width:1280px;height:720px;padding:38.4px;transform:scale(var(--ui-scale));transform-origin:top left;grid-template-columns:minmax(0,1fr)}
#end .panel{min-width:0}
#end #result-art{max-width:100%;max-height:none}
#save-progress{position:absolute;z-index:8;left:calc(var(--scene-left) + var(--scene-width)*.5);top:calc(var(--scene-top) + var(--scene-height)*.975);transform:scale(var(--ui-scale)) translate(-50%,-100%);transform-origin:top left;font-size:16px;padding:9px 16px;background:#12242d;border-color:#d4ed76;white-space:nowrap}