/* frappe — bosses, mock exam, writing and speaking arenas (views boss / exam / ee / eo, js/game/boss.js).
   Classes are prefixed bs-. Built on the theme tokens and the .g-* primitives of game-base.css.
   --bs-c is the region colour (one of the --g-a1 … --g-b2 tokens). Works from 360 px wide.
   Text colours (game-base.css): secondary text that carries meaning uses --g-gloss, never --sub (about 2:1 on most
   themes, decoration only); "correct" green and gold as text use --g-ok-ink / --g-coin-ink (the amber "under the
   word count" state too), --g-ok / --g-coin / --g-hp-mid stay for fills, bars and borders.
   Reduced motion: boss.js adds .bs-rm on its roots when FR.reducedMotion() is true. */

/* these views start at the top of the page instead of being vertically centred */
#main > #view-boss.active,
#main > #view-exam.active,
#main > #view-ee.active,
#main > #view-eo.active {
  flex: 1 0 auto;
}

.bs-wrap {
  --bs-c: var(--main);
  color: var(--text);
  font-family: "Lexend Deca", sans-serif;
}
.bs-wrap [hidden],
.bs-intro [hidden] {
  display: none !important;
}
.bs-noen .g-en {
  display: none;
}
.bs-wrap kbd,
.bs-intro kbd {
  font-family: "Roboto Mono", monospace;
}
.bs-wrap button:focus-visible,
.bs-wrap summary:focus-visible,
.bs-wrap input:focus-visible,
.bs-wrap textarea:focus-visible,
.bs-intro button:focus-visible,
.bs-modal button:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}
.bs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bs-page {
  max-width: 960px;
  margin: 0 auto;
}
.bs-h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}
.bs-h4 {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}
.bs-lead {
  margin: 0;
  line-height: 1.5;
}
.bs-note {
  margin: 0.5rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.55rem;
  background: var(--bg);
  border-left: 3px solid var(--bs-c);
  font-size: 0.88rem;
  line-height: 1.45;
}
.bs-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.bs-res-btns {
  justify-content: center;
  margin-top: 0.5rem;
}
.bs-emo {
  display: inline-block;
  line-height: 1;
}
.bs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bs-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-gap);
}
.bs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  background: var(--bg);
  color: var(--g-gloss);
  font-size: 0.75rem;
}
.bs-tag.weak {
  color: var(--main);
}
.bs-tag.none {
  color: var(--error);
}

/* ---------------------------------------------------------------- boss list */

.bs-region {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scroll-margin-top: 1rem;
}
.bs-reg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--bs-c);
}
.bs-reg-head .bs-h3 {
  margin: 0;
}
.bs-reg-ic {
  font-size: 1.4rem;
}
.bs-reg-head .g-spacer {
  flex: 1;
}
.bs-region.locked .bs-reg-head {
  border-bottom-style: dashed;
}
.bs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.7rem;
}
.bs-card,
.bs-examcard {
  appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border-left: 4px solid var(--bs-c);
}
.bs-card.dim {
  opacity: 0.7;
}
.bs-card.won {
  box-shadow: inset 0 0 0 1px var(--g-coin);
}
.bs-card-sprite {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}
.bs-card-sprite svg {
  width: 100%;
  height: 100%;
}
.bs-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.bs-card-sec {
  color: var(--g-gloss);
  font-size: 0.75rem;
}
.bs-card-name {
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.25;
}
.bs-card-stat {
  color: var(--g-gloss);
  font-size: 0.78rem;
}
.bs-card.won .bs-card-stat {
  color: var(--g-coin-ink);
}
.bs-card-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  font-size: 1.1rem;
}
.bs-examcard {
  border-left-color: var(--main);
}
.bs-examcard-ic {
  font-size: 2rem;
  width: 3rem;
  text-align: center;
}
.bs-go {
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--main);
}

/* ---------------------------------------------------------------- lobby */

