body.is-playing{overflow:hidden;padding:0;overscroll-behavior:none}
body.is-playing .page-shell{width:100%;padding:0;margin:0}
body.is-playing #gameScreen{position:fixed;inset:0;box-sizing:border-box;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#10182744}
#gameScreen .game-context{width:var(--game-width,90vw);min-height:36px;flex:0 0 36px;padding:3px 8px;display:flex;align-items:center;gap:8px;font-size:11px;box-sizing:border-box}
#playingAs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
#fullscreenButton{font:700 12px "Trebuchet MS",Verdana,sans-serif;min-height:30px;padding:4px 10px;border:1px solid #50e3e6;color:#f8fbff;background:#243457;box-shadow:none;white-space:nowrap}
#fullscreenStatus{position:absolute;bottom:4px;left:12px;font-size:11px;background:#101827;color:#fff;max-width:90%;padding:3px 6px}
#fullscreenStatus:empty{display:none}
#gameScreen .game-wrap{box-sizing:border-box;flex:none;margin:0;width:var(--game-width,90vw);max-width:none;border:2px solid #50e3e6;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;box-shadow:0 0 15px #50e3e622}
#gameScreen .hud{display:block;position:relative;min-height:32px;height:32px;padding:0;grid-column:1;grid-row:1}
#gameScreen canvas.score-display{height:28px;width:auto;max-width:80%;top:50%;left:50%;transform:translate(-50%,-50%)}
#gameScreen .canvas-frame{padding:4px;grid-column:1;grid-row:2;min-width:0}
#gameCanvas{width:100%;height:auto;aspect-ratio:800/520}
#gameScreen .mobile-controls{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;min-height:58px;box-sizing:border-box;border-top:2px solid #101827}
#gameScreen .mobile-controls button{min-width:0;min-height:44px;padding:4px;font-size:clamp(10px,1.5vw,15px);border-width:2px;box-shadow:0 2px #101827}
/* HUD sizes follow the field width, including short landscape screens. */
#gameScreen .health-hearts{top:8px;left:8px;padding:0;min-height:0;gap:0}
#gameScreen .health-hearts img{width:clamp(20px,calc(var(--field-width) * .065),48px);height:clamp(19px,calc(var(--field-width) * .059),44px)}
#gameScreen canvas.timer-display{top:8px;left:calc(12px + clamp(60px,calc(var(--field-width) * .195),144px));width:clamp(34px,calc(var(--field-width) * .09),72px);height:auto;aspect-ratio:96/60}
#gameScreen canvas.ammo-display{top:8px;right:8px;width:clamp(58px,calc(var(--field-width) * .15),120px);height:auto;aspect-ratio:208/60}
#gameScreen .washer-indicator{right:8px;top:calc(14px + clamp(17px,calc(var(--field-width) * .044),35px));width:clamp(28px,calc(var(--field-width) * .065),48px);height:clamp(28px,calc(var(--field-width) * .065),48px);padding:2px;min-height:0}
#gameScreen.fit-side .game-wrap{grid-template-columns:minmax(0,1fr) 136px}
#gameScreen.fit-side .mobile-controls{grid-column:2;grid-row:1/3;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:8px;border-top:0;border-left:2px solid #101827;align-content:stretch}
#gameScreen.fit-side .mobile-controls button{font-size:12px}
#gameScreen:fullscreen{background:#101827}
/* Short landscape view: reserve the viewport for the field and overlay chrome. */
#gameScreen.fit-landscape{gap:0}
#gameScreen.fit-landscape .game-wrap{position:relative;display:block}
#gameScreen.fit-landscape .hud{position:absolute;top:8px;left:36%;width:28%;height:28px;min-height:0;z-index:2;background:transparent;pointer-events:none}
#gameScreen.fit-landscape canvas.score-display{height:26px;max-width:100%;background:#10182799;border-radius:5px}
#gameScreen.fit-landscape .game-context{position:absolute;bottom:64px;right:max(8px,env(safe-area-inset-right));width:auto;min-height:0;height:auto;flex:none;background:transparent;padding:0;z-index:3}
#gameScreen.fit-landscape #playingAs{display:none}
#gameScreen.fit-landscape #fullscreenButton{font-size:10px;min-height:26px;padding:3px 6px;background:#101827cc}
#gameScreen.fit-landscape .mobile-controls{position:absolute;left:4px;right:4px;bottom:4px;min-height:48px;padding:3px;gap:6px;border:0;background:#10182777;z-index:3}
#gameScreen.fit-landscape .mobile-controls button{min-height:40px;background:#ffe66ddd;font-size:12px}
#gameScreen .mobile-controls,
#gameScreen .mobile-controls *,
#gameCanvas,
#hudWasher {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}