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

/* Ana at her desk */
.mtv-desk { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.mtv-kid.big img { height: 170px; width: auto; display: block; }
.mtv-paper { width: 150px; height: 128px; padding: 6px; border-radius: 6px; background: #fbf8ef; box-shadow: 0 6px 18px rgba(0,0,0,.35); transform: rotate(3deg); }
.mtv-paper svg { width: 100%; height: 100%; display: block; }
.mtv-ink { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* the award */
.mtv-award { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 10px; background: #fbf5e2; color: #3a2e12; box-shadow: 0 0 22px rgba(252, 192, 80, .35); }
.mtv-award b { font: 800 14px var(--serif); line-height: 1.15; max-width: 92px; }
.mtv-seal { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe7a8, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 0 3px #f2d27a inset; }
.mtv-rib { position: absolute; left: 14px; bottom: -12px; width: 22px; height: 16px; background: linear-gradient(90deg, #c0392b 0 45%, transparent 45% 55%, #c0392b 55%); clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 70%, 50% 100%, 25% 70%, 0 100%); }
.mtv-award.mtv-held { margin-top: 10px; }
.mtv-award.float { animation: mtv-bob 2.4s ease-in-out infinite; }
@keyframes mtv-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.mtv-award.small { padding: 5px 9px 5px 6px; }
.mtv-award.small b { font-size: 12px; max-width: 70px; }
.mtv-award.small .mtv-seal { width: 20px; height: 20px; }
.mtv-award.small .mtv-rib { left: 8px; width: 16px; height: 12px; bottom: -9px; }

/* three kids, three deals */
.mtv-kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.mtv-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 8px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .3s, transform .3s; }
.mtv-cell img { height: 92px; width: auto; }
.mtv-cell b { font: 800 14px var(--sans); color: var(--text); }
.mtv-deal { font: 700 12.5px var(--sans); color: var(--gold); text-align: center; line-height: 1.2; min-height: 30px; transition: opacity .3s; }
.mtv-kids.hidden-deals .mtv-deal { opacity: 0; }
.mtv-cell.on { border-color: rgba(252, 192, 80, .6); transform: translateY(-3px); }

/* behind the mirror */
.mtv-glass { position: relative; width: 100%; max-width: 360px; padding: 10px 8px; border-radius: 18px; background: linear-gradient(115deg, rgba(169,155,255,.10), rgba(255,255,255,.03) 40%, rgba(169,155,255,.10) 70%, rgba(255,255,255,.02)); border: 2px solid rgba(169, 155, 255, .35); }
.mtv-glass::after { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.07) 24%, transparent 30%, transparent 62%, rgba(255,255,255,.05) 66%, transparent 70%); }
.mtv-pickhost .choices.mtv-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mtv-pk .choice { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; }
.mtv-pk .choice img { height: 84px; width: auto; }
.mtv-pk .choice span { font: 800 14px var(--sans); }
.mtv-pk .choice em { font: 600 12px var(--sans); font-style: normal; color: var(--dim); text-align: center; line-height: 1.15; min-height: 28px; }
.mtv-bar { display: block; width: 90%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.mtv-bar u { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--violet-bright); }
.mtv-pct { font: 800 14px var(--sans); color: var(--text); min-height: 18px; }

/* Ana and Joe */
.mtv-pk2.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.mtv-pk2 .choice { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 10px; }
.mtv-pk2 .choice img { height: 130px; width: auto; }
.mtv-pk2 .choice span { font: 800 15px var(--sans); }
.mtv-pk2 .choice em { font: 600 12.5px var(--sans); font-style: normal; color: var(--dim); text-align: center; line-height: 1.2; }

/* same award, two deals */
.mtv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.mtv-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); }
.mtv-side img { height: 80px; width: auto; }
.mtv-side b { font: 800 14px var(--sans); color: var(--text); }
.mtv-side .mtv-award { margin-bottom: 8px; }
.mtv-side .mtv-award b { color: #3a2e12; font: 800 12px var(--serif); }
.mtv-when { font: 700 12.5px var(--sans); color: var(--gold); text-align: center; }
.mtv-side strong { font: 800 22px var(--sans); color: var(--violet-bright); }
.mtv-side em { font: 600 12px var(--sans); font-style: normal; color: var(--dim); text-align: center; line-height: 1.15; }

/* Ana's thoughts */
.mtv-thoughts { display: flex; flex-direction: column; gap: 8px; width: 170px; }
.mtv-th { padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--raised); border: 1px solid var(--line); font: 700 14px var(--sans); color: var(--text); animation: mtv-in .35s ease-out both; }
.mtv-th:last-child { border-color: rgba(252, 192, 80, .5); }
@keyframes mtv-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* the mail pile */
.mtv-mail { display: grid; grid-template-columns: repeat(3, 70px); gap: 8px; transform: rotate(-4deg); }
.mtv-env { position: relative; display: block; width: 70px; height: 46px; border-radius: 5px; background: #efe9db; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.mtv-env::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, #d6ccb6 50%, transparent 52%), linear-gradient(to bottom left, transparent 49%, #d6ccb6 50%, transparent 52%); background-size: 100% 60%; background-repeat: no-repeat; }
.mtv-env:nth-child(3n+2) { transform: rotate(5deg); }
.mtv-env:nth-child(4n) { transform: rotate(-6deg); }

/* Twain's coach */
.mtv-coach img { width: 100%; max-width: 330px; height: auto; display: block; }

@media (max-height: 700px) {
  .mtv-kid.big img { height: 140px; }
  .mtv-paper { width: 130px; height: 112px; }
  .mtv-cell img { height: 76px; }
  .mtv-pk .choice img { height: 68px; }
  .mtv-side img { height: 64px; }
  .mtv-pk2 .choice img { height: 104px; }
  .mtv-coach img { max-width: 290px; }
}