/******************************************************************************
 * Which Is Bigger? — Unified Challenge Results — Version 0.2.38 Alpha
 ******************************************************************************/

#fun-facts-overlay {
    position:fixed;
    inset:0;
    z-index:120;
    display:grid;
    place-items:center;
    padding:16px;
    background:rgba(0,0,0,.76);
}

#fun-facts-overlay[hidden] {
    display:none;
}

#fun-facts-dialog {
    width:min(960px,45vw);
    height:min(635px,calc(100svh - 32px));
    max-height:calc(100svh - 32px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(18,85,114,.42);
    border-radius:16px;
    background:#f6eed8;
    color:var(--map-ink);
    box-shadow:0 20px 54px rgba(0,0,0,.58);
}

.fun-facts-dialog-header {
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 36px;
    flex:0 0 auto;
    align-items:center;
    gap:12px;
    padding:13px 14px 9px;
}

.fun-facts-dialog-header > div {
    grid-column:2;
    min-width:0;
    text-align:center;
}

#fun-facts-dialog-title {
    margin:0;
    font-size:1.35rem;
    line-height:1;
}

.fun-facts-final-score {
    color:var(--color-danger);
}

#fun-facts-dialog-date {
    display:block;
    margin-top:5px;
    color:rgba(38,50,56,.68);
    font-size:.68rem;
    font-weight:700;
}

#fun-facts-dialog-close {
    grid-column:3;
    width:36px;
    height:36px;
    flex:0 0 auto;
    padding:0;
    border-radius:50%;
    background:transparent;
    color:var(--map-ink);
    font-size:1.55rem;
    line-height:1;
    transform:none;
}

#fun-facts-dialog-close:hover {
    background:rgba(7,60,109,.1);
    transform:none;
}

#fun-facts-content {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0 10px;
    padding:6px 4px 10px;
    border-block:1px solid rgba(18,85,114,.2);
}

#fun-facts-content:focus-visible {
    outline:2px solid var(--color-primary-hover);
    outline-offset:-2px;
}

.fun-fact-matchup {
    margin-bottom:10px;
    overflow:hidden;
    border:2px solid;
    border-radius:11px;
    background:rgba(255,255,255,.42);
}

.fun-fact-matchup:last-child {
    margin-bottom:0;
}

.fun-fact-matchup.matchup-correct {
    border-color:#2f8a51;
    box-shadow:inset 0 0 0 1px rgba(47,138,81,.1);
}

.fun-fact-matchup.matchup-incorrect {
    border-color:#bd3e37;
    box-shadow:inset 0 0 0 1px rgba(189,62,55,.1);
}

.fun-fact-matchup-header {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    color:#fff;
}

.matchup-correct .fun-fact-matchup-header {
    background:#2f8a51;
}

.matchup-incorrect .fun-fact-matchup-header {
    background:#bd3e37;
}

.fun-fact-matchup-labels,
.fun-fact-result-group {
    display:flex;
    align-items:center;
}

.fun-fact-matchup-labels {
    min-width:0;
    gap:9px;
}

.fun-fact-result-group {
    justify-content:flex-end;
    gap:7px;
}

.fun-fact-matchup-header h2 {
    margin:0;
    font-size:.75rem;
    line-height:1;
    white-space:nowrap;
}

.fun-fact-difficulty {
    min-width:82px;
    padding:3px 9px;
    border-radius:999px;
    color:var(--map-ink);
    font-size:.64rem;
    font-weight:900;
    line-height:1.1;
    text-align:center;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
}

.fun-fact-difficulty.difficulty-simple {
    background:var(--color-primary-hover);
}

.fun-fact-difficulty.difficulty-easy {
    background:var(--color-success);
}

.fun-fact-difficulty.difficulty-challenging {
    background:var(--color-warning);
}

.fun-fact-difficulty.difficulty-difficult {
    background:#f97316;
}

.fun-fact-difficulty.difficulty-hard {
    background:var(--color-danger);
}

.fun-fact-result {
    font-size:.68rem;
    font-weight:900;
    white-space:nowrap;
}

.fun-fact-score {
    color:var(--color-warning);
    font-size:.72rem;
    font-variant-numeric:tabular-nums;
    font-weight:900;
    white-space:nowrap;
}

.fun-fact-place {
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:13px;
    align-items:start;
    padding:12px;
}

.fun-fact-place + .fun-fact-place {
    border-top:1px solid rgba(18,85,114,.2);
}

.fun-fact-place-visual {
    width:112px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}

