@import url('/style-guide.css');

:root {
    --cols: 9;
    --rows: 9;
    --cell-size: 40px;
    --cell-font: 20px;
}

.hud-mines::before { content: '⚑ '; font-weight: 400; opacity: .8; }
.hud-timer::before { content: '⏱ '; font-weight: 400; opacity: .8; }

/* ── Board ───────────────────────────────────────────────────────────────── */

#board {
    background: var(--color-blue-dark);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(var(--cols), var(--cell-size));
    grid-template-rows: repeat(var(--rows), var(--cell-size));
    padding: 2px;
}

/* ── Cells ───────────────────────────────────────────────────────────────── */

.cell {
    align-items: center;
    background: var(--color-blue);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--cell-font);
    font-weight: 700;
    height: var(--cell-size);
    justify-content: center;
    line-height: 1;
    padding: 0;
    touch-action: manipulation;
    transition: background .08s;
    width: var(--cell-size);
}

.cell:active:not(:disabled) { background: #2a6fa8; }

.cell--flagged {
    background: var(--color-blue-dark);
    color: #fff;
    font-family: var(--font-symbols);
    font-size: calc(var(--cell-font) * 1.1);
}

.cell--revealed {
    background: #ccdae5;
    cursor: default;
}

.cell--empty {
    background: #baccda;
    cursor: default;
}

.cell--mine {
    background: var(--color-loss);
    color: #fff;
}

.cell--hit {
    animation: mine-hit .55s ease 3;
    background: var(--color-loss-dark);
}

/* Staggered cascades — per-cell animation-delay is set inline by game.js */
.cell--deal { animation: deal-in .25s ease both; }
.cell--anim { animation: cell-reveal .22s ease both; }

@keyframes cell-reveal {
    from { opacity: .25; transform: scale(.55); }
    to   { opacity: 1;   transform: none; }
}

@keyframes mine-hit {
    0%, 100% { background: var(--color-loss-dark); transform: scale(1); }
    50%      { background: #ff5a4d; transform: scale(1.15); }
}

/* Flag mode — warn ring on the board + crosshair on coverable cells */
#board.board--flag-mode {
    box-shadow: 0 0 0 2px var(--color-warn);
}

.board--flag-mode .cell:not(:disabled) { cursor: crosshair; }

/* Near-zero durations would leave the stagger delays as dead time */
@media (prefers-reduced-motion: reduce) {
    .cell { animation-delay: 0ms !important; }
}

/* ── Result panel ────────────────────────────────────────────────────────── */

#result.result--visible { transform: none; }