/*
 * Responsive containment shared by every lottery chart page.
 * The data tables deliberately keep their desktop column widths; only their
 * immediate viewport scrolls horizontally on narrow screens.
 */

@media (max-width: 900px) {
    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission,
        .frontend-kl8-calculator
    ) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-x: clip;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-panel"],
        [class*="__panel"]
    ) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-title"],
        [class*="__title"],
        [class$="-heading"],
        [class*="__heading"]
    ) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        white-space: normal !important;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-heading"],
        [class*="__heading"]
    ) h1 {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-analysis-bar"],
        [class*="__analysis-bar"]
    ) {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-toolbar"],
        [class*="__toolbar"],
        [class$="-period"]
    ) {
        box-sizing: border-box;
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 2px;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 32px;
        margin-right: 0;
        margin-left: 0;
        white-space: normal !important;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-actual"],
        [class*="__actual"]
    ) {
        float: none !important;
        flex-basis: 100%;
        margin-left: 0 !important;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-notes"],
        [class*="__notes"]
    ) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-breadcrumb"],
        [class*="__breadcrumb"]
    ) {
        height: auto !important;
        min-height: 34px;
        overflow: hidden;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-breadcrumb"],
        [class*="__breadcrumb"]
    ) ol {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-scroll"],
        [class*="__scroll"],
        .lottery-chart-table-wrap
    ) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        max-height: none;
        margin-right: 0;
        margin-left: 0;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-scroll"],
        [class*="__scroll"],
        .lottery-chart-table-wrap
    ) > table {
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    :is(
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-omission
    ) [class*="cell--issue"] {
        position: sticky;
        left: 0;
        z-index: 3;
        box-shadow: 1px 0 0 rgba(0, 0, 0, .28);
    }
}

@media (max-width: 700px) {
    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) {
        padding-bottom: 36px;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-title"],
        [class*="__title"],
        [class$="-heading"],
        [class*="__heading"]
    ) {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 18px;
        line-height: 1.5;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-analysis-bar"],
        [class*="__analysis-bar"],
        [class$="-toolbar"],
        [class*="__toolbar"],
        [class$="-period"],
        [class$="-notes"],
        [class*="__notes"]
    ) {
        padding-right: 12px;
        padding-left: 12px;
    }

    :is(
        .frontend-lottery-charts,
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-display,
        .frontend-kl8-omission
    ) :is(
        [class$="-analysis-bar"],
        [class*="__analysis-bar"]
    ) :is(
        [class$="-toolbar"],
        [class*="__toolbar"]
    ) {
        padding-right: 0;
        padding-left: 0;
    }

    :is(
        .frontend-ssq-indicators,
        .frontend-ssq-omission,
        .frontend-three-d-omission,
        [class^="frontend-3d-"],
        .sum-trend-page,
        .group3-statistics-page,
        .group6-statistics-page,
        .frontend-kl8-omission
    ) :is(
        [class$="-scroll"],
        [class*="__scroll"]
    )::before,
    .frontend-lottery-charts .lottery-chart-table-wrap::before {
        position: sticky;
        left: 0;
        z-index: 6;
        display: block;
        width: fit-content;
        margin: 0 0 6px;
        padding: 4px 8px;
        content: "← 左右滑动查看完整图表 →";
        color: #5f6d76;
        background: #f4f6f8;
        border-radius: 3px;
        font: 12px/1.5 "Microsoft YaHei", "PingFang SC", sans-serif;
        white-space: nowrap;
    }
}