/* ============================================================
   OrionMC — ui.css
   Cromatura comune a tutte le pagine: motore delle animazioni di
   entrata, barra di avanzamento, navbar, menu utente, menu mobile,
   tab, bottone "torna su", micro-interazioni.
   In fondo il blocco prefers-reduced-motion, che disattiva proprio
   le animazioni definite qui.
   Estratto da animations.css, che teneva insieme queste regole,
   quelle della home e quelle della dashboard: ogni pagina si
   scaricava anche le parti che non usava.
   ============================================================ */

/* ── Motore Scroll Reveal ─────────────────────────────────── */
/* Applicare data-reveal e opzionalmente data-delay="120" (ms).
   Il valore nomina il GESTO: up, down, left, right, zoom, settle,
   swing-left/right, unfold-left/right, wipe-left/right/up, pixel.
   Un contenitore con data-reveal-group stagger-a i figli da solo. */

/* L'avanzamento è calcolato in JS a ogni frame e scritto come opacity/transform
   inline. Nessuna transizione CSS: è animations.js a smorzare il movimento
   (inseguimento esponenziale dell'obiettivo), e una transition qui sopra
   aggiungerebbe un secondo ritardo, facendo sembrare l'entrata "molle". */
[data-reveal] {
    opacity: 0;
    transition: none;
    will-change: transform, opacity;
    transform-origin: center center;
    backface-visibility: hidden;
}

/* Entrata finita: il livello di composizione non serve più. Su una pagina
   con un centinaio di elementi animati, tenerli tutti promossi costa memoria
   video per niente. La classe la mette animations.js quando l'avanzamento
   tocca 1, e la toglie se si torna indietro. */
[data-reveal].is-settled { will-change: auto; }

/* ── Entrate: il vocabolario ──────────────────────────────────
   Gli stati qui sotto sono SOLO il primo fotogramma, quello che si vede
   prima che animations.js scriva il transform inline. Devono restare
   allineati con la tabella MOVES di js/animations.js, dove ogni voce è
   commentata: qui c'è la stessa formula con inv = 1.

   Il verso non lo decide più il nome ("-right" → zoom-out e via dicendo):
   ogni valore di data-reveal è un gesto a sé, e il markup sceglie quello
   che serve al pezzo. */
[data-reveal]                 { transform: translate3d(0, 30px, 0) scale(0.955); }
[data-reveal="down"]          { transform: translate3d(0, -24px, 0) scale(1.04); }
[data-reveal="left"]          { transform: translate3d(-44px, 0, 0); }
[data-reveal="right"]         { transform: translate3d(44px, 0, 0); }
[data-reveal="zoom"]          { transform: scale(0.87); }
[data-reveal="settle"]        { transform: translate3d(0, -14px, 0) scale(1.06); }
[data-reveal="swing-left"]    { transform: translate3d(-30px, 12px, 0) rotate(-1.6deg); }
[data-reveal="swing-right"]   { transform: translate3d(30px, 12px, 0) rotate(1.6deg); }
[data-reveal="unfold-left"]   { transform: perspective(1200px) translate3d(-34px, 0, 0) rotateY(8deg); }
[data-reveal="unfold-right"]  { transform: perspective(1200px) translate3d(34px, 0, 0) rotateY(-8deg); }
[data-reveal="pixel"]         { transform: translate3d(0, 26px, 0); }

/* Le tendine partono chiuse: senza la maschera iniziale il contenuto si
   vedrebbe intero per un fotogramma, prima che il JS la scriva. */
[data-reveal="wipe-left"]  { transform: translate3d(-20px, 0, 0); clip-path: inset(0 100% 0 0); }
[data-reveal="wipe-right"] { transform: translate3d(20px, 0, 0);  clip-path: inset(0 0 0 100%); }
[data-reveal="wipe-up"]    { transform: translate3d(0, 20px, 0);  clip-path: inset(100% 0 0 0); }

/* ── Titoli di sezione con underline animata ──────────────── */
.section-title {
    position: relative;
    display: inline-block;
}
/* La larghezza segue lo stesso avanzamento --p scritto dal JS */
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    height: 4px;
    width: calc(var(--p, 1) * 96px);
    background: var(--accent-orange);
    box-shadow: 0 3px 0 var(--accent-orange-dark);
    transform: translateX(-50%);
    transition: width 0.22s linear;
}