.bs-hero {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--bs-c) 28%, transparent), transparent 60%),
    var(--sub-alt);
}
.bs-hero-sprite {
  position: relative;
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
}
.bs-hero-sprite svg,
.bs-float svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bs-float {
  width: 100%;
  height: 100%;
  animation: bs-float 3.2s ease-in-out infinite;
}
.bs-hero-badge {
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.bs-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.bs-kicker {
  color: var(--g-gloss);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.bs-name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.bs-bubble {
  position: relative;
  margin: 0.2rem 0 0;
  padding: 0.65rem 0.9rem;
  border-radius: 0.8rem;
  background: var(--bg);
  border: 2px solid var(--bs-c);
}
.bs-bubble p {
  margin: 0;
}
.bs-bubble p + p {
  margin-top: 0.25rem;
}
.bs-bubble.sm {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  border-width: 1px;
}
.bs-fight {
  animation: bs-glow 2.4s ease-in-out infinite;
}
.bs-rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.bs-rule-list li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
.bs-rule-ic {
  flex: 0 0 1.4rem;
  text-align: center;
}
.bs-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}
.bs-tile {
  background: var(--bg);
  border-radius: 0.6rem;
  padding: 0.55rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}
.bs-tile b {
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.bs-tile.xp b {
  color: var(--main);
}
.bs-tile.coin b {
  color: var(--g-coin-ink);
}
.bs-tiles-row .bs-tile {
  background: var(--sub-alt);
}
.bs-badge {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bg);
  filter: grayscale(1);
  opacity: 0.45;
  font-size: 1.05rem;
}
.bs-badge.on {
  filter: none;
  opacity: 1;
  background: var(--g-coin);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-coin) 35%, transparent);
}
.bs-badge.big {
  width: 3rem;
  height: 3rem;
  font-size: 1.6rem;
}
.bs-skill {
  margin: 0.7rem 0 0.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.bs-others {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bs-other-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------------------------------------------------------------- boss intro overlay */

.bs-intro {
  --bs-c: var(--main);
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bs-c) 35%, var(--bg)), var(--bg) 70%);
  color: var(--text);
  font-family: "Lexend Deca", sans-serif;
  padding: 1rem;
}
.bs-intro-bars {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.bs-intro-bars i {
  flex: 1;
  background: var(--bg);
  transform-origin: left;
  animation: bs-bars 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.bs-intro-bars i:nth-child(even) {
  transform-origin: right;
}
.bs-intro-bars i:nth-child(2) {
  animation-delay: 0.04s;
}
.bs-intro-bars i:nth-child(3) {
  animation-delay: 0.08s;
}
.bs-intro-bars i:nth-child(4) {
  animation-delay: 0.12s;
}
.bs-intro-bars i:nth-child(5) {
  animation-delay: 0.16s;
}
.bs-intro-bars i:nth-child(6) {
  animation-delay: 0.2s;
}
.bs-intro-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: bs-flash 0.5s ease-out 0.55s;
}
.bs-intro-stage {
  position: relative;
  width: min(34rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}
.bs-intro-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-c);
  opacity: 0;
  animation: bs-fade-in 0.3s ease-out 0.6s forwards;
}
.bs-intro-sprite {
  width: 200px;
  height: 200px;
  max-width: 55vw;
  max-height: 55vw;
  filter: drop-shadow(0 0.6rem 1.2rem rgba(0, 0, 0, 0.45));
  opacity: 0;
  animation: bs-drop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.6s forwards, bs-float 3.2s ease-in-out 1.4s infinite;
}
.bs-intro-sprite svg {
  width: 100%;
  height: 100%;
}
.bs-intro-banner {
  width: 100%;
  padding: 0.6rem 1rem;
  background: var(--sub-alt);
  border-top: 3px solid var(--bs-c);
  border-bottom: 3px solid var(--bs-c);
  opacity: 0;
  animation: bs-slide 0.45s ease-out 0.85s forwards;
}
.bs-intro-banner h2 {
  margin: 0.15rem 0 0;
  font-size: 1.55rem;
  font-weight: 500;
}
.bs-intro-sec {
  color: var(--g-gloss);
  font-size: 0.8rem;
}
.bs-intro-say {
  min-height: 3.6rem;
  opacity: 0;
  animation: bs-fade-in 0.3s ease-out 0.9s forwards;
}
.bs-intro-line {
  margin: 0;
  font-size: 1.1rem;
  min-height: 1.6em;
}
.bs-intro-say .g-en {
  display: block;
  margin-top: 0.25rem;
}
.bs-intro-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  opacity: 0;
  animation: bs-fade-in 0.3s ease-out 1.1s forwards;
}
.bs-intro.bs-rm *,
.bs-intro.bs-rm {
  animation: none !important;
  opacity: 1;
}
.bs-intro.bs-rm .bs-intro-bars,
.bs-intro.bs-rm .bs-intro-flash {
  display: none;
}
.bs-noen.bs-intro .g-en {
  display: none;
}

