*{box-sizing:border-box;margin:0;padding:0}html,body,canvas{width:100%;height:100%;overflow:hidden;background:#1a1814}canvas{display:block;outline:none}#hud{position:fixed;inset:0;pointer-events:none;font-family:Georgia,Times New Roman,serif;color:#f2ead8}#fps{position:absolute;right:16px;top:12px;margin:0;color:#ffffff8c;font:13px/1 Tahoma,Segoe UI,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.7)}#status{position:absolute;left:16px;bottom:10px;margin:0;color:#ffffff8c;font:13px/1 Tahoma,Segoe UI,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap}#hint{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;margin:0;padding:10px 28px 10px 36px;list-style:none;background:linear-gradient(90deg,transparent 0%,rgba(40,40,40,.82) 10%,rgba(40,40,40,.82) 94%,transparent 100%);font-family:Segoe UI,Helvetica Neue,sans-serif;opacity:1;transition:opacity .15s linear}#hint.is-hidden{opacity:0}#hint li{display:flex;align-items:center;justify-content:flex-end;gap:14px;color:#f5f5f5;font-size:14px;line-height:1;white-space:nowrap}#hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;background:#f3f3f3;color:#2a2a2a;border:none;border-radius:4px;font:600 13px/1 Segoe UI,Helvetica Neue,sans-serif;box-shadow:inset 0 3px #ffffff8c,inset 0 -3px #0003,inset 3px 0 #ffffff38,inset -3px 0 #00000029}#log{position:absolute;left:16px;bottom:78px;width:min(420px,calc(100% - 32px));max-height:180px;overflow:hidden;list-style:none;font-size:14px}#log li{display:block;width:fit-content;max-width:100%;margin:2px 0;padding:3px 8px;background:#0c0a08c7;color:#f2ead8;border-radius:3px;line-height:1.35;overflow-wrap:anywhere}#log .nick{color:#8fbfbf;margin-right:6px}#log .emote{font-style:italic;color:#d8cbb4}#log .pm{color:#e6d5a8}#log .pm .nick{color:#e0c36a;margin-right:0}#log .system{color:#a89880;font-style:italic}#log .system .nick{color:#a89880}#chat{position:absolute;left:16px;bottom:36px;width:min(420px,calc(100% - 32px));pointer-events:auto}#chat input{width:100%;background:#12100e;border:1px solid #3a322a;color:#f2ead8;padding:8px 10px;font:14px Georgia,serif;outline:none}#chat input:focus{border-color:#8fbfbf}#scoreboard{position:absolute;left:50%;top:14%;transform:translate(-50%);width:min(640px,calc(100% - 32px));max-height:min(72vh,480px);display:flex;flex-direction:column;background:#12100eeb;border:1px solid #3a322a;padding:14px 16px 10px;opacity:0;visibility:hidden;transition:opacity .1s linear,visibility .1s linear}#scoreboard.open{opacity:1;visibility:visible}#scoreboard .sb-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;border-bottom:1px solid #3a322a;padding-bottom:8px}#scoreboard h2{font-size:18px;font-weight:400;letter-spacing:.04em}#sb-count{color:#cbb79a;font-size:13px}#scoreboard .sb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 12px;overflow-y:auto}#scoreboard .sb-row{display:flex;align-items:baseline;gap:8px;min-width:0;padding:4px 8px;border-radius:2px}#scoreboard .sb-slot{flex:0 0 1.6em;color:#8a7a66;font-size:13px}#scoreboard .sb-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scoreboard .you{background:#8fbfbf1f}#scoreboard .you .sb-nick{color:#8fbfbf}#scoreboard .sb-you{flex:0 0 auto;color:#8fbfbf;font-size:12px}#ping{position:absolute;right:16px;bottom:16px;display:flex;align-items:flex-end;gap:8px;margin:0;color:#f2ead8;font:600 18px/1 Segoe UI,Helvetica Neue,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.65)}#ping.good #ping-bars{color:#6fdd7a}#ping.ok #ping-bars{color:#e6d15c}#ping.bad #ping-bars{color:#e07070}#ping-bars{display:flex;align-items:flex-end;gap:2px;height:16px;margin-bottom:1px}#ping-bars i{display:block;width:4px;background:currentColor;opacity:.28;border-radius:1px}#ping-bars i:nth-child(1){height:6px}#ping-bars i:nth-child(2){height:11px}#ping-bars i:nth-child(3){height:16px}#ping-bars[data-level="1"] i:nth-child(1),#ping-bars[data-level="2"] i:nth-child(1),#ping-bars[data-level="2"] i:nth-child(2),#ping-bars[data-level="3"] i{opacity:1}#mic{margin-right:4px;padding:2px 6px 1px;border:1px solid rgba(125,207,138,.55);border-radius:3px;color:#7dcf8a;font:600 11px/1 Segoe UI,Helvetica Neue,sans-serif;letter-spacing:.08em}#mic[hidden]{display:none}#join{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0c0a089e;font-family:Georgia,Times New Roman,serif;color:#f2ead8}#join[hidden]{display:none}#join-form{width:min(440px,calc(100% - 32px));padding:28px 28px 22px;background:#12100ef0;border:1px solid #3a322a}#join-form h1{font-size:22px;font-weight:400;letter-spacing:.04em;margin-bottom:6px}.join-lead{color:#cbb79a;font-size:14px;margin-bottom:18px}.join-row{display:flex;align-items:stretch;gap:8px}#join-nick{flex:1;min-width:0;background:#12100e;border:1px solid #3a322a;color:#f2ead8;padding:10px 12px;font:16px Georgia,serif;outline:none}#join-nick:focus{border-color:#8fbfbf}.join-color{display:flex;width:42px;flex:0 0 42px;border:1px solid #3a322a;background:#12100e;cursor:pointer;overflow:hidden}#join-color{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:pointer}#join-color::-webkit-color-swatch-wrapper{padding:0}#join-color::-webkit-color-swatch{border:none}#join-color::-moz-color-swatch{border:none}#join-play{flex:0 0 auto;padding:0 18px;background:#8fbfbf;border:none;color:#12100e;font:16px Georgia,serif;cursor:pointer}#join-play:hover:not(:disabled){background:#a7d4d4}#join-play:disabled{opacity:.55;cursor:default}#join-error{min-height:1.2em;margin-top:12px;color:#e07070;font-size:13px}