:root {
    --motion-fast: 160ms;
    --motion-normal: 240ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
    --ho-bg: #07090f;
    --ho-panel: rgba(255,255,255,.055);
    --ho-panel-strong: rgba(255,255,255,.085);
    --ho-line: rgba(255,255,255,.09);
    --ho-text-soft: rgba(255,255,255,.68);
    --ho-accent: #20c66f;
    --ho-accent-2: #39a8ff;
}

html { scroll-behavior: smooth; }
body { min-height: 100dvh; background: var(--ho-bg) !important; }
.content-wrapper { background: linear-gradient(180deg, #090b14 0%, #07090f 42%, #080713 100%) !important; }

.landing-top-banner .game-swiper,
.live-player-shell,
.game_item,
.live-room-item,
.upcoming-card,
#chatRoom {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.landing-top-banner .game-swiper {
    position: relative;
    border-radius: 10px !important;
    border: 1px solid var(--ho-line);
    box-shadow: none !important;
    transition: box-shadow var(--motion-normal) var(--motion-ease),
                transform var(--motion-normal) var(--motion-ease);
}

.landing-top-banner .game-swiper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.10) 45%, transparent 70%);
    transform: translateX(-110%);
    animation: banner-skeleton 1.4s ease-in-out infinite;
}

.landing-top-banner-image {
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 320ms ease, transform 700ms var(--motion-ease);
}

.landing-top-banner-image.is-loaded {
    opacity: 1;
    transform: scale(1);
}

#topBannerBlock.image-loaded::after {
    animation: none;
    opacity: 0;
}

.live-player-overlay {
    animation: layer-in var(--motion-normal) var(--motion-ease) both;
}

.chat-tab,
.retry-btn,
.player-ctrl-btn,
.player-danmaku-toggle,
.chat-send {
    touch-action: manipulation;
}

