/* In-group and out-group lesson. All rules scoped under .igo-* */
.igo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* the paintings */
.igo-pics { flex: 1; flex-direction: row; justify-content: center; align-items: center; gap: 14px; padding: 0 12px; }
.igo-pic { position: relative; flex: 1; max-width: 170px; height: 220px; padding: 8px; border-radius: 8px; background: #2a2118; border: 3px solid #8a6a3a; box-shadow: 0 12px 26px rgba(0,0,0,.4); cursor: pointer; transition: opacity .4s, scale .4s, border-color .3s; animation: igoInL .7s cubic-bezier(.2,.8,.2,1) both; }
.igo-kandinsky { animation-name: igoInR; }
.igo-pic img { display: block; width: 100%; height: 100%; object-fit: contain; background: #1a140e; }
@keyframes igoInL { from { opacity: 0; translate: -60px 0; rotate: -6deg; } }
@keyframes igoInR { from { opacity: 0; translate: 60px 0; rotate: 6deg; } }
.igo-tag { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; padding: 4px 10px; border-radius: 10px; background: var(--gold); color: #1d1606; font: 800 12.5px var(--sans); white-space: nowrap; opacity: 0; scale: .6; transition: opacity .3s, scale .3s cubic-bezier(.2,.8,.2,1.5); }
.igo-pic.mine { border-color: var(--gold); scale: 1.04; }
.igo-pic.mine .igo-tag { opacity: 1; scale: 1; }
.igo-pic.theirs { opacity: .45; scale: .94; }

/* the split */
.igo-split { width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 12px; }
.igo-boys { display: flex; justify-content: space-around; align-items: flex-end; }
.igo-boy { display: flex; flex-direction: column; align-items: center; width: 140px; }
.igo-stack { display: flex; flex-direction: column-reverse; align-items: center; height: 116px; }
.igo-coin { display: block; width: 44px; height: 9px; margin-top: -1px; border-radius: 50%; background: linear-gradient(#ffe39a, #e2a92e); border: 1px solid #b07a14; }
.igo-theirs .igo-coin { background: linear-gradient(#cfc6ff, #8f7bf0); border-color: #5b47c4; }
.igo-pts { margin-top: 4px; font: 800 17px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.igo-boy span { font: 600 12.5px/1.25 var(--sans); color: var(--dim); text-align: center; }
.igo-ours .igo-pts { color: var(--gold); }
.igo-chart { display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 2px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); }
.igo-rls, .igo-cs { display: flex; flex-direction: column; gap: 2px; }
.igo-rls { justify-content: space-around; }
.igo-cs { padding: 0; min-height: 44px; border-radius: 6px; }
.igo-cs:disabled { cursor: default; }
.igo-chart .igo-rl { font: 700 12px var(--sans); color: var(--dim); }
.igo-chart i { font: 700 14px var(--sans); font-style: normal; color: var(--dim); text-align: center; padding: 3px 0; border-radius: 6px; font-variant-numeric: tabular-nums; }
.igo-chart i.on { color: #1d1606; background: var(--gold); }
.igo-arrow { align-self: flex-start; margin: -4px 0 -6px 12px; font: 800 14px var(--sans); color: var(--gold); opacity: 0; translate: 20px 0; transition: opacity .4s, translate .5s; }
.igo-arrow.on { opacity: 1; translate: 0 0; }

/* named */
.igo-art { display: block; width: 100%; max-width: 330px; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }

/* the runners */
.igo-runs { width: 100%; }
.igo-runs, .igo-runs .choices.igo-three { display: flex; flex-direction: row; justify-content: center; gap: 8px; width: 100%; }
.igo-runs .choice { flex: 1; max-width: 118px; padding: 6px 4px 8px; min-height: 0; justify-content: center; }
.igo-run { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; max-width: 118px; }
.igo-run svg { width: 96px; height: 84px; }
.igo-run b { font: 800 13.5px var(--sans); color: var(--text); white-space: nowrap; }
.igo-hd { fill: #e8b98f; }
.igo-skin { fill: none; stroke: #e8b98f; stroke-linecap: round; }
.igo-limb { stroke-width: 7; }
.igo-arm { stroke-width: 6; }
.igo-shorts { fill: #2b2f3a; }
.igo-shoe { fill: #f2f2f2; }
.igo-ow { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.igo-sh { fill: #d1202f; }
.igo-plain .igo-sh { fill: #9aa0ab; }
.igo-col { fill: none; stroke: none; stroke-width: 3; stroke-linecap: round; }
.igo-united .igo-col { stroke: #ffffff; }
.igo-united .igo-shorts { fill: #0b0b0d; }
.igo-liverpool .igo-shorts { fill: #b3141f; }
.igo-plain .igo-shorts { fill: #5d6270; }
.igo-run.helped b::after { content: ' · helped'; color: var(--mint); }

@media (max-height: 700px) {
  .igo-pic { height: 180px; }
  .igo-stack { height: 96px; }
  .igo-coin { height: 8px; }
  .igo-art { max-width: 260px; }
  .igo-run svg { width: 80px; height: 70px; }
}