/* =====================================================================
   Shared components for the geography games family
   (Chronophoto, Guess The Country, Draw The Country, Sort The Countries,
   Name The Countries, Click The Countries, Name The Flags).

   This file is IDENTICAL in every site. Edit the master copy in
   Webgames/_shared/shared.css and copy it to each site folder.

   Each site sets its own colours in its styles.css :root, e.g.
     --fam-dark       footer background            (site's dark brand colour)
     --fam-on-dark    footer text
     --fam-surface    modal card background
     --fam-text       modal text
     --fam-title      modal heading (defaults to --fam-text)
     --fam-tile       game tile background
     --fam-tile-hover game tile background on hover
     --fam-icon-bg    app-icon square
     --fam-icon-fg    app-icon glyph
     --fam-backdrop   dimmed page behind a modal
     --fam-accent     header-button border, focus ring, "on" dot of region chips
     --fam-chip-border  border of region chips that are off
   Load this file AFTER the site's styles.css.
   ===================================================================== */

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
    margin-top: auto;
    padding: 22px 16px calc(26px + env(safe-area-inset-bottom));
    background: var(--fam-dark, #000000);
    color: var(--fam-on-dark, #ffffff);
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    position: static;
    border: none;
}

.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 32px;
    margin: 0;
    padding: 0;
}

.site-footer .footer-link {
    display: inline-block;
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: clamp(2.1rem, 6vw, 3rem);
    font-weight: normal;
    line-height: 1.15;
    color: var(--fam-on-dark, #ffffff);
    text-decoration: none;
    transition: transform .2s ease;
}

.site-footer .footer-sublinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin-top: 10px;
}

