/* Monty Hall Problem lesson. All rules scoped under .mh-* */
.mh-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mh-cap { font-size: 13px; color: var(--dim); text-align: center; }
.mh-hero img { width: 280px; max-width: 100%; max-height: 36vh; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }

/* ---------- doors ---------- */
.mh-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); justify-content: center; gap: 14px; width: 100%; padding-top: 4px; }
.mh-doors.mh-four { grid-template-columns: repeat(4, minmax(0, 74px)); gap: 10px; }
.mh-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; perspective: 480px; }
.mh-door > .mh-in, .mh-door > .mh-leaf { width: 100%; aspect-ratio: 2 / 3; border-radius: 10px 10px 4px 4px; }
.mh-in {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  background: radial-gradient(90% 60% at 50% 100%, #2a2f55, #0a0d1a 80%); box-shadow: inset 0 0 0 3px #3a3050, inset 0 6px 14px rgba(0,0,0,.7);
}
.mh-in svg { width: 86%; height: auto; opacity: 0; transform: scale(.7) translateY(8px); transition: opacity .3s .15s, transform .45s .15s cubic-bezier(.34,1.56,.64,1); }
.mh-door.open .mh-in svg { opacity: 1; transform: none; }
.mh-leaf {
  position: absolute; left: 0; top: 0; transform-origin: 0 50%; transition: transform .55s cubic-bezier(.3,.7,.3,1), box-shadow .2s, filter .2s;
  background: linear-gradient(160deg, #6E52F0, #4A35B8); box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), inset 0 -10px 0 rgba(0,0,0,.18), 0 6px 0 #2c2170;
  display: grid; place-items: center; backface-visibility: hidden;
}
.mh-leaf::before { content: ""; position: absolute; inset: 12% 14% 44%; border: 2px solid rgba(255,255,255,.12); border-radius: 6px; }
.mh-leaf::after { content: ""; position: absolute; inset: 62% 14% 10%; border: 2px solid rgba(255,255,255,.12); border-radius: 6px; }
.mh-leaf b { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.35); margin-top: -18%; }
.mh-leaf i { position: absolute; right: 12%; top: 54%; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #7a5710; }
.mh-door.open .mh-leaf { transform: rotateY(-104deg); box-shadow: none; filter: brightness(.6); }
.mh-door.mh-live:not(.open) .mh-leaf { box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), inset 0 -10px 0 rgba(0,0,0,.18), 0 6px 0 #2c2170, 0 0 0 3px var(--violet-bright), 0 0 22px rgba(169,155,255,.45); animation: mhBob 1.4s ease-in-out 3; }
@keyframes mhBob { 50% { transform: translateY(-4px); } }
.mh-door.mh-mine:not(.open) .mh-leaf { background: linear-gradient(160deg, #8B72FF, #5B45C8); }
.mh-door:not(.mh-live) { pointer-events: none; }
.mh-door.mh-ping .mh-leaf { animation: mhPing .5s ease-out; }
@keyframes mhPing { 40% { transform: scale(1.06); } }
.mh-tag { min-height: 22px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.mh-tag.on { opacity: 1; }
.mh-tag.mine { color: var(--violet-bright); background: rgba(169,155,255,.14); }
.mh-tag.sw { color: #2A1B00; background: var(--gold); }
.mh-tag.won { color: var(--mint-ink); background: var(--mint); }
.mh-tag.bad { color: #fff; background: var(--red); }
.mh-four .mh-leaf b { font-size: 26px; }
.mh-four .mh-tag { font-size: 12px; padding: 3px 5px; letter-spacing: .02em; }

/* ---------- five rounds ---------- */
.mh-round { font: 600 13px var(--mono); color: var(--dim); letter-spacing: .06em; }
.mh-tally { width: 100%; display: grid; gap: 6px; }
.mh-trow { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--dim); }
.mh-trow b { font: 600 13px var(--mono); color: var(--text); min-width: 44px; text-align: right; }
.mh-tdots { display: flex; gap: 6px; min-height: 16px; }
.mh-tdots i { width: 16px; height: 16px; border-radius: 50%; background: var(--raised); border: 2px solid var(--line-strong); animation: slotIn .25s cubic-bezier(.34,1.56,.64,1) both; }
.mh-tdots i.on { background: var(--gold); border-color: var(--gold-deep); }

/* ---------- 150 games ---------- */
.mh-sim { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.gauge.mh-gs .gt i { background: var(--violet-bright); transition-duration: .1s; }
.gauge.mh-gw .gt i { background: var(--gold); transition-duration: .1s; }
.gauge.mh-gx .gt i { background: #7a3a44; transition-duration: .1s; }
.mh-grid { display: grid; grid-template-columns: repeat(15, minmax(0, 12px)); gap: 3px; justify-content: center; padding-top: 4px; }
.mh-grid i { aspect-ratio: 1; border-radius: 3px; background: var(--raised); }
.mh-grid i.mh-cs, .mh-key .mh-cs { background: var(--violet-bright); }
.mh-grid i.mh-cw, .mh-key .mh-cw { background: var(--gold); }
.mh-grid i.mh-cx, .mh-key .mh-cx { background: #7a3a44; }
.mh-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.mh-key span { display: inline-flex; align-items: center; gap: 6px; }
.mh-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- why: the odds over the doors ---------- */
.mh-odds { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); justify-content: center; gap: 4px 14px; width: 100%; padding-bottom: 20px; }
.mh-odds > span { text-align: center; font: 600 15px var(--mono); color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s, color .3s; min-height: 20px; }
.mh-odds > span.on { opacity: 1; transform: none; }
.mh-odds > span.mine { color: var(--violet-bright); }
.mh-odds > span.gold { color: var(--gold); font-size: 17px; text-shadow: 0 0 12px rgba(252,192,80,.5); }
.mh-brk { grid-column: 2 / 4; grid-row: 2; justify-self: start; position: relative; width: 100%; height: 16px; border: 2px solid var(--gold); border-top: 0; border-radius: 0 0 10px 10px; opacity: 0; transition: opacity .3s, width .45s cubic-bezier(.3,.7,.3,1); display: flex; justify-content: center; }
.mh-brk b { position: absolute; bottom: -2px; transform: translateY(100%); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); white-space: nowrap; background: var(--bg); padding: 0 6px; }
.mh-odds.pair .mh-brk { opacity: 1; }
.mh-odds.shift .mh-brk { width: calc(50% - 7px); }
.mh-odds.shift .mh-brk b { opacity: 0; }

/* ---------- 100 doors ---------- */
.mh-hund { display: grid; grid-template-columns: repeat(10, minmax(0, 27px)); gap: 4px; justify-content: center; }
.mh-hc { aspect-ratio: 5 / 6; border-radius: 4px 4px 2px 2px; background: linear-gradient(160deg, #6E52F0, #4A35B8); box-shadow: 0 2px 0 #2c2170; padding: 0; display: grid; place-items: center; transition: background .2s, transform .2s; }
.mh-hn { font: 600 12px var(--mono); color: rgba(252,192,80,.85); line-height: 1; }
.mh-hund.picked .mh-hc { pointer-events: none; }
.mh-hc.mine { background: linear-gradient(160deg, #A99BFF, #7B5CFD); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(169,155,255,.8); }
.mh-hc.skip { background: linear-gradient(160deg, #FFD37A, #C98C1B); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(252,192,80,.8); animation: mhPing .5s ease-out; }
.mh-hc.skip .mh-hn { color: #2A1B00; }
.mh-hc.open { background: #0f1324; box-shadow: inset 0 0 0 1px #2a2f55; animation: mhFlip .3s ease-out; }
.mh-hc.open svg { width: 90%; height: auto; }
.mh-hc.open.car { background: #143327; box-shadow: 0 0 0 2px var(--mint), 0 0 16px rgba(63,214,154,.7); }
@keyframes mhFlip { from { transform: scaleX(.2); } }
.mh-kmine { background: var(--violet-bright); } .mh-kskip { background: var(--gold); }

/* the step back: yours against his */
.mh-cmp { width: 100%; display: grid; gap: 18px; padding-top: 6px; }
.mh-cc { display: grid; gap: 6px; }
.mh-cc > b { font-family: var(--serif); font-size: 19px; }
.mh-cbar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--raised); }
.mh-cbar i { display: block; background: var(--violet-bright); }
.mh-cbar em { display: block; background: var(--gold); border-left: 2px solid var(--bg); }
.mh-cc > span { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; }
.mh-cc u { text-decoration: none; color: var(--violet-bright); } .mh-cc s { text-decoration: none; color: var(--gold); }

/* ---------- 1990 ---------- */
.mh-col { width: 100%; background: #F3ECDD; color: #2b2418; border-radius: 6px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: rotate(-1.2deg); transition: padding .3s; }
.mh-col small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a7a60; margin-bottom: 6px; }
.mh-col p { margin: 0 0 10px; font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.mh-ans { font-size: 15px; border-top: 1px solid rgba(43,36,24,.2); padding-top: 8px; }
.mh-ans b { color: #b3261e; }
.mh-col.small { padding: 10px 14px; }
.mh-col.small p { font-size: 15px; margin-bottom: 6px; }
.mh-pile { position: relative; width: 100%; height: 130px; }
.mh-env { position: absolute; inset: 0; overflow: hidden; }
.mh-env i { position: absolute; bottom: 4px; width: 34px; height: 22px; border-radius: 3px; background: #EDE6D6; box-shadow: 0 2px 4px rgba(0,0,0,.4); transform: rotate(var(--r)); animation: mhDrop .45s cubic-bezier(.3,.7,.3,1) both; }
.mh-env i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 48%, rgba(0,0,0,.18) 50%, transparent 52%), linear-gradient(to bottom left, transparent 48%, rgba(0,0,0,.18) 50%, transparent 52%); background-size: 100% 60%; background-repeat: no-repeat; }
.mh-env i:nth-child(3n) { bottom: 20px; } .mh-env i:nth-child(3n+1) { bottom: 36px; } .mh-env i:nth-child(5n) { bottom: 52px; }
@keyframes mhDrop { from { transform: translateY(-140px) rotate(0); opacity: 0; } 30% { opacity: 1; } }
.mh-count { position: absolute; right: 0; top: 0; text-align: right; background: rgba(10,14,26,.85); padding: 4px 10px; border-radius: 10px; }
.mh-count b { display: block; font: 600 26px var(--mono); color: var(--gold); line-height: 1.1; }
.mh-count span { font-size: 12px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }

@media (max-height: 700px) {
  .mh-doors { grid-template-columns: repeat(3, minmax(0, 80px)); }
  .mh-odds { grid-template-columns: repeat(3, minmax(0, 80px)); }
  .mh-leaf b { font-size: 28px; }
  .mh-hund { grid-template-columns: repeat(10, minmax(0, 20px)); gap: 3px; }
  .mh-hc { aspect-ratio: 1; }
  .mh-hn { letter-spacing: -.06em; }
  .mh-hero img { max-height: 30vh; }
  .mh-grid { grid-template-columns: repeat(15, minmax(0, 10px)); }
  .mh-pile { height: 100px; }
}
.mh-hc.open.mine { box-shadow: 0 0 0 2px var(--violet-bright), 0 0 12px rgba(169,155,255,.6); }