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

/* ===== INTRO OVERLAY: MOBILE TEXT SIZES ===== */

/* Category name - 3x bigger for mobile readability - UNMISTAKABLE */
.intro-category-name {
    font-size: clamp(8rem, 14vw, 12rem) !important;  /* Was 3.5-7rem, now 8-12rem = HUGE */
    /* CRITICAL: Strong text stroke for ANY background */
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.7);
    text-stroke: 2px rgba(0, 0, 0, 0.7);
    paint-order: stroke fill;
    /* Enhanced shadow stack */
    text-shadow:
        0 6px 30px rgba(0, 0, 0, 0.8),
        0 3px 15px rgba(0, 0, 0, 0.6),
        0 1px 5px rgba(0, 0, 0, 0.4) !important;
}

/* Subtitle - 2.5x bigger - VERY VISIBLE */
.intro-category-subtitle {
    font-size: clamp(2.5rem, 4vw, 4.5rem) !important;  /* Was 1.2-2rem, now 2.5-4.5rem */
    /* Text stroke for readability */
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.6);
    text-stroke: 1.5px rgba(0, 0, 0, 0.6);
    paint-order: stroke fill;
    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.7),
        0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Meta info - 2x bigger - CLEARLY READABLE */
.intro-meta-info {
    font-size: clamp(1.8rem, 3vw, 3rem) !important;  /* Was 1-1.4rem, now 1.8-3rem */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5);
    text-stroke: 1px rgba(0, 0, 0, 0.5);
    paint-order: stroke fill;
    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.7),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ===== SAFE ZONES: YOUTUBE UI COMPLIANCE ===== */

/* Category main - safe from top and left edges */
.intro-category-main {
    top: 10vh !important;    /* Was 8vh, now 10vh for mobile safe zone */
    left: 8vw !important;    /* Was 6vw, now 8vw */
    max-width: 75vw;         /* Prevent overflow on narrow screens */
}

/* Meta info - safe from bottom and right edges */
.intro-meta-info {
    bottom: 10vh !important; /* Was 6vh, now 10vh - YouTube UI safe zone */
    right: 8vw !important;   /* Was 6vw, now 8vw */
    max-width: 75vw;
}

/* ===== BRANDING: CHANNEL LOGO & FLAG ===== */

/* Channel logo badge - bigger and safer positioning */
.channel-logo-badge {
    top: 40px !important;  /* Match category badge position */
    left: 40px !important;
    gap: 18px !important;  /* Match category badge gap */
    padding: 14px 28px !important;  /* Match category badge padding */
    background: rgba(0, 0, 0, 0.45) !important;  /* Match category badge opacity */
    backdrop-filter: blur(12px) !important;
}

.channel-logo-badge img {
    width: 120px !important;   /* Match category badge icon size */
    height: 120px !important;
}

.channel-logo-badge .channel-name {
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;  /* Match category badge text size */
    max-width: 280px !important; /* Force text wrapping */
    line-height: 1.3 !important;
}

/* Category badge - ensure perfect symmetry with channel logo */
.category-badge {
    top: 40px !important;
    right: 40px !important;
    gap: 18px !important;
    padding: 14px 28px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
}

.category-badge img {
    width: 120px !important;
    height: 120px !important;
}

.category-badge .category-badge-name {
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
}

/* Lesson badge - same styling as category badge */
.lesson-badge {
    top: 40px !important;
    right: 40px !important;
    padding: 14px 28px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
}

.lesson-badge .lesson-badge-name {
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
}

/* Japanese flag - bigger and safer positioning */
.japanese-flag {
    top: 32px !important;
    right: 32px !important;
    transform: scale(1.3) !important;  /* 30% bigger */
}

/* Mode indicator - TOP RIGHT for revision/learn mode */
/* MATCH channel logo badge size for consistency */
.intro-mode-indicator {
    top: 40px !important;
    right: 40px !important;
    padding: 14px 28px !important;  /* Match channel logo badge */
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;  /* Match channel logo badge text */
}

/* Simple emoji flag (used in some demos) - BOTTOM RIGHT for revision mode */
.intro-flag-container {
    bottom: 32px !important;
    right: 32px !important;
    font-size: 6rem !important;  /* Bigger for mobile visibility */
}

/* ===== INTRO SCENE IMAGE: MOBILE OPTIMIZATION ===== */

/* Ensure image doesn't cover branding or text */
.intro-scene-image {
    max-width: 80% !important;   /* Bigger for playlist closer visibility */
    max-height: 80% !important;  /* Bigger for mobile viewing */
    object-fit: contain !important;
}

/* ===== GLASSMORPHISM CONTAINERS: ENHANCED READABILITY ===== */

/* Stronger glassmorphism for better text background separation */
.intro-category-main {
    background: rgba(0, 0, 0, 0.6) !important;  /* Was 0.4, now 0.6 - darker */
    backdrop-filter: blur(25px) saturate(150%) !important;  /* More blur */
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;  /* Thicker border */
    padding: 2.5rem 4rem !important;  /* More padding for breathing room */
}

.intro-meta-info {
    background: rgba(0, 0, 0, 0.5) !important;  /* Was 0.35, now 0.5 */
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    padding: 1.5rem 2.5rem !important;
}

/* ===== 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;
    }

    .channel-logo-badge img {
        width: 100px !important;  /* Slightly smaller for very narrow screens */
        height: 100px !important;
    }

    .category-badge img {
        width: 100px !important;  /* Match channel logo on narrow screens */
        height: 100px !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: 99999;
}

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: 100000;
    pointer-events: none;
}