/* Keep the compact visual scale while using the full available content width.
   Zoom participates in layout; ad creatives are outside this scope. */
.game > .question-panel {
  zoom: .75;
  width: 100%;
  margin-inline: auto;
}

/* Let the shortened quiz determine its own height instead of reserving
   the old 450/550px minimum below the last visible control. */
#app[data-view="quiz"] .game {
  min-height: 0;
}
#app[data-view="quiz"] .progress {
  margin-bottom: 10px;
}
#app[data-view="quiz"] .game-actions {
  margin-top: 10px;
  padding: 0;
}
#app[data-view="quiz"] .game-actions .text-btn {
  padding: 0;
  line-height: 20px;
}

/* English names and labels may wrap, while controls remain within the viewport. */
.game-top { gap: 10px; }
.game-top > .text-btn { flex-shrink: 0; }
.game-meta { min-width: 0; justify-content: flex-end; }
.game-meta > span { min-width: 0; overflow-wrap: anywhere; }
.game-meta .clock { flex-shrink: 0; white-space: nowrap; }
.capital { overflow-wrap: anywhere; }
.map-prompt, .map-prompt h2 { min-width: 0; overflow-wrap: anywhere; }
.card-bottom { gap: 8px; }
.card-bottom button { flex-shrink: 0; }
.hero h1 { letter-spacing: -1px; }
@media (max-width: 760px) {
  .hero h1 { font-size: 29px; line-height: 1.25; }
  .hero .subtext { display: block; margin: 10px 0 0; }
  .game-top { align-items: center; }
  .game-meta { gap: 7px; }
  .map-bottom { flex-wrap: wrap; gap: 10px; }
}

/* Compensate for the compact panel's 75% zoom: options render at 16.5px
   rather than 8–9px on phones. Images and ad dimensions stay unchanged. */
#app[data-view="quiz"] .question-panel h2.question {
  font-size: 36px;
  line-height: 1.35;
}
#app[data-view="quiz"] .question-panel > .eyebrow {
  font-size: 15px;
}
#app[data-view="quiz"] .option,
#app[data-view="quiz"] .player-option-name {
  font-size: 22px;
  line-height: 1.45;
}
#app[data-view="quiz"] .player-option-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
#app[data-view="quiz"] .option {
  min-height: 80px;
}
#app[data-view="quiz"] .option kbd {
  flex-shrink: 0;
  font-size: 16px;
}
#app[data-view="quiz"] .feedback {
  font-size: 20px;
  line-height: 1.6;
}
#app[data-view="quiz"] .capital {
  font-size: 48px;
}
#app[data-view="map"] .map-prompt h2 { font-size: 38px; }
#app[data-view="map"] .map-prompt .eyebrow { font-size: 12px; }
#app[data-view="map"] .map-clue-help,
#app[data-view="map"] .map-navigation p { font-size: 16px; }
@media (max-width: 760px) {
  #app[data-view="quiz"] .question-panel h2.question { font-size: 30px; }
  #app[data-view="quiz"] .capital { font-size: 40px; }
  #app[data-view="map"] .map-prompt h2 { font-size: 32px; }
  #app[data-view="map"] .map-prompt .eyebrow { font-size: 11px; }
}