/* Focus Mode Fullscreen Styles - Anime Sky Theme */

/* ========================================
   TIER-BASED TEXT SIZING (Focus Mode)
   Dynamic font sizing based on text length
   ======================================== */

/* TIER 1: Short text (1-8 chars) - Full cinematic experience */
body.focus-mode .flashcard[data-text-tier="short"] {
    --text-size-ja: clamp(64px, 8vh, 108px);
    --text-size-en: clamp(48px, 5vh, 76px);
    --text-size-roma: clamp(22px, 2.2vh, 32px);
}

/* TIER 2: Medium text (9-15 chars) - Balanced layout */
body.focus-mode .flashcard[data-text-tier="medium"] {
    --text-size-ja: clamp(52px, 6.5vh, 88px);
    --text-size-en: clamp(40px, 4.5vh, 64px);
    --text-size-roma: clamp(20px, 2vh, 28px);
}

/* TIER 3: Long text (16+ chars) - Readability priority */
body.focus-mode .flashcard[data-text-tier="long"] {
    --text-size-ja: clamp(42px, 5.5vh, 72px);
    --text-size-en: clamp(32px, 4vh, 52px);
    --text-size-roma: clamp(18px, 1.8vh, 24px);
}

/* ========================================
   Channel Logo Badge - HIDDEN in all modes
   Using consistent text branding everywhere instead
   ======================================== */

/* Hidden in ALL modes - using text branding everywhere */
.channel-logo-badge {
    display: none !important;
}

/* Breathing/pulsing animation when countdown is active */
.channel-logo-badge.countdown-active img {
    animation: logoBreathePulse 2s ease-in-out infinite;
    transition: transform 0.6s ease, filter 0.6s ease, animation-duration 0.6s ease;
}

/* Progressive intensification - logo pulses faster/stronger as countdown progresses */
.channel-logo-badge[data-count="3"].countdown-active img {
    animation-duration: 2s; /* Calm at start */
}

.channel-logo-badge[data-count="2"].countdown-active img {
    animation-duration: 1.5s; /* Building intensity */
}

.channel-logo-badge[data-count="1"].countdown-active img {
    animation-duration: 1s; /* Maximum urgency */
    transform: scale(1.05); /* Slightly larger baseline */
}

@keyframes logoBreathePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 6px 20px rgba(102, 126, 234, 0.8));
    }
}

/* ========================================
   CATEGORY BADGE (Top-Right - Mirror Symmetry)
   Matches channel logo badge exactly
   ======================================== */

/* GLOBAL HIDE: Category badge disabled to reduce screen clutter */
.category-badge {
    display: none !important; /* Hidden in ALL modes */
}

/* GLASSMORPHISM PILL - Mirror of channel logo badge */
/* HIDDEN: Category badge disabled to reduce screen clutter (info already on card) */
body.video-mode .category-badge,
body.revision-mode .category-badge,
body.focus-mode .category-badge {
    display: none; /* Was: display: flex */
    align-items: center;
    gap: 18px;
    position: fixed;
    top: 40px;
    right: 40px; /* RIGHT instead of left - mirror position */
    z-index: 1000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 28px;
    border-radius: 70px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Category Name - Text on LEFT (mirrors channel name on left) */
body.video-mode .category-badge .category-badge-name,
body.revision-mode .category-badge .category-badge-name,
body.focus-mode .category-badge .category-badge-name {
    font-family: 'Quicksand', 'Varela Round', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem); /* Matches channel name size exactly */
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Category Icon - Icon on RIGHT (mirrors logo on left) */
body.video-mode .category-badge img,
body.revision-mode .category-badge img,
body.focus-mode .category-badge img {
    width: 120px; /* Matches channel logo size exactly */
    height: 120px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ========================================
   LESSON BADGE (Top-Right - Alternative to Category Badge)
   Same style as category badge, shown when lesson filter active
   ======================================== */

.lesson-badge {
    display: none; /* Hidden by default */
}

/* GLASSMORPHISM PILL - Same as category badge */
body.video-mode .lesson-badge,
body.revision-mode .lesson-badge,
body.focus-mode .lesson-badge {
    display: none; /* Will be shown via JS when lesson filter active */
    flex-direction: column;  /* Three-line layout */
    align-items: center;
    justify-content: center;
    gap: 1px;  /* Minimal spacing between lines */
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 1000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 22px;  /* Compact padding for three lines */
    border-radius: 70px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    max-width: 520px;  /* Prevent overlap with card container */
}

/* Episode Number - First line (mobile-friendly metadata size) */
body.video-mode .lesson-badge .lesson-badge-textbook,
body.revision-mode .lesson-badge .lesson-badge-textbook,
body.focus-mode .lesson-badge .lesson-badge-textbook {
    font-family: 'Quicksand', 'Varela Round', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);  /* Mobile-friendly: 29-35px */
    font-weight: 600;
    letter-spacing: 0.02em;  /* Wider spacing for episode label */
    color: rgba(255, 255, 255, 0.85);  /* Slightly brighter */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Topic Name - Second line (largest, main focus - mobile-friendly) */
body.video-mode .lesson-badge .lesson-badge-number,
body.revision-mode .lesson-badge .lesson-badge-number,
body.focus-mode .lesson-badge .lesson-badge-number {
    font-family: 'Quicksand', 'Varela Round', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);  /* Mobile-friendly: 32-45px */
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.98);  /* Brightest for main line */
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7);
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* JLPT N5 + Word Count - Third line (mobile-friendly metadata) */
body.video-mode .lesson-badge .lesson-badge-name,
body.revision-mode .lesson-badge .lesson-badge-name,
body.focus-mode .lesson-badge .lesson-badge-name {
    font-family: 'Quicksand', 'Varela Round', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);  /* Mobile-friendly: 29-35px */
    font-weight: 600;  /* Slightly lighter weight */
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.9);  /* Slightly less bright */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Screen-level Category Indicator - HIDDEN (using top-right category-badge instead) */
.screen-category-indicator {
    display: none !important; /* Hidden in all modes - using top-right badge */
}

