/**
 * OKAY 影视 - 响应式样式
 * 适配各种屏幕尺寸
 */

/* ========== 平板端 (576px - 768px) ========== */
@media (min-width: 576px) {
    .vone {
        width: 33.333%;
    }
}

/* ========== 手机端 (max-width: 750px) ========== */
@media (max-width: 750px) {
    .menu-wrap dt {
        width: 14%;
        line-height: 68px;
        margin-top: 2px;
    }

    .menu-wrap dd {
        width: 21%;
    }

    .menua {
        font-size: 13px;
    }

    .menu-wrap dl {
        padding: 3px 0;
    }

    #topNavad img,
    #bottomNavad img,
    .topad img {
        max-height: 90px !important;
        height: 90px !important;
    }

    .links-top ul.icon-list li {
        width: 25%;
    }

    .links-top ul.icon-list li .name {
        font-size: 12px;
    }
}

/* ========== 小手机端 (max-width: 600px) ========== */
@media (max-width: 600px) {
    .vone dt {
        height: 110px;
    }

    body {
        padding-top: 95px;
        padding-bottom: 95px;
    }

    #topNavad img,
    #bottomNavad img {
        max-height: 85px !important;
        height: 85px !important;
    }

    .caption {
        padding: 0 10px;
    }

    .caption a {
        font-size: 14px;
    }

    #menu {
        padding: 12px 15px;
    }

    #menu a {
        padding: 5px 12px;
        font-size: 13px;
    }

    #search {
        padding: 12px 15px;
    }

    #s_word {
        padding: 10px 14px;
        font-size: 13px;
    }

    #searchVod {
        padding: 10px 20px;
        font-size: 13px;
    }

    .reso a {
        padding: 5px 10px;
        font-size: 12px;
    }

    .video-tabs .tab-item {
        padding: 12px 5px;
        font-size: 14px;
    }
}

/* ========== 超小屏幕 (max-width: 400px) ========== */
@media (max-width: 400px) {
    .vone {
        width: 50%;
        padding: 3px;
    }

    .vone dt {
        height: 95px;
    }

    .vone dd a h3 {
        height: 48px;
        line-height: 22px;
        font-size: 13px;
        padding: 4px;
    }

    .vone dd a h3 small {
        font-size: 9px;
        padding: 1px 3px;
    }

    .view-times {
        height: 26px;
        padding: 0 6px;
        font-size: 11px;
    }

    .view-times .views span {
        width: 12px;
        height: 12px;
    }

    #menu .nav-row {
        gap: 5px;
    }

    #menu a {
        padding: 4px 10px;
        font-size: 12px;
    }

    .links-top ul.icon-list li {
        width: 25%;
        padding: 5px 2px;
    }

    .links-top ul.icon-list li img {
        width: 40px;
        height: 40px;
    }

    .links-top ul.icon-list li .name {
        font-size: 11px;
    }
}

/* ========== 大屏幕 (min-width: 1200px) ========== */
@media (min-width: 1200px) {
    main {
        max-width: 1200px;
    }

    .vone {
        width: 25%;
    }

    .vone dt {
        height: 180px;
    }

    #float_right,
    #float_left {
        width: 120px;
    }

    #float_right img,
    #float_left img {
        width: 120px;
    }
}

/* ========== 横屏模式 ========== */
@media (orientation: landscape) and (max-height: 500px) {
    body {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    #topNavad img,
    #bottomNavad img {
        max-height: 70px !important;
        height: 70px !important;
    }

    .vone dt {
        height: 100px;
    }
}

/* ========== 打印样式 ========== */
@media print {
    #topNavad,
    #bottomNavad,
    #float_right,
    #float_left,
    .adqu {
        display: none !important;
    }

    body {
        padding: 0;
        background: #fff;
    }

    main {
        max-width: 100%;
    }
}

/* ========== 深色模式支持 ========== */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

    .logoqu {
        background-color: #2a2a2a;
    }

    #menu,
    #search,
    .caption,
    .vlist,
    .menu-wrap,
    .video-tabs {
        background: #2a2a2a;
    }

    #menu a {
        background: #3a3a3a;
        color: #ccc;
    }

    #menu a:hover {
        color: #fff;
    }

    #s_word {
        background: #3a3a3a;
        border-color: #444;
        color: #e0e0e0;
    }

    #s_word:focus {
        background: #3a3a3a;
    }

    .vone dl {
        background-color: #2a2a2a;
    }

    .vone dd a h3 {
        color: #e0e0e0;
    }

    .video-tabs .tab-item {
        color: #aaa;
    }

    .video-tabs .tab-item.active,
    .video-tabs .tab-item:hover {
        color: #ff6b35;
    }

    .reso a {
        background: linear-gradient(135deg, #3a2a2a 0%, #4a3030 100%);
        color: #ccc;
    }
}

/* ========== 高对比度模式 ========== */
@media (prefers-contrast: high) {
    a:focus,
    button:focus,
    input:focus {
        outline: 3px solid #ff6b35;
        outline-offset: 2px;
    }

    .vone dl:hover {
        border-width: 3px;
    }
}

/* ========== 减少动画模式 ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .lazyload {
        opacity: 1;
    }
}