:root { color-scheme:dark; --text:#f0e8f3; --muted:#b6a4c3; --cyan:#87f8e4; font-family:ui-monospace,monospace; }
* { box-sizing:border-box; }
html,body,main { margin:0; width:100%; height:100%; overflow:hidden; background:#090713; color:var(--text); }
main { position:fixed; inset:0; height:100dvh; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:none; }
button { font:inherit; cursor:pointer; min-height:44px; color:var(--text); background:#20162bdd; border:1px solid #785487; border-radius:4px; padding:8px 12px; touch-action:none; }
button:focus-visible,canvas:focus-visible { outline:2px solid var(--cyan); outline-offset:-3px; }
.hud { position:absolute; top:max(8px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); display:flex; align-items:center; justify-content:space-between; gap:8px; pointer-events:none; font-size:10px; letter-spacing:1px; text-shadow:1px 1px #000; }
.hud>div { display:flex; gap:8px; pointer-events:auto; }
.hud button { font-size:11px; }
.help { position:absolute; bottom:12px; left:16px; font-size:10px; color:#d6c3df; pointer-events:none; }
.prompt { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); text-align:center; margin:0; padding:10px; font-size:12px; background:#190f27ed; border:1px solid #84578f; pointer-events:none; }
.controls { position:absolute; bottom:max(12px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); pointer-events:none; }
.touch-controls { display:none; justify-content:space-between; align-items:end; }
.touch-controls button { pointer-events:auto; user-select:none; }
.dpad { display:grid; grid-template-columns:repeat(3,44px); gap:8px; }
.dpad button { width:44px; height:44px; padding:0; }
.dpad button:first-child { grid-column:2; }
.dpad button:nth-child(2) { grid-column:1; }
.touch-controls button[data-held] { background:#61416f; }
#interact { width:84px; min-height:60px; color:var(--cyan); }
#interact span { display:block; font-size:9px; }
#interact:disabled { opacity:.5; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.eyebrow { color:#f6a0d3; font-size:11px; }
dialog { border: 1px solid #a466ac; background: #20142c; color: var(--text); padding: 28px; max-width: min(430px, calc(100% - 32px)); box-shadow: 8px 8px 0 #0b0713, 0 0 50px #dd68be22; }
dialog::backdrop { background: #0a0613b8; }
dialog h2 { font-family: Georgia, serif; font-size: 27px; font-weight: normal; margin: 15px 0; }
dialog p:not(.eyebrow) { color: #d6c3df; font-size: 13px; line-height: 1.8; }
dialog button { background: #a7f1df; color: #182b29; border: 0; padding: 13px 16px; min-height: 44px; margin-top: 10px; }
dialog button span { margin-left: 20px; }

dialog { max-height:calc(100dvh - 32px); overflow:auto; }
#game-details { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:14px; }
#game-details[hidden] { display:none; }
#game-details dt { color:var(--muted); }
#game-details dd { margin:0; color:var(--cyan); }
@media (pointer:coarse),(max-width:700px),(max-height:500px) {
  .touch-controls { display:flex; }
  .help { display:none; }
  .prompt { bottom:132px; font-size:11px; }
  .hud>span { max-width:95px; line-height:1.5; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }

/* Canvas focus is indicated locally in the HUD, never as a presentation frame. */
canvas:focus-visible { outline:none; }
canvas:focus-visible ~ .hud > span { color:var(--cyan); text-decoration:underline; text-underline-offset:4px; }

select {font:inherit;min-height:44px;background:#20162b;color:#eee;border:1px solid #785487;max-width:115px;}
.turn-controls {display:flex;gap:8px;}
@media(max-width:550px) {.hud {align-items:start;} .hud>span {display:none;} .hud>div {gap:4px;flex-wrap:wrap;} .hud button {padding:6px;} }

.fps {position:absolute;right:12px;top:68px;font-size:10px;padding:5px 7px;background:#100c1bcc;color:#abc8c6;pointer-events:none;}
@media(max-width:550px){.fps{top:112px;}}

/* Native modal keeps the background inert; its persistent header stays outside
   the independently scrollable original practice document. */
#pool-session { position:fixed; inset:0; margin:0; width:100vw; max-width:none;
  height:100dvh; max-height:none; border:0; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  overflow:hidden; box-shadow:none; }
#pool-session[open] { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:8px; }
#pool-session header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#pool-session h2 { font:inherit; font-size:14px; margin:0; }
#pool-session #return-salon { margin:0; flex-shrink:0; min-height:44px; }
#pool-session #pool-session-status { margin:0; font-size:12px; line-height:1.4; }
#pool-frame-slot { min-height:0; }
#pool-frame-slot iframe { display:block; width:100%; height:100%; border:1px solid #785487; background:#171a19; }
#pool-session button:focus-visible,#play-pool:focus-visible,#play-frost:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
#play-pool[hidden],#play-frost[hidden] { display:none; }
@media(max-width:450px) { #pool-session h2 { font-size:11px; } #pool-session #pool-session-status { font-size:11px; } }

/* Ready practice has one slim host HUD; loading/errors retain their status row. */
#pool-session { padding:4px; }
#pool-session[open] { gap:4px; }
#pool-session header { min-height:44px; }
#pool-session[data-ready=true] { grid-template-rows:44px minmax(0,1fr); }
#pool-session-status[hidden] { display:none; }
#pool-frame-slot iframe { border:0; }

/* Opt-in renderer benchmark overlay (?bench=1). */
.bench-overlay{position:fixed;right:12px;bottom:12px;z-index:50;max-width:min(420px,calc(100vw - 24px));max-height:60vh;overflow:auto;padding:10px;border:1px solid #6d5778;background:#120e1ee8;color:#e9dcef;font:12px/1.4 monospace}
.bench-overlay pre{white-space:pre-wrap;margin:8px 0}
.bench-overlay button,.bench-overlay .bench-download{margin-right:8px;color:inherit}