/* Category icon (focus mode only) */
body.focus-mode .screen-category-indicator .category-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Category name (focus mode only) */
body.focus-mode .screen-category-indicator .category-label {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Video Background (Focus/Video Mode Only) - DISABLED: Using static backgrounds instead */
/*
.background-video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

body.focus-mode .background-video,
body.video-mode .background-video {
    display: block;
    animation: videoFadeIn 1s ease-out;
}

@keyframes videoFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
*/

/* Animated Clouds */
@keyframes floatCloud1 {
    0% { transform: translateX(-200px); opacity: 0.4; }
    100% { transform: translateX(calc(100vw + 200px)); opacity: 0.4; }
}

@keyframes floatCloud2 {
    0% { transform: translateX(-250px) translateY(20px); opacity: 0.3; }
    100% { transform: translateX(calc(100vw + 250px)) translateY(-20px); opacity: 0.3; }
}

@keyframes floatCloud3 {
    0% { transform: translateX(-150px); opacity: 0.5; }
    100% { transform: translateX(calc(100vw + 150px)); opacity: 0.5; }
}

.cloud {
    position: fixed;
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.8) 30%,
                rgba(255, 255, 255, 0.4) 60%,
                rgba(255, 255, 255, 0) 80%);
    border-radius: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
}

.cloud1 {
    width: 300px;
    height: 120px;
    top: 10%;
    animation: floatCloud1 45s linear infinite;
    filter: blur(2px);
}

.cloud2 {
    width: 350px;
    height: 140px;
    top: 30%;
    animation: floatCloud2 60s linear infinite;
    filter: blur(3px);
}

.cloud3 {
    width: 280px;
    height: 100px;
    top: 55%;
    animation: floatCloud3 50s linear infinite;
    filter: blur(2px);
}

/* Focus exit button - hidden in focus mode */
.focus-exit-button {
    display: none;
}

