:root{--bg:#050607;--bg-secondary:#13181f;--card:#0e1217d6;--border:#6b728061;--text:#f8fafc;--muted:#cbd5e1;--accent:#f97316;--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%, #f973162e, transparent), radial-gradient(900px 420px at 90% 10%, #47556929, transparent), linear-gradient(140deg, var(--bg), var(--bg-secondary));margin:0}#app{height:100%}.layout{flex-direction:column;gap:.75rem;height:100%;padding:1rem;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;position:relative}.turn-tracker{border:1px solid var(--border);background:#0a0e14db;border-radius:14px;gap:.55rem;padding:.6rem .7rem;display:grid}.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;padding:.32rem .62rem;font-size:.78rem;line-height:1}.turn-tracker-strip{justify-content:center;align-items:stretch;gap:.5rem;min-height:88px;transition:transform .24s;display:flex}.turn-tracker-strip.is-spinning{animation:.32s turnSpin}.turn-card{background:#111827d1;border:1px solid #6b728080;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{border-color:#f97316f2;box-shadow:0 0 0 2px #f973163d}.turn-portrait{color:#fdba74;background:linear-gradient(150deg,#111827,#1f2937) 50%/cover;border:1px solid #6b728073;border-radius:8px;place-items:center;width:54px;height:54px;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{color:#bbf7d0;background:#10b98138}.status.disconnected{color:#fecaca;background:#ef444438}.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-strip{gap:.36rem}.turn-card{width:min(148px,32vw)}.turn-tracker-head{flex-direction:column;align-items:flex-start}.turn-tracker-actions{justify-content:space-between;width:100%}.sheet-grid{grid-template-columns:1fr}}