:root {
  color-scheme: dark;
  --panel-bg: rgb(9 14 17 / 72%);
  --panel-strong: rgb(9 14 17 / 94%);
  --panel-border: rgb(255 255 255 / 14%);
  --text: #f8fbf7;
  --muted: rgb(248 251 247 / 72%);
  --accent: #8ec6aa;
  --accent-strong: #69a98b;
  --gold: #c9a55b;
  --blue: #8eb3ca;
  --danger: #e77777;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #10171b;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { touch-action: none; user-select: none; }
#game { display: block; width: 100vw; height: 100vh; outline: none; }
#hud { position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: grid; gap: 8px; max-width: calc(100vw - 76px); pointer-events: none; font-size: 12px; letter-spacing: 0; text-transform: uppercase; z-index: 10; }
.meter { display: flex; flex-wrap: wrap; gap: 8px; }
.meter span { min-width: 78px; max-width: min(42vw, 220px); overflow: hidden; padding: 7px 10px; border: 1px solid var(--panel-border); border-radius: 4px; background: var(--panel-bg); box-shadow: 0 8px 22px rgb(0 0 0 / 26%); backdrop-filter: blur(12px); text-overflow: ellipsis; white-space: nowrap; }
#status.online { color: var(--accent); }
#status.offline { color: var(--danger); }
#place { color: var(--blue); }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--panel-border); border-radius: 4px; background: var(--panel-bg); color: var(--text); box-shadow: 0 10px 24px rgb(0 0 0 / 28%); backdrop-filter: blur(12px); }
#menuButton { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 35; }
#roster { position: fixed; right: max(14px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 50px); display: grid; gap: 5px; width: min(228px, calc(100vw - 28px)); pointer-events: none; z-index: 8; }
#roster.hidden { display: none; }
.player-row { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border: 1px solid var(--panel-border); border-radius: 4px; background: var(--panel-bg); box-shadow: 0 10px 22px rgb(0 0 0 / 22%); backdrop-filter: blur(10px); font-size: 11px; letter-spacing: .025em; text-transform: uppercase; }
.player-row.self { border-color: rgb(120 215 166 / 62%); }
.player-row.away { opacity: 0.72; }
.player-row.away .player-color { filter: grayscale(0.55); }
.player-color { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / 16%); }
.player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#doorPrompt { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 28px); transform: translateX(-50%); padding: 8px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 8px; background: var(--panel-strong); box-shadow: 0 16px 38px rgb(0 0 0 / 30%); z-index: 16; }
#doorPrompt.hidden { display: none; }
#doorPromptText { min-width: 0; overflow: hidden; padding: 0 2px 0 6px; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#doorPromptButton { min-height: 34px; padding: 0 13px; }
#feed { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 6px; width: min(300px, calc(100vw - 28px)); pointer-events: none; font-size: 13px; z-index: 9; }
.feed-item { justify-self: end; max-width: 100%; overflow: hidden; padding: 8px 10px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 6px; background: var(--panel-bg); color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
#settingsPanel { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 42%); backdrop-filter: blur(6px); z-index: 40; }
#settingsPanel.hidden { display: none; }
.settings-shell { display: grid; gap: 16px; width: min(420px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-strong); box-shadow: 0 20px 56px rgb(0 0 0 / 44%); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.settings-head h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.settings-shell label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.settings-shell input[type="range"] { width: 100%; accent-color: var(--accent); }
.toggle-row { grid-template-columns: 1fr auto; align-items: center; }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.settings-group { display: grid; gap: 10px; }
.settings-label { color: var(--muted); font-size: 13px; text-transform: uppercase; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.swatch { width: 100%; aspect-ratio: 1; min-height: 34px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 18%); background: var(--swatch); box-shadow: inset 0 0 0 3px rgb(0 0 0 / 16%); }
.swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px rgb(120 215 166 / 44%), inset 0 0 0 3px rgb(0 0 0 / 16%); }
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; }
.segmented button { min-height: 36px; border: 0; border-right: 1px solid var(--panel-border); border-radius: 0; background: rgb(255 255 255 / 5%); color: var(--muted); font-size: 12px; font-weight: 800; }
.segmented button:last-child { border-right: 0; }
.segmented button.selected { background: var(--accent); color: #08130e; }
.settings-note { min-height: 16px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings-note.error { color: var(--danger); }
.settings-note.ok { color: var(--accent); }
.secondary-button { width: 100%; min-height: 42px; background: transparent; color: var(--text); }
#overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 44%, rgb(5 9 12 / 20%), rgb(5 9 12 / 72%)); transition: opacity 220ms ease; z-index: 30; }
#overlay.hidden { opacity: 0; pointer-events: none; }
.panel { display: grid; justify-items: center; gap: 14px; text-align: center; }
.panel h1 { max-width: min(720px, 92vw); margin: 0; font-size: clamp(34px, 5.4vw, 64px); font-weight: 720; line-height: 1.02; letter-spacing: .018em; text-shadow: 0 8px 32px rgb(0 0 0 / 58%); }
.panel p { max-width: min(420px, 88vw); margin: 0; color: var(--muted); font-size: 15px; text-shadow: 0 4px 18px rgb(0 0 0 / 52%); }
.panel .intro { max-width: min(560px, 88vw); font-size: 14px; line-height: 1.55; }
button { border: 1px solid rgb(255 255 255 / 16%); border-radius: 4px; background: var(--accent); color: #08130e; font: inherit; font-weight: 750; letter-spacing: .01em; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
#enterButton { min-width: 120px; min-height: 46px; padding: 0 22px; font-size: 18px; }
#touchControls { position: fixed; inset: 0; display: none; pointer-events: none; z-index: 14; }
#movePad { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 124px; height: 124px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 50%; background: rgb(14 20 24 / 48%); pointer-events: auto; }
#moveKnob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; transform: translate(-50%, -50%); background: rgb(255 255 255 / 76%); box-shadow: 0 6px 18px rgb(0 0 0 / 34%); }
#actionButton { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(34px, env(safe-area-inset-bottom)); width: 88px; height: 88px; border-radius: 50%; pointer-events: auto; }
#jumpButton, #crouchButton { position: absolute; right: calc(max(24px, env(safe-area-inset-right)) + 102px); width: 68px; height: 68px; border-radius: 50%; pointer-events: auto; font-size: 12px; }
#jumpButton { bottom: calc(max(34px, env(safe-area-inset-bottom)) + 82px); background: var(--blue); color: #06111f; }
#crouchButton { bottom: max(34px, env(safe-area-inset-bottom)); background: #f1f5f1; color: #111820; }
@media (pointer: coarse) { #touchControls { display: block; } #hud { font-size: 11px; } .meter span { min-width: 58px; padding: 6px 7px; } }
@media (max-width: 720px) { #roster, #roster.force-show { display: none; } #doorPrompt { bottom: calc(max(34px, env(safe-area-inset-bottom)) + 96px); width: min(330px, calc(100vw - 28px)); } #doorPromptText { flex: 1; } #feed { display: none; } }
@media (max-width: 480px) { .panel { gap: 10px; } .panel h1 { max-width: min(330px, 86vw); font-size: 27px; line-height: 1.06; } .panel p { max-width: min(320px, 88vw); } .panel .intro { max-width: min(318px, 88vw); font-size: 12px; line-height: 1.42; } #enterButton { min-height: 42px; font-size: 16px; } }

#throwButton { position: absolute; right: calc(max(24px, env(safe-area-inset-right)) + 102px); bottom: calc(max(34px, env(safe-area-inset-bottom)) + 164px); width: 68px; height: 68px; border-radius: 50%; pointer-events: auto; font-size: 12px; background: #cfeffe; color: #06243a; border: none; }

@media (max-width: 720px) { #askLaunch { left: auto !important; right: max(14px, env(safe-area-inset-right)) !important; top: calc(max(14px, env(safe-area-inset-top)) + 46px) !important; transform: none !important; } }