/* Minesweeper Viewer — msv-* namespaced
   Faithful reproduction of in-game appearance (classic Minesweeper look) */

.msv-board {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #c0c0c0;
    font-family: Arial, sans-serif;
    user-select: none;
}

/* Toolbar — classic style on gray background */
.msv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: #c0c0c0;
    border-bottom: 2px solid #808080;
    flex-shrink: 0;
}

.msv-toolbar-title {
    font-weight: 700;
    color: #000;
    font-size: 0.85rem;
}

.msv-toolbar-right {
    display: flex;
    gap: 1.25rem;
}

.msv-stat {
    font-size: 0.8rem;
}

.msv-stat-label {
    color: #444;
}

.msv-stat-value {
    color: #000;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Grid wrapper — centers the grid */
.msv-grid-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow: hidden;
    min-height: 0;
    position: relative;
    background: #c0c0c0;
    border: 3px inset;
}

.msv-grid {
    display: grid;
    gap: 0;
    aspect-ratio: var(--msv-aspect, 1);
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* Cells — match in-game ms-cell */
.msv-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: clamp(7px, 1.2vw, 14px);
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    line-height: 1;
    box-sizing: border-box;
    position: relative;
}

/* Hidden cell — 3D raised button effect */
.msv-unrevealed {
    background: #c0c0c0;
    border-style: solid;
    border-width: 2px;
    border-color: #fff #808080 #808080 #fff;
    cursor: default;
}

/* Pressed state — flatten the 3D button */
.msv-pressed {
    background: #c0c0c0;
    border-width: 1px;
    border-color: #808080;
    border-style: solid;
}

/* Revealed cell — flat with thin border */
.msv-revealed {
    background: #c0c0c0;
    border: 1px solid #808080;
}

/* Flagged cell — hidden cell with flag icon */
.msv-flagged {
    background: #c0c0c0;
    border-style: solid;
    border-width: 2px;
    border-color: #fff #808080 #808080 #fff;
}

.msv-flagged::after {
    content: '';
    width: 60%;
    height: 70%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M6 3v18h2v-7l10-5L8 4V3H6z'/%3E%3Cpath fill='%23000' d='M8 17v4h2v-4H8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Number colors — classic Minesweeper */
.msv-num-1 { color: #0000ff; }
.msv-num-2 { color: #008000; }
.msv-num-3 { color: #ff0000; }
.msv-num-4 { color: #000080; }
.msv-num-5 { color: #800000; }
.msv-num-6 { color: #008080; }
.msv-num-7 { color: #000000; }
.msv-num-8 { color: #808080; }

/* Mine icon — SVG matching in-game */
.msv-mine::after {
    content: '';
    width: 70%;
    height: 70%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23000'/%3E%3Cpath stroke='%23000' stroke-width='2' d='M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Mine hit — red background */
.msv-mine-hit {
    background: #ff0000 !important;
}

/* Win flash animation */
.msv-win-flash {
    animation: msv-flash 0.4s ease-in-out;
}

@keyframes msv-flash {
    0% { background: #c0c0c0; }
    50% { background: #90ee90; }
    100% { background: #c0c0c0; }
}

/* Cursor — arrow pointer for over-the-shoulder replay (matches FC viewer) */
.msv-cursor {
    position: absolute;
    width: 14px;
    height: 20px;
    background: #ff6b6b;
    clip-path: polygon(
        0% 0%,       /* tip */
        0% 75%,      /* left edge bottom */
        29% 55%,     /* inner elbow */
        46% 95%,     /* tail bottom-left */
        61% 88%,     /* tail bottom-right */
        43% 50%,     /* outer elbow */
        75% 50%      /* arrow head right */
    );
    pointer-events: none;
    z-index: 20000;
    opacity: 0;
}