/* 
 * Next Tic Tac Toe - Main CSS File
 * A timeless X and O strategy game
 */

/* -------------
 * CSS Variables
 * ------------- */

:root {
    /* Colors */
    --primary-color: #3498db; /* Blue for primary elements */
    --primary-color-dark: #2980b9; /* Darker blue for hover states */
    --secondary-color: #2ecc71; /* Green for secondary elements */
    --accent-color: #e74c3c; /* Red for accents and highlights */
    --background-color: #f8f9fa; /* Light gray for background */
    --text-color: #2d3748; /* Dark gray for text */
    --border-color: #cbd5e0; /* Medium gray for borders */
    --border-color-dark: #bdc3c7; /* Darker gray for border hover */
    --cell-hover-color: #edf2f7; /* Light blue-gray for cell hover */
    --x-color: var(--primary-color); /* X player color */
    --o-color: var(--accent-color); /* O player color */
    --draw-color: var(--secondary-color); /* Draw color */
    --white: #ffffff; /* White for backgrounds */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Shadow color */
    --highlight-color: rgba(46, 204, 113, 0.2); /* Color for highlighting winning cells */
    
    /* Sizing */
    --board-size: min(65vh, 65vw, 450px);
    --cell-size: calc(var(--board-size) / 3);
    --border-radius: 8px;
    --button-spacing: 10px;
    --standard-padding: clamp(10px, 3vw, 15px);
    --small-padding: clamp(6px, 2vw, 10px);
    --button-padding: clamp(8px, 2vw, 10px) clamp(10px, 3vw, 15px);
    --standard-gap: clamp(12px, 3vh, 20px);
    --small-gap: clamp(6px, 2vw, 10px);
    --tiny-gap: clamp(3px, 1vw, 5px);
    --grid-gap: clamp(4px, 1vw, 6px);
    --box-shadow-standard: 0 4px 6px var(--shadow-color);
    --box-shadow-large: 0 6px 12px var(--shadow-color);
    --outline-width: 3px;
    --outline-offset: 2px;
    --button-y-offset: -2px;
    
    /* Typography */
    --font-family: 'Inter', Arial, sans-serif;
    --button-font-size: clamp(0.875rem, 2vw, 1rem);
    --score-value-size: clamp(1.1rem, 2.5vw, 1.4rem);
    --font-weight-bold: 600;
    --line-height: 1.6;

    /* Icon Size */
    --icon-size: clamp(1.5rem, 5vw, 2.5rem);
    --game-icon-size: clamp(2.5rem, 5vw, 4rem);
    
    /* Transitions */
    --transition-speed: 0.3s;
    --animation-duration-short: 0.3s;
    --animation-duration-long: 2s;
}

/* -----------
 * Base Styles
 * ----------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.container {
    width: 100%;
    height: 100%;
    padding: max(1vh, 8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--standard-gap);
    padding: max(1vh, 5px);
}

/* ------------------
 * Game Mode Selector
 * ------------------ */

.game-mode-selector {
    width: 100%;
    max-width: var(--board-size);
    margin-bottom: max(0.5vh, var(--small-padding));
}

.mode-toggle {
    display: flex;
    justify-content: space-between;
    gap: var(--button-spacing);
}

.mode-btn {
    flex: 1;
    padding: var(--button-padding);
    background-color: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    font-size: var(--button-font-size);
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.mode-btn.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.mode-btn:hover:not(.active) {
    background-color: var(--cell-hover-color);
}

/* ----------------
 * Game Information
 * ---------------- */

.game-info {
    width: 100%;
    max-width: var(--board-size);
}

.scoreboard {
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: clamp(8px, 2.5vw, var(--standard-padding));
    box-shadow: var(--box-shadow-standard);
    width: 100%;
}

.score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tiny-gap);
    flex: 1;
    padding: 0 clamp(2px, 1vw, 5px);
}

.score i {
    transition: transform var(--transition-speed) ease, filter var(--transition-speed) ease;
}

/* Font Awesome Icons */
.fa-x, .fa-o, .fa-handshake {
    font-size: var(--icon-size) !important;
}

.fa-x {
    color: var(--x-color) !important;
}

.fa-o {
    color: var(--o-color) !important;
}

.fa-handshake {
    color: var(--draw-color) !important;
}

.score span {
    font-size: var(--score-value-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--tiny-gap);
}

.x-score span {
    color: var(--x-color);
}

.o-score span {
    color: var(--o-color);
}

.draws span {
    color: var(--draw-color);
}

/* Turn Indicator Animation */
.active-turn {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    filter: drop-shadow(0 0 5px currentColor);
    animation: pulse var(--animation-duration-long) infinite;
}

