:root{--steel: #151817;--steel-2: #1d2220;--panel: rgba(28, 33, 31, .96);--line: #39413d;--line-2: #4c5551;--text: #d9dfdb;--muted: #8f9a94;--accent: #e8c547;--danger: #d2483a;--ok: #5bd36a;--f-display: "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif;--f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;--f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;--sidebar: 264px;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--steel);color:var(--text);font:14px/1.45 var(--f-body)}button,input,select{font:inherit;color:inherit}button{background:#2a302d;border:1px solid var(--line-2);padding:6px 12px;cursor:pointer}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:#3b3518;border-color:#8a7425;color:#f5e3a0;font-weight:600}button.primary:hover:not(:disabled){border-color:var(--accent)}button.danger{border-color:#6b2f2a}input,select{background:#101312;border:1px solid var(--line-2);padding:7px 9px;min-width:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.stack{display:grid;gap:8px}#app{position:fixed;top:0;right:0;bottom:0;left:0}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--steel);font:13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);z-index:50}#loading.error{color:#f0c9c5;text-transform:none;letter-spacing:0;padding:24px;text-align:center}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;overflow:auto;background:radial-gradient(circle at 30% 20%,#232a27,#121514 60%)}.screen.center .loading{font:13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.panel{width:min(760px,100%);background:var(--panel);border:1px solid var(--line);padding:22px;display:grid;gap:16px}.panel.narrow{width:min(420px,100%)}.panel.wide{width:min(1080px,100%)}.title{font:800 46px/.95 var(--f-display);letter-spacing:.03em;text-transform:uppercase;margin:0;color:#efe8d2}.title.small{font-size:32px}.lede{margin:0;color:var(--muted)}label{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.who{color:var(--muted)}.create input{flex:1}.rooms{display:grid;gap:6px}.room-row{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:8px 10px;background:var(--steel-2);border:1px solid var(--line)}.room-name{font-weight:600;min-width:0;overflow-wrap:anywhere}.room-count,.room-state{font:12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}.empty{color:var(--muted);margin:0}.room-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}@media (max-width: 860px){.room-body{grid-template-columns:minmax(0,1fr)}}.seats-col{display:grid;gap:14px;min-width:0;overflow-x:auto}.seats{width:100%;border-collapse:collapse}.seats th{text-align:left;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}.seats td{padding:8px;border-bottom:1px solid #2a312e;vertical-align:middle}.seats tr.mine td{background:#e8c5470d}.swatches{display:inline-flex;gap:4px;flex-wrap:wrap}.swatch{width:18px;height:18px;padding:0;border:2px solid transparent;display:inline-block}.swatch.on{border-color:#fff}.tag{font:11px var(--f-mono);letter-spacing:.06em;padding:2px 6px;border:1px solid var(--line-2);color:var(--muted)}.tag.ok{color:var(--ok);border-color:#2f6b38}.tag.host{color:var(--accent);border-color:#6d5d22}.tag.off{color:var(--danger);border-color:#6b2f2a}.hint{color:var(--muted)}.chat{display:grid;gap:6px}.chat-panel{height:340px;grid-template-rows:1fr auto;border:1px solid var(--line);background:#121514;padding:8px}.chat-log{overflow-y:auto;display:grid;align-content:end;gap:2px;min-height:0;overflow-wrap:anywhere}.chat-line b{font-weight:600}.chat-line b.me{color:var(--accent)}.chat-line.system{color:var(--muted);font-style:italic}.chat-tag{color:#8fd0ff;font:11px var(--f-mono)}.chat-form{display:flex;gap:6px}.chat-form input{flex:1}.chat-scope{padding:6px 8px;font:12px var(--f-mono)}.chat-scope.team{color:#8fd0ff;border-color:#335a72}.chat-overlay{position:absolute;left:12px;bottom:12px;width:min(440px,calc(100% - var(--sidebar) - 36px));pointer-events:none;z-index:5}.chat-overlay .chat-log{max-height:180px;overflow:hidden;text-shadow:0 1px 2px #000}.chat-overlay .chat-line{transition:opacity .8s}.chat-overlay .chat-line.old{opacity:0}.chat-overlay.open .chat-line.old{opacity:.75}.chat-overlay.open .chat-log{overflow-y:auto;pointer-events:auto;background:#0a0c0b99}.chat-overlay .chat-form{pointer-events:auto;background:#0a0c0bd9;padding:6px}.game{position:absolute;top:0;right:0;bottom:0;left:0}.game .view,.game .bars{position:absolute;top:0;left:0;width:calc(100% - var(--sidebar));height:100%;display:block}.game .view{cursor:crosshair}.game .bars{pointer-events:none}.selbox{position:fixed;border:1px solid #9fe0b4;background:#78dc961f;pointer-events:none;z-index:4}.sidebar{position:absolute;top:0;right:0;bottom:0;width:var(--sidebar);background:linear-gradient(#202624,#171b1a);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:10px;overflow-y:auto;-webkit-user-select:none;user-select:none}.sidebar h2{margin:0 0 6px;font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.sb-head{display:flex;justify-content:space-between;gap:6px;align-items:baseline;font-size:12px}.sb-player{display:inline-flex;gap:6px;align-items:center;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-player i,.result td i{width:10px;height:10px;display:inline-block}.sb-faction{color:var(--muted);font:11px var(--f-mono)}.minimap{width:100%;aspect-ratio:1;display:block;image-rendering:pixelated;border:1px solid var(--line);cursor:pointer}.sb-credits{font:600 22px var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums;text-align:right}.sb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sb-card{position:relative;display:grid;grid-template-rows:auto auto auto;gap:1px;padding:6px;text-align:left;background:#262c29;min-height:74px;overflow:hidden}.sb-card .sb-icon{width:30px;height:30px;display:grid;place-items:center;background:#121514;border:1px solid var(--line);font:700 13px var(--f-display);color:var(--muted)}.sb-card .sb-icon img{width:100%;height:100%;object-fit:cover}.sb-card .sb-name{font-size:12px;font-weight:600;line-height:1.2;position:relative}.sb-card .sb-cost{font:11px var(--f-mono);color:var(--accent);position:relative}.sb-card .sb-status-line{font:10.5px var(--f-mono);color:var(--muted);position:relative;min-height:1em}.sb-card .sb-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;transform-origin:top;transform:scaleY(0);pointer-events:none}.sb-card .sb-badge{position:absolute;top:4px;right:6px;font:700 13px var(--f-mono);color:#fff}.sb-card.working{border-color:#6d5d22}.sb-card.ready{border-color:var(--ok);animation:ready 1s infinite alternate}.sb-card.ready .sb-status-line{color:var(--ok)}@keyframes ready{to{background:#22402a}}@media (prefers-reduced-motion: reduce){.sb-card.ready{animation:none;background:#22402a}}.sb-selection{min-height:92px;border-top:1px solid var(--line);padding-top:8px}.sb-selection h3{margin:0 0 6px;font:700 18px var(--f-display);letter-spacing:.03em;text-transform:uppercase}.sb-selection ul{margin:0;padding-left:18px}.sb-note{margin:4px 0 0;color:var(--muted);font-size:12px}.sb-note.enemy{color:#f0a49b}.hp{height:7px;background:#0c0e0d;border:1px solid var(--line)}.hp i{display:block;height:100%;background:var(--ok)}.hp.warn i{background:var(--accent)}.hp.bad i{background:var(--danger)}.sb-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px;font:11px var(--f-mono);color:var(--muted)}.sb-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-actions{display:flex;gap:6px;flex-shrink:0}.result,.defeat{position:absolute;inset:0 var(--sidebar) 0 0;display:grid;place-items:center;background:#080a0999;z-index:8;padding:16px}.defeat{background:transparent;place-items:start center;padding-top:60px;pointer-events:none}.defeat>*{pointer-events:auto}.defeat p{margin:0 0 8px;padding:12px 16px;background:var(--panel);border:1px solid #6b2f2a}.result-card{background:var(--panel);border:1px solid var(--line);padding:24px;display:grid;gap:16px;width:min(640px,100%);overflow-x:auto}.result-card h1{margin:0;font:800 54px/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em}.result-card.won h1{color:var(--accent)}.result-card.lost h1{color:#e07a6e}.result table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.result th,.result td{padding:6px 8px;text-align:right;border-bottom:1px solid #2a312e}.result th:first-child,.result td:first-child{text-align:left}.result th{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.result tr.winner td:first-child{color:var(--accent)}.result td i{margin-right:6px}.net-status:empty{display:none}.net-status{position:fixed;top:10px;left:50%;transform:translate(-50%);z-index:60;padding:6px 12px;background:#3b1b17;border:1px solid #7a2f27;font-size:13px}.net-status.connecting{background:#1f2a24;border-color:var(--line-2)}#toasts{position:fixed;left:50%;bottom:24px;transform:translate(calc(-50% - var(--sidebar) / 2));display:grid;gap:6px;z-index:40;pointer-events:none}.toast{padding:7px 14px;background:#141816f0;border:1px solid var(--line-2);transition:opacity .5s;text-align:center}.toast.warn{border-color:#8a5a25;color:#f3cf96}.toast.gone{opacity:0}.side-link{color:var(--accent);font-size:13px;text-decoration:underline;text-underline-offset:3px}.side-link:hover{color:#fff1b8}.net-status button{margin-left:10px;padding:3px 10px}.audio-toggles{position:fixed;left:10px;top:10px;z-index:40;display:flex;gap:6px}.audio-toggles button{font:600 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;background:#0f1211c7;color:var(--text, #e7e3d6);border:1px solid var(--line, #3a403c);cursor:pointer}.audio-toggles button.off{color:var(--muted, #8a918d);text-decoration:line-through}