/* Video pause button - hidden by default, shown in video mode */
.video-pause-button {
    display: none;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 28px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 10003;  /* Higher than intro overlay (10002) and focus mode elements */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.video-pause-button:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body.video-mode .video-pause-button {
    display: block !important;  /* Override focus mode hiding */
}

body.video-mode.video-paused .video-pause-button {
    background: rgba(102, 126, 234, 0.8);
    border-color: rgba(102, 126, 234, 0.5);
}

/* Video mode progress indicator - show in bottom center */
body.video-mode .media-status {
    display: block !important;  /* Override focus mode hiding */
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: 500;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Video mode - ensure card number is visible in top left */
body.video-mode #card-number {
    display: inline-block !important;
    position: fixed !important;
    top: 30px !important;
    left: 30px !important;
    z-index: 10001;
}

/* Focus mode progress bar - hidden */
.focus-progress {
    display: none;
}

/* Focus mode romanization - consistent positioning */
body.focus-mode .romanization {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 15px;
    margin-bottom: 10px;
    /* Video mode matching typography with tier-based sizing */
    font-size: min(var(--text-size-roma, clamp(22px, 2.2vh, 32px)), 90cqw);
    color: #4338ca !important; /* Darker indigo for frosted background visibility */
    font-weight: 500;
    font-family: 'Quicksand', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-style: normal; /* Matching video mode - no italic */
    letter-spacing: 0.05em; /* Matching video mode - reduced from 0.1em */
    /* Pastel background container - matching video mode */
    padding: 7px 18px;
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.55) 0%,
                                rgba(248, 250, 253, 0.50) 100%); /* Subtle tint, less glow on frost */
    border-radius: 8px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(160, 174, 192, 0.08);
    box-shadow: 0 1px 3px rgba(160, 174, 192, 0.03);
    /* Enhanced text shadow for frosted glass readability */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.3);
    /* DISPLAY: inline-block already set, keep it */
    display: inline-block;
    z-index: 10;
    max-width: 90%;
    /* FORCE SINGLE LINE: No wrapping, text will be scaled instead */
    white-space: nowrap;
    overflow: visible;  /* Allow text to be measured, not clipped */
    /* Override the fadeInUp animation from components.css */
    animation: none !important;
    /* PREMIUM TRANSITIONS: Smooth font-size, letter-spacing, and state changes */
    transition:
        font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        letter-spacing 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        all 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Audio playing state - pink with shaking */
body.focus-mode .flashcard.audio-playing .romanization {
    animation: shakeRomanization 0.8s ease-in-out infinite !important;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.4) 0%, rgba(245, 87, 108, 0.3) 100%) !important;
    border: 1px solid rgba(240, 147, 251, 0.6) !important;
    box-shadow: 0 8px 35px rgba(240, 147, 251, 0.4),
                0 4px 15px rgba(245, 87, 108, 0.2) !important;
    color: #f093fb !important;
    /* Keep transition active for smooth return */
    transition: all 0.3s ease-out;
}

/* Audio fading state - pink stable, no shake */
body.focus-mode .flashcard.audio-fading .romanization {
    animation: none !important;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.35) 0%, rgba(245, 87, 108, 0.28) 100%) !important;
    border: 1px solid rgba(240, 147, 251, 0.5) !important;
    box-shadow: 0 8px 32px rgba(240, 147, 251, 0.35),
                0 4px 15px rgba(245, 87, 108, 0.18) !important;
    color: #e589f0 !important;
}

/* Audio transition state - gradual fade from white to purple */
body.focus-mode .flashcard.audio-transition .romanization {
    animation: fadeToNormal 3s ease-out forwards !important;
}

@keyframes fadeToNormal {
    0% {
        /* White state - matching new audio-playing style */
        background: rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.6);
        color: #ffffff;
    }
    60% {
        /* Mid transition */
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.08) 100%);
        border-color: rgba(102, 126, 234, 0.4);
        color: #b8c5f0;
    }
    100% {
        /* Back to ORIGINAL state - matching the base state exactly */
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-color: rgba(102, 126, 234, 0.2);
        color: #667eea;
    }
}

/* Focus Mode Main Styles with theme background */
body.focus-mode {
    overflow: hidden;
    position: relative;
    background-image: var(--category-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Gradient overlay for category theming (on top of background image) */
body.focus-mode::before,
body.video-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        var(--category-primary) 0%,
        transparent 100%
    );
    opacity: 0.3; /* Subtle tint, let background show through */
    z-index: -1; /* Above background, below content */
    pointer-events: none;
    transition: background 0.8s ease;
}

body.video-mode {
    overflow: hidden;
    position: relative;
    background-image: var(--category-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Alternative backgrounds - comment/uncomment to test different versions */
/*
body.focus-mode {
    background: url('../media/backgrounds/fuji_sunset_glow.png') center/cover no-repeat;
}

body.focus-mode {
    background: url('../media/backgrounds/fuji_cherry_blossom.png') center/cover no-repeat;
}

body.focus-mode {
    background: url('../media/backgrounds/fuji_tea_fields.png') center/cover no-repeat;
}
*/

/* Removed skyGradientShift animation - now using dynamic category colors */

body.focus-mode .top-bar,
body.focus-mode .controls,
body.focus-mode .progress-container,
body.focus-mode .navigation,
body.focus-mode .shortcuts-info,
body.focus-mode .media-status,
body.focus-mode .sakura-petal,
body.focus-mode .score-buttons {
    display: none !important;
}

body.focus-mode .container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: transparent !important;
}

body.focus-mode .flashcard-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 50px 50px 50px;  /* Extra top padding to avoid frosted glass badge overlap */
    margin: 0;
    perspective: 1000px;
    box-sizing: border-box;
}

