/* Grid Mode Styles
 * Browse/discovery view showing multiple flashcards in a grid
 * Desktop: Multi-column grid with click-to-focus
 * Mobile: Single-column scrollable list with tap-to-flip
 *
 * Premium Polish Features:
 * - Staggered card entrance animations
 * - Enhanced hover states with depth
 * - Smooth 3D flip with perspective
 * - Micro-interactions on buttons
 * - Animated filter chips
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {
    /* Card colors */
    --grid-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 246, 255, 0.92) 100%);
    --grid-card-border: rgba(94, 114, 228, 0.12);
    --grid-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --grid-card-shadow-hover: 0 20px 50px rgba(94, 114, 228, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1);

    /* Text colors */
    --grid-japanese-color: #3d5a80;
    --grid-english-color: #f5716c;
    --grid-romanization-color: #a16207;

    /* Button colors */
    --grid-audio-btn: rgba(124, 58, 237, 0.85);
    --grid-audio-btn-hover: rgba(124, 58, 237, 1);
    --grid-focus-btn: rgba(99, 102, 241, 0.85);
    --grid-focus-btn-hover: rgba(99, 102, 241, 1);
    --grid-known-btn: rgba(34, 197, 94, 0.85);
    --grid-learning-btn: rgba(251, 146, 60, 0.85);

    /* Animation timing */
    --grid-transition-fast: 0.15s;
    --grid-transition-medium: 0.25s;
    --grid-transition-slow: 0.4s;
    --grid-flip-duration: 0.6s;

    /* Easing functions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =============================================================================
   MODE VISIBILITY
   ============================================================================= */

/* Hide flashcard container and related elements in grid mode */
/* NOTE: Must match specificity of standard-mode.css selector:
   body:not(.focus-mode):not(.video-mode) .flashcard-container { display: flex !important; }
   Adding :not() pseudo-classes to match specificity (0,0,4,1) */
body.grid-mode:not(.focus-mode):not(.video-mode) .flashcard-container,
body.grid-mode:not(.focus-mode):not(.video-mode) .premium-progress-wrapper {
    display: none !important;
}

/* Also hide the single card view elements */
body.grid-mode .flashcard {
    display: none !important;
}

/* Hide focus-only elements in grid mode */
body.grid-mode .focus-exit-button,
body.grid-mode .japanese-flag,
body.grid-mode .lower-third,
body.grid-mode .channel-logo-badge,
body.grid-mode .category-badge,
body.grid-mode .lesson-badge,
body.grid-mode .screen-category-indicator,
body.grid-mode .mobile-exit-group {
    display: none !important;
}

/* =============================================================================
   GRID CONTAINER - FLEX LAYOUT INTEGRATION
   ============================================================================= */

/* Grid container participates in the flex layout hierarchy */
.grid-container {
    display: none;  /* Hidden by default, shown in grid mode */
    flex: 1;        /* Take available space like flashcard-container */
    flex-direction: column;
    width: 100%;
    max-width: 1800px;    /* Wider on desktop for more cards */
    margin: 0 auto;
    margin-top: var(--top-bar-height, 90px);  /* Account for fixed top bar */
    padding: 12px 40px 20px;   /* Reduced top padding for balanced spacing */
    overflow-y: auto;     /* Scroll within the flex item */
    box-sizing: border-box;
    /* Establish stacking context below nav bar (z-index: 98) */
    position: relative;
    z-index: 1;
    isolation: isolate;  /* Contain 3D transformed cards within this context */
}

/* When grid mode is active, show grid container with flex display */
body.grid-mode .grid-container {
    display: flex;
    margin-top: 145px;  /* Header (90px) + Nav panel (~55px) */
}

/* Extra margin when filter chips are visible */
body.grid-mode.has-filter-chips .grid-container {
    margin-top: 195px;  /* Header (90px) + Nav panel (~55px) + Chips row (~50px) */
}

/* =============================================================================
   GRID NAVIGATION PANEL - UNIFIED SEARCH + FILTERS
   ============================================================================= */

/* Hide search bar in grid mode - we use the nav panel instead */
body.grid-mode .grid-search-bar {
    display: none !important;
}

/* Legacy search bar - hidden in grid mode, keep for non-grid */
.grid-search-bar {
    display: none;  /* Hidden by default */
    align-items: center;
    gap: 12px;

    /* Fixed position below header (like header, outside scroll container) */
    position: fixed;
    top: var(--top-bar-height, 90px);
    left: 0;
    width: 100%;
    padding: 10px 40px;
    box-sizing: border-box;
    z-index: 99;

    /* Transparent like header - petals visible */
    background: transparent;
    pointer-events: none;
}

.grid-search-bar > * {
    pointer-events: auto;
}

.grid-search-wrapper {
    flex: 1;
    max-width: 480px;
    position: relative;
    display: flex;
    align-items: center;
}

