/* ============================================================
   Spoilery — assets/css/badges.css
   Cartella: /assets/css/
   Badge a livelli (Bronzo, Argento, Oro, Leggenda): piccolo badge
   accanto al nome, livelli nel profilo, finestra "Nuovo badge!".
   (Il cerchio dell'icona .st-badge-icon è in common.css)
   ============================================================ */

:root {
    --st-tier-1: #CD7F32;   /* Bronzo */
    --st-tier-2: #B8C4CE;   /* Argento */
    --st-tier-3: #F5C451;   /* Oro */
    --st-tier-4: #B197FC;   /* Leggenda */
}

/* ---------- Leggenda: un leggero bagliore ---------- */
.st-badge-icon.is-legend {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-badge) 70%, transparent), 0 0 12px color-mix(in srgb, var(--st-badge) 45%, transparent);
}

/* ---------- Accanto al nome (commenti e schede dei post) ----------
   Il badge non va mai a capo e non allunga la riga: è il nome ad accorciarsi con "…". */
.st-badge-icon.is-tiny { width: 18px; height: 18px; font-size: .6rem; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st-badge, #DA0915) 60%, transparent); }
.st-badge-icon.is-tiny.is-legend { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st-badge) 75%, transparent), 0 0 6px color-mix(in srgb, var(--st-badge) 50%, transparent); }
.st-name-badge { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: .3rem; line-height: 0; vertical-align: middle; cursor: default; }

/* nome del post (pagina della serie, stanza dell'episodio) */
.st-name-line { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.st-name-line .st-post-name { min-width: 0; flex: 0 1 auto; }
/* autore sotto il titolo della serie (feed, profilo, ricerca): la riga ha già uno spazio tra gli elementi */
.st-post-sub .st-name-badge { margin-left: -.25rem; }
.st-post-sub .st-post-author { min-width: 0; }

/* commenti */
.st-comment-head { min-width: 0; }
.st-comment-name { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-comment-head .st-name-badge { margin-left: -.15rem; }
.st-comment-head .st-comment-badge { flex-shrink: 0; }

/* ---------- Profilo: livelli ---------- */
.st-badge-name { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.st-tier {
    display: inline-block;
    padding: 0 .45rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #111;
}
.st-tier--1 { background: var(--st-tier-1); }
.st-tier--2 { background: var(--st-tier-2); }
.st-tier--3 { background: var(--st-tier-3); }
.st-tier--4 { background: linear-gradient(90deg, #B197FC, #F48FB1); }
.st-tier-dots { display: flex; gap: .3rem; margin-top: .4rem; }
.st-tier-dot { width: 22px; height: 5px; border-radius: 3px; background: var(--st-raised); }
.st-tier-dot.is-on.st-tier--1 { background: var(--st-tier-1); }
.st-tier-dot.is-on.st-tier--2 { background: var(--st-tier-2); }
.st-tier-dot.is-on.st-tier--3 { background: var(--st-tier-3); }
.st-tier-dot.is-on.st-tier--4 { background: linear-gradient(90deg, #B197FC, #F48FB1); }
.st-badge-next { margin-top: .3rem; }
.st-badge-done { margin-top: .35rem; color: var(--st-tier-3) !important; font-weight: 600; }
.st-badge.is-tier-4 { border-color: color-mix(in srgb, var(--st-tier-4) 45%, transparent); }

/* ---------- Finestra "Nuovo badge!" ---------- */
.st-celebrate .modal-content { text-align: center; overflow: hidden; }
.st-celebrate .modal-body { padding: 2rem 1.25rem 1.25rem; position: relative; }
.st-celebrate-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 1.1rem; }
.st-celebrate-list { display: flex; flex-direction: column; gap: .9rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.st-celebrate-item { display: flex; align-items: center; gap: .8rem; text-align: left; }
.st-celebrate-item > span:last-child { min-width: 0; }
.st-celebrate-item strong { display: block; }
.st-celebrate-item small { color: var(--st-muted); }
.st-celebrate-item .st-badge-icon { width: 56px; height: 56px; font-size: 1.5rem; flex-shrink: 0; animation: st-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.st-celebrate-list.is-single .st-celebrate-item { flex-direction: column; text-align: center; gap: .6rem; }
.st-celebrate-list.is-single .st-badge-icon { width: 92px; height: 92px; font-size: 2.6rem; }
.st-celebrate-list.is-single .st-tier { margin-top: .35rem; }
.st-celebrate-actions { display: flex; flex-direction: column; gap: .5rem; }
@keyframes st-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
/* coriandoli */
.st-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.st-confetti i {
    position: absolute;
    top: -12px;
    width: 7px;
    height: 12px;
    border-radius: 2px;
    opacity: .9;
    animation: st-fall 2.4s ease-in forwards;
}
@keyframes st-fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .st-confetti { display: none; }
    .st-celebrate-item .st-badge-icon { animation: none; }
}