/* Stessa riga arancione retro del titolo di sezione, ma come elemento a sé
   (sotto i nomi dello staff e ovunque serva un separatore corto). */
.retro-rule {
    width: 64px;
    height: 4px;
    background: var(--accent-orange);
    box-shadow: 0 3px 0 var(--accent-orange-dark);
}

/* ── Hero: entrata al caricamento ─────────────────────────── */
@keyframes heroIn {
    from { opacity: 0; transform: translate3d(0, 34px, 0); }
    to   { opacity: 1; transform: none; }
}
.hero-in {
    opacity: 0;
    animation: heroIn 0.85s var(--ease-out-expo) forwards;
    animation-delay: var(--hero-delay, 0ms);
}

/* Parallax leggero sulla mascotte */
.parallax-layer {
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* ── Navbar ───────────────────────────────────────────────── */
/* NB: css/tailwind.min.css è una build purgata, quindi molte utility
   (gap-7, h-10, px-5, shrink-0…) NON esistono. Le spaziature dell'header
   sono scritte qui in CSS esplicito per non dipendere da classi assenti. */

/* Niente sottolineatura sui link: lo stato attivo è dato dal colore. */
.nav-link {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
/* base.css usa una text-shadow arancione che sembra una sottolineatura: via. */
.nav-link:hover,
.nav-link-active {
    text-shadow: none !important;
}
.nav-link-active { color: var(--accent-orange) !important; }
.nav-link:hover { color: #fff; }

/* ── Navbar: effetto "pill" allo scroll ───────────────────────
   base.css animava `all` su #navbar, inclusi width (100%→92%) e
   max-width (none→1200px): valori non interpolabili, da cui gli scatti.
   E con border-width 0 il colore del bordo è `currentColor`, cioè bianco:
   la transizione lo attraversava mostrando un bordo chiaro tutt'intorno.

   Qui #navbar torna a essere un semplice contenitore trasparente e tutta
   la grafica passa su .nav-inner, dove le proprietà animate sono coerenti
   (px→px, colore→colore) e non producono lampeggi. */

#navbar {
    /* Nessuna barra piena a riposo: sopra la hero l'header dev'essere
       invisibile, così non si vede una fascia più scura in cima alla pagina.
       Da 50px di scroll in poi la leggibilità è garantita dalla pill
       (.nav-inner), che è opaca. */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
    top: 0 !important;
    transition:
        padding 0.35s var(--ease-out-expo),
        background-color 0.3s linear !important;
}
/* base.css definisce #navbar.nav-scrolled (specificità 0,1,1,0) con !important:
   per neutralizzarlo serve una regola altrettanto specifica, non basta #navbar.
   NB: base.css è condiviso con dashboard.php, quindi la si sovrascrive qui
   invece di modificarla alla fonte. */
#navbar.nav-scrolled {
    background-color: rgba(19, 21, 27, 0) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
    top: 0 !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

#navbar .nav-inner {
    gap: 24px;
    max-width: 1280px;
    padding: 6px 18px;
    border-radius: 0;
    /* Bordo e ombra sempre presenti, ma trasparenti: così si anima solo
       il colore e non si passa mai per il bianco. */
    border: 2px solid rgba(17, 24, 39, 0);
    background-color: rgba(30, 33, 43, 0);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0), 0 4px 0 rgba(17, 24, 39, 0);
    transition:
        max-width        0.35s var(--ease-out-expo),
        padding          0.35s var(--ease-out-expo),
        border-radius    0.35s var(--ease-out-expo),
        border-color     0.3s linear,
        background-color 0.3s linear,
        box-shadow       0.3s linear;
}
#navbar.nav-scrolled .nav-inner {
    max-width: 1200px;
    border-radius: 8px;
    border-color: var(--mc-border-dark);
    background-color: var(--bg-panel);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 4px 0 var(--mc-border-dark);
}

#navbar .nav-links { gap: 28px; }
/* Le utility w-4/h-4 non sono nella build purgata: dimensioni esplicite */
#navbar .nav-links .nav-link svg { width: 13px; height: 13px; margin-left: 6px; flex-shrink: 0; }
#navbar .nav-actions svg { width: 16px; height: 16px; flex-shrink: 0; }

