/* ============================================================
   OrionMC — base.css
   Design system: variabili, componenti, animazioni, utility.
   NON contiene Tailwind reset (usa tailwind.min.css separato).
   ============================================================ */

/* ── Variabili ────────────────────────────────────────────── */
:root {
    --bg-dark:           #13151b;
    --bg-panel:          #1e212b;
    --accent-orange:     #f59e0b;
    /* Tailwind orange-500 è un altro arancione (#f97316): allineato al
       token, così text-/hover:/border-orange-500 nel markup restano uno. */
    --color-orange-500:  var(--accent-orange);
    --accent-orange-dark:#b45309;
    --text-gray:         #9ca3af;
    --mc-border-light:   #4b5563;
    --mc-border-dark:    #111827;

    /* Smusso del pannello di gioco: luce sullo spigolo alto-sinistro, ombra
       su quello basso-destro. È nato sulle card della home (.feat-card);
       ora è un token perché store e dashboard usano le stesse scatole e
       senza rilievo interno sembravano rettangoli piatti accanto a quelle.
       Sono due ombre INTERNE: vanno in testa alla lista di box-shadow,
       prima dell'estrusione piena. */
    --bevel:             inset 2px 2px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 0 rgba(0, 0, 0, 0.32);
    --bevel-hover:       inset 2px 2px 0 rgba(255, 255, 255, 0.12), inset -2px -2px 0 rgba(0, 0, 0, 0.38);

    /* Curve delle animazioni. Stanno qui, nel foglio che carica ogni
       pagina, perché le usano ui.css, home.css, sections.css, store.css
       e not-linked.css: se mancano, `animation: X 0.85s var(--ease-out-expo)`
       è una dichiarazione invalida e viene scartata INTERA — l'elemento
       resta sul suo stato iniziale (per .hero-in: opacity 0, invisibile). */
    --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:     cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ── Base Body ────────────────────────────────────────────── */

/* Niente scroll orizzontale, mai.
   Il taglio va sulla RADICE, non solo sul body: le entrate [data-reveal]
   partono con uno scale() e, al primo paint, sforano di lato. Su mobile
   Chrome allarga il layout viewport per farci stare quell'overflow (~1.1x)
   e non lo restringe più quando l'animazione finisce: la pagina resta
   scrollabile a destra e visibilmente decentrata. Tagliando sulla radice
   l'overflow non è mai scrollabile e il viewport non si allarga.

   `clip` e non `hidden`: hidden creerebbe un contenitore di scroll e
   romperebbe la navbar in position: sticky. La riga `hidden` prima serve
   solo da fallback per i browser senza `clip` (Safari < 16). */
html {
    overflow-x: hidden;
    overflow-x: clip;
    /* Riserva sempre lo spazio della scrollbar: aprendo un modale il blocco
       dello scroll non fa piu' scivolare la pagina di lato. */
    scrollbar-gutter: stable;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: white;
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
}

/* ── Tipografia ───────────────────────────────────────────── */
h1, h2, h3, .retro-font {
    font-family: 'Press Start 2P', cursive;
    text-transform: uppercase;
}

.code-font {
    font-family: 'VT323', monospace;
}

/* Skin e texture di Minecraft: nessuna interpolazione, i pixel restano pixel.
   Non è una utility di Tailwind, va definita qui. */
.pixelated {
    image-rendering: pixelated;
}

/* ── Componente: Finestra MC (3D Box Effect) ──────────────── */
.mc-window {
    background-color: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--mc-border-dark);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 4px;
}

.mc-window:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--mc-border-dark);
}

/* Variante senza hover animation */
.mc-window-static {
    transition: none !important;
}
.mc-window-static:hover {
    transform: none !important;
    box-shadow: 0 4px 0 var(--mc-border-dark) !important;
}

/* Variante con ombra arancione */
.mc-window-orange {
    background-color: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    box-shadow: 0 6px 0 var(--accent-orange-dark);
    border-radius: 4px;
}

/* ── Componente: Pulsante Principale ─────────────────────── */
.btn-main {
    background-color: var(--accent-orange);
    color: white;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    box-shadow: 0 4px 0 var(--accent-orange-dark);
    transition: all 0.1s;
    cursor: pointer;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-decoration: none;
}
.btn-main:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--accent-orange-dark);
}
.btn-main:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--accent-orange-dark);
}

