/*
 * vocabulary_duel.css
 * File: /qmbportal/quizzes/assets/css/vocabulary_duel.css
 *
 * Vocabulary Duel · child surface · K–6 · EN + ES at launch
 * Build: S010 · DEC-QMBP-GD-S010-01 · ratified Commander 2026-05-26
 *
 * Tokens-only: every color, spacing, radius, shadow, and transition references
 * a CSS custom property from tokens.css. No raw hex values in this file.
 * No activity-scoped :root overrides — existing palette covers all needs.
 */

/* ─── Game container ──────────────────────────────────────────────────── */
.vd-game {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    font-family: var(--font-body);
    color: var(--text-primary);
}

.vd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Section visibility enforcement ─────────────────────────────────── */
/* CSS author display values (flex) override the UA [hidden] rule.         */
/* Explicit [hidden] selectors restore correct show/hide behaviour.         */
/* DEC-QMBP-S012 · same root cause as PD S011 fix.                         */
.vd-start-screen[hidden],
.vd-round[hidden],
.vd-outcome[hidden] { display: none; }

/* ─── Start screen ────────────────────────────────────────────────────── */
.vd-start-screen {
    display: flex;
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-md);
}

.vd-start-card {
    max-width: 480px;
    text-align: center;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
}

.vd-start-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.vd-start-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin: 0 0 var(--spacing-sm);
    color: var(--color-subject-phonics);
}

