/*
==========================================================
STATISTICS — DONUT DISTRIBUTIONS
==========================================================
*/

.statistics-distribution-grid {

    display:
        grid;

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

    gap:
        24px;

}

.statistics-distribution-panel {

    min-width:
        0;

    padding:
        28px;

    border:
        1px solid
        rgba(
            205,
            214,
            231,
            .85
        );

    border-radius:
        26px;

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

    box-shadow:
        0 14px 34px
        rgba(
            64,
            72,
            115,
            .06
        );

}

.statistics-distribution-panel-heading {

    margin-bottom:
        20px;

}

.statistics-distribution-panel-heading h3 {

    margin:
        0;

    font-size:
        21px;

    line-height:
        1.2;

}

.statistics-distribution-panel-heading p {

    margin:
        7px 0 0;

    color:
        var(
            --text-muted,
            #74798b
        );

    font-size:
        14px;

    line-height:
        1.5;

}

.donut-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            200px,
            260px
        )
        minmax(
            0,
            1fr
        );

    align-items:
        center;

    gap:
        28px;

}

.donut-chart {

    position:
        relative;

    width:
        min(
            100%,
            260px
        );

    aspect-ratio:
        1;

    margin:
        0 auto;

}

.donut-chart svg {

    display:
        block;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

}

.donut-track,
.donut-segment {

    fill:
        none;

    stroke-width:
        24;

}

.donut-track {

    stroke:
        #e8ecf3;

}

.donut-segment {

    cursor:
        pointer;

    transform-origin:
        90px 90px;

    transition:
        stroke-width .16s ease,
        opacity .16s ease,
        filter .16s ease;

}

.donut-segment:hover,
.donut-segment:focus-visible,
.donut-segment.is-selected {

    stroke-width:
        29;

    opacity:
        1;

    filter:
        drop-shadow(
            0 4px 7px
            rgba(
                50,
                60,
                100,
                .14
            )
        );

    outline:
        none;

}

.donut-center {

    position:
        absolute;

    inset:
        50% auto auto 50%;

    width:
        108px;

    transform:
        translate(
            -50%,
            -50%
        );

    text-align:
        center;

    pointer-events:
        none;

}

.donut-center strong {

    display:
        block;

    font-size:
        25px;

    line-height:
        1;

    color:
        var(
            --text,
            #202333
        );

}

.donut-center span {

    display:
        block;

    margin-top:
        6px;

    color:
        var(
            --text-muted,
            #74798b
        );

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}

.donut-legend {

    display:
        grid;

    gap:
        8px;

    min-width:
        0;

}

.donut-legend-item {

    width:
        100%;

    min-width:
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 10px;

    border:
        1px solid
        transparent;

    border-radius:
        12px;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;

}

.donut-legend-item:hover,
.donut-legend-item:focus-visible,
.donut-legend-item.is-selected {

    border-color:
        rgba(
            126,
            108,
            255,
            .12
        );

    background:
        rgba(
            126,
            108,
            255,
            .055
        );

    transform:
        translateX(2px);

    outline:
        none;

}

.donut-legend-swatch {

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

    background:
        var(
            --donut-color,
            #7e6cff
        );

}

.donut-legend-label {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        700;

}

.donut-legend-value {

    font-size:
        13px;

    font-weight:
        800;

    color:
        var(
            --text-muted,
            #74798b
        );

}


/* Branch palette — matches the shared site branch chart. */

.branch-jp {
    --donut-color: #ff6b81;
    stroke: #ff6b81;
}

.branch-en {
    --donut-color: #4da6ff;
    stroke: #4da6ff;
}

.branch-id {
    --donut-color: #ffb84d;
    stroke: #ffb84d;
}

.branch-devis {
    --donut-color: #98a2b3;
    stroke: #98a2b3;
}

.branch-stars-jp {
    --donut-color: #8f6fe8;
    stroke: #8f6fe8;
}