.site-footer .footer-sublink {
    display: inline-block;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.05rem;
    color: var(--fam-on-dark, #ffffff);
    text-decoration: none;
    transition: transform .2s ease;
}

/* Links on the dark bar grow slightly on hover; no colour change. */
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible,
.site-footer .footer-sublink:hover,
.site-footer .footer-sublink:focus-visible {
    transform: scale(1.06);
    color: var(--fam-on-dark, #ffffff);
    opacity: 1;
}

.site-footer .footer-copy {
    margin: 12px 0 0;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 0.85rem;
    color: var(--fam-on-dark, #ffffff);
    opacity: 0.6;
}

/* ---- Daily World box (added to the footer by dailyworld.js) ------------ */
.site-footer .dw-box {
    max-width: 420px;
    margin: 16px auto 0;
    color: var(--fam-on-dark, #ffffff);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
}

.site-footer .dw-box .daily-email { margin-top: 0; }

/* Games without a daily show nothing here until you're signed in. */
.site-footer .dw-box:empty { display: none; }

.site-footer .dw-streak {
    margin: 0;
    font-size: 1.3rem;
}

.site-footer .dw-streak strong {
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-weight: normal;
}

.site-footer .dw-meta {
    margin: 2px 0 0;
    font-size: 1rem;
    opacity: 0.85;
}

.site-footer .dw-note {
    margin: 2px 0 0;
    font-size: 0.95rem;
    opacity: 0.7;
}

.site-footer .dw-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    margin: 10px 0 0;
    font-size: 1rem;
}

/* "See all your stats" is the main thing to do here. */
.site-footer .dw-links .dw-stats {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--fam-on-dark, #ffffff);
    color: var(--fam-dark, #000000);
    text-decoration: none;
    transition: transform .2s ease;
}

.site-footer .dw-signout {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.85;
}

.site-footer .dw-links .dw-stats:hover { transform: scale(1.04); }
.site-footer .dw-signout:hover { opacity: 1; }

.site-footer .dw-signin {
    margin: 6px 0 0;
    font-size: 0.95rem;
    opacity: 0.8;
}

.site-footer .dw-signin a { color: inherit; }

/* ---- Daily email signup (the form in the Daily World box) -------------- */
.site-footer .daily-email {
    max-width: 420px;
    margin: 16px auto 0;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
}

.site-footer .daily-email-label {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
    color: var(--fam-on-dark, #ffffff);
}

.site-footer .daily-email-row {
    display: flex;
    gap: 8px;
}

.site-footer .daily-email-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fam-on-dark, #ffffff);
    font: inherit;
    font-size: 1rem;
    box-shadow: none;
}

.site-footer .daily-email-input::placeholder {
    color: var(--fam-on-dark, #ffffff);
    opacity: 0.5;
}

.site-footer .daily-email-input:focus-visible,
.site-footer .daily-email-btn:focus-visible {
    outline: 2px solid var(--fam-accent, #ffffff);
    outline-offset: 2px;
}

.site-footer .daily-email-btn {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: var(--fam-on-dark, #ffffff);
    color: var(--fam-dark, #000000);
    font: inherit;
    font-size: 1rem;
    box-shadow: none;
    cursor: pointer;
    transition: transform .2s ease;
}

.site-footer .daily-email-btn:hover {
    transform: scale(1.04);
}

.site-footer .daily-email-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.site-footer .daily-email-msg {
    min-height: 1.2em;
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: var(--fam-on-dark, #ffffff);
    opacity: 0.8;
}

.site-footer .daily-email-hp {
    position: absolute;
    left: -9999px;
}

/* ---- Daily World on the page (dailyworld.js) ---------------------------- */
/* The account button, last in the header, in the site's own header-button style: a
   circle with a person outline, or (signed in) your picture on your colour. */
.dw-account { text-decoration: none; }
.dw-person { flex-shrink: 0; vertical-align: -3px; }

.dw-account.dw-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

/* Your colour (and emoji or flag) from Daily World. */
.dw-account.dw-avatar.dw-filled,
.dw-account.dw-avatar.dw-filled:hover,
.dw-account.dw-avatar.dw-filled:focus-visible {
    overflow: hidden;
    background: var(--dw-av);
    color: var(--dw-av-fg, #ffffff);
}

.dw-account.dw-avatar img {
    /* The whole flag, centred on your colour (flags aren't round, and some aren't rectangles). */
    width: auto;
    height: auto;
    max-width: 66%;
    max-height: 58%;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.dw-account.dw-avatar img.dw-logo,
.dw-menu-pic img.dw-logo {
    /* One of our logos, as a symbol on your colour. */
    width: 60%;
    height: 60%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

.dw-avatar-emoji {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 1.15rem;
}

/* Chronophoto's navbar links have no border of their own. */
.navbar .dw-account.dw-avatar {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border: 2px solid currentColor;
}

.dw-avatar-dot {
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
}

/* "What's Daily World": opened by the person outline while signed out. Everything in it
   is centred; the colours are the site's own modal colours. */
.dw-dialog {
    /* Centred even on sites whose reset removes a dialog's own margin: auto. */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-sizing: border-box;
    width: min(340px, calc(100vw - 32px));
    padding: 30px 26px 16px;
    border: 0;
    border-radius: 20px;
    background: var(--fam-surface, #ffffff);
    color: var(--fam-text, #111111);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    text-align: center;
}

.dw-dialog[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dw-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

.dw-dialog-logo { display: block; margin: 0 0 10px; border-radius: 12px; }

.dw-dialog h2 {
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    color: var(--fam-title, var(--fam-text, #111111));
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1.45rem;
    font-weight: normal;
    line-height: 1.15;
    text-align: center;
}

.dw-dialog p { margin: 0; line-height: 1.35; text-align: center; }
.dw-dialog .dw-dialog-lede { max-width: 250px; font-size: 1.08rem; }
.dw-dialog .dw-dialog-quiet { margin-top: 6px; font-size: 0.9rem; opacity: 0.65; }

/* The dialog's own colours swapped, so the buttons stand out on light and dark sites. */
.dw-dialog-go,
.dw-dialog-row button {
    background: var(--fam-text, #111111);
    color: var(--fam-surface, #ffffff);
    font-family: inherit;
    cursor: pointer;
    transition: transform .2s ease;
}

.dw-dialog-go {
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1.1rem;
    text-decoration: none;
}

.dw-dialog-go:hover { transform: scale(1.03); color: var(--fam-surface, #ffffff); }

.dw-dialog-remind { width: 100%; margin: 18px 0 0; }

/* "or just a daily reminder", between two hairlines. */
.dw-dialog .dw-dialog-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.dw-dialog-or::before, .dw-dialog-or::after {
    content: '';
    flex: 1;
    border-top: 1px solid currentColor;
    opacity: 0.35;
}

.dw-dialog-row {
    display: flex;
    gap: 6px;
}

.dw-dialog-row input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid rgba(127, 127, 127, 0.45);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
}

.dw-dialog-row input::placeholder { color: inherit; opacity: 0.5; }

.dw-dialog-row button {
    flex-shrink: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
}

.dw-dialog-row button:disabled { opacity: 0.6; cursor: default; }

.dw-dialog .dw-dialog-msg { min-height: 1.2em; margin-top: 6px; font-size: 0.9rem; }

.dw-dialog .dw-dialog-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

.dw-dialog-later, .dw-dialog-close {
    margin: 0;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.dw-dialog-later { margin-top: 2px; font-size: 0.95rem; }
.dw-dialog-later:hover, .dw-dialog-close:hover { opacity: 1; }

.dw-dialog-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.5rem;
    line-height: 1;
}

/* The last line of a game's Stats popup: sign in, or "See all your stats". */
.dw-modal {
    margin: 18px 0 0;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    opacity: 0.75;
}

.dw-modal a { color: inherit; text-decoration: underline; }
.dw-modal a:hover { opacity: 1; }

/* "🔥 5" for a moment after finishing a daily; goes away by itself. */
.dw-toast {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    left: 50%;
    z-index: 2147483000;
    padding: 8px 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background: #ffffff;   /* light, so it stands out on the dark headers it sits over */
    color: var(--fam-dark, #000000);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1.4rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -14px);
    transition: opacity .35s ease, transform .35s ease;
}

.dw-toast.dw-toast-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .dw-toast { transform: translate(-50%, 0); transition: opacity .35s ease; }
}

.dw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Summary tiles at the top of a game's Stats popup -------------------- */
/* Big number, small label under it; the daily streak comes first, with its flame.
   On light and dark popups alike (the tile is a light tint of the popup's own colour). */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin: 4px 0 18px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px 8px 10px;
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.12);
    text-align: center;
}

.stat-tile-value {
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1.7rem;
    line-height: 1.1;
    white-space: nowrap;
}

.stat-tile-main .stat-tile-value { font-size: 2rem; }
/* Some games style their old stat ids (#dailyStreak...); inside a tile the number follows the tile. */
#statsModal .stat-tile-value [id] { font: inherit; color: inherit; margin: 0; padding: 0; background: none; }
.stat-tile-fire { font-size: 0.75em; margin-right: 2px; vertical-align: 0.06em; }

.stat-tile-label {
    margin-top: 3px;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 0.9rem;
    line-height: 1.2;
    opacity: 0.75;
}

/* "Not played yet" in place of a game's tiles. */
.stat-empty { margin: 6px 0 16px; text-align: center; opacity: 0.75; }

/* Tables that stay tables (one row per map, say), in the same soft look as the tiles. */
#statsModal table.stat-table {
    border-collapse: separate;
    border-spacing: 0 4px;
    margin: 4px 0 12px;
}

#statsModal table.stat-table th {
    padding: 4px 8px;
    border: 0;
    background: none;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 0.85rem;
    font-weight: normal;
    opacity: 0.7;
}

#statsModal table.stat-table td {
    padding: 8px;
    border: 0;
    background: rgba(127, 127, 127, 0.12);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
}

#statsModal table.stat-table td:first-child { border-radius: 10px 0 0 10px; text-align: left; }
#statsModal table.stat-table td:last-child { border-radius: 0 10px 10px 0; }

/* Chronophoto's stats grid, in the same tile style (its markup: <strong>label</strong> <span>number</span>). */
/* Plain class selectors on purpose: Chronophoto hides the other mode's grid with a
   [data-mode-only] rule, which has to win over these. */
.modal .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin: 4px 0 18px;
}

#statsModal .stat-item:not([style*="none"]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 8px 10px;
    border: 0;
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.12);
    box-shadow: none;
    text-align: center;
}

#statsModal .stat-item > span {
    order: 1;
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1.7rem;
    line-height: 1.1;
}

#statsModal .stat-item > strong {
    order: 3;
    margin-top: 3px;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 0.9rem;
    font-weight: normal;
    opacity: 0.75;
}

#statsModal .stat-item > div { order: 2; margin: 0 !important; font-size: 0.8rem !important; opacity: 0.7; }

/* The day a best score was set, small under the score in a game's Stats popup. */
.best-date {
    display: block;
    margin-top: 2px;
    font-size: 0.72em;
    font-weight: normal;
    letter-spacing: 0;
    opacity: 0.7;
}

/* ---- More Games modal ------------------------------------------------- */
/* The page's own script shows/hides it by setting style.display. */
#allGamesModal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: var(--fam-backdrop, rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#allGamesModal .modal-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    margin: 0;
    padding: 26px 26px 28px;
    background: var(--fam-surface, #ffffff);
    color: var(--fam-text, #000000);
    border: none;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    text-align: center;
}

#allGamesModal .modal-header {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
    padding: 0 40px;
    border: none;
    background: none;
}

#allGamesModal .modal-header h2 {
    margin: 0;
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1.9rem;
    font-weight: normal;
    line-height: 1.2;
    color: var(--fam-title, var(--fam-text, #000000));
    text-align: center;
    text-shadow: none;
}

#allGamesModal .modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    left: auto;
    bottom: auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fam-text, #000000);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background .2s ease;
}

#allGamesModal .modal-close:hover,
#allGamesModal .modal-close:focus-visible {
    background: var(--fam-close-hover, rgba(0, 0, 0, 0.08));
    color: var(--fam-text, #000000);
    transform: none;
}

#allGamesModal .modal-body {
    margin: 0;
    padding: 0;
    font-size: 1rem;
}

#allGamesModal .games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    gap: 14px;
    justify-items: stretch;
    margin: 0;
    padding: 0;
}

#allGamesModal .game-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 20px 10px 16px;
    background: var(--fam-tile, #f3f4f6);
    border: 1px solid var(--fam-tile-border, rgba(0, 0, 0, 0.06));
    border-radius: 12px;
    color: var(--fam-text, #000000);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#allGamesModal .game-item svg {
    --icon-color: var(--fam-icon-fg, #ffffff);
    box-sizing: border-box;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 13px;
    background: var(--fam-icon-bg, #000000);
    border-radius: 16px;
    fill: var(--fam-icon-fg, #ffffff);
    stroke: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform .2s ease;
}

#allGamesModal .game-item:hover,
#allGamesModal .game-item:focus-visible {
    transform: translateY(-3px);
    background: var(--fam-tile-hover, #ffffff);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    color: var(--fam-text, #000000);
}

#allGamesModal .game-item:hover svg,
#allGamesModal .game-item:focus-visible svg {
    transform: scale(1.06);
    fill: var(--fam-icon-fg, #ffffff);
    stroke: none;
}

@media (max-width: 600px) {
    #allGamesModal .modal-content {
        padding: 20px 14px 18px;
    }
    #allGamesModal .modal-header h2 {
        font-size: 1.6rem;
    }
    #allGamesModal .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    #allGamesModal .game-item {
        padding: 16px 8px 14px;
        font-size: 0.95rem;
    }
}

/* ---- Site title heading ----------------------------------------------- */
/* The page's one <h1> wraps the existing title link (or logo) in the header. It adds
   no box and no styling of its own, so the header looks exactly as it did. */
.site-title {
    display: contents;
    font: inherit;
    color: inherit;
    margin: 0;
}

/* ---- FAQ accordion ----------------------------------------------------- */
.about-accordion {
    box-sizing: border-box;
    width: min(760px, calc(100% - 32px));
    max-width: none;
    margin: 16px auto 28px;
    background: var(--fam-faq-bg, var(--fam-surface, #ffffff));
    color: var(--fam-faq-text, var(--fam-text, #000000));
    border: 1px solid var(--fam-tile-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    overflow: hidden;
}

.about-accordion .about-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-family: var(--fam-font-display, 'Bungee', cursive);
    font-size: 1.05rem;
    color: var(--fam-faq-heading, var(--fam-faq-text, var(--fam-text, #000000)));
}

.about-accordion .about-summary::-webkit-details-marker {
    display: none;
}

.about-accordion .about-summary::after {
    content: '+';
    flex-shrink: 0;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .25s ease;
}

.about-accordion[open] .about-summary::after {
    transform: rotate(45deg);
}

.about-accordion .about-body {
    padding: 0 18px 18px;
    font-size: 1rem;
    line-height: 1.5;
    overflow: hidden;
    transition: height .3s ease;
}

.about-accordion .about-body h3 {
    margin: 14px 0 4px;
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.1rem;
    color: var(--fam-faq-heading, var(--fam-faq-text, var(--fam-text, #000000)));
}

.about-accordion .about-body p {
    margin: 0 0 12px;
}

.about-accordion .about-body p:last-child {
    margin-bottom: 0;
}

.about-accordion .about-body strong {
    color: var(--fam-faq-heading, var(--fam-faq-text, var(--fam-text, #000000)));
}

/* ---- Header buttons (Settings, Stats, Continents...) ------------------- */
.header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: auto;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--fam-accent, rgba(255, 255, 255, 0.5));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: var(--fam-on-dark, #ffffff);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease;
}

.header-btn:hover,
.header-btn:focus-visible {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.08);
    color: var(--fam-on-dark, #ffffff);
}

.header-btn:focus-visible {
    outline: 2px solid var(--fam-accent, #ffffff);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .header-btn {
        width: 36px;
        padding: 0;
    }
    .header-btn-label {
        display: none;
    }
}

/* Narrow phones: a little less room for the buttons, so the title keeps more of its own. */
@media (max-width: 400px) {
    .header-actions { gap: 6px; }
    .header-btn,
    .dw-account.dw-avatar {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }
}

/* ---- Region chips (World / USA / Canada / Australia / UK) -------------- */
/* The game script toggles "active" (and sometimes "locked") on each chip. */
.region-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 14px auto 2px;
    padding: 0 12px;
}

.region-chips .region-chip {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 7px 14px;
    border: 1.5px solid var(--fam-chip-border, rgba(0, 0, 0, 0.25));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: none;
    color: var(--fam-dark, #000000);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

/* A dot that fills in when the set is on, so on/off reads at a glance. */
.region-chips .region-chip::before {
    content: '';
    box-sizing: border-box;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.region-chips .region-chip:hover {
    transform: scale(1.04);
}

.region-chips .region-chip.active {
    border-color: var(--fam-dark, #000000);
    background: var(--fam-dark, #000000);
    box-shadow: none;
    color: var(--fam-on-dark, #ffffff);
}

.region-chips .region-chip.active::before {
    border-color: var(--fam-accent, #ffffff);
    background: var(--fam-accent, #ffffff);
}

.region-chips .region-chip.locked {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.region-chips .region-chip:focus-visible {
    outline: 2px solid var(--fam-dark, #000000);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .region-chips {
        gap: 5px;
        margin-top: 10px;
    }
    .region-chips .region-chip {
        padding: 6px 11px;
        font-size: 0.98rem;
    }
}

/* Narrow phones: keep all five chips on one row. */
@media (max-width: 420px) {
    .region-chips {
        gap: 4px;
        padding: 0 8px;
    }
    .region-chips .region-chip {
        gap: 5px;
        padding: 6px 8px;
        font-size: 0.92rem;
    }
}

/* Account menu (dailyworld.js toggleMenu): opened by your picture in the header. The same
   white card on every site; the site's own UI font. */
.dw-menu {
    position: fixed;
    z-index: 10000;
    box-sizing: border-box;
    width: min(290px, calc(100vw - 16px));
    padding: 14px;
    border-radius: 16px;
    background: #ffffff;
    color: #101f31;
    box-shadow: 0 0 0 1px rgba(16, 31, 49, 0.08), 0 16px 40px rgba(0, 0, 0, 0.28);
    font-family: var(--fam-font-ui, 'Jockey One', sans-serif);
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
}
.dw-menu-head { display: flex; align-items: center; gap: 12px; }
.dw-menu-pic {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--dw-av, #101f31);
    color: var(--dw-av-fg, #ffffff);
}
.dw-menu-pic img { width: auto; height: auto; max-width: 66%; max-height: 58%; border-radius: 2px; }
.dw-menu-pic .dw-avatar-dot { font-size: 1.15rem; }
.dw-menu-who { display: flex; flex-direction: column; min-width: 0; }
.dw-menu-who strong { font-size: 17px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-menu-who span { color: #5b6676; font-size: 14px; letter-spacing: 0.04em; }
.dw-menu-streaks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dw-menu-streaks span {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff5d1;
    color: #5b6676;
    font-size: 13px;
}
.dw-menu-streaks b { color: #101f31; font-family: var(--fam-font-display, 'Bungee', cursive); font-weight: normal; font-size: 18px; }
.dw-menu-links { display: flex; flex-direction: column; margin-top: 10px; padding-top: 6px; border-top: 1px solid #e2e7ee; }
.dw-menu-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 10px;
    color: #101f31;
    text-decoration: none;
}
.dw-menu-links a:hover, .dw-menu-links a:focus-visible { background: #f3f5f9; outline: none; }
.dw-menu-tag { padding: 1px 9px; border-radius: 999px; background: #eaeef4; color: #5b6676; font-size: 13px; }
.dw-menu-tag.dw-on { background: #101f31; color: #ffffff; }
.dw-menu-signout {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 8px;
    border: 0;
    border-top: 1px solid #e2e7ee;
    border-radius: 0;
    background: none;
    color: #5b6676;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dw-menu-signout:hover { color: #101f31; }