/* Standard Mode Refined (v3) - RESTORED */

/* ========================================
   Hero Text Animation System
   Japanese text is the "hero" when romanization hidden,
   gracefully makes room when romanization reveals
   ======================================== */

/* Spring easing for premium feel */
:root {
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default state: Japanese text is HERO (larger, more centered) */
body:not(.focus-mode):not(.video-mode) .card-content:not(.romanization-revealed) .japanese-text {
    transform: scale(1.12) translateY(8px);
    transition: transform 0.45s var(--spring-soft),
                font-size 0.45s var(--spring-soft);
}

/* Revealed state: Japanese text makes room */
body:not(.focus-mode):not(.video-mode) .card-content.romanization-revealed .japanese-text {
    transform: scale(1) translateY(0);
    transition: transform 0.4s var(--spring-bounce),
                font-size 0.4s var(--spring-bounce);
}

/* Romanization container entrance animation */
body:not(.focus-mode):not(.video-mode) .card-content.romanization-revealed .romanization {
    animation: romanizationContainerEnter 0.5s var(--spring-bounce) forwards;
}

@keyframes romanizationContainerEnter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.92);
        filter: blur(2px);
    }
    60% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* Mobile: Subtler hero effect (less scale to preserve readability) */
@media (max-width: 768px) {
    body:not(.focus-mode):not(.video-mode) .card-content:not(.romanization-revealed) .japanese-text {
        transform: scale(1.08) translateY(6px);
    }

    @keyframes romanizationContainerEnter {
        0% {
            opacity: 0;
            transform: translateY(15px) scale(0.95);
            filter: blur(1px);
        }
        60% {
            opacity: 1;
            filter: blur(0px);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0px);
        }
    }
}

/* ========================================
   Romanization Letter Animation (Standard Mode)
   ======================================== */

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

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


/* ========================================
   Root Variables & Premium Tokens
   ======================================== */
:root {
    /* WIDER DRAWER for better legibility on laptops */
    --drawer-width: 420px;
    
    --bottom-bar-height: 90px;
    --top-bar-height: 90px;
    --hero-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ========================================
   Layout Restructuring - GLOBAL RESETS
   ======================================== */

body:not(.focus-mode):not(.video-mode) {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport - excludes Safari address bar */
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden; /* NO SCROLL */
    /* Fix background to viewport to prevent blue gaps */
    background-attachment: fixed;
    background-size: cover;
    /* Safe areas for notched phones (landscape) */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

body:not(.focus-mode):not(.video-mode) .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%; /* Fill fixed body */
    padding: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative; /* Context for absolute progress if needed */
    max-width: none;
}

/* Flashcard Container - The "Hero" Stage */
body:not(.focus-mode):not(.video-mode) .flashcard-container {
    display: flex;
    /* FLEX 1: Takes all available space between Top Bar and Bottom Bar */
    flex: 1;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0;
    /* Margins account for Top Bar flow (70px) */
    margin-top: var(--top-bar-height);
    margin-bottom: 0;
    height: auto; /* Let Flex handle height */
    min-height: 0; /* Allow shrinking if needed */
}

/* Flashcard adjustments - Responsive Scale */
body:not(.focus-mode):not(.video-mode) .flashcard {
    /* Responsive height: min 300px, prefer 65% of dynamic viewport, max 900px */
    height: clamp(300px, 65dvh, 900px);
    width: clamp(300px, 90vw, 1000px);
    max-width: 1000px;
    margin: 0 auto;
    transition: transform 0.5s var(--hero-ease), box-shadow 0.5s var(--hero-ease);
    position: relative;
}

body:not(.focus-mode):not(.video-mode) .card-face {
    height: 100%;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* FIX: Absolute positioning prevents layout shifts when toggling faces */
    position: absolute;
    top: 0;
    left: 0;
}

body:not(.focus-mode):not(.video-mode) .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    gap: 20px;
}

