/* Learning about the world: the daily geography question (home), its banner on the map and the
   "Did you know?" card on a country's page. Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  .quiz-q { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
  .quiz-flag { width: 150px; height: 100px; margin: var(--sp-4) auto 0; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--border), var(--shadow-2); }
  .quiz-note { margin-top: var(--sp-2); }

  /* The answers: one tile per country, its flag over its name. */
  .quiz-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
  .quiz-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); min-width: 0; min-height: 120px; padding: var(--sp-4) var(--sp-2); text-align: center; }
  .quiz-opt b { font-size: var(--fs-ui); overflow-wrap: anywhere; }
  .quiz-opt.no { border-color: var(--red); background: var(--red-soft); animation: quiz-shake .35s var(--ease); }
  @keyframes quiz-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  .quiz-miss { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--amber-text); }
  .quiz-done p { margin-top: 2px; }
  .quiz-loading { display: flex; flex-direction: column; gap: var(--sp-4); }
  .quiz-loading .skeleton { width: 60%; height: 18px; }
  .quiz-loading .skeleton + .skeleton { width: 100%; height: 120px; border-radius: var(--r-lg); }

  /* The map's question banner: floats over the map until it is answered or put away. */
  .quiz-banner { position: absolute; left: 50%; bottom: var(--sp-6); z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-4);
    max-width: calc(100% - var(--sp-8)); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); border-radius: var(--r-pill);
    background: var(--surface-overlay); border: 1px solid var(--brand-border); box-shadow: var(--shadow-3), var(--highlight); animation: quiz-banner-in var(--t-slow) var(--ease); }
  @keyframes quiz-banner-in { from { opacity: 0; translate: 0 8px; } }
  .quiz-banner small { flex: none; font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brand-text); white-space: nowrap; }
  .quiz-banner b { min-width: 0; }
  .quiz-banner .btn { flex: none; }

  /* "Did you know?" on a country's page. */
  .geo-facts ul { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding-left: var(--sp-5); }
  .geo-facts li::marker { color: var(--text-3); }

  /* Phones: above the bottom tab bar, like the toasts. */
  @media (max-width: 720px) { .quiz-banner { bottom: calc(84px + env(safe-area-inset-bottom)); } }
  @media (max-width: 560px) {
    .quiz-opts { gap: var(--sp-2); }
    .quiz-opt { min-height: 104px; padding: var(--sp-3) var(--sp-1); }
    .quiz-opt .flag.big { width: 54px; height: 36px; }
    .quiz-banner { left: var(--sp-3); right: var(--sp-3); transform: none; max-width: none; gap: var(--sp-3); padding-left: var(--sp-4); border-radius: var(--r-lg); }
    .quiz-banner small { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .quiz-opt.no, .quiz-banner { animation: none; } }
}