/* Self-control lesson. All rules scoped under .slc-* */

/* the desk */
.slc-desk { position: relative; flex: 1; width: 100%; max-width: 400px; margin: 0 auto; padding: 4px 18px 26px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.slc-top { order: -2; display: flex; align-items: center; gap: 10px; font: 700 13px var(--sans); color: var(--dim); }
.slc-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(234,227,215,.08); overflow: hidden; }
.slc-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .1s linear; }
.slc-pct { min-width: 38px; text-align: right; font: 800 14px var(--sans); color: var(--text); }
.slc-table { position: relative; height: 240px; border-radius: 16px; background: linear-gradient(180deg, #5A3B26, #46301F); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.35); }
.slc-notes { position: absolute; left: 14px; top: 16px; width: 46%; height: 196px; border-radius: 6px; background: #F4ECDD; padding: 10px; box-sizing: border-box; transform: rotate(-3deg); box-shadow: 0 6px 14px rgba(0,0,0,.3); transition: opacity .3s; }
.slc-notes b { display: block; font: 800 13px var(--sans); color: #3A2A1E; margin-bottom: 8px; }
.slc-notes i { display: block; height: 3px; margin: 9px 0; border-radius: 2px; background: rgba(58,42,30,.28); }
.slc-notes i:nth-child(odd) { width: 80%; }
.slc-phone { position: absolute; right: 20px; top: 26px; width: 100px; touch-action: none; cursor: grab; z-index: 2; transition: translate .25s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.4,0,.2,1), opacity .5s; }
.slc-phone.held { transition: none; cursor: grabbing; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.slc-phone img { display: block; width: 100%; pointer-events: none; -webkit-user-drag: none; }
.slc-lit { position: absolute; inset: 14% 12% 18%; border-radius: 10px; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.slc-phone.buzz { animation: slcBuzz .38s linear; }
.slc-phone.buzz .slc-lit { opacity: 1; transition: opacity 0s; animation: slcFade 1.2s ease-out forwards; }
@keyframes slcBuzz { 0%, 100% { rotate: 0deg; } 20% { rotate: -6deg; } 40% { rotate: 6deg; } 60% { rotate: -4deg; } 80% { rotate: 4deg; } }
@keyframes slcFade { to { opacity: 0; } }
.slc-checking .slc-notes { opacity: .4; }
.slc-checking .slc-phone .slc-lit { opacity: 1; animation: none; }

/* the notifications */
.slc-pings { position: absolute; inset: 10px 128px 10px 8px; z-index: 3; pointer-events: none; }
.slc-ping { all: unset; box-sizing: border-box; position: absolute; min-width: 150px; max-width: 100%; min-height: 46px; padding: 8px 12px 8px 30px; border-radius: 14px; background: rgba(250,248,255,.96); color: #1B1730; font: 700 14px var(--sans); box-shadow: 0 8px 20px rgba(0,0,0,.4); cursor: pointer; pointer-events: auto; display: flex; align-items: center; animation: slcPop .22s cubic-bezier(.2,.8,.2,1.4) both; }
.slc-ping::before { content: ''; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: var(--violet); }
.slc-ping.gone { animation: slcAway .3s ease-in forwards; pointer-events: none; }
.slc-ping.lost { animation: slcLost .4s ease-in forwards; }
@keyframes slcPop { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes slcAway { to { opacity: 0; transform: translateX(-60px) scale(.9); } }
@keyframes slcLost { to { opacity: 0; transform: translateX(120px) scale(.6); } }

/* the drawer */
.slc-drawer { position: relative; align-self: center; width: 62%; height: 64px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #6B4A33, #523826); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 5px 9px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; margin-top: -14px; transition: box-shadow .2s, translate .3s; cursor: pointer; }
.slc-drawer b { position: absolute; bottom: 6px; font: 700 12px var(--sans); color: rgba(244,236,221,.7); letter-spacing: .06em; text-transform: uppercase; }
.slc-slot { position: absolute; top: 0; left: 8%; right: 8%; height: 26px; border-radius: 0 0 8px 8px; background: #1E140D; transition: height .35s cubic-bezier(.4,0,.2,1); }
.slc-handle { position: relative; width: 52px; height: 9px; border-radius: 5px; background: var(--gold); box-shadow: 0 0 10px rgba(252,192,80,.4); margin-top: 6px; }
.slc-drawer.near { box-shadow: 0 0 0 3px var(--gold), 0 5px 9px rgba(0,0,0,.3); }
.slc-drawer.shut .slc-slot { height: 0; }
.slc-bzz { position: absolute; right: 12px; top: 6px; font: italic 800 14px var(--sans); color: rgba(252,192,80,0); }
.slc-drawer.buzz { animation: slcJig .4s linear; }
.slc-drawer.buzz .slc-bzz { animation: slcBz 1s ease-out; }
@keyframes slcJig { 20% { translate: -5px 0; rotate: -1.5deg; } 50% { translate: 5px 0; rotate: 1.5deg; } 80% { translate: -3px 0; } }
@keyframes slcBz { 0% { color: rgba(252,192,80,1); transform: translateY(0); } 100% { color: rgba(252,192,80,0); transform: translateY(-10px); } }
.slc-r2:not(.slc-done) .slc-drawer { cursor: pointer; }
.slc-phone.in { transform: scale(.35); opacity: 0; transition: translate .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1), opacity .3s .25s; }
.slc-drawer.shut .slc-slot { transition-delay: .35s; }

.slc-tally { order: -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font: 600 13px var(--sans); color: var(--dim); min-height: 40px; }
.slc-tally b { font: 800 18px var(--sans); color: var(--text); margin-right: 2px; }
.slc-tally em { flex-basis: 100%; text-align: center; font-style: normal; color: var(--faint); font-size: 12.5px; }

/* two months later */
.slc-two { display: flex; gap: 12px; justify-content: center; width: 100%; max-width: 340px; margin: 0 auto; }
.slc-mini { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .3s; }
.slc-mini b { font: 700 13.5px var(--sans); color: var(--text); text-align: center; }
.slc-mbox { position: relative; width: 100%; height: 130px; border-radius: 14px; background: linear-gradient(180deg, #5A3B26, #46301F); overflow: hidden; border: 2px solid transparent; transition: border-color .3s, box-shadow .3s; }
.slc-mini.won .slc-mbox { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.35); }
.slc-mp { position: absolute; right: 14px; top: 18px; width: 26px; height: 48px; border-radius: 6px; background: linear-gradient(180deg, #6A8BFF, #B07CFF); box-shadow: 0 0 10px rgba(169,155,255,.5); }
.slc-mp.slc-mpin { top: auto; bottom: 10px; left: 50%; right: auto; margin-left: -13px; height: 12px; border-radius: 3px; opacity: .5; box-shadow: none; }
.slc-mb { position: absolute; left: 10px; top: calc(8px + var(--i) * 19px); width: calc(58% - var(--i) * 3%); height: 14px; border-radius: 7px; background: rgba(250,248,255,.92); }
.slc-mb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 70%; height: 2px; margin-left: -35%; background: var(--violet); }
.slc-md { position: absolute; left: 16%; right: 16%; bottom: 0; height: 30px; border-radius: 8px 8px 0 0; background: #6B4A33; }

/* the marshmallow test */
.slc-marsh { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; min-height: 210px; }
.slc-plate { width: 170px; height: 70px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fff, #D8D2E8 70%); box-shadow: 0 10px 20px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; margin-top: 30px; transition: opacity .4s; }
.slc-mm { width: 38px; height: 30px; border-radius: 10px; background: linear-gradient(180deg, #FFFFFF, #EDE6D6); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.slc-deal { display: flex; align-items: center; gap: 10px; font: 700 15px var(--sans); color: var(--text); transition: opacity .4s; }
.slc-deal b { color: var(--faint); font-weight: 600; }
.slc-deal span { padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.slc-kid { position: absolute; top: 0; left: 50%; width: 220px; margin-left: -110px; opacity: 0; transform: scale(.9); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.slc-marsh.on .slc-kid { opacity: 1; transform: none; }
.slc-marsh.on .slc-plate, .slc-marsh.on .slc-deal { opacity: 0; }

/* the closer */
.slc-pair { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; }
.slc-who { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.slc-who b { font: 800 17px var(--sans); color: var(--text); }
.slc-who span { font: 500 16px var(--serif); color: var(--dim); }
.slc-who.won { border-color: var(--gold); box-shadow: 0 0 16px rgba(252,192,80,.3); }

@media (max-height: 700px) {
  .slc-table { height: 200px; }
  .slc-notes { height: 160px; }
  .slc-notes i { margin: 8px 0; }
  .slc-phone { width: 82px; top: 20px; }
  .slc-pings { right: 108px; }
  .slc-drawer { height: 56px; }
  .slc-mbox { height: 110px; }
  .slc-mb { top: calc(6px + var(--i) * 16px); height: 12px; }
  .slc-kid { width: 180px; margin-left: -90px; }
  .slc-marsh { min-height: 180px; }
}