:root{--color-bg-primary: #faf8ef;--color-surface: #bbada0;--color-surface-light: #cdc1b4;--color-text-primary: #776e65;--color-text-secondary: #8f7a66;--color-text-light: #f9f6f2;--color-primary: #edc22e;--color-primary-hover: #f5d03a;--color-accent-1: #8f7a66;--color-accent-2: #bbada0;--color-accent-3: #cdc1b4;--color-error: #f67c5f;--color-success: #59b559;--color-border: #bbada0;--tile-2: #eee4da;--tile-4: #ede0c8;--tile-8: #f2b179;--tile-16: #f59563;--tile-32: #f67c5f;--tile-64: #f65e3b;--tile-128: #edcf72;--tile-256: #edcc61;--tile-512: #edc850;--tile-1024: #edc53f;--tile-2048: #edc22e;--tile-super: #3c3a32;--tile-fib-1: #eee4da;--tile-fib-2: #ede0c8;--tile-fib-3: #9cd67b;--tile-fib-5: #85c964;--tile-fib-8: #6dbc4d;--tile-fib-13: #56af36;--tile-fib-21: #3fa21f;--tile-fib-34: #339517;--tile-fib-55: #288810;--tile-fib-89: #1d7b09;--tile-fib-144: #126e02;--tile-fib-233: #0a5f00;--tile-fib-377: #045200;--tile-fib-610: #004500;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 50%;--duration-fast: .1s;--duration-normal: .15s;--duration-slow: .25s;--board-size: 400px;--cell-gap: 12px;--cell-size: calc((var(--board-size) - var(--cell-gap) * 5) / 4)}body.dark-mode{--color-bg-primary: #1a1614;--color-surface: #3c3a32;--color-surface-light: #524e44;--color-text-primary: #f9f6f2;--color-text-secondary: #bbada0;--color-border: #524e44}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;background-color:var(--color-bg-primary);color:var(--color-text-primary);width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-12)}.app-layout{display:flex;min-height:100vh;width:100%}.app-content{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12)}.container{width:100%;max-width:500px;margin:0 auto}.header{text-align:center;margin-bottom:var(--space-16)}.header-top{display:flex;align-items:center;justify-content:center;gap:var(--space-16);margin-bottom:var(--space-8)}.header h1{font-size:48px;font-weight:700;color:var(--color-text-secondary);letter-spacing:-2px}.mode-badge{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--color-primary);font-weight:700;margin-bottom:var(--space-12)}.score-container{display:flex;gap:var(--space-8);justify-content:center;margin-bottom:var(--space-12)}.score-box{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-8) var(--space-16);min-width:100px;text-align:center}.score-label{display:block;font-size:11px;text-transform:uppercase;color:var(--color-text-light);opacity:.8}.score-value{display:block;font-size:22px;font-weight:700;color:var(--color-text-light)}.timer{font-size:28px;font-weight:700;color:var(--color-text-secondary);font-family:Courier New,monospace;font-variant-numeric:tabular-nums;margin-bottom:var(--space-12)}.timer.warning{color:var(--color-error);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.settings-toggles{display:flex;gap:var(--space-8);justify-content:center;margin-bottom:var(--space-8)}.settings-toggle-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-8);font-size:18px;cursor:pointer;opacity:.5;transition:opacity var(--duration-fast),background-color var(--duration-fast)}.settings-toggle-btn.active{opacity:1;background-color:var(--color-surface-light)}.settings-toggle-btn:hover{opacity:1}.theme-toggle{background:none;border:none;font-size:24px;cursor:pointer;padding:var(--space-8);border-radius:var(--radius-full);transition:background-color var(--duration-fast)}.theme-toggle:hover{background-color:var(--color-surface-light)}.board-container{display:flex;justify-content:center;margin-bottom:var(--space-24)}.game-board{position:relative;width:var(--board-size);height:var(--board-size);background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--cell-gap)}.board-background{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cell-gap);position:absolute;top:var(--cell-gap);left:var(--cell-gap);right:var(--cell-gap);bottom:var(--cell-gap)}.cell-background{background-color:var(--color-surface-light);border-radius:var(--radius-sm)}.board-tiles{position:absolute;top:var(--cell-gap);left:var(--cell-gap);right:var(--cell-gap);bottom:var(--cell-gap)}.tile{position:absolute;width:var(--cell-size);height:var(--cell-size);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform var(--duration-fast) ease-in-out;transform:translate(calc(var(--tile-col) * (var(--cell-size) + var(--cell-gap))),calc(var(--tile-row) * (var(--cell-size) + var(--cell-gap))))}.tile-value{font-size:45px;line-height:1}.tile-value-large{font-size:35px}.tile-2{background-color:var(--tile-2);color:var(--color-text-primary)}.tile-4{background-color:var(--tile-4);color:var(--color-text-primary)}.tile-8{background-color:var(--tile-8);color:var(--color-text-light)}.tile-16{background-color:var(--tile-16);color:var(--color-text-light)}.tile-32{background-color:var(--tile-32);color:var(--color-text-light)}.tile-64{background-color:var(--tile-64);color:var(--color-text-light)}.tile-128{background-color:var(--tile-128);color:var(--color-text-light);box-shadow:0 0 30px 10px #f3d77433}.tile-256{background-color:var(--tile-256);color:var(--color-text-light);box-shadow:0 0 30px 10px #f3d7744d}.tile-512{background-color:var(--tile-512);color:var(--color-text-light);box-shadow:0 0 30px 10px #f3d77466}.tile-1024{background-color:var(--tile-1024);color:var(--color-text-light);box-shadow:0 0 30px 10px #f3d77480}.tile-2048{background-color:var(--tile-2048);color:var(--color-text-light);box-shadow:0 0 30px 10px #f3d77499}.tile-super{background-color:var(--tile-super);color:var(--color-text-light);box-shadow:0 0 30px 10px #3c3a3280}.tile-super-glow{animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{box-shadow:0 0 30px 10px #edc22e99}50%{box-shadow:0 0 50px 20px #edc22ecc}}.tile-fib-1,.tile-fib-2{background-color:var(--tile-fib-1);color:var(--color-text-primary)}.tile-fib-3{background-color:var(--tile-fib-3);color:var(--color-text-light)}.tile-fib-5{background-color:var(--tile-fib-5);color:var(--color-text-light)}.tile-fib-8{background-color:var(--tile-fib-8);color:var(--color-text-light)}.tile-fib-13{background-color:var(--tile-fib-13);color:var(--color-text-light)}.tile-fib-21{background-color:var(--tile-fib-21);color:var(--color-text-light)}.tile-fib-34{background-color:var(--tile-fib-34);color:var(--color-text-light)}.tile-fib-55{background-color:var(--tile-fib-55);color:var(--color-text-light)}.tile-fib-89{background-color:var(--tile-fib-89);color:var(--color-text-light)}.tile-fib-144{background-color:var(--tile-fib-144);color:var(--color-text-light)}.tile-fib-233{background-color:var(--tile-fib-233);color:var(--color-text-light)}.tile-fib-377{background-color:var(--tile-fib-377);color:var(--color-text-light)}.tile-fib-610{background-color:var(--tile-fib-610);color:var(--color-text-light)}.tile-fib-super{background-color:#020;color:var(--color-text-light)}.tile-new{animation:appear .2s ease}@keyframes appear{0%{opacity:0;transform:translate(calc(var(--tile-col) * (var(--cell-size) + var(--cell-gap))),calc(var(--tile-row) * (var(--cell-size) + var(--cell-gap)))) scale(0)}to{opacity:1;transform:translate(calc(var(--tile-col) * (var(--cell-size) + var(--cell-gap))),calc(var(--tile-row) * (var(--cell-size) + var(--cell-gap)))) scale(1)}}.tile-merged{animation:pop .2s ease}@keyframes pop{0%{transform:translate(calc(var(--tile-col) * (var(--cell-size) + var(--cell-gap))),calc(var(--tile-row) * (var(--cell-size) + var(--cell-gap)))) scale(1)}50%{transform:translate(calc(var(--tile-col) * (var(--cell-size) + var(--cell-gap))),calc(var(--tile-row) * (var(--cell-size) + var(--cell-gap)))) scale(1.2)}to{transform:translate(calc(var(--tile-col) * (var(--cell-size) + var(--cell-gap))),calc(var(--tile-row) * (var(--cell-size) + var(--cell-gap)))) scale(1)}}.controls{display:flex;flex-direction:column;gap:var(--space-12);margin-bottom:var(--space-16)}.button-row{display:flex;gap:var(--space-8);justify-content:center}.button-row.small-gap{gap:var(--space-8);flex-wrap:wrap}.btn{flex:1;padding:var(--space-12) var(--space-16);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--duration-fast) ease;text-transform:uppercase;letter-spacing:.5px}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--color-accent-1);color:var(--color-text-light)}.btn-primary:hover{background-color:var(--color-text-secondary)}.btn-secondary{background-color:var(--color-surface-light);color:var(--color-text-primary)}.btn-secondary:hover{background-color:var(--color-surface)}.btn-tertiary{background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-tertiary:hover{background-color:var(--color-surface-light)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-icon{background:none;border:none;font-size:24px;cursor:pointer;padding:var(--space-8);color:var(--color-text-secondary)}.btn-icon:hover{color:var(--color-text-primary)}.btn-sm{padding:var(--space-8) var(--space-12);font-size:12px}.tools-section{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border)}.tools-toggle{background:none;border:none;color:var(--color-text-secondary);font-size:12px;font-weight:600;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:var(--space-4);padding:0;margin-bottom:var(--space-8)}.tools-content{animation:fadeIn var(--duration-fast) ease-out}.tool-action-btn{padding:var(--space-8) var(--space-12);font-size:12px;background-color:var(--color-surface-light);border:1px solid var(--color-border);color:var(--color-text-primary)}.instructions{text-align:center;color:var(--color-text-secondary);font-size:13px;line-height:1.6}.instructions p{margin-bottom:var(--space-4)}.main-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:400px;margin:0 auto;padding:var(--space-24);text-align:center}.menu-header{margin-bottom:var(--space-32)}.menu-title{font-size:72px;font-weight:700;color:var(--color-text-secondary);letter-spacing:-4px;margin-bottom:var(--space-8)}.menu-subtitle{color:var(--color-text-secondary);font-size:16px}.best-score-display{display:inline-flex;flex-direction:column;background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-8) var(--space-16);margin-top:var(--space-12)}.best-label{font-size:11px;text-transform:uppercase;color:var(--color-text-light);opacity:.8}.best-value{font-size:24px;font-weight:700;color:var(--color-text-light)}.menu-options{display:flex;flex-direction:column;gap:var(--space-24);width:100%}.mode-group{display:flex;flex-direction:column;gap:var(--space-8)}.mode-group h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-secondary);margin-bottom:var(--space-4)}.menu-btn{width:100%;padding:var(--space-16);font-size:16px;display:flex;align-items:center;justify-content:center;gap:var(--space-8);position:relative;background-color:var(--color-surface-light);border:none;border-radius:var(--radius-md);color:var(--color-text-primary);font-weight:600;cursor:pointer;transition:all var(--duration-fast)}.menu-btn:hover{background-color:var(--color-surface);transform:translateY(-2px)}.resume-btn{background-color:var(--color-success);color:#fff}.resume-btn:hover{background-color:#4ca84c}.fibonacci-btn{background-color:#9cd67b}.fibonacci-btn:hover{background-color:#85c964}.badge{font-size:10px;padding:2px 6px;border-radius:var(--radius-sm);background-color:#0000001a;text-transform:uppercase;font-weight:700}.educational-group{border-top:1px solid var(--color-border);padding-top:var(--space-16);margin-top:var(--space-8)}.menu-footer{margin-top:var(--space-48);color:var(--color-text-secondary);font-size:12px}.footer-controls{margin-bottom:var(--space-8)}.privacy-link{background:none;border:none;color:var(--color-text-secondary);font-size:12px;cursor:pointer;margin-bottom:var(--space-8);display:block}.privacy-link:hover{color:var(--color-primary)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-16);animation:fadeIn var(--duration-normal) ease-out}.modal{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--space-24);max-width:400px;width:100%;text-align:center;animation:slideUp var(--duration-normal) ease-out}.modal h2{font-size:28px;margin-bottom:var(--space-16);color:var(--color-text-secondary)}.modal-stats{display:flex;flex-direction:column;gap:var(--space-12);margin-bottom:var(--space-20)}.stat{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:12px;text-transform:uppercase;color:var(--color-text-secondary)}.stat-value{font-size:32px;font-weight:700;color:var(--color-text-primary)}.new-best{color:var(--color-primary);font-size:14px;font-weight:700;animation:pulse 1s infinite}.tile-preview{background-color:var(--tile-2048);color:var(--color-text-light);padding:var(--space-4) var(--space-12);border-radius:var(--radius-sm)}.modal-actions{display:flex;flex-direction:column;gap:var(--space-8)}.win-modal .win-tile{margin:var(--space-20) 0}.big-tile{display:inline-block;width:100px;height:100px;line-height:100px;font-size:40px;font-weight:700;background-color:var(--tile-2048);color:var(--color-text-light);border-radius:var(--radius-md);box-shadow:0 0 30px 10px #edc22e66;animation:glow 2s ease-in-out infinite}.win-message{color:var(--color-text-secondary);margin-bottom:var(--space-16)}.statistics-modal{max-width:450px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-20)}.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-12);margin-bottom:var(--space-20)}.stat-card{background-color:var(--color-surface-light);border-radius:var(--radius-md);padding:var(--space-16);display:flex;flex-direction:column;align-items:center}.stat-card.highlight{grid-column:span 2;background-color:var(--color-surface)}.stat-icon{font-size:24px;margin-bottom:var(--space-8)}.stats-actions{text-align:center}.tutorial-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-16)}.tutorial-modal{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--space-24);max-width:450px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:fadeIn var(--duration-fast) ease-out}.tutorial-close{position:absolute;top:var(--space-12);right:var(--space-12);background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-text-secondary)}.tutorial-progress{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-20)}.tutorial-progress-dot{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-border);transition:background-color var(--duration-fast)}.tutorial-progress-dot.active{background-color:var(--color-primary)}.tutorial-progress-dot.completed{background-color:var(--color-success)}.tutorial-title{font-size:22px;text-align:center;margin-bottom:var(--space-16);color:var(--color-text-primary)}.tutorial-content{text-align:center;color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-20)}.tutorial-visual{background-color:var(--color-surface-light);border-radius:var(--radius-md);padding:var(--space-16);margin-bottom:var(--space-20);text-align:center}.tutorial-tiles-demo,.merge-demo,.modes-demo{display:flex;gap:var(--space-8);justify-content:center;align-items:center;flex-wrap:wrap}.demo-tile{width:50px;height:50px;line-height:50px;border-radius:var(--radius-sm);font-weight:700;font-size:20px;text-align:center}.demo-tile.small{width:40px;height:40px;line-height:40px;font-size:14px}.demo-tile.large{width:80px;height:80px;line-height:80px;font-size:28px}.plus,.equals{font-size:24px;color:var(--color-text-secondary)}.movement-demo{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.arrow-row{display:flex;gap:var(--space-16)}.arrow{font-size:32px;color:var(--color-text-secondary)}.strategy-grid{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-8)}.hint-text{font-size:12px;color:var(--color-text-secondary)}.mode-icon{font-size:32px}.ready-demo{padding:var(--space-16)}.tutorial-nav{display:flex;gap:var(--space-12);justify-content:center}.tutorial-btn{min-width:120px}.privacy-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-16)}.privacy-modal{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--space-24);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.privacy-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-16)}.privacy-header h2{font-size:20px}.privacy-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-text-secondary)}.privacy-content section{margin-bottom:var(--space-20)}.privacy-content h3{font-size:16px;color:var(--color-primary);margin-bottom:var(--space-8)}.privacy-content p,.privacy-content li{font-size:14px;color:var(--color-text-secondary);line-height:1.6}.privacy-content ul{padding-left:var(--space-20);margin-top:var(--space-8)}.privacy-content a{color:var(--color-primary)}.privacy-update{font-size:12px;color:var(--color-text-secondary);text-align:center;margin-top:var(--space-24)}.cookie-banner{position:fixed;bottom:0;left:0;right:0;background-color:var(--color-bg-primary);box-shadow:0 -4px 20px #0000001a;padding:var(--space-16);z-index:1000;animation:slideUp .3s ease-out}.cookie-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-12);align-items:center;text-align:center}.cookie-content p{font-size:14px;color:var(--color-text-secondary)}.cookie-content a{color:var(--color-primary)}.cookie-buttons{display:flex;gap:var(--space-12)}.install-prompt{position:fixed;top:var(--space-16);left:50%;transform:translate(-50%);background-color:var(--color-bg-primary);border-radius:var(--radius-lg);box-shadow:0 4px 20px #00000026;padding:var(--space-16);z-index:999;animation:fadeIn .3s ease-out;max-width:300px}.install-content{text-align:center}.install-content p{margin-bottom:var(--space-8);font-size:14px}.install-instructions{font-size:12px!important;color:var(--color-text-secondary)}.share-icon{display:inline-block;font-size:16px}.install-buttons{display:flex;gap:var(--space-8);justify-content:center;margin-top:var(--space-12)}.ad-sidebar{display:none;width:160px;min-width:160px;background-color:var(--color-bg-primary);padding:var(--space-12)}.ad-placeholder{background:repeating-linear-gradient(45deg,var(--color-border),var(--color-border) 10px,transparent 10px,transparent 20px);opacity:.1}@media(min-width:1200px){.ad-sidebar{display:block}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(max-width:480px){:root{--board-size: 320px;--cell-gap: 10px}.header h1{font-size:36px}.menu-title{font-size:56px}.tile-value{font-size:35px}.tile-value-large{font-size:28px}.score-box{min-width:80px;padding:var(--space-4) var(--space-8)}.score-value{font-size:18px}.button-row{flex-direction:column}.container{padding:var(--space-8)}}@media(max-width:360px){:root{--board-size: 280px;--cell-gap: 8px}.tile-value{font-size:28px}.tile-value-large{font-size:22px}}