/* ----------
 * Game Board
 * ---------- */

.game-board {
    width: 100%;
    display: flex;
    justify-content: center;
}

.board {
    width: var(--board-size);
    height: var(--board-size);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--grid-gap);
    background-color: var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow-large);
    aspect-ratio: 1 / 1;
}

.cell {
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--cell-size) * 0.6);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    position: relative;
    aspect-ratio: 1 / 1;
}

.cell:hover {
    background-color: var(--cell-hover-color);
}

/* Font Awesome Icons in Cells */
.cell .game-icon {
    font-size: var(--game-icon-size);
    animation: zoomIn var(--animation-duration-short);
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cell.x {
    color: var(--x-color) !important;
}

.cell.o {
    color: var(--o-color) !important;
}

/* Highlight Winning Cells */
.cell.highlight {
    background-color: var(--highlight-color);
}

/* -------------
 * Game Controls
 * ------------- */

.game-controls {
    width: 100%;
    max-width: var(--board-size);
    display: flex;
    justify-content: space-between;
    gap: var(--button-spacing);
    margin-top: max(0.5vh, var(--small-padding));
}

.btn {
    padding: var(--button-padding);
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    font-size: var(--button-font-size);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.btn:hover {
    background-color: var(--primary-color-dark);
    -webkit-transform: translateY(var(--button-y-offset));
    -moz-transform: translateY(var(--button-y-offset));
    -ms-transform: translateY(var(--button-y-offset));
    -o-transform: translateY(var(--button-y-offset));
    transform: translateY(var(--button-y-offset));
}

.btn:active {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

#restart-btn, #new-game-btn {
    flex: 1;
}

#sound-toggle, #help-btn {
    width: 50px;
    flex: 0 0 auto;
}

/* ----------------
 * Help Modal Styles
 * ---------------- */

.help-content {
    text-align: left;
    max-height: 65vh;
    overflow-y: auto;
    padding: clamp(16px, 4vw, 24px);
}

.help-content::-webkit-scrollbar {
    width: 6px;
}

.help-content::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: var(--border-radius);
}

.help-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--border-radius);
}

.help-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-color-dark);
}

.help-section {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: clamp(16px, 4vw, 20px);
    margin-bottom: clamp(16px, 3vw, 20px);
    border: 1px solid var(--border-color);
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-section h3 {
    color: var(--text-color);
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-bold);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.help-section p {
    color: var(--text-color);
    font-size: var(--button-font-size);
    line-height: 1.6;
    margin-bottom: 10px;
}

.help-section p:last-child {
    margin-bottom: 0;
}

.help-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-section li {
    color: var(--text-color);
    font-size: var(--button-font-size);
    line-height: 1.7;
    padding-left: 16px;
    position: relative;
    margin-bottom: 6px;
}

.help-section li:last-child {
    margin-bottom: 0;
}

.help-section li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--text-color);
}

/* Custom SweetAlert2 styling for help modal */
.swal2-popup.swal2-help-modal {
    padding: 0 !important;
    overflow: hidden !important;
}

.swal2-popup.swal2-help-modal .swal2-title {
    background-color: var(--white) !important;
    color: var(--text-color) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--button-padding) !important;
    padding-right: 50px !important;
    margin: 0 !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--font-weight-bold) !important;
    position: relative !important;
}

.swal2-popup.swal2-help-modal .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--background-color);
}

.swal2-popup.swal2-help-modal .swal2-actions {
    margin: 0 !important;
    padding: clamp(12px, 3vw, 16px) !important;
    background-color: var(--white);
    border-top: 1px solid var(--border-color);
    width: 100% !important;
}

.swal2-popup.swal2-help-modal .swal2-confirm {
    margin: 0 !important;
}

.swal2-popup.swal2-help-modal .swal2-close {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    margin-top: -14px !important;
    color: var(--text-color) !important;
    font-size: clamp(1rem, 3vw, 1.25rem) !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--border-radius) !important;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease !important;
    z-index: 10 !important;
}

.swal2-popup.swal2-help-modal .swal2-close:hover {
    -webkit-transform: translateY(var(--button-y-offset)) !important;
    -moz-transform: translateY(var(--button-y-offset)) !important;
    -ms-transform: translateY(var(--button-y-offset)) !important;
    -o-transform: translateY(var(--button-y-offset)) !important;
    transform: translateY(var(--button-y-offset)) !important;
}

.swal2-popup.swal2-help-modal .swal2-close:active {
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -o-transform: translateY(0) !important;
    transform: translateY(0) !important;
}

