:root{color-scheme:dark;--bg: #0b0b14;--card: #15152a;--line: rgba(255, 255, 255, .1);--text: #f1f0ff;--muted: #9c9ab8;--accent: #9d8cff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;min-height:100dvh;background:var(--bg);overscroll-behavior:none}body{user-select:none;-webkit-user-select:none;touch-action:manipulation}[hidden]{display:none!important}.muted{color:var(--muted)}#app{min-height:100dvh}.screen{min-height:100dvh;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));gap:12px}.screen.center{align-items:center;justify-content:center;text-align:center}.big-ico{font-size:56px}.btn{font:inherit;font-weight:700;font-size:16px;padding:12px 18px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;transition:transform .1s,opacity .2s}.btn:active{transform:scale(.97)}.btn.primary{background:var(--me, var(--accent));border-color:transparent;color:#0b0b14}.btn.big{padding:16px;font-size:18px;width:100%}.btn.ghost{background:transparent}.btn.small{padding:8px 12px;font-size:14px}.btn:disabled{opacity:.35}.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:800;font-size:16px}.join{justify-content:center;max-width:420px;margin:0 auto;width:100%}.brand{font-size:34px;font-weight:900;text-align:center;background:linear-gradient(90deg,#c4b5ff,#6fa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.join p{text-align:center;margin:0 0 8px}.join label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.join input{font:inherit;font-size:20px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text)}.join .code-input{font-size:34px;letter-spacing:.4em;text-align:center;text-transform:uppercase;font-weight:800}.error{color:#ff6b81}.bar{display:flex;align-items:center;justify-content:space-between;gap:8px}.bar .me{display:flex;align-items:center;gap:8px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dot{width:12px;height:12px;border-radius:50%;background:var(--me, var(--c, var(--accent)));box-shadow:0 0 10px var(--me, var(--c, var(--accent)));flex:none}.bar .room{letter-spacing:.2em;font-weight:800;color:var(--muted)}.bar .title{font-weight:700;color:var(--muted);font-size:14px;white-space:nowrap}.roster{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);font-size:14px}.chip .dot{background:var(--c);box-shadow:0 0 8px var(--c)}.chip.off{opacity:.4}.lobby h2{margin:6px 0 0;font-size:20px}.game-list{display:flex;flex-direction:column;gap:8px;padding-bottom:12px}.gm{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:16px;border:1px solid var(--line);color:var(--text);font:inherit;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 22%,transparent),var(--card))}.gm .icon{font-size:30px;width:40px;text-align:center}.gm .txt{flex:1;display:flex;flex-direction:column}.gm small{color:var(--muted);font-size:12px}.gm .go{font-weight:800;font-size:13px;padding:6px 10px;border-radius:999px;background:var(--accent);color:#0b0b14;white-space:nowrap}.gm.picked{outline:2px solid var(--accent)}.gm.choice{padding:14px}.gm.choice small{font-size:13px;margin-top:2px}.pick-head{display:flex;align-items:center;gap:10px;margin:4px 0;font-size:20px}.wait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.game.screen,.screen.game{gap:10px;transition:box-shadow .3s}.screen.game.active{box-shadow:inset 0 0 0 3px var(--me),inset 0 0 40px color-mix(in srgb,var(--me) 35%,transparent)}.turn{text-align:center;font-size:22px;font-weight:800;padding:6px;border-radius:12px;color:var(--muted)}.screen.game.active .turn{color:var(--me);animation:pulse 1.6s ease-in-out infinite}.ctrl{flex:1;display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-content:center;min-height:0}.foot{display:flex;justify-content:center}.foot:empty{display:none}.rules{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:18px;max-width:92vw}.rules::backdrop{background:#0009}.rules li{margin:6px 0}.result-sheet{position:fixed;left:0;right:0;bottom:0;padding:22px 16px max(22px,env(safe-area-inset-bottom));text-align:center;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-radius:24px 24px 0 0;animation:up .4s cubic-bezier(.2,.9,.3,1.2) both;z-index:5}.result-sheet h2{margin:6px 0;font-size:28px}.row{display:flex;gap:8px;justify-content:center;margin-top:12px}.row .btn{flex:1;max-width:200px}.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);aspect-ratio:var(--cols) / var(--rows);width:min(100%,calc((100dvh - 250px) * var(--cols) / var(--rows)));margin:0 auto;gap:2px;padding:6px;border-radius:14px;background:#1e1a2e;touch-action:manipulation}.cell{position:relative;border:0;padding:0;margin:0;background:#ffffff0a;border-radius:4px;display:grid;place-items:center;color:var(--text);font:inherit;min-width:0;min-height:0}.cell.hint:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:var(--me);opacity:.7;box-shadow:0 0 10px var(--me)}.cell.sel{outline:3px solid var(--me);outline-offset:-3px;z-index:1}.cell.last{box-shadow:inset 0 0 0 2px #ffffff59}.cell.win{animation:pulse 1s ease-in-out infinite}.pc{width:80%;height:80%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 45%),var(--pc);box-shadow:inset 0 -3px 6px #0006,0 2px 4px #0006}.pc.king:after{content:"♛";display:grid;place-items:center;height:100%;font-size:.9em;color:#ffd23f;text-shadow:0 0 4px #000}.pc.ghost{opacity:.45}.action{margin-top:4px}.hint-text{text-align:center;color:var(--muted);font-size:14px;margin:0;min-height:1.2em}.seg{display:flex;gap:6px;justify-content:center}.seg .btn{flex:1}.banner{position:fixed;top:0;left:0;right:0;padding:8px;text-align:center;background:#ff9f43;color:#0b0b14;font-weight:700;z-index:10}.toast{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;top:18%;padding:10px 18px;border-radius:999px;background:#ff6b81;color:#0b0b14;font-weight:700;z-index:20;animation:up .3s both}.spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes pulse{50%{opacity:.6}}@keyframes up{0%{transform:translateY(40px);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}