/* ===== CSS Variables & Color Palette ===== */
:root {
    /* Scaling */
    --scale: 2;
    --cell-size: calc(16px * var(--scale));  /* 32px */

    /* Windows 3.1 System Colors */
    --win-gray: #c0c0c0;
    --win-dark-gray: #808080;
    --win-light-gray: #dfdfdf;
    --win-white: #ffffff;
    --win-black: #000000;
    --win-blue: #000080;
    --win-dark-shadow: #000000;

    /* Cell colors */
    --cell-gray: #c0c0c0;

    /* Number colors (1-8) */
    --num-1: #0000ff;  /* Blue */
    --num-2: #008000;  /* Green */
    --num-3: #ff0000;  /* Red */
    --num-4: #000080;  /* Dark blue */
    --num-5: #800000;  /* Maroon */
    --num-6: #008080;  /* Teal */
    --num-7: #000000;  /* Black */
    --num-8: #808080;  /* Gray */

    /* LED display */
    --led-bg: #000000;
    --led-on: #ff0000;
    --led-off: #330000;
}

/* ===== Base Styles ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #008080; /* Teal desktop background */
    font-family: 'MS Sans Serif', Arial, sans-serif;
    font-size: calc(8px * var(--scale));
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Window Container ===== */
.window {
    display: inline-block;
    background: var(--win-gray);
    border: calc(2px * var(--scale)) outset var(--win-gray);
    box-shadow: calc(2px * var(--scale)) calc(2px * var(--scale)) 0 rgba(0,0,0,0.5);
    position: relative;
}

/* ===== Title Bar ===== */
.title-bar {
    background: var(--win-blue);
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: white;
    height: calc(18px * var(--scale));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(2px * var(--scale));
    font-weight: bold;
}

.title-text {
    font-size: calc(8px * var(--scale));
    padding-left: calc(2px * var(--scale));
}

.title-buttons {
    display: flex;
    gap: calc(2px * var(--scale));
}

.title-btn {
    width: calc(16px * var(--scale));
    height: calc(14px * var(--scale));
    background: var(--win-gray);
    border: calc(1px * var(--scale)) outset var(--win-gray);
    font-size: calc(9px * var(--scale));
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.title-btn:active {
    border-style: inset;
}

/* ===== Menu Bar ===== */
.menu-bar {
    background: var(--win-gray);
    height: calc(18px * var(--scale));
    display: flex;
    border-bottom: calc(2px * var(--scale)) solid var(--win-light-gray);
}

.menu-item {
    padding: calc(3px * var(--scale)) calc(6px * var(--scale));
    cursor: pointer;
    font-size: calc(8px * var(--scale));
}

.menu-item:hover,
.menu-item.active {
    background: var(--win-blue);
    color: white;
}

/* ===== Dropdown Menus ===== */
.dropdown-menu {
    display: none;
    position: absolute;
    background: var(--win-gray);
    border: calc(2px * var(--scale)) outset var(--win-gray);
    box-shadow: calc(2px * var(--scale)) calc(2px * var(--scale)) 0 rgba(0,0,0,0.5);
    min-width: calc(150px * var(--scale));
    z-index: 100;
}

.dropdown-menu.open {
    display: block;
}

.menu-option {
    padding: calc(3px * var(--scale)) calc(20px * var(--scale)) calc(3px * var(--scale)) calc(24px * var(--scale));
    cursor: pointer;
    font-size: calc(8px * var(--scale));
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-option:hover {
    background: var(--win-blue);
    color: white;
}

.menu-option .checkmark {
    position: absolute;
    left: calc(6px * var(--scale));
    width: calc(10px * var(--scale));
}

.menu-option .checkmark::before {
    content: '✓';
    display: none;
    font-size: calc(10px * var(--scale));
}

.menu-option.checked .checkmark::before {
    display: inline;
}

.menu-option .shortcut {
    margin-left: calc(20px * var(--scale));
    font-size: calc(7px * var(--scale));
    color: var(--win-dark-gray);
}

.menu-option:hover .shortcut {
    color: white;
}

.menu-separator {
    height: calc(1px * var(--scale));
    background: var(--win-dark-gray);
    margin: calc(2px * var(--scale)) 0;
    border-bottom: calc(1px * var(--scale)) solid var(--win-white);
}

/* ===== Game Content ===== */
.game-content {
    padding: calc(6px * var(--scale));
}

/* ===== Control Panel ===== */
.control-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(4px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale));
    background: var(--win-gray);
}

