/* ===== Responsive / Mobile ===== */

/* Desktop: hide mobile-only elements */
.mobile-tabbar { display: none; }
.mobile-nav-header { display: none; }
.hot-live-text { display: none; }
.mobile-download-btn { display: none; }
.mobile-banner { display: none; }
.screen-footer-wrapper { display: none; }

/* Tablet: <= 1400px */
@media screen and (max-width: 1400px) {
    .inner { width: 960px; }
    .living-room { height: 528px; }
    .video-section { padding-top: var(--header-height); }
    .room-list { width: 150px; }
    .room-item a { width: 132px; height: 80px; }
    .room-item a img, .room-item a .cover-placeholder { width: 128px; height: 76px; }
    .room-item a:hover .left-arrow, .room-item a.active .left-arrow { top: 31px; }
    .room-item { padding: 0 0 0 8px; }
    .hot-section { margin-top: 36px; }
    .hot-grid { gap: 16px; }
    .hot-grid .live-card .card-cover { height: 128px; }
    .anchor-section { margin-top: 64px; }
    .anchor-title-banner { top: -27px; }
    .anchor-slider { padding: 48px 30px 38px; }
    .category-section { margin-top: 36px; }
    .category-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* Small Tablet / Large Phone: <= 1024px */
@media screen and (max-width: 1024px) {
    .inner { width: 100% !important; padding: 0 16px; }
    .hot-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
}

/* Intermediate: <= 900px */
@media screen and (max-width: 900px) {
    .hot-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   MOBILE: <= 768px  —  Match m.yyzb80.com mobile layout
   Puppeteer-verified values at 375px viewport
   ========================================================= */
@media screen and (max-width: 768px) {
    :root {
        --header-height: 44px;
        --nav-header-height: 52px;
        --tabbar-height: 72px;
    }

    /* ===== Base ===== */
    body {
        font-family: "PingFang SC", tahoma, arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        font-size: 13px;
        line-height: normal;
        font-weight: 400;
        color: #333;
        background: #fff;
        padding-bottom: calc(var(--tabbar-height) + 52px);
        overflow-x: hidden;
    }

    /* ===== Fixed Header — 44px dark bar ===== */
    .header-wrapper {
        background: #1f2022 !important;
        color: #fff !important;
        box-shadow: none !important;
        font-size: 15px;
    }
    .header-wrapper.solid {
        background: #1f2022 !important;
        color: #fff !important;
    }
    .header-inner {
        width: 100%;
        height: var(--header-height);
        padding: 0 16px;
    }
    .header-logo-box {
        width: auto;
        margin-right: 0;
        display: flex;
        align-items: center;
        height: var(--header-height);
    }
    /* White logo on dark header — our logo is square (200x200) with ~30% transparent padding,
       so we scale it up to make the visible content match the reference (~112x34) */
    .header-logo { display: none !important; }
    .header-logo-active { display: inline-block !important; width: auto; height: 74px; margin: -15px 0 -15px -10px; vertical-align: middle; }
    .header-wrapper.solid .header-left { color: #fff; }

    /* Hide desktop nav elements — keep header-right for download button */
    .header-menu,
    .header-search,
    .no-login,
    .logged-in,
    .header-divider,
    .mobile-menu-toggle,
    .mobile-nav { display: none !important; }

    /* Mobile download button (original: .btn-open-app, gold bg, white text) */
    .header-right { display: flex !important; align-items: center; height: var(--header-height); }
    .mobile-download-btn {
        display: inline-block !important;
        height: 25px;
        padding: 0 10px;
        margin-right: 0;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        background: #f8c21b;
        border: none;
        border-radius: 4px;
        line-height: 25px;
        text-decoration: none;
        white-space: nowrap;
    }

    /* ===== Gold Category Nav Tabs (below header) ===== */
    /* Original: .nav-header-wrapper height=96px (44px header padding + 52px tabs)
       .home-header background=#f8c21b, .item line-height=52px, padding 0 16px
       YY brand: .item a color=#fff, .item.active a color=#fff font-weight=700 */
    .mobile-nav-header {
        display: block;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        height: var(--nav-header-height);
        background: #f8c21b;
        z-index: 998;
        overflow: hidden;
    }
    .mobile-nav-tabs {
        display: flex;
        align-items: center;
        height: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 8px;
    }
    .mobile-nav-tabs::-webkit-scrollbar { display: none; }
    .mobile-nav-tabs .nav-tab {
        flex-shrink: 0;
        padding: 0 16px;
        height: 100%;
        line-height: var(--nav-header-height);
        font-size: 15px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-tabs .nav-tab.active {
        color: #fff;
        font-weight: 700;
        font-size: 17px;
    }
    .mobile-nav-tabs .nav-tab.active::after {
        content: '';
        position: absolute;
        bottom: 7px;
        left: 45%;
        width: 8px;
        height: 4px;
        background: #fff;
        border-radius: 25px;
    }

    /* ===== Fixed Bottom Tab Bar =====
       Puppeteer-verified: .fy-footer height:72px, bg:rgba(255,255,255,0.9)
       box-shadow: rgb(241,241,241) 0px 1px 0px 0px
       .footer: flex, justify-content: space-around
       .cell-group: 48x72px, padding:7px 0, text-align:center
       .cell-group img: 48x34px
       .text-group: height:17.5px, margin-bottom:3.5px, font-size:10px,
                     font-weight:500, color:rgb(3,19,38) */
    .mobile-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--tabbar-height);
        background: rgba(255,255,255,.9);
        box-shadow: 0 1px 0 0 #f1f1f1;
        justify-content: space-around;
        align-items: stretch;
        z-index: 99;
    }
    .mobile-tabbar .tab-item {
        display: block;
        width: 48px;
        flex: 0 0 auto;
        height: 100%;
        padding: 7px 0;
        color: #031326;
        font-size: 10px;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    /* PNG icon: active/inactive toggle */
    .mobile-tabbar .tab-item .tab-icon-on,
    .mobile-tabbar .tab-item .tab-icon-off {
        display: inline;
        width: 48px;
        height: 34px;
        object-fit: contain;
    }
    .mobile-tabbar .tab-item .tab-icon-on { display: none; }
    .mobile-tabbar .tab-item .tab-icon-off { display: inline; }
    .mobile-tabbar .tab-item.active .tab-icon-on { display: inline; }
    .mobile-tabbar .tab-item.active .tab-icon-off { display: none; }
    .mobile-tabbar .tab-item.active {
        color: #031326;
    }
    .mobile-tabbar .tab-item span {
        display: block;
        height: 17.5px;
        margin-bottom: 3.5px;
        line-height: 17.5px;
    }

    /* ===== Homepage — index page ===== */

    /* Hide hero/video, anchors, categories */
    .living-room { display: none; }
    .anchor-section { display: none; }
    .category-section { display: none; }

    /* Mobile Banner — original: .home-banner margin .33rem .32rem .32rem = 16.5px 16px 16px
       .banner-swiper-container: width:100% height:2.82rem(141px) overflow:hidden border-radius:8px */
    .mobile-banner {
        display: block !important;
        margin: 16.5px 16px 16px;
        border-radius: 8px;
        overflow: hidden;
        height: 141px;
    }
    .mobile-banner-inner {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }
    .mobile-banner-inner .swiper-slide {
        border-radius: 8px;
        overflow: hidden;
    }
    .mobile-banner-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    /* Swiper pagination — original: .swiper-pagination-bullet 6x6 white 60%, active: 11px wide, #ffc71c, pill shape */
    .mobile-banner-pagination {
        text-align: right !important;
        padding-right: 11px;
        bottom: 11px !important;
    }
    .mobile-banner-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: rgba(255,255,255,.6);
        opacity: 1;
        margin: 0 4px;
    }
    .mobile-banner-pagination .swiper-pagination-bullet-active {
        width: 11px;
        background: #ffc71c;
        border-radius: 4px;
    }

    /* Appointment/Match Schedule — restyle as horizontal scroll (original: .match-swiper-container h=1.85rem=92px) */
    .appointment-section {
        margin: 0 0 16px;
        padding: 0 16px;
        overflow: hidden;
    }
    .appointment-section.inner { padding: 0 16px; width: 100%; }
    .appointment-section .swiper-btn { display: none; }
    .match-slider {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        height: 92px;
        gap: 0;
        scroll-snap-type: x mandatory;
        border: none;
        border-radius: 0;
    }
    .match-slider::-webkit-scrollbar { display: none; }
    .match-slider .match-card {
        min-width: 192px;
        max-width: 192px;
        height: 100%;
        margin-right: 12px;
        border-right: 1px solid #ddd;
        padding: 8px 14px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .match-slider .match-card:last-child { border-right: none; }
    .match-slider .match-card .match-header {
        font-size: 12px;
        margin-bottom: 8px;
    }
    .match-slider .match-card .team-name { font-size: 12px; max-width: 80px; }
    .match-slider .match-card .team-logo-img { width: 20px; height: 20px; }
    .match-slider .match-card .match-btn { font-size: 11px; padding: 2px 8px; }
    .match-slider .match-card .match-score-box .live-score { font-size: 16px; }
    .match-slider .match-card .match-score-box .match-status-text { font-size: 10px; }

    /* Announcement bar — original: .notic height 36px, bg #f5f7f9, border-radius 36px (pill shape) */
    .announcement-bar {
        margin: 0 16px 16px;
        height: 36px;
        border-radius: 36px;
        border: none;
        background: #f5f7f9;
        font-size: 12px;
    }
    .announcement-bar.inner { padding: 0 8px; width: auto !important; }
    .announcement-bar .ann-label { padding: 0 8px; font-size: 12px; border-right: none; }
    .announcement-bar .ann-content { font-size: 12px; }

    /* Hot section — primary mobile content
       Original: .hit-play padding: 0 16px 18px */
    .hot-section {
        margin-top: 0;
        padding: 0 16px 18px;
    }
    .hot-section.inner { padding: 0 16px 18px; width: 100%; }

    /* Section header — original: .hit-title height 24px, margin-bottom 10px, font-size 17px, font-weight 600 */
    .hot-section .section-header {
        display: flex;
        align-items: center;
        height: 24px;
        margin: 0 0 10px;
        padding: 0;
    }
    .section-header .hot-live-icon { display: none; }
    .section-header .hot-live-text {
        display: block;
        font-size: 17px;
        font-weight: 600;
        color: #000;
        line-height: 24px;
        margin-bottom: 0;
    }
    .section-header .more-link { font-size: 12px; margin-left: auto; }
    .section-header .more-link::after { display: none; }

    /* ===== 2-Column Card Grid — Puppeteer-verified values =====
       .hit-content: overflow:hidden, width: 343px (100% of parent)
       .hit-card: 171.5px wide (50%), margin-bottom: 10px
       :nth-child(2n) float:left padding-right:5px
       :nth-child(2n-1) float:right padding-left:5px
       .live-cover: 166.5x92.5px, border-radius: 4px
       .hit-pic: float:left, width:100%, margin-bottom:4px
       .hit-text: float:left, width:167.5px, height:17px, font-size:12px */
    .hot-grid {
        display: block;
        overflow: hidden;
        padding: 0;
        gap: 0;
        font-size: 13px;
    }
    .hot-grid .live-card {
        width: 50%;
        margin-bottom: 10px;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
        float: left;
    }
    .hot-grid .live-card:hover {
        transform: none;
        box-shadow: none;
    }
    .hot-grid .live-card:nth-child(odd) {
        float: left;
        padding-right: 5px;
    }
    .hot-grid .live-card:nth-child(even) {
        float: right;
        padding-left: 5px;
    }
    /* Cover: .hit-pic float:left width:100% margin-bottom:4px position:relative
       .live-cover: 92.5px height, border-radius 4px */
    .hot-grid .live-card .card-cover {
        height: 92px;
        padding-bottom: 0;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        float: left;
        width: 100%;
        margin-bottom: 4px;
    }
    .hot-grid .live-card .card-cover img,
    .hot-grid .live-card .card-cover .cover-placeholder {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .hot-grid .live-card:hover .card-cover img,
    .hot-grid .live-card:hover .card-cover .cover-placeholder {
        transform: none;
    }
    /* LIVE badge — .living: 37x16px, bg #fa3434, padding 0 4px, border-radius 2px
       Position: top-left (.top-left absolute top:4px margin-left:6px) */
    .hot-grid .live-card .card-cover .live-badge {
        top: 4px;
        left: 6px;
        right: auto;
        background: #fa3434;
        padding: 0 4px;
        height: 16px;
        line-height: 16px;
        font-size: 10px;
        border-radius: 2px;
    }
    .hot-grid .live-card .card-cover .live-badge .dot-live { display: none; }
    /* Bottom overlay — .bottom: absolute, height 30px, gradient, border-radius 0 0 4px 4px */
    .hot-grid .live-card .card-cover .bottom-title {
        height: 30px;
        font-size: 10px;
        padding: 0 6px 4px;
        line-height: 1;
        border-radius: 0 0 4px 4px;
    }
    .hot-grid .live-card .card-cover .bottom-title .name {
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hot-grid .live-card .card-cover .bottom-title .num {
        font-weight: 700;
    }
    /* Card title — .hit-text: float:left, height 17px, font-size 12px, overflow:hidden ellipsis */
    .hot-grid .live-card .card-title {
        height: 17px;
        line-height: 17px;
        padding: 0;
        font-size: 12px;
        border-radius: 0;
        background: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: left;
        width: 100%;
    }
    /* Hide card hover effects on mobile */
    .hot-grid .live-card .card-cover .play-icon { display: none; }
    .hot-grid .live-card .card-cover .live-mask { display: none; }
    .hot-grid .live-card .card-cover .top-tag { display: none; }

    /* ===== Hide desktop footer on mobile ===== */
    .footer-wrapper {
        display: none;
    }

    /* ===== Screen Footer — App Download Bar (above tabbar) =====
       Puppeteer: fixed, bottom: 71.5px, bg: rgba(0,0,0,0.8), height ~52px, z-index: 99 */
    .screen-footer-wrapper {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--tabbar-height);
        background: rgba(0,0,0,0.8);
        z-index: 99;
    }
    .screen-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        padding: 0 12px;
    }
    .screen-footer .screen-left {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 12px;
        overflow: hidden;
    }
    .screen-footer .screen-left .screen-close {
        width: 16px;
        height: 16px;
        cursor: pointer;
        flex-shrink: 0;
        opacity: 0.7;
    }
    .screen-footer .screen-left .screen-logo {
        height: 42px;
        width: auto;
        flex-shrink: 0;
        margin: -4px 0;
    }
    .screen-footer .screen-left span {
        white-space: nowrap;
        font-size: 12px;
    }
    .screen-footer .screen-right {
        flex-shrink: 0;
    }
    .screen-footer .screen-btn a {
        display: inline-block;
        padding: 6px 16px;
        background: #f8c21b;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Right fix */
    .right-fix { display: none !important; }
}

/* ===== Live Page Responsive ===== */
@media screen and (max-width: 768px) {
    .page-live {
        padding-top: 8px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Live page card grid — same float layout as index .hit-content */
    .page-live .live-grid {
        display: block;
        overflow: hidden;
        padding: 0;
    }
    .live-grid .live-card {
        width: 50%;
        margin-bottom: 10px;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
        float: left;
    }
    .live-grid .live-card:hover { transform: none; box-shadow: none; }
    .live-grid .live-card:nth-child(odd) { float: left; padding-right: 5px; }
    .live-grid .live-card:nth-child(even) { float: right; padding-left: 5px; }
    .live-grid .live-card .card-cover {
        height: 92px;
        padding-bottom: 0;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        float: left;
        width: 100%;
        margin-bottom: 4px;
    }
    .live-grid .live-card .card-cover img,
    .live-grid .live-card .card-cover .cover-placeholder {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .live-grid .live-card:hover .card-cover img,
    .live-grid .live-card:hover .card-cover .cover-placeholder {
        transform: none;
    }
    .live-grid .live-card .card-cover .bottom-title {
        border-radius: 0 0 4px 4px;
    }
    .live-grid .live-card .card-cover .play-icon { display: none; }
    .live-grid .live-card .card-cover .live-mask { display: none; }
    .live-grid .card-title {
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        padding: 0;
        background: none;
        float: left;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .live-grid .card-meta { display: none; }

    .live-nav {
        margin-bottom: 12px;
        padding-left: 0;
    }
    .live-nav .nav-item {
        margin-right: 20px;
        font-size: 15px;
        padding-bottom: 10px;
    }
    .live-nav .nav-item.active {
        font-size: 20px;
    }
}

/* ===== Schedule Page Mobile ===== */
/* Original: .match-wrapper 100vh, .match-list-wrapper bg #f4f4f4
   .match-card: white bg, padding-top 10.5px, padding-bottom 14px
   .top: league+time left (12px grey), status badge right (gold #ffc71c)
   .middle: team logos 20px + names 13px bold + VS 15px red bold, centered
   .bottom: scrollable avatar list */
@media screen and (max-width: 768px) {
    .page-schedule {
        padding: 0;
        padding-top: 8px;
        margin-top: 0;
        width: 100%;
        background: #fff;
    }

    .date-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px;
    }
    .date-list ul { overflow-x: auto; flex-wrap: nowrap; }
    .date-list .item {
        width: auto;
        padding: 6px 14px 8px;
    }
    .date-list .item .day { font-size: 12px; }
    .date-list .item .date { font-size: 13px; }
    .date-list .item.active .date { font-size: 17px; }
    .date-list .item.active::after { width: 40px; height: 4px; margin-top: 4px; }

    .match-list {
        width: 100%;
        min-height: auto;
        margin-top: 12px;
        background: #f4f4f4;
    }

    .match-card-full {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 10px 16px 14px;
        margin-bottom: 0;
        border-right: none;
        border-radius: 0;
        background: #fff;
        position: relative;
    }
    .match-card-full::before {
        content: '';
        position: absolute;
        top: 0;
        left: 16px;
        right: 16px;
        border-top: 1px solid #ddd;
    }
    .match-card-full:first-child::before { display: none; }

    /* Top row: league + time (left), status (right) */
    .match-card-full .mc-left {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 8px 0;
        width: 100%;
        float: none;
    }
    .match-card-full .mc-left .league-name {
        width: auto;
        font-size: 12px;
        color: #8f8f8f;
    }
    .match-card-full .mc-left .match-time {
        font-size: 12px;
        font-weight: 400;
        color: #8f8f8f;
    }

    /* Middle: teams centered with VS */
    .match-card-full .mc-center {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        float: none;
        width: 100%;
        margin-bottom: 6px;
    }
    .match-card-full .mc-center .team-row {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0;
    }
    .match-card-full .mc-center .team-row:first-child {
        margin-bottom: 0;
        flex-direction: row;
    }
    .match-card-full .mc-center .team-logo {
        width: 20px;
        height: 20px;
    }
    .match-card-full .mc-center .team-name {
        width: auto;
        max-width: 100px;
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Action / status */
    .match-card-full .mc-action {
        margin: 0;
        position: absolute;
        top: 10px;
        right: 16px;
    }
    .match-card-full .mc-action .watch-link {
        font-size: 11px;
        padding: 2px 6px;
        background: #ffc71c;
        border-radius: 3px;
        color: #fff;
        font-weight: 600;
    }
    .match-card-full .mc-action .watch-link .play-tri {
        border-left-color: #fff;
    }
}

/* ===== Room Page Mobile =====
   Reference: m.yyzb80.com/room/{id}
   Full-viewport fixed layout, no scrolling:
   Header(44px) → Video(210px) → TabBar(48px) → ChatContent(fills) → InputFooter(52px)
   Total: 44 + 210 + 48 + content + 52 = 812px viewport
   All major sections position:fixed, body bg #f4f4f4 */
@media screen and (max-width: 768px) {
    /* === Page base === */
    body[data-page="room"] .mobile-nav-header { display: none; }
    body[data-page="room"] {
        padding-top: 0;
        padding-bottom: 0;
        background: #f4f4f4;
        overflow: hidden;
        height: 100vh;
    }

    /* === Hide elements not in reference mobile room === */
    body[data-page="room"] .mobile-tabbar,
    body[data-page="room"] .screen-footer-wrapper,
    body[data-page="room"] .footer-wrapper,
    body[data-page="room"] .right-fix,
    body[data-page="room"] .announcement-bar,
    body[data-page="room"] .room-below { display: none !important; }

    /* === Main container — fill viewport below header === */
    .live-room {
        position: fixed !important;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0 !important;
        margin: 0 !important;
        background: none;
        height: auto;
        overflow: hidden;
    }
    .live-room-box {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0;
        width: 100% !important;
        height: 100%;
    }
    .live-room-box.inner { padding: 0 !important; width: 100% !important; }

    /* === Hide anchor info bar — reference doesn't have it === */
    .top-block { display: none !important; }

    /* === Video Player — 210px below header ===
       Ref: h=210px, w=100%, bg=black */
    .media {
        width: 100%;
        flex: 0 0 210px !important;
        height: 210px;
        overflow: hidden;
    }
    .center-block {
        width: 100%;
        margin: 0 !important;
        height: 100%;
    }
    .video-player {
        height: 210px !important;
        padding-bottom: 0 !important;
        background: #000;
    }
    .video-player .player-ctrl { opacity: 1; }
    .ctrl-btn { width: 28px; height: 28px; min-width: 28px; }
    .big-play-btn { width: 60px; height: 60px; }

    /* === Hide gift bar — reference has gift in footer popup === */
    .bottom-block { display: none !important; }

    /* === Chat Panel — fills remaining viewport ===
       Ref: tab(48px white) + content(fills) + footer(52px) */
    .chat {
        width: 100% !important;
        flex: 1 1 0% !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0;
        border-radius: 0 !important;
        margin: 0 !important;
        background: #f4f4f4;
        overflow: hidden;
    }

    /* == Notice bar — hidden on mobile; ref shows system msg inside chat content == */
    .chat .notice { display: none !important; }

    /* == Tab bar — matches reference .row.tab ==
       Ref: h=48px, bg=#fff, fixed at top:254px
       Items: 聊天(active fw600) | 主播 | 排行榜 | 赛程 | 关注(bg gold) */
    .chat .tab {
        display: flex;
        align-items: center;
        height: 48px;
        line-height: 48px;
        background: #fff;
        border-bottom: none;
        padding: 0;
        flex-shrink: 0;
    }
    .chat .tab-item {
        flex: 2;
        text-align: center;
        font-size: 15px;
        font-weight: 400;
        color: #333;
        height: 48px;
        line-height: 48px;
        border-bottom: 2px solid transparent;
        padding: 0;
        cursor: pointer;
    }
    .chat .tab-item.tab-active {
        font-weight: 600;
        color: #333;
        border-bottom: 2px solid #ffaf00;
    }

    /* == Chat content area — scrollable, fills remaining space == */
    .chat-center {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #f4f4f4;
        padding: 0;
    }
    .chat-panel { padding: 8px 12px; }
    .chat-list { font-size: 13px; line-height: 1.6; }
    .chat-list .msg { padding: 3px 0; word-break: break-all; }
    .chat-list .msg .user-name { font-weight: 600; margin-right: 4px; }
    .rank-panel { padding: 12px; }
    .rank-empty { color: #999; text-align: center; padding: 40px 0; font-size: 13px; }

    /* == Chat bottom / input footer ==
       Ref: .live-stream-footer h=52px fixed bottom
       .comment-footer: bg #fff, padding 8px 15px
       .comment input: h=36px, bg #f4f4f4, border-radius 36px, padding 9px 0 0 12px */
    .chat-bottom {
        flex-shrink: 0;
        height: 52px;
        padding: 8px 15px;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .chat-tools { display: none; }
    .chat-input-row {
        display: flex;
        align-items: center;
        width: 100%;
        height: 36px;
        margin: 0;
        gap: 8px;
    }
    .chat-input-row .login-hint {
        flex: 1;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
        color: #999;
        background: #f4f4f4;
        border-radius: 36px;
        padding: 0 0 0 12px;
        width: auto;
        text-align: left;
    }
    .chat-input-row .login-hint a { color: #f8c21b; }
    .chat-input-row input {
        flex: 1;
        height: 36px;
        font-size: 13px;
        color: #333;
        background: #f4f4f4;
        border: none;
        border-radius: 36px;
        padding: 0 0 0 12px;
        width: auto;
        outline: none;
    }
    .chat-input-row input::placeholder { color: #999; }
    .chat-input-row .send-btn {
        display: none;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
        padding: 0 14px;
        width: auto;
        border-radius: 4px;
        background: #f8c21b;
        color: #fff;
        border: none;
    }

    /* room-below already hidden in the hide block above */
}

/* ===== Pages without category tabs — hide nav header ===== */
@media screen and (max-width: 768px) {
    body[data-page="live"] .mobile-nav-header { display: none; }
    body[data-page="schedule"] .mobile-nav-header { display: none; }
    body[data-page="user"] .mobile-nav-header { display: none; }

    /* All pages: body padding-top clears fixed header */
    body[data-page="live"],
    body[data-page="schedule"],
    body[data-page="user"] {
        padding-top: var(--header-height);
    }

    /* Index: body padding clears header + nav tabs */
    body[data-page="index"] {
        padding-top: calc(var(--header-height) + var(--nav-header-height));
    }

    /* Remove redundant offsets — body padding handles positioning */
    body[data-page="live"] .page-live {
        padding-top: 0;
    }
    body[data-page="index"] .hot-section {
        padding-top: 0;
    }

    /* Dynamic announcement bar — override JS inline margin */
    body[data-page="live"] .announcement-bar {
        margin-top: 4px !important;
    }
    body[data-page="schedule"] .announcement-bar {
        display: none !important;
    }

    /* ===== User Page — hide desktop footer, show tabbar ===== */
    body[data-page="user"] .footer-wrapper { display: none; }
    body[data-page="user"] .right-fix { display: none !important; }
    body[data-page="user"] .screen-footer-wrapper { display: none; }
}

/* ===== Global Mobile Enhancements ===== */
@media screen and (max-width: 768px) {
    /* Improve base font size for readability */
    body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    /* Safe area for bottom-fixed elements (iPhone X+) */
    .mobile-tabbar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    }
    .screen-footer-wrapper {
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    /* Touch feedback for interactive elements */
    .match-btn:active,
    .live-card:active,
    .category-card:active { opacity: 0.8; }

    .mobile-tabbar .tab-item:active { opacity: 0.7; }

    /* Send button in chat — show when input has content */
    .chat-input-row .send-btn {
        display: none;
    }
    .chat-input-row.has-text .send-btn {
        display: inline-block;
    }
}

/* ===== Touch Device Improvements ===== */
@media (hover: none) and (pointer: coarse) {
    .live-card:hover { transform: none; box-shadow: none; }
    .category-card:hover { transform: none; }
    .anchor-card:hover { transform: none; }
    .match-btn { min-height: 36px; min-width: 60px; }
    .video-player .player-ctrl { opacity: 1; }
}