/* carrera/ overrides only - tokens/components/.screen grid come from
   shared/shell.css, the .am-form/.am-field/.am-submit form system from
   shared/account.css (see CLAUDE.md's "shared contract"). */

#f-code { text-transform: uppercase; letter-spacing: .15em; text-align: center; }

/* Guests reach this screen from "Entrar en aula" and some expected to be
   able to open a classroom themselves - say up front that only teacher
   accounts can while carrera is in beta. */
.join-beta {
  font-family: var(--am-readable-font);
  font-size: .9rem;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  max-width: 360px;
  margin: .2rem auto 0;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, .18);
}
.join-beta-tag {
  display: inline-block;
  margin-right: .35rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: #ffd54a;
  color: var(--ink);
  font-size: .72rem;
  font-weight: bold;
  letter-spacing: .06em;
}
.join-beta a { display: block; margin-top: .35rem; color: #fff; font-weight: bold; text-decoration: underline; }

.race-hint {
  font-family: var(--am-readable-font);
  color: #fff;
  text-align: center;
  max-width: 320px;
  margin: .4rem 0 1rem;
}

.race-code-big {
  font-family: var(--am-readable-font);
  font-weight: bold;
  font-size: 2.2rem;
  letter-spacing: .2em;
  background: #fff;
  color: var(--purple-dark);
  border-radius: 16px;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
}

.race-roster {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 280px;
  max-height: 40vh;
  overflow-y: auto;
  /* The waiting screen is a fixed-height flex column; an overflow:auto
     child is the one item flexbox may shrink to nothing, which is what
     happened once the friends lobby added its share/start block. */
  flex-shrink: 0;
  font-family: var(--am-readable-font);
}
.race-roster li {
  background: rgba(255, 255, 255, .85);
  border-radius: 10px;
  padding: .4rem .7rem;
  margin-bottom: .35rem;
  color: var(--ink);
}
.race-roster-count {
  background: none !important;
  color: #fff !important;
  font-weight: bold;
  text-align: center;
}

/* ---- mini leaderboard strip, sits above the equation in .stage-area ---- */
.race-mini-board {
  list-style: none;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: 0 0 .4rem;
  margin: 0 0 .3rem;
  font-family: var(--am-readable-font);
  font-size: .78rem;
}
.race-mini-row {
  flex: none;
  display: flex;
  gap: .3rem;
  align-items: center;
  background: rgba(255, 255, 255, .7);
  border-radius: 20px;
  padding: .2rem .6rem;
  color: var(--ink);
}
.race-mini-row.is-me { background: #fff; font-weight: bold; box-shadow: 0 0 0 2px var(--purple); }
.race-mini-row.is-frozen { opacity: .55; }
.race-mini-row.is-finished { background: #cdeccf; }
.rmb-rank { font-weight: bold; color: var(--purple-dark); }
.rmb-points::before { content: "· "; }

.race-main { text-align: center; }

/* ---- frozen overlay - replaces the equation while active, never on top of it ---- */
.race-frozen {
  text-align: center;
  font-family: var(--am-readable-font);
}
.race-frozen p#frozen-text {
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--sky);
  text-shadow: 0 2px 0 var(--purple-dark);
  margin: 0 0 .2rem;
}
.race-frozen-count {
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
}

/* ---- item-earned modal - also replaces the equation, picking a target blocks answering until resolved ---- */
.race-item-modal {
  text-align: center;
  background: rgba(255, 255, 255, .9);
  border-radius: 16px;
  padding: .8rem 1rem;
  max-width: 340px;
}
.race-item-title {
  font-family: var(--am-readable-font);
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--pink);
  margin: 0 0 .3rem;
}
.race-item-desc {
  font-family: var(--am-readable-font);
  color: var(--ink);
  font-size: .85rem;
  margin: 0 0 .6rem;
}
.race-target-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.race-target-list .big-button,
#item-use-notarget {
  padding: .5rem;
  font-size: .95rem;
}

.pad-area.is-disabled { opacity: .45; pointer-events: none; }

/* ---- final results board ---- */
.race-final-board {
  list-style: none;
  padding: 0;
  margin: .5rem 0;
  width: 100%;
  max-width: 320px;
  font-family: var(--am-readable-font);
}
.race-final-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  background: rgba(255, 255, 255, .85);
  border-radius: 10px;
  padding: .4rem .7rem;
  margin-bottom: .3rem;
  color: var(--ink);
}
.race-final-row.is-me { background: #fff; font-weight: bold; box-shadow: 0 0 0 2px var(--purple); }
.race-final-row .rmb-name { flex: 1; }

/* ---- host.html extras (same .board teal background as every other menu page) ---- */
.am-submit-danger { background: var(--red); }
.am-submit-danger:active { box-shadow: 0 1px 0 #a81f1f; }

.host-event-feed {
  list-style: none;
  padding: 0;
  margin: .5rem 0;
  max-height: 22vh;
  overflow-y: auto;
  font-family: var(--am-readable-font);
  font-size: .82rem;
  color: #fff;
}
.host-event-feed li {
  background: rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding: .3rem .6rem;
  margin-bottom: .25rem;
}

.host-status {
  font-size: .78rem;
  opacity: .75;
  text-transform: uppercase;
}

/* ---- host.html create-room option groups ---- */
.race-form-group {
  border: none;
  background: rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: .6rem .8rem;
  margin: 0 0 .7rem;
  text-align: left;
}
.race-form-group legend {
  font-family: var(--am-readable-font);
  font-weight: bold;
  color: #fff;
  font-size: .85rem;
  padding: 0 .3rem;
}
.race-checkbox, .race-radio {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--am-readable-font);
  color: #fff;
  font-size: .85rem;
  margin: .3rem .8rem .3rem 0;
}
.race-checkbox input, .race-radio input { width: 16px; height: 16px; }

/* ---- host.html create-room, redesigned "professional" layout: a real
   table (not pill checkboxes) for question types, a plain <select> for
   race length, and two comparable preview cards for answer mode. The
   outer blackboard/clouds chrome stays exactly as everywhere else - this
   is scoped to the settings widgets a teacher actually has to read and
   compare, which is the part the user asked to look less like a kids'
   game screen. ---- */
.race-settings { text-align: left; width: 100%; }
.race-settings[hidden] { display: none; }
.race-settings .race-hint { text-align: left; max-width: none; margin: 0 0 1rem; }
.race-settings #btn-create { width: 100%; margin-top: .3rem; }
.race-setting-block { margin: 0 0 1rem; }
.race-setting-title {
  font-family: var(--am-readable-font);
  font-weight: bold;
  color: #fff;
  font-size: .95rem;
  margin: 0 0 .4rem;
}

.race-op-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--am-readable-font);
  font-size: .78rem;
}
.race-op-table th, .race-op-table td {
  padding: .4rem .5rem;
  text-align: left;
  border-bottom: 1px solid rgba(51, 49, 63, .12);
}
.race-op-table thead th {
  background: rgba(51, 49, 63, .06);
  color: var(--ink);
  font-weight: bold;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.race-op-table .race-op-th-check { width: 2.2rem; }
.race-op-table tbody tr:last-child td { border-bottom: none; }
.race-op-table tbody td:first-child { text-align: center; }
.race-op-table tbody td:nth-child(2) { font-weight: bold; color: var(--purple-dark); white-space: nowrap; }
.race-op-table tbody td:nth-child(3) { color: var(--ink); opacity: .8; }
.race-op-table input[type="checkbox"] { width: 17px; height: 17px; }

.race-select {
  width: 100%;
  font-family: var(--am-readable-font);
  font-size: 1rem;
  font-weight: bold;
  color: var(--purple-dark);
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: .55rem .7rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%237a4380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 2.2rem;
}

.race-mode-cards {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.race-mode-card {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border-radius: 12px;
  padding: .55rem;
  cursor: pointer;
  box-shadow: 0 0 0 2px transparent;
}
.race-mode-card:has(input:checked) { box-shadow: 0 0 0 2px var(--purple); }
.race-mode-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.race-mode-label {
  font-family: var(--am-readable-font);
  font-size: .78rem;
  font-weight: bold;
  color: var(--ink);
  text-align: center;
}
.race-mode-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: 100%;
}
.race-mode-eq {
  font-family: var(--am-readable-font);
  font-weight: bold;
  color: var(--purple-dark);
  font-size: .95rem;
}
.race-mode-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 72px;
}
.race-mode-keys span {
  background: var(--sky);
  border-radius: 3px;
  font-size: .55rem;
  text-align: center;
  color: #fff;
  padding: 2px 0;
}
.race-mode-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 84px;
}
.race-mode-choices span {
  background: var(--purple);
  border-radius: 4px;
  font-size: .62rem;
  text-align: center;
  color: #fff;
  padding: 3px 0;
}

