/* ============================================================
   Spoilery — assets/css/common.css
   Cartella: /assets/css/
   ------------------------------------------------------------
   Stili GLOBALI del sito pubblico (caricati in ogni pagina).
   Ogni pagina ha poi il suo file in /assets/css/pages/.
   Il pannello admin ha i suoi CSS separati in /admin/assets/.
   ============================================================ */

/* ---------- 1. Design token ---------- */
:root {
    /* Nero e rosso Spoilery: il salotto al buio, il rosso del logo */
    --st-ink:        #0A0A0B;   /* sfondo */
    --st-surface:    #141416;   /* superfici (card, pannelli) */
    --st-raised:     #1E1E21;   /* elementi in rilievo, hover */
    --st-line:       #2c2c30;   /* bordi */
    --st-text:       #F2F2F3;   /* testo principale */
    --st-muted:      #A1A1A8;   /* testo secondario */
    --st-accent:     #DA0915;   /* rosso Spoilery */
    --st-accent-hi:  #FF4D57;
    --st-accent-lo:  #B00710;
    --st-spoiler:    #F2B544;   /* ambra: solo per lo Spoiler Shield */

    /* Reazioni */
    --st-r-like:      #34D399;
    --st-r-laugh:     #FF8FB1;
    --st-r-popcorn:   #F5C451;
    --st-r-mindblown: #B197FC;
    --st-r-tears:     #6CB6FF;
    --st-r-hype:      #FF7A45;

    /* Tipi di post */
    --st-t-theory:  #FFD166;
    --st-t-meme:    #F48FB1;
    --st-t-general: #A1A1A8;

    /* Tipografia */
    --st-font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --st-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Raggi: più grandi = contenitore più importante */
    --st-radius-xs: 6px;
    --st-radius-sm: 10px;
    --st-radius:    14px;
    --st-radius-lg: 20px;

    /* Misure app */
    --st-topbar-h:    60px;
    --st-bottomnav-h: 54px;   /* barra inferiore su smartphone (prima 64px) */
    --st-safe-bottom: env(safe-area-inset-bottom, 0px);
    --st-safe-top:    env(safe-area-inset-top, 0px);
}

/* ---------- 2. Bootstrap in tema blu ---------- */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--st-ink);
    --bs-body-bg-rgb: 10, 10, 11;
    --bs-body-color: var(--st-text);
    --bs-body-color-rgb: 242, 242, 243;
    --bs-body-font-family: var(--st-font-body);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--st-muted);
    --bs-secondary-bg: var(--st-surface);
    --bs-tertiary-bg: var(--st-raised);
    --bs-border-color: var(--st-line);
    --bs-border-color-translucent: rgba(161, 161, 168, .18);
    --bs-primary: var(--st-accent);
    --bs-primary-rgb: 218, 9, 21;
    --bs-link-color: var(--st-accent-hi);
    --bs-link-color-rgb: 255, 77, 87;
    --bs-link-hover-color: #FF8A91;
    --bs-link-hover-color-rgb: 255, 138, 145;
    --bs-focus-ring-color: rgba(218, 9, 21, .35);
    --bs-dropdown-bg: var(--st-surface);
    --bs-heading-color: #FFFFFF;
}

html { -webkit-tap-highlight-color: transparent; }
/* Niente zoom col doppio tocco (es. toccando due volte "Reagisci"): il pizzico per ingrandire resta.
   Lo zoom verrà bloccato del tutto solo nell'app installata (Step 12). */
html, body, a, button, input, select, textarea, label, [role="button"] { touch-action: manipulation; }

