:root{--bg: #14161a;--panel: #1d2026;--panel2: #272b33;--ink: #eef0f4;--mute: #98a1b1;--line: #343944;--accent: #7cc4a5;--accent-ink: #0d1a14;--danger: #e5645b;--good: #5fcf8a;--r: 14px;--font: "Avenir Next", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;--display: var(--font)}[data-game=chess]{--bg: #12171a;--panel: #1a2125;--panel2: #232c31;--accent: #d9b35f;--accent-ink: #231a05;--display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif}[data-game=checkers]{--bg: #1b1110;--panel: #271817;--panel2: #332120;--line: #4a3230;--accent: #ef5b4c;--accent-ink: #2a0a07;--display: "Rockwell", "Cooper Black", "Avenir Next", system-ui, sans-serif}[data-game=snakes]{--bg: #0f1d17;--panel: #16291f;--panel2: #1e3629;--line: #2c4a39;--accent: #f2c94c;--accent-ink: #2a2105;--display: "Avenir Next Rounded", "Trebuchet MS", "Nunito", system-ui, sans-serif}[data-game=ludo]{--bg: #17131f;--panel: #211b2c;--panel2: #2c2439;--line: #3d3350;--accent: #ffb547;--accent-ink: #2d1c02;--display: "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif}[data-game=monopoly]{--bg: #0f1a17;--panel: #16251f;--panel2: #1e3329;--line: #2d4a3d;--accent: #f0c24b;--accent-ink: #2a2005;--display: "Gill Sans", "Trebuchet MS", "Avenir Next", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.4 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}#app{height:100%;display:flex;flex-direction:column}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.01em}.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:10px 20px;font-weight:700;transition:transform .08s,filter .15s}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.small{padding:6px 12px;font-size:13px}.btn.big{padding:14px 34px;font-size:17px}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover:not(:disabled){background:var(--panel2)}.btn.danger{background:var(--danger);color:#fff}.icon-btn{background:transparent;border:1px solid var(--line);border-radius:10px;width:34px;height:34px}.chip{background:var(--panel2);border-radius:999px;padding:4px 10px;font-size:13px;color:var(--mute);white-space:nowrap}.sel{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font:inherit;font-size:13px}.avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--panel2);overflow:hidden;flex:none;font-weight:700;color:var(--mute);border:2px solid rgba(255,255,255,.08)}.avatar img{width:100%;height:100%;object-fit:cover}.tag{margin-left:6px;font-size:11px;background:var(--panel2);color:var(--mute);border-radius:6px;padding:1px 6px;font-weight:600}.tag.host{color:var(--accent)}.top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;min-height:52px}.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px}.brand-icon{font-size:22px}.top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.stage{flex:1;min-height:0;padding:0 16px 16px}.lobby{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:16px}.lobby-card{width:min(760px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 80px #00000059}.lobby-hero{display:flex;gap:18px;align-items:center;margin-bottom:22px}.lobby-hero h1{font-size:34px}.lobby-hero p{margin:4px 0 0;color:var(--mute);max-width:46ch}.lobby-icon{font-size:54px;width:84px;height:84px;display:grid;place-items:center;background:var(--panel2);border-radius:22px;flex:none}.seats{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.seats.n6{grid-template-columns:repeat(3,minmax(0,1fr))}.seat{background:var(--panel2);border-radius:16px;padding:14px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;border:1px solid transparent}.seat.you{border-color:var(--accent)}.seat.empty{background:transparent;border:1.5px dashed var(--line)}.seat-label{font-size:13px;color:var(--mute);font-weight:600}.seat-who{display:flex;align-items:center;gap:10px}.seat-name{font-weight:700;word-break:break-word}.seat-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.opts{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}.opt{display:flex;gap:10px;align-items:center;color:var(--mute)}.lobby-foot{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.wait,.hint{color:var(--mute)}.result{position:fixed;top:0;right:0;bottom:0;left:0;background:#0506089e;display:grid;place-items:center;z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .25s}.result-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:30px 38px;text-align:center;max-width:min(420px,92vw);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}.result-card.win{border-color:var(--accent);box-shadow:0 0 60px color-mix(in srgb,var(--accent) 35%,transparent)}.result-emoji{font-size:54px}.result-card h2{font-size:30px;margin:6px 0}.result-card p{color:var(--mute);margin:0 0 14px}.result-av{display:flex;gap:8px;justify-content:center;margin-bottom:16px}.result-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}.toasts{position:fixed;left:50%;bottom:18px;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:80;pointer-events:none}.toast{background:#000d;color:#fff;padding:9px 16px;border-radius:999px;font-size:14px;animation:rise .25s;max-width:90vw}.toast.bad{background:#8d2b25ee}.toast.out{opacity:0;transition:opacity .4s}.banner{position:fixed;top:0;left:0;right:0;background:var(--danger);color:#fff;text-align:center;padding:6px;z-index:90;font-weight:600}.splash{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;gap:12px;background:var(--bg);z-index:100}.splash-icon{font-size:64px;animation:bob 1.2s infinite ease-in-out}.splash.err .splash-text{color:var(--danger)}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{transform:scale(.85);opacity:0}}@keyframes rise{0%{transform:translateY(10px);opacity:0}}@keyframes bob{50%{transform:translateY(-8px)}}.game{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);gap:16px}.board-wrap{container-type:size;min-height:0;display:grid;place-items:center}.board-box{width:min(100cqw,100cqh);height:min(100cqw,100cqh);position:relative}.panel{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}.pcard{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;transition:border-color .2s,box-shadow .2s}.pcard.turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px #0000004d}.pcard .pname{font-weight:700;line-height:1.1}.pcard .psub{font-size:12px;color:var(--mute)}.pcard .grow{flex:1;min-width:0}.pcard.off{opacity:.55}.log{font-size:13px;color:var(--mute);display:flex;flex-direction:column;gap:4px}.log div:last-child{color:var(--ink)}.btnrow{display:flex;gap:8px;flex-wrap:wrap}@media (max-aspect-ratio: 1/1),(max-width: 700px){html,body{overflow:auto}#app{height:auto;min-height:100%}.stage{padding:0 10px 12px}.game{grid-template-columns:1fr;height:auto}.board-wrap{container-type:inline-size}.board-box{width:100cqw;height:100cqw}.panel{overflow:visible}.lobby-hero h1{font-size:26px}.seats,.seats.n6{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}.dice{display:flex;gap:14px;justify-content:center}.die{width:84px;height:84px;background:linear-gradient(145deg,#fffdf4,#e5dcc0);border-radius:18px;box-shadow:0 6px #b9ad88,0 12px 20px #0006;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);padding:12px}.die.sm{width:56px;height:56px;border-radius:13px;padding:8px;box-shadow:0 4px #b9ad88,0 8px 14px #0006}.die i{width:15px;height:15px;border-radius:50%;background:#20242b;place-self:center;opacity:0}.die.sm i{width:10px;height:10px}.die i.on{opacity:1}.die.roll{animation:tumble .6s ease-in-out}@keyframes tumble{0%{transform:rotate(0) scale(1)}30%{transform:rotate(140deg) scale(1.15) translateY(-12px)}60%{transform:rotate(300deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}