/* Spotlight effect lesson. All rules scoped under .spot-* */

.spot-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spot-hero { width: min(88%, 340px); }
.spot-hero img { width: 100%; display: block; }
.spot-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the machine */
.spot-mach { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.spot-svg { width: 100%; display: block; border-radius: 14px; background: radial-gradient(ellipse at 30% 0%, #1E2540 0%, #0E1322 75%); }
.spot-light { transition: opacity .3s; }
.spot-ring { fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.spot-p.spot-guessed .spot-ring { opacity: 1; }
.spot-own { fill: none; }
.spot-p circle[r="9"] { transition: fill .2s; }
.spot-p.spot-real circle[r="9"] { stroke: var(--mint); stroke-width: 3; }
.spot-mini { fill: #FCC050; opacity: 0; transition: opacity .5s; }
.spot-all .spot-mini { opacity: .22; }
.spot-all .spot-own { fill: rgba(252, 192, 80, .35); }
.spot-name { font: 700 12px var(--sans); fill: #2A2216; }
.spot-print { transition: opacity .3s; }
.spot-tv { opacity: 0; transition: opacity .3s; }
.spot-rec { font: 700 21px var(--mono); fill: #F2A09C; }
.spot-video .spot-tv { opacity: 1; }

.spot-bars { display: flex; align-items: center; gap: 12px; }
.spot-gg { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.spot-g1 .gt i { background: var(--gold); }
.spot-gg .gt i { transition: none; }

/* the clock */
.spot-clock { position: relative; width: 104px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; touch-action: none; cursor: grab; }
.spot-clock svg { width: 104px; height: 104px; display: block; }
.spot-clock b { font: 700 13px var(--mono); color: var(--gold); }
.spot-face { fill: #F6EFE0; stroke: #C9A060; stroke-width: 3; }
.spot-sweep { fill: rgba(123, 92, 253, .3); }
.spot-tick { stroke: #7A6A58; stroke-width: 2; stroke-linecap: round; }
.spot-hand { stroke: #2A2216; stroke-width: 3.5; stroke-linecap: round; }
.spot-knob { fill: var(--gold); stroke: #2A2216; stroke-width: 2; }
.spot-done .spot-knob { fill: var(--mint); }

/* the name */
.spot-flow { width: 100%; max-width: 360px; display: flex; align-items: center; gap: 4px; }
.spot-flow div { flex: 1; border-radius: 10px; background: var(--raised); border: 1px solid var(--line-strong); padding: 6px 6px; text-align: center; }
.spot-flow b { font: 700 12px/1.2 var(--sans); }
.spot-flow i { font-style: normal; color: var(--dim); font-weight: 700; }
.spot-flow div:first-child { border-color: var(--gold); color: var(--gold); }
.spot-flow .spot-out { border-color: var(--red); color: #F2A09C; }
.spot-small .spot-svg { max-height: 170px; }

/* use the rule */
.spot-three { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.spot-who { display: flex; gap: 12px; align-items: center; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); padding: 10px 12px; }
.spot-who b { font: 700 17px var(--serif); min-width: 40px; }
.spot-who span { font: 500 14px/1.3 var(--sans); }
.spot-who.spot-hot { border-color: var(--gold); background: rgba(252, 192, 80, .12); }

@media (max-height: 700px) {
  .spot-svg { max-height: 150px; }
  .spot-small .spot-svg { max-height: 120px; }
  .spot-clock, .spot-clock svg { width: 84px; }
  .spot-clock svg { height: 84px; }
}
.spot-mach { position: relative; }