/******************************************************************************
 * Which Is Bigger? — Game Over presentation — Version 0.2.10 Alpha
 ******************************************************************************/

#game-over-panel{
    width:min(390px,94vw);
}

#game-over-panel .summary-row span{
    flex:1 1 auto;
    color:var(--map-cream);
    text-align:left;
}

#game-over-panel .summary-row strong{
    flex:0 0 auto;
}

.summary-divider{
    height:1px;
    margin:clamp(2px,.6vh,6px) clamp(4px,1vw,10px);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(148,163,184,.5) 15%,
        rgba(148,163,184,.5) 85%,
        transparent
    );
}

.summary-row.record-celebration{
    border-color:rgba(251,191,36,.95);
    background:linear-gradient(
        90deg,
        rgba(251,191,36,.08),
        rgba(255,255,255,.05),
        rgba(251,191,36,.08)
    );
    animation:recordRowGlow 1.15s ease-in-out infinite alternate;
}

#game-over-panel .summary-row.record-celebration span,
#game-over-panel .summary-row.record-celebration strong{
    color:var(--color-warning);
}

@keyframes recordRowGlow{
    from{
        box-shadow:0 0 0 1px rgba(251,191,36,.2),0 0 8px rgba(251,191,36,.12);
    }
    to{
        box-shadow:0 0 0 2px rgba(251,191,36,.55),0 0 20px rgba(251,191,36,.38);
    }
}

@media(max-width:700px){
    #game-over-panel{
        width:min(390px,96vw);
    }
}

@media(prefers-reduced-motion:reduce){
    .summary-row.record-celebration{
        animation:none;
        box-shadow:0 0 0 2px rgba(251,191,36,.45),0 0 14px rgba(251,191,36,.24);
    }
}