/* ═══════════════════════════════════════
   ABC + LETTER TRACING  v2 — Paint-to-Reveal
   ═══════════════════════════════════════ */

/* ── ABC hub screen ──────────────────────────────────────────────────────── */
#abcScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:transparent;
  align-items:center;justify-content:center;
}
.abc-picker .sports-card{height:clamp(140px,26vh,200px);}
.abc-card-emoji{font-size:clamp(3rem,10vw,4.2rem);line-height:1;}

/* ── Tracing screen ──────────────────────────────────────────────────────── */
#tracingScreen{
  display:none;position:fixed;inset:0;z-index:10;
  /* Warm cream — inviting, not clinical */
  background:linear-gradient(160deg,#fff8f0 0%,#fce4ec 100%);
  touch-action:none;
  overscroll-behavior:none;
  overflow:hidden;
}

/* ── Header: word chip ───────────────────────────────────────────────────── */
.trace-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:center;
  padding:14px 70px 10px;
  pointer-events:none; /* let taps pass through to canvases */
}
#traceWord{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:clamp(1.1rem,4.5vw,1.5rem);
  color:#5d3a00;
  background:rgba(255,255,255,0.82);
  border-radius:50px;
  padding:8px 22px;
  border:2px solid rgba(93,58,0,0.12);
  pointer-events:auto;
}

/* ── Three stacked canvases — all positioned by JS ──────────────────────── */
/* Base (ghost letter) — bottom, no pointer events */
#traceBaseCanvas{
  position:absolute;
  left:0;
  touch-action:none;
  pointer-events:none;   /* ghost is visual only */
  z-index:1;
}
/* Reveal (coloured fill clipped to letter) — middle, no pointer events */
#traceRevealCanvas{
  position:absolute;
  left:0;
  touch-action:none;
  pointer-events:none;
  z-index:2;
}
/* Stroke (child's brush, receives all touch) — top */
#traceStrokeCanvas{
  position:absolute;
  left:0;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  z-index:3;
  cursor:crosshair;
}

/* ── Celebration pulse on stroke canvas ─────────────────────────────────── */
#traceStrokeCanvas.trace-pulse{
  animation:tracePulseHue 1.4s ease-in-out;
}
@keyframes tracePulseHue{
  0%  {filter:hue-rotate(0deg)   brightness(1);}
  50% {filter:hue-rotate(180deg) brightness(1.35);}
  100%{filter:hue-rotate(360deg) brightness(1);}
}

/* ── Next-letter skip button ─────────────────────────────────────────────── */
#traceNextBtn{
  position:absolute;
  bottom:max(20px,env(safe-area-inset-bottom,16px));
  right:16px;
  z-index:25;
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  border:none;
  font-size:1.8rem;line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .12s;
}
#traceNextBtn:active{transform:scale(.9);}
/* Shown for the 3s between finishing a letter and auto-advancing — a visible
   cue that something is about to happen on its own, and that tapping now
   skips the wait rather than doing something new. */
#traceNextBtn.trace-next-armed{animation:traceNextArmed 3s ease-in-out;}
@keyframes traceNextArmed{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25);}
  15%,85%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 6px rgba(102,187,106,.45);}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 10px rgba(102,187,106,.22);}
}

/* ── Word illustration image ─────────────────────────────────────────────── */
#traceWordImg{
  /* Positioned and sized entirely by JS — just ensure it layers correctly */
  z-index:5;
}

/* ── Again / Next choice buttons ─────────────────────────────────────────── */
#traceChoiceBtns button{
  /* Base styles set inline by JS; these provide safe fallbacks */
  font-family:'Baloo 2',cursive;
  font-weight:900;
  border-radius:20px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-width:44px;
  min-height:44px;
  transition:transform .12s;
}
#traceChoiceBtns button:active{transform:scale(.93);}