/* ---- carrera/index.html multiple-choice answer pad ----
   shell.css's .keypad { display: grid } has higher specificity than the
   browser's default [hidden] { display: none }, same origin-cascade gap
   as everywhere else a shell.css component needs to actually disappear -
   these two rules are what make the hidden attribute stick for real. */
#keypad[hidden], #answer-display[hidden] { display: none; }
.choice-pad[hidden] { display: none; }
.choice-pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: var(--pad-width);
}
.choice-pad .choice-btn {
  padding: .9rem .5rem;
  font-size: 1.3rem;
}

/* =====================================================================
   Racer mascots, the race track and item effects (carrera/mascots.js,
   carrera/track.js). Every animation here is a one-shot CSS keyframe or a
   transition timed to the poll interval - nothing runs a JS frame loop.
   ===================================================================== */

/* ---- mascot base: wheels spin / rider bobs only while actually racing ---- */
.mz { display: block; overflow: visible; }
.mz-wheel { transform-box: fill-box; transform-origin: center; }
.is-moving .mz-wheel { animation: mzSpin .7s linear infinite; }
.is-moving .mz-rider { animation: mzBob .7s ease-in-out infinite; }
@keyframes mzSpin { to { transform: rotate(360deg); } }
@keyframes mzBob { 50% { transform: translateY(-1.2px); } }

