/* --- ROOT VARIABLES --- */
:root {
    --bg-color: #121212;
    --text-color: #FFFFFF;
    --grid-bg: #1E1E1E;
    --cell-bg: #4d432c; /* Updated: Lighter golden/brown for empty cells */
    --border-radius: 8px;
    --transition-duration: 0.12s; /* Slightly faster tile movement */
    --transition-timing: cubic-bezier(0.33, 1, 0.68, 1); /* Smoother easing for movement */
    --transition: all var(--transition-duration) var(--transition-timing);
    --golden-color: #FFC107;
    --orange-color: #FF9800;
    --pattern-gold-color: #4a3b04;
    --box-size: 100px;
    --content-block-bg: rgba(30, 30, 30, 0.95);
    --about-text-color: #E0C26D;
    --navbar-height: 70px;
    --footer-bg: #1a1a1a;
    --link-hover-color: #FFDA47;
    --input-bg: #333;
    --input-border: var(--golden-color);
    --section-title-color: var(--golden-color);
}

/* --- GENERAL STYLES & RESETS --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; user-select: none; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg-color);
    background-image:
        linear-gradient(45deg, var(--pattern-gold-color) 25%, transparent 25%, transparent 75%, var(--pattern-gold-color) 75%),
        linear-gradient(45deg, var(--pattern-gold-color) 25%, transparent 25%, transparent 75%, var(--pattern-gold-color) 75%);
    background-size: var(--box-size) var(--box-size);
    background-position: 0 0, calc(var(--box-size) / 2) calc(var(--box-size) / 2);
    color: var(--text-color);
    min-height: 100vh;
    touch-action: manipulation;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--navbar-height);
    overflow-x: hidden;
}
body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: -1;
    pointer-events: none;
}

/* --- NAVIGATION BAR --- */
.navbar {
    background: linear-gradient(to right, #25200c, #3a300f);
    border-bottom: 2px solid var(--golden-color);
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--navbar-height);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--golden-color);
    font-size: 1.5rem;
    font-weight: bold;
}
#game-logo-nav {
    height: 40px;
    margin-right: 10px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}
.nav-menu li { margin-left: 25px; }
.nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover, .nav-link.active-link { /* active-link class will be set by JS */
    background-color: var(--golden-color);
    color: var(--bg-color);
    font-weight: bold;
}
.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--golden-color);
    color: var(--golden-color);
    font-size: 1.8rem;
    padding: 5px 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
}

