/*
 * pattern_duel.css
 * File: /qmbportal/quizzes/assets/css/pattern_duel.css
 *
 * Pattern Duel · child surface · PreK–4 · EN + ES + FR + DE at launch
 * Build: S010 · DEC-QMBP-GD-S010-02 · ratified Commander 2026-05-26
 *
 * Tokens-only: every color/spacing/radius references a tokens.css custom property.
 * No raw hex values in this file. No activity-scoped :root overrides.
 *
 * Shape-color mapping (Architect choice, within established palette):
 *   circle   → var(--color-subject-math)         (pine / teal-800 · primary subject)
 *   square   → var(--color-tangerine)            (warm contrast)
 *   triangle → var(--color-sunflower-dark)       (rendered via CSS border-bottom)
 *
 * Brief Section 5 referenced --color-accent-secondary / --color-accent-tertiary tokens
 * that do NOT exist in tokens.css. Substituted with existing established tokens.
 * Flagged in S010 build report for tokens.css cleanup or token-name reconciliation.
 */

/* ─── Section visibility enforcement ─────────────────────────────────── */
/* CSS author display values (flex) override the UA [hidden] rule.         */
/* Explicit [hidden] selectors restore correct show/hide behaviour.        */
.pd-start-screen[hidden],
.pd-round[hidden],
.pd-outcome[hidden] { display: none; }

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

.pd-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;
}

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

.pd-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);
}

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

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

.pd-start-description {
    display: none; /* CD-S011-CD-03-A · child surface · banner carries description once */
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.pd-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);
}

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

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

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

.pd-btn-secondary {
    background: var(--bg-primary);
    color: var(--color-subject-math);
    border: 2px solid var(--color-subject-math);
    box-shadow: var(--shadow-sm);
}

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

.pd-btn-secondary:active {
    transform: translateY(0);
}

/* ─── Outcome action row ──────────────────────────────────────────────── */
.pd-outcome-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
}

/* ─── Round layout · desktop ──────────────────────────────────────────── */
.pd-round {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

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

/* ─── Scrambler tracker ───────────────────────────────────────────────── */
.pd-scrambler-tracker {
    background: var(--bg-overlay);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 80px;
}

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

.pd-scrambler-icon--panic {
    animation: pd-scrambler-panic 0.3s ease-in-out 3;
}

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

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

.pd-scrambler-position {
    height: 100%;
    background: var(--color-tangerine);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow), background var(--transition-fast);
    width: 0%;
}

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

/* ─── Progress panel ──────────────────────────────────────────────────── */
.pd-progress-panel {
    background: var(--bg-primary);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.pd-progress-label {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-subject-math);
}

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

.pd-progress-token {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-light-gray);
    background: var(--color-light-gray);
    color: var(--color-medium-gray);
}

.pd-progress-token--defended {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.pd-progress-token--lost {
    background: var(--color-light-gray);
    color: var(--color-medium-gray);
    opacity: 0.5;
}

.pd-progress-token--pending {
    opacity: 0.7;
}

/* ─── Sequence card + sequence display ────────────────────────────────── */
.pd-sequence-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.pd-instruction {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-secondary);
    min-height: 1.5em;
    text-align: center;
}

.pd-sequence {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-sm);
    width: 100%;
    justify-content: center;
}

