/* game-board.css - Video Game Style Game Board */
/* Updated to use CSS variables from tokens.css */

.game-interface {
    width: 100%;
    height: 100%;
    display: none;
    position: relative;
    background: radial-gradient(ellipse at center,
        var(--bg-game-center, rgba(15, 20, 35, 1)) 0%,
        var(--bg-game-edge, rgba(8, 10, 20, 1)) 100%);
    overflow: hidden;
}

/* Subtle grid pattern background */
.game-interface::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(var(--grid-line-subtle, rgba(50, 80, 150, 0.03)) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-subtle, rgba(50, 80, 150, 0.03)) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* Vignette effect */
.game-interface::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.game-board-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.game-board {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-grid;
    gap: 2px;
    padding: 3px;
    will-change: transform;
    transform-origin: 0 0;
    cursor: default;

    /* Video game board styling */
    background: linear-gradient(180deg,
        var(--board-bg-start, rgba(30, 40, 60, 0.9)) 0%,
        var(--board-bg-end, rgba(20, 30, 50, 0.95)) 100%);
    border: 3px solid var(--board-border, rgba(100, 150, 255, 0.4));
    border-radius: 8px;

    /* Simplified glow for mobile performance (was 4 layers) */
    box-shadow: 0 0 20px rgba(100, 150, 255, 0.15);
}

/* Spectator Board - uses same .game-board styles, but cells are non-interactive */
.spectator-board .cell {
    pointer-events: none;
    cursor: default;
}

/* Cell styling */
.cell {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Orbitron', 'Share Tech Mono', monospace;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transition: all 0.1s ease;

    /* Revealed cell */
    background: linear-gradient(180deg,
        var(--cell-revealed-start, rgba(25, 35, 55, 0.95)) 0%,
        var(--cell-revealed-end, rgba(18, 28, 48, 0.95)) 100%);
    color: var(--text-white, #ffffff);
    border: 1px solid var(--cell-revealed-border, rgba(60, 90, 140, 0.3));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Hidden cell - Unrevealed */
.cell.hidden {
    background: linear-gradient(180deg,
        var(--cell-hidden-start, rgba(60, 75, 110, 0.95)) 0%,
        var(--cell-hidden-end, rgba(45, 60, 95, 0.95)) 100%);
    border-color: var(--cell-hidden-border, rgba(100, 140, 200, 0.3));

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.cell.hidden:hover {
    background: linear-gradient(180deg,
        var(--cell-hidden-hover-start, rgba(75, 95, 140, 0.95)) 0%,
        var(--cell-hidden-hover-end, rgba(60, 80, 125, 0.95)) 100%);
    border-color: var(--cell-hidden-hover-border, rgba(120, 170, 255, 0.5));

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        var(--glow-blue-sm, 0 0 15px rgba(100, 150, 255, 0.2)),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Flagged cell */
.cell.flagged {
    background: linear-gradient(180deg,
        var(--cell-flagged-start, rgba(80, 60, 100, 0.95)) 0%,
        var(--cell-flagged-end, rgba(65, 45, 85, 0.95)) 100%);
    border-color: var(--cell-flagged-border, rgba(180, 100, 255, 0.4));
}

.cell.flagged::before {
    content: '⚑';
    font-size: 1.1rem;
    color: var(--cell-flag-color, #ff6b6b);
    text-shadow: 0 0 8px rgba(255, 100, 100, 0.6);
}

/* Mine cell */
.cell.mine {
    background: linear-gradient(180deg,
        var(--cell-mine-start, rgba(180, 50, 50, 0.95)) 0%,
        var(--cell-mine-end, rgba(140, 30, 30, 0.95)) 100%);
    border-color: var(--cell-mine-border, rgba(255, 100, 100, 0.5));
    animation: mine-reveal 0.3s ease-out;
}

.cell.mine::before {
    content: '💣';
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(255, 100, 100, 0.5));
}

@keyframes mine-reveal {
    0% {
        transform: scale(1.2);
        box-shadow: 0 0 30px rgba(255, 100, 100, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

/* Number colors - Neon game style (text-shadow reduced for mobile performance) */
.cell.n1 { color: var(--cell-n1, #60b0ff); }
.cell.n2 { color: var(--cell-n2, #50e080); }
.cell.n3 { color: var(--cell-n3, #ff7070); }
.cell.n4 { color: var(--cell-n4, #c090ff); }
.cell.n5 { color: var(--cell-n5, #ffb050); }
.cell.n6 { color: var(--cell-n6, #50e0e0); }
.cell.n7 { color: var(--cell-n7, #ff80c0); }
.cell.n8 { color: var(--cell-n8, #a0b0c0); }

/* Optional glow for desktop - enabled via --cell-number-glow: 1 in theme */
@media (min-width: 769px) {
    .cell.n1 { text-shadow: 0 0 4px var(--cell-n1, #60b0ff); }
    .cell.n2 { text-shadow: 0 0 4px var(--cell-n2, #50e080); }
    .cell.n3 { text-shadow: 0 0 4px var(--cell-n3, #ff7070); }
    .cell.n4 { text-shadow: 0 0 4px var(--cell-n4, #c090ff); }
    .cell.n5 { text-shadow: 0 0 4px var(--cell-n5, #ffb050); }
    .cell.n6 { text-shadow: 0 0 4px var(--cell-n6, #50e0e0); }
    .cell.n7 { text-shadow: 0 0 4px var(--cell-n7, #ff80c0); }
    .cell.n8 { text-shadow: 0 0 4px var(--cell-n8, #a0b0c0); }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .cell {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .cell {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
        border-radius: 3px;
    }

    .game-board {
        gap: 1px;
        padding: 2px;
        border-width: 2px;
        border-radius: 6px;
    }
}

/* ========================================
   SCREEN SHAKE EFFECTS
   ======================================== */

.screen-shake {
    animation: screen-shake 0.4s ease-out;
}

.screen-shake-light {
    animation: screen-shake-light 0.3s ease-out;
}

.screen-shake-heavy {
    animation: screen-shake-heavy 0.5s ease-out;
}

@keyframes screen-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, -2px); }
    20% { transform: translate(4px, 2px); }
    30% { transform: translate(-3px, 1px); }
    40% { transform: translate(3px, -1px); }
    50% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, -2px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
    90% { transform: translate(-1px, 0); }
}

@keyframes screen-shake-light {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, -1px); }
    40% { transform: translate(2px, 1px); }
    60% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
}

@keyframes screen-shake-heavy {
    0%, 100% { transform: translate(0, 0); }
    5% { transform: translate(-8px, -4px); }
    10% { transform: translate(8px, 4px); }
    15% { transform: translate(-7px, 3px); }
    20% { transform: translate(7px, -3px); }
    25% { transform: translate(-6px, -3px); }
    30% { transform: translate(6px, 3px); }
    35% { transform: translate(-5px, 2px); }
    40% { transform: translate(5px, -2px); }
    45% { transform: translate(-4px, -2px); }
    50% { transform: translate(4px, 2px); }
    55% { transform: translate(-3px, 1px); }
    60% { transform: translate(3px, -1px); }
    65% { transform: translate(-2px, -1px); }
    70% { transform: translate(2px, 1px); }
    75% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
    85% { transform: translate(-1px, 0); }
    90% { transform: translate(1px, 0); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .screen-shake,
    .screen-shake-light,
    .screen-shake-heavy {
        animation: none;
    }
}