/* Team games on /games/teams/ (styles only for this page; the shared look is in styles.css).
   Four team colours, each with white text at more than 4.5:1; the team name is always written beside it. */
.team-0 { --team: #1d4f91; }
.team-1 { --team: #8a3b12; }
.team-2 { --team: #2d6a2d; }
.team-3 { --team: #6a3d9a; }

/* Read from the back of a classroom: larger type once the game starts */
#tplay, #tdone { font-size: 1.12em; }
@media (min-width: 1000px) { #tplay, #tdone { font-size: 1.25em; } }

/* Race board: one row per team, one column per place */
.board { margin: 0 0 16px; }
.race { width: 100%; border-collapse: collapse; table-layout: fixed; }
.race caption { text-align: left; font-weight: 700; color: var(--primary); padding: 0 0 6px; }
.race th, .race td { border: 1px solid var(--line); padding: 6px 2px; text-align: center; vertical-align: middle; }
.race thead th { background: var(--q-bg); font-size: 0.82em; line-height: 1.2; overflow-wrap: anywhere; }
.race thead th:first-child, .race tbody th { width: 22%; }
.race tbody th.tname { text-align: left; padding-left: 8px; border-left: 8px solid var(--team); }
.race td.here { background: var(--q-bg); }
.token { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em;
  border-radius: 50%; background: var(--team); color: #ffffff; font-weight: 700; }
.race-balloon thead th:last-child, .race-hill thead th:last-child, .race-rock thead th:last-child { background: var(--good-bg); }
.where { list-style: none; margin: 10px 0 0; padding: 0; }
.where li { margin: 0 0 4px; }

/* Points: one card per team */
.scores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.score-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 8px solid var(--team); border-radius: 8px; background: var(--surface); }
.score-card .tname { font-weight: 700; }

/* The question (not answerable on screen; the teams answer on paper) */
.tchoices { list-style: none; margin: 0 0 12px; padding: 0; }
.tchoices .tchoice { cursor: default; }
.tq-item .stem { margin: 12px 0; }

/* Teacher controls */
.tcontrols { margin: 12px 0; }
.ctl-h { font-weight: 700; margin: 12px 0 8px; }
.ctl-h.turn { border-left: 8px solid var(--team); padding-left: 10px; }
.toggles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.btn.toggle { min-height: 48px; border: 2px solid var(--team, var(--control-edge)); gap: 8px; }
.btn.toggle .tick { display: inline-block; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-radius: 3px; }
.btn.toggle[aria-pressed="true"] { background: var(--team); border-color: var(--team); color: #ffffff; }
.btn.toggle[aria-pressed="true"] .tick::after { content: "\2713"; display: block; line-height: 1; font-weight: 700; }
.tclock { font-weight: 700; }

/* Find it on the site */
.clue { border: 2px solid var(--primary); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.clue-h { margin: 0 0 6px; font-weight: 700; color: var(--primary); }
.clue-text { margin: 0; font-size: 1.15em; line-height: 1.5; }
.check-box .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.check-box select, .check-box input { min-height: 44px; font: inherit; padding: 4px 8px; }
.check-box input { width: 5em; }
.match.good { color: var(--good); font-weight: 700; }
.match.bad { color: var(--bad); font-weight: 700; }
.tfoot { margin-top: 24px; }

/* A phone is too narrow for seven places side by side: the written list below the board says the same */
@media (max-width: 599px) {
  .race { display: none; }
  .where li { border-left: 8px solid var(--team); padding-left: 8px; }
}
.board-note { margin: 8px 0 0; }
.score-line { font-weight: 700; }