body.focus-mode .flashcard {
    width: calc(100% - 40px);  /* 20px gap on each side */
    height: calc(100% - 40px);  /* 20px gap on top and bottom */
    max-width: 1250px;  /* Even wider for better readability */
    max-height: calc(100vh - 140px);  /* Never exceed viewport minus container padding and gaps */
    position: relative;
    transform-style: preserve-3d;
    transition: none;
    margin: 0 auto;  /* Center horizontally */
    border-radius: 0;
}

body.focus-mode .flashcard.transitioning {
    animation: none;
}

/* Card face with gradient and enhanced shadows */
body.focus-mode .card-face {
    /* Adaptive padding: scales with viewport, keeps content maximized */
    padding: clamp(30px, 4vh, 50px) clamp(40px, 5vw, 60px) !important;
    border-radius: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Frosted glass effect (lower intensity - maximum background visibility) */
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: opacity 0.3s ease-out !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;  /* Ensure padding is included in height */
    backface-visibility: visible !important;
}

/* Border color animation */
@keyframes borderColorShift {
    0%, 100% {
        border-color: rgba(135, 206, 235, 0.2);
    }
    25% {
        border-color: rgba(255, 182, 193, 0.2);
    }
    50% {
        border-color: rgba(167, 139, 250, 0.2);
    }
    75% {
        border-color: rgba(255, 218, 185, 0.2);
    }
}

body.focus-mode .card-front {
    transform: none !important;
}

body.focus-mode .card-back {
    transform: none !important;
    /* JS controls visibility - don't override with display:none */
}

/* Reset backface-visibility for standard mode - must come after focus mode styles */
body:not(.focus-mode) .card-face {
    backface-visibility: hidden !important;
}

body.focus-mode .flashcard.flipped {
    transform: none !important;
}

body.focus-mode .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.5vh, 20px);  /* Adaptive gap */
    text-align: center;
    overflow: hidden;  /* Prevent overflow */
    max-height: 100%;
    max-width: 100%;
}

/* Allow image overflow in video mode - Ken Burns needs space */
body.video-mode .card-content {
    overflow: visible;  /* Allow zoomed image to expand without clipping */
    padding-top: 35px;  /* Extra top padding to keep image below badges (30px + 5px buffer) */
}

body.focus-mode .japanese-text {
    /* Video mode matching typography with tier-based sizing */
    font-size: min(var(--text-size-ja, clamp(64px, 8vh, 108px)), 90cqw);
    font-weight: 700;
    color: #3d5a80;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-family: 'Noto Sans JP', sans-serif;
    /* Pastel background container - matching video mode */
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.92) 0%,
                                rgba(237, 241, 253, 0.88) 100%); /* Soft lavender tint */
    padding: 12px 24px;
    border-radius: 12px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(94, 114, 228, 0.15);
    box-shadow: 0 3px 12px rgba(94, 114, 228, 0.12);
    /* Enhanced text shadow for frosted glass readability */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.3);
    margin-bottom: 0;
    margin-top: clamp(30px, 4vh, 50px);
    max-width: 100%;
    /* DISPLAY: Must be inline-block for width measurement to work */
    display: inline-block;
    /* PREMIUM TRANSITIONS: Smooth font-size and letter-spacing adjustments */
    transition:
        font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        letter-spacing 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s ease-out,
        text-shadow 0.4s ease-out;
    /* FORCE SINGLE LINE: No wrapping, text will be scaled instead */
    white-space: nowrap;
    overflow: visible;  /* Allow text to be measured, not clipped */
    /* CJK text handling */
    word-break: keep-all;  /* Never break CJK characters */
}

