/* Shared shell: play, browse and read have distinct widths, one visual language. */
.site {
  --site-ink: #242424;
  --site-muted: #66635f;
  --site-paper: #fffefa;
  --site-line: #d9d6ce;
  --site-action: #2463a6;
  --site-accent: #f0ede5;
  --site-link: #2463a6;
  --site-link-hover: #164b82;
  --site-link-soft: #edf4fb;
  --site-display: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-reading: var(--site-display);
  --atlas-font-editorial: var(--site-display);
  --site-measure: 720px;
  --site-section-gap: 48px;
  --site-section-title: 28px;
  --atlas-link: var(--site-link);
  --atlas-ink: var(--site-ink);
  --atlas-forest: var(--site-ink);
  --atlas-muted: var(--site-muted);
  --atlas-line: var(--site-line);
  --atlas-paper: var(--site-paper);
  color: var(--site-ink);
  background: var(--site-paper);
  font-family: var(--site-display);
}
.site [hidden] { display: none !important; }
.site :where(a[href]) { color: var(--site-link); text-decoration-line: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.site :where(a[href]:is(:hover, :focus-visible)) { color: var(--site-link-hover); text-decoration-line: underline; }
.site [class~="marker:text-sky-500"]::marker, .site [class~="marker:text-sky-500"] ::marker { color: var(--site-link); }
/* Underlines identify links inside prose; navigation and cards have their own hierarchy. */
.site :where(.page__container p a:not([class*="button"], [class*="cta"], .text-white, :has(img))) { text-decoration-line: underline; }
.site :is(a, button, summary, input, select):focus-visible { outline: 3px solid #2873ac; outline-offset: 3px; }
.site .flagmatch-tile:focus-visible { outline: 3px solid #2873ac !important; outline-offset: -4px; }
.site-skip { position: fixed; top: -8rem; left: 1rem; z-index: 200; padding: 1rem; color: white; background: var(--site-action); }
.site-skip:focus { top: .5rem; }
.site-header { position: relative; z-index: 70; background: var(--site-paper); border-bottom: 1px solid var(--site-line); }
.site-header__inner { max-width: 1480px; min-height: 84px; margin: auto; padding: 0 32px; display: flex; align-items: center; gap: 40px; }
.site-brand { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 44px; }
.site-brand picture, .site-brand img { display: block; }
.site-brand img { width: auto; height: 40px; object-fit: contain; }
.site-header__nav, .site-header__account { display: flex; align-items: center; gap: 22px; }
.site-header__account { position: relative; margin-left: auto; gap: 16px; }
.site-header__link, .site-menu > summary, .site-sign-in { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--site-link); font-size: 16px; font-weight: 600; }
.site-header__link, .site-sign-in { color: var(--site-link); }
.site-header__link:hover, .site-sign-in:hover { text-decoration: underline; }
.site-header__link[aria-current], .site-header__link:hover, .site-menu[open] > summary { color: var(--site-action); }
.site-header__link[aria-current] { color: var(--site-ink); font-weight: 750; }
.site-header__premium { display: inline-flex; align-items: center; gap: 6px; color: var(--site-link); font-size: 13px; font-weight: 650; white-space: nowrap; }
.site-header__ad-free { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; color: var(--site-link); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; }
a.site-header__ad-free:hover { color: var(--site-link-hover); }
.site-header__ad-free--active { background: transparent; border-color: transparent; }
.site-profile img { border-radius: 50%; }
.site-profile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--site-accent); font-weight: 700; }
.site-menu { position: relative; }
.site-menu > summary, .site-picker > summary { cursor: pointer; list-style: none; }
.site-menu > summary::-webkit-details-marker, .site-picker > summary::-webkit-details-marker { display: none; }
.site-chevron { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; color: var(--site-muted); vertical-align: middle; transition: transform .15s ease; }
details[open] > summary > .site-chevron { transform: rotate(180deg); }
.site-menu__panel, .site-picker__menu { position: absolute; left: -16px; top: calc(100% + 8px); min-width: 240px; max-height: min(70vh, 600px); overflow: auto; padding: 8px; background: white; border: 1px solid #bdb9b0; border-radius: 5px; box-shadow: 0 8px 20px #24242414; z-index: 80; }
.site-menu__panel a, .site-picker__menu a { display: block; padding: 11px 12px; border-radius: 3px; color: var(--site-link); font-size: 15px; }
.site-menu__panel a:hover, .site-picker__menu a:hover { background: var(--site-link-soft); }
.site-picker__menu [aria-current] { background: #f3f1eb; color: var(--site-ink); font-weight: 650; }
.site-menu__panel .site-menu__featured { margin-bottom: 6px; font-weight: 700; background: #f5f2eb; }
.site-menu__secondary { border-top: 1px solid var(--site-line); }
.site .site-nav__language-summary { color: var(--site-muted); border-color: transparent; border-radius: 4px; }
.site .site-nav__language-menu { background: #fff; }
.site-header .site-nav__language { position: static; }
.site-main { margin: 0; padding: 36px 32px 0; }
.site-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1120px; margin: 0 auto; align-items: start; }
.site-content { min-width: 0; }
.site .site-breadcrumbs { max-width: 100%; overflow: visible; }
.site .site-breadcrumbs ol { flex-wrap: wrap; gap: 6px 0; }
.site .site-breadcrumbs li { max-width: 100%; white-space: normal; }
.site .site-breadcrumbs li > svg { width: 14px; height: 14px; margin-inline: 6px; color: #8c8881; }
.site .page__container { width: 100%; max-width: none; padding: 0; margin: 0; }
.site--reference .site-grid, .site--editorial .site-grid, .site--utility .site-grid { max-width: 780px; }
.site--editorial .site-grid { max-width: 760px; }
.site--account .site-grid { max-width: 720px; }
.site .page__header { padding: 0 0 28px; text-align: left; }
.site .page__header > div { margin: 0; }
.site .page__header > div > div, .site .page__header .max-w-2xl { max-width: none; padding: 0; margin: 0; }
.site .page__header h1 { margin: 4px 0 14px; color: var(--site-ink); font-family: var(--site-display); font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -1.7px; font-weight: 800; line-height: 1.08; text-align: left; }
.site .page__header p { text-align: left; }
.site .page__header p.italic { font-family: inherit; color: var(--site-muted); font-size: 14px; font-weight: 500; font-style: normal; letter-spacing: 0; text-transform: none; margin-bottom: 12px; }
.site .page__header h1 + p { margin: 0; max-width: 720px; color: #4d4a45; font-size: 17px; line-height: 1.6; }
.quiz-stage { width: 100%; padding: 0; margin: 0; }
.quiz-switcher { display: flex; align-items: stretch; gap: 12px; margin: 0 0 18px; position: relative; z-index: 60; }
.site-picker { position: relative; min-width: 140px; }
.site-picker > summary { padding: 8px 32px 8px 12px; min-height: 52px; border: 1px solid #c8c4bb; border-radius: 4px; background: #fff; font-size: 14px; font-weight: 650; line-height: 1.3; }
.site-picker > summary { position: relative; }
.site-picker > summary > .site-chevron { position: absolute; right: 10px; top: calc(50% - 8px); }
.site-picker__label { display: block; font-size: 11px; font-weight: 400; margin-bottom: 3px; color: var(--site-muted); }
.site-picker__menu { left: 0; }
.quiz-switcher__formats { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--site-line); border-radius: 0; background: transparent; }
.quiz-switcher__formats a { display: grid; place-items: center; min-height: 40px; padding: 8px 12px; font-size: 14px; color: var(--site-link); border-bottom: 2px solid transparent; border-radius: 0; }
.quiz-switcher__formats [aria-current] { color: var(--site-ink); background: transparent; border-bottom-color: var(--site-ink); box-shadow: none; font-weight: 700; }
.quiz-switcher__all { margin-left: auto; align-self: center; font-size: 14px; }
.site-picker--more { min-width: 0; }
.site-picker--more > summary { height: 100%; display: flex; align-items: center; font-size: 14px; font-weight: 500; }
.context-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--site-line); font-size: 14px; }
.context-navigation > a { min-height: 36px; display: inline-flex; align-items: center; color: var(--site-link); }
.context-navigation > a:hover { text-decoration: underline; }
.context-navigation > [aria-current] { color: var(--site-ink); font-weight: 750; }
.context-navigation > .site-picker { margin-left: auto; z-index: 60; min-width: 0; }
.context-navigation > .site-picker > summary { min-height: 36px; font-size: 12px; font-weight: 400; }
.context-navigation .site-picker__menu { left: auto; right: 0; }

/* Reserve ad space before the provider loads. Games retain a 150px safety gap. */
.site-ad { display: none; width: 300px; color: #716d66; text-align: center; }
.site-ad--rail { position: sticky; top: 24px; padding-top: 2px; }
.site-ad__label { display: block; margin-bottom: 10px; color: var(--site-muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
.site-ad__space { width: 300px; min-height: 250px; background: #f3f1ec; border: 1px solid #e8e5de; }
.site-ad__space:has(ins) { border: 0; background: transparent; }
.site-ad__preview { display: grid; min-height: inherit; align-items: center; color: #77736c; font-size: 12px; }
.site-ad__remove { display: inline-block; padding: 12px; font-size: 13px; }
@media (min-width: 1120px) {
  .site--with-rail:not(.site--play) .site-grid { max-width: 1340px; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; }
  .site--with-rail:not(.site--play) .site-ad--rail { display: block; }
  .site--with-rail:is(.site--reference, .site--utility) .site-grid { max-width: 1144px; }
  .site--with-rail.site--editorial .site-grid { max-width: 1124px; }
}
@media (min-width: 1280px) {
  .site--with-rail.site--play .site-grid { max-width: 1456px; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 150px; }
  .site--with-rail.site--play .site-ad--rail { display: block; }
}
@media (min-height: 820px) { .site-ad--rail .site-ad__space { min-height: 600px; } }
@media (max-width: 1119px) { .site-ad--mobile { display: block; margin: 64px auto 24px; } }
@media (min-width: 1120px) and (max-width: 1279px) { .site--play .site-ad--mobile { display: block; margin: 150px auto 24px; } }

/* Play starts above the fold, without giving the ad rail room inside the board. */
.site .flagmatch-engine, .site .flagmatch-map-engine, .site .country-quiz { width: 100%; max-width: 100%; margin: 0; transform: none; }
/* Keep the deployed matching game's neutral board inside the new site shell. */
.site .flagmatch-engine .flagmatch-playfield { height: 570px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: none; }
.site .flagmatch-engine [data-game-target="tapToStart"], .site .flagmatch-map-start { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: #f5f2e9 !important; border-radius: 6px !important; }
.site .flagmatch-engine [data-game-target="tapToStart"].hidden { display: none; }
.site .flagmatch-start-band { position: relative; inset: auto; width: 100%; padding: 36px; gap: 18px; background: transparent; border: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.site .flagmatch-start-heading { color: var(--site-ink); font-family: var(--site-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; max-width: 330px; letter-spacing: -1.1px; }
.site .flagmatch-start-button { min-width: 164px; min-height: 52px; margin-top: 4px; padding: 14px 26px; border: 1px solid var(--site-action); border-radius: 4px; background: var(--site-action); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 2px 0 #164b82; }
.site .flagmatch-start-button:hover { background: var(--site-link-hover); }
.site .flagmatch-start-button:disabled { opacity: .6; transform: none; }
.site .flagmatch-preview-compass { display: none; }
.site .preview-compass { display: none; }
.site .flagmatch-engine [data-game-target="tapToStart"]::after, .site .flagmatch-map-start::after { content: none; }
.site .flagmatch-start-button:hover:not(:disabled) { background: #164b82; }
.site .flagmatch-start-button:focus-visible { outline-color: #2873ac; }
/* Show the actual subject of the quiz, without a decorative backdrop. */
.site .flagmatch-engine [data-game-target="tapToStart"]::before, .site .flagmatch-map-start::before { display: none; }
.site .flagmatch-engine [data-game-target="tapToStart"] > .relative { order: 1; width: 100%; min-width: 0; }
.site .flagmatch-map-start__band { order: 1; width: 100%; min-width: 0; }
.site .quiz-preview { order: 2; position: static; min-width: 0; padding: 24px 32px 24px 0; pointer-events: none; user-select: none; }
.quiz-preview__pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.quiz-preview__card { min-height: 68px; display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid #d1d5db; border-bottom: 3px solid #cbd5e1; border-radius: 8px; background: #fff; color: #3f3f46; font-size: 15px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.quiz-preview__card--flag { font-size: 32px; }
.quiz-preview__card img { width: auto; height: auto; max-width: 64px; max-height: 40px; object-fit: contain; }
.quiz-preview__card--placeholder::after { content: ""; width: 60%; max-width: 80px; height: 10px; border-radius: 2px; background: #e8e7e2; }
.quiz-preview--flags .quiz-preview__card--placeholder:nth-child(even)::after { width: 46px; height: 30px; }
.quiz-preview--map img { width: 100%; height: auto; }
.site .flagmatch-engine:not(.flagmatch-engine--playing) .flagmatch-playfield { height: 340px !important; min-height: 340px; }
.site .flagmatch-map-engine:not(.flagmatch-map-engine--playing) .flagmatch-map-stage { height: 340px; min-height: 340px; }
.site .flagmatch-engine [data-game-target="tapToStart"] > .relative, .site .flagmatch-map-start__band { z-index: 2; }
.site .flagmatch-button { border: 1px solid #bdb9b0; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--site-ink) !important; font-family: inherit; font-size: 14px; font-weight: 650; box-shadow: none; }
.site .flagmatch-button--full { height: auto; padding-block: 12px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.site .flagmatch-button--cyan { background: var(--site-action); color: #fff !important; border-color: var(--site-action); }
.site .flagmatch-button--cyan:hover:not(:disabled) { background: #164b82; }
.site .flagmatch-map-stage { border-radius: 6px; }
.site .flagmatch-map-engine { padding: 16px; border: 1px solid var(--site-line); border-radius: 6px; background: #fff; }
.site .flagmatch-map-hud { margin-top: 0; }
.site .flagmatch-map-start { justify-content: flex-start; }
.site .flagmatch-map-start.hidden { display: none; }
.site .flagmatch-map-start__band { margin: 0; }
.site .flagmatch-map-start__band .number { color: var(--site-ink); font-family: var(--site-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; }
.site .flagmatch-map-engine:not(.flagmatch-map-engine--playing) > :is(.flagmatch-map-hud, .flagmatch-map-taskbar, .flagmatch-map-controlbar, .flagmatch-map-clue) { display: none; }
.site .flagmatch-map-engine:not(.flagmatch-map-engine--playing) { padding: 0; }
.site .flagmatch-map-engine:not(.flagmatch-map-engine--playing) .flagmatch-map-stage { margin: 0; border: 0; }
.quiz-load-error { padding: 8px 16px; color: #8e3023; font-size: 14px; max-width: 380px; }
.quiz-icon-button { min-height: 40px; min-width: 40px; display: inline-grid; place-items: center; border-radius: 6px; }
.quiz-icon-button:hover { background: #f0ede5; }
.flagmatch-engine .quiz-icon-button:hover { background: #f3f4f6; }
.site .flagmatch-country-quiz { width: 100%; max-width: none; margin: 0; transform: none; border: 1px solid var(--site-line); border-radius: 6px; background: white; box-shadow: none; }
.quiz-top-players { margin: 0; min-height: 90px; }
.quiz-podium { padding: 24px 0; border-bottom: 1px solid var(--site-line); }
.quiz-podium h2 { font-size: 16px; font-weight: 650; line-height: 1.5; }
.quiz-podium__empty { margin-top: 8px; color: var(--site-muted); font-size: 15px; line-height: 1.6; }
.quiz-podium__players { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.quiz-podium__players li { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.quiz-podium__rank, .quiz-podium__vacant { color: var(--site-muted); font-size: 13px; }
.quiz-podium__player { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.quiz-podium__players time { font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .quiz-podium__players { grid-template-columns: 1fr; gap: 14px; }
  .quiz-podium__players li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
}
.site .quiz-editorial { width: 100%; max-width: var(--site-measure); margin: var(--site-section-gap) 0 0; padding: 0; }
.site .quiz-editorial h2 { font-family: var(--site-display); font-size: var(--site-section-title); line-height: 1.15; font-weight: 750; letter-spacing: -.7px; }
.site .quiz-editorial p { color: #45433f; }
.site .quiz-editorial section { margin: 40px 0 0; padding: 0; border: 0; max-width: none; }
.site .quiz-editorial section:first-child { margin-top: 0; }
.site .quiz-editorial section > * + * { margin-top: 16px; }
.site .quiz-editorial h2 { padding-top: 0; }
.site .quiz-editorial li { color: #45433f; }
.site .quiz-editorial section:first-child > ul { gap: 0 28px; }
.site .quiz-editorial section:first-child > ul > li { margin: 0; color: #4d4a45; font-family: var(--site-display); font-size: 15px; line-height: 1.7; }
.site .quiz-editorial section:first-child > ul > li > strong:first-child { font-family: var(--site-display); font-size: 18px; font-weight: 700; line-height: 1.4; }
.next-practice { margin-top: 28px; padding: 24px 0; border-block: 1px solid var(--site-line); }
.site-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--site-muted); }
.next-practice h2 { margin: 0 0 16px; font-family: var(--site-display); font-size: 22px; line-height: 1.3; letter-spacing: -.4px; font-weight: 750; }
.next-practice__links { display: flex; flex-wrap: wrap; gap: 10px; }
.next-practice__links a { display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; max-width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #c8c4bb; border-radius: 4px; background: #fff; color: var(--site-link); font-size: 16px; font-weight: 650; line-height: 1.4; text-decoration: none; }
.next-practice__links a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.next-practice__links a > span:last-child { flex-shrink: 0; }
.next-practice__links a:hover { border-color: var(--site-link); background: var(--site-link-soft); color: var(--site-link-hover); }
.quiz-resources { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.quiz-resources a { display: inline-flex; align-items: center; min-height: 36px; }
.practice-progress { padding: 10px 14px; margin-bottom: 20px; background: #f1eee4; border-left: 3px solid #c6b57a; border-radius: 0; font-size: 15px; }
.recent-practice { font-size: 13px; margin-bottom: 16px; }
.sister-game { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 24px; padding: 20px; background: var(--site-accent); border-radius: 4px; }
.sister-game[hidden] { display: none; }
.sister-game__logo { display: block; width: 48px; height: 48px; border-radius: 8px; }
.site .sister-game p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--site-muted); }
.site .sister-game .sister-game__eyebrow { margin-bottom: 4px; font-size: 13px; font-weight: 650; color: var(--site-ink); }
.sister-game__copy { min-width: 0; }
.sister-game__copy strong { color: var(--site-ink); font-weight: 650; }
.site .sister-game__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 650; text-decoration: none; }
.sister-game__link:hover > span:first-child { text-decoration: underline; }
@media (max-width: 600px) {
  .sister-game { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; padding: 16px; }
  .sister-game__logo { width: 40px; height: 40px; align-self: start; }
  .sister-game__link { grid-column: 2; justify-self: start; }
}
.quiz-result-next { display: inline-block; margin-top: 16px; padding: 10px 18px; color: #fff; font-size: 14px; }
/* Completed rounds grow with their actions and offers instead of clipping them. */
.site .flagmatch-engine:has([data-victory-target="overlay"]:not(.hidden)) .flagmatch-playfield { height: auto !important; min-height: 0; }
.site .flagmatch-engine .flagmatch-playfield > [data-victory-target="overlay"]:not(.hidden) { position: relative !important; inset: auto !important; padding: 16px; }
.site .flagmatch-engine:has([data-victory-target="overlay"]:not(.hidden)) [data-game-target="tapToStart"] { display: none; }
.site .flagmatch-map-stage:has(.flagmatch-map-result:not(.hidden)) { min-height: 0; }
.site .flagmatch-map-result:not(.hidden) { position: relative; inset: auto; padding: 16px; }
.site .flagmatch-country-quiz__result:not(.hidden) { position: relative; inset: auto; }
.site .flagmatch-country-quiz:has(.flagmatch-country-quiz__result:not(.hidden)) .flagmatch-country-quiz__groups { display: none; }
.site--catalogue .page__container > div > .max-w-3xl:first-child { max-width: none; margin-inline: 0; }

/* The reference library keeps full articles and visible, contextual onward links. */
.site--reference .page__container > div, .site--utility .page__container > div { padding-inline: 0; max-width: 780px; margin-inline: auto; }
.site--reference .page__container h1, .site--utility .page__container h1, .site--collection .page__container h1 { font-family: var(--site-display); font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; text-align: left; margin-block: 20px; }
.reference-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 0 16px; }
.reference-hero > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.reference-hero__image { width: 200px; flex: 0 0 200px; }
.reference-hero__image img { display: block; max-width: 100%; height: auto; max-height: 150px; object-fit: contain; border: 1px solid #d9d6ce; border-radius: 3px; }
.reference-hero h1 { margin-top: 8px !important; }
.reference-hero__intro { color: #4d4a45; font-size: 17px; line-height: 1.65; }
.site .state-reference .flagmatch-us-states-cta { margin-left: 0; }
.site .state-reference .flagmatch-us-states-cta__description { text-align: left; }
.site .state-reference__article { max-width: var(--site-measure); margin: var(--site-section-gap) 0 0; }
.reference-hero__action { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--site-link); font-size: 16px; font-weight: 600; }
.reference-emoji-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.article-contents { margin-block: 24px; padding: 16px 0; border-block: 1px solid var(--site-line); border-radius: 0; background: transparent; }
.article-contents summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
.article-contents summary::-webkit-details-marker { display: none; }
.article-contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; margin-top: 10px; padding: 0; list-style: none; }
.article-contents li { min-width: 0; font-size: 15px; }
.article-contents a { display: block; padding-block: 7px; line-height: 1.5; }
.article-contents a:hover { text-decoration: underline; }
.site .flagmatch-study-content { font-family: var(--site-reading); font-size: 17px; line-height: 1.7; color: #33312e; }
.site .flagmatch-study-content h2 { font-family: var(--site-display); font-size: var(--site-section-title); font-weight: 750; line-height: 1.18; margin-top: 40px; scroll-margin-top: 24px; color: var(--site-ink); }
.site .flagmatch-study-content h3 { font-family: var(--site-display); font-size: 21px; font-weight: 700; margin-top: 28px; }
.site .flagmatch-study-content p { line-height: 1.7; }
.site .flagmatch-study-content img { border-radius: 2px; }
.site .article-illustration { margin: 24px 0; }
.site .article-illustration img { display: block; width: 100%; height: auto; }
.article-illustration figcaption { margin-top: 10px; color: var(--site-muted); font-size: 13px; line-height: 1.6; }
.site .capital-article > img:first-child, .site .capital-article > figure:first-child img { display: block; width: 100%; height: auto; }
.site .capital-article > figure:first-child { margin-inline: 0; }
.site .flagmatch-study-content table { font-family: var(--site-display); font-size: 15px; border: 1px solid var(--site-line); background: #fff; }
.site .flagmatch-study-content td, .site .flagmatch-study-content th { border-color: var(--site-line); padding: 12px; }
.site .flagmatch-study-content a { color: var(--site-link); }
.site .flagmatch-study-content a:hover { color: var(--site-link-hover); text-decoration-color: currentColor; }
.site .flagmatch-study-content a.bg-sky-500.text-white { min-height: 46px; padding: 12px 18px !important; border: 1px solid var(--site-action); border-radius: 4px; background: var(--site-action) !important; color: #fff !important; font-family: var(--site-display); font-size: 15px; font-weight: 600 !important; line-height: 1.4; text-decoration: none; }
.site .flagmatch-study-content a.bg-sky-500.text-white:hover { background: #164b82 !important; }
.site .flagmatch-study-content a.bg-sky-500.text-white:active { border-bottom-width: 1px; }
.reference-pagination { margin-top: var(--site-section-gap); padding-top: 24px; border-top: 1px solid var(--site-line); }
.site .reference-pagination h2 { margin: 0; padding: 0; font-family: var(--site-display); font-size: 22px; font-weight: 750; line-height: 1.3; letter-spacing: -.4px; }
.reference-pagination__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.reference-pagination__grid--flags { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
.reference-pagination__grid > li { min-width: 0; }
.site .reference-pagination__link { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 12px; border-radius: 4px; text-decoration: none; }
.reference-pagination__link:hover { background: var(--site-link-soft); }
.reference-pagination__flag { display: flex; align-items: center; justify-content: center; height: 116px; }
.reference-pagination__flag img { width: auto; height: auto; max-width: 100%; max-height: 100%; border: 1px solid var(--site-line); border-radius: 0; }
.reference-pagination__name { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.reference-pagination__grid--flags .reference-pagination__name { text-align: center; }
.reference-pagination__landscape { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.reference-pagination__placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--site-accent); color: var(--site-muted); font-size: 24px; font-weight: 650; border-radius: 2px; }
.site--collection .page__container, .site--catalogue .page__container { max-width: none; }
.site--collection .page__container > div, .site--catalogue [data-geography-quiz-hub] { max-width: none; padding-inline: 0; }

/* The shell owns horizontal spacing. Sections own reading width and rhythm. */
.site .content-page { width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; }
.site .content-intro, .site .collection-heading { max-width: var(--site-measure); margin-inline: 0; text-align: left; font-size: 17px; line-height: 1.7; }
.site .content-intro > p + p { margin-top: 16px; }
.site .collection-heading > p { font-size: 17px; line-height: 1.7; }
.site .reading-section { max-width: var(--site-measure); margin: var(--site-section-gap) 0 0; padding: 0; text-align: left; font-size: 17px; line-height: 1.7; }
.site .reading-section > * + * { margin-top: 16px; }
.site .directory-section { margin: var(--site-section-gap) 0 0; padding: 28px 0 0; border-top: 1px solid var(--site-line); text-align: left; }
.site :is(.reading-section, .directory-section) h2 { margin: 0; padding: 0; font-family: var(--site-display); font-size: 28px; font-weight: 750; letter-spacing: -.6px; line-height: 1.2; }
.site :is(.reading-section, .directory-section) h3 { font-family: var(--site-display); font-size: 18px; font-weight: 700; line-height: 1.4; }
.site .directory-section > p { max-width: var(--site-measure); font-size: 17px; line-height: 1.7; }
.site .directory-section > .content-intro > p { margin-top: 14px; }
.site .reading-section ul.list-disc, .site .reading-section ol.list-disc { padding-left: 24px; }
.resource-grid, .practice-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 24px; }
.site .resource-grid > :is(li, section), .site .practice-steps > li { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--site-line); border-radius: 0; background: transparent; }
.site .resource-grid > li:hover { background: transparent; }
.site .resource-grid > li > a, .resource-link__title { font-size: 18px; font-weight: 650; line-height: 1.4; }
.site .resource-grid > li > p, .resource-link__description { margin-top: 8px; color: var(--site-muted); font-size: 15px; font-weight: 400; line-height: 1.65; }
.site .resource-grid > section > p { margin-top: 10px; font-size: 15px; line-height: 1.65; }
.site .resource-grid > section > ul { margin-top: 18px; }
.site .resource-grid > section > ul > li + li { margin-top: 18px; }
.site .resource-grid > section > ul p { margin-top: 6px; color: var(--site-muted); font-size: 15px; line-height: 1.65; }
.site .practice-steps > li { display: flex; flex-direction: column; gap: 10px; }
.site .practice-steps > li > * { margin: 0; }
.site .practice-steps > li > p:first-child { color: var(--site-muted); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.site .practice-steps > li > p { color: #4d4a45; font-size: 15px; line-height: 1.65; }
.site .practice-steps > li > p:last-child { margin-top: auto; padding-top: 4px; }
.site .practice-steps a { font-size: 15px; text-decoration: none; }
.site .practice-steps a:is(:hover, :focus-visible) { text-decoration: underline; }
.site [data-quiz-hub-faq] > div { margin-top: 24px; }
.site [data-quiz-hub-faq] article { padding: 20px 0; border-top: 1px solid var(--site-line); }
.site [data-quiz-hub-faq] article + article { margin-top: 0; }
.site [data-quiz-hub-faq] article p { font-size: 16px; line-height: 1.7; color: #4d4a45; }
.table-scroll { max-width: 100%; margin-top: 24px; overflow-x: auto; }
.site .data-table { width: 100%; border-collapse: collapse; font-family: var(--site-display); font-size: 15px; line-height: 1.5; }
.site .data-table thead { background: var(--site-accent); color: var(--site-ink); }
.site thead { background: var(--site-accent); }
.site .data-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--site-line); text-align: left; vertical-align: top; }
.site .data-table th { font-weight: 650; }
.format-table { min-width: 640px; }
.format-table th:first-child { width: 18%; }
.format-table td:last-child { width: 22%; }
.facts-table { table-layout: fixed; }
.facts-table th { width: 36%; }
.facts-table :is(th, td) { overflow-wrap: anywhere; }
.states-table { table-layout: fixed; }
.states-table__state { width: 44%; }
.states-table__abbreviation { width: 24%; }
.states-table__capital { width: 32%; }
.states-table__name { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
.states-table__flag { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 30px; padding: 2px; border: 1px solid #e5e7eb; border-radius: 3px; background: #fff; }
.states-table__label-short { display: none; }
.site .states-table :is(th, td) { vertical-align: middle; }
.site .states-table a { display: inline-flex; align-items: center; gap: 10px; }
.state-practice-links { margin-top: 24px; }
.site .resource-grid .resource-link { display: block; text-decoration: none; }
.site .resource-grid .resource-link:is(:hover, :focus-visible):not(:has(.resource-link__title)), .resource-link:is(:hover, :focus-visible) .resource-link__title { text-decoration: underline; }
.resource-link__title, .resource-link__description { display: block; }
.site .collection-heading .flagmatch-us-states-cta { margin-inline: 0; max-width: 480px; text-align: left; }
.site .collection-heading .flagmatch-us-states-cta__description { text-align: left; }
.state-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-top: 24px; }
.state-library-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 0; border-bottom: 1px solid var(--site-line); text-decoration: none; }
.state-library-card__flag { display: flex; flex: 0 0 64px; align-items: center; justify-content: center; width: 64px; height: 48px; }
.state-library-card__flag img { width: auto; height: auto; max-width: 64px; max-height: 48px; }
.state-library-card > span:last-child { min-width: 0; }
.state-library-card:is(:hover, :focus-visible) > span:last-child > span:first-child { text-decoration: underline; }
.state-library-card > span:last-child > span:last-child { margin-top: 6px; color: var(--site-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .state-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .site { --site-section-gap: 36px; --site-section-title: 25px; }
  .resource-grid, .practice-steps, .state-library-grid { grid-template-columns: 1fr; gap: 20px; }
  .site :is(.reading-section, .directory-section) h2 { font-size: 25px; }
  .site .directory-section { padding-top: 24px; }
  .site .data-table :is(th, td) { padding: 12px; }
}
@media (max-width: 600px) {
  .site .states-table { font-size: 14px; }
  .states-table__state { width: 50%; }
  .states-table__abbreviation { width: 16%; }
  .states-table__capital { width: 34%; }
  .site .states-table :is(th, td) { padding: 12px 6px; }
  .site .states-table th { font-size: 12px; }
  .site .states-table a { gap: 6px; }
  .states-table__flag { flex-basis: 28px; width: 28px; height: 22px; padding: 1px; }
  .states-table__label-short { display: inline; }
  .states-table__label-full { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.catalogue-tools { padding: 22px 0; margin: 28px 0; border-block: 1px solid var(--site-line); border-radius: 0; background: transparent; }
.catalogue-tools.library-tools { margin-top: 0; padding-top: 0; border-top: 0; }
.catalogue-search { display: block; color: var(--site-ink); font-size: 16px; font-weight: 650; }
.catalogue-search input { display: block; width: 100%; min-height: 48px; margin-top: 10px; padding: 12px 14px; border: 1px solid #aaa59b; border-radius: 4px; background: #fff; color: var(--site-ink); font-size: 16px; font-weight: 400; }
.catalogue-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.catalogue-filters button { min-height: 40px; padding: 7px 14px; font-size: 14px; border: 1px solid #c8c4bb; border-radius: 4px; background: transparent; }
.catalogue-filters button[aria-pressed="true"] { background: var(--site-ink); border-color: var(--site-ink); color: white; }
.catalogue-status { margin: 14px 0 0; font-size: 14px; color: var(--site-muted); }
.catalogue-empty { padding: 24px; text-align: center; }
.catalogue-empty button { margin-top: 12px; text-decoration: underline; }
.catalogue-section { margin-block: 44px; }
.site .catalogue-section h2 { font-family: var(--site-display); font-size: var(--site-section-title); line-height: 1.15; letter-spacing: -.7px; font-weight: 750; }
.catalogue-section > div > p { color: #4d4a45; font-size: 16px; line-height: 1.6; }
.catalogue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 24px; }
.site [data-geography-quiz-hub] .catalogue-grid > li, .site [data-geography-quiz-hub] .catalogue-grid > li:hover { padding: 0; border: 0; border-radius: 0; background: transparent; }
.catalogue-card { height: 100%; display: flex; flex-direction: column; padding: 22px 0; border-top: 1px solid var(--site-line); border-radius: 0; background: transparent; text-decoration: none; }
.catalogue-card:hover { color: var(--site-link-hover); border-color: var(--site-link); }
.catalogue-card__title { display: flex; justify-content: space-between; gap: 14px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.catalogue-card__title > span { flex-shrink: 0; }
.catalogue-card__description { color: #55514b; font-size: 15px; line-height: 1.6; margin-top: 10px; }
.catalogue-reading { margin-top: var(--site-section-gap); }
.library-regions { margin: 0 0 24px; }
.library-regions ul { gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.library-regions a, .library-regions span { font-size: 14px; text-transform: none; }
.library-regions a { text-decoration: none; }
.library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.library-card { border: 0; border-bottom: 1px solid var(--site-line); border-radius: 0; background: transparent; overflow: hidden; }
.library-card > a { display: block; padding: 20px 12px; color: var(--site-link); }
.library-grid--flags { gap: 24px 16px; }
.library-card--flag { border: 0; overflow: visible; }
.site .library-card--flag > a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 16px 12px; border-radius: 4px; text-align: center; text-decoration: none; }
.site .library-card--flag > a:hover { background: var(--site-link-soft); }
.site .library-card--flag .flag-index__thumbnail { height: 116px; background: transparent; border-radius: 0; }
.site .library-card--flag .flag-index__thumbnail-image { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--site-line); border-radius: 0; }
.library-card__name { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.library-grid--capitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.library-card--capital { display: flex; align-items: center; gap: 12px; padding: 18px; }
.library-card--capital a { font-size: 16px; font-weight: 600; }
.library-card--capital .text-xs { display: block; margin-top: 4px; color: var(--site-muted); }
.site--leaderboard .page__container { max-width: 100%; }
.site--leaderboard .page__container > div { max-width: none; }
.site--leaderboard [data-geography-quiz-leaderboards-hub] { padding-inline: 0; }
.site--leaderboard [data-geography-quiz-leaderboards-hub] > .max-w-3xl { margin-inline: 0; max-width: 720px; }
.site--leaderboard .page__container > table { font-size: 15px; font-variant-numeric: tabular-nums; }
.site--leaderboard .page__container > table :is(th, td) { padding-block: 12px; border-bottom: 1px solid var(--site-line); }
.site--leaderboard .page__container > table thead { background: var(--site-accent); color: var(--site-ink); }
.site--leaderboard .page__container > table tr.bg-yellow-100 { background: #faf3d9; }
.site--leaderboard .page__container > table tr.bg-slate-100 { background: #f0f1f3; }
.site--leaderboard .page__container > table tr.bg-orange-100 { background: #f6ece2; }
.site--leaderboard .page__container > table tr.bg-neutral-100 { background: transparent; }
.site--account .page__container { background: white; border: 1px solid var(--site-line); border-radius: 6px; padding: 32px; }
.site--account input { border-radius: 7px; }
.site .site-footer { margin: 72px 0 0; padding: 40px 32px 24px; background: #f5f2eb; color: var(--site-ink); border-top: 1px solid #c8c4bb; }
.site-footer__intro { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: 1400px; margin: 0 auto 32px; padding-bottom: 24px; border-bottom: 1px solid #d9d6ce; }
.site-footer__quicklinks { display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 14px; }
.site-footer__quicklinks a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer__directory { max-width: 1400px; margin: auto; }
.site .site-footer a { color: var(--site-link); }
.site .site-footer a:hover { color: var(--site-link-hover); text-decoration: underline; }
.site .footer-masonry { max-width: none; columns: auto; display: flex; flex-direction: column; gap: 32px; }
.site-footer__quiz-links, .site-footer__state-links, .site-footer__resource-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 28px; }
.site-footer__resource-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site .footer-masonry__item--states, .site-footer__resource-links { padding-top: 24px; border-top: 1px solid var(--site-line); }
.site .footer-masonry__item { margin: 0; }
.site .footer-masonry__item ul { margin-top: 12px; }
.site .footer-masonry__item li + li { margin-top: 8px; }
.site .footer-masonry__item a, .site .footer-masonry__item li > span { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.site .footer-masonry__item li > span { color: var(--site-muted); }
.site .footer-masonry__item h3 { padding-bottom: 0; border: 0; font-family: inherit; font-size: 15px; font-weight: 750; color: var(--site-ink); }
.site .footer-masonry__item h3 a { font: inherit; }
.site-footer__bottom { max-width: 1400px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid #d9d6ce; }
.site-footer__utility { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.site .site-footer__languages h3 { margin: 0 0 8px; padding: 0; border: 0; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; }
.site .site-footer__languages ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.site .site-footer__languages li { margin: 0; }
.site-footer__languages a { display: inline-block; padding-block: 6px; font-size: 13px; }
.site .site-footer__languages a[aria-current] { color: var(--site-ink); }
.site-footer__social ul { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__social a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid #d9d6ce; border-radius: 50%; background: #fffefa; }
.site-footer__social a:hover { background: var(--site-link-soft); border-color: #8eafd1; }
.site .footer-copyright { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border: 0; padding-top: 24px; font-size: 12px; color: var(--site-muted); text-align: left; }
.site .footer-copyright p { margin: 0; }
.site .footer-maker { font-size: 14px; line-height: 1.9; }
.site .footer-maker__link { display: inline-block; margin-inline: 3px; vertical-align: baseline; text-decoration: none; }
.footer-maker__logo { display: block; width: auto; height: 14px; }
.footer-maker__link:hover { opacity: .65; }

/* A single check style keeps wrapped benefit lists aligned across paid offers. */
.site :is(.flagmatch-check-list, .flagmatch-plan-card__perks) li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--site-ink); line-height: 1.6; }
.site :is(.flagmatch-check-list, .flagmatch-plan-card__perks) .site-check { width: 20px; height: 20px; margin-top: 2px; color: #347342; background: transparent; border-radius: 0; }
.site .flagmatch-plan-card__perks { gap: 10px; font-weight: 500; }
.site .flagmatch-plan-card { border: 1px solid #c8c4bb; border-radius: 6px; background: #fff; box-shadow: none; }
.site .flagmatch-plan-card--yearly { border: 2px solid var(--site-link); background: #fff; }

/* Rank and time keep their columns; long names wrap on narrow screens. */
@media (max-width: 639px) {
  .site--leaderboard .page__container > table { table-layout: fixed; font-size: 14px; }
  .site--leaderboard .page__container > table th:first-child { width: 32px; }
  .site--leaderboard .page__container > table th:nth-child(2) { width: 36px; }
  .site--leaderboard .page__container > table th:last-child { width: 100px; }
  .site--leaderboard .page__container > table :is(th, td):last-child { text-align: right; }
  .site--leaderboard .page__container > table td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
  .site--leaderboard .page__container > table td:nth-child(3) .inline-block { min-width: 0; }
  .site--leaderboard .page__container > table td:nth-child(3) .w-5 { flex-shrink: 0; }
}

@media (max-width: 900px) {
  .site-header__inner { gap: 4px 20px; padding: 10px 20px 0; flex-wrap: wrap; }
  .site-header__nav { order: 3; flex: 0 0 100%; gap: 24px; }
  .site-header__ad-free { margin-left: auto; }
  .site-header__premium { display: none; }
  .site-main { padding: 24px 20px 0; }
  .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-grid--capitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__quiz-links, .site-footer__state-links, .site-footer__resource-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .site-header__inner { padding: 10px 16px 0; min-height: 92px; flex-wrap: wrap; gap: 4px 16px; }
  .site-brand img { height: 36px; }
  .site-header__account { gap: 12px; }
  .site-header__nav { justify-content: flex-start; gap: 12px; }
  .site-header__ad-free { max-width: 100px; padding: 0; font-size: 13px; }
  .site-header__link, .site-menu > summary { font-size: 14px; min-height: 42px; }
  .site-sign-in { font-size: 12px; }
  .site-menu__panel { top: calc(100% + 1px); min-width: 220px; }
  .site-header__nav .site-menu:last-of-type .site-menu__panel { left: auto; right: -60px; }
  .site-main { padding: 20px 16px 0; }
  .site .page__header { padding-bottom: 16px; }
  .site .page__header h1 { font-size: 34px; letter-spacing: -1px; }
  .site .page__header h1 + p { font-size: 15px; line-height: 1.55; }
  .site .page__header p.italic { font-size: 9px; }
  .site--play .page__header p.italic { display: none; }
  .quiz-switcher { gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .site-picker { min-width: 0; flex: 1; }
  .site-picker { flex-basis: calc(50% - 6px); }
  .site-picker--more { flex: 0 0 auto; }
  .site-picker--more > summary { min-height: 40px; }
  .context-navigation .site-picker { flex: 0 0 auto; }
  .site-picker > summary { padding-left: 10px; font-size: 12px; min-height: 46px; }
  .site-picker__menu { min-width: 210px; max-width: calc(100vw - 32px); }
  .site-picker:nth-child(2) .site-picker__menu { left: auto; right: 0; }
  .site-picker--more .site-picker__menu { left: auto; right: 0; }
  .quiz-switcher__formats { padding: 2px; }
  .quiz-switcher__formats a { min-height: 40px; padding: 5px 10px; font-size: 13px; }
  .quiz-switcher__all { font-size: 13px; }
  .site .flagmatch-engine .flagmatch-playfield { height: 550px; border-radius: 11px; }
  .site .flagmatch-start-band { padding: 24px; gap: 12px; text-align: center; align-items: center; }
  .site .flagmatch-engine [data-game-target="tapToStart"] > .relative { align-items: center; }
  .site .flagmatch-start-heading { font-size: 30px; max-width: 300px; }
  .site .flagmatch-start-button { min-height: 50px; }
  .site .flagmatch-map-engine { padding: 10px; }
  .next-practice { padding-block: 20px; }
  .reference-hero { gap: 18px; }
  .reference-hero__image { width: 100px; flex-basis: 100px; }
  .reference-hero__image img { max-height: 90px; }
  .site--reference .page__container h1 { font-size: 34px; }
  .site .flagmatch-study-content h2 { font-size: var(--site-section-title); }
  .article-contents ol { grid-template-columns: 1fr; }
  .reference-pagination__grid { gap: 16px 8px; }
  .reference-pagination__grid--flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .reference-pagination__link { padding: 8px; }
  .reference-pagination__flag { height: 80px; }
  .reference-pagination__name { font-size: 14px; }
  .catalogue-tools { padding: 20px 0; }
  .catalogue-card { padding: 20px 0; }
  .catalogue-card__title { font-size: 20px; }
  .catalogue-card__description { font-size: 15px; }
  .catalogue-grid { grid-template-columns: 1fr; gap: 0; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .library-card > a { padding: 12px; }
  .library-grid--flags { gap: 16px 8px; }
  .site .library-card--flag > a { gap: 12px; padding: 12px 8px; }
  .site .library-card--flag .flag-index__thumbnail { height: 80px; }
  .library-card__name { font-size: 14px; }
  .library-card--capital { padding: 14px; gap: 8px; }
  .site .site-footer { padding: 24px 16px; }
  .site-footer__intro { align-items: flex-start; flex-direction: column; }
  .site-footer__quicklinks { gap: 16px; }
  .site-footer__quiz-links, .site-footer__state-links, .site-footer__resource-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .site--account .page__container { padding: 20px 16px; }
}
@media (max-width: 360px) { .catalogue-grid { grid-template-columns: 1fr; } .site-header__inner { padding-inline: 12px; } .site-main { padding-inline: 12px; } }
@media (max-width: 600px) and (max-height: 700px) {
  .site .flagmatch-engine [data-game-target="tapToStart"] > .relative { align-items: flex-start; }
  .site .flagmatch-map-start { align-items: flex-start; }
}
/* Preserve a requested creative across viewport changes; never refresh on resize. */
.site-ad--requested { display: block; }
.site[data-display-ad-requested="mobile"] .site-grid { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.site[data-display-ad-requested="mobile"] .site-ad--rail { display: none; }
.site[data-display-ad-requested="mobile"] .site-ad--mobile { display: block; margin: 64px auto 24px; }
@media (max-width: 1119px) {
  .site-ad--rail.site-ad--requested { position: static; margin: 64px auto 24px; }
}
@media (max-width: 1279px) {
  .site--play .site-ad--rail.site-ad--requested { position: static; margin: 150px auto 24px; }
}
@media (hover: none), (pointer: coarse), (max-height: 700px) {
  .site-ad--rail { position: static; }
}
@media (prefers-reduced-motion: reduce) { .site *, .site *::before, .site *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

.site .flagmatch-country-quiz__retry { margin: 8px 14px; }

/* The HTML fallback must fit every answer when WebGL is unavailable. */
.site .flagmatch-engine--playing:not(.flagmatch-engine--webgl-board) .flagmatch-playfield { height: auto !important; min-height: 0; padding: 16px; }
.site .flagmatch-engine:not(.flagmatch-engine--webgl-board) .flagmatch-board { margin-bottom: 16px !important; }
.site .flagmatch-engine:not(.flagmatch-engine--webgl-board) .flagmatch-tile { height: auto !important; min-height: 72px; padding: 12px !important; }

.quiz-save-status { margin: 0 0 14px; color: #fff; font-size: 14px; line-height: 1.5; }


/* Reading text shares the interface family, with a consistent size and rhythm. */
.site .quiz-editorial :is(p, li), .site--editorial .page__container > div { font-size: 17px; line-height: 1.7; }
.site .quiz-editorial :is(p, li) { font-family: var(--site-reading); }
.site .quiz-editorial > div { padding-inline: 0; }
.site .quiz-faq { max-width: var(--site-measure); margin: var(--site-section-gap) 0 0; padding: 0; }
.site .quiz-faq__shell { max-width: none; }
.site .quiz-faq__shell > h2 { font-family: var(--site-display); font-size: var(--site-section-title); font-weight: 750; }
.site .quiz-faq__entry { border-color: var(--site-line); }
.site .quiz-faq__entry h3 { font-family: var(--site-display); font-size: 18px; font-weight: 700; }
.site .quiz-faq__entry p { font-size: 16px; color: #4d4a45; }
.site--editorial .page__container > div { max-width: 760px; padding-inline: 0; margin-inline: auto; }
.site--editorial .site-content { max-width: 760px; }
.site--editorial .page__container > div > .max-w-2xl { max-width: none; margin-inline: 0; }
.site--editorial .page__container a.bg-sky-500.text-white { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 4px; background: var(--site-action); color: #fff; font-family: var(--site-display); font-size: 16px; font-weight: 650; text-decoration: none; }
.site--editorial .page__container a.bg-sky-500.text-white:hover { background: var(--site-link-hover); }
.site--editorial .page__container h2 { font-family: var(--site-display); font-weight: 750; font-size: 26px; line-height: 1.2; letter-spacing: -.5px; }
.site .offer-intro { max-width: none; text-align: left; }
.site .offer-intro > p:first-child, .site .offer-lead { text-align: left; font-size: 23px; line-height: 1.4; font-weight: 700; }
.site .offer-copy { max-width: none; }
.site .offer-details > * + * { margin-top: 20px; }
.site .offer-details > section { margin-top: 32px; }
.site .offer-details > section:first-child { margin-top: 0; }
.site .offer-details > section:not(.premium-plan-grid) > * + * { margin-top: 16px; }
.site .offer-details h2 { padding-top: 0; }
.site .premium-plan-grid { gap: 20px; }
.site .offer-checkout { justify-content: flex-start; padding-block: 8px; }
.site .ad-free-cta--page { border-color: var(--site-action); border-radius: 4px; background: var(--site-action); color: #fff !important; font-size: 16px; }
.site .ad-free-cta--page:hover:not(:disabled) { background: var(--site-link-hover); }
.site .premium-page-badge { display: inline-flex; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--site-muted); box-shadow: none; }
.site .flagmatch-plan-card__heading { gap: 0; }
.site .flagmatch-plan-card__icon { display: none; }
.site .flagmatch-plan-card__price { color: var(--site-ink); font-family: var(--site-display); font-size: 36px; letter-spacing: -1px; font-weight: 800; }
.site .premium-feature { padding: 16px 0; border: 0; border-top: 1px solid var(--site-line); border-radius: 0; background: transparent; }
.site .flagmatch-country-quiz__toolbar, .site .flagmatch-country-quiz__input-row, .site .flagmatch-country-quiz__group-title { background: #f5f3ee; border-color: var(--site-line); }
.site .flagmatch-country-quiz__group { border-radius: 4px; }
.site .flagmatch-country-quiz__country:not(.is-found):not(.is-selected) { border-color: #e2dfd7; background: #faf9f5; }
.site .flagmatch-country-quiz__input { border-color: #bdb9b0; border-radius: 4px; background: #fff; }
@media (max-width: 600px) {
  .site .flagmatch-engine [data-game-target="tapToStart"] > .relative, .site .flagmatch-map-start__band { width: 100%; }
  .site .flagmatch-engine [data-game-target="tapToStart"], .site .flagmatch-map-start { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: center; }
  .site .flagmatch-engine:not(.flagmatch-engine--playing) .flagmatch-playfield { height: 430px !important; min-height: 430px; }
  .site .flagmatch-map-engine:not(.flagmatch-map-engine--playing) .flagmatch-map-stage { height: 430px; min-height: 430px; }
  .site .quiz-preview { padding: 0 24px 24px; }
  .quiz-preview__pairs { gap: 8px; }
  .quiz-preview__card { min-height: 50px; padding: 7px; font-size: 13px; }
  .quiz-preview__card--flag { font-size: 26px; }
  .quiz-preview__card img { max-width: 46px; max-height: 30px; }
  .quiz-preview--map { height: 210px; }
  .quiz-preview--map img { height: 100%; object-fit: contain; }
  .reference-hero { flex-wrap: wrap; }
  .reference-hero > div:first-child { flex: 1 1 180px; }
  .reference-hero__image { flex: 0 1 120px; width: 120px; }
}