/* Memory Match. Functional layout before the design pass; existing tokens only.
   Mobile: bar (level, moves, pairs, time, pause), the board, New game, then the win panel.
   Tile backs take the card's jade swatch; faces are the surface with the icon in its own swatch
   (icons.js). Derived colors are listed for design review in docs/follow-ups.md. */

.g-memory { padding-block: var(--s3) var(--s7); }
.g-memory__intro { margin-bottom: var(--s3); }
.g-memory__intro h1 { font-size: 24px; }
.g-memory__intro p { margin-top: var(--s1); max-width: 60ch; }
.g-memory__note { margin-bottom: var(--s3); }

/* ---------- game card ---------- */
/* Narrow phones: 4 px side padding (as Minesweeper), so Expert's six tiles stay 52 px wide at 360 px */
.g-memory__game {
  position: relative; max-width: 760px; padding: var(--s2) var(--s1);
  display: grid; gap: var(--s3); grid-template-areas: "bar" "board" "actions" "result" "tools";
}
@media (min-width: 400px) { .g-memory__game { padding: var(--s3); } }
@media (min-width: 720px) { .g-memory__game { padding: var(--s5); } }
.g-memory__game:focus { outline: none; }
.g-memory__bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2) var(--s4); padding-inline: var(--s1); }
.g-memory__bar .stat__value { font-size: 18px; }
.g-memory__level { display: grid; gap: 2px; flex: 1 1 100%; }
@media (min-width: 560px) { .g-memory__level { flex: 0 1 auto; } }
.g-memory__select {
  min-height: 44px; padding: 0 var(--s3); border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; max-width: 100%;
}
.g-memory__pause-btn { margin-left: auto; min-width: 88px; padding-inline: 12px; } /* Pause and Resume keep one width */

/* ---------- board ---------- */
.g-memory__frame { grid-area: board; container-type: inline-size; }
.g-memory__board {
  --gap: 8px;
  --tile: min(96px, calc((100cqi - (var(--cols, 4) - 1) * var(--gap)) / var(--cols, 4)));
  display: flex; flex-direction: column; gap: var(--gap); width: max-content; margin-inline: auto;
  /* taps without the double-tap delay; pinch-zoom still works */
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.g-memory__board.is-six { --gap: 6px; --tile: min(84px, calc((100cqi - 5 * var(--gap)) / 6)); }
@media (max-width: 399px) { .g-memory__board.is-six { --gap: 1.5px; } } /* 6 × 52 px + gaps in 320 px */
.g-memory__row { display: flex; gap: var(--gap); }
.g-memory__cell { width: var(--tile); height: var(--tile); }

.g-memory__tile {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit;
  cursor: pointer; perspective: 600px; border-radius: 8px;
}
.g-memory__tile:focus { outline: none; }
.g-memory__tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }
.g-memory__card {
  display: block; position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 300ms var(--ease); /* board-view.js FLIP_MS */
}
.g-memory__back, .g-memory__face {
  position: absolute; inset: 0; border-radius: 8px; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.g-memory__back {
  background: var(--field);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--field) 70%, var(--deep));
}
.g-memory__face {
  transform: rotateY(180deg); background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.g-memory__tile.is-up .g-memory__card { transform: rotateY(180deg); }
.g-memory__tile.is-up, .g-memory__tile.is-matched, .g-memory__board.is-locked .g-memory__tile { cursor: default; }
.g-memory__tile.is-matched .g-memory__face { background: var(--surface-2); box-shadow: none; }
.g-memory__tile.is-matched { opacity: .72; }

.g-memory__icon { width: 74%; height: 74%; pointer-events: none; overflow: visible; }
.g-memory__icon path { stroke-linejoin: round; stroke-linecap: round; }
.g-memory__icon.is-solid path { fill: var(--field); stroke: var(--deep); stroke-width: 1.4; }
.g-memory__icon.is-outline path { fill: none; stroke: var(--field); stroke-width: 2.4; }
.g-memory__icon.is-outline .g-memory__edge { stroke: var(--deep); stroke-width: 4.6; }

/* Animations setting (Phase 2): follow the device (default), off (.is-still) or on (.is-motion) */
@media (prefers-reduced-motion: reduce) { .g-memory__board:not(.is-motion) .g-memory__card { transition: none; } }
.g-memory__board.is-still .g-memory__card { transition: none; }

/* ---------- actions ---------- */
.g-memory__actions { grid-area: actions; display: flex; gap: var(--s2); justify-content: center; padding-inline: var(--s1); }
.g-memory__actions .btn { touch-action: manipulation; }

.g-memory__tools { grid-area: tools; display: flex; justify-content: center; gap: var(--s2); }

/* ---------- win panel ---------- */
.g-memory__result { grid-area: result; display: grid; gap: var(--s3); padding: var(--s4); border-radius: 12px; background: var(--surface-2); }
.g-memory__result[hidden] { display: none; }
.g-memory__result .fig dd { font-size: 24px; }

/* ---------- pause: hides the board (D6) ---------- */
.g-memory__game.is-paused .g-memory__frame { visibility: hidden; }
.g-memory__pause { grid-area: board; position: relative; inset: auto; border-radius: 0; align-content: center; padding: var(--s5); min-height: 240px; }

/* ---------- dialogs (as Minesweeper) ---------- */
.g-memory__dlg .fig dd { font-size: 22px; }
.g-memory__stats-levels { margin-bottom: var(--s4); flex-wrap: wrap; }
.g-memory__stats-levels span { min-width: 0; padding-inline: 10px; }
.g-memory__reset { margin-top: var(--s5); }
.g-memory__reset p { font-weight: 600; }
.g-memory__settings { display: grid; }
.g-memory__settings label { display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; }
.g-memory__settings input { flex: none; width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.g-memory__choice { border: 0; padding: 0; margin: var(--s3) 0 0; }
.g-memory__choice legend { font-weight: 600; padding: 0; }

/* ---------- below the game (as Minesweeper) ---------- */
.g-memory__about { max-width: 62ch; margin-top: var(--s6); }
.g-memory__about h2 { margin: var(--s6) 0 var(--s3); }
.g-memory__about h2:first-child { margin-top: 0; }
.g-memory__about h3 { margin: var(--s5) 0 var(--s2); }
.g-memory__about p + p, .g-memory__about table + p { margin-top: var(--s3); }
.g-memory__about ol { padding-left: 1.25em; margin: var(--s3) 0 0; }
.g-memory__about li + li { margin-top: 6px; }
.g-memory__about ol + p { margin-top: var(--s3); }
.g-memory__keys { border-collapse: collapse; font-size: 15px; }
.g-memory__keys th, .g-memory__keys td { text-align: left; padding: 6px var(--s4) 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.g-memory__keys th { font-weight: 600; white-space: nowrap; }