/* ══════════════════════════════════════════════════════════════════
   RAFLIX · RESPONSIVE + TOUCH FIXES
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .bottom-nav { display: flex; }
    .nav-links { display: none; }
    body { padding-bottom: var(--bottom-h); }
    .cf-toast { bottom: calc(var(--bottom-h) + 1rem); }
    .cf-footer { margin-bottom: var(--bottom-h); }
}
@media (min-width: 1025px) {
    .bottom-nav { display: none; }
    #menuBtn { display: none; }
    body { padding-bottom: 0; }
    .cf-toast { bottom: 1.5rem; }
    .cf-footer { margin-bottom: 0; }
}

@media (max-width: 720px) {
    .hero-content { padding: 2rem 1.25rem 2.5rem; }
    .hero-section { min-height: 440px; height: min(85vh, 580px); }
    .hero-title { font-size: clamp(2rem, 10vw, 3rem); }
    .hero-overview { font-size: .85rem; -webkit-line-clamp: 3; }

    .details-top { flex-direction: column; align-items: flex-start; }
    .details-poster { width: 150px; margin-top: -70px; }
    .details-body { margin-top: -100px; padding: 0 1rem 2rem; }
    .details-title { font-size: 1.75rem; }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
        padding: 0 1rem 1.5rem;
    }
    .episodes-grid { grid-template-columns: 1fr; }
    .category-header { padding: 1.25rem 1rem; }
    .category-title { font-size: 1.5rem; }
    .cf-card { width: 140px; }
    .cards-scroll { padding-left: 1rem; padding-right: 1rem; gap: .875rem; }
    .row-header { padding: 0 1rem .75rem; }
    .row-title { font-size: 1.4rem; }
    .page-header { padding: 1.25rem 1rem .875rem; }
    .page-header-with-back { padding: 1rem; }
    .page-header-with-back .page-title { font-size: 1.5rem; }
    .settings-container { padding: 0 1rem 2rem; }
    .search-container { padding: calc(var(--nav-h) + 1rem) 1rem 1.5rem; }
    .search-results {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 1rem;
    }
    .player-title { font-size: 1rem; }
    .player-controls { padding: .75rem; }
    .episode-card { flex-direction: column; }
    .episode-thumb {
        width: 100%;
        border-right: none;
        border-bottom: var(--border-w-sm) solid var(--border);
    }
    .episode-info { padding: .875rem; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-left, .footer-right { justify-content: center; width: 100%; }
    .footer-divider { display: none; }

    .cf-logo { font-size: 1.5rem; }
    .nav-inner { padding: 0 1rem; }

    .play-icon {
        width: 36px;
        height: 36px;
    }
    .play-icon svg {
        width: 12px;
        height: 12px;
    }
    .card-play-overlay {
        background: rgba(0, 0, 0, .35);
    }
}

@media (max-width: 420px) {
    .cf-card { width: 125px; }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
    .hero-title { font-size: 1.9rem; }
    .empty-icon { width: 76px; height: 76px; font-size: 2.5rem; }
    .cf-btn { padding: .65rem 1.1rem; font-size: .72rem; }

    .play-icon {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
    .play-icon svg {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 360px) {
    .cf-card { width: 112px; }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .6rem; padding: 0 .75rem 1rem; }
    .hero-content { padding: 1.5rem 1rem 2rem; }
    .hero-title { font-size: 1.65rem; }
    .hero-overview { font-size: .78rem; -webkit-line-clamp: 2; }
    .hero-actions .cf-btn { font-size: .68rem; padding: .5rem .75rem; }
    .row-title { font-size: 1.2rem; }
    .row-header { padding: 0 .75rem .5rem; flex-wrap: wrap; gap: .35rem; }
    .cards-scroll { padding-left: .75rem; padding-right: .75rem; gap: .6rem; }
    .details-poster { width: 120px; }
    .details-body { padding: 0 .75rem 1.5rem; margin-top: -80px; }
    .details-title { font-size: 1.4rem; }
    .details-actions .cf-btn { font-size: .68rem; padding: .5rem .75rem; }
    .search-results { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .6rem; }
    .page-header-with-back { padding: .875rem .75rem; }
    .page-header-with-back .page-title { font-size: 1.25rem; }
    .settings-container { padding: 0 .75rem 1.5rem; }
    .footer-left { flex-wrap: wrap; justify-content: center; }
    .footer-divider { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE / TOUCH FIXES
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

    .cf-card:hover                       { transform: none; box-shadow: var(--shadow-hard-sm); }
    .cf-card:hover .card-poster-wrap img { transform: none; }
    .cf-card:hover .play-icon            { transform: none; }

    .nav-link:hover          { background: transparent; color: var(--text); border-color: transparent; box-shadow: none; transform: none; }
    .nav-link.active         { transform: none; }
    .icon-btn:hover          { background: transparent; color: var(--text); border-color: transparent; box-shadow: none; transform: none; }
    .sidebar-link:hover      { background: transparent; color: var(--text); border-color: transparent; box-shadow: none; transform: none; }
    .back-btn:hover          { background: var(--surface); color: var(--text); box-shadow: var(--shadow-hard-sm); transform: none; }
    .cf-btn:hover            { transform: none; }
    .cf-btn-primary:hover    { box-shadow: var(--shadow-hard); transform: none; }
    .cf-btn-secondary:hover  { background: var(--surface); color: var(--text); box-shadow: var(--shadow-hard-sm); transform: none; }
    .cf-btn-outline:hover    { background: transparent; color: var(--text); box-shadow: none; transform: none; }
    .cf-btn-danger:hover     { background: transparent; color: #ff3b30; box-shadow: 3px 3px 0 #ff3b30; transform: none; }
    .row-more:hover          { background: var(--surface); color: var(--text); box-shadow: none; transform: none; }
    .load-more-btn:hover     { background: var(--surface); color: var(--text); box-shadow: var(--shadow-hard); transform: none; }
    .season-tab:hover        { background: var(--surface); color: var(--text); box-shadow: none; transform: none; }
    .filter-chip:hover       { background: var(--surface); color: var(--text); box-shadow: none; transform: none; }
    .accent-dot:hover        { transform: none; box-shadow: none; }
    .cast-card:hover         { transform: none; box-shadow: var(--shadow-hard-sm); }
    .episode-card:hover      { transform: none; box-shadow: var(--shadow-hard-sm); }
    .search-bar:focus-within { transform: none; box-shadow: var(--shadow-hard); }
    .row-clear-btn:hover     { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; transform: none; }
    .card-bookmark:hover     { transform: none; box-shadow: none; }
    .player-close:hover      { transform: none; box-shadow: none; background: transparent; }
    .server-btn:hover        { background: transparent; color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.35); }

    .cf-card .card-play-overlay {
        opacity: 1;
        background: transparent;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 8px;
        pointer-events: none;
    }
    .cf-card .card-bookmark {
        opacity: 1;
        pointer-events: auto;
    }
    .play-icon {
        width: 32px;
        height: 32px;
        border-width: 2px;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
        background: var(--accent);
    }
    .play-icon svg {
        width: 12px;
        height: 12px;
        margin-left: 1px;
    }
    .cf-card:hover .play-icon {
        transform: none;
    }

    .card-play-overlay { pointer-events: none; }
    .card-bookmark     { pointer-events: auto; }

    .cf-card,
    .cf-btn,
    .icon-btn,
    .nav-link,
    .sidebar-link,
    .back-btn,
    .filter-chip,
    .season-tab,
    .server-btn,
    .load-more-btn,
    .row-more,
    .row-clear-btn,
    .accent-dot,
    .episode-card,
    .cast-card,
    .card-bookmark,
    .bottom-nav-item {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
}