:root{--ink: #2c2433;--paper: #fff8ea;--accent: #ff7a45;--accent-ink: #fff;--blue: #3d8bfd;--it: #e63946;--run: #2a9d8f;--shadow: 0 6px 0 rgba(44, 36, 51, .18);--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#bfe6f5;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}#game{position:fixed;inset:0}#game canvas{display:block;width:100%;height:100%}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.panel-screen{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 30% 20%,#d9f2c4,#9fd26b 60%,#7fbf55);z-index:20;overflow-y:auto}.card{width:min(380px,100%);background:var(--paper);border-radius:22px;padding:22px 20px;box-shadow:0 10px #2c243333;display:flex;flex-direction:column;gap:12px}.card h1{margin:0;font-size:40px;letter-spacing:-1px;line-height:1}.card h1 span{color:var(--accent)}.card .sub{margin:-4px 0 4px;opacity:.75}.card label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}.card input{font:inherit;font-size:18px;padding:10px 12px;border-radius:12px;border:2px solid #e2d6bd;background:#fff;user-select:text;-webkit-user-select:text;touch-action:manipulation;min-width:0}.card button{font-size:18px;padding:12px 14px;border-radius:14px;border:0;background:#efe4cc;box-shadow:var(--shadow);touch-action:manipulation}.card button.primary{background:var(--accent);color:var(--accent-ink);font-weight:700}.card button:active{transform:translateY(3px);box-shadow:0 3px #2c24332e}.card .row{display:flex;gap:8px}.card .row input{flex:1;text-transform:uppercase;letter-spacing:4px;text-align:center}.card .or{text-align:center;opacity:.6;font-size:14px;margin-top:8px}#join-existing{display:flex;flex-direction:column;gap:6px}.error{color:var(--it);min-height:1em;margin:0;font-weight:700}.help{font-size:14px;opacity:.85}.help p{margin:6px 0}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud>*{pointer-events:auto}#hud-room{position:absolute;top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l));background:var(--paper);border-radius:14px;padding:6px 6px 6px 12px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow);font-size:14px}#hud-room b{letter-spacing:2px;font-size:16px}#hud-room button{border:0;border-radius:10px;padding:6px 10px;background:#efe4cc;font-size:13px}#banner{position:absolute;top:calc(10px + var(--safe-t));left:50%;transform:translate(-50%);text-align:center;pointer-events:none;padding:8px 16px;border-radius:16px;background:var(--paper);box-shadow:var(--shadow);max-width:46vw}#banner.it{background:var(--it);color:#fff}#banner.runner{background:var(--run);color:#fff}#banner-main{font-weight:700;font-size:18px}#banner-sub{font-size:13px;opacity:.9}#scores{position:absolute;top:calc(10px + var(--safe-t));right:calc(10px + var(--safe-r));background:var(--paper);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow);font-size:13px;min-width:120px}#scores .p{display:flex;align-items:center;gap:6px;padding:2px 0}#scores .dot{width:10px;height:10px;border-radius:50%;flex:none}#scores .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}#scores .off{opacity:.45}#scores .me .name{font-weight:700}#scores .ping{opacity:.55;font-size:11px;margin-top:4px;text-align:right}#toasts{position:absolute;top:28%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.toast{background:#2c2433d9;color:#fff;padding:8px 16px;border-radius:999px;font-weight:700;animation:toast 2.6s forwards;white-space:nowrap}.toast.big{font-size:22px;background:var(--it)}@keyframes toast{0%{opacity:0;transform:scale(.8)}8%{opacity:1;transform:scale(1.05)}14%{transform:scale(1)}80%{opacity:1}to{opacity:0}}#net-status{position:absolute;inset:0;display:grid;place-items:center;background:#2c243373;color:#fff;font-weight:700;font-size:20px;text-align:center;padding:20px}#hint{position:absolute;bottom:calc(12px + var(--safe-b));left:50%;transform:translate(-50%);background:#fff8eaeb;padding:6px 14px;border-radius:999px;font-size:14px;pointer-events:none;box-shadow:var(--shadow);white-space:nowrap}#hint:empty{display:none}#btn-respawn{position:absolute;left:calc(10px + var(--safe-l));top:calc(58px + var(--safe-t));width:40px;height:40px;border-radius:12px;border:0;background:var(--paper);box-shadow:var(--shadow);font-size:20px}#labels{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.label{position:absolute;left:0;top:0;transform:translate(-50%,-100%);white-space:nowrap;font-size:13px;font-weight:700;padding:2px 8px;border-radius:999px;background:#fff8eae6;will-change:transform}.label.it{background:var(--it);color:#fff}.label.edge{font-size:12px;opacity:.9}.label.edge:before{content:"◆ "}#touch{position:fixed;inset:0;z-index:8;pointer-events:none}#stick-zone{position:absolute;left:0;bottom:0;width:45%;height:60%;pointer-events:auto}#look-zone{position:absolute;right:0;top:0;width:55%;height:100%;pointer-events:auto}#stick-base{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:#fff8ea59;border:3px solid rgba(255,248,234,.7);left:calc(90px + var(--safe-l));top:calc(100% - 100px - var(--safe-b));transition:opacity .2s;opacity:.6}#stick-base.active{opacity:1;transition:none}#stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--paper);box-shadow:var(--shadow)}#buttons{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(16px + var(--safe-b));display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:12px;align-items:end;justify-items:end;pointer-events:none}.tbtn{pointer-events:auto;border:0;border-radius:50%;background:#fff8eaeb;box-shadow:var(--shadow);font-weight:700;touch-action:none}.tbtn.big{width:84px;height:84px;font-size:16px;grid-column:2;grid-row:2}.tbtn.small{width:64px;height:64px;font-size:12px;grid-column:1;grid-row:2}.tbtn.action{grid-column:1 / span 2;grid-row:1;border-radius:18px;width:auto;height:54px;padding:0 18px;font-size:16px;background:var(--accent);color:#fff}.tbtn.on{background:var(--blue);color:#fff}.tbtn.pressed{transform:scale(.92)}@media(max-width:640px){#banner{max-width:70vw;padding:6px 10px;top:calc(54px + var(--safe-t))}#banner-main{font-size:15px}#banner-sub{font-size:11px}#scores{font-size:12px;min-width:0;padding:6px 8px}#scores .name{max-width:70px}#hud-room{font-size:12px}#hud-room button{padding:5px 7px;font-size:12px}#hint{display:none}}@media(max-height:500px){#banner{top:calc(6px + var(--safe-t))}#toasts{top:22%}}