/* Dopamine lesson. All rules scoped under .dp-* */

/* the lab */
.dp-lab { flex: 1; width: 100%; max-width: 400px; margin: 0 auto; padding: 0 16px 6px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.dp-rig { display: flex; align-items: center; justify-content: center; gap: 6px; }
.dp-mk { position: relative; width: 200px; flex: none; }
.dp-withrows { justify-content: flex-start; }
.dp-withrows .dp-mk { width: 128px; }
.dp-withrows .dp-cell { width: 104px; height: 104px; }
.dp-mk img { display: block; width: 100%; }
/* The art's lamp is drawn lit; a dark cap covers it until the light comes on. */
.dp-lampoff { position: absolute; left: 52.8%; top: 8%; width: 14.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4A4660, #24223A 70%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); transition: opacity .12s; }
.dp-lampglow { position: absolute; left: 47%; top: 1%; width: 27%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,231,163,.9), rgba(252,192,80,.35) 45%, rgba(252,192,80,0) 70%); opacity: 0; transition: opacity .12s; pointer-events: none; }
.dp-mk.lit .dp-lampoff { opacity: 0; }
.dp-mk.lit .dp-lampglow { opacity: 1; }
.dp-drop { position: absolute; left: 54.5%; top: 40%; width: 12px; height: 16px; margin-left: -6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #FFD9A0, #F28C28 70%); opacity: 0; }
.dp-drop.go { animation: dpDrop .55s ease-in; }
@keyframes dpDrop { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
.dp-dry { position: absolute; left: 58%; top: 70%; padding: 2px 7px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-strong); font: 700 12px var(--sans); color: var(--dim); white-space: nowrap; opacity: 0; }
.dp-mk.dry .dp-dry { animation: dpDry 1.4s ease-out forwards; }
@keyframes dpDry { 0% { opacity: 0; transform: translateY(4px); } 20%, 100% { opacity: 1; transform: none; } }

.dp-cellw { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dp-cap { font: 600 12.5px var(--sans); color: var(--dim); }
.dp-cell { position: relative; width: 150px; height: 150px; flex: none; }
.dp-cell svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-arms path { fill: none; stroke: #6B58C9; stroke-width: 6; stroke-linecap: round; }
.dp-arms circle { fill: #6B58C9; }
.dp-body { fill: #7B5CFD; stroke: rgba(255,255,255,.25); stroke-width: 2; }
.dp-nuc { fill: rgba(10, 14, 26, .55); }
.dp-halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 227, 163, .95) 0%, rgba(252, 192, 80, .5) 30%, rgba(252, 192, 80, 0) 68%); opacity: 0; }
.dp-ring { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; }
.dp-ring.on { animation: dpRing .7s ease-out; }
@keyframes dpRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
.dp-cell.dim .dp-arms path { stroke: #3A4260; } .dp-cell.dim .dp-arms circle { fill: #3A4260; }
.dp-wire { position: absolute; left: 50%; top: 50%; width: 2px; height: 58px; margin-left: 22px; margin-top: -78px; background: linear-gradient(180deg, rgba(234,227,215,0), rgba(234,227,215,.55)); transform: rotate(28deg); transform-origin: bottom; }

/* the rows */
.dp-rowsw { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dp-rows { width: 100%; max-width: 360px; display: block; }
.dp-colL { fill: rgba(252,192,80,.08); stroke: rgba(252,192,80,.3); }
.dp-colJ { fill: rgba(242,140,40,.08); stroke: rgba(242,140,40,.3); }
.dp-hd { font: 700 12px var(--sans); fill: var(--dim); }
.dp-dl { font: 700 12px var(--sans); fill: var(--dim); }
.dp-row.miss .dp-dl { fill: var(--violet-bright); }
.dp-base { stroke: rgba(234,227,215,.14); stroke-width: 1; }
.dp-tick { stroke: rgba(234,227,215,.55); stroke-width: 1.6; }
.dp-tick.big { stroke: var(--gold); stroke-width: 2; }
.dp-note { font: 600 12px var(--sans); color: var(--faint); text-align: center; }

/* the rat */
.dp-cage { position: relative; width: 100%; max-width: 380px; height: 250px; margin: auto; }
.dp-floor { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 62%; border-radius: 18px; background: linear-gradient(180deg, rgba(123,92,253,.06), rgba(123,92,253,.14)); border: 1px solid var(--line); }
.dp-rat { position: absolute; left: 30px; bottom: 26px; width: 140px; }
.dp-rat img { display: block; width: 100%; transform-origin: 50% 90%; }
.dp-cage.sweet .dp-rat img { animation: dpLick 1.2s ease-in-out 2; }
@keyframes dpLick { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg) scale(1.03); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg) scale(1.02); } }
.dp-sugar { position: absolute; left: 70%; top: -14px; width: 12px; height: 15px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #fff, #CFE7FF 70%); opacity: 0; }
.dp-cage.sweet .dp-sugar { animation: dpSugar .6s ease-in forwards; }
@keyframes dpSugar { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(46px); } }
.dp-tag { position: absolute; padding: 4px 10px; border-radius: 10px; font: 800 13px var(--sans); white-space: nowrap; opacity: 0; transition: opacity .3s .5s; }
.dp-like { left: 70%; top: -6px; background: rgba(63,214,154,.16); border: 1px solid rgba(63,214,154,.6); color: var(--text); }
.dp-cage.sweet .dp-like { opacity: 1; }
.dp-bowl { position: absolute; right: 34px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.dp-bowl i { width: 64px; height: 26px; border-radius: 0 0 32px 32px; background: linear-gradient(180deg, #C98C1B, #8A5E12); box-shadow: inset 0 6px 0 #E7B65A; }
.dp-bowl span { font: 700 12.5px var(--sans); color: var(--dim); }
.dp-cage.food .dp-bowl { opacity: 1; transform: none; }
.dp-path { position: absolute; left: 160px; right: 110px; bottom: 54px; border-top: 3px dashed rgba(234,227,215,.25); opacity: 0; transition: opacity .4s 1s; }
.dp-stay { left: 50%; bottom: 66px; translate: -30% 0; background: var(--surface); border: 1px solid var(--line-strong); color: var(--dim); transition-delay: 1.2s; }
.dp-cage.food .dp-path, .dp-cage.food .dp-stay { opacity: 1; }

/* your phone */
.dp-tl { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.dp-step { all: unset; box-sizing: border-box; min-width: 84px; min-height: 96px; padding: 8px 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.dp-step span { font: 700 14px var(--sans); color: var(--text); }
.dp-ico svg { width: 46px; height: 46px; display: block; }
.dp-step.picked { border-color: var(--violet-bright); }
.dp-step.hot { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.45); }
.dp-step.hot .dp-vib { opacity: 1; }
.dp-step.lit { opacity: .6; }
.dp-arrow { width: 22px; flex: none; }
.dp-arrow svg { width: 22px; height: 11px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dp-ph { fill: #1D2640; stroke: var(--dim); stroke-width: 2.5; }
.dp-vib { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dp-lk { fill: none; stroke: var(--dim); stroke-width: 2.2; stroke-linejoin: round; }
.dp-bub { fill: #1D2640; stroke: var(--dim); stroke-width: 2.5; }
.dp-txt { stroke: var(--faint); stroke-width: 3; stroke-linecap: round; }
.dp-cell.dp-small { width: 110px; height: 110px; margin: 18px auto 0; }

@media (max-height: 700px) {
  .dp-mk { width: 170px; }
  .dp-cell { width: 128px; height: 128px; }
  .dp-withrows .dp-mk { width: 104px; }
  .dp-withrows .dp-cell { width: 84px; height: 84px; }
  .dp-withrows .dp-cap { display: none; }
  .dp-rows { max-width: 330px; }
  .dp-cage { height: 220px; }
  .dp-rat { width: 116px; }
  .dp-step { min-height: 88px; min-width: 78px; }
  .dp-cell.dp-small { width: 92px; height: 92px; margin-top: 10px; }
}