/* Avoidant coping lesson. All rules scoped under .avc-* */

.avc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avc-hero { width: min(80%, 320px); }
.avc-hero img { width: 100%; display: block; }
.avc-note { font-size: 12px; color: var(--faint); }

/* the shield game */
.avc-rounds { display: flex; gap: 8px; justify-content: center; }
.avc-rounds span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avc-rounds i { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--line-strong); transition: all .2s; }
.avc-rounds small { font-size: 12px; font-weight: 700; color: var(--faint); }
.avc-rounds span.on i { border-color: var(--violet-bright); border-style: solid; }
.avc-rounds .avc-bz i { border: 2px solid var(--red); background: var(--red); }
.avc-rounds .avc-bl i { border: 2px solid var(--mint); background: var(--mint); }
.avc-rounds .avc-qt i { border: 2px solid var(--line-strong); background: var(--raised); }
.avc-rounds .avc-off small { color: var(--gold); }
.avc-rounds .avc-off i { box-shadow: 0 0 0 2px var(--gold); }
.avc-lamp { width: 96px; height: 96px; border-radius: 50%; background: #2A2F45; border: 4px solid #3A405C; display: flex; align-items: center; justify-content: center; transition: background .12s, box-shadow .12s; }
.avc-lamp i { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.avc-lamp.red { background: #E5484D; border-color: #FF8A8A; box-shadow: 0 0 34px rgba(229, 72, 77, .8); }
.avc-status { min-height: 24px; font: 800 18px var(--serif); color: var(--dim); letter-spacing: .02em; }
.avc-status.bad { color: #FF6B6B; }
.avc-status.ok { color: var(--mint); }
.avc-sc.avc-buzzed { animation: avcShake .4s; }
@keyframes avcShake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.avc-shield { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 104px; height: 96px; border-radius: 22px; background: var(--surface); border: 2px solid var(--violet-bright); box-shadow: 0 5px 0 var(--violet-deep); transition: transform .08s, box-shadow .08s, background .15s, opacity .2s; }
.avc-shield svg { width: 40px; height: 46px; }
.avc-shield path { fill: var(--violet-bright); }
.avc-shield span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.avc-shield:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--violet-deep); }
.avc-shield.up { background: rgba(63, 214, 154, .2); border-color: var(--mint); }
.avc-shield.up path { fill: var(--mint); }
.avc-shield[disabled] { opacity: .35; pointer-events: none; }

/* the loop */
.avc-loop { position: relative; width: 240px; height: 220px; margin-top: 4px; }
.avc-ring { position: absolute; left: 20px; top: 10px; width: 200px; height: 200px; }
.avc-ring circle { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 6 6; }
.avc-ring path { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.avc-n { position: absolute; z-index: 1; padding: 7px 11px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); font-size: 14px; font-weight: 700; color: var(--dim); transform: translate(-50%, -50%); white-space: nowrap; transition: color .25s, border-color .25s, background .25s; }
.avc-n.on { color: var(--text); border-color: var(--gold); background: #3A3220; }
.avc-n0 { left: 50%; top: 20px; }
.avc-n1 { left: 212px; top: 110px; }
.avc-n2 { left: 50%; top: 200px; }
.avc-n3 { left: 30px; top: 110px; }
.avc-loop em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 13px; font-weight: 700; color: #F07A7E; text-align: center; line-height: 1.25; }

/* the lab */
.avc-two { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.avc-grp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); }
.avc-grp b { font-size: 15px; }
.avc-grp small { font-size: 12px; color: var(--dim); }
.avc-ico { height: 48px; display: flex; align-items: center; }
.avc-btn { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 40px; border-radius: 10px; background: var(--mint); color: #06281B; font-size: 13px; font-weight: 800; text-transform: uppercase; box-shadow: 0 4px 0 #1E8A5E; }
.avc-btn.avc-x { background: var(--raised); color: var(--faint); box-shadow: none; text-decoration: line-through; }
.avc-gbar { width: 100%; height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.avc-gbar i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 999px; }

/* the drawer */
.avc-pile { position: relative; width: 220px; height: 130px; margin-top: 6px; }
.avc-env { position: absolute; left: calc(10px + var(--k) * 6px); bottom: calc(var(--k) * 7px); width: 140px; height: 50px; border-radius: 6px; background: #F3EBDD; border: 1px solid #C8BBA0; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); transform: rotate(calc((var(--k) - 4) * 1.4deg)); animation: avcIn .25s ease-out both; }
.avc-env::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 48%, #D9CBB0 49%, #D9CBB0 51%, transparent 52%), linear-gradient(20deg, transparent 48%, #D9CBB0 49%, #D9CBB0 51%, transparent 52%); border-radius: 6px; }
@keyframes avcIn { from { opacity: 0; } }
.avc-read { display: flex; gap: 10px; align-items: baseline; }
.avc-read b { font: 800 24px var(--serif); color: var(--gold); }
.avc-read span { font-size: 14px; font-weight: 700; color: var(--dim); }
.avc-cost { width: 100%; height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.avc-cost i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 999px; transition: width .3s; }

/* now and later */
.avc-time { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.avc-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.avc-col b { font-size: 14px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.avc-win { width: 100%; min-height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 16px; border: 2px dashed var(--line-strong); font: 700 20px var(--serif); color: var(--faint); transition: all .3s; }
.avc-win.on { border-style: solid; border-color: var(--gold); color: var(--text); background: rgba(252, 192, 80, .12); }

@media (max-height: 700px) {
  .avc-hero { width: min(62%, 240px); }
  .avc-lamp { width: 76px; height: 76px; }
  .avc-shield { height: 80px; }
  .avc-loop { transform: scale(.85); margin: -14px 0; }
  .avc-pile { height: 110px; }
}