/* Matthew effect lesson. All rules scoped under .mtw-* */
.mtw-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* the paper */
.mtw-paper { position: relative; width: 230px; min-height: 230px; padding: 18px 18px 22px; border: 0; border-radius: 6px; background: #f3ecdc; color: #2b2416; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); transform: rotate(-2deg); }
.mtw-paper:disabled { opacity: 1; }
.mtw-by { font: 700 13px var(--sans); color: #6d5f44; }
.mtw-by b { color: #2b2416; }
.mtw-title { font: 800 18px var(--serif); line-height: 1.2; }
.mtw-lines { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 4px; }
.mtw-lines i { display: block; height: 6px; border-radius: 3px; background: #d6ccb6; }
.mtw-lines i.s { width: 60%; }
.mtw-stamp { position: absolute; right: 10px; bottom: 26px; padding: 4px 12px; border: 3px solid; border-radius: 8px; font: 900 20px var(--sans); text-transform: uppercase; letter-spacing: 1px; transform: rotate(-14deg) scale(2.2); opacity: 0; }
.mtw-stamp.no { color: #8a8073; border-color: #8a8073; }
.mtw-stamp.yes { color: #1f8a5a; border-color: #1f8a5a; opacity: 1; transform: rotate(-14deg) scale(1); animation: mtw-stamp .35s ease-in both; }
.mtw-paper.stamped .mtw-stamp.no { opacity: 1; transform: rotate(-14deg) scale(1); transition: transform .25s ease-in, opacity .2s; }
@keyframes mtw-stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } }
.mtw-face { margin: 0; display: flex; align-items: center; gap: 10px; animation: mtw-in .4s ease-out both; }
.mtw-face img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.mtw-face figcaption { font: 800 16px var(--sans); color: var(--text); }
@keyframes mtw-in { from { opacity: 0; transform: translateY(8px); } }

/* the three covers */
.mtw-covers { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.mtw-cover { position: relative; flex: 1 1 0; min-height: 200px; padding: 10px 8px; border: 2px solid transparent; border-radius: 8px; background: #f3ecdc; color: #2b2416; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); overflow: hidden; }
.mtw-cover:disabled { opacity: 1; }
.mtw-cover b { font: 800 13.5px var(--sans); line-height: 1.15; }
.mtw-cover small { font: 600 12px var(--sans); color: #6d5f44; line-height: 1.15; }
.mtw-cover .mtw-lines { gap: 5px; margin-top: 6px; }
.mtw-cover .mtw-lines i { height: 4px; }
.mtw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; display: flex; align-items: flex-end; pointer-events: none; }
.mtw-bar i { display: block; width: 100%; height: 0; background: rgba(110, 105, 96, .55); }
.mtw-cover em { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 900 15px var(--sans); font-style: normal; color: #1b1810; }
.mtw-cover.picked { border-color: var(--violet); }
.mtw-cover.most .mtw-bar i { background: rgba(252, 192, 80, .75); }

/* two kids */
.mtw-pair { display: flex; align-items: flex-end; gap: 26px; }
.mtw-pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mtw-pair img { width: auto; display: block; }
.mtw-pair figcaption { font: 600 13px var(--sans); color: var(--dim); text-align: center; }
.mtw-pair figcaption b { display: block; font: 800 15px var(--sans); color: var(--text); }

/* the team */
.mtw-team { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.mtw-row { padding: 6px 4px 8px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); }
.mtw-row.top { border-color: rgba(252, 192, 80, .6); background: rgba(252, 192, 80, .08); }
.mtw-lab { display: block; padding-left: 6px; font: 800 12px var(--sans); letter-spacing: .4px; text-transform: uppercase; color: var(--dim); }
.mtw-row.top .mtw-lab { color: var(--gold); }
.mtw-kids { display: flex; justify-content: space-around; align-items: flex-end; height: 104px; }
.mtw-kid { width: 15%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mtw-kid img { width: auto; height: 64px; display: block; }
.mtw-kid b { font: 800 12px var(--sans); color: var(--text); }
.mtw-sk { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mtw-sk i { display: block; height: 100%; background: var(--gold); }

/* the real numbers */
.mtw-bars { display: flex; align-items: flex-end; gap: 40px; height: 200px; }
.mtw-bars > div { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.mtw-col { position: relative; width: 80px; height: calc(var(--h) - 60px); border-radius: 10px 10px 4px 4px; background: linear-gradient(var(--gold), var(--gold-deep)); animation: mtw-grow .8s ease-out both; transform-origin: bottom; }
.mtw-col b { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 6px; text-align: center; font: 900 20px var(--sans); color: var(--text); }
.mtw-bars small { font: 700 13px var(--sans); color: var(--dim); }
@keyframes mtw-grow { from { transform: scaleY(0); } }

/* the calendar */
.mtw-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; max-width: 320px; }
.mtw-cal span { padding: 10px 0; border-radius: 10px; background: var(--raised); text-align: center; font: 800 14px var(--sans); color: var(--dim); }
.mtw-cal span.cut { background: rgba(252, 192, 80, .2); color: var(--gold); outline: 2px solid var(--gold); }

@media (max-height: 700px) {
  .mtw-paper { min-height: 190px; }
  .mtw-cover { min-height: 170px; }
  .mtw-kids { height: 92px; }
  .mtw-bars { height: 160px; }
}