/*
 * game.css
 *
 * Author       : Amey Thakur
 * GitHub       : https://github.com/Amey-Thakur
 * Repository   : https://github.com/Amey-Thakur/MINESWEEPER
 * Release Date : March 5, 2026
 * License      : MIT
 *
 * Tech Stack   : CSS3
 *
 * Description  : Contains the styling semantics for the interior components of 
 *                the game window. This stylesheet specifically targets the GUI 
 *                elements surrounding the primary canvas instance, managing 
 *                the visual state of the status headers, interactive buttons, 
 *                and the boundaries of the canvas container.
 */


/* 
 * Game Header Section 
 * Secures the structural topology of the upper UI panel. This container uses 
 * an inset 3D bevel to recess the counter modules and the control button. 
 */

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin: 4px;
    gap: 8px;
    background-color: var(--win95-surface);

    /* Apply deep bevel inset */
    border-top: 2px solid var(--win95-shadow);
    border-left: 2px solid var(--win95-shadow);
    border-bottom: 2px solid var(--win95-highlight);
    border-right: 2px solid var(--win95-highlight);
}


/* 
 * Hardware Emulation Displays 
 * Recreates the aesthetic configuration of the standard 7-segment LED arrays 
 * native to legacy hardware. This class relies heavily on the typographical 
 * tracking provided by the VT323 monospaced web font.
 */

.lcd-counter {
    background-color: #000;
    padding: 2px;
    display: flex;
    gap: 3px;
    height: 40px;
    width: 65px;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    /* Internal counter beveling */
    border-top: 2px solid var(--win95-shadow);
    border-left: 2px solid var(--win95-shadow);
    border-bottom: 2px solid var(--win95-highlight);
    border-right: 2px solid var(--win95-highlight);
}

.lcd-digit {
    width: auto;
    max-width: 32%;
    height: 100%;
    flex-shrink: 0;
    image-rendering: pixelated;
    object-fit: contain;
}


/* 
 * Primary Action Node (Smiley Button)
 * Provides centralized hit detection for absolute game termination or initialization. 
 * State transitions are mapped directly to SVG source changes dynamically in the execution logic.
 */

.smiley-button {
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--win95-btn-face);

    /* Construct elevated physical properties */
    border-top: 2px solid var(--win95-highlight);
    border-left: 2px solid var(--win95-highlight);
    border-bottom: 2px solid var(--win95-dark-shadow);
    border-right: 2px solid var(--win95-dark-shadow);
}

.smiley-button:active {
    border-top-color: var(--win95-dark-shadow);
    border-left-color: var(--win95-dark-shadow);
    border-bottom-color: var(--win95-highlight);
    border-right-color: var(--win95-highlight);
}

#smiley-icon {
    width: 26px;
    height: 26px;
    image-rendering: pixelated;
    display: block;
}


/* 
 * Rendering Context Container 
 * Establishes the clipping paths and bordering framework around the HTML5 
 * Canvas node. Provides explicit bounds for the generated visual grid. 
 */

.game-container {
    margin: 0 4px 4px 4px;
    overflow: hidden;
    position: relative;
    background-color: var(--win95-surface);

    /* Deep viewport inset border */
    border-top: 3px solid var(--win95-shadow);
    border-left: 3px solid var(--win95-shadow);
    border-bottom: 3px solid var(--win95-highlight);
    border-right: 3px solid var(--win95-highlight);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    min-height: 0;
}


/*
 * Image scaling algorithms are strictly configured to maintain rigid edges. 
 * Prevents antialiasing algorithms from blurring the pixelated source material.
 */

#game-canvas {
    cursor: pointer;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/*
 * Interaction States
 * Injects pointer feedback modifiers based on specific game phases. 
 */

.game-container.pressing {
    cursor: pointer;
}

.game-container.won,
.game-container.lost {
    cursor: default;
}

/* 
 * Mobile responsiveness for game header components 
 * Adjusts the topological sizing of the status counters and primary 
 * control node for high compatibility on scaled handheld devices.
 */
@media screen and (max-width: 450px) {
    .game-header {
        padding: 4px;
        gap: 4px;
    }

    .lcd-counter {
        width: 55px;
        height: 35px;
    }

    .smiley-button {
        width: 32px;
        height: 32px;
    }

    #smiley-icon {
        width: 22px;
        height: 22px;
    }
}