.grid-search-icon {
    position: absolute;
    left: 14px;
    font-size: 0.9rem;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.grid-search-input {
    width: 100%;
    padding: 12px 40px 12px 42px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a2e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.grid-search-input::placeholder {
    color: #8e8e93;
    font-weight: 400;
}

.grid-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(94, 114, 228, 0.15),
                0 0 0 3px rgba(94, 114, 228, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.grid-search-clear {
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(142, 142, 147, 0.2);
    color: #636366;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.grid-search-clear:hover {
    background: rgba(142, 142, 147, 0.35);
    color: #1a1a2e;
}

.grid-search-count {
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #636366;
    white-space: nowrap;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* =============================================================================
   GRID NAVIGATION PANEL (Search + Filters Combined)
   ============================================================================= */

/* Navigation panel - unified search + filters
   Transparent like header - petals fall through, matches page background */
.grid-filter-bar {
    display: none;  /* Hidden unless grid mode */
    position: fixed;
    top: var(--top-bar-height, 90px);  /* Directly below header */
    left: 0;
    right: 0;
    z-index: 98;
    padding: 6px 40px 10px;  /* Tighter padding for balanced spacing */
    background: transparent;  /* Match header - no background */
    flex-direction: column;
    gap: 8px;
    pointer-events: none;  /* Allow petals to pass through */
}

/* Re-enable pointer events on interactive children */
.grid-filter-bar > * {
    pointer-events: auto;
}

body.grid-mode .grid-filter-bar {
    display: flex;
}

/* Hide filter bar when settings drawer is open to prevent overlap */
body.settings-drawer-open .grid-filter-bar {
    display: none !important;
}

/* Hide filter bar when quiz or vocab panel is open to prevent z-index overlap */
body:has(.quiz-modal-overlay.active) .grid-filter-bar,
body:has(.vocab-panel.open) .grid-filter-bar,
body.vocab-panel-open .grid-filter-bar {
    display: none !important;
}

/* Search row inside nav panel */
.nav-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-search-wrapper {
    flex: 1;
    min-width: 280px;
    max-width: 500px;
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search-icon {
    position: absolute;
    left: 12px;
    font-size: 0.85rem;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.nav-search-input {
    width: 100%;
    padding: 11px 40px 11px 42px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: #1e293b;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        all var(--grid-transition-medium) var(--ease-out-expo),
        box-shadow var(--grid-transition-fast) ease;
}

.nav-search-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.nav-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.12),
        0 4px 16px rgba(99, 102, 241, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.nav-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    z-index: 3;
    border-radius: 50%;
    background: rgba(142, 142, 147, 0.2);
    color: #636366;
    font-size: 0.7rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.nav-search-clear.visible {
    display: flex;
}

.nav-search-clear:hover {
    transform: translateY(-50%);
    background: rgba(142, 142, 147, 0.35);
}

.nav-search-clear:active {
    transform: translateY(-50%) scale(0.95);
    background: rgba(142, 142, 147, 0.45);
}

/* Word count badge - positioned inside search bar */
.nav-word-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Nunito', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
    white-space: nowrap;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 10px;
    border: none;
    box-shadow: none;
    letter-spacing: 0.01em;
    z-index: 2;
    transition: opacity 0.2s ease;
}

/* Hide word count when clear button is visible (typing) */
.nav-search-wrapper:has(.nav-search-clear.visible) .nav-word-count {
    opacity: 0;
    pointer-events: none;
}

/* Search input needs right padding for the word count badge */
.nav-search-input {
    padding-right: 90px;
}

/* Filter triggers row */
.filter-triggers {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-trigger-wrapper {
    position: relative;
}

.filter-trigger {
    padding: 9px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        all var(--grid-transition-fast) ease,
        transform var(--grid-transition-fast) var(--ease-out-back);
}

.filter-trigger:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.filter-trigger.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border-color: transparent;
    box-shadow:
        0 4px 16px rgba(99, 102, 241, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.filter-trigger.active:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.filter-icon {
    font-size: 0.95rem;
}

.filter-chevron {
    font-size: 0.65rem;
    opacity: 0.7;
    transition: transform var(--grid-transition-medium) var(--ease-out-expo);
    margin-left: 2px;
}

.filter-trigger.active .filter-chevron {
    transform: rotate(180deg);
}

/* Segmented control (Kana/Kanji toggle) - Premium style */
.nav-segmented-control {
    display: flex;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 4px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.segment-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 18px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        all var(--grid-transition-fast) ease,
        transform var(--grid-transition-fast) var(--ease-out-back);
}

.segment-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
    color: #374151;
}

.segment-btn.active {
    background: white;
    color: #374151;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.06);
    transform: scale(1.02);
}

.segment-btn .segment-icon {
    font-size: 13px;
    font-weight: 700;
}

/* Nav action buttons (Shuffle, etc.) */
.nav-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-action-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: scale(1.05);
}

.nav-action-btn:active {
    transform: scale(0.95);
}

.nav-action-btn .action-icon {
    font-size: 16px;
}

/* Nav divider - vertical separator */
.nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
}

.nav-divider.desktop-only {
    display: block;
}

/* =============================================================================
   STATUS TOGGLE GROUP (Desktop - always visible in nav bar)
   ============================================================================= */

.status-toggle-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.status-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 18px;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.status-toggle:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
}

.status-toggle .status-icon {
    font-size: 11px;
}

.status-toggle .status-label {
    display: none;
}

.status-toggle .status-count {
    font-size: 11px;
    opacity: 0.7;
}

/* Known status */
.status-toggle.known:hover:not(.active) {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-toggle.known.active {
    background: #22c55e;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Learning status */
.status-toggle.learning:hover:not(.active) {
    background: rgba(251, 146, 60, 0.1);
    color: #ea580c;
}

.status-toggle.learning.active {
    background: #f97316;
    color: white;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

/* New status */
.status-toggle.new:hover:not(.active) {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.status-toggle.new.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Show labels on larger screens */
@media (min-width: 1200px) {
    .status-toggle .status-label {
        display: inline;
    }

    .status-toggle {
        padding: 6px 12px;
    }
}

/* Filter count badge */
.filter-count-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* Labeled button (icon + text) - Premium style */
.nav-labeled-btn {
    padding: 8px 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        all var(--grid-transition-fast) ease,
        transform var(--grid-transition-fast) var(--ease-out-back);
}

.nav-labeled-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nav-labeled-btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
}

/* Focus button - mobile only (desktop uses segmented control) */
.nav-focus-btn-mobile {
    display: none; /* Hidden on desktop */
}

/* Quiz button - special styling with premium gradient */
.nav-quiz-btn {
    padding: 9px 18px;
    border-radius: 22px;
    border: none;
    background: linear-gradient(135deg, #f472b6 0%, #a855f7 50%, #6366f1 100%);
    background-size: 200% 100%;
    font-family: 'Nunito', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow:
        0 2px 8px rgba(168, 85, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        all var(--grid-transition-medium) var(--ease-out-expo),
        background-position 0.4s ease;
}

.nav-quiz-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background-position: 100% 0;
    box-shadow:
        0 8px 24px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-quiz-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* Mode control - Grid/Focus/Video */
.nav-segmented-control.mode-control .segment-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow:
        0 4px 12px rgba(79, 70, 229, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.nav-segmented-control.mode-control .segment-btn.active:hover {
    box-shadow:
        0 6px 16px rgba(79, 70, 229, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ========================================
   SPLIT PLAY BUTTON WITH DROPDOWN
   ======================================== */
.segment-split-btn {
    position: relative;
    display: flex;
    align-items: stretch;
}

.segment-split-btn .split-main {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding-right: 10px;
}

.segment-split-btn .split-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    padding: 0 2px;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    color: #6b7280;
    font-size: 10px;
    cursor: pointer;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    margin-left: -4px;
    transition: all 0.15s ease;
}

.segment-split-btn .split-arrow:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #374151;
}

.segment-split-btn.dropdown-open .split-arrow {
    background: rgba(99, 102, 241, 0.2);
    color: #4f46e5;
}

.segment-split-btn.dropdown-open .split-arrow span {
    transform: rotate(180deg);
}

.segment-split-btn .split-arrow span {
    display: block;
    transition: transform 0.2s ease;
}

/* Play Mode Dropdown */
.play-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    padding: 6px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15),
        0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.segment-split-btn.dropdown-open .play-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.play-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #374151;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
    text-align: left;
}

.play-dropdown-item:hover {
    background: #f3f4f6;
}

.play-dropdown-item.selected {
    background: rgba(99, 102, 241, 0.1);
}

.play-dropdown-item.selected::after {
    content: '✓';
    margin-left: auto;
    color: #4f46e5;
    font-weight: 600;
}

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

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

.play-dropdown-item .dropdown-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1f2937;
}

.play-dropdown-item .dropdown-desc {
    font-size: 0.7rem;
    color: #9ca3af;
}

.play-dropdown .dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 8px;
}

/* Filters menu dropdown - consolidated filters */
.filter-dropdown.filters-menu {
    min-width: 320px;
    max-height: 500px;
    padding: 8px;
}

/* Hide mobile modal elements on desktop */
.filter-modal-header {
    display: none;
}

/* Hide mobile status pills on desktop */
.mobile-status-pills {
    display: none;
}

/* Hide mobile apply button on desktop */
.filter-modal-footer {
    display: none;
}

/* =============================================================================
   COLLAPSIBLE ACCORDION SECTIONS (Both Desktop & Mobile)
   ============================================================================= */

.filters-menu-section.collapsible .collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.filters-menu-section.collapsible .collapsible-header:hover {
    background: rgba(99, 102, 241, 0.08);
}

.section-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
}

.section-chevron {
    display: inline-block;
    font-size: 0.7rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.filters-menu-section.collapsible.expanded .section-chevron {
    transform: rotate(180deg);
}

/* Collapsible content - collapsed by default */
.filters-menu-section.collapsible .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.filters-menu-section.collapsible.expanded .collapsible-content {
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease-in;
}

/* Hide Status dropdown section (desktop uses nav bar toggles, mobile uses pills) */
.filters-menu-section.status-section-hidden {
    display: none !important;
}

.filter-modal-content {
    display: contents;  /* Pass through, children appear as direct children of parent */
}

.filters-menu-section {
    margin-bottom: 12px;
}

.filters-menu-section:last-child {
    margin-bottom: 0;
}

.filters-menu-label {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px 4px;
}

.filters-menu-content {
    max-height: 200px;
    overflow-y: auto;
}

/* Clear All button - next to filter chips */
.filter-clear-all {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 24px;
    border: 1px solid rgba(107, 114, 128, 0.2);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #6b7280;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s ease;
    animation: chipEntrance 0.3s var(--ease-out-back) backwards;
    animation-delay: 0.2s;
}

.filter-clear-all:hover {
    background: rgba(243, 244, 246, 0.95);
    border-color: rgba(107, 114, 128, 0.3);
    color: #374151;
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

.filter-clear-all:active {
    transform: translateY(0);
}

.filter-clear-all.hidden {
    display: none;
}

/* Dropdown panels - with smooth open animation */
.filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 200;
    border: 1px solid rgba(255, 255, 255, 0.8);

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    transition:
        opacity var(--grid-transition-medium) var(--ease-out-expo),
        transform var(--grid-transition-medium) var(--ease-out-expo),
        visibility 0s linear var(--grid-transition-medium);
}

.filter-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

/* Custom scrollbar for dropdown */
.filter-dropdown::-webkit-scrollbar {
    width: 6px;
}

.filter-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.filter-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.filter-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.filter-dropdown-section {
    border-bottom: 1px solid #eee;
}

.filter-dropdown-section:last-child {
    border-bottom: none;
}

.filter-dropdown-header:hover {
    background: #f9fafb;
}

.filter-dropdown-header::after {
    content: '▶';
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.filter-dropdown-section.expanded .filter-dropdown-header::after {
    transform: rotate(90deg);
}

.filter-dropdown-items {
    display: none;
    padding: 0 8px 8px;
}

.filter-dropdown-section.expanded .filter-dropdown-items {
    display: block;
}

/* Show items directly in dropdown (no section wrapper, e.g., Status filter) */
.filter-dropdown > .filter-dropdown-items {
    display: block;
    padding: 8px;
}

.filter-dropdown-item {
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: 'Nunito', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #4b5563;
    gap: 12px;
    margin: 2px 6px;
    transition:
        all var(--grid-transition-fast) ease,
        transform var(--grid-transition-fast) var(--ease-out-back);
}

.filter-dropdown-item:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transform: translateX(4px);
}

.filter-dropdown-item:active {
    transform: translateX(4px) scale(0.98);
}

.filter-dropdown-item.selected {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
    font-weight: 600;
}

/* "All" option styling - subtle emphasis as aggregate option */
.filter-dropdown-item[data-all-textbook="true"],
.filter-dropdown-item[data-all-category="true"],
.filter-dropdown-item[data-all-pos="true"] {
    font-weight: 600;
    color: #374151;
    border-left: 2px solid #6366f1;
    margin-bottom: 4px;
    padding-left: 12px;
}

.filter-dropdown-item[data-all-textbook="true"]:hover,
.filter-dropdown-item[data-all-category="true"]:hover,
.filter-dropdown-item[data-all-pos="true"]:hover {
    background: rgba(99, 102, 241, 0.06);
    border-left-color: #4f46e5;
}

.filter-dropdown-item[data-all-textbook="true"].selected,
.filter-dropdown-item[data-all-category="true"].selected,
.filter-dropdown-item[data-all-pos="true"].selected {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-left-color: #4338ca;
    color: #3730a3;
}

/* Name takes available space, count stays right */
.filter-dropdown-item > span:first-child {
    flex: 1;
    min-width: 0;
}

.filter-item-count {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* Header row alignment */
.filter-dropdown-header {
    padding: 12px 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s ease;
}

.filter-dropdown-header > span:first-child {
    flex: 1;
    min-width: 0;
}

.filter-dropdown-header .filter-item-count {
    min-width: 70px;
}

/* Active chips row - hidden when empty */
.filter-active-chips {
    display: none;  /* Hidden by JS when no chips */
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    margin-top: 4px;
    background: transparent;  /* Match page - no background */
    pointer-events: none;  /* Allow petals to fall through */
}

/* Re-enable pointer events on filter chips */
.filter-active-chips .filter-chip {
    pointer-events: auto;
}

/* Filter chips in grid filter bar - clean frosted glass with animations */
@keyframes chipEntrance {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.filter-active-chips .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 14px;
    border-radius: 24px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #374151;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);

    /* Entrance animation */
    animation: chipEntrance 0.3s var(--ease-out-back) backwards;
    transition:
        transform var(--grid-transition-fast) ease,
        box-shadow var(--grid-transition-fast) ease;
}

.filter-active-chips .filter-chip:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Stagger chip entrance */
.filter-active-chips .filter-chip:nth-child(1) { animation-delay: 0.02s; }
.filter-active-chips .filter-chip:nth-child(2) { animation-delay: 0.05s; }
.filter-active-chips .filter-chip:nth-child(3) { animation-delay: 0.08s; }
.filter-active-chips .filter-chip:nth-child(4) { animation-delay: 0.11s; }
.filter-active-chips .filter-chip:nth-child(5) { animation-delay: 0.14s; }
.filter-active-chips .filter-chip:nth-child(n+6) { animation-delay: 0.17s; }

/* Subtle left accent for chip types - gradient style */
.filter-active-chips .category-chip {
    border-left: 3px solid #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.9) 20%);
}

.filter-active-chips .textbook-chip,
.filter-active-chips .lesson-chip {
    border-left: 3px solid #8b5cf6;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), rgba(255, 255, 255, 0.9) 20%);
}

.filter-active-chips .pos-chip {
    border-left: 3px solid #ec4899;
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.08), rgba(255, 255, 255, 0.9) 20%);
}

.filter-active-chips .status-chip {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.9) 20%);
}

.filter-chip-remove {
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #9ca3af;
    transition:
        all var(--grid-transition-fast) ease,
        transform var(--grid-transition-fast) var(--ease-out-back);
}

.filter-chip-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    transform: scale(1.1);
}

.filter-chip-remove:active {
    transform: scale(0.9);
}

/* Word count in filter bar - legacy, now using .nav-word-count */
.filter-word-count {
    display: none;
}

/* =============================================================================
   CARD GRID - DESKTOP
   ============================================================================= */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    padding: 12px;
    flex: 1;            /* Take remaining space in grid-container */
    align-content: start; /* Align cards to top, not stretch */
    perspective: 2000px; /* Shared perspective for all cards */
}

