/* ============================================================
   WIKA — Responsive Layout
   Mobile-first: 375px → Tablet 768px → TV 1200px → 1920px
   ============================================================ */


/* ============================================================
   BASE / PHONE (mobile-first, ≤767px)
   Default: everything is designed for 375px+ phones
   ============================================================ */

/* Core layout */
.page {
    padding: 16px 16px 90px;
    max-width: 100%;
}

/* Nav visibility */
.nav-bottom { display: flex; }
.nav-top    { display: none; }

/* App header shown on mobile */
.app-header { display: flex; }

/* Single-column grids */
.cards-grid,
.bonus-grid,
.game-mode-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Quiz grid: 2 cols on phone */
.answer-grid,
.quiz-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Stats: 2 cols */
.stats-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Avatar grid — mobile sizes handled in style.css */

/* Phrase table — allow horizontal scroll */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Inline phrase form — stack on tiny phones */
.inline-phrase-form {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
}

.inline-phrase-form .btn-sm {
    grid-column: 1 / -1;
    width: 100%;
}

/* Form row — stack on very small screens */
.form-row {
    grid-template-columns: 1fr 1fr;
}

/* Quick action grid — always 4 cols on phone */
.quick-action-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.quick-action-btn {
    min-height: 64px;
    padding: 10px 4px;
}

.qa-icon {
    font-size: 1.4rem;
}

.qa-label {
    font-size: 0.65rem;
}

/* Profile pills — wrap */
.profile-pills {
    flex-wrap: wrap;
}

/* Flashcard */
.flashcard {
    min-height: 240px;
}

.fc-word {
    font-size: 1.6rem;
}

/* Flashcard actions */
.flashcard-actions {
    grid-template-columns: 1fr 1fr;
}

/* TV host — single col */
.tv-lobby-layout {
    grid-template-columns: 1fr;
}

.tv-answers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Buzzer — phone optimized */
#page-buzzer {
    padding: 8px 8px 80px;
}

.buzzer-button-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px;
    height: calc(100vh - 180px);
    max-height: none;
}

.buzzer-btn {
    border-radius: 14px;
    min-height: 0;
}

.buz-shape {
    font-size: 2.5rem;
}

.buz-label {
    font-size: 1.6rem;
}

.buzzer-question-strip {
    padding: 10px 12px;
    font-size: 1.1rem;
}

.buzzer-join-card {
    border: none;
    background: transparent;
    padding: 16px 8px;
}

.buzzer-result-card {
    margin: 16px 8px;
    padding: 32px 16px;
}

/* Modal */
.modal-card {
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 85vh;
    animation: slideUp 0.3s ease;
}

/* New profile row — stack */
.new-profile-row {
    flex-direction: column;
}

/* Language selector row */
.language-selector-row {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
}

/* Form actions — full width buttons */
.form-actions .btn-primary,
.form-actions .btn-secondary {
    flex: 1;
}

/* Leaderboard card */
.leaderboard-card {
    padding: 16px;
}

/* Section block spacing */
.section-block {
    margin-bottom: 16px;
}

/* Flashcard scene perspective */
.flashcard-scene {
    perspective: 900px;
}

/* Phrase preview rows — scroll */
.phrases-preview-list {
    max-height: 220px;
}

.phrase-preview-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
}

.phrase-preview-row .phrase-cell:nth-child(n+3) {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* TV room code */
.tv-room-code {
    font-size: 2.8rem;
    letter-spacing: 0.15em;
    padding: 14px;
}


/* ============================================================
   VERY SMALL PHONES (≤374px) — squeeze adjustments
   ============================================================ */
@media (max-width: 374px) {
    .quick-action-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .quick-action-btn {
        min-height: 72px;
    }

    .qa-icon { font-size: 1.6rem; }
    .qa-label { font-size: 0.72rem; }

    .answer-btn,
    .quiz-option {
        min-height: 70px;
        font-size: 0.9rem;
    }

    .game-mode-card {
        min-height: 90px;
        padding: 14px 8px;
    }

    .gm-icon { font-size: 1.8rem; }
    .gm-name { font-size: 0.85rem; }
    .gm-desc { display: none; }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }

    .flashcard { min-height: 200px; }
    .fc-word { font-size: 1.4rem; }

    .inline-phrase-form {
        grid-template-columns: 1fr;
    }

    .avatar-option {
        width: 56px;
        height: 56px;
    }
}


