#twenty48-container{padding:15px;background:#f8fafc;border-radius:8px}.twenty48-game-wrapper{max-width:500px;margin:0 auto}.twenty48-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.twenty48-title-box{flex:1}.twenty48-logo{font-size:38px;font-weight:900;color:#0f172a;margin:0;line-height:1;letter-spacing:-1px}.twenty48-subtitle{font-size:13px;color:#64748b;margin:4px 0 0 0}.twenty48-scores{display:flex;gap:8px}.twenty48-score-box{background:#bbada0;color:#fff;padding:6px 14px;border-radius:6px;text-align:center;min-width:75px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.twenty48-score-label{display:block;font-size:10px;font-weight:bold;color:#eee4da;letter-spacing:.5px}.twenty48-score-val{display:block;font-size:18px;font-weight:bold;line-height:1.2}.twenty48-action-bar{display:flex;justify-content:space-between;margin-bottom:15px}.twenty48-btn{border:0;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:bold;cursor:pointer;transition:background .15s,transform .1s}.twenty48-btn:active{transform:scale(0.97)}.twenty48-btn-primary{background:#8f7a66;color:#f9f6f2}.twenty48-btn-primary:hover{background:#9f8a76}.twenty48-btn-secondary{background:#e2e8f0;color:#334155}.twenty48-btn-secondary:hover:not(:disabled){background:#cbd5e1}.twenty48-btn:disabled{opacity:.5;cursor:not-allowed}.twenty48-board{position:relative;width:100%;aspect-ratio:1 / 1;background:#bbada0;border-radius:8px;padding:10px;box-sizing:border-box;touch-action:none;user-select:none}.twenty48-grid-container{display:flex;flex-direction:column;gap:10px;height:100%}.twenty48-row{display:flex;gap:10px;flex:1}.twenty48-cell{flex:1;background:rgba(238,228,218,.35);border-radius:6px}.twenty48-tile-container{position:absolute;top:10px;left:10px;right:10px;bottom:10px}.twenty48-tile{position:absolute;width:calc((100% - 30px)/4);height:calc((100% - 30px)/4);border-radius:6px;display:flex;justify-content:center;align-items:center;font-size:26px;font-weight:bold;transition:top .12s ease-in-out,left .12s ease-in-out,transform .12s ease-in-out;animation:tilePop .15s ease-out;box-shadow:0 2px 4px rgba(0,0,0,0.1)}@keyframes tilePop{0{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}.twenty48-pos-0-0{top:0;left:0}.twenty48-pos-0-1{top:0;left:calc(25% + 2.5px)}.twenty48-pos-0-2{top:0;left:calc(50% + 5px)}.twenty48-pos-0-3{top:0;left:calc(75% + 7.5px)}.twenty48-pos-1-0{top:calc(25% + 2.5px);left:0}.twenty48-pos-1-1{top:calc(25% + 2.5px);left:calc(25% + 2.5px)}.twenty48-pos-1-2{top:calc(25% + 2.5px);left:calc(50% + 5px)}.twenty48-pos-1-3{top:calc(25% + 2.5px);left:calc(75% + 7.5px)}.twenty48-pos-2-0{top:calc(50% + 5px);left:0}.twenty48-pos-2-1{top:calc(50% + 5px);left:calc(25% + 2.5px)}.twenty48-pos-2-2{top:calc(50% + 5px);left:calc(50% + 5px)}.twenty48-pos-2-3{top:calc(50% + 5px);left:calc(75% + 7.5px)}.twenty48-pos-3-0{top:calc(75% + 7.5px);left:0}.twenty48-pos-3-1{top:calc(75% + 7.5px);left:calc(25% + 2.5px)}.twenty48-pos-3-2{top:calc(75% + 7.5px);left:calc(50% + 5px)}.twenty48-pos-3-3{top:calc(75% + 7.5px);left:calc(75% + 7.5px)}.twenty48-tile-2{background:#eee4da;color:#776e65}.twenty48-tile-4{background:#ede0c8;color:#776e65}.twenty48-tile-8{background:#f2b179;color:#f9f6f2}.twenty48-tile-16{background:#f59563;color:#f9f6f2}.twenty48-tile-32{background:#f67c5f;color:#f9f6f2}.twenty48-tile-64{background:#f65e3b;color:#f9f6f2}.twenty48-tile-128{background:#edcf72;color:#f9f6f2;font-size:22px}.twenty48-tile-256{background:#edcc61;color:#f9f6f2;font-size:22px}.twenty48-tile-512{background:#edc850;color:#f9f6f2;font-size:22px}.twenty48-tile-1024{background:#edc53f;color:#f9f6f2;font-size:18px}.twenty48-tile-2048{background:#edc22e;color:#f9f6f2;font-size:18px;box-shadow:0 0 15px rgba(237,194,46,.6)}.twenty48-tile-super{background:#3c3a32;color:#f9f6f2;font-size:16px}.twenty48-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(238,228,218,.85);border-radius:8px;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:10;padding:20px;text-align:center}.twenty48-overlay.active{opacity:1;pointer-events:auto}.twenty48-overlay-content h3{font-size:28px;color:#776e65;margin:0 0 10px 0}.twenty48-overlay-content p{font-size:14px;color:#64748b;margin-bottom:20px}.twenty48-mobile-controls{display:none;margin-top:15px;text-align:center}.twenty48-m-row{display:flex;justify-content:center;gap:10px;margin-bottom:6px}.twenty48-m-btn{width:50px;height:44px;font-size:18px;background:#cbd5e1;color:#1e293b;border:0;border-radius:6px;cursor:pointer}.twenty48-m-btn:active{background:#94a3b8}@media(max-width:600px){.twenty48-mobile-controls{display:block}}.twenty48-guide-box{margin-top:20px;padding:15px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#475569}.twenty48-guide-box h4{margin:0 0 10px 0;color:#0f172a;font-size:15px}.twenty48-guide-box ul{margin:0;padding-left:20px}.twenty48-guide-box li{margin-bottom:6px;font-size:13px}.twenty48-guide-box kbd{background-color:#f1f5f9;border:1px solid #cbd5e1;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2);color:#0f172a;display:inline-block;font-size:11px;padding:2px 5px}@media(prefers-color-scheme:dark){#twenty48-container{background:#181c24}.twenty48-logo{color:#f8fafc}.twenty48-subtitle{color:#94a3b8}.twenty48-board{background:#252d3a}.twenty48-cell{background:rgba(15,23,42,.4)}.twenty48-btn-secondary{background:#2c3442;color:#e2e8f0}.twenty48-btn-secondary:hover:not(:disabled){background:#3b4658}.twenty48-overlay{background:rgba(15,23,42,.92)}.twenty48-overlay-content h3{color:#f8fafc}.twenty48-overlay-content p{color:#cbd5e1}.twenty48-m-btn{background:#334155;color:#f8fafc}.twenty48-guide-box{background:#1e2430;border-color:#2e3848;color:#cbd5e1}.twenty48-guide-box h4{color:#58a6ff}.twenty48-guide-box kbd{background-color:#2d3748;border-color:#4a5568;color:#58a6ff;box-shadow:0 1px 0 rgba(0,0,0,0.4)}}