/* Self-serving bias lesson. All rules scoped under .sb-* */

.sb-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* the dial */
.sb-dial { width: 100%; max-width: 300px; height: auto; display: block; overflow: visible; }
.sb-track { fill: none; stroke: var(--raised); stroke-width: 22; stroke-linecap: round; }
.sb-zone { fill: none; stroke: var(--gold); stroke-width: 22; }
.sb-needle line { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.sb-needle circle { fill: var(--violet-bright); stroke: var(--text); stroke-width: 3; }
.sb-score { display: flex; gap: 10px; }
.sb-score i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); }
.sb-score i.sb-w { background: var(--mint); border-color: var(--mint); }
.sb-score i.sb-l { background: var(--red); border-color: var(--red); }
.sb-res { font-size: 18px; font-weight: 800; min-height: 24px; }
.sb-res.sb-win { color: var(--mint); }
.sb-res.sb-miss { color: #F07A7E; }

/* the tally */
.sb-tally { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.sb-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.sb-row span { font-size: 15px; font-weight: 600; }
.sb-row b { font: 800 20px var(--mono); color: var(--gold); white-space: nowrap; }

/* two pans */
.sb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.sb-pan { display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; min-height: 120px; justify-content: center; border-radius: 18px; background: var(--surface); text-align: center; }
.sb-pan small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.sb-pan b { font: 700 18px/1.25 var(--serif); }
.sb-pan-w { border: 2px solid var(--mint); }
.sb-pan-l { border: 2px solid var(--red); }

/* pictures */
.sb-pic { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sb-pic img { height: 150px; max-width: 100%; object-fit: contain; display: block; }
.sb-names { display: flex; justify-content: space-around; width: 100%; max-width: 300px; font-size: 15px; font-weight: 700; }
.choices.sb-two-opts { display: grid; grid-template-columns: 1fr 1fr; }


.sb-card { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 320px; padding: 18px; border-radius: 20px; background: var(--surface); border: 2px solid var(--red); }
.sb-card small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.sb-card b { font-size: 20px; color: #F07A7E; }
.sb-card span { font: italic 17px/1.3 var(--serif); }
.sb-card-w { border-color: var(--mint); }
.sb-card-w b { color: var(--mint); }
@media (max-height: 700px) { .sb-pic img { height: 108px; } .sb-dial { max-width: 250px; } .sb-card { padding: 12px 16px; } }