.branch-stars-en {
    --donut-color: #4fc77a;
    stroke: #4fc77a;
}

.branch-other {
    --donut-color: #a7afbd;
    stroke: #a7afbd;
}


/* Stream-category palette. */

.category-game {
    --donut-color: #5b9cf6;
    stroke: #5b9cf6;
}

.category-talk {
    --donut-color: #8b72e8;
    stroke: #8b72e8;
}

.category-music {
    --donut-color: #ef70aa;
    stroke: #ef70aa;
}

.category-karaoke {
    --donut-color: #d65ecb;
    stroke: #d65ecb;
}

.category-art {
    --donut-color: #e79a58;
    stroke: #e79a58;
}

.category-watchalong {
    --donut-color: #54bfc6;
    stroke: #54bfc6;
}

.category-cooking {
    --donut-color: #e4b34e;
    stroke: #e4b34e;
}

.category-asmr {
    --donut-color: #73b887;
    stroke: #73b887;
}

.category-other {
    --donut-color: #9da6b5;
    stroke: #9da6b5;
}


@media(max-width:1100px) {

    .statistics-distribution-grid {

        grid-template-columns:
            1fr;

    }

}

@media(max-width:700px) {

    .statistics-distribution-panel {

        padding:
            22px 18px;

        border-radius:
            22px;

    }

    .donut-layout {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }

    .donut-chart {

        width:
            min(
                82vw,
                260px
            );

    }

}


/*
==========================================================
DONUT CONTAINMENT FIX
==========================================================

The public stylesheet already contains branch utility classes.
The SVG segments now receive their stroke inline from the legend
swatch, so those global classes can no longer move/style the SVG.
*/

.statistics-distribution-panel {

    overflow:
        hidden;

}

.statistics-distribution-panel
.donut-chart {

    contain:
        layout paint;

}

.statistics-distribution-panel
.donut-chart svg {

    position:
        absolute;

    inset:
        0;

    max-width:
        none;

    max-height:
        none;

}

.statistics-distribution-panel
.donut-segment {

    transform:
        none !important;

    transform-origin:
        initial !important;

}



/*
==========================================================
DONUT POLISH — ALIGNED CHARTS + SIMPLE LEGENDS
==========================================================
*/

.statistics-distribution-panel
.donut-layout {

    grid-template-columns:
        280px
        minmax(0, 1fr);

    align-items:
        center;

    min-height:
        330px;

    gap:
        28px;

}

.statistics-distribution-panel
.donut-chart {

    width:
        240px;

    justify-self:
        center;

    align-self:
        center;

}

.statistics-distribution-panel
.donut-legend {

    align-self:
        center;

}

.statistics-distribution-panel
.donut-legend-item {

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

}

.statistics-distribution-panel
.donut-legend-value {

    display:
        none;

}

/* Legend hover only highlights the matching visual; it never opens a hover card. */

.statistics-distribution-panel
.donut-segment.is-hovered {

    stroke-width:
        29;

    filter:
        drop-shadow(
            0 4px 7px
            rgba(50, 60, 100, .14)
        );

}

.statistics-distribution-panel
.donut-legend-item.is-hovered {

    border-color:
        rgba(126, 108, 255, .12);

    background:
        rgba(126, 108, 255, .055);

}

/* Hover card marker only: no emoji/icon bubble. */

.holo-hover-card
.holo-hover-card-marker {

    margin-bottom:
        11px;

}

@media(max-width:850px) {

    .statistics-distribution-panel
    .donut-layout {

        grid-template-columns:
            1fr;

        min-height:
            0;

    }

    .statistics-distribution-panel
    .donut-chart {

        width:
            min(72vw, 240px);

    }

}


/*
==========================================================
DONUT COMPACTNESS + SELECTION RESET POLISH
==========================================================
*/

.statistics-distribution-panel {

    padding:
        22px 24px;

}

