/* Chapter 9: scene text, the target lab, the resistance lab and the three-bin sorts. */

.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.tile-title { font-size: 25px; font-weight: 800; }
.disc-text { font: 800 20px system-ui, sans-serif; fill: #495057; }
.tag-dark { font: 800 30px system-ui, sans-serif; fill: #c92a2a; }

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

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

.tl-prompt { margin: 0; text-align: center; line-height: 1.4; }
.tl-prompt b { color: var(--gold); }
.tl-picture { width: min(100%, 64cqw); align-self: center; border-radius: .8em; background: #0d1730; }
.tl-picture svg { display: block; width: 100%; height: auto; }
.bpart { cursor: pointer; outline: none; transition: filter .2s; }
.bpart:hover, .bpart:focus-visible { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.bpart.hint { animation: tl-hint 1s ease-in-out infinite alternate; }
.bpart.hit { filter: drop-shadow(0 0 8px #4ade80) brightness(1.25); }
.bpart.miss { filter: drop-shadow(0 0 8px #ff6b6b); }
@keyframes tl-hint { from { filter: drop-shadow(0 0 2px #ffd166); } to { filter: drop-shadow(0 0 12px #ffd166) brightness(1.4); } }

.rl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.rl-left { display: flex; flex-direction: column; gap: 6px; }
.rl-picture { width: 100%; border-radius: .8em; background: #0d1730; }
.rl-picture svg { display: block; width: 100%; height: auto; }
.rl-controls { display: flex; flex-direction: column; gap: 6px; }
.rl-controls .sim-legend, .rl-controls .lab-label { justify-content: flex-start; }
.rl-treats { display: flex; flex-direction: column; gap: 6px; }
.rl-treat { display: flex; flex-direction: column; text-align: left; padding: .4em .8em; }
.rl-treat small { font-weight: 500; opacity: .8; }
.rl-controls .btn { align-self: flex-start; }
.btn.rl-nudge { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px rgba(255, 209, 102, .35); color: #ffe7a8; }
.rl-day { font: 700 16px system-ui, sans-serif; fill: #e8eefc; }
.rl-empty { font: 800 26px system-ui, sans-serif; fill: #c9f7d4; paint-order: stroke; stroke: #0d1730; stroke-width: 6px; }
.rl-drug { transition: opacity .4s; }
.rl-born { animation: rl-pop .5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes rl-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.rl-chart { display: grid; gap: 4px; width: 100%; }
.rl-row { display: grid; grid-template-columns: minmax(80px, 9.5em) 1fr; align-items: center; gap: 2px 8px; font-size: .8em; }
.rl-label { font-weight: 700; color: #cfd9ef; }
.rl-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.rl-bar span { transition: width .5s; }
.rl-value { grid-column: 2; color: #9fb4dd; font-size: .9em; }
.rl-goals li { font-size: .85em; }

@media (prefers-reduced-motion: reduce) {
  .bpart.hint, .rl-born { animation: none; }
  .bpart.hint { filter: drop-shadow(0 0 10px #ffd166); }
}

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