@import"https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--bg-primary: #0f1117;--bg-secondary: #181b25;--bg-card: #1e2130;--bg-card-hover: #262a3a;--text-primary: #e8eaf0;--text-secondary: #9498a8;--text-muted: #8589a0;--border: rgba(255, 255, 255, .06);--border-solid: #2d3748;--accent-1: #6c5ce7;--accent-1-light: #a29bfe;--accent-2: #00cec9;--accent-3: #0984e3;--gradient: linear-gradient(135deg, #6c5ce7, #00cec9);--gradient-subtle: linear-gradient(135deg, rgba(108,92,231,.15), rgba(0,206,201,.15));--shadow-card: 0 4px 24px rgba(0,0,0,.3);--shadow-card-hover: 0 12px 40px rgba(0,0,0,.45);--success: #00b894;--danger: #e74c3c;--warning: #fdcb6e;--radius: 16px;--radius-sm: 8px;--radius-pill: 100px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:Inter,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}::selection{background:var(--accent-1);color:#fff}h1,h2,h3,h4{font-family:Sora,sans-serif;font-weight:700;line-height:1.2}.game-app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1rem}.game-header{width:100%;max-width:500px;display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;margin-bottom:1rem}.game-header h1{font-size:1.6rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.back-link{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-decoration:none;padding:.4rem .8rem;border-radius:var(--radius-pill);border:1px solid var(--border);transition:all .2s ease}.back-link:hover{color:var(--accent-2);border-color:var(--accent-2)}.score-bar{display:flex;gap:.8rem;margin-bottom:1rem}.score-box{text-align:center;padding:.6rem 1.2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}.score-box .label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);display:block}.score-box .value{font-family:Sora,sans-serif;font-size:1.4rem;font-weight:800;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.score-box.active-turn{border-color:var(--accent-1);box-shadow:0 0 8px #6c5ce74d}.btn{font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;padding:.6rem 1.4rem;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:all .2s ease;touch-action:manipulation}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 4px 16px #6c5ce74d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #6c5ce766}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){border-color:var(--accent-1)}.btn-text{background:none;color:var(--text-secondary);padding:.5rem .8rem}.btn-text:hover{color:var(--text-primary)}input[type=text]{width:100%;padding:.75rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border-solid);background:var(--bg-card);color:var(--text-primary);font-size:1rem;font-family:inherit;outline:none;transition:border-color .2s}input[type=text]:focus{border-color:var(--accent-1)}input[type=text]::placeholder{color:var(--text-muted)}.hint-text{margin-top:1rem;font-size:.75rem;color:var(--text-muted);text-align:center}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0f1117d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}.game-over-card{text-align:center;padding:2.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card-hover);max-width:360px;width:90%;animation:scaleIn .3s ease}.game-over-card h2{font-size:1.8rem;margin-bottom:.5rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-over-card p{color:var(--text-secondary);margin-bottom:1.5rem}.game-over-card .actions{display:flex;gap:.6rem;justify-content:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{transform:scale(0)}60%{transform:scale(1.15)}to{transform:scale(1)}}.rules-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-family:Sora,sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.rules-btn:hover{border-color:var(--accent-1);color:var(--accent-1)}.rules-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0f1117d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease;padding:1rem}.rules-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card-hover);max-width:420px;width:100%;max-height:80vh;overflow-y:auto;animation:scaleIn .3s ease;padding:2rem}.rules-card h2{font-family:Sora,sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:1rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.rules-card h3{font-family:Sora,sans-serif;font-size:.9rem;font-weight:700;color:var(--accent-1);margin-top:1rem;margin-bottom:.4rem}.rules-card p,.rules-card li{font-size:.82rem;color:var(--text-secondary);line-height:1.6}.rules-card ul{padding-left:1.2rem;margin:.3rem 0}.rules-card li{margin-bottom:.25rem}.rules-close{margin-top:1.2rem;display:flex;justify-content:center}@media (max-width: 480px){.game-header h1{font-size:1.3rem}.score-box .value{font-size:1.1rem}.room-code{font-size:2rem}}@supports (padding-top: env(safe-area-inset-top)){.game-app{padding-top:calc(1rem + env(safe-area-inset-top));padding-bottom:calc(1rem + env(safe-area-inset-bottom))}}.home-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.divider{display:flex;align-items:center;gap:.8rem;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border-solid)}.join-link-info{text-align:center;color:var(--text-secondary);font-size:.95rem}.join-link-info strong{color:var(--accent-1-light);letter-spacing:.15em}.lobby-section{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.lobby-section h2{font-family:Sora,sans-serif;font-size:1.5rem;font-weight:700}.room-code-section{display:flex;flex-direction:column;align-items:center;gap:8px}.room-code{font-family:Sora,sans-serif;font-size:2.5rem;font-weight:800;letter-spacing:.4em;color:var(--accent-2);cursor:pointer;padding:8px 16px;border-radius:var(--radius);background:var(--bg-card);transition:background .2s}.room-code:hover{background:var(--bg-card-hover)}.room-code-actions{display:flex;gap:8px}.btn-small{padding:8px 16px;font-size:.85rem;border-radius:var(--radius-pill);background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;transition:all .2s ease}.btn-small:hover{border-color:var(--accent-1)}.label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-weight:600}.info-text{color:var(--text-secondary);text-align:center;font-size:.95rem}.players-section{width:100%;display:flex;flex-direction:column;gap:8px;align-items:center}.player-tag{padding:10px 20px;background:var(--bg-card);border-radius:var(--radius-sm);font-weight:600;width:100%;max-width:280px;text-align:center}.player-tag.waiting{color:var(--text-secondary);border:2px dashed var(--border-solid);background:transparent}.error-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-pill);font-size:.85rem;z-index:100;cursor:pointer;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(1rem)}to{opacity:1;transform:translate(-50%) translateY(0)}}.game-actions{display:flex;gap:.8rem;margin-top:1rem}.board-2048{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px;padding:8px;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border);width:min(90vw,400px);aspect-ratio:1;position:relative}.cell-bg{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}.tile-2048{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-family:Sora,sans-serif;font-weight:800;color:#fff;-webkit-user-select:none;user-select:none;z-index:1;box-shadow:0 2px 8px #0000004d}.tile-moving{animation:tileSlide .12s ease-out}@keyframes tileSlide{0%{transform:translate(calc(var(--from-col) * (100% + 8px)),calc(var(--from-row) * (100% + 8px)))}to{transform:translate(0)}}.tile-new{animation:tileAppear .15s ease .08s both}@keyframes tileAppear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.tile-merged{animation:tileMerge .2s ease}@keyframes tileMerge{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}