:root{--bg: #0e1420;--panel: #161f30;--accent: #4fd1c5;--accent2: #f6ad55;--text: #e6edf3;--muted: #8b98a9;--danger: #f56565;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}#app{max-width:1040px;margin:0 auto;padding:16px}#topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}#topbar h1{font-size:1.3rem;margin:0}.pill{font-size:.75rem;padding:4px 10px;border-radius:999px;background:var(--panel);color:var(--muted)}.pill.ok{color:var(--accent)}.pill.bad{color:var(--danger)}.screen.hidden{display:none}#toast{background:#2c3b52;color:var(--accent2);border-radius:8px;padding:8px 14px;font-size:.85rem;text-align:center;margin-bottom:12px}#toast.hidden{display:none}.card{background:var(--panel);border-radius:12px;padding:24px;max-width:420px;margin:40px auto;text-align:center;display:flex;flex-direction:column;gap:14px}.card label{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:.85rem;color:var(--muted)}input[type=text]{background:#0e1420;border:1px solid #263349;color:var(--text);border-radius:8px;padding:10px 12px;font-size:1rem}.menuActions{display:flex;flex-direction:column;gap:14px}.joinRow{display:flex;gap:8px}.joinRow input{flex:1;text-transform:uppercase}button{cursor:pointer;border:1px solid #2c3b52;background:#1c2739;color:var(--text);border-radius:8px;padding:10px 16px;font-size:.95rem;touch-action:manipulation}button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#08201d;font-weight:600}.error{color:var(--danger);min-height:1.2em;font-size:.85rem}.roomCode{font-size:2rem;letter-spacing:.3em;font-weight:700;color:var(--accent2)}#hud{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.hudPlayer{flex:1;min-width:0}.hudName{font-size:.85rem;color:var(--muted)}.healthBar{height:10px;border-radius:6px;background:#263349;overflow:hidden;margin-top:4px}.healthFill{height:100%;background:linear-gradient(90deg,#48bb78,#9ae6b4);width:100%;transition:width .3s ease}#hudP1 .healthFill{float:right}#hudCenter{text-align:center;min-width:160px}#windIndicator{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:2px}#windStrengthLabel{font-size:.75rem;color:var(--muted);letter-spacing:.02em}#turnIndicator{font-weight:600}#turnTimer{font-size:.8rem;color:var(--muted)}#gameCanvas{width:100%;height:auto;aspect-ratio:1000 / 600;background:#1a2740;border-radius:12px;display:block}#controls{display:flex;align-items:center;gap:20px;justify-content:center;margin-top:12px;flex-wrap:wrap}.stepper{display:flex;flex-direction:column;align-items:center;gap:4px}.stepperLabel{font-size:.8rem;color:var(--muted)}.stepperRow{display:flex;align-items:center;gap:10px}.stepperValue{min-width:3.2em;text-align:center;font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}.stepBtn{width:44px;height:44px;padding:0;border-radius:999px;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;user-select:none}#keyHint{text-align:center;font-size:.75rem;color:var(--muted);margin:6px 0 0}#matchBanner{text-align:center;min-height:1.4em;color:var(--accent2)}@media (hover: none) and (pointer: coarse){#keyHint{display:none}}@media (max-width: 640px){#app{padding:10px}#topbar h1{font-size:1.1rem}.card{margin:20px auto;padding:18px}#hud{gap:8px}.hudName{font-size:.75rem}#hudCenter{min-width:110px}#windSvg{width:100px;height:26px}#turnIndicator{font-size:.9rem}#controls{gap:12px}.stepBtn{width:48px;height:48px}#fireBtn{flex-basis:100%;order:3;padding:14px 16px;font-size:1.05rem}}