/* Superkids V1 -- "Trace" (letters & numbers) */
.trace-wrap {
  width: 100%; flex: 1 1 auto; min-height: 0; height: 100%;
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top" "dots" "main";
  position: relative;
}
.trace-measure { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* top: picture card + buttons */
.trace-top { grid-area: top; display: flex; align-items: center; gap: 12px; }
.trace-pic {
  flex: 1 1 auto; min-width: 0; min-height: 88px;
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px;
  border-radius: 30px;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--grape) 35%, #fff), 0 14px 24px rgba(0,0,0,.1);
}
.trace-pic.trace-in { animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }
.trace-emo { font-size: 58px; line-height: 1; flex: 0 0 auto; display: flex; flex-wrap: wrap; }
.trace-emo > span { display: inline-block; animation: sk-float 2.2s ease-in-out infinite; }
.trace-emo.trace-many { font-size: 30px; max-width: 120px; gap: 0 2px; }
.trace-emo.trace-lots { font-size: 22px; max-width: 96px; }
.trace-emo.trace-many > span:nth-child(2n) { animation-delay: .3s; }
.trace-word {
  font-size: 30px; font-weight: 800; color: var(--grape);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trace-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.trace-btn {
  width: var(--tap); height: var(--tap); padding: 0; border-radius: 24px;
  font-size: 36px; display: inline-flex; align-items: center; justify-content: center;
}

/* progress dots */
.trace-dots { grid-area: dots; display: flex; justify-content: center; gap: 12px; }
.trace-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.75); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  transition: transform .2s;
}
.trace-dot.now { background: #fff; box-shadow: 0 0 0 4px var(--grape); transform: scale(1.12); }
.trace-dot.done { background: var(--sun); animation: sk-bump .5s cubic-bezier(.34,1.56,.64,1); }

/* board + meter */
.trace-main { grid-area: main; min-height: 0; display: flex; gap: 12px; }
.trace-board {
  flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 20% 15%, #fff 0 30%, transparent 70%),
    repeating-linear-gradient(0deg, #fff 0 46px, #EEF4FF 46px 49px);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--grape) 40%, #fff), 0 20px 34px rgba(0,0,0,.12);
}
.trace-board.trace-in { animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }
.trace-board.trace-yay { animation: trace-yay .7s cubic-bezier(.34,1.56,.64,1); }
.trace-board.trace-wipe { animation: sk-wiggle .4s; }
.trace-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.trace-ink { touch-action: none; cursor: crosshair; }
.trace-pulse {
  position: absolute; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
  border: 5px solid #00B894;
  animation: trace-pulse 1.2s ease-out infinite;
}
.trace-fx { position: absolute; inset: 0; pointer-events: none; }
.trace-spark {
  position: absolute; font-size: 40px; line-height: 1; opacity: 0;
  animation: trace-spark 1s ease-out forwards;
}

.trace-tube {
  flex: 0 0 56px; position: relative; align-self: stretch;
  margin: 24px 0 8px;
  border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 5px #fff, inset 0 6px 12px rgba(0,0,0,.1), 0 7px 0 color-mix(in srgb, var(--grape) 35%, #fff);
}
.trace-fill {
  position: absolute; left: 7px; right: 7px; bottom: 7px; height: 0;
  max-height: calc(100% - 14px);
  border-radius: 999px;
  background: linear-gradient(0deg, #FF6B9D, #FECA57 55%, #2ED573);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), inset 4px 0 0 rgba(255,255,255,.4);
  transition: height .3s cubic-bezier(.34,1.56,.64,1);
}
.trace-star {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15));
  transition: bottom .3s cubic-bezier(.34,1.56,.64,1);
}
.trace-tube.trace-full .trace-star { animation: trace-starpop .6s cubic-bezier(.34,1.56,.64,1); }

/* desktop / landscape: card + buttons on the left, board on the right */
@media (orientation: landscape) and (min-width: 700px) {
  .trace-wrap {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top main" "dots main" ". main";
    gap: 16px 22px;
    max-width: 1100px; margin: 0 auto;
  }
  .trace-top { flex-direction: column; align-items: stretch; gap: 18px; }
  .trace-pic { flex-direction: column; justify-content: center; padding: 18px 12px; min-height: 200px; text-align: center; }
  .trace-emo { font-size: 96px; justify-content: center; }
  .trace-emo.trace-many { font-size: 44px; max-width: 210px; }
  .trace-emo.trace-lots { font-size: 36px; max-width: 200px; }
  .trace-word { font-size: 34px; }
  .trace-btns { justify-content: center; gap: 16px; }
  .trace-btn { width: 96px; height: 84px; font-size: 42px; }
  .trace-dots { flex-wrap: wrap; }
  .trace-tube { flex-basis: 64px; }
}
@media (max-width: 380px) {
  .trace-btn { width: 66px; height: 66px; font-size: 32px; }
  .trace-word { font-size: 24px; }
}

@keyframes trace-pulse { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes trace-spark {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(40deg); opacity: 0; }
}
@keyframes trace-yay { 0% { transform: scale(1); } 35% { transform: scale(1.04) rotate(-1deg); } 70% { transform: scale(.99) rotate(1deg); } 100% { transform: scale(1); } }
@keyframes trace-starpop { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.5) rotate(20deg); } 100% { transform: translateX(-50%) scale(1); } }

/* ✍️ Art Studio tracing button (Laravel Kid Mode ki A-Z / 1-100 tracing) */
.trace-studio { --c: var(--grape); --d: var(--grape-d); animation: trace-studio-wiggle 3.2s ease-in-out 1.5s infinite; }
@keyframes trace-studio-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-7deg) scale(1.06); } 95% { transform: rotate(7deg) scale(1.06); } }
@media (max-width: 600px) {
  .trace-btns { gap: 8px; }
}
.trace-dots { align-items: center; }
.trace-dots .trace-studio { margin-left: 10px; }