/* Martyr complex lesson. All rules scoped under .mtr-* */

.mtr-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; --frank: #FCC050; --fam: #A99BFF; }
.mtr-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the house */
.mtr-house { display: flex; flex-direction: column; gap: 8px; }
.mtr-g .gt i { background: var(--streak); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.mtr-floor { display: flex; gap: 10px; padding: 10px; border-radius: 16px; background: var(--surface); }
.mtr-frank { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mtr-pile { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-height: 150px; justify-content: flex-start; }
.mtr-chore { min-width: 96px; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 8px; background: #3A2A10; color: var(--frank); font: 800 13px var(--sans); pointer-events: none; transition: opacity .35s, transform .35s; }
.mtr-chore.mtr-away { opacity: 0; transform: translateX(60px); pointer-events: none; }
.mtr-who, .mtr-k { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mtr-who i, .mtr-k i { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 15px var(--sans); font-style: normal; color: #0A0E1A; }
.mtr-who i { background: var(--frank); }
.mtr-who span, .mtr-k span { font-size: 12px; font-weight: 700; color: var(--dim); }
.mtr-fam { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.mtr-given { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 30px; }
.mtr-got { padding: 4px 10px; border-radius: 8px; background: rgba(169, 155, 255, .18); box-shadow: inset 0 0 0 2px var(--fam); color: var(--fam); font: 800 13px var(--sans); animation: mtr-in .35s; }
@keyframes mtr-in { from { opacity: 0; transform: translateX(-40px); } }
.mtr-kin { display: flex; gap: 8px; }
.mtr-k i { background: var(--fam); transition: transform .5s, filter .5s; }
.mtr-down1 .mtr-k i { transform: translateY(-2px); filter: saturate(.8); }
.mtr-down2 .mtr-k i { transform: translateY(-3px); filter: saturate(.55) brightness(.9); }
.mtr-down3 .mtr-k i { transform: translateY(-4px) scale(.94); filter: saturate(.3) brightness(.8); }
.mtr-bub { align-self: center; padding: 8px 12px; border-radius: 10px; background: #F4EEDD; color: #1E1A14; font: 700 14px/1.25 var(--sans); text-align: center; animation: mtr-in2 .4s; }
@keyframes mtr-in2 { from { opacity: 0; } }

/* cards */
.mtr-cards { display: flex; flex-direction: column; gap: 10px; }
.mtr-cards div { padding: 12px 16px; border-radius: 16px; background: var(--surface); border-left: 6px solid var(--streak); }
.mtr-cards .mtr-k2 { border-left-color: var(--frank); }
.mtr-cards b { font-size: 15px; color: var(--streak); }
.mtr-cards .mtr-k2 b { color: var(--frank); }
.mtr-cards p { margin: 4px 0 0; font: 600 16px/1.3 var(--serif); }
.mtr-pic { display: flex; justify-content: center; }
.mtr-pic img { width: 80%; max-height: 220px; object-fit: contain; }
.mtr-opts { display: flex; flex-direction: column; gap: 8px; }
.mtr-opts div { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.mtr-opts b { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--raised); color: var(--gold); font-size: 14px; }
.mtr-opts p { margin: 0; font: 600 15px/1.3 var(--serif); }

@media (max-height: 700px) {
  .mtr-pile { min-height: 132px; }
  .mtr-pic img { max-height: 160px; }
  .mtr-opts div { padding: 8px 10px; }
  .mtr-opts p { font-size: 14px; }
}
.mtr-live .mtr-pile { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 0; }
.mtr-live .mtr-chore { min-width: 0; min-height: 44px; font-size: 14px; pointer-events: auto; cursor: pointer; box-shadow: inset 0 0 0 2px var(--frank), 0 3px 0 var(--gold-deep); }
#controls .btn.mtr-line { text-transform: none; letter-spacing: 0; font: 600 15px/1.25 var(--serif); text-align: left; }
#controls .btn.mtr-line.mtr-said { opacity: .45; }
.mtr-done .mtr-chore { box-shadow: inset 0 0 0 2px var(--frank); pointer-events: none; }