/* Tablet: the map is the primary surface; the prompt becomes a compact HUD. */
.challenge-collapse { display: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .game-screen {
    grid-template-columns: 1fr;
    grid-template-rows: 68px 1fr;
  }
  .game-topbar { min-height: 68px; padding: 0 20px; }
  .game-map-stage { grid-column: 1; grid-row: 2; }
  .challenge-panel {
    position: absolute;
    top: 84px;
    left: 16px;
    z-index: 8;
    width: min(300px, 36vw);
    max-height: calc(100dvh - 104px);
    min-width: 265px;
    padding: 22px 20px 19px;
    overflow: auto;
    border: 1px solid #c9dad4;
    border-radius: 5px;
    background: #f7f4ebf5;
    box-shadow: 0 15px 36px #09243a2b;
    backdrop-filter: blur(8px);
  }
  .challenge-panel .eyebrow { max-width: 205px; margin-bottom: 17px; }
  .challenge-panel h1 { max-width: 238px; font-size: clamp(29px, 3.5vw, 39px); }
  .challenge-number { margin-top: 19px; }
  .challenge-copy { max-width: 250px; }
  .timer { margin-top: 21px; }
  .selection-status { margin-top: 20px; }
  .challenge-collapse {
    position: absolute;
    top: 15px;
    right: 13px;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    border: 1px solid #c7d8d1;
    border-radius: 99px;
    padding: 0 8px;
    background: #fffffff0;
    color: #3c6870;
    font: 9px 'DM Mono', monospace;
    letter-spacing: .25px;
  }
  .challenge-collapse span { font: 17px/1 'DM Sans', sans-serif; }
  .challenge-collapse:focus-visible { outline: 3px solid #ff8067; outline-offset: 2px; }
  .game-screen.hud-collapsed .challenge-panel {
    width: min(292px, calc(100vw - 32px));
    min-width: 0;
    max-height: 104px;
    padding: 14px 16px;
    overflow: hidden;
  }
  .game-screen.hud-collapsed .challenge-panel .eyebrow { margin: 0 70px 8px 0; font-size: 8px; }
  .game-screen.hud-collapsed .challenge-panel h1 { margin: 0; font-size: 23px; line-height: 1.04; letter-spacing: -.8px; }
  .game-screen.hud-collapsed .challenge-panel h1 br { display: none; }
  .game-screen.hud-collapsed .challenge-panel .challenge-number,
  .game-screen.hud-collapsed .challenge-panel .game-lives,
  .game-screen.hud-collapsed .challenge-panel .medal-progress,
  .game-screen.hud-collapsed .challenge-panel .flag-prompt,
  .game-screen.hud-collapsed .challenge-panel .language-prompt,
  .game-screen.hud-collapsed .challenge-panel .landmark-prompt,
  .game-screen.hud-collapsed .challenge-panel .challenge-copy,
  .game-screen.hud-collapsed .challenge-panel .timer,
  .game-screen.hud-collapsed .challenge-panel .selection-status,
  .game-screen.hud-collapsed .challenge-panel .answer-feedback { display: none; }
  .game-screen.hud-collapsed .challenge-collapse { top: 12px; right: 12px; }
  .game-screen.hud-collapsed .challenge-collapse span { transform: rotate(45deg); }
  .game-screen.hud-collapsed .challenge-collapse b { font-size: 0; }
  .game-screen.hud-collapsed .challenge-collapse b::after { content: 'Ver'; font-size: 9px; }
  .map-controls { right: 18px; bottom: 18px; }
  .map-controls button { width: 48px; height: 46px; font-size: 24px; }
  .map-controls button:last-child { font-size: 20px; }
  .map-hint {
    left: 18px;
    bottom: 18px;
    max-width: 205px;
    padding: 7px 10px;
    border: 1px solid #c4d7d0;
    border-radius: 4px;
    background: #f7f4ebd9;
    box-shadow: 0 6px 18px #133b3a14;
  }
  .results-screen { inset: 68px 0 0; }
}

@media (min-width: 761px) and (max-width: 860px) {
  .challenge-panel { width: min(284px, calc(100vw - 32px)); }
  .map-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .challenge-collapse span { transition: none; }
}