/* Chapter 1: scene text, gentle motion, the Miller–Urey lab, the MRS GREN spotter and the three-bin sort. */

.scene-tag { font: 700 30px system-ui, sans-serif; fill: #e8eefc; paint-order: stroke; stroke: #0d1730; stroke-width: 6px; stroke-linejoin: round; }
.scene-tag.small { font-size: 24px; fill: #cfd9ef; }
.scene-tag.gold { fill: #ffd166; }
.scene-tag.dark { fill: #14213d; stroke: none; font-weight: 800; }
.tile-letter { font: 800 72px system-ui, sans-serif; }
.tile-word { font: 700 17px system-ui, sans-serif; fill: #e8eefc; }

.wiggle { transform-box: fill-box; transform-origin: center; animation: wiggle 3.2s ease-in-out infinite alternate; }
.wiggle.slow { animation-duration: 4.6s; }
@keyframes wiggle { from { transform: translate(-6px, 3px) rotate(-3deg); } to { transform: translate(6px, -3px) rotate(3deg); } }
.shimmer { animation: shimmer 1.4s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .35; transform: translateY(4px); } to { opacity: .9; transform: translateY(-4px); } }
.spark-flicker { animation: flicker .22s steps(2) infinite; }
@keyframes flicker { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .wiggle, .shimmer, .spark-flicker { animation: none; }
}

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

.mu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.mu-picture { width: 100%; border-radius: .8em; background: #0d1730; }
.mu-controls { display: flex; flex-direction: column; gap: 6px; }
.mu-controls .lab-tools, .mu-controls .act-actions, .mu-controls .sim-legend { justify-content: flex-start; }
.mu-controls .chip-btn { padding: .35em .7em; font-size: .9em; }
.mu-graph svg { width: 100%; height: auto; display: block; }
.lab-readout { margin: 0; font-weight: 700; font-size: .9em; color: #e8eefc; text-align: center; }
.mu-goals li { font-size: .85em; }

.mrs-letters { display: flex; justify-content: center; gap: max(4px, .8cqw); }
.mrs-letters span {
  width: max(28px, 3.6cqw);
  height: max(28px, 3.6cqw);
  display: grid;
  place-items: center;
  border-radius: .5em;
  font-weight: 800;
  font-size: 1.2em;
  color: var(--c);
  border: 2px solid var(--c);
  opacity: .3;
  transition: opacity .4s, background .4s;
}
.mrs-letters span.lit { opacity: 1; background: color-mix(in srgb, var(--c) 25%, transparent); }
.mrs-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: max(6px, .9cqw); }
.mrs-btn { text-align: center; border-left: 5px solid var(--c); }
.mrs-btn b { color: var(--c); }

.sort3 .sort-buttons { flex-wrap: wrap; }
.sort3 .sort-bins { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@container (max-width: 620px) {
  .mu-grid { grid-template-columns: 1fr; }
  .mu-picture { max-width: 360px; justify-self: center; }
  .sort3 .sort-bins { grid-template-columns: 1fr; }
}

.row4 .slot, .row4 .tile { height: max(64px, 11cqw); }
.row4 .tile span { padding: 0 .4em; line-height: 1.25; text-align: center; }
@container (max-width: 620px) {
  .row4 .slot, .row4 .tile { height: 76px; }
  .row4 .tile { font-size: .9em; }
}