/* Compact, persistent game context; keeps the Atlas paper/teal visual language. */
.game-topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.game-hud-summary { grid-column: 3; display: flex; justify-self: end; align-items: center; gap: 19px; min-width: 0; }
.game-progress { display: flex; justify-self: auto; min-width: 0; gap: 8px; font-size: 9px; }
.game-progress span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-progress i { flex: 0 0 28px; }
.game-score { display: flex; justify-self: auto; white-space: nowrap; }
.game-score strong { font-size: 17px; }
.round-scoreline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; margin: 13px 0 4px; color: #68858a; font: 10px 'DM Mono', monospace; }
.round-progress-label { letter-spacing: .65px; text-transform: uppercase; }
.round-progress-count { color: #17495c; font-size: 11px; }
.round-error-count { grid-column: 1; justify-self: start; color: #a75e53; font-size: 9px; }
.round-lives-count { display: none; grid-column: 2; justify-self: end; color: #b05f53; font-size: 9px; }
.round-progress-meter { grid-column: 1 / -1; width: 100%; height: 5px; border: 0; border-radius: 9px; background: #dbe6df; accent-color: #318c79; }
.round-progress-meter::-webkit-progress-bar { border-radius: 9px; background: #dbe6df; }
.round-progress-meter::-webkit-progress-value { border-radius: 9px; background: #59ad92; transition: width .2s ease; }
.round-progress-meter::-moz-progress-bar { border-radius: 9px; background: #59ad92; }

/* Answer feedback stays near the bottom edge so the target remains visible. */
.answer-banner,
.answer-banner.wrong {
  top: auto;
  right: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 50%;
  width: min(420px, calc(100% - 32px));
  min-height: 0;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 18px;
  border-radius: 5px;
  transform: translate(-50%, 10px);
  transition: opacity .16s ease, transform .18s ease, visibility .18s;
}
.answer-banner.show,
.answer-banner.wrong.show { transform: translate(-50%, 0); }
.answer-banner:before { width: 28px; height: 3px; margin: 0 0 2px; }
.answer-banner strong { font-size: 27px; letter-spacing: -.5px; }
.answer-banner span { font-size: 11px; }
.answer-banner .wrong-selection { font-size: 12px; }
.answer-banner.wrong .wrong-selection { font: 600 14px/1.2 Fraunces, serif; }
.answer-banner.wrong .wrong-selection::before { margin-bottom: 2px; font-size: 8px; }
.answer-banner .mastery-feedback { color: #3d8370; font: 600 10px/1.3 'DM Sans', sans-serif; }
.answer-banner.wrong .mastery-feedback { color: #a75e53; }
.game-screen.team-game .game-brand { visibility: hidden; }
.game-screen.team-game .game-hud-summary { display: none; }
.game-screen.team-game .team-scoreboard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.result-medal { display: inline-flex; align-items: center; gap: 7px; margin: 11px 0 0; padding: 5px 11px; border: 1px solid #d8dfd7; border-radius: 99px; color: #617f84; font-size: 11px; }
.result-medal span { color: #bdc9c2; }
.result-medal[data-rank="1"] { border-color: #d5a27f; color: #865638; background: #f5e7d9; }
.result-medal[data-rank="1"] span { color: #b67b51; }
.result-medal[data-rank="2"] { border-color: #b8c5ce; color: #526877; background: #edf1f2; }
.result-medal[data-rank="2"] span { color: #7895a4; }
.result-medal[data-rank="3"] { border-color: #d9bc66; color: #806721; background: #fbf3d7; }
.result-medal[data-rank="3"] span { color: #c49c25; }
.result-mastery { min-height: 0; margin: 5px 0 -7px; color: #5e8580; font-size: 10px; }
.result-mastery:empty { display: none; }

@media (max-width: 1100px) {
  .game-hud-summary { gap: 10px; }
  .game-progress span, .game-progress i { display: none; }
  .game-progress b { font-size: 10px; white-space: nowrap; }
}
@media (max-width: 760px) {
  .game-topbar { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; padding: 0 12px; }
  .game-brand { grid-column: 2; justify-self: center; }
  .game-hud-summary { grid-column: 3; gap: 8px; }
  .game-score { gap: 4px; }
  .game-score small { font-size: 7px; }
  .game-score strong { font-size: 13px; }
  .game-progress b { font-size: 9px; }
  .game-progress span { display: block; max-width: 52px; font-size: 7px; letter-spacing: .3px; }
  .round-scoreline { grid-template-columns: auto auto 1fr; gap: 4px 7px; margin: 8px 0 2px; font-size: 9px; }
  .round-progress-count { justify-self: start; }
  .round-error-count { grid-column: 3; justify-self: end; }
  .game-screen.hud-collapsed .round-lives-count { display: block; }
  .game-screen.team-game .round-lives-count { display: none; }
  .round-progress-meter { grid-column: 1 / -1; }
  .game-screen.hud-collapsed .challenge-panel { max-height: 124px; }
  .game-screen.hud-collapsed .challenge-panel .round-scoreline { display: grid; }
  .game-screen.team-game .team-scoreboard { width: min(240px, 58vw); min-width: 0; }
  .answer-banner,
  .answer-banner.wrong { width: min(360px, calc(100% - 28px)); padding: 11px 14px; }
  .answer-banner strong { font-size: 25px; }
  .results-screen { padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); }
  .results-card { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .game-topbar { height: 52px; }
  .game-map-stage { inset-block-start: 52px; }
  .challenge-panel { top: max(58px, calc(env(safe-area-inset-top) + 50px)); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 70px); }
  .game-screen.hud-collapsed .challenge-panel { min-height: 0; max-height: 118px; padding: 9px 13px; }
  .game-screen.hud-collapsed .challenge-panel .eyebrow { margin-bottom: 4px; }
  .game-screen.hud-collapsed .challenge-panel h1 { font-size: 21px; }
  .game-screen.hud-collapsed .challenge-panel .round-scoreline { margin-top: 5px; }
  .results-screen { overflow-y: auto; }
  .results-card { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); overflow-y: auto; padding: 12px 22px; }
  .results-card .eyebrow, .result-kicker { display: none; }
  .results-card h1 { margin: 0 0 4px; font-size: clamp(23px, 4vw, 29px); }
  .result-score { margin: 0; }
  .result-score strong { font-size: 42px; }
  .result-medal { margin-top: 5px; }
  .result-insight { margin: 6px auto 0; }
  .result-mastery { margin: 3px 0; }
  .result-details { margin: 7px 0; padding: 6px 0; }
  .result-next { display: flex; flex-direction: row; gap: 7px; margin: 0 0 8px; }
  .results-card .primary-button { padding: 9px 14px; }
  .back-home { margin: 0 0 0 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .result-insight, .result-next { display: flex; }
  .result-insight { font-size: 10px; }
  .result-next strong { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .round-progress-meter::-webkit-progress-value { transition: none; }
}