/* Phase 0.9 Play. Uses the app's tokens (warm ivory, charcoal, sage and gold, white cards, soft radius); no new fonts or colours beyond a
   quiet correct / not-quite pair, and state is never colour alone (each state also carries a mark and a word). */
.bc-is-play .bc-sr-only { position: absolute; }
.bc-play-stats { margin-block-end: 1rem; }
.bc-play-stats .bc-stat-value { font-family: var(--bc-heading); font-size: 1.6rem; display: block; color: var(--bc-ink); }
.bc-play-next-level { font-size: 1.15rem !important; }
.bc-play-overall { margin-block-end: 1.25rem; }
.bc-play-guest { margin-block: 1rem 1.5rem; }
.bc-play-guest a { font-weight: 600; }
.bc-play-rec-list { list-style: none; padding: 0; margin: 0; }
.bc-play-rec-list li + li { border-block-start: 1px solid var(--bc-border); }
.bc-play-rec-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: .9rem 1.25rem; text-decoration: none; color: var(--bc-ink); font-size: .9375rem; }
.bc-play-rec-list a:hover { background: var(--bc-sage-wash); }
.bc-play-recs { margin-block-end: 1.75rem; }
.bc-play-mastery { display: grid; gap: .5rem; margin-block-end: 1rem; font-size: .8125rem; color: var(--bc-muted); }
.bc-play-mastery.bc-card { padding: 1rem 1.25rem; }
.bc-play-mastery progress, .bc-play-level progress, .bc-play-overall progress { appearance: none; width: 100%; height: 6px; border: 0; border-radius: 4px; background: var(--bc-accent-soft); }
.bc-play-mastery progress::-webkit-progress-bar, .bc-play-level progress::-webkit-progress-bar { background: var(--bc-accent-soft); border-radius: 4px; }
.bc-play-mastery progress::-webkit-progress-value, .bc-play-level progress::-webkit-progress-value { background: var(--bc-accent); border-radius: 4px; }
.bc-play-mastery progress::-moz-progress-bar, .bc-play-level progress::-moz-progress-bar { background: var(--bc-accent); border-radius: 4px; }
.bc-play-game .bc-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.bc-play-game .bc-button { min-height: 48px; }

/* v0.10.1: a livelier game-selection experience. Play may run a touch warmer/bolder than the core site's calm
   palette (per the brief), but stays inside the same token family -- every colour below is the existing accent,
   gold or copper, plus one new teal, never an unrelated hue. Nothing here touches the frozen engine, XP values,
   gates, mastery or cooldown logic; it is presentation only, keyed off the game's own existing data attribute. */
.bc-is-play { --bc-play-quiz: var(--bc-accent); --bc-play-verse: var(--bc-gold); --bc-play-who: var(--bc-copper); --bc-play-match: #4f7d73; }
.bc-play-game { position: relative; overflow: hidden; --bc-game-accent: var(--bc-accent); }
.bc-play-game[data-bc-play-game="quiz"] { --bc-game-accent: var(--bc-play-quiz); }
.bc-play-game[data-bc-play-game="verse"] { --bc-game-accent: var(--bc-play-verse); }
.bc-play-game[data-bc-play-game="who"] { --bc-game-accent: var(--bc-play-who); }
.bc-play-game[data-bc-play-game="match"] { --bc-game-accent: var(--bc-play-match); }
.bc-play-game::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 4px; background: var(--bc-game-accent); }
.bc-play-game .bc-game-symbol { background: color-mix(in srgb, var(--bc-game-accent) 16%, var(--bc-surface)); color: var(--bc-game-accent); }
@media (prefers-reduced-motion: no-preference) {
  .bc-play-game { transition: transform 240ms var(--bc-ease-cinematic), box-shadow 240ms var(--bc-ease-cinematic); }
  .bc-play-game:hover { transform: translateY(-4px); box-shadow: var(--bc-shadow-lift); }
}