/* =============================================================================
   STAGGERED ENTRANCE ANIMATION
   ============================================================================= */

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Card exit animation - when marked and no longer matches filter */
@keyframes cardExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }
}

.grid-card.exiting {
    animation: cardExit 0.4s var(--ease-out-expo) forwards !important;
    pointer-events: none;
}

.grid-card {
    animation: cardEntrance 0.5s var(--ease-out-expo) backwards;
}

/* Stagger animation for first 20 cards */
.grid-card:nth-child(1) { animation-delay: 0.02s; }
.grid-card:nth-child(2) { animation-delay: 0.04s; }
.grid-card:nth-child(3) { animation-delay: 0.06s; }
.grid-card:nth-child(4) { animation-delay: 0.08s; }
.grid-card:nth-child(5) { animation-delay: 0.10s; }
.grid-card:nth-child(6) { animation-delay: 0.12s; }
.grid-card:nth-child(7) { animation-delay: 0.14s; }
.grid-card:nth-child(8) { animation-delay: 0.16s; }
.grid-card:nth-child(9) { animation-delay: 0.18s; }
.grid-card:nth-child(10) { animation-delay: 0.20s; }
.grid-card:nth-child(11) { animation-delay: 0.22s; }
.grid-card:nth-child(12) { animation-delay: 0.24s; }
.grid-card:nth-child(13) { animation-delay: 0.26s; }
.grid-card:nth-child(14) { animation-delay: 0.28s; }
.grid-card:nth-child(15) { animation-delay: 0.30s; }
.grid-card:nth-child(16) { animation-delay: 0.32s; }
.grid-card:nth-child(17) { animation-delay: 0.34s; }
.grid-card:nth-child(18) { animation-delay: 0.36s; }
.grid-card:nth-child(19) { animation-delay: 0.38s; }
.grid-card:nth-child(20) { animation-delay: 0.40s; }
.grid-card:nth-child(n+21) { animation-delay: 0.42s; }

