/* =========================
   STATISTICS PAGE
========================= */

.statistics-page {

    width:
        min(
            var(--content-wide),
            calc(100% - var(--page-gutter))
        );

    margin:0 auto;

    padding-bottom:90px;

}


.statistics-heading {

    padding:92px 20px 40px;

    text-align:center;

}


.statistics-heading h1 {

    margin:12px 0 14px;

    font-size:clamp(38px, 6vw, 62px);

    line-height:1.05;

    letter-spacing:-1.8px;

}


.statistics-heading p {

    max-width:700px;

    margin:0 auto;

    color:#667085;

    font-size:18px;

    line-height:1.7;

}


.statistics-section {

    margin-top:55px;

}


.section-heading {

    margin-bottom:25px;

    text-align:center;

}


.section-heading h2 {

    margin:0 0 8px;

    font-size:32px;

}


.section-heading p {

    margin:0;

    color:#667085;

}


.overview-grid {

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:20px;

}


.overview-card {

    min-height:160px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:rgba(255,255,255,.9);

    border:
        1px solid rgba(216,223,237,.85);

    border-radius:24px;

    box-shadow:
        0 14px 34px rgba(40,57,87,.08);

}


.overview-label {

    color:#667085;

    font-size:14px;

}


.overview-card strong {

    margin-top:8px;

    font-size:38px;

}


.overview-date {

    font-size:24px !important;

}


.hall-grid {

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:24px;

}


.hall-card {

    min-height:270px;

    padding:26px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#222;

    text-decoration:none;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.96),
        rgba(244,241,255,.88)
    );

    border:
        1px solid rgba(211,205,239,.9);

    border-radius:28px;

    box-shadow:
        0 18px 42px rgba(58,54,112,.1);

    transition:.25s;

}


.hall-card:hover {

    color:#222;

    transform:translateY(-6px);

    box-shadow:
        0 23px 48px rgba(58,54,112,.16);

}


