/* Brain Training: shared look for the Daily Brain Workout and every practice page. */
.bt-page { max-width: 760px; }
.bt-card { border-radius: var(--radius); padding: 24px; margin-top: 14px; }
.bt-card h2 { font-size: 22px; font-weight: 800; }
.wk-intro-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.wk-intro-head p { margin: 0; }
.wk-start { width: 100%; margin-top: 18px; }
.bt-link { display: block; text-align: center; margin-top: 14px; font-weight: 700; }
.bt-note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }

/* Today's five games */
.wk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--chip); border: 1px solid var(--glass-edge); }
.wk-num { width: 22px; text-align: center; font-weight: 800; color: var(--muted); }
.wk-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(160deg, var(--o1), var(--o2)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 4px 10px rgba(20, 33, 58, .18); }
.wk-txt { display: flex; flex-direction: column; line-height: 1.25; }
.wk-txt span { font-size: 14px; color: var(--muted); }

/* Between games */
.wkb-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; }
.wkb-head h2 { margin: 0; }
.wkb-head .orb svg { width: 34px; height: 34px; }
#wkb-how { margin-bottom: 18px; }
.wk-between .btn { width: 100%; }

/* Progress dots during the workout */
.wk-steps { list-style: none; display: flex; gap: 8px; justify-content: center; padding: 0; margin: 0 0 14px; }
.wk-step { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted);
  background: var(--chip); border: 1px solid var(--glass-edge); transition: transform .3s, background .3s, color .3s; }
.wk-step.now { color: #fff; background: linear-gradient(160deg, var(--o1), var(--o2)); transform: scale(1.15); box-shadow: 0 6px 16px rgba(20, 33, 58, .2); }
.wk-step.done { color: #fff; background: linear-gradient(160deg, var(--o1), var(--o2)); opacity: .55; }

/* Heads-up display */
.bt-play { padding: 18px; }
.bt-hudrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bt-hudlabel { font-weight: 700; color: var(--muted); }
.bt-score { font-family: var(--display); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bt-score.bump { animation: bt-bump .35s ease; }
@keyframes bt-bump { 40% { transform: scale(1.25); } }
.bt-timebar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bt-timebar span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #4FD1A5, #2D5BD0); border-radius: inherit; }
.bt-timebar.low span { background: linear-gradient(90deg, #FF8A65, #E5484D); }
.bt-stage { position: relative; min-height: 340px; margin-top: 16px; display: flex; flex-direction: column; align-items: center; }
.bt-info { text-align: center; font-weight: 700; min-height: 1.5em; margin-bottom: 10px; }
.bt-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 88px; font-weight: 800; color: var(--select); }
.bt-count.tick { animation: bt-tick .6s ease-out; }
@keyframes bt-tick { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.bt-pop { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 800; font-size: 22px; animation: bt-pop .9s ease-out forwards; text-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.bt-pop.good { color: var(--ok); }
.bt-pop.bad { color: var(--red); }
@keyframes bt-pop { to { transform: translate(-50%, -160%); opacity: 0; } }

/* Shared answer buttons look (games add their own layout) */
.bt-stage kbd { position: absolute; top: 6px; right: 8px; font: 700 11px var(--body); color: var(--muted); opacity: .7; }
@media (hover: none) { .bt-stage kbd { display: none; } }
.bt-stage .ok { box-shadow: 0 0 0 3px var(--ok), var(--lift) !important; }
.bt-stage .bad { box-shadow: 0 0 0 3px var(--red), var(--lift) !important; animation: bt-shake .3s; }
@keyframes bt-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Practice stats */
.bt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt-stats div { padding: 12px; border-radius: 16px; background: var(--chip); border: 1px solid var(--glass-edge); text-align: center; }
.bt-stats span { display: block; font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.bt-stats strong { font-family: var(--display); font-size: 30px; }
.bt-levelmsg { font-weight: 700; margin-top: 6px; }

/* Results */
.wk-result, .bt-result { text-align: center; }
.wk-score { font-family: var(--display); font-size: clamp(56px, 14vw, 84px); font-weight: 800; line-height: 1; margin: 6px 0;
  background: linear-gradient(135deg, #2D5BD0, #8C5BFF 50%, #E5484D); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .wk-score { background-image: linear-gradient(135deg, #86C8FF, #CDB8FF 50%, #FFB4A6); }
.wk-pct { font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.wk-skills { display: grid; gap: 10px; text-align: left; margin: 0 auto 18px; max-width: 520px; }
.wk-skill { display: grid; grid-template-columns: auto minmax(0, 1fr) 90px 44px; align-items: center; gap: 10px; }
.wk-skname { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wk-skname span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.wk-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--o1), var(--o2)); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.wk-pc { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.wk-history { margin: 6px auto 16px; max-width: 520px; }
.wk-hist { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 130px; margin-top: 8px; }
.wk-hcol { flex: 1; max-width: 52px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.wk-hbar { width: 100%; border-radius: 10px 10px 4px 4px; background: var(--track); }
.wk-hcol.now .wk-hbar { background: linear-gradient(180deg, #8C9BFF, #2D5BD0); }
.wk-hval { font-size: 11px; font-weight: 700; color: var(--muted); }
.wk-hday { font-size: 12px; color: var(--muted); }
.wk-actions { justify-content: center; margin: 16px 0 10px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .bt-card { padding: 18px 14px; }
  .wk-skill { grid-template-columns: auto minmax(0, 1fr) 60px 40px; gap: 8px; }
  .bt-stage { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-count.tick, .bt-score.bump, .bt-pop { animation: none; }
}