/* Prospect theory lesson. Everything scoped under .pr-*. Losses are violet,
   never red: red is the wrong-answer sheet's. */

.pr-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.pr-note { font-size: 12px; color: var(--faint); text-align: center; line-height: 1.3; }

/* the podium */
.pr-pod { position: relative; width: min(100%, 330px); margin: 0 auto; padding-top: 70px; }
.pr-pod img { width: 100%; display: block; }
.pr-med { position: absolute; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.pr-med b { font: 800 15px var(--sans); color: rgba(0,0,0,.6); }
.pr-pw { position: relative; }
.pr-med.g { left: 50%; top: calc(6% - 36px); background: #F7C24A; }
.pr-med.s { left: 20%; top: calc(27% - 36px); background: #C9D2DD; }
.pr-med.b { left: 81%; top: calc(48% - 36px); background: #D08A4E; }
.pr-drop .pr-med { animation: prDrop .6s cubic-bezier(.3,1.4,.5,1) both; }
.pr-drop .pr-med.g { animation-delay: .1s; } .pr-drop .pr-med.s { animation-delay: .35s; } .pr-drop .pr-med.b { animation-delay: .6s; }
@keyframes prDrop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.pr-pl { position: absolute; top: 100%; margin-top: 6px; width: 90px; margin-left: -45px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pr-pl.s { left: 20%; } .pr-pl.b { left: 81%; }
.pr-joy { position: absolute; top: -6px; width: 104px; margin-left: -52px; display: flex; flex-direction: column; align-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--dim); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.pr-joy b { font: 700 24px var(--mono); }
.pr-joy.s { left: 20%; } .pr-joy.b { left: 81%; }
.pr-joy.s b { color: var(--violet-bright); } .pr-joy.b b { color: var(--gold); }
.pr-rated .pr-joy { opacity: 1; transform: none; }
.pr-rated .pr-joy.b { transition-delay: .3s; }
.pr-pod { margin-bottom: 26px; }

/* the offers */
.pr-offer { display: grid; grid-template-columns: 1fr auto 1.5fr; gap: 8px; align-items: center; width: 100%; }
.pr-sure { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.pr-sure b { font: 700 24px var(--mono); color: var(--gold); }
.pr-neg .pr-sure b { color: var(--violet-bright); }
.pr-sure span { font-size: 12px; font-weight: 700; color: var(--dim); }
.pr-or { font-size: 13px; font-weight: 700; color: var(--faint); }
.pr-envs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: center; }
.pr-envs small { grid-column: 1 / -1; font-size: 12px; color: var(--faint); font-weight: 600; }
.pr-env { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pr-env img { width: 64px; height: auto; }
.pr-env span { font-size: 13px; font-weight: 700; line-height: 1.15; }
.pr-in .pr-env { animation: prEnv .5s cubic-bezier(.3,1.4,.5,1) both; }
.pr-in .pr-env:nth-child(2) { animation-delay: .15s; }
.pr-in .pr-env img { animation: prShake .5s .7s ease-in-out 2 both; }
@keyframes prEnv { from { transform: translateY(-30px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes prShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* the tally */
.pr-tally { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.pr-row { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); }
.pr-row small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pr-you { font-size: 13px; font-weight: 700; color: var(--violet-bright); }
.pr-bar { position: relative; height: 22px; border-radius: 11px; background: var(--raised); overflow: hidden; }
.pr-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); border-radius: 11px; transition: width 1s cubic-bezier(.3,1,.5,1); }
.pr-go .pr-bar i { width: var(--p); }
.pr-bar b { position: absolute; right: 8px; top: 2px; font: 700 14px var(--mono); }
.pr-what { font-size: 14px; font-weight: 700; }

/* the happiness meter: each half holds the deepest loss */
.pr-mw { display: flex; align-items: stretch; justify-content: center; gap: 12px; width: 100%; }
.pr-caps { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 2px 0; font-size: 12px; font-weight: 700; color: var(--dim); text-align: right; width: 92px; }
.pr-caps span:nth-child(2) { color: var(--text); }
.pr-meter { position: relative; display: flex; flex-direction: column; width: 96px; height: 250px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line-strong); overflow: hidden; }
.pr-half { flex: 1; display: flex; }
.pr-half.up { flex-direction: column-reverse; }
.pr-half.dn { flex-direction: column; }
.pr-half i { display: flex; align-items: center; justify-content: center; height: 0; transition: height .8s cubic-bezier(.3,1.1,.5,1); overflow: hidden; }
.pr-half i b { font: 700 12px var(--sans); white-space: nowrap; opacity: 0; transition: opacity .3s .5s; }
.pr-half i.on b { opacity: 1; }
.pr-half.up .s1 { background: var(--gold); color: #1d1405; }
.pr-half.up .s2 { background: #FFD98A; color: #1d1405; border-bottom: 2px solid var(--bg); }
.pr-half.dn .s1 { background: var(--violet); color: #fff; }
.pr-half.dn .s2 { background: var(--violet-bright); color: #14102b; border-top: 2px solid var(--bg); }
.pr-zero { height: 3px; background: var(--text); }
.pr-cmp .pr-half.up .s1 { box-shadow: inset 0 0 0 3px #fff; }
.pr-cmp .pr-half.up .s2 { box-shadow: inset 0 0 0 3px #fff; }

/* two stocks */
.pr-stocks { width: 100%; }
.pr-stocks .choices.pr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.pr-stocks .choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; min-height: 0; text-align: center; }
.pr-stocks .choice small { font-size: 12px; font-weight: 700; color: var(--dim); }
.pr-stocks .choice b { font: 700 24px var(--mono); }
.pr-stocks .choice span { font-size: 13px; font-weight: 700; color: var(--dim); }
.pr-spark { width: 100%; max-width: 120px; height: auto; overflow: visible; }
.pr-spark .b { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.pr-spark path { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pr-spark.up path { stroke: var(--gold); }

/* the texts */
.pr-chat { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; }
.pr-msg { display: flex; gap: 10px; align-items: flex-end; animation: prMsg .35s cubic-bezier(.3,1.3,.5,1) both; }
.pr-msg i { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--violet-deep); display: flex; align-items: center; justify-content: center; font: 800 15px var(--sans); font-style: normal; }
.pr-msg:nth-child(2) i { background: #2C6E7A; }
.pr-msg small { display: block; font-size: 12px; font-weight: 700; color: var(--dim); margin: 0 0 3px 4px; }
.pr-msg span { display: inline-block; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--raised); font-size: 16px; font-weight: 600; }
@keyframes prMsg { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-height: 700px) {
  .pr-pod { width: min(100%, 280px); padding-top: 64px; }
  .pr-env img { width: 52px; }
  .pr-sure { padding: 10px 6px; }
  .pr-sure b { font-size: 20px; }
  .pr-tally { gap: 8px; } .pr-row { padding: 8px 12px; }
  .pr-stocks .choice { padding: 10px 8px; }
  .pr-meter { height: 210px; width: 88px; }
}