.hall-label {

    margin-bottom:14px;

    color:#7666e8;

    font-size:14px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


.hall-card > img {

    width:108px;

    height:108px;

    object-fit:cover;

    border-radius:26px;

}


.hall-card strong {

    margin-top:14px;

    font-size:25px;

}


.hall-card small {

    margin-top:7px;

    color:#667085;

    font-size:15px;

}


.duo-portraits {

    display:flex;

    justify-content:center;

}


.duo-portraits img {

    width:100px;

    height:100px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid white;

}


.duo-portraits img + img {

    margin-left:-24px;

}


.rankings-layout {

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:24px;

    align-items: start;

}


.ranking-panel {

    padding:28px;

    background:rgba(255,255,255,.88);

    border:
        1px solid rgba(216,223,237,.85);

    border-radius:26px;

    box-shadow:
        0 15px 36px rgba(40,57,87,.08);

}


.compact-heading {

    text-align:left;

}


.compact-heading h2 {

    font-size:26px;

}


.ranking-list {

    display:flex;

    flex-direction:column;

    gap:10px;

}


.ranking-row {

    min-height:70px;

    padding:10px 14px;

    display:flex;

    align-items:center;

    gap:12px;

    color:#222;

    text-decoration:none;

    background:#f7f8fc;

    border-radius:16px;

    transition:.2s;

}


.ranking-row:hover {

    color:#222;

    transform:translateX(5px);

    background:#f0f1f7;

}


.ranking-position {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: inline-flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    font-size: 15px;
    font-weight: 800;

    line-height: 1;

}


.ranking-row img {

    width:48px;

    height:48px;

    object-fit:cover;

    border-radius:50%;

}


.ranking-name {

    flex:1;

    font-weight:650;

}


.ranking-row > strong {

    font-size:20px;

}


.duo-ranking-row {

    padding-left:18px;

}


/* =========================
   RANKING DUO PORTRAITS
========================= */

.ranking-duo-portraits {

    width:50px;

    flex:0 0 55px;

    display:flex;

    align-items:center;

}


.ranking-duo-portraits img {

    width:36px;

    height:36px;

    flex:0 0 36px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid #fff;

    box-shadow:
        0 2px 7px rgba(40,57,87,.12);

}


.ranking-duo-portraits img + img {

    margin-left:-14px;

}


/* =========================
   TOP 5 / FULL RANKING
========================= */

.ranking-row-extra {

    display:none;

}


.ranking-list.is-expanded
.ranking-row-extra {

    display:flex;

}


.ranking-toggle {

    width:100%;

    margin-top:16px;

    padding:11px 16px;

    border:0;

    border-radius:14px;

    color:#6558d9;

    background:
        rgba(118,102,232,.08);

    font:inherit;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    transition:
        background .2s,
        transform .2s;

}


.ranking-toggle:hover {

    background:
        rgba(118,102,232,.13);

    transform:
        translateY(-1px);

}


.ranking-toggle span {

    margin-left:6px;

}


.branch-chart {

    padding:35px;

    background:rgba(255,255,255,.88);

    border:
        1px solid rgba(216,223,237,.85);

    border-radius:28px;

    box-shadow:
        0 15px 36px rgba(40,57,87,.08);

}


.branch-row + .branch-row {

    margin-top:24px;

}


.branch-row-heading {

    margin-bottom:9px;

    display:flex;

    justify-content:space-between;

}


.branch-track {

    height:16px;

    overflow:hidden;

    background:#e8ebf2;

    border-radius:999px;

}


.branch-fill {

    height:100%;

    border-radius:999px;

}


.branch-jp {

    background:var(--branch-jp);

}


.branch-en {

    background:var(--branch-en);

}


.branch-id {

    background:var(--branch-id);

}


.branch-stars-jp {

    background:var(--branch-stars-jp);

}


.branch-stars-en {

    background:var(--branch-stars-en);

}


/* =========================
   STATISTICS RESPONSIVE
========================= */

@media(max-width:900px) {

    .overview-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .hall-grid,
    .rankings-layout {

        grid-template-columns:1fr;

    }

}


@media(max-width:600px) {

    .statistics-page {

        width:min(100% - 24px, 1180px);

    }


    .statistics-heading {

        padding-top:50px;

    }


    .statistics-heading h1 {

        font-size:40px;

    }


    .overview-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            12px;

    }

    .overview-card {

    min-height:
        125px;

    padding:
        18px 12px;

    border-radius:
        20px;

    }


    .overview-label {

        font-size:
            12px;

        line-height:
            1.3;

    }


    .overview-card strong {

        margin-top:
            6px;

        font-size:
            30px;

    }


    .overview-date {

        font-size:
            20px !important;

    }

    .hall-grid {

    gap:
        16px;

    }


    .hall-card {

        min-height:
            240px;

        padding:
            24px 18px;

        border-radius:
            22px;

    }


    .hall-label {

        margin-bottom:
            14px;

        font-size:
            12px;

    }


    .hall-card > img {

        width:
            105px;

        height:
            105px;

        border-radius:
            24px;

    }


    .hall-card strong {

        margin-top:
            14px;

        font-size:
            21px;

        line-height:
            1.25;

    }


    .hall-card small {

        margin-top:
            5px;

        font-size:
            13px;

    }


    .duo-portraits img {

        width:
            82px;

        height:
            82px;

        border-width:
            4px;

    }


    .duo-portraits img + img {

        margin-left:
            -20px;

    }


    .duo-portraits img {

        width:95px;

        height:95px;

    }


    .ranking-duo-portraits {

        flex-direction: column;
        width: 25px;
        flex: 0 0 25px;

    }


    .ranking-duo-portraits img {

        width:31px;

        height:31px;

        flex-basis:31px;

    }


    .ranking-duo-portraits img + img {

        margin-left:0px;
        margin-top: -8px;

    }


    .branch-chart {

        padding:25px 20px;

    }

}

.branch-other {

    background:
    linear-gradient(
        90deg,
        var(--branch-devis),
        var(--branch-devis-secondary)
    );

}



/* =========================
   DARK THEME
========================= */

html[data-theme="dark"] .statistics-heading p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .overview-label,
html[data-theme="dark"] .hall-card small {
    color: var(--text-muted);
}

html[data-theme="dark"] .overview-card,
html[data-theme="dark"] .ranking-panel,
html[data-theme="dark"] .branch-chart {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

html[data-theme="dark"] .hall-card {
    color: var(--text-primary);
    background:
        linear-gradient(
            145deg,
            var(--surface-primary),
            rgba(118,102,232,.09)
        );
    border-color: rgba(157,144,255,.20);
    box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

html[data-theme="dark"] .hall-card:hover {
    color: var(--text-primary);
    box-shadow: 0 12px 28px rgba(0,0,0,.11);
}

html[data-theme="dark"] .duo-portraits img,
html[data-theme="dark"] .ranking-duo-portraits img {
    border-color: var(--surface-primary);
}

html[data-theme="dark"] .ranking-row {
    color: var(--text-primary);
    background: var(--surface-secondary);
}

html[data-theme="dark"] .ranking-row:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

html[data-theme="dark"] .ranking-toggle {
    color: #b8afff;
    background: rgba(118,102,232,.14);
}

html[data-theme="dark"] .ranking-toggle:hover {
    background: rgba(118,102,232,.22);
}

html[data-theme="dark"] .branch-track {
    background: var(--surface-hover);
}