/* Defence mechanism lesson. All rules scoped under .dfm-* */

.dfm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dfm-note { font-size: 12px; color: var(--faint); text-align: center; max-width: 320px; }
.dfm-hero { width: min(84%, 330px); }
.dfm-hero img { width: 100%; display: block; }

/* the scratch card */
.dfm-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: #F4EEDF; color: #2A2418; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.dfm-card > * { flex: none; }
.dfm-row { display: flex; flex-direction: column; gap: 2px; }
.dfm-row small, .dfm-under small { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8A7A5C; }
.dfm-row b { font: 600 17px/1.3 var(--serif); }
.dfm-hid { position: relative; height: 96px; border-radius: 14px; overflow: hidden; background: #2A1B4A; touch-action: none; }
.dfm-under { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.dfm-under small { color: #B7A8FF; }
.dfm-under b { font: 800 22px/1.2 var(--sans); color: #FFE27A; }
.dfm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; transition: opacity .5s; }
.dfm-cv.dfm-gone { opacity: 0; pointer-events: none; }
.dfm-hid.dfm-open { box-shadow: inset 0 0 0 3px var(--gold); }
.dfm-name { padding: 3px 9px; border-radius: 999px; background: var(--mint); color: #062B1C; font: 800 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; animation: dfmPop .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes dfmPop { from { scale: .3; opacity: 0; } }

/* the evidence */
.dfm-ev { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 6px; }
.dfm-er { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); transition: border-color .3s, background .3s; }
.dfm-er b { font-size: 16px; }
.dfm-er span { font-size: 13px; font-weight: 800; color: var(--faint); }
.dfm-er.dfm-ok { border-color: var(--mint); } .dfm-er.dfm-ok span { color: var(--mint); }
.dfm-er.dfm-meh { border-color: var(--gold); } .dfm-er.dfm-meh span { color: var(--gold); }
.dfm-er.dfm-no { border-color: var(--red); background: rgba(216,85,85,.12); } .dfm-er.dfm-no span { color: #FF8A8A; }

@media (max-height: 700px) {
  .dfm-hero { width: min(70%, 260px); }
  .dfm-card { padding: 10px; gap: 6px; }
  .dfm-row b { font-size: 16px; }
  .dfm-hid { height: 80px; }
  .dfm-er { padding: 8px 12px; }
}