html,body{margin:0;height:100%;background:#0e1116;overflow:hidden}#app{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}canvas{image-rendering:pixelated;outline:none}#stage{position:absolute;--scale: 1;pointer-events:none;font-family:Inter,system-ui,sans-serif;color:#e6e9ee;overflow:hidden}.hud{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;gap:calc(var(--scale) * 4px);padding:calc(var(--scale) * 4px);box-sizing:border-box}.hud-cards{display:flex;gap:calc(var(--scale) * 4px)}.hud-card{min-width:calc(var(--scale) * 72px);padding:calc(var(--scale) * 2px) calc(var(--scale) * 5px);border-left:3px solid var(--player, #fff);background:#0e1116b8;border-radius:0 calc(var(--scale) * 3px) calc(var(--scale) * 3px) 0;font-size:calc(var(--scale) * 8px);line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}.hud-name{font-family:Bebas Neue,Inter,sans-serif;font-size:calc(var(--scale) * 11px);letter-spacing:.04em}.hud-round,.hud-wind{font-family:Bebas Neue,Inter,sans-serif;font-size:calc(var(--scale) * 12px);letter-spacing:.05em;white-space:nowrap}.hud-round{flex:1;text-align:center}.hud-wind{text-align:right}#overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#00000059;pointer-events:auto}#overlay.open{display:flex}.overlay-panel{box-sizing:border-box;width:min(calc(var(--scale) * 480px),92%);max-height:92%;overflow:auto;padding:calc(var(--scale) * 16px);background:#0e1116eb;border:1px solid #2b3340;border-radius:calc(var(--scale) * 16px);font-size:calc(var(--scale) * 10px);line-height:1.45}.overlay-actions{display:flex;justify-content:flex-end;gap:calc(var(--scale) * 8px);margin-top:calc(var(--scale) * 12px)}.overlay-actions button{padding:calc(var(--scale) * 5px) calc(var(--scale) * 12px);border:1px solid #2b3340;border-radius:calc(var(--scale) * 6px);background:#1a212b;color:inherit;font:inherit;cursor:pointer}.overlay-actions button.primary{background:#2f6fed;border-color:#2f6fed}.overlay-actions button:focus-visible{outline:2px solid #9db8ff;outline-offset:2px}.ov-title{margin:0;font-family:Bebas Neue,Inter,sans-serif;font-size:calc(var(--scale) * 28px);letter-spacing:.05em;text-align:center}.ov-sub{margin:0 0 calc(var(--scale) * 6px);text-align:center;color:#9aa4b2}.ov-h{margin:0 0 calc(var(--scale) * 8px);font-family:Bebas Neue,Inter,sans-serif;font-size:calc(var(--scale) * 16px);letter-spacing:.04em}.ov-hint{color:#e0a458;text-align:right;margin:calc(var(--scale) * 4px) 0 0}.ov-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--scale) * 8px);padding:calc(var(--scale) * 2px) 0}.seg{display:inline-flex}.seg button,.step button{padding:calc(var(--scale) * 2px) calc(var(--scale) * 7px);border:1px solid #2b3340;background:#1a212b;color:inherit;font:inherit;cursor:pointer}.seg button+button{margin-left:-1px}.seg button[aria-pressed=true]{background:#2f6fed;border-color:#2f6fed}.seg button:first-child,.step button:first-child{border-radius:calc(var(--scale) * 5px) 0 0 calc(var(--scale) * 5px)}.seg button:last-child,.step button:last-child{border-radius:0 calc(var(--scale) * 5px) calc(var(--scale) * 5px) 0}.step{display:inline-flex;align-items:center}.step output{min-width:calc(var(--scale) * 22px);text-align:center;font-variant-numeric:tabular-nums}.seg button:disabled,.step button:disabled,.overlay-actions button:disabled{opacity:.35;cursor:default}.seg button:focus-visible,.step button:focus-visible{outline:2px solid #9db8ff;outline-offset:1px}.ov-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.ov-table th,.ov-table td{padding:calc(var(--scale) * 2px) calc(var(--scale) * 4px);text-align:right}.ov-table th:first-child,.ov-table td:first-child{text-align:left}.ov-table thead th{color:#9aa4b2;font-weight:500;border-bottom:1px solid #2b3340}.ov-dot{display:inline-block;width:calc(var(--scale) * 6px);height:calc(var(--scale) * 6px);margin-right:calc(var(--scale) * 4px);border-radius:50%;background:var(--player, #fff)}.ov-total{display:flex;justify-content:space-between;margin-top:calc(var(--scale) * 6px);padding-top:calc(var(--scale) * 4px);border-top:1px solid #2b3340}.ov-medal{display:inline-block;min-width:calc(var(--scale) * 16px)}.hud-card.off{display:none}.hud-card.me{background:#2f6fed47;box-shadow:0 0 0 1px #9db8ff8c}.net-status{position:absolute;top:calc(var(--scale) * 36px);left:50%;transform:translate(-50%);z-index:5;display:none;max-width:90%;padding:calc(var(--scale) * 3px) calc(var(--scale) * 10px);border:1px solid #5c4a2a;border-radius:calc(var(--scale) * 6px);background:#281e0eeb;color:#f0c27a;font-size:calc(var(--scale) * 9px);text-align:center;pointer-events:none}.net-status.on{display:block}.net-rtt{position:absolute;right:calc(var(--scale) * 6px);bottom:calc(var(--scale) * 4px);z-index:5;display:none;color:#9aa4b2;font-size:calc(var(--scale) * 8px);font-variant-numeric:tabular-nums;pointer-events:none}.net-rtt.on{display:block}.lobby-slot{display:flex;align-items:center;gap:calc(var(--scale) * 6px);padding:calc(var(--scale) * 3px) 0;border-bottom:1px solid #1f2630}.lobby-slot .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-slot .name.dim{color:#9aa4b2}.lobby-badge{padding:0 calc(var(--scale) * 5px);border:1px solid #2b3340;border-radius:calc(var(--scale) * 8px);color:#9aa4b2;font-size:calc(var(--scale) * 8px);white-space:nowrap}.lobby-badge.warn{border-color:#5c4a2a;color:#f0c27a}.lobby-h{margin:calc(var(--scale) * 8px) 0 calc(var(--scale) * 2px);color:#9aa4b2;font-size:calc(var(--scale) * 8px);letter-spacing:.08em;text-transform:uppercase}.lobby-link,.ov-input{box-sizing:border-box;width:100%;padding:calc(var(--scale) * 4px) calc(var(--scale) * 6px);border:1px solid #2b3340;border-radius:calc(var(--scale) * 5px);background:#0b0e13;color:inherit;font:inherit}.lobby-link{color:#9aa4b2}.ov-input:focus-visible,.lobby-link:focus-visible{outline:2px solid #9db8ff;outline-offset:1px}.ov-label{display:block;margin-bottom:calc(var(--scale) * 3px);color:#9aa4b2}.ov-error{color:#f08a7a}