/* ===================================================================
   REVISION MODE CSS — 和の感性 (Japanese Sensibility) Audit Applied
   Subtraction-first: decorative layers removed, quiet foundation kept.
   =================================================================== */

/* ===== TIER-BASED INTELLIGENT SIZING (MOBILE-FIRST) ===== */
/* Progressive enhancement: tier-based + container queries */
/* Using vw for aspect-ratio-aware scaling on YouTube 1920x1080 */

/* Enable container queries on card content */
body.revision-mode .card-front .card-content {
    container-type: inline-size !important;
    container-name: card-content;
}

/* TIER 1: Short text (1-8 chars) - Full cinematic experience */
/* Aligned with video-mode.css for consistent card layout */
body.revision-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);
    --image-size-phase1: min(850px, 62vh);
    --image-size-phase2-4: min(650px, 50vh);
    --image-size-phase5: min(700px, 52vh);
}

/* TIER 2: Medium text (9-15 chars) - Balanced layout */
/* Aligned with video-mode.css for consistent card layout */
body.revision-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);
    --image-size-phase1: min(750px, 58vh);
    --image-size-phase2-4: min(580px, 46vh);
    --image-size-phase5: min(620px, 48vh);
}

/* TIER 3: Long text (16+ chars) - Readability priority */
/* Aligned with video-mode.css for consistent card layout */
body.revision-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);
    --image-size-phase1: min(680px, 54vh);
    --image-size-phase2-4: min(500px, 42vh);
    --image-size-phase5: min(540px, 44vh);
}

/* Apply tier-based sizing to text elements */
/* Container query enhancement: use min() to combine tier size with container-based limit */
/* ========================================
   MOBILE-FIRST TEXT SIZING (YouTube 1920x1080)
   Using vw for aspect-ratio-aware scaling
   ======================================== */