.swal2-popup.swal2-help-modal .swal2-close:focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* Remove default SweetAlert2 close button positioning */
.swal2-popup.swal2-help-modal .swal2-close:focus {
    box-shadow: none !important;
}

/* -------------------------
 * SweetAlert2 Custom Styles
 * ------------------------- */

.swal2-popup {
    font-family: var(--font-family) !important;
    border-radius: var(--border-radius) !important;
    width: min(90vw, 32em) !important;
    padding: clamp(1em, 3vw, 1.25em) !important;
    margin: 0 !important;
}

.swal2-title {
    color: var(--text-color) !important;
    font-size: clamp(1.2em, 4vw, 1.875em) !important;
}

.swal2-html-container {
    font-size: clamp(0.9em, 3vw, 1.125em) !important;
}

/* SweetAlert2 Buttons Share Common Styles */
.swal2-confirm,
.swal2-cancel {
    border-radius: var(--border-radius) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--button-font-size) !important;
    padding: var(--button-padding) !important;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease !important;
}

.swal2-confirm {
    background-color: var(--primary-color) !important;
}

.swal2-confirm:hover {
    background-color: var(--primary-color-dark) !important;
    -webkit-transform: translateY(var(--button-y-offset)) !important;
    -moz-transform: translateY(var(--button-y-offset)) !important;
    -ms-transform: translateY(var(--button-y-offset)) !important;
    -o-transform: translateY(var(--button-y-offset)) !important;
    transform: translateY(var(--button-y-offset)) !important;
}

.swal2-cancel {
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.swal2-cancel:hover {
    background-color: var(--border-color-dark) !important;
    -webkit-transform: translateY(var(--button-y-offset)) !important;
    -moz-transform: translateY(var(--button-y-offset)) !important;
    -ms-transform: translateY(var(--button-y-offset)) !important;
    -o-transform: translateY(var(--button-y-offset)) !important;
    transform: translateY(var(--button-y-offset)) !important;
}

/* Common Active State for SweetAlert Buttons */
.swal2-confirm:active,
.swal2-cancel:active {
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -o-transform: translateY(0) !important;
    transform: translateY(0) !important;
}

/* SweetAlert2 Focus Styles for Accessibility */
.swal2-confirm:focus-visible,
.swal2-cancel:focus-visible,
.swal2-deny:focus-visible {
    outline: var(--outline-width) solid var(--primary-color) !important;
    outline-offset: var(--outline-offset) !important;
    box-shadow: none !important;
}

/* Remove Outline for Mouse Users */
.swal2-confirm:focus:not(:focus-visible),
.swal2-cancel:focus:not(:focus-visible),
.swal2-deny:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* AI Difficulty Selection */
.ai-difficulty-selection {
    display: flex;
    justify-content: space-between;
    gap: var(--small-gap);
    margin-top: var(--standard-padding);
}

.swal-difficulty-btn {
    flex: 1;
    padding: var(--small-padding);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--white);
    color: var(--text-color);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
}

.swal-difficulty-btn.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.swal-difficulty-btn:hover:not(.active) {
    background-color: var(--cell-hover-color);
    -webkit-transform: translateY(var(--button-y-offset));
    -moz-transform: translateY(var(--button-y-offset));
    -ms-transform: translateY(var(--button-y-offset));
    -o-transform: translateY(var(--button-y-offset));
    transform: translateY(var(--button-y-offset));
}

.swal-difficulty-btn.active:hover {
    background-color: var(--primary-color-dark);
    -webkit-transform: translateY(var(--button-y-offset));
    -moz-transform: translateY(var(--button-y-offset));
    -ms-transform: translateY(var(--button-y-offset));
    -o-transform: translateY(var(--button-y-offset));
    transform: translateY(var(--button-y-offset));
}

.swal-difficulty-btn:active {
    background-color: var(--primary-color);
    -webkit-transform: translateY(var(--button-y-offset)) !important;
    -moz-transform: translateY(var(--button-y-offset)) !important;
    -ms-transform: translateY(var(--button-y-offset)) !important;
    -o-transform: translateY(var(--button-y-offset)) !important;
    transform: translateY(var(--button-y-offset)) !important;
}

.swal-difficulty-btn.active:active {
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -o-transform: translateY(0) !important;
    transform: translateY(0) !important;
}

/* -------------
 * Accessibility
 * ------------- */

/* Focus Styles for Keyboard Navigation */
button:focus-visible,
.cell:focus-visible {
    outline: var(--outline-width) solid var(--primary-color);
    outline-offset: var(--outline-offset);
    z-index: 1;
    position: relative;
}

