/* ========================================
   MOBILE OPTIMIZATIONS (1920x1080)
   Overlay file - include AFTER video-mode.css
   ======================================== */

/* ===== LOWER THIRD UI: MOBILE SIZES ===== */

/* Category name - REMOVED (now in top-right badge) */
.category-name {
    display: none !important;
}

/* Word counter - HIDDEN (redundant with card top-left counter) */
.word-counter {
    display: none !important;
}

/* Progress percentage - much bigger for mobile visibility */
.progress-percentage {
    font-size: 2rem !important;  /* Mobile-first: big and bold */
    font-weight: 700 !important;
    min-width: 80px !important;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* For screens narrower than 1920px (e.g., 1728x1117 MacBook) */
@media (max-width: 1920px) {
    .intro-category-name {
        font-size: clamp(5rem, 10vw, 8rem) !important;
    }

    .intro-category-subtitle {
        font-size: clamp(1.8rem, 3vw, 3rem) !important;
    }

    .intro-meta-info {
        font-size: clamp(1.3rem, 2.2vw, 2.2rem) !important;
    }
}

/* For very small screens (phone landscape) */
@media (max-width: 1280px) {
    .intro-category-name {
        font-size: clamp(4rem, 8vw, 6rem) !important;
    }

    .intro-category-subtitle {
        font-size: clamp(1.5rem, 2.5vw, 2.5rem) !important;
    }

    .intro-meta-info {
        font-size: clamp(1.1rem, 2vw, 1.8rem) !important;
    }
}

/* ===== DEBUGGING HELPER ===== */

/* Add this class to body to see safe zones */
body.show-safe-zones::after {
    content: '';
    position: fixed;
    inset: 10vh 8vw;  /* Safe zone boundaries */
    border: 3px dashed rgba(255, 0, 0, 0.5);
    pointer-events: none;
    z-index: 4200;
}

body.show-safe-zones::before {
    content: 'SAFE ZONE (YouTube UI won\'t cover this area)';
    position: fixed;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    z-index: 5000;
    pointer-events: none;
}