#navbar .nav-actions {
    gap: 12px;
    flex-shrink: 0;
}
#navbar .nav-actions a.btn-nav {
    height: 40px;
    padding: 0 18px;
    gap: 8px;
}
/* Accesso: stesso stile dello Store, ma solo icona */
#navbar .nav-actions a.btn-icon {
    width: 40px;
    padding: 0;
}
/* Da loggato il bottone mostra avatar + nome: torna a larghezza automatica */
#navbar .nav-actions a.btn-icon.is-logged {
    width: auto;
    padding: 0 16px;
}
#navbar .nav-actions a.btn-icon.is-logged img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Menu utente a tendina (non loggato) ──────────────────── */
.user-menu { position: relative; }

.user-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 260px;
    padding: 20px;
    background: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--mc-border-dark), 0 16px 34px rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition:
        opacity 0.2s var(--ease-out-expo),
        transform 0.24s var(--ease-out-back);
    z-index: 70;
}
.user-dropdown.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.user-dropdown p {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 16px;
}

.btn-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: #5865F2;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 0 #4752C4;
    transition: filter 0.15s, transform 0.1s, box-shadow 0.1s;
}
.btn-discord:hover { filter: brightness(110%); }
.btn-discord:active { transform: translateY(4px); box-shadow: 0 0 0 #4752C4; }
.btn-discord svg { width: 20px; height: 20px; flex-shrink: 0; }
#navbar a[href="#"] { flex-shrink: 0; }

/* ── Menu utente: azioni dell'utente loggato ──────────────────
   I bottoni della tendina sono più piccoli di quelli del sito: la
   tendina è larga 260px e al corpo pieno di .btn-main (1.5rem)
   un'etichetta come "IL MIO PROFILO" andrebbe a capo.
   Si applica sopra .btn-main e .btn-logout, che restano gli stampi
   (arancione pieno e rosso pieno) usati ovunque nel sito. */
.user-dropdown .btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.5px;
    border-radius: 4px;
}
/* Lo stacco fra i due bottoni sta sul BOTTONE, non sul form che lo
   avvolge: più in basso `#navbar .nav-actions form` è display:contents,
   quindi il form non genera un box e un margine su di lui sparirebbe —
   i due bottoni finirebbero incollati, con l'estrusione dell'arancione
   nascosta sotto il rosso.
   14 = 10 di stacco visibile + i 4px di estrusione del bottone sopra. */
.user-dropdown form .btn-menu { margin-top: 14px; }
/* L'icona dell'uscita e' un disegno a pixel come tutte quelle della
   cromatura condivisa, non piu' una legatura del font delle icone.
   Era l'unico pezzo del menu utente che dipendeva da quel font: index.html
   e dashboard.php non lo caricano (le altre cinque pagine si'), ma il menu
   lo costruisce js/header.js che gira su tutte — quindi sulla home, al
   posto dell'iconcina, si leggeva la parola "logout".
   16px su una griglia di 16: un pixel di schermo per uno del disegno. */
.user-dropdown .btn-menu svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    shape-rendering: crispEdges;
}

/* Bottone secondario: evita due pulsanti arancioni identici nell'header */
.btn-ghost {
    font-family: 'VT323', monospace;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-gray);
    background: transparent;
    border: 2px solid var(--mc-border-light);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background-color 0.18s, transform 0.18s;
}
.btn-ghost:hover {
    color: #fff;
    border-color: var(--accent-orange);
    background: rgba(245, 158, 11, 0.1);
    transform: translateY(-1px);
}
.btn-ghost:active { transform: translateY(1px); }

/* Il pulsante principale nell'header è più compatto del resto del sito */
.btn-nav {
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 3px 0 var(--accent-orange-dark);
    border-radius: 4px;
}
.btn-nav:hover { box-shadow: 0 4px 0 var(--accent-orange-dark); }
.btn-nav:active { transform: translateY(3px); box-shadow: 0 0 0 var(--accent-orange-dark); }

