/* Scoville scale lesson. Everything scoped under .sco-*. */
.sco-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sco-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.sco-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.sco-hero.photo img { width: 170px; border-radius: 14px; filter: none; box-shadow: 0 12px 30px rgba(0,0,0,.5); }

/* the test */
.sco-test { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.sco-top { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.sco-jar { width: 46px; height: 62px; flex: none; }
.sco-glass { fill: rgba(234,227,215,.05); stroke: var(--line-strong); stroke-width: 2; }
.sco-liq { fill: rgb(232,110,40); transition: fill .4s; }
.sco-count { display: flex; flex-direction: column; gap: 2px; }
.sco-count span { font-size: 12.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.sco-cups { font: 700 24px var(--mono); color: var(--text); }
.sco-panel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sco-t { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sco-t svg { width: 100%; max-width: 58px; height: auto; overflow: visible; }
.sco-t span { font-size: 12.5px; font-weight: 700; color: #FF8A8A; }
.sco-t.calm span { color: var(--dim); }
.sco-head { fill: #e0664f; stroke: #ff9a80; stroke-width: 1.5; transition: fill .3s; }
.sco-t.calm .sco-head { fill: #c9a88a; stroke: #e8cdb2; }
.sco-eye { fill: #2a1a14; }
.sco-mouth.calm { stroke: #2a1a14; stroke-width: 2.5; stroke-linecap: round; fill: none; display: none; }
.sco-mouth.hot { fill: #4a1410; }
.sco-t.calm .sco-mouth.calm { display: block; } .sco-t.calm .sco-mouth.hot { display: none; }
.sco-sweat { fill: #8fd6ff; }
.sco-fl path { fill: var(--gold); stroke: #ff7a4d; stroke-width: 1.5; }
.sco-t.calm .sco-sweat, .sco-t.calm .sco-fl { opacity: 0; }
.sco-sweat, .sco-fl { transition: opacity .3s; }
.sco-tally { text-align: center; font-size: 15px; color: var(--dim); font-weight: 600; }
.sco-tally b { color: var(--text); }
.sco-tally.done b { color: var(--mint); }
.sco-hide .sco-panel, .sco-hide .sco-tally { visibility: hidden; }
.sco-badge { display: flex; flex-direction: column; align-items: center; padding: 8px 20px; border-radius: 14px; border: 1.5px solid var(--gold); background: rgba(252,192,80,.08); }
.sco-badge b { font: 700 26px var(--mono); color: var(--gold); }
.sco-badge span { font-size: 13px; font-weight: 700; color: var(--dim); }

/* half and half */
.sco-mix { width: 100%; max-width: 360px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sco-mix > i { font-style: normal; font: 700 22px var(--sans); color: var(--dim); }
.sco-mj { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; }
.sco-mj svg { width: 54px; height: 72px; }
.sco-mj span { font-size: 12.5px; font-weight: 700; color: var(--dim); text-align: center; }
.sco-mj b { font: 700 16px var(--mono); color: var(--text); }
.sco-mj.hab .sco-liq { fill: #e8561f; }
.sco-mj.wat .sco-liq { fill: rgba(111,211,255,.35); }
.sco-mj.mix .sco-liq { fill: rgba(234,227,215,.08); transition: fill .5s; }
.sco-mj.mix.on .sco-liq { fill: #f09a5a; }
.sco-mj.mix.on b { color: var(--gold); }

/* tired tongues */
.sco-swing { display: flex; gap: 14px; }
.sco-swing div { display: flex; flex-direction: column; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.sco-swing b { font: 700 26px var(--mono); color: var(--gold); }
.sco-swing span { font-size: 13px; font-weight: 700; color: var(--dim); }

/* today */
.sco-ppm { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sco-mac { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sco-mac i { width: 120px; height: 70px; border-radius: 12px; background: linear-gradient(var(--raised), var(--surface)); border: 1.5px solid var(--line-strong); position: relative; }
.sco-mac i::after { content: ''; position: absolute; left: 14px; right: 14px; top: 16px; height: 18px; border-radius: 4px; background: #13303a; box-shadow: inset 0 0 0 1px #6FD3FF; }
.sco-mac span { font-size: 13px; font-weight: 700; color: var(--dim); }
.sco-rule { display: flex; align-items: center; gap: 10px; }
.sco-rule b { font-size: 14px; font-weight: 800; color: var(--text); padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.sco-rule em { font: 700 18px var(--mono); font-style: normal; color: var(--gold); }
.sco-lad { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.sco-lr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid hsl(calc(50 - var(--k) * 10), 90%, 60%); }
.sco-lr span { font-size: 14px; font-weight: 700; color: var(--text); }
.sco-lr b { font: 600 13.5px var(--mono); color: var(--gold); text-align: right; }

/* last puzzle */
.sco-goal { display: flex; align-items: center; gap: 12px; }
.sco-goal div { display: flex; flex-direction: column; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.sco-goal span { font-size: 12.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.sco-goal b { font: 700 22px var(--mono); color: var(--text); }
.sco-goal em { font-style: normal; font-size: 12.5px; color: var(--gold); font-weight: 700; }
.sco-goal > i { font-style: normal; font-size: 22px; color: var(--dim); }

@media (max-height: 700px) {
  .sco-t svg { max-width: 46px; }
  .sco-test { gap: 8px; }
  .sco-lr { padding: 6px 10px; }
  .sco-hero.photo img { width: 130px; }
}