body.revision-mode .japanese-text {
    /* Aligned with video-mode for consistent layout */
    font-size: min(var(--text-size-ja, clamp(64px, 8vh, 108px)), 90cqw);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.revision-mode .english-text,
body.revision-mode #video-mode-english {
    /* Aligned with video-mode for consistent layout */
    font-size: min(var(--text-size-en, clamp(48px, 5vh, 76px)), 90cqw);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.revision-mode .romanization,
body.revision-mode .front-romanization {
    /* Aligned with video-mode for consistent layout */
    font-size: min(var(--text-size-roma, clamp(22px, 2.2vh, 32px)), 90cqw);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Apply tier-based sizing to images (phase-specific) */
body.revision-mode .flashcard[data-text-tier] .vocabulary-image {
    max-height: var(--image-size-phase2-4);
    max-width: 76vw;
    /* Smooth transitions between tiers */
    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: No image shown (active recall text only) */

/* Phase 2: Show image with full reveal */
body.revision-mode .flashcard[data-text-tier].revision-phase-2 .vocabulary-image {
    max-height: min(850px, 62vh);  /* Full cinematic size for reveal */
    max-width: 82vw;
}

/* Video mode specific spacing */
body.revision-mode .japanese-text {
    margin-top: clamp(30px, 4vh, 50px);
}

/* ===== REVISION MODE VERB DISPLAY (TWO-COLUMN LAYOUT) ===== */

/* Verb forms container - matches video mode sizing */
body.revision-mode .japanese-text .verb-forms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: min(var(--text-size-ja, clamp(64px, 8vh, 108px)), 85cqw);
}

/* Dictionary form - larger emphasis */
body.revision-mode .verb-dictionary {
    font-size: 1em;
    font-weight: 600;
}

/* Separator - subtle vertical bar */
body.revision-mode .verb-separator {
    font-size: 0.5em;
    font-weight: 400;
    opacity: 0.4;
    margin: 0 0.1em;
}

/* Derived forms stack */
body.revision-mode .verb-derived-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08em;
    line-height: 1.4;
}

/* Polite and te-form - smaller than dictionary */
body.revision-mode .verb-polite,
body.revision-mode .verb-te {
    font-size: 0.5em;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

/* Verb romanization (single line) */
body.revision-mode .romanization .verb-forms.verb-romanization {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

body.revision-mode .verb-romanization .verb-dictionary {
    font-size: 1em;
    font-weight: 600;
}

body.revision-mode .verb-romanization .verb-separator {
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.5;
    margin: 0 0.2em;
}

body.revision-mode .verb-romanization .verb-derived {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

/* ===== TEXT STATES WHEN AUDIO PLAYS ===== */

/* Phase 3: Audio phase - ensure visibility */
body.revision-mode .flashcard.revision-phase-3 .japanese-text {
    opacity: 1;
    color: #332F2B;
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
    transition: text-shadow 0.3s ease-out, color 0.3s ease-out;
}

/* Phase 3: Ensure romanization and English are visible */
body.revision-mode .flashcard.revision-phase-3 .romanization,
body.revision-mode .flashcard.revision-phase-3 .front-romanization,
body.revision-mode .flashcard.revision-phase-3 #video-mode-english,
body.revision-mode .flashcard.revision-phase-3 .english-text {
    opacity: 1;
}

/* During audio: sumi ink stays — no color shift (和の感性: ink stays ink) */
body.revision-mode .flashcard.audio-playing .japanese-text {
    color: #332F2B;
}

/* Romanization in revision mode - highlight on audio play (aligned with video-mode values) */
body.revision-mode .flashcard.audio-playing .romanization {
    background: rgba(61, 90, 128, 0.18) !important;
    border: 1px solid rgba(61, 90, 128, 0.35) !important;
    color: #3D5A80 !important;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* English text - neutral shadow (aligned with video-mode) */
body.revision-mode .flashcard .english-text {
    color: #57534e;
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
    transition: text-shadow 0.8s ease, opacity 0.3s ease;
}

/* ===== LOWER THIRD UI (REVISION-MODE OVERRIDES) ===== */
/* Base .lower-third styles live in video-mode.css (loads first) */

body.revision-mode .lower-third {
    display: flex;
    padding: 0 40px; /* Override base padding: 0 */
}

body.revision-mode .lower-third.visible {
    opacity: 1;
}

/* Layout overrides — revision uses different column visibility than video */
body.revision-mode .lower-third-left {
    display: none; /* Hidden — clean design, category moved to top-right */
}

body.revision-mode .lower-third-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

body.revision-mode .lower-third-right {
    flex: 0 0 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Progress track override — revision uses fluid width */
body.revision-mode .progress-track {
    flex: 1;
    max-width: 600px;
}

/* ========================================
   VIDEO MODE: FROSTED GLASS CARD EFFECT
   Simplified to 2 states: base + text-visible
   ======================================== */

/* Base frosted glass — used during Phase 1 (background focus) */
body.revision-mode .card-face {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.06) !important;
    transition: background 0.8s ease-out,
                backdrop-filter 0.8s ease-out,
                border 0.8s ease-out,
                box-shadow 0.8s ease-out;
}

/* Text-visible frosted glass — Phase 2/4 (readability priority) */
body.revision-mode .flashcard.revision-phase-2 .card-face,
body.revision-mode .flashcard.revision-phase-4 .card-face {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.06) !important;
}

/* Settled frosted glass — Phase 3/5 (consolidation, between extremes) */
body.revision-mode .flashcard.revision-phase-3 .card-face,
body.revision-mode .flashcard.revision-phase-5 .card-face {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.05) !important;
}

/* Padding handled by smart scale calculation - no manual overrides needed */

/* Text readability — single-layer shadow (和の感性: printed, not floating) */
body.revision-mode .japanese-text,
body.revision-mode .front-romanization,
body.revision-mode #video-mode-english {
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
}

/* Romanization — warm gray with subtle frosted backing for readability */
body.revision-mode .romanization,
body.revision-mode .front-romanization {
    color: #4A4642 !important;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 12px;
    display: inline-block;
}

/* Image maintains clarity against frosted background */
body.revision-mode .vocabulary-image {
    filter: drop-shadow(0 2px 6px rgba(44, 44, 44, 0.10));
}

/* Ensure content stays above card background */
body.revision-mode .card-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   BREATHING BACKGROUND — Static (was animated)
   ======================================== */

/* Background layer - sits behind everything, static */
body.revision-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--category-background);
    background-size: cover;
    background-position: center;
    z-index: -1;
    /* Default state = Phase 1 (blurred) to avoid flash when loading new words */
    filter: blur(10px) saturate(80%) brightness(90%);
    /* CRITICAL FIX: Instant blur-increase, slow blur-decrease */
    transition: filter 0s, transform 0.6s ease;
}