/* ============================================================
   TABLET (768px – 1199px)
   ============================================================ */
@media (min-width: 768px) {

    /* Page container */
    .page {
        padding: 28px 32px 100px;
        max-width: 760px;
        margin: 0 auto;
    }

    /* Nav: still use bottom nav on tablet */
    .nav-bottom { display: flex; }
    .nav-top    { display: none; }

    /* Nav items slightly larger */
    .nav-item {
        font-size: 0.7rem;
    }

    .nav-item .nav-icon {
        font-size: 1.5rem;
    }

    /* Typography */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.7rem; }
    body { font-size: 16px; }

    /* Buttons */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        font-size: 1rem;
        min-height: 52px;
        padding: 12px 28px;
    }

    /* Grids */
    .cards-grid { grid-template-columns: repeat(2, 1fr); }

    .answer-grid,
    .quiz-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .answer-btn,
    .quiz-option {
        min-height: 90px;
        font-size: 1.05rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .stat-value { font-size: 2rem; }

    .game-mode-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .game-mode-card {
        min-height: 130px;
        padding: 24px 16px;
    }

    .gm-icon { font-size: 2.8rem; }
    .gm-name { font-size: 1.05rem; }

    /* Quick actions */
    .quick-action-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .quick-action-btn {
        min-height: 82px;
        padding: 14px 10px;
    }

    .qa-icon { font-size: 1.8rem; }
    .qa-label { font-size: 0.75rem; }

    /* Flashcard */
    .flashcard {
        min-height: 320px;
    }

    .fc-word { font-size: 2.2rem; }

    .flashcard-actions {
        gap: 16px;
    }

    .btn-fc {
        min-height: 60px;
        font-size: 1.05rem;
    }

    /* Form elements */
    .form-input,
    .form-select {
        height: 54px;
        font-size: 1rem;
    }

    .inline-phrase-form {
        grid-template-columns: repeat(4, 1fr) auto;
    }

    /* Phrase preview */
    .phrase-preview-row {
        grid-template-columns: repeat(4, 1fr) auto;
    }

    /* Modal */
    .modal-card {
        position: static;
        border-radius: var(--radius-lg);
        max-width: 520px;
        animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Language selector */
    .language-selector-row {
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
    }

    /* TV host layout */
    .tv-lobby-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }

    .tv-room-code { font-size: 3.5rem; }

    .tv-answers-grid {
        gap: 14px;
    }

    /* Leaderboard */
    .lb-avatar { font-size: 1.5rem; width: 40px; height: 40px; }
    .lb-name { font-size: 1rem; }
    .lb-xp { font-size: 0.95rem; }

    /* Profile card */
    .profile-avatar-lg {
        width: 96px;
        height: 96px;
        font-size: 3rem;
    }

    /* Stats in profile */
    .profile-name-lg { font-size: 1.6rem; }

    /* Streak */
    .streak-count { font-size: 2.4rem; }
    .streak-label { font-size: 1.1rem; }

    /* Question area */
    .question-text { font-size: 1.8rem; }

    /* App header on tablet */
    .app-header {
        padding: 0 24px;
    }

    .header-brand { font-size: 1.5rem; }

    /* Bonus grid */
    .bonus-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .bonus-icon { font-size: 2.8rem; }
    .bonus-name { font-size: 1rem; }
}


/* ============================================================
   TV / LARGE SCREEN (1200px+)
   Bottom nav hidden, top nav visible, big everything
   ============================================================ */
