body{background:#000}#app{width:100vw;height:100vh;position:relative}#app canvas{width:100%;height:100%}.leave{z-index:10;color:#fff;background:#000a;border:1px solid #fff2;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;position:absolute;top:10px;left:10px}.leave:hover{border-color:var(--accent)}.hud{pointer-events:none;text-shadow:0 1px 2px #000;flex-direction:column;gap:4px;font-size:14px;display:flex;position:absolute;top:46px;left:10px}.hud .players{color:var(--muted);font-size:12px}.hud .msg{color:var(--accent-2);font-size:18px;font-weight:700}.help{color:#fff9;text-shadow:0 1px 2px #000;font-size:12px;position:absolute;bottom:10px;left:10px}.help a{color:var(--accent)}.join{background:#0008;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.join.start{z-index:30}.join .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:12px;width:320px;padding:24px;display:flex}.join h1{color:var(--accent-2);letter-spacing:1px;margin:0;font-size:22px}.join input,.join select{width:100%;padding:8px}.join button{padding:10px}.join.menu{z-index:20;background:#f4f1ea;transition:opacity .45s;display:block;overflow:hidden}.join.menu.gone{opacity:0;pointer-events:none}.join.menu .split{position:absolute;inset:0}.join.menu .half{color:#fff;text-align:left;-webkit-tap-highlight-color:transparent;border:0;border-radius:0;flex-direction:column;justify-content:center;gap:6px;padding:0 9vw;transition:filter .15s,clip-path .7s cubic-bezier(.7,0,.3,1);display:flex;position:absolute;inset:0}.join.menu .half:hover,.join.menu .half:active{filter:brightness(1.08)}.join.menu .half .diorama{pointer-events:none;width:50%;height:55%;transition:width .7s cubic-bezier(.7,0,.3,1),height .7s cubic-bezier(.7,0,.3,1);position:absolute;bottom:0}.join.menu .half.multi .diorama{left:0}.join.menu .half.bots .diorama{right:0}.join.menu .half>span{z-index:1;position:relative}.join.menu .half:after{content:"";pointer-events:none;background:radial-gradient(120% 90%,#0000 55%,#0004 100%);position:absolute;inset:0}.join.menu .half .kicker{letter-spacing:4px;text-transform:uppercase;opacity:.75;font-size:clamp(12px,1.5vw,22px);font-weight:700}.join.menu .half .big-title{letter-spacing:1px;text-shadow:0 6px 24px #0005;font-size:clamp(28px,6.4vw,96px);font-weight:900;line-height:1.05}.join.menu .half .sub{opacity:.85;max-width:30vw;font-size:clamp(13px,1.7vw,24px);line-height:1.4}.join.menu .half.multi{clip-path:polygon(0 0,58% 0,44% 100%,0 100%);background:repeating-linear-gradient(135deg,#ffffff10 0 17px,#0000 17px 42.4264px) 0 0/60px 60px,linear-gradient(160deg,#283593 0%,#5e35b1 55%,#8e24aa 100%) 0 0/100% 100%;align-items:flex-start;animation:24s linear infinite drift-stripes}.join.menu .half.bots{text-align:right;clip-path:polygon(60% 0,100% 0,100% 100%,46% 100%);background:radial-gradient(#ffffff2e 2px,#0000 3px) 0 0/28px 28px,linear-gradient(200deg,#ffb300 0%,#ff7043 55%,#e53935 100%);align-items:flex-end;animation:30s linear infinite reverse drift-dots}@keyframes drift-stripes{0%{background-position:0 0,0 0}to{background-position:600px 600px,0 0}}@keyframes drift-dots{0%{background-position:0 0,0 0}to{background-position:420px 420px,0 0}}.join.menu .top{pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;top:4vh;left:50%;transform:translate(-50%)}.join.menu .top>*{pointer-events:auto}.join.menu .logo{letter-spacing:.08em;color:#fff;text-shadow:0 2px #0006,0 8px 24px #0008;gap:.3em;font-size:clamp(28px,7vw,110px);font-weight:900;line-height:1;display:flex}.join.menu .logo .dudes{color:var(--accent-2)}.join.menu label.name{background:#12131aee;border:1px solid #fff2;border-radius:999px;align-items:center;gap:10px;padding:6px 8px 6px 16px;display:flex;box-shadow:0 8px 24px #0006}.join.menu label.name span{letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700}.join.menu label.name input{text-align:center;background:#ffffff10;border-color:#0000;border-radius:999px;width:180px;font-weight:600}.join.menu label.name input:focus{border-color:var(--accent);outline:none}.join.menu label.name strong{color:#fff;padding:0 4px;font-weight:700}.join.menu label.name .edit{width:30px;height:30px;color:var(--muted);background:#ffffff14;border-color:#0000;border-radius:50%;padding:0;font-size:14px}.join.menu label.name .edit:hover{color:#fff;border-color:var(--accent)}.join.menu.queueing .half{pointer-events:none}.join.menu.queueing .half>span{opacity:0;transition:opacity .25s}.join.menu.queueing .half:hover{filter:none}.join.menu.queueing.multi .half.multi{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.join.menu.queueing.multi .half.bots{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.join.menu.queueing.bots .half.bots{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.join.menu.queueing.bots .half.multi{clip-path:polygon(0 0,0 0,0 100%,0 100%)}.join.menu.queueing .half .diorama{width:100%;height:58%}.join.menu .queue{text-align:center;color:#fff;text-shadow:0 2px #0004,0 8px 24px #0006;z-index:2;pointer-events:none;flex-direction:column;align-items:center;gap:12px;width:min(92vw,760px);display:flex;position:absolute;top:24vh;left:50%;transform:translate(-50%)}.join.menu .queue>*{animation:.55s cubic-bezier(.34,1.56,.64,1) both pop}.join.menu .queue>:nth-child(2){animation-delay:60ms}.join.menu .queue>:nth-child(3){animation-delay:.12s}.join.menu .queue>:nth-child(4){animation-delay:.18s}.join.menu .queue>:nth-child(5){animation-delay:.24s}.join.menu .queue>:nth-child(6){animation-delay:.3s}.join.menu .queue .title{letter-spacing:4px;text-transform:uppercase;opacity:.8;font-size:clamp(12px,1.5vw,22px);font-weight:700}.join.menu .queue .count{font-size:clamp(26px,4.5vw,64px);font-weight:900;line-height:1.05}.join.menu .queue .bar{background:#0003;border-radius:6px;width:min(70vw,420px);height:12px;overflow:hidden;box-shadow:inset 0 1px 3px #0004}.join.menu .queue .bar .fill{background:#fff;border-radius:6px;height:100%;transition:width .3s;box-shadow:0 0 12px #fff8}.join.menu .queue .names{opacity:.85;max-width:100%;font-size:clamp(11px,1.2vw,16px);line-height:1.6}.join.menu .queue .sub{opacity:.85;font-size:clamp(12px,1.4vw,19px)}.join.menu .queue .leave-queue{pointer-events:auto;color:#fff;text-shadow:none;background:#0003;border:1px solid #fff5;border-radius:999px;margin-top:8px;padding:10px 26px;font-weight:600}.join.menu .queue .leave-queue:hover{color:#222;background:#fff;border-color:#fff}@keyframes pop{0%{opacity:0;transform:translateY(26px)scale(.7)}to{opacity:1;transform:none}}@media (orientation:portrait){.join.menu .half{justify-content:flex-start;padding:0 10vw}.join.menu .half.multi{clip-path:polygon(0 0,100% 0,100% 44%,0 58%);padding-top:24vh}.join.menu .half.bots{clip-path:polygon(0 60%,100% 46%,100% 100%,0 100%);justify-content:flex-end;padding-bottom:16vh}.join.menu .half .sub{max-width:70vw}.join.menu .half .diorama{width:100%;height:30%;bottom:auto}.join.menu .half.multi .diorama{top:26%}.join.menu .half.bots .diorama{top:48%}.join.menu.queueing .half .diorama{height:45%;top:auto;bottom:0}.join.menu .queue{width:92vw;top:18vh}}.lock-hint{pointer-events:none;background:#0009;border-radius:20px;padding:10px 18px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.banner{pointer-events:none;white-space:nowrap;background:#0009;border-radius:20px;padding:6px 16px;font-weight:600;position:absolute;top:10px;left:50%;transform:translate(-50%)}.big{color:#fff;text-shadow:0 4px 16px #000c;pointer-events:none;letter-spacing:2px;font-size:96px;font-weight:900;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}.big.go{color:var(--ok)}.big.muted{color:#fffc;font-size:28px}.standings{pointer-events:none;background:#000c;border-radius:12px;min-width:320px;padding:20px 28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.standings h2{text-align:center;margin:0 0 12px;font-size:28px}.standings h2.ok{color:var(--ok)}.standings h2.bad{color:var(--danger)}.standings ol{margin:0;padding-left:24px}.standings li{justify-content:space-between;gap:16px;padding:2px 0;display:flex}.standings li.x{color:var(--muted)}.standings li.q .name{color:var(--ok)}#app{height:100dvh}#app canvas{touch-action:none}body.touch .help,body.touch .lock-hint{display:none}body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.touch-ui{touch-action:none;z-index:5;position:absolute;inset:0}.touch-ui .stick{pointer-events:none;background:#fff2;border:2px solid #fff5;border-radius:50%;width:112px;height:112px;margin:-56px 0 0 -56px;position:absolute}.touch-ui .stick .knob{background:#fffa;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;box-shadow:0 2px 8px #0008}.touch-ui .tbtn{color:#fff;letter-spacing:1px;text-shadow:0 1px 2px #000;touch-action:none;right:calc(24px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));background:#fff2;border:2px solid #fff6;border-radius:50%;padding:0;font-weight:800;position:absolute}.touch-ui .tbtn.jump{border-color:var(--accent);background:#4fc3f733;width:84px;height:84px;font-size:16px}.touch-ui .tbtn.dive{width:64px;height:64px;right:calc(124px + env(safe-area-inset-right));bottom:calc(44px + env(safe-area-inset-bottom));border-color:var(--accent-2);background:#ffd54f33;font-size:13px}.touch-ui .tbtn.grab{width:64px;height:64px;right:calc(34px + env(safe-area-inset-right));bottom:calc(124px + env(safe-area-inset-bottom));background:#ff408133;border-color:#ff4081;font-size:13px}.touch-ui .tbtn.down{background:#fff6;transform:scale(.94)}.touch-ui.spectating .tbtn{font-size:28px}@media (width<=760px),(height<=480px){.hud{top:calc(6px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));font-size:12px}.hud .msg{font-size:15px}.banner{top:calc(6px + env(safe-area-inset-top));white-space:normal;text-align:center;max-width:60vw;padding:4px 12px;font-size:12px}.big{font-size:56px;top:32%}.big.muted{text-align:center;max-width:80vw;font-size:18px}.standings{width:min(92vw,360px);min-width:0;max-height:70vh;padding:14px 18px;overflow:auto}.standings h2{margin-bottom:8px;font-size:22px}.join .card{width:min(92vw,320px);padding:18px}.join input,.join select,.join button{font-size:16px}}