/* FIX: Ensure hidden faces stay hidden even with !important overrides */
body:not(.focus-mode):not(.video-mode) .card-face[style*="display: none"] {
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* FIX: Responsive Image Sizing */
body:not(.focus-mode):not(.video-mode) .vocabulary-image {
    width: auto;
    height: auto;
    max-height: 60%;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 1;
}

/* ========================================
   Top Navigation Bar
   ======================================== */
.hero-top-bar {
    position: fixed;
    top: 0;
    top: env(safe-area-inset-top, 0); /* Respect notch on iPhones */
    left: 0;
    width: 100%;
    height: var(--top-bar-height);
    padding: 0 30px;
    padding-left: calc(30px + env(safe-area-inset-left, 0));
    padding-right: calc(30px + env(safe-area-inset-right, 0));
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    background: transparent;
}

.hero-top-bar > * {
    pointer-events: auto;
}

/* Brand Icon (Left) — the hanko seal (canonical .brand-hanko, css/brand.css;
   the old red 言-on-vermillion badge violated the one-mark/no-red brand rules) */
.top-brand {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.top-brand:hover { transform: scale(1.05); }

.top-brand-seal {
    width: 28px;
    height: 28px;
}


/* Session Stats Pill (Center) */
.session-pill {
    /* FIX: Absolute centering to ignore side element widths */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    height: 56px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(44,44,44,0.06);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Right Controls */
.top-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    transition: transform 0.4s var(--hero-ease), opacity 0.3s ease;
}

.icon-btn {
    width: 40px;
    height: 40px;
    background: rgba(44, 44, 44, 0.03);
    border: none;
    border-radius: 50%;
    color: var(--color-romaji);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.icon-btn:hover {
    background: rgba(44, 44, 44, 0.06);
    color: var(--color-stone);
}

.icon-btn:active {
    background: rgba(44, 44, 44, 0.08);
    transform: scale(0.96);
}

/* Header Quiz button - styled as premium pill, hidden by default */
.header-quiz-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    background: var(--color-accent);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(61, 90, 128, 0.18);
    transition: all 0.2s ease;
}

.header-quiz-btn:active {
    transform: scale(0.96);
}


/* ========================================
   Search Modal (DEPRECATED - Now using vocab-panel.css)
   Keeping minimal styles for backwards compatibility
   ======================================== */
/* Old modal styles removed - see css/vocab-panel.css */


/* Reset progress moved to account dropdown — see css/sync.css */

/* Chat UI styles moved to css/sidebar.css (loads globally) */

.sentences-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 44, 44, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sentences-panel-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sentences-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 75vh;
    background: #f8fafc;
    z-index: 998;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 28px 28px 0 0;
    /* Parked, the sheet casts nothing (desktop polish round 3, finding 1). It
       waits with its top edge exactly on the window's bottom edge, so a shadow
       here painted up into every screen above it: a grey band across the foot
       of the wall, the Practice side and the foot of every page. The shadow is
       the OPEN sheet's (.active below). It comes and goes with the class and is
       never transitioned, so the slide itself is untouched and no frame of it
       repaints a 60px blur (the swipe's inline transition stays harmless too). */
    box-shadow: none;
    overflow: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

.sentences-panel.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    box-shadow: 0 -20px 60px rgba(44,44,44,0.15);
}

/* Chat Header with Onigiri Avatar - Warm Peach Theme */
.sentences-panel-header.chat-header {
    background: #f5f5f4;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.06);
}

.chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Warm Peach */
    background: #fff7ed;
    border: 2px solid rgba(194, 65, 12, 0.15);
    box-shadow: 0 2px 8px rgba(44,44,44,0.06);
}

.chat-avatar img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.chat-contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-contact-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #292524;
}

.chat-contact-status {
    font-size: 0.75rem;
    color: var(--status-online-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-status-dot {
    width: 7px;
    height: 7px;
    background: var(--status-online);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--status-online-rgb), 0.3);
    display: inline-block;
}

.sentences-panel-close {
    background: rgba(44, 44, 44, 0.06);
    border: none;
    color: rgba(44, 44, 44, 0.4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sentences-panel-close:hover {
    background: rgba(44, 44, 44, 0.1);
    color: rgba(44, 44, 44, 0.6);
}

.sentences-panel-close:active {
    transform: scale(0.95);
}

/* Chat Body */
.sentences-panel-content.chat-body {
    padding: 24px 18px 48px;
    overflow-y: auto;
    flex: 1;
    background: #fafaf9;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Chat bubble content styles moved to css/sidebar.css */

/* No content state */
.no-sentences {
    text-align: center;
    color: var(--color-faint);
    padding: 40px 20px;
    font-size: 1rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .sentences-panel {
        max-height: 85vh;
        border-radius: 24px 24px 0 0;
    }

    /* Drag handle for swipe-to-close affordance */
    .sentences-panel::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(44, 44, 44, 0.15);
        border-radius: 2px;
        z-index: 10;
    }

    .sentences-panel-header.chat-header {
        padding: 20px 18px 16px;
    }

    /* Larger close button for touch (44px minimum) */
    .sentences-panel-close {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .chat-avatar {
        width: 44px;
        height: 44px;
    }

    .chat-avatar img {
        width: 36px;
        height: 36px;
    }

    .chat-contact-name {
        font-size: 1.05rem;
    }

    .sentences-panel-content.chat-body {
        padding: 18px 14px calc(60px + env(safe-area-inset-bottom, 20px));
        gap: 14px;
    }

    .chat-user-message {
        max-width: 75%;
        padding: 12px 16px;
    }

    .chat-user-word {
        font-size: 1.5rem;
    }

    .chat-onigiri-message {
        max-width: 90%;
    }

    .chat-bubble {
        padding: 12px 16px;
    }

    .chat-bubble-text {
        font-size: 0.9rem;
    }

    .chat-sentence-japanese {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .chat-sentence-english {
        font-size: 0.88rem;
    }

    .chat-sentences-list {
        margin-left: 32px;
        gap: 10px;
    }

    .chat-quote-content {
        padding: 14px 16px;
    }

    .chat-quote-number {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    /* Tap highlight for sentence quotes */
    .chat-sentence-quote {
        -webkit-tap-highlight-color: rgba(61, 90, 128, 0.1);
    }
}


/* ========================================
   Premium Progress Bar (Floating)
   ======================================== */
.premium-progress-wrapper {
    width: 90%;
    max-width: 600px;
    margin: 0 auto 10px auto; /* Spacing above bottom bar */
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 90;
    pointer-events: none; /* Let clicks pass through if tight */
}

.progress-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 4px;
}

.progress-label {
    display: none;
}

.progress-percent {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    font-variant-numeric: tabular-nums;
}

.premium-progress-track {
    width: 100%;
    height: 8px; /* Thicker than before */
    background: rgba(44, 44, 44, 0.2);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(44,44,44,0.18);
}

.premium-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent), #2C4A6E, #ff758c);
    background-size: 200% 100%;
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: gradientFlow 3s ease infinite;
    box-shadow: 0 0 10px rgba(61, 90, 128, 0.3);
}

@keyframes gradientFlow {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ========================================
   Bottom Action Bar (Flex Item)
   ======================================== */
.bottom-action-bar {
    /* Static positioning to participate in Flex Column */
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;

    /* Fixed height to reserve space - increased for labels */
    flex: 0 0 110px;
    margin: 0 auto 20px auto; /* Bottom padding safe zone */

    width: auto;
    max-width: 95%;
    height: auto;
    min-height: 90px;
    background: rgba(20, 20, 25, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 24px rgba(44, 44, 44, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 20px 8px 20px;
    z-index: 100;
}

/* Hover label strip - shows button info */
.action-label-strip {
    height: 20px;
    min-height: 20px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    letter-spacing: 0.5px;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.action-label-strip:empty::before {
    content: "Hover for details";
    opacity: 0.4;
    font-style: italic;
}

.action-label-strip .label-name {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.action-label-strip .label-desc {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.action-label-strip .label-shortcut {
    color: #fff;
    background: rgba(61, 90, 128, 0.7);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(61, 90, 128, 0.9);
    box-shadow: 0 2px 8px rgba(61, 90, 128, 0.18);
}

/* Container for all button groups */
.action-groups-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

/* Individual button group */
.action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Group label above buttons */
.group-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    white-space: nowrap;
}

/* Buttons container within group */
.group-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.08);
    color: white;
}

/* Content badge for More Info button */
.action-btn {
    position: relative;
}

.content-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -1px;
    pointer-events: none;
}

.content-badge.rich {
    color: var(--color-amber);
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.3);
}

/* ========================================
   Action Button Color Palette
   FULLY NEUTRAL - Only Mark buttons colored
   ======================================== */

/* All action buttons use neutral glass (inherits from .action-btn base) */
/* Navigate, Flip, Study, Mode, Shuffle - all neutral white glass */

/* Flip button - slightly larger emoji */
.action-btn.btn-flip {
    font-size: 1.5rem;
}

/* Quiz Button - Neutral glass with brightened emoji */
.action-btn.btn-quiz {
    font-size: 1.3rem;
    filter: brightness(2) saturate(1.5);
}
.action-btn.btn-quiz:hover {
    filter: brightness(2.2) saturate(1.6);
}

/* Mark Learned Button — moss green (semantic: learned) */
.action-btn.btn-known.active {
    background: rgba(163, 177, 138, 0.2);
    color: #a3b18a;
}

/* Mark Learning Button — gold (semantic: needs practice) */
.action-btn.btn-learning.active {
    background: rgba(201, 169, 110, 0.2);
    color: var(--color-gold);
}

/* ========================================
   SPLIT PLAY BUTTON WITH DROPDOWN
   ======================================== */
.split-button-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.split-button-container .split-main {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.split-dropdown-toggle {
    width: 24px;
    height: 50px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    margin-left: -8px;
    padding-left: 4px;
}

.split-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.split-dropdown-toggle .dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.split-button-container.dropdown-open .split-dropdown-toggle .dropdown-arrow {
    transform: rotate(180deg);
}

/* Play Mode Dropdown Menu */
.play-mode-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 35, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 6px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.24);
}

.split-button-container.dropdown-open .play-mode-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.play-mode-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: left;
}

.play-mode-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.play-mode-dropdown .dropdown-item.selected {
    background: rgba(61, 90, 128, 0.25);
    color: white;
}

.play-mode-dropdown .dropdown-item.selected::before {
    content: '✓';
    position: absolute;
    right: 12px;
    font-size: 0.9rem;
    color: var(--color-accent);
}

.play-mode-dropdown .dropdown-icon {
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
}

.play-mode-dropdown .dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.play-mode-dropdown .dropdown-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.play-mode-dropdown .dropdown-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.play-mode-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 8px;
}

/* ========================================
   PROGRESS BAR (Attached to Card) - DISABLED
   ======================================== */
body:not(.focus-mode):not(.video-mode) .progress-container {
   display: none;
}

/* Desktop-only elements (hide on mobile) */
.mobile-only {
    display: none !important;
}

/* HIDE OLD ELEMENTS */
.shortcuts-info,
.stats-dashboard,
.media-status,
.focus-exit-button,
.video-pause-button
{
    display: none !important;
}

/* ========================================
   TABLET/IPAD ADJUSTMENTS (769px - 1024px)
   Optimized for iPad Mini, iPad Air, iPad Pro
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --drawer-width: 380px;
        --top-bar-height: 65px;
        --bottom-bar-height: 85px;
    }

    /* Flashcard - Tablet optimized sizing */
    body:not(.focus-mode):not(.video-mode) .flashcard {
        height: clamp(400px, 70dvh, 750px);
        width: clamp(400px, 85vw, 850px);
        max-width: 850px;
    }

    /* Sentences Panel - Tablet optimized */
    .sentences-panel {
        max-height: 75vh;
        width: 90%;
        max-width: 600px;
    }

    /* Top Controls - Slightly tighter spacing */
    .top-controls-right {
        gap: 10px;
    }

    .icon-btn {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    /* Session pill - Tablet size (match button height) */
    .session-pill {
        height: 48px;
        font-size: 0.95rem;
        padding: 0 22px;
    }

    /* Bottom Action Bar - Tablet optimized */
    .bottom-action-bar {
        height: var(--bottom-bar-height);
        max-width: 85%;
        gap: 10px;
        padding: 10px 20px;
    }

    .action-btn {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    /* Vocabulary image - Tablet sizing */
    body:not(.focus-mode):not(.video-mode) .vocabulary-image {
        max-width: 480px;
        max-height: 480px;
    }

    /* Card badges - Slightly smaller */
    .card-number {
        padding: 7px 16px;
        font-size: 0.95em;
    }

    .class-badge {
        padding: 7px 16px;
        font-size: 0.85em;
    }

    /* Progress bar wrapper */
    .premium-progress-wrapper {
        max-width: 550px;
    }
}

/* Mobile Tweaks */
/* Mobile Tweaks - IMMERSIVE MODE */
@media (max-width: 768px) {
    :root {
        --drawer-width: 100%;
        --top-bar-height: 50px; /* Condensed top bar */
    }

    /* Show mobile-only elements, hide desktop-only */
    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* Mobile Text Scaling Overrides (Fix Long Kana Clipping) */
    .flashcard[data-text-tier="short"] { --text-size-ja: clamp(2.5rem, 12vw, 4em); }
    .flashcard[data-text-tier="medium"] { --text-size-ja: clamp(1.8rem, 8vw, 3em); }
    .flashcard[data-text-tier="long"] { --text-size-ja: clamp(1.2rem, 6vw, 2.2em); }

    /* ========================================
       DYNAMIC TEXT SCALING (Per-Word)
       Uses --ja-chars and --roma-chars from JS
       ======================================== */

    /* Dynamic Japanese scaling: larger chars = smaller font */
    /* Formula: 60vw / char_count (reduced from 72vw to account for container padding) */
    body:not(.focus-mode):not(.video-mode) .japanese-text {
        font-size: clamp(1.2rem, min(calc(60vw / var(--ja-chars, 8)), 10vw), 4rem);
    }

    /* Dynamic Romanization scaling: ensures long romanizations fit */
    /* Uses min() to pick smaller of: base size OR calculated fit size */
    body:not(.focus-mode):not(.video-mode) .romanization,
    body:not(.focus-mode):not(.video-mode) #front-romanization {
        /* Base: 1.2rem, but cap at (80vw / char_count * 1.8) for long words */
        font-size: clamp(0.7rem, min(1.2rem, calc(80vw / var(--roma-chars, 12) * 1.8)), 1.4rem);
        /* Allow wrapping for very long romanizations (2 lines max) */
        white-space: normal;
        text-align: center;
        line-height: 1.4;
        max-width: 95%;
        word-break: keep-all; /* Don't break mid-word */
    }

    /* Hide top-right buttons when vocab panel is open */
    body.vocab-panel-open .top-controls-right {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    /* IMMERSIVE HERO CARD LAYOUT - Optimized for iPhone 14 Pro Max (430x932) */
    body:not(.focus-mode):not(.video-mode) .flashcard {
        height: calc(100dvh - 140px); /* Full height minus top bar and action bar */
        width: calc(100vw - 12px);
        max-width: none;
        margin-top: 0px;
    }

    /* Opaque white card face — prevents warm body color bleeding through */
    body:not(.focus-mode):not(.video-mode) .card-face {
        background: var(--color-card);
    }

    /* ========================================
       HERO MODE: Content expands to fill space,
       shrinks gracefully when romanization appears
       ======================================== */

    /* Card Content - center content, smooth transitions */
    body:not(.focus-mode):not(.video-mode) .card-content {
        justify-content: center;
        padding: clamp(35px, 4dvh, 50px) 15px 12px 15px; /* Reduced top padding - shifts content up */
        gap: 10px;
        align-items: center;
        text-align: center;
    }

    /* HERO STATE: Before romanization - image and text fill space */
    body:not(.focus-mode):not(.video-mode) .card-content:not(.romanization-revealed) .vocabulary-image {
        max-height: none;
        height: 65%; /* Larger image when no romanization */
        min-height: 270px;
        width: auto;
        max-width: 100%;
        margin-bottom: 12px;
        object-fit: contain;
        flex-shrink: 0;
        transition: height 0.4s ease-out, margin 0.3s ease-out;
    }

    /* HERO STATE: Japanese text is bigger when alone */
    body:not(.focus-mode):not(.video-mode) .card-content:not(.romanization-revealed) .japanese-text {
        transform: scale(1.15);
        margin-bottom: 8px;
        transition: transform 0.4s ease-out, margin 0.3s ease-out;
    }

    /* Strip frosted pill from Japanese text on mobile — match bare English text */
    body:not(.focus-mode):not(.video-mode) .japanese-text {
        background: none;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

    /* REVEALED STATE: Image shrinks to make room */
    body:not(.focus-mode):not(.video-mode) .card-content.romanization-revealed .vocabulary-image {
        max-height: none;
        height: 56%; /* Subtle shrink: 65% → 56% = 9% */
        min-height: 240px;
        width: auto;
        max-width: 100%;
        margin-bottom: 12px; /* Tighter spacing */
        object-fit: contain;
        flex-shrink: 0;
        transition: height 0.4s ease-out, margin 0.3s ease-out;
    }

    /* REVEALED STATE: Japanese text normal size */
    body:not(.focus-mode):not(.video-mode) .card-content.romanization-revealed .japanese-text {
        transform: scale(1);
        margin-bottom: 2px;
        transition: transform 0.4s ease-out, margin 0.3s ease-out;
    }

    body:not(.focus-mode):not(.video-mode) #front-romanization {
        /* Override base position:relative which may cause offset */
        position: static;
        /* Don't force display - let JS control visibility */
        /* font-size now handled by dynamic scaling above (uses --roma-chars) */
        opacity: 0.78;
        margin: 0 0 12px 0; /* Bottom margin matches image margin-bottom */
        padding: 6px 16px;
    }

    /* Only show romanization when JS hasn't hidden it AND it has content */
    body:not(.focus-mode):not(.video-mode) #front-romanization:not([style*="display: none"]):not(:empty) {
        display: inline-block !important;
    }

    /* Dynamic English scaling: 2-row layout for better readability */
    /* Formula: 180vw / char_count (accounts for 2 rows) with 6vw cap */
    /* Short text: larger fonts. Long text: wraps to 2 lines gracefully */
    body:not(.focus-mode):not(.video-mode) .english-text {
        font-size: clamp(1.1rem, min(calc(180vw / var(--en-chars, 15)), 6vw), 2rem);
        margin-top: 4px;
        max-width: 95%;
        line-height: 1.35;
        /* 2-row layout: allows long translations to wrap gracefully */
        white-space: normal; /* Override base nowrap to enable wrapping */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    /* HIDE CLUTTER - but keep card counter */
    /* .motivation is now a fixed-position toast that doesn't affect layout */
    .logo-watermark,
    .session-pill,
    .premium-progress-wrapper,
    .textbook-indicator,
    .textbook-tooltip {
        display: none !important;
    }

    /* Card counter - small and subtle in top-left */
    body:not(.focus-mode):not(.video-mode) .card-number {
        font-size: 0.75rem;
        padding: 4px 10px;
        opacity: 0.85;
        background: rgba(255,255,255,0.9);
        border-radius: 12px;
        top: 12px; /* Alignment fix */
        left: 12px;
        transition: background 0.3s ease, color 0.3s ease;
    }

    /* Restore Status Colors (Green/Orange) for Mobile */
    body:not(.focus-mode):not(.video-mode) .flashcard.status-known .card-number {
        background: var(--status-mastered-vivid);
        color: white;
        opacity: 1;
        box-shadow: 0 4px 15px rgba(var(--status-mastered-vivid-rgb), 0.24);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    body:not(.focus-mode):not(.video-mode) .flashcard.status-learning .card-number {
        background: var(--status-learning-vivid);
        color: white;
        opacity: 1;
        box-shadow: 0 4px 15px rgba(var(--status-learning-vivid-rgb), 0.24);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Minimize POS Badge - top right */
    body:not(.focus-mode):not(.video-mode) .class-badge {
        font-size: 0.7rem;
        padding: 3px 10px;
        opacity: 0.9;
        top: 12px;
        right: 12px;
    }

    /* Hide category badge on mobile - too cluttered */
    body:not(.focus-mode):not(.video-mode) .card-category-badge {
        display: none !important;
    }

    body:not(.focus-mode):not(.video-mode) .flashcard-container {
        padding: 5px 8px;
        margin-top: var(--top-bar-height);
    }

    /* Hide focus mode button on mobile - no space for backgrounds */
    .bottom-action-bar .standard-only-btn {
        display: none !important;
    }

    /* IMMERSIVE ACTION BAR */
    .bottom-action-bar {
        position: fixed;
        bottom: calc(15px + env(safe-area-inset-bottom, 0));
        left: 50%;
        transform: translateX(-50%);
        margin: 0;

        height: 60px;
        width: auto;
        min-width: 200px;
        padding: 0 20px;
        gap: 20px;

        /* BATTERY FIX: Reduced blur from 20px to 8px - saves ~15% GPU on mobile */
        background: rgba(20, 20, 25, 0.85); /* Slightly more opaque to compensate */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 30px;
        box-shadow: 0 10px 30px rgba(44,44,44,0.24);
    }

    /* Hide buttons replaced by gestures */
    /* Keep: Lang toggle, Shuffle (🎲), Audio (🎧), Learned (✓), Learning (✗) */
    /* Hide: Prev/Next (swipes), Exit, Video mode */
    .bottom-action-bar button[onclick="previousCard()"],
    .bottom-action-bar button[onclick="nextCard()"],
    .bottom-action-bar .exit-mode-btn {
        display: none !important;
    }

    /* Show audio button */
    .bottom-action-bar #audioButton {
        display: flex !important;
    }

    .action-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    /* Mobile: Hide labels, flatten groups for single row */
    .action-label-strip,
    .group-label {
        display: none !important;
    }

    /* Hide Navigate, Mode, and Mark groups on mobile (gestures handle marking) */
    .navigate-group,
    .standard-only-group,
    .action-group.standard-focus-group:has(.btn-known),
    .split-button-container,
    #videoModeBtn,
    #videoPauseBtn,
    .exit-mode-btn {
        display: none !important;
    }

    /* 3x2 grid with labels */
    .action-groups-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
    }

    .action-group {
        display: contents;
    }

    .group-buttons {
        display: contents;
    }

    /* Buttons with labels below - RECTANGULAR style */
    .action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        padding: 8px 6px 4px 6px; /* Tighter padding */
        gap: 2px;
        border-radius: 12px;
    }

    /* DISABLE hover scale on touch devices - causes sticky enlarged state */
    .action-btn:hover {
        transform: none;
    }

    /* Use :active for brief tap feedback instead */
    .action-btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .action-btn::after {
        content: attr(data-label);
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        opacity: 0.7;
    }

    /* Exit button: icon-only, no text label */
    .btn-exit::after {
        display: none !important;
    }

    /* 2-row action bar - MATCH CARD WIDTH */
    .bottom-action-bar {
        height: auto;
        min-height: 80px; /* Reduced for 2 rows */
        padding: 10px 14px 6px 14px; /* Tighter padding */
        /* Match card width: calc(100vw - 12px) minus some margin */
        width: calc(100vw - 24px);
        max-width: 500px; /* Cap for larger phones */
        border-radius: 16px;
    }

    /* Gesture hints below action bar - 4 gestures */
    .bottom-action-bar::after {
        content: "👈👉 Navigate • 👆 Known • 👇 New • Tap to Flip";
        display: block;
        width: 100%;
        text-align: center;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        margin-top: -2px;
        letter-spacing: 0.2px;
    }

    /* Move card content UP - clear action bar (80px) + gesture hints (~25px) + breathing room */
    /* Uses viewport-relative padding for consistent spacing across screen sizes */
    body:not(.focus-mode):not(.video-mode) .card-content {
        padding-bottom: clamp(145px, 18dvh, 200px);
    }

    /* Top Bar Minimalist */
    .hero-top-bar {
        padding: 0 15px;
        height: 50px;
    }

    /* Buttons: align vertically in 50px header */
    .top-controls-right {
        margin-top: 4px;
    }

    /* Show header Quiz button on mobile grid mode */
    body.grid-mode .header-quiz-btn.mobile-grid-only {
        display: flex;
    }

    /* Branding - Logo + Text compact pill, aligned with buttons */
    .app-branding-topleft {
        left: 12px;
        top: 4px; /* Match buttons margin-top */
        transform: none;
        height: auto;
        gap: 0;
    }

    /* Mobile: hide the seal, the wordmark alone carries the pill */
    .branding-logo {
        display: none;
    }

    .branding-name {
        font-size: 10.5px; /* size-only override (§8 mobile-nav scale) */
    }

    .app-branding-topleft .branding-title-topleft {
        display: flex;
        align-items: center;
        gap: 5px;
        height: auto;
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border: 1px solid rgba(44, 44, 44, 0.06);
        box-shadow: 0 2px 10px rgba(44,44,44,0.04);
        padding: 6px 10px;
        border-radius: 8px;
        color: var(--color-ink);
        -webkit-text-fill-color: var(--color-ink);
    }

    /* Icon buttons - harmonized with brand logo at 44px */
    .icon-btn {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }

    .top-controls-right {
        gap: 8px; /* Tighter spacing for smaller buttons */
    }
}

