/* Milgram Experiment lesson. All rules scoped under .mlg-* */
.mlg-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mlg-open { flex: 1; justify-content: center; padding: 0 12px; }

/* the board */
.mlg-board { width: 100%; max-width: 360px; padding: 12px 10px 10px; border-radius: 14px; background: linear-gradient(#5a5f6b, #3c404a); border: 2px solid #6d7380; box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 8px; }
.mlg-meter { align-self: center; display: flex; align-items: baseline; gap: 6px; padding: 2px 14px; border-radius: 10px; background: #e9e2cf; color: #2a2a2a; font-family: var(--sans); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.mlg-meter b { font: 800 22px var(--sans); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.mlg-meter span { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.mlg-meter.hot b { color: #b3261e; }
.mlg-brow { display: flex; justify-content: space-between; gap: 4px; }
.mlg-grp { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.mlg-sws { display: flex; gap: 3px; justify-content: center; }
.mlg-sw { position: relative; width: 14px; height: 26px; display: block; }
.mlg-sw::before { content: ''; position: absolute; left: 2px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #5b1a1a; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); transition: background .15s, box-shadow .15s; }
.mlg-sw::after { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 12px; border-radius: 3px; background: linear-gradient(#d9dce2, #8b909a); transition: translate .15s; }
.mlg-sw.on::before { background: #ff4b3a; box-shadow: 0 0 8px #ff4b3a, 0 0 2px #fff inset; }
.mlg-sw.on::after { translate: 0 3px; }
.mlg-gl { margin-top: 3px; font: 800 12px/1.1 var(--sans); color: #f2f2f2; text-align: center; white-space: nowrap; }
.mlg-gv { font: 600 12px/1.1 var(--sans); color: #c8ccd4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mlg-danger .mlg-gl { color: #ffb4a8; }

/* the rooms */
.mlg-rooms { display: flex; align-items: stretch; width: 100%; max-width: 360px; height: 190px; }
.mlg-room { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mlg-wallbar { width: 10px; margin: 0 6px; border-radius: 4px; background: repeating-linear-gradient(0deg, var(--line-strong) 0 8px, var(--raised) 8px 16px); }
.mlg-fig { display: flex; flex-direction: column; align-items: center; animation: mlgIn .5s cubic-bezier(.2,.8,.2,1) both; }
.mlg-fig svg { width: 58px; height: 76px; }
.mlg-fig span { font: 700 12.5px/1.15 var(--sans); color: var(--dim); text-align: center; margin-top: 3px; }
.mlg-you svg { fill: var(--violet-bright); }
.mlg-coat svg { fill: #9aa0ab; }
.mlg-coat { margin-bottom: 18px; animation-delay: .15s; }
.mlg-learner svg { fill: var(--gold); }
.mlg-learner { animation-delay: .3s; }
.mlg-learner.actor span::after { content: ' (an actor)'; color: var(--gold); }
.mlg-mini { position: absolute; left: 50%; bottom: 46px; translate: 10px 0; width: 30px; height: 14px; border-radius: 3px; background: #5a5f6b; box-shadow: 0 0 6px rgba(255,75,58,.5); }
.mlg-strap { position: absolute; left: 50%; bottom: 58px; translate: -50% 0; width: 52px; height: 6px; border-radius: 3px; background: #6a4a2a; }
@keyframes mlgIn { from { opacity: 0; translate: 0 10px; } }

/* the press */
.mlg-wall { width: 100%; max-width: 360px; min-height: 96px; padding: 8px 12px; border-radius: 12px; background: repeating-linear-gradient(90deg, var(--surface) 0 22px, var(--raised) 22px 24px); border: 1px solid var(--line-strong); text-align: center; }
.mlg-wl { font: 700 12px var(--sans); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.mlg-voice { margin: 4px 0 0; font: 800 16px/1.25 var(--sans); color: var(--text); }
.mlg-voice.loud { animation: mlgCry .5s ease-out both; }
.mlg-voice.v1 { font-size: 17px; }
.mlg-voice.v2 { font-size: 15px; color: var(--gold); }
@keyframes mlgCry { from { opacity: 0; scale: .85; } 60% { scale: 1.06; } }
.mlg-lever { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px 8px 12px; border-radius: 14px; background: linear-gradient(#5a5f6b, #3c404a); border: 2px solid #8b909a; color: #fff; font: 800 16px var(--sans); cursor: pointer; }
.mlg-lever i { position: relative; width: 22px; height: 36px; border-radius: 6px; background: #2b2e35; }
.mlg-lever i::after { content: ''; position: absolute; left: 5px; top: 4px; width: 12px; height: 16px; border-radius: 4px; background: linear-gradient(#e7e9ee, #9aa0aa); transition: top .15s; }
.mlg-lever.down i::after { top: 16px; background: linear-gradient(#ff8a7a, #d23a2a); }
.mlg-lever:disabled { opacity: .55; cursor: default; }

/* the script */
.mlg-prods { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.mlg-ph { display: flex; align-items: center; gap: 10px; }
.mlg-ph .mlg-fig svg { width: 32px; height: 42px; }
.mlg-ph .mlg-fig span { display: none; }
.mlg-ph .mlg-coat { margin: 0; }
.mlg-ph b { font: 800 14px var(--sans); color: var(--dim); }
.mlg-pl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mlg-p { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); font: 700 15px/1.25 var(--serif); color: var(--text); animation: mlgIn .4s ease-out both; }
.mlg-p span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #9aa0ab; color: #1b1d22; font: 800 13px var(--sans); }
.mlg-p.still { animation: none; }
.mlg-pl:not(.all) .mlg-p:last-child { border-color: var(--violet-bright); box-shadow: 0 0 14px rgba(123,92,253,.3); }

.mlg-lines .choice { justify-content: flex-start; gap: 10px; text-align: left; font-family: var(--serif); }
.mlg-lines .choice i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #9aa0ab; color: #1b1d22; font: 800 13px var(--sans); font-style: normal; }

/* believed or doubted */
.mlg-q { display: flex; gap: 10px; width: 100%; max-width: 360px; }
.mlg-qa { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); text-align: center; }
.mlg-qa b { font: 800 15px var(--sans); color: var(--text); }
.mlg-qa span { font: 600 14px/1.3 var(--serif); color: var(--dim); }

@media (max-height: 700px) {
  .mlg-rooms { height: 160px; }
  .mlg-fig svg { width: 38px; height: 50px; }
  .mlg-board { padding: 8px 8px 6px; gap: 6px; }
  .mlg-wall { min-height: 88px; }
  .mlg-p { padding: 6px 10px; font-size: 14px; }
}