/* «Запомни»: вид. Общие токены — в shared/base.css. Акцент — бирюзовый. */

.g-zapomni {
  --zp-acc: #00727f;
  --zp-on: #ffffff;
  --zp-cell: #c8d5e1;
  --zp-bad: #c4313c;
  --accent: var(--zp-acc);
  --on-accent: var(--zp-on);
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}
:root[data-theme='dark'] .g-zapomni {
  --zp-acc: #46d6cf;
  --zp-on: #06101a;
  --zp-cell: #2b3945;
  --zp-bad: #ff7b86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .g-zapomni {
    --zp-acc: #46d6cf;
    --zp-on: #06101a;
    --zp-cell: #2b3945;
    --zp-bad: #ff7b86;
  }
}

/* ---------- верх: жизни — сердечки ---------- */

.zp-life { width: 22px; height: 22px; fill: var(--zp-acc); stroke: var(--zp-acc); stroke-width: 2; stroke-linejoin: round; transition: fill 0.2s; }
.zp-life.off { fill: none; stroke: var(--muted); }

/* ---------- подсказка ---------- */

.zp-msg { padding: 14px 20px 0; text-align: center; }
.zp-status { font-size: 20px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.zp-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text);
}
.zp-note .ic { width: 18px; height: 18px; flex: none; }

/* ---------- поле ---------- */

.zp-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px 16px 24px;
}
.zp-board {
  --gap: 8px;
  width: var(--side, min(92vw, 440px));
  height: var(--side, min(92vw, 440px));
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--gap);
}
.zp-board[data-n='5'] { --gap: 6px; }
.zp-board[data-n='6'] { --gap: 4px; }
.zp-board.enter { animation: zpEnter 0.26s ease-out; }
@keyframes zpEnter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }

.zp-cell {
  min-width: 0;
  min-height: 0;
  border-radius: 18%;
  background: var(--zp-cell);
  transition: background-color 0.14s ease-out, transform 0.1s ease-out, box-shadow 0.14s;
}
.g-zapomni[data-phase='play'] .zp-cell:active { transform: scale(0.94); }
.g-zapomni:not([data-phase='play']) .zp-cell { cursor: default; }
.zp-cell.lit { background: var(--zp-acc); }
.zp-cell.ok { background: var(--zp-acc); animation: zpPop 0.22s ease-out; }
.zp-cell.bad { background: var(--zp-bad); animation: zpShake 0.32s ease-out; }
.zp-cell.missed { background: transparent; box-shadow: inset 0 0 0 3px var(--zp-acc); }
@keyframes zpPop { 0% { transform: scale(0.88); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes zpShake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }

@media (max-height: 640px) {
  .zp-msg { padding-top: 8px; }
  .zp-stage { padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .zp-board.enter, .zp-cell.ok, .zp-cell.bad { animation: none; }
  .zp-cell { transition: none; }
}