/* Loneliness lesson. All rules scoped under .lon-* */
.lon-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.lon-pair { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lon-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 2px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
.lon-card b { font: 700 17px var(--sans); color: var(--gold); }
.lon-card > span { font: 500 14px var(--sans); color: var(--text); line-height: 1.3; margin-top: 2px; }
.lon-gb { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s, max-height .5s; }
.lon-open .lon-gb { opacity: 1; max-height: 20px; }
.lon-gb i { font: 600 12px var(--sans); font-style: normal; color: var(--dim); }
.lon-tr { height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.lon-tr s { display: block; height: 100%; width: 0; background: var(--violet-bright); border-radius: 6px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.lon-tr s.lon-want { background: var(--gold); }
.lon-open .lon-tr s { width: var(--w); }
.lon-note { grid-column: 1 / -1; order: -1; text-align: center; font: 500 12px var(--sans); color: var(--dim); opacity: 0; transition: opacity .5s; }
.lon-open .lon-note { opacity: 1; }

.lon-grid { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lon-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 4px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color .4s; }
.lon-tile img { width: 100%; height: 64px; object-fit: contain; display: block; }
.lon-tile span { font: 600 13px var(--sans); color: var(--text); }
.lon-gaze { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.lon-gaze i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(252,192,80,.8); opacity: 0; transition: opacity .2s; }
.lon-gaze i.on { opacity: .85; }
.lon-hot .lon-tile[data-k="left"] { border-color: var(--gold); }

.lon-loop { position: relative; width: 100%; max-width: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; }
.lon-start { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 6px; border-radius: 14px; border: 2px solid var(--violet-bright); background: rgba(123,92,253,.18); font: 800 15px var(--sans); color: var(--text); text-align: center; }
.lon-loop .slot .v { font-size: 14px; }
.lon-arrows i { position: absolute; font: 700 22px var(--sans); font-style: normal; color: var(--violet-bright); line-height: 1; }
.lon-a1 { top: 20px; left: 50%; transform: translateX(-50%); }
.lon-a3 { bottom: 20px; left: 50%; transform: translateX(-50%); }
.lon-a2 { top: 50%; right: 22%; transform: translateY(-50%); }
.lon-a4 { top: 50%; left: 22%; transform: translateY(-50%); }
.lon-spin .lon-arrows i { color: var(--gold); }
.lon-loop .slot.lon-cut { border-style: dashed; border-color: var(--gold); background: rgba(252,192,80,.12); }
.lon-loop .slot.lon-cut .v { color: var(--gold); text-decoration: line-through; }
.lon-broken .lon-arrows i { color: var(--faint); }
.lon-bank .word { font-size: 14px; }
.lon-loop .slot .n { font-size: 12px; }