body.st-body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1.55;
    background: var(--st-ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.st-display {
    font-family: var(--st-font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); }
h3 { font-size: 1.25rem; }

a { text-underline-offset: .18em; }

::selection { background: rgba(218, 9, 21, .35); color: #fff; }

:focus-visible {
    outline: 2px solid var(--st-accent-hi);
    outline-offset: 2px;
}

.st-main {
    flex: 1 0 auto;
    width: 100%;
}
.st-main:focus { outline: none; }

.st-skip:focus {
    position: fixed; top: 8px; left: 8px; z-index: 2000;
    padding: .5rem .9rem; border-radius: var(--st-radius-sm);
    background: var(--st-accent); color: #fff;
}

/* ---------- 3. Pulsanti ---------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-border-radius: 999px; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-border-radius: 999px; }

.btn-primary {
    --bs-btn-bg: var(--st-accent);
    --bs-btn-border-color: var(--st-accent);
    --bs-btn-hover-bg: var(--st-accent-lo);
    --bs-btn-hover-border-color: var(--st-accent-lo);
    --bs-btn-active-bg: var(--st-accent-lo);
    --bs-btn-active-border-color: var(--st-accent-lo);
    --bs-btn-disabled-bg: var(--st-accent);
    --bs-btn-disabled-border-color: var(--st-accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}
.btn-outline-light {
    --bs-btn-color: var(--st-text);
    --bs-btn-border-color: var(--st-line);
    --bs-btn-hover-bg: var(--st-raised);
    --bs-btn-hover-border-color: var(--st-raised);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--st-raised);
    --bs-btn-active-color: #fff;
}
.btn-ghost {
    --bs-btn-color: var(--st-muted);
    --bs-btn-hover-color: var(--st-text);
    --bs-btn-hover-bg: var(--st-raised);
    --bs-btn-active-bg: var(--st-raised);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
}

/* Pulsante tondo solo icona */
.st-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--st-muted);
    font-size: 1.2rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.st-icon-btn:hover,
.st-icon-btn.is-active,
.st-icon-btn[aria-expanded="true"] {
    background: var(--st-raised);
    color: var(--st-text);
}

/* ---------- 4. Moduli ---------- */
.form-control,
.form-select {
    --bs-border-radius: var(--st-radius-sm);
    background-color: var(--st-surface);
    border-color: var(--st-line);
    color: var(--st-text);
    padding: .65rem .9rem;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--st-surface);
    border-color: var(--st-accent);
    color: var(--st-text);
    box-shadow: 0 0 0 .2rem rgba(218, 9, 21, .2);
}
.form-control::placeholder { color: #75757D; }
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.form-text { color: var(--st-muted); }
.form-check-input { background-color: var(--st-surface); border-color: #45454B; }
.form-check-input:checked { background-color: var(--st-accent); border-color: var(--st-accent); }

/* ---------- 5. Barra superiore ---------- */
.st-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: var(--st-safe-top);
    background: rgba(10, 10, 11, .86);
    border-bottom: 1px solid var(--st-line);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.st-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--st-topbar-h);
}
.st-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
/* Logo completo (assets/img/logo.svg) */
.st-brand-logo { display: block; height: 34px; width: auto; }
@media (max-width: 375px) { .st-brand-logo { height: 28px; } }
.st-brand:hover { color: #fff; }

.st-topbar-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 440px;
    margin-inline: auto;
    align-items: center;
}
.st-topbar-search .bi {
    position: absolute;
    left: .95rem;
    color: var(--st-muted);
    pointer-events: none;
}
.st-topbar-search .form-control {
    padding-left: 2.5rem;
    border-radius: 999px;
    background: var(--st-surface);
}
.st-topbar-search .form-control::-webkit-search-cancel-button { display: none; }

