/* STAGE3_TRACE_V9_20260915 */
/* Stage 3 is a bridge: trace the known letters, write the blank focus, then move to full spelling. */
.stage3-trace-row .trace-cell{
  position:relative;height:82px;min-width:0;border:2px solid #ddd3c6;border-radius:17px;
  background:linear-gradient(180deg,#fffefa,#fbf7f0);overflow:hidden;
  box-shadow:inset 0 -8px #faf5ee;
}
.stage3-trace-row .trace-cell:after{
  content:"";position:absolute;left:17%;right:17%;bottom:15px;border-bottom:2px dashed #d8cdc0;opacity:.72;pointer-events:none;
}
.trace-guide{
  position:absolute;inset:7px 8px 8px;width:calc(100% - 16px);height:calc(100% - 15px);pointer-events:none;z-index:1;
}
.trace-guide text{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;
  font-size:55px;font-weight:800;fill:transparent;stroke:#bdb3a7;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2.4 3.4;
}
.trace-input{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;outline:0;background:transparent;
  color:transparent!important;caret-color:transparent!important;text-align:center;padding:0;
  font-size:36px;font-weight:950;appearance:none;-webkit-appearance:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.trace-cell:focus-within{
  border-color:#c2a7d8;box-shadow:0 0 0 4px #b99ad51b,inset 0 -8px #faf5ee;
}
.trace-cell.traced{
  border-color:#a8c79e;background:linear-gradient(180deg,#f8fff4,#eef7e9);
  box-shadow:inset 0 -8px #e9f4e5;
}
.trace-cell.traced .trace-guide{opacity:.27}
.trace-written{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding-bottom:3px;
  font-size:clamp(24px,4vw,36px);font-weight:950;color:#5f7d61;pointer-events:none;
}
.trace-cell.traced:before{
  content:"✓";position:absolute;right:7px;top:5px;z-index:4;font-size:11px;font-weight:950;color:#6f966f;
}
.trace-cell.trace-retry{animation:traceRetry .28s ease both}
@keyframes traceRetry{0%,100%{transform:translateX(0)}35%{transform:translateX(-3px);border-color:#e2a7a7}70%{transform:translateX(3px);border-color:#e2a7a7}}
.stage3-trace-row .letter-box.empty-box{
  height:82px;border:3px dashed #a88bc4;background:#fffaff;
  box-shadow:inset 0 -8px #f8f0fb,0 0 0 4px #b693ce10;
}
.stage3-trace-row .letter-box.written-box{
  height:82px;border-color:#a88bc4;background:#fffaff;box-shadow:inset 0 -8px #f8f0fb;
}
.stage3-trace-row .letter-box.hint-target{box-shadow:0 0 0 5px #b48ed329,inset 0 -8px #f8f0fb}
.stage3-bridge-note{
  width:min(760px,100%);margin:0 auto 9px;padding:8px 12px;border-radius:14px;
  background:#f7f0fb;color:#6b5876;font-size:11px;font-weight:850;line-height:1.35;
}
.stage3-bridge-note b{color:#594465}
@media(max-width:720px){
  .stage3-trace-row .trace-cell,.stage3-trace-row .letter-box.empty-box,.stage3-trace-row .letter-box.written-box{height:74px}
  .trace-guide text{font-size:50px}
}