:root{--paper: #f3efe6;--ink: #2b2320;--ink-soft: #6b6157;--line: #d9d0bf;--gold: #e8b84a;--bg: #1f2a1c;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{overflow:hidden;background:var(--bg)}.app{position:relative;width:100%;height:100%}.game{width:100%;height:100%}.game canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#141a1059}.card{width:min(420px,100%);padding:28px 28px 22px;border-radius:16px;background:var(--paper);box-shadow:0 10px 40px #00000059;text-align:center}.card h1{margin:0 0 18px;font-size:28px;font-weight:800;letter-spacing:-.01em}.buttons{display:flex;flex-direction:column;gap:10px}button{font:inherit;font-weight:700;padding:12px 16px;border-radius:10px;border:2px solid var(--ink);background:#fffaf0;color:var(--ink);cursor:pointer}button.primary{background:var(--gold)}button:disabled{opacity:.45;cursor:default}button:not(:disabled):hover{filter:brightness(1.05)}.net{margin-top:16px;font-size:13px;color:var(--ink-soft)}.net-connected{color:#4f7d33}.net-disconnected,.net-error{color:#b63c2a}.reason{margin:0 0 6px}.muted{margin:0 0 18px;color:var(--ink-soft);font-size:14px}.error{margin-top:12px;padding:8px 10px;border-radius:8px;background:#f8ddd6;color:#8c2b1c;font-size:13px;overflow-wrap:anywhere}button.link{border:none;background:none;text-decoration:underline;font-weight:600;color:var(--ink-soft)}button.small{padding:6px 10px;font-size:13px;border-radius:8px}.join{display:flex;gap:8px}.join input{flex:1;min-width:0;font:inherit;font-weight:800;letter-spacing:.2em;text-align:center;padding:10px;border-radius:10px;border:2px solid var(--ink);background:#fff;color:var(--ink)}.big-timer{margin:0 0 8px;font-size:40px;font-weight:800}.code{margin:0 0 8px;font-size:38px;font-weight:800;letter-spacing:.18em}.reason.afk{color:#b63c2a;font-weight:700}.hud{position:absolute;inset:12px 12px auto;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,220px);gap:12px;align-items:start;pointer-events:none}.hud button{pointer-events:auto}.squad,.turn{padding:8px 10px;border-radius:12px;background:#f3efe6eb;box-shadow:0 4px 16px #0000002e}.squad{border-top:4px solid var(--team)}.squad-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--team);margin-bottom:4px}.squad-unit{display:grid;grid-template-columns:minmax(0,1fr) 60px 28px;gap:6px;align-items:center;font-size:13px;padding:2px 4px;border-radius:6px}.squad-unit.active{background:#e8b84a59}.squad-unit.dead{opacity:.4;text-decoration:line-through}.squad-unit .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hpbar{height:6px;border-radius:3px;background:#d9d0bf;overflow:hidden}.hpbar span{display:block;height:100%;background:var(--team)}.squad-unit .hp{text-align:right;font-variant-numeric:tabular-nums}.turn{justify-self:center;min-width:220px;text-align:center;border-top:4px solid var(--team)}.turn-who{font-weight:800;font-size:16px;color:var(--team)}.turn-unit{font-size:13px;color:var(--ink-soft)}.turn-timer{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.turn-timer.wait{color:#8a9480}.turn-timer.hurry{color:#d9462f}.turn-note{font-size:12px;color:#8c5a1c;margin-top:2px}.turn-buttons{display:flex;gap:6px;justify-content:center;margin-top:6px}@media (max-width: 760px){.hud{grid-template-columns:1fr 1fr}.turn{grid-column:1 / -1;grid-row:1}}.sound-buttons{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}.sound-buttons button{padding:6px 10px;font-size:13px;border-radius:8px}.sound-buttons.compact{margin-top:6px}.sound-buttons button[aria-pressed=true]{background:#e9dfcd}.overlay.modal{z-index:10;pointer-events:auto}.sliders{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;text-align:left}.slider{display:grid;grid-template-columns:80px minmax(0,1fr) 32px;gap:10px;align-items:center;font-weight:600}.slider input{width:100%;accent-color:#c9962e}.slider .value{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}.toggles{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;text-align:left;font-size:14px}