/* Chiaroscuro lesson. All rules scoped under .ch-* */
.ch-stage { display: grid; place-items: center; }
.ch-ball, .ch-bumps { width: min(100%, 320px); height: auto; display: block; border-radius: 14px; overflow: hidden; }
.ch-wall { fill: #232533; } .ch-floor { fill: #181a24; }
.ch-cast { fill: #000; filter: blur(3px); }
.ch-lamp circle { fill: var(--gold); }
.ch-lamp .ch-lhit { fill: rgba(252,192,80,.14); }
.ch-lamp path { stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.ch-drag { touch-action: none; cursor: grab; }
.ch-drag .ch-lhit { animation: ch-pulse 1.4s ease-in-out 3; }
@keyframes ch-pulse { 50% { fill: rgba(252,192,80,.34); } }

.ch-board { fill: #8f8a82; }
.ch-d { cursor: pointer; }
.ch-dhit { fill: transparent; }
.ch-ring { fill: none; stroke: transparent; stroke-width: 4; }
.ch-d.ok .ch-ring { stroke: var(--mint); }
.ch-d.no .ch-ring { stroke: var(--red); }

.figure.ch-fig { width: min(100%, 340px); }

@media (max-height: 700px) {
  .ch-ball, .ch-bumps { width: min(100%, 270px); }
  .figure.ch-fig { width: min(100%, 280px); }
}