:root{--bg: #0b1120;--bg-2: #1a2438;--bg-3: #2a3650;--fg: #e2e8f0;--fg-2: #94a3b8;--accent: #facc15;--tile-neutral: #2a3650;--tile-wall: #11151f;--tile-bonus-dot: #facc15;--tile-claimable-outline: rgba(250, 204, 21, .6);--tile-anchor-border: #facc15}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);overscroll-behavior:none}body{-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none}input{user-select:text;-webkit-user-select:text}button{background:var(--bg-3);color:var(--fg);border:1px solid #475569;border-radius:4px;padding:6px 10px;cursor:pointer;font-size:13px}button:hover{background:#3b4866}kbd{background:var(--bg-3);border:1px solid #475569;border-radius:3px;padding:1px 5px;font-size:11px;font-family:ui-monospace,monospace}input[type=text],input{background:var(--bg-2);color:var(--fg);border:1px solid #475569;border-radius:4px;padding:4px 6px;font-size:13px;width:140px}.start-screen{max-width:560px;margin:24px auto;padding:16px 18px;background:var(--bg-2);border-radius:10px}.start-screen h1{margin:0 0 4px;font-size:26px;color:var(--accent)}@media (min-width: 720px){.start-screen{margin:56px auto;padding:24px 32px}.start-screen h1{font-size:30px}}.start-tagline{color:var(--fg-2);margin:0 0 16px}.start-rules{padding-left:18px;line-height:1.5;margin:0 0 16px;font-size:14px}.start-rules li{margin-bottom:4px}.start-form{display:flex;gap:12px;align-items:end}.start-form label{display:flex;flex-direction:column;font-size:12px;color:var(--fg-2);gap:4px}.start-button{background:var(--accent);color:#1e293b;font-weight:700;border:none;padding:8px 20px}.start-button:hover{background:#fde047}.game{display:flex;flex-direction:column;height:100vh;overflow:hidden}.hud{display:flex;flex-direction:column;gap:8px;padding:8px 10px;background:var(--bg-2);border-bottom:1px solid var(--bg-3)}.hud-timer{display:flex;align-items:baseline;gap:6px}.hud-timer-label{font-size:10px;color:var(--fg-2);letter-spacing:1px}.hud-timer-value{font-size:20px;font-weight:700;font-family:ui-monospace,monospace;color:var(--accent)}.hud-players{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}@media (min-width: 720px){.hud{flex-direction:row;align-items:center;gap:16px;padding:10px 16px}.hud-timer{flex-direction:column;align-items:center;gap:0;padding-right:16px;border-right:1px solid var(--bg-3)}.hud-timer-value{font-size:22px}.hud-players{grid-template-columns:repeat(4,1fr);flex:1}}.player-card{background:var(--bg-3);border-radius:6px;padding:5px 8px;border:1px solid transparent;opacity:.9;min-width:0}.player-card.is-human{border-color:var(--accent);opacity:1}.player-card.is-out{opacity:.4}.player-card-row{display:flex;align-items:center;gap:6px}.player-card-stats{margin-top:3px;justify-content:space-between}.player-name{font-weight:600;font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-swatch{width:12px;height:12px;border-radius:2px}.player-dead{font-size:10px;color:#ef4444;font-weight:700}.stat{display:flex;flex-direction:column;align-items:flex-start}.stat-label{font-size:9px;color:var(--fg-2);letter-spacing:.5px}.stat-value{font-size:14px;font-weight:700;font-family:ui-monospace,monospace}.stat-pct{font-size:9px;color:var(--fg-2)}.board-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px}.board{display:grid;grid-auto-rows:1fr;gap:2px;background:var(--bg-2);padding:4px;border-radius:6px;width:var(--board-size, 100%);height:var(--board-size, 100%);touch-action:none}.tile{background:var(--tile-neutral);border:2px solid transparent;border-radius:3px;position:relative;cursor:pointer;min-width:0;min-height:0;transition:background 40ms ease,transform 80ms ease,box-shadow 40ms ease;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.tile-fog{filter:brightness(.5) saturate(.55);cursor:default}@media (hover: hover){.tile:hover{transform:scale(1.06);z-index:2}}.tile:active{transform:scale(.92);transition:transform 40ms ease}@media (min-width: 720px){.board-wrap{padding:16px}.board{gap:3px;padding:8px}.tile{border-radius:4px}}.tile-claimable{box-shadow:inset 0 0 0 2px var(--tile-claimable-outline)}.tile-anchor{border-color:var(--tile-anchor-border)!important;box-shadow:0 0 6px #facc1599}.tile-held{box-shadow:inset 0 0 0 3px var(--accent),0 0 10px #facc1599;animation:tile-held-pulse .6s ease-in-out infinite alternate}@keyframes tile-held-pulse{0%{filter:brightness(1)}to{filter:brightness(1.25)}}.tile-bonus-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35%;height:35%;border-radius:50%;background:var(--tile-bonus-dot);box-shadow:0 0 6px #facc15b3;pointer-events:none}.tile-owned.tile-bonus .tile-bonus-dot{background:#fff;box-shadow:0 0 6px #fffc}.tile-bonus-surround:not(.tile-owned){background:radial-gradient(circle at center,rgba(250,204,21,.18),transparent 70%),var(--tile-neutral)}.tile-wall:not(.tile-owned){background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px),var(--tile-wall);box-shadow:inset 0 0 0 1px #ffffff0f}.tile-wall.tile-bonus-surround:not(.tile-owned){background:radial-gradient(circle at center,rgba(250,204,21,.22),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px),var(--tile-wall)}.tile-moat-tint{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:.22;pointer-events:none}.tile-cost{position:absolute;top:1px;right:2px;font-size:9px;font-weight:700;font-family:ui-monospace,monospace;color:#fffc;background:#00000080;border-radius:2px;padding:0 3px;pointer-events:none;z-index:1}@media (min-width: 720px){.tile-cost{font-size:10px;padding:0 4px}}.tile-damage-bar{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#fca5a5,#ef4444);border-radius:0 0 3px 3px;pointer-events:none;z-index:1;transition:width 40ms ease}.bottom-bar{display:flex;align-items:center;gap:12px;padding:6px 10px;background:var(--bg-2);border-top:1px solid var(--bg-3);font-size:12px;color:var(--fg-2)}.bottom-hint{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottom-hint code{background:var(--bg-3);padding:1px 5px;border-radius:3px;font-family:ui-monospace,monospace}.quit-button{padding:4px 12px}.kbd-hint{display:none}@media (min-width: 720px){.kbd-hint{display:inline}.bottom-bar{padding:8px 16px}}.leaderboard{margin-top:16px;background:var(--bg-3);border-radius:6px;padding:10px 12px;text-align:left}.leaderboard-title{font-size:11px;color:var(--fg-2);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}.leaderboard-empty{font-size:13px;color:var(--fg-2);font-style:italic}.leaderboard-list{list-style:none;margin:0;padding:0}.leaderboard-row{display:grid;grid-template-columns:20px auto 1fr auto;gap:8px;align-items:center;font-size:12px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}.leaderboard-reason{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-row:last-child{border-bottom:none}.leaderboard-row.hit{background:#facc151f;border-radius:3px;padding:3px 4px;font-weight:600}.leaderboard-rank{font-family:ui-monospace,monospace;color:var(--fg-2);text-align:right}.leaderboard-time{font-family:ui-monospace,monospace;color:var(--accent);font-weight:700}.leaderboard-reason,.leaderboard-date{color:var(--fg-2);font-size:11px}.leaderboard-clear{margin-top:8px;font-size:11px;padding:3px 8px;background:transparent;border-color:#475569;color:var(--fg-2)}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b1120c7;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.tutorial-card{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:8px;padding:20px 24px;width:100%;max-width:420px;box-shadow:0 12px 40px #0006}.tutorial-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.tutorial-progress{display:flex;gap:6px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-3);transition:background 80ms ease,transform 80ms ease}.tutorial-dot.is-active{background:var(--accent);transform:scale(1.2)}.tutorial-skip{background:transparent;border:none;color:var(--fg-2);font-size:12px;cursor:pointer;padding:4px 8px}.tutorial-skip:hover{color:var(--fg)}.tutorial-title{margin:0 0 12px;font-size:22px;color:var(--fg)}.tutorial-body{margin:0 0 24px;color:var(--fg-2);line-height:1.5;font-size:15px}.tutorial-actions{display:flex;justify-content:space-between;gap:8px}.tutorial-back,.tutorial-next{background:var(--bg-3);color:var(--fg);border:1px solid var(--bg-3);border-radius:4px;padding:8px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:background 80ms ease}.tutorial-back:disabled{opacity:.4;cursor:not-allowed}.tutorial-back:not(:disabled):hover,.tutorial-next:hover{background:#3a4660}.tutorial-next.is-primary{background:var(--accent);color:#1a2438;border-color:var(--accent)}.tutorial-next.is-primary:hover{background:#fde047}.home-user-sep{color:var(--bg-3);margin:0 6px}.end-banner{position:absolute;top:0;right:0;bottom:0;left:0;background:#0b1120d9;display:flex;align-items:center;justify-content:center;z-index:10}.end-banner-card{background:var(--bg-2);padding:16px 18px;border-radius:8px;border:2px solid var(--accent);text-align:center;width:calc(100vw - 32px);max-width:420px}@media (min-width: 720px){.end-banner-card{padding:24px 32px}}.end-banner-card h2{color:var(--accent);margin:0 0 4px;font-size:28px}.end-banner-reason{color:var(--fg-2);margin:0 0 12px;font-size:13px}.end-banner-time{color:var(--fg);margin:0 0 4px;font-size:18px}.end-banner-time strong{color:var(--accent);font-family:ui-monospace,monospace}.end-banner-rank{color:var(--fg-2);margin:0 0 8px;font-size:13px}.end-banner-card button{margin-top:12px}.end-banner-actions{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}.end-banner-actions button{margin-top:0}.end-banner-primary{background:var(--accent);color:#1a2438;border:1px solid var(--accent);font-weight:700}.end-banner-primary:hover{background:#fde047}.end-banner-secondary{background:transparent;color:var(--fg-2);border:1px solid var(--bg-3)}.end-banner-secondary:hover{background:var(--bg-3);color:var(--fg)}.replay-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}.replay-actions button{margin-top:0}.replay-controls{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bg-2);border-top:1px solid var(--bg-3)}.replay-play{min-width:72px}.replay-progress{flex:1;height:8px;background:var(--bg-3);border-radius:4px;overflow:hidden}.replay-progress-bar{height:100%;background:var(--accent);transition:width 80ms linear}.replay-time{font-variant-numeric:tabular-nums;color:var(--fg-2);font-size:13px;min-width:84px;text-align:right}.replay-speeds{display:flex;gap:4px}.replay-speed{padding:4px 8px;font-size:12px}.replay-speed.active{background:var(--accent);color:#0b1220}.home-user{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13px;color:var(--fg-2)}.link-button{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:12px;text-decoration:underline}.link-button:hover{color:#fde047}.profile-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}.profile-stat{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:6px;padding:10px 8px;text-align:center}.profile-stat-value{font-size:22px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}.profile-stat-sep{color:var(--fg-2);margin:0 2px;font-weight:400}.profile-stat-label{color:var(--fg-2);font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}.recent-replays{margin-top:18px}.recent-replays-title{color:var(--fg-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}.recent-replays-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.recent-replay-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;background:var(--bg-2);border:1px solid var(--bg-3);border-radius:4px;padding:8px 12px;color:var(--fg);text-align:left;cursor:pointer;font-size:13px;transition:background 80ms ease,border-color 80ms ease}.recent-replay-row:hover{background:var(--bg-3);border-color:var(--accent)}.recent-replay-result{font-size:11px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:3px;min-width:42px;text-align:center}.recent-replay-result.recent-replay-won{background:#22c55e;color:#052e10}.recent-replay-result.recent-replay-lost{background:var(--bg-3);color:var(--fg-2)}.recent-replay-result.recent-replay-draw{background:var(--bg-3);color:var(--accent)}.recent-replay-vs{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-replay-meta{color:var(--fg-2);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.lobby-seat-record{color:var(--fg-2);font-size:12px;margin-left:8px;font-variant-numeric:tabular-nums}.lobby-seat-record-new{color:var(--accent);font-style:italic}.home-fog-toggle{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--fg-2);cursor:pointer;-webkit-user-select:none;user-select:none}.home-fog-toggle input{margin:0}.home-fog-sub{color:#64748b}.ai-level-picker{margin:0 0 14px}.ai-level-picker-label{color:var(--fg-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}.ai-level-picker-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ai-level-button{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:4px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer;transition:background 80ms ease,border-color 80ms ease}.ai-level-button:hover{background:var(--bg-3);border-color:var(--accent)}.ai-level-button.is-selected{background:var(--accent);color:#1a2438;border-color:var(--accent)}.profile-card-levels{margin-top:0;margin-bottom:18px}.lobby-fog{background:#facc1514;border:1px solid rgba(250,204,21,.3);color:var(--accent);border-radius:4px;padding:8px 12px;margin:8px 0 0;font-size:13px}.footer-tag{color:var(--accent)}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:20}.countdown-number{font-size:clamp(80px,18vmin,200px);font-weight:900;color:var(--accent);text-shadow:0 4px 32px rgba(0,0,0,.6);animation:countdown-pop .7s ease-out forwards}.countdown-sub{color:var(--fg-2);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-top:8px;text-shadow:0 1px 4px rgba(0,0,0,.8)}@keyframes countdown-pop{0%{transform:scale(.6);opacity:0}20%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.9}}.home-modes{display:grid;grid-template-columns:1fr;gap:10px}@media (min-width: 720px){.home-modes{grid-template-columns:1fr 1fr}}.home-mode{background:var(--bg-3);color:var(--fg);border:1px solid #475569;border-radius:6px;padding:14px 16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit}.home-mode:hover{background:#3b4866}.home-mode-title{font-size:16px;font-weight:700;color:var(--accent)}.home-mode-sub{font-size:12px;color:var(--fg-2)}.home-mode-join{cursor:default}.home-mode-join:hover{background:var(--bg-3)}.home-join-form{display:flex;gap:8px;margin-top:8px;align-items:center}.home-join-form input{flex:1;text-transform:uppercase;font-family:ui-monospace,monospace;letter-spacing:4px;text-align:center;font-size:18px}.home-join-form button{background:var(--accent);color:#1e293b;font-weight:700;border:none;padding:6px 14px}.home-join-form button:disabled{background:#475569;color:#94a3b8;cursor:not-allowed}.lobby-screen{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh}.lobby-card{max-width:480px;width:100%;background:var(--bg-2);border-radius:10px;padding:24px}.lobby-card h2{margin:0 0 8px;font-size:16px;color:var(--fg-2);letter-spacing:1px;text-transform:uppercase}.lobby-code{font-family:ui-monospace,monospace;font-size:56px;font-weight:700;color:var(--accent);text-align:center;letter-spacing:12px;margin:8px 0 12px;padding:12px;background:var(--bg-3);border-radius:8px;-webkit-user-select:all;user-select:all}.lobby-hint{margin:0 0 16px;color:var(--fg-2);font-size:13px;line-height:1.4}.lobby-seats{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}.lobby-seat{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-3);border-radius:6px;border:1px solid transparent}.lobby-seat.is-me{border-color:var(--accent)}.lobby-seat-swatch{width:14px;height:14px;border-radius:3px}.lobby-seat-swatch[data-slot="0"]{background:#ef4444}.lobby-seat-swatch[data-slot="1"]{background:#3b82f6}.lobby-seat-swatch[data-slot="2"]{background:#10b981}.lobby-seat-swatch[data-slot="3"]{background:#f59e0b}.lobby-seat-label{font-size:14px}.lobby-seat-empty{color:var(--fg-2);font-style:italic}.lobby-host-tag{font-size:10px;background:var(--accent);color:#1e293b;padding:1px 5px;border-radius:3px;margin-left:6px;font-weight:700;text-transform:uppercase}.lobby-me-tag{font-size:10px;color:var(--accent);margin-left:6px;text-transform:uppercase;font-weight:700}.lobby-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.lobby-waiting{margin:0;color:var(--fg-2);font-style:italic;font-size:13px}.ready-button{background:var(--bg-3);color:var(--fg);border:1px solid var(--bg-3);border-radius:4px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:background 80ms ease,border-color 80ms ease}.ready-button:hover{background:#3a4660}.ready-button.is-ready{background:#22c55e;border-color:#22c55e;color:#052e10}.ready-button.is-ready:hover{background:#16a34a}.lobby-setting{display:flex;align-items:center;gap:8px;background:#facc1514;border:1px solid rgba(250,204,21,.3);border-radius:4px;padding:8px 12px;margin:8px 0 0;font-size:13px;color:var(--accent);cursor:pointer;-webkit-user-select:none;user-select:none}.lobby-setting input{margin:0}.lobby-setting-sub{color:var(--fg-2)}.lobby-seat-ready{color:#22c55e;font-size:11px;font-weight:600;margin-left:8px}.lobby-seat-notready{color:var(--fg-2);font-size:11px;font-style:italic;margin-left:8px}.lobby-error{color:#ef4444;margin:0 0 12px}.online-player-list{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}.online-player{display:inline-flex;align-items:center;gap:4px;font-size:11px}.online-player-swatch{width:8px;height:8px;border-radius:2px}.online-player-swatch[data-slot="0"]{background:#ef4444}.online-player-swatch[data-slot="1"]{background:#3b82f6}.online-player-swatch[data-slot="2"]{background:#10b981}.online-player-swatch[data-slot="3"]{background:#f59e0b}