/* ── Level 1: blanks & hints ── */
.blanks {
    font-family: 'Exo 2', sans-serif;
    font-size: 2rem;
    letter-spacing: 12px;
    color: #ffb300;
    text-shadow: 0 0 10px #ffb30066;
    margin-bottom: 12px;
    min-height: 3rem;
}

.blanks .revealed {
    color: #00ff41;
    text-shadow: 0 0 10px #00ff4188;
}

.hint-label {
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: #ffb300bb;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
}

/* ── Level 3: transponder display ── */
.transponder {
    display: inline-block;
    background: #050807;
    border: 2px solid #ffb30066;
    border-radius: 4px;
    padding: 20px 48px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 0 30px #ffb30022, inset 0 0 40px #000000bb;
}

.transponder::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid #ffb30022;
    border-radius: 2px;
    pointer-events: none;
}

.transponder::after {
    content: '· ·';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    letter-spacing: 32px;
    color: #ffb30033;
}

.transponder-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 5px;
    color: #ffb300aa;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.plate-number {
    font-family: 'Exo 2', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #ffb300;
    letter-spacing: 10px;
    line-height: 1;
    text-shadow: 0 0 20px #ffb300cc, 0 0 60px #ffb30055;
}

.plate-number.pop { animation: cardPop 0.25s ease; }
.plate-number.shake { animation: shake 0.4s ease; }

.plate-hint {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffb300bb;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.l3-answer-input {
    background: #050807;
    border: 1px solid #ffb30066;
    border-radius: 2px;
    color: #ffb300;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    text-align: center;
    width: 100%;
    max-width: 460px;
    outline: none;
    padding: 12px 20px;
    margin-bottom: 16px;
    letter-spacing: 2px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.l3-answer-input:focus { border-color: #ffb300; box-shadow: 0 0 12px #ffb30044; }
.l3-answer-input::placeholder { color: #ffb30033; }
.l3-answer-input:disabled { opacity: 0.3; }

/* ── Token row ── */
.token-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}

.token {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 4px 10px;
    border: 1px solid transparent;
}

.token.ok      { border-color: #00ff41; color: #00ff41; background: #00ff4110; }
.token.wrong   { border-color: #ff3b3b; color: #ff3b3b; background: #ff3b3b10; }
.token.missing { border-color: #ffb300; color: #ffb300; background: #ffb30010; }

/* ── Level 4: mic button ── */
.mic-btn {
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 18px 40px;
    border-radius: 2px;
    border: 2px solid #ff4444;
    background: #ff444411;
    color: #ff4444;
    cursor: pointer;
    display: block;
    margin: 0 auto 12px;
    transition: all 0.15s;
    user-select: none;
    -webkit-user-select: none;
}

.mic-btn:hover { background: #ff444422; }
.mic-btn.listening {
    background: #ff4444;
    color: #0a0c0f;
    box-shadow: 0 0 24px #ff444488, 0 0 60px #ff444433;
    animation: micPulse 1s ease-in-out infinite;
}
.mic-btn:disabled { opacity: 0.3; cursor: default; animation: none; }

@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 24px #ff444488, 0 0 60px #ff444433; }
    50%       { box-shadow: 0 0 40px #ff4444cc, 0 0 80px #ff444466; }
}

.mic-status {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #ffb30077;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.transcript-box {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    color: #ffb300;
    background: #050807;
    border: 1px solid #ffb30033;
    padding: 10px 16px;
    margin-bottom: 12px;
    min-height: 2.4em;
    letter-spacing: 1px;
    font-style: italic;
}

/* ── Mobile ── */
@media (max-width: 480px) and (max-height: 900px) {
    body { padding: 12px 12px; }
    h1 { font-size: 1.1rem; margin-bottom: 2px; }
    .subtitle { font-size: 0.7rem; margin-bottom: 12px; letter-spacing: 2px; }
    .level-select { margin-bottom: 12px; }
    .level-btn { font-size: 0.65rem; padding: 8px 0; letter-spacing: 2px; }
    .atc-prompt { font-size: 0.7rem; margin-bottom: 8px; }
    .card-wrap { margin-bottom: 12px; }
    .card { padding: 24px 20px; font-size: 5rem; }
    .blanks { font-size: 1.6rem; letter-spacing: 6px; margin-bottom: 8px; }
    .hint-label { font-size: 0.7rem; margin-bottom: 10px; }
    .answer-input { padding: 8px 16px; font-size: 1rem; margin-bottom: 10px; }
    .l3-answer-input { padding: 8px 16px; font-size: 0.9rem; margin-bottom: 10px; }
    .submit-btn { padding: 10px 28px; font-size: 0.85rem; margin-bottom: 12px; }
    .next-btn { padding: 8px 20px; font-size: 0.7rem; }
    .feedback { font-size: 0.8rem; min-height: 1.4em; margin-bottom: 8px; }
    .score-row { gap: 8px; margin-top: 8px; }
    .score-pill { font-size: 0.75rem; padding: 4px 12px; }
    .transponder { padding: 12px 28px; margin-bottom: 12px; }
    .transponder-label { font-size: 0.6rem; margin-bottom: 4px; }
    .plate-number { font-size: 2.2rem; letter-spacing: 6px; }
    .plate-hint { font-size: 0.7rem; margin-bottom: 4px; }
}