:root{--bg-cosmic:#070913;--card-bg:#12182bbf;--card-border:#6366f140;--board-bg:#0f1425d9;--cell-bg:#1e294573;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-cyan:#38bdf8;--accent-purple:#a855f7;--accent-pink:#ec4899;--board-size:min(460px, 92vw);--grid-gap:clamp(8px, 2.2vw, 14px);--tile-size:calc((var(--board-size) - (var(--grid-gap) * 5)) / 4)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--bg-cosmic);color:var(--text-primary);background-image:radial-gradient(80% 50% at 50% -20%,#6366f140,#0000),radial-gradient(circle at 10% 80%,#a855f726,#0000 40%),radial-gradient(circle at 90% 85%,#38bdf81f,#0000 40%);background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;display:flex;overflow-x:hidden}.background-stars-canvas{pointer-events:none;z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0}.app-container{z-index:1;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:520px;padding:24px 16px;display:flex;position:relative}.game-header{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.brand-container{align-items:center;gap:12px;display:flex}.logo-badge{background:linear-gradient(135deg,#6366f14d,#a855f74d);border:1px solid #a855f766;border-radius:16px;justify-content:center;align-items:center;width:52px;height:52px;font-size:26px;animation:4s ease-in-out infinite alternate float-pulse;display:flex;box-shadow:0 0 20px #a855f740}@keyframes float-pulse{0%{transform:translateY(0)scale(1);box-shadow:0 0 16px #a855f733}to{transform:translateY(-4px)scale(1.02);box-shadow:0 0 24px #a855f773}}.title-group{flex-direction:column;display:flex}.title-row{align-items:center;gap:10px;display:flex}.save-status-badge{letter-spacing:.3px;-webkit-user-select:none;user-select:none;border-radius:9999px;align-items:center;gap:5px;padding:3px 8px;font-size:.68rem;font-weight:600;transition:all .3s;display:inline-flex}.save-status-badge .status-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.save-status-badge.status-saved{color:#4ade80;background:#22c55e1f;border:1px solid #22c55e59}.save-status-badge.status-saved .status-dot{background-color:#22c55e;box-shadow:0 0 8px #22c55ecc}.save-status-badge.status-unsaved{color:#facc15;background:#eab3081f;border:1px solid #eab30859}.save-status-badge.status-unsaved .status-dot{background-color:#eab308;animation:1.2s ease-in-out infinite pulse-dot;box-shadow:0 0 8px #eab308cc}@keyframes pulse-dot{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.game-title{letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#c7d2fe,#e9d5ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Space Grotesk,sans-serif;font-size:2.1rem;font-weight:700;line-height:1.1}.game-subtitle{color:var(--text-secondary);letter-spacing:.2px;margin-top:2px;font-size:.82rem}.score-board{gap:10px;display:flex}.score-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--card-border);text-align:center;border-radius:12px;flex-direction:column;min-width:78px;padding:8px 14px;transition:transform .15s,box-shadow .15s;display:flex}.score-card:hover{border-color:#93c5fd80;transform:translateY(-2px)}.score-label{letter-spacing:1px;color:var(--accent-cyan);font-size:.65rem;font-weight:700}.score-card.best .score-label{color:var(--accent-pink)}.score-value{color:#fff;margin-top:2px;font-family:Space Grotesk,monospace;font-size:1.25rem;font-weight:700}.controls-container{justify-content:space-between;align-items:center;width:100%;display:flex}.utility-buttons{gap:8px;display:flex}.game-btn{background:var(--card-bg);color:var(--text-primary);border:1px solid var(--card-border);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 12px #00000040}.game-btn.primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:#a78bfa66}.game-btn.primary:hover{background:linear-gradient(135deg,#6366f1,#8b5cf6);transform:translateY(-1px);box-shadow:0 0 16px #7c3aed80}.game-btn.secondary:hover:not(:disabled){background:#312e8199;border-color:#818cf880;transform:translateY(-1px)}.game-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.game-btn.icon-only{padding:8px 12px;font-size:1.05rem}.game-btn.active-glow{background:linear-gradient(135deg,#ec489966,#a855f780);border-color:#f472b699;animation:2.8s ease-in-out infinite alternate vapor-pulse;box-shadow:0 0 14px #ec489980,inset 0 1px 1px #ffffff4d}@keyframes vapor-pulse{0%{box-shadow:0 0 10px #ec489966}to{box-shadow:0 0 20px #a855f7b3}}.game-board-wrapper{width:var(--board-size);height:var(--board-size);position:relative}.game-board{background:var(--board-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:100%;height:100%;padding:var(--grid-gap);touch-action:none;border:1px solid #8b5cf64d;border-radius:18px;outline:none;position:relative;box-shadow:0 12px 36px #0006,0 0 30px #6366f126,inset 0 1px 2px #ffffff1a}.grid-cells-container{gap:var(--grid-gap);grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);width:100%;height:100%;display:grid}.grid-cell{background:var(--cell-bg);border:1px solid #ffffff0a;border-radius:12px}.particle-canvas{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;inset:0}.tile-container{top:var(--grid-gap);left:var(--grid-gap);right:var(--grid-gap);bottom:var(--grid-gap);pointer-events:none;z-index:5;position:absolute}.tile-element{width:var(--tile-size);height:var(--tile-size);--tile-x:calc(var(--tile-col,0) * (var(--tile-size) + var(--grid-gap)));--tile-y:calc(var(--tile-row,0) * (var(--tile-size) + var(--grid-gap)));transform:translate(var(--tile-x), var(--tile-y));will-change:transform;border:1px solid #fff3;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;transition:transform .12s cubic-bezier(.25,1,.5,1);display:flex;position:absolute}.tile-symbol{opacity:.9;font-size:clamp(14px,3.2vw,20px);line-height:1}.tile-value{letter-spacing:-.5px;font-family:Space Grotesk,sans-serif;font-size:clamp(18px,4.4vw,28px);font-weight:800;line-height:1.1}.tile-val-1024 .tile-value,.tile-val-2048 .tile-value,.tile-val-4096 .tile-value{font-size:clamp(15px,3.8vw,22px)}.theme-classic .game-board{background:#bbada0;border:none;box-shadow:0 10px 30px #00000059}.theme-classic .grid-cell{background:#eee4da59;border:none}.theme-classic .tile-element{border:none}.theme-classic .tile-value{font-size:clamp(22px,5.5vw,36px)}.theme-classic .tile-val-128 .tile-value,.theme-classic .tile-val-256 .tile-value,.theme-classic .tile-val-512 .tile-value{font-size:clamp(18px,4.6vw,30px)}.theme-classic .tile-val-1024 .tile-value,.theme-classic .tile-val-2048 .tile-value,.theme-classic .tile-val-4096 .tile-value{font-size:clamp(15px,3.8vw,24px)}.tile-phase-name{letter-spacing:.3px;opacity:.85;text-transform:uppercase;white-space:nowrap;margin-top:2px;font-size:clamp(7px,1.6vw,10px);font-weight:600}.tile-appear{animation:.18s ease-out forwards appear}@keyframes appear{0%{opacity:0;transform:translate(var(--tile-x), var(--tile-y)) scale(.1)}to{opacity:1;transform:translate(var(--tile-x), var(--tile-y)) scale(1)}}.tile-merged{animation:.22s ease-in-out pop-merge}@keyframes pop-merge{0%{transform:translate(var(--tile-x), var(--tile-y)) scale(1)}50%{transform:translate(var(--tile-x), var(--tile-y)) scale(1.16)}to{transform:translate(var(--tile-x), var(--tile-y)) scale(1)}}.instructions-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;color:var(--text-secondary);border:1px solid #ffffff14;border-radius:14px;flex-direction:column;gap:12px;padding:16px;font-size:.85rem;line-height:1.5;display:flex}.instructions-title{color:var(--text-primary);align-items:center;gap:6px;font-size:.9rem;font-weight:700;display:flex}.key-badge{color:#fff;background:#ffffff1a;border:1px solid #ffffff26;border-radius:6px;margin:0 2px;padding:2px 7px;font-family:monospace;font-size:.78rem;display:inline-block}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#060812d9;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out forwards fadeIn;display:flex;position:fixed;inset:0}.modal-card{text-align:center;background:linear-gradient(135deg,#1a213ef2,#0f172af2);border:1px solid #a855f766;border-radius:20px;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:380px;padding:32px 24px;animation:.22s cubic-bezier(.34,1.56,.64,1) forwards zoomIn;display:flex;box-shadow:0 0 40px #7c3aed59}.modal-icon{font-size:48px;line-height:1}.modal-title{color:#fff;font-family:Space Grotesk,sans-serif;font-size:1.6rem;font-weight:700}.modal-message{color:var(--text-secondary);font-size:.92rem}.modal-scores{grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:6px 0;display:grid}.modal-score-item{background:#ffffff0d;border-radius:12px;padding:10px}.modal-score-label{color:var(--text-secondary);text-transform:uppercase;font-size:.7rem;display:block}.modal-score-value{color:#fff;font-family:Space Grotesk,monospace;font-size:1.3rem;font-weight:700}.modal-actions{gap:10px;width:100%;display:flex}.modal-actions .game-btn{flex:1;padding:12px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.now-playing-footer{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:16px;width:100%;max-width:500px;margin-top:4px;padding:12px 16px;transition:all .3s;box-shadow:0 10px 30px #00000059,0 0 20px #6366f11a}.now-playing-footer:hover{border-color:#a855f773;box-shadow:0 12px 36px #00000073,0 0 24px #a855f733}.now-playing-inner{justify-content:space-between;align-items:center;gap:12px;display:flex}.track-info{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.track-visualizer-icon{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:20px;display:flex;position:relative;overflow:hidden}.track-visualizer-icon.is-playing{background:linear-gradient(135deg,#6366f159,#ec489959);border-color:#a855f780;box-shadow:0 0 14px #a855f74d}.equalizer-bars{align-items:flex-end;gap:2px;height:12px;display:flex;position:absolute;bottom:4px;right:4px}.eq-bar{background:#a855f7;border-radius:2px;width:2.5px}.eq-bar.bar-1{height:40%;animation:.8s ease-in-out infinite alternate eq-bounce}.eq-bar.bar-2{height:90%;animation:.6s ease-in-out .2s infinite alternate eq-bounce}.eq-bar.bar-3{height:60%;animation:.7s ease-in-out .4s infinite alternate eq-bounce}@keyframes eq-bounce{0%{height:20%}to{height:100%}}.track-details{flex-direction:column;min-width:0;display:flex}.track-header{align-items:center;display:flex}.now-playing-tag{letter-spacing:.8px;color:var(--accent-cyan);text-transform:uppercase;font-size:.62rem;font-weight:700}.track-title-row{white-space:nowrap;text-overflow:ellipsis;align-items:baseline;gap:6px;display:flex;overflow:hidden}.track-name{color:#fff;font-size:.88rem;font-weight:600}.track-mood{color:var(--text-secondary);font-size:.72rem}.track-chords{color:#c7d2fe;letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;font-family:Space Grotesk,monospace;font-size:.7rem;overflow:hidden}.now-playing-controls{flex-shrink:0;align-items:center;gap:8px;display:flex}.cycle-buttons{align-items:center;gap:4px;display:flex}.player-btn{color:#e2e8f0;cursor:pointer;background:#ffffff12;border:1px solid #ffffff1f;border-radius:8px;justify-content:center;align-items:center;padding:6px 8px;font-size:13px;transition:all .2s;display:flex}.player-btn:hover{background:#ffffff29;border-color:#ffffff40;transform:translateY(-1px)}.player-btn.play-pause{border-radius:50%;width:32px;height:32px;padding:0;font-size:12px}.player-btn.play-pause.active{color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);border-color:#c084fc;box-shadow:0 0 10px #a855f766}.player-btn.volume-btn{padding:6px;font-size:12px}.progression-pills{background:#0003;border-radius:12px;align-items:center;gap:3px;padding:2px 4px;display:flex}.prog-pill{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:3px;padding:2px 6px;font-size:.68rem;font-weight:600;transition:all .2s;display:flex}.prog-pill .pill-dot{opacity:.5;background:currentColor;border-radius:50%;width:4px;height:4px}.prog-pill:hover{color:#fff;background:#ffffff14}.prog-pill.active{color:#e9d5ff;background:#a855f740;border:1px solid #a855f766}.prog-pill.active .pill-dot{opacity:1;background:#a855f7;box-shadow:0 0 6px #a855f7}@media (width<=480px){.now-playing-inner{flex-direction:column;align-items:stretch;gap:8px}.now-playing-controls{justify-content:space-between}.track-visualizer-icon{width:36px;height:36px;font-size:17px}}