/* Prospect theory lesson. Everything scoped under .pr-*. */

.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; }

/* result bars */
.pr-res { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pr-res .gauge { animation: cardIn .25s both; }
.gauge.pr-gold .gt i { background: var(--gold); } .gauge.pr-gold .gl { color: var(--gold); } .gauge.pr-gold .gl b { color: var(--gold); }
.gauge.pr-feel { width: 100%; }
.gauge.pr-feel .gt { height: 12px; }

/* the two offers */
.pr-offers { display: flex; gap: 10px; width: 100%; }
.pr-offers .of { flex: 1; padding: 12px 12px 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; text-align: center; animation: cardIn .3s both; }
.pr-offers .of b { font-family: var(--mono); font-size: 22px; color: var(--gold); }
.pr-offers .of span { font-size: 12px; font-weight: 700; color: var(--dim); line-height: 1.2; }

/* the curve: 300 wide so 12px labels stay 12px */
.pr-curve { width: 300px; max-width: 100%; height: auto; display: block; overflow: visible; }
.pr-curve .ax { stroke: var(--line-strong); stroke-width: 1; }
.pr-curve .cap { fill: var(--faint); font: 700 12px var(--sans); letter-spacing: .04em; }
.pr-curve .v { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pr-curve .mk circle { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.pr-curve .mk.gam circle { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.pr-curve .mk.you circle { fill: var(--mint); }
.pr-curve .mk text { fill: var(--text); font: 700 13px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.pr-curve .mk.you text { fill: var(--mint); }
.pr-curve .mk { transition: transform .12s linear; }

.pr-hero { width: min(70%, 260px); margin: 0 auto; }
.pr-hero img { width: 100%; display: block; }

/* the monkey and two traders */
.pr-monkey { width: min(62%, 240px); margin: 0 auto; transition: width .35s; }
.pr-monkey img { width: 100%; display: block; }
.pr-monkey.small { width: 96px; }
.pr-traders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; animation: cardIn .3s both; }
.pr-trader { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); pointer-events: none; }
.pr-trader b { font-size: 15px; color: var(--text); }
.pr-trader small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.pr-sl { display: flex; justify-content: center; gap: 4px; min-height: 44px; }
.pr-sl img { width: 52px; height: 44px; object-fit: contain; transition: opacity .6s, transform .6s; }
.pr-sl img.pr-back { opacity: .2; filter: grayscale(1); }
.pr-traders.shown .pr-trader.a { border-color: var(--mint); }
@media (max-height: 700px) {
  .pr-monkey.small { width: 64px; }
  .pr-trader { padding: 8px 6px; gap: 2px; }
  .pr-sl img { width: 44px; height: 36px; }
  .pr-sl { min-height: 36px; }
}

/* offers */
.pr-offers { align-items: center; }
.pr-offers .or { font-size: 13px; font-weight: 700; color: var(--faint); }
.pr-curve .tk line { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pr-curve .tk circle { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.pr-curve .tk text { fill: var(--gold); font: 700 12px var(--mono); }
.pr-curve.pr-w .dg { stroke: var(--line-strong); stroke-dasharray: 4 4; }

/* what the machine feels, and what it picks */
.pr-scales { width: 100%; display: flex; flex-direction: column; gap: 5px; transition: opacity .3s; }
.pr-scales.hid { opacity: 0; }
.pr-sr { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 8px; }
.pr-sr .lb { font-size: 13px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.pr-sr i { display: block; height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.pr-sr b { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--mint); transition: width .15s linear; }
.pr-sr b.hurt { background: var(--red); }
.pr-pick { font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; }
.pr-pick b { color: var(--text); }
.pr-pick em { font-style: normal; margin-left: 4px; }
.pr-pick .y { color: var(--mint); } .pr-pick .n { color: var(--red); }
.pr-scales.mini { padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pr-scales.mini .pr-sr { display: none; }
.pr-scales.mini .pr-pick { font-size: 12px; }

/* the gray square */
.pr-eye { position: relative; width: 300px; max-width: 100%; height: 150px; border-radius: 16px; overflow: hidden; background: #1A2136; }
.pr-eye .grad { position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, #fff 100%); transition: opacity .8s; }
.pr-eye .sq { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; background: #808080; }
.pr-eye .sq.b { left: 75%; opacity: 0; transition: opacity .4s; }
.pr-eye.both .sq.b { opacity: 1; }
.pr-eye.flat .grad { opacity: 0; }

/* the reference point, two bonuses */
.pr-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.pr-ref { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.pr-ref small { font-size: 12px; font-weight: 700; color: var(--dim); }
.pr-ref b { font: 700 28px var(--mono); color: var(--gold); }
.pr-ref span { font-size: 14px; font-weight: 700; }
.pr-ref.up { border-color: var(--mint); } .pr-ref.up span { color: var(--mint); }
.pr-ref.dn { border-color: var(--red); } .pr-ref.dn span { color: var(--red); }

.pr-ticket { width: 150px; margin: 0 auto; }
.pr-ticket img { width: 100%; display: block; }

/* four boxes */
.pr-four { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; width: 100%; max-width: 330px; align-items: stretch; }
.pr-four > b { font-size: 13px; color: var(--dim); text-align: center; align-self: end; }
.pr-four > b.rw { align-self: center; text-align: right; }
.pr-four .c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 12px; font: 700 15px var(--sans); background: var(--surface); border: 2px solid var(--line); }
.pr-four .c small { font: 700 13px var(--mono); color: var(--dim); }
.pr-four .c.s { border-color: var(--mint); color: var(--mint); }
.pr-four .c.g { border-color: var(--violet-bright); color: var(--violet-bright); }
.pr-four .c.q1:not(.on), .pr-four .c.q2:not(.on) { border-color: var(--line); color: var(--faint); }

@media (max-height: 700px) {
  .pr-stage { gap: 6px; }
  .pr-offers .of { padding: 8px 8px 6px; }
  .pr-offers .of b { font-size: 19px; }
  .pr-eye { height: 120px; }
  .pr-ticket { width: 110px; }
}