/* =============================================================================
   LEARN SECTION STYLES
   Vocabulary flashcard learning interface

   Note: Page header and tab bar styles are in style.css
   ============================================================================= */

/* =============================================================================
   LEARN CONTENT
   Main content area
   ============================================================================= */
.learn-content {
    padding: 0 0 var(--spacing-xl);
}

/* =============================================================================
   LEVEL SECTIONS
   Wordlists grouped by CEFR level
   ============================================================================= */
.level-section {
    margin-bottom: var(--spacing-xl);
}

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

.level-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-color);
    background: var(--accent-subtle);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.level-badge.large {
    min-width: 44px;
    height: 32px;
    font-size: var(--font-size-base);
}

.level-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* =============================================================================
   WORDLIST CARDS GRID
   Cards displaying available wordlists
   ============================================================================= */
.wordlists-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wordlist-card {
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.wordlist-card:hover {
    background-color: var(--bg-secondary);
}

.wordlist-card-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
}

.wordlist-card-content {
    flex: 1;
    min-width: 0;
}

.wordlist-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.wordlist-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wordlist-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.card-count {
    font-variant-numeric: tabular-nums;
}

.tags {
    display: flex;
    gap: var(--spacing-xs);
}

.tag {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.wordlist-card-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wordlist-card-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--text-faint);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.wordlist-card:hover .wordlist-card-arrow svg {
    color: var(--text-tertiary);
    transform: translateX(2px);
}

/* =============================================================================
   WORDLIST DETAIL PAGE
   Single wordlist view with preview
   ============================================================================= */
.wordlist-detail {
    padding: 0;
}

.wordlist-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--border-subtle);
}

.wordlist-info {
    flex: 1;
}

.wordlist-info h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: var(--spacing-sm) 0 var(--spacing-sm);
    color: var(--text-primary);
}

.wordlist-info .description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.wordlist-info .meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* Session configuration */
.session-config {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex-shrink: 0;
}

.cycle-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 200px;
}

.cycle-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.cycle-progress-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cycle-progress-text {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.reset-progress-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
    /* Touch-friendly */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.reset-progress-btn:hover {
    color: var(--color-error);
    background: rgba(255, 69, 58, 0.1);
}

.reset-progress-btn:active {
    transform: scale(0.95);
}

.reset-progress-btn svg {
    width: 18px;
    height: 18px;
}

.session-size-control {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 200px;
}

.session-size-control label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-weight: 500;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.slider-container input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    /* Touch-friendly: add padding for larger touch area without changing visual size */
    padding: 8px 0;
    background-clip: content-box;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.slider-container input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.slider-container input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--accent-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-container input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.slider-container output {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    min-width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.study-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: white;
    background: var(--accent-color);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.study-button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.study-button svg {
    width: 20px;
    height: 20px;
}

.error-message {
    padding: var(--spacing-md);
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-error);
    margin-bottom: var(--spacing-lg);
}

/* Group tabs */
.group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
}
.group-tab {
    padding: 0.375rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 999px;
    color: var(--text-secondary, #8e8e93);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.group-tab:hover {
    color: var(--text-primary, #fff);
    border-color: var(--text-secondary, #8e8e93);
}
.group-tab.active {
    background: var(--accent-color, #007aff);
    border-color: var(--accent-color, #007aff);
    color: #fff;
}

/* Card preview list - JS rendered */
.preview-section {
    margin-bottom: var(--spacing-xl);
}

.preview-section h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.noscript-notice {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.preview-list {
    list-style: none;
}

.preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.preview-item:hover {
    background: var(--bg-secondary);
}

.preview-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
}

.preview-front {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.preview-text-front {
    font-weight: 500;
    color: var(--text-primary);
}

.preview-pronunciation {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.preview-separator {
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
    margin: 0 var(--spacing-sm);
}

.preview-text-back {
    color: var(--text-secondary);
    text-align: right;
}

/* Preview audio buttons */
.preview-audio-buttons {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.preview-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 52px;
    height: 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.preview-audio-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.preview-audio-btn:active {
    transform: scale(0.96);
}

.preview-audio-btn .audio-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.preview-audio-btn .audio-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.preview-audio-btn-secondary {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-tertiary);
}

.preview-audio-btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--text-tertiary);
    color: var(--text-secondary);
}

.preview-audio-btn.playing {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.preview-audio-btn.playing .audio-icon {
    animation: audio-pulse-icon 0.8s ease-in-out infinite;
}

.preview-audio-btn.audio-unavailable,
.preview-audio-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-tertiary);
}

.preview-audio-btn.audio-unavailable:hover,
.preview-audio-btn:disabled:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-tertiary);
    transform: none;
}

/* Preview error state */
.preview-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-style: italic;
}

.preview-error-icon {
    font-size: var(--font-size-lg);
}

.preview-error-message {
    font-size: var(--font-size-base);
}

/* Pagination */
.preview-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.preview-pagination-top {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-subtle);
}

