:root{--bg: #05060b;--panel: rgba(14, 14, 28, .62);--line: rgba(255, 255, 255, .09);--text: #f1f0ff;--muted: #9c9ab8;--accent: #9d8cff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block}#ui{position:fixed;inset:0;pointer-events:none;font-size:clamp(13px,1.05vw,22px)}#ui button,#ui .panel{pointer-events:auto}[hidden]{display:none!important}.muted{color:var(--muted)}.small{font-size:.8em}kbd{border:1px solid var(--line);border-radius:4px;padding:0 .35em;font-family:inherit}.panel{background:var(--panel);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--line);border-radius:1.4em;box-shadow:0 1.5em 4em #00000073}.lobby{position:absolute;inset:0;display:flex;justify-content:space-between;padding:2.2vw;gap:2vw}.lobby .join{width:clamp(260px,23vw,460px);padding:1.6em;display:flex;flex-direction:column;align-items:center;gap:.6em;align-self:flex-start;animation:slideIn .7s cubic-bezier(.2,.8,.2,1) both}.brand{font-size:1.6em;font-weight:800;letter-spacing:.02em;background:linear-gradient(90deg,#c4b5ff,#6fa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.brand .logo{-webkit-text-fill-color:#9d8cff}.qr{width:78%;aspect-ratio:1;background:#fff;border-radius:.8em;padding:.5em;box-shadow:0 0 0 .25em #9d8cff59,0 0 3em #9d8cff59}.qr svg{width:100%;height:100%;display:block}.url{font-size:.85em;color:var(--muted);word-break:break-all;text-align:center}.code-label{margin-top:.4em;font-size:.75em;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}.code{display:flex;gap:.25em}.code span{font-size:2.6em;font-weight:900;width:1.25em;text-align:center;padding:.08em 0;border-radius:.2em;background:linear-gradient(180deg,#9d8cff40,#9d8cff0f);border:1px solid rgba(157,140,255,.4);text-shadow:0 0 .5em rgba(157,140,255,.8)}.players{width:100%;display:flex;flex-wrap:wrap;gap:.4em;justify-content:center;margin-top:.6em}.player{display:flex;align-items:center;gap:.4em;padding:.3em .75em;border-radius:999px;background:#ffffff0f;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);animation:pop .4s cubic-bezier(.2,1.6,.4,1) both}.player .dot{width:.7em;height:.7em;border-radius:50%;background:var(--c);box-shadow:0 0 .6em var(--c)}.player.off{opacity:.4}.crown{color:#ffd23f}.waiting{animation:breathe 2s ease-in-out infinite}.hint{font-size:.85em;color:var(--muted);text-align:center}.library{width:clamp(320px,34vw,720px);padding:1.4em;align-self:stretch;overflow:auto;animation:slideIn .7s .1s cubic-bezier(.2,.8,.2,1) both}.library h2{margin:0 0 .2em;font-size:1.3em}.library>p{margin:0 0 1em;font-size:.85em}.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(11em,1fr));gap:.7em}.game-card{position:relative;text-align:left;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:.6em;padding:.8em;border-radius:1em;border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,transparent),#ffffff05);transition:transform .2s,box-shadow .2s,border-color .2s}.game-card:hover,.game-card:focus-visible{transform:translateY(-3px) scale(1.02);border-color:var(--accent);box-shadow:0 .6em 2em color-mix(in srgb,var(--accent) 40%,transparent);outline:none}.game-card:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}.game-card .icon{grid-row:1 / 4;font-size:1.9em;align-self:center;filter:drop-shadow(0 0 .3em var(--accent))}.game-card .name{font-weight:700}.game-card .tag{font-size:.75em;color:var(--muted)}.game-card .players-req{font-size:.7em;color:var(--accent);margin-top:.2em}.game-card.needs-cpu .players-req:after{content:" · vs CPU";color:var(--muted)}.variant{animation:slideIn .35s cubic-bezier(.2,.8,.2,1) both}.variant h3{margin:.6em 0 .8em;font-size:1.15em;display:flex;align-items:center;gap:.4em}.variant h3 .icon{filter:drop-shadow(0 0 .3em var(--accent))}.variant .choices{display:flex;flex-direction:column;gap:.6em}.variant .choice{display:flex;flex-direction:column;gap:.2em;text-align:left;padding:.8em 1em;border-radius:1em;border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,transparent),#ffffff05);transition:transform .2s,border-color .2s}.variant .choice:hover,.variant .choice:focus-visible{transform:translate(4px);border-color:var(--accent);outline:none}.variant .choice small{color:var(--muted);font-size:.8em}.corner{position:absolute;left:2.2vw;bottom:2vw;display:flex;gap:.5em}.ghost{font:inherit;font-size:.8em;color:var(--muted);background:#ffffff0d;border:1px solid var(--line);border-radius:999px;padding:.45em 1em;cursor:pointer}.ghost:hover{color:var(--text);border-color:var(--accent)}.hud{position:absolute;inset:0}.hud-top{position:absolute;top:1.4vw;left:1.6vw;right:1.6vw;display:flex;align-items:flex-start;justify-content:space-between;gap:1em}.game-title{font-weight:800;font-size:1.15em;display:flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px)}.room-chip{padding:.5em .9em;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted);backdrop-filter:blur(10px)}.room-chip b{color:var(--text);letter-spacing:.15em}.seats{display:flex;align-items:center;gap:.8em;flex-wrap:wrap;justify-content:center}.vs{color:var(--muted);font-weight:700;font-size:.8em}.seat{display:flex;align-items:center;gap:.6em;padding:.45em 1em .45em .5em;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);transition:all .35s}.seat .piece{width:1.6em;height:1.6em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--c);box-shadow:inset 0 -.2em .3em #0006}.seat .who{display:flex;flex-direction:column;line-height:1.15}.seat small{color:var(--muted);font-size:.72em}.seat .score{font-weight:900;font-size:1.4em;min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums}.seat.active{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 2em color-mix(in srgb,var(--c) 55%,transparent);transform:scale(1.06)}.seat.off{opacity:.5}.status{position:absolute;bottom:2.2vw;left:50%;transform:translate(-50%);padding:.7em 1.6em;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:1.15em;font-weight:600;white-space:nowrap}.status:empty{display:none}.status.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}.result{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.55));animation:fade .6s both}.result-card{text-align:center;padding:2em 3.5em;border-radius:1.6em;background:var(--panel);border:1px solid var(--c);box-shadow:0 0 4em color-mix(in srgb,var(--c) 45%,transparent);backdrop-filter:blur(16px);animation:pop .7s .2s cubic-bezier(.2,1.6,.4,1) both}.result-card h1{margin:.1em 0;font-size:3em;color:var(--c);text-shadow:0 0 .5em color-mix(in srgb,var(--c) 70%,transparent)}.result-card .trophy{font-size:3.5em;animation:float 3s ease-in-out infinite}.result-card p{margin:.4em 0}.toasts{position:absolute;top:5.5em;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:.4em;align-items:center}.toast{padding:.55em 1.2em;border-radius:999px;background:var(--panel);border:1px solid var(--c);backdrop-filter:blur(10px);animation:pop .35s cubic-bezier(.2,1.6,.4,1) both;transition:opacity .4s,transform .4s}.toast.out{opacity:0;transform:translateY(-.6em)}.conn{position:absolute;right:1.2em;bottom:1em;font-size:.8em;color:var(--muted)}.conn.closed{color:#ff6b81}.loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1em;background:#05060b80;font-weight:600}.spinner{width:3em;height:3em;border-radius:50%;border:.3em solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}.fatal{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:2em;pointer-events:auto}@keyframes slideIn{0%{opacity:0;transform:translateY(1.5em)}}@keyframes pop{0%{opacity:0;transform:scale(.6)}}@keyframes fade{0%{opacity:0}}@keyframes bump{0%{transform:translate(-50%) scale(.85)}to{transform:translate(-50%) scale(1)}}@keyframes breathe{50%{opacity:.4}}@keyframes float{50%{transform:translateY(-.15em) rotate(-4deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}