body.focus-mode .english-text {
    /* Video mode matching typography with tier-based sizing */
    font-size: min(var(--text-size-en, clamp(48px, 5vh, 76px)), 90cqw);
    font-weight: 600;
    color: #f5716c; /* Soft coral - matching video mode */
    line-height: 1.3;
    letter-spacing: 0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Pastel background container - matching video mode */
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.9) 0%,
                                rgba(255, 245, 244, 0.86) 100%); /* Soft peachy tint */
    padding: 10px 22px;
    border-radius: 10px;
    backdrop-filter: blur(11px);
    border: 1px solid rgba(245, 113, 108, 0.15);
    box-shadow: 0 3px 10px rgba(245, 113, 108, 0.1);
    /* Enhanced text shadow for frosted glass readability */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.3);
    max-width: 100%;
    /* DISPLAY: Must be inline-block for width measurement to work */
    display: inline-block;
    /* PREMIUM TRANSITIONS: Smooth font-size and letter-spacing adjustments */
    transition:
        font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        letter-spacing 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s ease-out,
        text-shadow 0.4s ease-out;
    /* FORCE SINGLE LINE: No wrapping, text will be scaled instead */
    white-space: nowrap;
    overflow: visible;  /* Allow text to be measured, not clipped */
}

body.focus-mode .vocabulary-image {
    /* Adaptive sizing: grows to fill space but respects max bounds */
    max-width: min(900px, 85vw);
    max-height: min(900px, 65vh);
    min-height: 300px;  /* Ensure reasonable minimum size */
    width: auto;
    height: auto;
    flex: 1;  /* Allow image to grow into available space */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

/* Ken Burns Effect - Cinematic slow zoom in video mode */
body.video-mode .vocabulary-image {
    animation: kenBurnsZoom 15s ease-out forwards;  /* 15s to complete by Phase 4 end */
    transform-origin: center 45%;  /* Anchor closer to top - zoom expands down/sides more */
    /* Default size for phases with text (2-4) - smaller to accommodate 15% zoom */
    max-height: min(700px, 52vh);
    max-width: min(800px, 76vw);
    /* Premium breathing transition - organic easing, longer timing, includes position and filters */
    transition:
        max-height 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        filter 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase 1: Larger image during intro (image-only phase) */
body.video-mode .flashcard.video-phase-1 .vocabulary-image {
    max-height: min(850px, 62vh);  /* Larger but accounts for 15% zoom */
    max-width: min(850px, 82vw);
}

/* Phase 2-4: Breathing shrink animation when transitioning FROM Phase 1 */
body.video-mode .flashcard.video-phase-2 .vocabulary-image,
body.video-mode .flashcard.video-phase-3 .vocabulary-image,
body.video-mode .flashcard.video-phase-4 .vocabulary-image {
    animation: kenBurnsZoom 15s ease-out forwards, imageBreathingShrink 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Phase 5: Breathing grow animation when transitioning FROM Phase 4 */
body.video-mode .flashcard.video-phase-5 .vocabulary-image {
    animation: imageBreathingGrow 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform: scale(1.15) !important;  /* Hold at final 1.15 zoom - matches animation end */
    max-height: min(750px, 55vh);  /* Larger container for comfort */
    max-width: min(850px, 80vw);
}

/* Ken Burns zoom - completes in 15 seconds (by end of Phase 4) */
@keyframes kenBurnsZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);  /* Cinematic 15% zoom during active learning */
    }
}

/* Breathing animation - smooth resize with motion blur masking */
@keyframes imageBreathingShrink {
    0% {
        filter: blur(0px);
        opacity: 1;
    }
    40% {
        filter: blur(2px);  /* Motion blur at peak of transition */
        opacity: 0.96;      /* Subtle brightness dip masks size change */
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes imageBreathingGrow {
    0% {
        filter: blur(0px);
        opacity: 1;
    }
    40% {
        filter: blur(1.5px);  /* Lighter blur for growth */
        opacity: 0.97;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

body.focus-mode .motivation {
    display: none;
}

body.focus-mode .focus-button-card {
    display: none;
}

body.focus-mode .audio-button {
    width: 60px;
    height: 60px;
    font-size: 28px;
    bottom: 40px;
    right: 40px;
}

body.focus-mode .class-badge {
    top: 35px;
    right: 35px;
    padding: 10px 22px;
    font-size: 0.9em;
    background: linear-gradient(135deg, #87ceeb 0%, #a8d8ea 100%);
    color: #2e3f6e;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.9);
    position: absolute !important;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(135, 206, 235, 0.4);
}

/* Hide the duplicate card number on back */
body.focus-mode #card-number-back {
    display: none !important;
}

/* Style the front card number in focus mode */
body.focus-mode #card-number {
    display: inline-block !important;
    position: fixed !important;
    top: 30px !important;
    left: 30px !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 20px !important;
    border-radius: 25px;
    font-weight: 500;
    z-index: 10000 !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    line-height: 1.4;
    transform: none !important;
    /* Ensure it's not affected by card-front stacking context */
    isolation: isolate;
}

/* Ensure tooltip appears on hover regardless of card flip state */
body.focus-mode #card-number:hover .textbook-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* Ensure textbook indicator is visible in focus mode */
body.focus-mode #card-number .textbook-indicator {
    display: inline !important;
}

/* Focus mode status colors - need ID selectors for specificity */
body.focus-mode .flashcard.status-known #card-number {
    background: #16a34a !important;
    color: white !important;
    border-color: #15803d;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
}

body.focus-mode .flashcard.status-learning #card-number {
    background: #ea580c !important;
    color: white !important;
    border-color: #c2410c;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
}

