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

/* ---------- Maya ---------- */
.hrt-maya { width: 100%; max-width: 360px; display: block; overflow: visible; }
.hrt-couch { fill: #3a2f6e; }
.hrt-body { fill: #2f9e86; }
.hrt-neck, .hrt-head, .hrt-palm, .hrt-fing { fill: #e7b089; }
.hrt-hair { fill: #3a2626; }
.hrt-eye { fill: #2a1d1d; }
.hrt-mouth { fill: none; stroke: #8a3a3a; stroke-width: 3; stroke-linecap: round; }
.hrt-cover { fill: #d8615a; }
.hrt-pageL, .hrt-pageR { fill: #f3ead8; stroke: #cbbd9f; stroke-width: 1; }
.hrt-flip { fill: #fffaf0; stroke: #cbbd9f; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; }
.hrt-turn .hrt-flip { animation: hrt-flip .45s ease-in-out; }
@keyframes hrt-flip { 0% { opacity: 1; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(-1); } }
.hrt-arm { fill: none; stroke: #2f9e86; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.hrt-knuck { fill: none; stroke: #b8805e; stroke-width: 2; stroke-linecap: round; }
.hrt-fist { display: none; }
.hrt-fisted .hrt-fist { display: inline; }
.hrt-fisted .hrt-open { display: none; }
.hrt-rubring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; }
.hrt-rubbing .hrt-hand { animation: hrt-rub .16s ease-in-out infinite alternate; }
.hrt-rubbing .hrt-thumb { animation: hrt-thumb .16s ease-in-out infinite alternate; }
.hrt-rubbing .hrt-rubring { opacity: .55; }
@keyframes hrt-rub { from { transform: translate(-1.5px, 0); } to { transform: translate(1.5px, -1px); } }
@keyframes hrt-thumb { from { transform: translate(0, 0); } to { transform: translate(6px, 2px); } }
.hrt-snap { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .1s; }
.hrt-bit .hrt-snap { opacity: 1; }
.hrt-ok circle { fill: none; stroke: var(--mint); stroke-width: 4; opacity: 0; transition: opacity .2s; }
.hrt-glow .hrt-ok circle { opacity: 1; }

.hrt-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hrt-steps span { padding: 6px 10px; border-radius: 99px; background: var(--raised); font-size: 13px; font-weight: 700; color: var(--dim); transition: background .2s, color .2s; }
.hrt-steps span.on { background: var(--gold); color: #1c1608; }
.hrt-steps i { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid var(--faint); border-right: 0; }

/* ---------- the game ---------- */
.hrt-tapzone { width: 100%; display: flex; justify-content: center; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hrt-tapzone.hrt-nope { animation: hrt-nope .3s; }
@keyframes hrt-nope { 50% { background: #23293d; } }
.hrt-tally { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--dim); }
.hrt-tally i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); display: block; }
.hrt-tally i.hrt-m-ok { background: var(--mint); box-shadow: none; }
.hrt-tally i.hrt-m-bad { background: var(--red); box-shadow: none; }

/* ---------- three parts ---------- */
.hrt-three { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.hrt-card { padding: 12px 14px; border-radius: 14px; background: var(--raised); display: flex; flex-direction: column; gap: 3px; }
.hrt-card b { font-size: 16px; }
.hrt-card span { font-size: 14px; color: var(--dim); line-height: 1.3; }
.hrt-c1 { box-shadow: inset 4px 0 0 var(--gold); }
.hrt-c2 { box-shadow: inset 4px 0 0 var(--mint); }
.hrt-c3 { box-shadow: inset 4px 0 0 var(--violet-bright); }

/* ---------- the fork ---------- */
.hrt-fork { width: 100%; max-width: 340px; display: block; }
.hrt-fork text { fill: var(--text); font: 700 17px var(--sans); }
.hrt-fork .hrt-tdim { fill: var(--dim); }
.hrt-fn { fill: var(--raised); }
.hrt-fcue { stroke: var(--gold); stroke-width: 2; }
.hrt-ffist { stroke: var(--mint); stroke-width: 2; }
.hrt-fold { fill: none; stroke: var(--faint); stroke-width: 3; stroke-dasharray: 6 6; }
.hrt-fnew { fill: none; stroke: var(--mint); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1s ease-out .2s; }
.hrt-fork.on .hrt-fnew { stroke-dashoffset: 0; }

/* ---------- cases ---------- */
.hrt-hcard { width: 100%; padding: 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(160deg, #2b2450, #1a2136); box-shadow: inset 0 0 0 1px var(--line); }
.hrt-hcard b { font-size: 15px; color: var(--violet-bright); }
.hrt-hcard span { font-size: 17px; font-weight: 700; line-height: 1.3; }
.hrt-hcard em { font-style: normal; font-size: 14px; color: var(--gold); }

/* ---------- the trial ---------- */
.hrt-trial { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 10px 0; }
.hrt-trow { display: grid; grid-template-columns: 112px 1fr 46px; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; }
.hrt-trow div { height: 24px; border-radius: 8px; background: var(--surface); overflow: hidden; }
.hrt-trow i { display: block; height: 100%; width: 0; background: #8f89a8; border-radius: 8px; transition: width .9s cubic-bezier(.3,.7,.3,1); }
.hrt-trow.hrt-hot i { background: var(--mint); }
.hrt-trow em { font: 600 15px var(--mono); font-style: normal; text-align: right; opacity: 0; transition: opacity .3s .6s; }
.hrt-trial.on em { opacity: 1; }

@media (max-height: 700px) {
  .hrt-maya { max-width: 290px; }
  .hrt-hero img { max-height: 28vh; }
}