/* ═══════════════════════════════════════════════════════════════════════════
   ENGLISH HITS — SONG JOURNEY
   Estilos da jornada em 4 etapas (Cantar → Ouvir → Falar → Teste).
   Usa as variáveis globais definidas em styles.css (:root).
   ═══════════════════════════════════════════════════════════════════════════ */

.journey-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 120px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Bloco fixo: topo + etapas + player ficam sempre visíveis */
.journey-fixed {
    position: sticky;
    top: 0;
    z-index: 150;
    background: var(--background-color);
    padding-top: 8px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ── Top bar ── */
.journey-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0 8px;
}
.j-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    flex: 0 0 auto;
    transition: var(--transition);
}
.j-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.j-icon-btn.fav-active { color: #e50914; border-color: rgba(229, 9, 20, 0.5); }
.journey-songmeta { flex: 1; min-width: 0; }
.j-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rating-badge {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    cursor: help;
}
.rating-l  { background: #00a651; }
.rating-10 { background: #0095da; }
.rating-12 { background: #f8c300; color: #1a1a1a; }
.rating-14 { background: #e67824; }
.rating-16 { background: #db2827; }
.rating-18 { background: #1d1815; border: 1px solid rgba(255,255,255,0.35); }
.journey-songmeta .j-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.journey-songmeta .j-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    padding-bottom: 1px;
    user-select: none;
}
.journey-songmeta .j-sub:hover { color: var(--text-color); }

/* ── Stepper ── */
.journey-stepper { padding: 0 0 8px; }
.stepper-track {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.stepper-seg {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.stepper-seg span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), #a45cff);
    transition: width 0.5s ease;
}
.stepper-seg.done span { width: 100%; }
.stepper-seg.active span { width: 55%; }
.stepper-labels {
    display: flex;
    font-size: 10px;
    color: var(--text-secondary);
}
.stepper-labels b {
    flex: 1;
    text-align: center;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}
.stepper-labels b i { font-size: 13px; }
.stepper-labels b.on { color: var(--text-color); }
.stepper-labels b.ok { color: #22c55e; }

/* ── Player extras ── */
.journey-wrapper .video-container { margin-bottom: 0; }
/* Camada que bloqueia cliques diretos no player do YouTube durante as
   etapas de exercício (Ouvir/Falar/Teste), impedindo o usuário de pausar,
   avançar ou voltar o vídeo para pular as questões. Desativada na etapa
   Cantar, onde a reprodução é controlada pelos botões próprios. */
.player-click-guard {
    position: absolute; inset: 0; z-index: 5;
    display: none; background: transparent;
}
body.game-mode .player-click-guard { display: block; }
body.sing-mode .player-click-guard { display: none; }
/* ── Pular abertura ── */
.skip-intro-btn {
    position: absolute;
    right: 10px;
    bottom: 48px;
    z-index: 7;
    display: none;
    align-items: center;
    gap: 7px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 99px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.skip-intro-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.skip-intro-btn.show { display: inline-flex; }

/* ── Stage area ── */
.stage-area {
    flex: 1;
    padding-top: 12px;
    animation: j-fade 0.35s ease;
}
.stage-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.stage-hint {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.35;
    flex: 1;
    min-width: 200px;
}
@keyframes j-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.stage-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 99px;
    color: #fff;
}
.chip-sing   { background: linear-gradient(90deg, var(--primary-color), #a45cff); }
.chip-listen { background: linear-gradient(90deg, #0077b6, var(--accent-color)); }
.chip-speak  { background: linear-gradient(90deg, #b45309, #f9a825); }
.chip-quiz   { background: linear-gradient(90deg, #15803d, #22c55e); }
.stage-title {
    font-size: 21px;
    font-weight: 800;
    margin: 10px 0 4px;
    letter-spacing: -0.3px;
    color: var(--text-color);
}
.stage-sub {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ── Modal de nível (escolhido ao iniciar a música) ── */
.level-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: j-fade 0.25s ease;
}
.level-modal-card {
    width: min(420px, 100%);
    background: #17171f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 22px 18px 18px;
    text-align: center;
}
.level-modal-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 4px;
}
.level-modal-card .lm-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.45;
}
.level-modal-card .level-pills { margin-bottom: 16px; flex-direction: column; }
.level-modal-card .level-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    text-align: left;
    font-size: 14px;
}
.level-modal-card .level-pill small { font-size: 11.5px; }
.lm-start {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--primary-color), #a45cff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.lm-start:hover { filter: brightness(1.08); }

.level-pills { display: flex; gap: 8px; }
.level-pill {
    flex: 1;
    padding: 9px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.level-pill small { display: block; font-weight: 400; font-size: 10px; opacity: 0.8; }
.level-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ── Sing: lyrics ── */
.j-lyrics {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.j-line {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: rgba(255, 255, 255, 0.45);
    padding: 5px 2px;
    text-align: center;
    transition: opacity 0.2s ease;
}
/* Frase atual: mais encorpada e mais clara que o restante — sem efeitos */
.j-line.cur {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #ffffff;
}
.j-line.up-1 { opacity: 0.8; }
.j-line.up-2 { opacity: 0.55; }
.j-line.up-3 { opacity: 0.35; }
.j-line.up-4 { opacity: 0.2; }
.j-word { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.j-word:hover { background: rgba(0, 191, 255, 0.22); }
.translate-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--accent-color);
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.25);
    padding: 4px 11px;
    border-radius: 99px;
    margin-top: 14px;
}

/* ── Translate popup ── */
.translate-pop {
    position: fixed;
    z-index: 300;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    width: min(340px, calc(100vw - 32px));
    background: #1d1d2a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
    animation: j-fade 0.2s ease;
}
.translate-pop .tp-word {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tp-speak {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 191, 255, 0.18);
    color: var(--accent-color);
    cursor: pointer;
    font-size: 13px;
}
.translate-pop .tp-trans {
    font-size: 16px;
    color: var(--text-color);
    margin-top: 6px;
    min-height: 22px;
}
.translate-pop .tp-loading { color: var(--text-secondary); font-size: 13px; }
.translate-pop .tp-line {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    font-size: 13px;
    line-height: 1.5;
}
.tp-line .tp-line-en { color: var(--text-secondary); display: block; }
.tp-line .tp-line-pt { color: var(--text-color); display: block; font-weight: 600; }
.tp-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
}

/* ── Lacuna inline na letra (todas as etapas de exercício) ── */
.j-gap-blank {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    border-bottom: 3px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: 800;
    letter-spacing: 1px;
}
.j-line.cur .j-gap-blank { min-width: 80px; }
.j-gap-blank.right { border-color: #22c55e; color: #22c55e; }
.j-gap-blank.wrong { border-color: #ef4444; color: #ef4444; }
.gap-panel { margin-top: 14px; }

/* ── Gap question (Listen / Quiz) ── */
.gap-context {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-bottom: 6px;
    min-height: 18px;
    letter-spacing: -0.2px;
}
.gap-line {
    font-size: 21px;
    line-height: 1.45;
    text-align: center;
    margin-bottom: 14px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--text-color);
    text-shadow: 0 0 22px rgba(138, 43, 226, 0.25);
}
.gap-blank {
    display: inline-block;
    min-width: 88px;
    border-bottom: 3px solid var(--accent-color);
    color: var(--accent-color);
    margin: 0 4px;
    font-weight: 800;
    text-align: center;
}
.gap-blank.filled { border-color: #22c55e; color: #22c55e; }
.gap-blank.missed { border-color: #ef4444; color: #ef4444; }
.j-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.j-choice {
    padding: 15px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--card-background);
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}
.j-choice:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}
.j-choice.right {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    color: #bbf7d0;
}
.j-choice.wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
}
.j-choice:disabled { cursor: default; transform: none; }
.gap-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.gap-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    border-radius: 99px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.gap-tool-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.gap-progress {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: right;
    margin-bottom: 8px;
}
.waiting-banner {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 16px 10px;
}
.waiting-banner i { color: var(--accent-color); margin-right: 8px; }

/* ── Speak stage ── */
.speak-target { text-align: center; margin-bottom: 4px; }
.speak-target .st-label { font-size: 13px; color: var(--text-secondary); }
.speak-target .st-word {
    font-size: 32px;
    font-weight: 800;
    color: #f9a825;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.mic-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
}
.mic-btn {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #b45309, #f9a825);
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(249, 168, 37, 0.3);
    transition: transform 0.2s ease;
}
.mic-btn:hover { transform: scale(1.05); }
.mic-btn.rec::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 3px solid #f9a825;
    animation: j-ring 1.2s infinite;
}
@keyframes j-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}
.mic-status {
    font-size: 14px;
    color: var(--text-secondary);
    min-height: 20px;
    text-align: center;
}
.mic-status.good { color: #22c55e; font-weight: 600; }
.mic-status.bad { color: #fca5a5; }
.heard-box {
    font-size: 14px;
    color: var(--text-color);
    background: var(--card-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 9px 16px;
}
.speak-unsupported {
    background: rgba(249, 168, 37, 0.1);
    border: 1px solid rgba(249, 168, 37, 0.35);
    border-radius: var(--border-radius);
    color: #fcd34d;
    font-size: 13px;
    padding: 12px 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* ── Completion ── */
.j-complete { text-align: center; padding-top: 8px; animation: j-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes j-pop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: none; }
}
.j-trophy {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    box-shadow: 0 12px 40px rgba(138, 43, 226, 0.4);
}
.j-complete h2 { font-size: 24px; font-weight: 800; color: var(--text-color); margin-bottom: 5px; }
.j-complete .jc-sub { color: var(--text-secondary); margin-bottom: 20px; font-size: 14px; }
.score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}
.score-cell {
    background: var(--card-background);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 6px;
}
.score-cell .n { font-size: 22px; font-weight: 800; color: var(--text-color); }
.score-cell .l { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.score-cell.gold .n { color: #f9a825; }
.score-cell.green .n { color: #22c55e; }
.score-cell.violet .n { color: #a45cff; }

/* ── Bottom CTA ── */
.journey-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    box-sizing: border-box;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--background-color) 32%);
    display: flex;
    justify-content: center;
}
.journey-cta-inner { box-sizing: border-box; }
.journey-cta-inner {
    width: 100%;
    max-width: 728px;
    display: flex;
    gap: 10px;
}
.j-btn {
    flex: 1;
    padding: 15px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: var(--transition);
}
.j-btn-primary {
    background: linear-gradient(90deg, var(--primary-color), #a45cff);
    color: #fff;
    box-shadow: 0 8px 24px rgba(138, 43, 226, 0.35);
}
.j-btn-primary:hover { filter: brightness(1.08); }
.j-btn-primary.pulse { animation: j-cta-pulse 1.6s infinite; }
@keyframes j-cta-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(138, 43, 226, 0.35); }
    50% { box-shadow: 0 8px 34px rgba(138, 43, 226, 0.7); }
}
.j-btn-ghost {
    flex: 0 0 auto;
    width: 54px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-color);
}
.j-btn-ghost:disabled { opacity: 0.35; cursor: default; }

/* ── Desktop refinements ── */
@media (min-width: 769px) {
    .journey-wrapper { padding-top: 22px; }
    .j-lyrics { max-height: 50vh; }
    .j-choices { grid-template-columns: repeat(4, 1fr); }
    .stage-title { font-size: 23px; }
}
@media (max-width: 768px) {
    .journey-fixed { padding-top: 6px; }
    /* botão voltar sai da topbar e vai sobreposto na thumb (canto sup. esquerdo) */
    #journey-back { display: none; }
    .hub-thumb .hub-thumb-back { display: inline-flex; }
    /* topbar vira só a área de texto + classificação, na largura toda */
    .journey-topbar { gap: 0; }
    .journey-songmeta { width: 100%; }
    /* título: marquee quando transbordar (classe .marquee adicionada via JS) */
    .journey-songmeta .j-title-row { overflow: hidden; }
    .journey-songmeta .j-title {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
    .j-title-row.marquee {
        position: relative;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .j-title-row.marquee .j-title {
        display: inline-block;
        padding-left: 100%;
        animation: jtitle-marquee var(--marquee-dur, 12s) linear infinite;
    }
    @keyframes jtitle-marquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    .stepper-labels b i { display: none; }
    .stage-hint { font-size: 12px; min-width: 150px; }
    .j-line { font-size: 15px; padding: 4px 2px; }
    .j-line.cur { font-size: 20px; }
    .gap-line { font-size: 19px; }
    .skip-intro-btn { bottom: 44px; padding: 7px 12px; font-size: 12px; }
    .mic-btn { width: 80px; height: 80px; font-size: 28px; }
    .speak-target .st-word { font-size: 27px; }
    /* Etapas Ouvir/Falar: a pergunta (gap-host) vem ANTES das letras no DOM,
       então fica colada logo abaixo do HUD. */
    #gap-host { margin-top: 4px; }
    #gap-host:empty { display: none; }
    .gap-panel { margin-top: 0; }
}

@media (max-width: 380px) {
    .j-choices { grid-template-columns: 1fr 1fr; }
    .gap-line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .stage-area, .j-complete, .mic-btn.rec::after, .j-btn-primary.pulse { animation: none; }
}

/* ═══ Prova final (etapa Teste) ═══════════════════════════════════════════ */
.exam { max-width: 560px; margin: 0 auto; padding: 8px 4px 16px; }
.exam-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.exam-badge {
    background: linear-gradient(135deg, #8a2be2, #5b1ba0);
    color: #fff; font-weight: 800; font-size: 13px;
    padding: 5px 12px; border-radius: 999px; letter-spacing: 0.3px;
}
.exam-badge i { margin-right: 6px; }
.exam-count { color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 700; }
.exam-bar {
    height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1);
    overflow: hidden; margin-bottom: 18px;
}
.exam-bar-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #8a2be2, #00bfff);
    transition: width 0.4s ease;
}
.exam-q {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(138,43,226,0.35);
    border-radius: 16px; padding: 20px 18px;
    animation: j-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.exam-kind {
    color: #00bfff; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px;
    text-align: center;
}
.exam-prompt {
    color: #fff; font-size: 19px; font-weight: 700; line-height: 1.45;
    text-align: center; margin-bottom: 16px;
}
.exam-word { color: #8a2be2; background: rgba(138,43,226,0.15); padding: 1px 7px; border-radius: 6px; }
.exam-blank {
    color: #00bfff; border-bottom: 2px dashed #00bfff; padding: 0 4px;
}
.exam-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exam-choice { width: 100%; }
@media (max-width: 520px) { .exam-options { grid-template-columns: 1fr; } }

.exam-result { text-align: center; padding: 26px 14px; animation: j-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.exam-grade {
    font-size: 56px; font-weight: 900; letter-spacing: -2px;
    background: linear-gradient(135deg, #8a2be2, #00bfff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.exam-result.fail .exam-grade { background: linear-gradient(135deg, #f59e0b, #ef4444); -webkit-background-clip: text; background-clip: text; }
.exam-verdict { color: #fff; font-size: 17px; font-weight: 800; margin: 8px 0 4px; }
.exam-result.pass .exam-verdict i { color: #fbbf24; }
.exam-result.fail .exam-verdict i { color: #f59e0b; }
.exam-detail { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 14px; }

/* ═══ Gamificação: pontos, estrelas, etapa concluída ═════════════════════ */
.pts-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(138,43,226,0.18);
    border: 1px solid rgba(138,43,226,0.45);
    color: #d9b8ff; font-weight: 800; font-size: 12.5px;
    padding: 3px 10px; border-radius: 999px; margin-right: 8px;
    vertical-align: middle;
}
.pts-pill i { color: #fbbf24; font-size: 11px; }
.pts-pill.bump { animation: pts-bump 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes pts-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); background: rgba(251,191,36,0.3); }
    100% { transform: scale(1); }
}

.j-stars { display: inline-flex; gap: 6px; font-size: 22px; margin: 6px 0; }
.j-stars i { color: rgba(255,255,255,0.18); }
.j-stars i.lit { color: #fbbf24; text-shadow: 0 0 14px rgba(251,191,36,0.55); }

.lab-stars {
    display: block; color: #fbbf24; font-size: 10px;
    letter-spacing: 1px; line-height: 1; margin-top: 2px;
}

.stage-clear {
    text-align: center; padding: 22px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 16px; max-width: 420px; margin: 10px auto;
    animation: j-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.stage-clear .sc-title { color: #22c55e; font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.stage-clear .sc-title i { margin-right: 6px; }
.stage-clear .sc-pts {
    font-size: 30px; font-weight: 900; letter-spacing: -1px;
    background: linear-gradient(135deg, #8a2be2, #00bfff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stage-clear .sc-acc { color: rgba(255,255,255,0.6); font-size: 13.5px; margin-top: 2px; }

/* ═══ HUB da música (etapas independentes) ═══════════════════════════════ */
body.hub-mode .journey-stepper,
body.hub-mode .journey-player,
body.hub-mode .video-container,
body.hub-mode #custom-player-controls,
body.hub-mode .journey-cta { display: none !important; }

.hub { max-width: 640px; margin: 0 auto; padding-bottom: 24px; }
.hub-thumb {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 16/9; background: #1a1a1a center/cover no-repeat;
    border: 1px solid rgba(255,255,255,0.08);
}
.hub-thumb-grad {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.85) 100%);
}
/* Barra de progresso integrada na base da thumb: pontos conquistados / 400 */
.hub-progress {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    height: 7px;
    background: rgba(0,0,0,0.45);
    overflow: hidden;
}
.hub-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0095da, #00bfff);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px rgba(0,191,255,0.7);
    transition: width 0.7s cubic-bezier(.4,1.1,.4,1);
}
/* 100%: brilho contínuo de "algo precioso" — NÃO some, fica sempre cheia */
.hub-progress.full { height: 9px; }
.hub-progress.full .hub-progress-fill {
    border-radius: 0;
    background: linear-gradient(90deg, #00bfff, #9fefff, #00bfff);
    background-size: 200% 100%;
    animation: hub-prog-glow 1.6s ease-in-out infinite, hub-prog-shine 2.4s linear infinite;
}
@keyframes hub-prog-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(0,191,255,0.7), 0 0 2px rgba(255,255,255,0.5); }
    50%      { box-shadow: 0 0 20px rgba(0,191,255,1), 0 0 8px rgba(159,239,255,0.9); }
}
@keyframes hub-prog-shine {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-progress.full .hub-progress-fill {
        animation: none;
        box-shadow: 0 0 14px rgba(0,191,255,0.9);
    }
}
.hub-thumb-actions {
    position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 2;
}
.hub-thumb-back {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: none; /* só no mobile */
}
.ht-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2); color: #fff;
    font-size: 15px; cursor: pointer; transition: transform 0.15s, background 0.15s;
    padding: 0; line-height: 1;
}
.ht-btn:hover { transform: scale(1.08); background: rgba(138,43,226,0.7); }
.ht-btn .fa-heart.fas, .ht-btn .fas.fa-heart { color: #ef4444; }

.hub-stages { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hub-stage {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px; padding: 12px 14px;
    transition: border-color 0.15s, transform 0.15s;
}
.hub-stage:hover { border-color: rgba(138,43,226,0.5); transform: translateY(-1px); }
.hub-stage.done { border-color: rgba(34,197,94,0.35); }
.hs-icon {
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; background: rgba(138,43,226,0.35);
}
.hs-icon.chip-sing { background: linear-gradient(135deg,#8a2be2,#5b1ba0); }
.hs-icon.chip-listen { background: linear-gradient(135deg,#00bfff,#0077b6); }
.hs-icon.chip-speak { background: linear-gradient(135deg,#f59e0b,#d97706); }
.hs-icon.chip-quiz { background: linear-gradient(135deg,#22c55e,#15803d); }
.hs-info { flex: 1; min-width: 0; }
.hs-info b { color: #fff; font-size: 15.5px; display: block; }
.hs-info small { color: rgba(255,255,255,0.55); font-size: 12.5px; line-height: 1.35; display: block; }
.hs-best { color: #00bfff; font-weight: 800; }
.hs-info small { overflow: hidden; text-overflow: ellipsis; }
.hs-play { white-space: nowrap; padding: 8px 14px; font-size: 13px; }

.sc-score { color: #fff; font-size: 16px; margin: 4px 0 2px; }
.sc-score b { color: #00bfff; font-size: 22px; }
.sc-record { color: #fbbf24; font-weight: 800; font-size: 13.5px; margin-top: 8px; }
.sc-record.dim { color: rgba(255,255,255,0.45); font-weight: 600; }
.sc-record i { margin-right: 5px; }

/* checkbox de salvar nível */
.lm-savelevel {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: rgba(255,255,255,0.75); font-size: 13.5px; margin: 12px 0 4px;
    cursor: pointer; user-select: none;
}
.lm-savelevel input { accent-color: #8a2be2; width: 16px; height: 16px; }

/* botão salvar card no popup de tradução */
.tp-save {
    display: block; width: 100%; margin-top: 10px;
    background: rgba(138,43,226,0.18); border: 1px solid rgba(138,43,226,0.5);
    color: #d9b8ff; font-weight: 700; font-size: 13px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.tp-save.saved { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.5); color: #86efac; }
.tp-save i { margin-right: 6px; }

/* modal de cards */
.cards-card { max-width: 420px; width: 92vw; }
.cards-count {
    background: #8a2be2; color: #fff; font-size: 12px; font-weight: 800;
    border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-left: 6px;
}
.cards-list { max-height: 48vh; overflow-y: auto; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.card-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px; padding: 8px 10px;
}
.card-say, .card-del {
    background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 14px; cursor: pointer; padding: 6px;
}
.card-say:hover { color: #00bfff; } .card-del:hover { color: #ef4444; }
.card-texts { flex: 1; min-width: 0; text-align: left; }
.card-texts b { color: #fff; font-size: 14.5px; display: block; }
.card-texts small { color: rgba(255,255,255,0.55); font-size: 12.5px; }
.cards-empty { color: rgba(255,255,255,0.5); font-size: 13.5px; padding: 18px 8px; line-height: 1.5; }

/* ═══ MODO JOGO (etapas Ouvir/Falar/Teste) — imersivo estilo app ═════════ */
body.game-mode .journey-topbar,
body.game-mode .journey-stepper { display: none !important; }
body.game-mode .journey-cta { display: none !important; }
body.game-mode.stage-finished .journey-cta { display: flex !important; }
body.game-mode .stage-head { display: none; }

/* HUD: contadores + progresso */
#game-hud { margin-bottom: 10px; }
.hud-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px 8px;
}
.hud-stat {
    flex: 1; text-align: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 6px 4px;
}
.hud-stat small {
    display: block; color: rgba(255,255,255,0.55);
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.hud-stat b { color: #fff; font-size: 17px; font-weight: 900; letter-spacing: 0.5px; }
.hud-stat.ok b { color: #22c55e; }
.hud-stat.bad b { color: #ef4444; }
.hud-exit {
    flex: 0 0 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7); font-size: 14px; cursor: pointer;
}
.hud-exit:hover { background: rgba(239,68,68,0.25); color: #fff; }
.hud-bar {
    height: 5px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden;
}
.hud-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #00bfff);
    transition: width 0.35s ease;
}

/* Opções coloridas estilo game (2 colunas) */
.j-choices {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.j-choices .j-choice, .exam-options .exam-choice {
    border: none; border-radius: 14px;
    color: #fff; font-weight: 800; font-size: 16px;
    padding: 16px 10px; cursor: pointer;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: transform 0.12s, filter 0.12s;
}
.j-choices .j-choice:active, .exam-options .exam-choice:active { transform: scale(0.97); }
.j-choices .j-choice:nth-child(1), .exam-options .exam-choice:nth-child(1) { background: linear-gradient(135deg,#ef4444,#dc2626); }
.j-choices .j-choice:nth-child(2), .exam-options .exam-choice:nth-child(2) { background: linear-gradient(135deg,#22c55e,#16a34a); }
.j-choices .j-choice:nth-child(3), .exam-options .exam-choice:nth-child(3) { background: linear-gradient(135deg,#f59e0b,#d97706); }
.j-choices .j-choice:nth-child(4), .exam-options .exam-choice:nth-child(4) { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.j-choices .j-choice:disabled, .exam-options .exam-choice:disabled { filter: saturate(0.35) brightness(0.7); }
.j-choices .j-choice.right, .exam-options .exam-choice.right {
    filter: none !important;
    background: linear-gradient(135deg,#22c55e,#15803d) !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.4);
}
.j-choices .j-choice.wrong, .exam-options .exam-choice.wrong {
    filter: none !important;
    background: linear-gradient(135deg,#ef4444,#b91c1c) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.4);
}
@keyframes j-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Mobile: tela cheia de verdade */
@media (max-width: 640px) {
    body.game-mode .journey-wrapper { padding: 0; }
    body.game-mode .journey-fixed { padding: 0 0 6px; }
    body.game-mode .video-container {
        border-radius: 0; margin: 0 -0px; border-left: none; border-right: none;
    }
    body.game-mode #game-hud { padding: 0 10px; }
    body.game-mode .stage-area { padding: 0 12px 28px; }
    body.game-mode .j-line { font-size: 17px; }
    body.game-mode .j-line.cur { font-size: 23px; }
    body.game-mode .gap-panel {
        position: static;
        background: rgba(12,10,24,0.96);
        border: 1px solid rgba(138,43,226,0.35);
        border-radius: 18px;
        padding: 14px;
        margin: 8px 0 0;
    }
    .j-choices .j-choice { font-size: 17px; padding: 18px 10px; }
}

/* ═══ Animações da jornada ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

/* hub: entrada em cascata, estilo app profissional ───────────────────────
   A thumb entra primeiro (fade + leve zoom-out), depois a faixa de meta,
   e então cada card de etapa surge em sequência: sobe, faz fade e dá um
   leve "settle" (curva com overshoot sutil), um após o outro de cima
   para baixo, como uma escada sendo montada. */
.hub-first-open .hub-thumb {
    animation: hub-thumb-in 0.55s cubic-bezier(0.22,0.8,0.28,1) both;
}
.hub-first-open .hub-meta {
    animation: hub-rise 0.5s cubic-bezier(0.22,0.9,0.3,1) both;
    animation-delay: 0.14s;
}
.hub-first-open .hub-stage {
    animation: hub-stage-in 0.62s cubic-bezier(0.18,0.85,0.25,1.08) both;
    transform-origin: center top;
    will-change: transform, opacity;
}
.hub-first-open .hub-stage:nth-child(1) { animation-delay: 0.24s; }
.hub-first-open .hub-stage:nth-child(2) { animation-delay: 0.36s; }
.hub-first-open .hub-stage:nth-child(3) { animation-delay: 0.48s; }
.hub-first-open .hub-stage:nth-child(4) { animation-delay: 0.60s; }

@keyframes hub-thumb-in {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hub-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hub-stage-in {
    0%   { opacity: 0; transform: translateY(22px) scale(0.96); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* brilho que varre cada card no momento em que ele assenta — toque premium */
.hub-stage { position: relative; overflow: hidden; }
.hub-first-open .hub-stage::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: hub-stage-sheen 0.7s ease-out both;
}
.hub-first-open .hub-stage:nth-child(1)::before { animation-delay: 0.42s; }
.hub-first-open .hub-stage:nth-child(2)::before { animation-delay: 0.54s; }
.hub-first-open .hub-stage:nth-child(3)::before { animation-delay: 0.66s; }
.hub-first-open .hub-stage:nth-child(4)::before { animation-delay: 0.78s; }
@keyframes hub-stage-sheen {
    from { left: -60%; opacity: 0; }
    35%  { opacity: 1; }
    to   { left: 160%; opacity: 0; }
}

@keyframes eh-fade { from { opacity: 0; } }

/* frase atual do karaokê pulsa de leve ao trocar */
.j-line.cur { animation: line-in 0.3s cubic-bezier(0.2,0.9,0.3,1.3); }
@keyframes line-in { from { transform: scale(0.96); opacity: 0.6; } }

/* HUD: barra com brilho deslizante */
.hud-bar-fill { position: relative; overflow: hidden; }
.hud-bar-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: hud-shimmer 1.8s linear infinite;
}
@keyframes hud-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* botões principais com mola */
.j-btn { transition: transform 0.16s cubic-bezier(0.2,0.9,0.3,1.4), filter 0.16s; }
.j-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.j-btn:active { transform: scale(0.96); }

/* prova: nota cresce */
.exam-grade { animation: grade-pop 0.7s cubic-bezier(0.2,0.9,0.3,1.4) both; }
@keyframes grade-pop { from { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.12); } }

/* estrelas acendem em sequência */
.j-stars i.lit { animation: star-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.6) both; }
.j-stars i.lit:nth-child(1) { animation-delay: 0.1s; }
.j-stars i.lit:nth-child(2) { animation-delay: 0.3s; }
.j-stars i.lit:nth-child(3) { animation-delay: 0.5s; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.35) rotate(8deg); } to { transform: scale(1); } }

/* confete de celebração */
.eh-confetti {
    position: fixed; z-index: 2000; top: -12px; pointer-events: none;
    font-size: 18px; animation: confetti-fall linear both;
}
@keyframes confetti-fall {
    to { transform: translateY(105vh) rotate(540deg); opacity: 0.9; }
}

/* ─── INÍCIO DE CADA ETAPA ──────────────────────────────────────────────
   Importante: NÃO usar transform aqui — o #stage-body contém os controles
   fixos do karaokê (position:fixed), e um transform criaria um containing
   block que quebraria o posicionamento deles. Só opacity é seguro. */
#stage-body { animation: stage-enter 0.45s ease both; }
@keyframes stage-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.stage-head .stage-chip { animation: chip-pop 0.55s cubic-bezier(0.2,0.9,0.3,1.5) both; }
.stage-head .stage-hint { animation: hint-fade 0.5s ease 0.1s both; }
@keyframes hint-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chip-pop {
    0%   { opacity: 0; transform: scale(0.6) translateY(-4px); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* HUD entra deslizando do topo ao iniciar a etapa de exercício */
#game-hud { animation: hud-drop 0.5s cubic-bezier(0.2,0.85,0.3,1.05) both; }
@keyframes hud-drop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── APARIÇÃO DA QUESTÃO ───────────────────────────────────────────────
   O painel da pergunta sobe com um leve overshoot; as alternativas entram
   em sequência (uma após a outra), como num quiz de app premium. */
.gap-panel { animation: panel-in 0.42s cubic-bezier(0.2,0.85,0.25,1.05) both; }
@keyframes panel-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.j-choices .j-choice, .exam-options .exam-choice {
    animation: choice-in 0.4s cubic-bezier(0.2,0.85,0.25,1.1) both;
}
.j-choices .j-choice:nth-child(1), .exam-options .exam-choice:nth-child(1) { animation-delay: 0.06s; }
.j-choices .j-choice:nth-child(2), .exam-options .exam-choice:nth-child(2) { animation-delay: 0.13s; }
.j-choices .j-choice:nth-child(3), .exam-options .exam-choice:nth-child(3) { animation-delay: 0.20s; }
.j-choices .j-choice:nth-child(4), .exam-options .exam-choice:nth-child(4) { animation-delay: 0.27s; }
@keyframes choice-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* A palavra-alvo da etapa Falar entra com destaque */
.speak-target .st-word { animation: word-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.5) both; }
@keyframes word-pop {
    0%   { opacity: 0; transform: scale(0.7); }
    65%  { opacity: 1; transform: scale(1.06); }
    100% { transform: scale(1); }
}
/* botão do microfone "respira" enquanto aguarda o toque */
.mic-btn { animation: mic-breathe 2.2s ease-in-out infinite; }
@keyframes mic-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(138,43,226,0.5); }
    50%      { box-shadow: 0 0 0 10px rgba(138,43,226,0); }
}

/* ─── ACERTO ────────────────────────────────────────────────────────────
   O botão correto dá um "pop" de comemoração e pulsa um anel verde. */
.j-choices .j-choice.right, .exam-options .exam-choice.right {
    animation: answer-correct 0.55s cubic-bezier(0.2,0.9,0.3,1.5) both;
}
@keyframes answer-correct {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(34,197,94,0.45); }
    100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(34,197,94,0.4); }
}

/* ─── ERRO ──────────────────────────────────────────────────────────────
   O botão errado treme (shake) com um flash vermelho — feedback nítido. */
.j-choices .j-choice.wrong, .exam-options .exam-choice.wrong {
    animation: answer-wrong 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
@keyframes answer-wrong {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(7px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* ─── HUD: pulso na estatística que muda a cada resposta ─────────────── */
.hud-stat.hud-bump { animation: hud-bump 0.45s cubic-bezier(0.2,0.9,0.3,1.5) both; }
.hud-stat.hud-bump-pts b { animation: hud-pts-pop 0.55s cubic-bezier(0.2,0.9,0.3,1.6) both; color: #00bfff; }
@keyframes hud-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@keyframes hud-pts-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); text-shadow: 0 0 14px rgba(0,191,255,0.9); }
    100% { transform: scale(1); text-shadow: none; }
}

}

/* ═══ Ajustes de layout: desktop meta bar, coração duplicado, hub mobile ══ */
/* Barra de nível+pontos abaixo do player (desktop) */
.journey-meta { display: none; }
@media (min-width: 768px) {
    .journey-meta {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        padding: 10px 0 2px; margin: 0 auto; max-width: 760px;
    }
    .journey-meta #journey-level-label {
        margin: 0; cursor: pointer;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 999px; padding: 5px 14px;
        color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 700;
    }
    .journey-meta #journey-level-label:hover { border-color: rgba(138,43,226,0.6); }
    .journey-meta .pts-pill { margin: 0; font-size: 13.5px; padding: 5px 14px; }
    /* coração do topo some no desktop (já existe o da thumb do hub) */
    #journey-fav { display: none; }
    /* título sem subtítulo embaixo no desktop */
    .journey-topbar .j-sub:empty { display: none; }
}

/* Hub mobile: botão "Melhorar/Iniciar" sem estourar o card */
@media (max-width: 640px) {
    .hub-stage { flex-wrap: wrap; padding: 12px; }
    .hs-info { flex: 1 1 calc(100% - 56px); }
    .hs-info small { white-space: normal; }
    .hs-play {
        flex: 1 1 100%; margin-top: 10px; padding: 11px 10px;
        font-size: 14px; text-align: center; justify-content: center;
    }
    .ht-btn { width: 34px; height: 34px; font-size: 13px; }
    .stage-clear { margin: 10px 8px; }
    .exam { padding: 4px 2px 14px; }
    .exam-prompt { font-size: 17px; }
}

/* ═══ ETAPA 2: layout da página da música ════════════════════════════════ */
/* pontos/nível saem do topo (vivem no hub) */
#journey-level-label, .journey-topbar .pts-pill, #journey-points-pill { display: none !important; }
.journey-meta { display: none !important; }
/* coração ao lado do nome some em TODAS as telas (fica só o da thumb) */
#journey-fav { display: none !important; }

/* barra de meta do hub: abaixo da thumb */
.hub-meta {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 12px 0 2px;
}
.hm-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px; padding: 8px 16px;
    color: #fff; font-weight: 800; font-size: 13.5px;
}
.hm-pts { border-color: rgba(251,191,36,0.45); }
.hm-pts i { color: #fbbf24; }
.hm-level {
    cursor: pointer; transition: border-color 0.15s, transform 0.15s;
    border-color: rgba(138,43,226,0.5);
}
.hm-level i { color: #b07ce8; }
.hm-level:hover { border-color: #8a2be2; transform: scale(1.04); }
.hm-total { border-color: rgba(0,191,255,0.4); color: #7dd3fc; }

/* ── contenção: exercícios e audição DENTRO da tela ── */
#gap-host, .gap-panel { width: 100%; box-sizing: border-box; min-width: 0; }
.gap-panel { overflow-y: auto; overscroll-behavior: contain; }
.gap-panel *, .exam * { max-width: 100%; box-sizing: border-box; }
.j-choices { width: 100%; }
.j-choices .j-choice {
    min-width: 0; white-space: normal; word-break: break-word; line-height: 1.25;
}
.waiting-banner { box-sizing: border-box; max-width: 100%; padding-left: 10px; padding-right: 10px; }
.exam { width: 100%; box-sizing: border-box; }
.stage-area { overflow-x: hidden; }
@media (max-width: 640px) {
    .gap-panel { max-height: none; }
}

/* ═══ ETAPA 3: Karaokê imersivo (Cantar) ═════════════════════════════════ */
body.sing-mode .journey-topbar,
body.sing-mode .journey-stepper,
body.sing-mode .stage-head { display: none !important; }
body.sing-mode .journey-cta { display: none !important; }
body.sing-mode.stage-finished .journey-cta { display: flex !important; }

.sing-exit {
    position: fixed; top: 12px; left: 12px; z-index: 90;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25); color: #fff;
    font-size: 15px; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.sing-exit:hover { transform: scale(1.08); background: rgba(239,68,68,0.6); }

/* botão discreto "voltar às etapas" no cabeçalho das etapas (não cobre o player) */
.stage-exit {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85); font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s, background 0.15s; margin-right: 4px;
}
.stage-exit:hover { transform: scale(1.08); background: rgba(138,43,226,0.5); }

/* letra GIGANTE ocupando a tela, estilo concorrente */
.j-lyrics-sing { padding: 14px 8px 30px; gap: 10px; }
.j-lyrics-sing .j-line {
    font-size: 21px; line-height: 1.4; padding: 8px 4px;
    color: rgba(255,255,255,0.38);
}
.j-lyrics-sing .j-line.cur {
    font-size: 30px; letter-spacing: -0.5px; color: #fff;
    text-shadow: 0 2px 18px rgba(138,43,226,0.45);
}
@media (max-width: 640px) {
    body.sing-mode .journey-wrapper { padding: 0; }
    body.sing-mode .journey-fixed { padding: 0; }
    body.sing-mode .video-container { border-radius: 0; border-left: none; border-right: none; }
    body.sing-mode .stage-area { padding: 0 14px 40px; }
    .j-lyrics-sing .j-line { font-size: 19px; }
    .j-lyrics-sing .j-line.cur { font-size: 27px; }
    .sing-exit { top: 8px; left: 8px; width: 36px; height: 36px; }
}
@media (min-width: 641px) {
    body.sing-mode .stage-area { max-width: 720px; margin: 0 auto; }
}

/* prova mista */
.exam-replay, .exam-mic {
    display: block; margin: 0 auto 14px;
    background: rgba(0,191,255,0.15); border: 1px solid rgba(0,191,255,0.5);
    color: #7dd3fc; font-weight: 800; font-size: 14px;
    padding: 11px 20px; border-radius: 999px; cursor: pointer;
}
.exam-mic { background: rgba(138,43,226,0.18); border-color: rgba(138,43,226,0.55); color: #d9b8ff; }
.exam-mic.listening { animation: pts-bump 0.9s infinite; border-color: #ef4444; color: #fca5a5; }
.exam-heard { text-align: center; font-size: 14px; font-weight: 700; min-height: 20px; }
.exam-tag-cards {
    background: linear-gradient(135deg,#8a2be2,#5b1ba0); color: #fff;
    font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
    vertical-align: middle; margin-right: 6px; letter-spacing: 0.4px;
}

/* ═══ FIX: fala e prova no mobile ════════════════════════════════════════ */
@media (max-width: 640px) {
    /* FALAR: painel flui na página (sem fixo no rodapé que cortava o conteúdo) */
    body.stage-speak .gap-panel {
        position: static !important; max-height: none !important;
        border-radius: 16px; border: 1px solid rgba(138,43,226,0.3);
        margin-top: 10px;
    }
    body.stage-speak .stage-area { padding-bottom: 28px !important; }

    /* PROVA: sem painel fixo, sem vão gigante */
    body.stage-quiz .stage-area { padding-bottom: 28px !important; }
}
/* PROVA: player invisível mas vivo (as perguntas de audição tocam trechos) */
body.stage-quiz .video-container {
    position: absolute !important; width: 1px !important; height: 1px !important;
    opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
    border: none !important; margin: 0 !important; padding: 0 !important;
}
body.stage-quiz .stage-area { margin-top: 6px; }
.exam-ctx { color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 600; font-style: italic; }
.exam-replay { font-size: 15px; padding: 13px 24px; }

/* ═══ FIX mobile: meta numa linha só + CTA dentro da tela ════════════════ */
@media (max-width: 640px) {
    /* pontos / nível / troféu sempre na MESMA linha */
    .hub-meta { flex-wrap: nowrap; gap: 7px; }
    .hub-meta .hm-pill {
        flex: 1 1 0; min-width: 0; justify-content: center;
        padding: 8px 8px; font-size: 12px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hm-pill i { flex: 0 0 auto; }

    /* botão "Ver resultado / Voltar" não estoura a tela */
    .journey-cta-inner { width: 100%; gap: 8px; }
    .journey-cta-inner .j-btn, #journey-cta-btn {
        min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        padding: 13px 12px; font-size: 14px;
    }
    #journey-back-btn { flex: 0 0 auto; }
}

/* ═══ Tab bar na página da música: some durante etapa ativa ══════════════ */
@media (max-width: 768px) {
    /* etapa em execução (cantar/ouvir/falar/teste) = tela cheia, sem barra */
    body.game-mode .eh-tabbar,
    body.sing-mode .eh-tabbar,
    body.stage-listen .eh-tabbar,
    body.stage-speak .eh-tabbar,
    body.stage-quiz .eh-tabbar { display: none !important; }

    /* no hub a barra aparece; reserva espaço pra não cobrir as etapas listadas */
    body.hub-mode { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    /* durante etapa, sem o respiro da barra */
    body.game-mode, body.sing-mode,
    body.stage-listen, body.stage-speak, body.stage-quiz { padding-bottom: 0 !important; }
}

/* ═══ Karaokê: aviso discreto + controles de transporte ══════════════════ */
.sing-hint-wrap { text-align: center; }
.translate-hint.sing-hint {
    font-size: 11px; color: rgba(255,255,255,0.32);
    background: none; border: none; padding: 4px 0;
}
.translate-hint.sing-hint i { opacity: 0.7; margin-right: 4px; }

/* transporte só na etapa cantar */
.sing-transport { display: none; }
body.sing-mode .sing-transport {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    position: fixed; left: 0; right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 95;
}
/* ao terminar o karaokê, somem os 5 botões para dar lugar ao CTA */
body.sing-mode.stage-finished .sing-transport { display: none; }
.st-btn {
    border: none; cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.st-btn:active { transform: scale(0.9); }
.st-prev, .st-next {
    width: 62px; height: 62px; border-radius: 50%; font-size: 22px;
}
.st-prev:hover, .st-next:hover { background: rgba(138,43,226,0.45); }
.st-play {
    width: 84px; height: 84px; border-radius: 50%; font-size: 32px;
    background: linear-gradient(135deg, #8a2be2, #5b1ba0);
    border: none;
    box-shadow: 0 10px 30px rgba(138,43,226,0.6);
}
.st-play:hover { filter: brightness(1.1); }
.st-mini {
    width: 46px; height: 46px; border-radius: 50%; font-size: 16px; font-weight: 800;
}
.st-mini:hover { background: rgba(0,191,255,0.35); }
.st-speed-lbl { font-size: 13px; font-weight: 800; letter-spacing: -0.3px; }
.st-btn.on {
    background: linear-gradient(135deg, #00bfff, #0077b6);
    border-color: transparent; box-shadow: 0 6px 18px rgba(0,191,255,0.5);
}
.st-phrase.on { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 6px 18px rgba(34,197,94,0.5); }

/* karaokê ocupa o espaço livre; deixa respiro p/ os controles no rodapé */
body.sing-mode .stage-area {
    display: flex; flex-direction: column;
}
body.sing-mode .j-lyrics-sing {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 640px) {
    body.sing-mode .stage-area { padding-bottom: 122px; }
    body.sing-mode .sing-transport { gap: 11px; }
    .st-prev, .st-next { width: 56px; height: 56px; font-size: 20px; }
    .st-play { width: 76px; height: 76px; font-size: 28px; }
    .st-mini { width: 44px; height: 44px; font-size: 15px; }
}
@media (min-width: 641px) {
    body.sing-mode .stage-area { padding-bottom: 126px; }
}