/* ================================================================================
   MAGICAL & ETHEREAL LIGHTING SYSTEM (System B) - Applied to Focus Mode
   Soft pastels, gentle glows, dreamy atmosphere, floating light orbs
   ================================================================================ */

/* Base lighting variables for Magical & Ethereal */
body.focus-mode {
    --lighting-brightness: 1.0;
    --lighting-contrast: 0.95; /* Softer contrast */
    --lighting-saturation: 1.1;
    --lighting-hue: 0deg;
    --vignette-intensity: 0.15; /* Much softer vignette */
    --orb-opacity: 0.5; /* Visible orbs in focus mode */
    --halo-opacity: 0.3; /* Subtle halo */
    --color-temp: #F8F4FF; /* Soft lavender */
}

/* Ensure proper clipping */
body.focus-mode .flashcard {
    overflow: hidden;
}

body.focus-mode .card-face {
    position: relative;
    overflow: hidden;
}

/* Floating Light Orbs - Gentle drifting magical lights */
body.focus-mode .card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(200, 180, 255, var(--orb-opacity)) 0%, transparent 15%),
        radial-gradient(circle at 80% 60%, rgba(180, 255, 220, var(--orb-opacity)) 0%, transparent 12%),
        radial-gradient(circle at 50% 80%, rgba(255, 200, 220, var(--orb-opacity)) 0%, transparent 18%),
        radial-gradient(circle at 70% 20%, rgba(255, 240, 200, var(--orb-opacity)) 0%, transparent 10%);
    pointer-events: none;
    z-index: 5;
    opacity: var(--orb-opacity);
    animation: orbsFloat 15s ease-in-out infinite;
    mix-blend-mode: screen;
    transition: opacity 1000ms ease-in-out;
    border-radius: 30px;
}

@keyframes orbsFloat {
    0%, 100% {
        transform: translate(0, 0);
        filter: blur(8px);
    }
    25% {
        transform: translate(-2%, 2%);
        filter: blur(10px);
    }
    50% {
        transform: translate(1%, -1%);
        filter: blur(12px);
    }
    75% {
        transform: translate(-1%, 1%);
        filter: blur(10px);
    }
}

/* Soft Ethereal Vignette - Gentle edge darkening */
body.focus-mode .flashcard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(150, 130, 180, calc(var(--vignette-intensity) * 0.2)) 80%,
        rgba(100, 80, 150, var(--vignette-intensity)) 100%
    );
    pointer-events: none;
    z-index: 10;
    border-radius: 30px;
    transition: all 1000ms ease-in-out;
}

/* Pastel Color Temperature Overlay */
body.focus-mode .flashcard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-temp);
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 11;
    border-radius: 30px;
    transition: all 1000ms ease-in-out;
}

/* Ethereal Text Halos - Disabled, using frosted glass shadows instead for consistency with video mode */
/* body.focus-mode .japanese-text,
body.focus-mode .english-text,
body.focus-mode .romanization {
    text-shadow:
        0 0 20px rgba(200, 180, 255, 0.3),
        0 0 40px rgba(180, 200, 255, 0.2);
    transition: text-shadow 1000ms ease-in-out;
} */

/* Enchanted Spotlight - Soft magical glow */
body.focus-mode .card-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(230, 200, 255, var(--halo-opacity)) 0%,
        rgba(200, 230, 255, calc(var(--halo-opacity) * 0.5)) 30%,
        transparent 60%
    );
    pointer-events: none;
    z-index: -1;
    opacity: var(--halo-opacity);
    transition: opacity 1000ms ease-in-out;
    filter: blur(30px);
}

/* Overall soft filter on flashcard */
body.focus-mode .flashcard {
    filter:
        brightness(var(--lighting-brightness))
        contrast(var(--lighting-contrast))
        saturate(var(--lighting-saturation))
        hue-rotate(var(--lighting-hue));
    transition: filter 1000ms ease-in-out;
}