.chat-tab {
    position: relative;
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.chat-tab::after {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transition: transform var(--motion-normal) var(--motion-ease);
}

.chat-tab.is-active::after { transform: scaleX(1); }

[data-tab].is-active-tab {
    animation: panel-in var(--motion-normal) var(--motion-ease) both;
}

.live-room-cover,
.game_item img,
.upcoming-card {
    transition: opacity var(--motion-normal) ease,
                transform var(--motion-normal) var(--motion-ease);
}

.live-room-item,
.game_item {
    transition: transform var(--motion-fast) var(--motion-ease),
                background-color var(--motion-fast) ease,
                box-shadow var(--motion-normal) ease;
}

@media (hover: hover) {
    .landing-top-banner .game-swiper:hover { transform: translateY(-1px); }
    .live-room-item:hover,
    .game_item:hover,
    .upcoming-card:hover { transform: translateY(-1px); }
    .game_item:hover img { transform: scale(1.012); }
}

/* 九州体育 lightweight player chrome */
.home-top-entry .game-wrapper .game-wrapper_ag.game-wrapper_agbg.is-player {
    background: #05070d !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.live-player-shell,
.live-player-video {
    border-radius: 10px !important;
}
.live-player-video {
    background: #020305 !important;
    transition: opacity var(--motion-normal) ease, filter var(--motion-normal) ease;
}
.live-player-shell.is-channel-switching .live-player-video {
    opacity: .72;
    filter: saturate(.88);
}
.live-player-titlebar {
    padding: 10px 12px 30px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.54), rgba(0,0,0,0)) !important;
}
.live-player-titlebar .player-title { font-size: 13px !important; font-weight: 500 !important; }
.live-player-titlebar .player-line-info {
    background: rgba(255,255,255,.10) !important;
    border-radius: 6px !important;
}
.live-player-overlay {
    background: rgba(4,6,10,.42) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.player-loading .spinner {
    width: 42px !important;
    height: 42px !important;
    border: 2px solid rgba(255,255,255,.16) !important;
    border-top-color: var(--ho-accent) !important;
    animation: ho-spin .78s linear infinite !important;
}
.player-loading .loading-text,
.player-placeholder .placeholder-text {
    margin-top: 12px;
    color: var(--ho-text-soft) !important;
    font-size: 13px !important;
}
.player-buffering {
    top: 12px !important;
    left: auto !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,.16) !important;
    border-top-color: var(--ho-accent) !important;
    background: rgba(0,0,0,.34);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.player-corner button.player-danmaku-toggle,
.player-controls button.player-ctrl-btn,
.player-center-toggle,
.play-overlay-button {
    -webkit-tap-highlight-color: transparent;
}
.player-corner button.player-danmaku-toggle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: rgba(18,20,28,.68) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
}
.player-live-badge {
    height: 22px !important;
    border-radius: 6px !important;
    background: rgba(242, 67, 67, .90) !important;
    box-shadow: none !important;
}
.player-controls {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    height: 42px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    background: rgba(16,18,25,.78) !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-normal) ease, transform var(--motion-normal) var(--motion-ease);
}
.live-player-shell:hover .player-controls,
.live-player-shell.is-controls-visible .player-controls,
.live-player-shell.is-paused .player-controls {
    opacity: 1;
    transform: translateY(0);
}
.player-controls button.player-ctrl-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    background: transparent !important;
}
.player-controls button.player-ctrl-btn:hover { background: rgba(255,255,255,.10) !important; }
.player-controls button.player-ctrl-btn:active { transform: scale(.96) !important; }
.player-controls button.player-ctrl-btn svg { width: 20px !important; height: 20px !important; }
.player-volume-bar {
    width: 96px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--ho-accent), rgba(255,255,255,.28)) !important;
}
.player-volume-bar::-webkit-slider-thumb { width: 12px !important; height: 12px !important; box-shadow: 0 0 0 3px rgba(32,198,111,.16); }
.player-volume-bar::-moz-range-thumb { width: 12px !important; height: 12px !important; box-shadow: 0 0 0 3px rgba(32,198,111,.16); }
.player-center-toggle {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 8;
    width: 68px; height: 68px;
    margin: -34px 0 0 -34px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(20,22,30,.68);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(.94);
    transition: opacity var(--motion-normal) ease, transform var(--motion-normal) var(--motion-ease), background var(--motion-fast) ease;
}
.player-center-toggle svg { width: 32px; height: 32px; }
.live-player-shell.is-ready:hover .player-center-toggle,
.live-player-shell.is-controls-visible .player-center-toggle,
.live-player-shell.is-paused .player-center-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.live-player-shell.is-playing:not(.is-controls-visible):not(:hover) .player-center-toggle,
.live-player-shell.is-loading .player-center-toggle,
.live-player-shell.is-error .player-center-toggle,
.live-player-shell.is-placeholder .player-center-toggle,
.live-player-shell.is-iframe .player-center-toggle {
    opacity: 0;
    pointer-events: none;
}
.player-center-toggle:active { transform: scale(.95) !important; background: rgba(32,198,111,.78); }
.player-tap-feedback {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 9;
    width: 74px; height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.82);
    pointer-events: none;
}
.player-tap-feedback svg { width: 34px; height: 34px; display: none; }
.player-tap-feedback.is-play .tap-play,
.player-tap-feedback.is-pause .tap-pause { display: block; }
.player-tap-feedback.is-visible { animation: ho-tap 420ms var(--motion-ease) both; }
.play-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.18);
    cursor: pointer;
}
.play-overlay-button {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(10,12,18,.62);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.play-overlay-button svg { width: 22px; height: 22px; }

/* Lighter channel switch and cards */
.live-room-list.is-switching .live-room-item:not(.is-active) { opacity: .72; }
.live-room-item {
    border-radius: 8px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid transparent;
    transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease !important;
}
.live-room-item.is-active {
    border-left: 0 !important;
    border-color: rgba(32,198,111,.46) !important;
    background: rgba(32,198,111,.13) !important;
    box-shadow: inset 0 0 0 1px rgba(32,198,111,.06);
}
.live-room-status.is-live { background: rgba(32,198,111,.18) !important; color: #7af0a9 !important; animation: none !important; }
.cover-live-dot { background: var(--ho-accent) !important; box-shadow: 0 0 6px rgba(32,198,111,.65) !important; }
.home_page .home_sports_game-content {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px !important;
}
.home_page .game_item {
    min-height: 112px !important;
    height: auto !important;
    padding: 16px 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--ho-line) !important;
    background: var(--ho-panel) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.home_page .game_item::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ho-accent), var(--ho-accent-2));
    opacity: .72;
}
.home_page .game_item .img-right {
    opacity: .18 !important;
    max-width: 45% !important;
    height: auto !important;
    filter: saturate(.88) contrast(.96);
}
.home_page .game_item .top_game_tit { position: relative; z-index: 2; }
.home_page .game_item .top_game_tit h5 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}
.home_page .game_item .top_game_tit p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--ho-text-soft) !important;
}
.chat-tab { font-weight: 500 !important; }
#chatRoom .chat-send,
.live-player-overlay button.retry-btn {
    border-radius: 8px !important;
    background: var(--ho-accent) !important;
    color: #06100a !important;
    box-shadow: none !important;
}
#chatRoom .chat-send:disabled { background: rgba(255,255,255,.13) !important; color: rgba(255,255,255,.42) !important; }

