.countryFacts { margin-top: 12px; padding-top: 12px; border-top: 1px solid #64715170; color: #ecebdc; font-size: 12px; }
.countryFactsHeading { display: flex; gap: 10px; align-items: center; }
.countryFactsHeading > div { display: grid; gap: 3px; min-width: 0; }
.countryFactsHeading strong { font-size: 15px; }
.countryFactsHeading small { color: #c5bea3; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.countryFlag { flex: 0 0 auto; object-fit: contain; border: 1px solid #d5d1b330; background: #ffffff08; }
.countryFacts dl { margin: 9px 0; }
.countryFacts dl > div { display: flex; gap: 12px; justify-content: space-between; margin: 5px 0; }
.countryFacts dt { color: #c5c9b8; }
.countryFacts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.countryFactsSource, .countryFactsContext { font-size: 10px; line-height: 1.5; color: #c2c5b5; margin: 6px 0 0; }
.countryFacts a { color: #e4c766; text-underline-offset: 2px; }
.mobileCountryIntel .countryFacts { margin-top: 6px; padding-top: 6px; }
.mobileCountryIntel .countryFacts dl, .mobileCountryIntel .countryFactsSource, .mobileCountryIntel .countryFactsContext { display: none; }
@media (max-width: 900px), (pointer: coarse) {
  .commandPanel #selectionPanel .countryFacts { display: none; }
  .mobileDrawer .countryFacts { margin-top: 0; border-top: 0; font-size: 14px; }
  .mobileDrawer .countryFactsSource, .mobileDrawer .countryFactsContext { font-size: 12px; }
}
@media (max-width: 640px), (hover: none) and (pointer: coarse), (max-width: 920px) and (max-height: 520px) {
  /* Canvas is a replaced element: auto dimensions use its backing-store size,
     not opposite insets. Hidden startup could otherwise lock it to 1×1. */
  #battlefield, #battlefieldGpu {
    width: calc(100% - var(--mobile-safe-left, 0px) - var(--mobile-safe-right, 0px));
    height: calc(100% - var(--game-playfield-top) - var(--mobile-turn-actions-height));
  }
}