/* ========================================
   ROMANIZATION ANIMATION (Focus Mode)
   Letter-by-letter typewriter reveal on audio play
   ======================================== */

/* Romanization letters with staggered animation */
body.focus-mode .romanization .letter {
    animation: romanizationLetterType 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: inline-block;
    color: #4338ca; /* Explicit purple color matching video mode */
}

/* Preserve spaces in romanization */
body.focus-mode .romanization .letter.space {
    width: 0.25em;
    animation: none;
    opacity: 1;
}

/* Romanization Letter - Ultra-smooth typewriter effect with natural spring bounce */
@keyframes romanizationLetterType {
    0% {
        opacity: 0;
        transform: translateX(-4px) translateY(2px) scale(0.85);
        filter: blur(1px);
    }
    40% {
        opacity: 0.8;
        transform: translateX(0px) translateY(0px) scale(0.98);
        filter: blur(0px);
    }
    70% {
        opacity: 1;
        transform: translateX(0.5px) translateY(-0.5px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

/* ========================================
   PLAYLIST INTRO CARDS - FOCUS MODE
   ======================================== */

/* Intro card background image */
body.focus-mode[data-has-intro] {
    background-image: var(--intro-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hide POS badge, card number, and category badges on intro cards (front and back) */
.flashcard[data-is-intro="true"] #class-badge,
.flashcard[data-is-intro="true"] #class-badge-back,
.flashcard[data-is-intro="true"] #card-number,
.flashcard[data-is-intro="true"] #card-number-back,
.flashcard[data-is-intro="true"] .card-category-badge,
.flashcard[data-is-intro="true"] #cardCategoryBadgeBack {
    display: none !important;
}

/* Hide entire back side for intro cards (no content to show) */
.flashcard[data-is-intro="true"] .card-back {
    display: none !important;
}

/* Hide screen-category-indicator on intro cards in ALL modes */
body[data-has-intro] .screen-category-indicator {
    display: none !important;
}

/* Hide screen-category-indicator when playlist closer is visible */
#playlistCloserOverlay:not([style*="display: none"]) ~ .screen-category-indicator,
#playlistCloserOverlay[style*="display: block"] ~ .screen-category-indicator {
    display: none !important;
}

/* Lesson Name - Coral color, bigger font, bold */
body.focus-mode .flashcard[data-is-intro="true"] #japanese-text {
    font-size: clamp(36px, 5vh, 60px) !important;
    font-weight: 800 !important;
    color: #f5716c;  /* Soft coral */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 245, 244, 0.86) 100%);
    padding: 10px 22px;
    border-radius: 10px;
    backdrop-filter: blur(11px);
    border: 1px solid rgba(245, 113, 108, 0.15);
    box-shadow: 0 3px 10px rgba(245, 113, 108, 0.1);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.3);
    display: inline-block;
}

/* Lesson Metadata - Purple, extra bold */
body.focus-mode .flashcard[data-is-intro="true"] #front-romanization,
body.focus-mode .flashcard[data-is-intro="true"] #back-romanization {
    display: inline-block !important;
    font-size: clamp(18px, 2.2vh, 28px);
    font-weight: 900 !important;  /* Extra bold */
    color: #4338ca;
    padding: 6px 16px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(248, 250, 253, 0.50) 100%);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(160, 174, 192, 0.08);
    box-shadow: 0 1px 3px rgba(160, 174, 192, 0.03);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Word Count Badge - Gray, extra bold */
body.focus-mode .flashcard[data-is-intro="true"] #intro-word-count {
    display: inline-block !important;
    font-size: clamp(18px, 2vh, 26px);
    font-weight: 900;  /* Extra bold */
    color: #6b7280;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(248, 250, 252, 0.65) 100%);
    padding: 6px 16px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(107, 114, 128, 0.12);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.08);
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ========================================
   INTRO-MODE: SCREENSHOT MODE (press 'i' key)
   ======================================== */

/* Hide all text on regular vocabulary cards */
body.intro-mode:not([data-has-intro]) .japanese-text,
body.intro-mode:not([data-has-intro]) .english-text,
body.intro-mode:not([data-has-intro]) .romanization,
body.intro-mode:not([data-has-intro]) #video-mode-english,
body.intro-mode:not([data-has-intro]) #card-number,
body.intro-mode:not([data-has-intro]) .class-badge,
body.intro-mode:not([data-has-intro]) #class-badge,
body.intro-mode:not([data-has-intro]) #class-badge-back,
body.intro-mode:not([data-has-intro]) .screen-category-indicator {
    display: none !important;
}

