/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Minefield: LogosVox original code. The board is the shared LogosVox Games
 * tray; closed cells are keycaps (.lv-piece) in a calm slate-cobalt, opened
 * cells are wells (.lv-well) with numbers in our palette. The cell size is
 * set from the stage's size by minefield.js (--cell, --gap).
 */
.mf-main { max-width: 960px; gap: 12px; min-height: 0; overflow: hidden; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
.mf-stage { display: flex; align-items: center; justify-content: center; }
.mf-side { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.mf-board {
  --mf-cap: #b4bfe2;
  --mf-cap-hover: #c2cbea;
  --mf-pole: #262b3d;
  --mf-ink: #0d0d0d;
  padding: 6px;
  border-radius: calc(var(--cell, 30px) * 0.3 + 6px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mf-board { --mf-cap: #3a4468; --mf-cap-hover: #445079; --mf-pole: #f2f4fb; --mf-ink: #f4f4f4; }
}
:root[data-theme="dark"] .mf-board { --mf-cap: #3a4468; --mf-cap-hover: #445079; --mf-pole: #f2f4fb; --mf-ink: #f4f4f4; }

.mf-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap, 3px);
  outline: none;
}
.mf-grid [role="row"] { display: contents; }
.mf-board.is-paused .mf-grid { visibility: hidden; }

.mf-cell {
  --g-r: calc(var(--cell) * 0.26);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--g-r);
  font-size: calc(var(--cell) * 0.56);
  line-height: 1;
  cursor: pointer;
}
.mf-cell.lv-piece, .mf-cell.lv-well { --lv-g-piece-r: var(--g-r); }
.mf-cell svg { width: 66%; height: 66%; pointer-events: none; }

/* Closed: a raised keycap. Pressed while a finger is on it. */
.mf-cap { --c: var(--mf-cap); color: var(--mf-pole); transition: transform var(--lv-fast) var(--lv-ease); }
@media (hover: hover) and (pointer: fine) { .mf-cap:hover { --c: var(--mf-cap-hover); } }
.mf-cap.is-press, .mf-cap.is-hint { transform: translateY(1px) scale(0.92); }
.mf-pennant { fill: var(--lv-g-coral); }
.mf-cap.is-wrong svg { opacity: 0.85; }
.mf-x { stroke: var(--lv-g-coral); }
.mf-cap.is-wrong .mf-pennant { fill: var(--mf-pole); opacity: 0.4; }

/* Open: a well, with the count in our palette. */
.mf-open { cursor: default; }
.mf-open.n1 { color: var(--lv-g-cobalt); }
.mf-open.n2 { color: var(--lv-g-green); }
.mf-open.n3 { color: var(--lv-g-coral); }
.mf-open.n4 { color: var(--lv-g-violet); }
.mf-open.n5 { color: var(--lv-g-magenta); }
.mf-open.n6 { color: var(--lv-g-cyan); }
.mf-open.n7 { color: var(--lv-g-gold); }
.mf-open.n8 { color: var(--mf-ink); }
.mf-open.lv-num { cursor: pointer; }
.mf-mine { color: var(--mf-ink); }
.mf-mine.is-boom { background: var(--lv-g-coral); color: #fff; box-shadow: 0 0 0 2px rgb(255 99 64 / 0.25); }

/* The keyboard cursor, shown once the arrows are used. */
.mf-board.is-kbd .is-cursor { outline: 2px solid var(--lv-g-cobalt); outline-offset: 1px; z-index: 1; }

/* Motion: a cap settles into its well in rings from the tap; flags plant with a pop. */
@keyframes mf-in { from { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } to { transform: none; } }
@keyframes mf-plant { 0% { transform: translateY(-3px) scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes mf-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }
@keyframes mf-fresh { from { transform: scale(0.97); opacity: 0.6; } }
.mf-in { animation: mf-in 220ms var(--lv-ease) both; }
.mf-plant svg { animation: mf-plant 260ms var(--lv-ease) both; animation-delay: inherit; }
.mf-cell.is-nudge { animation: mf-nudge 220ms ease-in-out; }
.mf-board.mf-fresh { animation: mf-fresh 220ms var(--lv-ease); }
@media (prefers-reduced-motion: reduce) { .mf-in, .mf-plant svg, .is-nudge, .mf-fresh { animation: none !important; } }
:root[data-motion="reduce"] .mf-in, :root[data-motion="reduce"] .mf-plant svg { animation: none; }

.mf-level[data-level="easy"] .b2, .mf-level[data-level="easy"] .b3, .mf-level[data-level="medium"] .b3 { opacity: 0.3; }
.mf-tools .lv-tool { min-width: 72px; }
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones held sideways: tools in a 2 x 2 block beside the board. */
@media (orientation: landscape) and (max-height: 540px) {
  .mf-main { padding-top: 8px; padding-bottom: 8px; }
  .mf-tools { display: grid; grid-template-columns: repeat(2, auto); }
}

/* The board is the touch surface: no scroll, zoom, selection or callout while playing. */
.mf-stage, .mf-grid { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }