/* Mattachine Society lesson. All rules scoped under .mtc-* */
.mtc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mtc-man img { display: block; height: 100%; width: auto; object-fit: contain; }

/* the window */
.mtc-fw { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 16px 10px; box-sizing: border-box; }
.mtc-night { width: 100%; max-width: 340px; padding: 26px 22px 30px; box-sizing: border-box; border-radius: 18px; background: linear-gradient(180deg, #1A1530, #241C2E); border: 1px solid var(--line); box-shadow: inset 0 -30px 40px rgba(0,0,0,.35); }
.mtc-win { position: relative; height: 190px; border-radius: 6px; overflow: hidden; border: 6px solid #4A3B2C; background: linear-gradient(180deg, #FFD98A, #E8A54E); box-shadow: 0 0 40px rgba(252,192,80,.35); transition: box-shadow 1s; }
.mtc-room { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.mtc-room .mtc-man { height: 118px; margin: 0 -6px; }
.mtc-room .mtc-man:nth-child(2), .mtc-room .mtc-man:nth-child(4) { height: 104px; }
.mtc-cur { position: absolute; top: 0; bottom: 0; width: 8%; background: repeating-linear-gradient(90deg, #6B2E3E 0 10px, #5A2534 10px 18px); box-shadow: 0 0 12px rgba(0,0,0,.4); transition: width 1.1s cubic-bezier(.5,.1,.3,1); }
.mtc-cur.l { left: 0; }
.mtc-cur.r { right: 0; }
.mtc-win.shut .mtc-cur { width: 45%; }
.mtc-win.shut { box-shadow: 0 0 22px rgba(252,192,80,.18); }
.mtc-sill { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #4A3B2C; }

/* the risk cards */
.mtc-risks { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.mtc-risk { all: unset; box-sizing: border-box; min-height: 64px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: background .3s, border-color .3s; }
.mtc-risk b { font: 700 16px var(--sans); color: var(--text); }
.mtc-risk span { font: 500 13.5px/1.35 var(--sans); color: var(--dim); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.mtc-risk.open { background: var(--raised); border-color: var(--violet-bright); }
.mtc-risk.open span { max-height: 80px; opacity: 1; }

/* the groups: one row per group */
.mtc-fnd { display: flex; flex-direction: column; align-items: center; padding: 4px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.mtc-fnd b { font: 700 13.5px var(--sans); color: var(--text); }
.mtc-fnd span { font: 500 12px var(--sans); color: var(--dim); }
.mtc-cells { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 340px; }
.mtc-cell { all: unset; box-sizing: border-box; cursor: pointer; min-height: 74px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.mtc-cl { flex: none; width: 66px; white-space: nowrap; font: 700 12px/1.1 var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.mtc-crow { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mtc-pp { box-sizing: border-box; position: relative; pointer-events: none; height: 66px; min-width: 0; display: flex; justify-content: center; align-items: flex-end; border-radius: 10px; transition: opacity .3s, background .3s; }
.mtc-pp img { height: 62px; width: auto; object-fit: contain; }
.mtc-pp.arrested { background: rgba(252,192,80,.16); box-shadow: inset 0 0 0 2px var(--gold); }
.mtc-pp em { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font: normal 700 12px var(--sans); color: #17130D; background: var(--gold); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.mtc-cl b { display: block; margin-top: 3px; font-size: 13px; }
.mtc-cell.known { border-color: var(--gold); background: rgba(252,192,80,.10); }
.mtc-cell.known .mtc-cl b { color: var(--gold); }
.mtc-cell.known .mtc-pp:not(.arrested) { background: rgba(252,192,80,.16); box-shadow: inset 0 0 0 2px var(--gold); }
.mtc-cell.safe { border-color: var(--mint); }
.mtc-cell.safe .mtc-cl b { color: var(--mint); }
.mtc-cell:disabled { cursor: default; }

/* the newspaper */
.mtc-paper { position: relative; width: calc(100% - 24px); max-width: 300px; margin: 4px 12px 24px; padding: 14px 16px 16px; box-sizing: border-box; border-radius: 6px; background: #EFE6D2; color: #1F1A12; box-shadow: 0 12px 30px rgba(0,0,0,.4); transform: rotate(-1.5deg); }
.mtc-pd { display: block; font: 600 12px var(--mono); color: #5F5544; }
.mtc-paper b { display: block; margin: 6px 0 4px; font: 700 21px/1.15 var(--serif); }
.mtc-pv { font: 600 13px var(--sans); color: #5F5544; }
.mtc-verdict { margin-top: 10px; padding-top: 8px; border-top: 2px solid #1F1A12; font: 700 15px/1.3 var(--serif); opacity: 0; transition: opacity .5s; }
.mtc-paper.done .mtc-verdict { opacity: 1; }

/* the street */
.mtc-st { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mtc-qc { padding: 8px 12px; border-radius: 10px; background: #EFE6D2; color: #1F1A12; font: 600 13px/1.35 var(--serif); }
.mtc-qc span { display: block; font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6B5F49; }
.mtc-trio { display: flex; justify-content: center; height: 70px; }
.mtc-trio .mtc-man { height: 70px; margin: 0 -4px; }
.mtc-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mtc-door { all: unset; box-sizing: border-box; position: relative; min-height: 96px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; border-radius: 10px 10px 4px 4px; background: #2A2340; border: 1px solid var(--line-strong); cursor: pointer; text-align: center; }
.mtc-door i { display: block; width: 26px; height: 36px; border-radius: 13px 13px 2px 2px; background: #FFD98A; box-shadow: 0 0 10px rgba(252,192,80,.45); }
.mtc-door b { font: 700 12px/1.15 var(--sans); color: var(--text); }
.mtc-door em { font: normal 700 12px var(--sans); color: var(--dim); }
.mtc-door.d3 { background: #3A2A1E; }
.mtc-door.closed i { background: #4A4458; box-shadow: none; }
.mtc-door.served { border-color: var(--violet-bright); }
.mtc-door.served em { color: var(--violet-bright); }

/* the bar */
.mtc-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mtc-bar img { width: 250px; max-width: 70vw; max-height: 32vh; object-fit: contain; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; filter: drop-shadow(0 14px 24px rgba(0,0,0,.4)); }
.mtc-bar.in img { opacity: 1; transform: none; }
.mtc-bar span { font: 500 12.5px var(--sans); color: var(--faint); text-align: center; max-width: 300px; }

/* the order */
.mtc-chain { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 320px; }
.mtc-cn { font: 700 13px var(--sans); color: var(--dim); padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--line-strong); }
.mtc-cn.end { color: var(--gold); border-color: var(--gold); }
.mtc-ar { display: block; width: 2px; height: 10px; background: var(--line-strong); }
.mtc-chain .slot { width: 100%; min-height: 46px; }
.mtc-bank { justify-content: center; }

@media (max-height: 700px) {
  .mtc-win { height: 160px; }
  .mtc-room .mtc-man { height: 100px; }
  .mtc-room .mtc-man:nth-child(2), .mtc-room .mtc-man:nth-child(4) { height: 90px; }
  .mtc-trio, .mtc-trio .mtc-man { height: 52px; }
  .mtc-pp { height: 56px; }
  .mtc-pp img { height: 54px; }
  .mtc-door { min-height: 84px; }
  .mtc-door i { height: 28px; }
    .mtc-bar img { max-height: 26vh; }
}
.mtc-chain .slot .n { font-size: 12px; }