/* Travel phrasebook (/travel and /chs/travel) — hub cards, phrase rows, the reply block,
   the quiz, and the print rules the printable phrasebook tool relies on. */

/* ---------- Shared ---------- */
.tv-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tv-badge {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ---------- Hub cards ---------- */
.tv-card:hover {
    transform: translateY(-2px);
    transition: transform 0.15s ease;
}

.tv-card .tv-card-icon {
    font-size: 1.6rem;
    opacity: 0.85;
}

/* ---------- Phrase rows ---------- */
.tv-phrase {
    border-left: 3px solid var(--bs-primary, #0d6efd);
    padding: 0.55rem 0 0.55rem 0.85rem;
}

.tv-phrase + .tv-phrase {
    margin-top: 0.9rem;
}

.tv-zh {
    font-size: 1.45rem;
    line-height: 1.45;
}

.tv-py {
    font-size: 1rem;
    opacity: 0.85;
}

.tv-en {
    font-size: 0.95rem;
    opacity: 0.78;
}

.tv-note {
    opacity: 0.7;
    margin-top: 0.15rem;
}

.tv-audio-btn {
    min-width: 2.4rem;
}

/* ---------- "What they'll say back to you" ----------
   Deliberately a different colour from the phrase list: the two blocks do opposite jobs
   (recognise vs. produce) and should not read as one long list. */
.tv-replies .card-header {
    background: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
}

.tv-reply {
    border-left: 3px solid var(--bs-warning, #ffc107);
    padding: 0.55rem 0 0.55rem 0.85rem;
}

.tv-reply + .tv-reply {
    margin-top: 0.9rem;
}

/* ---------- Mistakes table ---------- */
.tv-mistake {
    font-size: 1.05rem;
}

/* ---------- Quiz ---------- */
.tv-quiz-prompt {
    font-size: 1.3rem;
    line-height: 1.5;
}

.tv-quiz-option {
    font-size: 1.15rem;
    padding: 0.6rem 0.9rem;
}

.tv-quiz-feedback {
    min-height: 1.4rem;
}

/* ---------- Travel arcade games (/games/travel-sprint, /games/menu-decoder) ---------- */
.ta-prompt {
    font-size: 1.9rem;
    line-height: 1.35;
    font-weight: 600;
}

.ta-option {
    font-size: 1.15rem;
    padding: 0.65rem 0.9rem;
}

.ta-lives {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

.ta-reveal-answer {
    font-size: 1.35rem;
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .ta-prompt {
        font-size: 1.5rem;
    }
}

/* ---------- Bargaining Simulator (/games/bargaining) ---------- */
.bg-stall {
    font-size: 1.15rem;
}

.bg-price {
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bg-seller-line {
    font-size: 1.35rem;
    line-height: 1.45;
}

/* ---------- Roleplay games (/games/airport-roleplay, /chs/English/BorderRoleplay) ---------- */
.rp-question {
    font-size: 1.6rem;
    line-height: 1.45;
}

.rp-mic {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-size: 1.6rem;
}

.rp-mic.listening {
    animation: rp-pulse 1.2s ease-in-out infinite;
}

@keyframes rp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .rp-mic.listening {
        animation: none;
    }
}

/* ---------- Printable phrasebook (/tools/phrasebook) ---------- */
.pb-card {
    break-inside: avoid;
    page-break-inside: avoid;
}

.pb-zh {
    font-size: 1.5rem;
    line-height: 1.4;
}

.pb-py {
    font-size: 0.95rem;
    opacity: 0.85;
}

.pb-en {
    font-size: 0.9rem;
    opacity: 0.75;
}

@media print {
    .pb-no-print,
    header,
    footer,
    nav,
    .ad-container,
    .ad-placeholder {
        display: none !important;
    }

    .pb-sheet {
        box-shadow: none !important;
        border: 0 !important;
    }

    .pb-card {
        border: 1px solid #999 !important;
    }

    /* Ink saver: the screen theme is irrelevant on paper. */
    body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* ---------- Address card (/tools/address-card) ---------- */
.ac-card {
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.6rem;
    padding: 1.25rem;
    text-align: center;
}

.ac-destination {
    font-size: 2.4rem;
    line-height: 1.35;
    font-weight: 700;
    word-break: break-word;
}

.ac-line {
    font-size: 1.5rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .ac-destination {
        font-size: 1.9rem;
    }

    .ac-line {
        font-size: 1.25rem;
    }
}

/* Fullscreen "show the driver" mode: white background and black text whatever the theme,
   because it has to be readable at arm's length through a car window at night. */
.ac-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #fff;
    color: #000;
    padding: 1.5rem;
    overflow-y: auto;
}

.ac-fullscreen .ac-destination {
    font-size: 3rem;
}

.ac-fullscreen .ac-line {
    font-size: 1.8rem;
}