/* AI alignment lesson. All rules scoped under .aln-* */
.aln-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.aln-note { font-size: 13px; color: var(--dim); text-align: center; }
.aln-score { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--dim); }
.aln-score b { font-family: var(--mono); color: var(--gold); font-weight: 600; }
.aln-rule { color: var(--text); }
.aln-rule b { color: var(--text); font-family: var(--sans); font-weight: 700; }
.aln-ruled .aln-score { animation: alnRule .5s ease-out; border-color: var(--gold); }
@keyframes alnRule { from { transform: scale(.96); background: rgba(252,192,80,.18); } }

/* ---------- the race ---------- */
.aln-race svg, .aln-room svg { display: block; width: 100%; max-width: 360px; margin: 6px auto 0; }
.aln-race { display: flex; flex-direction: column; }
.aln-land { fill: #1F3A2C; }
.aln-water { fill: #2D6FA8; }
.aln-isle { fill: #2B5A3A; }
.aln-lag { stroke: #2D6FA8; }
.aln-fin rect { fill: #fff; }
.aln-fin .aln-ck { fill: #111; }
.aln-lb { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: rgba(255,255,255,.82); }
.aln-t .aln-ti circle { fill: #F2F2F2; stroke: #D85555; stroke-width: 3; }
.aln-t .aln-ti .aln-tc { fill: #D85555; stroke: none; }
.aln-t .aln-ti { transition: transform .25s ease-out, opacity .25s; transform-box: fill-box; transform-origin: center; }
.aln-live { cursor: pointer; }
.aln-hit { fill: transparent; }
.aln-gone .aln-ti { transform: scale(.2); opacity: 0; }
.aln-back .aln-ti { animation: alnBack .35s ease-out; }
@keyframes alnBack { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.25); } }
.aln-pop { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--gold); animation: alnPop .9s ease-out forwards; }
@keyframes alnPop { to { transform: translateY(-14px); opacity: 0; } }
.aln-hull { fill: #F5F1EA; stroke: #1B1A18; stroke-width: 1; }
.aln-cab { fill: #D85555; }
.aln-fire { fill: #FB9679; opacity: 0; }
.aln-burn .aln-fire { opacity: 1; animation: alnFire .25s ease-in-out 12 alternate; transform-box: fill-box; transform-origin: right center; }
@keyframes alnFire { to { transform: scaleX(1.4); fill: #FCC050; } }
.aln-done .aln-score span:last-child b { color: var(--red); }

/* ---------- the gap ---------- */
.aln-gap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 18px 0; }
.aln-gc { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-radius: 16px; text-align: center; }
.aln-gc small { font-size: 13px; color: var(--dim); }
.aln-gc b { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.aln-want { background: rgba(63,214,154,.12); border: 1.5px solid var(--mint); }
.aln-want b { color: var(--mint); }
.aln-got { background: rgba(252,192,80,.12); border: 1.5px solid var(--gold); }
.aln-got b { color: var(--gold); }
.aln-gapl { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--red); animation: alnPulse .6s ease-out .3s both; }
.aln-gapl b { font-size: 34px; line-height: 1; }
.aln-gapl span { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
@keyframes alnPulse { from { transform: scale(.4); opacity: 0; } }

/* ---------- the room ---------- */
.aln-room { display: flex; flex-direction: column; }
.aln-floor { fill: #3A3048; }
.aln-wall { fill: #2A2238; }
.aln-mess path { fill: #7A5A3A; }
.aln-mess circle { fill: #5A4028; }
.aln-under { opacity: .25; }
.aln-rug rect { fill: #8E3B4F; }
.aln-rug .aln-rugi { fill: none; stroke: #E3A84C; stroke-width: 2; stroke-dasharray: 4 3; }
.aln-table rect { fill: #6B5236; }
.aln-vase path { fill: #5FA8D3; }
.aln-vase .aln-fl { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.aln-bin path, .aln-bin rect { fill: #7D8597; }
.aln-trash circle { fill: #C9B48A; }
.aln-body { fill: #CFD6E6; }
.aln-head { fill: #E8EDF7; }
.aln-eye { fill: #1B2236; }
.aln-pupil { fill: #7FD4FF; }
.aln-lid { fill: #9AA3B8; opacity: 0; transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: opacity .2s, transform .35s ease-in; }
.aln-shut .aln-lid { opacity: 1; transform: scale(1, -2) translateY(-50%); }
.aln-shut .aln-pupil { opacity: 0; transition: opacity .2s .2s; }
.aln-wh { fill: #4A5168; }
.aln-item { cursor: pointer; }
.aln-item .aln-hit { fill: rgba(252,192,80,.10); stroke: rgba(252,192,80,.55); stroke-width: 1.5; stroke-dasharray: 3 3; transition: opacity .3s; }
.aln-il { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--gold); }
.aln-off { opacity: .35; }
.aln-picked .aln-hit { fill: rgba(252,192,80,.25); stroke: var(--gold); stroke-dasharray: none; stroke-width: 2.5; }
.aln-item:not(.aln-picked) .aln-hit { pointer-events: all; }

/* ---------- the chat ---------- */
.aln-chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.aln-me { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--violet); color: #fff; font-size: 15px; line-height: 1.3; }
.aln-ai { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.aln-ans { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); border: 1px solid var(--line); font-size: 15px; line-height: 1.3; color: var(--text); }
.aln-th { display: flex; gap: 6px; }
.aln-th i { display: grid; place-items: center; width: 32px; height: 28px; border-radius: 8px; border: 1px solid var(--line); }
.aln-th svg { width: 16px; height: 16px; fill: var(--dim); }
.aln-th .aln-dn svg { transform: rotate(180deg); }
.aln-th .aln-up.on { background: rgba(63,214,154,.18); border-color: var(--mint); }
.aln-th .aln-up.on svg { fill: var(--mint); }

/* ---------- the notes ---------- */
.aln-notes { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #10162A; border: 1px solid var(--line-strong); font-family: var(--mono); }
.aln-notes small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.aln-notes p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--text); }
.aln-flag .aln-bad { color: var(--red); background: rgba(216,85,85,.14); border-radius: 4px; padding: 0 4px; }
.aln-clean .aln-ok { color: var(--mint); }