/******************************************************************************
 * Which Is Bigger? — Game Mode Controls — Version 0.2.37 Alpha
 ******************************************************************************/

#mode-overlay,
#daily-overlay,
#practice-overlay {
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:16px;
    background:rgba(0,0,0,.72);
}

#mode-overlay[hidden],
#daily-overlay[hidden],
#practice-overlay[hidden] {
    display:none;
}

#mode-dialog,
#daily-dialog,
#practice-dialog {
    width:min(343px,calc(100vw - 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);
}

#daily-dialog {
    height:min(635px,calc(100svh - 32px));
}

#mode-dialog-title,
#daily-dialog-title,
#practice-dialog-title {
    margin:0;
    font-size:1.35rem;
    line-height:1;
}

#mode-dialog-close,
#daily-dialog-close,
#practice-dialog-close {
    width:36px;
    height:36px;
    padding:0;
    border-radius:50%;
    background:transparent;
    color:var(--map-ink);
    font-size:1.55rem;
    line-height:1;
    transform:none;
}

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

.mode-choice-list {
    display:grid;
    gap:12px;
    padding:12px 16px 16px;
}

.mode-choice {
    min-height:64px;
    border:1px solid rgba(18,85,114,.3);
    border-radius:10px;
    background:rgba(255,255,255,.5);
    color:var(--map-ink);
    font:inherit;
    font-size:1.05rem;
    font-weight:800;
    cursor:pointer;
    transform:none;
}

.mode-choice:hover,
.mode-choice:focus-visible {
    border-color:#0875d1;
    background:#fff9e8;
    transform:none;
}

#daily-options {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0 12px;
    padding:3px 4px;
    border-block:1px solid rgba(18,85,114,.2);
}

#practice-options {
    margin:0 12px;
    padding:3px 4px;
    border-block:1px solid rgba(18,85,114,.2);
}

.daily-date-option small {
    color:rgba(38,50,56,.68);
}

#mode-dialog .dataset-dialog-actions {
    grid-template-columns:1fr;
}

#daily-cancel,
#practice-cancel {
    border:1px solid rgba(18,85,114,.3);
    background:rgba(255,255,255,.5);
    color:var(--map-ink);
}

#mode-cancel {
    width:100%;
    min-height:40px;
    padding:8px 12px;
    border:0;
    border-radius:9px;
    background:var(--color-primary);
    color:#fff;
    font-size:.88rem;
    transform:none;
}

#mode-cancel:hover {
    background:var(--color-primary-hover);
    transform:none;
}

body.mode-dialog-open,
body.daily-dialog-open,
body.practice-dialog-open {
    overflow:hidden!important;
}

#top-stats.fixed-run-statistics {
    grid-template-columns:repeat(3,1fr)!important;
}

#top-stats.fixed-run-statistics #longest-streak-stat-card {
    border-right:0!important;
}

#top-stats.fixed-run-statistics #longest-streak-stat-card::after {
    display:none!important;
}

@media(max-width:700px) {
    #mode-overlay,
    #daily-overlay,
    #practice-overlay {
        padding:10px;
    }
}