/* ── Mobile menu animato ──────────────────────────────────── */
#mobile-menu {
    transform-origin: top center;
    transition:
        opacity 0.28s var(--ease-out-expo),
        transform 0.32s var(--ease-out-expo);
}
#mobile-menu.menu-closed {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.96);
    pointer-events: none;
}
#mobile-menu.menu-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
#mobile-menu.menu-open > * {
    animation: heroIn 0.4s var(--ease-out-expo) backwards;
}
#mobile-menu.menu-open > *:nth-child(1) { animation-delay: 0.04s; }
#mobile-menu.menu-open > *:nth-child(2) { animation-delay: 0.08s; }
#mobile-menu.menu-open > *:nth-child(3) { animation-delay: 0.12s; }
#mobile-menu.menu-open > *:nth-child(4) { animation-delay: 0.16s; }
#mobile-menu.menu-open > *:nth-child(5) { animation-delay: 0.20s; }
#mobile-menu.menu-open > *:nth-child(6) { animation-delay: 0.24s; }
#mobile-menu.menu-open > *:nth-child(7) { animation-delay: 0.28s; }

/* Hamburger → X */
#menu-toggle svg { transition: transform 0.3s var(--ease-out-back); }
#menu-toggle.is-open svg { transform: rotate(90deg); }

/* ── Tab: transizione contenuto ───────────────────────────── */
@keyframes tabIn {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}
/* Il contenitore è animato dallo scroll: qui basta l'entrata al cambio tab */
.tab-content.tab-entering {
    animation: tabIn 0.45s var(--ease-out-expo);
}

/* ── Bottone torna su ─────────────────────────────────────── */
#back-to-top {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-orange);
    color: #fff;
    border: 2px solid var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--accent-orange-dark);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    pointer-events: none;
    transition:
        opacity 0.35s var(--ease-out-expo),
        transform 0.35s var(--ease-out-back),
        box-shadow 0.1s;
}
#back-to-top.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
#back-to-top:hover { filter: brightness(112%); box-shadow: 0 6px 0 var(--accent-orange-dark); }
#back-to-top:active { transform: translateY(4px); box-shadow: 0 0 0 var(--accent-orange-dark); }

/* ── Micro-interazioni generiche ──────────────────────────── */
.hover-lift {
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.hover-lift:hover { transform: translateY(-6px); }

/* Bagliore che scorre sui bottoni principali */
.btn-main {
    position: relative;
    overflow: hidden;
}
.btn-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.btn-main:hover::after {
    animation: btnShine 0.75s ease-out;
}
@keyframes btnShine {
    from { left: -120%; }
    to   { left: 160%; }
}


/* ── Accessibilità: rispetta prefers-reduced-motion ───────── */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        clip-path: none !important;
    }
    .section-title::after { width: 96px !important; }
    .hero-in { animation: none; opacity: 1; }
    .staff-fx,
    #staff-display-card.staff-out .staff-fx {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .character-float,
    .scroll-hint svg,
    .pulse-light { animation: none !important; }
    .parallax-layer { transform: none !important; }
    * { scroll-behavior: auto !important; }
}


/* ============================================================
   TOAST E BANNER COOKIE
   ------------------------------------------------------------
   Stavano in home.css, quindi esistevano solo sulla home mentre
   il comportamento e' in header.js, che carica ogni pagina.
   ============================================================ */
/* ── Banner cookie ────────────────────────────────────────────
   La posizione di partenza (fuori schermo) e display:none stanno qui
   e non inline: main.js scrive solo transform e display per aprirlo
   e chiuderlo, e le due dichiarazioni inline vincono su queste. */
#cookie-banner {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999999;
    width: 290px;
    max-width: calc(100vw - 40px);
    display: none;
    transform: translateY(150%);
    transition: transform 0.4s var(--ease-out-expo);
}
.cookie-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-top: 4px solid var(--accent-orange);
}
.cookie-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.56rem;
    letter-spacing: 1px;
    color: #fff;
}
.cookie-head span span { color: var(--accent-orange); }
.cookie-head svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent-orange);
}
.cookie-text {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-gray);
}
.cookie-text a {
    color: #fbbf24;
    text-decoration: underline;
    transition: color 0.15s;
}
.cookie-text a:hover { color: #fff; }
.cookie-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Toast ────────────────────────────────────────────────
   Forma del popup "Advancement made!" di Minecraft: slot dell'oggetto a
   sinistra, titolo giallo-arancio sopra, riga bianca sotto, cornice con
   filetto chiaro interno. Entra da destra con un rimbalzo secco e una
   barra in pixel sotto scandisce quanto resta prima che sparisca. */
#toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999998;
    width: 320px;
    max-width: calc(100vw - 40px);
    opacity: 0;
    transform: translateX(120%);
    pointer-events: none;
    transition:
        transform 0.5s var(--ease-out-back),
        opacity 0.2s ease-out,
        bottom 0.3s var(--ease-out-expo);
}
#toast.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#toast .toast-box {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    padding: 14px 16px 18px;
    background: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 2px var(--mc-border-light),
        var(--bevel),
        0 4px 0 var(--mc-border-dark),
        0 14px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
