*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#202a2b;font-family:system-ui,sans-serif}.scene-panel{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}.game{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;cursor:url("assets/aim.svg") 24 24,crosshair;outline:none}canvas:focus-visible{outline:2px solid #fff8;outline-offset:-2px}.hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;background:#18222a91;color:#fff;font-weight:650;font-size:15px;letter-spacing:-.4px;backdrop-filter:blur(10px)}.live-dot{width:6px;height:6px;border-radius:50%;background:#bde38d}.scene-tools{display:flex;gap:7px;align-items:center;pointer-events:auto}.scene-tools button,.path-toggle{display:grid;place-items:center;height:40px;min-width:40px;background:#18222a91;border:1px solid #ffffff35;color:white;border-radius:9px;backdrop-filter:blur(10px);cursor:pointer}.scene-tools button{font:24px system-ui}.path-toggle{position:relative;padding:0 12px;font-size:11px}.path-toggle input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.path-toggle:has(input:checked){background:#dcefc3;color:#28422c;border-color:#dcefc3}.scene-tools button:hover{background:#263b49db}.scene-tools button:focus-visible,.path-toggle:has(input:focus-visible){outline:2px solid white;outline-offset:3px}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:13px;background:#18222abd;padding:12px 18px;border-radius:9px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:500px){.hud{top:12px;left:12px;right:12px}.brand{font-size:13px;padding:10px}.scene-tools{gap:5px}}
.scoreboard{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:10px;border:1px solid #ffffff35;background:#18222ab8;color:white;padding:7px 16px;border-radius:12px;backdrop-filter:blur(10px)}.scoreboard>span{font-size:9px;letter-spacing:1.8px;color:#e1eacb}.scoreboard strong{display:inline-block;font-size:25px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}.scoreboard strong.pop{animation:score-pop .32s ease-out}@keyframes score-pop{40%{transform:scale(1.5);color:#fff1a3}100%{transform:scale(1)}}canvas{touch-action:none}@media(max-width:500px){.scoreboard{top:50px;padding:5px 12px}.scoreboard strong{font-size:22px}}
[hidden]{display:none!important}.room{position:absolute;right:20px;bottom:max(20px,env(safe-area-inset-bottom));width:220px;border:1px solid #ffffff30;border-radius:12px;padding:12px;background:#18222ab8;backdrop-filter:blur(10px);color:#fff;pointer-events:none;font-size:12px}.room-status{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#d2dfca;margin-bottom:8px}.room-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#players>div{display:flex;align-items:center;gap:8px;padding:4px 0}#players i{width:7px;height:7px;flex-shrink:0;border-radius:50%}#players span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#players strong{font-variant-numeric:tabular-nums}@media(max-width:500px){.room{right:12px;bottom:12px;width:180px;font-size:11px;padding:10px}}

.room{pointer-events:auto}.room-status button,#players button{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-status button{max-width:140px}.room-status button:hover,#players button:hover{text-decoration:underline}.room-status button:disabled{cursor:wait;text-decoration:none}#players button{flex:1}#rename-form{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 10px}#rename-form input{width:calc(100% - 62px);min-width:0;background:#fff;color:#263b32;border:0;border-radius:5px;padding:7px;font:12px system-ui}#rename-form button{border:1px solid #ffffff40;background:#ffffff15;color:white;border-radius:5px;width:25px;cursor:pointer}#rename-error{font-size:10px;color:#ffc4c4;flex-basis:100%}.room button:focus-visible,.room input:focus-visible{outline:2px solid #d8f2ab;outline-offset:3px}
.scoreboard>span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.4px;font-size:11px}@media(max-width:500px){.scoreboard>span{max-width:160px}}
/* Phone and short landscape layouts: one HUD row, large touch controls. */
html,body{overscroll-behavior:none}button,input,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.room-status{margin-bottom:0}#players:not([hidden]){margin-top:8px}#toggle-players{display:flex;align-items:center;gap:6px;flex-shrink:0}#toggle-players[aria-expanded="false"]>span:last-child{transform:rotate(180deg)}
@media(max-width:600px),(max-height:500px){
 .hud{top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));height:44px;gap:8px}
 .brand{display:none}.scoreboard{position:static;transform:none;max-width:calc(100% - 104px);height:44px;padding:6px 12px;gap:8px;backdrop-filter:none;background:#18222ad9;border-radius:10px}.scoreboard>span{font-size:12px;letter-spacing:0;max-width:150px;min-width:0}.scoreboard strong{font-size:25px;flex-shrink:0}
 .scene-tools{gap:6px;margin-left:auto}.scene-tools button,.path-toggle{height:44px;min-width:44px;padding:0 9px;backdrop-filter:none;background:#18222ad9}.path-toggle{font-size:11px}
 .room{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:min(300px,calc(100% - 20px));padding:0 10px;background:#18222ae8;backdrop-filter:none;font-size:12px;border-radius:10px}.room-status{font-size:12px;gap:8px;min-height:44px}.room-status button{min-height:44px;max-width:190px}.room-status #connection{flex:1}.room-status #toggle-players{font-size:11px;min-width:72px;justify-content:flex-end}
 #players:not([hidden]){max-height:min(200px,30dvh);overflow-y:auto;margin:0;padding-bottom:8px}#players>div{min-height:32px}#players button{min-height:36px}
 #rename-form{gap:6px;margin-top:2px}#rename-form input{font-size:16px;min-height:44px;width:calc(100% - 100px);padding:8px}#rename-form button{width:44px;min-height:44px;font-size:18px}
 canvas{cursor:crosshair}.room input,.room button{scroll-margin-bottom:16px}
}
@media(max-height:500px) and (min-width:601px){.room{width:250px}.scoreboard>span{max-width:210px}}

#players{max-height:220px;overflow-y:auto}.round-status{position:absolute;top:76px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:20px;background:#18222ac9;color:#fff;font-size:11px;pointer-events:none;white-space:nowrap}@media(max-width:600px),(max-height:500px){.round-status{top:60px}#players:not([hidden]){max-height:110px}}

#compact-scores{display:none}
@media(max-width:600px),(max-height:500px){
 .room[data-expanded="false"]{width:auto;max-width:calc(100% - 20px);padding:0 12px}
 .room[data-expanded="false"] #connection,.room[data-expanded="false"] #player-count{display:none}
 .room[data-expanded="false"] .room-status #toggle-players{max-width:none;width:100%;gap:12px;min-width:44px}
 .room[data-expanded="false"] #compact-scores{display:flex;flex-wrap:wrap;gap:14px;padding:8px 0;white-space:normal}
 #compact-scores>span{display:flex;align-items:center;gap:6px;flex-shrink:0}
 #compact-scores i{display:block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
 #compact-scores strong{font-size:13px;font-variant-numeric:tabular-nums}
}

.perf-stats{position:absolute;left:10px;bottom:60px;padding:6px 9px;background:#101820e8;color:#fff;font:11px monospace;pointer-events:none;border-radius:6px}