@media (min-width: 1200px) {

    /* Layout */
    .page {
        padding: 40px 48px 40px;
        max-width: 1400px;
        padding-bottom: 40px; /* no bottom nav */
    }

    /* Main content starts below top nav (not header) */
    .main-content {
        padding-top: var(--top-nav-h);
    }

    /* Nav swap */
    .nav-bottom { display: none; }
    .nav-top    { display: flex; }
    .app-header { display: none; } /* Top nav takes over branding */

    /* Toast: move to top right */
    #toast {
        bottom: auto;
        top: calc(var(--top-nav-h) + 20px);
        right: 40px;
        left: auto;
        transform: translateY(-10px);
        font-size: 1rem;
    }

    #toast.show {
        transform: translateY(0);
    }

    /* Typography */
    body { font-size: 20px; }
    h1 { font-size: 3rem; }
    h2 { font-size: 2.2rem; }
    h3 { font-size: 1.6rem; }
    h4 { font-size: 1.2rem; }

    .section-title { font-size: 1.4rem; }
    .card-title { font-size: 1.2rem; }

    /* Buttons */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        font-size: 1.2rem;
        min-height: 60px;
        padding: 14px 32px;
        border-radius: 18px;
    }

    .btn-sm {
        min-height: 44px;
        padding: 8px 20px;
        font-size: 1rem;
    }

    .btn-icon {
        width: 50px;
        height: 50px;
        min-height: 50px;
        font-size: 1.2rem;
    }

    .btn-back {
        font-size: 1rem;
        padding: 10px 20px;
        min-height: 48px;
    }

    /* Form elements */
    .form-input,
    .form-select {
        height: 62px;
        font-size: 1.1rem;
        border-radius: 14px;
        padding: 0 20px;
    }

    .form-label {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    /* Grids — wider layout */
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .game-mode-grid,
    .game-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .game-mode-card {
        min-height: 160px;
        padding: 28px 20px;
        border-radius: 20px;
    }

    .gm-icon { font-size: 3.2rem; }
    .gm-name { font-size: 1.2rem; }
    .gm-desc { font-size: 0.85rem; }

    /* Quick actions */
    .quick-action-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .quick-action-btn {
        min-height: 100px;
        padding: 18px 12px;
        border-radius: 20px;
    }

    .qa-icon { font-size: 2.4rem; }
    .qa-label { font-size: 0.9rem; }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .stat-card {
        padding: 20px;
        border-radius: 20px;
    }

    .stat-value { font-size: 2.4rem; }
    .stat-label { font-size: 0.85rem; }
    .stat-icon  { font-size: 1.8rem; }

    /* Answer/quiz grid */
    .answer-grid,
    .quiz-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .answer-btn,
    .quiz-option {
        min-height: 100px;
        font-size: 1.3rem;
        border-radius: 20px;
        padding: 16px;
    }

    /* Flashcard */
    .flashcard {
        min-height: 400px;
    }

    .fc-word { font-size: 3rem; }
    .fc-lang-tag { font-size: 0.9rem; padding: 6px 16px; }
    .fc-tap-hint { font-size: 0.9rem; }

    .flashcard-face {
        padding: 40px 32px;
    }

    .btn-fc {
        min-height: 70px;
        font-size: 1.2rem;
    }

    /* Avatar grid — more per row on TV */
    .avatar-grid {
        gap: 12px;
    }

    .avatar-option {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    /* Profile card */
    .profile-avatar-lg {
        width: 120px;
        height: 120px;
        font-size: 3.5rem;
    }

    .profile-name-lg { font-size: 2rem; }
    .profile-level   { font-size: 1rem; }

    /* Leaderboard */
    .leaderboard-item {
        padding: 14px 20px;
    }

    .lb-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.6rem;
    }

    .lb-name { font-size: 1.1rem; }
    .lb-rank { font-size: 1.1rem; width: 32px; }
    .lb-xp   { font-size: 1rem; padding: 5px 14px; }

    /* Phrase table */
    .phrase-table {
        font-size: 1rem;
    }

    .phrase-table th {
        font-size: 0.8rem;
        padding: 14px 16px;
    }

    .phrase-table td {
        padding: 12px 16px;
    }

    .inline-phrase-form {
        grid-template-columns: repeat(4, 1fr) auto;
        gap: 12px;
    }

    /* Tab bar */
    .tab-btn {
        font-size: 0.95rem;
        padding: 12px 12px;
    }

    /* TV host page */
    .tv-room-code {
        font-size: 5rem;
        letter-spacing: 0.2em;
    }

    .tv-title { font-size: 3rem; }
    .tv-sub   { font-size: 1.1rem; }
    .tv-big-btn { min-height: 70px; font-size: 1.4rem; }

    .tv-lobby-layout {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .tv-answers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .tv-question-big { font-size: 2.8rem; margin: 20px 0 32px; }

    /* Question area */
    .question-area {
        min-height: 160px;
        padding: 32px;
    }

    .question-text { font-size: 2.2rem; }
    .question-lang-tag { font-size: 0.9rem; }

    /* Progress bar */
    .progress-bar-track { height: 10px; }
    .progress-text { font-size: 1rem; }

    /* Timer bar */
    .timer-track { height: 14px; }

    /* Quiz header */
    .quiz-counter { font-size: 1.1rem; }
    .quiz-score-display { font-size: 1.1rem; }

    /* Streak banner */
    .streak-banner { padding: 18px 28px; gap: 14px; }
    .streak-fire  { font-size: 2.4rem; }
    .streak-count { font-size: 2.4rem; }
    .streak-label { font-size: 1.1rem; }

    /* Completion */
    .completion-emoji,
    .complete-emoji { font-size: 5rem; }

    .score-big { font-size: 4rem; }

    /* Section blocks */
    .section-block { margin-bottom: 24px; }

    /* Card */
    .card { padding: 24px; border-radius: 20px; }

    /* Camera upload */
    .camera-upload-area { min-height: 200px; padding: 40px; }
    .upload-icon { font-size: 3.5rem; }

    /* AI suggestion */
    .ai-suggestion-card { padding: 28px; }
    .ai-icon { font-size: 3rem; }

    /* Profile selector bar */
    .profile-selector-bar { padding: 20px; }
    .profile-pill { min-width: 88px; padding: 12px 20px; }
    .pill-avatar { font-size: 2.2rem; }
    .pill-name   { font-size: 0.85rem; }

    /* Mode toggle */
    .mode-toggle-btn { min-height: 56px; font-size: 1rem; }

    /* Bonus grid */
    .bonus-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .bonus-card   { min-height: 150px; padding: 24px 16px; border-radius: 20px; }
    .bonus-icon   { font-size: 3rem; }
    .bonus-name   { font-size: 1.05rem; }
    .bonus-desc   { font-size: 0.8rem; }

    /* Toast on TV */
    #toast {
        border-radius: var(--radius);
        font-size: 1rem;
        padding: 14px 28px;
    }

    /* Modal: always centered (no bottom sheet on TV) */
    .modal-card {
        position: static;
        border-radius: var(--radius-lg);
        padding: 36px 32px;
        max-width: 560px;
        animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-title { font-size: 1.4rem; }

    /* Top nav links */
    .nav-top-link { font-size: 1.05rem; padding: 10px 22px; }

    .brand-name { font-size: 2rem; }
    .brand-icon { font-size: 2.2rem; }

    /* Nav top profile */
    .nav-top-profile .profile-avatar { font-size: 1.8rem; }
    .nav-top-profile { font-size: 1.05rem; }

    /* ── Study Mode on TV ── */
    #page-study { max-width: 1400px; }

    .study-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }
    .study-card { padding: 14px 10px; border-radius: 16px; }
    .study-card-flag { width: 100px; height: 66px; border-radius: 8px; }
    .study-card-name { font-size: 0.95rem; }
    .study-card-capital { font-size: 0.8rem; }

    /* Study modal — LANDSCAPE two-column layout on TV */
    .study-modal { padding: 24px; }
    .study-modal-content {
        max-width: 960px;
        padding: 28px 28px;
        border-radius: 24px;
        max-height: 92vh;
    }
    .study-detail-columns {
        display: flex;
        gap: 28px;
        align-items: flex-start;
    }
    .study-detail-left {
        flex: 0 0 300px;
        position: sticky;
        top: 0;
        text-align: center;
    }
    .study-detail-right {
        flex: 1;
        min-width: 0;
    }
    .study-detail-header { margin-bottom: 12px; }
    .study-detail-flag { max-width: 260px; border-radius: 14px; }
    .study-detail-name { font-size: 1.8rem; }
    .study-detail-capital { font-size: 1.1rem; }
    .study-detail-region { font-size: 0.95rem; }
    .study-detail-section h3 { font-size: 1.1rem; }
    .study-tip { font-size: 0.95rem; padding: 14px 16px; }
    .study-fact-card { font-size: 0.95rem; padding: 14px 16px; }
    .study-culture-card { font-size: 0.95rem; padding: 14px 16px; }
    .study-trivia-list { font-size: 0.95rem; }
    .study-pill { font-size: 0.82rem; padding: 5px 14px; }
    .study-map { height: 180px; border-radius: 14px; }
    .study-nav-btn { font-size: 0.9rem; padding: 10px 18px; border-radius: 12px; }
    .study-nav-counter { font-size: 0.85rem; }
    .study-note { padding: 14px 16px; }
    .study-note-content { font-size: 0.95rem; }
    .study-modal-close { font-size: 2rem; top: 14px; right: 18px; }

    /* Bonus game options on TV */
    .bonus-options-grid { max-width: 700px; gap: 14px; }
    .bonus-option { font-size: 1.15rem; padding: 18px 16px; border-radius: 16px; }
}