.preview-pagination-bottom {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-btn svg {
    width: 20px;
    height: 20px;
}

.pagination-info {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pagination-separator {
    color: var(--text-faint);
    margin: 0 4px;
}

/* =============================================================================
   COPY PROTECTION
   Prevent text selection and copying on vocabulary content
   ============================================================================= */
.no-copy,
.no-copy * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent drag on vocabulary items */
.no-copy .front,
.no-copy .back {
    -webkit-user-drag: none;
    user-drag: none;
}

.wordlist-footer {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--font-size-sm);
    color: var(--text-faint);
}

/* =============================================================================
   STUDY SESSION
   Flashcard interface - Full screen on all devices
   Optimized for iOS Safari with safe area handling
   ============================================================================= */
.study-container {
    display: flex;
    flex-direction: column;
    /* Use dvh for proper mobile viewport handling (accounts for address bar) */
    height: 100dvh;
    height: 100vh; /* Fallback for browsers without dvh support */
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg-primary);
    z-index: 100;
    /* Prevent iOS overscroll/bounce */
    overflow: hidden;
    /* Disable touch callout (long-press menu) */
    -webkit-touch-callout: none;
    /* Disable text selection to prevent copying vocabulary */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent pull-to-refresh */
    overscroll-behavior: none;
}

/* Extra protection: prevent copying card content specifically */
.flashcard-front,
.flashcard-back,
.card-text,
.pronunciation,
.example,
.notes {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent drag on card content */
.card-text,
.pronunciation {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Noscript fallback message */
.noscript-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--text-secondary);
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    z-index: 10;
}

.noscript-message p {
    font-size: var(--font-size-lg);
    max-width: 300px;
}

.noscript-message a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.noscript-message a:hover {
    text-decoration: underline;
}

/* Modern browsers: use dvh which accounts for dynamic viewport changes */
@supports (height: 100dvh) {
    .study-container {
        height: 100dvh;
    }
}

.study-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    /* iOS safe area: account for notch and status bar */
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    /* Prevent zoom on double-tap anywhere in header */
    touch-action: manipulation;
}

.exit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    /* Prevent double-tap zoom on iOS */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.exit-button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.exit-button svg {
    width: 24px;
    height: 24px;
}

.study-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
    margin: 0 var(--spacing-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-indicator {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.progress-indicator .separator {
    color: var(--text-faint);
    margin: 0 2px;
}

/* =============================================================================
   FLASHCARD
   3D flip + slide animations with snappy, modern feel
   ============================================================================= */

/* Custom easing for snappy animations */
:root {
    /* Fast, aggressive ease-out for instant response */
    --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
}

.flashcard-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    perspective: 1200px;
    overflow: hidden;
    /* Prevent all touch scrolling/zooming in flashcard area (iOS Safari) */
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}

/* Stable audio controls below card stack */
.card-audio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    /* Don't participate in card animations */
    flex-shrink: 0;
}