.statistics-distribution-panel-heading {

    margin-bottom:
        14px;

}

.statistics-distribution-panel
.donut-layout {

    grid-template-columns:
        230px
        minmax(0, 1fr);

    min-height:
        260px;

    gap:
        22px;

}

.statistics-distribution-panel
.donut-chart {

    width:
        205px;

}

.statistics-distribution-panel
.donut-center {

    width:
        94px;

}

.statistics-distribution-panel
.donut-center strong {

    font-size:
        23px;

}

.statistics-distribution-panel
.donut-center span {

    margin-top:
        5px;

    font-size:
        10px;

}

.statistics-distribution-panel
.donut-legend {

    gap:
        4px;

}

.statistics-distribution-panel
.donut-legend-item {

    padding:
        5px 9px;

    min-height:
        30px;

    border-radius:
        10px;

}

.statistics-distribution-panel
.donut-legend-label {

    font-size:
        13px;

}

.statistics-distribution-panel
.donut-legend-swatch {

    width:
        10px;

    height:
        10px;

}

@media(max-width:850px) {

    .statistics-distribution-panel {

        padding:
            20px 18px;

    }

    .statistics-distribution-panel
    .donut-layout {

        min-height:
            0;

        gap:
            16px;

    }

    .statistics-distribution-panel
    .donut-chart {

        width:
            min(66vw, 205px);

    }

}


/*
==========================================================
DONUT BALANCE FIX
==========================================================

Goal:
- cards keep a compact natural height
- each card sizes itself independently
- both donuts remain vertically aligned
- branch card no longer stretches to category card height
*/

.statistics-distribution-grid {

    align-items:
        start;

}

.statistics-distribution-panel {

    align-self:
        start;

    height:
        auto;

}

.statistics-distribution-panel
.donut-layout {

    grid-template-columns:
        215px
        minmax(0, 1fr);

    min-height:
        0;

    gap:
        20px;

    align-items:
        center;

}

.statistics-distribution-panel
.donut-chart {

    width:
        190px;

}

.statistics-distribution-panel-heading {

    margin-bottom:
        12px;

}

.statistics-distribution-panel
.donut-legend {

    gap:
        2px;

}

.statistics-distribution-panel
.donut-legend-item {

    min-height:
        28px;

    padding:
        4px 8px;

}

@media(max-width:850px) {

    .statistics-distribution-grid {

        align-items:
            stretch;

    }

    .statistics-distribution-panel {

        width:
            100%;

    }

}


/*
==========================================================
DONUT FINAL COMPROMISE — WIDTH + EQUAL HEIGHTS
==========================================================

Desktop goals:
- distribution block does not span the full page width
- both cards have the same, controlled height
- cards remain compact
- chart positions stay visually aligned
*/

.statistics-section:has(.statistics-distribution-grid) {

    max-width:
        1500px;

    margin-left:
        auto;

    margin-right:
        auto;

}

.statistics-distribution-grid {

    width:
        min(100%, 1420px);

    margin:
        0 auto;

    align-items:
        stretch;

    gap:
        20px;

}

.statistics-distribution-panel {

    height:
        350px;

    min-height:
        350px;

    max-height:
        350px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 24px;

}

.statistics-distribution-panel-heading {

    flex:
        0 0 auto;

    margin-bottom:
        10px;

}

.statistics-distribution-panel
.donut-layout {

    flex:
        1 1 auto;

    grid-template-columns:
        205px
        minmax(0, 1fr);

    min-height:
        0;

    gap:
        18px;

    align-items:
        center;

}

.statistics-distribution-panel
.donut-chart {

    width:
        180px;

}

.statistics-distribution-panel
.donut-legend {

    align-self:
        center;

    gap:
        1px;

}

.statistics-distribution-panel
.donut-legend-item {

    min-height:
        27px;

    padding:
        3px 7px;

}