.pd-sequence-element {
    scroll-snap-align: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    background: var(--bg-overlay);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: default;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.pd-sequence-element--interactive {
    cursor: pointer;
}

.pd-sequence-element--interactive:hover,
.pd-sequence-element--interactive:focus-visible {
    border-color: var(--color-subject-math);
    transform: translateY(-1px);
    outline: 3px solid var(--color-sunflower);
    outline-offset: 2px;
}

.pd-sequence-element--flagged {
    background: var(--color-tangerine-light);
    border-color: var(--color-tangerine);
    color: var(--color-dark-gray);
}

.pd-sequence-element--found {
    border-color: var(--color-subject-math);
    background: var(--color-cloud);
}

.pd-sequence-element--restored {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
    animation: pd-restore-pulse 400ms ease-out;
}

@keyframes pd-restore-pulse {
    0%   { transform: scale(0.92); opacity: 0.4; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.pd-sequence-element--wrong-tap {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
    animation: pd-wrong-pulse 300ms ease-out;
}

@keyframes pd-wrong-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ─── Shapes · CSS-only · SO-09 standard geometry ─────────────────────── */
.pd-shape {
    display: inline-block;
    width: 44px;
    height: 44px;
    background: var(--bg-overlay); /* default (overridden per shape below) */
}

.pd-shape--circle {
    border-radius: 50%;
    background-color: var(--color-subject-math);
}

.pd-shape--square {
    border-radius: 4px;
    background-color: var(--color-tangerine);
}

.pd-shape--triangle {
    width: 0;
    height: 0;
    background-color: transparent;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 44px solid var(--color-sunflower-dark);
    border-radius: 0;
}

/* When a shape is inside an interactive sequence element, the parent provides
   the border/background; reset the shape's intrinsic spacing */
.pd-sequence-element .pd-shape,
.pd-choice--visual .pd-shape {
    margin: 0;
}

/* When a sequence-element renders as a shape, suppress its overlay background */
.pd-sequence-element.pd-shape {
    background: transparent;
    border: none;
    padding: 0;
    width: 44px;
    height: 44px;
}

.pd-sequence-element.pd-shape--triangle {
    /* re-impose the triangle's CSS-border geometry */
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 44px solid var(--color-sunflower-dark);
    width: 0;
    height: 0;
}

/* Re-impose fill colors for circle and square — .pd-sequence-element.pd-shape (0,2,0)
   overrides the single-class .pd-shape--circle/square rules (0,1,0). Compound
   selectors below restore parity with the triangle re-imposition pattern above. */
.pd-sequence-element.pd-shape--circle {
    background-color: var(--color-subject-math);
}

.pd-sequence-element.pd-shape--square {
    background-color: var(--color-tangerine);
    border-radius: 4px;
}

/* Flagged shape position (Scrambler's injected value · L1–L2) —
   background approach is overridden by shape compound rules (0,2,0).
   Outline ring bypasses the conflict and marks the target position clearly. */
.pd-sequence-element.pd-shape.pd-sequence-element--flagged {
    outline: 3px dashed var(--color-tangerine);
    outline-offset: 4px;
}

/* Restored visual element: re-color via outline since shape colors are
   shape-bound. We use a green ring instead of overwriting the shape color. */
.pd-sequence-element.pd-shape--circle.pd-sequence-element--restored,
.pd-sequence-element.pd-shape--square.pd-sequence-element--restored {
    outline: 3px solid var(--color-success);
    outline-offset: 4px;
    /* preserve shape's own background */
    background-color: inherit;
}

/* Numeric sequence elements use overlay background — already handled by base rules */
.pd-seq-elem--numeric { /* hook for future numeric-specific styling */ }

.pd-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 (fix phase) ─────────────────────────────────────────────── */
.pd-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.pd-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
    justify-content: center;
}

.pd-choice {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    min-width: 64px;
    min-height: 64px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.pd-choice--visual {
    padding: var(--spacing-sm);
}

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

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

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

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

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

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

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

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

.pd-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);
}

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

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

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

/* ─── Mobile reflow (≤768px) — ARCH-PR-01 horizontal scroll ───────────── */
@media (max-width: 768px) {
    .pd-status-row {
        grid-template-columns: 1fr;
    }

    .pd-scrambler-tracker {
        flex-direction: row;
        min-height: auto;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .pd-scrambler-icon {
        font-size: 1.75rem;
    }

    .pd-scrambler-track {
        flex: 1;
    }

    .pd-round {
        display: flex;
        flex-direction: column;
    }

    .pd-scrambler-tracker { order: 1; }
    .pd-sequence-card     { order: 2; padding: var(--spacing-lg); }
    .pd-choices           { order: 3; }
    .pd-feedback          { order: 4; }
    .pd-progress-panel    { order: 5; margin-top: var(--spacing-md); }

    /* Sequence stays a single row; horizontal scroll with snap kicks in
       only when content overflows (sequences of 7+ at narrow widths). */
    .pd-sequence {
        justify-content: flex-start; /* allow scroll start at left */
    }

    .pd-sequence-element,
    .pd-shape {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }

    .pd-shape--triangle {
        border-left-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 40px;
    }

    .pd-sequence-element.pd-shape--triangle {
        border-left-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 40px;
    }

    .pd-choice {
        min-width: 56px;
        min-height: 56px;
        font-size: var(--text-xl);
    }
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pd-btn,
    .pd-scrambler-icon,
    .pd-scrambler-position,
    .pd-sequence-element,
    .pd-choice {
        transition: none;
    }

    .pd-scrambler-icon--panic,
    .pd-sequence-element--restored,
    .pd-sequence-element--wrong-tap {
        animation: none;
    }

    .pd-btn:hover,
    .pd-btn:focus-visible,
    .pd-choice:hover:not(:disabled),
    .pd-choice:focus-visible:not(:disabled),
    .pd-sequence-element--interactive:hover,
    .pd-sequence-element--interactive:focus-visible {
        transform: none;
    }
}