/* Psychoanalysis. Freud is violet, the waiting room grey, the rival therapy green. */
:root { --psa-f: #A99BFF; --psa-r: #3FD69A; }
.psa-hero img { width: 260px; }

/* the chain */
.psa-chain { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
.psa-link { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); opacity: .25; transform: translateX(-6px); transition: opacity .35s, transform .35s, border-color .35s; }
.psa-link b { font-size: 15px; }
.psa-link span { font-size: 13px; line-height: 1.25; color: var(--dim); }
.psa-link.on { opacity: 1; transform: none; border-color: var(--psa-f); }
.psa-link[data-i="2"].on { border-color: var(--gold); background: rgba(252,192,80,.12); }
.psa-link + .psa-link::before { content: ""; position: absolute; left: 22px; top: -8px; width: 2px; height: 8px; background: var(--line-strong); }


/* three doors */
.psa-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 380px; margin: 0 auto; }
.psa-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 220px; padding: 12px 6px 10px; border-radius: 40px 40px 12px 12px; background: var(--surface); border: 2px solid var(--c); box-shadow: 0 4px 0 #070a14; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.psa-door:active { transform: translateY(2px); }
.psa-door .who { font: 800 17px var(--sans); color: var(--c); }
.psa-door .st { font-size: 12.5px; line-height: 1.2; color: var(--dim); min-height: 46px; }
.psa-door .meter { position: relative; flex: 1; width: 22px; min-height: 70px; border-radius: 11px; background: var(--raised); overflow: hidden; }
.psa-door .meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: var(--c); border-radius: 11px; }
.psa-door .pt { min-height: 18px; font-size: 13px; font-weight: 800; color: var(--c); }
.psa-door.ran { background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.psa-note { margin-top: 8px; text-align: center; font-size: 12px; color: var(--dim); }


/* the trial */
.psa-lab { width: 100%; max-width: 380px; margin: 0 auto; }
.psa-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.psa-room { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--c); text-align: center; transition: opacity .4s, filter .4s; }
.psa-room b { font-size: 13px; line-height: 1.15; min-height: 30px; display: grid; place-items: center; }
.psa-room small { font-size: 11.5px; color: var(--dim); }
.psa-room.shut { opacity: .22; filter: grayscale(1); border-style: dashed; }
.psa-ppl { position: relative; width: 100%; height: 130px; margin-bottom: 6px; border-radius: 10px; background: linear-gradient(0deg, var(--raised), transparent); }
.psa-ppl::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 36%; border-top: 1px dashed var(--line-strong); }
.psa-p { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); width: 9px; height: 9px; border-radius: 50%; background: var(--c); animation: psaIn .3s ease both; transition: bottom 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes psaIn { from { opacity: 0; transform: scale(.3); } }

@media (max-height: 700px) {
  .psa-link { padding: 5px 10px; }
  .psa-link span { font-size: 12px; }
  .psa-door { min-height: 170px; }
  .psa-ppl { height: 96px; }
}