/* ==========================================================================
   VanSpark — Brain Challenge player (Doc 12)
   Loaded only on /brain-challenge* pages via page_css, AFTER vanspark.css +
   vanspark-a11y.css.

   2026 rebuild: every colour, radius, shadow, font and spacing step below
   comes from the --vs-* tokens in css/vanspark.css. Nothing is hardcoded and
   no legacy --vanspark-* / --neutral-* / --radius-* variable is referenced
   any more (main.css no longer loads, so those were resolving to nothing).

   Class names are FROZEN: js/bc-player.js queries [data-bc-options],
   button.bc-option, .bc-busy, .is-selected and [data-bc-feedback]; the
   a11y layer keys off .bc-player / .age-3-5 / [data-age-group] and the
   .q-* contract classes. None of them may be renamed.

     01 .q-* token bridge      05 options
     02 cards + decoration     06 feedback
     03 player chrome          07 result + review
     04 question + hint        08 age 3-5 comfort
   ========================================================================== */

/* ------------------------------------------------- 01 .q-* token bridge -- */
/* vanspark-a11y.css (Doc 05 §7) still owns the age-band type scale and tap
   targets — that is the accessibility rule of record and stays untouched.
   It reaches for --font-heading / --neutral-* / --radius-* though, which the
   2026 system renamed. These four rules re-point the same classes at the
   --vs-* tokens without changing a single size the a11y layer sets. */

.q-text {
  font-family: var(--vs-font-display);
  color: var(--vs-ink);
}
.q-option {
  font-family: var(--vs-font);
  color: var(--vs-ink);
}
.q-option-letter {
  font-family: var(--vs-font-display);
}
.q-hint,
.q-answer {
  font-family: var(--vs-font);
  color: var(--vs-body);
}
.q-progress {
  font-family: var(--vs-font-display);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vs-purple);
}

/* -------------------------------------------- 02 cards + decoration ------ */

/* Column card used for age cards, type chips and challenge cards. Sits on
   top of .vs-card and only adds the column flow + bottom-anchored CTA. */
.bc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.bc-card > .vs-btn { margin-top: auto; }
.bc-card--age { border-top: 4px solid var(--bc-accent, var(--vs-purple)); }

/* Today's set reads a shade warmer than the free set. */
.bc-card--today { border-color: #F8E3AE; }

/* Locked cards: padlock + blur decoration; type names stay readable. */
.bc-card--locked {
  background: var(--vs-surface-alt);
  border-color: var(--vs-line-strong);
  box-shadow: none;
}
.bc-blur { filter: blur(3px); opacity: .7; }
.bc-lock-float {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vs-purple-soft);
  color: var(--vs-purple);
  font-size: .95rem;
  line-height: 1;
}

/* Emoji tile — the one bit of decoration these pages keep. */
.bc-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--vs-4);
  border-radius: var(--vs-r-md);
  background: var(--bc-soft, var(--vs-purple-soft));
  font-size: 1.7rem;
  line-height: 1;
}
.bc-emoji--lg {
  width: 76px;
  height: 76px;
  border-radius: var(--vs-r-lg);
  font-size: 2.4rem;
}
.bc-bigemoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: var(--vs-3);
}

.bc-age-name { display: block; margin-bottom: var(--vs-2); }
.bc-type-name { display: block; }

/* Hero tick list */
.bc-tick { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.bc-tick i { color: var(--vs-green); font-size: 1rem; line-height: 1; }

/* ------------------------------------------------- 03 player chrome ------ */

.bc-play-stage { min-height: 60vh; }

.bc-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--vs-font-display);
  font-size: var(--vs-t-sm);
  font-weight: 700;
  color: var(--vs-ink);
  background: var(--vs-yellow-soft);
  border: 1px solid #F8E3AE;
  border-radius: var(--vs-r-pill);
  padding: 7px 16px;
}

.bc-progress {
  height: 10px;
  border-radius: var(--vs-r-pill);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line-strong);
  overflow: hidden;
}
.bc-progress-fill {
  height: 100%;
  border-radius: var(--vs-r-pill);
  background: linear-gradient(90deg, var(--vs-purple), var(--vs-pink));
  transition: width var(--vs-slow);
}

/* ------------------------------------------------- 04 question + hint ---- */

.bc-question-card { box-shadow: var(--vs-sh-md); }

.bc-question-text {
  font-family: var(--vs-font-display);
  font-size: clamp(1.25rem, 1.08rem + .74vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--vs-ink);
  margin: 0 0 var(--vs-5);
}
.bc-question-text:focus-visible { outline-offset: 4px; }

.bc-question-image {
  max-width: 100%;
  max-height: 17rem;
  width: auto;
  margin-inline: auto;
  border-radius: var(--vs-r-md);
  border: 1px solid var(--vs-line);
  box-shadow: var(--vs-sh-sm);
}

/* Hint (B2) — a native <details>, so it opens with JS disabled. */
.bc-hint {
  background: var(--vs-yellow-soft);
  border: 1px solid #F8E3AE;
  border-radius: var(--vs-r-md);
  padding: 14px 18px;
  margin-bottom: var(--vs-6);
}
.bc-hint summary {
  cursor: pointer;
  font-family: var(--vs-font-display);
  font-weight: 650;
  color: var(--vs-ink);
  list-style-position: inside;
}
.bc-hint summary:hover { color: var(--vs-purple); }
.bc-hint[open] summary { margin-bottom: var(--vs-2); }
.bc-hint .q-hint { margin: 0; }

.bc-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ------------------------------------------------------- 05 options ------ */

.bc-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vs-3);
}
@media (min-width: 576px) {
  .bc-options { grid-template-columns: 1fr 1fr; }
}