/* ── Componente: Pulsante Logout ─────────────────────────── */
.btn-logout {
    background-color: #dc2626 !important;
    color: white !important;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    box-shadow: 0 4px 0 #991b1b !important;
    transition: all 0.1s;
    cursor: pointer;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    border: 2px solid var(--mc-border-dark) !important;
    border-radius: 4px !important;
    padding: 0.25rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-logout:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #991b1b !important;
}
.btn-logout:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #991b1b !important;
}

/* ── Componente: Link Navbar ─────────────────────────────── */
.nav-link {
    position: relative;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.75rem;
    color: var(--text-gray);
    transition: color 0.15s;
    padding: 0.5rem 0;
    text-decoration: none;
}
.nav-link:hover {
    color: white;
    text-shadow: 2px 2px 0px var(--accent-orange-dark);
}
.nav-link::before {
    content: '>';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    color: var(--accent-orange);
}
.nav-link:hover::before {
    animation: retroBlinkArrow 0.5s step-end infinite;
}
.nav-link-active {
    color: #ffffff !important;
    text-shadow: 2px 2px 0px var(--accent-orange-dark) !important;
}

/* ── Componente: Tab Button ──────────────────────────────── */
.tab-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.75rem;
    color: var(--text-gray);
    transition: all 0.2s;
    border: 2px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    background: transparent;
}
.tab-btn:hover { color: white; }
.tab-btn.active {
    background-color: var(--accent-orange);
    color: white;
    border-color: var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--accent-orange-dark);
    transform: translateY(-2px);
    border-radius: 4px;
}
.tab-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--accent-orange-dark);
}

/* ── Componente: Staff Avatar Selector ───────────────────── */
.staff-avatar {
    transition: all 0.2s;
    border: 3px solid transparent;
    cursor: pointer;
    filter: grayscale(80%);
}
.staff-avatar:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}
.staff-avatar.active {
    border-color: var(--accent-orange);
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* ── Componente: Status Badge ────────────────────────────── */
.status-btn-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 4px;
    padding: 4px 10px;
}
.status-btn-offline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 4px;
    padding: 4px 10px;
}

/* ── Componente: Progress Bar Retro ──────────────────────── */
.progress-bar-container {
    background-color: #0c0e12;
    border: 3px solid var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--mc-border-dark);
    image-rendering: pixelated;
}
.progress-bar-fill {
    background-color: var(--accent-orange);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 0 10px rgba(245, 158, 11, 0.4);
    height: 100%;
    position: relative;
}
.progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(19, 21, 27, 0.5) 8px,
        rgba(19, 21, 27, 0.5) 10px
    );
}

/* ── Barra di scorrimento ─────────────────────────────────────
   Una regola sola, senza selettore: i pseudo-elementi ::-webkit-scrollbar
   senza soggetto valgono per OGNI elemento che scorre — la pagina, i
   modali, i pannelli interni, le tendine. Prima la barra della finestra
   restava quella di sistema (grigia, arrotondata, aliena a tutto il
   resto) e solo i riquadri con .CustomScrollbar ne avevano una propria.
   Quella classe adesso non serve più a niente, ma resta innocua nel
   markup delle pagine che la portano.

   Il cursore è lo stesso blocco degli altri pezzi arancioni del sito:
   spigoli vivi (border-radius 0), luce sullo spigolo alto-sinistro e
   ombra su quello basso-destro, ottenute con due ombre INTERNE — un
   box-shadow esterno su un cursore di barra verrebbe ritagliato.

   Il bordo trasparente con background-clip: padding-box è il modo di
   dare aria fra cursore e binario: il binario si vede attraverso il
   bordo, quindi il blocco arancione sembra appoggiato dentro la guida
   invece che incollato ai suoi lati.

   Firefox non ha questi pseudo-elementi e accetta solo i due colori:
   la forma resta quella di sistema, il colore no.

   La proprietà standard scrollbar-color va data SOLO a chi non ha i
   pseudo-elementi. Chrome, dalla 121, la riconosce, e quando la trova
   spegne del tutto la barra personalizzata e ne disegna una di sistema
   colorata: tornavano le due frecce agli estremi, e nessuna regola
   ::-webkit-scrollbar-button riusciva più a toglierle, perché non
   venivano nemmeno lette. Il test sul selettore separa i due motori
   senza sniffare il browser: dove ::-webkit-scrollbar esiste vale il
   blocco qui sotto, dove non esiste valgono i due colori. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: auto;
        scrollbar-color: var(--accent-orange) #0b0d12;
    }
}

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
::-webkit-scrollbar-track {
    background: #0b0d12;
    border-left: 2px solid var(--mc-border-dark);
}
/* La barra orizzontale ha il filetto sopra, non a sinistra. */
::-webkit-scrollbar-track:horizontal {
    border-left: none;
    border-top: 2px solid var(--mc-border-dark);
}
::-webkit-scrollbar-thumb {
    background-color: var(--accent-orange);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 0;
    box-shadow:
        inset 2px 2px 0 #fbbf24,
        inset -2px -2px 0 var(--accent-orange-dark);
}
::-webkit-scrollbar-thumb:hover {
    background-color: #fbbf24;
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--accent-orange-dark);
    box-shadow:
        inset 2px 2px 0 var(--accent-orange),
        inset -2px -2px 0 #7c3d06;
}
/* Le frecce agli estremi e il quadratino dove le due barre si
   incontrano: nel resto del sito non c'è niente di simile.
   display:none da solo non basta su tutte le versioni di Chrome —
   le frecce restavano disegnate col colore del cursore — quindi le
   si azzera anche di misura. */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:horizontal,