/* Remove Outline for Mouse Users */
button:focus:not(:focus-visible),
.cell:focus:not(:focus-visible) {
    outline: none;
}

/* -------------
 * Media Queries
 * ------------- */

/* Extra Large Screens (1440px+) */
@media (min-width: 1440px) {
    :root {
        --board-size: min(50vh, 50vw, 550px);
        --standard-gap: min(4vh, 25px);
        --icon-size: min(3vh, 3rem);
        --game-icon-size: min(6vh, 5rem);
    }
    
    /* Compact Layout Vertically for Very Wide Screens */
    @media (min-aspect-ratio: 16/9) {
        :root {
            --board-size: min(60vh, 40vw, 500px);
            --standard-gap: min(3vh, 20px);
        }
    }
    
    /* Ensure All Content Fits in the Viewport on Very Large Displays */
    @media (min-height: 1000px) {
        .container {
            justify-content: center;
        }
        
        main {
            gap: min(3vh, 20px);
        }
    }
}

/* Large Desktops (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    :root {
        --board-size: min(50vh, 45vw, 500px);
        --standard-gap: min(3vh, 20px);
        --icon-size: min(2.5vh, 2.5rem);
        --game-icon-size: min(5vh, 4.5rem);
    }
}

/* Regular Desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --board-size: min(55vh, 45vw, 450px);
        --standard-gap: min(2.5vh, 18px);
        --icon-size: min(2.2vh, 2.2rem);
        --game-icon-size: min(4.5vh, 4rem);
    }
}

/* Small Desktops and Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --board-size: min(60vh, 80vw, 400px);
        --standard-gap: min(2vh, 15px);
        --icon-size: min(2vh, 2rem);
        --game-icon-size: min(4vh, 3.5rem);
    }
    
    /* Adjust for Different Orientations */
    @media (orientation: landscape) {
        :root {
            --board-size: min(65vh, 50vw, 400px);
        }
    }
}

/* Tablets and Large Phones (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --board-size: min(60vh, 85vw, 380px);
        --standard-gap: clamp(12px, 2vh, 18px);
        --grid-gap: clamp(4px, 1vh, 6px);
        --icon-size: clamp(1.5rem, 3vh, 2rem);
        --game-icon-size: clamp(2.5rem, 4vh, 3.5rem);
        --button-font-size: clamp(0.875rem, 2.5vw, 1rem);
    }
    
    /* Portrait Orientation Adjustments */
    @media (orientation: portrait) {
        .game-controls {
            flex-wrap: wrap;
        }
        
        #restart-btn, #new-game-btn {
            flex: 0 0 calc(50% - var(--button-spacing) / 2);
        }
        
        #sound-toggle, #help-btn {
            margin-top: 8px;
            width: 100%;
        }
    }
}

/* Mobile Phones (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    :root {
        --board-size: min(65vh, 90vw);
        --standard-gap: clamp(10px, 2vh, 15px);
        --icon-size: clamp(1.4rem, 3vh, 1.8rem);
        --game-icon-size: clamp(2.2rem, 4vh, 3rem);
        --button-font-size: clamp(0.8rem, 2.5vw, 0.95rem);
        --button-padding: clamp(8px, 1.5vh, 12px) clamp(10px, 3vw, 15px);
    }
    
    .game-controls {
        flex-direction: column;
    }
    
    #sound-toggle, #help-btn {
        width: 100%;
        margin-top: max(0.5vh, 5px);
    }
}

/* Small Mobile Phones (360px - 479px) */
@media (max-width: 479px) {
    :root {
        --board-size: min(60vh, 92vw);
        --standard-gap: clamp(8px, 1.5vh, 12px);
        --small-gap: clamp(6px, 1vh, 10px);
        --grid-gap: clamp(3px, 0.8vh, 5px);
        --icon-size: clamp(1.3rem, 2.5vh, 1.6rem);
        --game-icon-size: clamp(2rem, 3.5vh, 2.8rem);
        --button-font-size: clamp(0.75rem, 2.2vw, 0.9rem);
        --button-padding: clamp(6px, 1.2vh, 10px) clamp(8px, 2.5vw, 12px);
    }
    
    .game-controls {
        flex-direction: column;
    }
    
    #sound-toggle, #help-btn {
        width: 100%;
        margin-top: max(0.5vh, 5px);
    }
    
    .mode-toggle {
        margin-bottom: max(0.5vh, 3px);
    }
    
    .scoreboard {
        padding: clamp(6px, 1.5vh, 10px);
    }
}