/* Suggerimenti dal vivo della ricerca in alto (computer) */
.st-topbar-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 1060;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: .35rem;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .75);
}
.st-topbar-suggest[hidden] { display: none; }
.st-topbar-suggest .st-sug-group { margin: .5rem .6rem .25rem; color: var(--st-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.st-topbar-suggest .st-sug {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 50px;
    padding: .35rem .6rem;
    border-radius: var(--st-radius-sm);
    color: var(--st-text);
    text-decoration: none;
}
.st-topbar-suggest .st-sug:hover, .st-topbar-suggest .st-sug.is-active { background: var(--st-raised); color: #fff; }
.st-topbar-suggest .st-sug > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.st-topbar-suggest .st-sug strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-topbar-suggest .st-sug small { color: var(--st-muted); font-size: .78rem; }
.st-topbar-suggest .st-sug-poster { width: 30px; height: auto; flex-shrink: 0; border-radius: 4px; }
.st-topbar-suggest .st-bi, .st-topbar-suggest .st-sug .bi { position: static; width: 30px; text-align: center; color: inherit; }
.st-topbar-suggest .st-ep-code { flex-shrink: 0; font-size: .72rem; }
.st-topbar-suggest .st-sug-all { margin-top: .25rem; border-top: 1px solid var(--st-line); border-radius: 0 0 var(--st-radius-sm) var(--st-radius-sm); color: var(--st-accent-hi); font-weight: 600; }

.st-topbar-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
@media (min-width: 768px) {
    .st-layout-app .st-topbar-search + .st-topbar-actions { margin-left: 0; }
}

.st-avatar-btn {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    line-height: 0;
    transition: border-color .15s ease;
}
.st-avatar-btn:hover,
.st-avatar-btn[aria-expanded="true"] { border-color: var(--st-accent); }

/* Contatore sul campanello */
.st-dot-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--st-ink);
    background: var(--st-accent);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* ---------- 6. Menu a tendina ---------- */
/* Intestazione con un menu aperto (assets/js/posts.js): sopra al resto della pagina */
.st-menu-open { position: relative; z-index: 40; }
.st-menu {
    --bs-dropdown-bg: var(--st-surface);
    --bs-dropdown-border-color: var(--st-line);
    --bs-dropdown-border-radius: var(--st-radius);
    --bs-dropdown-link-color: var(--st-text);
    --bs-dropdown-link-hover-bg: var(--st-raised);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: var(--st-raised);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-divider-bg: var(--st-line);
    min-width: 230px;
    padding: .4rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
}
.st-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: var(--st-radius-sm);
    padding: .55rem .7rem;
    font-weight: 500;
}
.st-menu .dropdown-item > .bi:first-child { color: var(--st-muted); font-size: 1.05rem; }
.st-menu-head {
    display: flex;
    flex-direction: column;
    padding: .5rem .7rem .6rem;
}
.st-menu-head span { color: var(--st-muted); font-size: .88rem; }
.st-menu-label {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem .7rem;
    color: var(--st-muted);
    font-size: .85rem;
}
.st-menu-lang { padding-left: 2.35rem !important; }

/* ---------- Risposta immediata al tocco (assets/js/common.js) ---------- */
.st-navprogress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--st-accent), var(--st-accent-hi));
    box-shadow: 0 0 10px rgba(255, 77, 87, .7);
    transform: scaleX(0);
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
}
.st-navprogress.is-on {
    opacity: 1;
    transform: scaleX(.9);
    /* parte veloce e poi rallenta: non arriva mai in fondo finché la pagina nuova non c'è */
    transition: transform 10s cubic-bezier(.08, .82, .17, 1), opacity .1s linear;
}
html.st-navigating, html.st-navigating * { cursor: progress; }
/* Se la pagina nuova tarda, il contenuto attuale si attenua (dopo un attimo, così i passaggi veloci non "lampeggiano") */
html.st-navigating .st-main {
    opacity: .55;
    transition: opacity .2s ease .35s;
}
.st-bottomnav-item.is-pressed .st-bottomnav-icon { animation: st-press .25s ease; }
.st-icon-btn.is-pressed, .st-set-item.is-pressed, .st-set-me.is-pressed { background: var(--st-raised); }
@keyframes st-press { 40% { transform: scale(.86); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .st-navprogress.is-on { transition: opacity .1s linear; transform: scaleX(.6); }
    html.st-navigating .st-main { transition: none; }
    .st-bottomnav-item.is-pressed .st-bottomnav-icon { animation: none; }
}

/* ---------- 7. Barra inferiore (mobile, stile app) ---------- */
.st-bottomnav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(var(--st-bottomnav-h) + var(--st-safe-bottom));
    padding-bottom: var(--st-safe-bottom);
    background: rgba(10, 10, 11, .94);
    border-top: 1px solid var(--st-line);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.st-bottomnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--st-muted);
    text-decoration: none;
    font-size: .64rem;
    font-weight: 600;
}
.st-bottomnav-item.is-active { color: #fff; }
.st-bottomnav-icon { position: relative; font-size: 1.15rem; line-height: 1; }
.st-bottomnav-icon .st-dot-count { top: -5px; right: -11px; }
.st-bottomnav-create {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: var(--st-accent);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 6px 16px -6px rgba(218, 9, 21, .6);
    transition: transform .15s ease;
}
.st-bottomnav-create:active { transform: scale(.94); }

@media (max-width: 767.98px) {
    body.st-layout-app { padding-bottom: calc(var(--st-bottomnav-h) + var(--st-safe-bottom)); }
    .st-toasts { bottom: calc(var(--st-bottomnav-h) + var(--st-safe-bottom) + 12px) !important; }
}

/* ---------- 8. Footer ospiti ---------- */
.st-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--st-line);
    background: #0D0D0E;
    color: var(--st-muted);
    font-size: .92rem;
}
.st-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 2rem 1.25rem;
}
.st-footer-brand { display: flex; align-items: center; gap: .75rem; }
.st-footer-brand { flex-direction: column; align-items: flex-start; gap: .5rem; }
.st-footer-logo { display: block; height: 28px; width: auto; }
.st-footer-brand p { margin: 0; font-size: .85rem; }
.st-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.st-footer-links a,
.st-footer-social a { color: var(--st-muted); text-decoration: none; }
.st-footer-links a:hover,
.st-footer-social a:hover { color: var(--st-text); }
.st-footer-social { display: flex; gap: 1rem; font-size: 1.15rem; }
.st-footer-legal {
    padding-block: 1rem 2rem;
    border-top: 1px solid rgba(44, 44, 48, .6);
    font-size: .8rem;
}
.st-footer-legal p { margin: 0 0 .35rem; }
.st-footer-tmdb { opacity: .75; }

