/* Social proof lesson. All rules scoped under .sp-* */

.sp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sp-sc > svg { display: block; width: 100%; height: auto; max-height: 44vh; overflow: visible; }
.sp-note { font-size: 12px; color: var(--faint); text-align: center; }


/* the street */
.sp-truck .sp-tb { stroke-width: 2; }
.sp-red .sp-tb, .sp-red .sp-cab { fill: #C8453E; stroke: #E8716A; }
.sp-blue .sp-tb, .sp-blue .sp-cab { fill: #2F6BD8; stroke: #6C9BF0; }
.sp-truck .sp-cab { stroke-width: 2; }
.sp-truck .sp-win { fill: #1B1E33; }
.sp-truck .sp-awn { fill: #F3EBDD; }
.sp-truck .sp-wh { fill: #22243A; stroke: #8A8FB0; stroke-width: 2; }
.sp-tt { font: 800 13px var(--sans, system-ui); fill: #F3EBDD; text-anchor: middle; letter-spacing: 1px; }
.sp-best { opacity: 0; transition: opacity .4s; }
.sp-best rect { fill: var(--gold); }
.sp-best text { font: 800 12px var(--sans, system-ui); fill: #2A1B00; text-anchor: middle; }
.sp-truth .sp-best { opacity: 1; }
.sp-truth .sp-blue .sp-tb { filter: drop-shadow(0 0 8px rgba(252, 192, 80, .6)); }

.sp-p { transition: opacity .4s; }
.sp-p .sp-hd, .sp-p .sp-bd { fill: #C9C3D8; }
.sp-p.sp-you .sp-hd, .sp-p.sp-you .sp-bd { fill: var(--gold); }
.sp-p.sp-key .sp-tip rect { stroke: var(--gold); stroke-width: 1.6; }
.sp-p.sp-key .sp-hd, .sp-p.sp-key .sp-bd { fill: #F3E3B0; }
.sp-p.sp-gone { opacity: 0; }
.sp-tip { transition: opacity .3s; }
.sp-tip text { font: 800 8.2px var(--sans, system-ui); fill: #fff; text-anchor: middle; }
.sp-tR rect { fill: #C8453E; }
.sp-tB rect { fill: #2F6BD8; }
.sp-p.sp-hide .sp-tip { opacity: 0; }

/* the two kinds of crowd */
.sp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.sp-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.sp-mode b { font-size: 16px; line-height: 1.2; }
.sp-mode span { font-size: 13px; color: var(--dim); }
.sp-mode.sp-dim { border-style: dashed; }
.sp-row { display: flex; gap: 6px; margin-bottom: 8px; }
.sp-row i { width: 18px; height: 30px; border-radius: 9px 9px 4px 4px; }
.sp-own { background: #C9C3D8; box-shadow: inset 0 -10px 0 var(--gold); }
.sp-cp { background: rgba(201, 195, 216, .25); border: 1.5px dashed #C9C3D8; }

/* the music worlds */
.sp-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.sp-world { padding: 8px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sp-world > b { font-size: 13px; color: var(--dim); }
.sp-bar { display: flex; align-items: center; gap: 6px; }
.sp-bar span { width: 14px; font-size: 13px; font-weight: 800; color: var(--dim); }
.sp-bar i { flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.sp-bar em { display: block; height: 100%; width: 0; background: var(--violet-bright); border-radius: 6px; transition: width .08s linear; }
.sp-bar.sp-top em { background: var(--gold); }
.sp-bar.sp-top span { color: var(--gold); }

/* the monte table */
.sp-dealer circle, .sp-dealer path { fill: #6B6780; }
.sp-box { fill: #8A6A48; stroke: #B08A60; stroke-width: 2; }
.sp-back { fill: #3A3570; stroke: var(--violet-bright); stroke-width: 1.5; }
.sp-face { opacity: 0; transition: opacity .25s; }
.sp-face rect { fill: #F3EBDD; stroke: #C9C3B8; }
.sp-face text { font: 800 22px var(--serif); fill: #C8453E; text-anchor: middle; }
.sp-card.sp-up .sp-face { opacity: 1; }
.sp-shill .sp-hd2, .sp-shill .sp-bd2 { fill: #C9C3D8; }
.sp-shill .sp-cap { fill: #2F6BD8; }
.sp-crowd circle, .sp-crowd path { fill: #4A4760; }
.sp-tag { opacity: 0; transition: opacity .4s; }
.sp-tag rect { fill: var(--gold); }
.sp-tag text { font: 800 12px var(--sans, system-ui); fill: #2A1B00; text-anchor: middle; }
.sp-exposed .sp-tag { opacity: 1; }
.sp-exposed .sp-shill .sp-hd2, .sp-exposed .sp-shill .sp-bd2 { fill: var(--gold); }
.sp-exposed .sp-cash { opacity: 0; }
.sp-cash { font: 800 16px var(--sans, system-ui); fill: #4CD08A; text-anchor: middle; opacity: 0; }
.sp-cash.on { animation: spCash .9s ease-out forwards; }
@keyframes spCash { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; transform: none; } 100% { opacity: 1; } }

/* the joke */
.sp-joke { width: 100%; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-strong); }
.sp-joke p { margin: 0 0 8px; font: 600 19px/1.3 var(--serif); color: var(--text); }
.sp-joke .sp-pl { color: var(--gold); }
.sp-laugh { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.sp-laugh i { width: 5px; border-radius: 3px; background: var(--violet-bright); }
.sp-laugh i:nth-child(1) { height: 10px; } .sp-laugh i:nth-child(2) { height: 22px; } .sp-laugh i:nth-child(3) { height: 16px; }
.sp-laugh i:nth-child(4) { height: 28px; } .sp-laugh i:nth-child(5) { height: 18px; } .sp-laugh i:nth-child(6) { height: 24px; } .sp-laugh i:nth-child(7) { height: 12px; }
.sp-laugh span { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--dim); }

/* spot it */
.sp-claim { width: 100%; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-strong); }
.sp-claim p { margin: 0; font: 600 20px/1.35 var(--serif); color: var(--text); }

@media (max-height: 700px) {
  .sp-sc > svg { max-height: 38vh; }
  .sp-claim p, .sp-joke p { font-size: 18px; }
  .sp-mode { padding: 12px 8px; }
  .sp-worlds { gap: 8px; }
  .sp-world { padding: 5px 8px 6px; gap: 1px; }
  .sp-world > b, .sp-bar span { font-size: 12px; line-height: 14px; }
  .sp-bar i { height: 8px; }
}