@media(max-width:1100px) {

    .statistics-section:has(.statistics-distribution-grid) {

        max-width:
            none;

    }

    .statistics-distribution-grid {

        width:
            100%;

    }

    .statistics-distribution-panel {

        height:
            auto;

        min-height:
            0;

        max-height:
            none;

    }

}



/*
==========================================================
DONUT LAYOUT — NARROWER SECTION + 2-COLUMN CATEGORIES
==========================================================

Desktop:
- narrower overall section
- equal-height cards
- Branch keeps 1 legend column
- Categories uses 6 items in the first column,
  remaining items continue in a second column
*/

.statistics-section:has(.statistics-distribution-grid) {

    max-width:
        1280px;

}

.statistics-distribution-grid {

    width:
        min(100%, 1240px);

    gap:
        18px;

}

.statistics-distribution-panel {

    height:
        325px;

    min-height:
        325px;

    max-height:
        325px;

    padding:
        20px 22px;

}

.statistics-distribution-panel
.donut-layout {

    grid-template-columns:
        190px
        minmax(0, 1fr);

    gap:
        16px;

}

.statistics-distribution-panel
.donut-chart {

    width:
        170px;

}


/*
Branch legend:
one compact column.
*/

#branchDistribution
.donut-legend {

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

}


/*
Categories legend:
6 rows maximum, then continue into
a second column.
*/

#categoryDistribution
.donut-legend {

    display:
        grid;

    grid-template-rows:
        repeat(6, auto);

    grid-auto-flow:
        column;

    grid-auto-columns:
        minmax(110px, 1fr);

    column-gap:
        18px;

    row-gap:
        1px;

    align-items:
        center;

}

#categoryDistribution
.donut-legend-item {

    width:
        100%;

}


/*
Slightly denser legend text to keep
the two-column layout balanced.
*/

.statistics-distribution-panel
.donut-legend-label {

    font-size:
        12.5px;

}


/*
Tablet / mobile:
return to one natural legend column.
*/

@media(max-width:1100px) {

    #categoryDistribution
    .donut-legend {

        grid-template-rows:
            none;

        grid-auto-flow:
            row;

        grid-auto-columns:
            auto;

        grid-template-columns:
            1fr;

        column-gap:
            0;

    }

}



/*
==========================================================
DONUT POLISH — CENTERED CONTENT + SHORTER CARDS
==========================================================
*/

.statistics-distribution-panel {

    height:
        300px;

    min-height:
        300px;

    max-height:
        300px;

    padding:
        20px 22px 18px;

}

.statistics-distribution-panel-heading {

    margin-bottom:
        18px;

}


/*
Keep the title/subtitle aligned normally,
but center the chart + legend block inside
the remaining card area.
*/

.statistics-distribution-panel
.donut-layout {

    flex:
        1 1 auto;

    width:
        max-content;

    max-width:
        100%;

    margin:
        0 auto;

    grid-template-columns:
        180px
        minmax(0, auto);

    gap:
        20px;

    align-items:
        center;

    justify-content:
        center;

}

.statistics-distribution-panel
.donut-chart {

    width:
        165px;

    justify-self:
        center;

}

.statistics-distribution-panel
.donut-legend {

    justify-self:
        center;

    align-self:
        center;

}


/*
Branch keeps one column.
Categories keeps its 6 + remaining
two-column layout, but the whole legend
stays centered with the donut.
*/

#branchDistribution
.donut-legend {

    min-width:
        150px;

}

#categoryDistribution
.donut-legend {

    min-width:
        275px;

}


/*
Tighter internal rhythm while keeping
the header visually separated.
*/

.statistics-distribution-panel
.donut-legend-item {

    min-height:
        26px;

    padding:
        3px 7px;

}


/*
Responsive:
remove fixed card height and max-content
centering when the layout stacks.
*/