::-webkit-scrollbar-button:vertical {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
::-webkit-scrollbar-corner { background: #0b0d12; }

/* ── Navbar Scroll Effect ────────────────────────────────── */
#navbar {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 0 auto;
}
/* In cima alla pagina la barra è trasparente e logo, voci e bottoni restano
   tre isole sospese nel vuoto. Una velatura che sfuma verso il basso li tiene
   insieme come un'unica barra senza chiudere l'hero con una linea netta. */
#navbar:not(.nav-scrolled) {
    background-image: linear-gradient(
        180deg,
        rgba(8, 9, 13, 0.96) 0%,
        rgba(8, 9, 13, 0.62) 58%,
        transparent 100%
    );
}
#navbar.nav-scrolled {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    background-color: var(--bg-panel) !important;
    border: 2px solid var(--mc-border-dark) !important;
    border-bottom: 4px solid var(--accent-orange) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 4px 0 var(--mc-border-dark) !important;
    width: 92% !important;
    max-width: 1200px !important;
    border-radius: 8px !important;
    top: 15px !important;
}

/* ── Cookie Buttons ──────────────────────────────────────── */
.cookie-btn-accept {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    background-color: var(--accent-orange);
    color: white;
    border: 2px solid var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--accent-orange-dark);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s;
    text-transform: uppercase;
    border-radius: 4px;
    width: 100%;
}
.cookie-btn-accept:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--accent-orange-dark);
}
.cookie-btn-accept:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--accent-orange-dark);
}
.cookie-btn-reject {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    background-color: #2a2e3d;
    color: var(--text-gray);
    border: 2px solid var(--mc-border-light);
    box-shadow: 0 4px 0 var(--mc-border-dark);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s;
    text-transform: uppercase;
    border-radius: 4px;
    width: 100%;
}
.cookie-btn-reject:hover {
    color: white;
    border-color: white;
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--mc-border-dark);
}
.cookie-btn-reject:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--mc-border-dark);
}

/* ── Privacy Button States ───────────────────────────────── */
.btn-active-privacy {
    background-color: var(--accent-orange);
    color: white;
    border-color: var(--mc-border-dark);
    box-shadow: 0 4px 0 var(--accent-orange-dark);
    transform: translateY(2px);
}
.btn-active-privacy-red {
    background-color: #dc2626;
    color: white;
    border-color: var(--mc-border-dark);
    box-shadow: 0 4px 0 #991b1b;
    transform: translateY(2px);
}

