/* Psychotherapy lesson. All rules scoped under .psy-* */

.psy-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.psy-note { font-size: 12px; color: var(--faint); text-align: center; }
.psy-photo { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.psy-photo img { width: 100%; display: block; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.psy-photo span { font-size: 12px; color: var(--faint); text-align: center; }
.psy-dodo img { width: auto; max-width: 100%; max-height: 300px; background: #fff; padding: 6px; }

/* the race */
.psy-race { position: relative; width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.psy-lane { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 8px; }
.psy-ln { display: flex; flex-direction: column; line-height: 1.15; }
.psy-ln b { font-size: 15px; color: var(--c); }
.psy-ln span { font-size: 12px; color: var(--dim); }
.psy-track { position: relative; height: 30px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); }
.psy-tok { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -2px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.psy-finish { position: absolute; right: 4px; top: -4px; bottom: -4px; width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--text) 0 6px, transparent 6px 12px); opacity: .5; }
.psy-lane.psy-edge .psy-track { border-color: var(--c); }

/* the recipes */
.psy-recipes { width: 100%; max-width: 350px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psy-rc { padding: 8px 10px; border-radius: 14px; background: #F4EEDF; color: #2A2418; border-top: 6px solid var(--c); }
.psy-rc b { font-size: 14px; font-weight: 900; }
.psy-rc ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.psy-rc li { font: 600 13px/1.2 var(--serif); padding: 1px 4px; border-radius: 5px; transition: background .3s; }
.psy-rc li.psy-flash { animation: psyFlash .7s ease-out; }
@keyframes psyFlash { 30% { background: rgba(216,85,85,.35); } }
.psy-rc li.psy-on { background: rgba(252,192,80,.75); }
.psy-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.psy-bank .word { font-size: 14px; padding-left: 6px; padding-right: 6px; min-height: 44px; }

/* the alliance link */
.psy-scatter { position: relative; width: 100%; max-width: 320px; height: 200px; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); }
.psy-scatter i { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--violet-bright); opacity: 0; transition: opacity .3s calc(var(--d, 0) * 12ms); }
.psy-scatter.psy-on i { opacity: .75; }
.psy-ax { position: absolute; font-size: 12px; font-weight: 700; color: var(--dim); }
.psy-ay { left: 6px; top: -2px; }
.psy-axx { right: 0; bottom: 4px; }
.psy-trend { position: absolute; left: 4%; bottom: 22%; width: 96%; height: 3px; border-radius: 2px; background: var(--gold); transform-origin: left center; rotate: -22deg; opacity: 0; transition: opacity .5s; }
.psy-scatter.psy-on .psy-trend { opacity: 1; }

/* two groups */
.psy-two { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.psy-g { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 12px; column-gap: 8px; row-gap: 3px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); }
.psy-g small { grid-column: 1 / 3; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.psy-g b { font-size: 17px; }
.psy-g em { font: 800 17px var(--sans); font-style: normal; color: var(--mint); grid-row: 2; grid-column: 2; }
.psy-bar { grid-column: 1 / 3; height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.psy-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--mint); }
.psy-trial .psy-bar i { background: var(--violet-bright); }
.psy-new { border-color: var(--violet-bright); }

@media (max-height: 700px) {
  .psy-photo { max-width: 280px; }
  .psy-dodo img { max-height: 230px; }
  .psy-race { gap: 5px; }
  .psy-track { height: 26px; }
  .psy-tok { width: 20px; height: 20px; margin-top: -10px; }
  .psy-scatter { height: 160px; }
  .psy-rc { padding: 6px 8px; }
  .psy-rc ul { gap: 0; }
  .psy-bank .word { padding-top: 6px; padding-bottom: 6px; }
}