/* AGI lesson. All rules scoped under .agi-* */
.agi-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* ---------- puzzle grids ---------- */
.agi-g { display: grid; grid-template-columns: repeat(5, 9px); grid-auto-rows: 9px; gap: 1px; padding: 2px; border-radius: 4px; background: #0B0F1C; }
.agi-c { display: block; border-radius: 1.5px; background: #222A40; }
.agi-dot { background: var(--gold); box-shadow: inset 0 0 0 2px #FFE3A6; }
.agi-line { background: #E39A2A; }
.agi-blk { background: var(--violet-bright); }
.agi-pair { display: flex; align-items: center; gap: 6px; }
.agi-arrow { font-size: 15px; font-weight: 700; color: var(--dim); }
.agi-exs { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.agi-exs .agi-g { grid-template-columns: repeat(5, 16px); grid-auto-rows: 16px; gap: 2px; padding: 3px; border-radius: 6px; }
.agi-exs .agi-c { border-radius: 3px; }
.agi-exs .agi-arrow { font-size: 22px; margin: 0 8px; }
.agi-strip { display: flex; justify-content: center; gap: 12px; }
.agi-strip .agi-arrow { font-size: 12px; }
.agi-strip .agi-pair { gap: 3px; }
.agi-big { align-self: center; grid-template-columns: repeat(5, 44px); grid-auto-rows: 44px; gap: 3px; padding: 5px; border-radius: 12px; }
.agi-big .agi-c { border: none; padding: 0; border-radius: 7px; cursor: pointer; transition: background .15s, transform .1s; }
.agi-big .agi-c:active { transform: scale(.92); }
.agi-big .agi-dot { box-shadow: inset 0 0 0 4px #FFE3A6; cursor: default; }
.agi-locked .agi-c { cursor: default; }
.agi-big .agi-need { box-shadow: inset 0 0 0 3px var(--mint); background: rgba(63,214,154,.18); }
.agi-big .agi-hit { box-shadow: inset 0 0 0 3px var(--mint); }
.agi-big .agi-stray { opacity: .35; box-shadow: inset 0 0 0 3px var(--red); }

/* ---------- chips ---------- */
.agi-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 6px; }
.agi-chips i { font-style: normal; font-size: 15px; font-weight: 700; padding: 8px 14px; border-radius: 99px; background: rgba(169,155,255,.14); border: 1.5px solid var(--violet-bright); color: var(--text); animation: agiPop .35s ease-out both; }
.agi-src { flex-basis: 100%; text-align: center; margin-top: 6px; font-size: 13px; color: var(--dim); }
@keyframes agiPop { from { opacity: 0; transform: scale(.7); } }

/* ---------- the ARC posts ---------- */
.agi-posts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; padding: 14px 10px 30px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.agi-post { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .35; transition: opacity .3s; }
.agi-post.on { opacity: 1; }
.agi-post span { font-size: 14px; font-weight: 800; color: var(--text); }
.agi-bar { position: relative; width: 46px; height: 150px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); overflow: visible; }
.agi-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 7px; background: var(--violet); transition: height .7s cubic-bezier(.2,.9,.3,1); }
.agi-bar b { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; color: var(--gold); white-space: nowrap; }
.agi-cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; color: var(--dim); }
.agi-posts.agi-duo { grid-template-columns: repeat(2, 1fr); padding-top: 26px; }
.agi-p1 .agi-bar i { background: var(--gold); }
@media (max-height: 700px) { .agi-bar { height: 120px; } }


/* ---------- definitions ---------- */
.agi-defs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.agi-def { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); transition: opacity .3s, border-color .3s; }
.agi-def b { font-size: 16px; color: var(--gold); line-height: 1.2; }
.agi-def small { font-size: 13px; color: var(--dim); }
.agi-picked .agi-def { opacity: .6; }
.agi-picked .agi-def.agi-mine { opacity: 1; border-color: var(--gold); }