/* Stimulus control lesson. All rules scoped under .stc-* */
.stc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stc-hero img { width: 300px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(252,192,80,.25)); }
.stc-note { font-size: 13px; color: var(--dim); text-align: center; }

/* ---------- the lamp game ---------- */
.stc-game { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stc-rules { display: flex; gap: 8px; width: 100%; }
.stc-rules span { flex: 1; padding: 8px 10px; border-radius: 10px; background: var(--raised); font-size: 13px; text-align: center; line-height: 1.25; }
.stc-rules b { color: var(--gold); }
.stc-lampbox { position: relative; width: 100%; height: 150px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.stc-lamp { --lamp: #333a52; width: 104px; height: 104px; border-radius: 50%; background: #262D47; box-shadow: inset 0 -8px 18px rgba(0,0,0,.4); transition: background .08s, box-shadow .08s; }
.stc-lamp.on { background: radial-gradient(circle at 40% 35%, #fff 0 8%, var(--lamp) 45%); box-shadow: 0 0 40px 8px color-mix(in srgb, var(--lamp) 60%, transparent), inset 0 -8px 18px rgba(0,0,0,.25); }
.stc-pop { position: absolute; right: 14px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; opacity: 0; }
.stc-pop.on { opacity: 1; animation: stc-rise .7s ease-out forwards; }
.stc-pop i { font: 700 20px var(--mono); font-style: normal; }
.stc-minus { color: var(--red); }
.stc-plus { color: var(--mint); }
@keyframes stc-rise { from { transform: translateY(10px); } to { transform: none; } }
.stc-coins { font-size: 14px; font-weight: 700; color: var(--dim); }
.stc-coins b { font: 600 20px var(--mono); color: var(--gold); margin-left: 4px; }
.btn.stc-pad { min-height: 72px; font-size: 20px; letter-spacing: .06em; }

.stc-record { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.stc-rec { display: grid; grid-template-columns: 58px 1fr; align-items: center; column-gap: 8px; }
.stc-rec > span { font-size: 13px; font-weight: 700; color: var(--dim); }
.stc-rec > div { display: grid; grid-template-columns: repeat(6, minmax(0, 32px)); gap: 6px; }
.stc-record i, .stc-key i { display: block; aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; opacity: .35; }
.stc-record i.g, .stc-key i.g { background: #FCC050; }
.stc-record i.b { background: #4D8EFF; }
.stc-record i.p, .stc-key i.p { opacity: 1; border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.4); }
.stc-key { display: flex; gap: 18px; font-size: 13px; color: var(--dim); }
.stc-key span { display: flex; align-items: center; gap: 6px; }
.stc-key i { width: 16px; }

.stc-map { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.stc-mrow { display: flex; align-items: center; gap: 14px; background: var(--raised); border-radius: 16px; padding: 12px 16px; }
.stc-mrow i { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.stc-mrow i:first-child { box-shadow: 0 0 18px rgba(252,192,80,.5); }
.stc-mrow b { font-size: 18px; flex: 1; }
.stc-mrow span { font: 700 16px var(--mono); }
.stc-mrow .ok { color: var(--mint); }
.stc-mrow .no { color: var(--red); }

/* ---------- the cinema ---------- */
.stc-corn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stc-corn img { width: 100%; max-width: 330px; max-height: 130px; object-fit: contain; }
.stc-who { font-size: 14px; font-weight: 700; text-align: center; }
.stc-poplab { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 330px; text-align: center; font-size: 14px; font-weight: 700; }
.stc-poplab span:last-child { color: #c9c3b6; }
.stc-bars { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.stc-brow { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; }
.stc-brow div { height: 22px; border-radius: 8px; background: var(--surface); overflow: hidden; }
.stc-brow i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 8px; transition: width .8s cubic-bezier(.3,.7,.3,1); }
.stc-brow.stc-stale i { background: #9c968a; }
.stc-room { width: 100%; padding: 22px 12px; border-radius: 16px; background: linear-gradient(180deg, #232b44, #1a2136); display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.stc-room b { font-size: 17px; }
.stc-room span { font-size: 13px; color: var(--dim); }

/* ---------- desk ---------- */
.stc-desk { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.stc-items { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 84px); justify-content: center; gap: 8px; }
.stc-deskimg { width: 92%; display: block; max-height: 140px; object-fit: contain; margin-top: -26px; }
.stc-item { min-height: 84px; overflow: visible; border: 0; border-radius: 14px; background: rgba(26,33,54,.92); box-shadow: 0 4px 0 rgba(0,0,0,.4), inset 0 0 0 1px var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; cursor: pointer; transition: transform .4s, opacity .4s; color: var(--text); }
.stc-item img { width: 54px; height: 54px; object-fit: contain; }
.stc-item span { font: 600 12px var(--sans); }
.stc-item.gone { transform: translateY(-30px) scale(.6); opacity: 0; pointer-events: none; }
.stc-item.stay { box-shadow: 0 4px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--mint); }

@media (max-height: 700px) {
  .stc-lampbox { height: 120px; }
  .stc-lamp { width: 84px; height: 84px; }
  .stc-hero img { max-height: 26vh; }
  .stc-corn img { max-height: 80px; }
  .stc-deskimg { max-height: 96px; }
  .stc-item { min-height: 0; padding: 6px 4px; }
  .stc-item img { width: 42px; height: 42px; }
}