*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0e17;--bg-secondary: #111827;--bg-panel: #1a1f2e;--bg-input: #0d1117;--border: #2d3748;--border-glow: #00ff8855;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-green: #00ff88;--accent-cyan: #00d4ff;--accent-purple: #a855f7;--accent-red: #ff3366;--accent-yellow: #ffd700;--accent-orange: #ff8c00;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--font-sans: "Inter", system-ui, -apple-system, sans-serif}html,body{height:100%;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);font-size:14px;line-height:1.5;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#race-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.header-title{font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(90deg,var(--accent-green),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-center{display:flex;align-items:center;gap:12px}.header-timer{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-cyan);text-shadow:0 0 10px var(--accent-cyan)}.header-agents{display:flex;gap:12px}.agent-indicator{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;background:var(--bg-panel);border:1px solid var(--border);font-size:12px}.agent-indicator .dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.agent-indicator[data-state=running] .dot{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);animation:pulse 2s ease-in-out infinite}.agent-indicator[data-state=escaped] .dot{background:var(--accent-yellow);box-shadow:0 0 8px var(--accent-yellow)}.agent-indicator[data-state=starting] .dot{background:var(--accent-cyan);animation:pulse 1s ease-in-out infinite}.agent-indicator[data-state=stopped] .dot,.agent-indicator[data-state=error] .dot{background:var(--accent-red)}.race-state-badge{padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.race-state-badge[data-state=preparing]{background:var(--accent-cyan);color:var(--bg-primary)}.race-state-badge[data-state=running]{background:var(--accent-green);color:var(--bg-primary)}.race-state-badge[data-state=finished]{background:var(--accent-yellow);color:var(--bg-primary)}.race-state-badge[data-state=timeout]{background:var(--accent-red);color:var(--bg-primary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}#main-grid{display:flex;flex:1;min-height:0;overflow:hidden}#agent-panels{flex:1;display:grid;gap:12px;padding:12px;min-height:0;overflow:hidden}#agent-panels[data-count="1"]{grid-template-columns:1fr}#agent-panels[data-count="2"]{grid-template-columns:1fr 1fr}#agent-panels[data-count="3"]{grid-template-columns:1fr 1fr 1fr}#agent-panels[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}#agent-panels[data-count="5"],#agent-panels[data-count="6"]{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}#sidebar{width:360px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--border);min-height:0;gap:12px;padding:12px}.panel{display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;min-height:0;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.panel-header h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.panel-body{flex:1;overflow-y:auto;padding:8px;min-height:0}.panel-body::-webkit-scrollbar{width:6px}.panel-body::-webkit-scrollbar-track{background:transparent}.panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.panel-body::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.agent-panel .panel-header{gap:8px}.agent-panel .agent-name{font-size:13px;font-weight:700;color:var(--accent-cyan)}.agent-panel .agent-model{font-size:11px;color:var(--text-muted)}.agent-panel .agent-state{font-size:10px;padding:2px 8px;border-radius:3px;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.agent-state[data-state=running]{color:var(--accent-green);border:1px solid var(--accent-green)}.agent-state[data-state=escaped]{color:var(--accent-yellow);border:1px solid var(--accent-yellow);animation:glow-yellow 1s ease-in-out infinite}.agent-state[data-state=starting]{color:var(--accent-cyan);border:1px solid var(--accent-cyan)}.agent-state[data-state=stopped],.agent-state[data-state=error]{color:var(--accent-red);border:1px solid var(--accent-red)}@keyframes glow-yellow{0%,to{box-shadow:0 0 4px var(--accent-yellow)}50%{box-shadow:0 0 12px var(--accent-yellow)}}.log-entry{display:flex;gap:8px;padding:3px 0;font-size:12px;line-height:1.4;border-bottom:1px solid #ffffff08}.log-entry:last-child{border-bottom:none}.log-time{color:var(--text-muted);flex-shrink:0;font-size:11px}.log-phase{color:var(--accent-purple);flex-shrink:0;font-weight:600;font-size:11px;min-width:60px}.log-message{color:var(--text-primary);word-break:break-word}.event-entry{display:flex;gap:6px;padding:3px 0;font-size:12px;line-height:1.4;border-bottom:1px solid #ffffff08;align-items:flex-start}.event-entry:last-child{border-bottom:none}.event-kind{font-size:9px;font-weight:700;padding:1px 5px;border-radius:2px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;line-height:1.6;min-width:52px;text-align:center}.event-kind-thinking{color:var(--text-muted);background:#64748b20;border:1px solid #64748b40}.event-kind-text{color:var(--accent-cyan);background:#00d4ff15;border:1px solid #00d4ff30}.event-kind-tool_use{color:var(--accent-purple);background:#a855f720;border:1px solid #a855f740}.event-kind-tool_result{color:var(--text-secondary);background:#94a3b815;border:1px solid #94a3b830}.event-kind-status{color:var(--text-muted);background:#64748b15;border:1px solid #64748b30}.event-kind-error{color:var(--accent-red);background:#ff336615;border:1px solid #ff336640}.event-kind-progress{color:#0a0e17;background:var(--accent-green);border:1px solid var(--accent-green);min-width:64px}.event-thinking{opacity:.75;font-style:italic}.event-thinking-text{color:var(--text-secondary)}.event-text .event-text-content{color:var(--text-primary)}.event-tool_use .tool-name{font-weight:700;color:var(--accent-purple);padding:0 4px;border-radius:3px;background:#a855f720;flex-shrink:0}.event-tool_result{opacity:.85}.event-tool_result.error{color:var(--accent-red)}.event-result-label{font-size:10px;font-weight:600;color:var(--accent-green);flex-shrink:0}.event-tool_result.error .event-result-label{color:var(--accent-red)}.event-status{opacity:.7}.event-status-text{color:var(--text-muted)}.event-error,.event-error-text{color:var(--accent-red)}.event-entry.partial{border-left:2px solid var(--accent-cyan);padding-left:6px;opacity:.85}.event-entry.partial:after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--accent-cyan);animation:pulse 1s ease-in-out infinite;vertical-align:middle;flex-shrink:0}.event-progress{border-left:3px solid var(--accent-green);padding:4px 0 4px 8px;margin:2px 0;background:#00ff8808;border-radius:0 4px 4px 0}.event-progress-text{color:var(--accent-green);font-weight:600}.event-detail{color:var(--text-secondary);word-break:break-word}.event-collapsible{max-height:1.4em;overflow:hidden;cursor:pointer;text-overflow:ellipsis;white-space:nowrap}.event-collapsible.expanded{max-height:none;white-space:pre-wrap}.event-thinking-text.event-collapsible{max-height:10lh;white-space:pre-wrap;text-overflow:unset}.event-thinking-text.event-collapsible.expanded{max-height:none}#commentator-panel{flex:1;min-height:0}.commentator-entry{padding:8px 10px;margin-bottom:6px;background:var(--bg-secondary);border-left:3px solid var(--accent-purple);border-radius:0 4px 4px 0;font-size:13px;line-height:1.5}.commentator-entry .trigger-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;margin-bottom:4px;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.trigger-badge[data-trigger=event]{background:var(--accent-orange);color:var(--bg-primary)}.trigger-badge[data-trigger=periodic]{background:var(--text-muted);color:var(--bg-primary)}.commentator-entry .summary-text{display:block;margin-top:4px;color:var(--text-primary)}.commentator-entry .entry-time{display:block;margin-top:4px;font-size:10px;color:var(--text-muted)}#chat-panel{flex:1;min-height:0}.chat-messages{flex:1;overflow-y:auto;min-height:0}.chat-message{padding:4px 10px;font-size:12px;line-height:1.4}.chat-message:hover{background:#ffffff06}.chat-user{font-weight:700;color:var(--accent-cyan);margin-right:6px}.chat-text{color:var(--text-primary)}.chat-system{color:var(--accent-yellow);font-style:italic}.chat-input-wrapper{display:flex;padding:8px;gap:6px;border-top:1px solid var(--border);flex-shrink:0}.chat-input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:6px 10px;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;outline:none}.chat-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 4px var(--accent-cyan)}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{background:var(--accent-green);color:var(--bg-primary);border:none;border-radius:4px;padding:6px 12px;font-family:var(--font-mono);font-size:12px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px}.chat-send-btn:hover{background:#00cc6e}.flag-banner{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 24px;background:linear-gradient(90deg,#ffd70033,#ffd700aa,#ffd70033);border-bottom:2px solid var(--accent-yellow);text-align:center;font-size:18px;font-weight:700;color:var(--accent-yellow);text-shadow:0 0 20px var(--accent-yellow);animation:flag-slide-in .5s ease-out;letter-spacing:2px;text-transform:uppercase}@keyframes flag-slide-in{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.connection-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}.connection-status .dot{width:6px;height:6px;border-radius:50%}.connection-status.connected .dot{background:var(--accent-green);box-shadow:0 0 4px var(--accent-green)}.connection-status.disconnected .dot{background:var(--accent-red);box-shadow:0 0 4px var(--accent-red)}.connection-status.connecting .dot{background:var(--accent-yellow);animation:pulse 1s ease-in-out infinite}.agent-state[data-state=conceded]{color:var(--text-muted);border:1px solid var(--text-muted)}.agent-indicator[data-state=conceded] .dot{background:var(--text-muted)}.scroll-to-bottom{position:absolute;bottom:8px;right:12px;padding:4px 10px;border-radius:12px;border:1px solid var(--border);background:#1a1f2ee6;color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;cursor:pointer;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,color .15s}.scroll-to-bottom:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--accent-cyan)}.chat-nickname-wrapper{padding:4px 8px;border-bottom:1px solid var(--border);flex-shrink:0}.chat-nickname-btn{background:none;border:none;color:var(--text-muted);font-family:var(--font-mono);font-size:11px;cursor:pointer;padding:2px 4px}.chat-nickname-btn:hover{color:var(--text-secondary)}.chat-nickname-input{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text-primary);font-family:var(--font-mono);font-size:11px;outline:none}.chat-nickname-input:focus{border-color:var(--accent-cyan)}@media(max-width:900px){#main-grid{flex-direction:column}#sidebar{width:100%;max-height:40vh;border-left:none;border-top:1px solid var(--border);flex-direction:row}#commentator-panel,#chat-panel{flex:1;border-top:none}#chat-panel{border-left:1px solid var(--border)}#agent-panels{grid-template-columns:1fr!important}}