/* Hide ALL text on intro cards, preserve layout for screenshots */
body.intro-mode[data-has-intro] .flashcard[data-is-intro="true"] #japanese-text,
body.intro-mode[data-has-intro] .flashcard[data-is-intro="true"] #front-romanization,
body.intro-mode[data-has-intro] .flashcard[data-is-intro="true"] #back-romanization,
body.intro-mode[data-has-intro] .flashcard[data-is-intro="true"] #intro-word-count {
    visibility: hidden !important;  /* Preserve layout */
    animation: none !important;  /* Instant hiding */
    transition: none !important;  /* No delays */
}

/* ========================================
   SETTINGS DRAWER in Focus Mode
   Must appear above focus-mode container (z-index: 9999)
   ======================================== */
body.focus-mode .settings-drawer-overlay {
    z-index: 10000 !important;
}

body.focus-mode .settings-drawer {
    z-index: 10001 !important;
    width: var(--drawer-width, 600px) !important;
}

/* Show controls inside settings drawer (overrides the global hide rule) */
body.focus-mode .settings-drawer .controls {
    display: flex !important;
    flex-direction: column !important;
}

/* Match standard mode stacked layout for filters */
body.focus-mode .settings-drawer .filter-row {
    flex-direction: column !important;
}

body.focus-mode .settings-drawer .filter-group {
    min-width: 100% !important;
}

/* ========================================
   ACTION BAR: Mode-Specific Button Visibility

   Button classes:
   - standard-focus-btn: Visible in Standard & Focus modes (audio, shuffle, flip)
   - video-mode-btn: Visible only in Video/Revision modes (pause)
   - standard-only-btn: Visible only in Standard mode (focus button ⛶)
   - exit-mode-btn: Visible in Focus & Video/Revision modes (exit button ✕)
   ======================================== */

/* DEFAULT STATE: Standard mode - show standard buttons, hide others */
.video-mode-btn {
    display: none !important;
}

.exit-mode-btn {
    display: none !important;
}

/* Standard-only button (Focus ⛶) - shown by default, hidden in focus/video */
.standard-only-btn {
    display: flex !important;
}

/* FOCUS MODE: Hide focus button, show exit button */
body.focus-mode .standard-only-btn {
    display: none !important;
}

body.focus-mode .exit-mode-btn {
    display: flex !important;
}

/* VIDEO/REVISION MODE: Show video buttons, hide standard buttons */
body.video-mode .video-mode-btn,
body.revision-mode .video-mode-btn {
    display: flex !important;
}

body.video-mode .standard-focus-btn,
body.revision-mode .standard-focus-btn {
    display: none !important;
}

body.video-mode .standard-only-btn,
body.revision-mode .standard-only-btn {
    display: none !important;
}

body.video-mode .exit-mode-btn,
body.revision-mode .exit-mode-btn {
    display: flex !important;
}

/* ========================================
   VIDEO/REVISION MODE: Hide Lower Third only
   Keep premium progress bar visible for testing
   ======================================== */
body.video-mode:not(.youtube-recording) .lower-third,
body.revision-mode:not(.youtube-recording) .lower-third {
    display: none !important;
}

/* ========================================
   VIDEO/REVISION MODE: Ensure Action Bar is Clickable
   High z-index and pointer-events for mouse control
   ======================================== */
body.video-mode:not(.youtube-recording) .bottom-action-bar,
body.revision-mode:not(.youtube-recording) .bottom-action-bar {
    z-index: 10000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

body.video-mode:not(.youtube-recording) .bottom-action-bar .action-btn,
body.revision-mode:not(.youtube-recording) .bottom-action-bar .action-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ========================================
   YOUTUBE RECORDING MODE: Hide Action Bar & Premium Progress
   Clean screen for professional recording
   (lower third with YouTube progress bar stays visible)
   ======================================== */
body.youtube-recording .bottom-action-bar,
body.youtube-recording .premium-progress-wrapper {
    display: none !important;
}

/* SESSION PILL positioning for focus/video/revision modes - center aligned with branding badge */
body.focus-mode .session-pill,
body.video-mode .session-pill,
body.revision-mode .session-pill {
    top: 35px !important;
    transform: translateX(-50%) !important;
}

/* HERO TOP BAR - Make buttons clickable above focus mode container (z-index: 9999) */
body.focus-mode .hero-top-bar {
    z-index: 10000 !important;
}

body.focus-mode .hero-top-bar .icon-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}