/* Fatalism lesson. All rules scoped under .fat-* */
.fat-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fat-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; min-height: 17px; }
.fat-hero img { display: block; width: 290px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }

/* ---------- the map ---------- */
.fat-map { width: 100%; display: flex; justify-content: center; }
.fat-map svg { width: 330px; max-width: 100%; max-height: 38vh; height: auto; overflow: visible; }
.fat-river { fill: none; stroke: rgba(80, 140, 255, .35); stroke-width: 7; stroke-linecap: round; }
.fat-road { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; transition: stroke .2s; }
.fat-road.fat-on { stroke: var(--gold); stroke-dasharray: none; }
.fat-town circle { fill: var(--raised); stroke: var(--text); stroke-width: 2.5; }
.fat-town text { fill: var(--text); font-size: 16px; font-weight: 700; }
.fat-man { fill: var(--gold); }
.fat-deathpos { transition: opacity .35s; }
.fat-death path { fill: #4A2E86; stroke: var(--violet-bright); stroke-width: 2; }
.fat-face { fill: #120C22; }
.fat-glass { fill: var(--gold); }
.fat-end { font-size: 16px; font-weight: 700; text-anchor: middle; fill: var(--text); }
.fat-end.fat-bad { fill: var(--violet-bright); }
.fat-end.fat-good { fill: var(--mint); }
.fat-roads { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fat-roads .btn { min-height: 48px; }

/* ---------- two ideas ---------- */
.fat-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.fat-col { display: flex; flex-direction: column; gap: 8px; padding: 18px 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); text-align: center; }
.fat-col b { font-size: 18px; }
.fat-col span { font-size: 16px; line-height: 1.35; }
.fat-col em { font-style: normal; font-weight: 700; }
.fat-cf { border-color: var(--violet-bright); }
.fat-cf b, .fat-cf em { color: var(--violet-bright); }
.fat-cd { border-color: var(--gold); }
.fat-cd b, .fat-cd em { color: var(--gold); }

/* ---------- doors ---------- */
.fat-doors { display: grid; grid-template-columns: repeat(3, 88px); gap: 14px; justify-content: center; }
.fat-door { position: relative; height: 140px; border-radius: 12px 12px 4px 4px; background: #1B1430; border: 2px solid var(--line-strong); perspective: 400px; overflow: hidden; display: grid; place-items: center; }
.fat-prize { font-weight: 700; font-size: 15px; color: var(--dim); }
.fat-door[data-n="8"] .fat-prize { color: var(--gold); font-size: 17px; }
.fat-leaf { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #7A4FD0, #4B2E91); transform-origin: left center; transition: transform .6s ease-out; z-index: 1; }
.fat-leaf b { font-size: 34px; color: #fff; font-family: var(--mono); }
.fat-leaf i { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.fat-door.fat-open .fat-leaf { transform: rotateY(-78deg); }
.fat-clue { padding: 12px 16px; border-radius: 14px; background: var(--raised); border: 2px dashed var(--gold); font-size: 16px; font-weight: 700; text-align: center; max-width: 320px; }

/* ---------- arguments ---------- */
.fat-args { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.fat-arg { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); font-size: 15px; line-height: 1.3; text-align: left; color: var(--text); font-family: var(--sans); transition: opacity .3s; }
.fat-arg b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-size: 15px; }

/* ---------- co-fated ---------- */
.fat-chain { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 280px; }
.fat-link { width: 100%; padding: 16px; border-radius: 16px; background: var(--surface); border: 2px solid var(--violet-bright); text-align: center; font-size: 18px; font-weight: 700; }
.fat-link.fat-gold { border-color: var(--gold); color: var(--gold); }
.fat-ar { width: 3px; height: 26px; background: var(--dim); position: relative; }
.fat-ar::after { content: ''; position: absolute; left: -6px; bottom: -4px; border: 7px solid transparent; border-top-color: var(--dim); }


@media (max-height: 700px) {
  .fat-hero img { width: 220px; max-height: 26vh; }
  .fat-map svg { width: 290px; max-height: 32vh; }
  .fat-door { height: 112px; }
  .fat-doors { grid-template-columns: repeat(3, 80px); }
  .fat-arg { padding: 8px 11px; font-size: 14px; }
  .fat-col { padding: 14px 10px; }
}