.bs-dialog h3 {
  margin: 0 0 0.6rem;
  font-weight: 500;
}
.bs-dialog .bs-btns {
  margin-top: 1rem;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------- result pages */

.bs-res-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.bs-res-sprite {
  width: 150px;
  height: 150px;
  flex: 0 0 auto;
}
.bs-res-sprite svg {
  width: 100%;
  height: 100%;
}
.bs-res-head {
  flex: 1;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bs-res-title {
  font-size: 1.9rem;
}
.bs-result.win .bs-res-title {
  color: var(--main);
}
.bs-result.lose .bs-res-title {
  color: var(--error);
}
.bs-res-line {
  margin: 0;
}
.bs-ko {
  animation: bs-ko 0.9s ease-in forwards;
}
.bs-taunt {
  animation: bs-taunt 0.9s ease-in-out 3;
}
.bs-newbadge {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: var(--g-radius);
  background: var(--sub-alt);
  border: 2px solid var(--g-coin);
  animation: bs-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.bs-meter-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bs-meter {
  position: relative;
  height: 1.1rem;
  border-radius: 1rem;
  background: var(--sub-alt);
  overflow: visible;
}
.bs-meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--error);
  animation: bs-grow 0.9s ease-out;
}
.bs-meter.win > i {
  background: var(--g-ok);
}
.bs-meter-mark {
  position: absolute;
  top: -0.3rem;
  bottom: -0.3rem;
  width: 3px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
}
.bs-meter-txt {
  margin: 0;
  text-align: center;
}
.bs-score20 {
  text-align: center;
  line-height: 1;
}
.bs-score20 b {
  font-size: 3rem;
  font-weight: 500;
  color: var(--main);
}
.bs-score20 span {
  font-size: 1.3rem;
  color: var(--g-gloss);
}
.bs-est-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.bs-est-score {
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--main);
  font-variant-numeric: tabular-nums;
}
.bs-goal {
  margin: 0.4rem 0 0;
}
.bs-est .g-sub {
  line-height: 1.45;
}
.bs-barrow {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr 3rem;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0;
  font-size: 0.88rem;
}
.bs-barval {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--g-gloss);
}
.bs-bar.good > i {
  background: var(--g-ok);
}
.bs-bar.mid > i {
  background: var(--g-hp-mid);
}
.bs-bar.low > i {
  background: var(--g-hp-low);
}
.bs-missed {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bs-miss-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.bs-miss {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-left: 3px solid var(--error);
}
.bs-miss-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.bs-q {
  margin: 0;
  font-weight: 500;
}
.bs-blank {
  color: var(--main);
  letter-spacing: 0.05em;
}
.bs-ans {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.bs-ans s {
  color: var(--error);
}
.bs-ans.ok b {
  color: var(--g-ok-ink);
  font-weight: 500;
}
.bs-why,
.bs-gloss {
  font-size: 0.9rem;
  line-height: 1.5;
}
.bs-gloss {
  color: var(--g-gloss);
}
.bs-errs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.bs-err {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--error) 18%, transparent);
  color: var(--text);
  font-size: 0.8rem;
}
.bs-errlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bs-det,
.bs-fold {
  font-size: 0.9rem;
}
details.bs-det > summary,
.bs-fold > summary {
  cursor: pointer;
  color: var(--g-gloss);
}
details.bs-det[open] > summary,
.bs-fold[open] > summary {
  margin-bottom: 0.5rem;
}
.bs-transcript p,
.bs-doc p {
  margin: 0.25rem 0;
}
.bs-spk1 {
  color: var(--main);
}
.bs-doc {
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: var(--bg);
  max-height: 22rem;
  overflow: auto;
}
.bs-perfect {
  text-align: center;
  font-size: 1.2rem;
  color: var(--main);
}

