/* handwriting-trace.css — the touchscreen tracer (/gym/handwriting/).
   docs/handwriting-practice-plan.md §4. The board is always PAPER (white,
   the printed page's ruling colours) in both themes: a child traces the same
   lines on screen as on the sheet. */

.ht-panel { max-width: 1100px; }
.ht-lede { color: var(--muted); font-size: 17px; margin: 0 0 14px; }
.ht-panel h2 { font-size: 18px; margin: 14px 0 8px; }
.ht-panel h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.ht-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-chip {
  min-height: 48px; padding: 10px 18px; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 700;
  border: 2px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer;
}
.ht-chip[aria-pressed="true"] { background: var(--pri); border-color: var(--pri); color: #fff; }
.ht-chip:disabled { opacity: .45; cursor: not-allowed; }
.ht-field { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; font-weight: 700; max-width: 640px; }
.ht-field select, .ht-field input, .ht-field textarea {
  font: inherit; font-size: 18px; font-weight: 400; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--panel); color: var(--text);
}
.ht-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; }
.ht-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #5a3d00; font-weight: 700; max-width: 640px; }
.ht-start {
  margin-top: 20px; min-height: 64px; padding: 14px 34px; border: 0; border-radius: 18px; cursor: pointer;
  font: inherit; font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10b981, #0b7a75);
}

/* While the board is open the page holds still (tracer-page.js lockScroll):
   a stroke that runs off the board must not drag the page. */
html.ht-locked, html.ht-locked body { overflow: hidden; overscroll-behavior: none; }
html.ht-locked .ht-board { touch-action: none; }

/* ── the board ─────────────────────────────────────────────────────────── */
.ht-board { display: flex; flex-direction: column; gap: 10px; }
.ht-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ht-btn {
  min-height: 48px; padding: 8px 16px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.ht-stars { margin-left: auto; display: flex; gap: 4px; font-size: 26px; line-height: 1; }
.ht-star { color: #c3cad4; }
.ht-star.on { color: #f5b301; }
.ht-stage {
  background: #fff; border-radius: 20px; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: 8px;
  height: min(70vh, 720px); min-height: 280px;
}
.ht-svg {
  width: 100%; height: 100%; display: block;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: crosshair;
}

/* The child's ink: blue while drawing, green when it was good, and a miss
   fades away (a consequence, never a verdict). */
.ht-stroke { fill: none; stroke: #2563eb; stroke-linecap: round; stroke-linejoin: round; }
.ht-stroke.good { stroke: #0f9f6e; }
.ht-stroke.miss { stroke: #d9480f; transition: opacity .6s ease; opacity: 0; }
.ht-anim-path { fill: none; stroke: #0b7a75; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ht-anim-dot { fill: #0b7a75; }

/* The start dot pulses; after a miss it pulses harder. */
.ht-dot { fill: #f59f00; stroke: #fff; stroke-width: 14; transform-box: fill-box; transform-origin: center; animation: ht-pulse 1.2s ease-in-out infinite; }
.ht-dot.strong { fill: #e8590c; animation-duration: .6s; }
.ht-arrow { fill: none; stroke: #f59f00; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
@keyframes ht-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.ht-win .ht-done .ht-stroke { animation: ht-glow .6s ease-out; }
@keyframes ht-glow { 0% { stroke: #ffd43b; } 100% { stroke: #0f9f6e; } }

.ht-celebrate {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; background: rgba(9, 14, 24, .55);
}
.ht-big {
  min-height: 80px; min-width: 220px; padding: 16px 28px; border-radius: 22px; border: 0; cursor: pointer;
  font: inherit; font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10b981, #0b7a75);
}
.ht-big.ht-done { background: #334155; }
.ht-print-big { background: #6741d9; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ht-print { display: inline-block; margin: 14px 0 0 14px; font-weight: 700; color: var(--pri); }
.ht-print[hidden], .ht-print-big[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ht-dot, .ht-dot.strong { animation: none; }
  .ht-win .ht-done .ht-stroke { animation: none; }
  .ht-stroke.miss { transition: none; }
}
@media (max-width: 720px) {
  .ht-stage { height: min(62vh, 560px); }
  .ht-stars { font-size: 20px; }
}