:root{--bg:#0a0c1c;--fg:#ffe9a8;--red:#ff4a3a;--grn:#5cff7a;--pnl:rgba(10,12,28,.82);--bd:#3a3f7a}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;font-family:'Press Start 2P',monospace;color:var(--fg);-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0}#c{width:100%;height:100%;display:block;cursor:grab}#c:active{cursor:grabbing}
#ov{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lab{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.li{transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px}
.tag{font-size:8px;background:#000a;padding:2px 4px;color:#fff;border:1px solid #fff5;white-space:nowrap;letter-spacing:0}
.boss .tag{color:#ff6a5a;border-color:#ff6a5a}
.ico{font-size:18px;line-height:1;filter:drop-shadow(1px 1px 0 #000)}
.bub{font-family:'VT323',monospace;font-size:19px;line-height:1;background:#fff;color:#111;padding:4px 7px;border:2px solid #111;box-shadow:2px 2px 0 #0008;max-width:190px;text-align:center;position:relative;margin-bottom:5px;word-wrap:break-word}
.bub::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-5px;border:5px solid transparent;border-top:6px solid #111}
.bub.big{font-family:'Press Start 2P',monospace;font-size:11px;line-height:1.35;max-width:270px;padding:7px 9px;letter-spacing:0}
.bub.red{background:#fff2e0;color:#d01818;border-color:#d01818}
.bub.pop{animation:pop .22s steps(4)}@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
#top{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(#000d,#0000);pointer-events:none}
#logo{font-size:20px;color:#ffd23a;text-shadow:3px 3px 0 #a01818,0 0 12px #ff8a2a88;letter-spacing:1px}#logo span{color:#ff4a3a;margin-left:8px}
#pill{font-size:9px;padding:6px 9px;border:2px solid var(--grn);color:var(--grn);background:var(--pnl)}
#pill.off{color:#8a8fb0;border-color:#8a8fb0}#pill.demo{color:#ffd23a;border-color:#ffd23a}#pill.rep{color:#7ac8ff;border-color:#7ac8ff}#pill.live::before{content:"\25CF ";animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:.2}}
#timer{font-size:10px;margin-left:auto;background:var(--pnl);padding:6px 9px;border:2px solid var(--bd)}
#roster{position:fixed;right:10px;top:56px;width:210px;max-height:calc(100% - 250px);overflow:hidden;display:flex;flex-direction:column;gap:5px}
.card{background:var(--pnl);border:2px solid var(--bd);padding:5px 7px;font-size:8px;line-height:1.4;display:grid;grid-template-columns:22px 1fr auto;gap:0 6px;align-items:center}
.card .i{font-size:16px;grid-row:span 2}.card b{color:#fff;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card em{font-style:normal;color:#8a8fb0;font-size:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .n{color:#ffd23a}.card .s{font-size:7px;text-align:right}.s.working{color:var(--grn)}.s.done{color:#7ac8ff}.s.failed,.s.failing{color:var(--red)}
.card.done,.card.failed{opacity:.6}
#log{position:fixed;left:10px;bottom:56px;width:min(430px,60vw);height:118px;overflow:hidden;background:var(--pnl);border:2px solid var(--bd);padding:5px 7px;font-family:'VT323',monospace;font-size:16px;line-height:1.05;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
#log div{flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b8bde0}#log .b{color:#ff8a7a}#log .d{color:#7ac8ff}
#ctl{position:fixed;left:10px;bottom:10px;right:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button,select{font:inherit;font-size:9px;color:var(--fg);background:var(--pnl);border:2px solid var(--fg);padding:8px 10px;cursor:pointer;border-radius:0}
button:hover,select:hover{background:#2a2050}#spd{display:flex;gap:4px}#spd button{padding:8px 7px;border-color:var(--bd)}#spd .on{border-color:var(--fg);background:#3a2a10}
#sty{display:flex;gap:4px}#sty button{padding:8px 7px;border-color:var(--bd)}#sty .on{border-color:#7ac8ff;background:#14284a;color:#bfe4ff}
#host{font-size:8px;color:#8a8fb0;display:none}
select{max-width:min(320px,52vw);font-family:'VT323',monospace;font-size:16px;padding:5px 6px}
#start{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;font-size:22px;color:#fff;text-shadow:3px 3px 0 #000;pointer-events:none;display:none}
#start b{color:#ffd23a;animation:bl 1s steps(2) infinite}#start small{display:block;margin-top:14px;font-size:8px;color:#b8bde0}
@media (max-width:760px){
 #logo{font-size:13px}#logo span{margin-left:4px}#pill{font-size:7px;padding:5px}#timer{font-size:8px;padding:5px}
 #roster{right:6px;left:6px;top:44px;width:auto;flex-direction:row;overflow:hidden;gap:4px}.card{min-width:0;flex:0 0 calc(33% - 3px);padding:3px 4px;grid-template-columns:16px 1fr}.card .i{font-size:12px}.card .s,.card em{display:none}
 #log{bottom:88px;left:6px;width:calc(100% - 12px);height:52px;font-size:14px}#sty button,#spd button{padding:6px 5px}#log div:nth-last-child(n+4){display:none}
 #ctl{left:6px;right:6px;bottom:6px;gap:5px}button{font-size:8px;padding:7px 8px}#start{font-size:14px}
 .bub{font-size:17px;max-width:140px}.bub.big{font-size:9px;max-width:180px}.tag{font-size:7px}
}