/* ============================================================
   EXTRA LARGE TV (1920px+)
   Bigger fonts, more space, TV-optimized
   ============================================================ */
@media (min-width: 1920px) {

    .page {
        max-width: 1600px;
        padding: 48px 64px 48px;
    }

    body { font-size: 24px; }

    h1 { font-size: 3.6rem; }
    h2 { font-size: 2.6rem; }
    h3 { font-size: 2rem; }

    /* Flashcard */
    .flashcard { min-height: 500px; }
    .fc-word   { font-size: 3.6rem; }

    /* Answer buttons */
    .answer-btn,
    .quiz-option {
        min-height: 120px;
        font-size: 1.6rem;
        border-radius: 24px;
    }

    /* Question */
    .question-text { font-size: 2.8rem; }
    .question-area { min-height: 200px; padding: 40px; }

    /* Buttons */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        font-size: 1.4rem;
        min-height: 70px;
        padding: 16px 40px;
    }

    /* Form inputs */
    .form-input,
    .form-select {
        height: 72px;
        font-size: 1.2rem;
    }

    /* Game cards */
    .game-mode-card {
        min-height: 180px;
        padding: 32px 24px;
    }

    .gm-icon { font-size: 3.8rem; }
    .gm-name { font-size: 1.4rem; }

    /* Quick actions */
    .quick-action-btn {
        min-height: 120px;
        padding: 20px 14px;
    }

    .qa-icon  { font-size: 2.8rem; }
    .qa-label { font-size: 1rem; }

    /* Stats */
    .stat-value { font-size: 3rem; }
    .stat-icon  { font-size: 2.2rem; }

    /* Leaderboard */
    .leaderboard-item { padding: 18px 24px; }
    .lb-avatar { width: 60px; height: 60px; font-size: 2rem; }
    .lb-name   { font-size: 1.3rem; }
    .lb-xp     { font-size: 1.1rem; padding: 6px 18px; }

    /* TV host */
    .tv-room-code  { font-size: 6rem; }
    .tv-title      { font-size: 3.6rem; }
    .tv-question-big { font-size: 3.4rem; }

    /* Profile */
    .profile-avatar-lg { width: 140px; height: 140px; font-size: 4rem; }
    .profile-name-lg   { font-size: 2.2rem; }

    /* Timer */
    .timer-track { height: 16px; }
    .progress-bar-track { height: 12px; }

    /* Nav top */
    .nav-top { height: 84px; }
    .nav-top-link { font-size: 1.15rem; padding: 12px 26px; }
    .brand-name   { font-size: 2.4rem; }

    /* Streak */
    .streak-count { font-size: 3rem; }
    .streak-fire  { font-size: 2.8rem; }

    /* Completion */
    .completion-emoji,
    .complete-emoji { font-size: 6rem; }
    .score-big      { font-size: 5rem; }

    /* Section title */
    .section-title { font-size: 1.6rem; }

    /* Tab buttons */
    .tab-btn { font-size: 1.05rem; padding: 14px 14px; }

    /* Phrase table */
    .phrase-table    { font-size: 1.1rem; }
    .phrase-table th { font-size: 0.9rem; padding: 16px 20px; }
    .phrase-table td { padding: 14px 20px; }

    /* Camera */
    .camera-upload-area { min-height: 240px; }
    .upload-icon { font-size: 4rem; }

    /* Avatar grid */
    .avatar-option { width: 80px; height: 80px; font-size: 2.4rem; }

    /* Bonus */
    .bonus-card { min-height: 180px; }
    .bonus-icon { font-size: 3.6rem; }
    .bonus-name { font-size: 1.2rem; }

    /* Toast */
    #toast { font-size: 1.1rem; padding: 16px 32px; }

    /* ── Study Mode on 1920px+ TV ── */
    #page-study { max-width: 1800px; }

    .study-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 20px;
    }
    .study-card {
        padding: 18px 14px;
        border-radius: 20px;
    }
    .study-card-flag {
        width: 130px;
        height: 86px;
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        margin-bottom: 10px;
    }
    .study-card-name { font-size: 1.1rem; margin-bottom: 4px; }
    .study-card-capital { font-size: 0.9rem; }

    /* Study modal — wider landscape on big TV */
    .study-modal { padding: 32px; }
    .study-modal-content {
        max-width: 1200px;
        padding: 36px 36px;
        border-radius: 28px;
        max-height: 92vh;
    }
    .study-detail-columns { gap: 36px; }
    .study-detail-left { flex: 0 0 380px; }
    .study-detail-flag {
        max-width: 340px;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .study-detail-name { font-size: 2.2rem; }
    .study-detail-capital { font-size: 1.4rem; }
    .study-detail-region { font-size: 1.1rem; }
    .study-info-pills { gap: 10px; margin-top: 12px; }
    .study-pill { font-size: 0.95rem; padding: 7px 18px; border-radius: 24px; }
    .study-detail-section { margin-top: 20px; padding-top: 16px; }
    .study-detail-section h3 { font-size: 1.35rem; margin-bottom: 12px; }
    .study-tip { font-size: 1.1rem; padding: 18px 20px; border-radius: 14px; line-height: 1.6; }
    .tip-label { font-size: 1.1rem; }
    .study-fact-card { font-size: 1.1rem; padding: 18px 20px; border-radius: 0 14px 14px 0; border-left-width: 4px; line-height: 1.6; margin-bottom: 10px; }
    .study-trivia-list { font-size: 1.1rem; line-height: 2; }
    .study-culture-card { font-size: 1.1rem; padding: 18px 20px; border-radius: 14px; line-height: 1.6; }
    .study-map { height: 220px; border-radius: 16px; }
    .study-nav-bar { margin-bottom: 16px; }
    .study-nav-btn { font-size: 1.05rem; padding: 12px 22px; border-radius: 14px; }
    .study-nav-counter { font-size: 0.95rem; }
    .study-modal-close { font-size: 2.4rem; top: 16px; right: 22px; }
    .study-note { padding: 18px 20px; border-radius: 14px; margin-bottom: 10px; }
    .study-note-header { font-size: 0.9rem; }
    .study-note-type { font-size: 1.15rem; }
    .study-note-content { font-size: 1.1rem; line-height: 1.6; }

    /* Bonus game options on big TV */
    .bonus-options-grid { max-width: 800px; gap: 16px; }
    .bonus-option { font-size: 1.3rem; padding: 22px 20px; border-radius: 18px; min-height: 70px; }

    /* Flag/capitals game answer buttons on TV */
    .flags-answer-btn { font-size: 1.3rem !important; padding: 20px 16px !important; }
    .cap-btn { font-size: 1.3rem !important; min-height: 80px !important; border-radius: 20px !important; }
}


