/* BioglowRX engine — page shell, game screens and shared reward visuals.
   Component styles come from assets/bundle.css (br- prefix); this file adds the layout
   and the pieces that only games need. Colours are tokens from assets/tokens.css. */

html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
.br-wrap { max-width: var(--wrap-max); margin: 0 auto; padding-block: var(--space-4-5) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4-5); }
.br-wrap.is-wide { max-width: 1120px; }
.br-header .br-brand { text-decoration: none; color: inherit; }
.br-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font: 400 12px var(--font-mono); color: var(--muted); text-align: center; }
.br-foot svg { width: 18px; height: 20px; }
.br-footline { display: flex; align-items: center; justify-content: center; gap: 8px; }
.br-foot a.br-phbadge { display: block; line-height: 0; text-decoration: none; }
.br-phbadge img { width: 250px; height: 54px; max-width: 100%; }
.br-foot a { color: var(--muted); }
.br-crumb { font: 600 12px var(--font-mono); color: var(--muted); text-decoration: none; letter-spacing: .04em; }
.br-crumb:hover { color: var(--accent); }

/* menu */
.br-seg { display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg); padding: 4px; border-radius: var(--radius-tile-lg); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.br-seg button { padding: 8px 12px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--muted); transition: transform .12s ease; }
.br-seg button:active { transform: scale(.96); }
.br-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.br-hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; max-width: 60ch; line-height: 1.45; }
.br-card > .br-hero { margin-bottom: var(--space-4-5); }
.menu-in .br-mode { animation: br-slidein .4s backwards; }
.menu-in .br-mode:nth-child(2){animation-delay:.04s}.menu-in .br-mode:nth-child(3){animation-delay:.08s}.menu-in .br-mode:nth-child(4){animation-delay:.12s}.menu-in .br-mode:nth-child(5){animation-delay:.16s}.menu-in .br-mode:nth-child(6){animation-delay:.2s}

/* question screen */
.br-prompt { text-align: center; padding: 18px 0 8px; animation: br-slidein .3s; }
.br-prompt .q { font: 600 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.br-prompt .big { font-size: clamp(34px, 8vw, 56px); font-weight: 900; letter-spacing: -.02em; margin: 8px 0 0; text-wrap: balance; line-height: 1.05; }
.br-prompt .big.mono { font-family: var(--font-mono); }
.br-prompt .sub { font: 400 14px var(--font-mono); color: var(--muted); margin-top: 6px; }
.br-prompt .br-tile { margin: 10px auto 0; }
.br-answers { margin-top: 18px; }
.br-ans.is-sym { font-size: 28px; }
.br-ans.is-small { font-size: 16px; }
.br-feedback { min-height: 52px; margin-top: 14px; text-align: center; font-size: 15px; line-height: 1.45; color: var(--muted); }
.br-feedback b { color: var(--ink); }
.br-feedback .ok { color: var(--good); font-weight: 800; } .br-feedback .no { color: var(--bad); font-weight: 800; }
.br-feedback .br-next { display: block; width: fit-content; margin: 8px auto 0; }
.br-fbpic { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 8px auto 0; max-width: 56ch; text-align: left; }
.br-fbpic svg { width: 88px; flex: none; border-radius: var(--radius-tile-lg); }
.br-fbpic span { display: block; font-size: 14px; }
.br-wrong-flash { animation: br-flash .45s; }

/* grid map (periodic table and any other position-based diagram) */
.br-mapwrap { overflow-x: auto; margin-top: 6px; }
.br-map { display: grid; gap: 2px; min-width: 0; }
.br-cell { aspect-ratio: 5/6; border-radius: var(--radius-cell); position: relative; display: grid; place-items: center; color: var(--tile-ink); font-weight: 800; font-size: clamp(8px, 1.7vw, 17px); line-height: 1; padding: 0; overflow: hidden; transition: transform .12s ease; }
.br-cell:active { transform: scale(.9); }
.br-cell small { position: absolute; top: 2px; left: 3px; font: 600 clamp(5px, .75vw, 9px) var(--font-mono); opacity: .8; }
.br-cell.is-blank:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.br-cell.is-ok { outline: 3px solid var(--good); outline-offset: -1px; z-index: 1; animation: br-okpop .45s cubic-bezier(.3,1.6,.5,1); }
.br-cell.is-no { outline: 3px solid var(--bad); outline-offset: -1px; z-index: 1; }
.br-cell.is-ph { background: transparent; border: 1px dashed var(--line); color: var(--muted); font: 600 clamp(5px, .8vw, 10px) var(--font-mono); }
.br-cell.is-dim { opacity: .35; }
.br-gaprow { grid-column: 1 / -1; height: 8px; }
.br-tip { font-size: 12px; color: var(--muted); margin: 8px 0 0; text-align: center; }
.br-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.br-legend span { display: inline-flex; align-items: center; gap: 5px; }
.br-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* card list (explore for games without a map) */
.br-cardlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.br-cardlist .br-tile { width: 100%; height: auto; aspect-ratio: 8/9; }

/* explore detail extras */
#br-detail { margin-top: 16px; }
.br-detail .br-tile { flex: none; }
.br-about .sum dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.br-about .sum dt { font: 400 12px var(--font-mono); color: var(--muted); padding-top: 2px; }
.br-about .sum dd { margin: 0; }
.br-about .more { grid-column: 1 / -1; justify-self: start; font-size: 13px; font-weight: 600; color: var(--accent); }

/* match pairs */
.br-mgrid { margin-top: 18px; }
.br-mc { border: 0; }
.br-mc.clue { border: 1px solid var(--line); }

/* rewards */
#br-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }
.br-milestone .br-next { margin-top: 8px; }

/* hub + subject pages */
.br-hubhero { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.br-hubhero h1 { margin: 0; font-size: clamp(30px, 6vw, 48px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.br-hubhero p { margin: 0; font: 400 13px var(--font-mono); color: var(--muted); max-width: 46ch; }
.br-subjects { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.br-subj .icon { display: grid; place-items: center; }
.br-subj .icon svg { width: 92px; height: 92px; }
.br-continue { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius-inner); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); transition: transform .12s ease, border-color .12s; }
.br-continue:hover { border-color: var(--accent); }
.br-continue:active { transform: scale(.98); }
.br-continue .t { flex: 1; min-width: 0; }
.br-continue h3 { margin: 2px 0 0; font-size: 18px; font-weight: 800; }
.br-continue p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.br-featured .tiles { display: grid; grid-template-columns: repeat(3, 96px); gap: 10px; }
.br-featured .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.br-subhero { display: flex; align-items: center; gap: 20px; }
.br-subhero .ic { flex: none; width: 112px; height: 124px; border-radius: var(--radius-card); display: grid; place-items: center; color: var(--tile-ink); position: relative; }
.br-subhero .ic svg { width: 64px; height: 64px; }
.br-subhero .ic small { position: absolute; top: 7px; left: 10px; font: 600 12px var(--font-mono); }
.br-subhero h1 { margin: 4px 0 0; font-size: clamp(30px, 6vw, 46px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; }
.br-subhero p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 60ch; }
.br-chaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.br-chap .ic svg { width: 28px; height: 28px; }
.br-chap.is-live { grid-column: span 2; flex-direction: row; gap: 20px; align-items: center; }
.br-chap.is-live .mini { display: grid; grid-template-columns: repeat(3, 62px); gap: 6px; flex: none; }
.br-chap.is-live .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.br-chap.is-live h3 { font-size: 22px; font-weight: 900; margin: 0; }
.br-chap.is-soon { cursor: default; }
.br-chap.is-soon:hover { border-color: var(--line); transform: none; }
.br-chap .plan { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.4; }
.br-empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

@media (max-width: 900px) {
  .br-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-chaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .br-subjects { grid-template-columns: 1fr 1fr; }
  .br-subjects .br-subj { height: 184px; padding: 12px 12px 14px; }
  .br-subjects .br-subj .icon svg { width: 60px; height: 60px; }
  .br-subjects .br-subj .nm { font-size: 15px; }
  .br-subjects .br-subj:last-child { grid-column: 1 / -1; }
  .br-featured .tiles { grid-template-columns: repeat(4, 62px); order: -1; }
  .br-featured .tiles .br-tile { width: 62px; height: 70px; } .br-featured .tiles .br-tile b { font-size: 24px; } .br-featured .tiles .br-tile small { font-size: 9px; top: 4px; left: 5px; } .br-featured .tiles .br-tile em { font: 400 8px var(--font-mono); bottom: 4px; }
  .br-chaps { grid-template-columns: 1fr; }
  .br-chap.is-live { grid-column: auto; flex-direction: column; align-items: stretch; }
  .br-subhero .ic { width: 84px; height: 94px; } .br-subhero .ic svg { width: 46px; height: 46px; }
}
@media (max-width: 520px) {
  .br-card { padding: var(--space-3-5); }
  .br-ans { font-size: 17px; min-height: var(--tap-min); }
}

/* icon tiles (games whose items are drawn as line icons, not letters) */
.br-tile.is-icon b svg { width: 50%; height: auto; display: block; margin: 0 auto; }
.br-tile.is-icon b { display: grid; place-items: center; width: 100%; }
.br-tile.is-md.is-icon b svg { width: 46%; }
.br-tile.is-sm.is-icon b svg { width: 46%; margin-top: -6px; }
.br-cell svg { width: 46%; height: auto; }
.br-card-tile { aspect-ratio: 8/9; font-size: 18px; }
.br-card-tile svg { width: 40%; margin-top: -10px; }
.br-card-tile em { position: absolute; bottom: 6px; left: 3px; right: 3px; font: 600 10px var(--font-display); font-style: normal; text-align: center; line-height: 1.15; }
.br-cardlist { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.br-mc.item b svg { width: 56px; height: 56px; display: block; margin: -10px auto 0; }
.br-milestone .mtile b svg { width: 64px; height: 64px; }
.br-prompt .big.is-text { font-size: clamp(22px, 5.2vw, 32px); font-weight: 800; letter-spacing: -.01em; max-width: 30ch; margin-inline: auto; }
@media (max-width: 520px) { .br-mc.item b svg { width: 30px; height: 30px; margin-top: -6px; } .br-card-tile em { font-size: 9px; } }

/* ---------- Match Pairs v2: two decks with their own backs ---------- */
.br-mhow { font-size: 14px; color: var(--muted); margin-top: 8px; }
.br-mkey { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.br-mkey.is-item { background: var(--accent); color: var(--accent-ink); }
.br-mkey.is-clue { background: var(--cat-amber); color: var(--tile-ink); }
.br-mrow { margin: 16px 0 8px; text-align: center; }
.br-mgrid { margin-top: 0; }
.br-mc.is-down { background-image: none; }
.br-mc.is-down em { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 600 10px var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.br-mc.back-item { background: var(--accent); color: var(--accent-ink); }
.br-mc.back-clue { background: var(--cat-amber); color: var(--tile-ink); }
.br-mc.is-locked { opacity: .45; cursor: not-allowed; }
.br-mc.is-locked:active { transform: none; }
@media (max-width: 520px) { .br-mc.is-down em { font-size: 7.5px; bottom: 5px; } .br-mrow { margin: 10px 0 6px; } }

/* ---------- Sequence ---------- */
.br-seq { list-style: none; margin: 16px auto 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.br-slot { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-inner); border: 2px dashed var(--line); background: var(--bg); cursor: pointer; }
.br-slot .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font-mono); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.br-slot .t { font-weight: 700; font-size: 15px; }
.br-slot.is-filled { border-style: solid; background: var(--surface); }
.br-slot.is-ok { border-color: var(--good); background: var(--good-tint); }
.br-slot.is-no { border-color: var(--bad); background: var(--bad-tint); }
.br-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 640px; margin: 0 auto; }
.br-step { padding: 10px 14px; border-radius: var(--radius-pill); border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; transition: transform .12s ease, opacity .12s; }
.br-step:hover { border-color: var(--accent); }
.br-step:active { transform: scale(.96); }
.br-step.is-used { opacity: .25; pointer-events: none; }
.br-correct { max-width: 560px; margin: 14px auto 0; padding: 12px 16px; border-radius: var(--radius-inner); border: 1px solid var(--line); background: var(--bg); }
.br-correct ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14px; }
.br-ghost:disabled, .br-next:disabled { opacity: .45; cursor: default; }

/* ---------- True or Myth ---------- */
.br-tm .br-ans { min-height: 72px; font-size: 20px; }

/* ---------- Build It ---------- */
.br-build { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.br-atom { width: 180px; height: 180px; }
.br-steppers { display: grid; gap: 10px; }
.br-stepper { display: grid; grid-template-columns: 92px 44px 48px 44px auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-inner); border: 2px solid transparent; }
.br-stepper .lb { font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.br-stepper .br-ghost { padding: 6px 0; font-size: 20px; font-weight: 800; text-align: center; }
.br-stepper .v { font-size: 26px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.br-stepper .want { font: 600 12px var(--font-mono); color: var(--bad); }
.br-stepper.is-ok { border-color: var(--good); background: var(--good-tint); } .br-stepper.is-ok .want { color: var(--good); }
.br-stepper.is-no { border-color: var(--bad); background: var(--bad-tint); }

.br-mc.clue .t.is-long { font-size: 13px; line-height: 1.2; }
.br-mc.clue { padding-top: 18px; }
@media (max-width: 520px) { .br-mc.clue .t.is-long { font-size: 9.5px; } .br-mc.clue { padding: 14px 3px 3px; } }

/* ---------- lab mini games ---------- */
.lab-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px 18px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-inner); margin-top: 4px; }
.lab-intro p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.lab-intro .life { border-left: 3px solid var(--accent); padding-left: var(--space-3); }
.lab-eq { font: 600 15px var(--font-mono); color: var(--accent); }
.lab-stage { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: center; margin-top: 10px; }
.lab-scenewrap { display: grid; place-items: center; background: linear-gradient(180deg, var(--surface), var(--bg)); border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 6px; }
.lab-scene { width: 100%; max-width: 330px; height: auto; display: block; }
.lab-side { display: flex; flex-direction: column; gap: 10px; }
.lab-read { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); }
.lab-read .br-label { margin: 0 0 4px; }
.lab-read b { font: 800 34px var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lab-read span { display: block; font: 400 12px var(--font-mono); color: var(--muted); }
.lab-read.is-flask span { font-size: 13px; color: var(--ink); }
.lab-hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); min-height: 3em; }
.lab-hint b { color: var(--ink); }
.lab-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.lab-btn { min-width: 96px; padding: 14px 18px; border-radius: var(--radius-inner); border: 2px solid var(--line); background: var(--bg); font-weight: 800; font-size: 16px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .1s ease, border-color .12s, background .12s; }
.lab-btn:active:not(:disabled) { transform: scale(.96); }
.lab-btn.is-pour { flex: 1; max-width: 220px; border-color: var(--accent); color: var(--accent); }
.lab-btn.is-pour.is-on { background: var(--accent); color: var(--accent-ink); transform: scale(.97); }
.lab-btn:disabled { opacity: .5; cursor: default; }
.lab-end { font-size: 17px; padding: 14px 32px; }
.lab-end:disabled { opacity: .5; }
.lab-calc { margin: 14px auto 0; max-width: 520px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); }
.lab-calc p { margin: 0 0 8px; color: var(--ink); }
.lab-calc .br-answers { margin-top: 10px; }
.lab-result { margin-top: 12px; }
.lab-result p { color: var(--ink); max-width: 56ch; margin: 6px auto 0; }
.lab-stars { font-size: 40px; color: var(--streak-hot); letter-spacing: 4px; line-height: 1; }
.lab-stars span { color: var(--line); }
.br-chap.is-lab { border: 2px dashed var(--accent); }
.br-chap.is-lab .lab-tag { margin-left: auto; }
.br-labs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -8px; }
@media (max-width: 700px) {
  .lab-intro { grid-template-columns: 1fr; }
  .lab-stage { grid-template-columns: 1fr; }
  .lab-side { display: grid; grid-template-columns: 1fr 1fr; }
  .lab-side .lab-hint { grid-column: 1 / -1; min-height: 2.6em; }
  .lab-scene { max-width: 260px; }
  .br-labs { grid-template-columns: 1fr; }
}