.item-icon { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- join-screen picker ---- */
.mz-picker {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.mz-picker-label { font-family: var(--am-readable-font); color: #fff; font-size: .9rem; }
.mz-picker-body {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: rgba(255, 255, 255, .28);
  border-radius: 16px;
  padding: 8px;
}
.mz-preview {
  position: relative;
  flex: 0 0 112px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #fff 0 54%, #fbf2e2 55%);
  border-radius: 14px;
  padding: 4px 4px 2px;
}
.mz-preview .mz { width: 100%; height: auto; }
.mz-preview.pop .mz { animation: mzPop .35s ease-out; }
@keyframes mzPop { 40% { transform: scale(1.08) translateY(-4px); } }
.mz-dice {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--purple);
  box-shadow: 0 2px 0 var(--purple-dark);
  padding: 4px;
  cursor: pointer;
}
.mz-dice svg { display: block; width: 100%; height: 100%; }
.mz-dice:active { transform: translateY(2px); box-shadow: none; }
.mz-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; }
.mz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mz-opt {
  height: 42px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  padding: 3px;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.mz-opt .mz-part { display: block; width: 100%; height: 100%; }
.mz-opt[aria-pressed="true"] {
  background: #fff4c2;
  border-color: var(--purple);
  box-shadow: 0 2px 0 var(--purple-dark);
  transform: translateY(-1px);
}
.mz-opt:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

/* ---- track (shared by host + student) ---- */
.rt {
  --label-w: clamp(110px, 17vw, 230px);
  position: relative;
  width: 100%;
  background: #fbf2e2;
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
  padding: 8px;
  font-family: var(--am-readable-font);
}
.rt.is-split { --label-w: 150px; }
.rt.is-split .rt-lane { right: calc(50% + 8px); }
.rt.is-split .rt-lane.is-col2 { left: calc(50% + 8px); right: 0; }
.rt-lanes { position: relative; overflow: hidden; border-radius: 10px; }
.rt-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--lane-h);
  display: flex;
  transition: top .5s ease;
}
.rt-label {
  flex: 0 0 var(--label-w);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 2px;
  font-size: clamp(11px, calc(var(--lane-h) * .36), 20px);
  color: var(--ink);
  min-width: 0;
}
.rt-rank {
  flex: none;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple);
  color: #fff;
  font-weight: bold;
  font-size: .85em;
}
.rt-rank[data-medal="1"] { background: #f6c445; color: var(--ink); }
.rt-rank[data-medal="2"] { background: #c9ccd6; color: var(--ink); }
.rt-rank[data-medal="3"] { background: #d99358; }
.rt-name { flex: 1; min-width: 0; text-align: left; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-pts { flex: none; color: var(--purple-dark); font-variant-numeric: tabular-nums; font-size: .9em; }
.rt-road {
  position: relative;
  flex: 1;
  background: #f6ead3;
  border-left: 3px solid #fff;
  border-bottom: 2px dashed rgba(111, 74, 134, .14);
}
.rt-lane.is-alt .rt-road { background-color: #f1e1c5; }
/* Road markings scrolling right-to-left while the race is live: with
   positions relative to the pack (see track.js) the racers mostly hold
   their places, so this is what sells "everyone is riding forward". */
.rt-road {
  background-image: linear-gradient(90deg, rgba(111, 74, 134, .22) 0 26px, transparent 26px 48px);
  background-size: 48px 4px;
  background-repeat: repeat-x;
  background-position: 0 72%;
}
.rt.is-live .rt-road { animation: roadScroll .6s linear infinite; }
@keyframes roadScroll { to { background-position: -48px 72%; } }
.rt-lane.is-me .rt-label { background: #fff; border-radius: 999px 0 0 999px; box-shadow: inset 0 0 0 2px var(--purple); }
.rt-lane.is-me .rt-road { background-color: #fff1b8; }
.rt-runner {
  --runner-h: calc(var(--lane-h) * 1.12);
  --runner-w: calc(var(--runner-h) * .889);
  position: absolute;
  bottom: 0;
  height: var(--runner-h);
  width: var(--runner-w);
  left: calc(var(--p, .5) * (100% - var(--runner-w)));
  transition: left var(--rt-glide) linear;
  z-index: 1;
}
.rt-runner .mz { width: 100%; height: 100%; }
.rt-ice {
  position: absolute;
  inset: 4% -6% 0;
  border-radius: 22%;
  background: rgba(170, 225, 238, .62);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 3px rgba(143, 200, 209, .6);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .25s;
  z-index: 2;
  pointer-events: none;
}
.rt-lane.is-frozen .rt-ice { opacity: 1; transform: scale(1); }
.rt-lane.is-frozen .mz { filter: saturate(.35) brightness(1.08); }

/* per-racer effects (spawned by RaceTrack.effect) */
.rt-fx {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  left: 11%;
  bottom: 70%;
  z-index: 3;
  pointer-events: none;
}
.rt-fx-cast { animation: rtCast .95s ease-out forwards; }
@keyframes rtCast {
  0% { transform: scale(.2); opacity: 0; }
  30% { transform: scale(1.15) translateY(-10%); opacity: 1; }
  70% { transform: scale(1) translateY(-30%); opacity: 1; }
  100% { transform: scale(.8) translateY(-70%); opacity: 0; }
}
.rt-fx-proyectil { bottom: 20%; animation: rtRocket 1.1s ease-in forwards; }
@keyframes rtRocket {
  0% { transform: translateX(-420%) rotate(45deg); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateX(0) rotate(45deg) scale(1); opacity: 1; }
  70% { transform: translateX(0) rotate(45deg) scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}
.rt-runner.fx-proyectil .mz { animation: rtShake .5s .55s ease-in-out; }
.rt-fx-banana { bottom: -6%; left: 30%; width: 60%; animation: rtBanana 1.3s ease-out forwards; }
@keyframes rtBanana {
  0% { transform: translateY(-200%) rotate(0); opacity: 0; }
  25% { transform: translateY(0) rotate(90deg); opacity: 1; }
  80% { transform: translateY(0) rotate(360deg); opacity: 1; }
  100% { transform: translateY(0) rotate(400deg); opacity: 0; }
}
.rt-runner.fx-banana .mz { animation: rtSpinOut 1s .3s ease-in-out; transform-origin: 50% 80%; }
@keyframes rtSpinOut {
  0% { transform: rotate(0); }
  70% { transform: rotate(-380deg); }
  85% { transform: rotate(-350deg); }
  100% { transform: rotate(-360deg); }
}
.rt-fx-rayo { animation: rtBolt 1s ease-out forwards; }
@keyframes rtBolt {
  0% { transform: translateY(-160%) scale(.6); opacity: 0; }
  25% { transform: translateY(10%) scale(1.2); opacity: 1; }
  40%, 70% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-20%); opacity: 0; }
}
.rt-runner.fx-rayo .mz { animation: rtZap .6s .2s steps(2) 2; }
@keyframes rtZap { 50% { filter: brightness(2.2) saturate(0); } }
.rt-fx-intercambio { animation: rtSwap 1.1s ease-in-out forwards; }
@keyframes rtSwap {
  0% { transform: scale(.3) rotate(0); opacity: 0; }
  25% { transform: scale(1.1) rotate(120deg); opacity: 1; }
  80% { transform: scale(1) rotate(360deg); opacity: 1; }
  100% { transform: scale(.6) rotate(400deg); opacity: 0; }
}
.rt-fx-turbo { left: -55%; bottom: 8%; width: 70%; animation: rtTurbo 1.3s ease-out forwards; }
@keyframes rtTurbo {
  0% { transform: rotate(-90deg) scale(.3); opacity: 0; }
  15% { transform: rotate(-90deg) scale(1.15); opacity: 1; }
  35% { transform: rotate(-90deg) scale(.9); }
  55% { transform: rotate(-90deg) scale(1.1); }
  80% { transform: rotate(-90deg) scale(1); opacity: 1; }
  100% { transform: rotate(-90deg) scale(.5) translateY(30%); opacity: 0; }
}
.rt-runner.fx-turbo .mz { animation: rtLean 1.2s ease-in-out; transform-origin: 50% 100%; }
@keyframes rtLean { 20%, 75% { transform: skewX(-10deg) translateX(6%); } }
@keyframes rtShake {
  20% { transform: translateX(-8%) rotate(-6deg); }
  45% { transform: translateX(7%) rotate(5deg); }
  70% { transform: translateX(-4%) rotate(-3deg); }
}

/* ---- host: the projected track ---- */
.menu-screen.is-racing .board-area { width: min(1500px, 100%); }
.menu-screen.is-racing .board { flex-basis: 100%; }
.menu-screen.is-racing .board-teacher,
.menu-screen.is-racing .cat-nav,
.menu-screen.is-racing .menu-tagline,
.menu-screen.is-racing .board-title { display: none; }
.menu-screen.is-racing .wordmark { width: min(260px, 50vw); }
.menu-screen.is-racing .host-event-feed { max-height: 15vh; }
.host-track { margin: 0 0 .8rem; }
.host-track .rt-lanes { max-height: 76vh; overflow-y: auto; }
.host-event-feed li { display: flex; align-items: center; gap: .5rem; }
.host-event-feed .feed-icon { flex: none; width: 22px; height: 22px; }
.race-roster .mz, .race-final-row .mz { flex: none; width: 30px; height: 34px; }
.race-roster li { display: flex; align-items: center; gap: .5rem; }
#host-roster {
  max-width: 640px;
  max-height: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .35rem;
}
#host-roster li { margin: 0; }
#host-roster .race-roster-count { grid-column: 1 / -1; justify-content: center; }
@keyframes rosterIn { from { transform: scale(.6); opacity: 0; } }

/* ---- student: the compact track replaces the old pill strip ---- */
.race-mini-track { width: 100%; max-width: 560px; flex: none; }
/* Names got cramped at 76px/11px - a wider label column and bigger type;
   the points move off the label onto a tag riding with each racer. */
.race-mini-track .rt { --label-w: 112px; padding: 5px; border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, .1); }
.race-mini-track .rt-pts { display: none; }
.race-mini-track .rt-label { font-size: 13px; gap: 5px; padding-right: 6px; }
.race-mini-track .rt-rank { font-size: .78em; }

/* ---- student: item modal + frozen overlay ---- */
.race-item-icon { width: 76px; height: 76px; margin: -2px auto .2rem; animation: itemBob 1.4s ease-in-out infinite; }
@keyframes itemBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
.race-target-list { display: grid; grid-template-columns: 1fr 1fr; }
.race-target-list .big-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-width: 0; padding: .4rem .3rem; font-size: .9rem; }
.race-target-list .rmb-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-target-list .mz { flex: none; width: 40px; height: 45px; }
.race-frozen-cube { position: relative; width: 112px; height: 112px; margin: 0 auto; animation: cubeShiver 1.2s ease-in-out infinite; }
.race-frozen-cube .race-frozen-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--purple-dark);
  text-shadow: 0 2px 0 #fff;
}
@keyframes cubeShiver { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* ---- student: full-stage item animations (fire / get hit) ---- */
.race-fx { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: visible; }
.gfx { position: absolute; left: 50%; top: 42%; width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.gfx-fire { animation: gfxFire 1s ease-in forwards; }
@keyframes gfxFire {
  0% { transform: scale(.3); opacity: 0; }
  25% { transform: scale(1.2); opacity: 1; }
  45% { transform: scale(1) rotate(-6deg); }
  100% { transform: translate(40px, -46vh) scale(.3) rotate(12deg); opacity: 0; }
}
.gfx-self { animation: gfxSelf 1.2s ease-out forwards; }
@keyframes gfxSelf {
  0% { transform: scale(.3); opacity: 0; }
  25% { transform: scale(1.3); opacity: 1; }
  40% { transform: scale(.95); }
  55% { transform: scale(1.1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.gfx-hit { animation: gfxHit 1.3s ease-out forwards; }
@keyframes gfxHit {
  0% { transform: scale(2.8); opacity: 0; }
  18% { transform: scale(1); opacity: 1; }
  28% { transform: rotate(-12deg); }
  38% { transform: rotate(10deg); }
  48% { transform: rotate(-5deg); }
  58% { transform: rotate(0); }
  85% { opacity: 1; }
  100% { transform: scale(.7); opacity: 0; }
}
.gfx-hit.gfx-banana { animation: gfxBanana 1.3s ease-in-out forwards; }
@keyframes gfxBanana {
  0% { transform: translateX(-60vw) rotate(-360deg); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateX(0) rotate(0); }
  75% { transform: translateX(0) rotate(30deg); opacity: 1; }
  100% { transform: translateX(60vw) rotate(360deg); opacity: 0; }
}
.gfx-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #ffd25c 23% 45%, rgba(240, 149, 42, .0) 66%);
  animation: gfxBurst .7s .2s ease-out both;
}
@keyframes gfxBurst { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.gfx-flash { position: absolute; inset: -40px; background: #fff7c2; animation: gfxFlash .8s steps(1) forwards; }
@keyframes gfxFlash { 0% { opacity: .9; } 15% { opacity: 0; } 30% { opacity: .7; } 45%, 100% { opacity: 0; } }
.gfx-plus {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: bold;
  color: var(--orange);
  text-shadow: 2px 2px 0 #fff;
  animation: gfxPlus 1.3s .25s ease-out both;
}
@keyframes gfxPlus { 0% { opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -110px); opacity: 0; } }
.stage-area.is-shaking { animation: stageShake .5s ease-in-out; }
@keyframes stageShake {
  20% { transform: translateX(-9px) rotate(-1deg); }
  40% { transform: translateX(8px) rotate(1deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .is-moving .mz-wheel, .is-moving .mz-rider, .race-item-icon, .race-frozen-cube,
  .rt-runner .mz, .stage-area.is-shaking, #host-roster li, .mz-preview.pop .mz { animation: none !important; }
  .rt-lane, .rt-runner { transition: none; }
  .rt.is-live .rt-road { animation: none; }
  /* the icon still appears (and is removed by JS), it just doesn't fly */
  .rt-fx, .gfx { animation: none !important; }
  .gfx-flash, .gfx-burst { display: none; }
}
.race-end-mascot { width: 120px; }
.race-end-mascot .mz { width: 100%; height: auto; }
.race-end-mascot[hidden] { display: none; }
.race-frozen-cube .item-icon { position: absolute; inset: 0; }

/* The race screen's stage carries more than other games' (track + problem
   + feedback row), so on a short phone it can need more than its 1fr
   share. min-content lets .screen's overflow:auto scroll instead of the
   stage silently spilling over the keypad - same fix as dividir/. */
#screen-game { grid-template-rows: auto minmax(min-content, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
#screen-game .stage-area { gap: 6px; }
/* Toasts here carry other players' nicknames ("Ana te ha lanzado..."), so
   unlike other games' one-word feedback they must wrap - a nowrap line
   becomes the grid column's min-content width and widens the screen. */
#screen-game .feedback { min-height: 44px; }
#screen-game .feedback img { width: 32px; }
#screen-game .feedback span { white-space: normal; font-size: 20px; line-height: 1.1; max-width: 300px; }
@media (min-width: 640px) and (orientation: landscape) {
  #screen-game { grid-template-columns: minmax(0, 1fr) var(--pad-width); grid-template-rows: auto minmax(min-content, 1fr); }
}
@media not ((min-width: 640px) and (orientation: landscape)) {
  #screen-game .hud-area { flex-direction: row; align-items: center; gap: 12px; }
  #screen-game .hud { width: auto; flex: 1; }
  #screen-game .hud-time { align-self: auto; }
  /* The pad is disabled while an item is waiting to be used anyway; on a
     phone its space is what lets the target picker fit without scrolling. */
  #screen-game.has-item .pad-area { display: none; }
}
/* Finished but others still racing: nothing left to type, so the pad
   gives its space back and the "waiting" line stops shouting. */
#screen-game[data-finished="1"] .pad-area { display: none; }
#screen-game[data-finished="1"] .answer-display { font-size: 20px; padding: .5rem 1rem; }

/* ---- what a correct answer is worth right now, above the equation -
   it creeps UP with race time (game.js renderQuestionMeta), never counts
   down ---- */
.race-q-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 .35rem;
  font-family: var(--am-readable-font);
}
.race-q-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, .85);
}
.race-q-chip[hidden] { display: none; }
.race-q-gain { color: #2f7d34; }

/* ---- floating +N / -N next to the score after each answer ---- */
.hud { position: relative; }
.race-points-pop {
  position: absolute;
  left: 0;
  top: 100%;
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: 1.15rem;
  color: #2f7d34;
  text-shadow: 0 1px 0 #fff;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.race-points-pop.is-loss { color: #c62d3d; }
.race-points-pop.show { animation: pointsPop 1.3s ease-out; }
@keyframes pointsPop {
  0%   { opacity: 0; transform: translateY(8px) scale(.8); }
  15%  { opacity: 1; transform: translateY(0) scale(1.15); }
  70%  { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(1); }
}

/* ---- waiting room: what each power does ---- */
.race-powers {
  width: min(420px, 100%);
  background: rgba(255, 255, 255, .92);
  border-radius: 16px;
  padding: .8rem .9rem;
  margin-top: 1rem;
  font-family: var(--am-readable-font);
  color: var(--ink);
  text-align: left;
}
.race-powers-title { font-size: 1rem; margin: 0 0 .3rem; color: var(--purple-dark); }
.race-powers-how { font-size: .82rem; line-height: 1.4; margin: 0 0 .6rem; opacity: .85; }
.race-powers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.race-powers-list li { display: flex; align-items: center; gap: .6rem; }
.race-power-icon { flex: none; width: 34px; height: 34px; }
.race-power-icon svg { width: 100%; height: 100%; }
.race-power-text { display: flex; flex-direction: column; }
.race-power-name { font-weight: 800; font-size: .8rem; color: var(--purple-dark); }
.race-power-desc { font-size: .78rem; line-height: 1.3; }

/* ---- end screen: rank / points / accuracy, stated plainly ---- */
.race-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(420px, 100%);
  margin: .2rem 0 .6rem;
}
.race-stat {
  background: #fff;
  border-radius: 14px;
  padding: .55rem .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--am-readable-font);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.race-stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
.race-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--purple-dark); line-height: 1.15; }
.race-stat-accuracy { background: #e9f7ea; }
.race-stat-accuracy .race-stat-value { color: #2f7d34; }
.race-stat-sub { font-size: .7rem; text-align: center; line-height: 1.25; margin-top: 2px; }
.race-final-row .rmb-acc {
  font-size: .8rem;
  font-weight: 700;
  color: #2f7d34;
  min-width: 3.2em;
  text-align: right;
}

@keyframes pointsFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .race-points-pop.show { animation: pointsFade 1.3s linear; }
}

/* ---- host lobby: copy code / link. shell.css sets user-select:none on
   the whole page (right for games), so these opt back in ---- */
.race-copyable { -webkit-user-select: all; user-select: all; cursor: text; }
.race-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -.4rem 0 .5rem; }
.race-copy-btn {
  font-family: var(--am-readable-font);
  font-size: .85rem;
  font-weight: 700;
  color: var(--purple-dark);
  background: #fff;
  border: none;
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.race-copy-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.race-copy-btn.is-copied { background: #d9f2db; color: #2f7d34; }
.race-share-link {
  font-family: var(--am-readable-font);
  font-size: .78rem;
  color: #fff;
  opacity: .85;
  word-break: break-all;
  text-align: center;
  margin: 0 0 .8rem;
}

/* ---- host create form: far/close distractors, only in choices mode ---- */
.race-choice-style { margin-top: .6rem; }
.race-choice-style[hidden] { display: none; }
.race-choice-style-label {
  display: block;
  font-family: var(--am-readable-font);
  font-size: .82rem;
  color: #fff;
  margin-bottom: .35rem;
}
.race-choice-style-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.race-choice-opt {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border-radius: 10px;
  padding: .45rem .7rem;
  cursor: pointer;
  font-family: var(--am-readable-font);
  box-shadow: 0 0 0 2px transparent;
}
.race-choice-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--purple); }
.race-choice-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.race-choice-opt-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.race-choice-opt-ex { font-size: .74rem; color: var(--purple-dark); opacity: .85; }

/* ---- host results: a real table with accuracy, for the teacher ---- */
.race-class-summary {
  font-family: var(--am-readable-font);
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin: -.3rem 0 .6rem;
}
.race-results-wrap { width: 100%; overflow-x: auto; margin-bottom: 1rem; }
.race-results-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--am-readable-font);
  font-size: .88rem;
  color: var(--ink);
}
.race-results-table th, .race-results-table td {
  padding: .4rem .6rem;
  text-align: left;
  border-bottom: 1px solid rgba(51, 49, 63, .1);
}
.race-results-table thead th {
  background: rgba(51, 49, 63, .06);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.race-results-table tbody tr:last-child td { border-bottom: none; }
.race-results-table .rr-rank { font-weight: 800; color: var(--purple-dark); width: 2.5em; }
.race-results-table .rr-name { font-weight: 700; white-space: nowrap; }
.race-results-table .rr-name .mz { display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: .45rem; }
.race-results-table .rr-num { text-align: right; white-space: nowrap; }
.race-results-table thead th:nth-child(n+3) { text-align: right; }
.rr-acc { font-weight: 800; }
.rr-acc.is-good { color: #2f7d34; }
.rr-acc.is-mid { color: #b07a12; }
.rr-acc.is-low { color: #c62d3d; }
#host-results .am-links { text-align: center; margin-top: .6rem; }
#host-lobby .race-hint, #host-results .race-hint { margin-left: auto; margin-right: auto; }
.race-results-table td { vertical-align: middle; }

/* ---- race countdown: red and pulsing for the last 30 seconds ---- */
.hud-time.is-urgent {
  background: #e63030;
  border-color: #fff;
  color: #fff;
  font-size: 22px;
  animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse { 50% { transform: scale(1.12); } }

/* ---- wrong answer: a 3-second lockout instead of losing points ---- */
.race-locked { text-align: center; font-family: var(--am-readable-font); }
.race-locked[hidden] { display: none; }
.race-locked-title { font-size: 1.4rem; font-weight: 800; color: #c62d3d; text-shadow: 0 2px 0 #fff; margin: 0 0 .2rem; }
.race-locked-count {
  width: 96px;
  height: 96px;
  margin: .2rem auto;
  border-radius: 50%;
  background: #fff;
  border: 6px solid #e63030;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: #c62d3d;
}
.race-locked-hint { color: #fff; font-weight: 700; margin: .3rem 0 0; }
.race-frozen-by {
  font-family: var(--am-readable-font);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  margin: 0 0 .3rem;
}

/* ---- who just attacked you: sits over the mini track (never over the
   question or the pad) for ~3.5s ---- */
.race-mini-track { position: relative; }
.race-attack {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -32px;
  z-index: 25;
  width: min(360px, calc(100% - 16px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 3px solid #e63030;
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .15);
  font-family: var(--am-readable-font);
}
.race-attack[hidden] { display: none; }
.race-attack.show { animation: attackIn .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes attackIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.race-attack-mascot { flex: none; width: 44px; height: 48px; }
.race-attack-mascot .mz { width: 100%; height: 100%; }
.race-attack-text { flex: 1; font-weight: 800; font-size: .95rem; color: #c62d3d; line-height: 1.2; }
.race-attack-icon { flex: none; width: 36px; height: 36px; }
.race-attack-icon svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hud-time.is-urgent, .race-attack.show { animation: none; }
}

/* ---- host projector countdown ---- */
.host-timer {
  margin: 0 auto .6rem;
  width: fit-content;
  min-width: 5.5ch;
  padding: .15rem 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: var(--purple-dark);
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .15);
}
.host-timer.is-urgent { background: #e63030; color: #fff; animation: timerPulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .host-timer.is-urgent { animation: none; } }

/* ---- host lobby: code + link beside a projector-sized QR code ---- */
.race-join-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; width: 100%; margin-bottom: .6rem; }
.race-join-text { display: flex; flex-direction: column; align-items: center; flex: 1 1 260px; min-width: 0; }
.race-qr { flex: none; width: clamp(180px, 26vw, 280px); aspect-ratio: 1; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.race-qr svg { display: block; width: 100%; height: 100%; }

/* ---- host create form: question types grouped, with a tick-all box per group ---- */
.race-op-table tr.race-op-group td, .race-op-table tr.race-op-group th {
  background: rgba(122, 67, 128, .08);
  color: var(--purple-dark);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
}
.race-op-table tbody td:nth-child(2) label { cursor: pointer; }

/* ---- points riding with each racer (student track; the projector keeps
   them in the label column) ---- */
.rt-tag {
  position: absolute;
  left: 100%;
  bottom: 22%;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--purple-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
  white-space: nowrap;
}
.rt-lane.tag-left .rt-tag { left: auto; right: 100%; margin: 0 2px 0 0; }
.rt-lane.is-me .rt-tag { background: var(--purple); color: #fff; }
.rt-host .rt-tag { display: none; }

/* ---- the finish line: slides in for the last 10 s, then the leader rides
   across it when time is up (track.js setFinish / crossFinish) ---- */
.rt-road::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 92%;
  width: 12px;
  background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 8px 8px;
  opacity: 0;
  transform: translateX(400%);
  transition: opacity .4s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 0;
}
.rt.has-finish .rt-road::before { opacity: .9; transform: none; }
.rt.is-finishing .rt-lane.is-winner .rt-runner { transition: left 2.2s cubic-bezier(.5, 0, .3, 1); }
.rt.is-finishing .rt-lane.is-winner .rt-road { background-color: #fff1b8; }
.rt.is-finishing .rt-lane.is-winner .rt-rank { background: #f6c445; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .rt-road::before { transition: none; }
}

/* ---- 4-choice pad: one colour per button, so kids can find "the green
   one" at a glance ---- */
.choice-pad .choice-btn:nth-child(1) { background: #e2574f; box-shadow: 0 6px 0 #a93228; }
.choice-pad .choice-btn:nth-child(2) { background: #3f86c9; box-shadow: 0 6px 0 #275e93; }
.choice-pad .choice-btn:nth-child(3) { background: #f2b630; box-shadow: 0 6px 0 #b9821a; color: #3a2a05; }
.choice-pad .choice-btn:nth-child(4) { background: #3cae4f; box-shadow: 0 6px 0 #26803a; }
.choice-pad .choice-btn:active { box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* ---- the shared 3-2-1 before every race, over everything ---- */
.race-countdown {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 24, 60, .55);
  pointer-events: none;
}
.race-countdown[hidden] { display: none; }
.race-countdown span {
  font-family: var(--am-readable-font);
  font-weight: 900;
  font-size: min(42vw, 260px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 8px 0 var(--purple-dark), 0 0 40px rgba(0, 0, 0, .3);
}
.race-countdown.tick span { animation: countPop .9s ease-out; }
.race-countdown.is-go span { color: #ffd25c; font-size: min(30vw, 200px); animation: countPop .9s ease-out; }
@keyframes countPop {
  0% { transform: scale(2.2); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: scale(.85); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .race-countdown.tick span, .race-countdown.is-go span { animation: none; }
}

/* The site-wide feedback bubble (shared/feedback.js, fixed bottom-left)
   sits right on top of the yellow 4-choice button on a phone. Mid-race a
   kid has no use for it, so it's hidden only while racing; join/waiting/
   results screens keep it. */
body:has(#screen-game:not([hidden])) .am-fb-fab { display: none; }

/* Keep the problem and answers together; leave the stage for the race. */
#screen-game { grid-template-areas: "hud" "stage" "pad"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(170px, 1fr) auto; gap: 8px; max-width: 1080px; }
#screen-game .stage-area { justify-content: flex-start; padding-top: 12px; }
#screen-game .pad-area { flex-direction: column; gap: 10px; width: 100%; padding-bottom: 8px; }
#screen-game .race-main { width: 100%; }
#screen-game .equation { margin: 0; line-height: 1.15; }
#screen-game .race-q-meta { margin-bottom: 6px; }
#screen-game .choice-pad { width: min(640px, 100%); }
#screen-game .pad-area.is-disabled { opacity: 1; }
#screen-game .pad-area.is-disabled .keypad,
#screen-game .pad-area.is-disabled .choice-pad { opacity: .45; }
.race-skip { display: block; margin: .7rem auto 0; padding: .65rem 1rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #344256; font: 600 .95rem var(--am-readable-font); cursor: pointer; }
.race-skip:hover { background: #f0f4f8; }
.race-skip:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* Teacher workspace: familiar sky, restrained dashboard surfaces. */
.race-teacher { font-family: var(--am-readable-font); color: #243449; }
.race-teacher .menu-head { flex-direction: row; justify-content: space-between; width: min(1180px, 100%); gap: 20px; margin: 20px auto 12px; padding-right: 40px; }
.race-teacher .wordmark { width: min(220px, 35vw); }
.race-teacher .menu-tagline { font: 600 1rem var(--am-readable-font); text-transform: none; letter-spacing: 0; text-shadow: none; color: #344256; }
.race-teacher .cat-nav { width: min(1180px, 100%); }
.race-teacher .cat-grid { gap: 6px; }
.race-teacher .cat-grid .pill { font: 600 .85rem var(--am-readable-font); padding: 9px 12px; border-radius: 10px; box-shadow: none; }
.race-teacher .teacher-workspace { width: min(1180px, 100%); min-height: 0; margin: 24px auto; }
.race-teacher .board-wrap { width: 100%; display: block; }
.race-teacher .teacher-panel { width: 100%; max-width: none; min-width: 0; margin: 0; padding: clamp(18px, 3vw, 40px); border-radius: 18px; border: 1px solid #dce5ec; background: #fff; box-shadow: 0 12px 36px #314e6414; color: #243449; text-shadow: none; }
.race-teacher .teacher-panel .board-title { font: 750 clamp(1.3rem, 3vw, 1.9rem) var(--am-readable-font); text-align: left; color: #243449; margin: 0 0 20px; }
.race-teacher .teacher-panel .race-hint { font-family: inherit; color: #536477; text-align: left; max-width: none; }
.race-teacher .race-setting-title { color: #344256; }
.race-teacher .race-setting-block { border-color: #e2e8f0; }
.race-teacher .race-roster-count { color: #536477; }
.race-teacher .host-event-feed { background: #f3f6fa; color: #536477; border-radius: 10px; }
.race-teacher .am-submit { font: 650 .95rem var(--am-readable-font); letter-spacing: 0; border-radius: 10px; box-shadow: none; padding: 14px 22px; }
.race-teacher .am-links { font-family: inherit; }
.class-summary { display: grid; grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: 32px; align-items: center; padding: 12px 0 32px; border-bottom: 1px solid #e2e8f0; margin-bottom: 24px; }
.accuracy-ring { width: clamp(170px, 22vw, 250px); aspect-ratio: 1; margin: auto; border-radius: 50%; padding: 22px; background: conic-gradient(#239963 var(--accuracy), #d65054 0); }
.accuracy-ring.is-empty { background: #e4eaf0; }
.accuracy-ring > div { border-radius: 50%; width: 100%; height: 100%; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.accuracy-ring strong { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; color: #243449; }
.accuracy-ring span { font-size: .95rem; color: #64748b; }
.class-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.class-metric { background: #f6f8fb; border: 1px solid #e8edf3; border-radius: 12px; padding: 18px; }
.class-metric dt { font-size: .9rem; color: #64748b; margin-bottom: 6px; }
.class-metric dd { margin: 0; font-size: 1.8rem; font-weight: 750; color: #243449; }
.metric-correct dd { color: #197647; }
.metric-wrong dd { color: #b8333e; }
.race-teacher .race-results-table { width: 100%; min-width: 650px; border-collapse: collapse; background: #fff; }
.race-teacher .race-results-table th { background: #f6f8fb; color: #64748b; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 14px 12px; }
.race-teacher .race-results-table td { padding: 16px 12px; border-bottom: 1px solid #e8edf3; font-size: .95rem; }
.race-teacher .race-results-table .rr-name { white-space: normal; overflow-wrap: anywhere; min-width: 120px; }
.race-teacher .race-results-table .rr-breakdown { width: 45%; min-width: 210px; }
.race-teacher .race-results-table th:nth-child(4) { text-align: left; }
.answer-bar { display: flex; width: 100%; min-height: 29px; border-radius: 7px; overflow: hidden; background: #e7edf2; font: 650 .8rem var(--am-readable-font); color: #fff; }
.answer-bar > span { display: flex; align-items: center; padding: 5px 9px; flex-basis: 0; min-width: 2.5em; white-space: nowrap; }
.answer-bar-correct { background: #239963; }
.answer-bar-wrong { background: #cf4650; }
.answer-bar.is-empty { align-items: center; justify-content: center; color: #64748b; font-weight: 400; padding: 5px; }
.race-final-row { flex-wrap: wrap; }
.race-final-row > .answer-bar { flex-basis: 100%; margin-top: 6px; }
@media (max-width: 600px) {
  .race-teacher .menu-head { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .race-teacher .wordmark { width: 190px; }
  .class-summary { grid-template-columns: 1fr; gap: 24px; }
  .class-metrics { gap: 8px; }
  .class-metric { padding: 12px; }
  .class-metric dt { font-size: .8rem; }
  .class-metric dd { font-size: 1.5rem; }
}
@media (min-width: 640px) and (orientation: landscape) {
  #screen-game { grid-template-areas: "hud" "stage" "pad"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(170px, 1fr) auto; }
  #screen-game .choice-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.race-teacher .cat-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
.race-teacher .cat-grid .pill { flex: 0 1 auto; width: auto; min-width: 0; min-height: 0; }
.race-teacher .wordmark { min-width: 0; max-width: 220px; }
.race-teacher .race-choice-style-label { color: #536477; }

#screen-game.has-item .pad-area { display: none; }
/* Same for the wrong-answer lockout and the freeze: their panel is taller
   than what the track leaves of the stage row, and spilled over the
   (disabled) keypad at every size. */
#screen-game.is-blocked .pad-area { display: none; }

/* Projector awards ceremony: the winner stands in the tallest centre step. */
#host-ceremony { text-align: center; padding: 20px 0 12px; }
.ceremony-eyebrow { color: #64748b; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
#ceremony-title { font-size: clamp(1.6rem, 4vw, 2.7rem); margin: 12px 0 36px; color: #243449; }
.race-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; max-width: 800px; margin: 0 auto 36px; min-height: 300px; }
.podium-place { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.podium-place-1 { order: 2; }
.podium-place-2 { order: 1; }
.podium-place-3 { order: 3; }
.podium-name { font-size: clamp(1rem, 2.3vw, 1.5rem); overflow-wrap: anywhere; }
.podium-points { font-size: .85rem; color: #64748b; margin-bottom: 8px; }
.podium-step { display: grid; place-items: center; border-radius: 12px 12px 0 0; font-size: 4rem; font-weight: 800; border: 1px solid #00000012; }
.podium-place-1 .podium-step { height: 230px; background: #f4d477; color: #735510; }
.podium-place-2 .podium-step { height: 170px; background: #e0e7ed; color: #506072; }
.podium-place-3 .podium-step { height: 120px; background: #e8bea0; color: #774a2f; }
@media (max-width: 600px) { .race-podium { gap: 6px; } .podium-points { font-size: .7rem; } .podium-place-1 .podium-step { height: 185px; } .podium-place-2 .podium-step { height: 140px; } .podium-place-3 .podium-step { height: 100px; } }

/* The awards are projected for the children; analytics keep their clean layout. */
.teacher-panel:has(#host-ceremony:not([hidden])) { background: #fff9e9; border: 4px solid #80549a; box-shadow: 0 8px 0 #60407433; }
#host-ceremony { background: radial-gradient(circle at 10% 15%, #f5c64b 0 5px, transparent 6px), radial-gradient(circle at 86% 30%, #e76b80 0 6px, transparent 7px), radial-gradient(circle at 20% 60%, #79bed5 0 5px, transparent 6px), radial-gradient(circle at 94% 70%, #9bc975 0 6px, transparent 7px); }
#ceremony-title { color: #70438b; font-family: inherit; text-shadow: 0 3px 0 #e7d7ec; }
#host-ceremony .ceremony-eyebrow { color: #936127; font-weight: 800; }
.podium-place { gap: 4px; }
.podium-name { color: #70438b; }
.podium-racer { height: clamp(90px, 12vw, 145px); margin-bottom: -12px; z-index: 1; }
.podium-racer svg { height: 100%; width: 100%; overflow: visible; }
.podium-step { border: 3px solid #80549a; border-bottom-width: 7px; border-radius: 18px 18px 6px 6px; color: #fff; text-shadow: 0 3px 0 #0002; box-shadow: inset 0 8px 0 #ffffff55; }
.podium-place-1 .podium-step { background: #ffcf48; color: #8c571b; }
.podium-place-2 .podium-step { background: #a6d9ec; color: #38627f; }
.podium-place-3 .podium-step { background: #f4aa76; color: #955331; }
#host-ceremony .am-submit { background: #a4d66b; color: #30452a; border: 2px solid #6e9f43; border-radius: 999px; box-shadow: 0 5px 0 #6e9f43; font-weight: 800; }

#host-ceremony { position: relative; isolation: isolate; }
.ceremony-fireworks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.is-revealing .podium-place { animation: podium-reveal .8s cubic-bezier(.2,.9,.3,1.2) var(--reveal-delay) both; }
@keyframes podium-reveal { from { opacity: 0; transform: translateY(60px) scale(.65); filter: brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
.ceremony-firework { position: absolute; left: 15%; top: 22%; width: 1px; height: 1px; color: #f3af25; }
.ceremony-firework:nth-child(2) { left: 82%; top: 32%; color: #e95d92; }
.ceremony-firework:nth-child(3) { left: 50%; top: 14%; color: #7d62cf; }
.ceremony-firework:nth-child(4) { left: 26%; top: 48%; color: #37abc0; }
.ceremony-firework:nth-child(5) { left: 74%; top: 55%; color: #83b94b; }
.ceremony-firework i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0; animation: ceremony-spark 1.4s ease-out calc(2.4s + var(--burst) * .3s) 2 both; }
@keyframes ceremony-spark { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(120px) scale(.2); } }
@media (prefers-reduced-motion: reduce) { .is-revealing .podium-place, .ceremony-firework i { animation: none; } }
/* Keep the complete awards stage visible on a classroom projector. */
.race-teacher .menu-screen:has(#host-ceremony:not([hidden])) .teacher-other-games { display: none; }
.race-teacher .teacher-panel:has(#host-ceremony:not([hidden])) { padding: clamp(18px, 2vw, 28px); }
.teacher-panel:has(#host-ceremony:not([hidden])) > .board-title { display: none; }
#host-ceremony { padding-top: 0; }
#host-ceremony #ceremony-title { margin-bottom: 20px; }
#host-ceremony .podium-racer { height: clamp(90px, 10vw, 120px); }
#host-ceremony .podium-place-1 .podium-step { height: 170px; }
#host-ceremony .podium-place-2 .podium-step { height: 125px; }
#host-ceremony .podium-place-3 .podium-step { height: 85px; }

.race-roster li:not(.race-roster-count) { background: #fff; border: 1px solid #dce5ee; border-radius: 12px; padding: .65rem .8rem; color: #334155; box-shadow: 0 2px 5px #20304708; overflow-wrap: anywhere; }
#host-roster { gap: .65rem; width: 100%; }

/* Student awards share the teacher ceremony, sized for handheld screens. */
.student-ceremony { position: relative; isolation: isolate; width: 100%; max-width: 650px; }
.student-ceremony .race-podium { margin-bottom: 20px; min-height: 0; }
.student-ceremony .podium-racer { height: clamp(70px, 16vw, 110px); }
.student-ceremony .podium-place-1 .podium-step { height: 140px; }
.student-ceremony .podium-place-2 .podium-step { height: 105px; }
.student-ceremony .podium-place-3 .podium-step { height: 75px; }

/* ---- quick races for everyone: mode + difficulty picker (join screen),
   friends lobby, rematch (see CLAUDE.md "Carreras de mates") ---- */
/* The mode picker made this form taller than a phone: plain
   justify-content:center then pushes the logo above the scroll origin,
   where it can never be scrolled back to. Auto margins centre it when it
   fits and start it at the top when it doesn't. */
#screen-join { justify-content: flex-start; }
#screen-join > .title { margin-top: auto; }
#screen-join > form { margin-bottom: auto; }

.race-modes, .race-quick { display: flex; flex-direction: column; gap: .3rem; }
.race-mode-tabs, .race-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(255, 255, 255, .28);
  border-radius: 16px;
  padding: 6px;
}
.race-levels { grid-template-columns: repeat(4, 1fr); }
.race-mode-tab, .race-level {
  font-family: var(--am-readable-font);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.15;
  color: var(--purple-dark);
  background: rgba(255, 255, 255, .8);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: .55rem .3rem;
  min-height: 46px;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.race-level { font-size: .8rem; padding: .45rem .2rem; min-height: 40px; }
.race-mode-tab[aria-pressed="true"], .race-level[aria-pressed="true"] {
  background: #fff4c2;
  border-color: var(--purple);
  box-shadow: 0 2px 0 var(--purple-dark);
  transform: translateY(-1px);
}
.race-mode-tab:focus-visible, .race-level:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.race-level-desc {
  font-family: var(--am-readable-font);
  font-size: .82rem;
  line-height: 1.35;
  color: #fff;
  margin: 0;
  min-height: 2.2em; /* two lines, so switching level doesn't jump the form */
}
#screen-join .join-beta { margin: 0 auto; }
#btn-join:disabled { opacity: .6; }

.race-party { display: flex; flex-direction: column; align-items: center; max-width: 340px; }
.race-party .race-hint { margin: 0 0 .5rem; }
.race-party .race-share { margin: 0 0 .3rem; }
#btn-party-start { margin: .2rem 0 .8rem; }
#btn-party-start:disabled, #btn-rematch:disabled { opacity: .6; }
.race-party .join-beta { margin: 0 0 .8rem; }

.race-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: .4rem 0 1rem; }
.race-end-actions .big-button { text-decoration: none; }
/* Friends lobby QR: phone-sized, not the teacher's projector size. */
.race-party-qr { width: clamp(150px, 46vw, 210px); margin: 0 0 .7rem; }

/* Opened from an mCarrera.html tile: the pickers are hidden and this one
   line says what was picked. */
.race-picked {
  margin: -.4rem 0 .4rem;
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--purple-dark);
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  padding: .35rem 1rem;
}
.race-picked[hidden] { display: none; }