/* «Замри» (js/tasks/go-nogo.js). Подключается после css/tasks.css.
   Ни мигания, ни пульса: рамка карточки стоит на месте, меняется только картинка — плавно, 0,25 с;
   подсказка — ровная рамка. Без анимации (.is-rm или «уменьшить движение» в системе) — картинка меняется сразу.
   Размеры (--gn-card, --gn-show, --gn-btn, --gn-gap) подбирает go-nogo.js по месту: зоны касания ≥ 96 px, между ≥ 24 px. */
.gn { --gn-card: 300px; --gn-show: 240px; --gn-btn: 180px; --gn-gap: 40px;
  width: 100%; height: 100%; min-width: 0; max-width: 100%; min-height: 0;
  display: grid; place-items: center; align-content: center; gap: 28px; }
.gn.is-rm, .gn.is-rm * { animation: none !important; transition: none !important; }

.gn-card, .gn-show, .gn-btn { position: relative; padding: 12px; background: var(--c-card); border: 3px solid var(--c-ink);
  color: var(--c-ink); display: grid; place-items: center; }
.gn-card { width: var(--gn-card); height: var(--gn-card); box-shadow: 0 6px 0 var(--c-ink); touch-action: manipulation; }
.gn-show { width: var(--gn-show); height: var(--gn-show); }
.gn-btns { display: flex; gap: var(--gn-gap); }
.gn-btn { width: var(--gn-btn); height: var(--gn-btn); box-shadow: 0 6px 0 var(--c-ink); touch-action: manipulation; }
.gn-card:active, .gn-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c-ink); }

/* картинка карточки: проявляется и уходит плавно, рамка остаётся */
.gn-face { width: 100%; height: 100%; display: grid; place-items: center; opacity: 0; transition: opacity .25s ease-out; pointer-events: none; }
.gn-face.is-on { opacity: 1; }
.gn-face > img, .gn-btn > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.gn-icon, .gn-icon svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.gn-card .task-label { font-size: calc(var(--gn-card) * .2); }
.gn-card .task-label.is-long { font-size: calc(var(--gn-card) * .15); }
.gn-show .task-label { font-size: calc(var(--gn-show) * .2); }
.gn-show .task-label.is-long { font-size: calc(var(--gn-show) * .15); }
.gn-btn .task-label { font-size: calc(var(--gn-btn) * .2); }
.gn-btn .task-label.is-long { font-size: calc(var(--gn-btn) * .15); }

/* своя тронута / верная кнопка — зелёная; «ой» — томатная рамка и короткое покачивание (kit.wiggle);
   подсказка — тёплая ровная рамка вокруг того, что можно нажать */
.gn-card.is-hit, .gn-btn.is-right { border-color: var(--c-ok); background: #eaf6ee; box-shadow: 0 6px 0 #2b7347; }
.gn-card.is-oops, .gn-btn.is-oops { border-color: var(--c-oops); }
.gn-card.is-wrong, .gn-btn.is-wrong { animation: nope .5s; }
.gn-card.is-hinted, .gn-btn.is-hinted { outline: 6px solid var(--c-accent); outline-offset: 4px; }

/* телефон боком: карточка слева, кнопки справа — рядом, по центру сцены */
.gn.is-row { grid-auto-flow: column; justify-content: center; gap: var(--gn-gap); }

@media (prefers-reduced-motion: reduce) {
  .gn-face { transition: none; }
}