/* ============================================================
   ULTRA WIDE (2560px+ — big conference screen, projector)
   ============================================================ */
@media (min-width: 2560px) {
    .page {
        max-width: 2000px;
        padding: 60px 80px;
    }

    body { font-size: 28px; }

    h1 { font-size: 4rem; }
    h2 { font-size: 3rem; }

    .flashcard { min-height: 600px; }
    .fc-word   { font-size: 4.2rem; }

    .answer-btn,
    .quiz-option {
        min-height: 140px;
        font-size: 1.8rem;
    }

    .question-text { font-size: 3.2rem; }
    .tv-room-code  { font-size: 7rem; }

    /* Study on ultra-wide */
    #page-study { max-width: 2200px; }
    .study-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
    .study-card-flag { width: 160px; height: 106px; }
    .study-card-name { font-size: 1.25rem; }
    .study-card-capital { font-size: 1rem; }
    .study-modal-content { max-width: 1400px; padding: 44px 48px; }
    .study-detail-left { flex: 0 0 440px; }
    .study-detail-columns { gap: 44px; }
    .study-detail-flag { max-width: 400px; }
    .study-detail-name { font-size: 2.6rem; }
    .study-detail-capital { font-size: 1.6rem; }
    .study-detail-section h3 { font-size: 1.6rem; }
    .study-tip, .study-fact-card, .study-culture-card { font-size: 1.25rem; padding: 22px 24px; }
    .study-map { height: 260px; }
}


/* ============================================================
   PRINT — hide nav, show only content
   ============================================================ */
@media print {
    .nav-bottom,
    .nav-top,
    .app-header,
    #toast,
    #modal-overlay,
    #confetti-container,
    .btn-back,
    .flashcard-actions,
    .quiz-header,
    .timer-track {
        display: none !important;
    }

    .page {
        padding: 20px !important;
        max-width: 100% !important;
        display: block !important;
    }

    .main-content {
        padding-top: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .phrase-table,
    .phrase-table th,
    .phrase-table td {
        border: 1px solid #ccc !important;
        color: black !important;
    }
}