*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b1f2e;color:#fff;overflow:hidden}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#fg{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;outline:none;user-select:none;overflow:hidden;font-family:"PT Mono",ui-monospace,monospace;font-size:14px;background:#123}
#cv{width:100%;height:100%;image-rendering:pixelated;display:block;cursor:crosshair}
[hidden]{display:none!important}
button{font:inherit;color:#fff;background:rgba(10,25,45,.8);border:2px solid #ffd23f;padding:.25em .7em;cursor:pointer}
button:hover{background:#ffd23f;color:#1a1a2a}
button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:2px}
#sb{position:absolute;top:2.5%;right:1.5%;width:27%;background:rgba(12,24,44,.8);border:2px solid #ffd23f;padding:.4em .6em;font-size:.85em}
#sb .hd{color:#ffd23f;text-align:center;margin-bottom:.2em;font-family:"Press Start 2P",monospace;font-size:.75em;line-height:1.8}
#sb .row{display:flex;align-items:center;gap:.4em;padding:.15em 0;border-top:1px dashed rgba(255,255,255,.18)}
#sb .row.off{opacity:.45}
#sb .row.me{background:rgba(255,210,63,.12)}
#sb img{width:2.2em;height:1.1em;image-rendering:pixelated}
#sb .nm{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#sb .star{width:1em;text-align:center}
#sb .kg{color:#9cc;min-width:3.6em;text-align:right}
#sb .legend{margin-top:.3em;color:#cfe6ff;font-size:.85em;text-align:center}
#bar{position:absolute;top:2.5%;left:1.5%;display:flex;gap:.5em;align-items:center;font-size:.85em}
#people{background:rgba(0,0,0,.5);padding:.2em .5em}
.lbl{position:absolute;transform:translate(-50%,-100%);font-size:.8em;padding:0 .3em;background:rgba(0,0,0,.5);white-space:nowrap;pointer-events:none}
#toasts{position:absolute;top:12%;left:38%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.25em;pointer-events:none;width:60%}
.tst{font-size:.85em;background:rgba(0,0,0,.6);padding:.15em .6em;transition:opacity .5s;text-align:center}
.tst.big{font-size:1.1em;border:2px solid currentColor;padding:.3em .8em;background:rgba(10,30,60,.85)}
.tst img{width:2.2em;height:1.1em;image-rendering:pixelated;vertical-align:middle;margin-right:.4em}
#tb{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);width:32%;height:.8em;border:2px solid #fff;background:rgba(0,0,0,.5);display:none}
#tbf{height:100%;width:0}
#st{position:absolute;bottom:8.5%;left:0;right:0;text-align:center;font-size:.95em;text-shadow:1px 1px 0 #000;pointer-events:none}
#help{position:absolute;bottom:0;left:0;right:0;font-size:.8em;color:#e8f4ff;background:rgba(0,0,0,.55);padding:.2em .5em;text-align:center;pointer-events:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;gap:.8em;align-items:center;justify-content:center;background:rgba(5,15,30,.55);text-align:center;padding:1em}
#ov,#conn{cursor:pointer;font-size:1.1em}
#menu{background:rgba(5,15,30,.45)}
#menu h1{font-family:"Press Start 2P",monospace;font-weight:400;font-size:3em;margin:0;color:#ffd23f;text-shadow:.12em .12em 0 #c0392b,.24em .24em 0 #1b4f72;letter-spacing:.05em}
#menu .sub{margin:0 0 .6em;color:#cfe6ff}
#menu .name{display:flex;flex-direction:column;gap:.3em;font-size:.9em;color:#cfe6ff}
#menu input{font:inherit;font-size:1.1em;text-align:center;padding:.3em .6em;width:12em;background:rgba(0,0,0,.45);color:#fff;border:2px solid #fff}
#menu .big{font-family:"Press Start 2P",monospace;font-size:1em;padding:.8em 1.4em;background:#ffd23f;color:#1a1a2a;border-color:#fff;box-shadow:.25em .25em 0 #c0392b}
#menu .big:hover{background:#fff}
#menu .link{border:none;background:none;text-decoration:underline;color:#cfe6ff}
#menu .err{color:#ff8a8a;min-height:1.2em;margin:0}
#menu .hint{max-width:30em;font-size:.8em;color:#cfe6ff;margin:0}