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

/* Hide gesture hints when not in focus mode (defensive cleanup) */
body:not(.focus-mode) .mf-gesture-hint,
body:not(.focus-mode) .tf-gesture-hint {
    display: none !important;
}

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

/* 🔧 REVERTED: Typography tier ranges (Original immersive sizes)
   Full cinematic experience restored. Focus mode should feel big and immersive.
   User feedback: previous reduction was too conservative. */

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

/* ❌ HIDE: Cherry Blossoms & Japanese Flag in Focus Mode (和の感性 — subtraction, item 1f)
   Falling petals are charming decoration but actively distract during immersive study.
   Focus mode should be distraction-free reading environment. */
body.focus-mode .cherry-petal,
body.focus-mode .japanese-flag {
    display: none !important;
}

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

/* ========================================
   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(44, 44, 44, 0.45);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    padding: 10px 22px;  /* Compact padding for three lines */
    border-radius: var(--radius-full);
    box-shadow: 0 4px 24px rgba(44, 44, 44, 0.3);
    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: var(--font-ui);
    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(44, 44, 44, 0.42);
    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: var(--font-ui);
    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(44, 44, 44, 0.42);
    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: var(--font-ui);
    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(44, 44, 44, 0.42);
    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 */
}

/* 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 */
/* ❌ REMOVED: Cloud Animations (和の感性 — subtraction, item 1e)
   Three .cloud elements with infinite floatCloud animations (45s, 60s, 50s durations).
   Moving clouds over scenic backgrounds add visual distraction during study.
   Scenic backgrounds already have atmospheric context. */

/* 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: var(--radius-full);
    background: rgba(44, 44, 44, 0.5);
    backdrop-filter: blur(6px);
    color: white;
    font-size: 28px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 2500;  /* Higher than intro overlay (2400) and focus mode elements */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(44, 44, 44, 0.18);
}

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

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

body.video-mode.video-paused .video-pause-button {
    background: rgba(61, 90, 128, 0.8);
    border-color: rgba(61, 90, 128, 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: 2300;
    background: rgba(44, 44, 44, 0.5);
    backdrop-filter: blur(6px);
    color: white;
    padding: 12px 30px;
    border-radius: var(--radius-xl);
    font-size: 1em;
    font-weight: 500;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(44, 44, 44, 0.18);
    white-space: nowrap;
}

/* Video mode card-number + class-badge — positioning + visibility now
   handled by the unified cream chip rules above (body.focus-mode,
   body.video-mode, body.revision-mode combined selectors). Only the
   z-index lift survives here, in case any overlay sits above 2200. */
body.video-mode #card-number,
body.video-mode #class-badge {
    z-index: 2300;
}

/* Video mode — Logo inside card, bottom-left */
body.video-mode #logoWatermark {
    position: absolute !important;
    bottom: 25px !important;
    left: 25px !important;
    top: auto !important;
    right: auto !important;
    z-index: 10;
}

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

/* Romanization container (和の感性 — palette unified, subtle frosted backing restored)
   Warm gray text with light frosted pill for readability against scenic backgrounds.
   Hierarchy: Japanese > English > Romanization (smallest, lightest). */
body.focus-mode .romanization {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: min(var(--text-size-roma, clamp(22px, 2.2vh, 32px)), 90cqw);
    color: #4A4642;
    font-weight: 500;
    font-family: var(--font-ui);
    font-style: normal;
    letter-spacing: 0.05em;
    /* Subtle frosted backing — enough to read against any background */
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    text-shadow: 0 1px 3px rgba(44, 44, 44, 0.12);
    display: inline-block;
    z-index: 10;
    max-width: 90%;
    white-space: nowrap;
    overflow: visible;
    animation: none;
    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),
        background 2.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Audio playing state — subtle warmth shift, no border (和の感性: understated) */
body.focus-mode .flashcard.audio-playing .romanization {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.25);
    transition: background var(--duration-slow) ease, border-color var(--duration-slow) ease;
}

/* 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,
body.revision-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;
}

/* =============================================================================
   FOCUS MODE: Background layer (same technique as video-mode)
   iOS WebKit needs this ::after element to reliably render CSS variable backgrounds
   ============================================================================= */
body.focus-mode::after {
    content: '';
    position: fixed;
    inset: -2%; /* Slight overflow to prevent edge artifacts */
    background-image: var(--category-background);
    background-size: cover;
    background-position: center;
    z-index: -2; /* Behind everything including ::before overlay */
    pointer-events: none;
}

/* 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 {
    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: 2100;
    background: transparent;
}

body.focus-mode .flashcard-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;  /* Uniform padding for centered layout */
    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;
}

/* 🔧 REFINED: Card face outer container (和の感性 — refinement, item 2f)
   Reduced to nearly invisible - just a subtle veil defining card boundary.
   Text elements have their own frost containers, so outer card should be minimal.
   Removed saturate(), border, inset shadow. Reduced opacity 12% → 5%. */
body.focus-mode .card-face {
    /* Adaptive padding: scales with viewport, keeps content maximized */
    padding: clamp(30px, 4vh, 50px) clamp(40px, 5vw, 60px);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Minimal frosted glass - nearly invisible, lets scenic background breathe */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: none;
    box-shadow: none;
    transition: opacity 0.3s ease-out;
    width: 100%;
    height: 100%;
    box-sizing: border-box;  /* Ensure padding is included in height */
    backface-visibility: visible;
}

/* ❌ REMOVED: borderColorShift keyframe (和の感性 — subtraction, item 1h)
   Animated border colors cycling through 4 pastels. Decorative cycling with no current usage.
   Dead code cleanup. */

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

body.focus-mode .card-back {
    transform: none;
    /* 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;
}

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

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) */
}

/* 🔧 REFINED: Japanese text container (和の感性 — refinement, item 2c + palette unification)
   Simplified frosted glass: flat white 65%, no gradient tint, no border/shadow.
   Color unified with grid mode: warm charcoal #3D3835 (close to grid's sumi ink #332F2B).
   Same ink in a different room. Passes WCAG AAA: ~6.5:1 contrast. */
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: 600;
    color: #3D3835;  /* Warm charcoal - unified with grid's sumi ink palette */
    line-height: 1.7;
    letter-spacing: 0.04em;
    font-family: var(--font-jp);
    /* Simplified frosted glass - flat white, no tint */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: var(--radius);
    border: none;
    box-shadow: none;
    /* Single subtle text-shadow for legibility */
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
    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 var(--duration-slow) ease-out,
        text-shadow var(--duration-slow) 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 */
}

/* 🔧 REFINED: English text container (和の感性 — refinement, item 2d + palette unification)
   Simplified frosted glass: flat white 60%, no gradient tint, no border/shadow.
   Color unified: warm stone #57534e (和の感性 cross-mode consistency).
   English recedes as secondary text, never competing with Japanese.
   Passes WCAG AA Large at 48px+. */
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: var(--color-stone); /* Warm stone - unified across all modes */
    line-height: 1.3;
    letter-spacing: 0.02em;
    font-family: var(--font-ui);
    /* Simplified frosted glass - flat white, no tint */
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: var(--radius);
    border: none;
    box-shadow: none;
    /* Single subtle text-shadow for legibility */
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
    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 var(--duration-slow) ease-out,
        text-shadow var(--duration-slow) 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 {
    /* Hidden in focus mode - scenic backgrounds provide visual context */
    display: none !important;
}

/* 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(1px);  /* 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;
}

/* POS Badge — viewport-fixed cream chip, paired with the freq chip on the
   right edge. Order L→R: POS · Freq. Same chip system as #card-number and
   .freq-tier — surface harmony, italic-serif content (dictionary convention).
   JS toggles display via _focusRevealed (hidden on question side, shown on answer). */
body.focus-mode #class-badge,
body.video-mode #class-badge,
body.revision-mode #class-badge {
    position: fixed;
    top: 20px;
    right: 140px; /* leaves room for ~110px freq chip + 10px gap */
    left: auto;
    bottom: auto;
    z-index: 2200;

    /* Cream frosted pill — chip system */
    background: rgba(250, 247, 242, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 1px 3px rgba(60, 52, 40, 0.08);
    border-radius: var(--radius-xl);
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    line-height: 1;

    /* Italic serif — dictionary annotation feel ("n.", "v.") */
    font-family: 'Noto Serif JP', serif;
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--color-stone);
    text-transform: lowercase;
    text-shadow: none;
    opacity: 1;
    transition: opacity 0.3s ease, background 0.3s ease;
    transform: none;
    white-space: nowrap;
    isolation: isolate;
}

body.focus-mode #class-badge:hover,
body.video-mode #class-badge:hover,
body.revision-mode #class-badge:hover {
    background: rgba(250, 247, 242, 0.88);
}

/* Hide back-face duplicate — only need one fixed badge */
body.focus-mode #class-badge-back,
body.video-mode #class-badge-back,
body.revision-mode #class-badge-back {
    display: none !important;
}

/* Logo watermark — inside card, bottom-left corner */
body.focus-mode #logoWatermark {
    position: absolute;
    bottom: 20px;
    left: 20px;
    top: auto;
    right: auto;
    z-index: 10;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

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

/* Card number badge — cream chip with serif tabular numerals.
   Mirrors the freq chip on the right edge; "2 / 1120" reads as a self-
   contained fraction, no prefix needed (the format disambiguates). */
body.focus-mode #card-number,
body.video-mode #card-number,
body.revision-mode #card-number {
    display: inline-flex !important; /* Override JS inline style.display */
    position: fixed;
    top: 20px;
    left: 20px;
    bottom: auto;
    right: auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    z-index: 2200;
    pointer-events: auto;

    /* Cream frosted pill — chip system */
    background: rgba(250, 247, 242, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 1px 3px rgba(60, 52, 40, 0.08);
    border-radius: var(--radius-xl);
    height: 36px;
    padding: 0 14px;
    align-items: center;
    line-height: 1;

    /* Serif tabular numerals — matches freq chip numeral */
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--color-stone);
    text-shadow: none;
    white-space: nowrap;
    transform: none;
    opacity: 1;
    transition: opacity 0.3s ease, background 0.3s ease;
    isolation: isolate;
}

body.focus-mode #card-number:hover,
body.video-mode #card-number:hover,
body.revision-mode #card-number:hover {
    background: rgba(250, 247, 242, 0.88);
}

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

/* 🔧 REFINED: Status dot (和の感性 — refinement, item 2b)
   Hidden in immersive focus mode - per-card status is not actionable during study.
   Status reflected in progress bar and mark known/learning buttons. */
body.focus-mode .status-dot {
    display: none !important;
}

/* Hide tooltip in focus mode (card number is styled differently) */
body.focus-mode .card-info-tooltip {
    display: none;
}

/* ================================================================================
   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 */
/* ❌ REMOVED: Floating orbs (和の感性 — subtraction)
   Four layered radial gradients with 15s animation, screen blend mode.
   Pure decoration with zero learning value. */

/* ❌ REMOVED: Vignette (和の感性 — subtraction, item 1b)
   Purple-tinted vignette edge darkening at z-index 10.
   Decorative film-like effect that doesn't exist in grid mode. */

/* ❌ REMOVED: Color Temperature Overlay (和の感性 — subtraction, item 1c)
   Lavender color wash at 8% opacity with overlay blend mode at z-index 11.
   Compounds with vignette and orbs to create 3 decorative pseudo-element layers. Grid has zero. */

/* 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.18),
        0 0 40px rgba(180, 200, 255, 0.12);
    transition: text-shadow 1000ms ease-in-out;
} */