.vd-start-description {
    font-size: var(--text-base);
    margin: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
    display: none; /* DEC-QMBP-S012-CD-01 · child surface · banner carries description once */
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.vd-btn {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    padding: var(--spacing-sm) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.vd-btn-primary {
    background: var(--color-subject-phonics);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.vd-btn-primary:hover,
.vd-btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    outline: 3px solid var(--color-sunflower);
    outline-offset: 2px;
}

.vd-btn-primary:active {
    transform: translateY(0);
}

/* ─── Round layout · desktop (side-by-side status row) ────────────────── */
.vd-round {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.vd-status-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--spacing-md);
    align-items: stretch;
}

/* ─── Thief tracker ───────────────────────────────────────────────────── */
.vd-thief-tracker {
    background: var(--bg-overlay);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 80px; /* SO-02 floor · DEC-QMBP-S012-SO-02 · parity with PD scrambler tracker */
}

.vd-thief-icon {
    font-size: 2.5rem;
    line-height: 1;
    transition: transform var(--transition-normal);
}

.vd-thief-icon--panic {
    animation: vd-thief-panic 0.3s ease-in-out 3;
}

@keyframes vd-thief-panic {
    0%, 100% { transform: translateX(0)   rotate(0); }
    25%      { transform: translateX(-4px) rotate(-3deg); }
    75%      { transform: translateX(4px)  rotate(3deg); }
}

.vd-thief-track {
    width: 100%;
    height: 8px;
    background: var(--color-light-gray);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.vd-thief-position {
    height: 100%;
    background: var(--color-tangerine);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
    width: 0%;
}

.vd-thief-position[data-step="0"] { width:  0%; }
.vd-thief-position[data-step="1"] { width: 20%; }
.vd-thief-position[data-step="2"] { width: 40%; }
.vd-thief-position[data-step="3"] { width: 60%; }
.vd-thief-position[data-step="4"] { width: 80%; }
.vd-thief-position[data-step="5"] { width: 100%; background: var(--color-danger); }

/* ─── Word bank ───────────────────────────────────────────────────────── */
.vd-word-bank {
    background: var(--bg-primary);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.vd-word-bank-progress {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-subject-phonics);
}

.vd-word-tokens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.vd-word-token {
    font-size: var(--text-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-light-gray);
    transition: transform var(--transition-normal), opacity var(--transition-normal), background var(--transition-fast);
}

.vd-word-token--pending {
    background: var(--color-light-gray);
    color: var(--text-secondary);
    opacity: 0.7;
}

.vd-word-token--recovered {
    background: var(--color-sunflower);
    color: var(--color-dark-gray);
    border-color: var(--color-sunflower-dark);
    animation: vd-token-recover var(--transition-normal) ease-out;
}

@keyframes vd-token-recover {
    0%   { transform: translateY(-16px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

.vd-word-token--lost {
    background: var(--color-light-gray);
    color: var(--color-medium-gray);
    text-decoration: line-through;
    opacity: 0.5;
}

/* ─── Question card ───────────────────────────────────────────────────── */
.vd-question-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg); /* SO-03 floor: min 1rem internal padding — --spacing-lg (1.5rem) clears */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.vd-question-prompt {
    font-size: var(--text-xl); /* SO-03 floor · 1.2rem min · --text-xl (1.25rem) is nearest compliant token */
    font-style: italic;
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0;
}

.vd-question-word {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    color: var(--color-subject-phonics);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.vd-dual-panel {
    background: var(--bg-overlay);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-3xl);
}

.vd-question-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.vd-question-timer {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    color: var(--color-tangerine-dark);
    background: var(--color-cloud);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
}

/* ─── Choices ─────────────────────────────────────────────────────────── */
.vd-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.vd-choice-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
}

.vd-choice {
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    min-height: 64px;  /* SO-04 · WCAG 2.5.5 motor accessibility floor */
    height: auto;      /* SO-04 · allows text wrap at higher levels without truncation */
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.vd-choice:hover:not(:disabled),
.vd-choice:focus-visible:not(:disabled) {
    border-color: var(--color-subject-phonics);
    transform: translateY(-1px);
    outline: 3px solid var(--color-sunflower);
    outline-offset: 2px;
}

.vd-choice:disabled {
    cursor: default;
    opacity: 0.85;
}

.vd-choice--correct-reveal {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.vd-choice--wrong-picked {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
}

/* ─── Feedback ────────────────────────────────────────────────────────── */
.vd-feedback {
    min-height: 2.5em;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}

.vd-feedback[data-tone="correct"] {
    background: var(--color-sunflower-light);
    color: var(--color-dark-gray);
}

.vd-feedback[data-tone="wrong"] {
    background: var(--color-tangerine-light);
    color: var(--color-dark-gray);
}

/* ─── Outcome screen ──────────────────────────────────────────────────── */
.vd-outcome {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.vd-outcome-card {
    max-width: 480px;
    text-align: center;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-md);
}

.vd-outcome-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.vd-outcome-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin: 0 0 var(--spacing-sm);
    color: var(--color-subject-phonics);
}

.vd-outcome-summary {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg);
}

/* ─── Mobile reflow (≤768px) · word bank below question card ──────────── */
@media (max-width: 768px) {
    .vd-status-row {
        grid-template-columns: 1fr;
    }

    /* Thief tracker collapses to compact strip on mobile */
    .vd-thief-tracker {
        flex-direction: row;
        min-height: auto;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .vd-thief-icon {
        font-size: 2rem; /* SO-02 floor · DEC-QMBP-S012-SO-02 · 2rem minimum */
    }

    .vd-thief-track {
        flex: 1;
    }

    /* Order: tracker → question → choices → word bank
       Achieved by promoting word bank out of status row visually with order */
    .vd-round {
        display: flex;
        flex-direction: column;
    }

    .vd-status-row {
        order: 1;
    }

    .vd-thief-tracker { order: 1; }
    .vd-word-bank     { order: 4; margin-top: var(--spacing-md); }

    .vd-question-card { order: 2; padding: var(--spacing-lg); }
    .vd-choices       { order: 3; }
    .vd-feedback      { order: 3; }

    .vd-question-word {
        font-size: var(--text-3xl);
    }
}

/* ─── Reduced motion (accessibility invariant) ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vd-btn,
    .vd-thief-icon,
    .vd-thief-position,
    .vd-word-token,
    .vd-choice {
        transition: none;
    }

    .vd-thief-icon--panic,
    .vd-word-token--recovered {
        animation: none;
    }

    .vd-btn:hover,
    .vd-btn:focus-visible,
    .vd-choice:hover:not(:disabled),
    .vd-choice:focus-visible:not(:disabled) {
        transform: none;
    }
}