:root{--bg:#050607;--bg-secondary:#13181f;--card:#0e1217d6;--border:#6b728061;--text:#f8fafc;--muted:#cbd5e1;--accent:#38bdf8;--accent-soft:#38bdf83d;--accent-ring:#38bdf8f2;--glow-primary:#38bdf833;--glow-secondary:#0e749029;--status-connected-bg:#38bdf83d;--status-connected-text:#e2f3ff;--status-disconnected-bg:#ef444438;--status-disconnected-text:#fecaca;--mono:"Iosevka", "JetBrains Mono", "Fira Code", monospace;--sans:"Manrope", "Avenir Next", "Segoe UI", sans-serif}*{box-sizing:border-box}body{height:100svh;color:var(--text);font-family:var(--sans);background:radial-gradient(1000px 480px at 20% 0%, var(--glow-primary), transparent), radial-gradient(900px 420px at 90% 10%, var(--glow-secondary), transparent), linear-gradient(140deg, var(--bg), var(--bg-secondary));margin:0}#app{height:100%}.layout{flex-direction:column;gap:.75rem;height:100%;padding:1rem 1rem 0;display:flex;position:relative}.top-bar{justify-content:space-between;align-items:center;padding:.2rem .2rem .45rem;display:flex}h1{letter-spacing:.05em;text-transform:uppercase;margin:0;font-size:clamp(1.45rem,3vw,2rem)}.actions{align-items:center;gap:.55rem;display:flex}.card{border:1px solid var(--border);background:var(--card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;padding:1rem;box-shadow:0 20px 38px #02061780}.canvas-wrap{flex:1;min-height:0;margin-bottom:120px;position:relative}.turn-tracker{border:1px solid var(--border);background:var(--card);z-index:10;border-bottom:none;border-radius:14px 14px 0 0;flex-direction:column;gap:.55rem;padding:.6rem .7rem;display:flex;position:fixed;bottom:0;left:0;right:0}.turn-tracker-content{align-items:stretch;gap:.5rem;display:flex}.turn-tracker-center{flex-direction:column;flex:1;gap:.55rem;min-width:0;display:flex}.turn-tracker-head{color:var(--muted);justify-content:space-between;align-items:center;gap:.6rem;font-size:.9rem;display:flex}.turn-tracker-head strong{color:var(--text)}.turn-tracker-actions{align-items:center;gap:.5rem;display:flex}.turn-control{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;min-height:100%;padding:0;font-size:1rem;line-height:1;display:flex}.turn-tracker-strip{justify-content:center;align-items:stretch;gap:.5rem;min-height:88px;display:flex}.turn-tracker-strip.is-spinning{animation:none}.turn-card{border:1px solid var(--border);background:var(--card);border-radius:10px;grid-template-columns:54px 1fr;align-items:center;gap:.55rem;width:min(170px,22vw);min-width:0;padding:.42rem;display:grid}.turn-card.is-current-turn{border-color:var(--accent-ring);box-shadow:0 0 0 2px var(--accent-soft)}.turn-portrait{border:1px solid var(--border);background:linear-gradient(150deg, var(--bg), var(--bg-secondary));width:54px;height:54px;color:var(--accent);background-position:50%;background-size:cover;border-radius:8px;place-items:center;font-size:.88rem;font-weight:800;display:grid}.turn-labels{gap:.1rem;min-width:0;display:grid}.turn-labels strong{white-space:nowrap;text-overflow:ellipsis;font-size:.84rem;overflow:hidden}.turn-labels span{color:var(--muted);font-size:.74rem}@keyframes turnSpin{0%{opacity:1;transform:translate(0)scale(1)}45%{opacity:.85;transform:translate(-18px)scale(.98)}to{opacity:1;transform:translate(0)scale(1)}}#arena-canvas{border:1px solid var(--border);border-radius:16px;width:100%;height:100%;display:block}label{color:var(--muted);font-size:.88rem}input,button{font:inherit}input{border:1px solid var(--border);width:100%;color:var(--text);background:#071027bd;border-radius:10px;padding:.65rem .75rem}button{background:var(--accent);color:#0c0f14;cursor:pointer;border:none;border-radius:10px;padding:.65rem .95rem;font-weight:700}button:disabled{opacity:.55;cursor:not-allowed}.row{align-items:stretch;gap:.6rem;display:flex}.status{border-radius:999px;padding:.25rem .55rem;font-size:.85rem;font-weight:700}.status.connected{background:var(--status-connected-bg);color:var(--status-connected-text)}.status.disconnected{background:var(--status-disconnected-bg);color:var(--status-disconnected-text)}.auth-modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:3;background:#01040cb8;place-items:center;display:grid;position:absolute;inset:0}.auth-modal.hidden{display:none}.auth-card{gap:.6rem;width:min(540px,100% - 2rem);display:grid}h2{margin:0;font-size:1.35rem}.auth-card p{color:var(--muted);margin:0}.auth-message{min-height:1.4rem}.sheet-modal{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2;background:#01040c94;place-items:center;display:grid;position:absolute;inset:0}.sheet-modal.hidden{display:none}.sheet-card{gap:.8rem;width:min(620px,100% - 2rem);max-height:calc(100% - 2rem);display:grid;overflow:auto}.sheet-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.sheet-close{padding:.45rem .75rem}.sheet-body{gap:.7rem;display:grid}.sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.sheet-metric{border:1px solid var(--border);background:#0710279e;border-radius:10px;gap:.15rem;padding:.55rem .7rem;display:grid}.sheet-path{grid-column:1/-1}.sheet-label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}.sheet-body h3{margin:0;font-size:1rem}.sheet-body pre{border:1px solid var(--border);max-height:240px;color:var(--text);font-family:var(--mono);background:#071027bd;border-radius:12px;margin:0;padding:.75rem;font-size:.85rem;overflow:auto}@media (width<=720px){.row{flex-wrap:wrap}.layout{padding:.6rem}.turn-tracker-head{flex-direction:row;align-items:center}.turn-control{width:2rem;font-size:.9rem}.turn-card{width:min(148px,32vw)}.sheet-grid{grid-template-columns:1fr}}