/* La testata non è più una riga: icona e titolo si sistemano da soli
   nella griglia della scatola. */
#toast .toast-head { display: contents; }
#toast .toast-ico {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    /* 12 celle in 24px: 2px a cella, così i pixel dell'icona restano interi. */
    padding: 10px;
    box-sizing: border-box;
    background: var(--bg-dark);
    border: 2px solid var(--mc-border-dark);
    box-shadow: var(--bevel);
}
/* L'icona è una maschera colorata (arancio, rossa in errore): ogni notifica ne
   chiede una sua con data-icon (showToast, header.js). Disegni 12x12,
   lucchetto e regalo usano evenodd: dove i rettangoli si sovrappongono
   resta un buco (serratura, nastro). */
#toast .toast-ico::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent-orange);
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}
#toast .toast-ico::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M9 2h2v1H9zM8 3h3v1H8zM7 4h3v1H7zM1 5h2v1H1zM6 5h3v1H6zM1 6h3v1H1zM5 6h3v1H5zM2 7h5v1H2zM3 8h3v1H3zM4 9h1v1H4z'/%3E%3C/svg%3E"); }
#toast[data-icon="lock"] .toast-ico::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M4 1h4v1H4zM3 2h1v3H3zM8 2h1v3H8zM2 5h8v6H2zM5 7h2v2H5z'/%3E%3C/svg%3E"); }
#toast[data-icon="unlock"] .toast-ico::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M6 0h4v1H6zM5 1h1v3H5zM10 1h1v3h-1zM2 5h8v6H2zM5 7h2v2H5z'/%3E%3C/svg%3E"); }
#toast[data-icon="error"] .toast-ico::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 1h4v6H4zM5 7h2v1H5zM4 9h4v2H4z'/%3E%3C/svg%3E"); }
/* Texture Minecraft al posto della maschera (item della ricompensa, carta
   per l'IP): 16px nativi in 24, restano a pixel pieni. */
#toast[data-icon="img"] .toast-ico::before { display: none; }
/* 16px nativi → 32px: scala 2x intera, senza il padding da 12 celle. */
#toast[data-icon="img"] .toast-ico { padding: 6px; }
#toast .toast-ico img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
#toast.show .toast-ico { animation: toast-slot-pop 0.45s var(--ease-out-back) both; }
@keyframes toast-slot-pop {
    from { scale: 0.6; }
    to   { scale: 1; }
}
#toast #toast-title {
    align-self: end;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: var(--accent-orange);
    text-shadow: 2px 2px 0 var(--mc-border-dark);
}
#toast .toast-text {
    align-self: start;
    margin: 0;
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    line-height: 1.15;
    color: #fff;
    word-break: break-word;
}

/* Barra del tempo: si svuota a scatti, come si consuma una durability.
   --toast-ms la scrive showToast (header.js). */
#toast .toast-box::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 4px;
    background: var(--accent-orange);
    transform-origin: left;
    transform: scaleX(0);
}
#toast.show .toast-box::after {
    animation: toast-drain var(--toast-ms, 3400ms) steps(24, end) forwards;
}
@keyframes toast-drain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Variante d'errore: stessi pezzi, in rosso. */
#toast.is-error .toast-ico::before { background: #ef4444; }
#toast.is-error #toast-title { color: #ef4444; }
#toast.is-error .toast-box::after { background: #ef4444; }

@media (prefers-reduced-motion: reduce) {
    #toast { transition: opacity 0.2s ease-out; transform: none; }
    #toast.show .toast-ico { animation: none; }
}


/* ============================================================
   FOOTER
   ------------------------------------------------------------
   Due righe centrate e nient'altro: i documenti e la firma. Il
   marchio con la descrizione stava qui a ripetere quello che la
   pagina ha già detto in cima e per tutta la sua altezza, e un piede
   di pagina non è il posto dove ripresentarsi.
   ============================================================ */
