/* =====================================================================
   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;
}

/* ---- 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;
    }
}

/* ---- 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;
    }
}

/* ---- 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;
    }
}