/* ---------- study notes, key facts, diagrams ---------- */
.br-hero.has-art { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; text-align: left; }
.br-heroart svg { width: 132px; height: auto; display: block; border-radius: var(--radius-tile-lg); }
@media (max-width: 560px) { .br-heroart svg { width: 96px; } }
.br-notes { max-width: 68ch; margin: 0 auto; }
.br-notes .intro { font-size: 16px; line-height: 1.55; margin: 14px 0; }
.br-notesart svg { width: 100%; max-width: 260px; display: block; margin: 8px auto 0; border-radius: var(--radius-tile-lg); }
.br-note { border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 14px 16px; margin-top: 12px; background: var(--surface); }
.br-note h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 17px; }
.br-note h3 i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--tile-ink); flex: none; }
.br-note h3 i svg { width: 18px; height: 18px; }
.br-note p { margin: 0 0 8px; line-height: 1.55; font-size: 15px; }
.br-note .pts { margin: 0 0 8px; padding-left: 20px; line-height: 1.5; font-size: 15px; }
.br-note details { margin: 6px 0 8px; }
.br-note summary { cursor: pointer; font: 600 13px var(--font-mono); color: var(--accent); padding: 4px 0; }
.br-note .its { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.br-note .its li { margin: 3px 0; }
.br-note .its .k { font: 400 12px var(--font-mono); color: var(--muted); }
.br-note .tip { background: var(--bg); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 8px 0 0; }
.br-note .tip b { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-right: 6px; }
.br-about .facts ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.5; font-size: 14px; }
.br-about .facts li { margin: 3px 0; }
.br-pics figure.is-dg svg { max-width: 220px; }
.dg-hl { animation: dgPulse 1.6s ease-in-out infinite; }
@keyframes dgPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .dg-hl { animation: none; } }