/* =============================================================================
   GRID CARD COMPONENT
   ============================================================================= */

/* =============================================================================
   GRID CARD COMPONENT - Premium Design
   ============================================================================= */

/* Frosted White - Clean bright cards with depth and polish */
.grid-card {
    position: relative;
    background: var(--grid-card-bg);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--grid-card-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--grid-card-shadow);

    /* Smooth multi-property transitions */
    transition:
        transform var(--grid-transition-medium) var(--ease-out-expo),
        box-shadow var(--grid-transition-medium) var(--ease-out-expo),
        border-color var(--grid-transition-fast) ease;

    /* Enable 3D transforms */
    transform-style: preserve-3d;
}

/* Subtle inner glow for depth */
.grid-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity var(--grid-transition-fast) ease;
}

/* Premium hover state */
.grid-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--grid-card-shadow-hover);
    border-color: rgba(99, 102, 241, 0.25);
}

.grid-card:hover::before {
    opacity: 1;
}

/* Active/pressed state */
.grid-card:active {
    transform: translateY(-4px) scale(1.01);
    transition-duration: 0.1s;
}

/* Card flip container - Enhanced 3D flip */
.grid-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--grid-flip-duration) var(--ease-out-expo);
}

/* Flipped state with enhanced 3D effect */
.grid-card.flipped .grid-card-inner {
    transform: rotateY(180deg);
}

/* Flip all cards via container class (performance: single DOM change)
   Uses opacity swap instead of 3D transform to avoid iOS WebKit crash.
   INSTANT (no transition) to avoid browser stress from animating 100+ elements. */
.grid-cards.all-flipped .grid-card-front,
.grid-cards.all-flipped .grid-card-back {
    /* Disable transitions for bulk flip - instant swap */
    transition: none !important;
}

.grid-cards.all-flipped .grid-card-front {
    opacity: 0;
    visibility: hidden;
}

.grid-cards.all-flipped .grid-card-back {
    /* Override the 180deg rotation and show face normally */
    transform: rotateY(0deg);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* When both all-flipped AND individual .flipped: they cancel out → show front */
.grid-cards.all-flipped .grid-card.flipped .grid-card-inner {
    /* Cancel the 180deg rotation from .flipped */
    transform: rotateY(0deg);
}

.grid-cards.all-flipped .grid-card.flipped .grid-card-front {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Restore front face buttons in cancel-out state (override !important rules) */
.grid-cards.all-flipped .grid-card.flipped .grid-card-front .grid-card-status,
.grid-cards.all-flipped .grid-card.flipped .grid-card-front .grid-card-focus-btn,
.grid-cards.all-flipped .grid-card.flipped .grid-card-front .grid-card-audio {
    opacity: 1 !important;
    visibility: visible !important;
}

.grid-cards.all-flipped .grid-card.flipped .grid-card-back {
    /* Hide back face again */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Scale pulse during flip for premium feel */
@keyframes flipPulse {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(90deg) scale(1.05); }
    100% { transform: rotateY(180deg) scale(1); }
}

.grid-card.flipping .grid-card-inner {
    animation: flipPulse var(--grid-flip-duration) var(--ease-out-expo) forwards;
}

/* Disable pointer events on front face when flipped (back face should receive clicks) */
.grid-card.flipped .grid-card-front,
.grid-cards.all-flipped .grid-card-front {
    pointer-events: none;
}

/* Enable pointer events on back face when flipped */
.grid-card.flipped .grid-card-back,
.grid-cards.all-flipped .grid-card-back {
    pointer-events: auto;
}

/* iOS Safari fix: explicitly hide front face elements when flipped
   (backface-visibility can fail on iOS in certain conditions) */
.grid-card.flipped .grid-card-front .grid-card-status,
.grid-card.flipped .grid-card-front .grid-card-focus-btn,
.grid-card.flipped .grid-card-front .grid-card-audio,
.grid-cards.all-flipped .grid-card-front .grid-card-status,
.grid-cards.all-flipped .grid-card-front .grid-card-focus-btn,
.grid-cards.all-flipped .grid-card-front .grid-card-audio {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Card faces */
.grid-card-front,
.grid-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    /* Left border for status indication */
    border-left: 4px solid transparent;
    transition: border-color 0.3s ease;
}

/* Front face status: Left border colors (based on status child element) */
.grid-card-front:has(.grid-card-status.known) {
    border-left-color: #22c55e;
}

.grid-card-front:has(.grid-card-status.learning) {
    border-left-color: #f97316;
}

.grid-card-back {
    transform: rotateY(180deg);
    background: white;
    /* Left border for status indication */
    border-left: 4px solid transparent;
    transition: border-color 0.3s ease;
}

/* Status: Left border colors */
.grid-card-back.known {
    border-left-color: #22c55e;
}

.grid-card-back.learning {
    border-left-color: #f97316;
}

/* =============================================================================
   CARD BACK - SPLIT LAYOUT (Image + English)
   ============================================================================= */

/* Back image container - matches front style */
.grid-card-back-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 0;
    background: linear-gradient(
        180deg,
        rgba(102, 126, 234, 0.04) 0%,
        rgba(102, 126, 234, 0.08) 100%
    );
}

/* Back image - contained like front */
.grid-card-back-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.grid-card-back-image .grid-card-image-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(245, 113, 108, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* Color tint overlay - hidden */
.grid-card-back-tint {
    display: none;
}

/* =============================================================================
   CARD FRONT
   ============================================================================= */

.grid-card-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(
        180deg,
        rgba(102, 126, 234, 0.04) 0%,
        rgba(102, 126, 234, 0.08) 100%
    );
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer overlay on image area */
.grid-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--grid-transition-medium) ease;
}

.grid-card:hover .grid-card-image::before {
    opacity: 1;
}

.grid-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    transition:
        transform var(--grid-transition-medium) var(--ease-out-expo),
        opacity 0.3s ease-out,
        filter 0.3s ease-out;
}

/* Image loading state - blur and fade */
.grid-card-image img.loading {
    opacity: 0.6;
    filter: blur(4px);
}

/* Image loaded state - smooth reveal */
.grid-card-image img.loaded {
    opacity: 1;
    filter: blur(0);
}

/* Subtle zoom on hover */
.grid-card:hover .grid-card-image img {
    transform: scale(1.03);
}

/* Placeholder when no image */
.grid-card-image-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(245, 113, 108, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-secondary, #a0a0a8);
    transition: transform var(--grid-transition-medium) ease;
}

.grid-card:hover .grid-card-image-placeholder {
    transform: scale(1.1) rotate(5deg);
}

/* Fixed height content area - prevents text from affecting image size */
.grid-card-content {
    height: 72px;
    flex-shrink: 0;
    padding: 12px 14px;
    text-align: center;
    border-top: 1px solid rgba(94, 114, 228, 0.08);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 100%
    );
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    /* Center text vertically within fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Front content: Status tint (based on sibling status element) */
.grid-card-front:has(.grid-card-status.known) .grid-card-content {
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.08) 0%,
        rgba(34, 197, 94, 0.15) 100%);
    border-top-color: rgba(34, 197, 94, 0.2);
}

.grid-card-front:has(.grid-card-status.learning) .grid-card-content {
    background: linear-gradient(145deg,
        rgba(249, 115, 22, 0.08) 0%,
        rgba(249, 115, 22, 0.15) 100%);
    border-top-color: rgba(249, 115, 22, 0.2);
}

