: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}@media(max-width:900px){.layout{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:500px}}