@keyframes ho-spin { to { transform: rotate(360deg); } }
@keyframes ho-tap {
    0% { opacity: 0; transform: scale(.78); }
    28% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.14); }
}

@media (max-width: 1023px) {
    .player-controls {
        height: 38px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        opacity: 0;
        transform: translateY(8px);
        background: rgba(10,12,18,.60) !important;
    }
    .live-player-shell.is-controls-visible .player-controls,
    .live-player-shell.is-paused .player-controls {
        opacity: 1;
        transform: translateY(0);
    }
    .player-controls button.player-ctrl-btn { width: 34px !important; height: 34px !important; }
    .player-center-toggle { display: none !important; }
    .player-buffering { display: none !important; }
    .play-overlay-button { width: 42px; height: 42px; border-radius: 10px; }
    .play-overlay-button svg { width: 20px; height: 20px; }
    .home_page .home_sports_game-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
    .home_page .game_item { min-height: 96px !important; padding: 14px !important; }
    .home_page .game_item .top_game_tit h5 { font-size: 16px !important; }
    .home_page .game_item .top_game_tit p { font-size: 11px !important; }
}

@media (max-width: 480px) {
    .home_page .home_sports_game-content { grid-template-columns: 1fr; }
    .landing-top-banner .game-swiper { border-radius: 8px !important; }
    .player-controls { bottom: 5px !important; }
}

@media (max-width: 1023px) {
    body.chat-tab-active { height: 100dvh; }
    #chatRoom[data-tab="chat"].is-active-tab {
        bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
        max-height: calc(100dvh - var(--chat-fixed-top-h, 290px) - 58px - env(safe-area-inset-bottom));
    }
    .chat-tabs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

@media (max-width: 768px) {
    .yingyuchatui {
        top: calc(var(--chat-fixed-top-h, 290px) + 104px) !important;
        right: 6px !important;
        bottom: auto !important;
        width: 44px !important;
        height: 48px !important;
        z-index: 96 !important;
    }
    .yingyuchatui .launchYYButtonBox,
    .yingyuchatui #launchYYButton,
    .yingyuchatui #launchTopButton {
        width: 44px !important;
    }
    .yingyuchatui #launchYYButton,
    .yingyuchatui #launchTopButton {
        height: 48px !important;
        min-height: 48px !important;
    }
    .yingyuchatui #launchTopButton {
        display: none !important;
    }
    .yingyuchatui .launchYYButtonText {
        width: 22px !important;
        min-width: 22px !important;
        height: 40px !important;
        line-height: 40px !important;
    }
}

@keyframes banner-skeleton {
    55%, 100% { transform: translateX(110%); }
}

@keyframes layer-in {
    from { opacity: 0; transform: scale(.985); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}