/* Card stack container - positions cards on top of each other */
.flashcard-stack {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 320px;
}

.flashcard {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Enable transform for animations */
    will-change: transform, opacity;
    /* Prevent double-tap zoom on iOS */
    touch-action: manipulation;
}

/* Peek card - sits underneath the main card */
.flashcard-peek {
    z-index: 1;
    /* Initially hidden - shown via JS when dragging */
    opacity: 0;
    visibility: hidden;
    /* Slightly scaled down and shifted to create depth effect */
    transform: scale(0.95) translateY(8px);
    transition: transform 0.2s var(--ease-snappy), opacity 0.15s ease-out;
    pointer-events: none;
}

/* When peek card is active (during drag) */
.flashcard-peek.active {
    opacity: 1;
    visibility: visible;
}

/* Peek card scales up as main card is dragged away */
.flashcard-peek.scaling-up {
    transform: scale(1) translateY(0);
}

/* Incoming card - slides in from left on swipe right (on top of main card) */
.flashcard-incoming {
    z-index: 3;
    /* Initially hidden off-screen to the left */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-120%) rotate(-15deg);
    transition: transform 0.25s var(--ease-snappy), opacity 0.2s ease-out;
    pointer-events: none;
}

/* When incoming card is active (during swipe right drag) */
.flashcard-incoming.active {
    opacity: 1;
    visibility: visible;
}

/* During drag, disable transitions for immediate finger-following */
.flashcard-incoming.dragging {
    transition: none !important;
}

/* Main card sits in the middle */
.flashcard:not(.flashcard-peek):not(.flashcard-incoming) {
    z-index: 2;
}

/* Main card shrinks as incoming card slides on top */
.flashcard.shrinking {
    transform: scale(0.95) translateY(8px);
    opacity: 0.7;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.35s var(--ease-snappy);
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateX(180deg);
}

/* Card switching - pure slide animation (no opacity flash)
   Uses transform for GPU acceleration and smooth 60fps
   Content updates immediately, animation is purely decorative */
.flashcard {
    /* 120ms slide - smooth but still responsive */
    transition: transform 0.12s var(--ease-snappy);
}

/* Starting positions - set via JS, then transition to neutral */
.flashcard.slide-from-left {
    transform: translateX(-32px);
}

.flashcard.slide-from-right {
    transform: translateX(32px);
}

/* Tinder-style dragging state - disable transitions for immediate response */
.flashcard.dragging {
    transition: none !important;
    cursor: grabbing;
}

/* During drag, add subtle shadow to indicate card is lifted */
.flashcard.dragging .flashcard-front,
.flashcard.dragging .flashcard-back {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.15s ease-out;
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Subtle shadow for depth */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.flashcard-back {
    transform: rotateX(180deg);
}

.card-text {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}

.card-text.front-echo {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.card-text.translation {
    color: var(--accent-color);
}

.flashcard-front .card-hint {
    position: absolute;
    bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-faint);
}

.flashcard-back .divider {
    width: 60px;
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-md) 0;
}

.example-section {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.example {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
    margin: var(--spacing-xs) 0;
}

.example.translation {
    color: var(--text-tertiary);
}

.notes {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-faint);
    text-align: center;
    max-width: 300px;
}

/* Pronunciation display */
.pronunciation {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

/* =============================================================================
   AUDIO BUTTONS
   Language-labeled audio playback buttons with clear visual feedback
   ============================================================================= */

/* Base audio button styles */
.audio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    /* iOS Safari optimizations */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.audio-button:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.audio-button:active {
    transform: scale(0.96);
}

.audio-button .audio-icon {
    flex-shrink: 0;
}

.audio-button .audio-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Labeled button variant - larger with visible label (front of card) */
.audio-button-labeled {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    min-width: 72px;
    height: 40px;
}

.audio-button-labeled .audio-icon {
    width: 18px;
    height: 18px;
}

/* Compact button variant - for back of card with side-by-side layout */
.audio-button-compact {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 60px;
    height: 32px;
}

.audio-button-compact .audio-icon {
    width: 14px;
    height: 14px;
}

.audio-button-compact .audio-label {
    font-size: 10px;
}

/* Secondary variant - less prominent (English button) */
.audio-button-secondary {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-tertiary);
}

