/* =============================================================================
   AceV Network - foglio di stile unico
   Palette presa dal brand reale del network: oro (MOTD del proxy Minecraft) e
   ciano (colore degli embed del bot) su fondo scuro.
   Nessun font esterno: la CSP consente solo risorse locali.
   ========================================================================== */

:root {
    /* Fondo piu' profondo: piu' e' scuro il nero, piu' il ciano e l'oro sembrano ACCESI.
       Prima fondo e superfici erano quasi lo stesso colore e i bordi stavano al 9% di
       bianco: tutto leggibile, tutto spento. Qui le superfici si staccano e i bordi
       hanno una tinta fredda, cosi' i riquadri si vedono invece di indovinarsi. */
    --bg:            #05070c;
    --bg-alt:        #0a0f18;
    --surface:       #111826;
    --surface-2:     #18202f;   /* riquadri in rilievo e stati hover */
    --border:        rgba(125, 175, 235, .16);
    --border-hot:    rgba(34, 232, 255, .45);
    --text:          #f2f6fb;
    --muted:         #a3b4cb;

    /* Ciano piu' saturo. L'oro NON si tocca: e' il colore del MOTD del proxy, e' il brand. */
    --bot:           #22e8ff;
    --bot-dim:       #00a8c8;
    --mc:            #ffd700;
    --mc-dim:        #c9a800;
    --ace:           #c58cff;   /* il piano Ace, gia' usato sulle schede */
    --win:           #3ddc84;   /* online, disponibile, riuscito */

    /* Bagliori. Un accento che EMETTE luce e' la differenza fra un pannello e un'insegna. */
    --glow-bot:      0 0 28px rgba(34, 232, 255, .32);
    --glow-mc:       0 0 28px rgba(255, 215, 0, .28);
    --glow-testo:    0 0 22px rgba(34, 232, 255, .35);

    --header-h:      66px;   /* altezza fissa: il bivio ci sottrae ESATTAMENTE questa
                                per occupare una schermata intera, senza avanzi da scrollare */
    --wrap:          1120px;
    --radius:        14px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Le due sorgenti di luce stanno su HTML, non su body, e non e' un dettaglio:
   il reticolo qui sotto e' un figlio di body con z-index negativo, quindi verrebbe
   dipinto DIETRO allo sfondo di body e non si vedrebbe affatto. Sul fondo della
   pagina (html) invece il reticolo ci finisce sopra, e sotto al contenuto. */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background:
        radial-gradient(ellipse 90% 55% at 12% -8%, rgba(34, 232, 255, .13), transparent 62%),
        radial-gradient(ellipse 80% 55% at 92% -4%, rgba(255, 215, 0, .10),  transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    background: transparent;
}

/* Reticolo tecnico, appena percettibile: da' una superficie al nero invece di lasciarlo
   piatto. Sta sotto a tutto e non intercetta il puntatore. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 175, 235, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 175, 235, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    /* Sfuma verso il basso: in cima si intuisce, piu' giu' sparisce e non disturba il testo. */
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

a { color: inherit; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }

.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--surface); color: var(--text); padding: .75rem 1.25rem;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--bot); outline-offset: 3px; }

/* ------------------------------------------------------------------ header */

.site-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    height: var(--header-h);
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    background: rgba(10, 12, 16, .82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    text-decoration: none; font-weight: 700; letter-spacing: .02em;
}
.brand__mark { color: var(--mc); font-size: 1.1rem; line-height: 1; }
.brand__name { font-size: 1.05rem; }
.brand__sub {
    color: var(--muted); font-weight: 500; margin-left: .45rem;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
}

.site-nav { display: flex; gap: .35rem; }
.site-nav a {
    text-decoration: none; color: var(--muted);
    padding: .45rem .9rem; border-radius: 999px;
    font-size: .93rem; font-weight: 500;
    transition: color .18s ease, background-color .18s ease;
}
.site-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.site-nav a.is-active { color: var(--text); background: rgba(255, 255, 255, .09); }

/* ------------------------------------------------------- strato 1: il bivio */

/* Il bivio occupa la schermata intera meno l'intestazione: chi scrolla di un colpo
   arriva subito al contenuto sotto, senza un avanzo di gate da superare. */
.gate {
    display: flex;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
}

.gate__half {
    flex: 1 1 50%;
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    gap: .75rem;
    padding: clamp(2rem, 6vw, 5rem);
    text-decoration: none;
    overflow: hidden;
    transition: flex-grow .5s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}

.gate__half::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 100%, currentColor 0%, transparent 62%);
    opacity: .13; transition: opacity .4s ease; pointer-events: none;
    z-index: 1;
}

/* Le due meta' sono due mondi: si tingono davvero, non si accennano soltanto. */
.gate__half--bot {
    color: var(--bot);
    background:
        radial-gradient(ellipse 100% 70% at 20% 100%, rgba(34, 232, 255, .16), transparent 65%),
        linear-gradient(160deg, #0a1721, #04070c);
}
.gate__half--mc {
    color: var(--mc);
    background:
        radial-gradient(ellipse 100% 70% at 80% 100%, rgba(255, 215, 0, .15), transparent 65%),
        linear-gradient(200deg, #1b160a, #080704);
    border-left: 1px solid var(--border);
}

.gate__half:hover, .gate__half:focus-visible { flex-grow: 1.35; }
.gate__half:hover::after, .gate__half:focus-visible::after { opacity: .26; }

.gate__eyebrow {
    font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
    color: currentColor; opacity: .85; font-weight: 600;
}

.gate__title {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 800; letter-spacing: -.04em;
    color: var(--text); margin: 0;
}

.gate__desc {
    color: var(--muted); max-width: 34ch; margin: 0;
    font-size: clamp(.98rem, 1.4vw, 1.08rem);
}

.gate__cta {
    margin-top: 1rem; font-weight: 600; color: currentColor;
    display: inline-flex; align-items: center; gap: .5rem;
}
.gate__cta span { transition: transform .25s ease; }
.gate__half:hover .gate__cta span { transform: translateX(5px); }


/* --------------------------------------------------- freccia "scorri in basso"

   Il bivio occupa una schermata intera: senza un segnale, chi arriva non ha modo di sapere
   che sotto c'e' altro. Compare a intervalli invece che pulsare di continuo — un movimento
   perpetuo in fondo allo schermo diventa rumore e si smette di vederlo.
   E' un'ancora vera: chi non intuisce lo scorrimento puo' cliccarla.
*/

.gate__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3vh, 2.25rem);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    color: var(--text);
    text-decoration: none;
    opacity: .55;
    transition: opacity .3s ease;
}
.gate__scroll:hover, .gate__scroll:focus-visible { opacity: 1; }