/* ── Testo / Grafica ─────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(to right, #fb923c, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Stats: Profile Card & Members (stats / user) ── */
.profile-card {
    background-image: linear-gradient(145deg, #16243d 0%, #0f172a 100%);
    border: 1px solid #1e3a8a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
}
.avatar-container {
    border: 3px solid #3b82f6;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}
.members-window {
    background: #0b0d11;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.member-row {
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.member-row:hover {
    background: rgba(59, 130, 246, 0.05);
}

/* ── Animazioni ──────────────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-15px); }
}
.character-float {
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.9); }
}
.pulse-light {
    animation: pulse-dot 2s infinite;
}

@keyframes retro-blink-anim {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
.retro-blink {
    animation: retro-blink-anim 1.2s steps(2, start) infinite;
}

@keyframes waiting-dots {
    0%, 100% { content: '.'; }
    25%, 75%  { content: '..'; }
    50%       { content: '...'; }
}
.waiting-text::after {
    content: '.';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: waiting-dots 1.5s infinite;
}

/* ── Staff: cambio membro ─────────────────────────────────
   Un solo stato (.staff-out) sul contenitore: tutto esce insieme e
   rientra scaglionato. Niente keyframe sovrapposti = niente flicker. */
.staff-fx {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--staff-in-delay, 0ms);
}
#staff-display-card.staff-out .staff-fx {
    opacity: 0;
    transform: translate3d(calc(var(--staff-dir, -1) * 26px), 0, 0);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-delay: 0ms;
}
/* Salto di lato prima del rientro: va applicato senza animarlo. */
#staff-display-card.staff-instant .staff-fx { transition: none; }

/* Ordine di entrata: foto -> nome -> filetto -> descrizione */
#staff-image       { --staff-in-delay: 0ms;   }
#staff-info-header { --staff-in-delay: 70ms;  }
#staff-rule        { --staff-in-delay: 130ms; }
#staff-desc        { --staff-in-delay: 180ms; }

@keyframes retroBlinkArrow {
    0%, 100% { opacity: 1; left: -20px; }
    50%       { opacity: 0; left: -18px; }
}


/* ============================================================
   FONDO DELLA PAGINA
   ------------------------------------------------------------
   Un fondale alto ~190vh che sale mentre si scende: arrivati al
   footer se n'è attraversata tutta l'altezza. Non è fisso — un
   fondo che resta fermo mentre il contenuto gli scorre davanti si
   vede subito che non gli appartiene.

   Sopra non c'è nessuna figura con un contorno. Su un fondo quasi
   nero qualunque bordo netto diventa la prima cosa che si guarda, e
   la prima cosa che si guarda non può essere lo sfondo: due pianeti
   e le loro orbite, per quanto scuri, si mettevano davanti al testo.
   Resta un velo largo e senza bordi, e la rampa verticale.

   La rampa ha quattro fermate su colori vicinissimi: il passaggio si
   sente scendendo, ma non c'è un punto in cui si possa dire "qui
   finisce una zona e ne comincia un'altra".

   Se un giorno c'è un vero PNG lungo da metterci, basta assegnarlo
   a --bg-art: il livello lo mette sopra a tutto il resto, già
   dimensionato e già agganciato allo scorrimento.
   ============================================================ */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-sky {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    /* Più alto della finestra: l'eccedenza è la corsa che ha per
       scorrere lungo tutta la pagina. */
    height: 190vh;
    will-change: transform;

    /* Un velo solo, largo quasi due schermate e messo di traverso in
       alto: la sua curva si legge appena e serve unicamente a non
       lasciare piatta la metà alta della pagina. Il salto di colore
       più forte che produce è di quattro livelli su 255 — si sente,
       non si vede.

       Sotto, la rampa: quattro fermate su colori vicinissimi. */
    background-color: #070910;
    background-image:
        radial-gradient(ellipse 170% 92% at 76% 4%,
            rgba(148, 163, 184, 0.042) 0%,
            rgba(148, 163, 184, 0.020) 46%,
            transparent 78%),
        linear-gradient(to bottom,
            #05070d 0%,
            #0d101a 40%,
            #0a0d16 74%,
            #06070c 100%);
    background-repeat: no-repeat;
}

/* Il PNG lungo, quando ci sarà: si sovrappone a tutto e si allunga
   con il fondale. Senza --bg-art il livello non esiste. */
.bg-sky::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-art, none);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: var(--bg-art-opacity, 1);
}

/* Righe di scansione: periodo 3px, una riga scura e due trasparenti.
   Queste restano ferme — sono l'effetto del vetro davanti, non una
   cosa che sta nel mondo dietro. */
.bg-scan {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.09) 0 1px,
        transparent 1px 3px
    );
}

#starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    z-index: 0;
    pointer-events: none;
}