/* Mobile compatibility layer for the locally hosted legacy front end. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

@media (max-width: 767px) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        margin: 0 !important;
        -webkit-tap-highlight-color: transparent;
    }

    #masthead,
    .top-black-header,
    #top-header,
    .top-menu-logo,
    .top-red-header,
    .top-menu,
    .g_w1000,
    .g_w700,
    .g_w960,
    .content.kj_box2,
    .content.kj_wd2,
    .kj_box2,
    .zst-container,
    .zst-list-box,
    #main,
    .lhome {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Compact site masthead. */
    .top-black-header {
        height: 30px !important;
    }

    #top-header {
        height: 30px !important;
        padding: 0 10px !important;
    }

    #top-header #kjb-btn,
    #top-header > div:last-child,
    .my_views {
        display: none !important;
    }

    #top-header .bullhornIcon {
        flex: 0 0 20px !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 8px 0 0 !important;
    }

    #top-header .announcement {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    #top-header .announcement marquee {
        width: 100% !important;
        display: block !important;
        font-size: 11px !important;
        color: #fff !important;
    }

    .top-menu-logo {
        height: 72px !important;
        padding: 6px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .top-menu-logo > div:first-child,
    .top-menu-logo a {
        display: block !important;
        line-height: 0 !important;
    }

    .top-menu-logo img {
        width: auto !important;
        height: 60px !important;
        max-width: min(78vw, 270px) !important;
        object-fit: contain !important;
    }

    /* Six primary links fit in two touch-friendly rows. */
    .top-red-header {
        height: auto !important;
        overflow: visible !important;
    }

    .top-menu {
        height: auto !important;
        overflow: visible !important;
    }

    .nav-menu,
    .down-menu.nav-menu {
        width: 100% !important;
        height: auto !important;
        min-height: 82px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    .nav-menu > li,
    .down-menu.nav-menu > li {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
        position: relative !important;
    }

    .top-red-header .nav-menu > li > a {
        height: 41px !important;
        padding: 0 18px 0 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .arrow-btn::after {
        top: 17px !important;
        right: 8px !important;
        border-top-width: 5px !important;
        border-left-width: 4px !important;
        border-right-width: 4px !important;
    }

    .nav-menu > li > .sub-menu {
        display: none !important;
        position: absolute !important;
        z-index: 1002 !important;
        top: 100% !important;
        left: 4px !important;
        width: min(210px, calc(100vw - 16px)) !important;
        max-height: 62vh !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        overflow-y: auto !important;
        background: #7e000f !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
    }

    .nav-menu > li:nth-child(5) > .sub-menu,
    .nav-menu > li:nth-child(6) > .sub-menu {
        right: 4px !important;
        left: auto !important;
    }

    .nav-menu > li.pb-mobile-open > .sub-menu {
        display: block !important;
    }

    .nav-menu .sub-menu li {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .top-red-header .nav-menu .sub-menu a {
        min-height: 40px !important;
        padding: 10px 16px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        border-radius: 0 !important;
    }

    /* Home cards already stack; these rules tighten spacing for phone screens. */
    .lhome {
        padding: 0 10px 22px !important;
    }

    .lhome-banner {
        margin: 10px 0 12px !important;
    }

    .lhome-list {
        gap: 9px !important;
    }

    .lhome-card__main {
        padding: 13px 12px 11px !important;
    }

    .lhome-card__actions {
        min-width: 0 !important;
    }

    .lhome-action {
        min-width: 72px !important;
        min-height: 72px !important;
    }

    .lhome-action__ico {
        height: 64px !important;
    }

    .lhome-action__ico img {
        width: 62px !important;
        height: 62px !important;
    }

    /* Standard article/call-example pages. */
    .content.kj_box2,
    .content.kj_wd2,
    .kj_box2 {
        width: calc(100% - 20px) !important;
        margin: 10px !important;
    }

    .article-content,
    .article-content .title,
    .article-content > div,
    .content > article {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .article-content > div {
        margin: 12px 0 !important;
    }

    .article-content {
        padding: 14px !important;
    }

    .article-content .title,
    h1.title {
        height: auto !important;
        min-height: 42px !important;
        padding: 10px 12px !important;
        font-size: 18px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    .article-content iframe,
    .article-content textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .article-content pre {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .article-content pre .myul {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 10px 12px 40px !important;
        box-sizing: border-box !important;
    }

    /* Filters wrap; charts keep a scrollable table, while history becomes cards. */
    .p_h_form,
    .h_form,
    .sx_form,
    .hm_form,
    .mypaper,
    #t_info {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .p_h_form,
    .h_form {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 10px !important;
        line-height: 1.8 !important;
    }

    /* Keep the year filter compact so the first result is visible on phones. */
    #history .mypaper {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 0 !important;
    }

    #history #pager {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    #history #pager a {
        float: none !important;
        width: auto !important;
        height: 42px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    #history_show_area {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html[data-mobile-history-ready="true"] #history_show_area > table {
        display: none !important;
    }

    .pb-mobile-history-list {
        width: 100% !important;
        display: block;
        background: #fff;
        border-top: 1px solid #edf0f3;
    }

    .pb-history-card {
        min-height: 104px;
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        background: #fff;
        border-bottom: 1px solid #edf0f3;
    }

    .pb-history-card__meta {
        padding: 19px 8px 12px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #757575;
        border-right: 1px solid #edf0f3;
        box-sizing: border-box;
    }

    .pb-history-card__meta strong {
        color: #d52d29;
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .pb-history-card__meta time {
        font-size: 15px;
        line-height: 1;
    }

    .pb-history-card__balls {
        min-width: 0;
        padding: 15px 12px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 5px;
        box-sizing: border-box;
    }

    .pb-history-ball {
        width: clamp(47px, 15vw, 61px);
        height: clamp(47px, 15vw, 61px);
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #171717;
        font-family: Arial, sans-serif;
        font-size: clamp(24px, 7vw, 30px);
        font-weight: 400;
        line-height: 1;
        background: #fff;
        border: 5px solid #188ecc;
        border-radius: 50%;
        box-sizing: border-box;
    }

    /* 多位开奖：按每期号码数量缩小或换行，避免手机端裁切。 */
    .pb-history-card--count-5 .pb-history-card__balls {
        padding: 10px 5px;
        gap: 2px;
        justify-content: space-between;
    }

    .pb-history-card--count-5 .pb-history-ball {
        width: clamp(31px, 10.5vw, 41px);
        height: clamp(31px, 10.5vw, 41px);
        font-size: clamp(17px, 4.8vw, 23px);
        border-width: 4px;
    }

    .pb-history-card--count-6 .pb-history-card__balls,
    .pb-history-card--count-7 .pb-history-card__balls,
    .pb-history-card--count-8 .pb-history-card__balls {
        padding: 10px 5px;
        gap: 2px;
        justify-content: space-between;
    }

    .pb-history-card--count-6 .pb-history-ball {
        width: clamp(28px, 8.5vw, 33px);
        height: clamp(28px, 8.5vw, 33px);
        font-size: clamp(16px, 4.3vw, 21px);
        border-width: 4px;
    }

    .pb-history-card--count-7 .pb-history-ball {
        width: clamp(24px, 7.5vw, 29px);
        height: clamp(24px, 7.5vw, 29px);
        font-size: clamp(14px, 3.8vw, 19px);
        border-width: 3px;
    }

    .pb-history-card--count-8 .pb-history-ball {
        width: clamp(21px, 6.5vw, 25px);
        height: clamp(21px, 6.5vw, 25px);
        font-size: clamp(13px, 3.3vw, 17px);
        border-width: 3px;
    }

    .pb-history-card--count-20 .pb-history-card__balls {
        padding: 8px 5px;
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 4px 2px;
        justify-items: center;
        align-content: center;
    }

    .pb-history-card--count-20 .pb-history-ball {
        width: clamp(16px, 5.4vw, 21px);
        height: clamp(16px, 5.4vw, 21px);
        justify-self: center;
        font-size: clamp(12px, 3.2vw, 15px);
        border-width: 3px;
    }

    .pb-history-ball.is-red {
        border-color: #e63c35;
    }

    .pb-mobile-history-empty {
        padding: 26px 12px;
        margin: 0;
        color: #888;
        font-size: 14px;
        text-align: center;
    }

    .zst-container,
    .zst-list-box,
    #main {
        overflow: visible !important;
    }

    .zst-container > .zst-container,
    .zst-container > .box,
    .zst-container .box.rel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    #main .mbar {
        width: 100% !important;
        height: auto !important;
        min-height: 42px !important;
        padding: 6px 8px !important;
        line-height: 1.8 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px 10px !important;
        box-sizing: border-box !important;
    }

    #main .mbar h3,
    #main .mbar h4,
    #main .mbar .submenus,
    #main .mbar .msize {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left !important;
    }

    #main .mbar .msize {
        flex: 1 1 100% !important;
    }

    #main .topaid,
    #main .bottomaid,
    #main .title {
        width: 100% !important;
        height: auto !important;
        min-height: 34px !important;
        padding: 7px 9px !important;
        line-height: 1.8 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    #main .chart {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    #main .chart > table,
    #main table.zst_table,
    table#chartsTable {
        width: 1198px !important;
        min-width: 1198px !important;
    }

    /* The newer data/admin tables intentionally scroll within their own card. */
    .pb-table-wrap {
        position: relative;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .pb-table th,
    .pb-table td {
        padding: 11px 12px;
    }

    .pb-toast {
        right: 10px;
        bottom: 10px;
        left: 10px;
        max-width: none;
    }

    /* Keep legacy footers and miscellaneous fixed wrappers on-canvas. */
    footer,
    .footer,
    .footer-inner,
    .copyright,
    [class*="footer"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) {
    .pb-mobile-history-list {
        display: none !important;
    }
}

@media (max-width: 359px) {
    .top-red-header .nav-menu > li > a {
        padding-left: 4px !important;
        padding-right: 13px !important;
        font-size: 12px !important;
    }

    .lhome-ball,
    .lhome-ball.is-sm {
        width: 27px !important;
        height: 27px !important;
    }
}