/* Chapter 2: scene text, worked-example tallies, the word-equation builder and the equation balancer. */

.atom-letter { font-weight: 800; font-family: system-ui, sans-serif; }
.ion-letter { font: 800 24px system-ui, sans-serif; fill: #0d1730; }
.formula-text { font: 800 52px system-ui, sans-serif; fill: #e8eefc; }
.formula-text.coef-new { fill: var(--gold); }
.big-op { font: 800 64px system-ui, sans-serif; fill: #e8eefc; }
.count-text { font: 700 40px system-ui, sans-serif; fill: #cfd9ef; }
.count-text.bad { fill: #ff8a8a; }
.count-text.ok { fill: #4ade80; }

.scene-eq { font: 800 44px system-ui, sans-serif; fill: #e8eefc; }
.scene-eq.big { font-size: 54px; }
.scene-text { font: 600 34px system-ui, sans-serif; fill: #e8eefc; }
.scene-formula { font: 800 38px system-ui, sans-serif; fill: #a5d8ff; }
.scene-head { font: 800 40px system-ui, sans-serif; fill: var(--gold); }
.scene-note { font: 600 28px system-ui, sans-serif; fill: #9fb4dd; }
.scene-note.gold { fill: var(--gold); font-weight: 800; }
#scene .hl { fill: var(--gold); }
.ph-text { font: 800 42px system-ui, sans-serif; fill: #fff; }
.stamp-text { font: 900 46px system-ui, sans-serif; fill: #ff8a8a; letter-spacing: 2px; }
.rule-mark { font: 800 34px system-ui, sans-serif; }
.rule-mark.ok { fill: #4ade80; }
.rule-mark.bad { fill: #ff8a8a; }
.step-num { font: 900 34px system-ui, sans-serif; fill: #14213d; }

.eq-text { font: 800 60px system-ui, sans-serif; fill: #e8eefc; }
.eq-text .eq-op { fill: #9fb4dd; }
.eq-text .coef { fill: #e8eefc; }
.eq-text .coef.new { fill: var(--gold); }
.eq-text .coef.bad { fill: #ff8a8a; }
.tally-head { font: 700 26px system-ui, sans-serif; fill: #9fb4dd; letter-spacing: .05em; }
.tally-num { font: 800 36px system-ui, sans-serif; }
.tally-note { font: 800 36px system-ui, sans-serif; }
.tally-note.ok { fill: #4ade80; }
.tally-note.bad { fill: #ff8a8a; }

.bubble { transform-box: fill-box; animation: rise 2.6s ease-in infinite; opacity: 0; }
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(-190px); opacity: 0; }
}

/* Word-equation builder */
.word-eq {
  margin: 0;
  padding: .55em 1em;
  border-radius: .8em;
  background: rgba(255, 255, 255, .07);
  border: 2px solid #3a4f7d;
  font-size: 1.15em;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}
.word-eq.done { border-color: var(--ok); background: #143a28; color: #c9f7d4; }
.word-body { display: flex; flex-direction: column; align-items: center; gap: max(8px, 1.1cqw); width: 100%; }
.word-group { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.word-prompt { font-size: 1em; color: #e8eefc; }
.word-options { display: flex; flex-wrap: wrap; justify-content: center; gap: max(6px, .8cqw); }
.word-opt { text-align: center; font-weight: 700; }
.word-opt.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Equation balancer */
.bal-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bal-pick { font-size: .85em; font-weight: 700; text-align: center; padding: .35em .75em; }
.bal-pick.on { border-color: var(--gold); background: #2c3d66; }
.bal-pick.solved { color: #c9f7d4; }
.bal-pick.solved:not(.on) { background: #1f5a3a; border-color: var(--ok); }

.bal-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: max(6px, 1cqw) max(8px, 1.4cqw);
  padding: max(8px, 1cqw) max(10px, 1.4cqw);
  border-radius: 1em;
  border: 3px solid #3a4f7d;
  background: rgba(255, 255, 255, .05);
  transition: border-color .3s, background .3s;
}
.bal-eq.balanced { border-color: var(--ok); background: #143a28; }
.bal-eq.almost { border-color: var(--gold); }
.bal-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: max(4px, .8cqw); }
.bal-term { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bal-formula { font-size: 1.35em; font-weight: 800; white-space: nowrap; }
.bal-coef { color: var(--gold); margin-right: .08em; display: inline-block; min-width: .7em; text-align: right; }
.bal-coef.one { opacity: .4; }
.bal-op, .bal-arrow { font-size: 1.4em; font-weight: 800; color: #9fb4dd; }
.bal-step {
  width: max(34px, 3.6cqw);
  height: max(30px, 3cqw);
  font: 800 1.1em system-ui, sans-serif;
  color: #fff;
  background: #1d2b4b;
  border: 2px solid #3a4f7d;
  border-radius: .6em;
  cursor: pointer;
}
.bal-step:hover:not(:disabled) { border-color: var(--gold); }
.bal-step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bal-step:disabled { opacity: .3; cursor: default; }

.bal-bars { display: grid; gap: 5px; width: 100%; }
.bal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.2em 2.4em 2.2em minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.bal-head { font-size: .8em; font-weight: 700; color: #9fb4dd; text-align: center; }
.bal-head span:first-child { text-align: right; }
.bal-head span:last-child { text-align: left; }
.bal-bar { display: flex; gap: 2px; height: 1.2em; }
.bal-bar.left { flex-direction: row-reverse; }
.bal-bar i { flex: 0 0 calc((100% - (var(--scale) - 1) * 2px) / var(--scale)); border-radius: 3px; background: var(--c); }
.bal-num { font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.bal-row.ok .bal-num { color: #4ade80; }
.bal-row.bad .bal-num { color: #ff8a8a; }
.bal-el {
  display: grid;
  place-items: center;
  height: 2em;
  border-radius: 50%;
  background: var(--c);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 0 0 3px #ff8a8a;
}
.bal-row.ok .bal-el { box-shadow: 0 0 0 3px #4ade80; }
.bal-status { margin: 0; text-align: center; font-weight: 700; color: #ffd0d0; line-height: 1.4; }
.bal-status.ok { color: #c9f7d4; font-size: 1.1em; }
.bal-status.almost { color: #ffe7a8; }

@container (max-width: 620px) {
  .bal-formula { font-size: 1.15em; }
  .bal-row { grid-template-columns: minmax(0, 1fr) 1.8em 2.2em 1.8em minmax(0, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: .8; }
}