.site-footer {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: clamp(26px, 3.2vh, 40px) clamp(16px, 4vw, 48px) clamp(22px, 2.8vh, 32px);
}
.footer-inner {
    width: min(900px, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

/* I documenti su una riga sola. Il separatore è un quadrato di 5px:
   un pallino o una barra verticale sarebbero le uniche due forme
   della pagina a non essere fatte di pixel. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.footer-legal a {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.48rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-legal a:hover { color: var(--accent-orange); }
.footer-legal a + a::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 12px;
    vertical-align: 2px;
    background: #2f3444;
}

.footer-copy {
    margin: 0;
    font-size: 0.98rem;
    color: #434b59;
}


/* ============================================================
   MODALI CONDIVISI (Guscio, animazioni, testata)
   ============================================================ */
@keyframes modalBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalBoxIn {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
#legal-modal.modal-open > div:first-child {
    animation: modalBackdropIn 0.25s ease-out;
}
#legal-modal.modal-open .mc-window {
    animation: modalBoxIn 0.4s var(--ease-out-back);
}
#legal-modal.modal-closing {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

#legal-modal .mc-window {
    transition: none;
}
#legal-modal .mc-window:hover {
    transform: none;
    box-shadow: 0 4px 0 var(--mc-border-dark);
}

.modal-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 90vh;
    margin-inline: 8px;
    background: var(--bg-panel);
    border-radius: 3px;
}
.legal-shell { max-width: 820px; max-height: 86vh; }
@media (min-width: 640px) {
    .modal-shell { margin-inline: 16px; max-height: 85vh; }
}

.modal-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #191b23;
    border-bottom: 2px solid #0f1118;
}
.modal-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(20px, 4vw, 30px);
    background: #191b23;
    border-bottom: 2px solid #0f1118;
}
.modal-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-eyebrow {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.46rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
}
.modal-title {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
    line-height: 1.4;
    color: #fff;
}
.modal-title span { color: var(--accent-orange); }

.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: #dc2626;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 4px 0 #991b1b;
    cursor: pointer;
    transition: filter 0.12s, transform 0.1s, box-shadow 0.1s;
}
.modal-close-btn:hover { filter: brightness(110%); }
.modal-close-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #991b1b;
}
.modal-close-btn svg {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(20px, 3.2vw, 32px);
}

.modal-tabs {
    display: flex;
    gap: 4px;
    margin: 18px clamp(20px, 4vw, 30px);
    padding: 5px;
    background: #0d0e12;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
}
.tab-px {
    flex: 1;
    padding: 11px 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.16s, background-color 0.16s;
}
.tab-px:hover { color: #e5e7eb; }
.tab-px.active {
    color: #fff;
    background: var(--accent-orange);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.28);
    box-shadow:
        inset 2px 2px 0 #fbbf24,
        inset -2px -2px 0 var(--accent-orange-dark);
}

/* ============================================================
   DOCUMENTI LEGALI (regolamento, termini, privacy)
   ============================================================ */
.legal-doc {
    padding: clamp(22px, 2.4vw, 28px) clamp(18px, 3.2vw, 44px) clamp(40px, 5vw, 60px);
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--text-gray);
    overscroll-behavior: contain;
}
.legal-doc p { margin: 0; }

/* Misura di lettura. La finestra sta a 900px perche' la griglia delle
   sanzioni vuole due colonne, ma il testo corrente su 900px sono ~110
   caratteri per riga: il doppio di quello che si legge senza perdere il
   segno a fine riga. Il sito questa regola ce l'ha gia' (.sec-narrow per
   le domande, .sec-sub a 620px): qui la colonna si stringe sul testo
   mentre le griglie restano larghe quanto la finestra. */
.legal-doc > p,
.legal-doc > ul,
.legal-doc > ol,
.legal-block,
.legal-note { max-width: 64ch; }

/* Enfasi chiara e non arancione, come .sec-text b: nel documento
   l'arancione resta agli elementi di struttura (sottotitoli, pallini,
   pene, numeri di clausola, link), se no ogni paragrafo diventa una
   collana di parole accese e non si capisce piu' cosa vale guardare. */
