/* ==========================================================
   CYBERWEARE — overlay abilità
   (contenitore/card/testata: vedi components.css)
   ================================================---------- */

.cy-section { font-size: 0.8rem; letter-spacing: 2px; color: var(--pericolo); margin-top: 4px; }
.cy-empty { opacity: 0.55; font-size: 0.8rem; font-style: italic; padding: 8px; }

.cy-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cy-ab {
    display: flex; align-items: center; gap: var(--sp-3);
    background: rgba(112, 56, 248, 0.12); border: 1px solid var(--accent-dim);
    padding: 10px 12px;
}
.cy-ab.bloccata { opacity: 0.45; }
.cy-ab.passiva { border-color: rgba(0, 200, 255, 0.4); }
.cy-ab.pet-on { border-color: var(--pet); box-shadow: 0 0 10px rgba(255, 92, 240, 0.25); }
.cy-ico { font-size: 1.5rem; }
.cy-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cy-name { font-size: 0.9rem; letter-spacing: 0.5px; }
.cy-name small { opacity: 0.6; font-size: 0.66rem; text-transform: uppercase; }
.cy-desc { font-size: 0.72rem; color: rgba(224, 208, 255, 0.75); }
.cy-meta { font-size: 0.7rem; color: var(--info); margin-top: 2px; }

.cy-badge {
    font-size: 0.66rem; letter-spacing: 1px; padding: 5px 8px;
    border: 1px solid var(--accent-2); color: var(--accent-2);
}
.cy-toggle, .cy-pet, .cy-titolo {
    font-family: inherit; font-size: 0.72rem; letter-spacing: 1px;
    padding: 7px 12px; cursor: pointer; min-width: 84px;
    transition: background 0.15s ease;
}
.cy-toggle:hover, .cy-pet:hover, .cy-titolo:hover { filter: brightness(1.3); }
.cy-toggle.on { background: rgba(0, 255, 130, 0.15); border: 1px solid var(--successo); color: var(--successo); }
.cy-toggle.off { background: rgba(255, 0, 85, 0.12); border: 1px solid var(--pericolo); color: var(--pericolo); }
.cy-pet.on, .cy-titolo.on { background: rgba(255, 92, 240, 0.2); border: 1px solid var(--pet); color: var(--pet); }
.cy-pet.off, .cy-titolo.off { background: rgba(112, 56, 248, 0.15); border: 1px solid var(--accent); color: var(--testo); }