:root { color-scheme: dark; font: 14px system-ui, sans-serif; background: #111; color: #ddd; }
body { margin: 0; }
main { max-width: 1000px; margin: 20px auto; padding: 0 16px; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
h1 { font-size: 20px; }
button { padding: 8px 16px; font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.6; }
#launch-settings[hidden], #audio-controls[hidden], #keyboard-settings[hidden] { display: none; }
#display-name { width: 130px; padding: 6px; font: inherit; }
#name-dialog { width: min(380px, calc(100% - 48px)); padding: 20px; border: 1px solid #777; background: #181818; color: #eee; }
#name-dialog::backdrop { background: #000b; }
#name-dialog input { display: block; width: 100%; box-sizing: border-box; padding: 8px; margin: 8px 0; font: inherit; }
#name-dialog-error { color: #f99; }
#matchmaking-dialog { width: min(380px, calc(100% - 48px)); padding: 20px; border: 1px solid #777; background: #181818; color: #eee; }
#matchmaking-dialog::backdrop { background: #000b; }
#multiplayer-settings-note { margin: 8px 0; }
canvas { display: block; max-width: 100%; height: auto; margin: 16px auto; background: #000; image-rendering: pixelated; touch-action: none; }
canvas:focus { outline: 1px solid #888; }
canvas:fullscreen { width: 100% !important; height: 100% !important; max-width: none; margin: 0; object-fit: contain; outline: none; }
p { color: #aaa; }
pre { max-height: 280px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.keyboard-bindings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-width: 760px; }
.keyboard-bindings label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-frame { position: relative; width: min(100%, 640px); margin: 16px auto; }
.game-frame canvas { width: 100%; margin: 0; }
.game-frame[hidden], #session-toggle[hidden] { display: none; }
/* Semantic controls mirror the GPU menu for assistive technology; all visible menu art is WebGL. */
.session-menu { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.session-menu[hidden] { display: none; }
.menu-editor { position: absolute; left: 50%; top: 20%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.session-menu h2 { margin-top: 0; font-size: 18px; }
.game-frame:has(canvas[data-menu-screen]:not([data-menu-screen=""])) #touch-controls,
.game-frame:has(canvas[data-menu-screen]:not([data-menu-screen=""])) .level-results,
.game-frame:has(canvas[data-menu-screen]:not([data-menu-screen=""])) .game-message,
.game-frame:has(canvas[data-menu-screen]:not([data-menu-screen=""])) .console-notice { visibility: hidden; }
.game-message { position: absolute; top: 18%; left: 8%; right: 8%; color: #fff; text-align: center; font: bold 20px/1.35 monospace; white-space: pre-wrap; text-shadow: 2px 2px #000, -2px -2px #000; pointer-events: none; }
.level-results { position: absolute; inset: 8%; overflow: auto; padding: 16px; background: #111f; border: 1px solid #777; text-align: center; z-index: 2; }
.level-results[hidden] { display: none; }
.level-results h2 { font-size: 18px; margin: 0 0 12px; }
.level-results pre { color: #fff; text-align: left; max-height: none; }
.game-message[data-kind="chat"] { top: auto; bottom: 18%; font-size: 14px; }
#game-message[hidden] { display: none; }
.console-notice { position: absolute; top: 56px; left: 8px; right: 8px; color: #fff; font: 12px monospace; white-space: pre-wrap; text-shadow: 1px 1px #000; pointer-events: none; }
.console-notice[hidden] { display: none; }
#game-console label { display: inline-block; margin: 8px 12px 0 0; }
#touch-controls { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
#touch-controls[hidden] { display: none; }
.touch-movement, .touch-attack { position: absolute; bottom: 8px; display: grid; gap: 6px; }
.touch-movement { left: 8px; grid-template-columns: repeat(2, 54px); }
.touch-attack { right: 8px; grid-template-columns: repeat(3, 54px); }
#touch-controls button { min-height: 48px; padding: 4px; border: 1px solid #aaa; border-radius: 8px; background: #181818ce; color: #fff; pointer-events: auto; touch-action: none; -webkit-touch-callout: none; }
#touch-controls button[data-held] { background: #686868ee; border-color: #fff; }
.touch-weapons { position: absolute; top: 8px; right: 8px; pointer-events: auto; }
.touch-weapon-panel { position: absolute; top: 52px; right: 0; display: grid; grid-template-columns: repeat(4, 48px); gap: 4px; padding: 4px; border: 1px solid #aaa; border-radius: 8px; background: #111e; }
.touch-weapon-panel[hidden] { display: none; }
#touch-up { grid-column: 1; grid-row: 1; }
#touch-down { grid-column: 1; grid-row: 2; }
#touch-fire { grid-column: 3; grid-row: 1 / 4; }
#touch-use { grid-column: 1; grid-row: 3; }
#touch-weapon-previous { grid-column: 2; grid-row: 1; }
#touch-weapon-next { grid-column: 2; grid-row: 2; }
@media (pointer: coarse) {
  main { margin: 8px auto; padding: 0 max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right)); }
  header { gap: 8px; }
  header button { padding: 8px; }
  /* Reclaim setup space only during touch play so touch controls remain on-screen. */
  main:has(#touch-controls:not([hidden])) #launch-settings,
  main:has(#touch-controls:not([hidden])) #audio-controls,
  main:has(#touch-controls:not([hidden])) #multiplayer-settings-note { display: none; }

  #launch-settings { grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr); gap: 6px 8px; }
}
@media (pointer: coarse) and (max-height: 540px) {
  main { margin: 4px auto; }
  /* Keep optional navigation from wrapping the active game's compact toolbar. */
  main:has(#touch-controls:not([hidden])) header a[href="/leaderboard"] { display: none; }
  header h1 { margin: 4px 0; font-size: 16px; }
#status { margin: 4px 0; }
  .game-frame { width: min(100%, calc((100dvh - 96px) * 4 / 3)); margin: 4px auto; }
  .game-help { display: none; }
}

#leaderboard-filters, .leaderboard-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
#leaderboard-filters label { display: flex; align-items: center; gap: 8px; }
#leaderboard-filters select { padding: 6px; font: inherit; }
.leaderboard-table { overflow-x: auto; }
.leaderboard-table table { border-collapse: collapse; width: 100%; }
.leaderboard-table th, .leaderboard-table td { border-bottom: 1px solid #444; padding: 8px; text-align: right; white-space: nowrap; }
.leaderboard-table th:nth-child(2), .leaderboard-table td:nth-child(2) { text-align: left; white-space: normal; min-width: 120px; overflow-wrap: anywhere; }
a { color: #a9cfff; }

#home[hidden], #launcher-back[hidden], #continue-local[hidden] { display: none; }
#home { padding: 24px 0; }
.launch-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.launch-actions button { min-height: 48px; min-width: 160px; }
#advanced-local { max-width: 540px; margin: 20px 0; }
#advanced-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
#advanced-controls select, #advanced-controls input { min-height: 36px; font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #a9cfff; outline-offset: 3px; }
summary { cursor: pointer; padding: 12px 0; }

#rooms[hidden] { display: none; }
#room-list { display: grid; gap: 12px; margin: 20px 0; }
#room-list article { border: 1px solid #444; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
#room-list h3, #room-list p { margin: 0; overflow-wrap: anywhere; }
#room-list p { grid-column: 1; }
.room-practice-badge { font-size: .75em; border: 1px solid #777; padding: 2px 6px; margin-left: .5em; }
#room-list button { grid-column: 2; grid-row: 1 / 3; min-height: 48px; }
#room-form { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr); gap: 12px; max-width: 600px; }
#room-form input, #room-form select { font: inherit; min-height: 40px; box-sizing: border-box; width: 100%; }
#room-form details, #room-bots-note, #create-and-join { grid-column: 1 / -1; }
#room-form details input { display: block; margin: 8px 0; }

#control-guide h2 { font-size: 16px; }
#control-guide-bindings { display: flex; flex-wrap: wrap; gap: 8px 20px; }
#control-guide-bindings div { display: flex; gap: 8px; }
#control-guide-bindings dt { color: #aaa; }
#control-guide-bindings dd { margin: 0; color: #fff; }
#lobby-leaders { margin: 24px 0; border-top: 1px solid #444; }
#lobby-leaders li { margin: 8px 0; overflow-wrap: anywhere; }
#room-mode-note { grid-column: 1 / -1; margin: 0; }
@media (pointer: coarse) {
  button, input, select { min-height: 48px; }
  #room-form { grid-template-columns: 1fr; }
  #room-form input, #room-form select { min-height: 48px; }
}