.legal-doc strong {
    font-weight: 700;
    color: #e5e7eb;
}
.legal-doc a {
    color: var(--accent-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Allineata a sinistra come la testata del modale che le sta sopra e come
   il testo che le sta sotto: prima erano tre allineamenti diversi in
   centocinquanta pixel di altezza. */
.legal-head {
    display: grid;
    justify-items: start;
    gap: 18px;
    margin-bottom: 40px;
    text-align: left;
}
/* Il primo titolo dopo la testata non ha bisogno del suo stacco: i due
   margini si sommavano in un buco di ottanta pixel. */
.legal-head + .legal-h { margin-top: 0; }
.legal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #0a0c11;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--mc-border-dark);
}
.legal-meta svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}
.legal-meta-text {
    display: grid;
    gap: 3px;
}
.legal-meta-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.4rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6b7280;
}
.legal-meta-value {
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--accent-orange);
}
.legal-title {
    position: relative;
    margin: 0;
    padding-bottom: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1rem, 0.8rem + 0.9vw, 1.3rem);
    line-height: 1.5;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
/* Il documento non puo' gridare piu' forte della finestra che lo contiene:
   stessa scala di .modal-title, e il filetto scende a 64px come
   .retro-rule perche' segue un titolo piu' corto. */
.legal-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    background: var(--accent-orange);
    box-shadow: 0 3px 0 var(--accent-orange-dark);
}
.legal-h {
    margin: 40px 0 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.88rem;
    line-height: 1.7;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.legal-h:first-child { margin-top: 0; }
.legal-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 14px;
    font-family: 'Press Start 2P', cursive;
    font-weight: normal;
    font-size: 0.6rem;
    line-height: 1.7;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-orange);
}
.legal-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
}
.legal-list li {
    position: relative;
    padding-left: 22px;
}
.legal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: var(--accent-orange);
}
.legal-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    counter-reset: clausola;
}
.legal-steps li {
    position: relative;
    padding-left: 46px;
    counter-increment: clausola;
}
/* La cifra sta in un riquadro incassato, come le pene e come il numero di
   capitolo delle sezioni (.sec-eyebrow b). Riquadro scuro e non arancione
   pieno: l'unico blocco di arancione acceso della finestra resta la
   scheda attiva. */
.legal-steps li::before {
    content: counter(clausola, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--accent-orange);
    background: #0a0c11;
    border: 2px solid var(--mc-border-dark);
    border-radius: 2px;
}
.legal-rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 8px;
}
/* Ogni sanzione e' una scatola col rilievo interno del resto del sito
   (--bevel), non una riga separata da un filo chiaro: il filo era l'unico
   bordo sottile di tutto il sito, che altrove usa bordi pieni da 2px. */
