:root{--bg:#060b1c;--bg-secondary:#162553;--card:#071027d1;--border:#94a3b852;--text:#e5ecff;--muted:#bfcbe6;--accent:#facc15;--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%, #facc1530, transparent), radial-gradient(900px 420px at 90% 10%, #0ea5e92b, 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}#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:#10172b;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}.console{gap:.55rem;width:min(460px,100% - 2rem);display:grid;position:absolute;bottom:1rem;right:1rem}.log{font-family:var(--mono);border:1px solid var(--border);background:#0206178c;border-radius:10px;gap:.2rem;min-height:120px;max-height:180px;padding:.5rem;display:grid;overflow:auto}.log-line{word-break:break-word;font-size:.85rem;line-height:1.35}.log-line.inbound{color:#7dd3fc}.log-line.outbound{color:#fde68a}.log-line.system{color:var(--muted)}.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}@media (width<=720px){.row{flex-wrap:wrap}.layout{padding:.6rem}.console{width:auto;bottom:.6rem;left:.6rem;right:.6rem}}