/* class6-picto.css - Data Handling Tier 4 "Reading pictographs".
   Almost everything is shared (class6-math-common.css: pictograph rows, key box, pop-in, glow reveal);
   only the Quick-Glance Race clock lives here. */
.c6-overlay[id^="dhpic"] .c6-t-s { font-size: 15px; }

/* friendly clock: it only empties, nothing is ever taken away from the child's score */
.pc-race { width: min(100%, 500px); height: 14px; box-sizing: border-box; border-radius: 999px; background: #ece5ff; overflow: hidden;
    border: 2px solid #ddd2fb; box-shadow: inset 0 2px 3px rgba(75, 63, 143, .12); }
.pc-race i { display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: left center;
    background: linear-gradient(90deg, #52c795 0%, #ffc83d 60%, #ff9a3d 100%); animation: pc-run 12s linear forwards; }
.pc-race.pc-stop i { animation-play-state: paused; }
@keyframes pc-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .pc-race i { animation: none; } }