/* ---------- 9. Componenti riutilizzabili ---------- */

/* Superficie di base */
.st-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
}

/* Codice episodio "S04 E07": l'elemento identitario del sito */
.st-ep-code {
    display: inline-flex;
    align-items: center;
    gap: .15em;
    padding: .2em .6em;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-xs);
    background: var(--st-raised);
    color: var(--st-text);
    font-family: var(--st-font-display);
    font-weight: 700;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
}
.st-ep-code.is-live { border-color: var(--st-accent); color: var(--st-accent-hi); }

/* Icone illustrate (reazioni e tipi di post): assets/img/reactions e assets/img/post-types */
.st-ico {
    display: inline-block;
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.28em;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.st-ico-sm { width: 1em;   height: 1em;   vertical-align: -0.15em; }
.st-ico-lg { width: 1.6em; height: 1.6em; vertical-align: -0.45em; }
.st-ico-xl { width: 2.2em; height: 2.2em; }

/* Etichette tipo di post */
.st-type {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--st-t-general);
}
.st-type--theory  { color: var(--st-t-theory); }
.st-type--meme    { color: var(--st-t-meme); }

/* Avatar */
.st-avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--st-raised);
    flex-shrink: 0;
}
.st-avatar-xs { width: 24px; height: 24px; }
.st-avatar-sm { width: 34px; height: 34px; }
.st-avatar-md { width: 44px; height: 44px; }
.st-avatar-lg { width: 72px; height: 72px; }
.st-avatar-xl { width: 112px; height: 112px; }

/* Locandine (rapporto 2:3) */
.st-poster {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--st-radius-sm);
    background: var(--st-raised);
}

/* Colori delle reazioni */
.st-r-like      { --st-r: var(--st-r-like); }
.st-r-laugh     { --st-r: var(--st-r-laugh); }
.st-r-popcorn   { --st-r: var(--st-r-popcorn); }
.st-r-mindblown { --st-r: var(--st-r-mindblown); }
.st-r-tears     { --st-r: var(--st-r-tears); }
.st-r-hype      { --st-r: var(--st-r-hype); }

/* Spoiler Shield: contenuto oscurato */
.st-spoiler {
    position: relative;
    overflow: hidden;
    border-radius: var(--st-radius-sm);
}
.st-spoiler > .st-spoiler-content {
    filter: blur(14px);
    user-select: none;
    pointer-events: none;
}
.st-spoiler-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    text-align: center;
    background: rgba(10, 10, 11, .55);
    color: var(--st-text);
}
.st-spoiler-cover .bi { color: var(--st-spoiler); font-size: 1.5rem; }

/* Stato vuoto */
.st-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--st-muted);
}
.st-empty .bi { display: block; margin-bottom: .75rem; font-size: 2.2rem; color: #55555C; }
/* Icona dentro i pulsanti dello stato vuoto (es. "Nuovo post"): dimensione normale, sulla stessa riga del testo */
.st-empty .btn .bi { display: inline-block; margin: 0 .35rem 0 0; font-size: 1em; color: inherit; }
.st-empty p { max-width: 36ch; margin: 0 auto 1rem; }

/* Caricamento "scheletro" */
.st-skeleton {
    border-radius: var(--st-radius-sm);
    background: linear-gradient(90deg, var(--st-surface) 25%, var(--st-raised) 50%, var(--st-surface) 75%);
    background-size: 200% 100%;
    animation: st-shimmer 1.4s linear infinite;
}
@keyframes st-shimmer { to { background-position: -200% 0; } }

/* Messaggi flash */
.st-flash-wrap { padding-top: 1rem; }
.st-flash {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--st-radius);
}

