/* Codependency lesson. All rules scoped under .cdy-* */

.cdy-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; --alex: #FCC050; --sam: #7CC0EE; }
.cdy-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the game */
.cdy-game { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cdy-ring { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface); }
.cdy-ring b { font-size: 12px; color: var(--alex); white-space: nowrap; }
.cdy-slices { display: flex; flex: 1; gap: 4px; }
.cdy-slices span { flex: 1; padding: 3px 0; border-radius: 6px; background: rgba(252, 192, 80, .2); color: var(--text); font-size: 12px; font-weight: 700; text-align: center; transition: background .4s, color .4s, opacity .4s; }
.cdy-slices span.cdy-lost { background: transparent; color: var(--faint); text-decoration: line-through; opacity: .6; }
.cdy-field { position: relative; height: 250px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(123, 92, 253, .08), rgba(124, 192, 238, .12)); touch-action: none; }
.cdy-drop { position: absolute; top: 0; width: 30%; min-height: 44px; padding: 6px 4px; border: 0; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 2px #D85555 inset, 0 4px 10px rgba(0, 0, 0, .35); color: var(--text); font: 800 14px/1.15 var(--sans); cursor: pointer; will-change: transform; }
.cdy-drop.cdy-caught { background: var(--alex); color: #1A1206; box-shadow: 0 0 0 2px var(--alex) inset; transition: opacity .35s, background .15s; opacity: 0; }
.cdy-drop.cdy-landed { opacity: 0; transition: opacity .3s; }
.cdy-sam { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -2px; }
.cdy-sam i { width: 36px; height: 36px; border-radius: 50%; background: var(--sam); color: #06121A; display: flex; align-items: center; justify-content: center; font: 800 16px var(--sans); font-style: normal; }
.cdy-sam span { font-weight: 800; color: var(--sam); }
.cdy-sam.cdy-hit i { animation: cdy-hit .35s; }
@keyframes cdy-hit { 40% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(216, 85, 85, .5); } }

/* the ledger */
.cdy-count { text-align: center; font-size: 15px; color: var(--dim); }
.cdy-count b { color: var(--alex); font-size: 20px; }
.cdy-ledger { display: flex; gap: 8px; }
.cdy-col { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; background: var(--surface); }
.cdy-col > b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.cdy-alex > b { color: var(--alex); }
.cdy-samc > b { color: var(--sam); }
.cdy-col p { margin: 0; padding: 3px 7px; border-radius: 8px; font: 600 13px/1.2 var(--sans); }
.cdy-alex p { background: rgba(252, 192, 80, .16); }
.cdy-samc p { background: rgba(124, 192, 238, .16); }
.cdy-col p.cdy-none { background: none; color: var(--faint); }

/* names and cards */
.cdy-names { display: flex; flex-direction: column; gap: 10px; }
.cdy-names div { padding: 14px 16px; border-radius: 16px; background: var(--surface); border-left: 6px solid var(--alex); }
.cdy-names div.cdy-deb, .cdy-names div + div { border-left-color: var(--violet-bright); }
.cdy-names b { font-size: 17px; color: var(--alex); }
.cdy-names div + div b { color: var(--violet-bright); }
.cdy-names p { margin: 4px 0 0; font: 600 16px/1.3 var(--serif); }
.cdy-opts { display: flex; flex-direction: column; gap: 8px; }
.cdy-opts > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.cdy-opts > div > b { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--raised); color: var(--gold); font-size: 14px; }
.cdy-opts p { flex: 1; margin: 0; font: 600 15px/1.3 var(--serif); }

@media (max-height: 700px) {
  .cdy-field { height: 215px; }
  .cdy-opts > div { padding: 8px 10px; }
  .cdy-opts p { font-size: 14px; }
  .cdy-names div { padding: 10px 14px; }
}
.cdy-pic { display: flex; justify-content: center; }
.cdy-pic img { width: 62%; max-height: 150px; object-fit: contain; }
@media (max-height: 700px) { .cdy-pic img { max-height: 110px; } }