/* ---------------------------------------------------------------- arenas (ee / eo) */

.bs-foe-strip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.bs-foe-mini {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
}
.bs-foe-mini.sm {
  width: 44px;
  height: 44px;
}
.bs-foe-mini svg {
  width: 100%;
  height: 100%;
}
.bs-tasktabs .g-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.25;
}
.bs-prompt {
  border-left: 4px solid var(--bs-c);
}
.bs-prompt-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.bs-prompt-fr {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.02rem;
}
.bs-prompt-en {
  margin: 0;
  color: var(--g-gloss);
  font-size: 0.9rem;
  line-height: 1.5;
}
.bs-docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.bs-docc {
  background: var(--bg);
  font-size: 0.92rem;
}
.bs-docc p {
  margin: 0.3rem 0;
}
.bs-tips {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  line-height: 1.45;
}
.bs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bs-chip {
  appearance: none;
  border: 1px solid var(--g-edge);
  background: var(--bg);
  color: var(--text);
  border-radius: 1rem;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: left;
}
button.bs-chip {
  cursor: pointer;
}
button.bs-chip:hover {
  border-color: var(--main);
  color: var(--main);
}
.bs-chip-s {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--g-ok) 22%, transparent);
  font-size: 0.82rem;
  margin: 0.1rem 0;
}
.bs-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  background: var(--bg);
}
.bs-sticky .g-spacer {
  flex: 1;
}
.bs-timer,
.bs-wc {
  font-variant-numeric: tabular-nums;
}
.bs-timer.warn {
  color: var(--error);
  animation: bs-blink 1s ease-in-out infinite;
}
.bs-wc.under {
  color: var(--g-coin-ink);
}
.bs-wc.in {
  color: var(--g-ok-ink);
}
.bs-wc.over {
  color: var(--error);
}
.bs-write-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--g-gap);
  align-items: start;
}
.bs-write-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.bs-write-side {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.bs-text,
.bs-notes {
  resize: vertical;
  min-height: 16rem;
  font-size: 1.02rem;
  line-height: 1.6;
}
.bs-notes {
  min-height: 7rem;
}
.bs-wcbar {
  position: relative;
  height: 0.4rem;
  border-radius: 1rem;
  background: var(--sub-alt);
}
.bs-wcbar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--g-hp-mid);
  transition: width 0.2s ease;
}
.bs-wcbar.in > i {
  background: var(--g-ok);
}
.bs-wcbar.over > i {
  background: var(--error);
}
.bs-wc-mark {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  width: 2px;
  background: var(--g-edge);
}
.bs-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.bs-acc button {
  appearance: none;
  border: 0;
  border-radius: 0.4rem;
  min-width: 2.1rem;
  height: 2.1rem;
  background: var(--sub-alt);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.bs-acc button:hover {
  background: var(--text);
  color: var(--bg);
}
.bs-ck-list {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bs-ck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  line-height: 1.35;
}
.bs-ck input,
.bs-radio input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--main);
  flex: 0 0 auto;
}
/* the detection chip of a checklist line (found / not found / check it yourself); span only: details.bs-det is the
   transcript / document fold of a missed question */
