/* ============================================================
   Letter Tracing — styles
   Bright, high-contrast, big touch targets, rounded shapes.
   ============================================================ */

:root {
  --bg:        #fff8e7;   /* warm cream */
  --panel:     #ffffff;
  --ink-blue:  #1d70b8;   /* matches rail color */
  --accent:    #ff7a1a;   /* friendly orange */
  --accent-2:  #2bb673;   /* success green   */
  --pink:      #ff5d8f;
  --purple:    #7b5cff;
  --text:      #2b2b3a;
  --shadow:    0 6px 0 rgba(0,0,0,0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                 /* no page scroll while tracing */
  overscroll-behavior: none;        /* kill pull-to-refresh / bounce */
  background: var(--bg);
  color: var(--text);
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI Rounded", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;               /* global: block pinch/scroll gestures */
}

.hidden { display: none !important; }

/* ---------- layout: picker rail + play area ---------- */
body {
  display: flex;
  flex-direction: row;
}

#picker {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px;
  overflow-y: auto;
  background: var(--purple);
  align-content: start;
}

#picker button {
  width: 46px; height: 46px;
  border: none; border-radius: 14px;
  font-size: 22px; font-weight: 800;
  background: #ffffff; color: var(--purple);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .08s ease;
}
#picker button:active { transform: translateY(3px); box-shadow: none; }
#picker button.current {
  background: var(--accent); color: #fff;
  outline: 3px solid #fff;
}

#play {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0; min-height: 0;
  padding: 10px;
}

/* ---------- top bar: prev / big letter / next ---------- */
#topbar {
  position: relative;                /* anchor the top-right "Show saved" toggle */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* top-right settings button (parent) */
#settingsBtn {
  position: absolute;
  top: 0; right: 0;
  border: none; border-radius: 14px;
  padding: 10px 14px;
  font-size: 15px; font-weight: 800;
  background: #fff; color: var(--purple);
  box-shadow: var(--shadow);
  cursor: pointer; max-width: 38%;
}
#settingsBtn:active { transform: translateY(3px); box-shadow: none; }
#bigLetter {
  font-size: clamp(40px, 9vh, 90px);
  font-weight: 900;
  color: var(--ink-blue);
  min-width: 1.4em;
  text-align: center;
}
.navBtn {
  width: 64px; height: 64px;
  border: none; border-radius: 50%;
  font-size: 40px; line-height: 1;
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.navBtn:active { transform: translateY(3px); box-shadow: none; }
/* Home reuses .bigBtn; as an <a> it just needs the link underline removed. */
#homeBtn { text-decoration: none; }

/* ---------- stage row: letter stage (left) + reward panel (right) ---------- */
#stageRow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  min-height: 0;
  padding: 8px 0;
}

/* ---------- stage: guide letter + ink canvas ---------- */
#stage {
  position: relative;
  /* viewBox is 215.9 x 279.4 → keep that aspect ratio */
  aspect-ratio: 215.9 / 279.4;
  height: 100%;
  background: var(--panel);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
  touch-action: none;
}

/* ---------- reward panel: reserved space, fades in on completion ---------- */
#rewardPanel {
  position: relative;
  flex: 1 1 0;
  max-width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border-radius: 24px;
  box-shadow: var(--shadow);
  /* hidden until a letter is completed — opacity (not display) so the slot
     stays reserved and the stage never resizes when it appears */
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
#rewardPanel.show { opacity: 1; visibility: visible; }
#rewardPanel.show #successPic { animation: bounce 1s ease-in-out infinite; }

/* letter SVG and ink canvas perfectly overlap and fill the stage */
#letterLayer, #ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#letterLayer svg { width: 100%; height: 100%; display: block; }
#ink { touch-action: none; }

/* review overlay: the latest saved drawing, overlaid 1:1 on the stage so it
   looks exactly like the child's ink still sitting on the guide. Transparent
   (no wash) so the guide reads at full strength; never intercepts touches. */
#savedLayer {
  position: absolute;
  inset: 0;                               /* full stage: saved viewBox is the
                                             tracing area, so it overlays 1:1 */
  pointer-events: none;
}
#savedLayer svg { width: 100%; height: 100%; display: block; }

