*{box-sizing:border-box;margin:0;padding:0}:root{--world:#c4c4cd;--overlay-inner:#1e1e2859;--overlay-outer:#0f0f1999;--card-bg:#eeebe5;--card-sheen:#ffffff8c;--card-border:#555;--card-shadow:0 8px 32px #00000040;--card-highlight:#fffffff2;--card-lowlight:#0000000d;--title:#3b3b3b;--title-shadow:#c4c0b8;--title-highlight:#ffffff80;--muted:#888;--control-bg:#e8e6e1;--control-bg-hover:#dfddda;--control-bg-active:#d8d6d1;--control-text:#3b3b3b;--control-text-shadow:#fff6;--control-border:#999;--control-ledge:#888;--chevron:#777;--divider:#0000000f;--input-bg:#fff;--input-border:#bbb;--placeholder:#b0b0b0;--moon:#b7a3f0;--moon-stroke:#7a64b8;--sun:#ffd780;--sun-stroke:#c9973a;--play-bg:#82e179;--play-bg-hover:#72d669;--play-border:#5fad58;--play-ledge:#4a8a44;--wait-bg:#d4a85a;--wait-border:#b08a3e;--wait-ledge:#8e7032;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--world:#24242a;--overlay-inner:#08080e66;--overlay-outer:#04040abf;--card-bg:#2a2a31;--card-sheen:#ffffff09;--card-border:#16161b;--card-shadow:0 8px 32px #0000008c;--card-highlight:#ffffff0f;--card-lowlight:#0000002e;--title:#ececf1;--title-shadow:#16161b;--title-highlight:#ffffff0a;--muted:#8b8b99;--control-bg:#363640;--control-bg-hover:#3e3e49;--control-bg-active:#31313a;--control-text:#e4e4ea;--control-text-shadow:#00000073;--control-border:#4b4b57;--control-ledge:#1b1b21;--chevron:#9a9aa8;--divider:#ffffff0d;--input-bg:#1f1f25;--input-border:#46464f;--placeholder:#6b6b78;--play-bg:#58b350;--play-bg-hover:#4fa847;--play-border:#3f823a;--play-ledge:#2c5c28;--wait-bg:#b38a45;--wait-border:#8a6a31;--wait-ledge:#634c23;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{background:var(--world);width:100%;height:100%;font-family:Fredoka,Segoe UI,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}app>canvas{cursor:crosshair;transform-origin:0 0;display:block}#ui-overlay{pointer-events:auto;z-index:10;background:radial-gradient(ellipse at center, var(--overlay-inner) 0%, var(--overlay-outer) 100%);justify-content:center;align-items:center;width:100%;height:100%;font-family:Fredoka,sans-serif;display:flex;position:absolute;top:0;left:0;overflow:hidden}#ui-overlay.hidden{pointer-events:none;display:none}#join-screen{z-index:2;background-color:var(--card-bg);background-image:linear-gradient(180deg, var(--card-sheen) 0%, transparent 65%);border:3px solid var(--card-border);width:100%;min-width:22rem;max-width:360px;box-shadow:var(--card-shadow), inset 0 1px 0 var(--card-highlight), inset 0 -2px 0 var(--card-lowlight);text-align:center;border-radius:14px;flex-direction:column;gap:14px;padding:36px 32px 28px;transition:background-color .25s,border-color .25s;display:flex;position:relative;transform:scale(1.25)}#join-screen h1{color:var(--title);letter-spacing:-1px;text-shadow:2px 2px 0 var(--title-shadow), -1px -1px 0 var(--title-highlight);margin-bottom:0;font-family:Fredoka,sans-serif;font-size:3rem;font-weight:700;line-height:1;transition:color .25s}#join-screen h1 .dot{color:#85e37d;-webkit-text-stroke:2px #63aa5d}.tagline{color:var(--muted);letter-spacing:.5px;margin-top:-6px;margin-bottom:4px;font-size:.95rem;font-weight:500}.selector{gap:8px;display:flex}.selector .select{flex:1}.selector .select>p.title{text-align:left;color:var(--muted);letter-spacing:.5px;margin-bottom:2px;margin-left:4px;font-size:.75rem;font-weight:600}.custom-select{-webkit-user-select:none;user-select:none;flex:1;position:relative}.cs-trigger{background:var(--control-bg);width:100%;color:var(--control-text);border:3px solid var(--control-border);cursor:pointer;text-shadow:1px 1px 0 var(--control-text-shadow);box-shadow:0 3px 0 var(--control-ledge), 0 4px 8px #0000001a;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:600;transition:transform .1s,background .12s,box-shadow .12s,border-color .25s,color .25s;display:flex}.cs-trigger:hover{background:var(--control-bg-hover);box-shadow:0 3px 0 var(--control-ledge), 0 5px 10px #00000021}.cs-trigger:active,.custom-select.open .cs-trigger{box-shadow:0 1px 0 var(--control-ledge), 0 2px 4px #00000014;background:var(--control-bg-active);transform:translateY(2px)}.cs-label{text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:1;overflow:hidden}.cs-icon{vertical-align:-.2em;width:1.1em;height:1.1em;margin-right:8px}.cs-chevron{color:var(--chevron);flex-shrink:0;margin-left:8px;font-size:11px;transition:transform .2s}.custom-select.open .cs-chevron{transform:rotate(180deg)}.cs-dropdown{background:var(--card-bg);border:3px solid var(--control-border);box-shadow:0 3px 0 var(--control-ledge), 0 6px 20px #0000002e;z-index:100;opacity:0;pointer-events:none;border-radius:8px;max-height:0;transition:max-height .2s,opacity .15s,transform .15s;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden;transform:translateY(-6px)}.custom-select.open .cs-dropdown{opacity:1;pointer-events:auto;max-height:200px;overflow-y:auto;transform:translateY(0)}.cs-option{color:var(--control-text);cursor:pointer;padding:10px 14px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:500;transition:background .1s}.cs-option:hover{background:#85e37d38}.cs-option.selected{background:#85e37d59;font-weight:600}.cs-option+.cs-option{border-top:1px solid var(--divider)}#name-input{border:2.5px solid var(--input-border);color:var(--control-text);background:var(--input-bg);border-radius:8px;outline:none;padding:14px 16px;font-family:Fredoka,sans-serif;font-size:16px;font-weight:500;transition:border-color .2s,box-shadow .2s,background-color .25s,color .25s}#name-input::placeholder{color:var(--placeholder);font-weight:400}#name-input:focus{border-color:#85e37d;box-shadow:0 0 0 3px #85e37d33}#play-btn{background:var(--play-bg);color:#fff;border:3px solid var(--play-border);cursor:pointer;letter-spacing:.5px;text-shadow:1px 1px #000c;box-shadow:0 3px 0 var(--play-ledge), 0 4px 8px #00000026;border-radius:8px;padding:14px;font-family:Fredoka,sans-serif;font-size:20px;font-weight:700;transition:transform .1s,background .15s,box-shadow .15s,border-color .25s}#play-btn:hover{background:var(--play-bg-hover);box-shadow:0 3px 0 var(--play-ledge), 0 6px 12px #0000002e}#play-btn:active{box-shadow:0 1px 0 var(--play-ledge), 0 2px 4px #0000001f;transform:translateY(2px)}#play-btn.connecting{background:var(--wait-bg);border-color:var(--wait-border);box-shadow:0 3px 0 var(--wait-ledge), 0 4px 8px #00000026;opacity:.85;cursor:default;animation:1.5s ease-in-out infinite pulse-connect}#play-btn.connecting:hover{background:var(--wait-bg)}@keyframes pulse-connect{0%,to{opacity:.85}50%{opacity:.6}}#theme-toggle{z-index:3;background:var(--control-bg);border:3px solid var(--control-border);cursor:pointer;width:52px;height:52px;box-shadow:0 3px 0 var(--control-ledge), 0 4px 10px #0003;border-radius:12px;place-items:center;transition:transform .1s,background .12s,box-shadow .12s,border-color .25s;display:grid;position:absolute;top:20px;right:20px;overflow:hidden}#theme-toggle:hover{background:var(--control-bg-hover);box-shadow:0 3px 0 var(--control-ledge), 0 6px 14px #0000003d}#theme-toggle:active{background:var(--control-bg-active);box-shadow:0 1px 0 var(--control-ledge), 0 2px 4px #0000001f;transform:translateY(2px)}#theme-toggle:focus-visible{outline-offset:2px;outline:3px solid #85e37d99}#theme-toggle .icon{stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;width:28px;height:28px;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .25s}#theme-toggle .icon-moon{fill:var(--moon);stroke:var(--moon-stroke)}#theme-toggle .icon-sun{fill:var(--sun);stroke:var(--sun-stroke)}#theme-toggle .icon-sun .rays{stroke-width:2.4px}#theme-toggle .icon-sun,:root[data-theme=dark] #theme-toggle .icon-moon{opacity:0;transform:rotate(-90deg)scale(.4)}:root[data-theme=dark] #theme-toggle .icon-sun{opacity:1;transform:rotate(0)scale(1)}#theme-toggle:hover .icon-moon{transform:rotate(-14deg)}:root[data-theme=dark] #theme-toggle:hover .icon-sun{transform:rotate(45deg)}::-webkit-scrollbar{display:none}