/* =========================================================
   Minesweeper — local styles
   ========================================================= */

/* ----------------------------------------------------------
   Board container — override fit-content from game-slot-module
   ---------------------------------------------------------- */
#game-canvas-wrapper {
    width: 100%;
    max-width: 100%;
}

#game-canvas-area {
    width: 100%;
    padding: 8px 0 4px;
    box-sizing: border-box;
}

.ms-board {
    display: grid;
    /* columns, rows, width, height set by JS via setBoardSize() */
    gap: 3px;
    margin: 0 auto;
    user-select: none;
    touch-action: manipulation;
}

/* ----------------------------------------------------------
   Cells — base
   ---------------------------------------------------------- */
.ms-cell {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-main, 'Roboto', sans-serif);

    /* Layout */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.07s;
    border-radius: 3px;
    overflow: visible;
}

/* The paper tile SVG fills the cell */
.ms-cell .paper-tile-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    border-radius: 3px;
}

/* The text label sits on top of the SVG */
.ms-cell-label {
    position: relative;
    z-index: 1;
    font-size: var(--ms-font-size, 13px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* ----------------------------------------------------------
   Closed cell
   ---------------------------------------------------------- */
.ms-cell--closed:hover {
    transform: translateY(-1px);
    z-index: 2;
}
.ms-cell--closed:active {
    transform: translateY(1px);
}

/* ----------------------------------------------------------
   Flagged cell
   ---------------------------------------------------------- */
.ms-cell--flagged {
    cursor: pointer;
}
.ms-cell--flagged .ms-cell-label {
    font-size: calc(var(--ms-font-size, 13px) * 0.85);
}

/* ----------------------------------------------------------
   Open cell — flat, thinpaper tile */
.ms-cell--open {
    cursor: default;
}

/* Numbered open cells are clickable for chord */
.ms-cell--chordable {
    cursor: pointer;
}
.ms-cell--chordable:hover .paper-tile-svg {
    opacity: 0.85;
}

/* ----------------------------------------------------------
   Mine cell (revealed on defeat)
   ---------------------------------------------------------- */
.ms-cell--mine {
    cursor: default;
}
.ms-cell--mine .ms-cell-label {
    font-size: calc(var(--ms-font-size, 13px) * 0.85);
}

/* The cell that was hit — extra highlight */
.ms-cell--hit::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: rgba(200, 50, 30, 0.18);
    pointer-events: none;
    z-index: 2;
}

/* ----------------------------------------------------------
   Hint highlight — brief pulse on hinted cell
   ---------------------------------------------------------- */
@keyframes ms-hint-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(240, 200, 40, 0.9); }
    50%  { box-shadow: 0 0 0 6px rgba(240, 200, 40, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(240, 200, 40, 0); }
}

.ms-cell--hint {
    animation: ms-hint-pulse 1.2s ease-out;
    z-index: 3;
}

/* ----------------------------------------------------------
   Disabled cell (after game over)
   ---------------------------------------------------------- */
.ms-cell:disabled {
    cursor: default;
    pointer-events: none;
}