.audio-button-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--text-tertiary);
    color: var(--text-secondary);
}

/* Audio buttons row - horizontal layout on back of card */
.audio-buttons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Playing state - clear visual feedback with accent color */
.audio-button.playing {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.audio-button.playing .audio-icon {
    animation: audio-pulse-icon 0.8s ease-in-out infinite;
}

@keyframes audio-pulse-icon {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* =============================================================================
   STUDY CONTROLS
   Navigation buttons
   ============================================================================= */
.study-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    /* iOS safe area: account for home indicator and bottom address bar */
    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    /* Prevent zoom on double-tap anywhere in controls */
    touch-action: manipulation;
}

.control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    /* Prevent double-tap zoom on iOS */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.control-button:hover:not(:disabled) {
    background: var(--bg-elevated);
    transform: scale(1.05);
}

.control-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    /* CRITICAL: Disabled buttons must also prevent zoom on iOS */
    touch-action: manipulation;
    pointer-events: auto; /* Keep for visual feedback, but prevent default */
}

.control-button svg {
    width: 24px;
    height: 24px;
}

.control-button.flip {
    width: auto;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-sm);
    background: var(--accent-color);
    color: white;
}

.control-button.flip:hover {
    background: var(--accent-hover);
}

.control-button.flip span {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.control-button.shuffle {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.control-button.shuffle:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.control-button.shuffle.active {
    background: var(--accent-color);
    color: white;
}

/* Session complete modal */
.session-complete-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-lg);
    /* iOS safe areas */
    padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.session-complete-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 400px;
    width: 100%;
    text-align: center;
    animation: slideUp 0.3s ease;
}

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

.session-complete-content h2 {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-xl);
    color: var(--text-primary);
}

.session-complete-content p {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
    line-height: 1.5;
}

.session-complete-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.session-complete-actions .btn {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-base);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    /* Touch-friendly */
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.session-complete-actions .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
}

.session-complete-actions .btn-secondary:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.session-complete-actions .btn-secondary:active {
    transform: scale(0.98);
}

.session-complete-actions .btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
}

.session-complete-actions .btn-primary:hover {
    background: var(--accent-hover);
}

.session-complete-actions .btn-primary:active {
    transform: scale(0.98);
}

/* Keyboard hint */
.keyboard-hint {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
    /* iOS safe area for bottom */
    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    font-size: var(--font-size-xs);
    color: var(--text-faint);
    background: var(--bg-secondary);
    flex-shrink: 0;
    /* Prevent zoom on double-tap */
    touch-action: manipulation;
}

