:root{--outline: #1F1B2E;--panel: #2B3A55;--panel-light: #3E5578;--go: #4FD1A5;--warning: #F2B33D;--danger: #E5484D;--text: #F3F6FB}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0a0d1c;color:var(--text);font-family:Fredoka,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}input{-webkit-user-select:text;user-select:text}:root{--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#hud{position:fixed;inset:0;pointer-events:none}#hud>*{pointer-events:auto}.hud-left{position:absolute;top:calc(16px + var(--safe-t));left:calc(16px + var(--safe-l));display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none}.hud-room{padding:8px 16px;border:3px solid var(--outline);border-radius:999px;background:var(--panel);font-size:18px;font-weight:600;box-shadow:0 3px 0 var(--outline)}.hud-room.pop{animation:pop .28s ease-out}@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.06)}to{transform:scale(1)}}.hud-keys{position:absolute;top:calc(20px + var(--safe-t));right:calc(16px + var(--safe-r));padding:6px 12px;border-radius:10px;background:#2b3a55cc;font-size:14px;font-weight:500;opacity:.9}.hud-keys b{color:var(--go);font-weight:600}.swatch{width:28px;height:28px;border:3px solid var(--outline);border-radius:50%;background:var(--c);cursor:pointer;padding:0}.swatch[aria-checked=true]{outline:3px solid var(--text);outline-offset:1px}.swatch:focus-visible{outline:3px solid var(--go);outline-offset:1px}.hud-tasks{width:290px;padding:10px 12px;border:3px solid var(--outline);border-radius:14px;background:#2b3a55eb;box-shadow:0 3px 0 var(--outline)}.hud-bar{height:12px;margin-bottom:8px;border:2px solid var(--outline);border-radius:999px;background:#16203a;overflow:hidden}.hud-bar i{display:block;height:100%;width:0;background:var(--go);transition:width .4s ease-out}.hud-tasks ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.45}.hud-tasks li b{font-weight:600;color:var(--warning)}.hud-tasks li.done{opacity:.55;text-decoration:line-through}.hud-tasks li.done b{color:var(--go)}.hud-tasks ul.ghosted li:not(.done){opacity:.4}.hud-tasks{cursor:pointer}.hud-tasks.folded ul,.hud-tasks.folded .hud-fake{display:none}.hud-tasks.folded .hud-bar{margin-bottom:0}.hud-tools{position:absolute;top:calc(16px + var(--safe-t));right:calc(16px + var(--safe-r));display:none;gap:8px}.hud-tool{width:44px;height:44px;border:3px solid var(--outline);border-radius:50%;background:var(--panel);color:var(--text);font:700 24px/1 Fredoka,system-ui,sans-serif;box-shadow:0 3px 0 var(--outline)}.hud-tool[hidden]{display:none}.hud-tool i{display:block;width:20px;height:20px;margin:auto;border:2px solid var(--outline);border-radius:50%}#stick{position:fixed;left:0;top:0;bottom:0;width:50%;display:none;touch-action:none}.stick-base{position:absolute;left:calc(96px + var(--safe-l));top:calc(100% - 96px - var(--safe-b));width:128px;height:128px;margin:-64px 0 0 -64px;border:3px solid rgba(243,246,251,.35);border-radius:50%;background:#2b3a5559;opacity:.55;pointer-events:none;transition:opacity .15s}.stick-base.on{opacity:1;transition:none}.stick-knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:3px solid var(--outline);border-radius:50%;background:var(--panel-light);box-shadow:0 3px 0 var(--outline)}.lobby{position:fixed;inset:0;display:grid;place-items:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));background:#0a0d1c8c;overflow:auto}.lobby[hidden]{display:none}.lob-card{width:min(980px,100%);padding:20px 22px;border:4px solid var(--outline);border-radius:26px;background:var(--panel);box-shadow:0 6px 0 var(--outline)}.lob-title{width:min(460px,100%);text-align:center}.lob-logo{margin:0;font-size:clamp(44px,9vw,72px);line-height:1;letter-spacing:.02em;color:var(--go);text-shadow:0 5px 0 var(--outline)}.lob-tag{margin:6px 0 4px;opacity:.85}.lob-me{display:flex;justify-content:center;margin:6px 0}.lob-field{display:grid;gap:6px;margin:4px 0 14px;font-weight:600;text-align:left}.lob-field input,.lob-code{padding:10px 12px;border:3px solid var(--outline);border-radius:14px;background:#f3f6fb;color:var(--outline);font:600 18px Fredoka,system-ui,sans-serif}.lob-go{width:100%;padding:12px 24px;border:3px solid var(--outline);border-radius:999px;background:var(--go);color:var(--outline);font:700 22px Fredoka,system-ui,sans-serif;box-shadow:0 4px 0 var(--outline);cursor:pointer}.lob-go:disabled{opacity:.45;cursor:default}.lob-join{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;opacity:.95}.lob-code{width:92px;text-align:center;letter-spacing:.2em;text-transform:uppercase;font-size:16px;padding:7px 8px}.lob-small{padding:7px 14px;border:3px solid var(--outline);border-radius:999px;background:var(--panel-light);color:var(--text);font:600 15px Fredoka,system-ui,sans-serif;cursor:pointer}.lob-small:disabled{opacity:.4;cursor:default}.lob-note{min-height:22px;margin:12px 0 0;opacity:.85}.lob-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.lob-head h2{margin:0 6px 0 0;font-size:30px}.lob-chip{padding:5px 12px;border:3px solid var(--outline);border-radius:999px;background:#16203a}.lob-chip b{letter-spacing:.15em;color:var(--warning)}.lob-back{margin-left:auto}.lob-cols{display:grid;grid-template-columns:1fr 340px;gap:18px}.lob-cols h3{margin:0 0 8px;font-size:18px}.lob-cols h3 span{font-weight:500;opacity:.7;font-size:15px}.lob-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px;padding:0;list-style:none}.lob-player{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border:3px solid var(--outline);border-radius:14px;background:var(--panel-light)}.lob-player canvas{border-radius:10px;background:#2b3a55}.lob-player.me{box-shadow:0 0 0 3px var(--warning)}.lob-pname{font-weight:700}.lob-pname i{font-style:normal;font-weight:500;opacity:.7}.lob-tags{display:flex;gap:4px;margin-left:auto}.lob-tags b{padding:1px 7px;border-radius:999px;background:#16203a;font-size:12px;font-weight:600}.lob-tags .lob-host-tag{background:var(--warning);color:var(--outline)}.lob-kick{width:28px;height:28px;border:2px solid var(--outline);border-radius:50%;background:var(--danger);color:var(--text);font:700 16px/1 Fredoka,sans-serif;cursor:pointer}.lob-row{display:flex;flex-wrap:wrap;gap:8px}.lob-colours{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px;justify-items:center}.lob-colours .swatch{width:38px;height:38px}.lob-colours .swatch:disabled{opacity:.25;cursor:not-allowed}.lob-settings{display:grid;gap:6px}.lob-setting{display:grid;grid-template-columns:1fr 34px 78px 34px;align-items:center;gap:6px}.lob-setting b{text-align:center}.lob-step{width:34px;height:34px;border:3px solid var(--outline);border-radius:50%;background:var(--panel-light);color:var(--text);font:700 18px/1 Fredoka,sans-serif;cursor:pointer}.lob-step:disabled{opacity:.3;cursor:default}.lob-foot{display:flex;align-items:center;gap:16px;margin-top:16px}.lob-foot .lob-go{width:auto;padding:12px 40px}.lob-foot .lob-note{margin:0}.screen-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.screen-lobby{background:var(--panel-light);color:var(--text)}.lob-online{padding:4px 10px;border-radius:999px;background:#16203a;font-size:13px;font-weight:600;opacity:.8}.lob-online.on{background:var(--go);color:var(--outline);opacity:1}.lob-tags .lob-away{background:var(--danger)}.lobby.mini{inset:calc(12px + var(--safe-t)) auto auto 50%;transform:translate(-50%);padding:0;background:none;overflow:visible;display:block;width:max-content;max-width:calc(100vw - 24px)}.lob-bar{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 12px;border:3px solid var(--outline);border-radius:999px;background:var(--panel);box-shadow:0 4px 0 var(--outline)}.lob-bar .lob-go{width:auto;padding:6px 20px;font-size:16px}.lob-hint{opacity:.7;font-size:14px}.lob-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lob-pair .lob-go{font-size:19px;padding:12px 10px}.lob-alt{background:var(--panel-light);color:var(--text)}.lob-form{text-align:left}.lob-form h2{margin:0 0 12px;font-size:28px;text-align:center}.lob-field small{font-weight:500;opacity:.7}.lob-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lob-segbtn{display:grid;gap:2px;padding:10px;border:3px solid var(--outline);border-radius:14px;background:var(--panel-light);color:var(--text);font:700 17px Fredoka,system-ui,sans-serif;cursor:pointer}.lob-segbtn small{font-size:12px;font-weight:500;opacity:.8}.lob-segbtn.on{background:var(--go);color:var(--outline)}.lob-seg.small .lob-segbtn{padding:6px 10px;font-size:14px}.lob-pass{width:130px;padding:7px 10px;border:3px solid var(--outline);border-radius:12px;font:600 16px Fredoka,sans-serif}.lob-pass[hidden]{display:none}.lob-find-card{width:min(720px,100%)}.lob-games{display:grid;gap:8px;margin:0;padding:0;list-style:none;max-height:60vh;overflow-y:auto}.lob-game{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:10px 12px;border:3px solid var(--outline);border-radius:16px;background:var(--panel-light)}.lob-gname{font-size:19px;font-weight:700}.lob-gmeta{grid-row:2;font-size:14px;opacity:.8}.lob-game .lob-pass{grid-row:1 / 3;grid-column:2}.lob-game [data-code]{grid-row:1 / 3;grid-column:3}.lob-lock{font-style:normal;margin-right:6px}.lob-empty{padding:20px;text-align:center;opacity:.8}.lob-go-small{background:var(--go);color:var(--outline);font-weight:700}.lob-rname{font-size:17px}.lob-bar-note{margin:6px 0 0;text-align:center;font-size:14px;text-shadow:0 2px 0 var(--outline);opacity:.9;min-height:0}.lobby.mini.withpanel{inset:0;transform:none;width:auto;max-width:none;display:grid;justify-items:center;align-content:start;gap:12px;padding:calc(12px + var(--safe-t)) 16px 16px;background:#0a0d1c99;overflow:auto}.lob-close{margin-left:auto;width:40px;height:40px;border:3px solid var(--outline);border-radius:50%;background:var(--danger);color:var(--text);font:700 22px/1 Fredoka,sans-serif;cursor:pointer}.lob-roomset{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.lob-roomset .lob-room,.lob-roomset .lob-roompass{padding:7px 10px;border:3px solid var(--outline);border-radius:12px;font:600 15px Fredoka,sans-serif;min-width:0}.lob-roomset .lob-roompass{grid-column:1}.lob-card-note{margin:10px 0 0}@media(max-width:760px){.lob-cols,.lob-list{grid-template-columns:1fr}}@media(max-height:500px){.lob-card{padding:12px 14px;border-radius:18px}.lob-logo{font-size:40px}.lob-me canvas{width:70px!important}.lob-head h2{font-size:22px}.lob-cols{grid-template-columns:1fr 300px;gap:12px}.lob-player canvas{width:30px!important}.lob-colours .swatch{width:30px;height:30px}.lob-setting{grid-template-columns:1fr 30px 70px 30px}.lob-step{width:30px;height:30px}}body.panel-open #hud,body.panel-open #stick{visibility:hidden}body.touch #stick{display:block}body.touch .hud-keys{display:none}body.touch .hud-tools{display:flex}body.touch .hud-toast{top:auto;bottom:calc(150px + var(--safe-b))}.hud-toast{position:absolute;top:70px;left:50%;transform:translate(-50%,-8px);padding:8px 18px;border:3px solid var(--outline);border-radius:999px;background:var(--panel);font-size:18px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.hud-toast.on{opacity:1;transform:translate(-50%)}.hud-alert:not([hidden])~.hud-toast{top:calc(110px + var(--safe-t))}.hud-actions{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));display:flex;gap:6px}.hud-act{position:relative;width:104px;padding:0;border:0;background:none;color:var(--text);font:700 16px Fredoka,system-ui,sans-serif;text-shadow:0 2px 0 var(--outline);cursor:pointer}.hud-act canvas{display:block;width:96px;height:96px;margin:0 auto}.hud-act[hidden]{display:none}.hud-act:disabled{opacity:.35;cursor:default;filter:grayscale(.6)}.hud-act:not(:disabled) canvas{animation:ready 1.2s ease-in-out infinite}.hud-cool{position:absolute;top:30px;left:0;right:0;font-size:30px;text-shadow:0 2px 0 var(--outline),0 0 6px var(--outline)}.hud-fake{margin:0 0 6px;font-size:13px;color:var(--danger);font-weight:600}@keyframes ready{50%{transform:scale(1.07)}}.hud-alert{position:absolute;top:calc(14px + var(--safe-t));left:50%;transform:translate(-50%);display:grid;gap:4px;width:min(560px,calc(100vw - 32px));padding:8px 16px 10px;border:3px solid var(--outline);border-radius:16px;background:#5a4a1e;text-align:center;box-shadow:0 3px 0 var(--outline);pointer-events:none}.hud-alert[hidden]{display:none}.hud-alert.danger{background:#7a2430;animation:alarm 1s ease-in-out infinite}@keyframes alarm{50%{background:#a3303c}}.hud-alert b{font-size:19px}.hud-alert span{font-size:14px;opacity:.95}.hud-alert-bar{display:block;height:8px;border-radius:999px;background:#00000059;overflow:hidden}.hud-alert-bar i{display:block;height:100%;width:0;background:var(--warning);transition:width .2s linear}.hud-alert.danger .hud-alert-bar i{background:var(--go)}.hud-leave{position:absolute;top:calc(64px + var(--safe-t));right:calc(16px + var(--safe-r));padding:6px 14px;border:3px solid var(--outline);border-radius:999px;background:var(--panel);color:var(--text);font:600 14px Fredoka,system-ui,sans-serif;cursor:pointer;opacity:.85}body.touch .hud-leave{top:calc(70px + var(--safe-t))}.hud-sabmenu{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(150px + var(--safe-b));display:grid;gap:6px;width:260px;padding:12px;border:3px solid var(--outline);border-radius:16px;background:var(--panel);box-shadow:0 4px 0 var(--outline)}.hud-sabmenu[hidden]{display:none}.hud-sabmenu>b{font-size:18px}.hud-sabmenu>span{font-size:13px;opacity:.8;margin-top:4px}.hud-sabmenu button{padding:7px 10px;border:3px solid var(--outline);border-radius:12px;background:#7a2430;color:var(--text);font:600 15px Fredoka,system-ui,sans-serif;cursor:pointer}.hud-sabmenu button:disabled{opacity:.35;cursor:default}.hud-sabrooms{display:grid;grid-template-columns:1fr 1fr;gap:5px}.hud-sabrooms button{background:var(--panel-light);font-size:13px;padding:5px 6px}.panel{position:fixed;inset:0;display:grid;place-items:center;background:#0a0d1c99}.panel[hidden]{display:none}.panel-card{display:flex;flex-direction:column;align-items:center;gap:8px}.panel-head{display:flex;align-items:center;justify-content:space-between;width:100%}.panel-title{font-size:22px;font-weight:700;text-shadow:0 2px 0 var(--outline)}.panel-close{width:40px;height:40px;border:3px solid var(--outline);border-radius:50%;background:var(--danger);color:var(--text);font:700 22px/1 Fredoka,system-ui,sans-serif;cursor:pointer}.panel-canvas{display:block;border-radius:18px;touch-action:none;cursor:pointer}.panel-hint{min-height:26px;font-size:18px;font-weight:500}.meeting{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#0a0d1cb8}.meeting[hidden]{display:none}.meet-card{width:min(1040px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:12px;padding:18px;border:4px solid var(--outline);border-radius:24px;background:var(--panel);box-shadow:0 5px 0 var(--outline);overflow:auto}.meet-head{display:flex;align-items:center;gap:14px}.meet-head h2{margin:0;font-size:28px}.meet-head p{margin:2px 0 0;opacity:.85}.meet-timer{margin-left:auto;font-size:20px;font-weight:700;color:var(--warning);white-space:nowrap}.meet-body{display:grid;grid-template-columns:1fr 300px;gap:14px;min-height:0}.meet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}.meet-member{position:relative;display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto 1fr;column-gap:10px;align-items:center;padding:6px 10px 6px 6px;border:3px solid var(--outline);border-radius:16px;background:var(--panel-light);color:var(--text);font:inherit;text-align:left;cursor:pointer}.meet-member canvas{grid-row:1 / 4;border-radius:12px;background:#2b3a55}.meet-member:disabled{cursor:default}.meet-member.out{opacity:.45;filter:grayscale(.7)}.meet-member.picked{border-color:var(--go);box-shadow:0 0 0 3px var(--go)}.meet-member.me .meet-name{color:var(--sunflower, #F2C53D)}.meet-name{font-size:18px;font-weight:700}.meet-name.sab,.sab{color:var(--danger)}.meet-state{font-size:13px;opacity:.85}.meet-dots{display:flex;flex-wrap:wrap;gap:3px;align-self:start}.meet-dots i{width:14px;height:14px;border:2px solid var(--outline);border-radius:50%}.meet-confirm{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 14px;border:3px solid var(--outline);border-radius:999px;background:var(--go);color:var(--outline);font-weight:700}.meet-chat{display:flex;flex-direction:column;gap:8px;min-height:0}.meet-log{flex:1;min-height:220px;max-height:420px;overflow-y:auto;padding:8px 10px;border:3px solid var(--outline);border-radius:14px;background:#16203a}.meet-log p{margin:0 0 6px;font-size:15px;line-height:1.35}.meet-log i{display:inline-block;width:10px;height:10px;margin-right:6px;border:2px solid var(--outline);border-radius:50%}.meet-say{display:flex;gap:6px}.meet-say input{flex:1;min-width:0;padding:8px 10px;border:3px solid var(--outline);border-radius:12px;background:#f3f6fb;font:inherit;font-size:16px}.meet-log,.meet-card{touch-action:pan-y;-webkit-overflow-scrolling:touch}.meet-say button,.meet-skip,.screen-again{padding:8px 16px;border:3px solid var(--outline);border-radius:999px;background:var(--go);color:var(--outline);font:700 16px Fredoka,system-ui,sans-serif;cursor:pointer}.meet-foot{display:flex;align-items:center;gap:12px}.meet-skip{display:flex;align-items:center;gap:6px;background:var(--panel-light);color:var(--text)}.meet-skip:disabled{opacity:.4;cursor:default}.meet-note{opacity:.85}.screen{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#0a0d1ce6;text-align:center;cursor:pointer}.screen[hidden]{display:none}.screen.end{cursor:default}.screen-card{max-width:640px}.screen-card h1{margin:0 0 8px;font-size:clamp(34px,7vw,60px);line-height:1.05;text-shadow:0 4px 0 var(--outline)}.screen-card p{margin:6px 0;font-size:19px}.screen-kicker{text-transform:uppercase;letter-spacing:.12em;opacity:.8}.screen-hint{opacity:.7;font-size:15px!important}.screen-figures{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:14px 0}.screen-figures canvas.drift{animation:drift 4.5s linear forwards}@keyframes drift{0%{transform:translate(-40vw) rotate(0)}to{transform:translate(40vw) rotate(540deg)}}.screen-again{margin-top:14px;font-size:20px;padding:10px 26px}@media(max-width:760px){.meet-body{grid-template-columns:1fr}.meet-grid{grid-template-columns:1fr 1fr}.meet-member{grid-template-columns:52px 1fr}.meet-member canvas{width:52px!important}}@media(max-height:500px){.hud-room{font-size:15px;padding:5px 12px}.hud-left{gap:6px}.hud-tasks{width:230px;padding:7px 9px}.hud-tasks ul{font-size:13px;line-height:1.35}.hud-act{width:80px;font-size:13px}.hud-act canvas{width:72px;height:72px}.hud-cool{top:20px;font-size:24px}.meet-card{padding:10px;gap:8px;border-radius:16px}.meet-head h2{font-size:20px}.meet-head .meet-icon canvas{width:36px!important;height:36px!important}.meet-body{grid-template-columns:1fr 240px}.meet-grid{grid-template-columns:repeat(4,1fr);gap:6px}.meet-member{grid-template-columns:1fr;grid-template-rows:auto;padding:4px;text-align:center;justify-items:center}.meet-member canvas{grid-row:auto;width:44px!important}.meet-name{font-size:14px}.meet-state{font-size:11px}.meet-log{min-height:120px;max-height:190px}.meet-log p{font-size:13px}.screen-card h1{font-size:34px}.screen-card p{font-size:15px}.panel-title{font-size:17px}.panel-hint{font-size:14px;min-height:18px}}@media(max-width:560px){.hud-keys{display:none}.hud-act{width:76px}.hud-act canvas{width:68px;height:68px}.hud-tasks{width:220px;font-size:13px}.swatch{width:24px;height:24px}}