/* Trace is one folio: shared composition owns the presenter above it. */
.lg-app .lg-play[data-activity="trace"] .play-stage {
  width:min(720px,100%); min-height:0; max-height:560px; margin:8px auto 66px;
  border:0; background:none; box-shadow:none; overflow:visible; mask-image:none; -webkit-mask-image:none;
}
.lg-app .lg-play[data-activity="trace"] .trace-wrap {
  background:var(--lg-board,linear-gradient(110deg,#7fce54 -20%,#4e9677 36%,#2f5c46 70%));
  border:3px solid #4a3620; border-radius:28px;
  box-shadow:0 6px 0 #4a3620,inset 0 3px 0 #b7e779,0 12px 0 rgb(74 54 32 / .14);
}
.trace-paper {
  position:absolute; inset:12px 12px 72px; border-radius:16px;
  box-shadow:0 3px 0 #e5dcc8,0 6px 0 #c9bda4,0 9px 0 rgb(43 30 18 / .18);
}
.lg-app .lg-play[data-activity="trace"] .trace-canvas {
  background:linear-gradient(150deg,#fffdf7,#fffaf0); border-radius:16px;
  box-shadow:inset 0 0 0 1px #e5dcc8; cursor:crosshair;
}
.trace-wrap::before,.trace-wrap::after {
  content:""; position:absolute; top:4px; width:30px; height:18px; z-index:2; pointer-events:none;
  border:2.4px solid #4a3620; border-radius:5px;
  background:linear-gradient(#fffdf7,#e5dcc8 55%,#c9bda4); box-shadow:0 2px 0 #a89478;
}
.trace-wrap::before { left:20%; }
.trace-wrap::after { right:20%; }
.trace-tools { position:absolute; bottom:8px; left:18px; right:12px; height:52px; display:flex; justify-content:space-between; align-items:center; }
.trace-crayon { width:132px; height:40px; filter:drop-shadow(0 2px 0 rgb(43 30 18 / .2)); pointer-events:none; }
.lg-app .trace-tools .trace-clear {
  position:relative; inset:auto; width:52px; height:52px; min-width:52px; padding:7px;
  background:linear-gradient(#fffdf7,#fffaf0 75%,#e5dcc8); border:3px solid #4a3620; box-shadow:0 3px 0 #a89478;
}
.trace-tools .trace-clear svg { width:100%; height:100%; }
@media(max-height:650px) {
  .lg-app .lg-play[data-activity="trace"] .play-stage { max-height:56vh; margin-bottom:58px; }
  .trace-paper { inset:9px 9px 67px; }
  .trace-tools { bottom:6px; height:48px; }
  .lg-app .trace-tools .trace-clear { width:48px; height:48px; min-width:48px; }
  .trace-crayon { width:112px; }
}

.lg-app .drawing-palette {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.lg-app .drawing-color {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 7px;
  border: 3px solid #4a3620;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 3px 0 #c9bda4;
}

.lg-app .drawing-color span {
  width: 24px;
  height: 24px;
  border: 1.6px solid #4a3620;
  border-radius: 50%;
  background: var(--drawing-color);
}

.lg-app .drawing-color[aria-pressed="true"] {
  box-shadow: 0 3px 0 #c9bda4, inset 0 0 0 4px #ffe49a;
  transform: translateY(-2px);
}

.lg-app .garden-paths > .drawing-palette {
  padding: 4px 10px;
  border-radius: 28px;
  background: #e5dcc8;
}

.lg-app .path-guide:not([hidden]) {
  display: block;
}

.lg-app .path-guide[hidden] {
  display: none;
}

.lg-app .path-guide > .path-guide-glyph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lg-app .trace-tools .drawing-palette {
  margin-inline: auto;
}
/* Colour is a pencil, not an unexplained coloured dot. Keep the full hit area. */
.lg-app .trace-tools .drawing-color { border-radius:12px; padding:4px 10px; }
.lg-app .trace-tools .drawing-color span {
  width:18px; height:28px; border:2.4px solid #4a3620; border-radius:7px 7px 3px 3px;
  clip-path:polygon(50% 0,100% 24%,100% 100%,0 100%,0 24%);
  box-shadow:inset 4px 0 0 rgb(255 250 240 / .27);
}
.lg-app .trace-tools .drawing-color[aria-pressed="true"] { background:#ffe49a; box-shadow:0 4px 0 #a89478; }

@media(max-width:700px) {
  .lg-app .trace-tools .trace-crayon { display:none; }
}

/* Finished ink remains on the same paper until the child chooses to move on. */
.lg-app .trace-canvas { object-fit: contain; }
/* Use the same contain frame as the canvas so dots stay anchored on rotation. */
.lg-app .trace-hint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lg-app .trace-hint circle {
  stroke: #e8743c;
  stroke-width: 3px;
  animation: trace-hint-fade 620ms ease 2;
}
@keyframes trace-hint-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.lg-reduce-motion .trace-hint circle { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lg-app .trace-hint circle { animation: none; }
}

.trace-paper.is-complete {
  box-shadow: 0 0 0 3px #4e9677, 0 4px 0 #c9bda4;
}
.trace-wrap.is-complete .trace-canvas { cursor: default; }
.trace-wrap.is-complete .trace-tools > .drawing-palette,
.trace-wrap.is-complete .trace-tools > .trace-crayon,
.trace-wrap.is-complete .trace-tools > .trace-clear { visibility: hidden; }
.trace-finish:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-inline: 8px;
}
.trace-finish[hidden] { display: none; }
.trace-made {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(#fffdf7, #fffaf0 65%, #e5dcc8);
  border: 3px solid #4e9677;
  color: #2f5c46;
}
.lg-app .trace-tools .trace-next {
  position: relative;
  inset: auto;
  min-width: 86px;
  min-height: 48px;
  height: 48px;
  padding: 6px 24px;
}
.lg-app .trace-next:focus-visible { outline: 4px solid var(--lg-focus); outline-offset: 5px; }

@media (max-width: 560px), (max-height: 650px) {
  .lg-app .drawing-palette { gap: 5px; }
  .lg-app .drawing-color {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
  }
  .lg-app .drawing-color span { width: 22px; height: 22px; }
  .lg-app .trace-tools .trace-crayon { display: none; }
  .lg-app .trace-paper { bottom: 110px; }
  .lg-app .trace-tools {
    height: 94px;
    gap: 10px;
    justify-content: center;
  }
  .lg-app .trace-tools .drawing-palette {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    width: 191px;
    margin-inline: 0;
  }
}

@media (orientation: landscape) and (max-height: 450px) {
  .lg-app .lg-screen.lg-play[data-activity="trace"] > .play-stage {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 4px auto 0;
  }
  .lg-app .lg-screen.lg-play[data-activity="trace"] .trace-paper {
    bottom: 67px;
  }
  .lg-app .lg-screen.lg-play[data-activity="trace"] .trace-tools {
    height: 48px;
    gap: 10px;
  }
  .lg-app .lg-screen.lg-play[data-activity="trace"] .trace-tools .drawing-palette {
    display: flex;
    width: auto;
  }

  .lg-app .lg-screen.lg-play:has(.garden-paths) {
    overflow: hidden;
    padding: 4px 8px;
  }
  .lg-app .lg-screen.lg-play:has(.garden-paths) > .lg-topbar {
    height: 48px;
    min-height: 48px;
  }
  .lg-app .lg-screen.lg-play:has(.garden-paths) > .practice-heading {
    position: absolute;
    top: 4px;
    right: 64px;
    left: 64px;
    height: 48px;
    margin: 0;
  }
  .lg-app .lg-screen.lg-play:has(.garden-paths) > .practice-stage {
    flex: 1 1 auto;
    min-height: 0;
    margin: 4px auto 0;
  }
  .lg-app .lg-screen.lg-play:has(.garden-paths) .practice-replay {
    height: 44px;
    min-height: 44px;
    font-size: 32px;
  }
  .lg-app .lg-screen.lg-play:has(.garden-paths) .practice-heading > svg,
  .lg-app .lg-screen.lg-play:has(.garden-paths) .practice-heading > .lg-animal {
    width: 40px !important;
    height: 44px !important;
  }
  .lg-app .garden-paths {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 54px;
    grid-template-rows: 16px minmax(110px, 1fr) 52px;
    gap: 6px 8px;
    width: 100%;
    height: 100%;
  }
  .lg-app .garden-paths .path-progress { grid-column: 2; grid-row: 1; }
  .lg-app .garden-paths .path-reference { grid-column: 1; grid-row: 2; width: 44px; height: 44px; }
  .lg-app .garden-paths .path-paper {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-height: 110px;
    max-height: none;
  }
  .lg-app .garden-paths > .drawing-palette {
    grid-column: 3;
    grid-row: 1 / 4;
    flex-direction: column;
    gap: 3px;
    padding: 2px;
  }
  .lg-app .garden-paths > .practice-tools {
    grid-column: 1 / 3;
    grid-row: 3;
    padding-block: 2px;
  }
}

/* ---------- Writing Garden guided trace (v3, 2026-10-01) ---------- */
.trace-paper .trace-guided{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:crosshair}
.trace-guided path,.trace-guided circle{vector-effect:none}
.tg-guide-edge{fill:none;stroke:#c9bda4;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.tg-guide-path{fill:none;stroke:#fffdf7;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.tg-guide-dot{fill:#fffdf7;stroke:#c9bda4;stroke-width:2.4}
.tg-ink-path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 90ms linear}
.tg-ink-path.is-snap{transition:stroke-dashoffset 360ms cubic-bezier(.3,1.4,.5,1)}
.trace-guided.is-demo .tg-ink-path{transition:none;opacity:.55}
.tg-ink-dot{fill-opacity:0;transition:fill-opacity 160ms}
.tg-ink-dot.is-on{fill-opacity:1}
.tg-ink-dot.is-demo{fill-opacity:.55}
.tg-start{fill:#7fce54;stroke:#4a3620;stroke-width:2.4;transform-box:fill-box;transform-origin:50% 50%;animation:tg-pulse 1.1s ease-in-out infinite alternate}
.tg-start.is-dot{fill:none;stroke:#7fce54;stroke-width:3}
.tg-arrow{fill:none;stroke:#4a3620;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tg-pen{fill:#4a3620}
@keyframes tg-pulse{from{transform:scale(.85)}to{transform:scale(1.15)}}
.lg-reduce-motion .tg-start{animation:none}
@media(prefers-reduced-motion:reduce){.tg-start{animation:none}.tg-ink-path{transition:none}}