/* ❌ REMOVED: Enchanted Spotlight (和の感性 — subtraction, item 1d)
   180% wide blurred purple-blue spotlight halo centered on content.
   Fourth decorative layer with zero pedagogical value. */

/* ❌ REMOVED: Filter chain on flashcard (和の感性 — subtraction, item 1g)
   Global filter chain (brightness/contrast/saturate/hue) creates stacking context and adds processing overhead.
   Contrast reduction (0.95) and saturation boost (1.1) should be addressed at color level, not as global filter.
   Grid mode uses no filter on cards. */

/* ================================================================
   和の感性 Phase 3: Subtraction — ACTUAL DISPLAY RULES
   Hide all decorative pseudo-elements. Must be outside media queries.
   ================================================================ */
body.focus-mode .card-face::after {
    display: none !important;
}

body.focus-mode .flashcard::before {
    display: none !important;
}

body.focus-mode .flashcard::after {
    display: none !important;
}

body.focus-mode .card-content::before {
    display: none !important;
}

body.focus-mode .cloud,
body.focus-mode .cloud1,
body.focus-mode .cloud2,
body.focus-mode .cloud3 {
    display: none !important;
}

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

/* Romanization letters with staggered animation (palette unified + visibility fix) */
body.focus-mode .romanization .letter {
    animation: romanizationLetterType 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: inline-block;
    color: #4A4642; /* Darker warm gray - improved visibility */
}

/* Preserve spaces in romanization */
body.focus-mode .romanization .letter.space {
    width: 0.25em;
    animation: none;
    opacity: 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;
}


/* Lesson Name - Coral color, bigger font, bold */
body.focus-mode .flashcard[data-is-intro="true"] #japanese-text {
    font-size: clamp(36px, 5vh, 60px);
    font-weight: 800;
    color: var(--color-stone);  /* Warm stone - unified palette */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.54) 0%,
        rgba(255, 245, 244, 0.52) 100%);
    padding: 10px 22px;
    border-radius: var(--radius);
    backdrop-filter: blur(7px);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 3px 10px rgba(44, 44, 44, 0.04);
    text-shadow:
        0 2px 8px rgba(44, 44, 44, 0.09),
        0 4px 16px rgba(44, 44, 44, 0.06),
        0 1px 2px rgba(255, 255, 255, 0.18);
    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;  /* Extra bold */
    color: #6B5E57;
    padding: 6px 16px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.33) 0%,
        rgba(248, 250, 253, 0.3) 100%);
    border-radius: var(--radius);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(160, 174, 192, 0.08);
    box-shadow: 0 1px 3px rgba(160, 174, 192, 0.02);
    text-shadow:
        0 2px 8px rgba(44, 44, 44, 0.09),
        0 4px 16px rgba(44, 44, 44, 0.06),
        0 1px 2px rgba(255, 255, 255, 0.18);
}

/* 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.42) 0%,
        rgba(248, 250, 252, 0.39) 100%);
    padding: 6px 16px;
    border-radius: var(--radius-xl);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(107, 114, 128, 0.12);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.05);
    text-shadow:
        0 1px 4px rgba(44, 44, 44, 0.06),
        0 1px 2px rgba(255, 255, 255, 0.24);
}

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

/* ========================================
   FOCUS MODE: Hide Quiz & Shuffle
   Focus mode is for deep study - no distractions
   ======================================== */

/* Nav panel buttons */
body.focus-mode #navQuizBtn {
    display: none !important;
}

/* Bottom action bar groups */
body.focus-mode #quizGroup {
    display: none !important;
}

/* Hide lesson badge in Focus mode - less clutter */
body.focus-mode .lesson-badge {
    display: none !important;
}

/* Hide top-left branding in Focus mode - logo on card is enough */
body.focus-mode .app-branding-topleft {
    display: none !important;
}

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

   Button classes:
   - standard-focus-btn: Visible in Standard & Focus modes (audio, 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;
}