/* ========================================
   CINEMATIC PHASE TRANSITIONS
   Background blur/unblur per phase
   ======================================== */

/* PHASE 1: Heavy blur — abstract the background to a color wash so the
   illustration can't leak the answer during JP→EN active recall. (Stage-3
   rewire fixed a previously-broken background URL; the older blur(10px)
   value was tuned against a 404 fallback and is now too light.) */
body.revision-mode:has(.flashcard.revision-phase-1)::after {
    filter: blur(60px) saturate(70%) brightness(85%);
    transform: scale(1.1); /* Hide blurred edges revealed by the heavy blur */
    /* Instant re-blur when returning to Phase 1 (prevents hint leakage) */
    transition: filter 0s, transform 0s;
}

/* PHASE 1: Remove blur for EN->JP mode (English prompt doesn't need blur) */
body.revision-mode.revision-english-first:has(.flashcard.revision-phase-1)::after {
    filter: blur(0px) saturate(85%) brightness(98%);
    transform: scale(1.0);
}

/* PHASE 2: Unblur reveal */
body.revision-mode:has(.flashcard.revision-phase-2)::after {
    filter: saturate(85%) brightness(98%);
    transition: filter 0.6s ease;
}

/* PHASE 3: Settled */
body.revision-mode:has(.flashcard.revision-phase-3)::after {
    filter: saturate(90%) brightness(98%);
    transition: filter 0.6s ease;
}

/* ========================================
   IMAGE TRANSFORMATION SYSTEM
   Vocabulary image reveal with scale
   ======================================== */

/* Base image properties */
body.revision-mode .vocabulary-image {
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

/* PHASE 1: Image hidden for active recall */
body.revision-mode .flashcard.revision-phase-1 .vocabulary-image {
    display: none;
    opacity: 0;
}

/* PHASE 2: Simple opacity reveal */
body.revision-mode .flashcard.revision-phase-2 .vocabulary-image {
    transform: scale(1.0);
    filter: drop-shadow(0 2px 6px rgba(44, 44, 44, 0.10));
    opacity: 1;
}

/* PHASE 3: Settled state */
body.revision-mode .flashcard.revision-phase-3 .vocabulary-image {
    transform: scale(1.0);
    filter: drop-shadow(0 2px 6px rgba(44, 44, 44, 0.10));
    opacity: 1;
}

/* ========================================
   TEXT REVEAL (Phase 2) — simpleFadeIn
   Opacity-only, staggered delays
   ======================================== */

@keyframes simpleFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Japanese text reveal in Phase 2 */
body.revision-mode .flashcard.revision-phase-2 .japanese-text {
    opacity: 0;
    animation: simpleFadeIn 0.6s ease-out both;
    animation-delay: 0.2s;
    color: #332F2B;
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
}

/* Romanization reveal */
body.revision-mode .flashcard.revision-phase-2 .romanization,
body.revision-mode .flashcard.revision-phase-2 .front-romanization {
    opacity: 0;
    animation: simpleFadeIn 0.6s ease-out both;
    animation-delay: 0.4s;
}

/* English text reveal */
body.revision-mode .flashcard.revision-phase-2 #video-mode-english,
body.revision-mode .flashcard.revision-phase-2 .english-text {
    opacity: 0;
    animation: simpleFadeIn 0.6s ease-out both;
    animation-delay: 0.6s;
}

/* ========================================
   PHASE 1 TEXT SAFETY
   ======================================== */

/* Phase 1 text — wrapping safety net for long words */
body.revision-mode .flashcard.revision-phase-1 .japanese-text,
body.revision-mode .flashcard.revision-phase-1 .english-text {
    /* Smart text wrapping - safety net for edge cases */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.3;
    max-width: 90vw;
    padding: 0 2vw;
    box-sizing: border-box;
}

/* ========================================
   COUNTDOWN OVERLAY — Simplified
   SVG ring + single number only
   ======================================== */

/* Main Container - Fullscreen overlay */
.countdown-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2500;
    pointer-events: none;
    overflow: hidden;
}

/* Show countdown when active */
body.revision-mode .countdown-overlay.active {
    display: block;
}

