:root{--bg:#05061a;--ink:#eef0ff;--dim:#9aa0d6;--ember:#ffa24a;--ember-2:#ff6a2a;--frost:#62d4ff;--frost-2:#3b8cff;--violet:#8a6cff;--glass:#96a0ff14;--soft:#96a0ff1f;--soft-hi:#96a0ff33;--spring:cubic-bezier(.2, .9, .25, 1.15);--display:"Unbounded", system-ui, sans-serif;--body:"Manrope", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;margin:0}body{background:radial-gradient(60% 40% at 15% 10%, #8a6cff38, transparent 70%), radial-gradient(50% 35% at 90% 85%, #62d4ff1f, transparent 70%), radial-gradient(45% 30% at 80% 20%, #ff8c3c14, transparent 70%), var(--bg);overscroll-behavior:none;background-attachment:fixed}#root{min-height:100dvh}button{font:inherit;color:inherit}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}.dim{color:var(--dim)}.btn{-webkit-tap-highlight-color:transparent;isolation:isolate;appearance:none;cursor:pointer;min-height:52px;font-family:var(--display);letter-spacing:.02em;white-space:nowrap;background:var(--soft);color:var(--ink);transition:transform .22s var(--spring), box-shadow .25s ease, opacity .2s ease, background .25s, filter .2s;border:0;border-radius:999px;padding:0 24px;font-size:15px;font-weight:600;position:relative;overflow:hidden;box-shadow:0 6px 20px -10px #000000b3}@media (hover:hover){.btn:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px)}}.btn:not(:disabled):active{filter:brightness(.95);transition-duration:80ms;transform:translateY(1px)scale(.96)}.btn:disabled{opacity:.4;cursor:default}.btn:focus-visible,.hub:focus-visible,.back:focus-visible,.world:focus-visible,.first:focus-visible,.codefield:focus-visible{outline:2px solid var(--frost);outline-offset:4px}.btn.big{width:100%;min-height:60px;font-size:17px}.btn.small{min-height:44px;padding:0 16px;font-size:13px}.btn.soft{background:var(--soft)}@media (hover:hover){.btn.soft:not(:disabled):hover{background:var(--soft-hi)}}.btn.c0{background:linear-gradient(135deg, #ffd29a, var(--ember) 45%, var(--ember-2));color:#2a1004;box-shadow:0 10px 34px -10px #ff8c3ccc,inset 0 1px #ffffff8c,inset 0 -3px #781e0040}.btn.c1{background:linear-gradient(135deg, #c8f3ff, var(--frost) 45%, var(--frost-2));color:#031629;box-shadow:0 10px 34px -10px #50b4ffcc,inset 0 1px #ffffff8c,inset 0 -3px #00286e40}@media (hover:hover){.btn.c0:not(:disabled):hover{box-shadow:0 16px 50px -10px #ff8c3cf2,inset 0 1px #fff9,inset 0 -3px #781e0040}.btn.c1:not(:disabled):hover{box-shadow:0 16px 50px -10px #50b4fff2,inset 0 1px #fff9,inset 0 -3px #00286e40}}.btn.c0:after,.btn.c1:after{content:"";z-index:-1;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(105deg,#0000 35%,#ffffff8c 50%,#0000 65%);transition:transform .7s;position:absolute;inset:0;transform:translate(-120%)}@media (hover:hover){.btn.c0:not(:disabled):hover:after,.btn.c1:not(:disabled):hover:after{transform:translate(120%)}}.btn.huge{border-radius:26px;place-content:center;gap:2px;width:100%;min-height:76px;font-size:19px;font-weight:700;display:grid}.btn.huge small{font-family:var(--body);letter-spacing:0;opacity:.72;font-size:13px;font-weight:700}.btn.soft.lit,.btn.lit{color:#031629;background:linear-gradient(135deg,#c8f3fff2,#62d4ffe6);box-shadow:0 0 26px -6px #62d4ffcc}.btn.danger{color:#ff9d9d}.back,.hub{-webkit-tap-highlight-color:transparent;cursor:pointer;background:var(--soft);min-height:44px;color:var(--ink);font:700 14px var(--body);transition:transform .2s var(--spring), background .2s;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 16px;text-decoration:none;display:inline-flex}@media (hover:hover){.back:hover,.hub:hover{background:var(--soft-hi);transform:translateY(-1px)}}.back:active,.hub:active{transform:scale(.95)}.back.over{position:static}.field{width:100%;min-height:58px;color:var(--ink);font:700 18px var(--body);text-align:center;background:#05061abf;border:0;border-radius:20px;padding:0 20px;transition:box-shadow .2s,background .2s;box-shadow:inset 0 2px 12px #0009}.field:focus{background:#141846d9;outline:none;box-shadow:inset 0 2px 12px #00000080,0 0 0 4px #62d4ff40}.row{gap:10px;width:100%;display:flex}.stack{gap:12px;width:100%;display:grid}label{color:var(--dim);font-size:14px;font-weight:700}.logo{font-family:var(--display);letter-spacing:.06em;text-shadow:0 0 40px #8a6cff99;justify-content:center;align-items:center;gap:.04em;margin:0;font-weight:800;line-height:1;display:flex}.logo-o{filter:drop-shadow(0 0 18px #ffa24a99);width:1.05em;height:1.05em;animation:6s ease-in-out infinite bob}.logo span{background:linear-gradient(#fff,#c9c6ff);color:#0000;-webkit-background-clip:text;background-clip:text}@keyframes bob{50%{transform:translateY(-4px)rotate(-6deg)}}.page{min-height:100dvh;padding:24px 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;max-width:560px;margin:0 auto;display:flex;position:relative}.page.center{justify-content:center}.topbar{z-index:5;top:max(14px, env(safe-area-inset-top));pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;left:14px;right:14px}.topbar>*{pointer-events:auto}.topbar .help{min-width:44px;margin-left:auto;padding:0;font-size:18px}.col{text-align:center;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:440px;margin:0 auto;display:flex;position:relative}.enter>*{animation:rise .7s var(--spring) both}.enter>:nth-child(2){animation-delay:60ms}.enter>:nth-child(3){animation-delay:.12s}.enter>:nth-child(4){animation-delay:.18s}.enter>:nth-child(5){animation-delay:.24s}.enter>:nth-child(6){animation-delay:.3s}.enter>:nth-child(7){animation-delay:.36s}.home{min-height:100dvh;padding:0 16px max(22px, env(safe-area-inset-bottom));flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:relative;overflow:hidden}.hero-planet{aspect-ratio:1;width:min(100vw,56dvh);animation:arrive 1.4s var(--spring) both;position:absolute;top:max(8px,2dvh);left:50%;transform:translate(-50%)}.hero-planet:before{content:"";filter:blur(30px);z-index:-1;background:radial-gradient(circle,#8a6cff59,#62d4ff14 55%,#0000 70%);border-radius:50%;animation:7s ease-in-out infinite breathe;position:absolute;inset:12%}.hero-planet .planet{width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 82%,#0000);mask-image:radial-gradient(closest-side,#000 82%,#0000)}@keyframes arrive{0%{opacity:0;transform:translate(-50%)scale(.82)}}@keyframes breathe{50%{opacity:.6;transform:scale(1.08)}}.home .col{gap:16px}.home .logo{margin-bottom:-4px}.tag{text-wrap:balance;color:var(--dim);margin:0;font-size:16px;font-weight:600;line-height:1.4}.play-pair{gap:12px;width:100%;display:grid}.home-more{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.join{background:#05061ab8;border-radius:999px;align-items:center;gap:4px;min-width:0;padding:4px;display:flex;box-shadow:inset 0 2px 10px #0009}.join .btn{min-height:44px;padding:0 14px;font-size:13px}.codefield{min-width:0;height:44px;color:var(--ink);font:700 16px var(--display);letter-spacing:.24em;text-transform:uppercase;text-align:center;background:0 0;border:0;border-radius:999px;flex:1}.codefield::placeholder{color:#9aa0d68c}.codefield:focus{outline:none}.home-more>.btn{min-height:52px;padding:0 12px;font-size:13px}.setup{justify-content:center;gap:18px;max-width:none;padding-top:76px;overflow:hidden}.backdrop{aspect-ratio:1;opacity:.26;filter:blur(1.5px);pointer-events:none;width:min(135vw,92vh);animation:1.6s both fade-in;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(closest-side,#000 55%,#0000);mask-image:radial-gradient(closest-side,#000 55%,#0000)}.backdrop .planet{width:100%;height:100%}@keyframes fade-in{0%{opacity:0}}.setup h2,.learn h2{font-family:var(--display);text-align:center;text-wrap:balance;margin:0;font-size:28px;font-weight:700}.pick{justify-items:center;gap:12px;width:100%;display:grid}.pick h3{letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0;font-size:12px;font-weight:800}.hint{min-height:2.8em;color:var(--dim);text-wrap:balance;margin:0;font-size:14px;font-weight:600;line-height:1.4}.worlds{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.world,.first{-webkit-tap-highlight-color:transparent;appearance:none;cursor:pointer;color:var(--ink);transition:transform .3s var(--spring), background .3s, box-shadow .3s;background:#96a0ff0d;border:0;border-radius:26px;align-content:center;justify-items:center;gap:6px;padding:16px 6px 14px;display:grid}.world b,.first b{font-family:var(--display);font-size:15px;font-weight:700}.world small{color:var(--dim);font-size:12px;font-weight:700}.world .orb{--s:54px;width:var(--s);height:var(--s);margin:calc((92px - var(--s)) / 2) 0;transition:transform .45s var(--spring), filter .3s, box-shadow .3s;filter:saturate(.45)brightness(.7);border-radius:50%;position:relative}.world.w0 .orb{--s:52px;background:radial-gradient(circle at 34% 30%,#fbf8ff,#b9a8ff 38%,#5a45c0 72%,#1d1450);box-shadow:0 0 22px -6px #a99bff}.world.w1 .orb{--s:66px;background:radial-gradient(circle at 34% 30%, #effcff, var(--frost) 38%, #1f5fd0 72%, #071a4a);box-shadow:0 0 26px -6px var(--frost)}.world.w2 .orb{--s:80px;background:radial-gradient(circle at 34% 30%,#fff2dc,#ff8a3a 34%,#d8261e 66%,#3a0610);box-shadow:0 0 30px -6px #ff5a2a}.world.w2 .orb:after{content:"";background:radial-gradient(closest-side,#0000 62%,#ffbe78d9 72%,#0000 100%);border-radius:50%;height:24%;position:absolute;top:38%;left:-24%;right:-24%;transform:rotate(-16deg)}.world.on,.first.on{box-shadow:0 18px 50px -18px var(--pick-glow,#8a6cffe6);background:linear-gradient(#96a0ff33,#96a0ff14);transform:translateY(-4px)}.world.on .orb{filter:none;animation:3.6s ease-in-out infinite float;transform:scale(1.12)}.world.w0.on{--pick-glow:#a99bfff2}.world.w0.on .orb{box-shadow:0 0 44px 2px #a99bffbf}.world.w1.on{--pick-glow:#62d4fff2}.world.w1.on .orb{box-shadow:0 0 50px 4px #62d4ffbf}.world.w2.on{--pick-glow:#ff5a2af2}.world.w2.on .orb{box-shadow:0 0 56px 6px #ff5a2abf}.world:not(.on) b,.first:not(.on) b{color:var(--dim)}@media (hover:hover){.world:not(.on):hover,.first:not(.on):hover{background:#96a0ff1a;transform:translateY(-2px)}.world:not(.on):hover .orb{filter:saturate(.8)brightness(.9);transform:scale(1.04)}}.world:active,.first:active{transition-duration:.1s;transform:scale(.95)}@keyframes float{50%{transform:scale(1.12)translateY(-5px)}}.firsts{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.first{gap:10px;padding:18px 12px 16px}.first.on{--pick-glow:#ff8c3cf2;background:linear-gradient(160deg,#ffa24a57,#ff6a2a24)}.pebble{background:radial-gradient(circle at 36% 30%, #fff1d8, var(--ember) 48%, var(--ember-2) 90%);width:34px;height:28px;transition:transform .4s var(--spring), filter .3s;filter:saturate(.4)brightness(.65);border-radius:50% 50% 46% 46%;margin:4px 0;box-shadow:0 0 16px #ffa24ab3}.first.on .pebble{filter:none;transform:scale(1.18);box-shadow:0 0 26px 2px #ffa24ae6}.pebble.bot{border-radius:30%}.begin{margin-top:4px;font-size:21px}.mini-orb{background:radial-gradient(circle at 34% 30%,#fff3d6,#ffa24a 32%,#6a2a9e 70%,#1a0c3e);border-radius:50%;width:92px;height:92px;margin-bottom:4px;animation:6s ease-in-out infinite bob;box-shadow:0 0 60px #ffa24a66,0 0 120px #8a6cff59}.kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0;font-size:12px;font-weight:800}.lobby .col{gap:16px}.lobby .dim{text-wrap:balance;margin:0}.codebig{justify-content:center;gap:10px;display:flex}.codebig span{font-family:var(--display);color:#fff;text-shadow:0 0 24px #c8beffcc;width:68px;height:84px;animation:pop .6s var(--spring) both;background:linear-gradient(#8a6cff66,#3b8cff2e);border-radius:22px;place-items:center;font-size:46px;font-weight:800;display:grid;box-shadow:0 16px 40px -16px #8a6cffe6,inset 0 1px #ffffff40}@keyframes pop{0%{opacity:0;transform:translateY(14px)scale(.6)}}.qr-card{background:#fff;border-radius:26px;padding:12px;box-shadow:0 0 70px #8a6cff73}.qr{width:168px;height:168px;display:block}.waiting{color:var(--dim);align-items:center;gap:12px;margin:0;font-weight:700;display:inline-flex}.waiting .dots:after{content:"…";animation:1.4s infinite blink}.orbit{background:radial-gradient(circle at 35% 30%, #e6fbff, var(--frost) 50%, var(--frost-2));width:22px;height:22px;box-shadow:0 0 14px var(--frost);border-radius:50%;position:relative}.orbit i{animation:1.8s linear infinite spin;position:absolute;inset:-9px}.orbit i:after{content:"";background:var(--ember);width:8px;height:8px;box-shadow:0 0 10px var(--ember);border-radius:50%;margin-left:-4px;position:absolute;top:0;left:50%}@keyframes spin{to{transform:rotate(1turn)}}@keyframes blink{50%{opacity:.2}}.toast{color:#ffd7f0;z-index:20;background:#2a1240;border-radius:14px;max-width:90vw;padding:12px 18px;font-weight:700;position:fixed;bottom:120px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000080}.soundchip{z-index:40;top:max(14px, env(safe-area-inset-top));cursor:pointer;color:#031629;min-height:44px;font:800 13px var(--body);background:linear-gradient(135deg, #c8f3ff, var(--frost));border:0;border-radius:999px;padding:0 16px;animation:1.8s ease-in-out infinite chip-pulse;position:fixed;right:14px;box-shadow:0 8px 26px -8px #62d4ffe6}@keyframes chip-pulse{50%{transform:scale(1.06);box-shadow:0 8px 34px -4px #62d4ff}}::view-transition-old(root){animation:.32s ease-in both vt-out}::view-transition-new(root){animation:.5s var(--spring) both vt-in}@keyframes vt-out{to{opacity:0;filter:blur(6px);transform:scale(1.06)}}@keyframes vt-in{0%{opacity:0;filter:blur(6px);transform:scale(.94)}}.planet{width:100%;height:100%;position:relative}.planet canvas{touch-action:none;cursor:grab;display:block;width:100%!important;height:100%!important}.game{grid-template-rows:auto auto 1fr auto;max-width:720px;height:100dvh;margin:0 auto;display:grid;overflow:hidden}.hud{padding:max(12px, env(safe-area-inset-top)) 16px 4px;grid-template-columns:1fr 1fr;gap:10px;display:grid}.chip{background:var(--glass);transition:box-shadow .3s, background .3s, transform .3s var(--spring);border-radius:20px;grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;padding:10px 14px 12px;display:grid;position:relative}.chip .orb{border-radius:50%;width:16px;height:16px}.chip.c0 .orb{background:radial-gradient(circle at 35% 30%, #fff1d8, var(--ember) 50%, var(--ember-2));box-shadow:0 0 12px var(--ember)}.chip.c1 .orb{background:radial-gradient(circle at 35% 30%, #e6fbff, var(--frost) 50%, var(--frost-2));box-shadow:0 0 12px var(--frost)}.chip .who{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:800;overflow:hidden}.chip .who small{color:var(--dim);font-weight:700}.chip .num{font-family:var(--display);font-size:22px;font-weight:700}.chip .meter{background:#ffffff14;border-radius:4px;grid-column:1/-1;height:4px;overflow:hidden}.chip .meter i{border-radius:4px;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1);display:block}.chip.c0 .meter i{background:linear-gradient(90deg, var(--ember-2), var(--ember))}.chip.c1 .meter i{background:linear-gradient(90deg, var(--frost-2), var(--frost))}.chip.c0.on{box-shadow:0 10px 34px -12px var(--ember);background:linear-gradient(160deg,#ffa24a52,#ff6a2a1f)}.chip.c1.on{box-shadow:0 10px 34px -12px var(--frost);background:linear-gradient(160deg,#62d4ff4d,#3b8cff1f)}.hostmenu{margin:-12px -8px -12px auto;position:relative}.hostmenu .pop{z-index:12;white-space:nowrap;background:#0c0e2cf7;position:absolute;top:100%;right:0}.roomtag{color:var(--dim);letter-spacing:.08em;text-transform:uppercase;justify-content:center;align-items:center;gap:8px;padding:2px 20px 0;font-size:12px;font-weight:700;display:flex}.game>.back.over{justify-self:center;margin-top:4px}.stage{min-height:0;position:relative}.stage .planet{position:absolute;inset:0}.goal{text-align:center;letter-spacing:.14em;text-transform:uppercase;color:#aab0e68c;pointer-events:none;margin:0;font-size:12px;font-weight:700;position:absolute;bottom:6px;left:0;right:0}.dock{padding:4px 16px max(16px, env(safe-area-inset-bottom));gap:10px;display:grid;position:relative}.status{text-align:center;color:#d6d9ff;place-items:center;min-height:44px;margin:0;font-size:15px;font-weight:700;line-height:1.4;display:grid}.actions{align-items:center;gap:10px;display:flex}.actions>.btn:last-child{flex:1}.menu{z-index:10;background:#12143cf7;border-radius:18px;justify-items:center;gap:8px;width:max-content;padding:12px;display:grid;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);box-shadow:0 20px 50px #0009}.menu .hub,.result .hub{justify-self:center}.toggles{gap:8px;display:flex}.result{text-align:center;gap:8px;width:100%;animation:.6s cubic-bezier(.2,.8,.2,1) rise;display:grid}.result h2{font-family:var(--display);margin:0;font-size:30px;font-weight:800}.result.c0 h2{color:var(--ember);text-shadow:0 0 30px #ffa24a99}.result.c1 h2{color:var(--frost);text-shadow:0 0 30px #62d4ff99}.result p{color:var(--dim);margin:0;font-weight:700}.result .row .btn{flex:1}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}.learn{max-width:none;height:100dvh;padding:0;overflow:hidden}.learn.overlay{z-index:30;background:radial-gradient(60% 40% at 15% 10%, #8a6cff38, transparent 70%), var(--bg);margin:0;position:fixed;inset:0}.learn-step{top:max(24px, env(safe-area-inset-top));text-align:center;color:var(--dim);letter-spacing:.14em;pointer-events:none;margin:0;font-size:13px;font-weight:800;position:absolute;left:0;right:0}.help{min-width:44px;padding:0;font-size:18px}.learn-planet{position:absolute;inset:0 0 34%}.learn-score{top:max(18px, env(safe-area-inset-top));font-family:var(--display);gap:14px;font-size:20px;font-weight:700;display:flex;position:absolute;right:18px}.learn-score .c0{color:var(--ember)}.learn-score .c1{color:var(--frost)}.caption{text-align:center;max-width:520px;min-height:120px;margin:0 auto;position:absolute;bottom:calc(34% - 150px);left:16px;right:16px}.caption.anim{animation:.7s cubic-bezier(.2,.8,.2,1) rise}.caption .say{font-family:var(--display);text-wrap:balance;margin:0;font-size:22px;font-weight:700;line-height:1.3}.caption .sub{color:var(--dim);text-wrap:balance;margin:10px 0 0;font-size:16px;font-weight:600}.learn-bar{left:16px;right:16px;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 76px);background:#ffffff14;border-radius:4px;max-width:520px;height:4px;margin:0 auto;position:absolute}.learn-bar i{background:linear-gradient(90deg, var(--ember), var(--violet), var(--frost));border-radius:4px;height:100%;display:block}.learn-actions{left:16px;right:16px;bottom:max(20px, env(safe-area-inset-bottom));gap:10px;max-width:520px;margin:0 auto;display:flex;position:absolute}.learn-actions .btn{flex:1}@media (width>=900px){.game{grid-template-rows:auto 1fr auto;grid-template-columns:1fr 360px;max-width:1100px}.hud{grid-area:1/2;grid-template-columns:1fr;padding-top:32px}.roomtag,.game>.back.over{grid-area:2/2;align-self:start}.stage{grid-area:1/1/-1}.dock{grid-area:3/2;padding-bottom:32px}.hero-planet{width:min(64vh,640px);top:2vh}.home .col{max-width:560px}.play-pair{grid-template-columns:1fr 1fr}.setup{padding-top:40px}.worlds .world{padding:20px 8px 18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