.bc-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 14px 18px;
  text-align: left;
  font-family: var(--vs-font);
  font-size: 1.0325rem;
  font-weight: 600;
  color: var(--vs-ink);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line-strong);
  border-radius: var(--vs-r-md);
  box-shadow: var(--vs-sh-sm);
  transition: transform var(--vs-fast), border-color var(--vs-fast),
              background-color var(--vs-fast), box-shadow var(--vs-fast);
}
/* The a11y layer centres every control inside .bc-player; option content
   must stay left-aligned, so match its specificity and win on order. */
.bc-player .bc-option { justify-content: flex-start; }

button.bc-option { cursor: pointer; }
button.bc-option:hover,
button.bc-option:focus-visible {
  border-color: var(--vs-purple);
  background: var(--vs-purple-soft);
  transform: translateY(-2px);
  box-shadow: var(--vs-sh-md);
}
button.bc-option:active { transform: translateY(0) scale(.99); }

/* JS enhancement states (bc-player.js) */
.bc-options-form.bc-busy button.bc-option { pointer-events: none; opacity: .55; }
.bc-options-form.bc-busy button.bc-option.is-selected {
  opacity: 1;
  border-color: var(--vs-purple);
  background: var(--vs-purple-soft);
  box-shadow: var(--vs-ring);
}

.bc-option-letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-family: var(--vs-font-display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--vs-purple-deep);
  background: var(--vs-purple-soft);
  border: 1px solid var(--vs-purple-tint);
}
.bc-option-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bc-option-img {
  flex: 1 1 auto;
  max-width: 100%;
  max-height: 9rem;
  object-fit: contain;
  border-radius: var(--vs-r-sm);
}
.bc-options--images .bc-option { flex-direction: column; align-items: flex-start; }

/* ---- Feedback state (B5). The doubled class matches the specificity of
        the a11y layer's .q-option.is-correct / .is-wrong rules. ---- */
.bc-option--frozen { box-shadow: none; }

.bc-option.bc-option--right {
  border-color: #C7EFD6;
  background: var(--vs-green-soft);
  color: #146C38;
}
.bc-option--right .bc-option-letter {
  color: var(--vs-green);
  border-color: #C7EFD6;
  background: var(--vs-surface);
}
.bc-option.bc-option--wrong {
  border-color: #F8D3DF;
  background: var(--vs-red-soft);
  color: #A81E4C;
}
.bc-option--wrong .bc-option-letter {
  color: var(--vs-red);
  border-color: #F8D3DF;
  background: var(--vs-surface);
}
.bc-option--chosen { box-shadow: var(--vs-sh-sm); }
.bc-option-mark { margin-left: auto; font-size: 1.25rem; line-height: 1; }
.bc-option--right .bc-option-mark { color: var(--vs-green); }
.bc-option--wrong .bc-option-mark { color: var(--vs-red); }

/* ------------------------------------------------------ 06 feedback ------ */

.bc-feedback {
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-r-md);
  background: var(--vs-surface-alt);
  padding: 16px 20px;
}
.bc-feedback:focus-visible { outline-offset: 4px; }
.bc-feedback--right {
  border-color: #C7EFD6;
  background: var(--vs-green-soft);
  color: #146C38;
}
.bc-feedback--wrong {
  border-color: var(--vs-purple-tint);
  background: var(--vs-purple-soft);
  color: var(--vs-purple-deep);
}
.bc-feedback-title {
  font-family: var(--vs-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
}
.bc-feedback .q-answer { color: inherit; }

/* Gentle sparkle on a correct answer — pure CSS, no confetti library.
   vanspark-a11y.css already kills ALL animation under
   prefers-reduced-motion; the guard here is belt-and-braces. */
@keyframes bc-sparkle-pop {
  0%   { transform: scale(.96); box-shadow: 0 0 0 0 rgba(22, 163, 74, .28); }
  60%  { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { transform: scale(1);    box-shadow: none; }
}
.bc-sparkle { animation: bc-sparkle-pop .6s var(--vs-ease) 1; }
@media (prefers-reduced-motion: reduce) {
  .bc-sparkle { animation: none; }
}

/* ---------------------------------------------- 07 result + review ------- */

.bc-result-card { box-shadow: var(--vs-sh-md); }

.bc-result-stars { font-size: 2.8rem; line-height: 1; }
.bc-star { color: var(--vs-line-strong); margin: 0 .1em; }
.bc-star--on { color: var(--vs-yellow); }

.bc-result-score {
  font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem);
  color: var(--vs-purple);
  line-height: 1.05;
}
.bc-result-of {
  font-size: .48em;
  font-weight: 600;
  color: var(--vs-faint);
}

.bc-review-row { display: flex; align-items: flex-start; gap: var(--vs-4); }
.bc-review-item { border-left: 4px solid transparent; }
.bc-review--right { border-left-color: var(--vs-green); }
.bc-review--wrong { border-left-color: var(--vs-pink); }
.bc-review-mark {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--vs-faint);
}
.bc-review--right .bc-review-mark { color: var(--vs-green); }
.bc-review--wrong .bc-review-mark { color: var(--vs-pink); }
.bc-review-q { font-weight: 700; }
.bc-text-right { color: var(--vs-green); }
.bc-text-wrong { color: var(--vs-pink); }
.bc-review-img {
  max-height: 7rem;
  width: auto;
  border-radius: var(--vs-r-sm);
  border: 1px solid #C7EFD6;
}

/* -------------------------------------------- 08 age 3-5 extra comfort --- */
/* Type sizes are the a11y layer's job; only the box grows here. */
.age-3-5 .bc-option { min-height: 72px; }
.age-3-5 .bc-emoji { width: 68px; height: 68px; font-size: 2rem; }