/* Chapter 5: SVG text for the fungi and virus scenes, the tap-the-part labeller, the equation builder and the "Is it alive?" lab. */

.c5-note { font: 600 28px system-ui, sans-serif; fill: #e8eefc; }
.c5-note.small { font-size: 24px; fill: #cfd9ef; }
.c5-dark { font: 700 28px system-ui, sans-serif; fill: #1b2340; }
.c5-num { font: 800 26px system-ui, sans-serif; fill: #1b2340; }
.c5-step { font: 700 28px system-ui, sans-serif; fill: #e8eefc; }
.c5-title { font: 800 44px system-ui, sans-serif; fill: #ffe7a8; }
.c5-tag { font: 800 32px system-ui, sans-serif; fill: #e8eefc; }
.c5-tag.gold { fill: #ffd166; }
.c5-tag.blue { fill: #74c0fc; }
.c5-tag.pink { fill: #ff8fab; }
.c5-tag.green { fill: #8ce99a; }
.c5-gene { font: 800 28px system-ui, sans-serif; fill: #fff; }
.c5-list { font: 700 28px system-ui, sans-serif; fill: #e8eefc; }
.c5-letter { font: 800 110px system-ui, sans-serif; }
.c5-badge { font: 800 36px system-ui, sans-serif; fill: #fff; }
.c5-eq { font: 800 50px system-ui, sans-serif; fill: #fff; }
.c5-eq .eq-g { fill: #ffd166; }
.c5-eq .eq-e { fill: #ff8fab; }
.c5-eq .eq-c { fill: #74c0fc; }
.c5-eq .eq-a { fill: #8ce99a; }
.c5-eq-small { font: 600 34px system-ui, sans-serif; fill: #b9c3d8; }

/* Order tiles carry sentence-length labels, so let them wrap inside their slots. */
.act .row4 .tile { white-space: normal; height: auto; min-height: max(52px, 10cqw); padding: .4em .5em; font-size: .9em; line-height: 1.25; text-align: center; }
.act .row4 .slot { min-height: max(52px, 10cqw); height: auto; }
.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Tap-the-part labeller */
.c5-label-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); align-items: start; width: 100%; }
.c5-figure { width: 100%; border-radius: .8em; background: #0d1730; padding: 4px; box-sizing: border-box; }
.c5-figure svg { width: 100%; height: auto; display: block; }
.c5-label-side { display: flex; flex-direction: column; gap: max(6px, 1cqw); }
.c5-label-side .act-title { text-align: left; }
.c5-label-side .act-feedback { text-align: left; }
.c5-fn { gap: max(5px, .7cqw); }
.c5-fn[hidden] { display: none; }
.c5-fn .chip-btn { font-size: .92em; }
.c5-part { cursor: pointer; transition: filter .2s; outline: none; }
.c5-part:hover { filter: brightness(1.2); }
.c5-part:focus-visible { filter: drop-shadow(0 0 6px #ffd166) brightness(1.2); }
.c5-part.found { filter: drop-shadow(0 0 6px #4ade80); }
.c5-part.hint { animation: c5-hint 1.2s ease-in-out infinite; }
@keyframes c5-hint { 50% { filter: drop-shadow(0 0 10px #ffd166) brightness(1.4); } }
.c5-found { margin: 0; padding-left: 1.1em; display: grid; gap: .25em; font-size: .9em; color: #c9f7d4; }
.c5-found:empty { display: none; }

/* Equation builder */
.c5-eq-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1em; }
.c5-slot { min-width: 6.5em; padding: .45em .8em; border-radius: .7em; border: 2px dashed rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .55); text-align: center; }
.c5-slot.next { border-color: var(--gold); border-style: solid; color: var(--gold); }
.c5-slot.done { border: 2px solid var(--ok); background: #1f5a3a; color: #fff; }
.c5-slot.fixed { border: 2px solid #3a4f7d; color: #8ce99a; min-width: 0; }
.c5-op { color: var(--gold); font-size: 1.2em; }

/* "Is it alive?" lab */
.c5-lab { align-self: center; border-radius: 12px; }
.c5-evidence { font: 700 19px system-ui, sans-serif; fill: #c9f7d4; paint-order: stroke; stroke: #0f1a33; stroke-width: 5px; }
.c5-evidence.fail { fill: #ffb3b3; }
.c5-spec-name { font: 800 24px system-ui, sans-serif; fill: #e8eefc; }
.c5-box { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .3); stroke-width: 2; transition: fill .4s; }
.pass .c5-box { fill: #2b8a3e; stroke: #8ce99a; }
.fail .c5-box { fill: #a61e1e; stroke: #ff8a8a; }
.c5-box-letter { font: 800 18px system-ui, sans-serif; fill: #fff; pointer-events: none; }
.c5-tests .chip-btn { font-size: .9em; padding: .4em .7em; }
.c5-predict, .c5-final { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: .6em .9em; border-radius: .8em; background: rgba(255, 255, 255, .06); }
.c5-predict[hidden], .c5-final[hidden] { display: none; }
.c5-predict-q { margin: 0; text-align: center; font-weight: 700; }
.c5-predict-q b { color: var(--gold); }
.c5-final .options { width: 100%; }
.c5-fx-text { font: 800 20px system-ui, sans-serif; fill: #ff8a8a; }

.c5-fx-swim { animation: c5-swim 1.4s ease-in-out infinite alternate; }
.c5-fx-seek { animation: c5-seek 1.6s ease-in-out forwards; }
.c5-fx-grow { transform-box: fill-box; transform-origin: center; animation: c5-grow 1.6s ease-out forwards; }
.c5-fx-stretch { transform-box: fill-box; transform-origin: center; animation: c5-stretch 1.6s ease-out forwards; }
.c5-fx-split-l { animation: c5-split-l 1.6s ease-out forwards; }
.c5-fx-split-r { animation: c5-split-r 1.6s ease-out forwards; }
.c5-fx-bud { transform-box: fill-box; transform-origin: center; animation: c5-bud 1.6s ease-out forwards; }
.c5-fx-rise { animation: c5-rise 1.8s linear infinite; }
.c5-fx-out { animation: c5-out 1.8s ease-out infinite; }
.c5-fx-in { animation: c5-in 1.8s ease-in infinite; }
.c5-fx-pulse { animation: c5-pulse 1.2s ease-in-out infinite; }

@keyframes c5-swim { from { transform: translateX(-26px); } to { transform: translateX(22px); } }
@keyframes c5-seek { from { transform: translateX(20px); } to { transform: translateX(-26px); } }
@keyframes c5-grow { from { transform: scale(.8); } to { transform: scale(1.2); } }
@keyframes c5-stretch { from { transform: scale(.85, 1); } to { transform: scale(1.3, 1); } }
@keyframes c5-split-l { from { transform: translateX(0); } to { transform: translateX(-52px); } }
@keyframes c5-split-r { from { transform: translateX(0); } to { transform: translateX(52px); } }
@keyframes c5-bud { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes c5-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-80px); opacity: 0; } }
@keyframes c5-out { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes c5-in { from { transform: translate(var(--dx), var(--dy)); opacity: 1; } to { transform: translate(0, 0); opacity: 0; } }
@keyframes c5-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .c5-fx-swim, .c5-fx-seek, .c5-fx-grow, .c5-fx-stretch, .c5-fx-split-l, .c5-fx-split-r, .c5-fx-bud,
  .c5-fx-rise, .c5-fx-out, .c5-fx-in, .c5-fx-pulse, .c5-part.hint { animation-iteration-count: 1; animation-duration: .01s; }
  .c5-fx-rise, .c5-fx-out, .c5-fx-in { animation: none; }
}

@container (max-width: 620px) {
  .c5-label-grid { grid-template-columns: 1fr; }
  .c5-figure { max-width: 360px; justify-self: center; }
  .c5-label-side .act-title, .c5-label-side .act-feedback { text-align: center; }
  .c5-slot { min-width: 5em; }
}