.legal-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: #191b23;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: var(--bevel);
}
.legal-rule-name {
    font-weight: 600;
    color: #e5e7eb;
}
.legal-pen {
    flex-shrink: 0;
    padding: 2px 9px;
    background: #0a0c11;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    line-height: 1.3;
    white-space: nowrap;
    color: #f87171;
}
.legal-pen.is-soft { color: var(--accent-orange); }
.legal-note {
    position: relative;
    padding: 13px 17px;
    background: #191b23;
    border: 2px solid var(--accent-orange-dark);
    color: var(--text-gray);
}
.legal-note > * + * { margin-top: 6px; }
.legal-note.is-warn {
    background: #1d1417;
    border-color: #7f1d1d;
}
.legal-note::after {
    content: '';
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background:
        linear-gradient(var(--bg-panel) 0 0) 0 0 / 2px 2px no-repeat,
        linear-gradient(var(--bg-panel) 0 0) 100% 0 / 2px 2px no-repeat,
        linear-gradient(var(--bg-panel) 0 0) 0 100% / 2px 2px no-repeat,
        linear-gradient(var(--bg-panel) 0 0) 100% 100% / 2px 2px no-repeat;
}
.legal-note-label {
    display: block;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.55rem;
    line-height: 1.6;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent-orange);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.legal-note.is-warn .legal-note-label { color: #fca5a5; }
.legal-note strong { color: #e5e7eb; }
.legal-note.is-warn strong { color: #fca5a5; }
.legal-block {
    display: grid;
    gap: 14px;
}
.legal-section:not(.hidden) {
    animation: modalBoxIn 0.35s var(--ease-out-expo);
}


/* ============================================================
   BOTTONE INFORMAZIONE + FUMETTO
   ------------------------------------------------------------
   È il fumetto degli oggetti di Minecraft portato sul sito: riquadro
   scurissimo, bordo pieno da 2px, nessuna ombra sfocata, e il testo su
   due livelli — il nome in cima, la descrizione sotto in grigio, come
   quando si passa sopra a un oggetto nell'inventario.

   Niente punta triangolare: nel gioco il fumetto non ce l'ha, e una
   punta obliqua sarebbe l'unica diagonale di tutto il sito.

   Sta tutto nel CSS: si apre su :hover per il mouse e su :focus-within
   per tastiera e tocco (un <button> prende il fuoco anche al tap). Zero
   JS, quindi zero eccezioni alla CSP e niente da registrare in
   orionActions.
   ============================================================ */
.info-px {
    position: relative;
    display: inline-flex;
    /* Sopra la riga, non accanto: e' un richiamo in apice, come il numero
       di una nota, non una parola in piu' nella frase. */
    vertical-align: super;
    margin-left: 4px;
}

/* Variante da angolo: il bottone si stacca dal testo e va nello spigolo
   alto-destro del riquadro che lo contiene (che deve essere position:
   relative). Serve quando la scritta e' un titolo dentro una scatola. */
.info-px-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    margin-left: 0;
}

/* Le entrate a scorrimento lasciano addosso agli elementi una transform
   e un will-change permanenti (js/animations.js): ognuno diventa un
   contesto di impilamento, quindi un fumetto aperto dentro il terzo
   elemento di una lista finisce SOTTO al quarto, per quanto alto sia il
   suo z-index. Il fumetto non puo' risolverlo da solo: va sollevato il
   contenitore che lo intrappola, e solo per il tempo in cui e' aperto. */
[data-reveal]:has(.info-px:hover),
[data-reveal]:has(.info-px:focus-within) {
    position: relative;
    z-index: 60;
}

.info-px-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Il segno e' alto una decina di pixel: troppo pochi da centrare con
       un dito. Il padding allarga l'area da toccare e il margine negativo
       la riassorbe, cosi' il bersaglio cresce ma la riga di testo resta
       ferma dov'era. */
    padding: 7px;
    margin: -7px;
    color: #6b7280;
    background: none;
    border: 0;
    /* Il puntatore dice che non si clicca per andare da qualche parte:
       la spiegazione arriva restando fermi. */
    cursor: help;
    transition: color 0.12s;
}
/* Il segno e' una lettera nel carattere del sito, non piu' un disegno:
   il cerchio a pixel non poteva scendere sotto i 16px senza che la "i"
   dentro diventasse illeggibile, e a quella misura pesava troppo per un
   richiamo. Press Start 2P e' la stessa faccia delle etichette piccole
   qui attorno, quindi resta retro occupando un terzo dello spazio.
   Il <button> non eredita il carattere dalla pagina: va detto qui. */
.info-px-btn i {
    font-family: 'Press Start 2P', cursive;
    font-style: normal;
    font-size: 0.68rem;
    line-height: 1;
}
.info-px:hover .info-px-btn,
.info-px:focus-within .info-px-btn {
    color: var(--accent-orange);
}
.info-px-btn:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

/* Ancorato a destra e non al centro: il bottone sta in fondo a una
   riga di testo, e un fumetto centrato uscirebbe dal bordo della
   sezione. Aprendosi verso sinistra resta sempre dentro. */
.info-px-tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: max-content;
    max-width: min(280px, 72vw);
    padding: 10px 12px;
    /* Il fumetto può stare dentro un titolo a pixel maiuscolo: qui il
       testo torna a essere testo, senza ereditarne carattere, spaziatura
       e maiuscole. */
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: var(--text-gray);
    background: #0a0c11;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
    pointer-events: none;
}
/* La prima riga è il nome dell'oggetto, com'è nel gioco. */
.info-px-tip b {
    display: block;
    margin-bottom: 5px;
    font-family: 'Press Start 2P', cursive;
    font-weight: normal;
    font-size: 0.5rem;
    line-height: 1.7;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-orange);
}
.info-px:hover .info-px-tip,
.info-px:focus-within .info-px-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .info-px-tip {
        transition: none;
        transform: none;
    }
}