/* ===== 2048 GAME ===== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');

.g48-header { background: linear-gradient(135deg, #f67c5f 0%, #ee4035 50%, #f67c5f 100%) !important; }

.g48-wrap { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 460px 1fr; gap: 28px; align-items: start; padding-bottom: 20px; }

/* ── GAME CONTAINER ── */
.g48-game { display: flex; flex-direction: column; gap: 14px; }

/* Top row */
.g48-toprow { display: flex; justify-content: space-between; align-items: center; }
.g48-logo { font-family: 'Nunito', sans-serif; font-size: 52px; font-weight: 900; color: #776e65; line-height: 1; }
.g48-scores { display: flex; gap: 8px; }
.g48-score-box { background: #bbada0; border-radius: 6px; padding: 8px 18px; text-align: center; min-width: 80px; }
.g48-score-label { font-size: 11px; font-weight: 800; color: #eee4da; letter-spacing: .5px; margin-bottom: 2px; }
.g48-score-val { font-size: 22px; font-weight: 900; color: #fff; font-family: 'Nunito', sans-serif; transition: all .1s; }

/* Controls */
.g48-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.g48-hint { font-size: 14px; color: #776e65; margin: 0; font-weight: 600; }
.g48-hint strong { color: #ee4035; }
.g48-btns { display: flex; gap: 8px; }

.g48-btn { background: #8f7a66; color: #f9f6f2; border: none; border-radius: 6px; padding: 9px 18px; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .15s; font-family: 'Nunito', sans-serif; }
.g48-btn:hover:not(:disabled) { background: #7a6657; transform: translateY(-1px); }
.g48-btn:disabled { opacity: .45; cursor: not-allowed; }
.g48-btn-new { background: #ee4035; }
.g48-btn-new:hover { background: #d63628; }

/* Board */
.g48-board-wrap { position: relative; background: #bbada0; border-radius: 12px; padding: 12px; }

.g48-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.g48-cell { background: rgba(238,228,218,.35); border-radius: 6px; aspect-ratio: 1; }

/* Tiles container — absolute overlay */
.g48-tiles { position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; }

/* Individual tile */
.g48-tile { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-family: 'Nunito', sans-serif; font-weight: 900; transition: transform 0.1s ease, top 0.1s ease, left 0.1s ease; will-change: top, left, transform; z-index: 2; }

.g48-tile.new-tile { animation: g48-pop .2s ease-out; }
.g48-tile.merged-tile { animation: g48-merge .2s ease-out; z-index: 3; }

@keyframes g48-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes g48-merge {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Tile colours */
.t2    { background:#eee4da; color:#776e65; }
.t4    { background:#ede0c8; color:#776e65; }
.t8    { background:#f2b179; color:#f9f6f2; }
.t16   { background:#f59563; color:#f9f6f2; }
.t32   { background:#f67c5f; color:#f9f6f2; }
.t64   { background:#f65e3b; color:#f9f6f2; }
.t128  { background:#edcf72; color:#f9f6f2; box-shadow:0 0 24px rgba(243,215,116,.6); }
.t256  { background:#edcc61; color:#f9f6f2; box-shadow:0 0 28px rgba(243,215,116,.7); }
.t512  { background:#edc850; color:#f9f6f2; box-shadow:0 0 32px rgba(243,215,116,.8); }
.t1024 { background:#edc53f; color:#f9f6f2; box-shadow:0 0 36px rgba(243,215,116,.9); }
.t2048 { background:#edc22e; color:#f9f6f2; box-shadow:0 0 40px rgba(243,215,116,1); animation:g48-rainbow 2s infinite; }
@keyframes g48-rainbow { 0%,100% { box-shadow:0 0 40px rgba(243,215,116,1); } 50% { box-shadow:0 0 60px rgba(255,200,50,1),0 0 80px rgba(255,150,0,.5); } }
.t-super { background:#3c3a32; color:#f9f6f2; }

/* Game Over overlay */
.g48-overlay { position: absolute; inset: 0; border-radius: 12px; background: rgba(238,228,218,.85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; animation: g48-fadein .3s ease; }
@keyframes g48-fadein { from { opacity:0; } to { opacity:1; } }
.g48-overlay-content { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.g48-overlay-icon { font-size: 48px; }
.g48-overlay-content h2 { font-family: 'Nunito', sans-serif; font-size: 32px; font-weight: 900; color: #776e65; margin: 0; }
.g48-overlay-content p { font-size: 16px; color: #776e65; margin: 0; }

/* Mobile arrows */
.g48-arrows { display: none; flex-direction: column; align-items: center; gap: 6px; }
.g48-arrow-row { display: flex; gap: 6px; }
.g48-arrow-btn { width: 56px; height: 56px; background: #8f7a66; color: #f9f6f2; border: none; border-radius: 10px; font-size: 20px; cursor: pointer; transition: all .15s; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g48-arrow-btn:hover { background: #7a6657; }
.g48-arrow-btn:active { transform: scale(.92); }

/* Stats */
.g48-stats { display: flex; gap: 10px; }
.g48-stat { background: #f9f6f2; border-radius: 10px; padding: 10px 14px; flex: 1; text-align: center; border: 2px solid #e8e0d5; }
.g48-stat-label { font-size: 11px; font-weight: 700; color: #bbada0; text-transform: uppercase; display: block; margin-bottom: 2px; }
.g48-stat-val { font-size: 18px; font-weight: 900; color: #776e65; font-family: 'Nunito', sans-serif; }

/* How to play */
.g48-how { background: #f9f6f2; border-radius: 20px; padding: 24px; border: 2px solid #e8e0d5; }
.g48-how h3 { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 900; color: #776e65; margin: 0 0 16px; }
.g48-how-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.g48-how-item { background: #fff; border-radius: 12px; padding: 14px; border: 2px solid #e8e0d5; }
.g48-how-icon { font-size: 24px; margin-bottom: 6px; }
.g48-how-item h4 { font-size: 13px; font-weight: 800; color: #776e65; margin: 0 0 4px; }
.g48-how-item p { font-size: 12px; color: #a09080; margin: 0; line-height: 1.5; }
.g48-how-item p strong { color: #ee4035; }

/* Score bump animation */
@keyframes g48-bump { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); color:#ee4035; } }
.score-bump { animation: g48-bump .2s ease-out; }

/* Responsive */
@media (max-width: 900px) {
    .g48-wrap { grid-template-columns: 1fr; max-width: 460px; }
    .g48-how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .g48-wrap { max-width: 100%; }
    .g48-arrows { display: flex; }
    .g48-logo { font-size: 40px; }
    .g48-score-box { padding: 6px 12px; min-width: 64px; }
    .g48-score-val { font-size: 18px; }
    .g48-how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .g48-arrow-btn { width: 48px; height: 48px; font-size: 16px; }
}