/* ===== LED Display ===== */
.led-display {
    background: var(--led-bg);
    padding: calc(4px * var(--scale)) calc(2px * var(--scale));
    display: flex;
    gap: calc(1px * var(--scale));
    border: calc(1px * var(--scale)) inset var(--win-gray);
    border-width: calc(2px * var(--scale));
    border-style: solid;
    border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray);
}

.digit {
    width: calc(13px * var(--scale));
    height: calc(23px * var(--scale));
    position: relative;
    display: inline-block;
}

/* 7-segment display using background positioning */
.digit::before {
    content: '8';
    font-family: monospace;
    font-size: calc(20px * var(--scale));
    font-weight: bold;
    color: var(--led-off);
    position: absolute;
    left: 0;
    top: 0;
    line-height: calc(23px * var(--scale));
}

.digit::after {
    content: attr(data-value);
    font-family: monospace;
    font-size: calc(20px * var(--scale));
    font-weight: bold;
    color: var(--led-on);
    position: absolute;
    left: 0;
    top: 0;
    line-height: calc(23px * var(--scale));
}

/* ===== Smiley Button ===== */
.smiley-button {
    width: calc(26px * var(--scale));
    height: calc(26px * var(--scale));
    background: var(--win-gray);
    border: calc(2px * var(--scale)) outset var(--win-gray);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smiley-button:active {
    border-style: inset;
}

.smiley-face {
    width: calc(24px * var(--scale));
    height: calc(24px * var(--scale));
    position: relative;
    background: #ffff00;
    border-radius: 50%;
    border: calc(1px * var(--scale)) solid #000;
}

/* Eyes */
.smiley-face::before {
    content: '';
    position: absolute;
    width: calc(3px * var(--scale));
    height: calc(3px * var(--scale));
    background: black;
    border-radius: 50%;
    left: calc(6px * var(--scale));
    top: calc(8px * var(--scale));
}

.smiley-face::after {
    content: '';
    position: absolute;
    width: calc(3px * var(--scale));
    height: calc(3px * var(--scale));
    background: black;
    border-radius: 50%;
    right: calc(6px * var(--scale));
    top: calc(8px * var(--scale));
}

/* Mouth - normal smile */
.smiley-face.normal {
    background: radial-gradient(circle at center, #ffff00 calc(10px * var(--scale)), #ffff00 100%);
}

.smiley-face.normal::before,
.smiley-face.normal::after {
    background: black;
}

/* Draw smile with a pseudo-element on the button */
.smiley-button .normal {
    overflow: hidden;
}

/* Add mouth using box-shadow trick */
.smiley-face {
    box-shadow: inset 0 calc(-8px * var(--scale)) 0 calc(-6px * var(--scale)) black;
}

.smiley-face.normal {
    box-shadow: inset 0 calc(-8px * var(--scale)) 0 calc(-6px * var(--scale)) black;
}

/* Surprised face (O mouth, wide eyes) */
.smiley-face.surprised::before,
.smiley-face.surprised::after {
    width: calc(4px * var(--scale));
    height: calc(4px * var(--scale));
}

.smiley-face.surprised {
    box-shadow: inset 0 calc(-9px * var(--scale)) 0 calc(-3.5px * var(--scale)) black;
}

/* Cool face (sunglasses) */
.smiley-face.cool::before {
    width: calc(6px * var(--scale));
    height: calc(3px * var(--scale));
    border-radius: 0;
    top: calc(7px * var(--scale));
}

.smiley-face.cool::after {
    width: calc(6px * var(--scale));
    height: calc(3px * var(--scale));
    border-radius: 0;
    top: calc(7px * var(--scale));
}

/* Dead face (X eyes, frown) */
.smiley-face.dead::before {
    content: '×';
    background: none;
    color: black;
    font-size: calc(12px * var(--scale));
    font-weight: bold;
    width: calc(6px * var(--scale));
    height: calc(6px * var(--scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    line-height: 1;
}

.smiley-face.dead::after {
    content: '×';
    background: none;
    color: black;
    font-size: calc(12px * var(--scale));
    font-weight: bold;
    width: calc(6px * var(--scale));
    height: calc(6px * var(--scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    line-height: 1;
}

.smiley-face.dead {
    box-shadow: inset 0 calc(8px * var(--scale)) 0 calc(-6px * var(--scale)) black;
}

/* ===== Game Grid Border ===== */
.game-border {
    border: calc(3px * var(--scale)) solid;
    border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray);
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 9), var(--cell-size));
    grid-template-rows: repeat(var(--grid-rows, 9), var(--cell-size));
    gap: 0;
    line-height: 1;
}

/* ===== Game Cells ===== */
.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background: var(--cell-gray);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: calc(16px * var(--scale));
    font-family: 'Courier New', monospace;
    line-height: 1;
}

/* Unrevealed cell (raised 3D border) */
.cell.unrevealed {
    border: calc(3px * var(--scale)) solid;
    border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white);
}

/* Revealed cell (flat) */
.cell.revealed {
    border: calc(1px * var(--scale)) solid var(--win-dark-gray);
    background: var(--cell-gray);
}

/* Number colors */
.cell[data-count="1"] { color: var(--num-1); }
.cell[data-count="2"] { color: var(--num-2); }
.cell[data-count="3"] { color: var(--num-3); }
.cell[data-count="4"] { color: var(--num-4); }
.cell[data-count="5"] { color: var(--num-5); }
.cell[data-count="6"] { color: var(--num-6); }
.cell[data-count="7"] { color: var(--num-7); }
.cell[data-count="8"] { color: var(--num-8); }

/* ===== Cell Icons ===== */

/* Flag */
.cell.flagged::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(3px * var(--scale)) 0 calc(3px * var(--scale)) calc(5px * var(--scale));
    border-color: transparent transparent transparent #ff0000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: calc(2px * var(--scale));
    margin-top: calc(-2px * var(--scale));
}

