/* Minesweeper Game Styles */
.game-board-container {
    width: min(90vw, 70vh, 560px);
    max-width: 560px;
    margin: 0 auto;
}

#minesweeper-grid {
    display: inline-grid;
    gap: 1px;
    background: #7b7b7b;
    border: 3px solid;
    border-color: #fff #7b7b7b #7b7b7b #fff;
    padding: 3px;
    touch-action: none;
}

.game-board {
    overflow-x: auto;
    text-align: center;
}

.mine-cell {
    width: clamp(20px, 4vw, 30px);
    height: clamp(20px, 4vw, 30px);
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #7b7b7b #7b7b7b #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 2.5vw, 16px);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.mine-cell:active:not(.revealed):not(.flagged) {
    border-color: #7b7b7b;
}

.mine-cell.revealed {
    border: 1px solid #7b7b7b;
    cursor: default;
}

.mine-cell.flagged {
    cursor: pointer;
}

.mine-cell.mine {
    background: #ff0000;
}

.mine-cell.mine-hit {
    background: #ff0000;
}

/* Number colors */
.mine-cell.n1 {
    color: #0000ff;
}

.mine-cell.n2 {
    color: #008000;
}

.mine-cell.n3 {
    color: #ff0000;
}

.mine-cell.n4 {
    color: #000080;
}

.mine-cell.n5 {
    color: #800000;
}

.mine-cell.n6 {
    color: #008080;
}

.mine-cell.n7 {
    color: #000000;
}

.mine-cell.n8 {
    color: #808080;
}

/* Game info bar */
.game-info {
    display: flex;
    justify-content: space-between;
    max-width: 300px;
    margin: 0 auto 1rem;
    padding: 0.5rem 1rem;
    background: #000;
    color: #ff0000;
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: var(--radius);
}

/* Game status */
#game-status {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    min-height: 3rem;
}

#game-status.win {
    color: #059669;
}

#game-status.lose {
    color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .game-board-container {
        width: min(95vw, 80vh, 500px);
    }
}

@media (max-width: 480px) {
    .game-board-container {
        width: min(100%, 90vh);
    }
}