/* CBT lesson. All rules scoped under .cbt-* */

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

/* the loop: four cards clockwise from the top left */
.cbt-loop { --body: #FF6B7A; --th: var(--violet-bright); --fe: var(--streak); --act: #6FC3FF;
  position: relative; width: 100%; max-width: 350px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 118px; column-gap: 30px; row-gap: 28px; }
.cbt-card { --c: var(--line-strong); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 8px 8px 6px;
  border-radius: 18px; background: var(--surface); border: 2px solid var(--line); text-align: center; transition: border-color .3s, box-shadow .3s, opacity .3s; }
.cbt-card:disabled { cursor: default; }
.cbt-body { --c: var(--body); } .cbt-th { --c: var(--th); } .cbt-fe { --c: var(--fe); } .cbt-act { --c: var(--act); }
.cbt-card small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.cbt-ico { display: block; width: 30px; height: 30px; flex: none; }
.cbt-ico svg { width: 100%; height: 100%; display: block; fill: var(--c); overflow: visible; }
.cbt-ico .cbt-dot { fill: var(--surface); }
.cbt-ico .cbt-mouth, .cbt-ico .cbt-trach { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; }
.cbt-act .cbt-ico .cbt-trach { stroke: var(--c); }
.cbt-txt { font: 600 15px/1.25 var(--serif); color: var(--text); min-height: 19px; }
.cbt-card[data-lv="0"]:not(.cbt-next) { opacity: .5; }
.cbt-card[data-lv="1"] { border-color: var(--c); }
.cbt-card[data-lv="2"] { border-color: var(--c); box-shadow: 0 0 14px -2px var(--c); }
.cbt-card[data-lv="3"] { border-color: var(--c); box-shadow: 0 0 22px 0 var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.cbt-card.cbt-next { border-color: var(--gold); box-shadow: 0 5px 0 var(--gold-deep); }
.cbt-card.cbt-pop { animation: cbtPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes cbtPop { 40% { transform: scale(1.06); } }
.cbt-body.cbt-beat .cbt-ico svg { animation: cbtBeat .8s ease-in-out 6; }
.cbt-body.cbt-beat[data-lv="3"] .cbt-ico svg { animation-duration: .42s; animation-iteration-count: 12; }
@keyframes cbtBeat { 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } 60% { transform: scale(1); } }

/* arrows in the four gaps */
.cbt-ar { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; }
.cbt-ar::before { content: ""; position: absolute; inset: 3px; border-top: 4px solid var(--line-strong); border-right: 4px solid var(--line-strong); border-radius: 2px; transition: border-color .3s; }
.cbt-a0 { left: 50%; top: 59px; } .cbt-a0::before { transform: rotate(45deg) translate(-3px, 3px); }
.cbt-a1 { left: calc(75% + 7.5px); top: 50%; } .cbt-a1::before { transform: rotate(135deg) translate(-3px, 3px); }
.cbt-a2 { left: 50%; top: calc(100% - 59px); } .cbt-a2::before { transform: rotate(225deg) translate(-3px, 3px); }
.cbt-a3 { left: calc(25% - 7.5px); top: 50%; } .cbt-a3::before { transform: rotate(315deg) translate(-3px, 3px); }
.cbt-ar.cbt-on::before { border-color: var(--gold); }
.cbt-ar.cbt-on { animation: cbtFlow .38s ease-out; }
@keyframes cbtFlow { 0% { transform: scale(.6); opacity: .3; } 60% { transform: scale(1.5); opacity: 1; } }
.cbt-lap { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: #2A1B00;
  font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; scale: .6; transition: opacity .3s, scale .35s cubic-bezier(.34,1.56,.64,1); }
.cbt-lap.cbt-shown { opacity: 1; scale: 1; }

/* the guess and the experiment */
.cbt-guess { width: 100%; max-width: 330px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--violet-bright); display: flex; flex-direction: column; gap: 4px; text-align: center; }
.cbt-guess small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-bright); }
.cbt-guess b { font: 600 19px/1.3 var(--serif); }
.cbt-sc .gauge { width: 100%; max-width: 330px; }
.cbt-sc .gauge .gt { height: 12px; }
.cbt-dz .gt i { background: #6FC3FF; }
.cbt-lungs { width: 120px; height: 120px; --c: #6FC3FF; }
.cbt-lungs svg { width: 100%; height: 100%; display: block; fill: var(--c); filter: drop-shadow(0 0 18px rgba(111,195,255,.45)); }
.cbt-lungs .cbt-trach { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; }
.cbt-lungs.cbt-in svg { animation: cbtBreath .3s ease-out; }
@keyframes cbtBreath { 50% { transform: scale(1.16); } }

@media (max-height: 700px) {
  .cbt-loop { grid-auto-rows: 104px; row-gap: 22px; }
  .cbt-a0 { top: 52px; } .cbt-a2 { top: calc(100% - 52px); }
  .cbt-txt { font-size: 14px; }
  .cbt-ico { width: 26px; height: 26px; }
  .cbt-hero { width: min(70%, 260px); }
  .cbt-lungs { width: 90px; height: 90px; }
  .cbt-guess b { font-size: 17px; }
}