:root{--bg: #0e1020;--panel: #181b33;--panel2: #222645;--text: #f2f4ff;--muted: #9aa0c8;--accent: #7c5cff;--accent2: #22d3a6;--danger: #ff5d73;--warn: #ffb020;--radius: 16px;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--text)}body{font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100dvh;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}h1,h2,p{margin:0}h1{font-size:2rem;letter-spacing:-.02em}h2{font-size:1.3rem}.muted{color:var(--muted)}.grow{flex:1;min-width:0}.center-text{text-align:center}.screen{min-height:100dvh;max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px}.screen.center{align-items:center;justify-content:center;text-align:center}.center{display:flex;align-items:center;justify-content:center;flex:1}.row{display:flex;gap:10px}input{width:100%;min-height:52px;padding:0 14px;border-radius:14px;border:2px solid var(--panel2);background:var(--bg);color:var(--text);font-size:16px;-webkit-user-select:text;user-select:text}input:focus{outline:none;border-color:var(--accent)}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}.code-input{text-align:center;font-size:1.4rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase}.btn{min-height:52px;padding:0 20px;border:0;border-radius:14px;font-size:1rem;font-weight:700;color:var(--text);background:var(--panel2);cursor:pointer;width:100%}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent)}.btn.accent{background:var(--accent2);color:#04241c;width:auto;min-width:96px}.btn.ghost{background:transparent;color:var(--muted)}.btn.small{min-height:40px;width:auto;padding:0 14px;font-size:.9rem}.panel{background:var(--panel);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}.quick{margin-top:6px}.hero{padding:12px 0 4px}.section-title{margin-top:8px}.games{list-style:none;margin:0;padding:0;display:grid;gap:12px}@media (min-width: 640px){.games{grid-template-columns:1fr 1fr}.screen{max-width:720px}}.game-card{width:100%;display:flex;gap:14px;text-align:left;align-items:flex-start;background:var(--panel);border:2px solid transparent;border-radius:var(--radius);padding:16px;color:inherit;font:inherit;cursor:pointer;min-height:88px}.game-card:active{border-color:var(--accent)}.game-card .meta{display:flex;flex-direction:column;gap:4px}.icon{font-size:2rem;line-height:1}.icon.big{font-size:2.6rem}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.tag{background:var(--panel2);color:var(--muted);border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:600}.tag.warn{background:#3a2c10;color:var(--warn)}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-end;justify-content:center;z-index:20}.sheet{width:100%;max-width:560px;background:var(--panel);border-radius:24px 24px 0 0;padding:20px 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:up .2s ease-out}.sheet-head{display:flex;gap:14px;align-items:center}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--panel2)}@keyframes up{0%{transform:translateY(40px);opacity:0}}.room-bar{display:flex;align-items:center;gap:12px}.room-bar .grow{display:flex;flex-direction:column}.code-chip{background:var(--accent);color:#fff;border:0;border-radius:14px;padding:6px 14px;display:flex;flex-direction:column;align-items:center;cursor:pointer}.code-chip small{font-size:.6rem;letter-spacing:.15em;opacity:.8}.code-chip strong{font-size:1.4rem;letter-spacing:.15em;line-height:1.1}.lobby,.stage{display:flex;flex-direction:column;gap:14px;flex:1}.players,.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.players li,.board li{display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:14px;padding:10px 14px}.players li.offline{opacity:.55}.board li.me{outline:2px solid var(--accent)}.avatar{width:36px;height:36px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:700}.footer-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:8px}.conn-banner{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--warn);color:#2a1c00;padding:max(8px,env(safe-area-inset-top)) 12px 8px;text-align:center;font-weight:700;font-size:.9rem;display:flex;gap:8px;align-items:center;justify-content:center}.conn-banner .dot{width:10px;height:10px;border-radius:50%;background:#2a1c00;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.2}}.toast{position:fixed;left:16px;right:16px;bottom:max(20px,env(safe-area-inset-bottom));z-index:60;max-width:520px;margin:0 auto;padding:14px 16px;border-radius:14px;background:var(--panel2);font-weight:600;text-align:center;box-shadow:0 8px 30px #00000080}.toast.error{background:var(--danger);color:#fff}.spinner{width:36px;height:36px;border-radius:50%;border:4px solid var(--panel2);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}