.keyboard-hint span {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, monospace;
    margin: 0 2px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 640px) {
    .level-title {
        gap: var(--spacing-sm);
    }

    .level-name {
        font-size: var(--font-size-base);
    }

    .wordlist-hero {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    /* Mobile session config - card-like container with clear visual grouping */
    .session-config {
        width: 100%;
        align-items: stretch;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-subtle);
    }

    /* Progress section on mobile */
    .cycle-progress {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        min-width: 0;
    }

    .cycle-progress-bar {
        flex: 1 1 100%;
        height: 8px;
        order: 1;
    }

    .cycle-progress-text {
        flex: 1;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        order: 2;
    }

    .reset-progress-btn {
        order: 3;
        width: 40px;
        height: 40px;
        background: var(--bg-tertiary);
        border-radius: var(--radius-md);
    }

    .reset-progress-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Session size slider on mobile */
    .session-size-control {
        gap: var(--spacing-sm);
        min-width: 0;
    }

    .session-size-control label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .slider-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .slider-container input[type="range"] {
        width: 100%;
        height: 8px;
        padding: 12px 0;
    }

    .slider-container input[type="range"]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .slider-container input[type="range"]::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .slider-container output {
        text-align: center;
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--text-primary);
        min-width: 0;
    }

    .study-button {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-lg);
    }

    .study-button svg {
        width: 24px;
        height: 24px;
    }

    .wordlist-info h1 {
        font-size: var(--font-size-xl);
    }

    /* Preview list - mobile layout with audio buttons */
    .preview-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .preview-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .preview-front {
        min-width: 0;
        width: 100%;
    }

    .preview-text-front {
        font-size: var(--font-size-lg);
    }

    .preview-separator {
        display: none;
    }

    .preview-text-back {
        text-align: left;
        color: var(--text-tertiary);
        font-size: var(--font-size-base);
    }

    /* Audio buttons row on mobile */
    .preview-audio-buttons {
        justify-content: flex-start;
        margin-top: var(--spacing-xs);
    }

    .preview-audio-btn {
        min-width: 60px;
        height: 32px;
    }

    /* Pagination on mobile */
    .preview-pagination {
        padding: var(--spacing-md) 0;
    }

    /* Study page - already full screen via fixed positioning */
    .study-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .study-title {
        font-size: var(--font-size-sm);
    }

    .flashcard-area {
        padding: var(--spacing-md);
    }

    .flashcard-stack {
        height: 280px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: var(--spacing-lg);
    }

    .card-text {
        font-size: var(--font-size-xl);
    }

    .card-text.front-echo {
        font-size: var(--font-size-lg);
    }

    .study-controls {
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .control-button {
        width: 48px;
        height: 48px;
    }

    .control-button.flip {
        padding: 0 var(--spacing-md);
    }

    .keyboard-hint {
        display: none;
    }

    /* Session complete modal on mobile */
    .session-complete-content {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
    }

    .session-complete-content h2 {
        font-size: var(--font-size-lg);
    }

    .session-complete-content p {
        font-size: var(--font-size-sm);
    }

    .session-complete-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .session-complete-actions .btn {
        width: 100%;
        padding: var(--spacing-md);
    }
}

/* =============================================================================
   TABLET/DESKTOP: BIGGER FLASHCARDS
   ============================================================================= */
@media (min-width: 768px) {
    .flashcard-stack {
        max-width: 600px;
        height: 400px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: var(--spacing-2xl);
        border-radius: 20px;
    }

    .card-text {
        font-size: 2rem;
    }

    .card-text.front-echo {
        font-size: 1.5rem;
    }

    .card-text.translation {
        font-size: 2rem;
    }

    .example {
        font-size: var(--font-size-base);
    }

    .notes {
        font-size: var(--font-size-sm);
        max-width: 400px;
    }

    .study-controls {
        gap: var(--spacing-2xl);
        padding: var(--spacing-xl);
    }

    .control-button {
        width: 64px;
        height: 64px;
    }

    .control-button svg {
        width: 28px;
        height: 28px;
    }

    .control-button.flip {
        padding: 0 var(--spacing-xl);
        height: 64px;
    }

    .control-button.flip span {
        font-size: var(--font-size-base);
    }
}

/* Large desktop: even bigger cards */
@media (min-width: 1024px) {
    .flashcard-stack {
        max-width: 700px;
        height: 450px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: 48px;
        border-radius: 24px;
    }

    .card-text {
        font-size: 2.5rem;
    }

    .card-text.front-echo {
        font-size: 1.75rem;
    }

    .card-text.translation {
        font-size: 2.5rem;
    }

    .example {
        font-size: var(--font-size-lg);
    }

    .notes {
        max-width: 500px;
    }
}