/* Extra small phones (iPhone SE - 375px and below) */
@media (max-width: 375px) {
    body:not(.focus-mode):not(.video-mode) .flashcard {
        height: clamp(400px, 75dvh, 650px);
    }

    body:not(.focus-mode):not(.video-mode) .vocabulary-image {
        height: 48%;
        min-height: 200px;
    }

    /* padding-bottom inherited from 768px rule: clamp(145px, 18dvh, 200px) */

    body:not(.focus-mode):not(.video-mode) .japanese-text {
        font-size: 2rem;
    }


    .app-branding-topleft .branding-title-topleft {
        height: auto;
        padding: 5px 8px;
        border-radius: 7px;
        gap: 4px;
    }

    /* Icon buttons - harmonized with brand logo at 38px */
    .icon-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .top-controls-right {
        gap: 6px;
    }
}

/* Prevent horizontal swipe back/forward in browser history on mobile */
body:not(.focus-mode):not(.video-mode) .flashcard-container {
    touch-action: pan-y pinch-zoom;
}

/* Hide textbook indicator on mobile - saves space, prevents image overlap */
@media (max-width: 768px) {
    .textbook-indicator,
    .textbook-tooltip {
        display: none !important;
    }

    /* GESTURE HINTS OVERLAY - Hidden (removed onboarding) */
    .gesture-hints-overlay {
        display: none !important;
    }
}