/* dim the grading rails — child should follow guides, not the raw rail.
   Keep them faintly visible as a path hint. */
#letterLayer #strokes,
#demoLayer #strokes {
  stroke: #c9d8e8 !important;
  /* stroke-width is set from JS (app.js) so the blue band exactly matches the
     graded tolerance tube in screen px — do NOT hard-code a width here. */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.9;
}

/* The directional cues (dotted centerline, start dot, arrowhead) are now drawn
   by app.js FROM the stroke geometry. So hide any arrow/line/path artwork the
   SVG's #guides group may contain, but KEEP the stroke-number <text> — that's
   the only guide content a new letter file needs to provide. */
#letterLayer #guides path,
#letterLayer #guides line,
#letterLayer #guides polyline,
#letterLayer #guides polygon,
#demoLayer #guides path,
#demoLayer #guides line,
#demoLayer #guides polyline,
#demoLayer #guides polygon { display: none !important; }
#letterLayer #guides text,
#demoLayer #guides text { fill: #ff0000; }
/* Simple mode hides the stroke-order numbers (order doesn't matter there). */
body.simple #letterLayer #guides text,
body.simple #demoLayer #guides text { display: none !important; }
/* The #bbox (letter bounding box) and #lines (baseline/x-height/etc. rules)
   groups are authoring metadata — never displayed. Both use visibility (not
   display) so app.js can still getBBox() them in every browser (Firefox throws
   on getBBox() for display:none elements per the SVG spec; Chrome/Edge are
   lenient but a spec-correct browser must not be relied on). #bbox is the
   authoritative horizontal frame and #lines the vertical one (see
   frameToContent). */
#letterLayer #bbox,  #demoLayer #bbox  { visibility: hidden !important; }
#letterLayer #lines, #demoLayer #lines { visibility: hidden !important; }

.overlay-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  font-size: 22px; font-weight: 700; color: var(--text);
  white-space: pre-line;
  background: rgba(255,255,255,0.92);
}

/* ---------- bottom controls ---------- */
#controls {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  justify-content: center;
  padding-top: 4px;
}
.bigBtn {
  border: none; border-radius: 18px;
  padding: 16px 26px;
  font-size: 22px; font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease;
}
.bigBtn:active { transform: translateY(3px); box-shadow: none; }
.bigBtn.ghost   { background: #fff; color: var(--ink-blue); }
.bigBtn.primary { background: var(--accent-2); color: #fff; }

/* ---------- reward panel contents ---------- */
#successPic { width: 78%; margin: 0 auto; }
#successPic svg { width: 100%; height: auto; max-height: 40vh; display: block; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

#successWord {
  margin: 6px 0 12px;
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 900;
  color: var(--pink);
  text-align: center;
}

/* ---------- drawing feedback face ---------- */
#faceCue {
  position: absolute;
  top: 10px; left: 10px;
  width: 64px; height: 64px;
  pointer-events: none;   /* never intercept tracing */
  z-index: 5;
}
#faceCue svg { width: 100%; height: 100%; display: block; }
#faceCue .faceBg { fill: var(--accent-2); transition: fill .12s ease; }
#faceCue .eye    { fill: #fff; }
#faceCue .smile  { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
#faceCue .frown  { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; display: none; }
/* sad state: red bg, hide smile, show frown */
#faceCue.sad .faceBg { fill: #ff5252; }
#faceCue.sad .smile  { display: none; }
#faceCue.sad .frown  { display: block; }

/* ---------- preview of all saved work (the "Save" contact sheet) ---------- */
#previewModal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  gap: 12px; padding: 16px;
  background: rgba(43, 43, 58, 0.6);
  touch-action: auto;                 /* allow scrolling inside the modal */
}
#previewScroll {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
}
#previewBody svg { width: 100%; height: auto; display: block; }
#previewBar {
  flex: 0 0 auto;
  display: flex; gap: 14px; justify-content: center;
}