/* Extra Small Mobile Phones (Less than 360px) */
@media (max-width: 359px) {
    :root {
        --board-size: min(55vh, 95vw);
        --standard-gap: clamp(6px, 1.2vh, 10px);
        --small-gap: clamp(4px, 0.8vh, 8px);
        --grid-gap: clamp(2px, 0.5vh, 4px);
        --icon-size: clamp(1.2rem, 2.2vh, 1.4rem);
        --game-icon-size: clamp(1.8rem, 3vh, 2.5rem);
        --button-font-size: clamp(0.7rem, 2vw, 0.85rem);
        --button-padding: clamp(5px, 1vh, 8px) clamp(6px, 2vw, 10px);
    }
    
    .scoreboard {
        padding: clamp(5px, 1vh, 8px);
    }
    
    .score span {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    }
    
    .mode-btn, .btn {
        padding: clamp(5px, 1vh, 8px) clamp(6px, 2vw, 10px);
    }
    
    .swal2-popup {
        padding: clamp(0.8em, 2vh, 1em) !important;
    }
}

/* ---------------------------------------
 * Special Layouts and Device Orientations
 * --------------------------------------- */

/* Landscape Mode */
@media (orientation: landscape) {
    .container {
        padding: min(2vh, 10px);
    }
    
    :root {
        --standard-gap: min(2vh, 15px);
    }
    
    /* Special Layout for Very Short Heights */
    @media (max-height: 500px) {
        main {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            max-width: 100%;
            padding: min(1vh, 5px);
        }
        
        .game-mode-selector, .game-info {
            width: 40%;
            max-width: none;
            margin: 0;
        }
        
        .game-board {
            width: 45vh;
            margin: 0 auto;
        }
        
        .game-controls {
            width: 40%;
            max-width: none;
        }
    }
}

/* Very Short Height Landscape Mode */
@media (max-height: 375px) and (orientation: landscape) {
    :root {
        --board-size: min(80vh, 40vw);
        --standard-gap: clamp(5px, 1vh, 8px);
        --icon-size: clamp(1.1rem, 2vh, 1.4rem);
        --game-icon-size: clamp(1.8rem, 3vh, 2.5rem);
        --button-font-size: clamp(0.7rem, 1.8vw, 0.85rem);
        --button-padding: clamp(4px, 0.8vh, 6px) clamp(6px, 1.5vw, 10px);
    }
    
    main {
        gap: clamp(4px, 0.8vh, 6px);
    }
    
    .game-mode-selector, .game-info, .game-controls {
        width: 35%;
    }
    
    .game-board {
        width: min(90vh, 35vw);
    }
    
    .scoreboard {
        padding: clamp(4px, 0.8vh, 6px);
    }
    
    .btn {
        font-size: clamp(0.65rem, 1.5vw, 0.8rem);
    }
}

/* ---------------------------------------------
 * High-DPI Screens and Special User Preferences
 * --------------------------------------------- */

/* High-DPI Screens (Retina Displays) */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
    .container, .board, .cell, .scoreboard, .btn {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .active-turn {
        filter: drop-shadow(0 0 3px currentColor);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}

/* ------------
 * Print Styles
 * ------------ */
 
@media print {
    body {
        background-color: #fff;
    }
    
    .game-controls, #sound-toggle, #help-btn {
        display: none !important;
    }
    
    .container {
        padding: 0;
    }
    
    .board {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .ad-container {
        display: none !important;
    }
}

/* -------------
 * Ad Placements
 * ------------- */

.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
}

.ad-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-bold);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Desktop Ad Placements (Left & Right) */
.ad-left,
.ad-right {
    width: 160px;
    min-height: 600px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.ad-left {
    left: 20px;
}

.ad-right {
    right: 20px;
}

/* Hide desktop ads on mobile and small tablets */
@media (max-width: 767px) {
    .ad-left,
    .ad-right {
        display: none;
    }
}

/* Tablet ad sizing (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .ad-left,
    .ad-right {
        width: 160px;
        min-height: 500px;
    }
    
    .ad-left {
        left: 10px;
    }
    
    .ad-right {
        right: 10px;
    }
}

/* Desktop ad sizing (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .ad-left,
    .ad-right {
        width: 160px;
        min-height: 600px;
    }
}

/* Large desktop ad sizing (1440px+) */
@media (min-width: 1440px) {
    .ad-left,
    .ad-right {
        width: 200px;
        min-height: 700px;
    }
}

/* Extra large desktop ad sizing (1600px+) */
@media (min-width: 1600px) {
    .ad-left,
    .ad-right {
        width: 250px;
        min-height: 800px;
    }
}