/* Costinha's visual race. Quiz logic remains responsible for time and answers. */
.quiz-race,.quiz-race *{box-sizing:border-box}
.quiz-race{min-width:0;margin:2px 0 14px;text-align:left}
.quiz-race[hidden]{display:none!important}
.quiz-race-caption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;margin:0 2px 7px;color:#5c6974;font-size:.71rem;line-height:1.45;font-weight:650}
#quizRaceLabel{min-width:0;overflow-wrap:anywhere}
#quizRaceTime{flex:0 0 auto;color:#202c35;font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.quiz-track{
  --quiz-runner-size:56px;--quiz-track-progress:0;
  position:relative;isolation:isolate;width:100%;height:80px;overflow:hidden;
  border:1px solid #dce3e8;border-radius:16px;background:linear-gradient(180deg,#f8fafb,#eef2f4);
  contain:paint;pointer-events:none;
}
.quiz-track-ground{position:absolute;z-index:0;inset:auto 10px 12px;height:3px;border-radius:99px;background:#c7d1d9}
.quiz-track-start{position:absolute;z-index:1;left:11px;bottom:10px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;background:#758692}
.quiz-track-finish{position:absolute;z-index:1;right:13px;bottom:12px;display:grid;place-items:center;width:22px;height:28px;color:#485a68;font-size:1.1rem;line-height:1}
.quiz-track-finish svg{display:block;width:22px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.quiz-track-marker{position:absolute;z-index:0;bottom:10px;left:22%;width:5px;height:7px;border-radius:2px;background:#aebdc8;opacity:.65}
/* Start and finish are the first two spans; the four markers follow them. */
.quiz-track-marker:nth-of-type(3),.quiz-track-marker[data-quiz-lane="0"]{left:22%}
.quiz-track-marker:nth-of-type(4),.quiz-track-marker[data-quiz-lane="1"]{left:42%}
.quiz-track-marker:nth-of-type(5),.quiz-track-marker[data-quiz-lane="2"]{left:62%}
.quiz-track-marker:nth-of-type(6),.quiz-track-marker[data-quiz-lane="3"]{left:82%}
.quiz-runner{
  position:absolute;z-index:2;left:10px;right:10px;bottom:13px;height:var(--quiz-runner-size);
  transform:translateX(calc(var(--quiz-track-progress,0) * (100% - var(--quiz-runner-size))));
  transform-origin:0 100%;pointer-events:none;
}
.quiz-runner>img{display:block;width:var(--quiz-runner-size);height:var(--quiz-runner-size);object-fit:contain;transform-origin:50% 85%;user-select:none;-webkit-user-drag:none}
.quiz-track[data-running="true"][data-paused="false"] .quiz-runner>img{animation:quiz-costinha-trot .5s ease-in-out infinite}
.quiz-track[data-paused="true"] .quiz-runner>img{animation-play-state:paused}
.quiz-track[data-phase="answered"][data-mood="happy"] .quiz-runner>img{animation:quiz-costinha-hop .5s ease-out both}
.quiz-track[data-phase="finished"][data-mood="celebrate"] .quiz-runner>img{animation:quiz-costinha-hop .55s ease-out both}
.quiz-track[data-mood="encouraging"] .quiz-runner>img{animation:none;transform:none}
.quiz-track[data-selected-lane="0"] .quiz-track-marker[data-quiz-lane="0"],
.quiz-track[data-selected-lane="1"] .quiz-track-marker[data-quiz-lane="1"],
.quiz-track[data-selected-lane="2"] .quiz-track-marker[data-quiz-lane="2"],
.quiz-track[data-selected-lane="3"] .quiz-track-marker[data-quiz-lane="3"]{background:#263944;opacity:1}
.quiz-race .quiz-timer{height:6px;margin:8px 0 0;background:#e3e9ed}

/* Numbers are a quiet visual hint for the existing keyboard shortcuts. */
#quizOptions{grid-template-columns:repeat(2,minmax(0,1fr))}
#quizOptions .quiz-option[data-quiz-key]{position:relative;min-width:0;max-width:100%;padding:13px 12px 13px 43px;overflow-wrap:anywhere;word-break:normal;line-height:1.45;text-align:left}
#quizOptions .quiz-option[data-quiz-key]::before{content:attr(data-quiz-key);position:absolute;left:11px;top:50%;display:grid;place-items:center;width:23px;height:23px;transform:translateY(-50%);border:1px solid #d1dbe2;border-radius:7px;background:#f0f4f6;color:#617482;font:750 .7rem/1 var(--sans,system-ui,sans-serif);font-variant-numeric:tabular-nums}
#quizOptions .quiz-option.correct::before{border-color:currentColor;background:transparent;color:inherit}
#quizOptions .quiz-option.wrong::before{border-color:currentColor;background:transparent;color:inherit}
#quizOptions .quiz-option:focus-visible{outline:3px solid #526f85;outline-offset:3px}
#quizOptions .quiz-option:disabled{cursor:default}
@keyframes quiz-costinha-trot{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes quiz-costinha-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-9px) rotate(-5deg)}68%{transform:translateY(-2px) rotate(3deg)}}

@media(max-width:560px){
  .quiz-race-caption{font-size:.68rem;gap:9px}
  .quiz-track{--quiz-runner-size:52px;height:76px;border-radius:13px}
  #quizOptions{grid-template-columns:minmax(0,1fr)}
  #quizOptions .quiz-option[data-quiz-key]{min-height:54px;padding:12px 12px 12px 43px;font-size:.84rem}
}
@media(max-width:360px){
  .quiz-race-caption{font-size:.64rem}
  .quiz-track{--quiz-runner-size:48px;height:72px}
  #quizOptions .quiz-option[data-quiz-key]{padding-left:40px;font-size:.8rem}
  #quizOptions .quiz-option[data-quiz-key]::before{left:9px;width:22px;height:22px}
}
.quiz-track[data-reduced-motion="true"] .quiz-runner{transform:none!important}
.quiz-track[data-reduced-motion="true"] .quiz-runner>img{animation:none!important;transition:none!important;transform:none!important}
#quizPlay:has(.quiz-track[data-reduced-motion="true"]) .quiz-timer div{transition:none!important}
@media(prefers-reduced-motion:reduce){
  .quiz-race,.quiz-race *,.quiz-race *::before,.quiz-race *::after,
  #quizOptions,#quizOptions *,#quizOptions *::before,#quizOptions *::after,
  #quizPlay .quiz-timer div{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .quiz-runner,.quiz-runner>img{transform:none!important}
}