/* Ring and number container */
.countdown-ring-container {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

/* SVG Ring System */
.countdown-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.3));
    transform: rotate(-90deg);
    transition: filter 0.8s ease;
}

.countdown-ring .ring-track {
    transition: stroke 0.8s ease;
}

.countdown-ring .ring-progress {
    transition: stroke 0.8s ease;
    filter: drop-shadow(0 0 4px currentColor);
    stroke-dashoffset: 0;
}

/* Animate ring depletion when countdown is active */
body.revision-mode .countdown-overlay.active .ring-progress {
    animation: ringDeplete 3s linear forwards;
}

@keyframes ringDeplete {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 628.32;
    }
}

/* PAUSE STATE: Freeze all countdown animations */
.countdown-overlay.paused *,
.countdown-overlay.paused .countdown-number,
.countdown-overlay.paused .ring-progress {
    animation-play-state: paused !important;
}

.countdown-ring .ring-inner {
    opacity: 0.15;
}

/* Calm monochromatic color */
.countdown-overlay[data-count="3"] .ring-progress {
    stroke: rgba(102, 126, 234, 0.6);
}

.countdown-overlay[data-count="2"] .ring-progress {
    stroke: rgba(102, 126, 234, 0.7);
}

.countdown-overlay[data-count="1"] .ring-progress {
    stroke: rgba(102, 126, 234, 0.85);
}

/* Countdown Number Container */
.countdown-number-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Main number */
.countdown-number {
    position: relative;
    font-size: 64px;
    font-weight: 400;
    color: rgba(61, 90, 128, 0.90);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1;
    text-shadow:
        0 0 16px rgba(61, 90, 128, 0.18),
        0 2px 8px rgba(44, 44, 44, 0.08);
    opacity: 0;
    transform: scale(1);
}

/* Gentle breathing entrance */
.countdown-number.animate {
    animation: countdownBreatheIn 1s ease-out forwards;
}

@keyframes countdownBreatheIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Gentle breathing exit */
.countdown-number.exit {
    animation: countdownBreatheOut 0.6s ease-in forwards;
}

@keyframes countdownBreatheOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* Countdown light rays - hidden */
.countdown-light-rays {
    display: none;
}

.light-ray {
    display: none;
}

/* ========================================
   CARD BASE PROPERTIES
   Phase-based depth and shadow
   ======================================== */

/* Base card transformation properties */
body.revision-mode .flashcard {
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

/* PHASE 1: Static, neutral */
body.revision-mode .flashcard.revision-phase-1 {
    transform: scale(1.0);
    box-shadow:
        0 8px 32px rgba(44, 44, 44, 0.07),
        0 4px 16px rgba(44, 44, 44, 0.05);
}

/* PHASE 2: Same - no animation, just CSS transition from phase 1 */
body.revision-mode .flashcard.revision-phase-2 {
    transform: scale(1.0);
    box-shadow:
        0 12px 40px rgba(44, 44, 44, 0.07),
        0 6px 20px rgba(44, 44, 44, 0.05);
}

/* PHASE 3: Warm settled state (consolidation) */
body.revision-mode .flashcard.revision-phase-3 {
    transform: scale(1.0);
    box-shadow:
        0 10px 35px rgba(44, 44, 44, 0.06),
        0 5px 18px rgba(44, 44, 44, 0.04);
}

/* ============================================================
   REVISION MODE CROSSFADE - Pure opacity (no transforms)
   Overrides video-mode transforms to prevent corner overlap
   ============================================================ */

/* EXIT: Pure opacity fade - no scale/translate (prevents misalignment) */
body.revision-mode .flashcard.crossfade-exit,
body.revision-mode #flashcard-exiting-clone {
    animation: revisionCrossfadeExit 0.5s linear both !important;
    pointer-events: none;
    z-index: 1;
}

@keyframes revisionCrossfadeExit {
    0% {
        opacity: 1;
        transform: none;
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: none;
        filter: blur(1px);
    }
}

/* ENTRANCE: Pure opacity fade - no scale/translate (prevents misalignment) */
body.revision-mode .flashcard.crossfade-entrance {
    opacity: 0 !important;
    transform: none !important;
    filter: blur(1px) !important;

    animation: revisionCrossfadeEntrance 0.5s ease-out both !important;
    animation-delay: 0.25s !important;
    animation-fill-mode: both !important;
    z-index: 2;
}