/* Dynamic Japanese text scaling based on character count */
/* Scales within fixed-height content area - image unaffected */
.grid-card-japanese {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: clamp(1rem, calc(9rem / var(--ja-chars, 5)), 1.8rem);
    font-weight: 600;
    color: var(--grid-japanese-color);
    margin-bottom: 4px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    transition: transform var(--grid-transition-fast) ease;
    /* Allow wrapping for longer words */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Subtle lift on hover */
.grid-card:hover .grid-card-japanese {
    transform: translateY(-1px);
}

/* Romanization - hidden by default, revealed on audio click */
.grid-card-front .grid-card-romanization {
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 500;
    color: var(--grid-romanization-color);
    margin-top: 4px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-5px);
    transition:
        opacity var(--grid-transition-medium) ease,
        max-height var(--grid-transition-medium) ease,
        transform var(--grid-transition-medium) var(--ease-out-expo);
}

/* Show romanization when audio has been played - smooth reveal */
.grid-card.audio-played .grid-card-front .grid-card-romanization {
    opacity: 1;
    max-height: 2em;
    transform: translateY(0);
}

.grid-card-english {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #f5716c;  /* Soft coral - matches focus mode */
    line-height: 1.4;
}

/* Audio button on card - appears on hover with premium micro-interactions */
.grid-card-audio {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--grid-audio-btn);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition:
        opacity var(--grid-transition-medium) var(--ease-out-expo),
        transform var(--grid-transition-medium) var(--ease-out-back),
        background var(--grid-transition-fast) ease,
        box-shadow var(--grid-transition-fast) ease;

    /* Subtle glow ring */
    box-shadow:
        0 2px 8px rgba(124, 58, 237, 0.3),
        0 0 0 0 rgba(124, 58, 237, 0);
}

.grid-card:hover .grid-card-audio {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.grid-card-audio:hover {
    background: var(--grid-audio-btn-hover);
    transform: scale(1.15);
    box-shadow:
        0 6px 20px rgba(124, 58, 237, 0.4),
        0 0 0 4px rgba(124, 58, 237, 0.15);
}

.grid-card-audio:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* Audio playing pulse animation */
@keyframes audioPulse {
    0% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 0 0 rgba(124, 58, 237, 0.4); }
    50% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 0 8px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 0 0 rgba(124, 58, 237, 0); }
}

.grid-card-audio.playing {
    animation: audioPulse 1s ease-out;
}

/* Focus button - bottom left to enter Focus mode */
.grid-card-focus-btn {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--grid-focus-btn);
    color: white;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition:
        opacity var(--grid-transition-medium) var(--ease-out-expo),
        transform var(--grid-transition-medium) var(--ease-out-back),
        background var(--grid-transition-fast) ease,
        box-shadow var(--grid-transition-fast) ease;

    box-shadow:
        0 2px 8px rgba(99, 102, 241, 0.3),
        0 0 0 0 rgba(99, 102, 241, 0);
}

.grid-card:hover .grid-card-focus-btn {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.grid-card-focus-btn:hover {
    background: var(--grid-focus-btn-hover);
    transform: scale(1.15);
    box-shadow:
        0 6px 20px rgba(99, 102, 241, 0.4),
        0 0 0 4px rgba(99, 102, 241, 0.15);
}

.grid-card-focus-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* Card number - position/total like focus mode */
.grid-card-number {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(61, 90, 128, 0.85) 0%, rgba(45, 68, 97, 0.9) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Nunito', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    z-index: 5;
    letter-spacing: 0.02em;
}

/* Status indicator - HIDDEN (using left border + content tint instead) */
.grid-card-status {
    display: none;
}

/* Status indicator animations */
@keyframes statusPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.grid-card-status.known {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-color: #22c55e;
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.15),
        0 2px 8px rgba(34, 197, 94, 0.35);
    animation: statusPop 0.3s var(--ease-out-back);
}

.grid-card-status.learning {
    background: linear-gradient(135deg, #fb923c, #f97316);
    border-color: #f97316;
    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.15),
        0 2px 8px rgba(249, 115, 22, 0.35);
    animation: statusPop 0.3s var(--ease-out-back);
}

/* =============================================================================
   CARD BACK (FLIPPED STATE) - Clean English reveal
   ============================================================================= */

/* Back content area - text section at bottom */
.grid-card-back-content {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    text-align: center;
    /* position: static so POS can position relative to .grid-card-back */
    position: static;
    z-index: 1;
    background: linear-gradient(145deg, #ffffff 0%, #f0f4ff 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Status: Content area tint */
.grid-card-back.known .grid-card-back-content {
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.08) 0%,
        rgba(34, 197, 94, 0.15) 100%);
    border-top-color: rgba(34, 197, 94, 0.2);
}

.grid-card-back.learning .grid-card-back-content {
    background: linear-gradient(145deg,
        rgba(249, 115, 22, 0.08) 0%,
        rgba(249, 115, 22, 0.15) 100%);
    border-top-color: rgba(249, 115, 22, 0.2);
}

/* Ensure mark buttons appear above content area */
.grid-card-back .grid-card-actions {
    z-index: 10;
}


/* Large English text on back - the answer reveal */
.grid-card-english-large {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    text-align: center;
    letter-spacing: -0.01em;
    max-width: calc(100% - 32px);
    word-break: normal;  /* Don't break mid-word */
    overflow-wrap: normal;  /* Don't break words */
    text-wrap: balance;  /* Balance line lengths, prevent orphans */
}

/* POS tag - hidden in grid view (shown in Focus mode only) */
.grid-card-pos {
    display: none !important;
}

/* Mark buttons on back - hidden until hover, positioned individually */
.grid-card-actions {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    transition: opacity var(--grid-transition-medium) var(--ease-out-expo);
}

/* Known button - top left */
.grid-card-actions .grid-card-mark-btn.known {
    align-self: flex-start;
}

/* Learning button - top right */
.grid-card-actions .grid-card-mark-btn.learning {
    align-self: flex-start;
}

.grid-card-actions .grid-card-mark-btn {
    transform: translateY(8px);
    pointer-events: auto;
    transition:
        transform var(--grid-transition-medium) var(--ease-out-back),
        box-shadow var(--grid-transition-fast) ease,
        background var(--grid-transition-fast) ease;
}

/* Show mark buttons on flipped card hover - fast fade in */
.grid-card.flipped:hover .grid-card-actions,
.grid-cards.all-flipped .grid-card:not(.flipped):hover .grid-card-actions {
    opacity: 1;
    transition: opacity 0.12s ease-out;
}

.grid-card.flipped:hover .grid-card-actions .grid-card-mark-btn,
.grid-cards.all-flipped .grid-card:not(.flipped):hover .grid-card-actions .grid-card-mark-btn {
    transform: translateY(0);
    transition-delay: 0.1s;
    transition-duration: 0.15s;
}

.grid-card-mark-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform var(--grid-transition-fast) var(--ease-out-back),
        box-shadow var(--grid-transition-fast) ease,
        background var(--grid-transition-fast) ease;
}