@media(max-width:1100px) {

    .statistics-distribution-panel {

        height:
            auto;

        min-height:
            0;

        max-height:
            none;

    }

    .statistics-distribution-panel
    .donut-layout {

        width:
            100%;

        grid-template-columns:
            1fr;

    }

    #branchDistribution
    .donut-legend,
    #categoryDistribution
    .donut-legend {

        min-width:
            0;

        width:
            100%;

    }

}



/*
==========================================================
DONUT SELECTED STATE — MEANINGFUL CLICK FEEDBACK
==========================================================
*/

.statistics-distribution-panel
.donut-segment.is-muted {

    opacity:
        .22;

    stroke-width:
        21;

    filter:
        none;

}

.statistics-distribution-panel
.donut-segment.is-selected {

    opacity:
        1;

    stroke-width:
        30;

    filter:
        drop-shadow(
            0 5px 9px
            rgba(50, 60, 100, .16)
        );

}

.statistics-distribution-panel
.donut-legend-item.is-selected {

    background:
        rgba(126, 108, 255, .075);

    border-color:
        rgba(126, 108, 255, .18);

}

.statistics-distribution-panel
.donut-center {

    transition:
        transform .16s ease;

}

.statistics-distribution-panel
.donut-center small {

    display:
        block;

    margin-top:
        4px;

    font-size:
        11px;

    font-weight:
        800;

    color:
        var(--text-muted, #74798b);

}

.statistics-distribution-panel
.donut-center small[hidden] {

    display:
        none !important;

}



/*
==========================================================
DESKTOP — MATCH THE GLOBAL STATISTICS CONTENT WIDTH
==========================================================

Only on desktop:
- use the same available width as the other Statistics blocks
- scale the cards and their contents proportionally
- keep tablet/mobile unchanged
*/

@media(min-width:1101px) {

    .statistics-section:has(.statistics-distribution-grid) {

        max-width:
            none;

        width:
            100%;

    }

    .statistics-distribution-grid {

        width:
            100%;

        max-width:
            none;

        gap:
            24px;

    }

    .statistics-distribution-panel {

        height:
            350px;

        min-height:
            350px;

        max-height:
            350px;

        padding:
            24px 27px 22px;

    }

    .statistics-distribution-panel-heading {

        margin-bottom:
            21px;

    }

    .statistics-distribution-panel
    .donut-layout {

        grid-template-columns:
            212px
            minmax(0, auto);

        gap:
            24px;

    }

    .statistics-distribution-panel
    .donut-chart {

        width:
            195px;

    }

    #branchDistribution
    .donut-legend {

        min-width:
            177px;

    }

    #categoryDistribution
    .donut-legend {

        min-width:
            325px;

        column-gap:
            22px;

    }

    .statistics-distribution-panel
    .donut-legend-item {

        min-height:
            30px;

        padding:
            4px 8px;

    }

    .statistics-distribution-panel
    .donut-legend-label {

        font-size:
            14px;

    }

    .statistics-distribution-panel
    .donut-center {

        width:
            108px;

    }

    .statistics-distribution-panel
    .donut-center strong {

        font-size:
            27px;

    }

    .statistics-distribution-panel
    .donut-center span {

        font-size:
            11px;

    }

}


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

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

html[data-theme="dark"] .statistics-distribution-panel-heading p,
html[data-theme="dark"] .donut-center span,
html[data-theme="dark"] .donut-legend-value {
    color: var(--text-muted);
}

html[data-theme="dark"] .donut-center strong,
html[data-theme="dark"] .donut-legend-label {
    color: var(--text-primary);
}

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

html[data-theme="dark"] .donut-legend-item:hover,
html[data-theme="dark"] .donut-legend-item:focus-visible,
html[data-theme="dark"] .donut-legend-item.is-selected,
html[data-theme="dark"] .donut-legend-item.is-hovered {
    background: rgba(126,108,255,.10);
    border-color: rgba(157,144,255,.22);
}