.fun-fact-image-frame {
    width:112px;
    aspect-ratio:1;
    overflow:hidden;
    border:3px solid rgba(255,255,255,.76);
    border-radius:8px;
    background:rgba(18,85,114,.12);
    box-shadow:0 2px 6px rgba(64,48,28,.24);
}

.fun-fact-image-frame.image-unavailable::after {
    content:"Image unavailable";
    height:100%;
    display:grid;
    place-items:center;
    padding:5px;
    color:rgba(38,50,56,.65);
    font-size:.55rem;
    text-align:center;
}

.fun-fact-image {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.fun-fact-population {
    display:block;
    margin-top:5px;
    padding:5px 4px;
    border:1px solid var(--color-warning);
    border-radius:6px;
    background:var(--map-ink);
    color:var(--color-warning);
    font-size:.72rem;
    font-variant-numeric:tabular-nums;
    font-weight:900;
    line-height:1;
    text-align:center;
    text-shadow:0 0 6px rgba(251,191,36,.58);
    box-shadow:0 0 7px rgba(251,191,36,.2);
}

.fun-fact-copy {
    min-width:0;
}

.fun-fact-copy h3 {
    margin:0;
    font-size:1rem;
    line-height:1.05;
    overflow-wrap:anywhere;
}

.fun-fact-region {
    display:block;
    margin-top:2px;
    color:rgba(38,50,56,.66);
    font-size:.64rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.fun-fact-copy p {
    margin:6px 0 0;
    color:#263238;
    font-size:.82rem;
    line-height:1.4;
}

.fun-facts-dialog-actions {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:9px 16px 13px;
}

.fun-facts-footer-buttons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

#fun-facts-next-challenge {
    margin:0;
    color:rgba(38,50,56,.68);
    font-size:.68rem;
    font-weight:700;
    text-align:center;
}

#fun-facts-share-score,
#fun-facts-close-button {
    min-height:40px;
    padding:8px 12px;
    border-radius:9px;
    font-size:.88rem;
    transform:none;
}

#fun-facts-share-score:disabled {
    opacity:.5;
    cursor:not-allowed;
}

#fun-facts-image-credits {
    align-self:center;
    min-height:28px;
    padding:3px 8px;
    border:0;
    background:transparent;
    color:#075f9f;
    font-size:.7rem;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:2px;
    transform:none;
}

#fun-facts-image-credits:hover {
    background:rgba(7,95,159,.08);
    transform:none;
}

#fun-facts-dialog.practice-results .fun-facts-footer-buttons {
    grid-template-columns:1fr;
}

#fun-facts-next-challenge[hidden],
#fun-facts-share-score[hidden] {
    display:none;
}

#fun-facts-dialog-close:focus-visible,
#fun-facts-share-score:focus-visible,
#fun-facts-image-credits:focus-visible,
#fun-facts-close-button:focus-visible {
    outline:2px solid var(--color-primary-hover);
    outline-offset:2px;
}

body.fun-facts-dialog-open {
    overflow:hidden!important;
}

@media(max-width:900px) {
    #fun-facts-overlay {
        padding:clamp(6px,2vmin,10px);
    }

    #fun-facts-dialog {
        width:min(390px,96vw);
    }

    .fun-fact-place {
        grid-template-columns:88px minmax(0,1fr);
        gap:9px;
        padding:9px;
    }

    .fun-fact-place-visual,
    .fun-fact-image-frame {
        width:88px;
    }

    .fun-fact-copy h3 {
        font-size:.9rem;
    }

    .fun-fact-region {
        font-size:.59rem;
    }

    .fun-fact-copy p {
        font-size:.71rem;
        line-height:1.34;
    }

    .fun-fact-matchup-labels {
        gap:6px;
    }

    .fun-fact-difficulty {
        min-width:70px;
        padding-inline:6px;
        font-size:.58rem;
    }
}

@media(max-width:374px) {
    #fun-facts-overlay {
        padding:8px;
    }

    #fun-facts-dialog {
        width:calc(100vw - 16px);
        height:calc(100svh - 16px);
        max-height:calc(100svh - 16px);
    }

    .fun-fact-place {
        grid-template-columns:72px minmax(0,1fr);
        gap:8px;
        padding:8px;
    }

    .fun-fact-place-visual,
    .fun-fact-image-frame {
        width:72px;
    }

    .fun-fact-difficulty {
        min-width:70px;
        padding-inline:6px;
        font-size:.58rem;
    }
}

@media(max-height:520px) {
    .fun-facts-dialog-header {
        padding-top:8px;
        padding-bottom:6px;
    }

    .fun-facts-dialog-actions {
        padding-top:6px;
        padding-bottom:8px;
    }
}