@font-face {
        font-family: 'DotDigital7';
        src: url(../Fonts/dot_digital-7.ttf) format('truetype');
        }

        body {
        background-color: pink;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        }

        .container {
        text-align: center;
        }

        .title-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 5px;
        }

        .icon {
        position: absolute;
        top: -140px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        }

        .icon img {
        width: 180px;
        }

        .pixel-grid {
        font-family: 'DotDigital7', monospace;
        font-size: 80px;
        color: white;
        background-color: #d88d8d;
        padding: 10px 30px;
        border-radius: 12px;
        letter-spacing: 5px;
        line-height: 1;
        display: inline-block;
        position: relative;
        z-index: 2;
        }

        .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 40px;
        transition: opacity 0.3s ease;
        }

        .menu-button {
        display: inline-block;
        font-size: 24px;
        font-weight: bold;
        color: #c06060;
        background-color: #fbdada;
        border: 5px solid #c06060;
        border-radius: 20px;
        padding: 15px 40px;
        text-decoration: none;
        width: 300px;
        text-align: center;
        transition: transform 0.2s ease;
        }

        .menu-button:hover {
        transform: scale(1.05);
        }

        .difficulty-container {
        display: none;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        gap: 30px;
        }

        .difficulty-title {
        font-size: 28px;
        font-weight: bold;
        color: #c06060;
        }

        .difficulty-options {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 20px;
        }

        .difficulty-card {
        background-color: #fbdada;
        border: 4px solid #c06060;
        border-radius: 20px;
        padding: 30px 20px;
        width: 220px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
        text-align: center;
        }

        .difficulty-card:hover {
        transform: scale(1.05);
        }

        .difficulty-card h3 {
        font-size: 24px;
        color: #c06060;
        margin-bottom: 10px;
        }

        .difficulty-card p {
        font-size: 16px;
        color: #555;
        margin-bottom: 15px;
        }

        .difficulty-button {
        background-color: #c06060;
        color: white;
        padding: 10px 20px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.2s ease;
        display: inline-block;
        }

        .difficulty-button:hover {
        background-color: #a04848;
        }

        .game-page-wrapper {
            display: flex;
            background-color: #fbdada; 
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            max-width: fit-content; 
            overflow: hidden; 
            border: 5px solid #c06060; 
        }

        .game-sidebar {
            background-color: #c06060; 
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: center;
            border-right: 5px solid #a04848;
        }

        .sidebar-button {
            background-color: #fbdada; 
            border: 3px solid #e09999; 
            border-radius: 50%; 
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
            box-shadow: 0 4px 0px #a04848; 
            position: relative;
            top: 0;
            outline: none;
        }

        .sidebar-button i {
            font-size: 1.8em;
            color: #c06060; 
        }

        .sidebar-button:hover {
            background-color: #f0caca;
            transform: translateY(-2px);
            box-shadow: 0 6px 0px #8a3a3a;
        }

        .sidebar-button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0px #8a3a3a;
        }

        .sidebar-button.active-mode { 
            background-color: #c06060;
            border-color: #fbdada;
        }
        .sidebar-button.active-mode i {
            color: #fbdada;
        }

        .game-main-content {
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .game-info {
            margin-bottom: 25px;
            font-size: 1.2em;
            color: #555;
            text-align: center;
            font-weight: bold;
        }
        .game-info span {
            font-weight: bold;
            color: #c06060;
        }

        .game-board {
            display: grid;
            border: 5px solid #a04848;
            margin: 20px auto;
            background-color: #e0e0e0; 
            box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
            max-width: fit-content;
        }

        .cell {
            width: 40px; 
            height: 40px;
            background-color: #dedede;
            border: 2px solid #bbb;
            border-bottom-color: #777;
            border-right-color: #777;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 1.5em;
            cursor: pointer;
            position: relative;
            user-select: none;
            transition: background-color 0.1s ease;
            box-sizing: border-box; 
            color: #333;
        }
        .cell {
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        position: relative;
        text-align: center;
        font-size: 18px ;
        font-weight: bold;
}

        .cell:hover:not(.revealed):not(.flagged) {
    background-color: #ccc;
            }
        .cell.revealed {
            background-color: #f5f5f5;
            border: 1px solid #ccc; 
            cursor: default;
            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
        }

        .cell.val-1 { color: #0000FF; } 
        .cell.val-2 { color: #008000; } 
        .cell.val-3 { color: #FF0000; } 
        .cell.val-4 { color: #000080; } 
        .cell.val-5 { color: #800000; } 
        .cell.val-6 { color: #008080; } 
        .cell.val-7 { color: #000000; } 
        .cell.val-8 { color: #808080; } 

        .cell.mine {
        background-color: #ff6b6b;
        color: white;
        font-size: 1.8em;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        .cell.mine::before {
            content: '💣';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1em;
            z-index: 5;
            pointer-events: none;

        }

        .cell.flagged {
            background-color: #ffeb3b; 
            color: black;
            font-size: 1em;
        }

        .cell.flagged::before {
            content: '🚩';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1em;
            z-index: 10; 
            pointer-events: none;
        }

        .cell.incorrect-flag { 
            background-color: #b30000; 
            color: white;
        }
        .cell.incorrect-flag::before {
            content: '✖️'; 
        }

        .game-status {
            font-size: 1.8em;
            font-weight: bold;
            margin-top: 20px;
            color: #dc3545; 
            font-family: 'DotDigital7', monospace; 
            text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
        }

        .game-status.win {
            color: #28a745; 
        }

        .game-controls {
            margin-top: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .game-controls .menu-button {
            font-size: 1.2em;
            padding: 12px 30px;
            width: auto;
            min-width: 150px;
        }

      
        @media (max-width: 768px) {
            .game-page-wrapper {
                flex-direction: column; 
                max-width: 100%;
                width: 100%;
                margin: 10px;
            }
            .game-sidebar {
                flex-direction: row; 
                width: 100%;
                padding: 10px;
                border-right: none;
                border-bottom: 5px solid #a04848; 
                justify-content: space-around;
                gap: 15px;
            }
            .sidebar-button { width: 50px; height: 50px; }
            .sidebar-button i { font-size: 1.5em; }

            .game-main-content {
                padding: 20px;
            }
            .game-info { font-size: 1em; margin-bottom: 15px; }
            .cell { width: 30px; height: 30px; font-size: 1.2em; } 
            .game-status { font-size: 1.4em; }
            .game-controls .menu-button { font-size: 1em; padding: 10px 25px; min-width: 120px; }
        }

        @media (max-width: 480px) {
            .game-page-wrapper { margin: 5px; border-width: 3px; }
            .game-sidebar { padding: 8px; border-bottom-width: 3px; }
            .sidebar-button { width: 45px; height: 45px; }
            .sidebar-button i { font-size: 1.3em; }
            .game-main-content { padding: 15px; }
            .game-info { font-size: 0.9em; margin-bottom: 10px; }
            .cell { width: 25px; height: 25px; font-size: 1em; border-width: 1px; } 
            .game-status { font-size: 1.2em; }
            .game-controls .menu-button { font-size: 0.9em; padding: 8px 20px; min-width: 100px; }
        }
     
        .leaderboard-container {
            background-color: #fbdada; 
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 900px; 
            width: 90%; 
            margin-top: 20px;
            margin-bottom: 20px;
            border: 5px solid #c06060; 
        }

        .leaderboard-title {
            font-family: 'DotDigital7', monospace;
            font-size: 3em; 
            color: #c06060;
            text-shadow: 3px 3px 0px #a04848;
            margin-bottom: 40px;
            line-height: 1;
        }

        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            border: 2px solid #e09999; 
        }

        .leaderboard-table th,
        .leaderboard-table td {
            border: 1px solid #e0e0e0; 
            padding: 12px 15px;
            text-align: left;
            font-size: 1.1em;
            vertical-align: middle;
            white-space: nowrap;
            color: #333;
        }

        .leaderboard-table th {
            background-color: #c06060; 
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            padding: 15px 15px;
        }

        .col-rank { width: 50px; text-align: center; }
        .col-icon { width: 60px; text-align: center; }
        .col-score { width: 100px; text-align: center; }
        .col-player-name { width: 200px; }
        .col-difficulty { width: 180px; text-align: center; }
        .col-date { width: 150px; text-align: center; }

        .leaderboard-table tr:nth-child(even) {
            background-color: #fbdada; 
        }

        .leaderboard-table tr:hover {
            background-color: #f0caca; 
        }

        .rank-cell { text-align: center; font-weight: bold; color: #c06060; font-size: 1.2em;}
        .score-cell { text-align: center; font-weight: bold; color: #007bff; }
        .player-name-cell { font-family: 'Arial', sans-serif; color: #555; }
        .difficulty-cell { text-align: center; color: #777; font-size: 0.9em; }
        .date-cell { text-align: center; color: #888; font-size: 0.85em; }

        .leaderboard-icon {
            font-size: 1.5em;
            color: #a04848; 
        }

        .nav-links-leaderboard {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .nav-links-leaderboard .menu-button {
            font-size: 18px;
            padding: 10px 25px;
            width: auto;
            min-width: 150px;
            margin: 0; 
        }

        .clear-leaderboard-button {
            background-color: #dc3545; 
            border-color: #b30000;
            box-shadow: 0 5px 0px #b30000;
        }

        .clear-leaderboard-button:hover {
            background-color: #c82333;
            border-color: #9c0000;
            box-shadow: 0 7px 0px #9c0000;
        }

        .clear-leaderboard-button:active {
            transform: translateY(3px);
            box-shadow: 0 2px 0px #9c0000;
        }

        @media (max-width: 768px) {
            .leaderboard-container {
                padding: 20px;
                margin: 10px;
                border-width: 3px;
            }
            .leaderboard-title { font-size: 2.2em; margin-bottom: 30px; }
            .leaderboard-table th, .leaderboard-table td { padding: 8px 10px; font-size: 0.9em; }
            .col-rank { width: 40px; }
            .col-icon { width: 50px; }
            .col-score { width: 80px; }
            .col-player-name { width: 120px; }
            .col-difficulty { width: 100px; }
            .col-date { width: 120px; }
            .leaderboard-icon { font-size: 1.2em; }
            .nav-links-leaderboard { flex-direction: column; gap: 15px; }
            .nav-links-leaderboard .menu-button { font-size: 16px; padding: 8px 20px; min-width: 120px; }
        }

        @media (max-width: 480px) {
            .leaderboard-container {
                padding: 15px;
                margin: 5px;
            }
            .leaderboard-title { font-size: 1.8em; margin-bottom: 25px; }
            .leaderboard-table { display: block; overflow-x: auto; white-space: nowrap; }
            .leaderboard-table th, .leaderboard-table td { font-size: 0.8em; padding: 6px 8px; }
            .col-rank, .col-icon { width: 30px; }
            .col-score { width: 70px; }
            .col-player-name { width: 100px; }
            .col-difficulty { width: 90px; }
            .col-date { width: 100px; }
            .nav-links-leaderboard .menu-button { font-size: 14px; padding: 6px 15px; min-width: 100px; }
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000; 
        }

        .name-input-popup {
            background-color: #fbdada; 
            padding: 30px 40px;
            border-radius: 20px;
            border: 5px solid #c06060;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            text-align: center;
            width: 90%;
            max-width: 450px;
            transform: scale(0.9);
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0; 
        }

        .name-input-popup.active {
            transform: scale(1);
            opacity: 1;
        }

        .name-input-popup h2 {
            font-family: 'DotDigital7', monospace;
            font-size: 2.2em;
            color: #c06060;
            margin-bottom: 25px;
            text-shadow: 2px 2px 0px #a04848;
        }

        .name-input-popup label {
            display: block;
            font-size: 1.2em;
            color: #555;
            margin-bottom: 10px;
        }

        .name-input-popup input[type="text"] {
            width: calc(100% - 20px); 
            padding: 12px 10px;
            margin-bottom: 25px;
            border: 3px solid #c06060;
            border-radius: 10px;
            font-size: 1.1em;
            outline: none;
            text-align: center;
            font-family: Arial, sans-serif;
            color: #333;
        }

        .name-input-popup input[type="text"]:focus {
            border-color: #a04848;
            box-shadow: 0 0 0 3px rgba(192, 96, 96, 0.3);
        }

        .name-input-popup .popup-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

       
        .name-input-popup .menu-button {
            font-size: 1.1em;
            padding: 12px 30px;
            width: auto;
            min-width: 120px;
            margin: 0; 
        }

        .name-input-popup .menu-button.cancel-button {
            background-color: #999;
            border-color: #777;
            box-shadow: 0 5px 0px #777;
            color: white;
        }
        .name-input-popup .menu-button.cancel-button:hover {
            background-color: #777;
            border-color: #555;
            box-shadow: 0 7px 0px #555;
        }
        .name-input-popup .menu-button.cancel-button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0px #555;
        }

        
        @media (max-width: 600px) {
            .name-input-popup {
                padding: 20px 25px;
                max-width: 95%;
            }
            .name-input-popup h2 {
                font-size: 1.8em;
            }
            .name-input-popup input[type="text"] {
                padding: 10px;
                font-size: 1em;
            }
            .name-input-popup .menu-button {
                font-size: 1em;
                padding: 10px 25px;
                min-width: 100px;
            }
        }
        .options-container {
            display: none; 
            flex-direction: column;
            align-items: center;
            margin-top: 30px;
            gap: 30px;
        }

        .options-title {
            font-size: 28px;
            font-weight: bold;
            color: #c06060;
        }

        .option-item {
            background-color: #fbdada;
            border: 4px solid #c06060;
            border-radius: 20px;
            padding: 20px 30px;
            width: 350px; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
            text-align: center;
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            cursor: pointer; 
        }

        .option-item:hover {
            transform: scale(1.02);
        }

        .option-item h3 {
            font-size: 24px;
            color: #c06060;
            margin: 0;
            flex-grow: 1; 
            text-align: left; 
        }

        .toggle-button {
            background-color: #c06060;
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            border: none;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s ease;
            min-width: 100px; 
        }

        .toggle-button:hover {
            background-color: #a04848;
        }

        .toggle-button.off {
            background-color: #999; 
        }

        .toggle-button.off:hover {
            background-color: #777;
        }

      
        @media (max-width: 768px) {
            .options-container {
                padding: 15px;
            }
            .options-title {
                font-size: 2.2em;
            }
            .option-item {
                flex-direction: column; 
                align-items: flex-start; 
                width: 80%;
                max-width: 300px;
                padding: 15px 20px;
            }
            .option-item h3 {
                margin-bottom: 10px;
            }
            .toggle-button {
                width: 100%;
                min-width: unset;
            }
        }
        @media (max-width: 480px) {
            .options-title {
                font-size: 1.8em;
            }
            .option-item {
                width: 90%;
                padding: 12px 15px;
            }
            .option-item h3 {
                font-size: 1.2em;
            }
            .toggle-button {
                font-size: 0.9em;
                padding: 8px 15px;
            }
        }
       
        .volume-slider-container {
            display: flex;
            align-items: center;
            gap: 15px; 
            width: 100%; 
            margin-top: 10px; 
        }

        .volume-slider-container i {
            font-size: 1.5em;
            color: #c06060;
            min-width: 25px; 
            text-align: center;
        }

        input[type="range"] {
            -webkit-appearance: none; 
            width: 100%;
            height: 10px; 
            background: #e0e0e0; 
            border-radius: 5px;
            outline: none;
            transition: opacity .2s;
            opacity: 0.9;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
        }

        input[type="range"]:hover {
            opacity: 1;
        }

        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px; 
            height: 25px;
            background: #c06060; 
            border: 3px solid #fbdada; 
            border-radius: 50%; 
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        input[type="range"]::-moz-range-thumb {
            width: 25px;
            height: 25px;
            background: #c06060;
            border: 3px solid #fbdada;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            background-color: #a04848;
            transform: scale(1.05);
        }
        input[type="range"]::-moz-range-thumb:hover {
            background-color: #a04848;
            transform: scale(1.05);
        }

       
        @media (max-width: 768px) {
            .volume-slider-container {
                flex-direction: row; 
                gap: 10px;
            }
            .volume-slider-container i {
                font-size: 1.2em;
            }
            input[type="range"] {
                height: 8px;
            }
            input[type="range"]::-webkit-slider-thumb,
            input[type="range"]::-moz-range-thumb {
                width: 20px;
                height: 20px;
            }
            .cell {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cell i {
  font-size: 18px;   
  line-height: 1;
  pointer-events: none;
}
.cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
    margin: 0;
  padding: 0;
  pointer-events: none;
}

 }