span.bs-det {
  font-size: 0.75rem;
  padding: 0.05rem 0.45rem;
  border-radius: 1rem;
  background: var(--bg);
  color: var(--g-gloss);
}
span.bs-det.yes {
  color: var(--g-ok-ink);
}
span.bs-det.no {
  color: var(--g-coin-ink);
}
.bs-textview {
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bs-textview p {
  margin: 0 0 0.6rem;
}
.bs-hl-con {
  background: color-mix(in srgb, var(--g-ok) 25%, transparent);
  color: inherit;
  border-radius: 0.2rem;
  padding: 0 0.1rem;
}
.bs-hl-err {
  background: color-mix(in srgb, var(--error) 28%, transparent);
  color: inherit;
  border-radius: 0.2rem;
  text-decoration: underline wavy var(--error);
  text-underline-offset: 3px;
}
.bs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-gap);
}
.bs-rubric {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.bs-rb {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  grid-template-areas: "h p" "d d" "t t";
  gap: 0.25rem 0.8rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--bg);
}
.bs-rb-h {
  grid-area: h;
  font-weight: 500;
}
.bs-rb-p {
  grid-area: p;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.bs-rb-p .g-bar {
  flex: 1;
  background: var(--sub-alt);
}
.bs-rb-d {
  grid-area: d;
  color: var(--g-gloss);
  font-size: 0.88rem;
  line-height: 1.45;
}
.bs-rb-tip {
  grid-area: t;
  font-size: 0.85rem;
  line-height: 1.4;
}
.bs-issues {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}
.bs-caps p {
  margin: 0.3rem 0;
}
.bs-scene p {
  margin: 0.3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.bs-statement {
  margin: 0;
  font-size: 1.15rem;
  text-align: center;
  border-left: 4px solid var(--bs-c);
}
.bs-speak-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.bs-speak-info {
  flex: 1;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.bs-ring {
  --p: 1;
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: conic-gradient(var(--bs-c) calc(var(--p) * 360deg), var(--sub-alt) 0);
}
.bs-ring::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: 50%;
  background: var(--bg);
}
.bs-ring > * {
  position: relative;
}
.bs-ring b {
  font-size: 1.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bs-ring .g-label {
  font-size: 0.65rem;
  max-width: 6rem;
}
.bs-ring.warn {
  background: conic-gradient(var(--error) calc(var(--p) * 360deg), var(--sub-alt) 0);
}
.bs-ring.warn b {
  color: var(--error);
}
.bs-rec {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--error);
  font-size: 0.85rem;
}
.bs-rec-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--error);
  animation: bs-blink 1.2s ease-in-out infinite;
}
.bs-examiner {
  border-left: 4px solid var(--bs-c);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bs-examiner.talking {
  box-shadow: 0 0 0 2px var(--bs-c);
}
.bs-ex-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bs-talk {
  margin-left: auto;
  animation: bs-blink 0.8s ease-in-out infinite;
}
.bs-ex-q {
  margin: 0;
  font-size: 1.12rem;
}
.bs-live {
  min-height: 4.5rem;
  max-height: 12rem;
  overflow: auto;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: var(--bg);
  line-height: 1.55;
}
.bs-interim {
  color: var(--g-gloss);
  font-style: italic;
}
.bs-live-n {
  margin: 0.35rem 0 0;
}
.bs-pre {
  white-space: pre-wrap;
  margin: 0;
}
.bs-audio {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.bs-audio audio {
  width: 100%;
  max-width: 28rem;
}
.bs-self {
  border: 0;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.bs-self legend {
  width: 100%;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.bs-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.bs-turn {
  margin: 0.25rem 0;
}
.bs-turn.me b {
  color: var(--main);
}

/* ---------------------------------------------------------------- mock exam */

.bs-exam-hero {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  line-height: 1.5;
}
.bs-exam-hero p {
  margin: 0;
}
.bs-variants .g-tab.active {
  outline: 1px solid var(--main);
}
.bs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bs-steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bs-step-n {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--g-gloss);
  font-size: 0.85rem;
}
.bs-steps li.done .bs-step-n {
  background: var(--g-ok);
  color: var(--bg);
}
.bs-steps li.now .bs-step-n {
  background: var(--main);
  color: var(--bg);
}
.bs-steps li.done {
  color: var(--g-gloss);
}
.bs-table-wrap {
  overflow-x: auto;
}
.bs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.bs-table th,
.bs-table td {
  padding: 0.45rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--bg);
  white-space: nowrap;
}
.bs-table thead th {
  color: var(--g-gloss);
  font-weight: 400;
  font-size: 0.78rem;
}
.bs-table tbody th {
  font-weight: 500;
}
.bs-table tbody th .g-en {
  display: block;
}
.bs-lvgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
}
.bs-lvblock .bs-barrow {
  grid-template-columns: 2.5rem 1fr 3rem;
}

/* ---------------------------------------------------------------- task success, global level, full papers */

.bs-score20 .g-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  color: var(--g-gloss);
}
.bs-score20 .g-label .g-en {
  font-size: inherit;
}
.bs-validated {
  color: var(--g-gloss);
  line-height: 1.45;
}
.bs-validated.ok {
  color: var(--g-ok-ink);
}
.bs-global {
  margin: 0.6rem 0 0.2rem;
  line-height: 1.45;
}
.bs-est-main > .g-label {
  flex-basis: 100%;
  margin-bottom: -0.35rem;
}
.bs-paper {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bs-paper-item {
  border-left: 4px solid var(--bs-c, var(--main));
}
.bs-paper-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.bs-paper-h .g-sub {
  flex-basis: 100%;
}
.bs-paper-item .bs-fold {
  margin-top: 0.4rem;
  background: var(--bg);
}
.bs-paper-item .bs-fold p {
  margin: 0.4rem 0 0;
  line-height: 1.45;
}
.bs-paper-res {
  border-left: 4px solid var(--bs-c, var(--main));
}
.bs-paper-res .g-sub {
  line-height: 1.45;
}
.bs-paper-task > summary {
  font-weight: 500;
}
.bs-paper-task[open] > summary {
  margin-bottom: 0.6rem;
}
.bs-paper-task > .bs-meter-wrap,
.bs-paper-task > .g-card,
.bs-paper-task > .bs-compare,
.bs-paper-task > .bs-note {
  margin-top: 0.6rem;
}
.bs-parttabs {
  flex-wrap: wrap;
}
.bs-parttabs .g-tab {
  font-variant-numeric: tabular-nums;
}
.bs-wc-s.under {
  color: var(--g-coin-ink);
}
.bs-wc-s.in {
  color: var(--g-ok-ink);
}
.bs-wc-s.over {
  color: var(--error);
}
.bs-table td .g-sub {
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 760px) {
  .bs-write-grid,
  .bs-compare,
  .bs-two,
  .bs-docs {
    grid-template-columns: 1fr;
  }
  .bs-hero {
    flex-direction: column;
    text-align: center;
  }
  .bs-hero-info {
    align-items: center;
  }
  .bs-kicker {
    justify-content: center;
  }
  .bs-hero .bs-btns {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .bs-grid {
    grid-template-columns: 1fr;
  }
  .bs-hero-sprite {
    width: 140px;
    height: 140px;
  }
  .bs-name {
    font-size: 1.35rem;
  }
  .bs-res-sprite {
    width: 110px;
    height: 110px;
  }
  .bs-rb {
    grid-template-columns: 1fr;
    grid-template-areas: "h" "p" "d" "t";
  }
  .bs-barrow {
    grid-template-columns: minmax(5.5rem, 8rem) 1fr 2.6rem;
    gap: 0.4rem;
  }
  .bs-ring {
    width: 7rem;
    height: 7rem;
  }
  .bs-ring b {
    font-size: 1.4rem;
  }
  .bs-intro-banner h2 {
    font-size: 1.25rem;
  }
  .bs-score20 b {
    font-size: 2.4rem;
  }
}

/* ---------------------------------------------------------------- motion */

@keyframes bs-float {
  50% {
    transform: translateY(-6px);
  }
}
@keyframes bs-glow {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 35%, transparent);
  }
}
@keyframes bs-bars {
  to {
    transform: scaleX(0);
  }
}
@keyframes bs-flash {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bs-drop {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes bs-slide {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes bs-fade-in {
  to {
    opacity: 1;
  }
}
@keyframes bs-ko {
  0% {
    transform: none;
    filter: none;
  }
  30% {
    transform: translateX(-6px) rotate(-4deg);
  }
  100% {
    transform: translateY(14px) rotate(12deg);
    filter: grayscale(0.85) brightness(0.8);
    opacity: 0.75;
  }
}
@keyframes bs-taunt {
  25% {
    transform: translateY(-10px) rotate(-3deg);
  }
  50% {
    transform: none;
  }
  75% {
    transform: translateY(-6px) rotate(3deg);
  }
}
@keyframes bs-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes bs-grow {
  from {
    width: 0;
  }
}
@keyframes bs-blink {
  50% {
    opacity: 0.35;
  }
}

.bs-rm *,
.bs-rm *::before,
.bs-rm *::after {
  animation: none !important;
  transition: none !important;
}
.bs-rm .bs-ko {
  filter: grayscale(0.85) brightness(0.8);
  transform: rotate(8deg);
}
@media (prefers-reduced-motion: reduce) {
  .bs-wrap *,
  .bs-intro * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}