/* ==========================================================
   COMPONENTS — componenti condivisi del design system.
   Le regole COMUNI di overlay/card/testate/liste vivono QUI
   una volta sola; i CSS di vista tengono solo le differenze.
   ================================================---------- */

/* --- Contenitori overlay a schermo intero --- */
#view-combat, #view-equip, #view-missions, #view-cyberwear, #view-boss, #view-world, #view-social, #view-dungeon {
    position: fixed;
    inset: 0;
    display: none;              /* mostrati via JS (flex) */
    justify-content: center;
    align-items: center;
    padding: var(--sp-4);
    background: var(--velo);
    z-index: 90;
}
#view-combat { z-index: 100; }  /* il combattimento sta sopra tutto */
#view-world  { z-index: 85; padding: var(--sp-3); background: rgba(2, 0, 8, 0.95); }
#view-boss   { background: rgba(2, 0, 8, 0.94); }

/* --- BORDO "MAGIC CARD": gradiente che ruota attorno ai riquadri ---
   Per i rettangoli deve ruotare il GRADIENTE (non l'elemento):
   @property rende animabile l'angolo del conic-gradient. */
@property --ang {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* --- Card/pannello con angoli tagliati e bordo animato --- */
.cbt-card, .eq-card, .ms-card, .cy-card, .bs-card, .wd-card,
.hub-card, .hud-navbar {
    position: relative;
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}
/* strato 1 (::before): il gradiente rotante, visibile solo sul bordo */
.cbt-card::before, .eq-card::before, .ms-card::before, .cy-card::before,
.bs-card::before, .wd-card::before, .hub-card::before, .hud-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: conic-gradient(from var(--ang),
        #5ddcff, #3c67e3 30%, #4e00c2 55%, #ff0055 76%, #5ddcff 100%);
    animation: giraBordo 7s linear infinite;
}
/* strato 2 (::after): la copertura interna (lascia 2px di bordo) */
.cbt-card::after, .eq-card::after, .ms-card::after, .cy-card::after,
.bs-card::after, .wd-card::after, .hub-card::after, .hud-navbar::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 0;
    background: var(--surface);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
/* il contenuto sta sopra i due strati */
.cbt-card > *, .eq-card > *, .ms-card > *, .cy-card > *,
.bs-card > *, .wd-card > *, .hub-card > *, .hud-navbar > * {
    position: relative;
    z-index: 1;
}
@keyframes giraBordo { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .cbt-card::before, .eq-card::before, .ms-card::before, .cy-card::before,
    .bs-card::before, .wd-card::before, .hub-card::before, .hud-navbar::before {
        animation: none;
    }
}

.cbt-card, .eq-card, .ms-card, .cy-card, .bs-card, .wd-card {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (min-width: 900px) {
    .cbt-card, .eq-card, .ms-card, .cy-card, .bs-card, .wd-card { max-width: 640px; }
}

/* --- Testata card: titolo + chiudi --- */
.eq-head, .ms-head, .cy-head, .bs-head, .wd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.eq-title, .ms-title, .cy-title, .bs-title, .wd-title {
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--testo-tenue);
    text-shadow: 0 0 10px var(--accent);
}
.eq-close, .ms-close, .cy-close, .bs-close, .wd-close, .ms-back {
    font-family: inherit;
    color: var(--testo);
    background: transparent;
    border: 1px solid var(--accent);
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.eq-close:hover, .ms-close:hover, .cy-close:hover, .wd-close:hover, .ms-back:hover {
    background: rgba(112, 56, 248, 0.3);
}

/* --- Suggerimenti sotto-testata --- */
.ms-hint, .cy-hint, .bs-hint {
    font-size: 0.76rem;
    color: rgba(224, 208, 255, 0.75);
    line-height: 1.4;
}

/* --- Icone SVG "linea neon" (js/icone.js) --- */
.icn {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.22em;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px currentColor);
}
.icn.el-termico { color: #ff5c3f; }
.icn.el-crio    { color: var(--accent-2); }
.icn.el-bio     { color: var(--successo); }
.icn.el-void    { color: var(--accent); }
.icn.oro        { color: var(--oro); }

/* --- Ritratti (placeholder emoji finché il PNG non esiste) ---
   Convenzione: img/ritratti/<id>.png (vedi img/ritratti/README.md) */
.ritratto {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--surface-scura);
    border: 1px solid var(--accent-dim);
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
    overflow: hidden;
}
.ritratto img {
    position: absolute;
    inset: 4%;
    width: 92%;
    height: 92%;
    object-fit: contain;
    z-index: 1;
}
.ritratto-fallback { line-height: 1; }
.ritratto-s  { width: 42px; height: 42px; }
.ritratto-s  .ritratto-fallback { font-size: 1.4rem; }
.ritratto-m  { width: 58px; height: 58px; }
.ritratto-m  .ritratto-fallback { font-size: 1.9rem; }
.ritratto-xl { width: 116px; height: 116px; }
.ritratto-xl .ritratto-fallback { font-size: 3.4rem; }

/* --- Righe-lista cliccabili (inventario, zone, nemici) --- */
.eq-item, .ms-zone, .ms-enemy {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    background: rgba(112, 56, 248, 0.12);
    border: 1px solid var(--accent-dim);
    padding: var(--sp-3);
    transition: background 0.15s ease, transform 0.15s ease;
    text-align: left;
    font-family: inherit;
    color: var(--testo);
    width: 100%;
}
.eq-item:hover, .ms-zone:hover, .ms-enemy:hover {
    background: rgba(112, 56, 248, 0.32);
    transform: translateX(2px);
}

/* ==========================================================
   RARITÀ OGGETTI — colori condivisi (Officina, banner loot)
   ================================================---------- */
.rar-comune      { color: #c9d2e3; }
.rar-raro        { color: #3fa9ff; text-shadow: 0 0 6px rgba(63,169,255,.45); }
.rar-epico       { color: #c072ff; text-shadow: 0 0 6px rgba(192,114,255,.45); }
.rar-leggendario { color: #ffb03a; text-shadow: 0 0 7px rgba(255,176,58,.5); }
.rar-mitico      { color: #ff5470; text-shadow: 0 0 8px rgba(255,84,112,.55); }