:root{--bg: #0c0e14;--panel: #151823;--panel-border: #262b3d;--text: #d7dbe8;--text-dim: #8a91a8;--accent: #6f8cff;--combat: #4cd07d;--defeat: #ff5c5c;--victory: #ffd24c;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:14px}#app{display:flex;height:100vh;overflow:hidden}#sidebar{width:340px;min-width:280px;display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--panel);border-right:1px solid var(--panel-border)}.panel{background:#ffffff08;border:1px solid var(--panel-border);border-radius:8px;padding:12px}.panel.grow{flex:1;min-height:120px;display:flex;flex-direction:column}h2{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}h3{margin:12px 0 6px;font-size:11px;font-weight:600;color:var(--text-dim)}hr{border:none;border-top:1px solid var(--panel-border);margin:12px 0 4px}#combat-time{font-family:Cascadia Mono,JetBrains Mono,monospace;font-size:44px;line-height:1.1;text-align:center;color:var(--text)}#combat-state{margin-top:6px;text-align:center;font-size:13px;letter-spacing:.05em;color:var(--text-dim)}#combat-state[data-state=combat]{color:var(--combat)}#combat-state[data-state=defeat]{color:var(--defeat)}#combat-state[data-state=victory]{color:var(--victory)}label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px}input[type=text],select{width:100%;padding:6px 8px;background:var(--bg);border:1px solid var(--panel-border);border-radius:6px;color:var(--text);font-family:inherit}.row{display:flex;align-items:center;gap:8px;margin-top:8px}.row label{margin:0;flex-shrink:0}button{padding:6px 14px;background:#232941;border:1px solid var(--panel-border);border-radius:6px;color:var(--text);font-family:inherit;cursor:pointer}button:hover:not(:disabled){background:#2c3350}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:transparent;color:#0b0d13;font-weight:600}button.primary:hover:not(:disabled){background:#849dff}.file-btn{display:block;margin-top:4px;padding:7px 10px;border:1px dashed var(--panel-border);border-radius:6px;color:var(--text-dim);cursor:pointer}.file-btn:hover{color:var(--text);border-color:var(--accent)}#conn-status,#msg-count,#replay-status{font-size:12px;color:var(--text-dim)}#msg-count:not(:empty){margin-left:auto;font-variant-numeric:tabular-nums}#conn-status[data-state=connected]{color:var(--combat)}#conn-status[data-state=connecting],#conn-status[data-state=reconnecting]{color:var(--victory)}#script-list{margin:8px 0 0;padding:0;list-style:none}#script-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}.script-toggle{flex:none;margin:0;accent-color:var(--accent)}.script-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#script-list li.script-disabled .script-name{opacity:.45}#script-list li.script-section{justify-content:flex-start;border-bottom:none;padding-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}#script-list li.script-error .script-name{color:var(--defeat)}.script-remove{padding:1px 7px;font-size:12px;line-height:1.4;background:transparent;border-color:transparent;color:var(--text-dim)}.script-remove:hover{background:#ff5c5c1f;color:var(--defeat)}#lua-error{margin-top:8px;padding:6px 8px;border:1px solid rgba(255,92,92,.4);border-radius:6px;background:#ff5c5c14;color:var(--defeat);font-family:monospace;font-size:11px;line-height:1.4;white-space:pre-wrap;word-break:break-word}#event-list{flex:1;overflow-y:auto;margin:0;padding:0;list-style:none;font-size:12px}#event-list li{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}#event-list .stamp{color:var(--text-dim);margin-right:6px;font-family:monospace}#viewer{flex:1;position:relative;min-width:0}#draw-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}