/* Hide entire button groups in video/revision mode */
body.video-mode .standard-focus-group,
body.revision-mode .standard-focus-group {
    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 .lower-third,
body.revision-mode .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 .bottom-action-bar,
body.revision-mode .bottom-action-bar {
    z-index: 2200;
    pointer-events: auto;
    cursor: pointer;
}

body.video-mode .bottom-action-bar .action-btn,
body.revision-mode .bottom-action-bar .action-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* 🔧 REFINED: Bottom Action Bar (和の感性 — Section 5, Option A)
   Minimal styling when visible. Auto-hide already implemented (lines 1548-1565).
   Transparent background with subtle frost, icon-only buttons, minimal hover states. */
body.focus-mode .bottom-action-bar {
    background: rgba(44, 44, 44, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

body.focus-mode .bottom-action-bar .action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    transition: color 0.2s ease, background 0.2s ease;
}

body.focus-mode .bottom-action-bar .action-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

body.focus-mode .bottom-action-bar .action-btn:active {
    color: white;
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.95);
}

body.focus-mode .bottom-action-bar .action-btn.btn-known.active {
    background: rgba(163, 177, 138, 0.2);
    color: #a3b18a;
}

body.focus-mode .bottom-action-bar .action-btn.btn-learning.active {
    background: rgba(201, 169, 110, 0.2);
    color: var(--color-gold);
}

/* ========================================
   Status indicators on card — desktop focus & video/play modes
   Card-number pill tint + momentary flash on change
   ======================================== */

/* Card-number status tint — recolor text only, keep cream chip surface.
   Matches the freq chip pattern (chip stays cream, color carries the signal). */
body.focus-mode .flashcard.status-known .card-number,
body.video-mode .flashcard.status-known .card-number,
body.revision-mode .flashcard.status-known .card-number {
    color: #4e6b42 !important; /* darker moss for AA on cream */
}

body.focus-mode .flashcard.status-learning .card-number,
body.video-mode .flashcard.status-learning .card-number,
body.revision-mode .flashcard.status-learning .card-number {
    color: #8a6325 !important; /* darker gold for AA on cream */
}

/* Persistent card status — desktop focus mode */
body.focus-mode:not(.mobile-focus) .flashcard.status-known .card-face {
    box-shadow: inset 0 -3px 0 0 rgba(163, 177, 138, 0.5);
}

body.focus-mode:not(.mobile-focus) .flashcard.status-learning .card-face {
    box-shadow: inset 0 -3px 0 0 rgba(201, 169, 110, 0.5);
}

/* Persistent card status — video/play mode */
body.video-mode .flashcard.status-known .card-face,
body.revision-mode .flashcard.status-known .card-face {
    box-shadow: inset 0 -3px 0 0 rgba(163, 177, 138, 0.5);
}

body.video-mode .flashcard.status-learning .card-face,
body.revision-mode .flashcard.status-learning .card-face {
    box-shadow: inset 0 -3px 0 0 rgba(201, 169, 110, 0.5);
}

/* Momentary flash when status changes */
@keyframes statusFlashKnown {
    0% { box-shadow: inset 0 0 0 3px rgba(163, 177, 138, 0.6); }
    100% { box-shadow: inset 0 -3px 0 0 rgba(163, 177, 138, 0.5); }
}

@keyframes statusFlashLearning {
    0% { box-shadow: inset 0 0 0 3px rgba(201, 169, 110, 0.6); }
    100% { box-shadow: inset 0 -3px 0 0 rgba(201, 169, 110, 0.5); }
}

@keyframes statusFlashClear {
    0% { box-shadow: inset 0 0 0 3px rgba(156, 163, 175, 0.4); }
    100% { box-shadow: none; }
}

body.focus-mode .flashcard.status-flash-known .card-face,
body.video-mode .flashcard.status-flash-known .card-face,
body.revision-mode .flashcard.status-flash-known .card-face {
    animation: statusFlashKnown 0.6s ease-out forwards;
}

body.focus-mode .flashcard.status-flash-learning .card-face,
body.video-mode .flashcard.status-flash-learning .card-face,
body.revision-mode .flashcard.status-flash-learning .card-face {
    animation: statusFlashLearning 0.6s ease-out forwards;
}

body.focus-mode .flashcard.status-flash-clear .card-face,
body.video-mode .flashcard.status-flash-clear .card-face,
body.revision-mode .flashcard.status-flash-clear .card-face {
    animation: statusFlashClear 0.6s ease-out forwards;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.focus-mode .flashcard[class*="status-flash"] .card-face,
    body.video-mode .flashcard[class*="status-flash"] .card-face,
    body.revision-mode .flashcard[class*="status-flash"] .card-face {
        animation: none;
    }
}

/* Hide group labels in focus mode - icon-only for maximum minimalism */
body.focus-mode .bottom-action-bar .group-label {
    display: none;
}



/* 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;
    transform: translateX(-50%);
}

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

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

/* ========================================
   ACCESSIBILITY: Reduced Motion
   Disable decorative elements for users who prefer reduced motion
   ======================================== */

/* ➕ ADDITION: prefers-reduced-motion enhancement (和の感性 — Section 3)
   Defense-in-depth: Even if decorative elements remain in future iterations,
   they're disabled for accessibility. Grid mode already respects reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    body.focus-mode .card-face::after,
    body.focus-mode .flashcard::before,
    body.focus-mode .flashcard::after,
    body.focus-mode .card-content::before {
        display: none !important;
    }

    body.focus-mode .cloud,
    body.focus-mode .cherry-petal,
    body.focus-mode .japanese-flag {
        display: none !important;
    }
}

/* ========================================
   SMALLER DESKTOP SCREENS (13-inch MacBooks, etc.)
   Height-based responsive adjustments
   ======================================== */

/* Screens with limited vertical height (13-inch displays typically 800-960px) */
@media (max-height: 900px) {
    body.focus-mode .flashcard-container {
        padding: 30px;  /* Reduced from 50px */
    }

    body.focus-mode .flashcard {
        max-height: calc(100vh - 80px);  /* Reduced from 140px */
    }

    body.focus-mode .card-face {
        padding: clamp(20px, 3vh, 35px) clamp(30px, 4vw, 45px);
    }

    /* Dead: .vocabulary-image hidden with display:none !important (B8-10) */

    body.focus-mode .japanese-text {
        margin-top: clamp(15px, 2vh, 30px);
        font-size: min(var(--text-size-ja, clamp(52px, 7vh, 88px)), 85cqw);
    }

    body.focus-mode .english-text {
        font-size: min(var(--text-size-en, clamp(40px, 4.5vh, 64px)), 85cqw);
    }

    body.focus-mode .romanization {
        font-size: min(var(--text-size-roma, clamp(18px, 2vh, 28px)), 85cqw);
        margin-top: 10px;
        margin-bottom: 8px;
    }

    body.focus-mode .card-content {
        gap: clamp(6px, 1vh, 12px);
    }

    /* Tier adjustments for smaller screens */
    body.focus-mode .flashcard[data-text-tier="short"] {
        --text-size-ja: clamp(52px, 7vh, 88px);
        --text-size-en: clamp(40px, 4.5vh, 64px);
        --text-size-roma: clamp(18px, 2vh, 28px);
    }

    body.focus-mode .flashcard[data-text-tier="medium"] {
        --text-size-ja: clamp(44px, 6vh, 76px);
        --text-size-en: clamp(34px, 4vh, 56px);
        --text-size-roma: clamp(16px, 1.8vh, 24px);
    }

    body.focus-mode .flashcard[data-text-tier="long"] {
        --text-size-ja: clamp(36px, 5vh, 64px);
        --text-size-en: clamp(28px, 3.5vh, 46px);
        --text-size-roma: clamp(14px, 1.6vh, 22px);
    }
}

/* Even smaller screens (very compact displays, ~800px height) */
@media (max-height: 800px) {
    body.focus-mode .flashcard-container {
        padding: 20px;
    }

    body.focus-mode .flashcard {
        max-height: calc(100vh - 50px);
    }

    body.focus-mode .card-face {
        padding: clamp(15px, 2.5vh, 25px) clamp(25px, 3.5vw, 35px);
    }

    /* Dead: .vocabulary-image hidden with display:none !important (B8-10) */

    body.focus-mode .japanese-text {
        margin-top: clamp(10px, 1.5vh, 20px);
        padding: 8px 18px;
    }

    body.focus-mode .english-text {
        padding: 6px 16px;
    }

    body.focus-mode .romanization {
        padding: 5px 14px;
        margin-top: 6px;
        margin-bottom: 5px;
    }

    body.focus-mode .card-content {
        gap: clamp(4px, 0.8vh, 8px);
    }
}

/* =============================================================================
   FOCUS/VIDEO MODE: Hide nav panel and floating orbs
   These elements should not appear in immersive modes
   ============================================================================= */

/* Hide nav panel in Focus/Video mode (it stays visible because grid-mode class isn't removed) */
body.focus-mode .grid-filter-bar,
body.video-mode .grid-filter-bar,
body.revision-mode .grid-filter-bar {
    display: none !important;
}

/* Hide hero top bar in Focus/Video mode on tablet (duplicates action bar) */
body.focus-mode .hero-top-bar,
body.video-mode .hero-top-bar,
body.revision-mode .hero-top-bar {
    display: none !important;
}

/* =============================================================================
   TABLET LANDSCAPE: iPad A16 (1180x820) and similar tablets
   Two-part fix:
   1. Reserve layout space for action bar (height constraints)
   2. Proportional visual scaling (transform: scale) for breathing room
   ============================================================================= */

@media (min-width: 1000px) and (max-height: 870px) {
    /* PART 1: Reserve layout space for action bar */
    body.focus-mode .flashcard-container,
    body.video-mode .flashcard-container {
        height: calc(100vh - 120px);  /* Reserve space for action bar + progress */
        padding: 10px 20px;
        overflow: hidden;  /* Clip scaled card if needed */
    }

    /* PART 2: Proportional scaling - same desktop experience, just smaller */
    body.focus-mode .flashcard,
    body.video-mode .flashcard {
        transform: scale(0.88);
        transform-origin: center center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* Text, images, everything scales proportionally with the card */
    }

    /* Hide keyboard shortcuts button on tablet - no physical keyboard */
    .desktop-only {
        display: none !important;
    }

    /* Hide Japanese flag on tablet - reduces visual clutter */
    .japanese-flag {
        display: none !important;
    }

    /* DISABLE floating orbs on tablet - iOS Safari has issues with mix-blend-mode */
    body.focus-mode .card-face::after {
        display: none !important;
    }

    /* Compact action bar for tablet */
    .bottom-action-bar {
        flex: 0 0 80px;
        min-height: 60px;
        padding: 5px 12px 5px 12px;
        margin-bottom: 6px;
    }

    /* Slightly smaller action buttons */
    .bottom-action-bar .action-btn {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    /* Tighter button groups */
    .bottom-action-bar .action-groups-container {
        gap: 10px;
    }

    .bottom-action-bar .group-buttons {
        gap: 2px;
    }

    /* Smaller group labels */
    .bottom-action-bar .group-label {
        font-size: 0.55rem;
    }

    /* Compact hover label strip */
    .bottom-action-bar .action-label-strip {
        height: 16px;
        min-height: 16px;
        font-size: 0.65rem;
        margin-bottom: 3px;
    }

    /* Compact progress bar area */
    .premium-progress-wrapper {
        padding: 5px 16px;
        flex: 0 0 30px;
    }

    /* HIDE Play/Video mode button on tablet - nav panel + action bar */
    #playSplitBtn,
    .segment-split-btn,
    .split-button-container {
        display: none !important;
    }
}

/* =============================================================================
   TABLET PORTRAIT: iPad in vertical orientation (769-1024px width)
   Apply same principles as landscape for consistent tablet experience
   ============================================================================= */

/* =============================================================================
   AUTO-HIDE CONTROLS in Focus/Video Mode (Desktop)
   Controls fade out after 3s of mouse inactivity. Mouse move or keypress shows them.
   Mobile unaffected (no mousemove signal).
   ============================================================================= */

@media (min-width: 769px) {
    body.focus-mode .bottom-action-bar,
    body.video-mode .bottom-action-bar {
        transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease;
    }

    body.focus-mode.controls-hidden .bottom-action-bar,
    body.video-mode.controls-hidden .bottom-action-bar {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }

    body.focus-mode.controls-hidden,
    body.video-mode.controls-hidden {
        cursor: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Reserve layout space for action bar */
    body.focus-mode .flashcard-container,
    body.video-mode .flashcard-container {
        height: calc(100vh - 120px);
        padding: 10px 20px;
        overflow: hidden;
    }

    /* Proportional scaling for portrait mode */
    body.focus-mode .flashcard,
    body.video-mode .flashcard {
        transform: scale(0.85);
        transform-origin: center center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hide keyboard shortcuts button on tablet - no physical keyboard */
    .desktop-only {
        display: none !important;
    }

    /* Hide Japanese flag on tablet - reduces visual clutter */
    .japanese-flag {
        display: none !important;
    }

    /* DISABLE floating orbs on tablet - iOS has issues with mix-blend-mode */
    body.focus-mode .card-face::after {
        display: none !important;
    }

    /* HIDE Play/Video mode button on tablet - nav panel + action bar */
    #playSplitBtn,
    .segment-split-btn,
    .split-button-container {
        display: none !important;
    }

    /* Compact action bar for tablet portrait */
    .bottom-action-bar {
        flex: 0 0 80px;
        min-height: 60px;
        padding: 5px 12px 5px 12px;
        margin-bottom: 6px;
    }

    /* Slightly smaller action buttons */
    .bottom-action-bar .action-btn {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    /* Tighter button groups */
    .bottom-action-bar .action-groups-container {
        gap: 10px;
    }

    .bottom-action-bar .group-buttons {
        gap: 2px;
    }

    /* Smaller group labels */
    .bottom-action-bar .group-label {
        font-size: 0.55rem;
    }

    /* Compact hover label strip */
    .bottom-action-bar .action-label-strip {
        height: 16px;
        min-height: 16px;
        font-size: 0.65rem;
        margin-bottom: 3px;
    }

    /* Compact progress bar area */
    .premium-progress-wrapper {
        padding: 5px 16px;
        flex: 0 0 30px;
    }
}

/* =============================================================================
   MOBILE FOCUS MODE (≤768px) — Scroll Story with Gold Thread
   和の感性 — Japanese minimalist study experience
   Hero section (front/back flip) + scrollable content sections below.
   Gold thread: subtle kintsugi accents woven through the hero.
   ============================================================================= */

@media (max-width: 768px) {

    /* --- BACKGROUND: Warm stone surface (matched to body #F0EDE8 for brand consistency) --- */
    body.focus-mode.mobile-focus {
        background: var(--color-paper);
        background-image: none;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.focus-mode.mobile-focus::before,
    body.focus-mode.mobile-focus::after {
        display: none !important;
    }

    /* Kill global button:hover lift (components.css translateY(-2px)) for ALL mobile focus buttons */
    body.focus-mode.mobile-focus button:hover,
    body.focus-mode.mobile-focus button:active {
        transform: none;
        box-shadow: none;
    }

    /* --- CONTAINER: Fullscreen overlay --- */
    body.focus-mode.mobile-focus .container {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh !important;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2100;
        background: transparent;
    }

    /* Override mobile-home display:none !important — focus mode must show these */
    body.focus-mode.mobile-focus .flashcard-container {
        width: 100%;
        flex: 1;
        min-height: 0;
        padding: 8px 8px 100px;
        margin: 0;
        display: flex !important;
        flex-direction: column;
        perspective: none;
        touch-action: auto;
        box-sizing: border-box;
        position: relative;
    }

    /* ============================================================
       SCROLL CONTAINER — wraps hero + content sections
       ============================================================ */
    #mf-scroll {
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: none;
        touch-action: pan-y;
        scroll-snap-type: y mandatory;
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: rgba(140, 133, 120, 0.28) transparent; /* Firefox */
    }

    #mf-scroll::-webkit-scrollbar {
        width: 6px;
    }

    #mf-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    #mf-scroll::-webkit-scrollbar-thumb {
        background: rgba(140, 133, 120, 0.26);
        border-radius: var(--radius-sm);
    }

    #mf-scroll .mf-section {
        scroll-snap-align: start;
    }

    /* Hero flashcard also snaps — consistent page-by-page navigation */
    body.focus-mode.mobile-focus #mf-scroll > .flashcard {
        scroll-snap-align: start;
    }

    /* ============================================================
       HERO SECTION — the flashcard acts as hero
       ============================================================ */
    body.focus-mode.mobile-focus .flashcard {
        width: 100%;
        min-height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: var(--radius-xl);
        overflow: clip;
        transform-style: flat;
        transition: none;
        background: #FFFFFF;
        box-shadow: 0 1px 4px rgba(44, 44, 44, 0.04);
        border: 1px solid rgba(44, 44, 44, 0.06);
        touch-action: auto;  /* Inherit from #mf-scroll */
        -webkit-user-select: none;
        user-select: none;
        position: relative;
        scroll-snap-align: start;
        cursor: pointer;
    }

    /* Hero background — clean paper base */
    .mf-hero-bg {
        position: absolute;
        inset: 0;
        background: #FFFFFF;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }

    /* [BREATH] Ambient breathing layers — living surface */
    .mf-breath-layer {
        position: absolute;
        border-radius: var(--radius-full);
        pointer-events: none;
    }

    .mf-breath-layer--warm {
        display: none;
    }

    .mf-breath-layer--cool {
        width: 350px;
        height: 350px;
        bottom: 10%;
        right: -15%;
        background: radial-gradient(circle, rgba(61, 90, 128, 0.04) 0%, transparent 70%);
        animation: mfBreathCool 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .mf-breath-layer--center {
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(253, 252, 250, 0.5) 0%, transparent 70%);
        animation: mfBreathCenter 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes mfBreathWarm {
        0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
        50% { transform: scale(1.08) translate(5px, -5px); opacity: 1; }
    }

    @keyframes mfBreathCool {
        0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
        50% { transform: scale(1.06) translate(-5px, 5px); opacity: 1; }
    }

    @keyframes mfBreathCenter {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
        50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.7; }
    }

    /* --- CARD FACES: Paper white, rounded within hero --- */
    body.focus-mode.mobile-focus .card-face {
        background: #FFFFFF;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: var(--radius-xl);
        box-shadow: none;
        padding: 24px 20px 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 2;
    }

    /* Default: English side (card-back) shown first */
    body.focus-mode.mobile-focus .card-front {
        z-index: 1;
        visibility: visible !important;
        opacity: 0 !important;
        transform: scale(0.97);
        pointer-events: none !important;
    }

    body.focus-mode.mobile-focus .card-back {
        z-index: 2;
        opacity: 1 !important;
        transform: scale(1);
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Flipped state — reveals Japanese side (card-front) */
    body.focus-mode.mobile-focus .flashcard.mf-flipped .card-front {
        opacity: 1 !important;
        transform: scale(1);
        pointer-events: auto !important;
        z-index: 2;
    }

    body.focus-mode.mobile-focus .flashcard.mf-flipped .card-back {
        opacity: 0 !important;
        transform: scale(0.97);
        pointer-events: none !important;
        z-index: 1;
    }

    body.focus-mode.mobile-focus .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        text-align: center;
        max-height: 100%;
        max-width: 100%;
        overflow: visible;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    /* --- FRONT FACE: Japanese text hero --- */
    body.focus-mode.mobile-focus .japanese-text {
        font-size: clamp(42px, 15vw, 84px);
        font-weight: 600;
        color: var(--color-ink);
        line-height: 1.6;
        letter-spacing: 0.04em;
        font-family: var(--font-jp);
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        text-shadow: none;
        padding: 0;
        margin: 0;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        display: block;
        max-width: 100%;
    }

    /* Furigana kana — golden, warm presence above kanji */
    body.focus-mode.mobile-focus .card-front .japanese-text ruby rt {
        color: #B89A5E;
        opacity: 1;
        letter-spacing: 0.12em;
    }

    /* Romanization — quiet italic annotation below kanji.
       Absolutely positioned so it doesn't shift kanji when revealed during audio.
       JS sets --roma-top in audio.js based on japanese-text bottom edge. */
    body.focus-mode.mobile-focus .card-front .romanization {
        position: absolute !important;
        top: var(--roma-top, 55%);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        font-size: clamp(16px, 4.5vw, 24px) !important;
        color: var(--color-stone) !important;
        font-family: var(--font-ui);
        font-weight: 500 !important;
        font-style: normal !important;
        letter-spacing: 0.04em !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: none !important;
        border-radius: var(--radius) !important;
        padding: 6px 16px !important;
        margin: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body.focus-mode.mobile-focus .romanization .letter {
        color: var(--color-stone) !important;
        background: none !important;
        font-style: normal !important;
        animation: none !important;
        opacity: 1 !important;
    }

    /* [BAR DOTS] Legacy — hidden, replaced by page indicator */
    .mf-bar-dots {
        display: none !important;
    }

    /* [PAGE INDICATOR] Right-edge golden dots — section navigation affordance */
    .mf-page-indicator {
        position: fixed;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        z-index: 2300;
        padding: 8px 10px;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-slow) ease;
    }

    /* Only visible on Japanese face */
    body.focus-mode.mobile-focus.mf-flipped-active .mf-page-indicator {
        opacity: 1;
        pointer-events: auto;
    }

    /* Thin connecting line between dots — scroll track metaphor */
    .mf-page-indicator::before {
        content: '';
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 50%;
        width: 1px;
        background: rgba(201, 169, 110, 0.3);
        transform: translateX(-50%);
        pointer-events: none;
    }

    .mf-page-dot {
        width: 7px;
        height: 7px;
        border-radius: var(--radius-full);
        background: var(--color-gold);
        opacity: 0.5;
        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        position: relative;
        z-index: 1;
        margin: 7px 0;
    }

    .mf-page-dot.active {
        opacity: 1;
        transform: scale(1.45);
        box-shadow: 0 0 6px 2px rgba(201, 169, 110, 0.35);
    }

    /* Breathing pulse on the NEXT dot after active — draws eye downward */
    .mf-page-dot.active + .mf-page-dot:not(.active) {
        animation: mfDotBreathe 2.4s ease-in-out infinite;
    }

    @keyframes mfDotBreathe {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.85; transform: scale(1.2); }
    }

    /* Downward chevron hint below dots — fades after first scroll */
    .mf-page-chevron {
        width: 12px;
        height: 12px;
        margin-top: 6px;
        opacity: 0.5;
        transition: opacity 0.5s ease;
        position: relative;
        z-index: 1;
    }

    .mf-page-chevron svg {
        width: 100%;
        height: 100%;
        stroke: var(--color-gold);
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Subtle bounce on the chevron */
    .mf-page-chevron {
        animation: mfChevronBounce 2s ease-in-out infinite;
    }

    @keyframes mfChevronBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
    }

    .mf-page-chevron.faded {
        opacity: 0;
        pointer-events: none;
    }

    /* First appearance: gentle drift animation */
    .mf-page-indicator.entering .mf-page-dot {
        animation: mfDotDrift 1.2s ease-out forwards;
    }
    .mf-page-indicator.entering .mf-page-dot:nth-child(2) { animation-delay: 0.08s; }
    .mf-page-indicator.entering .mf-page-dot:nth-child(3) { animation-delay: 0.16s; }
    .mf-page-indicator.entering .mf-page-dot:nth-child(4) { animation-delay: 0.24s; }

    @keyframes mfDotDrift {
        0% { opacity: 0; transform: translateY(-6px); }
        100% { opacity: 0.5; transform: translateY(0); }
    }
    /* Active dot overrides drift end opacity */
    .mf-page-indicator.entering .mf-page-dot.active {
        animation: mfDotDriftActive 1.2s ease-out forwards;
    }
    @keyframes mfDotDriftActive {
        0% { opacity: 0; transform: translateY(-6px) scale(1); box-shadow: none; }
        100% { opacity: 1; transform: translateY(0) scale(1.45); box-shadow: 0 0 6px 2px rgba(201, 169, 110, 0.35); }
    }

    /* [FLOATING AUDIO] Centered between text and bottom bar — NO translateX, avoids shake bug */
    .mf-floating-audio {
        position: fixed;
        bottom: 28%;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 2201;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(44, 44, 44, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        touch-action: manipulation;
        transition: transform 0.2s ease, background 0.2s ease, opacity 0.3s ease;
        /* Hidden on English side (default) — shown on Japanese side via mf-flipped-active */
        opacity: 0;
        pointer-events: none;
    }

    body.focus-mode.mobile-focus.mf-flipped-active .mf-floating-audio {
        opacity: 1;
        pointer-events: auto;
    }

    .mf-floating-audio:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.3);
    }

    .mf-floating-audio svg {
        width: 18px;
        height: 18px;
        fill: var(--color-stone);
    }

    /* Pulse while audio plays (Japanese side only) */
    body.focus-mode.mobile-focus.mf-flipped-active:has(.flashcard.audio-playing) .mf-floating-audio {
        animation: mfAudioPulse 1s ease-in-out infinite;
    }

    @keyframes mfAudioPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.06); opacity: 0.85; }
    }

    .mf-floating-audio.faded {
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
    }

    /* --- BACK FACE: scenic image top, English below --- */
    body.focus-mode.mobile-focus .card-back {
        justify-content: stretch;
        padding: 12px 12px 100px;
        gap: 0;
    }

    body.focus-mode.mobile-focus .card-back .card-content {
        flex: 2;
        justify-content: center;
        padding-top: 0;
        gap: 10px;
    }

    /* Scenic image fills top 60% of card */
    body.focus-mode.mobile-focus .card-back::before {
        content: '';
        display: block;
        flex: 3;
        min-height: 0;
        width: 100%;
        background-image: var(--category-background);
        background-size: cover;
        background-position: center;
        border-radius: var(--radius-lg);
        margin: 0;
    }

    body.focus-mode.mobile-focus .english-text {
        font-size: clamp(24px, 7vw, 44px);
        font-weight: 500;
        color: var(--color-stone);
        line-height: 1.4;
        letter-spacing: 0.01em;
        font-family: var(--font-ui);
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        text-shadow: none;
        padding: 0;
        margin: 0;
        white-space: normal;
        max-width: 100%;
    }

    /* POS badge — quiet label on back face */
    body.focus-mode.mobile-focus .card-back .class-badge {
        position: static;
        display: inline-block !important;
        padding: 3px 10px;
        font-size: 0.7rem;
        color: #a8a29e;
        background: rgba(44, 44, 44, 0.03);
        border: 1px solid rgba(44, 44, 44, 0.05);
        border-radius: var(--radius-lg);
        font-weight: 500;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        opacity: 1;
        text-shadow: none;
        margin-top: 4px;
    }

    body.focus-mode.mobile-focus .card-front .class-badge {
        display: none !important;
    }

    /* Paper fold corner — removed */
    .mf-page-curl {
        display: none;
    }

    /* Legacy tap hint (keep for backwards compat) */
    .mf-tap-hint {
        display: none;
    }

    @keyframes mfHintFade {
        to { opacity: 0.5; }
    }

    /* Hide hint after first flip */
    body.mf-flipped-active .mf-tap-hint {
        opacity: 0 !important;
        transition: opacity 0.3s ease;
    }

    /* --- HIDE mobile landing + desktop decorations when in focus --- */
    body.focus-mode.mobile-focus .mobile-home-container {
        display: none !important;
    }

    body.focus-mode.mobile-focus .vocabulary-image,
    body.focus-mode.mobile-focus .card-category-badge,
    body.focus-mode.mobile-focus .logo-watermark,
    body.focus-mode.mobile-focus .card-info-tooltip,
    body.focus-mode.mobile-focus .focus-button-card,
    body.focus-mode.mobile-focus .screen-category-indicator,
    body.focus-mode.mobile-focus .ripple-container,
    body.focus-mode.mobile-focus .sound-wave,
    body.focus-mode.mobile-focus .grid-filter-bar,
    body.focus-mode.mobile-focus .grid-container,
    body.focus-mode.mobile-focus .premium-progress-wrapper,
    body.focus-mode.mobile-focus .app-branding-topleft,
    body.focus-mode.mobile-focus .lesson-badge {
        display: none !important;
    }

    /* ============================================================
       SCROLL FADE — subtle gradient at bottom of hero hinting at content below
       ============================================================ */
    .mf-scroll-fade {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.25) 35%,
            rgba(255, 255, 255, 0.55) 65%,
            rgba(255, 255, 255, 0.8) 100%);
        transition: opacity 0.3s ease;
    }

    .mf-scroll-fade.faded {
        opacity: 0;
    }

    /* Hidden on English side (no scroll content), visible on Japanese side */
    body.focus-mode.mobile-focus .mf-scroll-fade {
        opacity: 0;
    }
    body.focus-mode.mobile-focus .flashcard.mf-flipped .mf-scroll-fade {
        opacity: 1;
    }

    /* Scroll hint is provided by .mf-page-indicator on right edge */

    /* ============================================================
       SCROLL INDICATOR — custom track + thumb (iOS hides native scrollbars)
       ============================================================ */
    .mf-scroll-track {
        position: fixed;
        right: 2px;
        top: 0;
        bottom: 0;
        width: 6px;
        border-radius: var(--radius-sm);
        background: transparent;
        z-index: 2200;
        pointer-events: none;
    }

    .mf-scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: var(--radius-sm);
        background: rgba(140, 133, 120, 0.22);
        transition: top 0.08s ease-out;
    }

    /* Hide scroll indicator + content sections on English side (default, unflipped) */
    .mf-scroll-track {
        display: none !important;
    }
    body.focus-mode.mobile-focus #mf-sections {
        display: none;
    }
    body.focus-mode.mobile-focus #mf-scroll {
        overflow: hidden;
    }

    /* Show scroll indicator + content sections on Japanese side (flipped) */
    body.focus-mode.mobile-focus.mf-flipped-active .mf-scroll-track {
        display: block;
    }
    body.focus-mode.mobile-focus.mf-flipped-active #mf-sections {
        display: contents;
    }
    body.focus-mode.mobile-focus.mf-flipped-active #mf-scroll {
        overflow-y: auto;
    }

    /* ============================================================
       STATUS BAR — thin persistent line at top
       ============================================================ */
    .mf-status-bar {
        display: none !important;
    }

    /* [BREATH] Progress fill with breathing glow at leading edge */
    .mf-progress-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--color-gold);
        transition: width 0.6s cubic-bezier(0.32, 0.72, 0, 1);
        min-width: 0;
        border-radius: 0 2px 2px 0;
    }

    .mf-progress-fill::after {
        content: '';
        position: absolute;
        right: 0;
        top: -2px;
        width: 24px;
        height: 7px;
        background: var(--color-gold);
        border-radius: var(--radius-sm);
        opacity: 0.4;
        filter: blur(4px);
        animation: mfBreathGlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes mfBreathGlow {
        0%, 100% { opacity: 0.2; transform: scaleX(0.8); }
        50% { opacity: 0.5; transform: scaleX(1.2); }
    }

    /* ============================================================
       CARD COUNTER — top right
       ============================================================ */
    body.focus-mode.mobile-focus #card-number {
        position: fixed !important;
        top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        right: 20px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--color-stone) !important;
        background: rgba(240, 237, 232, 0.7) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 6px 14px !important;
        border-radius: var(--radius-xl) !important;
        border: none !important;
        font-family: var(--font-ui);
        z-index: 2200;
        pointer-events: auto;
        box-shadow: none !important;
        text-shadow: none !important;
        white-space: nowrap;
        line-height: 1;
        letter-spacing: 0.02em;
        font-variant-numeric: tabular-nums;
        transform: none;
        opacity: 1 !important;
        transition: opacity 0.3s ease;
        isolation: isolate;
    }

    /* Card counter visible during onboarding — sample deck has multiple cards */

    /* Hide category & textbook from word story - noise for learners */
    .mf-category-info,
    .mf-lesson-info {
        display: none;
    }


    /* Card number dims slightly when scrolled into content sections */
    body.focus-mode.mobile-focus #card-number.faded {
        opacity: 0.6 !important;
        transition: opacity 0.3s ease;
    }

    body.focus-mode.mobile-focus #card-number .status-dot,
    body.focus-mode.mobile-focus #card-number .card-info-tooltip,
    body.focus-mode.mobile-focus #card-number .textbook-tooltip {
        display: none !important;
    }

    body.focus-mode.mobile-focus #card-number-back {
        display: none !important;
    }

    /* Card number pill stays neutral — mark buttons own status display */

    /* ============================================================
       SWIPE HINTS — paired row above text, in the mark zone (top 70%)
       ============================================================ */
    /* ============================================================
       EXIT BUTTON — bottom-left of bottom bar for thumb reachability
       ============================================================ */
    .mf-bottom-bar .mf-exit-btn {
        position: absolute;
        left: 20px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: var(--radius-full);
        border: none !important;
        background: rgba(168, 162, 158, 0.18) !important;
        box-shadow: none !important;
        color: var(--color-stone);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.2s ease, transform var(--duration-fast) ease;
    }

    .mf-bottom-bar .mf-exit-btn:active {
        background: rgba(168, 162, 158, 0.3) !important;
        transform: scale(0.92);
        box-shadow: none !important;
    }

    .mf-bottom-bar .mf-exit-btn svg {
        width: 18px;
        height: 18px;
    }

    /* ============================================================
       BOTTOM BAR — Hanko seal marks (no pill, no frosted glass)
       ============================================================ */
    .mf-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2200;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 32px;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0 24px calc(16px + env(safe-area-inset-bottom, 0px));
        transition: opacity 0.3s ease;
        /* Full-width hit area prevents clicks from reaching flashcard behind */
        min-height: 100px;
    }

    .mf-bottom-bar.faded {
        opacity: 0;
        pointer-events: none;
    }

    /* --- Hanko coaching label (onboarding sequence) --- */
    .mf-hanko-coach {
        position: absolute;
        top: -24px;
        left: 0;
        right: 0;
        text-align: center;
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 400;
        color: var(--color-faint);
        letter-spacing: 0.02em;
        pointer-events: none;
        opacity: 0;
        transition: opacity 500ms ease;
        /* Frosted backdrop prevents text collision during scroll */
        padding: 4px 0;
        background: linear-gradient(to bottom,
            transparent 0%,
            rgba(240, 237, 232, 1.0) 40%);
    }
    .mf-hanko-coach.visible {
        opacity: 0.5;
    }
    /* Hide learning status hint once card is flipped to Japanese face */
    .mf-flipped-active .mf-hanko-coach.visible {
        opacity: 0;
    }

    /* --- Hanko seal button --- */
    .mf-hanko {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        padding: 6px;
        border-radius: var(--radius-full);
    }

    .mf-hanko-ring {
        width: 52px;
        height: 52px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        background: transparent;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
        filter: url(#mfRoughen);
    }

    .mf-hanko-ring::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: var(--radius-full);
        opacity: 0;
        transition: opacity var(--duration-slow) ease, inset var(--duration-slow) ease;
        pointer-events: none;
    }

    .mf-hanko-kanji {
        font-family: var(--font-jp);
        font-size: 22px;
        line-height: 1;
        user-select: none;
        position: relative;
        z-index: 2;
    }

    .mf-hanko-label {
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.8px;
        text-transform: lowercase;
        color: var(--color-faint);
        opacity: 0.5;
        transition: opacity var(--duration-slow) ease;
        user-select: none;
    }

    /* --- New seal (amber) --- */
    .mf-hanko--learning .mf-hanko-ring {
        border-color: rgba(160, 120, 80, 0.35);
    }
    .mf-hanko--learning .mf-hanko-kanji {
        color: var(--color-amber);
        opacity: 0.65;
        transition: opacity 0.3s ease;
    }
    .mf-hanko--learning .mf-hanko-ring::after {
        border: 1px solid rgba(160, 120, 80, 0.15);
    }

    /* --- Known seal (green) --- */
    .mf-hanko--known .mf-hanko-ring {
        border-color: rgba(107, 127, 92, 0.35);
    }
    .mf-hanko--known .mf-hanko-kanji {
        color: var(--color-moss);
        opacity: 0.65;
        transition: opacity 0.3s ease;
    }
    .mf-hanko--known .mf-hanko-ring::after {
        border: 1px solid rgba(107, 127, 92, 0.15);
    }

    /* --- Pressing state (stamp being pushed) --- */
    .mf-hanko:active .mf-hanko-ring {
        transform: scale(0.85);
        transition-duration: 0.08s;
        transition-timing-function: ease-in;
    }

    /* --- Stamped state (active mark) --- */
    .mf-hanko.stamped .mf-hanko-ring {
        transform: scale(1.0) rotate(var(--stamp-rotation, 2deg));
    }
    .mf-hanko.stamped .mf-hanko-kanji {
        opacity: 1;
    }
    .mf-hanko.stamped .mf-hanko-ring::after {
        opacity: 1;
        inset: -5px;
    }

    .mf-hanko--learning.stamped .mf-hanko-ring {
        border-color: var(--color-amber);
        background: rgba(160, 120, 80, 0.06);
        box-shadow: 0 0 0 1px rgba(160, 120, 80, 0.15);
    }
    .mf-hanko--learning.stamped .mf-hanko-label {
        color: var(--color-amber);
        opacity: 0.7;
    }

    .mf-hanko--known.stamped .mf-hanko-ring {
        border-color: var(--color-moss);
        background: rgba(107, 127, 92, 0.08);
        box-shadow: 0 0 0 1px rgba(107, 127, 92, 0.15);
    }
    .mf-hanko--known.stamped .mf-hanko-label {
        color: var(--color-moss);
        opacity: 0.7;
    }

    /* --- Dimmed state (unchosen seal) --- */
    .mf-hanko.dimmed .mf-hanko-ring {
        opacity: 0.2;
        transform: scale(0.95);
    }
    .mf-hanko.dimmed .mf-hanko-label {
        opacity: 0.15;
    }

    /* --- Stamp animation keyframes --- */
    @keyframes mfStampPress {
        0%  { transform: scale(1); }
        20% { transform: scale(0.85); }
        55% { transform: scale(1.08) rotate(var(--stamp-rotation, 2deg)); }
        100% { transform: scale(1.0) rotate(var(--stamp-rotation, 2deg)); }
    }
    @keyframes mfInkSpread {
        0%  { box-shadow: 0 0 0 0 transparent; }
        40% { box-shadow: 0 0 0 2px var(--ink-ring-color, rgba(107, 127, 92, 0.10)); }
        100% { box-shadow: 0 0 0 1px var(--ink-ring-color, rgba(107, 127, 92, 0.10)); }
    }

    .mf-hanko.animating .mf-hanko-ring {
        animation: mfStampPress var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .mf-hanko--learning.animating .mf-hanko-ring {
        --ink-ring-color: rgba(160, 120, 80, 0.15);
        animation: mfStampPress var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                   mfInkSpread 0.5s ease 0.1s forwards;
    }
    .mf-hanko--known.animating .mf-hanko-ring {
        --ink-ring-color: rgba(107, 127, 92, 0.15);
        animation: mfStampPress var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                   mfInkSpread 0.5s ease 0.1s forwards;
    }

    /* Hanko hint — brief feedback after stamp, aligned with coaching pills */
    .mf-hanko-hint {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.02em;
        white-space: nowrap;
        padding-bottom: 5px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 400ms ease-out, transform 400ms ease-out;
    }
    .mf-hanko-hint::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        border-radius: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--hint-stroke, rgba(201, 169, 110, 0.55)) 8%,
            var(--hint-stroke, rgba(201, 169, 110, 0.55)) 30%,
            var(--hint-stroke-fade, rgba(201, 169, 110, 0.25)) 85%,
            transparent 100%
        );
    }
    .mf-hanko-hint.visible {
        opacity: 0.85;
        transform: translateX(-50%) translateY(0);
    }
    .mf-hanko-hint--learning {
        --hint-stroke: rgba(180, 145, 95, 0.55);
        --hint-stroke-fade: rgba(180, 145, 95, 0.25);
    }
    .mf-hanko-hint--known {
        --hint-stroke: rgba(130, 150, 100, 0.55);
        --hint-stroke-fade: rgba(130, 150, 100, 0.25);
    }

    /* ============================================================
       SIDE NAV — prev/next centered on edges
       ============================================================ */
    .mf-nav-btn {
        position: fixed !important;
        top: 50vh !important;
        transform: translateY(-50%) !important;
        z-index: 2200;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-full);
        background: rgba(255,255,255,0.7);
        border: 1px solid rgba(44,44,44,0.06);
        box-shadow: 0 1px 4px rgba(44,44,44,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.15s, background 0.15s, opacity 0.3s;
        opacity: 0.85;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mf-nav-btn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .mf-nav-btn:active {
        transform: translateY(-50%) scale(0.92) !important;
        background: rgba(255,255,255,0.85);
        opacity: 1;
    }

    .mf-nav-btn--prev { left: 12px; right: auto !important; bottom: auto !important; }
    .mf-nav-btn--next { right: 12px; left: auto !important; bottom: auto !important; }

    .mf-nav-btn svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px;
        min-height: 22px;
        display: block;
        overflow: visible;
    }

    .mf-nav-btn svg path {
        fill: none;
        stroke: var(--color-stone);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Back face: move nav below image area */
    /* Back face: nav arrows sit just below the scenic image */
    body.mf-flipped-active .mf-nav-btn {
        top: auto !important;
        bottom: 36% !important;
        transform: translateY(50%) !important;
    }

    body.mf-flipped-active .mf-nav-btn:active {
        transform: translateY(50%) scale(0.92) !important;
    }

    /* Fade state for nav buttons (when scrolled into content) */
    .mf-nav-btn.faded {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ============================================================
       SCROLL SECTIONS — Meaning, Story, Examples, Related
       ============================================================ */
    /* Meaning header — inline with word story panel */
    .mf-meaning-header {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 24px;
    }

    .mf-meaning-english {
        font-size: 28px;
        font-weight: 600;
        color: #332F2B;
        line-height: 1.2;
        font-family: var(--font-ui);
    }

    .mf-meaning-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .mf-pos-badge {
        font-size: 12px;
        font-weight: 500;
        color: var(--color-accent);
        background: rgba(61, 90, 128, 0.08);
        padding: 4px 12px;
        border-radius: var(--radius-xl);
        letter-spacing: 0.3px;
        font-family: var(--font-ui);
    }

    .mf-category-info {
        font-size: 12px;
        color: var(--color-faint);
        font-family: var(--font-ui);
    }

    .mf-lesson-info {
        font-size: 11px;
        color: #a8a29e;
        letter-spacing: 0.3px;
        font-family: var(--font-ui);
        margin-top: 4px;
    }

    /* --- Sections as scroll-snap pages — each fills the viewport --- */
    .mf-section {
        min-height: 100%;  /* match scroll container viewport, not device viewport */
        box-sizing: border-box;
        margin: 8px;
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    /* --- SECTION: Word Story — flowing passages --- */
    .mf-section-story {
        padding: 32px 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--color-paper);
        position: relative;
    }

    /* Gold thread divider — 金継ぎ kintsugi line between sections */
    .mf-section-story::before,
    .mf-section-examples::before,
    .mf-section-related::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: radial-gradient(ellipse at center, rgba(201, 169, 110, 0.25) 0%, transparent 80%);
    }

    /* Section labels — inline whisper: kanji primary, tiny English after */
    .mf-section-label {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding-bottom: 16px;
    }

    .mf-label-kanji {
        font-family: var(--font-jp);
        font-size: 13px;
        font-weight: 400;
        color: rgba(140, 133, 120, 0.6);
    }

    .mf-label-en {
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 400;
        color: rgba(140, 133, 120, 0.35);
        letter-spacing: 0.02em;
    }

    /* Flowing passages — clean text, no margin markers */
    .mf-story-passage {
        font-family: var(--font-ui);
        font-size: 15px;
        line-height: 1.75;
        color: #332F2B;
        padding-left: 0;
        position: relative;
    }

    .mf-story-passage + .mf-story-passage {
        margin-top: 22px;
    }

    /* Kanji margin markers removed */
    .mf-story-passage::before {
        display: none;
    }

    /* --- SECTION: Counter List — 助数詞 --- */
    .mf-section-counter {
        padding: 24px 24px;
        background: var(--card-surface, #FDFCFA);
    }
    .mf-counter-list {
        display: flex;
        flex-direction: column;
    }
    .mf-counter-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 4px;
        border-radius: 8px;
    }
    .mf-counter-num {
        font-family: var(--font-ui, Inter, sans-serif);
        font-size: 11px;
        font-weight: 500;
        color: var(--stone-400, #a8a29e);
        opacity: 0.5;
        min-width: 18px;
        text-align: right;
        flex-shrink: 0;
    }
    .mf-counter-jp {
        font-family: var(--kanji-family, 'Klee One', serif);
        font-size: 20px;
        font-weight: 600;
        color: var(--jp-text, #2C2C2C);
        line-height: 1.4;
        letter-spacing: 0.02em;
        flex: 1;
        min-width: 0;
    }
    .mf-counter-jp rt {
        font-size: max(0.5em, 9px);
        color: var(--stone-400, #a8a29e);
        font-weight: 400;
        letter-spacing: 0.05em;
    }
    .mf-counter-reading {
        font-family: var(--romaji-family, Inter, sans-serif);
        font-size: 13px;
        font-style: italic;
        color: var(--romaji-color, #a8a29e);
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }
    .mf-counter-audio-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border: 1px solid rgba(44, 44, 44, 0.08);
        border-radius: 50%;
        background: transparent;
        color: var(--stone-400, #a8a29e);
        opacity: 0.5;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .mf-counter-audio-btn:active,
    .mf-counter-audio-btn.playing { opacity: 1; color: var(--gold, #C9A96E); }
    .mf-counter-question {
        border-top: 1px solid rgba(201, 169, 110, 0.15);
        margin-top: 4px;
        padding-top: 10px;
    }
    .mf-counter-question .mf-counter-num {
        color: var(--gold, #C9A96E);
        opacity: 0.7;
        font-weight: 600;
    }
    .mf-counter-question .mf-counter-reading {
        color: var(--gold, #C9A96E);
        opacity: 0.6;
    }
    /* Collapse/expand */
    .mf-counter-more {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
    }
    .mf-counter-more.expanded {
        max-height: 600px;
        opacity: 1;
    }
    .mf-counter-toggle {
        padding: 8px 4px;
        cursor: pointer;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    .mf-counter-toggle-text {
        font-family: var(--romaji-family, Inter, sans-serif);
        font-size: 12px;
        font-style: italic;
        color: var(--stone-400, #a8a29e);
        opacity: 0.5;
        transition: opacity 0.15s ease;
    }
    .mf-counter-toggle:active .mf-counter-toggle-text {
        opacity: 0.8;
    }

    /* --- SECTION: Examples — 例文 --- */
    .mf-section-examples {
        padding: 24px 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--card-surface, #FDFCFA);
        position: relative;
        counter-reset: example-counter;
    }

    .mf-example-card {
        background: transparent;
        border-radius: 0;
        padding: 20px 0 20px 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        border-left: 2px solid rgba(201, 169, 110, 0.4);
        padding-left: 16px;
        margin-left: 4px;
        counter-increment: example-counter;
    }

    .mf-example-card::before {
        content: counter(example-counter);
        position: absolute;
        left: -10px;
        top: 20px;
        width: 18px;
        height: 18px;
        background: rgba(201, 169, 110, 0.7);
        border-radius: var(--radius-full);
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 600;
        color: #FDFCFA;
        text-align: center;
        line-height: 18px;
    }

    .mf-example-card + .mf-example-card {
        border-top: none;
    }

    .mf-example-card:active {
        opacity: 0.7;
    }

    .mf-example-jp {
        font-family: var(--font-jp);
        font-size: 22px;
        line-height: 1.7;
        color: #332F2B;
    }

    .mf-example-jp ruby rt {
        font-size: 0.55em;
        color: #B0903E;
        opacity: 1;
    }

    .mf-example-en {
        font-size: 15px;
        color: var(--color-stone);
        line-height: 1.5;
        font-family: var(--font-ui);
    }

    .mf-example-romaji {
        font-size: 13px;
        color: #7a756f;
        font-family: var(--font-ui);
    }

    /* --- SECTION: Related Words --- */
    .mf-section-examples + .mf-section-related {
        border-top: 1px solid rgba(201, 169, 110, 0.2);
    }
    .mf-section-related {
        padding: 28px 24px 100px;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--color-paper);
        position: relative;
    }

    /* 落款 Rakkan — removed: visual noise at scroll end */
    .mf-section-related::after {
        content: '了';
        display: none;
        width: 24px;
        height: 24px;
        margin: 36px auto 0;
        background: rgba(201, 169, 110, 0.10);
        border-radius: var(--radius-sm);
        font-family: var(--font-jp);
        font-size: 11px;
        color: rgba(201, 169, 110, 0.35);
        text-align: center;
        line-height: 24px;
        transform: rotate(1.5deg);
    }

    .mf-related-group {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mf-related-group + .mf-related-group {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(201, 169, 110, 0.12);
    }

    /* Group labels — gold kanji marker + label */
    .mf-related-group-label {
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--color-gold);
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 0 4px;
    }

    /* Kanji markers — gold kintsugi accent */
    .mf-related-dot {
        font-family: var(--font-jp);
        font-size: 13px;
        color: #B8953E;
        opacity: 1;
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        flex-shrink: 0;
        line-height: 1;
    }

    .mf-related-dot--synonym,
    .mf-related-dot--antonym,
    .mf-related-dot--related,
    .mf-related-dot--homophone {
        color: var(--color-gold);
    }

    .mf-related-item + .mf-related-item {
        border-top: 1px solid rgba(44, 44, 44, 0.04);
    }

    .mf-related-word-row {
        background: transparent;
        border-radius: 0;
        padding: 16px 0;
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        transition: opacity var(--duration-fast);
        border: none;
    }

    .mf-related-word-row:active {
        opacity: 0.7;
    }

    .mf-related-word-jp {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 80px;
    }

    .mf-related-word-kanji {
        font-family: var(--font-jp);
        font-size: 24px;
        color: #332F2B;
    }

    .mf-related-word-kana {
        font-size: 12px;
        color: #B8953E;
        font-family: var(--font-jp);
    }

    .mf-related-word-romaji {
        font-size: 11px;
        color: #7a756f;
        font-family: var(--font-ui);
    }

    .mf-related-word-en {
        font-size: 15px;
        color: var(--color-stone);
        flex: 1;
        font-family: var(--font-ui);
    }

    .mf-related-word-arrow {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.35;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .mf-related-word-row:active .mf-related-word-arrow {
        opacity: 0.6;
        transform: translateX(3px);
    }

    .mf-related-word-arrow svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: var(--color-gold);
        stroke-width: 1.5;
    }

    /* Chevron rotates when expanded */
    .mf-related-item.expanded .mf-related-word-arrow {
        transform: rotate(90deg);
        opacity: 0.6;
    }

    /* --- Inline expand detail (thumb left + sentence right) --- */
    .mf-related-detail {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity var(--duration) ease;
    }

    .mf-related-item.expanded .mf-related-detail {
        max-height: 300px;
        opacity: 1;
    }

    .mf-related-detail-inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 8px 16px 20px;
        margin: 0 -4px;
        background: rgba(255, 255, 255, 0.45);
        border-radius: var(--radius-lg);
        border-left: 2px solid rgba(201, 169, 110, 0.25);
    }

    .mf-related-thumb {
        width: 100%;
        height: 120px;
        border-radius: var(--radius);
        overflow: hidden;
    }

    .mf-related-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.9);
    }

    .mf-related-detail-text {
        flex: 1;
        min-width: 0;
    }

    .mf-related-detail-jp {
        font-family: var(--font-jp);
        font-size: 17px;
        line-height: 1.7;
        color: var(--text-primary, #332F2B);
        margin-bottom: 6px;
    }

    .mf-related-detail-jp ruby rt {
        font-size: 0.55em;
        color: #B0903E;
        opacity: 0.85;
    }

    .mf-related-detail-romaji {
        font-size: 12px;
        color: #a8a29e;
        font-family: var(--font-ui);
        margin-bottom: 4px;
    }

    .mf-related-detail-en {
        font-size: 14px;
        color: var(--text-secondary, #57534e);
        font-family: var(--font-ui);
    }

    /* ============================================================
       SWIPE TRANSITION (card change)
       ============================================================ */
    #mf-scroll.swiping-out {
        animation: mfSwipeOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }

    #mf-scroll.swiping-in {
        animation: mfSwipeIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }

    @keyframes mfSwipeOut {
        0% { opacity: 1; transform: translateX(0); }
        100% { opacity: 0; transform: translateX(-60px); }
    }

    @keyframes mfSwipeIn {
        0% { opacity: 0; transform: translateX(60px); }
        100% { opacity: 1; transform: translateX(0); }
    }

    /* --- SLIDE ANIMATIONS: Legacy flashcard anims still work --- */
    body.focus-mode.mobile-focus .flashcard.slide-out-left {
        animation: slideOutLeft 0.35s ease-in forwards;
    }

    body.focus-mode.mobile-focus .flashcard.slide-in-right {
        animation: slideInRight 0.35s ease-out forwards;
    }

    body.focus-mode.mobile-focus .flashcard.slide-out-right {
        animation: slideOutRight 0.35s ease-in forwards;
    }

    body.focus-mode.mobile-focus .flashcard.slide-in-left {
        animation: slideInLeft 0.35s ease-out forwards;
    }

    /* --- TIER-BASED TEXT SIZING (mobile) --- */
    body.focus-mode.mobile-focus .flashcard[data-text-tier="short"] .japanese-text {
        font-size: clamp(48px, 15vw, 84px);
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="medium"] .japanese-text {
        font-size: clamp(36px, 10vw, 64px);
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="long"] .japanese-text {
        font-size: clamp(28px, 7vw, 48px);
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="short"] .english-text {
        font-size: clamp(24px, 7vw, 36px);
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="medium"] .english-text {
        font-size: clamp(20px, 5.5vw, 32px);
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="long"] .english-text {
        font-size: clamp(18px, 4.5vw, 28px);
    }

    /* --- VERB FORM SIZING (mobile focus) --- */
    /* Override components.css 1.9rem cap — full-screen cards need larger verb forms */
    body.focus-mode.mobile-focus .flashcard[data-text-tier="short"] .verb-forms:not(.verb-romanization) {
        font-size: clamp(44px, 13vw, 68px) !important;
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="medium"] .verb-forms:not(.verb-romanization) {
        font-size: clamp(36px, 10vw, 56px) !important;
    }

    body.focus-mode.mobile-focus .flashcard[data-text-tier="long"] .verb-forms:not(.verb-romanization) {
        font-size: clamp(28px, 7vw, 42px) !important;
    }

    /* --- STATUS TINTS on card --- */
    body.focus-mode.mobile-focus .flashcard.status-known .card-face {
        box-shadow: inset 0 -3px 0 0 rgba(107, 127, 92, 0.4);
    }

    body.focus-mode.mobile-focus .flashcard.status-learning .card-face {
        box-shadow: inset 0 -3px 0 0 rgba(201, 169, 110, 0.4);
    }

    body.focus-mode.mobile-focus .flashcard[class*="status-flash"] .card-face {
        animation: none;
    }

    /* ============================================================
       CARD FLASH — radial tint from bottom on mark (Breath design)
       ============================================================ */
    .mf-card-flash {
        position: fixed;
        inset: 0;
        z-index: 2050;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .mf-card-flash.flash-green {
        background: radial-gradient(circle at 50% 80%, rgba(107, 127, 92, 0.12) 0%, transparent 60%);
        opacity: 1;
    }

    .mf-card-flash.flash-amber {
        background: radial-gradient(circle at 50% 80%, rgba(160, 120, 80, 0.12) 0%, transparent 60%);
        opacity: 1;
    }

    /* ============================================================
       SWIPE FEEDBACK — directional tint flash on status mark
       ============================================================ */
    .mf-swipe-flash {
        position: fixed;
        inset: 0;
        z-index: 2050;
        pointer-events: none;
        opacity: 0;
    }

    .mf-swipe-flash.known {
        background: linear-gradient(to bottom, rgba(107, 127, 92, 0.18) 0%, transparent 60%);
        animation: mfFlashKnown 0.6s ease-out forwards;
    }

    .mf-swipe-flash.learning {
        background: linear-gradient(to top, rgba(201, 169, 110, 0.18) 0%, transparent 60%);
        animation: mfFlashLearning 0.6s ease-out forwards;
    }

    @keyframes mfFlashKnown {
        0%   { opacity: 0; transform: translateY(8px); }
        25%  { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-4px); }
    }

    @keyframes mfFlashLearning {
        0%   { opacity: 0; transform: translateY(-8px); }
        25%  { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(4px); }
    }

    /* ============================================================
       UNDO TOAST — brief pill at bottom after status mark
       ============================================================ */
    .mf-undo-toast {
        position: fixed;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        z-index: 2300;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: rgba(253, 252, 250, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(229, 226, 221, 0.5);
        border-radius: var(--radius-xl);
        box-shadow: 0 2px 8px rgba(44, 44, 44, 0.06);
        font-family: var(--font-ui);
        font-size: 13px;
        color: var(--color-stone);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration) ease, transform var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .mf-undo-toast.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .mf-undo-toast.hiding {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
        pointer-events: none;
    }

    .mf-undo-btn {
        background: none;
        border: none;
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: 600;
        color: var(--color-accent);
        cursor: pointer;
        padding: 2px 4px;
        -webkit-tap-highlight-color: transparent;
    }

    .mf-undo-btn:active {
        opacity: 0.6;
    }

    /* --- HIDE desktop action bar on mobile focus --- */
    body.focus-mode.mobile-focus .bottom-action-bar {
        display: none !important;
    }

    /* --- Legacy bottom sheet styles (kept for compatibility) --- */
    .mf-story-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 65vh;
        background: #FDFCFA;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(44, 44, 44, 0.1);
        z-index: 2300;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .mf-story-sheet.open { transform: translateY(0); }
    .mf-story-handle { width: 36px; height: 4px; background: rgba(44,44,44,0.15); border-radius: var(--radius-sm); margin: 10px auto 6px; flex-shrink: 0; }
    .mf-story-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px 80px; flex: 1; }
    .mf-story-bubble { background: #fff; border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; border: 1px solid rgba(44,44,44,0.05); }
    .mf-story-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-romaji); margin-bottom: 6px; }
    .mf-story-text { font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: #332F2B; }
    .mf-story-counter { margin-top: 8px; margin-bottom: 12px; background: #fff; border-radius: var(--radius-lg); padding: 14px 16px; border: 1px solid rgba(44,44,44,0.05); }
    .mf-story-examples { margin-top: 8px; }
    .mf-story-sentence { background: #fff; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; border: 1px solid rgba(44,44,44,0.04); }
    .mf-sentence-jp { font-family: var(--font-jp); font-size: 16px; line-height: 1.5; color: #332F2B; margin-bottom: 4px; }
    .mf-sentence-romaji { font-family: var(--font-ui); font-size: 12px; color: #a8a29e; margin-bottom: 2px; }
    .mf-sentence-en { font-family: var(--font-ui); font-size: 13px; color: var(--color-stone); }
    .mf-story-body .related-words { margin-top: 12px; padding-top: 12px; animation: none; opacity: 1; }
    .mf-story-body .rel-row-kanji { font-size: 16px; }
    .mf-story-body .rel-row { pointer-events: none; cursor: default; }

    /* Legacy bottom bar / status buttons (hidden, replaced by new UI) */
    .mobile-focus-bottombar { display: none !important; }
    .mf-card-status { display: none !important; }

    /* ============================================================
       GESTURE ONBOARDING — first-session overlay with 3 demos
       ============================================================ */
    .mf-gesture-coach {
        position: fixed;
        inset: 0;
        z-index: 2400;
        background: rgba(240, 237, 232, 0.88);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 40px 32px;
        opacity: 0;
        transition: opacity 0.35s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mf-gesture-coach.visible {
        opacity: 1;
    }

    .mf-gesture-coach.hiding {
        opacity: 0;
        pointer-events: none;
    }

    .mf-gesture-row {
        display: flex;
        align-items: center;
        gap: 16px;
        opacity: 0;
        transform: translateY(12px);
    }

    .mf-gesture-row.show {
        animation: mfCoachIn 0.3s ease-out forwards;
    }

    @keyframes mfCoachIn {
        to { opacity: 1; transform: translateY(0); }
    }

    .mf-gesture-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-full);
        background: rgba(253, 252, 250, 0.9);
        border: 1px solid rgba(229, 226, 221, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mf-gesture-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: var(--color-stone);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mf-gesture-label {
        font-family: var(--font-ui);
        font-size: 15px;
        color: #332F2B;
        line-height: 1.4;
    }

    .mf-gesture-label small {
        display: block;
        font-size: 12px;
        color: var(--color-faint);
        margin-top: 2px;
    }

    .mf-coach-dismiss {
        font-family: var(--font-ui);
        font-size: 13px;
        color: var(--color-faint);
        opacity: 0;
        animation: mfCoachIn 0.3s ease-out 1.2s forwards;
    }

    /* --- REDUCED MOTION: Disable animations --- */
    @media (prefers-reduced-motion: reduce) {
        body.focus-mode.mobile-focus .flashcard {
            animation: none !important;
        }
        .mf-drawer-chevron {
            animation: none !important;
        }
        #mf-scroll.swiping-out,
        #mf-scroll.swiping-in {
            animation: none !important;
        }
        .mf-swipe-flash {
            animation: none !important;
        }
        .mf-gesture-row {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        .mf-breath-layer {
            animation: none !important;
        }
        .mf-progress-fill::after {
            animation: none !important;
        }
    }
}

/* =============================================================================
   TABLET FOCUS MODE (床の間 — Tokonoma)
   Floating card on calm surface. Touch-first, keyboard-compatible.
   Scenic image lives inside the card, not behind it.
   Controls auto-hide. Negative space is intentional.
   ============================================================================= */

/* --- BACKGROUND: Warm stone with subtle category tint --- */
body.focus-mode.tablet-focus {
    --nav-blur-peak: 0px; /* No blur on tablet card transitions */
    background: var(--body-bg, #F0EDE8);
    background-image: none;
    overflow: hidden;
    overscroll-behavior: none;
}

body.focus-mode.tablet-focus::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(61, 90, 128, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body.focus-mode.tablet-focus::after {
    display: none !important;
}

/* --- CONTAINER: Centered flex --- */
body.focus-mode.tablet-focus .container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    background: transparent;
}

body.focus-mode.tablet-focus .flashcard-container {
    width: 76%;
    height: 64%;
    max-width: 920px;
    max-height: 640px;
    padding: 68px 0 90px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: none;
    touch-action: pinch-zoom;
    box-sizing: border-box;
}

/* --- CARD: Floating paper on calm surface --- */
body.focus-mode.tablet-focus .flashcard {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transform: none; /* Override desktop media query scale(0.88) — tablet has own sizing via container */
    transform-style: flat;
    transition: none;
    background: var(--color-card);
    box-shadow: 0 2px 12px rgba(44, 44, 44, 0.06);
    touch-action: none;
}

/* --- CARD FACES: Clean paper --- */
body.focus-mode.tablet-focus .card-face {
    background: var(--color-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: none;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: opacity var(--duration) ease;
}

body.focus-mode.tablet-focus .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

/* --- FRONT FACE: Japanese text hero --- */
body.focus-mode.tablet-focus .japanese-text {
    font-size: clamp(52px, 7vw, 96px);
    font-weight: 600;
    color: #332F2B;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-family: var(--font-jp);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    padding: 0;
    margin: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    display: block;
    max-width: 100%;
}

/* Romanization: subtle frosted pill */
body.focus-mode.tablet-focus .card-front .romanization {
    font-size: clamp(18px, 2.5vw, 28px);
    color: var(--color-stone);
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: 0.04em;
    background: rgba(44, 44, 44, 0.03);
    border: none;
    border-radius: var(--radius-lg);
    padding: 8px 20px;
    margin-top: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.focus-mode.tablet-focus .romanization .letter {
    color: var(--color-stone);
}

/* --- BACK FACE: Scenic image top, English bottom --- */
body.focus-mode.tablet-focus .card-back {
    justify-content: stretch;
    padding: 16px 16px 32px;
    gap: 0;
}

body.focus-mode.tablet-focus .card-back .card-content {
    flex: 2;
    justify-content: center;
    padding-top: 0;
    gap: 12px;
}

/* Scenic image fills top ~55% of card.
   !important on content/display to override any inherited pseudo-element rules.
   min-height prevents flex collapse when image hasn't loaded. */
body.focus-mode.tablet-focus .card-back::before {
    content: '' !important;
    display: block !important;
    flex: 3 1 0%;
    min-height: 120px;
    width: 100% !important;
    background-image: var(--category-background) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    border-radius: var(--radius-xl);
    margin: 0;
    order: -1;
}

body.focus-mode.tablet-focus .english-text {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 500;
    color: var(--color-stone);
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-family: var(--font-ui);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    padding: 0;
    margin: 0;
    white-space: normal;
    max-width: 100%;
}

/* POS badge: quiet label on back face */
body.focus-mode.tablet-focus .card-back .class-badge {
    position: static;
    display: inline-block !important;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: #a8a29e;
    background: rgba(44, 44, 44, 0.03);
    border: 1px solid rgba(44, 44, 44, 0.05);
    border-radius: var(--radius-lg);
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    opacity: 1;
    text-shadow: none;
    margin-top: 6px;
}

body.focus-mode.tablet-focus .card-front .class-badge {
    display: none !important;
}

/* --- HIDE desktop decorations --- */
body.focus-mode.tablet-focus .vocabulary-image,
body.focus-mode.tablet-focus .card-category-badge,
body.focus-mode.tablet-focus .logo-watermark,
body.focus-mode.tablet-focus .card-info-tooltip,
body.focus-mode.tablet-focus .focus-button-card,
body.focus-mode.tablet-focus .screen-category-indicator,
body.focus-mode.tablet-focus .ripple-container,
body.focus-mode.tablet-focus .sound-wave,
body.focus-mode.tablet-focus .grid-filter-bar,
body.focus-mode.tablet-focus .grid-container,
body.focus-mode.tablet-focus .premium-progress-wrapper,
body.focus-mode.tablet-focus .app-branding-topleft,
body.focus-mode.tablet-focus .lesson-badge,
body.focus-mode.tablet-focus .bottom-action-bar,
body.focus-mode.tablet-focus .sidebar-reopener,
body.focus-mode.tablet-focus .cloud {
    display: none !important;
}

/* --- CARD NUMBER: Top-left pill (position:fixed on body) --- */
body.focus-mode.tablet-focus #card-number {
    position: fixed;
    top: 20px;
    left: 24px;
    bottom: auto;
    right: auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-romaji);
    background: rgba(44, 44, 44, 0.04);
    padding: 6px 14px !important;
    border-radius: var(--radius-lg);
    border: none;
    font-weight: 500;
    font-family: var(--font-ui);
    z-index: 2200;
    pointer-events: auto;
    box-shadow: none;
    text-shadow: none;
    white-space: nowrap;
    line-height: 1;
    transform: none;
    opacity: 1;
    isolation: isolate;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.focus-mode.tablet-focus #card-number .status-dot {
    display: none !important;
}

body.focus-mode.tablet-focus #card-number-back {
    display: none !important;
}

body.focus-mode.tablet-focus #card-number.status-known {
    background: var(--color-moss) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(107, 127, 92, 0.3) !important;
}

body.focus-mode.tablet-focus #card-number.status-learning {
    background: var(--color-gold) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3) !important;
}

/* --- STATUS BUTTONS: Top-right --- */
.tf-card-status {
    display: none;
}

body.focus-mode.tablet-focus .tf-card-status {
    display: flex;
    position: fixed;
    top: 16px;
    right: 24px;
    z-index: 2200;
    gap: 10px;
}

body.focus-mode.tablet-focus .tf-card-status button {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(44, 44, 44, 0.06);
    background: rgba(250, 250, 247, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #a8a29e;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    box-shadow: 0 1px 4px rgba(44, 44, 44, 0.04);
}

body.focus-mode.tablet-focus .tf-card-status button:active {
    background: rgba(44, 44, 44, 0.04);
}

body.focus-mode.tablet-focus .tf-card-status .mf-btn-known.active {
    background: rgba(163, 177, 138, 0.15);
    border-color: rgba(163, 177, 138, 0.3);
    color: var(--color-moss);
}

body.focus-mode.tablet-focus .tf-card-status .mf-btn-learning.active {
    background: rgba(201, 169, 110, 0.15);
    border-color: rgba(201, 169, 110, 0.3);
    color: var(--color-gold);
}

/* --- BOTTOM BAR: [← Grid] [⇄]  ·····  [🎧] [💡] --- */
.tf-bottombar {
    display: none;
}

body.focus-mode.tablet-focus .tf-bottombar {
    display: flex;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2200;
    justify-content: space-between;
    align-items: center;
    width: 280px;
    background: rgba(250, 250, 247, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(44, 44, 44, 0.05);
    border-radius: var(--radius-xl);
    padding: 6px 10px;
    box-shadow: 0 1px 6px rgba(44, 44, 44, 0.04);
}

.tf-bottombar .tf-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tf-bottombar button {
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-xl);
    border: none;
    background: transparent;
    color: var(--color-stone);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--duration-fast) ease, transform 0.1s ease;
    transform: scale(1);
    flex-shrink: 0;
}

.tf-bottombar .tf-btn-audio,
.tf-bottombar .tf-btn-story {
    width: 44px;
}

.tf-bottombar .tf-btn-exit {
    padding: 0 14px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.tf-bottombar button:active {
    background: rgba(44, 44, 44, 0.06);
    transform: scale(0.92);
}

/* Story button: warm stone tint when active (not indigo — matches 和の感性 palette) */
.tf-btn-story.active {
    background: rgba(201, 169, 110, 0.12);
    color: var(--color-gold);
}

/* --- GESTURE HINT --- */
.tf-gesture-hint {
    display: none;
}

body.focus-mode.tablet-focus .tf-gesture-hint {
    display: block;
    position: fixed;
    bottom: 104px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    z-index: 2200;
    color: rgba(168, 162, 158, 0.0);
    will-change: color;
    animation: tfHintBreathSettle 10s ease-in-out forwards;
    pointer-events: none;
}

@keyframes tfHintBreathSettle {
    0%   { color: rgba(168, 162, 158, 0.0); }
    8%   { color: rgba(168, 162, 158, 0.55); }
    30%  { color: rgba(168, 162, 158, 0.55); }
    50%  { color: rgba(168, 162, 158, 0.2); }
    65%  { color: rgba(168, 162, 158, 0.4); }
    80%  { color: rgba(168, 162, 158, 0.15); }
    100% { color: rgba(168, 162, 158, 0.15); }
}

/* --- WORD STORY: Reuses .mf-story-sheet (shared with mobile) --- */
/* Centered via margin auto (not translateX) to avoid conflict with drag-to-dismiss transform */
/* --- IN-CARD STORY PANEL (slides up inside the flashcard) --- */
.tf-story-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: var(--color-card);
    border-radius: var(--radius-xl);
    z-index: 10;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tf-story-panel.open {
    transform: translateY(0);
}

.tf-story-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 24px 32px;
    flex: 1;
}

.tf-story-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.04);
}

.tf-story-section:last-child {
    border-bottom: none;
}

.tf-story-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-romaji);
    margin-bottom: 6px;
}

.tf-story-text {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.65;
    color: #332F2B;
}

.tf-story-sentence {
    background: rgba(44, 44, 44, 0.02);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.tf-sentence-jp {
    font-family: var(--font-jp);
    font-size: 16px;
    line-height: 1.5;
    color: #332F2B;
    margin-bottom: 4px;
}

.tf-sentence-romaji {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #a8a29e;
    margin-bottom: 2px;
}

.tf-sentence-en {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-stone);
}

.tf-story-panel .related-words {
    margin-top: 12px;
    padding-top: 12px;
    animation: none;
    opacity: 1;
}

.tf-story-panel .rel-row {
    pointer-events: none;
    cursor: default;
}

/* --- STATUS TINTS on card --- */
body.focus-mode.tablet-focus .flashcard.status-known .card-face {
    box-shadow: inset 0 0 0 2px rgba(107, 127, 92, 0.12);
}

body.focus-mode.tablet-focus .flashcard.status-learning .card-face {
    box-shadow: inset 0 0 0 2px rgba(201, 169, 110, 0.12);
}

body.focus-mode.tablet-focus .flashcard[class*="status-flash"] .card-face {
    animation: none;
}

/* --- SLIDE ANIMATIONS: translate+opacity only, no filter (avoids GPU jank on large cards) --- */
body.focus-mode.tablet-focus .flashcard.slide-out-left {
    animation: tfOutLeft var(--duration) var(--ease-out) forwards;
}
body.focus-mode.tablet-focus .flashcard.slide-in-right {
    animation: tfInRight var(--duration) var(--ease-out) forwards;
}
body.focus-mode.tablet-focus .flashcard.slide-out-right {
    animation: tfOutRight var(--duration) var(--ease-out) forwards;
}
body.focus-mode.tablet-focus .flashcard.slide-in-left {
    animation: tfInLeft var(--duration) var(--ease-out) forwards;
}

@keyframes tfOutLeft {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-12%); }
}
@keyframes tfOutRight {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(12%); }
}
@keyframes tfInRight {
    0%   { opacity: 0; transform: translateX(12%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes tfInLeft {
    0%   { opacity: 0; transform: translateX(-12%); }
    100% { opacity: 1; transform: translateX(0); }
}

/* --- TIER-BASED TEXT SIZING (tablet — between mobile and desktop) --- */
body.focus-mode.tablet-focus .flashcard[data-text-tier="short"] .japanese-text {
    font-size: clamp(52px, 7vw, 96px);
}

body.focus-mode.tablet-focus .flashcard[data-text-tier="medium"] .japanese-text {
    font-size: clamp(42px, 5.5vw, 76px);
}

body.focus-mode.tablet-focus .flashcard[data-text-tier="long"] .japanese-text {
    font-size: clamp(34px, 4.5vw, 60px);
}

body.focus-mode.tablet-focus .flashcard[data-text-tier="short"] .english-text {
    font-size: clamp(28px, 4vw, 52px);
}

body.focus-mode.tablet-focus .flashcard[data-text-tier="medium"] .english-text {
    font-size: clamp(24px, 3.5vw, 44px);
}

body.focus-mode.tablet-focus .flashcard[data-text-tier="long"] .english-text {
    font-size: clamp(20px, 3vw, 36px);
}

/* --- LANDSCAPE ORIENTATION: Back face side-by-side --- */
@media (orientation: landscape) and (min-width: 769px) {
    body.focus-mode.tablet-focus .flashcard-container {
        width: 85%;
        height: 80%;
        max-width: 1100px;
        max-height: 780px;
    }

    body.focus-mode.tablet-focus .card-back {
        flex-direction: row;
        padding: 16px;
        gap: 16px;
    }

    body.focus-mode.tablet-focus .card-back::before {
        flex: 2;
        min-width: 0;
        height: 100%;
        border-radius: var(--radius-xl);
    }

    body.focus-mode.tablet-focus .card-back .card-content {
        flex: 3;
        padding: 16px 8px;
    }
}

/* --- SWIPE HINT: Card nudge --- */
body.focus-mode.tablet-focus .flashcard.nudge-hint {
    animation: cardNudge 1.2s ease-in-out var(--duration-slow);
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    body.focus-mode.tablet-focus .flashcard {
        animation: none !important;
    }
    .tf-gesture-hint {
        animation: none !important;
        color: rgba(168, 162, 158, 0.25) !important;
    }
    .tf-secondary-bar {
        transition: none !important;
    }
}