/* ---------- parent settings modal ---------- */
#settingsModal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(43, 43, 58, 0.6); touch-action: auto;
}
#settingsCard {
  width: min(440px, 100%); background: var(--panel);
  border-radius: 24px; box-shadow: var(--shadow);
  padding: 20px 22px; max-height: 90vh; overflow: auto;
}
#settingsCard h2 { margin: 0 0 14px; color: var(--purple); font-size: 26px; text-align: center; }
/* In-dialog full-width toggle buttons (Ordered tracing, Keep my drawings). */
.toggleBtn {
  display: block; width: 100%; margin: 0 0 12px;
  padding: 14px 14px; border: 3px solid #e3e3ee; border-radius: 16px;
  background: #fff; color: var(--purple);
  font-size: 17px; font-weight: 800; cursor: pointer;
  font-family: inherit; -webkit-user-select: none; user-select: none;
  box-shadow: var(--shadow);
}
.toggleBtn.on { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.toggleBtn:active { transform: translateY(3px); box-shadow: none; }
.setupField { display: block; margin: 0 0 14px; font-size: 18px; font-weight: 800; color: var(--text); }
.sliderRow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.sliderRow input[type="range"] {
  flex: 1 1 auto; height: 6px; border-radius: 3px; appearance: auto;
  background: #e3e3ee; outline: none; cursor: pointer;
}
.sliderRow span {
  min-width: 40px; text-align: right; font-size: 15px; color: var(--ink-blue); font-weight: 800;
}
#settingsBar { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }

/* simple CSS sparkles */
#sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 32px; }
#sparkles span {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  animation: spark 1s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ---------- landscape: picker becomes a top strip-friendly column ---------- */
@media (orientation: landscape) {
  #picker { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: portrait) {
  body { flex-direction: column; }
  #picker {
    order: 2;
    grid-template-columns: repeat(13, 1fr);
    width: 100%;
  }
  #play { order: 1; }
  /* Stack the reward panel BELOW the stage in portrait so the letter stays
     large. Panel still reserves no layout jump (it's hidden until shown). */
  #stageRow { flex-direction: column; align-items: center; }
  #stage { height: auto; width: 100%; max-width: min(100%, 60vh); }
  #rewardPanel { max-width: 100%; width: 100%; flex: 0 0 auto; }
}

/* ===========================================================
   Intro / Start screen
   =========================================================== */
#introScreen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 20px;
}
#introScreen.hidden { display: none !important; }
#introCard {
  text-align: center;
  max-width: 420px;
  background: var(--panel);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 36px 28px 28px;
}
#introCard h1 {
  color: var(--ink-blue); font-size: clamp(28px, 6vw, 40px);
  font-weight: 900; margin: 0 0 10px;
}
.introKid {
  color: var(--text); font-size: clamp(18px, 4vw, 22px);
  font-weight: 800; margin: 0 0 24px;
}
#introCard .bigBtn { width: 100%; margin-bottom: 12px; }
#parentLink {
  display: block; margin-top: 18px;
  color: var(--purple); font-size: 15px; font-weight: 800;
  text-decoration: none;
}
#parentLink:hover { text-decoration: underline; }

/* ===========================================================
   Parent / Teacher docs modal
   =========================================================== */
#parentDocs {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(43, 43, 58, 0.6);
}
#parentDocsCard {
  width: min(480px, 100%); background: var(--panel);
  border-radius: 24px; box-shadow: var(--shadow);
  padding: 24px 24px 20px; max-height: 86vh; overflow: auto;
}
#parentDocsCard h2 { color: var(--purple); font-size: 24px; text-align: center; margin: 0 0 18px; }
#parentDocsCard h3 { color: var(--ink-blue); font-size: 18px; margin: 0 0 6px; }
#parentDocsCard p { color: var(--text); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
#parentDocs .docSection { margin-bottom: 16px; }
#parentDocsClose { width: 100%; margin-top: 8px; }

/* ===========================================================
   Demo overlay
   =========================================================== */
#demoOverlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); padding: 20px;
}
#demoOverlay.hidden { display: none !important; }
#demoStage {
  position: relative;
  aspect-ratio: 215.9 / 279.4;
  width: 100%; max-width: min(100%, 55vh);
  height: 100%; max-height: 70vh;
  background: var(--panel);
  border-radius: 24px; box-shadow: var(--shadow);
  overflow: hidden;
}
#demoLayer, #demoCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#demoLayer svg { width: 100%; height: 100%; display: block; }
#demoCanvas { z-index: 2; }
#demoBar {
  display: flex; gap: 14px; justify-content: center; margin-top: 14px;
}