/* Графический диктант (graphic-dictation): лист в клетку с точками, линия ребёнка, стрелка-подсказка,
   ряд карточек «маршрута робота». Геометрия листа — в клетках (viewBox), размер клетки (--gd-pitch) подбирает
   graphic-dictation.js: зона касания точки — вся её клетка, на планшете не меньше 72 px.
   Без анимации — .is-rm (ctx.reducedMotion) или системное «уменьшить движение» (styles.css). */

.gd { width: 100%; height: 100%; min-width: 0; max-width: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); gap: 10px; justify-items: center; }
.gd.has-cards { grid-template-rows: auto minmax(0, 1fr); }
.gd.is-rm, .gd.is-rm * { animation: none !important; transition: none !important; }
/* лист не влез под облачко по высоте: пустую во время задания строку кнопок отдаём ему (как number-path) */
.stage:has(.gd.is-tight) > .stage-controls:empty { min-height: 0; }

.gd-field { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; }
.gd-paper { position: relative; line-height: 0; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 6px 0 var(--c-ink); }
.gd-svg { display: block; touch-action: none; cursor: pointer; overflow: visible; }

/* лист в клетку и точки-перекрёстки */
.gd-grid line { stroke: rgba(34, 48, 74, .13); stroke-width: .025; }
.gd-dot { fill: var(--c-ink); opacity: .42; }
.gd-start { fill: var(--c-ok); stroke: #fff; stroke-width: .06; }

/* линия ребёнка растёт от пера (pathLength = 1); без анимации сразу целиком */
.gd-seg { fill: none; stroke: var(--c-ink); stroke-width: .15; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: gd-grow var(--gd-t, 180ms) linear both; }
@keyframes gd-grow { from { stroke-dashoffset: 1; } }
/* примерка, пока палец тянет: бледная пунктирная линия от пера до точки под пальцем */
.gd-preview { fill: none; stroke: var(--c-accent); stroke-width: .1; stroke-linecap: round; stroke-dasharray: .1 .14; opacity: .7; pointer-events: none; }

/* перо — тёплое кольцо там, где сейчас линия (не зелёное: зелёная — точка начала) */
.gd-pen { transition: transform .18s ease-out; pointer-events: none; }
.gd-pen circle { fill: none; stroke: var(--c-accent); stroke-width: .07; transform-box: fill-box; transform-origin: center; animation: gd-pen .9s infinite alternate ease-in-out; }
@keyframes gd-pen { to { transform: scale(1.18); } }
.gd-pen.is-nudge circle { animation: gd-nudge .4s ease-out; }
@keyframes gd-nudge { 40% { transform: scale(1.45); } }

/* стрелка нужной стороны: загорается после ошибки и горит до конца шага */
.gd-arrow { opacity: 0; pointer-events: none; transition: opacity .15s; }
.gd-arrow.is-on { opacity: 1; }
.gd-arrow-line { fill: none; stroke: var(--c-accent); stroke-width: .11; stroke-linecap: round; }
.gd-arrow-head { fill: var(--c-accent); stroke: var(--c-accent); stroke-width: .04; stroke-linejoin: round; }
.gd-arrow.is-on path { animation: gd-arrow .7s infinite alternate ease-in-out; }
@keyframes gd-arrow { to { opacity: .45; } }

/* неверный ход: бледная красная линия или вспышка точки — гаснут сами */
.gd-ghost { fill: none; stroke: var(--c-oops); stroke-width: .1; stroke-linecap: round; stroke-dasharray: .12 .12; animation: gd-fade .8s ease-in both; }
.gd-miss { fill: var(--c-oops); animation: gd-fade .8s ease-in both; }
@keyframes gd-fade { from { opacity: .75; } to { opacity: 0; } }

/* рисунок готов: замкнутый — заливается, линия зеленеет, подпись наклейкой в углу листа */
.gd.is-done .gd-pen, .gd.is-done .gd-preview, .gd.is-done .gd-arrow { display: none; }
.gd.is-done .gd-seg { stroke: var(--c-ok); }
.gd-fill { fill: #f3cf72; opacity: .9; animation: gd-fill .6s ease-out both; }
@keyframes gd-fill { from { opacity: 0; } }
.gd-pic { position: absolute; top: -16px; right: -12px; padding: 4px 16px 7px; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink);
  font-family: var(--f-title); font-size: 32px; line-height: 1.1; color: var(--c-ink); white-space: nowrap; transform: rotate(4deg); animation: gd-pop .45s ease-out both; }
@keyframes gd-pop { from { transform: rotate(4deg) scale(.4); opacity: 0; } 70% { transform: rotate(4deg) scale(1.08); } }

/* маршрут робота: ряд карточек, на карточке столько стрелок, сколько клеточек; текущая подсвечена.
   Карточки не кнопки (касаются только поля), поэтому меньше 72 px. Длинный маршрут прокручивается к текущей. */
.gd-cards { position: relative; display: flex; gap: 10px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 10px; scrollbar-width: none; }
.gd-cards::-webkit-scrollbar { display: none; }
.gd-card { flex: none; height: 60px; min-width: 60px; padding: 0 8px; display: flex; align-items: center; justify-content: center; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 4px 0 var(--c-ink); color: var(--c-ink); transition: transform .15s, opacity .2s; }
.gd-ar { display: block; width: 30px; height: 30px; }
.gd-ar svg { display: block; width: 100%; height: 100%; }
.gd-card[data-dir="left"] .gd-ar svg { transform: rotate(180deg); }
.gd-card[data-dir="up"] .gd-ar svg { transform: rotate(-90deg); }
.gd-card[data-dir="down"] .gd-ar svg { transform: rotate(90deg); }
.gd-card.is-now { border-color: var(--c-accent); background: #fff1e0; color: var(--c-accent); box-shadow: 0 4px 0 var(--c-accent); transform: translateY(-3px); }
.gd-card.is-done { opacity: .4; }
.gd.is-done .gd-card { opacity: 1; color: var(--c-ok); border-color: var(--c-ok); box-shadow: 0 4px 0 #2b7347; } /* весь маршрут пройден */
.gd-card.is-wrong { animation: nope .5s; border-color: var(--c-oops); }
/* невысокий планшет боком: ряд карточек съел бы клетки поля — маршрут столбиком справа от листа, сверху вниз
   (справа, а не слева: слева внизу стоят герои) */
.gd.has-cards.is-side { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
.gd.is-side .gd-field { justify-items: end; } /* лист — к карточкам, подальше от героев */
.gd.is-side .gd-cards { order: 2; flex-direction: column; align-items: flex-start; max-width: none; max-height: 100%; overflow-x: hidden; overflow-y: auto; padding: 6px 10px 10px 4px; }

@media (max-width: 700px) {
  .gd { gap: 8px; }
  .gd-cards { gap: 8px; }
  .gd-card { height: 50px; min-width: 50px; padding: 0 6px; }
  .gd-ar { width: 24px; height: 24px; }
  .gd-pic { font-size: 24px; top: -12px; right: -6px; padding: 3px 12px 5px; }
}