@keyframes revisionCrossfadeEntrance {
    0% {
        opacity: 0;
        transform: none;
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: blur(0px);
    }
}

/* Preserve natural colors - images and text unaffected */
body.revision-mode .vocabulary-image,
body.revision-mode .vocabulary-image img,
body.revision-mode .intro-background-image {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* ========================================
   FURIGANA (RUBY) STYLING FOR JP->EN MODE
   Shows kana reading above kanji
   Best practices: 45% size ratio, muted color, centered
   ======================================== */

/* Ruby text container */
body.revision-mode .japanese-text ruby {
    ruby-position: over;
}

/* Furigana reading (kana above kanji)
   - 45% ratio ideal for large flashcard displays (per W3C guidance)
   - Muted color creates visual hierarchy (kanji primary, furigana secondary)
   - Tight line-height prevents layout shifts */
body.revision-mode .japanese-text ruby rt {
    font-size: 0.45em;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.04em;
    color: inherit;
    opacity: 0.55;
    padding-bottom: 0.08em;
    transition: color 0.4s ease, opacity 0.4s ease;
}

/* Phase 1: Muted gray furigana during active recall */
body.revision-mode .flashcard.revision-phase-1 .japanese-text ruby rt {
    color: #57534e;
    opacity: 0.6;
}

/* Phase 2-3: Indigo-gray furigana matching revealed text */
body.revision-mode .flashcard.revision-phase-2 .japanese-text ruby rt,
body.revision-mode .flashcard.revision-phase-3 .japanese-text ruby rt {
    color: #3D5A80;
    opacity: 0.55;
}

/* Audio playing: JP accent furigana (aligned with text color) */
body.revision-mode .flashcard.audio-playing .japanese-text ruby rt {
    color: #3D5A80;
    opacity: 0.6;
}

/* Verb furigana - slightly smaller for stacked conjugations */
body.revision-mode .japanese-text .verb-forms ruby rt {
    font-size: 0.5em;
}

/* ========================================
   TABLET/IPAD ADJUSTMENTS (769px - 1024px)
   Full revision mode experience (like desktop)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tier-based text sizing - Tablet optimized */
    /* Aligned with video-mode.css for consistent card layout */
    body.revision-mode .flashcard[data-text-tier="short"] {
        --text-size-ja: clamp(56px, 7.5vh, 96px);
        --text-size-en: clamp(42px, 4.8vh, 68px);
        --text-size-roma: clamp(20px, 2.1vh, 30px);
        --image-size-phase1: min(750px, 58vh);
        --image-size-phase2-4: min(580px, 46vh);
        --image-size-phase5: min(620px, 48vh);
    }

    body.revision-mode .flashcard[data-text-tier="medium"] {
        --text-size-ja: clamp(46px, 6.2vh, 80px);
        --text-size-en: clamp(36px, 4.2vh, 58px);
        --text-size-roma: clamp(18px, 1.9vh, 26px);
        --image-size-phase1: min(680px, 54vh);
        --image-size-phase2-4: min(520px, 42vh);
        --image-size-phase5: min(560px, 44vh);
    }

    body.revision-mode .flashcard[data-text-tier="long"] {
        --text-size-ja: clamp(38px, 5.2vh, 66px);
        --text-size-en: clamp(28px, 3.8vh, 48px);
        --text-size-roma: clamp(16px, 1.7vh, 22px);
        --image-size-phase1: min(600px, 50vh);
        --image-size-phase2-4: min(460px, 38vh);
        --image-size-phase5: min(500px, 40vh);
    }

    /* Countdown ring - Tablet sizing */
    .countdown-ring-container {
        width: 180px;
        height: 180px;
    }

    /* Card number badge - Tablet sizing (aligned with focus mode) */
    body.revision-mode .card-number {
        padding: 8px 18px !important;
        font-size: 1rem !important;
    }

    /* POS badge - Tablet sizing (aligned with focus mode) */
    body.revision-mode .class-badge {
        padding: 8px 18px !important;
        font-size: 1rem !important;
    }

    /* Logo watermark - Tablet sizing */
    body.revision-mode .logo-watermark img {
        width: 70px;
        height: 70px;
    }
}