/* ==========================================================================
   Minesweeper — only what's unique to this game.
   ========================================================================== */

.game[data-game="minesweeper"] {
  --game-color: var(--cat-puzzle);
  max-width: max(300px, min(540px, calc(100svh - 260px)));
}
.game[data-game="minesweeper"] .game__stage { aspect-ratio: 1 / 1; background: var(--bg-sunken); }

.mine-field {
  position: absolute;
  inset: clamp(8px, 2.5vw, 14px);
  display: grid;
  grid-template: repeat(9, 1fr) / repeat(9, 1fr);
  gap: clamp(2px, 0.7vw, 4px);
  -webkit-touch-callout: none;
}
.mine-field.is-boom { animation: boom 0.4s; }
@keyframes boom { 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } }

/* Hidden square = a raised toy block. Opened = flat and pressed in. */
.sq {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink-900);
  border-radius: 7px;
  background: #9DD3CA;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.15), inset 0 3px 0 rgb(255 255 255 / 0.35);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 4.3vw, 1.6rem);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 60ms;
}
.sq:nth-child(odd) { background: #8CCBC0; }
.sq:hover:not(.is-open) { filter: brightness(1.06); }
.sq:active:not(.is-open) { transform: scale(0.94); }
.sq:focus-visible { outline: 3px solid var(--mustard); outline-offset: 1px; z-index: 1; }

.sq.is-open {
  background: var(--cream-50);
  border-color: color-mix(in srgb, var(--ink-900) 25%, transparent);
  box-shadow: none;
  cursor: default;
  animation: open-sq 0.22s var(--ease-out) var(--d, 0ms) backwards;
}
@keyframes open-sq { from { transform: scale(0.7); background: #9DD3CA; } }
[data-theme="dark"] .sq.is-open { background: #2A3752; border-color: #3B4A68; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sq.is-open { background: #2A3752; border-color: #3B4A68; } }

/* Number colors */
.sq[data-n="1"] { color: #2F6FB0; }
.sq[data-n="2"] { color: #226E65; }
.sq[data-n="3"] { color: #C8432A; }
.sq[data-n="4"] { color: #6A3D7C; }
.sq[data-n="5"] { color: #8A4B1F; }
.sq[data-n="6"] { color: #1D7C8A; }
.sq[data-n="7"] { color: #1B2A41; }
.sq[data-n="8"] { color: #525F75; }
[data-theme="dark"] .sq[data-n="1"] { color: #8FC3F0; }
[data-theme="dark"] .sq[data-n="2"] { color: #7FD6C9; }
[data-theme="dark"] .sq[data-n="3"] { color: #FF8A73; }
[data-theme="dark"] .sq[data-n="4"] { color: #D2A6E3; }
[data-theme="dark"] .sq[data-n="7"] { color: #F4ECDD; }

/* Flag: a little tomato pennant */
.sq.is-flag::after {
  content: "";
  width: 52%;
  height: 58%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M6 3v22' stroke='%231B2A41' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M7 3l14 5-14 6z' fill='%23E8553D' stroke='%231B2A41' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: flag-in 0.25s var(--ease-spring);
}
@keyframes flag-in { from { transform: translateY(-40%) scale(0.4); } }
.sq.is-wrong-flag { background: #FBE3DD; }

/* Mine: navy ball with a fuse */
.sq.is-mine::after {
  content: "";
  width: 62%;
  height: 62%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l3-3' stroke='%23F2B33D' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='13' r='8' fill='%231B2A41'/%3E%3Ccircle cx='8' cy='10' r='2' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sq.is-hit { background: var(--tomato) !important; }

/* Dig / Flag toggle bar under the field */
.mines-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: var(--outline) solid var(--line);
  background: var(--bg-sunken);
}
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 2.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--shadow-ink);
}
.mode-toggle svg { width: 20px; height: 20px; }
.mode-toggle .i-flag { display: none; }
.mode-toggle[aria-pressed="true"] { background: var(--tomato-dk); color: #fff; }
.mode-toggle[aria-pressed="true"] .i-flag { display: block; }
.mode-toggle[aria-pressed="true"] .i-dig { display: none; }