/* Toast */
.st-toasts { right: 16px; bottom: 16px; z-index: 1090; }
.st-toast {
    --bs-toast-bg: var(--st-raised);
    --bs-toast-border-color: var(--st-line);
    --bs-toast-border-radius: var(--st-radius);
    --bs-toast-color: var(--st-text);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
}
.st-toast .toast-body { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.st-toast--success .bi { color: #4ADE80; }
.st-toast--danger  .bi { color: #F87171; }
.st-toast--info    .bi { color: var(--st-accent-hi); }

/* Modali */
.modal {
    --bs-modal-bg: var(--st-surface);
    --bs-modal-border-color: var(--st-line);
    --bs-modal-border-radius: var(--st-radius-lg);
    --bs-modal-header-border-color: var(--st-line);
    --bs-modal-footer-border-color: var(--st-line);
}
.modal-backdrop { --bs-backdrop-bg: #050506; --bs-backdrop-opacity: .7; }

/* Utility */
.text-muted-st { color: var(--st-muted) !important; }
.fw-display { font-family: var(--st-font-display); }

/* ---------- 10. Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   VOTI (stelle) — usati in hub, schede e liste
   ============================================================ */
.st-stars { display: inline-flex; gap: .1rem; color: var(--st-spoiler); }
.st-stars .bi-star { color: #55555C; }

/* Media compatta su una locandina: "★ 4,3" */
.st-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .1rem .4rem;
    border-radius: 6px;
    background: rgba(5, 5, 6, .82);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.st-rating-badge .bi { color: var(--st-spoiler); font-size: .7rem; }

/* ============================================================
   STRISCE DI SERIE ("Consigliati per te", "Se ti piace…")
   Scorrono in orizzontale, come nelle app.
   ============================================================ */
.st-series-strip { margin: 1.25rem 0; }
.st-strip-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; font-size: 1.05rem; }
.st-strip-title .bi { color: var(--st-spoiler); }
.st-strip-scroll {
    display: flex;
    gap: .75rem;
    margin: 0 calc(var(--bs-gutter-x) * -.5);
    padding: 0 calc(var(--bs-gutter-x) * .5) .3rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--bs-gutter-x) * .5);
    scrollbar-width: none;
}
.st-strip-scroll::-webkit-scrollbar { display: none; }
.st-strip-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 0 0 116px;
    color: var(--st-text);
    text-decoration: none;
    scroll-snap-align: start;
}
.st-strip-card:hover { color: #fff; }
.st-strip-poster { position: relative; display: block; margin-bottom: .3rem; }
.st-strip-poster .st-poster { height: auto; }
.st-strip-poster .st-rating-badge { position: absolute; left: 6px; bottom: 6px; }
.st-strip-card strong { font-size: .86rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-strip-card small { color: var(--st-muted); font-size: .72rem; line-height: 1.3; }

/* Frecce ‹ › per scorrere la striscia: solo con il mouse (desktop), solo se c'è altro da vedere */
.st-strip-wrap { position: relative; }
.st-strip-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
    .st-strip-arrow {
        position: absolute; top: 87px; z-index: 3; transform: translateY(-50%);
        display: grid; place-items: center; width: 40px; height: 40px;
        border: 1px solid var(--st-line); border-radius: 50%;
        background: rgba(20, 20, 22, .92); color: var(--st-text); font-size: 1.1rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .5); cursor: pointer;
        transition: opacity .2s ease, background .15s ease;
    }
    .st-strip-arrow[hidden] { display: none; }
    .st-strip-arrow:hover { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
    .st-strip-arrow.is-prev { left: -14px; }
    .st-strip-arrow.is-next { right: -14px; }
}

/* ============================================================
   SCHEDE (tab) condivise: pagina della serie, ricerca, profilo
   ============================================================ */
.st-tabs {
    position: sticky;
    top: calc(var(--st-topbar-h) + var(--st-safe-top));
    z-index: 10;
    display: flex;
    margin-inline: calc(var(--bs-gutter-x) * -.5);
    padding-inline: calc(var(--bs-gutter-x) * .5);
    background: rgba(10, 10, 11, .94);
    border-bottom: 1px solid var(--st-line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.st-tab {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 48px;
    border: 0;
    background: none;
    color: var(--st-muted);
    font-weight: 600;
    font-size: .95rem;
}
.st-tab.is-active { color: #fff; }
.st-tab.is-active::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--st-accent);
}
.st-tab-count {
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--st-raised);
    font-size: .72rem;
    line-height: 1.5;
}

.st-panel { padding-top: 1.1rem; }
.st-panel:focus { outline: none; }

/* ============================================================
   BADGE (icona circolare colorata) — profilo, notifiche
   ============================================================ */
.st-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--st-badge, #DA0915) 18%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-badge, #DA0915) 55%, transparent);
    color: var(--st-badge, #DA0915);
    font-size: 1.3rem;
}
.st-badge-icon.is-small { width: 32px; height: 32px; font-size: .95rem; }

/* ============================================================
   BARRA "ENTRA SU SPOILERY" (ospiti, pagine pubbliche)
   ============================================================ */
.st-guestbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: .7rem 0 calc(.7rem + var(--st-safe-bottom));
    background: rgba(20, 20, 22, .94);
    border-top: 1px solid var(--st-line);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.st-guestbar-inner { display: flex; align-items: center; gap: .9rem; }
.st-guestbar-mark { flex: none; }
.st-guestbar-text { margin: 0; flex: 1; font-size: .92rem; color: var(--st-text); line-height: 1.35; }
.st-guestbar-actions { display: flex; gap: .5rem; flex: none; }
.has-guestbar .st-footer { padding-bottom: 5.5rem; }
.has-guestbar .st-cookie { bottom: calc(5.4rem + var(--st-safe-bottom)); }
@media (max-width: 575.98px) {
    .st-guestbar-mark { display: none; }
    .st-guestbar-inner { flex-wrap: wrap; gap: .55rem; }
    .st-guestbar-text { flex-basis: 100%; font-size: .84rem; text-align: center; }
    .st-guestbar-actions { flex: 1; }
    .st-guestbar-actions .btn { flex: 1; }
    .has-guestbar .st-footer { padding-bottom: 8rem; }
    .has-guestbar .st-cookie { bottom: calc(7.6rem + var(--st-safe-bottom)); }
}

/* ============================================================
   PULSANTE "CONTINUA CON GOOGLE" (aspetto indicato da Google: fondo bianco, logo a colori)
   ============================================================ */
.st-btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
    min-height: 48px; padding: .6rem 1rem; border-radius: 999px;
    background: #FFFFFF; color: #1F1F1F; border: 1px solid #DADCE0;
    font-family: "Roboto", var(--st-font-body); font-weight: 600; font-size: 1rem;
}
.st-btn-google:hover, .st-btn-google:focus-visible { background: #F2F2F2; color: #1F1F1F; border-color: #DADCE0; }
.st-btn-google .st-google-g { flex: none; }


/* ---------- Campi di testo su smartphone ----------
   Safari su iPhone ingrandisce la pagina quando si tocca un campo con il testo sotto i 16 px
   (ricerca, commenti, accesso…): sui dispositivi touch i campi sono sempre almeno a 16 px. */
@media (hover: none) and (pointer: coarse) {
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="url"], input[type="tel"], input[type="number"], input:not([type]),
    textarea, select, .form-control, .form-select {
        font-size: max(16px, 1em) !important;
    }
}

/* ============================================================
   App installata (classe messa da templates/header.php):
   niente zoom a pizzico né doppio tocco (resta il trascina-giù per aggiornare),
   niente evidenziazione grigia al tocco. Le foto a tutto schermo hanno il loro zoom.
   ============================================================ */
html.st-standalone { touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
html.st-standalone [data-st-zoom] { touch-action: none; }

/* ---------- Invito "Spoilery come app" in fondo alla home (assets/js/install.js) ---------- */
.st-install-invite {
    position: fixed;
    left: .75rem; right: .75rem;
    bottom: calc(var(--st-bottomnav-h) + var(--st-safe-bottom) + .75rem);
    z-index: 1040;
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .6rem .7rem .75rem;
    background: var(--st-raised);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    transform: translateY(16px); opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.st-install-invite.is-open { transform: none; opacity: 1; }
.st-install-invite img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.st-install-invite-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.st-install-invite-txt strong { font-size: .92rem; }
.st-install-invite-txt span { font-size: .8rem; color: var(--st-muted); }
.st-install-invite .btn { flex: none; border-radius: 999px; padding-inline: .9rem; }
.st-install-invite-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--st-muted); border-radius: 50%; }
.st-install-invite-x:hover { color: var(--st-text); background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) { .st-install-invite { transition: none; } }