:root{color-scheme:dark;--color-paper: oklch(15% .014 255);--color-paper-2: oklch(19% .017 255);--color-paper-3: oklch(24% .019 255);--color-paper-4: oklch(29% .021 255);--color-rule: oklch(34% .022 255);--color-rule-strong: oklch(46% .026 255);--color-ink: oklch(95% .006 255);--color-ink-secondary: oklch(78% .012 255);--color-muted: oklch(60% .014 255);--color-accent: oklch(74% .15 222);--color-accent-soft: oklch(74% .15 222 / 16%);--color-accent-ink: oklch(14% .02 222);--color-focus: oklch(82% .15 222);--color-cobalt: oklch(74% .13 228);--color-cobalt-soft: oklch(74% .13 228 / 16%);--color-ember: oklch(75% .15 48);--color-ember-soft: oklch(75% .15 48 / 16%);--color-sage: oklch(80% .15 152);--color-sage-soft: oklch(80% .15 152 / 16%);--color-sand: oklch(82% .11 85);--color-sand-soft: oklch(82% .11 85 / 16%);--color-danger: oklch(70% .18 25);--color-danger-soft: oklch(70% .18 25 / 14%);--font-display: "Geist", ui-sans-serif, system-ui, sans-serif;--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1.0625rem;--text-lg: 1.3125rem;--text-xl: 1.625rem;--text-2xl: 2rem;--text-display: clamp(1.9rem, 3vw + 1rem, 2.5rem);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 22px;--space-6: 30px;--radius-xs: 6px;--radius-sm: 9px;--radius-md: 12px;--radius-lg: 16px;--pill: 999px;--shadow-1: 0 1px 0 rgba(0, 0, 0, .4);--shadow-2: 0 12px 30px rgba(2, 6, 16, .5);--shadow-3: 0 24px 60px rgba(2, 6, 16, .6);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-micro: .11s;--dur-short: .2s;--dur-long: .38s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:clip}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:350;line-height:1.52;color:var(--color-ink);background:radial-gradient(760px 480px at 8% -6%,oklch(74% .13 228 / 10%),transparent 62%),radial-gradient(680px 440px at 96% 18%,oklch(75% .15 48 / 9%),transparent 60%),var(--color-paper);background-attachment:fixed;letter-spacing:.003em}body:before{content:"";position:fixed;inset:0;background-image:repeating-linear-gradient(90deg,oklch(100% 0 0 / 2.5%) 0,oklch(100% 0 0 / 2.5%) 1px,transparent 1px,transparent 42px),repeating-linear-gradient(0deg,oklch(100% 0 0 / 2.5%) 0,oklch(100% 0 0 / 2.5%) 1px,transparent 1px,transparent 42px);pointer-events:none;z-index:0}#app{position:relative;z-index:1;height:100vh;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);overflow:hidden}.hidden{display:none!important}.header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);background:color-mix(in oklch,var(--color-paper-2) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);box-shadow:var(--shadow-1);flex-shrink:0}.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}.brand-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;flex-shrink:0;background:var(--color-paper-3);border:1px solid var(--color-rule)}.brand-icon svg{width:22px;height:22px;display:block}.brand-text{min-width:0}.brand-text h1{font-family:var(--font-mono);font-size:var(--text-md);font-weight:500;letter-spacing:.02em;line-height:1.1;overflow-wrap:anywhere}.brand-text span{display:block;margin-top:4px;color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.header-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;border:1px solid var(--color-rule);background:var(--color-paper-3);color:var(--color-ink);border-radius:var(--radius-sm);padding:10px 16px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}.btn:hover{background:var(--color-paper-4);border-color:var(--color-rule-strong)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn svg{width:15px;height:15px;flex-shrink:0}.btn-primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}.btn-primary:hover{background:#2bd1fe;border-color:#2bd1fe}.btn-secondary{background:var(--color-paper-3)}.btn-ghost{background:transparent}.btn-ghost:hover{background:var(--color-paper-3);border-color:var(--color-rule)}.btn-sm{padding:7px 12px;font-size:var(--text-xs)}.history-section .btn.active{background:var(--color-paper-4);border-color:var(--color-rule-strong);color:var(--color-accent)}.error-banner{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-danger-soft);border:1px solid color-mix(in oklch,var(--color-danger) 45%,transparent);border-radius:var(--radius-md);flex-shrink:0}.error-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklch,var(--color-danger) 22%,transparent);color:var(--color-danger);font-weight:700;flex-shrink:0}.error-content{flex:1;min-width:0}.error-content strong{display:block;margin-bottom:2px;text-transform:uppercase;font-size:var(--text-xs);letter-spacing:.08em;color:var(--color-danger)}.error-content p{color:var(--color-ink-secondary);font-size:var(--text-sm)}.error-actions{display:flex;gap:var(--space-2);flex-shrink:0}.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,320px) 1fr minmax(290px,340px);gap:var(--space-4)}.panel{position:relative;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-2);display:flex;flex-direction:column;overflow:hidden;animation:panelIn var(--dur-long) var(--ease-out) both}@keyframes panelIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4);flex-shrink:0}.panel-header h2,.arena-header h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}.panel-header p,.arena-header p{margin-top:3px;color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.02em}.status-pill{position:relative;display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);padding:6px 12px 6px 10px;border:1px solid var(--color-rule);background:var(--color-paper-3);color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:500;flex-shrink:0}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.status-pill.live{color:var(--color-sage);border-color:color-mix(in oklch,var(--color-sage) 40%,transparent);background:var(--color-sage-soft)}.status-pill.live:before{animation:livePulse 1.8s var(--ease-in-out) infinite}.status-pill.paused{color:var(--color-sand);border-color:color-mix(in oklch,var(--color-sand) 45%,transparent);background:var(--color-sand-soft)}.status-pill.error{color:var(--color-danger);border-color:color-mix(in oklch,var(--color-danger) 45%,transparent);background:var(--color-danger-soft)}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.35}}.config-panel{overflow-y:auto}.config-panel::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.history-viewer::-webkit-scrollbar{width:5px}.config-panel::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.history-viewer::-webkit-scrollbar-thumb{background:var(--color-rule-strong);border-radius:4px}.model-cards{display:flex;flex-direction:column;margin-bottom:var(--space-4);border:1px solid var(--color-rule);border-radius:var(--radius-md);overflow:hidden}.model-card{padding:var(--space-3)}.model-card+.model-card{border-top:1px solid var(--color-rule)}.model-toggle{display:flex;justify-content:space-between;gap:var(--space-3);cursor:pointer}.model-toggle>div{min-width:0;flex:1}.model-header{display:flex;align-items:center;gap:8px}.model-header:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--color-cobalt);flex-shrink:0}.model-card.ember .model-header:before{background:var(--color-ember)}.model-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-secondary)}.model-badge{padding:2px 9px;border-radius:var(--pill);border:1px solid transparent;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em;font-weight:500}.model-badge.cobalt{color:var(--color-cobalt);border-color:color-mix(in oklch,var(--color-cobalt) 40%,transparent);background:var(--color-cobalt-soft)}.model-badge.ember{color:var(--color-ember);border-color:color-mix(in oklch,var(--color-ember) 40%,transparent);background:var(--color-ember-soft)}.model-summary{display:none;margin-top:6px;padding-left:16px;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-muted)}.summary-value{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-secondary)}.model-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-long) var(--ease-in-out)}.model-body-inner{overflow:hidden;min-height:0;padding-top:var(--space-3)}.model-card.collapsed .model-body{grid-template-rows:0fr}.model-card.collapsed .model-body-inner{padding-top:0}.model-card.collapsed .model-summary{display:flex}.chevron{width:16px;height:16px;color:var(--color-muted);transition:transform var(--dur-short) var(--ease-in-out);flex-shrink:0}.model-card.collapsed .chevron{transform:rotate(-90deg)}.model-actions{display:flex;justify-content:flex-end}.input-group{margin-bottom:var(--space-2)}.input-group label{display:block;margin-bottom:3px;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}.input-group input{width:100%;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-xs);padding:10px 11px;color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-sm);transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}.input-group input:focus-visible{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.input-group input::placeholder{color:var(--color-muted)}.methods-section{border:1px solid var(--color-rule);background:var(--color-paper);border-radius:var(--radius-md);padding:var(--space-3)}.methods-section h3{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-2)}.method-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}.method-chip{border-radius:6px;border:1px solid var(--color-rule);padding:4px 8px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);background:var(--color-accent-soft)}.hint{font-size:var(--text-xs);color:var(--color-muted)}.hint code{font-family:var(--font-mono);background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:5px;padding:1px 4px;color:var(--color-ink-secondary)}.arena-panel{background:var(--color-paper-2)}.arena-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3);flex-shrink:0;flex-wrap:wrap}.scoreboard{display:flex;gap:var(--space-2)}.timer-display{border:1px solid var(--color-rule);background:var(--color-paper);border-radius:var(--radius-sm);padding:5px 16px;min-width:98px;text-align:center;font-family:var(--font-mono);font-size:var(--text-xl);font-weight:500;font-variant-numeric:tabular-nums;color:var(--color-ink);transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}.timer-display.warning{color:var(--color-danger);border-color:color-mix(in oklch,var(--color-danger) 50%,transparent);animation:timerWarn 1s var(--ease-in-out) infinite}@keyframes timerWarn{0%,to{opacity:1}50%{opacity:.6}}.score-card{min-width:78px;text-align:center;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--color-rule);background:var(--color-paper)}.score-card span{display:block;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}.score-card strong{display:block;font-family:var(--font-mono);font-size:var(--text-xl);font-variant-numeric:tabular-nums;margin-top:-1px}.score-card.cobalt{border-color:color-mix(in oklch,var(--color-cobalt) 35%,transparent)}.score-card.cobalt strong{color:var(--color-cobalt)}.score-card.ember{border-color:color-mix(in oklch,var(--color-ember) 35%,transparent)}.score-card.ember strong{color:var(--color-ember)}.arena-container{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--color-rule);background:radial-gradient(560px 360px at 10% 15%,var(--color-cobalt-soft),transparent 62%),radial-gradient(520px 340px at 90% 85%,var(--color-ember-soft),transparent 62%),var(--color-paper)}#arenaCanvas{width:100%;height:100%;display:block}.arena-stats{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}.stat-item{text-align:right;border-radius:8px;border:1px solid var(--color-rule);background:color-mix(in oklch,var(--color-paper) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 10px}.stat-item span{display:block;font-size:.625rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted)}.stat-item strong{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink);font-variant-numeric:tabular-nums}.arena-footer{margin-top:var(--space-3);flex-shrink:0}.objective-cards{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-2);margin-bottom:var(--space-2)}.objective-card{border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);padding:10px 11px;color:var(--color-ink-secondary);font-size:var(--text-sm);min-width:0}.objective-card strong{display:block;color:var(--color-ink);margin-bottom:2px;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm)}.ticker{border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-ink-secondary);font-family:var(--font-mono);border-radius:var(--radius-sm);padding:10px 11px;font-size:var(--text-sm)}.ticker.error{border-color:color-mix(in oklch,var(--color-danger) 45%,transparent);background:var(--color-danger-soft);color:var(--color-danger)}.log-panel{background:var(--color-paper-2)}.log-stream{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2);padding-right:4px;margin-bottom:var(--space-3)}.log-entry{display:flex;align-items:flex-start;gap:8px;border-radius:var(--radius-sm);border:1px solid var(--color-rule);background:var(--color-paper);padding:10px;font-size:var(--text-sm);color:var(--color-ink-secondary);animation:feedIn var(--dur-short) var(--ease-out)}@keyframes feedIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.log-entry:before{content:"";width:6px;height:6px;margin-top:5px;border-radius:2px;background:var(--color-cobalt);flex-shrink:0}.log-entry.ember:before{background:var(--color-ember)}.log-entry strong{display:block;margin-bottom:3px;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink)}.intent-cards{display:flex;flex-direction:column;gap:var(--space-2);flex-shrink:0}.intent-card{position:relative;border-radius:var(--radius-sm);border:1px solid var(--color-rule);background:var(--color-paper);padding:11px;overflow:hidden}.intent-card.cobalt{border-color:color-mix(in oklch,var(--color-cobalt) 40%,transparent)}.intent-card.ember{border-color:color-mix(in oklch,var(--color-ember) 40%,transparent)}.intent-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.intent-label{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}.intent-card p{font-size:var(--text-sm)}.thinking-indicator{display:inline-flex;color:var(--color-accent)}.thinking-indicator:not(.hidden) svg{animation:think 1.1s var(--ease-in-out) infinite}@keyframes think{0%,to{opacity:1}50%{opacity:.4}}.history-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-rule);display:flex;gap:var(--space-2);justify-content:center}.history-viewer{margin-top:var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--color-rule);background:var(--color-paper);padding:var(--space-3);max-height:290px;overflow-y:auto}.history-message{padding-bottom:var(--space-3);margin-bottom:var(--space-3);border-bottom:1px solid var(--color-rule)}.history-message:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}.history-message-role{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);margin-bottom:3px}.history-message-content{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-secondary);white-space:pre-wrap;word-break:break-word}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:100}.modal-backdrop{position:absolute;inset:0;background:#0203068c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal-content{position:relative;width:min(90vw,560px);border-radius:var(--radius-lg);border:1px solid var(--color-rule-strong);background:var(--color-paper-3);padding:var(--space-5);box-shadow:var(--shadow-3);animation:modalIn var(--dur-long) var(--ease-out)}@keyframes modalIn{0%{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.modal-header h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.1}.modal-header p{margin-top:4px;font-size:var(--text-sm);color:var(--color-muted)}.modal-body{display:flex;flex-direction:column;gap:var(--space-2)}.rule-item{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);padding:11px;font-size:var(--text-sm);color:var(--color-ink-secondary)}.rule-icon{width:22px;height:22px;border-radius:6px;background:var(--color-accent-soft);color:var(--color-accent);display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;flex-shrink:0}.rule-item code{font-family:var(--font-mono);background:var(--color-accent-soft);color:var(--color-accent);border-radius:5px;padding:1px 5px}.modal-content.game-over{max-width:450px;text-align:center}.game-over-header{margin-bottom:var(--space-5)}.game-over-header h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);line-height:1}.game-over-header p{margin-top:8px;color:var(--color-muted);font-size:var(--text-sm)}.final-scores{display:flex;gap:var(--space-3);margin-bottom:var(--space-5)}.final-scores .score-card{flex:1;padding:12px}@media(max-width:1220px){html,body{overflow-y:auto}#app{height:auto;min-height:100vh;overflow:visible}.layout{grid-template-columns:1fr;grid-template-rows:auto auto auto}.arena-panel{min-height:460px;order:1}.config-panel{order:2;max-height:none}.log-panel{order:3}}@media(max-width:760px){#app{padding:var(--space-3);gap:var(--space-3)}.header{flex-direction:column;align-items:stretch;padding:var(--space-3)}.header-actions{width:100%}.header-actions .btn{flex:1;justify-content:center;padding-left:10px;padding-right:10px}.arena-header{flex-direction:column;align-items:stretch}.scoreboard{width:100%}.score-card{flex:1}.timer-display{width:100%}.objective-cards{grid-template-columns:1fr}.final-scores{flex-direction:column}}