.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  perspective: 800px;
}

.memory-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  touch-action: manipulation;
}

.memory-tile:focus-visible {
  outline: 2px solid #c2410c;
  outline-offset: 2px;
}

.memory-tile.flipped,
.memory-tile.matched {
  transform: rotateY(180deg);
}

.memory-tile-back,
.memory-tile-front {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 1.75rem;
}

.memory-tile-back {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.memory-tile-back::after {
  content: "?";
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  opacity: 0.85;
}

.memory-tile-front {
  background: #fff;
  border: 1px solid #fed7aa;
  transform: rotateY(180deg);
}

.memory-tile-emoji {
  font-size: 1.875rem;
  line-height: 1;
}

.memory-tile-image {
  width: 80%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  /* Terracotta brand tint — matches the navbar wordmark (Tailwind orange-700).
     The sprite paths use fill="currentColor", so setting color here colors it. */
  color: #c2410c;
}

.memory-tile.matched .memory-tile-front {
  background: #fff7ed;
  border-color: #fb923c;
  box-shadow: 0 0 0 2px #fed7aa inset;
}

.memory-counter {
  text-align: center;
  font-size: 0.875rem;
  color: #475569;
  margin-top: 0.5rem;
}

/* Overlays sit on top of the board — the wrapper matches the board's footprint
   so inset:0 covers exactly the 4x4 grid (and nothing wider). */
.memory-board-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* Beats Tailwind's `.hidden` (equal specificity, but this file loads later so
   `display:flex` below would otherwise win). Two-class selector keeps it hidden
   regardless of stylesheet order. */
.memory-overlay.hidden {
  display: none;
}

.memory-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  z-index: 10;
  animation: memory-overlay-pop 0.4s ease-out;
}

.memory-overlay-congrats {
  background: rgba(255, 247, 237, 0.92);   /* orange-50, translucent */
  color: #c2410c;                          /* terracotta */
}

/* There is deliberately no "ready" OVERLAY. A finished scan is announced in
   the bar above the board, never on top of it: the reader is being asked
   whether they want to keep playing, and covering the board is the one thing
   that stops them answering. Removed 2026-08-17. */

/* ── "Receipt ready" bar ─────────────────────────────────────────────────────
   Shown the moment the scan finishes. The reader is told immediately, but is
   not yanked off the board: the button doubles as the countdown, filling with
   a darker shade as the time runs out. Pressing it keeps them on the game and
   cancels the move. Ignoring it opens the receipt, which is what somebody who
   has stopped looking wants.

   Plain CSS on purpose — Tailwind's JIT only scans templates/**/*.html, so a
   class named from JS would be purged out of the build. */
.memory-ready-bar {
  margin-top: 0.75rem;
  text-align: center;
}

.memory-ready-bar.hidden {
  display: none;
}

.memory-ready-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #166534;              /* green-800 */
  margin-bottom: 0.5rem;
}

.memory-continue-btn {
  --memory-progress: 0%;
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 0.625rem 1rem;
  border: 1px solid #c2410c;   /* terracotta */
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c2410c;
  cursor: pointer;
  overflow: hidden;
  /* The fill IS the progress bar. A hard stop between the two colours moves
     from left to right as --memory-progress is updated from script. */
  background-image: linear-gradient(
    to right,
    rgba(194, 65, 12, 0.18) 0%,
    rgba(194, 65, 12, 0.18) var(--memory-progress),
    rgba(255, 255, 255, 0) var(--memory-progress),
    rgba(255, 255, 255, 0) 100%
  );
  background-color: #fff7ed;   /* orange-50 */
  transition: color 0.15s ease, border-color 0.15s ease;
}

.memory-continue-btn:hover {
  border-color: #9a3412;
  color: #9a3412;
}

.memory-continue-btn:focus-visible {
  outline: 2px solid #c2410c;
  outline-offset: 2px;
}

.memory-ready-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #94a3b8;              /* slate-400 */
}

/* The way to the receipt, offered from the moment it is ready and never
   expiring. Deliberately NOT the board overlay — that covers the grid the
   reader may have just asked to stay on.

   It used to be hidden until `is-continuing`, which meant the only control on
   a finished scan was "Continue game": a reader who wanted their receipt NOW
   had to either wait out the countdown or press the button that says they
   want to stay. Shown from the start, the bar offers both answers to the
   question it asks. Changed 2026-09-22. */
.memory-open-receipt {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c2410c;
  text-decoration: none;
}

.memory-open-receipt:hover {
  text-decoration: underline;
}

/* Once the reader chooses to keep playing there is no countdown left to show,
   so the bar collapses to the plain link back to the receipt. */
.memory-ready-bar.is-continuing .memory-continue-btn,
.memory-ready-bar.is-continuing .memory-ready-hint {
  display: none;
}

/* The button stays on a board that is already solved, even though "Continue
   game" then reads oddly. Hiding it there (tried 2026-09-23) took away the only
   way to REFUSE the move, which is the stronger promise: the countdown is
   always visible and always refusable. A reader who solved the board and does
   not want to be taken anywhere yet needs the same control as anyone else.
   Relabelling it instead needs a new string in 11 catalogues — TODO.md. */

@media (prefers-reduced-motion: reduce) {
  .memory-continue-btn {
    transition: none;
  }
}

@keyframes memory-overlay-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}