:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #142236; color: #eaf0f7; }
* { box-sizing: border-box; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; }
#canvasHolder { position: fixed; inset: 0; background: #142236; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; }
.overlay { position: fixed; inset: 0; display: grid; justify-items: center; align-items: safe center; padding: 16px; background: #142236; overflow-y: auto; }
.card { width: min(540px, 100%); text-align: center; padding: 24px; background: #1c2f46; border: 2px solid #58718f; border-radius: 8px; }
h1 { color: #ffd978; font-size: clamp(28px, 7vw, 48px); letter-spacing: 4px; margin: 8px 0 16px; }
.eyebrow { color: #7fc2ad; letter-spacing: 3px; font-size: 12px; }
button { cursor: pointer; background: #ffd978; color: #142236; font: bold 20px system-ui; border: 0; border-radius: 4px; padding: 14px 32px; min-width: 200px; margin: 12px; touch-action: manipulation; }
button:disabled { opacity: .65; }
.controls { line-height: 1.8; font-size: 14px; }
.hint { font-size: 12px; color: #a1afc1; }
.error { color: #ffaf98; overflow-wrap: anywhere; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; font-size: 14px; }
.setting input:not([type=checkbox]), .setting select { width: 52%; max-width: 220px; padding: 7px; background: #142236; color: #eaf0f7; border: 1px solid #58718f; border-radius: 4px; }
.settings-toggle { position: fixed; bottom: max(145px, calc(env(safe-area-inset-bottom) + 145px)); right: max(8px, env(safe-area-inset-right)); z-index: 40; min-width: 80px; min-height: 44px; margin: 0; padding: 10px 12px; font-size: 13px; opacity: 1; touch-action: manipulation; pointer-events: auto; }
.connection { position: fixed; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; padding: 3px 8px; background: #142236; border-radius: 0 0 4px 4px; pointer-events: none; }
.game-settings { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 90vw); max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 20px; background: #142236f5; border: 2px solid #58718f; border-radius: 6px; }
.game-settings button { font-size: 14px; min-width: 0; padding: 10px; }
.game-settings .hint { overflow-wrap: anywhere; }
.lan-buttons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lan-buttons button { min-width: 0; margin: 4px 0; padding: 12px; font-size: 14px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; background: #893e35; width: 100%; padding: 12px; }
.map-pool { text-align: left; font-size: 13px; border: 1px solid #58718f; padding: 10px; }
.fullscreen-toggle { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 12; min-width: 0; margin: 0; padding: 8px 10px; font-size: 11px; }
.touch-controls { display: none; position: fixed; inset: auto 0 max(8px, env(safe-area-inset-bottom)); z-index: 3; pointer-events: none; justify-content: space-between; padding: 0 max(10px, env(safe-area-inset-left)); gap: 12px; }
.touch-controls.enabled { display: flex; }
.touch-controls, .touch-controls * { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.touch-movement { display: flex; align-items: end; }
.touch-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-items: stretch; }
.touch-controls button { min-width: 48px; min-height: 48px; margin: 0; padding: 10px; font-size: 12px; border: 2px solid #fff6; background: #21354bdb; color: white; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch-controls .touch-jump, .touch-controls .touch-fire { min-width: 64px; min-height: 60px; background: #ffd978e6; color: #142236; }
.touch-controls .pressed { background: #7fc2ad; transform: translateY(2px); }
.game-settings { z-index: 30; }
.virtual-dpad { width: clamp(104px, 30vh, 132px); height: clamp(104px, 30vh, 132px); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; color: white; }
.virtual-dpad span { display: grid; place-items: center; font-size: 20px; background: #21354be6; border: 1px solid #fff6; }
.dpad-up { grid-area: 1 / 2; border-radius: 8px 8px 0 0; }.dpad-left { grid-area: 2 / 1; border-radius: 8px 0 0 8px; }.dpad-center { grid-area: 2 / 2; }.dpad-right { grid-area: 2 / 3; border-radius: 0 8px 8px 0; }.dpad-down { grid-area: 3 / 2; border-radius: 0 0 8px 8px; }
.virtual-dpad.up .dpad-up, .virtual-dpad.down .dpad-down, .virtual-dpad.left .dpad-left, .virtual-dpad.right .dpad-right { background: #7fc2ad; color: #142236; }
.controls-guide { position: fixed; top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(94px, env(safe-area-inset-right)); z-index: 15; background: #101c2ee8; border: 1px solid #58718f; border-radius: 5px; padding: 6px 8px; color: #eaf0f7; font-size: clamp(10px, 1.4vw, 13px); line-height: 1.5; white-space: pre-line; pointer-events: none; }
.controls-guide[hidden] { display: none; }
.touch-controls { --touch-scale: 1; --touch-button-width: min(calc(64px * var(--touch-scale)), calc((100vw - 40px) / 4 - 3px)); }
.touch-controls button, .touch-controls .touch-jump, .touch-controls .touch-fire { min-width: var(--touch-button-width); width: var(--touch-button-width); min-height: calc(60px * var(--touch-scale)); padding: calc(8px * var(--touch-scale)); font-size: max(10px, calc(12px * var(--touch-scale))); }
.virtual-dpad { width: min(calc(clamp(104px, 30vh, 132px) * var(--touch-scale)), calc((100vw - 40px) / 2)); height: min(calc(clamp(104px, 30vh, 132px) * var(--touch-scale)), calc((100vw - 40px) / 2)); }
.virtual-dpad span { font-size: calc(20px * var(--touch-scale)); }
.settings-toggle { bottom: max(145px, calc(132px * var(--touch-scale, 1) + 20px + env(safe-area-inset-bottom))); }
.controls-guide:not([hidden]) ~ .connection { top: 75px; }
.map-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 180px; overflow-y: auto; margin-top: 10px; }
@media (max-height: 480px) { .card { padding: 10px 24px; } h1 { font-size: 28px; margin: 4px; } .controls { margin: 4px; line-height: 1.4; } button { padding: 10px 28px; margin: 4px; } }