.cell.flagged::after {
    content: '';
    position: absolute;
    width: calc(2px * var(--scale));
    height: calc(10px * var(--scale));
    background: #000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Question mark */
.cell.questioned::after {
    content: '?';
    font-size: calc(16px * var(--scale));
    font-weight: bold;
    color: #000;
    position: absolute;
}

/* Mine - center circle */
.cell.mine::before {
    content: '';
    position: absolute;
    width: calc(7px * var(--scale));
    height: calc(7px * var(--scale));
    background: #000;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Mine spikes - cross pattern */
.cell.mine::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(16px * var(--scale));
    height: calc(16px * var(--scale));
    background:
        linear-gradient(to right, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(45deg, transparent calc(50% - 0.7px), #000 calc(50% - 0.7px), #000 calc(50% + 0.7px), transparent calc(50% + 0.7px)),
        linear-gradient(-45deg, transparent calc(50% - 0.7px), #000 calc(50% - 0.7px), #000 calc(50% + 0.7px), transparent calc(50% + 0.7px));
    z-index: 1;
}

/* Exploded mine */
.cell.exploded {
    background: #ff0000 !important;
}

/* Wrong flag (red X) */
.cell.wrong-flag::before {
    content: '×';
    font-size: calc(20px * var(--scale));
    color: #000;
    font-weight: bold;
    position: absolute;
    line-height: 1;
}

/* ===== Win Dialog ===== */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog-box {
    background: var(--win-gray);
    border: calc(2px * var(--scale)) outset var(--win-gray);
    box-shadow: calc(2px * var(--scale)) calc(2px * var(--scale)) 0 rgba(0,0,0,0.5);
    min-width: calc(200px * var(--scale));
    animation: dialogBounce 0.3s ease-out;
}

@keyframes dialogBounce {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.dialog-title-bar {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: white;
    padding: calc(3px * var(--scale)) calc(4px * var(--scale));
    font-weight: bold;
    font-size: calc(8px * var(--scale));
}

.dialog-content {
    padding: calc(16px * var(--scale));
    text-align: center;
    font-size: calc(8px * var(--scale));
}

.dialog-content p {
    margin: calc(8px * var(--scale)) 0;
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    gap: calc(8px * var(--scale));
    padding: 0 calc(16px * var(--scale)) calc(16px * var(--scale));
}

.dialog-btn {
    background: var(--win-gray);
    border: calc(2px * var(--scale)) outset var(--win-gray);
    padding: calc(4px * var(--scale)) calc(16px * var(--scale));
    font-size: calc(8px * var(--scale));
    font-weight: bold;
    cursor: pointer;
    min-width: calc(60px * var(--scale));
}

.dialog-btn:active {
    border-style: inset;
}

.dialog-btn:hover {
    background: var(--win-light-gray);
}

/* ===== Utility Classes ===== */
.hidden {
    display: none !important;
}