.gate__scroll__label {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    animation: etichetta-scorri 5s ease-in-out infinite;
}

.gate__scroll svg { width: 26px; height: 38px; overflow: visible; }

/* I tre segni partono sfalsati: si legge come un'onda che scende, non come tre lampeggi. */
/* Stato base VISIBILE: l'animazione aggiunge il movimento, non l'esistenza.
   Prima partiva da opacita' 0 e con le animazioni disattivate la freccia
   spariva del tutto — cioe' proprio per chi ha piu' bisogno di un indizio fisso. */
.gate__chevron     { opacity: .5; animation: chevron 5s ease-in-out infinite; }
.gate__chevron--2  { animation-delay: .16s; }
.gate__chevron--3  { animation-delay: .32s; }

@keyframes chevron {
    0%, 44%   { opacity: 0;   transform: translateY(-5px); }
    56%       { opacity: .95; transform: translateY(0); }
    72%       { opacity: .55; transform: translateY(4px); }
    88%, 100% { opacity: 0;   transform: translateY(10px); }
}

@keyframes etichetta-scorri {
    0%, 40%, 100% { opacity: .35; }
    58%           { opacity: 1; }
}

/* --------------------------------------------------------------- hero interne */

.hero {
    padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    position: relative;
}
/* Filo di luce in fondo alla hero: chiude la fascia con l'accento della sezione
   invece che con un bordo grigio. */
.hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent);
    opacity: .32;
}
.hero--bot {
    color: var(--bot);
    background:
        radial-gradient(ellipse 70% 100% at 8% 0%, rgba(34, 232, 255, .16), transparent 60%),
        linear-gradient(170deg, #0a1721, var(--bg));
}
.hero--mc {
    color: var(--mc);
    background:
        radial-gradient(ellipse 70% 100% at 8% 0%, rgba(255, 215, 0, .14), transparent 60%),
        linear-gradient(170deg, #1b160a, var(--bg));
}
.hero--legal, .hero--404 { color: var(--bot); background: var(--bg-alt); }
/* Il titolo e il testo tornano al colore normale: `color` sulla hero serve al filo. */
.hero__title, .hero__lead, .hero__actions { color: var(--text); }
.hero__lead { color: var(--muted); }

.hero__eyebrow {
    font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600;
    color: var(--muted);
}
.hero--bot .hero__eyebrow { color: var(--bot); }
.hero--mc  .hero__eyebrow { color: var(--mc); }

.hero__title { font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 800; margin: .35rem 0 .6rem; }
.hero__lead { color: var(--muted); max-width: 60ch; font-size: 1.08rem; margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* -------------------------------------------------------------------- fasce */

.slab { padding: clamp(3rem, 7vw, 5rem) 0; }
.slab--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.slab__title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
.slab__lead { color: var(--muted); max-width: 68ch; font-size: 1.05rem; }

/* numeri */
.stats {
    display: grid; gap: 1rem; margin-top: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.stat__value {
    display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--mc);
}
.stat__label {
    display: block; margin-top: .2rem; color: var(--muted);
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}

/* schede affiancate */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.9rem;
    border-top: 3px solid var(--border);
}
.card--bot { border-top-color: var(--bot); }
.card--mc  { border-top-color: var(--mc); }
.card h2 { font-size: 1.3rem; }
.card p { color: var(--muted); margin: 0 0 1.5rem; }

.btn {
    display: inline-block; text-decoration: none; font-weight: 650;
    padding: .7rem 1.4rem; border-radius: 999px;
    border: 1px solid currentColor;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.btn--bot { color: var(--bot); }
.btn--mc  { color: var(--mc); }
.btn--bot:hover { background: var(--bot); color: #04212a; }
.btn--mc:hover  { background: var(--mc);  color: #2a2200; }
.btn:active { transform: translateY(1px); }

/* elenchi (funzioni bot / modalita MC) */
.features, .modes {
    list-style: none; padding: 0; margin: 2rem 0 0;
    display: grid; gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.features li, .modes li {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: .95rem 1.15rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.features li strong, .modes li strong { font-size: .99rem; }
.features li span, .modes li span { color: var(--muted); font-size: .88rem; }
.modes li { border-left: 3px solid var(--mc-dim); }
.features li { border-left: 3px solid var(--bot-dim); }

/* le due funzioni CORE */
.core { display: grid; gap: 1.25rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.core__item {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.6rem; background: var(--surface);
    position: relative;
}
.core__item::before {
    content: 'incluso sempre';
    position: absolute; top: -.65rem; left: 1.4rem;
    background: var(--bot); color: #04212a;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .2rem .6rem; border-radius: 999px;
}
.core__item h3 { font-size: 1.12rem; margin-top: .4rem; }
.core__item p { color: var(--muted); margin: 0; font-size: .96rem; }

.note {
    margin-top: 2rem; color: var(--muted); font-size: .93rem;
    border-left: 2px solid var(--border); padding-left: 1rem;
}

/* stato del network Minecraft */
.status-card {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 2.25rem; padding: 1.15rem 1.4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); max-width: 620px;
}
.status-card__dot {
    width: 11px; height: 11px; border-radius: 50%; flex: none;
    background: #57606d;
}
.status-card.is-online .status-card__dot {
    background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .16);
}
.status-card.is-offline .status-card__dot {
    background: #e05c5c; box-shadow: 0 0 0 4px rgba(224, 92, 92, .16);
}
.status-card__body { display: flex; flex-direction: column; }
.status-card__body span { color: var(--muted); font-size: .9rem; }
.status-card__time { margin-left: auto; color: var(--muted); font-size: .78rem; }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); }
.site-footer__inner {
    width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto;
    display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between;
    padding: 3rem 0 2rem;
}
.site-footer__brand p { color: var(--muted); font-size: .92rem; margin: .4rem 0 0; max-width: 34ch; }
.site-footer__links { display: flex; gap: 3rem; }
.site-footer__links h3 {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .6rem;
}
.site-footer__links a {
    display: block; text-decoration: none; color: var(--text);
    font-size: .93rem; padding: .15rem 0;
}
.site-footer__links a:hover { color: var(--bot); }
.site-footer__legal {
    text-align: center; color: var(--muted); font-size: .82rem;
    padding: 1.25rem; margin: 0; border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 780px) {
    /* Anche su telefono la scelta deve stare in UNA schermata: il bivio tiene l'altezza
       della finestra meno l'intestazione, e le due meta' se la dividono. Cosi' il primo
       scorrimento porta direttamente al contenuto, non alla seconda meta' del bivio. */
    .gate { flex-direction: column; }
    .gate__half { min-height: 0; flex: 1 1 50%; }
    .gate__half--mc { border-left: 0; border-top: 1px solid var(--border); }
    .gate__half:hover, .gate__half:focus-visible { flex-grow: 1; }
    .site-footer__inner { flex-direction: column; gap: 2rem; }
    .site-footer__links { gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    /* Spegnere tutto in blocco e' la ricetta piu' diffusa, ed e' sbagliata quando un elemento
       ESISTE solo durante l'animazione: la freccia di scorrimento spariva. Qui le transizioni
       rapide e lo scorrimento animato si fermano davvero, la freccia diventa fissa e visibile,
       e il resto rallenta invece di bloccarsi. */
    *, *::before, *::after { transition-duration: .001ms !important; }
    html { scroll-behavior: auto !important; }

    .gate__chevron, .gate__scroll__label { animation: none !important; }
    .gate__chevron { opacity: .6; }
    .gate__scroll__label { opacity: .75; }
    .gate__chevron--2 { opacity: .4; }
    .gate__chevron--3 { opacity: .25; }
}

/* =============================================================================
   Strato 2-3 — pagine di dettaglio (funzioni, piani, comandi, invito, modalita)
   ========================================================================== */

.wrap--narrow { width: min(760px, calc(100% - 3rem)); }

.crumbs { color: var(--muted); font-size: .85rem; margin: 0 0 .5rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs span { margin: 0 .4rem; opacity: .5; }

.slab__title--small { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

.prose { font-size: 1.08rem; color: var(--text); max-width: 62ch; }

/* fascia delle funzioni sempre incluse */
.core-band {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(0, 217, 255, .07), transparent 60%), var(--surface);
    padding: 1.5rem 1.75rem; margin-bottom: 2.5rem;
}
.core-band__label {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--bot); font-weight: 700; margin-bottom: 1rem;
}
.core-band__items { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.core-band__item {
    display: flex; flex-direction: column; gap: .2rem;
    text-decoration: none; color: inherit;
}
.core-band__item strong { font-size: 1rem; }
.core-band__item span { color: var(--muted); font-size: .9rem; }
a.core-band__item:hover strong { color: var(--bot); }

/* colonne dei piani */
.tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tier {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.9rem;
}
.tier--highlight { border-color: var(--bot); box-shadow: 0 0 0 1px var(--bot) inset; }
.tier--waitlist { opacity: .92; }
.tier__head { position: relative; }
.tier__badge {
    position: absolute; top: -2.5rem; right: -.5rem;
    background: var(--bot); color: #04212a;
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: .22rem .6rem; border-radius: 999px;
}
.tier__badge--wait { background: var(--muted); color: var(--bg); }
.tier h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.tier__price { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 .4rem; }
.tier__price span { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .4rem; letter-spacing: 0; }
.tier__price--tbd { font-size: 1.05rem; font-weight: 600; color: var(--muted); }
.tier__for { color: var(--muted); font-size: .93rem; margin: 0 0 1.4rem; }
.tier__inherits { font-size: .82rem; color: var(--muted); margin: 0 0 .6rem; font-style: italic; }
.tier__list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .45rem; }
.tier__list li { font-size: .95rem; padding-left: 1.3rem; position: relative; }
.tier__list li::before { content: '+'; position: absolute; left: 0; color: var(--bot); font-weight: 700; }
.tier__list a { text-decoration: none; }
.tier__list a:hover { color: var(--bot); }
.tier__list-muted { color: var(--muted); }
.tier__cta { margin-top: auto; text-align: center; }
.btn--muted { color: var(--muted); border-color: var(--border); cursor: default; }

/* tabella di confronto */
.table-scroll { overflow-x: auto; margin-top: 2rem; }
.matrix { width: 100%; border-collapse: collapse; min-width: 480px; }
.matrix th, .matrix td {
    text-align: left; padding: .8rem 1rem;
    border-bottom: 1px solid var(--border); font-size: .93rem;
}
.matrix thead th {
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.matrix tbody th { font-weight: 500; color: var(--text); }
.matrix td { color: var(--muted); }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background: rgba(255, 255, 255, .03); }

/* schede funzione */
.cards--tight { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.fcard {
    display: flex; flex-direction: column; gap: .4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.4rem 1.5rem;
    text-decoration: none; color: inherit;
    transition: border-color .2s ease, transform .15s ease;
}
.fcard:hover { border-color: var(--bot); transform: translateY(-2px); }
.fcard h3 { font-size: 1.08rem; margin: 0; }
.fcard p { color: var(--muted); font-size: .9rem; margin: 0; flex: 1; }
.fcard__plan {
    align-self: flex-start; font-size: .62rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .18rem .5rem; border-radius: 999px; border: 1px solid currentColor;
}
.fcard__plan--core { color: var(--bot); }
.fcard__plan--free { color: #3ddc84; }
.fcard__plan--pro  { color: var(--mc); }
.fcard__plan--ace  { color: #c58cff; }
.fcard__more { font-size: .85rem; color: var(--bot); margin-top: .3rem; }

/* elenchi vari */
.checklist { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 1.7rem; color: var(--text); }
.checklist li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--bot); font-weight: 700;
}

.steps { margin: 1rem 0 2rem; padding-left: 1.3rem; display: grid; gap: .7rem; color: var(--muted); }
.steps li { padding-left: .3rem; }
.steps li::marker { color: var(--bot); font-weight: 700; }

.cmds { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .55rem; }
.cmds li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .9rem;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--bot-dim);
    border-radius: 10px; padding: .8rem 1.1rem;
}
.cmds code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    color: var(--bot); font-size: .93rem; font-weight: 600;
}
.cmds span { color: var(--muted); font-size: .9rem; }

.perms { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .55rem;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.perms li {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: .85rem 1.1rem; display: flex; flex-direction: column; gap: .15rem;
}
.perms strong { font-size: .95rem; }
.perms span { color: var(--muted); font-size: .87rem; }

.callout {
    border: 1px solid var(--border); border-left: 3px solid var(--mc);
    background: var(--surface); border-radius: 10px;
    padding: 1.3rem 1.5rem; margin: 2rem 0;
}
.callout h3 { font-size: 1rem; margin-bottom: .4rem; }
.callout p { color: var(--muted); margin: 0; font-size: .95rem; }

/* stato delle modalita Minecraft */
.mode-status {
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .18rem .5rem; border-radius: 999px; border: 1px solid currentColor;
    align-self: flex-start;
}
.mode-status--playable { color: #3ddc84; }
.mode-status--development { color: var(--mc); }
.mode-status--infrastructure { color: var(--muted); }

/* =============================================================================
   Illustrazioni animate del bivio
   Disegnate in SVG inline: nessuna risorsa esterna (la CSP consente solo file locali),
   nitide a qualunque risoluzione e leggere. Le animazioni sono decorative e si spengono
   tutte con prefers-reduced-motion (regola gia' presente in fondo al file).
   ========================================================================== */

/* Le illustrazioni sono lo SFONDO della meta': riempiono tutto il riquadro, centrate,
   dietro a una velatura che tiene leggibile il testo. Ritagliate al proprio box, altrimenti
   le nuvole animate escono e passano sopra alle scritte. */
.art {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: auto;
    /* Non tutta la meta': il soggetto sta nei due terzi di destra, cosi' la sagoma si legge
       intera e la colonna di testo a sinistra resta libera. */
    width: 70%;
    height: 100%;
    pointer-events: none;
    /* Ora sono <img>: senza object-fit il browser stirerebbe l'SVG per riempire il riquadro. */
    object-fit: contain;
    object-position: center;
    opacity: .5;
    z-index: 0;
    overflow: hidden;
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* Alla meta' che si sta scegliendo lo sfondo si accende e si avvicina. */
.gate__half:hover .art,
.gate__half:focus-visible .art { opacity: .72; transform: scale(1.05); }

/* Velatura di leggibilita': scura dove corre il testo, trasparente dove sta il disegno.
   Senza questa, un fondo al 42% divora il contrasto della descrizione. */
.gate__half::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(96deg,
        rgba(5, 7, 12, .94) 4%,
        rgba(5, 7, 12, .8) 30%,
        rgba(5, 7, 12, .26) 62%,
        transparent 84%);
    z-index: 1;
    pointer-events: none;
}

/* il testo del bivio deve restare sopra al disegno */
.gate__eyebrow, .gate__title, .gate__desc, .gate__cta { position: relative; z-index: 2; }

/* --- adattamenti -------------------------------------------------------- */

@media (max-width: 1100px) {
    .art { width: 92%; right: 0; opacity: .38; }
}

@media (max-width: 780px) {
    /* Su telefono lo sfondo si smorza ancora: meta' schermo per lato, il testo deve vincere. */
    .art { width: 100%; right: 0; opacity: .3; }

    /* La freccia finiva addosso al "Enter the network" della meta' inferiore: qui resta
       solo il segno, piu' piccolo e appoggiato al bordo, e la meta' di sotto gli lascia
       spazio sotto la propria chiamata all'azione. */
    .gate__scroll { bottom: .15rem; padding: .25rem .75rem; gap: 0; }
    .gate__scroll__label { display: none; }
    .gate__scroll svg { width: 22px; height: 30px; }
    .gate__half:last-child { padding-bottom: 3.25rem; }
    .gate__half::before {
        background: linear-gradient(170deg,
            rgba(10, 12, 16, .55) 0%,
            rgba(10, 12, 16, .86) 55%,
            rgba(10, 12, 16, .94) 100%);
    }
}


/* Sale, appare a meta' strada e si spegne: cosi' non serve nascondere la partenza. */



/* L'isola lontana respira piu' lentamente di quella in primo piano: la differenza di
   ritmo e' cio' che fa leggere la profondita'. */


/* L'acqua respira: un solo elemento animato basta a far leggere "liquido". */



/* =============================================================================
   Sequenza di foto del server Minecraft (public/mc-shots/)

   Compare al posto dell'illustrazione a voxel quando ci sono immagini nella cartella.
   Sono foto NOSTRE: Mojang consente l'uso commerciale degli screenshot del proprio
   gioco, mentre le raccolte "Minecraft gratis" in giro concedono diritti che chi le
   carica non possiede.

   Le temporizzazioni dipendono da quante foto ci sono, e la CSP del sito vieta gli
   stili inline: per questo il conteggio arriva come CLASSE sul contenitore invece che
   come variabile scritta nell'attributo style.
   ========================================================================== */

/* Le FOTOGRAFIE non sono l'illustrazione a voxel, e non vanno trattate come lei.
   Il disegno e' piatto e brillante: al 50% di opacita' e largo il 70% funziona come
   filigrana. Uno scatto notturno, alla stessa opacita' sullo stesso nero, diventa una
   macchia scura in cui non si riconosce niente — che e' esattamente cosa succedeva.
   Qui la foto prende tutta la meta' e quasi tutta l'opacita': e' lo sfondo, non un timbro. */
.art-shots {
    display: block;
    width: 100%;
    opacity: .95;
}

/* Con una foto a tutta meta' la velatura deve lavorare diversamente: molto scura sotto la
   colonna di testo, e poi togliersi di mezzo. Prima restava al 26% fino al 62% della
   larghezza, cioe' sporcava proprio la parte di foto che si voleva far vedere.
   `:has()` non e' indispensabile: dove manca resta la velatura normale, che era leggibile. */
.gate__half:has(.art-shots)::before {
    background: linear-gradient(96deg,
        rgba(5, 7, 12, .97) 0%,
        rgba(5, 7, 12, .94) 32%,
        rgba(5, 7, 12, .72) 55%,
        rgba(5, 7, 12, .25) 78%,
        rgba(5, 7, 12, .08) 100%);
}

/* Fra tablet e desktop la meta' si stringe ma il testo no: la foto arretra di un po'
   perche' la riga di descrizione arriva piu' a destra in proporzione. */
@media (max-width: 1100px) {
    .art-shots { opacity: .8; }
}

/* Su telefono il testo occupa tutta la larghezza, quindi una velatura orizzontale non lo
   protegge: qui scurisce dall'alto e dal basso, e la foto si abbassa perche' deve passare
   sotto alle scritte, non competerci. */
@media (max-width: 780px) {
    .art-shots { opacity: .6; }
    .gate__half:has(.art-shots)::before {
        background: linear-gradient(180deg,
            rgba(5, 7, 12, .93) 0%,
            rgba(5, 7, 12, .70) 50%,
            rgba(5, 7, 12, .88) 100%);
    }
}

.art-shots .shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    /* Carrellata lenta: la foto entra leggermente ingrandita e scorre. E' il movimento
       che fa sembrare viva una fotografia ferma. */
    animation-name: dissolvenza, carrellata;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: both, both;
}

/* Con una sola foto non c'e' nulla da incrociare: resta visibile e si muove soltanto. */
.art-shots--1 .shot {
    opacity: 1;
    animation-name: carrellata;
    animation-duration: 24s;
}

.art-shots--2 .shot { animation-duration: 14s; }
.art-shots--3 .shot { animation-duration: 21s; }
.art-shots--4 .shot { animation-duration: 28s; }
.art-shots--5 .shot { animation-duration: 35s; }
.art-shots--6 .shot { animation-duration: 42s; }

/* Ogni scatto entra in scena a un settimo di ciclo di distanza dal precedente. */
.art-shots--2 .shot--2 { animation-delay: 7s; }
.art-shots--3 .shot--2 { animation-delay: 7s; }
.art-shots--3 .shot--3 { animation-delay: 14s; }
.art-shots--4 .shot--2 { animation-delay: 7s; }
.art-shots--4 .shot--3 { animation-delay: 14s; }
.art-shots--4 .shot--4 { animation-delay: 21s; }
.art-shots--5 .shot--2 { animation-delay: 7s; }
.art-shots--5 .shot--3 { animation-delay: 14s; }
.art-shots--5 .shot--4 { animation-delay: 21s; }
.art-shots--5 .shot--5 { animation-delay: 28s; }
.art-shots--6 .shot--2 { animation-delay: 7s; }
.art-shots--6 .shot--3 { animation-delay: 14s; }
.art-shots--6 .shot--4 { animation-delay: 21s; }
.art-shots--6 .shot--5 { animation-delay: 28s; }
.art-shots--6 .shot--6 { animation-delay: 35s; }

/* La finestra di visibilita' e' 1/n del ciclo: per questo la dissolvenza ha percentuali
   diverse a seconda di quante foto ci sono. */
.art-shots--2 .shot { animation-name: dissolvenza2, carrellata; }
.art-shots--3 .shot { animation-name: dissolvenza3, carrellata; }
.art-shots--4 .shot { animation-name: dissolvenza4, carrellata; }
.art-shots--5 .shot { animation-name: dissolvenza5, carrellata; }
.art-shots--6 .shot { animation-name: dissolvenza6, carrellata; }

@keyframes dissolvenza2 { 0% { opacity: 0 } 4% { opacity: 1 } 46% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes dissolvenza3 { 0% { opacity: 0 } 3% { opacity: 1 } 30% { opacity: 1 } 33%, 100% { opacity: 0 } }
@keyframes dissolvenza4 { 0% { opacity: 0 } 2% { opacity: 1 } 23% { opacity: 1 } 25%, 100% { opacity: 0 } }
@keyframes dissolvenza5 { 0% { opacity: 0 } 2% { opacity: 1 } 18% { opacity: 1 } 20%, 100% { opacity: 0 } }
@keyframes dissolvenza6 { 0% { opacity: 0 } 1% { opacity: 1 } 15% { opacity: 1 } 17%, 100% { opacity: 0 } }

@keyframes carrellata {
    0%   { transform: scale(1.12) translate(2%, 1%); }
    100% { transform: scale(1.02) translate(-2%, -1%); }
}

/* Chi ha ridotto il movimento vede comunque le foto: si ferma la carrellata, non la
   sequenza. Restare senza immagini sarebbe perdere contenuto, non risparmiare movimento. */
@media (prefers-reduced-motion: reduce) {
    /* Si toglie la CARRELLATA (il movimento), non la sequenza: restare senza immagini
       sarebbe perdere contenuto. La dissolvenza mantiene la temporizzazione giusta per
       il numero di foto: forzarne una sola faceva restare lo sfondo vuoto per metà ciclo. */
    .art-shots--2 .shot { animation-name: dissolvenza2; }
    .art-shots--3 .shot { animation-name: dissolvenza3; }
    .art-shots--4 .shot { animation-name: dissolvenza4; }
    .art-shots--5 .shot { animation-name: dissolvenza5; }
    .art-shots--6 .shot { animation-name: dissolvenza6; }
    .art-shots--1 .shot { animation: none; opacity: 1; }
}

/* =============================================================================
   PAGINE LEGALI
   Un contratto si legge male in colonna larga: il corpo resta stretto e l'indice
   sta a lato, appiccicato, perché in un documento a 15 sezioni sapere dove si è
   conta quanto il testo.
   ========================================================================== */

.hero--legal { padding-bottom: 1.5rem; }
.hero--legal .hero__eyebrow { color: var(--muted); }

.legal__stamp {
    margin-top: 1.2rem; font-size: .88rem; color: var(--muted);
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.legal__stamp-tag {
    font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: .16rem .5rem; border-radius: 999px;
    border: 1px solid var(--mc); color: var(--mc);
}

/* fascia della bozza: deve dare fastidio, è lì per non essere dimenticata */
.legal-draft {
    background: rgba(255, 215, 0, .07);
    border-top: 1px solid rgba(255, 215, 0, .3);
    border-bottom: 1px solid rgba(255, 215, 0, .3);
    padding: 1.1rem 0;
}
.legal-draft strong { color: var(--mc); display: block; margin-bottom: .25rem; }
.legal-draft p { margin: 0; color: var(--muted); font-size: .94rem; max-width: 70ch; }

.legal-tabs { border-bottom: 1px solid var(--border); }
.legal-tabs .wrap { display: flex; gap: .35rem; flex-wrap: wrap; }
.legal-tabs a {
    padding: .85rem 1.1rem; text-decoration: none; color: var(--muted);
    font-size: .93rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.legal-tabs a:hover { color: var(--text); }
.legal-tabs a.is-active { color: var(--text); border-bottom-color: var(--bot); font-weight: 600; }

.legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 3.5rem; align-items: start; }

.legal-toc {
    position: sticky; top: calc(var(--header-h) + 1.5rem);
    border-left: 1px solid var(--border); padding-left: 1.1rem;
}
.legal-toc h2 {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 .8rem; font-weight: 700;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
    display: block; padding: .28rem 0; font-size: .87rem; line-height: 1.35;
    color: var(--muted); text-decoration: none;
}
.legal-toc a::before { content: counter(toc) ". "; opacity: .5; }
.legal-toc a:hover { color: var(--bot); }

.legal-body { max-width: 70ch; }
.legal-body h2 {
    font-size: 1.22rem; margin: 3rem 0 .9rem; padding-top: .2rem;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal-body h2:first-of-type { margin-top: 1.5rem; }
.legal-body p { margin: 0 0 1.05rem; }
.legal-body ul { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.legal-body li { margin-bottom: .6rem; }
.legal-body a { color: var(--bot); }

.legal-lead {
    font-size: 1.1rem; color: var(--muted);
    border-left: 2px solid var(--bot); padding-left: 1.1rem; margin-bottom: 2rem !important;
}

/* la dicitura che Mojang impone: va letta, non nascosta in fondo */
.legal-shout {
    font-size: .82rem; font-weight: 700; letter-spacing: .05em;
    color: var(--mc); background: rgba(255, 215, 0, .06);
    border: 1px solid rgba(255, 215, 0, .25); border-radius: 8px;
    padding: .9rem 1.1rem; margin-bottom: 1.2rem !important;
}
.legal-warn {
    border-left: 3px solid var(--mc); background: var(--surface);
    border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; margin-bottom: 1.2rem !important;
}
.legal-quote {
    margin: 1.2rem 0 1.4rem; padding: 1.1rem 1.3rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    font-style: italic; color: var(--text);
}
.legal-aside { color: var(--muted); font-size: .93rem; }
.legal-foot {
    margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: .92rem;
}

/* segnaposto di un dato ancora mancante: deve saltare all'occhio nel testo */
.legal__todo {
    color: var(--mc); background: rgba(255, 215, 0, .1);
    border: 1px dashed rgba(255, 215, 0, .45); border-radius: 5px;
    padding: 0 .35rem; font-size: .93em; white-space: nowrap;
}

@media (max-width: 900px) {
    .legal { grid-template-columns: 1fr; gap: 2rem; }
    .legal-toc {
        position: static; border-left: 0; padding-left: 0;
        border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem;
    }
    .legal-toc ol { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 560px) {
    .legal-toc ol { columns: 1; }
}

/* elenco dei sottoresponsabili e tabella delle scadenze */
.legal-dl { margin: 0 0 1.6rem; }
.legal-dl dt { font-weight: 700; margin-top: 1rem; }
.legal-dl dd { margin: .2rem 0 0; color: var(--muted); }

.legal-table {
    width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem;
    font-size: .95rem;
}
.legal-table thead th {
    text-align: left; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); padding: .55rem .8rem; border-bottom: 1px solid var(--border);
}
.legal-table td {
    padding: .7rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:last-child { color: var(--muted); white-space: nowrap; }

.legal-body h3 {
    font-size: 1rem; margin: 1.8rem 0 .5rem; color: var(--bot);
}

/* La tabella delle scadenze scorre solo dove serve: `display:block` la renderebbe
   larga quanto il contenuto anche su desktop, dove c'e' spazio in abbondanza. */
@media (max-width: 620px) {
    .legal-table { display: block; overflow-x: auto; }
}

/* =============================================================================
   ACCENSIONE — il livello "gaming"
   =============================================================================

   Il sito era corretto e spento: contrasti bassi, accenti col contagocce, tutto
   arrotondato come un pannello di amministrazione. Qui si alza il volume senza
   toccare il brand: l'oro resta l'oro del MOTD, il ciano resta quello degli embed.

   Le leve usate, in ordine di resa:
     1. bagliore — un accento che EMETTE luce non e' piu' un bordo, e' un'insegna
     2. angoli piu' squadrati e tacche d'angolo: e' il vocabolario delle interfacce
        di gioco, e si ottiene con due pseudo-elementi
     3. etichette in monospazio maiuscolo: la voce di un cruscotto, non di un modulo
     4. titoli in gradiente, cosi' la testata ha una direzione di luce

   Nessun font esterno: la CSP consente solo risorse locali, quindi si lavora di
   peso, spaziatura e maiuscolo sulla pila di sistema.
   ========================================================================== */

:root {
    --radius: 9px;                       /* meno morbido: piu' apparecchio, meno app */
    --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* ----------------------------------------------------------------- testata */

.site-header {
    background: rgba(5, 7, 12, .78);
    border-bottom: 1px solid var(--border);
}
/* Filo bicolore sotto l'intestazione: i due mondi, sempre presenti. */
.site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, var(--bot), rgba(125, 175, 235, .12) 50%, var(--mc));
    opacity: .55;
}
.brand__mark { text-shadow: 0 0 14px rgba(255, 215, 0, .75); }
.brand__sub { color: var(--bot); opacity: .85; }

.site-nav a {
    border-radius: 6px;
    text-transform: uppercase; letter-spacing: .1em;
    font-size: .76rem; font-weight: 700;
    border: 1px solid transparent;
}
.site-nav a:hover {
    color: var(--text); background: rgba(34, 232, 255, .1); border-color: var(--border-hot);
}
.site-nav a.is-active {
    color: var(--bot); background: rgba(34, 232, 255, .12);
    border-color: var(--border-hot); box-shadow: 0 0 18px rgba(34, 232, 255, .18);
}

/* ------------------------------------------------------------- tipografia */

/* Titoli in gradiente: la luce entra da sinistra e si tinge dell'accento della
   sezione. Sotto @supports perche' senza background-clip il testo sparirebbe. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero--bot .hero__title,
    .hero--mc .hero__title,
    .gate__title {
        -webkit-background-clip: text; background-clip: text;
        color: transparent; -webkit-text-fill-color: transparent;
    }
    .hero--bot .hero__title { background-image: linear-gradient(96deg, #ffffff 8%, var(--bot) 92%); }
    .hero--mc  .hero__title { background-image: linear-gradient(96deg, #ffffff 8%, var(--mc)  92%); }
    .gate__half--bot .gate__title { background-image: linear-gradient(96deg, #ffffff 25%, var(--bot) 100%); }
    .gate__half--mc  .gate__title { background-image: linear-gradient(96deg, #ffffff 25%, var(--mc)  100%); }
}

.hero__title, .gate__title { letter-spacing: -.045em; }
.slab__title { letter-spacing: -.03em; }

/* Occhiello come voce di cruscotto: quadratino luminoso + monospazio maiuscolo. */
.hero__eyebrow, .gate__eyebrow, .core-band__label, .stat__label,
.site-footer__links h3, .legal-toc h2 {
    font-family: var(--mono);
}
.hero__eyebrow, .gate__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
}
.hero__eyebrow::before, .gate__eyebrow::before {
    content: ''; width: 7px; height: 7px; flex: none;
    background: currentColor; box-shadow: 0 0 12px currentColor;
}

/* ------------------------------------------------------------------ bottoni */

.btn {
    position: relative; overflow: hidden;
    border-radius: 7px; border-width: 1.5px;
    text-transform: uppercase; letter-spacing: .11em;
    font-size: .8rem; font-weight: 800;
    padding: .78rem 1.5rem;
    transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .25s ease;
}
/* Riflesso che attraversa il bottone al passaggio: costa due righe e cambia tutto. */
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .55s ease;
}
.btn:hover::after { transform: translateX(130%); }

.btn--bot {
    color: var(--bot); border-color: rgba(34, 232, 255, .5);
    background: rgba(34, 232, 255, .08);
}
.btn--mc {
    color: var(--mc); border-color: rgba(255, 215, 0, .45);
    background: rgba(255, 215, 0, .07);
}
.btn--bot:hover { background: var(--bot); color: #02141a; box-shadow: var(--glow-bot); }
.btn--mc:hover  { background: var(--mc);  color: #201a00; box-shadow: var(--glow-mc); }
.btn--muted { background: none; }
.btn--muted::after { display: none; }

/* Chiamata all'azione del bivio: diventa un vero pulsante luminoso. */
.gate__cta {
    align-self: flex-start;
    padding: .7rem 1.3rem; border-radius: 7px;
    border: 1.5px solid currentColor;
    background: rgba(255, 255, 255, .04);
    text-transform: uppercase; letter-spacing: .12em;
    font-size: .78rem; font-weight: 800;
    transition: box-shadow .3s ease, background-color .3s ease;
}
.gate__half:hover .gate__cta,
.gate__half:focus-visible .gate__cta {
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 0 26px -4px currentColor;
}

/* -------------------------------------------------- riquadri e tacche d'angolo */

.card, .fcard, .tier, .stat, .core__item, .status-card,
.features li, .modes li, .cmds li, .perms li {
    position: relative;
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
}

/* Le tacche: due angoli in luce, come i mirini di un'interfaccia di gioco.
   Spente a riposo, si accendono quando la scheda e' l'oggetto dell'attenzione. */
.card::before, .card::after,
.fcard::before, .fcard::after,
.tier::before, .tier::after {
    content: ''; position: absolute; width: 12px; height: 12px;
    border: 1.5px solid var(--bot);
    opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.card::before, .fcard::before, .tier::before {
    top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--radius) 0 0 0;
}
.card::after, .fcard::after, .tier::after {
    bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--radius) 0;
}
.card:hover::before, .card:hover::after,
.fcard:hover::before, .fcard:hover::after,
.tier:hover::before, .tier:hover::after { opacity: .9; }

.card--mc::before, .card--mc::after { border-color: var(--mc); }

.fcard {
    transition: border-color .2s ease, transform .15s ease, box-shadow .25s ease, background-color .2s ease;
}
.fcard:hover {
    border-color: var(--border-hot);
    box-shadow: 0 10px 34px -18px rgba(34, 232, 255, .8), var(--glow-bot);
    transform: translateY(-3px);
}

/* La banda superiore delle schede diventa una lama di luce che sfuma. */
.card { border-top-width: 2px; border-top-color: transparent; }
.card--bot {
    background-image:
        linear-gradient(90deg, var(--bot), rgba(34, 232, 255, 0)),
        linear-gradient(160deg, var(--surface-2), var(--surface));
    background-size: 100% 2px, auto;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, center;
    background-origin: border-box, padding-box;
}
.card--mc {
    background-image:
        linear-gradient(90deg, var(--mc), rgba(255, 215, 0, 0)),
        linear-gradient(160deg, var(--surface-2), var(--surface));
    background-size: 100% 2px, auto;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, center;
    background-origin: border-box, padding-box;
}

.features li { border-left-color: var(--bot); }
.modes li { border-left-color: var(--mc); }
.features li:hover, .perms li:hover, .cmds li:hover {
    border-color: var(--border-hot); box-shadow: 0 0 22px -8px var(--bot);
}
.modes li:hover { border-color: rgba(255, 215, 0, .45); box-shadow: 0 0 22px -8px var(--mc); }

/* ----------------------------------------------------------- numeri e stato */

.stat__value {
    font-family: var(--mono); font-size: 2.1rem;
    text-shadow: 0 0 26px rgba(255, 215, 0, .45);
}
.stat__label { font-size: .7rem; letter-spacing: .14em; }
.stat:hover { border-color: rgba(255, 215, 0, .4); }

/* Il pallino di stato pulsa: un server acceso deve SEMBRARE acceso. */
.status-card__dot { position: relative; }
.status-card.is-online .status-card__dot {
    background: var(--win); box-shadow: 0 0 0 4px rgba(61, 220, 132, .18), 0 0 16px var(--win);
}
.status-card.is-online .status-card__dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1px solid var(--win);
    animation: battito 2.4s ease-out infinite;
}
@keyframes battito {
    0%   { transform: scale(.8); opacity: .9; }
    100% { transform: scale(2.2); opacity: 0; }
}
.status-card.is-online { border-color: rgba(61, 220, 132, .35); }

/* ------------------------------------------------------------------- piani */

.tier--highlight {
    border-color: var(--bot);
    box-shadow: 0 0 0 1px var(--bot) inset, 0 18px 50px -28px var(--bot), var(--glow-bot);
}
.tier--highlight::before, .tier--highlight::after { opacity: .9; }
.tier__price { font-family: var(--mono); }
.tier__badge { box-shadow: var(--glow-bot); }
.tier__list li::before { text-shadow: 0 0 10px var(--bot); }

/* pastiglie dei piani: ognuna col proprio alone */
.fcard__plan { font-family: var(--mono); }
.fcard__plan--core { box-shadow: 0 0 14px -4px var(--bot); }
.fcard__plan--free { color: var(--win); box-shadow: 0 0 14px -4px var(--win); }
.fcard__plan--pro  { box-shadow: 0 0 14px -4px var(--mc); }
.fcard__plan--ace  { color: var(--ace); box-shadow: 0 0 14px -4px var(--ace); }

.core__item::before { box-shadow: var(--glow-bot); }
.core-band {
    background:
        radial-gradient(ellipse 60% 120% at 0% 0%, rgba(34, 232, 255, .12), transparent 60%),
        linear-gradient(160deg, var(--surface-2), var(--surface));
    border-color: var(--border-hot);
}

/* ------------------------------------------------------------ tabelle e liste */

.matrix thead th { color: var(--bot); font-family: var(--mono); }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background: rgba(34, 232, 255, .06); }
.checklist li::before { text-shadow: 0 0 12px var(--bot); }
.cmds code { text-shadow: 0 0 14px rgba(34, 232, 255, .5); }
.cmds li { border-left-color: var(--bot); }
.callout { border-left-width: 3px; box-shadow: 0 0 30px -20px var(--mc); }

.mode-status--playable { box-shadow: 0 0 14px -4px var(--win); }
.mode-status--development { box-shadow: 0 0 14px -4px var(--mc); }

/* ------------------------------------------------------------------- footer */

.site-footer { position: relative; }
.site-footer::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bot) 30%, var(--mc) 70%, transparent);
    opacity: .4;
}
.site-footer__links h3 { color: var(--bot); letter-spacing: .16em; }
.site-footer__links a:hover { color: var(--bot); text-shadow: 0 0 14px rgba(34, 232, 255, .5); }

/* --------------------------------------------------------- movimento ridotto */

@media (prefers-reduced-motion: reduce) {
    /* Come nel resto del foglio: si toglie il MOVIMENTO, non l'informazione.
       Il pallino resta acceso e ben visibile, smette solo di pulsare; il riflesso
       dei bottoni non attraversa piu' nulla. */
    .status-card.is-online .status-card__dot::after { animation: none; opacity: .5; transform: scale(1.3); }
    .btn::after { display: none; }
}

/* Sul ramo Minecraft la voce attiva deve essere ORO, non ciano: il colore dice
   dove sei, e vederlo sbagliato e' peggio che non averlo. */
.site-nav a[href="/mc"].is-active {
    color: var(--mc);
    background: rgba(255, 215, 0, .12);
    border-color: rgba(255, 215, 0, .45);
    box-shadow: 0 0 18px rgba(255, 215, 0, .18);
}