/* Shared Quiz-family gameplay styling: prompt card, cloze/hint, speak button,
   multiple-choice options, Time Attack timer/stats, countdown bar, feedback,
   results (score/streak/mosaic/review), and the Quiz-setup answer-mode
   controls. Shared by Quiz, Sentences, Stream, Time Attack, and Conjugate.
   Split from index.html — see palabra-file-split-plan.md. */

  .tiles {
    display: grid;
    gap: 4px;
    margin-bottom: 32px;
  }
  .tile { height: 8px; border-radius: 50%; background: var(--outline); }

  .progress-label {
    text-align: center;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--label);
    font-variant-numeric: tabular-nums;
  }

  .prompt-card {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    border: 1px solid var(--outline);
    margin-bottom: 20px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
  }
  .card-flip-in { animation: cardFlip 0.5s ease; }
  @keyframes cardFlip {
    from { transform: rotateY(-90deg); opacity: 0; }
    to { transform: rotateY(0deg); opacity: 1; }
  }
  .prompt-card.flash-correct { box-shadow: 0 0 0 3px var(--green) inset; }
  .prompt-card.flash-wrong { box-shadow: 0 0 0 3px var(--red) inset; }

  /* Signature element: a glowing orb, like a bead of sea-glass, showing round progress */
  .glow-orb-progress {
    position: absolute;
    top: -16px;
    right: -14px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #E8FFFB, #2DD4BF 55%, #0E7C6D 100%);
    box-shadow: 0 0 24px rgba(45,212,191,0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #082620;
  }
  .glow-orb-progress .orb-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .glow-orb-progress .orb-lbl { font-size: 7px; letter-spacing: 1px; font-weight: 600; }

  .ta-header { margin-bottom: 24px; }
  .ta-timer-track {
    height: 8px;
    background: var(--outline);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .ta-timer-fill {
    height: 100%;
    background: var(--ochre);
    border-radius: 4px;
    transition: width 0.25s linear;
  }
  .ta-stats-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.5px;
    color: var(--cream-dim);
    font-variant-numeric: tabular-nums;
  }
  .ta-score-label span, .ta-timer-label { color: var(--ochre); font-weight: 700; }
  .prompt-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
  .prompt-word {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 34px;
  }
  .prompt-translation {
    font-size: 14px;
    color: var(--cream-dim);
    margin-top: 6px;
    font-style: italic;
  }
  /* A word's disambiguating Note, shown under the prompt word only when
     that word IS the note-bearing English text (see renderQuiz/
     renderTimeAttack) - deliberately styled the same as .prompt-translation
     but a separate class so the two can be tuned independently later. */
  .prompt-note {
    font-size: 14px;
    color: var(--cream-dim);
    margin-top: 6px;
    font-style: italic;
  }
  /* Cloze/fill-in-the-blank: the sentence reads as normal body text with
     the missing word rendered as a distinct blank, rather than the huge
     .prompt-word treatment - it's a sentence to read, not a single word
     to react to. */
  .cloze-sentence {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
  }
  .cloze-blank {
    display: inline-block;
    min-width: 60px;
    border-bottom: 2px solid var(--ochre);
    color: var(--ochre);
  }
  /* Cloze answer reveal: the full (un-blanked) Spanish sentence next to
     its English translation, shown after every cloze answer regardless of
     correct/wrong/near-miss. Flex-wrap so the pair sits side by side on
     wider screens but drops to stacked lines on a narrow phone rather
     than overflowing. */
  .cloze-reveal {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--outline);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  .cloze-reveal-es {
    color: var(--cream);
    font-weight: 600;
  }
  .cloze-reveal-divider {
    color: var(--outline);
  }
  .cloze-reveal-en {
    color: var(--cream-dim);
    font-style: italic;
  }
  .speak-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--outline);
    color: var(--cream);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .speak-btn.speaking {
    border-color: var(--label);
    color: var(--label);
    animation: pulse 0.9s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,255,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(201,168,255,0); }
  }
  .speak-btn.big {
    width: 78px;
    height: 78px;
    font-size: 30px;
    margin: 6px auto 4px;
    background: rgba(201,168,255,0.14);
    border-color: var(--label);
  }
  /* Scramble's speak button: same round-button family as .speak-btn (so
     .speak-btn.speaking's existing pulse animation still applies unchanged
     while it's talking), but taller/rectangular to fit a caption under the
     icon - unlike other modes, Scramble's "hear it" plays the full ordered
     sentence, which functionally *is* the answer, so it needs to visibly
     read as a hint rather than an innocuous replay button. */
  .speak-btn.stacked-hint {
    width: auto;
    min-width: 46px;
    height: 44px;
    padding: 4px 12px;
    border-radius: 14px;
    flex-direction: column;
    gap: 1px;
  }
  .hint-icon-glyph { font-size: 16px; line-height: 1; }
  .hint-icon-label {
    font-family: 'Sora', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--cream-dim);
  }
  /* Cloze "hint" button - hears the full sentence (target word included),
     unlike .speak-btn on a cloze question which deliberately only reads the
     surrounding context. Same round-button family as .speak-btn, just wide
     enough for a short text label instead of a single emoji glyph. */
  .hint-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--outline);
    color: var(--cream);
    width: 46px;
    height: 34px;
    border-radius: 17px;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .hint-btn.speaking {
    border-color: var(--label);
    color: var(--label);
    animation: pulse 0.9s ease-in-out infinite;
  }
  .audio-hint { font-size: 12px; color: var(--cream-dim); text-align: center; }
  .glow-orb-progress.streak-orb {
    background: radial-gradient(circle at 35% 30%, #FFF3DD, #FFC163 55%, #B97C1A 100%);
    box-shadow: 0 0 24px rgba(255,193,99,0.65);
    color: #3A2508;
  }

  /* True/False: the "word = claim" display card. The True/False buttons
     themselves reuse .option-btn/.option-list below unchanged - this is
     just the claim being judged. */
  .tf-claim {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: 'Sora', sans-serif;
  }
  .tf-claim-es { font-weight: 700; font-size: 26px; }
  .tf-claim-eq { font-size: 20px; color: var(--cream-dim); }
  .tf-claim-en { font-weight: 700; font-size: 26px; color: var(--ochre); }

  /* Sentence Scramble: the sentence strip (placed words + empty slots)
     lives in the prompt card; the tap-to-place word bank lives below it in
     the normal bottomHtml area, styled off the same tokens as .option-btn
     rather than introducing a new palette. */
  .scramble-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .scramble-slot {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .scramble-slot.empty {
    border-bottom: 2px solid var(--outline);
    background: transparent;
  }
  .scramble-slot.filled {
    background: rgba(255,193,99,0.16);
    border: 1px solid var(--ochre);
    color: var(--cream);
  }
  .scramble-slot.filled.tappable { cursor: pointer; }
  .scramble-slot.filled.wrong-pos {
    background: rgba(255,77,109,0.18);
    border-color: var(--red);
  }
  .scramble-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
  }
  .scramble-pill {
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid var(--outline);
    background: var(--bg-card-alt);
    color: var(--cream);
    font-size: 15px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .scramble-pill:hover { border-color: var(--label); }
  /* A placed tile stays in the DOM (see render-quiz.js) instead of being
     removed from the bank array, so its slot keeps its exact width/height
     and position - visibility:hidden preserves layout space, unlike
     display:none, which is what was causing the remaining pills to jump
     into the gap every time one was placed. */
  .scramble-pill.placed {
    visibility: hidden;
    pointer-events: none;
  }

  .option-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .option-btn {
    width: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--outline);
    background: var(--bg-card-alt);
    color: var(--cream);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .option-btn:hover:not(:disabled) { border-color: var(--label); }
  .option-btn:disabled { cursor: default; }
  .option-btn.correct-choice { background: rgba(45,212,191,0.22); border-color: var(--green); color: #B8FFF3; }
  .option-btn.wrong-choice { background: rgba(255,77,109,0.22); border-color: var(--red); }
  .option-btn.pop-anim { animation: pop 0.4s ease; }
  .option-btn.shake-anim { animation: shake 0.4s ease; }
  @keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
  }
  @keyframes colorMismatch {
    from { border-color: var(--outline); }
    to { border-color: var(--red); }
  }
  @keyframes colorMatched {
    from { background: var(--bg-card-alt); border-color: var(--outline); color: var(--cream); }
    to { background: rgba(45,212,191,0.2); border-color: var(--green); color: #B8FFF3; }
  }

  .countdown-bar-track {
    height: 4px;
    background: var(--outline);
    border-radius: 2px;
    overflow: hidden;
    margin: 10px 0 4px;
  }
  .countdown-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--ochre);
    border-radius: 2px;
    transition: width 3s linear;
  }

  .feedback {
    padding: 16px 18px;
    border-radius: 16px;
    margin-bottom: 12px;
    animation: pop 0.3s ease;
  }
  .feedback.correct {
    background: rgba(45,212,191,0.14);
    border: 1px solid var(--green);
  }
  .feedback.wrong {
    background: rgba(255,77,109,0.14);
    border: 1px solid var(--red);
    animation: shake 0.4s ease;
  }
  .feedback .title { font-weight: 700; }
  .feedback .answer { font-size: 14px; color: var(--cream-dim); margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .feedback .answer strong { color: var(--cream); }

  .score-big {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .new-best {
    text-align: center;
    color: var(--ochre);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .streak-line {
    text-align: center;
    font-size: 14px;
    color: var(--cream-dim);
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
  }

  .mosaic {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-bottom: 28px;
  }
  .mosaic .sq { aspect-ratio: 1; border-radius: 50%; }

  .review-title { font-weight: 700; margin-bottom: 12px; }
  .review-item {
    font-size: 14px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--outline);
  }
  .review-item:last-child { border-bottom: none; margin-bottom: 0; }
  .review-item .from { color: var(--cream-dim); }
  .review-item .to { color: var(--cream); font-weight: 600; }
  .review-item .yours { color: var(--terracotta); font-size: 13px; margin-top: 2px; }


  .settings-group { margin-bottom: 16px; text-align: left; }
  .settings-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cream-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  .segmented { display: flex; gap: 6px; flex-wrap: wrap; }
  .seg-btn {
    flex: 1;
    min-width: 64px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--outline);
    background: var(--bg-card-alt);
    color: var(--cream-dim);
    font-size: 13px;
    font-weight: 600;
  }
  .seg-btn.active {
    background: var(--ochre);
    border-color: var(--ochre);
    color: #241608;
  }
  #answermode-group .seg-btn { padding: 5px 10px; }