:root{--bg: #0f0f1a;--surface: rgba(255, 255, 255, .05);--surface-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .1);--text: rgba(255, 255, 255, .9);--text-muted: rgba(255, 255, 255, .5);--text-dim: rgba(255, 255, 255, .3);--primary: #7c5cff;--primary-hover: #9278ff;--primary-glow: rgba(124, 92, 255, .3);--danger: #e94560;--success: #34d399;--warning: #fbbf24;--p1: #7c5cff;--p2: #ff6644;--radius: 8px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;display:flex;justify-content:center;padding:24px}#root{width:100%;max-width:1100px}.app{display:flex;flex-direction:column;align-items:center;gap:12px}.title{font-size:1.8em;font-weight:700;color:var(--primary);letter-spacing:.02em}.subtitle{color:var(--text-dim);font-size:.8em;font-family:var(--font-mono);margin-top:-8px}.layout{display:flex;gap:16px;align-items:flex-start;width:100%}.side-panel{width:220px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}.side-panel details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.side-panel summary{padding:10px 14px;color:var(--primary);font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.85em;list-style:none}.side-panel summary::-webkit-details-marker{display:none}.side-panel summary:before{content:"▸ ";color:var(--text-dim)}.side-panel details[open]>summary:before{content:"▾ "}.side-panel summary:hover{color:var(--primary-hover)}.panel-body{padding:0 14px 14px;font-size:.75em;line-height:1.7;color:var(--text-muted)}.panel-body h4{color:var(--text);margin:8px 0 4px;font-size:.9em}.panel-body .dim{color:var(--text-dim)}.setting-group{display:flex;gap:0;margin-top:4px}.setting-btn{flex:1;padding:5px 0;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:.85em;cursor:pointer;transition:all .15s ease}.setting-btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}.setting-btn:last-child{border-radius:0 var(--radius) var(--radius) 0}.setting-btn:not(:first-child){border-left:none}.setting-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.setting-btn:not(.active):hover{background:var(--surface-hover);color:var(--text)}.board-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}.board-wrapper{position:relative}.hud-top{position:absolute;top:8px;left:12px;right:12px;display:flex;align-items:center;gap:10px;pointer-events:none;z-index:2}.hud-turn{font-family:var(--font-mono);font-size:.75em;font-weight:600;color:var(--text-dim);background:#00000080;padding:3px 8px;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-status{font-family:var(--font-mono);font-size:.8em;font-weight:700;background:#00000080;padding:3px 10px;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-orders{font-family:var(--font-mono);font-size:.7em;color:var(--text-muted);background:#00000080;padding:3px 8px;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);margin-left:auto}.hud-timer{font-family:var(--font-mono);font-size:.8em;font-weight:700;color:var(--text);background:#0009;padding:3px 10px;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);margin-left:auto}.hud-timer.warning{color:var(--warning)}.hud-timer.critical{color:var(--danger);animation:pulse .5s ease infinite alternate}.hud-bottom{position:absolute;bottom:8px;left:12px;right:12px;display:flex;justify-content:center;pointer-events:none;z-index:2}.hud-hint{font-family:var(--font-mono);font-size:.7em;color:var(--text-muted);background:#00000080;padding:4px 12px;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.handoff-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background:#0f0f1af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:var(--radius)}.handoff-title{font-size:1.4em;font-weight:700}.action-bar{display:flex;gap:8px;align-items:center}.btn-primary{padding:8px 24px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-family:var(--font-mono);font-size:.85em;font-weight:600;transition:all .15s ease;box-shadow:0 0 12px var(--primary-glow)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 0 20px var(--primary-glow)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-primary.btn-lg{padding:12px 36px;font-size:1em}.btn-ghost{padding:8px 16px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-family:var(--font-mono);font-size:.85em;transition:all .15s ease}.btn-ghost:hover{background:var(--surface);color:var(--text);border-color:var(--text-dim)}.lobby{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px;background:var(--surface);border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:360px}.lobby h2{font-size:1.2em;font-weight:700;color:var(--text)}.lobby-divider{color:var(--text-dim);font-family:var(--font-mono);font-size:.8em}.lobby-join{display:flex;gap:8px;align-items:center}.lobby-input{padding:8px 14px;background:#0000004d;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:1.1em;font-weight:700;letter-spacing:.15em;text-align:center;width:140px;outline:none;text-transform:uppercase}.lobby-input:focus{border-color:var(--primary);box-shadow:0 0 12px var(--primary-glow)}.lobby-input::placeholder{color:var(--text-dim);font-weight:400;letter-spacing:0;text-transform:none}.lobby-error{color:var(--danger);font-family:var(--font-mono);font-size:.8em}.lobby-spinner{font-size:2em;animation:spin 1.5s linear infinite;color:var(--primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.room-code{display:flex;align-items:center;gap:12px}.room-label{color:var(--text-dim);font-family:var(--font-mono);font-size:.8em}.room-id{font-family:var(--font-mono);font-size:2em;font-weight:700;color:var(--primary);letter-spacing:.15em}.share-section{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.share-text{color:var(--text-muted);font-size:.8em}.share-link-row{display:flex;gap:8px;align-items:center}.share-url{padding:6px 12px;background:#0000004d;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:.7em;color:var(--text-muted);word-break:break-all;max-width:280px}.online-info{display:flex;align-items:center;gap:6px;font-size:.85em;color:var(--text-muted)}.room-badge{font-family:var(--font-mono);font-weight:700;color:var(--primary);letter-spacing:.1em}.btn-copy{background:none;border:none;cursor:pointer;font-size:1em;padding:2px 6px;border-radius:4px;transition:background .15s}.btn-copy:hover{background:var(--surface-hover)}.dot{width:6px;height:6px;border-radius:50%;display:inline-block}.dot.green{background:var(--success)}.dot.red{background:var(--danger)}.dot.yellow{background:var(--warning)}.battle-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background:#0f0f1ae0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:var(--radius);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.battle-overlay-title{font-size:1.4em;font-weight:700;color:var(--danger);letter-spacing:.05em}.battle-overlay-events{display:flex;flex-direction:column;gap:3px;font-family:var(--font-mono);font-size:.8em;max-height:400px;overflow-y:auto;padding:12px 20px;background:#0000004d;border-radius:var(--radius);min-width:300px;max-width:500px;animation:slideUp .4s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.battle-event{color:var(--text-muted);padding:2px 0}.battle-event.move{color:var(--text-dim)}.battle-event.counter{color:var(--warning)}.battle-event.death{color:var(--danger);font-weight:600}.battle-event.win{color:var(--success);font-weight:700;font-size:1.1em}.battle-log{width:100%;max-height:120px;overflow-y:auto;padding:8px 12px;background:#0000004d;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:.7em;color:var(--text-muted);line-height:1.6}.battle-log::-webkit-scrollbar{width:4px}.battle-log::-webkit-scrollbar-track{background:transparent}.battle-log::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:2px}.menu-screen{display:flex;align-items:center;justify-content:center;min-height:80vh;width:100%}.menu-card,.setup-card,.waiting-card,.lobby-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:40px;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:24px}.lobby-card{max-width:560px}.menu-title{font-size:2.4em;font-weight:800;color:var(--primary);letter-spacing:.03em}.menu-subtitle{color:var(--text-dim);font-size:.8em;font-family:var(--font-mono);margin-top:-16px}.setup-title{font-size:1.3em;font-weight:700;color:var(--text)}.menu-buttons{display:flex;flex-direction:column;gap:8px;width:100%}.menu-btn{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;color:var(--text);width:100%}.menu-btn:hover{background:var(--surface-hover);border-color:var(--text-dim);transform:translateY(-1px)}.menu-btn.primary{border-color:var(--primary);box-shadow:0 0 16px var(--primary-glow)}.menu-btn.primary:hover{box-shadow:0 0 24px var(--primary-glow)}.menu-btn.accent{border-color:#34d3994d}.menu-btn-icon{font-size:1.4em;width:36px;text-align:center;flex-shrink:0}.menu-btn-text{display:flex;flex-direction:column;gap:2px}.menu-btn-label{font-weight:600;font-size:.95em}.menu-btn-desc{color:var(--text-muted);font-size:.75em;font-family:var(--font-mono)}.menu-join-row{display:flex;gap:8px;align-items:center;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.menu-join-input{flex:1;padding:8px 12px;background:#0000004d;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:1.1em;font-weight:700;letter-spacing:.15em;text-align:center;outline:none;text-transform:uppercase}.menu-join-input:focus{border-color:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.menu-join-input::placeholder{color:var(--text-dim);font-weight:400;letter-spacing:0}.menu-footer{margin-top:8px}.menu-rules-preview{display:flex;gap:6px;align-items:center;font-family:var(--font-mono);font-size:.7em;color:var(--text-dim)}.counter-arrow{color:var(--success)}.setup-section{width:100%}.setup-label{font-size:.8em;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.setup-options{display:flex;gap:6px}.setup-option{flex:1;padding:10px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font)}.setup-option.sm{padding:8px 4px;font-family:var(--font-mono);font-weight:600}.setup-option:hover{background:var(--surface-hover);color:var(--text)}.setup-option.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.setup-option.disabled{opacity:.3;cursor:not-allowed}.setup-option-title{font-weight:600;font-size:.85em;text-transform:capitalize}.setup-option-desc{font-size:.7em;font-family:var(--font-mono);opacity:.7}.setup-actions{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-top:8px}.room-code-large{display:flex;flex-direction:column;align-items:center;gap:6px}.room-code-label{color:var(--text-dim);font-size:.75em;text-transform:uppercase;letter-spacing:.1em}.room-code-value{font-family:var(--font-mono);font-size:2.5em;font-weight:800;color:var(--primary);letter-spacing:.2em}.player-slots{display:flex;flex-direction:column;gap:6px;width:100%}.player-slot{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.player-slot.connected{border-color:#ffffff26}.player-slot.me{border-color:var(--primary);box-shadow:0 0 6px var(--primary-glow)}.player-slot.empty{opacity:.5}.player-slot-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.player-slot-name{font-size:.85em;color:var(--text)}.config-summary{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;font-family:var(--font-mono);font-size:.7em;color:var(--text-dim)}.config-dot{color:var(--text-dim)}.waiting-status{color:var(--text-muted);font-family:var(--font-mono);font-size:.85em}.waiting-spinner{font-size:2em;animation:spin 1.5s linear infinite;color:var(--primary)}.lobby-header{display:flex;justify-content:space-between;align-items:center;width:100%}.lobby-empty{padding:32px;text-align:center;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:8px}.lobby-room-list{display:flex;flex-direction:column;gap:6px;width:100%}.lobby-room{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.lobby-room-info{flex:1;display:flex;flex-direction:column;gap:2px}.lobby-room-code{font-family:var(--font-mono);font-weight:700;color:var(--primary);letter-spacing:.1em;font-size:.9em}.lobby-room-details{font-family:var(--font-mono);font-size:.7em;color:var(--text-dim)}.lobby-room-players{display:flex;align-items:center;gap:4px}.lobby-player-dot{width:8px;height:8px;border-radius:50%}.lobby-player-count{font-family:var(--font-mono);font-size:.75em;color:var(--text-muted);margin-left:4px}.btn-sm{padding:4px 10px;font-size:.75em}.dim{color:var(--text-dim)}@media(max-width:900px){.layout{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:500px}.menu-card,.setup-card,.waiting-card,.lobby-card{padding:24px;max-width:100%}.menu-title{font-size:1.8em}.room-code-value{font-size:2em}}