/* AI Arena games. Uses the site tokens from style.css. */
:root{--arena-ok:#127a3a;--arena-no:#b42318}
[data-theme="dark"]{--arena-ok:#4ade80;--arena-no:#f87171}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--arena-ok:#4ade80;--arena-no:#f87171}}
.arena-app{margin:24px 0 40px;max-width:760px}
.arena-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin:0 0 16px;overflow-wrap:anywhere}
.arena-card h2,.arena-card h3{margin-top:0}
.arena-progress-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.arena-progress-row progress{flex:1;min-width:0;height:10px;accent-color:var(--accent)}
.arena-score{font-weight:650;white-space:nowrap}
.arena-options{display:grid;gap:10px;margin:16px 0}
.arena-option,.arena-btn{font:inherit;color:var(--text-primary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;cursor:pointer;text-align:left;text-decoration:none;display:inline-flex;align-items:center}
.arena-option{min-height:48px;width:100%}
.arena-btn{min-height:44px}
.arena-option:hover:not(:disabled),.arena-btn:hover{background:var(--surface-hover)}
.arena-option:disabled{cursor:default;opacity:1}
.arena-option.is-correct{border:2px solid var(--arena-ok)}
.arena-option.is-wrong{border:2px solid var(--arena-no)}
.arena-option.is-correct::before{content:"✓ ";color:var(--arena-ok);font-weight:700;margin-right:4px}
.arena-option.is-wrong::before{content:"✗ ";color:var(--arena-no);font-weight:700;margin-right:4px}
.arena-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.arena-btn-primary:hover{background:var(--accent-hover)}
.arena-option:focus-visible,.arena-btn:focus-visible,.arena-app select:focus-visible,.arena-app textarea:focus-visible,.arena-radio input:focus-visible,.arena-app a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.arena-q:focus,.arena-app legend:focus,.arena-app h2:focus{outline:none}
.arena-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.arena-verdict{font-weight:700}
.arena-verdict.ok{color:var(--arena-ok)}
.arena-verdict.no{color:var(--arena-no)}
.arena-note,.arena-status{font-size:.88rem;color:var(--text-secondary)}
.arena-sample{margin:12px 0;padding:12px 16px;border-left:4px solid var(--accent);background:var(--bg);border-radius:var(--radius-sm);font-family:var(--font-serif);font-size:1.05rem}
.arena-msg{border:1px dashed var(--border);border-radius:var(--radius-md);padding:12px 16px;background:var(--bg)}
.arena-msg-text{white-space:pre-wrap}
.arena-msg-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin:0 0 6px}
.arena-chip{display:inline-block;font-size:.78rem;font-weight:650;padding:2px 10px;border:1px solid var(--border);border-radius:999px}
.arena-chip.ok{border-color:var(--arena-ok);color:var(--arena-ok)}
.arena-prompt{white-space:pre-wrap;background:var(--code-bg);color:var(--code-text);padding:12px;border-radius:var(--radius-sm);font-size:.9rem}
.arena-edit,.arena-manual{width:100%;box-sizing:border-box;font:inherit;color:var(--text-primary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px}
.arena-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.arena-filters label{display:block;font-weight:650;margin-bottom:4px}
.arena-filters select{width:100%;min-height:44px;font:inherit;color:var(--text-primary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px}
@media (max-width:480px){.arena-filters{grid-template-columns:1fr}}
.arena-fieldset{border:0;padding:0;margin:0}
.arena-fieldset legend{font-size:1.15rem;font-weight:700;margin-bottom:10px;padding:0}
.arena-radio{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;margin:8px 0;background:var(--bg)}
.arena-radio input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
.arena-radio label{flex:1;cursor:pointer}
.arena-tool-list{list-style:none;padding:0;margin:0}
.arena-offscreen{position:fixed;left:-9999px;top:0}
.arena-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.arena-hub a{display:block;color:inherit;text-decoration:none;height:100%;box-sizing:border-box}
.arena-hub a:hover{border-color:var(--accent)}
.arena-hub a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.arena-hub h2{font-size:1.15rem;margin:0 0 6px}
.arena-hub p{margin:0;color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){.arena-app *,.arena-hub *{transition:none!important;animation:none!important}}