/* --- MAIN CONTAINER & CONTENT BLOCKS --- */
.container { /* Base container for static pages */
    width: 100%;
    max-width: 1100px; /* Wider for static content, allows better text flow */
    margin: 20px auto 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.game-page-container { /* Specific container for game page to constrain width */
    max-width: 600px; /* Constrains game area and its related sections */
     margin: 20px auto 0 auto; /* Ensures it's centered like other .container */
    padding: 0 15px; /* Consistent padding */
    width: 100%; /* Take full width up to max-width */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ad-container, .controls, #leaderboard-section-home, #page-previews, .game-container, .button-container-below-grid,
.content-section, .recommended-pages-section, .static-page-container header { /* .static-page-container header for title styling consistency */
    background-color: var(--content-block-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-top: 25px;
    width: 100%; /* All these blocks take full width of their parent container */
    box-shadow: 0 3px 12px rgba(0,0,0,0.6);
    border: 1px solid rgba(var(--golden-color), 0.2);
}
.ad-container {
    border: 1px dashed var(--golden-color);
    min-height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 0.9rem;
    text-align: center;
}
/* --- HEADERS AND TITLES --- */
.section-title {
    color: var(--section-title-color);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.section-title-sub {
    color: var(--section-title-color);
    margin-bottom: 15px;
    text-align: left;
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(var(--golden-color), 0.5);
    padding-bottom: 8px;
}
.section-title-minor {
    color: var(--link-hover-color);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}
.icon-header { margin-right: 10px; }
.icon-minor { margin-right: 8px; font-size: 1.1rem; }
.list-icon { color: var(--golden-color); margin-right: 8px; width: 20px; text-align: center;} /* Ensure icon alignment */
.static-page-container section ul li { display: flex; align-items: flex-start; /* Align icon with text */ }
.static-page-container section ul li .list-icon { margin-top: 2px; } /* Slight adjustment for icon */
.static-page-container section ul li div { flex: 1; } /* Text takes remaining space */

/* --- SCORES & CONTROLS --- */
.scores { display: flex; gap: 15px; margin-left: auto; }
.score-box { background-color: rgba(51, 51, 51, 0.8); padding: 12px 20px; border-radius: var(--border-radius); text-align: center; min-width: 100px; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border: 1px solid rgba(var(--golden-color), 0.3); }
.score-title { font-size: 0.9rem; color: var(--golden-color); text-transform: uppercase; margin-bottom: 6px; }
.score-value { font-size: 1.5rem; font-weight: bold; color: var(--golden-color); }
.controls { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 15px; padding: 15px 20px; margin-top: 10px; }
.game-info { color: var(--golden-color); font-size: 0.9rem; text-align: left; background-color: rgba(0,0,0,0.4); padding: 5px 10px; border-radius: 4px; flex-grow: 1; margin-right: 10px; }

/* --- BUTTONS --- */
@keyframes golden-glow { from { box-shadow: 0 0 5px rgba(255, 193, 7, 0.4), 0 0 8px rgba(255, 193, 7, 0.3); } to { box-shadow: 0 0 10px rgba(255, 193, 7, 0.6), 0 0 15px rgba(255, 193, 7, 0.5); } }
@keyframes spark-effect { 0% { box-shadow: 0 0 5px 2px rgba(255, 215, 0, 0.7), 0 0 8px 3px rgba(255, 193, 7, 0.5); opacity: 1; } 100% { box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0), 0 0 30px 15px rgba(255, 193, 7, 0); opacity: 0; } }

.golden-button, a.golden-button { /* Apply to <a> tags styled as buttons too */
    background: linear-gradient(to bottom, var(--golden-color), var(--orange-color));
    color: #121212;
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    animation: golden-glow 2s infinite alternate ease-in-out;
}
.golden-button:hover, a.golden-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(to bottom, var(--link-hover-color), var(--golden-color));
    box-shadow: 0 4px 15px rgba(var(--golden-color), 0.4);
}
.golden-button:active, a.golden-button:active {
    transform: translateY(0);
    animation: golden-glow 2s infinite alternate ease-in-out, spark-effect 0.4s ease-out forwards;
    background: linear-gradient(to bottom, var(--orange-color), #e68a00);
}
.button-container-below-grid { margin-top: 15px; margin-bottom: -5px; padding: 15px; background: none; box-shadow: none; }
.button-group { display: flex; justify-content: center; gap: 15px; width: 100%; }

/* --- GAME GRID & TILES --- */
.game-container {
    width: 100%;
    aspect-ratio: 1/1;
    background-color: var(--grid-bg);
    border-radius: var(--border-radius);
    padding: 15px;
    position: relative;
    touch-action: none;
    border: 3px solid var(--golden-color);
    animation: golden-glow 1.5s infinite alternate ease-in-out;
    box-shadow: 0 0 15px 3px rgba(var(--golden-color), 0.4);
    margin-top: 15px;
    overflow: hidden;
}
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 15px; width: 100%; height: 100%; position: relative; z-index: 1; }
.cell { background-color: var(--cell-bg); border-radius: var(--border-radius); box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05); }
.tile-container { position: absolute; top: 15px; left: 15px; right: 15px; bottom: auto; z-index: 2; pointer-events: none; }

/* --- TILE STYLES & SLIDE ANIMATION --- */
.tile {
    position: absolute;
    border-radius: var(--border-radius);
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: 1.8rem; /* Default font size */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0,0,0,0.2) inset;
    width: 0; height: 0;
    opacity: 1;
    will-change: transform, top, left, background-color;
    transition: top var(--transition-duration) var(--transition-timing),
                left var(--transition-duration) var(--transition-timing),
                transform calc(var(--transition-duration) * 1.5) var(--transition-timing), /* For scale on new/merge */
                background-color calc(var(--transition-duration) * 1.5) var(--transition-timing),
                opacity var(--transition-duration) var(--transition-timing);
}
.tile-new {
    transform: scale(0);
    animation: appear calc(var(--transition-duration) * 1.8) var(--transition-timing) forwards;
}
.tile-merged {
    animation: pop calc(var(--transition-duration) * 2.2) var(--transition-timing) forwards; /* Slightly longer pop */
    z-index: 20;
}