/* ---------- lab kit: steps, hints, pH meter, curve ---------- */
.lab-how { margin-top: 14px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-inner); }
.lab-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.lab-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; padding: 6px 8px; border-radius: 10px; transition: background .2s; }
.lab-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-mono); background: var(--bg); border: 1.5px solid var(--line); }
.lab-steps li.is-now { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lab-steps li.is-now .n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lab-steps li.is-done { opacity: .6; }
.lab-steps li.is-done .n { background: var(--good); border-color: var(--good); color: #fff; font-size: 0; }
.lab-steps li.is-done .n::after { content: "✓"; font-size: 14px; }
.lab-howrun { margin: 14px auto 0; max-width: 620px; border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 8px 12px; }
.lab-howrun summary, .lab-howcalc summary { cursor: pointer; font: 600 13px var(--font-mono); color: var(--accent); padding: 4px 0; }
.lab-howcalc { margin: 8px 0; }
.lab-howcalc ol { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.lab-hintbar { max-width: 620px; margin: 14px auto 0; text-align: center; }
.lab-hintbox p { text-align: left; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--cat-lemon) 45%, var(--bg)); color: var(--ink); font-size: 14px; line-height: 1.5; }
.lab-hintbox p > b:first-child { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.lab-read.is-ph b { font-size: 28px; }
.lab-phbar { display: block; height: 8px; border-radius: 4px; margin-top: 6px; background: linear-gradient(90deg, #E8503A, #F2A33A 30%, #F2E03A 45%, #4CB050 52%, #3A8FD6 75%, #5A3AD6); position: relative; opacity: .35; }
.lab-phbar i { position: absolute; left: 0; top: -3px; height: 14px; width: 0; border-right: 3px solid var(--ink); background: transparent !important; }
.lab-curve { margin: 14px auto 0; max-width: 420px; }
.lab-curve svg { width: 100%; height: auto; display: block; }
.lab-curve figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
@media (max-width: 700px) { .lab-side .lab-read.is-flask { grid-column: 1 / -1; } .lab-side .lab-read.is-flask span { display: inline; } }

/* ---------- hub illustrations (engine/art.js) ---------- */
.br-subj .art { display: grid; place-items: center; }
.br-subj .art svg { width: 116px; height: 116px; display: block; }
.br-featured .art svg { width: 220px; height: 220px; display: block; }
.br-subhero .ic.has-art svg { width: 104px; height: 104px; }
.br-chap.is-lab .labart svg { width: 100%; max-height: 150px; display: block; border-radius: var(--radius-inner); margin-bottom: 8px; }
@media (max-width: 560px) {
  .br-subjects .br-subj .art svg { width: 84px; height: 84px; }
  .br-featured .art { order: -1; justify-self: center; }
  .br-featured .art svg { width: 160px; height: 160px; }
}
.br-quit { min-height: 44px; }

/* ---------- Case Files + Calculator Challenge ---------- */
.br-case { max-width: 620px; margin: 6px auto 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); text-align: left; }
.br-casehead { display: flex; gap: 12px; align-items: center; }
.br-casehead .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--tile-ink); }
.br-casehead .ic svg { width: 26px; height: 26px; }
.br-casehead .br-label { margin: 0 0 2px; }
.br-casehead h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.br-case .who { margin: 12px 0 0; font-weight: 800; font-size: 15px; }
.br-case .story { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.br-case .story b { white-space: nowrap; }
.br-casedata { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.br-casedata div { padding: 5px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.br-casedata dt { display: inline; color: var(--muted); font-weight: 600; margin-right: 5px; }
.br-casedata dd { display: inline; margin: 0; font-weight: 800; font-family: var(--font-mono); }
.br-casefound { margin: 12px 0 0; padding: 10px 12px 10px 30px; border-radius: 10px; background: var(--good-tint); font-size: 14px; display: grid; gap: 4px; }
.br-casefound b { margin-right: 4px; }
.br-casestep { text-align: center; margin: 14px 0 -4px; }
.br-prompt .big.br-caseq { font-size: 20px; line-height: 1.35; max-width: 620px; margin: 10px auto 0; }
@media (max-width: 520px) { .br-prompt .big.br-caseq { font-size: 18px; } }
.br-caseans { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
.br-caseans .br-ans { min-height: 54px; font-size: 16px; font-weight: 700; text-align: left; padding: 10px 16px; line-height: 1.35; }
.br-why { max-width: 620px; margin: 8px auto 0; color: var(--ink); text-align: left; font-size: 15px; }
.br-formula { margin: 12px 0 0; font: 700 15px var(--font-mono); }
.br-formula span { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.br-calcin { max-width: 420px; margin: 18px auto 0; text-align: center; }
.br-calcin .row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.br-calcin input { width: 170px; min-height: var(--tap-min, 48px); padding: 10px 14px; font: 800 26px var(--font-mono); text-align: center; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-inner); }
.br-calcin input:focus { outline: none; border-color: var(--accent); }
.br-calcin input.is-ok { border-color: var(--good); background: var(--good-tint); }
.br-calcin input.is-no { border-color: var(--bad); background: var(--bad-tint); }
.br-calcin .unit { font: 800 20px var(--font-mono); color: var(--muted); min-width: 30px; text-align: left; }
.br-calcin .br-btns { justify-content: center; margin-top: 14px; }
.br-calcin [hidden] { display: none; }
.br-correct { text-align: left; color: var(--ink); }
.br-worked { margin-top: 12px; }
.br-tipline { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .br-case { padding: 12px 13px; }
  .br-case .story { font-size: 15px; }
  .br-calcin input { width: 140px; font-size: 24px; }
}

/* ---------- XP and levels ---------- */
.br-plus { white-space: nowrap; }
.br-xpline .bar, .br-lvnow .bar, .br-levelcard .bar, .lab-xp .bar { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.br-xpline .bar > i, .br-lvnow .bar > i, .br-levelcard .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #2FB67C); border-radius: inherit; transition: width .5s ease; }
.br-badge { position: relative; flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--tile-ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.br-badge svg { width: 21px; height: 21px; }
.br-badge small { position: absolute; right: -5px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: var(--surface); font: 700 10px/18px var(--font-mono); text-align: center; }
.br-badge.is-mid { width: 64px; height: 64px; border-radius: 16px; } .br-badge.is-mid svg { width: 36px; height: 36px; }
.br-badge.is-mid small { min-width: 24px; height: 24px; font-size: 12px; line-height: 24px; border-radius: 12px; }
.br-badge.is-big { width: 112px; height: 112px; border-radius: 26px; box-shadow: var(--shadow-milestone); } .br-badge.is-big svg { width: 62px; height: 62px; }
.br-badge.is-big small { min-width: 34px; height: 34px; font-size: 16px; line-height: 34px; border-radius: 17px; right: -8px; bottom: -8px; }
.br-milestone.is-level .br-badge.is-big { margin-bottom: 12px; animation: br-spinin .8s cubic-bezier(.2,1.4,.4,1); }
.br-milestone .br-lvname { font-size: 24px; font-weight: 900; color: var(--ink); margin: -2px 0 0; }
.br-xpbonus { font-weight: 800 !important; color: var(--accent) !important; }
.br-milestone.is-levels { place-items: start center; overflow-y: auto; padding: 16px; }
.br-milestone.is-levels .box { width: 100%; max-width: 620px; align-items: stretch; text-align: left; gap: 14px; padding: 20px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-milestone); animation: br-fadein .2s; position: relative; }
.br-lvclose { align-self: flex-end; }
.br-lvnow { display: flex; gap: 20px; align-items: center; }
.br-lvnow h2 { font-size: clamp(26px, 6vw, 34px) !important; margin: 2px 0 2px !important; }
.br-lvnow p { color: var(--muted); margin: 0 0 8px; font-size: 15px; }
.br-lvnow > div { flex: 1; min-width: 0; }
.br-xphow { border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 10px 14px; background: var(--bg); }
.br-xphow summary { font-weight: 800; cursor: pointer; }
.br-xphow ul { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 5px; font-size: 14px; }
.br-lvlist .br-label { margin: 6px 0 6px; }
.br-lvlist ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.br-lvlist li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.br-lvlist li span:not(.br-badge) { flex: 1; min-width: 0; display: grid; }
.br-lvlist li b { font-size: 14px; } .br-lvlist li small { font: 600 11px var(--font-mono); color: var(--muted); }
.br-lvlist li > i { font-style: normal; font-weight: 800; color: var(--good); }
.br-lvlist li > i.you { font: 700 11px var(--font-mono); padding: 2px 8px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); }
.br-lvlist li.is-now { border: 2px solid var(--accent); background: var(--surface); }
.br-lvlist li.is-locked { opacity: .55; } .br-lvlist li.is-locked .br-badge { filter: grayscale(.85); }
.br-xpline { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 440px; margin: 18px auto 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; }
.br-xpline > span:not(.br-badge) { flex: 1; display: grid; gap: 5px; font-size: 15px; }
.br-xpline b { color: var(--accent); font-size: 18px; font-weight: 900; }
.br-xpline em { font-style: normal; color: var(--muted); font-size: 13px; }
.br-xpline small { font: 600 11px var(--font-mono); color: var(--muted); }
.lab-xp { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 12px 0 0; }
.lab-xp b { color: var(--accent); }
.br-levelcard { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: transform .12s, border-color .12s; }
.br-levelcard:hover { border-color: var(--accent); } .br-levelcard:active { transform: scale(.99); }
.br-levelcard .t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.br-levelcard .t b { font-size: 20px; font-weight: 900; }
.br-levelcard .line { color: var(--muted); font-size: 14px; }
.br-levelcard .bar { max-width: 420px; height: 9px; }
.br-levelcard small { font: 600 12px var(--font-mono); color: var(--muted); }
.br-levelcard .go { font-weight: 800; color: var(--accent); white-space: nowrap; }
.br-toast { position: fixed; left: 50%; top: 14px; z-index: 70; transform: translateX(-50%); padding: 10px 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-weight: 800; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: br-fadein .25s; transition: opacity .4s; white-space: nowrap; }
.br-toast.is-out { opacity: 0; }
@media (max-width: 620px) {
  .br-lvlist ol { grid-template-columns: 1fr; }
  .br-lvnow { flex-direction: column; text-align: center; gap: 12px; }
  .br-lvnow .bar { margin: 0 auto; width: 100%; }
  .br-levelcard { flex-wrap: wrap; gap: 14px; padding: 14px; }
  .br-levelcard .go { flex-basis: 100%; }
}

/* ---------- featured carousel ---------- */
.br-featured.br-carousel { display: block; position: relative; overflow: hidden; padding-bottom: 20px; }
.br-slides { display: grid; }
.br-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.br-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.br-carnav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.br-carbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; color: var(--accent-ink); font-size: 22px; font-weight: 800; line-height: 1; display: grid; place-items: center; opacity: .9; }
.br-carbtn:hover { opacity: 1; background: rgba(255,255,255,.12); }
.br-carpause { font-size: 12px; letter-spacing: -1px; }
.br-dots { display: flex; gap: 2px; }
.br-dot { width: 28px; height: 40px; display: grid; place-items: center; }
.br-dot::before { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--accent-ink); opacity: .4; transition: width .3s, opacity .3s; }
.br-dot[aria-current="true"]::before { width: 24px; opacity: 1; }
.br-dot:focus-visible, .br-carbtn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (max-width: 620px) {
  .br-slide { grid-template-columns: 1fr; gap: 18px; }
  .br-featured.br-carousel { padding-bottom: 14px; }
  .br-carnav { gap: 4px; }
  .br-dot { width: 22px; }
}

/* ---------- back / menu buttons: big, clear and the same everywhere ---------- */
.br-quit, .br-crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px 8px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 800 15px var(--font-display); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: border-color .12s, background .12s, transform .12s; }
.br-quit > span, .br-crumb > span { font-size: 18px; line-height: 1; color: var(--accent); }
.br-quit:hover, .br-crumb:hover { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.br-quit:active, .br-crumb:active { transform: scale(.97); }
.br-quit:focus-visible, .br-crumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.br-backrow { margin: 0 0 16px; }
.br-backrow.is-bottom { margin: 22px 0 0; }
.br-top { flex-wrap: wrap; row-gap: 10px; }
.br-top .br-bar { min-width: 120px; }
.br-lvclose { align-self: flex-end; }
@media (max-width: 520px) {
  .br-quit, .br-crumb { font-size: 14px; padding: 7px 14px 7px 11px; }
}
.br-stepper .lb { text-transform: none; letter-spacing: 0; font-size: 14px; }   /* keep chemical formulas exact (Zn, HCl) */

/* ---------- hands-on lab strip on subject pages (compact, high contrast) ---------- */
.br-labs { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0 4px; }
.br-labstrip { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: var(--radius-inner); background: var(--accent); color: var(--accent-ink); text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .12s, box-shadow .12s; }
.br-labstrip:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 38%, transparent); }
.br-labstrip:active { transform: scale(.99); }
.br-labstrip .lab-thumb { flex: none; width: 76px; height: 76px; border-radius: 14px; background: rgba(255,255,255,.16); display: grid; place-items: center; overflow: hidden; }
.br-labstrip .lab-thumb svg { width: 76px; height: 76px; display: block; }
.br-labstrip .lab-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.br-labstrip .eyebrow { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.br-labstrip b { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.br-labstrip .lab-line { font-size: 14px; line-height: 1.4; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.br-labstrip .lab-go { flex: none; padding: 10px 22px; border-radius: var(--radius-pill); background: var(--accent-ink); color: var(--accent); font-weight: 800; font-size: 15px; }
.br-labstrip.is-soon { opacity: .7; }
@media (max-width: 560px) {
  .br-labstrip { gap: 12px; padding: 10px 12px 10px 10px; }
  .br-labstrip .lab-thumb, .br-labstrip .lab-thumb svg { width: 56px; height: 56px; }
  .br-labstrip b { font-size: 17px; }
  .br-labstrip .lab-line { -webkit-line-clamp: 1; font-size: 13px; }
  .br-labstrip .lab-go { padding: 8px 14px; font-size: 14px; }
}

/* ---------- pop-up sheet (study notes, explore cards, lab instructions) ---------- */
html.br-locked, html.br-locked body { overflow: hidden; }
.br-sheetwrap { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 55%, rgba(0,0,0,.45)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: br-fadein .18s; }
.br-sheetwrap.is-out { opacity: 0; transition: opacity .15s; }
.br-sheet { width: 100%; max-width: 620px; max-height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; animation: br-sheetin .25s cubic-bezier(.2,1,.3,1); outline: none; }
.br-sheet.is-wide { max-width: 760px; }
.br-sheethead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.br-sheetnav { display: flex; align-items: center; gap: 8px; }
.br-sheetnav .br-carbtn { color: var(--ink); border-color: var(--line); background: var(--bg); }
.br-sheetnav .br-carbtn:hover { border-color: var(--accent); }
.br-sheetnav .ct { font: 600 13px var(--font-mono); color: var(--muted); min-width: 48px; text-align: center; }
.br-sheetbody { overflow-y: auto; padding: 18px 20px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.br-sheettitle { margin: 0 0 12px; font-size: 24px; font-weight: 900; }
.br-sheetbody .br-detail { margin-top: 0; }
.br-sheetbody .br-note.is-sheet { margin: 0; border: none; padding: 0; background: none; }
.br-sheetbody .br-note.is-sheet h3 { font-size: 22px; }
@keyframes br-sheetin { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 620px) {
  .br-sheetwrap { place-items: end stretch; padding: 0; }
  .br-sheet, .br-sheet.is-wide { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); }
  .br-sheetbody { padding: 14px 16px 22px; }
  @keyframes br-sheetin { from { transform: translateY(40%); } to { transform: none; } }
}

/* ---------- study notes: topic cards ---------- */
.br-notesintro { display: flex; gap: 18px; align-items: flex-start; }
.br-notesintro .br-notesart { flex: none; }
.br-notesintro .br-notesart svg { width: 132px; height: 132px; }
.br-notesintro .intro { margin: 0; }
.br-notecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.br-notecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border: 1.5px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color .12s, transform .12s; min-height: 72px; }
.br-notecard:hover { border-color: var(--accent); } .br-notecard:active { transform: scale(.98); }
.br-notecard > i { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--tile-ink); }
.br-notecard > i svg { width: 22px; height: 22px; }
.br-notecard > span:not(.go) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.br-notecard b { font-size: 16px; }
.br-notecard .l { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.br-notecard small { font: 600 11px var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.br-notecard .go { font-size: 26px; color: var(--accent); font-weight: 800; }
@media (max-width: 620px) {
  .br-notecards { grid-template-columns: 1fr; }
  .br-notesintro { flex-direction: column; align-items: center; }
  .br-notesintro .br-notesart svg { width: 112px; height: 112px; }
}

/* ---------- answer explanation docked at the bottom when it would be off-screen ---------- */
.br-feedback.is-dock { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; width: min(780px, 100%); max-height: 62vh; overflow-y: auto; margin: 0; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 34px rgba(0,0,0,.2); animation: br-dockin .28s cubic-bezier(.2,1,.3,1); }
.br-feedback.is-dock::before { content: ""; display: block; width: 44px; height: 5px; margin: -6px auto 10px; border-radius: 3px; background: var(--line); }
body.br-hasdock { padding-bottom: 62vh; }
@keyframes br-dockin { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

/* ---------- labs: compact menu, step bar, docked task panel ---------- */
.lab-infobtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.lab-infobtn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; min-height: 64px; }
.lab-infobtn:hover { border-color: var(--accent); }
.lab-infobtn .ic { font-size: 22px; }
.lab-infobtn > span:not(.ic):not(.go) { flex: 1; display: grid; gap: 2px; }
.lab-infobtn b { font-size: 16px; } .lab-infobtn small { color: var(--muted); font-size: 13px; }
.lab-infobtn .go { font-size: 26px; color: var(--accent); font-weight: 800; }
.lab-sheet .life { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-inner); background: var(--bg); }
.lab-sheet p { line-height: 1.55; }
.lab-nowbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.lab-nowbar .now { flex: 1; font-size: 14px; line-height: 1.4; }
.lab-nowbar .now .lab-nowlabel { display: block; font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.lab-nowbar .lab-howbtn { flex: none; padding: 8px 14px; font-size: 14px; }
.lab-dock { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; width: min(820px, 100%); max-height: 60vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 34px rgba(0,0,0,.22); animation: br-dockin .28s cubic-bezier(.2,1,.3,1); }
.lab-dockbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.lab-dockbar .t { font: 700 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lab-dockmin { padding: 6px 14px; font-size: 13px; }
.lab-dockbody { overflow-y: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.lab-dockbody > * { margin-top: 0 !important; }
.lab-dock.is-min .lab-dockbody { display: none; }
.lab-dock[hidden] { display: none; }
@media (max-width: 620px) {
  .lab-infobtns { grid-template-columns: 1fr; }
  .lab-nowbar { flex-wrap: wrap; }
  .lab-dock { max-height: 58vh; }
}

/* ---------- Explore: cards grouped by family ---------- */
.br-group { margin-top: 18px; }
.br-group:first-of-type { margin-top: 14px; }
.br-grouphead { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 900; }
.br-grouphead i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--tile-ink); }
.br-grouphead i svg { width: 18px; height: 18px; }
.br-grouphead small { font: 700 12px var(--font-mono); color: var(--muted); padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.br-grouphead::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 4px; }

/* ---------- progress, certificates, diplomas, trophy cabinet (engine/progress.js) ---------- */
.br-pbar { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.br-pbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #2FB67C); border-radius: inherit; transition: width .5s ease; }
.br-pbar.is-ok > i { background: var(--good); }
.br-ring { flex: none; color: var(--accent); }
.br-ring.is-done { color: var(--good); }
.br-chip.is-done { background: var(--good); border-color: var(--good); color: #fff; }
.br-chip.is-prog { background: var(--cat-amber); border-color: transparent; color: var(--tile-ink); }

/* header trophy link */

/* game menu card + mode ticks */
.br-gprog { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); }
.br-gprog.is-done { border-color: var(--good); background: var(--good-tint); }
.br-gprog .t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.br-gprog .t b { font-size: 15px; font-weight: 900; }
.br-gprog small { font: 600 11.5px var(--font-mono); color: var(--muted); line-height: 1.4; }
.br-certbtn { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 42px; padding: 8px 14px; border: 2px solid #B8902A; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer; }
.br-certbtn svg { width: 19px; height: 19px; color: #B8902A; }
.br-certbtn:hover { background: #fbf3dc; color: #1d2a33; }
@media (max-width: 620px) { .br-gprog { flex-wrap: wrap; } .br-gprog .br-certbtn { flex-basis: 100%; justify-content: center; } }
.br-mode .ic { position: relative; }
.br-tick { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #fff; font: 900 13px/22px var(--font-sans, sans-serif); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.br-mode.is-passed { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.br-mode .best.is-ok { color: var(--good); }
.br-mode .best.is-low { color: var(--streak-hot); }
.br-mode .best.is-todo { color: var(--muted); }

/* end-of-round progress line */
.br-progline { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; margin: 16px auto 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; }
.br-progline:hover { border-color: var(--accent); }
.br-progline.is-done { border-color: var(--good); background: var(--good-tint); }
.br-progline span { display: grid; gap: 2px; }
.br-progline b { font-size: 15px; font-weight: 900; }
.br-progline small { font: 600 11.5px var(--font-mono); color: var(--muted); }
.br-modelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br-modelist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 90px 44px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.br-modelist .mk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: var(--blank); color: var(--muted); }
.br-modelist li.is-ok .mk { background: var(--good); color: #fff; }
.br-modelist li.is-low .mk { background: var(--cat-amber); color: var(--tile-ink); }
.br-modelist .nm { font-weight: 700; font-size: 14px; }
.br-modelist .pc { font: 700 13px var(--font-mono); text-align: right; }

/* hub: subject tiles, cabinet card */
.br-subjprog { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid; gap: 3px; }
.br-subjprog .br-pbar { height: 6px; background: rgba(255,255,255,.55); border-color: transparent; }
.br-subjprog .br-pbar > i { background: #0E6B66; }
.br-subjprog small { font: 600 11px var(--font-mono); color: var(--tile-ink); }
.br-subjects .br-subj { padding-bottom: 46px; }
.br-cabcard { display: flex; align-items: center; gap: 18px; width: 100%; box-sizing: border-box; padding: 14px 20px; border: 2px solid #B8902A; border-radius: var(--radius-card); background: linear-gradient(120deg, var(--surface) 55%, color-mix(in srgb, #E8CF7A 22%, var(--surface))); color: var(--ink); text-decoration: none; transition: transform .12s; }
.br-cabcard:hover { transform: translateY(-2px); }
.br-cabcard .cabart { flex: none; width: 58px; }
.br-cabcard .cabart svg { width: 58px; height: auto; display: block; }
.br-cabcard .t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.br-cabcard .t b { font-size: 17px; font-weight: 900; }
.br-cabcard small { font: 600 12px var(--font-mono); color: var(--muted); }
.br-cabcard .go { font-weight: 800; color: #9c7a17; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .br-cabcard .go { color: #E8CF7A; } }
:root[data-theme="dark"] .br-cabcard .go { color: #E8CF7A; }
@media (max-width: 620px) { .br-cabcard { flex-wrap: wrap; gap: 12px; padding: 14px; } .br-cabcard .go { flex-basis: 100%; } }

/* subject page */
.br-subprog { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.br-subprog.is-done { border: 2px solid var(--good); }
.br-subprog .t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.br-subprog .t b { font-size: 17px; font-weight: 900; }
.br-subprog small { font: 600 12px var(--font-mono); color: var(--muted); }
@media (max-width: 620px) { .br-subprog { flex-wrap: wrap; } .br-subprog .br-certbtn { flex-basis: 100%; justify-content: center; } }
.br-chprog { display: grid; grid-template-columns: minmax(60px, 1fr) auto auto auto; align-items: center; gap: 10px; }
.br-chprog .pc { font: 800 13px var(--font-mono); }
.br-chprog .n { font: 600 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.br-chap.is-done { border-color: var(--good); position: relative; }
.br-chap.is-done::after { content: "✓"; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--good); color: #fff; font-weight: 900; font-size: 16px; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
@media (max-width: 620px) { .br-chprog { grid-template-columns: minmax(40px, 1fr) auto auto; } .br-chprog .br-chip { grid-column: 1 / -1; justify-self: start; } }

/* certificate frames (sheet, pop-up) */
.br-certsvg { display: block; width: 100%; height: auto; }
.br-certframe { padding: 10px; border-radius: 6px; background: linear-gradient(135deg, #5b3b1e, #8a5a2b 40%, #4a2f17); box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.12); }
.br-certframe.is-diploma { background: linear-gradient(135deg, #8d6c12, #E8CF7A 30%, #C9A227 60%, #7a5d0f); }
.br-certframe svg { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.br-milestone.is-award .box { max-width: 560px; }
.br-awardpop { width: 100%; margin: 0 auto; padding: 7px; border-radius: 5px; background: linear-gradient(135deg, #5b3b1e, #8a5a2b 40%, #4a2f17); box-shadow: 0 10px 26px rgba(0,0,0,.25); animation: br-awardin .7s cubic-bezier(.2,1.3,.4,1); }
@keyframes br-awardin { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .br-awardpop { animation: none; } }

/* the cabinet page */
.br-cabhero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.br-cabhero h1 { margin: 2px 0 6px; font-size: 40px; font-weight: 900; letter-spacing: -.02em; }
.br-cabhero p { margin: 0; max-width: 560px; color: var(--muted); line-height: 1.45; }
.br-cabstats { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; }
.br-cabstats span { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: 600 11px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.br-cabstats b { font: 900 24px var(--font-sans, inherit); font-family: inherit; color: var(--ink); letter-spacing: 0; text-transform: none; }
.br-cabstats b small { font-size: 14px; color: var(--muted); font-weight: 700; }
@media (max-width: 620px) { .br-cabhero h1 { font-size: 30px; } .br-cabstats { grid-template-columns: repeat(2, 1fr); width: 100%; } }
.br-namebox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface); }
.br-namebox label { font-weight: 800; }
.br-namebox input { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 600 16px inherit; font-family: inherit; }
.br-namebox input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.br-namebox .br-next { margin: 0; }
.br-namebox .ok { flex-basis: 100%; font: 600 12px var(--font-mono); color: var(--good); }
.br-namebox .ok:empty { display: none; }

.br-cabinet { position: relative; padding: 18px 18px 22px; border-radius: 22px; background: linear-gradient(180deg, #0f5f5a, #0a3f3c); box-shadow: inset 0 0 0 6px #0a3533, inset 0 0 0 8px #C9A227, 0 18px 40px rgba(0,0,0,.25); }
.br-cabcrest { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; color: #E8CF7A; font: 700 12px var(--font-mono); letter-spacing: .3em; text-transform: uppercase; }
.br-cabcrest svg { width: 30px; height: 32px; display: block; }
.br-shelf { position: relative; margin-top: 14px; padding: 12px 14px 0; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 30px rgba(155,245,207,.06); }
.br-shelf::before { content: ""; position: absolute; inset: 0 auto 0 8%; width: 14%; background: linear-gradient(100deg, rgba(255,255,255,.08), transparent); border-radius: 12px; pointer-events: none; }
.br-shelfhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; color: #fff; font-size: 16px; font-weight: 900; }
.br-shelfhead small { font: 600 11.5px var(--font-mono); color: rgba(255,255,255,.7); }
.br-shelfhead .dot { width: 12px; height: 12px; border-radius: 4px; }
.br-shelfhead .br-pbar { flex: 1 1 120px; max-width: 220px; margin-left: auto; height: 6px; background: rgba(255,255,255,.12); border-color: transparent; }
.br-shelfhead .br-pbar > i { background: linear-gradient(90deg, #E8CF7A, #C9A227); }
.br-shelfrow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; align-items: end; padding-bottom: 6px; }
.br-shelfrow.is-dips { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.br-shelfrow.is-medals { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.br-shelf .plank { display: block; height: 14px; margin: 0 -14px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #a0723f, #6e4a24); box-shadow: 0 6px 10px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.2); }
.br-frame { display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0; background: none; color: #fff; text-decoration: none; text-align: center; cursor: pointer; font: inherit; transition: transform .15s; }
.br-frame:hover { transform: translateY(-3px); }
.br-frame:focus-visible { outline: 3px solid #E8CF7A; outline-offset: 4px; border-radius: 6px; }
.br-frame > .br-certsvg { padding: 5px; border-radius: 3px; background: linear-gradient(135deg, #5b3b1e, #8a5a2b 40%, #4a2f17); box-shadow: 0 6px 12px rgba(0,0,0,.35); box-sizing: border-box; }
.br-frame.is-diploma > .br-certsvg { background: linear-gradient(135deg, #8d6c12, #E8CF7A 30%, #C9A227 60%, #7a5d0f); }
.br-frame .cap { display: grid; gap: 1px; }
.br-frame .cap b { font-size: 13px; font-weight: 900; }
.br-frame .cap small { font: 600 10.5px var(--font-mono); color: rgba(255,255,255,.72); }
.br-frame .lock { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 10 / 7; border-radius: 4px; border: 2px dashed rgba(255,255,255,.35); background: rgba(0,0,0,.18); color: var(--c, #9fd8cb); }
.br-frame .lock em { font: 600 10.5px var(--font-mono); font-style: normal; color: rgba(255,255,255,.75); }
.br-frame.is-locked .cap b { color: rgba(255,255,255,.85); }
.br-frame.is-flask { cursor: default; }
.br-frame.is-flask:hover { transform: none; }
.br-frame.is-flask svg, .br-frame.is-medal svg { width: 72%; max-width: 110px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.br-frame.is-flask.is-locked svg, .br-frame.is-medal.is-locked svg { opacity: .55; }
.br-frame.is-flask.is-won svg { animation: br-glow 3s ease-in-out infinite; }
@keyframes br-glow { 50% { filter: drop-shadow(0 0 14px rgba(232,207,122,.8)); } }
@media (prefers-reduced-motion: reduce) { .br-frame.is-flask.is-won svg { animation: none; } .br-frame:hover { transform: none; } }
@media (max-width: 620px) {
  .br-cabinet { padding: 12px 10px 16px; border-radius: 16px; }
  .br-shelf { padding: 10px 10px 0; }
  .br-shelf .plank { margin: 0 -10px; }
  .br-shelfrow, .br-shelfrow.is-dips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .br-shelfrow.is-medals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* printing one certificate */
#br-printcert { display: none; }
@media print {
  @page cert { size: landscape; margin: 8mm; }
  #br-printcert { page: cert; }
  body.br-printing > *:not(#br-printcert) { display: none !important; }
  body.br-printing { background: #fff !important; }
  body.br-printing #br-printcert { display: block; }
  body.br-printing #br-printcert svg { width: 100%; height: auto; max-height: 190mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.br-certbtn { box-sizing: border-box; }
@media (max-width: 620px) { .br-subjects .br-subj { height: 214px; } }

/* ---------- printable study guide (BGX.printDoc) ---------- */
.br-printbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 700 14px inherit; font-family: inherit; cursor: pointer; }
.br-printbtn:hover { border-color: var(--accent); color: var(--accent); }
.br-top .br-printbtn { margin-left: auto; }
@media (max-width: 620px) { .br-top .br-printbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .br-top .br-printbtn { padding: 7px 11px; } }
#br-printdoc { display: none; }
#br-printdoc {
  --bg: #eef2f6;
  --surface: #ffffff;
  --ink: #18202b;
  --muted: #5b6676;
  --line: #d6dde6;
  --accent: #0e6b66;
  --accent-ink: #ffffff;
  --good: #1e8a4c;
  --good-tint: #dbece2;
  --bad: #c2372b;
  --bad-tint: #f7e3e1;
  --blank: #dce2ea;
  --tile-ink: #1f2430;
  --streak-hot: #e8590c;
  --streak-glow: #ff8a3d;
  --logo-deep: #0e6b66;
  --logo-leaf: #2fb67c;
  --logo-glow: #9bf5cf;
  --logo-core: #e9fff6;
  --cat-coral: #f7a8a0;
  --cat-amber: #fbd08a;
  --cat-lemon: #f6e7a1;
  --cat-sage: #b9ddb0;
  --cat-mint: #9fd8cb;
  --cat-sky: #a9cbef;
  --cat-lilac: #c7b8ec;
  --cat-orchid: #e9b6da;
  --cat-peach: #f9c3a8;
  --cat-sand: #e3c4a2;
  --shadow-logo: 0 3px 8px rgba(47,182,124,0.35);
  --shadow-milestone: 0 12px 40px rgba(14,107,102,0.35);
  color-scheme: light; }
@media print {
  @page notes { size: A4 portrait; margin: 14mm 14mm 16mm; }
  #br-printdoc.is-notes { page: notes; }
  body.br-printing-doc > *:not(#br-printdoc) { display: none !important; }
  html:has(body.br-printing-doc), body.br-printing-doc { background: #fff !important; color-scheme: light !important; }
  html:has(body.br-printing), body.br-printing { background: #fff !important; color-scheme: light !important; }
  body.br-printing-doc #br-printdoc { display: block; }
  #br-printdoc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.br-guide { color: #18202b; background: #fff; font-family: Chivo, -apple-system, "Segoe UI", sans-serif; font-size: 11pt; line-height: 1.45; }
.br-guide .gh { display: flex; gap: 14px; align-items: center; padding-bottom: 10px; border-bottom: 3px solid #0E6B66; }
.br-guide .glogo { width: 46px; height: 50px; flex: none; }
.br-guide .ey { margin: 0; font: 600 8.5pt "Chivo Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #0E6B66; }
.br-guide h1 { margin: 2px 0; font-size: 22pt; font-weight: 900; line-height: 1.1; }
.br-guide .meta { margin: 0; font: 600 9pt "Chivo Mono", ui-monospace, monospace; color: #5b6676; }
.br-guide .gintro { margin: 12px 0; font-size: 11.5pt; }
.br-guide .gart { margin: 6px auto 10px; max-width: 420px; break-inside: avoid; }
.br-guide .gart svg { width: 100%; height: auto; max-height: 230px; display: block; }
.br-guide .gtoc { padding: 8px 12px; border: 1px solid #d6dde6; border-radius: 8px; background: #f6f9fb; break-inside: avoid; }
.br-guide .gtoc .lb { margin: 0 0 4px; font: 600 8.5pt "Chivo Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: #5b6676; }
.br-guide .gtoc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; font-size: 10pt; }
.br-guide .gtoc small { color: #5b6676; }
.br-guide .gsec { margin-top: 16px; }
.br-guide h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid #d6dde6; font-size: 14.5pt; font-weight: 900; break-after: avoid; }
.br-guide h2 .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: #0E6B66; color: #fff; font-size: 10pt; }
.br-guide .gsec > p { margin: 0 0 6px; }
.br-guide .gpts { margin: 0 0 6px; padding-left: 18px; }
.br-guide .gtip { margin: 6px 0 8px; padding: 6px 10px; border-left: 4px solid #e8a33d; background: #fff6e5; break-inside: avoid; }
.br-guide .gtip b { color: #9c5a00; margin-right: 4px; }
.br-guide .gits { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 6px; }
.br-guide .git { padding: 6px 8px; border: 1px solid #e1e6ec; border-radius: 6px; break-inside: avoid; }
.br-guide .git h3 { margin: 0 0 2px; font-size: 10.5pt; font-weight: 800; }
.br-guide .git .k { font: 600 8.5pt "Chivo Mono", monospace; color: #0E6B66; margin-left: 4px; }
.br-guide .git p { margin: 0 0 2px; font-size: 9.5pt; }
.br-guide .git ul { margin: 2px 0 0; padding-left: 16px; font-size: 9pt; color: #333d49; }
.br-guide .gf { margin-top: 18px; padding-top: 6px; border-top: 1px solid #d6dde6; font: 600 8pt "Chivo Mono", monospace; color: #8a939e; }

/* ---------- Founding Testers beta: invite, share, feedback (engine/community.js) ---------- */
.br-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.br-testers { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--radius-card); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 70%); border: 2px solid var(--accent); }
.br-testers .t { flex: 1 1 320px; min-width: 0; }
.br-testers h3 { margin: 4px 0 4px; font-size: 20px; font-weight: 900; }
.br-testers p { margin: 0; color: var(--muted); line-height: 1.45; }
.br-testers .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.br-testers .acts button, .br-endshare button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; }
.br-testers .acts svg, .br-endshare svg { width: 18px; height: 18px; }
.br-testers em, .br-endshare em { font-style: normal; font: 700 12px var(--font-mono); padding: 2px 8px; border-radius: 999px; background: var(--cat-amber); color: var(--tile-ink); }
.br-testers .br-ghost { background: var(--surface); color: var(--ink); }
.br-endshare { margin-top: 14px; display: flex; justify-content: center; }
.br-endshare .br-ghost { background: var(--surface); color: var(--ink); }
.br-rate { max-width: 420px; margin: 14px auto 0; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--radius-inner); text-align: center; }
.br-rate p { margin: 0 0 8px; font-weight: 800; }
.br-rate .faces { display: flex; justify-content: center; gap: 12px; }
.br-rate .faces button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 26px; cursor: pointer; transition: transform .12s; }
.br-rate .faces button:hover, .br-rate .faces button.is-on { transform: scale(1.12); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.br-rate .more { margin-top: 10px; display: grid; gap: 8px; justify-items: center; }
.br-rate textarea, .br-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 15px inherit; font-family: inherit; resize: vertical; }
.br-ta { margin-top: 12px; }
.br-report { display: block; margin: 8px auto 0; padding: 4px 8px; border: 0; background: none; color: var(--muted); font: 600 12px var(--font-mono); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.br-report:hover { color: var(--accent); }
.br-challenge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 18px; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--cat-amber) 45%, var(--surface)); border: 1px solid var(--cat-amber); }
.br-challenge .ic svg { width: 28px; height: 28px; color: #9c7a17; }
.br-challenge > span:nth-child(2) { flex: 1 1 220px; }
.br-sharelink { display: flex; gap: 8px; }
.br-sharelink input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 13px var(--font-mono); }
.br-shareopts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.br-shareopts a { text-decoration: none; color: var(--ink); background: var(--surface); font-size: 14px; padding: 9px 16px; }
.br-choices { display: grid; gap: 8px; }
.br-choices.is-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.br-choices label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 15px; }
.br-choices label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.br-choices input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.br-testerbadge { width: 100%; height: auto; display: block; }
.br-frame .br-testerbadge { width: 72%; max-width: 110px; margin: 0 auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.br-frame.is-locked .br-testerbadge { opacity: .55; }
.br-frame[data-bgx-survey] { cursor: pointer; }
/* privacy page */
.br-legal { max-width: 72ch; margin: 0 auto; line-height: 1.6; }
.br-legal h1 { font-size: 36px; font-weight: 900; margin: 6px 0 12px; }
.br-legal h2 { font-size: 20px; font-weight: 900; margin: 26px 0 8px; }
.br-legal p, .br-legal li { color: var(--ink); font-size: 16px; }
.br-legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.br-legal th, .br-legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------- practice (search landing) pages ---------- */
.br-practice { max-width: 76ch; margin: 0 auto; line-height: 1.6; }
.br-practice h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin: 4px 0 14px; }
.br-practice h2 { font-size: 22px; font-weight: 900; margin: 34px 0 10px; }
.br-practice p, .br-practice li { font-size: 16px; color: var(--ink); }
.br-practice .pr-eyebrow { margin-top: 18px; }
.br-practice .pr-lead { font-size: 19px; color: var(--muted); }
.br-practice .pr-meta { font: 600 12px var(--font-mono); color: var(--muted); letter-spacing: .04em; margin-top: 12px; }
.pr-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 4px; }
.pr-cta .br-next { text-decoration: none; display: inline-flex; align-items: center; }
.pr-cta .pr-ghost { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; }
.pr-shot { margin: 22px 0 8px; }
.pr-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(16,40,50,.45); }
.pr-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.pr-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pr-table th { text-align: left; font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--blank); padding: 10px 12px; }
.pr-table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.pr-modes, .pr-how { padding-left: 22px; }
.pr-modes li, .pr-how li { margin: 6px 0; }
.pr-modes a { color: var(--accent); }
.pr-faq details { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 8px 0; background: var(--surface); }
.pr-faq summary { font-weight: 800; cursor: pointer; }
.pr-faq details p { margin: 8px 0 0; color: var(--muted); }
.pr-rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pr-rels.is-grid { margin-top: 18px; }
.pr-rel { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); }
.pr-rel:hover { border-color: var(--accent); }
.pr-rel b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.pr-rel span { font: 600 12px var(--font-mono); color: var(--muted); }
.br-practice .pr-small { font-size: 14px; color: var(--muted); margin-top: 30px; }
.pr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 22px; }
.pr-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.pr-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(14,107,102,.45); }
.pr-art { display: flex; align-items: center; justify-content: center; background: var(--c); padding: 14px; aspect-ratio: 16 / 10; }
.pr-art img { height: 100%; width: auto; max-width: 100%; border-radius: 14px; box-shadow: 0 10px 22px -12px rgba(0,0,0,.35); }
.pr-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.pr-chip { align-self: flex-start; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tile-ink); background: var(--c); border-radius: 999px; padding: 4px 10px; }
.pr-body b { font-size: 18px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.pr-body em { font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.4; }
.pr-go { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: 15px; color: var(--accent); }
.pr-hero { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.pr-herotext { flex: 1; min-width: 0; }
.pr-heroart { flex: none; width: 150px; height: 150px; border-radius: 26px; background: var(--c); display: flex; align-items: center; justify-content: center; padding: 10px; transform: rotate(3deg); box-shadow: 0 16px 34px -18px rgba(14,107,102,.5); }
.pr-heroart img { width: 100%; height: 100%; border-radius: 16px; }
@media (max-width: 560px) { .pr-heroart { width: 96px; height: 96px; border-radius: 18px; padding: 6px; } .pr-hero { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .pr-card { transition: none; } .pr-card:hover { transform: none; } }
.br-practice.is-index { max-width: 1040px; }
.br-practice.is-index > p, .br-practice.is-index > h1 { max-width: 76ch; }
.br-practice.is-index .pr-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (min-width: 900px) { .br-practice.is-index .pr-cards { grid-template-columns: repeat(5, 1fr); } }

/* ---------- site search ---------- */
.br-search { position: relative; margin: 18px 0 6px; z-index: 30; }
.br-searchbox { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px 0 18px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 10px 26px -18px rgba(14,107,102,.5); cursor: text; transition: border-color .15s; }
.br-searchbox:focus-within { border-color: var(--accent); }
.br-searchbox .ic { color: var(--accent); display: flex; }
.br-searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 17px var(--font-display); padding: 14px 0; }
.br-searchbox input::placeholder { color: var(--muted); font-weight: 400; }
.br-searchbox input::-webkit-search-cancel-button { display: none; }
.br-searchbox .clr { border: 0; background: var(--blank); color: var(--ink); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px; }
.br-sres { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 24px 50px -20px rgba(16,32,40,.45); max-height: min(70vh, 520px); overflow-y: auto; }
.br-sr { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.br-sr.is-act, .br-sr:hover { background: var(--blank); }
.br-sr .dot { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--tile-ink); }
.br-sr .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-sr b { font-size: 16px; font-weight: 800; }
.br-sr b mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.br-sr em { font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.35; }
.br-sr small { font: 600 11px var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.br-sres .none, .br-sres .more { margin: 8px 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 560px) { .br-searchbox input { font-size: 16px; } .br-sres { max-height: 60vh; } }
.br-searchbox input[type="search"] { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; outline: 0 !important; min-height: 0; height: auto; -webkit-appearance: none; appearance: none; }
/* featured carousel: the game being played on a laptop and a phone */
.br-featured .dev { position: relative; width: 440px; height: 300px; justify-self: end; }
.dev .scr { position: relative; overflow: hidden; background: #fff; }
.dev .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.dev .scr img.b { opacity: 0; }
.dev .laptop { position: absolute; left: 0; top: 8px; width: 380px; }
.dev .laptop .scr { height: 238px; border: 10px solid #1c232d; border-bottom-width: 14px; border-radius: 14px 14px 4px 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
.dev .laptop .base { display: block; height: 12px; margin: 0 -26px; border-radius: 3px 3px 12px 12px; background: linear-gradient(#cfd5dd, #8f98a4); box-shadow: 0 18px 30px -14px rgba(0,0,0,.6); position: relative; }
.dev .laptop .base::after { content: ""; position: absolute; left: 50%; top: 0; width: 70px; height: 5px; margin-left: -35px; border-radius: 0 0 8px 8px; background: #7d8692; }
.dev .phone { position: absolute; right: 0; bottom: 0; width: 132px; padding: 7px; border-radius: 26px; background: #1c232d; box-shadow: 0 20px 34px -14px rgba(0,0,0,.65), 0 0 0 2px rgba(255,255,255,.12) inset; transform: rotate(4deg); }
.dev .phone .scr { height: 262px; border-radius: 20px; }
.dev .phone::before { content: ""; position: absolute; z-index: 2; top: 12px; left: 50%; width: 34px; height: 9px; margin-left: -17px; border-radius: 9px; background: #1c232d; }
.dev .tap { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(14,107,102,.35); border: 2px solid rgba(14,107,102,.9); opacity: 0; pointer-events: none; }
.br-slide.is-on .dev .scr img.b { animation: devB 6s ease-in-out infinite; }
.br-slide.is-on .dev .tap { animation: devTap 6s ease-out infinite; }
.br-slide.is-on .dev .phone .scr img.b, .br-slide.is-on .dev .phone .tap { animation-delay: -3s; }
@keyframes devB { 0%, 40% { opacity: 0; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes devTap { 0%, 32% { opacity: 0; transform: scale(.4); } 36% { opacity: 1; transform: scale(.8); } 44% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }
@media (max-width: 760px) {
  .br-featured .dev { width: 100%; height: auto; justify-self: center; order: -1; display: flex; justify-content: center; }
  .dev .laptop { display: none; }
  .dev .phone { position: relative; width: 128px; transform: rotate(-3deg); }
  .dev .phone .scr { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .br-slide.is-on .dev .scr img.b, .br-slide.is-on .dev .tap { animation: none; }
  .dev .scr img.b { opacity: 1; }
  .dev .phone { transform: none; }
}

/* hub: tour video button + player */
.br-hubhero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: center; }
.br-hubhero .hx { min-width: 0; }
.br-hubhero h1 { font-size: clamp(38px, 7vw, 64px); }
.br-hubhero p.lead { margin: 12px 0 0; font: 400 19px/1.45 var(--font-display); color: var(--muted); max-width: 40ch; }
.br-hubhero .chips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.br-hubhero .chips li { font: 600 13px var(--font-display); padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.br-hubhero .chips li b { color: var(--accent); font-weight: 900; }
.br-tourcard { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 18px 36px -22px rgba(14,107,102,.6); transform: rotate(1.5deg); transition: transform .18s ease, box-shadow .18s ease; }
.br-tourcard:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 22px 40px -20px rgba(14,107,102,.7); }
.br-tourcard .pic { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.br-tourcard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-tourcard .pl { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; box-shadow: 0 0 0 8px rgba(255,255,255,.35); }
.br-tourcard .cap { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.br-tourcard .cap b { font: 900 16px var(--font-display); }
.br-tourcard .cap small { font: 600 12px var(--font-mono); color: var(--muted); }
@media (max-width: 820px) { .br-hubhero { grid-template-columns: 1fr; gap: 18px; } .br-tourcard { flex-direction: row; align-items: center; transform: none; } .br-tourcard .pic { width: 132px; flex: none; } .br-tourcard .pl { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 14px; box-shadow: 0 0 0 5px rgba(255,255,255,.35); } .br-hubhero p.lead { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .br-tourcard, .br-tourcard:hover { transform: none; transition: none; } }
.br-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.br-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* add to home screen */
.br-hubhero .chips li.is-btn { padding: 0; border: 0; background: none; }
.br-hubhero .chips li.is-btn button { font: 800 13px var(--font-display); padding: 7px 14px 7px 10px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 14px -8px rgba(14,107,102,.8); }
.br-hubhero .chips li.is-btn button span { font-size: 15px; line-height: 1; }
.br-howadd { margin: 0; padding-left: 22px; line-height: 1.55; }
.br-howadd li { margin: 8px 0; font-size: 16px; }

/* first-time visitors: no row of zeros in the header (stats appear after the first answer) */
/* hub: who it is for + the 2-minute round */
.br-hubhero .aud { margin: 0 0 10px; color: var(--accent); }
.br-hubhero .startrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.br-start { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; font-size: 17px; }
.br-hubhero .startnote { font: 600 13px var(--font-display); color: var(--muted); }
.br-hubhero .startnote b { color: var(--ink); }
.br-mc.item.is-plain { background: var(--cat-mint); }
.br-endbtns { margin-top: 18px; }
.br-endbtns a.br-next { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- study habits (engine/study.js): day streak, daily goal, Today's review, backup ---------- */
.br-ring { flex: none; display: block; }
.br-today { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.br-todaygoal { display: flex; align-items: center; gap: 14px; text-align: left; padding: 8px; border-radius: var(--radius-inner); background: none; border: 0; color: var(--ink); cursor: pointer; }
.br-todaygoal:hover { background: var(--bg); }
.br-todaygoal > span { display: flex; flex-direction: column; gap: 2px; }
.br-todaygoal b { font-size: 19px; font-weight: 800; }
.br-todaygoal small { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.br-todayrev { align-self: center; }
.br-duelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.br-duelist a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-inner); text-decoration: none; color: var(--ink); min-height: var(--tap-min); }
.br-duelist a:hover { border-color: var(--accent); }
.br-duelist a > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.br-duelist small { color: var(--muted); font-size: 13px; }
.br-duelist em { font: 700 12px var(--font-mono); font-style: normal; background: var(--cat-amber); color: var(--tile-ink); padding: 2px 8px; border-radius: var(--radius-pill); }
.br-duelist .go { color: var(--accent); font-weight: 700; font-size: 14px; white-space: nowrap; }
.br-habitnow { display: flex; align-items: center; gap: 16px; }
.br-habitnow h3 { margin: 2px 0 0; font-size: 22px; }
.br-habitstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.br-habitstats span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-inner); font-size: 14px; color: var(--muted); }
.br-habitstats b { color: var(--ink); font-size: 18px; }
.br-days { list-style: none; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; padding: 0; margin: 0 0 14px; }
.br-days li { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.br-days i { width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 6px; background: var(--line); }
.br-days li.is-on i { background: var(--cat-mint); }
.br-days li.is-goal i { background: var(--good); }
.br-days li.is-today i { outline: 2px solid var(--accent); outline-offset: 1px; }
.br-days small { font: 600 10px var(--font-mono); color: var(--muted); }
.br-habit .br-seg button { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.br-habit .br-seg small { font-weight: 400; font-size: 11px; opacity: .8; }
.br-dayline { display: inline-flex; align-items: center; gap: 4px; margin: 10px auto 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; }
.br-milestone.is-goal .br-ring { margin: 0 auto 6px; color: var(--ink); }
.br-storewarn { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: flex; gap: 12px; align-items: flex-start; max-width: 640px; margin: 0 auto; padding: 12px 14px; border-radius: var(--radius-inner); background: var(--bad-tint); color: var(--ink); border: 1px solid var(--bad); font-size: 14px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.br-storewarn button { flex: none; background: none; border: 0; color: var(--ink); font-size: 16px; cursor: pointer; min-width: 32px; min-height: 32px; }
.br-backup { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); scroll-margin-top: 16px; }
.br-backup h2 { margin: 2px 0 8px; font-size: 22px; }
.br-backup p { margin: 0 0 8px; }
.br-bkacts { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.br-bkin summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.br-bkin textarea { width: 100%; box-sizing: border-box; font: 12px var(--font-mono); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-cell); background: var(--bg); color: var(--ink); margin: 4px 0 8px; }
.br-filebtn { cursor: pointer; display: inline-flex; align-items: center; }
.br-bkmsg { margin: 0; font-size: 14px; color: var(--good); }
.br-bkmsg.is-bad { color: var(--bad); }
@media (max-width: 720px) { .br-today, .br-backup { grid-template-columns: 1fr; } .br-habitstats { grid-template-columns: 1fr 1fr; } }
.br-habit .br-label { margin-top: 18px; }
.br-votebars { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.br-votebars li { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr 36px; gap: 10px; align-items: center; }
.br-votebars .bar { display: block; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.br-votebars .bar i { display: block; height: 100%; background: var(--accent); }
.br-votebars b { text-align: right; font-variant-numeric: tabular-nums; }
.br-versus { margin: 18px auto 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-inner); max-width: 360px; }
.br-versus .vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0; }
.br-versus .vs span { display: flex; flex-direction: column; align-items: center; }
.br-versus .vs b { font-size: 34px; font-weight: 900; }
.br-versus .vs small { color: var(--muted); font-size: 13px; }
.br-versus .vs i { font: 700 13px var(--font-mono); color: var(--muted); font-style: normal; }
/* text size: the "Aa" button scales the page (and pop-ups) without breaking the layout */
html.bgx-t1 .br-wrap, html.bgx-t1 .br-sheet, html.bgx-t1 .br-milestone .box, html.bgx-t1 .br-toast { zoom: 1.15; }
html.bgx-t2 .br-wrap, html.bgx-t2 .br-sheet, html.bgx-t2 .br-milestone .box, html.bgx-t2 .br-toast { zoom: 1.3; }
/* switching units reloads the page, so the chip is hidden during a round (a round would be lost) */
.br-count .q { color: var(--muted); }
.br-prompt:focus { outline: none; }
.br-prompt:focus-visible { outline: none; }
/* during a round on a phone, the header shrinks to the essentials so the question starts higher */
/* Syringe Prep: hand hygiene, vial preparation and the bedside check */
.sp-hands { justify-content: flex-start; margin-top: 12px; }
.sp-hands .lab-btn.is-on { background: var(--good-tint); border-color: var(--good); color: var(--ink); }
.sp-prep { display: grid; gap: 8px; margin-top: 8px; }
.sp-prepbtn { text-align: left; justify-content: flex-start; min-height: var(--tap-min); }
.sp-prepbtn.is-on { background: var(--good-tint); border-color: var(--good); }
.sp-prepbtn.is-wrong { background: var(--bad-tint); border-color: var(--bad); }
.sp-band { border-style: dashed; }
/* exam-style questions: select all that apply */
.br-sata .br-chk { display: flex; align-items: center; gap: 10px; text-align: left; justify-content: flex-start; }
.br-sata .box { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--muted); background: var(--surface); position: relative; }
.br-sata .br-chk.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.br-sata .br-chk.is-picked .box { background: var(--accent); border-color: var(--accent); }
.br-sata .br-chk.is-picked .box::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 14px; line-height: 16px; text-align: center; font-weight: 900; }
.br-ans.is-missed { border: 2px dashed var(--good); background: var(--good-tint); }
.br-exam .story { margin: 6px 0 0; }

/* ---------- site header: brand · progress panel (day streak, level, awards) · invite + settings ----------
   One instrument panel instead of a row of equal pills: the three numbers that bring people back sit together,
   the flame fills from the bottom like a measuring cylinder as today's rounds add up, and the level badge is an atom
   whose orbit is the XP to the next level. Settings (sound, text size, units) live in one pop-over. */
.br-header { display: flex; align-items: center; gap: 12px; position: relative; z-index: 20; }
.br-header .br-brand { text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.br-hud { display: flex; align-items: stretch; flex: none; min-width: 0; height: 56px; padding: 4px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.br-hud > * { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 14px; border: 0; border-radius: 14px; background: none; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s; position: relative; }
.br-hud > [hidden] { display: none; }
.br-hud > * + *::before { content: ""; position: absolute; left: -.5px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.br-hud > *:hover { background: var(--bg); }
.br-hud > *:hover::before, .br-hud > *:hover + *::before { opacity: 0; }
.br-hud > *:active { transform: scale(.97); }
.br-hud > *:focus-visible { outline: 3px solid var(--accent); outline-offset: -1px; }
.br-hud .v, .br-lvl .tx { display: grid; gap: 1px; line-height: 1.05; min-width: 0; }
.br-hud .v b { font: 800 19px var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.br-hud small { font: 600 10.5px var(--font-mono); color: var(--muted); white-space: nowrap; }

/* day streak: the flame */
.br-flame { flex: none; display: block; width: 30px; height: 30px; }
.br-flame svg { display: block; width: 100%; height: 100%; overflow: visible; }
.br-flame .shell { fill: color-mix(in srgb, var(--muted) 16%, transparent); stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 1.1; }
.br-flame .fill { fill: #F08A4B; } .br-flame .core { fill: #FBD08A; }
.br-day.is-cold .br-flame .fill { fill: color-mix(in srgb, #F08A4B 55%, var(--muted)); }
.br-day.is-cold .br-flame .core { fill: color-mix(in srgb, #FBD08A 40%, var(--muted)); }
.br-day.is-done .br-flame .shell { stroke: #F08A4B; fill: #F08A4B; }
.br-day.is-done .br-flame svg { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--streak-glow) 70%, transparent)); }
.br-day.is-done .v b { color: var(--streak-hot); }
.br-day.is-cold .v b { color: var(--muted); }
.br-day.is-lighting .br-flame { animation: br-flare 1.1s cubic-bezier(.2,1.5,.4,1); transform-origin: 50% 90%; }
@keyframes br-flare { 0% { transform: scale(.7); } 35% { transform: scale(1.35) rotate(-6deg); } 60% { transform: scale(.95) rotate(3deg); } 100% { transform: scale(1); } }

/* level: the atom */
.br-hud > .br-lvl { padding-left: 8px; }
.br-atom { position: relative; flex: none; width: 42px; height: 42px; }
.br-atom svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.br-atom .trk { fill: none; stroke: var(--line); stroke-width: 3; }
.br-atom .arc { fill: none; stroke: url(#br-xpg); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.br-atom .e { fill: var(--logo-leaf); stroke: var(--surface); stroke-width: 1.6; }
.br-atom .nuc { position: absolute; inset: 7px; display: grid; place-items: center; border-radius: 50%; background: var(--tier); color: var(--tile-ink);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.1); }
.br-atom .nuc svg { position: static; width: 17px; height: 17px; }
.br-lvl .tx .nm { font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.br-lvl .tx .n { display: none; }
.br-lvl.bump .br-atom { animation: br-lvlbump .6s ease; }
@keyframes br-lvlbump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* awards */
.br-cab > svg { flex: none; width: 24px; height: 24px; color: #C29A2E; }
:root[data-theme="dark"] .br-cab > svg { color: #E2B94E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .br-cab > svg { color: #E2B94E; } }

/* correct answers in a row: shown only during a round */
.br-stat { display: none; }
html.bgx-playing .br-stat { display: flex; align-items: center; flex: none; }
.br-streak { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font: 600 11px var(--font-mono); white-space: nowrap; }
.br-streak b { font: 800 16px var(--font-mono); color: var(--ink); display: inline-block; font-variant-numeric: tabular-nums; }
.br-streak b.bump { animation: br-bump .4s cubic-bezier(.3,1.8,.5,1); }
.br-streak.is-zero svg { opacity: .45; }
.br-streak.is-hot { border-color: color-mix(in srgb, var(--streak-hot) 50%, var(--line)); color: var(--streak-hot); background: color-mix(in srgb, var(--streak-glow) 12%, var(--surface)); }
.br-streak.is-hot b { color: var(--streak-hot); }

/* invite + settings */
.br-tools { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
.br-iconbtn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 14px;
  background: none; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.br-iconbtn svg { width: 22px; height: 22px; }
.br-iconbtn:hover, .br-iconbtn[aria-expanded="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); }
.br-invbtn { color: var(--accent); }
.br-iconbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (min-width: 721px) {
  .br-iconbtn[data-tip]:hover::after, .br-iconbtn[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    padding: 5px 9px; border-radius: 8px; background: var(--ink); color: var(--surface); font: 700 12px var(--font-display); white-space: nowrap; pointer-events: none; z-index: 2; }
  .br-iconbtn[aria-expanded="true"]::after { display: none; }
}
.br-setpanel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 300px; max-width: calc(100vw - 32px); padding: 8px; display: grid; gap: 2px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 18px 48px -12px rgba(0,0,0,.35); animation: br-fadein .15s; }
.br-setpanel[hidden] { display: none; }
.br-setpanel .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 8px; }
.br-setpanel .row + .row { border-top: 1px solid var(--line); }
.br-setpanel .lb { font-size: 14px; font-weight: 700; }
.br-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font: 600 12px var(--font-mono); cursor: pointer; }
.br-switch i { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--blank); border: 1px solid var(--line); transition: background-color .15s; order: 2; }
.br-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.br-switch[aria-pressed="true"] { color: var(--ink); }
.br-switch[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); }
.br-switch[aria-pressed="true"] i::after { transform: translateX(18px); }
.br-segm { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.br-segm button { min-width: 44px; min-height: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 800 13px var(--font-display); cursor: pointer; }
.br-segm button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.br-segm button:focus-visible, .br-switch:focus-visible, .br-setlink:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.br-setlink { display: none; align-items: center; gap: 10px; min-height: 48px; margin-top: 4px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--bg); color: var(--accent); font: 800 14px var(--font-display); cursor: pointer; text-align: left; }
.br-setlink svg { width: 20px; height: 20px; }
/* switching units reloads the page, so it is not offered during a round (the round would be lost) */
html.bgx-playing .br-unitrow { display: none; }

/* first-time visitors: no row of zeros (the panel appears after the first answer) */
html.bgx-new .br-hud, html.bgx-new .br-invbtn { display: none; }
html.bgx-new .br-setlink { display: flex; }

/* phones: logo mark + the three numbers + settings on one row; invite moves into the settings pop-over */
@media (max-width: 720px) {
  .br-header { gap: 8px; }
  .br-header .br-word { display: none; }
  .br-header .br-logo { width: 40px; height: 44px; }
  .br-header .br-invbtn { display: none; }
  .br-setlink { display: flex; }
  .br-hud { flex: 1 1 auto; height: 52px; padding: 3px; border-radius: 16px; max-width: 330px; }
  .br-hud > * { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 6px; }
  .br-hud .v small, .br-lvl .tx small, .br-lvl .tx .nm { display: none; }
  .br-lvl .tx .n { display: block; font: 800 15px var(--font-mono); letter-spacing: -.02em; white-space: nowrap; }
  .br-hud .v b { font-size: 17px; }
  .br-flame { width: 26px; height: 26px; }
  .br-atom { width: 38px; height: 38px; } .br-atom .nuc { inset: 6px; } .br-atom .nuc svg { width: 15px; height: 15px; }
  .br-hud > .br-lvl { padding-left: 4px; }
  .br-cab > svg { width: 22px; height: 22px; }
  /* during a round the panel steps aside for the answers-in-a-row counter, so the question starts higher */
  html.bgx-playing .br-hud { display: none; }
  /* nothing to show yet for a first-time visitor, so the name stays */
  html.bgx-new .br-header .br-word { display: block; }
  html.bgx-new.bgx-playing .br-header .br-word p { display: none; }
}
@media (max-width: 360px) { .br-header .br-logo { width: 34px; height: 38px; } .br-hud > * { padding: 0 3px; gap: 4px; } .br-atom { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .br-day.is-lighting .br-flame, .br-lvl.bump .br-atom, .br-streak b.bump { animation: none; } .br-atom .arc { transition: none; } }