/* Proximity principle lesson. All rules scoped under .prx-* */
.prx-sc { width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.prx-note { font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

/* the building */
.prx-bld { position: relative; width: 100%; aspect-ratio: 316 / 180; }
.prx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prx-roof { fill: #5A4A8A; }
.prx-wall { fill: #2A2342; stroke: #4A3E70; stroke-width: 1.5; }
.prx-walk { fill: #8C7A5B; }
.prx-ground { fill: #4A3E70; }
.prx-stairs { fill: none; stroke: #8C7A5B; stroke-width: 9; stroke-linecap: round; }
.prx-steps { fill: none; stroke: #C9A15A; stroke-width: 9; stroke-dasharray: 2 5; }
.prx-door { fill: #3B3160; stroke: #7B6BA8; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.prx-knob { fill: #C9A15A; }
.prx-num { font: 800 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.prx-cnt { font: 800 14px var(--sans); fill: var(--gold); text-anchor: middle; }
.prx-hit { fill: transparent; cursor: pointer; }
.prx-mine .prx-door { fill: #4B3A86; stroke: var(--violet-bright); stroke-width: 2.5; }
.prx-mine .prx-num { fill: var(--text); }
.prx-picked .prx-door { stroke: var(--gold); stroke-width: 2.5; }
.prx-hi .prx-door { fill: #6A5418; stroke: var(--gold); }
.prx-thread { fill: none; stroke: var(--gold); stroke-linecap: round; opacity: .5; stroke-width: 2; }
.prx-pal { position: absolute; height: 21%; width: auto; translate: -50% -100%; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.prx-flip { transform: scaleX(-1); }
.prx-tally { text-align: center; font: 700 13px var(--sans); color: var(--dim); margin-top: 4px; }
.prx-tally b { color: var(--violet-bright); }
.prx-floor .prx-updoor { opacity: .12; }
.prx-floor .prx-steps, .prx-floor .prx-stairs, .prx-floor .prx-walk { opacity: .2; }

/* the academy */
.prx-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; }
.prx-cd { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 2px solid transparent; transition: border-color .4s, background .4s; }
.prx-cd img { width: 100%; max-width: 70px; height: auto; }
.prx-cd span { font: 700 12px var(--sans); color: var(--dim); }
.prx-pair .prx-cd:nth-child(3), .prx-pair .prx-cd:nth-child(4) { border-color: var(--gold); background: rgba(252, 192, 80, .08); }
.prx-pair .prx-cd:nth-child(3) span, .prx-pair .prx-cd:nth-child(4) span { color: var(--gold); }

/* Priya */
.prx-priya { display: flex; align-items: center; gap: 12px; }
.prx-priya img { width: 72px; height: 72px; flex: none; object-fit: cover; object-position: top; border-radius: 50%; background: #2A2140; border: 2px solid var(--violet); }
.prx-priya b { display: block; font: 700 20px var(--serif); }
.prx-priya span { font: 600 14.5px/1.35 var(--sans); color: var(--dim); }
.prx-plans { display: flex; flex-direction: column; gap: 8px; }
.prx-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, opacity .3s; }
.prx-plan:disabled { cursor: default; }
.prx-plan b { font: 700 16px var(--sans); }
.prx-plan span { font: 600 13px var(--sans); color: var(--faint); }
.prx-plan.prx-yes { border-color: var(--gold); }
.prx-plan.prx-no { opacity: .7; }
.prx-plan.prx-miss { border-color: var(--red); }