/* Known button - Green with gradient */
.grid-card-mark-btn.known {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    box-shadow:
        0 2px 8px rgba(34, 197, 94, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.grid-card-mark-btn.known:hover {
    transform: scale(1.15);
    box-shadow:
        0 6px 20px rgba(34, 197, 94, 0.45),
        0 0 0 4px rgba(34, 197, 94, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.grid-card-mark-btn.known:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* Learning button - Orange with gradient */
.grid-card-mark-btn.learning {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: white;
    box-shadow:
        0 2px 8px rgba(249, 115, 22, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.grid-card-mark-btn.learning:hover {
    transform: scale(1.15);
    box-shadow:
        0 6px 20px rgba(249, 115, 22, 0.45),
        0 0 0 4px rgba(249, 115, 22, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.grid-card-mark-btn.learning:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* Success feedback animation */
@keyframes markSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.grid-card-mark-btn.marked {
    animation: markSuccess 0.4s var(--ease-out-back);
}

/* =============================================================================
   TABLET STYLES (769px - 1280px)
   iPad landscape and similar tablet devices
   ============================================================================= */

@media (min-width: 769px) and (max-width: 1280px) {
    /* Hide status toggles on tablet - use Filters dropdown instead (same as mobile) */
    .status-toggle-group {
        display: none !important;
    }

    /* Hide divider that precedes status toggles */
    .nav-divider.desktop-only {
        display: none !important;
    }
}

/* =============================================================================
   MOBILE STYLES (≤768px)
   ============================================================================= */

@media (max-width: 768px) {
    /* Disable stagger animation on mobile for performance */
    .grid-card {
        animation-delay: 0s !important;
        animation-duration: 0.3s;
    }

    .grid-container {
        padding: 16px;
        padding-bottom: 24px;
        margin-top: 165px;  /* Header (~60px) + Nav panel (~90px) + buffer */
    }

    /* Extra margin when filter chips are active */
    body.grid-mode.has-filter-chips .grid-container {
        margin-top: 200px;
    }

    /* Mobile filter bar - closer to header */
    .grid-filter-bar {
        top: 60px;  /* Just below header */
        padding: 10px 16px;
        gap: 6px;
        /* Use same gradient as page with fixed attachment to match exactly */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-attachment: fixed;
    }

    /* Hide status toggle group on mobile - use dropdown instead */
    .status-toggle-group,
    .nav-divider.desktop-only {
        display: none !important;
    }

    .filter-triggers {
        gap: 8px;
    }

    .filter-trigger {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 20px;
    }

    .filter-icon {
        font-size: 0.9rem;
    }

    .filter-clear-all {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Fullscreen modal for filters on mobile */
    .filter-dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        transform: translateY(100%);
        opacity: 0;
        z-index: 9999 !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        overflow: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .filter-dropdown.open {
        transform: translateY(0);
        opacity: 1;
    }

    /* Hide overlapping UI elements when filter modal is open */
    body.filter-modal-open .hero-top-bar,
    body.filter-modal-open .grid-search-bar,
    body.filter-modal-open .channel-logo-badge,
    body.filter-modal-open .app-branding-topleft {
        display: none !important;
    }

    /* Modal header with close button */
    .filter-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: white;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .filter-modal-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1e293b;
    }

    .filter-modal-close {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.05);
        color: #64748b;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .filter-modal-close:active {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
    }

    /* =============================================================================
       MOBILE STATUS PILLS
       ============================================================================= */

    .mobile-status-pills {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        background: white;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-shrink: 0;
    }

    .mobile-status-pills::-webkit-scrollbar {
        display: none;
    }

    .mobile-status-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        border: 2px solid transparent;
        border-radius: 24px;
        font-family: 'Nunito', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-status-pill .pill-icon {
        font-size: 0.85rem;
    }

    .mobile-status-pill .pill-count {
        font-size: 0.8rem;
        opacity: 0.7;
    }

    /* Known pill */
    .mobile-status-pill.known {
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
        border-color: rgba(34, 197, 94, 0.3);
    }

    .mobile-status-pill.known:active,
    .mobile-status-pill.known.active {
        background: #22c55e;
        color: white;
        border-color: #22c55e;
    }

    /* Learning pill */
    .mobile-status-pill.learning {
        background: rgba(251, 146, 60, 0.1);
        color: #ea580c;
        border-color: rgba(251, 146, 60, 0.3);
    }

    .mobile-status-pill.learning:active,
    .mobile-status-pill.learning.active {
        background: #f97316;
        color: white;
        border-color: #f97316;
    }

    /* New pill */
    .mobile-status-pill.new {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
        border-color: rgba(59, 130, 246, 0.3);
    }

    .mobile-status-pill.new:active,
    .mobile-status-pill.new.active {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    /* =============================================================================
       MOBILE COLLAPSIBLE OVERRIDES
       ============================================================================= */

    /* Mobile: Taller max-height for expanded content (more vertical space) */
    .filters-menu-section.collapsible.expanded .collapsible-content {
        max-height: 350px;
    }


    /* =============================================================================
       MOBILE APPLY BUTTON
       ============================================================================= */

    .filter-modal-footer {
        display: block;
        padding: 16px 20px;
        background: white;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        flex-shrink: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .filter-apply-btn {
        width: 100%;
        padding: 16px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        font-family: 'Nunito', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        transition: all 0.2s ease;
    }

    .filter-apply-btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }

    /* Scrollable content area - MUST override desktop 'display: contents' */
    .filter-modal-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;  /* Footer handles safe-area padding now */
    }

    /* Filter sections inside modal */
    .filter-dropdown .filters-menu-section {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .filter-dropdown .filters-menu-label {
        padding: 14px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        background: rgba(99, 102, 241, 0.05);
        color: #6366f1;
    }

    .filter-dropdown .filters-menu-content {
        max-height: none;
        padding: 8px 0;
        background: white;
    }

    .filter-dropdown .filter-dropdown-section {
        border: none;
        margin: 0;
        border-radius: 0;
        background: white;
    }

    .filter-dropdown .filter-dropdown-header {
        padding: 14px 20px;
        font-size: 0.95rem;
        background: white;
    }

    .filter-dropdown .filter-dropdown-item {
        padding: 14px 20px 14px 36px;
        font-size: 0.9rem;
    }

    .filter-dropdown .filter-dropdown-item:active {
        background: rgba(99, 102, 241, 0.08);
    }

    /* Mobile filter chips - horizontal scroll row */
    .filter-active-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
        padding: 8px 16px;
        margin: 0 -16px;  /* Extend to edges */
        gap: 8px;
    }

    .filter-active-chips::-webkit-scrollbar {
        display: none;  /* Chrome/Safari */
    }

    .filter-active-chips .filter-chip {
        flex-shrink: 0;  /* Prevent chips from shrinking */
        font-size: 12px;
        padding: 5px 10px 5px 12px;
        animation-duration: 0.2s;
    }

    /* Clear All button on mobile */
    .filter-active-chips .filter-clear-all {
        flex-shrink: 0;
        margin-left: 4px;
        padding: 5px 12px;
        font-size: 12px;
    }

    .filter-word-count {
        font-size: 12px;
    }

    /* Mobile search bar - full width */
    .grid-search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
        padding: 0;
    }

    .grid-search-wrapper {
        max-width: none;
    }

    .grid-search-input {
        padding: 14px 44px 14px 44px;
        font-size: 1rem;
        border-radius: 16px;
    }

    .grid-search-count {
        text-align: center;
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    /* Single column for mobile */
    .grid-cards {
        grid-template-columns: 1fr;
        gap: 16px;
        perspective: none;
    }

    /* Mobile cards - horizontal layout */
    .grid-card {
        aspect-ratio: auto;
        min-height: 160px;
        border-radius: 18px;
    }

    /* Disable hover effects on mobile */
    .grid-card:hover {
        transform: none;
        box-shadow: var(--grid-card-shadow);
    }

    .grid-card:hover .grid-card-image img {
        transform: none;
    }

    /* Touch feedback instead */
    .grid-card:active {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }

    /* Horizontal layout for mobile cards */
    .grid-card-front,
    .grid-card-back {
        flex-direction: row;
        border-radius: 18px;
    }

    .grid-card-image {
        width: 35%;
        min-width: 120px;
        max-width: 140px;
        min-height: 100%;
        flex: none;
        border-radius: 18px 0 0 18px;
        padding: 0;  /* Remove padding - Side Image style */
    }

    .grid-card-image::before {
        display: none;
    }

    /* Front image - edge-to-edge like back (Side Image style) */
    .grid-card-image img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        border-radius: 18px 0 0 18px;
    }

    .grid-card-content {
        flex: 1;
        height: auto;  /* Override desktop fixed height */
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        padding: 16px 60px 16px 16px;  /* Extra right padding for buttons */
        border-top: none;
        border-left: 1px solid rgba(94, 114, 228, 0.08);
        background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
    }

    /* Mobile: Status tint on front content */
    .grid-card-front:has(.grid-card-status.known) .grid-card-content {
        background: linear-gradient(145deg,
            rgba(34, 197, 94, 0.08) 0%,
            rgba(34, 197, 94, 0.15) 100%);
        border-left-color: rgba(34, 197, 94, 0.2);
    }

    .grid-card-front:has(.grid-card-status.learning) .grid-card-content {
        background: linear-gradient(145deg,
            rgba(249, 115, 22, 0.08) 0%,
            rgba(249, 115, 22, 0.15) 100%);
        border-left-color: rgba(249, 115, 22, 0.2);
    }

    /* Mobile: Dynamic scaling within horizontal layout */
    /* Content area is wider (~60% of screen), so larger scaling divisor */
    .grid-card-japanese {
        font-size: clamp(1.2rem, calc(12rem / var(--ja-chars, 5)), 2rem);
    }

    .grid-card-audio {
        bottom: auto;
        top: 50%;
        right: 14px;
        transform: translateY(-50%) scale(1);
        width: 36px;
        height: 36px;
    }

    .grid-card:hover .grid-card-audio {
        transform: translateY(-50%) scale(1);
    }

    .grid-card-audio:active {
        transform: translateY(-50%) scale(0.9);
    }

    /* Back face - mobile: Side Image layout (horizontal) */
    .grid-card-back {
        flex-direction: row !important;
        background: white;
    }

    /* Back image - left side thumbnail (matches front) */
    .grid-card-back-image {
        width: 35%;
        min-width: 120px;
        max-width: 140px;
        height: 100%;
        flex: none;
        border-radius: 18px 0 0 18px;
        position: relative;
        padding: 0;
        background: linear-gradient(
            180deg,
            rgba(102, 126, 234, 0.04) 0%,
            rgba(102, 126, 234, 0.08) 100%
        );
    }

    .grid-card-back-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 18px 0 0 18px;
    }

    /* Hide tint on mobile */
    .grid-card-back-tint {
        display: none;
    }

    /* Back content area - text beside image, centered */
    .grid-card-back-content {
        flex: 1;
        padding: 16px 60px 16px 16px;  /* Right padding for buttons column */
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        border-top: none;
        border-left: 1px solid rgba(99, 102, 241, 0.1);
        background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
        min-width: 0;
    }

    /* Mobile: Status tint on back content */
    .grid-card-back.known .grid-card-back-content {
        background: linear-gradient(145deg,
            rgba(34, 197, 94, 0.08) 0%,
            rgba(34, 197, 94, 0.15) 100%);
        border-left-color: rgba(34, 197, 94, 0.2);
    }

    .grid-card-back.learning .grid-card-back-content {
        background: linear-gradient(145deg,
            rgba(249, 115, 22, 0.08) 0%,
            rgba(249, 115, 22, 0.15) 100%);
        border-left-color: rgba(249, 115, 22, 0.2);
    }

    /* English word */
    .grid-card-back .grid-card-english-large {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0;
        line-height: 1.3;
        color: #1e293b;
        max-width: 100%;  /* Use full width - padding already reserves button space */
        word-break: normal;  /* Don't break mid-word */
        overflow-wrap: normal;  /* Override base - don't break words */
    }

    /* Actions - split top-right and bottom-right on mobile */
    .grid-card-back .grid-card-actions {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        padding: 12px 14px;
        border-top: none;
        background: transparent;
        backdrop-filter: none;
        /* Override desktop hidden state - must be visible on mobile */
        opacity: 1 !important;
        z-index: 10;
        pointer-events: none;
    }

    /* Both buttons on right side, top and bottom */
    .grid-card-back .grid-card-actions .grid-card-mark-btn {
        pointer-events: auto;
        align-self: flex-end;
    }


    /* Mark buttons on back face - vertically split */
    .grid-card-back .grid-card-mark-btn {
        max-width: none;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }

    /* All action buttons always visible on mobile (no hover) */
    .grid-card-focus-btn,
    .grid-card-audio,
    .grid-card-actions {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Audio button - top right on front face */
    .grid-card-front .grid-card-audio {
        position: absolute;
        bottom: auto;
        top: 12px;
        right: 14px;
        transform: none;
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .grid-card:hover .grid-card-front .grid-card-audio {
        transform: none;
    }

    .grid-card-front .grid-card-audio:active {
        transform: scale(0.9);
    }

    /* Focus button - bottom right on front face */
    .grid-card-front .grid-card-focus-btn {
        position: absolute;
        top: auto;
        bottom: 14px;
        left: auto;
        right: 14px;
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* Status indicator on mobile - position in image area */
    .grid-card-status {
        top: 10px;
        right: auto;
        left: 10px;  /* Move to top-left of image */
    }

    /* Back face status - hidden (using color tint instead) */
    .grid-card-back .grid-card-status {
        display: none;
    }

    /* Mark buttons - touch friendly */
    .grid-card-mark-btn {
        font-size: 1.15rem;
    }

    .grid-card-mark-btn:active {
        transform: scale(0.9);
    }

    /* Adjust English text on back for mobile */
    .grid-card-english-large {
        font-size: 1.25rem;
        line-height: 1.35;
    }

    /* Nav panel adjustments for mobile */
    .nav-search-row {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    /* Search input - full width on its own row */
    .nav-search-wrapper {
        width: 100%;
        min-width: 100%;
        order: -1;
        margin-bottom: 4px;
    }

    .nav-divider {
        display: none;
    }

    /* Hide segmented mode toggle on mobile - use simple Focus button instead */
    .nav-segmented-control {
        display: none;
    }

    /* Compact buttons row */
    .nav-labeled-btn {
        padding: 8px 12px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .nav-quiz-btn {
        padding: 8px 14px;
        font-size: 12px;
        flex-shrink: 0;
        margin-left: auto; /* Push to right - separate from learning flow */
    }

    /* Hide text labels on Flip/Shuffle - icons only on mobile */
    .nav-icon-btn .nav-btn-label {
        display: none;
    }

    .nav-icon-btn {
        padding: 8px 10px; /* More compact for icon-only */
    }

    /* Show Focus button on mobile */
    .nav-focus-btn-mobile {
        display: flex;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        border-color: rgba(99, 102, 241, 0.3);
        box-shadow:
            0 2px 8px rgba(99, 102, 241, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .nav-focus-btn-mobile:hover,
    .nav-focus-btn-mobile:active {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    }

    /* Search wrapper needs explicit positioning context */
    .nav-search-wrapper {
        position: relative !important;
    }

    /* Word count - inside search bar as small badge */
    .nav-word-count {
        position: absolute !important;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        font-weight: 600;
        padding: 3px 8px;
        margin: 0;
        background: rgba(99, 102, 241, 0.12);
        color: #6366f1;
        border-radius: 8px;
        border: none;
        box-shadow: none;
        transition: opacity 0.2s ease;
        z-index: 2;
    }

    /* Hide word count when typing (clear button visible) */
    .nav-search-clear.visible ~ .nav-word-count,
    .nav-search-wrapper:has(.nav-search-clear.visible) .nav-word-count {
        opacity: 0;
        pointer-events: none;
    }

    /* Clear button positioning - same spot as word count */
    .nav-search-clear {
        position: absolute !important;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
    }

    /* Add right padding to search input to avoid overlap with badge */
    /* font-size: 16px prevents iOS auto-zoom on focus */
    .nav-search-input {
        padding-right: 90px !important;
        font-size: 16px !important;
    }

    /* Align scrollbar with card top - starts below nav panel */
    .grid-container::-webkit-scrollbar-track {
        margin-top: 0;
    }
}

/* =============================================================================
   EMPTY STATE - Polished
   ============================================================================= */

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes emptyFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    text-align: center;
    padding: 48px 40px;
    animation: emptyFadeIn 0.5s var(--ease-out-expo);
}

.grid-empty-icon {
    font-size: 4.5rem;
    margin-bottom: 24px;
    animation: emptyFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

.grid-empty-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.grid-empty-hint {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #94a3b8;
    max-width: 280px;
    line-height: 1.5;
}

/* =============================================================================
   LOADING STATE - Enhanced Skeleton
   ============================================================================= */

.grid-card.loading {
    pointer-events: none;
    overflow: hidden;
}

.grid-card.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
}

.grid-card.loading .grid-card-image {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.12) 0%,
        rgba(148, 163, 184, 0.08) 100%
    );
}

.grid-card.loading .grid-card-content {
    background: transparent;
}

.grid-card.loading .grid-card-japanese,
.grid-card.loading .grid-card-romanization {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0.1));
    border-radius: 6px;
    color: transparent !important;
    min-height: 1.5em;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================================================
   CARD BACK - STATUS INDICATOR (hidden - using color tint instead)
   ============================================================================= */

/* Hide status dot on back - color tint provides status indication */
.grid-card-back .grid-card-status {
    display: none;
}

/* =============================================================================
   ACTION BAR - HIDE IN GRID MODE
   ============================================================================= */

/* Hide the entire action bar in grid mode */
body.grid-mode .bottom-action-bar {
    display: none !important;
}

/* =============================================================================
   PREMIUM POLISH - DESKTOP ENHANCEMENTS
   Only apply scroll-aware animations on desktop (causes issues on mobile)
   ============================================================================= */

@media (min-width: 769px) {
    /* 1. Scroll-aware card entrance - cards animate when first scrolling into view */
    .grid-card:not(.in-view) {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        animation: none;
    }

    .grid-card.in-view {
        animation: cardEntrance 0.5s var(--ease-out-expo) forwards;
    }
}

/* 2. Focus button breathing glow - draws attention to primary CTA */
@keyframes focusBtnGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow:
            0 2px 12px rgba(99, 102, 241, 0.5),
            0 0 0 3px rgba(99, 102, 241, 0.12);
    }
}

.grid-card:hover .grid-card-focus-btn {
    animation: focusBtnGlow 2s ease-in-out infinite;
}

.grid-card:hover .grid-card-focus-btn:hover {
    animation: none; /* Stop glow on direct hover - use scale instead */
}

/* 3. English text reveal animation on back face */
@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.grid-card.flipped .grid-card-english-large,
.grid-cards.all-flipped .grid-card:not(.flipped) .grid-card-english-large {
    animation: textReveal 0.4s ease-out 0.15s backwards;
}

/* POS tag hidden in grid view - no animation needed */

/* 5. Enhanced filter dropdown shadow when open */
.filter-dropdown.open {
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.18),
        0 12px 30px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 60px rgba(99, 102, 241, 0.06);
}

/* =============================================================================
   PREMIUM POLISH - AUDIO PLAYING EFFECTS
   ============================================================================= */

/* Audio button enhanced state while playing */
.grid-card-audio.playing {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow:
        0 4px 16px rgba(124, 58, 237, 0.5),
        0 0 0 4px rgba(124, 58, 237, 0.2);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

/* Sound wave rings - use pseudo-elements with opacity control */
.grid-card-audio::before,
.grid-card-audio::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, 0.5);
    opacity: 0;
    pointer-events: none;
}

@keyframes soundWaveRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.grid-card-audio.playing::before {
    animation: soundWaveRing 1.2s ease-out infinite;
}

.grid-card-audio.playing::after {
    animation: soundWaveRing 1.2s ease-out 0.4s infinite;
}

/* Fade out: stop new waves, let existing ones finish naturally */
.grid-card-audio.fade-out {
    background: var(--grid-audio-btn);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
    transform: scale(1);
    transition: all 0.3s ease-out;
}

.grid-card-audio.fade-out::before,
.grid-card-audio.fade-out::after {
    animation: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* Japanese text glow - use transform for GPU acceleration */
.grid-card.audio-playing .grid-card-japanese {
    text-shadow:
        0 0 8px rgba(124, 58, 237, 0.4),
        0 0 16px rgba(124, 58, 237, 0.2);
    transition: text-shadow 0.3s ease-out;
}

/* Fade out: smooth return to normal */
.grid-card.audio-fade-out .grid-card-japanese,
.grid-card:not(.audio-playing) .grid-card-japanese {
    text-shadow: none;
    transition: text-shadow 0.3s ease-out;
}

/* Card glow effect (desktop only) - static glow, not animated */
@media (min-width: 769px) {
    .grid-card.audio-playing {
        box-shadow:
            var(--grid-card-shadow),
            0 0 25px rgba(124, 58, 237, 0.15);
        transition: box-shadow 0.3s ease-out;
    }

    .grid-card.audio-fade-out,
    .grid-card:not(.audio-playing) {
        transition: box-shadow 0.3s ease-out;
    }
}

/* =============================================================================
   PREMIUM POLISH - MOBILE ENHANCEMENTS
   ============================================================================= */

@media (max-width: 768px) {
    /* 1. Scrollable chips fade edges - indicate more content */
    .filter-active-chips {
        position: relative;
    }

    .filter-active-chips::before,
    .filter-active-chips::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .filter-active-chips::before {
        left: 0;
        background: linear-gradient(90deg,
            rgba(102, 126, 234, 0.95) 0%,
            transparent 100%);
    }

    .filter-active-chips::after {
        right: 0;
        background: linear-gradient(-90deg,
            rgba(118, 75, 162, 0.95) 0%,
            transparent 100%);
    }

    /* Show fade when scrollable - classes added via JS */
    .filter-active-chips.scrollable-left::before { opacity: 1; }
    .filter-active-chips.scrollable-right::after { opacity: 1; }

    /* 2. Enhanced touch feedback with ripple effect */
    .grid-card {
        --tap-x: 50%;
        --tap-y: 50%;
    }

    .grid-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: radial-gradient(circle at var(--tap-x) var(--tap-y),
            rgba(99, 102, 241, 0.15) 0%,
            transparent 60%);
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;
        z-index: 20;
    }

    .grid-card:active::after {
        opacity: 1;
    }

    /* 3. Larger mobile status indicator for better visibility */
    .grid-card-status {
        width: 18px;
        height: 18px;
    }

    .grid-card-status.known {
        box-shadow:
            0 0 0 4px rgba(34, 197, 94, 0.12),
            0 2px 8px rgba(34, 197, 94, 0.35);
    }

    .grid-card-status.learning {
        box-shadow:
            0 0 0 4px rgba(249, 115, 22, 0.12),
            0 2px 8px rgba(249, 115, 22, 0.35);
    }

    /* 4. Filter modal spring animation */
    .filter-dropdown {
        transition:
            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.25s ease !important;
    }

    /* 5. Back face action bar - transparent to show content tint */
    .grid-card-back .grid-card-actions {
        border-top: none;
        background: transparent;
    }
}