@keyframes appear {
    0% { transform: scale(0); opacity: 0.5; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); box-shadow: 0 0 15px 5px rgba(var(--golden-color),0.5); } /* Pop effect with golden glow */
    100% { transform: scale(1); }
}

/* === NEW TILE COLORS START (Updated Section) === */
.tile-2 { background-color: #EF5350; color: #FFFFFF; } /* Soft Red */
.tile-4 { background-color: #42A5F5; color: #FFFFFF; } /* Light Blue */
.tile-8 { background-color: #AB47BC; color: #FFFFFF; } /* Medium Purple */
.tile-16 { background-color: #2ECC71; color: #FFFFFF; } /* Emerald Green (Parrot Green) */
.tile-32 { background-color: #FF69B4; color: #FFFFFF; } /* Hot Pink */
.tile-64 { background-color: #303F9F; color: #FFFFFF; } /* Indigo (Navy Blue) */

.tile-128 {
    background: linear-gradient(135deg, #00A98F, #007991); /* Teal Gradient */
    color: #FFFFFF;
    font-size: 1.6rem; /* Adjust font size for 3-digit numbers */
}
.tile-256 {
    background: linear-gradient(135deg, #FFA000, #FFB300); /* Orange/Amber Gradient */
    color: #FFFFFF;
    font-size: 1.6rem; /* Adjust font size */
}
.tile-512 {
    background: linear-gradient(135deg, #673AB7, #512DA8); /* Deep Purple Gradient */
    color: #FFFFFF;
    font-size: 1.6rem; /* Adjust font size */
}
.tile-1024 {
    background: linear-gradient(135deg, #7CB342, #9CCC65); /* Light Green/Lime Gradient */
    color: #FFFFFF; /* White text for better contrast */
    font-size: 1.4rem; /* Adjust font size for 4-digit numbers */
}
.tile-2048 {
    background: linear-gradient(145deg, #FFEB3B, #FFC107, #FFB300); /* Rich Golden Gradient */
    color: #4A3B04; /* Dark Golden/Brown text for contrast on gold */
    font-size: 1.4rem; /* Adjust font size */
    box-shadow: 0 0 25px 5px rgba(var(--golden-color), 0.7), 0 0 5px rgba(255,255,255,0.3) inset;
    animation: tile2048Glow 1.5s infinite alternate;
}

/* For tiles > 2048 */
.tile-super {
    background: linear-gradient(135deg, #4A00E0, #8E2DE2); /* Purple/Violet Gradient for "super" tiles */
    color: var(--golden-color); /* Golden text, matches site theme */
    font-size: 1.2rem; /* Smaller font for potentially larger numbers */
    box-shadow: 0 0 20px rgba(var(--golden-color), 0.5);
}

/* Keyframe animation for 2048 tile's glow */
@keyframes tile2048Glow {
    from { box-shadow: 0 0 20px 3px rgba(var(--golden-color), 0.6), 0 0 5px rgba(255,255,255,0.2) inset; }
    to { box-shadow: 0 0 30px 8px rgba(var(--golden-color), 0.8), 0 0 8px rgba(255,255,255,0.4) inset; }
}
/* === NEW TILE COLORS END === */


/* --- GAME OVER & CELEBRATION --- */
.game-over { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; flex-direction: column; justify-content: center; align-items: center; border-radius: var(--border-radius); z-index: 100; padding: 20px; text-align: center; }
.game-over h2 { font-size: 2.2rem; margin-bottom: 15px; color: var(--golden-color); text-shadow: 1px 1px 3px #000; }
.new-highscore { color: var(--golden-color); font-size: 1.3rem; font-weight: bold; margin-bottom: 10px; display: none; animation: pulse 1.5s infinite; }
.celebration-popup { color: var(--golden-color); font-size: 1.6rem; margin-bottom: 15px; display: none; animation: pop 0.5s ease-out; font-weight: bold; text-shadow: 0 0 10px var(--golden-color);}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1;} 100% { transform: scale(1); opacity: 0.8;} }
.game-over-input-group { margin-bottom: 15px; width: 80%; max-width: 300px; display: none; }
.game-over-input-group input { width: 100%; padding: 12px; border-radius: var(--border-radius); border: 1px solid var(--input-border); background-color: var(--input-bg); color: white; text-align: center; font-size: 1rem; margin-bottom: 10px; }
.game-over .golden-button { margin-top: 10px; animation: none; }
.game-over .golden-button:active { animation: spark-effect 0.4s ease-out forwards; }

/* --- LEADERBOARD STYLES (Home & Full Page) --- */
#leaderboard-section-home h2, #leaderboard-section-full h2, .static-page-header h1 { /* .static-page-header h1 for static page titles */
    color: var(--section-title-color);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8rem;
}
/* Specifically for static page titles to be left-aligned */
.static-page-container .static-page-header h1 {
    text-align: left;
}

.leaderboard-table-container {
    background-color: rgba(0,0,0,0.2);
    border-radius: var(--border-radius);
    padding: 15px;
    border: 1px solid rgba(var(--golden-color), 0.3);
}

/* ===== MODIFICATION FOR LEADERBOARD SCROLL START ===== */
.scrollable-leaderboard {
    /* max-height: 600px; */ /* REMOVED to allow full height */
    /* overflow-y: auto;   */ /* REMOVED to disable internal scrollbar */
    /* padding-right: 10px; */ /* REMOVED as scrollbar is gone */
    /* Other styles like background, border for the container are in .leaderboard-table-container */
}

/* Scrollbar styles for .scrollable-leaderboard are no longer needed if internal scroll is disabled */
/*
.scrollable-leaderboard::-webkit-scrollbar { width: 8px; }
.scrollable-leaderboard::-webkit-scrollbar-track { background: rgba(var(--golden-color),0.1); border-radius: 4px; }
.scrollable-leaderboard::-webkit-scrollbar-thumb { background: var(--golden-color); border-radius: 4px; }
.scrollable-leaderboard::-webkit-scrollbar-thumb:hover { background: var(--link-hover-color); }
*/
/* ===== MODIFICATION FOR LEADERBOARD SCROLL END ===== */


.leaderboard-list-styled { list-style: none; padding: 0; margin: 0; }
.leaderboard-list-styled li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    background: linear-gradient(to right, rgba(var(--golden-color),0.15), rgba(var(--orange-color),0.1));
    border: 1px solid transparent;
    border-left: 4px solid var(--golden-color);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    color: var(--text-color);
}
.leaderboard-list-styled li:last-child { margin-bottom: 0; }
.leaderboard-list-styled li:hover {
    transform: translateX(5px);
    background: linear-gradient(to right, rgba(var(--golden-color),0.25), rgba(var(--orange-color),0.2));
    border-color: var(--golden-color);
}
.leaderboard-rank { color: var(--golden-color); font-weight: bold; min-width: 30px; text-align: left; margin-right: 10px; font-size: 1.1em; }
.leaderboard-medal-container { min-width: 28px; text-align: center; margin-right: 10px; font-size: 1.3em; display: inline-flex; align-items: center; justify-content: center; }
.leaderboard-name { font-weight: normal; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 150px); }
.leaderboard-score { color: var(--golden-color); font-weight: bold; min-width: 60px; text-align: right; margin-left: auto; font-size: 1.1em;}
.leaderboard-loading, .leaderboard-error {
    text-align: center; color: #aaa; padding: 20px; background: none; border-radius: 0; font-style: italic; margin-bottom: 0 !important; list-style-type: none;
}
.leaderboard-intro { text-align: center; margin-bottom: 20px; font-size: 1rem; color: var(--about-text-color); }
.view-more-container { text-align: center; margin-top: 20px; }

/* --- PAGE PREVIEWS (Home Page) & RECOMMENDED PAGES (Static Pages) --- */
#page-previews, .recommended-pages-section { margin-top: 30px; }
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.preview-card {
    background-color: rgba(var(--grid-bg), 0.7);
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid rgba(var(--golden-color), 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* For better alignment */
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Push button to bottom */
}
.preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(var(--golden-color),0.3);
}
.preview-icon {
    font-size: 2.5rem;
    color: var(--golden-color);
    margin-bottom: 15px;
    display: block;
}
.preview-card h3 {
    color: var(--link-hover-color);
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.preview-card p {
    font-size: 0.9rem;
    color: var(--about-text-color);
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow p to take space */
    min-height: 60px;
}
.preview-card .golden-button {
    margin-top: auto; /* Push button to bottom if card height varies */
}


/* --- STATIC PAGES (About, Privacy, etc.) --- */
.static-page-header { background: none; box-shadow: none; padding: 10px 0; margin-top: 10px; border-bottom: 2px solid var(--golden-color); }
.static-page-container section p, .static-page-container section li div {
    color: var(--about-text-color);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 15px;
    font-size: 1rem;
}
.static-page-container section ul { list-style: none; padding-left: 0; }
.static-page-container section li { margin-bottom: 10px; }
.static-page-container strong { color: var(--golden-color); }
.static-page-container a.text-link { color: var(--link-hover-color); text-decoration: none; font-weight:bold; }
.static-page-container a.text-link:hover { text-decoration: underline; color: var(--golden-color); }
.contact-email-link { padding: 12px 25px !important; font-size: 1rem !important;} /* Make email button stand out */


/* --- FOOTER --- */
footer {
    background-color: var(--footer-bg);
    text-align: center;
    color: var(--golden-color);
    font-size: 0.9rem;
    width: 100%;
    padding: 25px 15px;
    margin-top: 35px;
    border-top: 3px solid var(--golden-color);
    position: relative;
    box-shadow: 0 -4px 12px rgba(var(--golden-color), 0.3);
    animation: footer-glow 2s infinite alternate ease-in-out;
}
@keyframes footer-glow { from { box-shadow: 0 -3px 8px rgba(var(--golden-color), 0.2); } to { box-shadow: 0 -4px 12px rgba(var(--golden-color), 0.4); } }
.footer-content p { margin: 8px 0; }
.footer-links { margin-bottom: 15px; }
.footer-links a {
    color: var(--about-text-color);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--link-hover-color); }

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) { /* Tablet and Mobile */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        background: linear-gradient(to bottom, #3a300f, #25200c);
        padding: 15px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    }
    .nav-menu.active { display: flex; }
    .nav-menu li { margin: 10px 0; width: 100%; text-align: center; }
    .nav-link { display: block; padding: 12px 0; width: 90%; margin: 5px auto; }
    .menu-toggle { display: block; }

    .container, .game-page-container { padding: 0 10px; max-width: 100%; /* Allow full width on mobile */ }
    .ad-container, .controls, #leaderboard-section-home, #page-previews, .content-section, .static-page-container header { padding: 15px; margin-top: 20px; }
    .controls { flex-direction: column; align-items: stretch; text-align: center; }
    .game-info { margin-right: 0; margin-bottom: 10px; text-align: center;}
    .scores { margin-left: 0; justify-content: center; gap: 10px;}
    .score-box { padding: 10px 15px; min-width: 90px; }
    .score-value { font-size: 1.3rem; }
    .tile { font-size: 1.6rem; } /* Adjusted default tile font for mobile */
    .tile-128, .tile-256, .tile-512 { font-size: 1.4rem; }
    .tile-1024, .tile-2048 { font-size: 1.2rem; }
    .tile-super { font-size: 1.1rem; }
    body { --box-size: 80px; }
    .section-title { font-size: 1.6rem; }
    .static-page-header h1 { font-size: 1.8rem; }
    .preview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) { /* Smaller Mobiles */
    body { --box-size: 60px; padding-top: calc(var(--navbar-height) - 10px); }
    .navbar { height: calc(var(--navbar-height) - 10px); }
    .nav-logo span { font-size: 1.3rem; }
    #game-logo-nav { height: 30px; }
    .menu-toggle { font-size: 1.6rem; }
    .nav-menu { top: calc(var(--navbar-height) - 10px); }

    .grid { gap: 10px; }
    .game-container { padding: 10px; }
    .ad-container, .controls, #leaderboard-section-home, #page-previews, .content-section, .static-page-container header { padding: 12px; margin-top: 15px; }
    .golden-button, a.golden-button { padding: 8px 16px; font-size: 0.9rem; }
    .score-box { padding: 8px 12px; min-width: 80px; }
    .score-value { font-size: 1.2rem; }
    .tile { font-size: 1.4rem; } /* Further adjusted default tile font for small mobile */
    .tile-128, .tile-256, .tile-512 { font-size: 1.2rem; }
    .tile-1024, .tile-2048 { font-size: 1.1rem; }
    .tile-super { font-size: 1rem; }
    .static-page-container section p, .static-page-container section li div { font-size: 0.95rem; }
    .footer-links a { margin: 0 5px; font-size: 0.85rem;}
}

/* --- UTILITY --- */
.animate-shake { animation: shake 0.5s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }

/* Contact Form Specific (Example for future use) */
.contact-info { margin-bottom: 30px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--about-text-color); font-weight: bold; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: white;
    font-size: 0.95rem;
}
.form-group textarea { resize: vertical; min-height: 100px; }
/* --- iPad and Similar Tablet Aspect Ratio Specific Adjustments --- */

/* Common iPad aspect ratios are around 4:3 (approx 1.33) */
/* We'll target a range to be safe */

@media (min-aspect-ratio: 12/10) and (max-aspect-ratio: 14/10) and (min-width: 768px) {
    /*
        Explanation of the media query:
        min-aspect-ratio: 12/10 (or 6/5 = 1.2)
        max-aspect-ratio: 14/10 (or 7/5 = 1.4)
        min-width: 768px (to ensure it's likely a tablet and not a wide phone)

        This targets devices that are wider than they are tall, but not extremely wide.
        Common iPad in landscape: 1024x768 (ratio 1.33), iPad Pro 11" 2388x1668 (ratio ~1.43) (Portrait me ratio < 1 hoga)
        Adjust these ratios if needed based on the exact devices you want to target.
    */

    .game-container {
        /* Thoda sa vertical padding badha dete hain (ya sirf bottom padding) */
        /* Ya fir, .tile-container ki positioning ko thoda adjust karte hain */
        /* Game container ki overall size ko thoda sa chhota kar sakte hain taaki andar sab fit ho */
    }

    /* Solution 1: Tile container ko andar se thoda contract karna */
    .tile-container {
        /* Agar default padding 15px hai game-container ka */
        top: 15px;    /* No change */
        left: 15px;   /* No change */
        right: 15px;  /* No change */
        bottom: 17px; /* Bottom se 2px extra space, taaki neeche ke tiles na katein */
                      /* Aap 16px, 16.5px, 17px try kar sakte hain */
    }

    /* Ya Solution 2: Grid Gaps ko thoda kam karna, specifically for this aspect ratio */
    /* .grid {
        gap: 14px; /* Default 15px se thoda kam
    } */

    /* Agar upar waale se baat na bane, toh game-container ki max-width/height ko thoda kam kar sakte hain */
    /* .game-page-container {
        max-width: 580px; /* Default 600px se thoda kam
    } */
    /* Isse .game-container bhi chhota hoga as it's aspect-ratio 1/1 */

}

/* Agar aapko Portrait mode mein iPad ke liye alag se karna hai (jahan height width se zyada hoti hai) */
@media (min-aspect-ratio: 7/10) and (max-aspect-ratio: 9/10) and (min-width: 768px) {
    /* Portrait iPad (e.g., 768x1024, ratio 0.75) */
    /* Yahan par bhi wahi adjustments try kar sakte hain agar problem aati hai */
    .tile-container {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 17px; /* Ya 16px */
    }
}