/* Keep mobile Six Mark sections in document flow instead of desktop fixed heights. */
.history-scroll-hint { display: none; }
.mobile-history-loader { display: block; width: calc(100% - 60px); margin: 12px 30px 20px; padding: 14px; border: 0; border-radius: 8px; background: #eef5ff; color: #4678ba; font-size: 13px; }
.mobile-history-loader:disabled { background: #f7f9fb; color: #8793a3; }
@media (max-width: 768px) {
    body:has(.simplicity-layout) #main-content { margin-top: 0; padding-top: 64px; }
    .simplicity-layout .simple-actions { height: auto; min-height: 47px; flex-wrap: wrap; }
    .simplicity-layout .simple-actions input { min-width: 120px; }
    .reference-articles .articles-pagination { min-height: 0; padding: 12px 20px 20px; }
    .reference-articles .articles-pagination .articles-load-more { width: 100%; height: auto; padding: 14px; border: 0; border-radius: 8px; background: #eef5ff; color: #4678ba; }
    .reference-articles .articles-pagination .articles-load-more:disabled { opacity: 1; background: #f7f9fb; color: #8793a3; }
    body.reference-articles { overflow-anchor: none; }
    .reference-articles .article-list-copy { min-height: 0; }
    .reference-articles .reference-editorial-main .article-card-item { min-height: 0; height: auto; padding: 16px 0; gap: 12px; }
    .reference-articles .reference-editorial-main .article-card-summary {
        margin-top: 8px;
        min-height: 0;
        max-height: 40px;
        line-height: 20px;
        padding: 0;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    .reference-articles .reference-editorial-main .article-card-meta { margin-top: 8px; line-height: 20px; }
    body.reference-articles .prediction-contact { display: none; }
    body:has(.dragon-layout) .prediction-contact { display: none; }
    .dragon-layout .dragon-selector { width: 100%; min-width: 0; max-height: none; overflow: visible; box-sizing: border-box; }
    .dragon-selector #dragonTypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; max-height: none; overflow: visible; }
    .dragon-selector #dragonTypes details { min-width: 0; margin: 0; }
    .dragon-selector #dragonTypes summary { height: auto; min-height: 44px; padding: 8px; box-sizing: border-box; white-space: nowrap; font-size: 14px; gap: 6px; }
    .dragon-selector #dragonTypes summary img { flex: none; }
    .dragon-selector #dragonTypes .dragon-chevron { flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; }
    .dragon-selector #dragonTypes label { display: flex; align-items: center; gap: 6px; padding: 8px; overflow-wrap: anywhere; }
    .dragon-selector #dragonTypes input { flex: none; }
    body:has(.prediction-shell) .prediction-contact { display: none; }
    .prediction-shell-pagination:not(.prediction-mobile-pagination) { display: none; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-summary { height: auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 12px; gap: 14px; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-summary-main { flex: none; width: 100%; transform: none; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-summary-title { width: 100%; height: auto; flex-wrap: wrap; white-space: normal; justify-content: center; gap: 4px 8px; margin-bottom: 12px; text-align: center; transform: none; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-summary-title h1 { flex-basis: 100%; line-height: 28px; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-summary-title span { font-size: 12px; line-height: 20px; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-balls { width: 100%; height: auto; padding: 0; flex-wrap: wrap; gap: 5px; justify-content: center; transform: none; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-balls b { width: 30px; height: 30px; flex: none; }
    .prediction-shell[data-family=sixmark] .prediction-shell-balls { flex-wrap: nowrap; }
    .prediction-shell[data-family=sixmark] .prediction-shell-balls i { width: 14px; padding: 0; margin: 0; flex: none; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-clock { flex: none; width: 100%; transform: none; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-clock > div { margin-top: 8px; max-width: 100%; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-tools { width: 100%; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-tools > button { min-width: 100px; padding: 0 10px; }
    .prediction-shell:is([data-family], :not([data-family])) .prediction-shell-tools .home-new-badge { top: -6px; }
    .prediction-shell .prediction-mobile-pagination { min-width: 0; width: 100%; margin: 0 0 16px; padding: 0; }
    .prediction-load-more { width: 100%; padding: 14px; border: 0; border-radius: 8px; background: #eef5ff; color: #4678ba; }
    .prediction-load-more:disabled { color: #8793a3; background: #f7f9fb; }
    .prediction-shell .prediction-play-panel { left: auto; right: 0; max-width: calc(100vw - 32px); }
    body:has(.prediction-mobile-pagination) { overflow-anchor: none; }
    .mobile-menu { height: 100dvh; max-width: 100vw; box-sizing: border-box; padding-top: 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); overscroll-behavior-y: contain; scrollbar-width: thin; }
    .mobile-menu-header { position: sticky; top: 0; height: 56px; background: #fff; z-index: 2; }
    .mobile-menu-close { width: 36px; height: 36px; top: 10px; right: 10px; }
    body:has(#mobileHistoryLoader) { overflow-anchor: none; }
    #detailHistory .history-table:not(.lhc-history-table) { table-layout: auto; }
    #detailHistory .history-table:not(.lhc-history-table) :is(th,td):first-child {
        width: 100px;
        min-width: 100px;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        box-sizing: border-box;
    }
    #detailHistory .history-table:not(.lhc-history-table) :is(th,td):nth-child(2) {
        width: 110px;
        min-width: 110px;
        white-space: nowrap;
        box-sizing: border-box;
    }
    #detailHistory:has(.history-table) .history-scroll-hint { display: block; }
    #detailLatest .detail-top[data-family] {
        height: auto;
        min-height: 0;
        padding: 16px 12px;
        gap: 12px;
        flex-direction: column;
    }
    #detailLatest .detail-top[data-family] .detail-col-main {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    #detailLatest .detail-top[data-family] .detail-row-info {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        margin-bottom: 8px;
    }
    #detailLatest .detail-top[data-family] .detail-schedule-text { white-space: normal; }
    #detailLatest .detail-top[data-family] .detail-row-numbers { width: 100%; height: auto; }
    #detailLatest .detail-top[data-family] .ball-row { flex-wrap: wrap; justify-content: center; }
    #detailLatest .detail-top[data-family] .detail-col-right { min-width: 0; max-width: 100%; height: auto; flex-wrap: wrap; }
    #detailLatest .detail-top[data-family] .detail-countdown { max-width: 100%; flex-wrap: wrap; justify-content: center; }
    #detailLatest .detail-top[data-family] .countdown-label { white-space: normal; }
    #detailLatest .detail-top[data-family=pk10] .ball-row { gap: 5px; }
    #detailLatest .detail-top[data-family=pk10] .ball { width: 30px; height: 30px; min-width: 30px; flex: none; }
    #detailHistory:has(.history-table) .history-scroll-hint {
        display: block;
        margin: 0 30px 8px;
        padding: 8px;
        border-radius: 6px;
        background: #eef5ff;
        color: #4678ba;
        font-size: 12px;
        text-align: center;
    }
    #detailHistory:has(.history-table) .history-table-wrapper {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #91b6ea #eef3f9;
    }
    /* The right-side contact control already provides customer service. */
    body:has(.lhc-history-table) .prediction-contact.lhc-contact { display: none; }
    body:has(.lhc-history-table) #detailLatest .detail-top {
        height: auto;
        min-height: 0;
        padding: 16px 12px;
        gap: 12px;
        flex-direction: column;
    }
    body:has(.lhc-history-table) #detailLatest .detail-col-logo {
        flex: none;
        height: 76px;
    }
    body:has(.lhc-history-table) #detailLatest .detail-col-main {
        flex: none;
        width: 100%;
        min-width: 0;
        margin: 0;
    }
    body:has(.lhc-history-table) #detailLatest .detail-row-info {
        height: auto;
        padding: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
    }
    body:has(.lhc-history-table) #detailLatest .detail-name {
        flex-basis: 100%;
        line-height: 28px;
    }
    body:has(.lhc-history-table) #detailLatest .detail-schedule-text {
        font-size: 12px;
        line-height: 20px;
    }
    body:has(.lhc-history-table) #detailLatest .detail-row-numbers {
        width: 100%;
        height: auto;
        margin-top: 10px;
        gap: 0;
    }
    body:has(.lhc-history-table) #detailLatest .detail-numbers .ball-row {
        width: 100%;
        gap: 5px;
        justify-content: center;
        flex-wrap: nowrap;
    }
    body:has(.lhc-history-table) #detailLatest .ball-wrapper { flex: none; }
    body:has(.lhc-history-table) #detailLatest .ball { width: 30px; height: 30px; min-width: 30px; font-size: 14px; }
    body:has(.lhc-history-table) #detailLatest .zodiac { width: 30px; }
    body:has(.lhc-history-table) #detailLatest .ball-plus { width: 14px; padding: 0; }
    body:has(.lhc-history-table) #detailLatest .lhc-summary-options { width: 100%; margin-top: 12px; }
    body:has(.lhc-history-table) #detailLatest + .detail-tools {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: auto;
        padding: 8px;
        gap: 6px 4px;
    }
    body:has(.lhc-history-table) #detailLatest + .detail-tools > a {
        height: auto;
        min-height: 34px;
        padding: 4px 2px;
        line-height: 20px;
        font-size: 13px;
        white-space: nowrap;
    }
    #detailHistory:has(.lhc-history-table) .history-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 0;
        gap: 16px;
        padding: 16px;
    }
    #detailHistory:has(.lhc-history-table) .history-header h3 { margin: 0; align-self: flex-start; }
    #detailHistory:has(.lhc-history-table) .date-filter { width: 100%; margin: 0; }
    #detailHistory .lhc-history-modes { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
    #detailHistory .lhc-history-modes button[data-history-mode=numbers] { position: static !important; }
    #detailHistory .lhc-display-filters { padding: 8px 16px 16px; }
    #detailHistory .lhc-display-filters > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    #detailHistory .lhc-display-filters strong { flex: 0 0 100%; width: auto; line-height: 22px; }
    #detailHistory .lhc-display-filters button { min-width: 48px; padding: 0 10px; }
    #detailHistory .lhc-display-filters > div:first-child button { min-width: 60px; }
    #detailHistory #lhcYearPopup {
        position: fixed;
        left: 50%;
        top: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        max-width: calc(100vw - 24px);
        z-index: 1001;
    }
    /* Fit the date, issue, six regular balls and special ball in the first view. */
    #detailHistory .lhc-history-table { width: 933px; min-width: 933px; }
    #detailHistory .lhc-history-table col:nth-child(1) { width: 80px !important; }
    #detailHistory .lhc-history-table col:nth-child(2) { width: 72px !important; }
    #detailHistory .lhc-history-table col:nth-child(3) { width: 216px !important; }
    #detailHistory .lhc-history-table col:nth-child(4) { width: 60px !important; }
    #detailHistory .lhc-history-table col:nth-child(n+5) { width: 32px !important; }
    #detailHistory .lhc-history-table col:nth-child(8),
    #detailHistory .lhc-history-table col:nth-child(9) { width: 49px !important; }
    #detailHistory .lhc-history-table col:nth-child(10) { width: 50px !important; }
    #detailHistory .lhc-history-table col:nth-child(11),
    #detailHistory .lhc-history-table col:nth-child(14),
    #detailHistory .lhc-history-table col:nth-child(15) { width: 55px !important; }
    #detailHistory .lhc-history-table col:nth-child(12),
    #detailHistory .lhc-history-table col:nth-child(13) { width: 48px !important; }
    #detailHistory .lhc-history-table th:nth-child(1)[rowspan] { width: 80px; }
    #detailHistory .lhc-history-table th:nth-child(2)[rowspan] { width: 72px; }
    #detailHistory .lhc-history-table th:nth-child(3)[rowspan] { width: 168px; }
    #detailHistory .lhc-history-table th:nth-child(4)[rowspan] { width: 64px; }
    #detailHistory .lhc-history-table th[colspan="6"] { width: 270px; }
    #detailHistory .lhc-history-table th[colspan="3"] { width: 150px; }
    #detailHistory .lhc-history-table th:nth-last-child(-n+2)[rowspan] { width: 48px; }
    #detailHistory .lhc-history-table .numbers-cell { padding: 10px 8px !important; }
    #detailHistory .lhc-history-table td:first-child { font-size: 12px; white-space: nowrap; }
    #detailHistory .lhc-history-table .numbers-cell .ball-row { flex-wrap: wrap; gap: 6px; }
    #detailHistory .lhc-history-table .ball-wrapper { flex: none; flex-direction: column; gap: 3px; }
    #detailHistory .lhc-history-table .ball { width: 26px; height: 26px; min-width: 26px; font-size: 13px; }
    #detailHistory .lhc-history-table .zodiac { font-size: 12px; }
}