/* Mine Purge - the grid page. The kit draws the cards, claim form and leaderboards (kit.css, "verified
   leaderboards"); this file is the stage: a heads-up display, the grid of cells (buttons, 28-40 px,
   sideways scroll for the large grid), the dig / flag switch and the side column. Sizes only from the
   kit scale. */

.mp { max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter) 24px; display: grid; gap: 16px; }
.mp__stage {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.mp__stage[aria-busy="true"] { min-height: 420px; background: linear-gradient(110deg, var(--surface-2) 35%, var(--surface) 50%, var(--surface-2) 65%) 0 0 / 300% 100%; animation: skeleton 1.4s ease-in-out infinite; }
.mp__hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; }
.hud-chip { display: inline-flex; flex-direction: column; min-width: 64px; padding: 4px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink); line-height: 1.25; }
.hud-chip__label { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.hud-chip strong { font-size: var(--fs-m); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp__hud .btn { margin-left: auto; }

/* the grid: a board that scrolls sideways when the cells would get smaller than 28 px */
.mp__board { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; border-radius: 12px; }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 9), var(--cell, 36px)); grid-auto-rows: var(--cell, 36px); gap: 2px; width: max-content; margin: 0 auto; padding: 3px; border-radius: 12px; background: var(--line); }
.grid[aria-busy="true"] { opacity: .7; }
.cell {
    display: grid; place-items: center; width: var(--cell, 36px); height: var(--cell, 36px); padding: 0; border: 0; border-radius: 4px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -2px 0 rgb(0 0 0 / .12);
    color: var(--ink); font: 600 var(--fs-s)/1 var(--font); cursor: pointer; touch-action: manipulation;
}
.cell:hover:not(:disabled):not(.is-open) { filter: brightness(1.05); }
.cell:active:not(:disabled):not(.is-open) { box-shadow: inset 0 1px 0 rgb(0 0 0 / .1); transform: translateY(1px); }
.cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cell.is-open { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); cursor: default; }
.cell.is-open:disabled { opacity: 1; }
.cell.is-flag { color: var(--accent); font-size: var(--fs-m); }
.cell.is-flag.is-wrong { background: rgb(155 50 38 / .18); text-decoration: line-through; }
.cell.is-mine { background: var(--surface-2); color: var(--ink); font-size: var(--fs-m); }
.cell.is-mine.is-boom { background: var(--accent); color: #fff; }
.cell.is-mine.is-shown { opacity: .85; }
.cell.n1 { color: #2f6fb3; }
.cell.n2 { color: #2e8b57; }
.cell.n3 { color: #c0392b; }
.cell.n4 { color: #5b3fa0; }
.cell.n5 { color: #8e4f3a; }
.cell.n6 { color: #138d8d; }
.cell.n7 { color: #1f1a15; }
.cell.n8 { color: #6b6b6b; }
:root[data-theme="dark"] .cell.n1 { color: #7fb0ea; }
:root[data-theme="dark"] .cell.n3 { color: #ef7b6f; }
:root[data-theme="dark"] .cell.n4 { color: #b19ae8; }
:root[data-theme="dark"] .cell.n7 { color: #f0e6d2; }
:root:not([data-theme="light"]) .cell.n1 { color: #7fb0ea; }
:root:not([data-theme="light"]) .cell.n3 { color: #ef7b6f; }
:root:not([data-theme="light"]) .cell.n4 { color: #b19ae8; }
:root:not([data-theme="light"]) .cell.n7 { color: #f0e6d2; }
:root[data-theme="light"] .cell.n1 { color: #2f6fb3; }
:root[data-theme="light"] .cell.n3 { color: #c0392b; }
:root[data-theme="light"] .cell.n4 { color: #5b3fa0; }
:root[data-theme="light"] .cell.n7 { color: #1f1a15; }

/* dig / flag switch (touch screens need it; keyboards and mice have F / right-click) */
.tools { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tools__hint { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.tools .btn[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); border-color: transparent; }

/* cards over the grid */
.mp__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background: rgb(0 0 0 / .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); touch-action: pan-y; }
.end-badge[data-reason="win"] { background: rgb(201 165 90 / .22); color: var(--gold-ink); }
.end-badge[data-reason="boom"] { background: rgb(155 50 38 / .12); color: var(--accent); }
.mode-card__meta { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-2); }

/* beside the grid */
.mp__side { display: grid; gap: 16px; align-content: start; }

@media (min-width: 1024px) {
    .mp { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; padding-top: 24px; }
    .mp__side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); }
}

/* phones: the stage as wide as the screen */
@media (max-width: 639px) {
    .mp { padding: 0 0 16px; gap: 10px; }
    .mp__stage { min-height: min(520px, calc(100svh - var(--header-h) - 24px)); padding: 8px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
    .mp[data-phase="play"] .mp__stage { min-height: 0; }
    .mp__hud { gap: 4px; }
    .hud-chip { min-width: 0; padding: 3px 8px; }
    .mp__panel { padding: 12px; place-items: start center; border-radius: 0; }
    .panel-card { padding: 18px 16px; }
    .end-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
    .end-stats div { padding: 4px 6px; }
    .end-stats dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .end-stats dd { font-size: var(--fs-s); }
    .mp__side { padding: 0 var(--gutter); }
    .tools .btn { min-width: 44%; }
}