/* Chapter 2: SVG text, the culturing lab, the bacterium builder, the digestion lab and the equation builder. */

.t-title { font: 800 34px system-ui, sans-serif; fill: #e8eefc; }
.t-eq { font: 800 46px system-ui, sans-serif; fill: #fff; }
.t-cap { font: 700 28px system-ui, sans-serif; fill: #e8eefc; }
.t-small { font: 600 22px system-ui, sans-serif; fill: #cfd9ef; }
.t-note { font-weight: 500; fill: #9fb4dd; }
.t-display { font: 700 30px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8ce99a; }
.t-title.gold { fill: #ffd166; }
.t-title.green, .t-cap.green { fill: #8ce99a; }
.t-title.red, .t-cap.red { fill: #ff8a8a; }
.t-small.dark { fill: #0d1730; font-weight: 800; }
.t-small.atp { fill: #8ce99a; font-weight: 800; }

.glow-line { filter: drop-shadow(0 0 10px #ffd166); animation: glow-pulse 1.6s ease-in-out infinite alternate; }
@keyframes glow-pulse { from { opacity: .55; } to { opacity: 1; } }
.flow-arrows { animation: flow-pulse 1.4s ease-in-out infinite alternate; }
@keyframes flow-pulse { from { opacity: .45; } to { opacity: 1; } }

.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Culturing lab */
.cl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); width: 100%; align-items: center; }
.cl-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.cl-picture svg { display: block; width: 100%; height: auto; }
.cl-controls { display: flex; flex-direction: column; gap: 6px; }
.cl-controls .lab-tools, .cl-controls .act-actions { justify-content: flex-start; }
.cl-colony { cursor: pointer; }
.cl-colony:focus-visible { outline: 3px solid var(--gold); }
.cl-ring { fill: transparent; stroke: transparent; stroke-width: 5; }
.cl-colony.hint .cl-ring { stroke: var(--gold); }
.cl-colony.found .cl-ring { stroke: var(--ok); }

/* Bacterium builder */
.bb-clue { margin: 0; min-height: 2.8em; text-align: center; line-height: 1.4; }
.bb-clue b { color: var(--gold); }
.bb-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); width: 100%; align-items: center; }
.bb-figure { width: 100%; border-radius: .8em; background: #0d1730; overflow: hidden; }
.bb-figure svg { display: block; width: 100%; height: auto; }
.bb-tray { display: flex; flex-direction: column; gap: 6px; }
.bb-btn { font-weight: 700; border-left: 8px solid var(--swatch) !important; }
.bb-btn.built-btn { background: #1f3a2c; }
.bp { opacity: 0; transition: opacity .6s, filter .4s; }
.bp.built { opacity: 1; cursor: pointer; }
.bp.glow { filter: drop-shadow(0 0 14px #ffd166); }
.bb-ghost { transition: opacity .6s; }
.bb-ghost.gone { opacity: 0; }
.bb-prop { opacity: 0; transition: opacity .6s, transform 1s ease; }
.bb-phago { transform: translateX(-70px); }
.bb-phago.show { opacity: 1; transform: translateX(0); }
.bb-phago.show.done { opacity: 0; transform: translateX(-160px); transition-delay: .4s; }
.bb-food.show, .bb-dots.show { opacity: 1; }
.bb-dots.show.done { transform: translateY(125px); }
.bb-dna2.done { opacity: 1; }
.bb-cell { transition: transform 1.2s ease; }
.bb-cell.swim { transform: translateX(60px); }

/* Digestion lab */
.dl-picture { align-self: center; border-radius: .8em; overflow: hidden; background: #0d1730; }
.dl-buttons .chip-btn { text-align: center; }

/* Equation builder */
.eq-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.eq-slot { min-width: 6em; padding: .45em .8em; border: 2px dashed rgba(255, 255, 255, .4); border-radius: .6em; text-align: center; font-weight: 700; color: rgba(255, 255, 255, .6); }
.eq-slot.next { border-color: var(--gold); color: var(--gold); }
.eq-slot.filled { border-style: solid; border-color: var(--ok); background: #1f5a3a; color: #fff; }
.eq-op { font-size: 1.3em; font-weight: 800; color: var(--gold); }
.eq-bank { margin-top: 4px; }

@container (max-width: 620px) {
  .cl-grid, .bb-grid { grid-template-columns: 1fr; }
  .bb-tray { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .eq-slot { min-width: 4.5em; padding: .35em .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-line, .flow-arrows { animation: none; }
}