/* SLAP! page base: one full-viewport canvas with DOM layers on top. Theme variables come from src/client/ui/dom.js. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--font-ui);
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } /* touch: no pinch / double-tap zoom, pull-to-refresh, selection, long-press callout */
body { box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* device.js safeArea() reads it; every child is fixed */
input, textarea { user-select: text; -webkit-user-select: text; }
.mn-panel, .sl-panel, .sl-lobby, .tut, .hud-pp { touch-action: pan-y; } /* scrolling panels: vertical pan only */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; } /* panels inside turn pointer events back on */
#lobby, #results, #menus { inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* screens keep to the safe area; fx + hud follow the canvas (hud.js pads itself) */
#fx { z-index: 1; } #hud { z-index: 2; } #lobby { z-index: 3; } #results { z-index: 4; } #tutorial { z-index: 5; } #sub { z-index: 6; } #menus { z-index: 20; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: .2em solid var(--accent, #FFD23F); outline-offset: .15em; }
/* touch devices (device.js <html data-device>): finger-size targets (≥ 44 px) */
html:not([data-device=desktop]) :is(.mn button, .mn select, .sl-btn, .sl-panel select, .hud-btn, .tut button) { min-height: 44px; }