/* Level chooser */
.bc-play-timer-choice { margin-block-end: 1rem; font-size: .875rem; }
.bc-play-timer-choice label { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.bc-play-timer-choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--bc-accent); }
.bc-play-level-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.bc-play-level { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.1rem 1.25rem; }
.bc-play-level > div { flex: 1 1 200px; display: grid; gap: .35rem; }
.bc-play-level h3 { font-size: 1.25rem; }
.bc-play-level.is-locked { background: #f4f2ea; }
.bc-play-level .bc-button { min-height: 48px; min-width: 8.5rem; }
.bc-play-level .bc-icon { width: 1rem; height: 1rem; }

/* Set player */
.bc-play-set { display: grid; gap: 1.25rem; max-width: 46rem; }
.bc-play-set-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.bc-play-set-title { font-size: 1.5rem !important; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.bc-play-timer { font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; color: var(--bc-gold); margin: 0; }
.bc-play-progress { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bc-play-count { font-size: .875rem; color: var(--bc-muted); margin: 0; }
.bc-play-dots { display: inline-flex; gap: .4rem; }
.bc-play-dot { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--bc-gold-line); background: transparent; }
.bc-play-dot.is-correct { background: var(--bc-accent); border-color: var(--bc-accent); }
.bc-play-dot.is-wrong { background: transparent; border-color: #8a4b3f; border-style: dashed; }
.bc-play-dot.is-unanswered { border-style: dotted; }
.bc-play-dot.is-current { border-color: var(--bc-ink); box-shadow: 0 0 0 3px rgb(121 99 56 / 22%); }
.bc-play-stage { background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); padding: 1.5rem 1.25rem; display: grid; gap: 1.25rem; outline-offset: 4px; }
.bc-play-prompt { font-family: var(--bc-heading); font-size: 1.45rem !important; line-height: 1.4; }
.bc-play-choose { margin: 0; }
.bc-play-options, .bc-play-col { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.bc-play-option, .bc-play-tile { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 56px; padding: .8rem 1rem; text-align: start; color: var(--bc-ink); background: var(--bc-surface); border: 1.5px solid var(--bc-border); border-radius: 14px; font-size: 1rem; line-height: 1.45; transition: border-color .15s var(--bc-ease), background-color .15s var(--bc-ease); }
.bc-play-option:hover:not(:disabled), .bc-play-tile:hover:not(:disabled) { border-color: var(--bc-accent); background: var(--bc-sage-wash); }
.bc-play-option:disabled, .bc-play-tile:disabled { color: var(--bc-ink); }
.bc-play-letter { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bc-accent-soft); color: var(--bc-accent); font-weight: 600; font-size: .875rem; }
.bc-play-option-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bc-play-mark { flex: 0 0 auto; font-size: .8125rem; font-weight: 600; }
.bc-play-option.is-picked, .bc-play-tile.is-picked { border-color: var(--bc-gold); background: #f6f0df; }
.bc-play-option.is-correct, .bc-play-tile.is-matched { border-color: var(--bc-accent); background: #e9f0e1; }
.bc-play-option.is-correct .bc-play-mark, .bc-play-tile.is-matched .bc-play-mark { color: #2f4a2a; }
.bc-play-option.is-wrong { border-color: #8a4b3f; background: #f8ece8; border-style: dashed; }
.bc-play-option.is-wrong .bc-play-mark { color: #7a3a2f; }
.bc-play-tile.is-nomatch { border-color: #8a4b3f; background: #f8ece8; border-style: dashed; }
.bc-play-feedback { margin: 0; min-height: 1.6em; font-size: .9375rem; }
.bc-play-feedback.is-good { color: #2f4a2a; font-weight: 600; }
.bc-play-feedback.is-bad { color: #7a3a2f; font-weight: 600; }
.bc-play-next-row, .bc-play-who-actions, .bc-play-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0; }
.bc-play-clues { margin: 0; padding-inline-start: 0; list-style: none; display: grid; gap: .7rem; }
.bc-play-clues li { padding: .85rem 1rem; background: var(--bc-sage-wash); border-radius: 12px; border: 1px solid var(--bc-border); line-height: 1.5; }
.bc-play-match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.bc-play-tile { flex-wrap: wrap; }
.bc-play-tile .bc-play-mark { width: 100%; }
@media (max-width: 30rem) { .bc-play-match { gap: .5rem; } .bc-play-tile { padding: .7rem .75rem; font-size: .9375rem; } }
.bc-play-error { margin: 0; background: #f8ece8; color: #7a3a2f; }

/* Review */
.bc-play-summary { display: grid; gap: .9rem; padding: 1.5rem 1.25rem; margin-block-end: 1.5rem; }
.bc-play-summary-list { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .25rem; }
.bc-play-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.bc-play-review-item { padding: 1.25rem; display: grid; gap: .65rem; }
.bc-play-review-item.is-correct { border-inline-start: 5px solid var(--bc-accent); }
.bc-play-review-item.is-wrong { border-inline-start: 5px dashed #8a4b3f; }
.bc-play-review-item.is-unanswered { border-inline-start: 5px dotted var(--bc-gold-line); }
.bc-play-result-line { margin: 0; font-size: .9375rem; }
.bc-play-mark[aria-hidden] { font-weight: 700; }
.bc-play-facts { margin: 0; display: grid; gap: .6rem; }
.bc-play-facts dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bc-muted); }
.bc-play-facts dd { margin: 0; font-size: 1rem; }
.bc-play-answer { font-family: var(--bc-heading); font-size: 1.3rem; margin: 0; }
.bc-play-sub { font-size: 1rem !important; font-family: var(--bc-body) !important; color: var(--bc-muted); margin-block-start: .25rem; }
.bc-play-pairs { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.bc-play-pairs li { padding: .55rem .75rem; background: var(--bc-sage-wash); border-radius: 10px; }
.bc-play-clues li.is-unseen { opacity: .75; }
.bc-play-why { margin: 0; font-size: .9375rem; color: var(--bc-ink); }
.bc-play-links { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* My Play progress */
.bc-play-stat-list { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.bc-play-stat-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem 1.25rem; }
.bc-play-stat-list li + li { border-block-start: 1px solid var(--bc-border); }
.bc-play-stars { display: inline-flex; align-items: center; gap: .5rem; color: var(--bc-gold); }

/* Support and Me rows */
.bc-support { display: grid; gap: 1rem; padding: 1.5rem 1.25rem; max-width: 46rem; }
.bc-support-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .4rem; }
.bc-support a { font-weight: 600; overflow-wrap: anywhere; }
.bc-play-row, .bc-support-row { color: inherit; text-decoration: none; }
.bc-play-row h3, .bc-support-row h3 { color: var(--bc-ink); }

/* v0.10.1: restrained feedback motion. Each answer button/tile is freshly rendered per question (see
   assets/js/play.js), so these keyframes always play once, cleanly, the first time a result class is added --
   never a repeating or "stuck" animation. All well under the 1100ms timed auto-advance and the existing 500ms
   wrong-pair-clear timeout, so nothing here fights the game's own timing. Reward/XP text and the results page use
   a calmer, single settle-in, matching Today's completion animation rather than inventing a new idiom. */
@keyframes bc-play-correct-pop { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes bc-play-wrong-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes bc-play-feedback-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bc-play-dot-pop { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes bc-play-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .bc-play-option.is-correct, .bc-play-tile.is-matched { animation: bc-play-correct-pop 360ms var(--bc-ease-cinematic); }
  .bc-play-option.is-wrong, .bc-play-tile.is-nomatch { animation: bc-play-wrong-shake 340ms var(--bc-ease); }
  .bc-play-feedback:not(:empty) { animation: bc-play-feedback-in 320ms var(--bc-ease-cinematic) backwards; }
  .bc-play-dot { animation: bc-play-dot-pop 260ms var(--bc-ease-cinematic) backwards; }
  .bc-play-summary { animation: bc-play-reveal 700ms var(--bc-ease-cinematic) backwards; }
  .bc-play-summary .bc-stat-value, .bc-play-summary h2 { animation: bc-play-reveal 600ms var(--bc-ease-cinematic) 160ms backwards; }
  .bc-play-review-list > li { animation: bc-play-reveal 500ms var(--bc-ease-cinematic) backwards; }
}
@media (prefers-reduced-motion: no-preference) {
  .bc-play-stats > *, .bc-play-overall, .bc-games > * { animation: bc-play-reveal 650ms var(--bc-ease-cinematic) backwards; }
  .bc-play-stats > :nth-child(2) { animation-delay: 60ms; }
  .bc-play-stats > :nth-child(3) { animation-delay: 120ms; }
  .bc-play-overall { animation-delay: 160ms; }
  .bc-games > :nth-child(2) { animation-delay: 90ms; }
  .bc-games > :nth-child(3) { animation-delay: 160ms; }
  .bc-games > :nth-child(4) { animation-delay: 230ms; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-play-option, .bc-play-tile { transition: none; }
}