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

/* ---------- the desk ---------- */
.slc-desk { position: relative; width: 100%; height: 220px; border-radius: 16px; background: linear-gradient(180deg, #5a3f2c, #452f20); box-shadow: inset 0 -8px 0 rgba(0,0,0,.25); }
.slc-hw { position: absolute; left: 4%; top: 7%; width: 52%; height: 84%; border-radius: 8px; background: #EDE3D3; color: #2a2320; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: opacity .3s; }
.slc-hw b { font-size: 14px; }
.slc-lines { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.slc-lines i { height: 3px; border-radius: 2px; background: #c9bca8; }
.slc-lines i:nth-child(odd) { width: 80%; }
.slc-prog { height: 10px; border-radius: 5px; background: #d6c9b4; overflow: hidden; }
.slc-prog i { display: block; height: 100%; width: 0; background: #3aa877; transition: width .1s linear; }
.slc-pct { font: 600 13px var(--mono); color: #2a2320; }
.slc-phone { position: absolute; right: 12%; top: 22%; width: 52px; height: 92px; border-radius: 10px; background: #15151d; box-shadow: 0 0 0 3px #2c2c38; transition: all .5s cubic-bezier(.3,.7,.3,1); }
.slc-screen { position: absolute; inset: 6px; border-radius: 6px; background: linear-gradient(160deg, #6E52F0, #E8835E); opacity: .9; transition: opacity .3s; }
.slc-phone.buzz { animation: slcBuzz .35s linear; }
@keyframes slcBuzz { 20% { translate: -3px 0; rotate: -3deg; } 40% { translate: 3px 0; rotate: 3deg; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
.slc-drawer { position: absolute; right: 4%; bottom: 6%; width: 34%; height: 20%; border-radius: 6px; background: #3a281b; box-shadow: inset 0 0 0 2px #6b4a33; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #c9a782; }
.slc-door { position: absolute; right: 4%; top: 6%; font-size: 12px; font-weight: 800; color: #c9a782; opacity: 0; }
.slc-at-down .slc-phone { transform: rotate(90deg); }
.slc-at-down .slc-screen { opacity: 0; }
.slc-at-drawer .slc-phone { top: 72%; right: 14%; width: 30px; height: 20px; opacity: .25; }
.slc-at-away .slc-phone { opacity: 0; transform: translateX(60px); }
.slc-at-away .slc-door { opacity: 1; }
.slc-desk.slc-checking .slc-hw { opacity: .35; }
.slc-desk.slc-checking .slc-phone { box-shadow: 0 0 0 3px #2c2c38, 0 0 28px rgba(232,131,94,.8); }
.slc-urges { position: absolute; inset: 0; pointer-events: none; }
.slc-urge { position: absolute; pointer-events: auto; min-width: 104px; min-height: 44px; padding: 0 12px; border-radius: 22px; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,.4); animation: slcPop .25s cubic-bezier(.34,1.56,.64,1) both; overflow: hidden; }
.slc-urge::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(255,255,255,.7); transform-origin: left; animation: slcLife 1.7s linear both; }
.slc-urge span { position: relative; }
.slc-urge.gone { animation: slcGone .3s ease-in both; pointer-events: none; }
.slc-urge.lost { background: #7a3a44; }
@keyframes slcPop { from { transform: scale(.4); opacity: 0; } }
@keyframes slcLife { to { transform: scaleX(0); } }
@keyframes slcGone { to { transform: scale(.6); opacity: 0; } }
.slc-desk.slc-still .slc-urges { display: none; }
.slc-stats { display: flex; justify-content: center; gap: 18px; font-size: 13px; font-weight: 700; color: var(--dim); min-height: 20px; }
.slc-stats b { font: 600 17px var(--mono); color: var(--text); margin-right: 3px; }

/* ---------- plates ---------- */
.slc-plate { position: relative; width: 150px; height: 110px; display: grid; place-items: center; }
.slc-dish { width: 140px; height: 50px; border-radius: 50%; background: radial-gradient(#fff 55%, #d9d9e3 57%, #fff 70%); position: relative; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.slc-mm { position: absolute; left: 50%; top: 4px; width: 30px; height: 26px; margin-left: -15px; border-radius: 9px; background: linear-gradient(180deg, #fff, #eae6df); box-shadow: 0 2px 0 #d8d2c6; }
.slc-mm2 { display: none; }
.slc-cover { position: absolute; left: 50%; bottom: 30px; width: 126px; height: 70px; margin-left: -63px; border-radius: 63px 63px 8px 8px; background: linear-gradient(160deg, #cfd3dc, #8d93a3); opacity: 0; transform: translateY(-20px); transition: all .5s cubic-bezier(.3,.7,.3,1); }
.slc-covered .slc-cover { opacity: 1; transform: none; }
.slc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; padding-top: 10px; }
.slc-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slc-col > b { font-size: 14px; }
.slc-col .slc-plate { width: 140px; }

.slc-bubble { padding: 14px 10px; border-radius: 16px 16px 16px 4px; background: var(--raised); font-size: 14px; font-weight: 700; text-align: center; line-height: 1.3; transition: box-shadow .3s; }
.slc-bubble.on { box-shadow: inset 0 0 0 2.5px var(--mint); }

/* ---------- the claim ---------- */
.slc-claim { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.slc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.slc-row span { padding: 10px; border-radius: 10px; background: var(--raised); font-size: 13px; font-weight: 700; text-align: center; }
.slc-row i { font-style: normal; color: var(--gold); font-weight: 800; }
.slc-meter { display: grid; grid-template-columns: 1fr; gap: 4px; }
.slc-meter small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.slc-m { height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; margin-top: 6px; }
.slc-m i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .7s cubic-bezier(.3,.7,.3,1); }
.slc-meter em { font-style: normal; font-size: 12.5px; color: var(--dim); font-weight: 700; }

/* ---------- the bet ---------- */
.slc-col em { font: 600 13px var(--mono); font-style: normal; min-height: 18px; }

/* ---------- the tank ---------- */
.slc-tank { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; }
.slc-fuel { width: 90px; height: 150px; border-radius: 16px; background: var(--raised); box-shadow: inset 0 0 0 3px var(--line-strong); display: flex; align-items: flex-end; overflow: hidden; }
.slc-fuel i { display: block; width: 100%; height: 100%; background: var(--red); transition: height 1s cubic-bezier(.3,.7,.3,1), background .4s; }
.slc-tank.slc-full .slc-fuel i { background: var(--gold); }
.slc-tank b { font-size: 14px; }

/* ---------- compare ---------- */
.slc-cmp { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.slc-cmp small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.slc-cbar { display: grid; grid-template-columns: 1fr 44px; gap: 4px 10px; align-items: center; }
.slc-cbar span { grid-column: 1 / 3; font-size: 13px; font-weight: 700; color: var(--dim); }
.slc-cbar div { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.slc-cbar i { display: block; height: 100%; background: var(--violet-bright); }
.slc-cbar.slc-c1 i { background: var(--gold); }
.slc-cbar b { font: 600 15px var(--mono); text-align: right; }
.slc-urgecmp { display: flex; gap: 20px; font-size: 13px; font-weight: 700; color: var(--dim); }
.slc-urgecmp b { font: 600 20px var(--mono); color: var(--text); margin-right: 4px; }

/* ---------- rooms ---------- */
.slc-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; padding-top: 12px; }
.slc-room { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-radius: 14px; background: var(--raised); min-height: 110px; transition: box-shadow .3s; }
.slc-room b { font-size: 15px; }
.slc-room span { font-size: 13px; color: var(--dim); line-height: 1.35; }
.slc-room.slc-fun { background: linear-gradient(160deg, rgba(232,131,94,.25), rgba(110,82,240,.25)); }
.slc-room.on { box-shadow: inset 0 0 0 2.5px var(--mint); }

@media (max-height: 700px) {
  .slc-desk { height: 190px; }
  .slc-hero img { max-height: 30vh; }
  .slc-fuel { height: 120px; }
}