/******************************************************************************
 * Which Is Bigger? — City card presentation — Version 0.2.12 Alpha
 ******************************************************************************/

.city-card{
    justify-content:flex-start;
    padding-top:clamp(7px,2cqi,20px);
    padding-bottom:clamp(5px,1.4cqi,14px);
}

.city-name{
    margin:0 0 clamp(1px,.8cqi,5px);
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    font-size:clamp(.78rem,7.2cqi,2.7rem);
    letter-spacing:-.025em;
    line-height:1.02;
    flex:0 0 auto;
}

.state-name{
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size:clamp(.5rem,3cqi,.95rem);
    line-height:1.05;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    flex:0 0 auto;
}

.city-image-frame{
    position:relative;
    width:min(94cqi,66.7cqb,428px);
    min-width:40px;
    aspect-ratio:1 / 1;
    margin:clamp(10px,5.2cqi,24px) 0 0;
    flex:0 1 auto;
    min-height:0;
    overflow:hidden;
    border-radius:clamp(8px,4cqi,18px);
    background:#000;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.city-image-frame[hidden]{
    display:none;
}

.city-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.city-image[hidden]{
    display:none;
}

.city-image-frame.pregame-preview .city-image{
    opacity:1;
}

.city-image-frame.pregame-preview::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:rgba(15,23,42,.8);
    pointer-events:none;
}

.city-image-frame.pregame-preview::after{
    content:"?";
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.96);
    font-size:clamp(5.1rem,54.4cqi,17rem);
    font-weight:900;
    line-height:1;
    text-shadow:0 4px 18px rgba(0,0,0,.7);
    pointer-events:none;
    transform:scale(1);
    animation:pregame-question-pulse 2s ease-in-out infinite;
}

@keyframes pregame-question-pulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(.8);
    }
}

.population{
    margin-top:clamp(10px,5.2cqi,24px);
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    font-size:clamp(.76rem,7.2cqi,2.5rem);
    line-height:1;
    flex:0 0 auto;
}

@media(max-width:700px){
    .city-card{
        padding-bottom:4px;
    }

    .city-name{
        font-size:clamp(.96rem,9.3cqi,2.66rem);
    }

    .state-name{
        font-size:clamp(.61rem,3.72cqi,1.06rem);
    }

    .city-image-frame{
        width:min(94cqi,63.3cqb,380px);
        margin-top:clamp(9px,5cqi,20px);
        border-radius:10px;
    }

    .population{
        margin-top:clamp(9px,5cqi,20px);
        font-size:clamp(.72rem,7cqi,2rem);
    }
}

@media(max-height:620px){
    .city-card{
        padding-top:5px;
        padding-bottom:3px;
    }

    .city-name{
        margin-bottom:1px;
        font-size:clamp(.68rem,6.6cqi,1.8rem);
    }

    .state-name{
        font-size:clamp(.44rem,2.7cqi,.72rem);
    }

    .city-image-frame{
        width:min(94cqi,56.4cqb,322px);
        min-width:34px;
        margin-top:clamp(7px,4cqi,14px);
    }

    .population{
        margin-top:clamp(7px,4cqi,14px);
        font-size:clamp(.68rem,6.5cqi,1.7rem);
    }
}

@media(max-width:420px){
    .city-name{
        font-size:clamp(.88rem,9.04cqi,1.93rem);
        letter-spacing:-.04em;
    }

    .state-name{
        font-size:clamp(.56rem,3.46cqi,.88rem);
        letter-spacing:.04em;
    }

    .city-image-frame{
        width:min(92cqi,57.5cqb,276px);
        min-width:30px;
        margin-top:clamp(7px,4.5cqi,14px);
    }

    .population{
        margin-top:clamp(7px,4.5cqi,14px);
        font-size:clamp(.66rem,6.2cqi,1.35rem);
    }
}

@media(prefers-reduced-motion:reduce){
    .city-image-frame.pregame-preview::after{
        animation:none;
    }
}