/* ============================================================
   CARATTERE DEL GIOCO
   ------------------------------------------------------------
   La targhetta sopra la skin deve essere scritta con il carattere
   di Minecraft, che non sta su Google Fonts e non è ridistribuibile:
   va messo il file in html/fonts/ (vedi il README lì dentro).

   Finché il file non c'è, la targhetta ripiega su Press Start 2P e
   si legge lo stesso — cambia la faccia, non il funzionamento. Con
   il carattere vero al suo posto conviene alzare .staff-tag a circa
   1.05rem: Mojangles è molto più piccolo a parità di em.
   ============================================================ */
@font-face {
    font-family: 'Minecraft';
    src: url('/fonts/minecraft.woff2') format('woff2'),
         url('/fonts/minecraft.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* swap e non block: se il file manca o tarda, si vede subito il
       ripiego invece di un buco. */
    font-display: swap;
}

/* ============================================================
   BOTTONI A BLOCCO
   ------------------------------------------------------------
   Un solo stampo per tutti i bottoni della home: spigoli quasi
   netti, bordo scuro pieno, ombra piatta sotto (mai sfocata) e
   affondamento al click. Le varianti cambiano solo i due colori,
   il corpo e l'ombra.
   ============================================================ */
.btn-px {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    cursor: pointer;
    /* filter e transform separati: al click cambia solo la posizione,
       e la luminosità dell'hover non deve ripartire da capo. */
    transition: filter 0.12s, transform 0.09s, box-shadow 0.09s, color 0.12s,
                background-color 0.12s, border-color 0.12s;
}
.btn-px svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}
.btn-px-sm {
    padding: 12px 18px;
    font-size: 0.6rem;
    gap: 8px;
}
.btn-px-sm svg { width: 15px; height: 15px; }

.btn-px-primary {
    color: #fff;
    background: var(--accent-orange);
    box-shadow: 0 6px 0 var(--accent-orange-dark);
}
.btn-px-primary:hover { filter: brightness(110%); }
.btn-px-primary:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 var(--accent-orange-dark);
}

/* Variante secondaria: stesso stampo ma in grigio, così accanto al
   bottone arancione si legge come "l'altra strada" e non come un
   secondo invito che compete col primo. */
.btn-px-ghost {
    color: #e5e7eb;
    background: #262a36;
    border-color: var(--mc-border-dark);
    box-shadow: 0 6px 0 #12141b;
}
.btn-px-ghost:hover {
    color: #fff;
    background: #2f3444;
}
.btn-px-ghost:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #12141b;
}
.btn-px-sm.btn-px-primary:active,
.btn-px-sm.btn-px-ghost:active,
.btn-px-sm.btn-px-discord:active { transform: translateY(5px); }

.btn-px-discord {
    color: #fff;
    background: #5865F2;
    box-shadow: 0 6px 0 #3c45b5;
}
.btn-px-discord:hover { filter: brightness(112%); }
.btn-px-discord:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #3c45b5;
}

@media (max-width: 640px) {
    .btn-px { width: 100%; }
}

/* ============================================================
   HERO — due colonne
   ------------------------------------------------------------
   Prima era una colonna sola centrata: mascotte, paragrafo,
   riquadro dello stato e bottone, uno sotto l'altro. Non c'era il
   nome del server da nessuna parte, e il paragrafo si prendeva la
   riga più larga della pagina.

   Ora il testo sta a sinistra in una colonna di misura leggibile e
   la mascotte occupa la destra: il titolo trova posto, e la
   mascotte smette di fare da tappo sopra al testo.
   ============================================================ */
.hero {
    position: relative;
    min-height: calc(100svh - var(--nav-h, 82px));
    display: flex;
    align-items: center;
    padding: clamp(28px, 5vh, 64px) clamp(16px, 4vw, 48px) clamp(88px, 12vh, 120px);
    overflow: hidden;
}
@supports not (height: 100svh) {
    .hero { min-height: calc(100vh - var(--nav-h, 82px)); }
}

.hero-grid {
    position: relative;
    z-index: 1;
    width: min(1240px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(20px, 4vw, 60px);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 2.2vh, 24px);
    max-width: 620px;
}

/* Il nome, con l'estrusione piena sotto: è lo stesso trucco dei
   bottoni (ombra a blur 0), applicato al testo. */
.hero-title {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.45rem, 4.4vw, 3.1rem);
    line-height: 1.16;
    color: #fff;
    text-shadow: 0 5px 0 #090b10;
}
.hero-title span {
    color: var(--accent-orange);
    text-shadow: 0 5px 0 var(--accent-orange-dark);
}

.hero-lead {
    margin: 0;
    max-width: 560px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    color: #cbd5e1;
    font-size: clamp(0.95rem, 1.35vw, 1.08rem);
    line-height: 1.72;
}
.hero-lead .accent { color: var(--accent-orange); font-weight: 700; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
}

.hero-art {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-mascot {
    width: clamp(180px, 26vw, 330px);
    max-height: 52vh;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6));
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .hero-copy { align-items: center; }
    .hero-actions { justify-content: center; }
    /* La mascotte passa sopra al testo: su una colonna sola l'immagine
       è il primo appiglio, il titolo viene dopo. */
    .hero-art { order: -1; }
    .hero-mascot { max-height: 30vh; }
}

/* ── Stato del server ──────────────────────────────────
   Una riga sola dentro un riquadro, con le quattro tacche del segnale
   davanti: e' la voce della lista server del gioco, ridotta a
   un'informazione sola. Il numero non e' piu' grande del resto — sta
   nella stessa riga di testo e si stacca solo per colore.

   Quando il server non risponde le tacche si spengono e ci va sopra
   la croce rossa, esattamente come quando nella lista server una voce
   non e' raggiungibile. */
.server-stat {
    /* Stacco dal paragrafo sopra e dai bottoni sotto. */
    margin: 14px 0 16px;
}

/* Una riga sola visibile per volta: la sceglie data-state sul
   contenitore, così il JS cambia un attributo invece di riscrivere il
   testo (e le frasi restano nel markup, dove si leggono e si
   traducono).

   html[data-server-state] è il seme messo da js/status-boot.js con
   l'ultimo stato noto: finché la risposta non arriva vince sulla riga
   di attesa, così il riquadro è già scritto al primo paint. */
.server-stat-msg { display: none; }
html[data-server-state] .server-stat[data-state="loading"] .server-stat-msg[data-when="loading"] { display: none; }
.server-stat[data-state="loading"] .server-stat-msg[data-when="loading"],
.server-stat[data-state="online"]  .server-stat-msg[data-when="online"],
.server-stat[data-state="offline"] .server-stat-msg[data-when="offline"],
html[data-server-state="online"]  .server-stat[data-state="loading"] .server-stat-msg[data-when="online"],
html[data-server-state="offline"] .server-stat[data-state="loading"] .server-stat-msg[data-when="offline"] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: rgba(13, 14, 18, 0.85);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 4px 0 var(--mc-border-dark);
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(8px, 1.05vw, 9.5px);
    line-height: 1.7;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c8697;
}

/* Le tacche: quattro barre crescenti, la stessa icona che il gioco
   mette in fondo a ogni riga della lista server. */
.server-stat-bars {
    width: 23px;
    height: 18px;
    flex-shrink: 0;
    color: var(--accent-orange);
}
/* La versione spenta porta i colori scritti dentro l'SVG (grigio piu'
   croce rossa), quindi qui non si tocca il colore. */

/* Il conteggio: stessa misura del resto della riga, si stacca solo
   per colore. */
.server-stat-msg b {
    font-weight: normal;
    color: #fff;
}

/* Server irraggiungibile: la riga vira al rosso spento. In attesa
   resta grigia — finché non si sa, non si annuncia niente. */
.server-stat[data-state="offline"] .server-stat-msg,
html[data-server-state="offline"] .server-stat[data-state="loading"] .server-stat-msg {
    color: #b45c5c;
    border-color: #3a1d1d;
    box-shadow: 0 4px 0 #3a1d1d;
}
html:not([data-server-state]) .server-stat[data-state="loading"] .server-stat-bars {
    color: #4b5563;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Indicatore "scorri" in fondo alla hero */
.scroll-hint {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-gray);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
    z-index: 2;
}
.scroll-hint:hover { color: var(--accent-orange); }
.scroll-hint svg { width: 22px; height: 22px; animation: hintBounce 1.8s ease-in-out infinite; }
@keyframes hintBounce {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(7px); opacity: 1; }
}
@media (max-width: 380px) {
    .scroll-hint { display: none; }
}

/* ============================================================
   03 · GRIGLIA DELLE FEATURE
   ------------------------------------------------------------
   Le sei voci che prima erano un elenco puntato accanto al
   carosello: lì erano sei parole senza contesto, qui ognuna ha una
   riga che dice cosa cambia mentre giochi.

   Hover stile retro: il bordo lampeggia a scatti (step-end)
   in giallo/arancio retro insieme al rilievo 3D, mentre sul titolo
   della card compare la freccetta pixel '>' lampeggiante con
   text-shadow vintage, identica a quella dei tasti dell'header.
   ============================================================ */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .feat-grid { grid-template-columns: 1fr; } }

.feat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 28px;
    background: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    /* Smusso del pannello di gioco (--bevel in base.css) più l'ombra
       piatta sotto. Il token è lo stesso delle card dello store e della
       dashboard: le tre pagine hanno lo stesso rilievo. */
    box-shadow: var(--bevel), 0 5px 0 var(--mc-border-dark);
    transition: border-color 0.1s steps(1), box-shadow 0.1s steps(1);
}

/* Hover stile retro: il bordo rimane giallo fisso con rilievo 3D */
.feat-card:hover {
    border-color: var(--accent-orange);
    box-shadow: var(--bevel-hover), 0 5px 0 var(--accent-orange-dark);
}

.feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #14161d;
    border: none;
    border-radius: 3px;
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.5);
    color: var(--accent-orange);
}
.feat-icon svg { width: 24px; height: 24px; image-rendering: pixelated; }

.feat-card h3 {
    position: relative;
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.68rem;
    line-height: 1.7;
    color: #fff;
    text-transform: none;
    transition: padding-left 0.08s steps(1);
}
.feat-card h3::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    color: var(--accent-orange);
    font-family: 'Press Start 2P', cursive;
    pointer-events: none;
}
.feat-card:hover h3 {
    padding-left: 18px;
    color: #fff;
    text-shadow: 2px 2px 0px var(--accent-orange-dark);
}
.feat-card:hover h3::before {
    animation: retroCardArrowBlink 0.5s step-end infinite;
}

@keyframes retroCardArrowBlink {
    0%, 100% { opacity: 1; left: 0; }
    50%      { opacity: 0; left: 2px; }
}

.feat-card p {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-gray);
    transition: color 0.15s;
}
.feat-card:hover p {
    color: #d1d5db;
}

/* ============================================================
   04 · CLASSIFICA
   ------------------------------------------------------------
   I primi cinque per kill. Le righe sono link ai profili pubblici;
   i profili privati non arrivano nemmeno qui, li toglie l'API.
   ============================================================ */
/* La classifica è larga quanto le serve — quattro colonne strette — e
   accanto le sta la mascotte: prima quel mezzo schermo a sinistra era
   vuoto e la sezione sembrava spostata di lato per sbaglio. */
#classifica .sec-inner { width: min(1220px, 100%); }

.board-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    /* Allineate in basso: l'alieno sta in piedi ACCANTO alla classifica,
       non le galleggia a fianco a mezza altezza. */
    align-items: end;
    gap: clamp(8px, 1.6vw, 26px);
}
.board-mascot {
    display: flex;
    /* Appoggiato al bordo sinistro della sua colonna e non centrato:
       centrato restava a ridosso della tabella, e fra i due non c'era
       aria. */
    justify-content: flex-start;
    align-items: flex-end;
    /* L'alieno sta in piedi sulla stessa linea del fondo della scheda:
       i 26px sono il padding che .mc-corners lascia attorno alla card
       per gli angolari. */
    padding-bottom: 26px;
}
.board-mascot img {
    width: clamp(230px, 31vw, 450px);
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.65));
}
/* Sotto il breakpoint la classifica si prende tutta la riga: su un
   telefono la mascotte ruberebbe metà della tabella. */
@media (max-width: 900px) {
    .board-grid { grid-template-columns: 1fr; }
    .board-mascot { display: none; }
}

.board { padding: 0; overflow: hidden; }

.board-head,
.board-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 92px;
    align-items: center;
    gap: 12px;
    padding: 0 clamp(14px, 2.2vw, 26px);
}
.board-head {
    height: 44px;
    background: #14161d;
    border-bottom: 2px solid var(--mc-border-dark);
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
}
.board-head-stat { text-align: right; }

.board-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.board-row {
    height: 64px;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid #171a22;
    transition: background-color 0.16s;
}
.board-row:last-child { border-bottom: none; }
a.board-row:hover { background: #23273300; background-color: #232733; }

.board-rank {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    color: #4b5563;
}
/* I primi tre hanno un colore proprio; dal quarto in giù restano grigi,
   che è esattamente l'informazione da dare. */
.board-row[data-rank="1"] .board-rank { color: var(--accent-orange); }
.board-row[data-rank="2"] .board-rank { color: #cbd5e1; }
.board-row[data-rank="3"] .board-rank { color: #a16207; }

.board-player {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.board-player img {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    image-rendering: pixelated;
    background: #14161d;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
}
.board-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-stat {
    text-align: right;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    line-height: 1;
    color: #e5e7eb;
}
.board-stat.is-dim { color: var(--text-gray); }

.board-foot {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: #14161d;
    border-top: 2px solid var(--mc-border-dark);
}
.board-foot .btn-px { width: auto; }

@media (max-width: 640px) {
    .board-head,
    .board-row { grid-template-columns: 38px minmax(0, 1fr) 70px; }
}

/* ============================================================
   01 · PRIMO ACCESSO
   ------------------------------------------------------------
   Tre passaggi a sinistra, l'indirizzo a destra. L'IP era chiuso
   nel modale: chi Minecraft lo sa già usare non deve aprire una
   finestra per leggere tre parole.
   ============================================================ */
.start-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(22px, 3vw, 46px);
    align-items: center;
}
@media (max-width: 900px) { .start-grid { grid-template-columns: 1fr; } }

/* Il razzo sta nella colonna che i passaggi hanno lasciato libera: punta
   verso destra, quindi guarda esattamente il primo passo. Sotto i 900px
   la colonna sparisce, come per la mascotte della classifica. */
.start-mascot {
    display: flex;
    justify-content: center;
    align-items: center;
}
.start-mascot img {
    width: clamp(260px, 34vw, 520px);
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.65));
}
@media (max-width: 900px) { .start-mascot { display: none; } }

.start-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Un passo = una riga sola: il testo sta accanto al numero, non sotto un
   titolo. La guida distesa vive nel modale. */
.start-step {
    display: flex;
    align-items: center;
    gap: 18px;
}
.start-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    color: #fff;
    background: var(--accent-orange);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 4px 0 var(--accent-orange-dark);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.start-step h3 {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.68rem;
    line-height: 1.7;
    color: #fff;
    text-transform: none;
}

.start-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* I passaggi ora stanno sopra la scheda dell'indirizzo: senza questo
   stacco il terzo passo e il bordo della card si toccano. */
.start-side .start-steps { margin-bottom: 10px; }

/* ── Selettore Java / Bedrock ──────────────────────────────
   Non e' la fascia a segmenti del modale legale: li' le voci sono
   capitoli dello stesso testo, qui sono due giochi diversi e chi
   arriva spesso non sa quale dei due ha installato. Quindi ogni
   linguetta e' un tasto pieno con il suo blocco di pixel, monitor per
   Java e telefono per Bedrock: l'icona dice quale dei due e' il tuo
   senza doverlo scrivere.
   I due elenchi stanno tutti e due nel markup e il contenitore
   [data-platform] accende quello giusto. */
.plat-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    margin-bottom: 6px;
    background: #0d0e12;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
}
.plat-tab {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 13px;
    text-align: left;
    color: #6b7280;
    background: #15171d;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    /* Stessa sfaccettatura dei pezzi arancioni del sito, ma spenta:
       ombre INTERNE, perche' una esterna sborderebbe dalla guida. */
    box-shadow:
        inset 2px 2px 0 #21242c,
        inset -2px -2px 0 #0b0c10;
    transition: color 0.16s, background-color 0.16s;
}
.plat-tab:hover { color: #e5e7eb; background: #1c1f27; }
.plat-tab:active { transform: translateY(1px); }
.plat-tab-ico {
    flex: none;
    width: 22px;
    height: 22px;
}
.plat-tab-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: inherit;
}
.plat-tab.active {
    color: #fff;
    background: var(--accent-orange);
    box-shadow:
        inset 2px 2px 0 #fbbf24,
        inset -2px -2px 0 var(--accent-orange-dark);
}
.plat-tab.active .plat-tab-name { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.28); }
@media (max-width: 430px) { .plat-tab { gap: 9px; padding: 11px 10px; } }

[data-platform="java"] .plat-bedrock,
[data-platform="bedrock"] .plat-java { display: none; }
/* Il pannello acceso rientra con l'entrata dei tab (tabIn, in ui.css).
   Nella sezione "Si parte" i passi hanno gia' il loro [data-reveal]:
   la classe la mette il JS solo dove i reveal non ci sono (il modale). */
.plat-panel.tab-entering { animation: tabIn 0.45s var(--ease-out-expo); }
/* Dentro al modale la fascia sta nel corpo, non nella testata. */
.plat-switch-modal { margin: 0 0 22px; }
.ip-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
}
.ip-card-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
}
.ip-value {
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--accent-orange);
    word-break: break-all;
}
.ip-card-copy { width: 100%; }
/* Conferma della copia: l'indirizzo diventa verde per un secondo e mezzo.
   Prima era la utility text-green-400 aggiunta dal JS — una classe di
   Tailwind, quindi presente nel foglio solo finché qualche pagina la
   scriveva nel markup. */
.start-guide { width: 100%; }
.start-note {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #6b7280;
}
.start-note code {
    padding: 1px 6px;
    font-size: 1.05rem;
    color: var(--accent-orange);
    background: #0d0e12;
    border: 1px solid var(--mc-border-dark);
    border-radius: 2px;
}

/* ============================================================
   05 · STAFF
   ------------------------------------------------------------
   Era un rettangolo piatto con dentro un badge, un nome e un
   paragrafo: nessuna delle cose che ci stanno sopra sembrava
   appartenere a un gioco.

   Ora la scheda è un pannello dell'interfaccia — smusso chiaro sul
   lato alto-sinistro e scuro su quello basso-destro, come ogni
   finestra del gioco — la skin sta dentro uno SLOT dell'inventario,
   e sopra la sua testa c'è la TARGHETTA col nome: nera al 30%,
   spigoli vivi, testo bianco con l'ombra dura di un pixel, cioè
   esattamente come il gioco disegna il nome sopra a un giocatore.

   Non usa più .mc-window: quella classe porta un :hover con
   box-shadow !important che avrebbe spianato lo smusso ogni volta
   che il puntatore attraversa la scheda — e qui il puntatore la
   attraversa in continuazione, perché la scheda si trascina. */
.staff-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    /* Il fondo lascia la fascia dove stanno le miniature. */
    padding: clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) clamp(84px, 8vw, 104px);
    background: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, 0.055),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 4px 0 var(--mc-border-dark);
    overflow: hidden;
    user-select: none;
    cursor: grab;
}
.staff-card:active { cursor: grabbing; }
@media (max-width: 900px) {
    .staff-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        padding-bottom: 96px;
    }
    .staff-info { align-items: center; }
}

.staff-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

/* Il grado: una targhetta piena con l'estrusione sotto, come il
   prefisso di grado in chat. Spigoli vivi e ombra del testo di un
   pixel, che è la firma del carattere del gioco. */
.staff-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 9px 14px 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    border: 2px solid var(--mc-border-dark);
    border-radius: 0;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.staff-badge.is-red {
    color: #fff;
    background: #b91c1c;
    box-shadow: 0 3px 0 #7f1d1d;
}
.staff-badge.is-blue {
    color: #fff;
    background: #1d4ed8;
    box-shadow: 0 3px 0 #1e3a8a;
}
.staff-name {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.25rem, 2.7vw, 2.4rem);
    line-height: 1.3;
    color: #fff;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.staff-desc {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--text-gray);
}

/* Colonna della skin: targhetta sopra, skin sotto, miniature in fondo.
   Niente riquadri: né lo slot dietro alla skin né la piastra dietro al
   nome. Nel gioco non c'è nessuna cornice attorno a un giocatore, c'è il
   giocatore e sopra la sua riga di testo, e bastava quello. */
.staff-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 0;
}



.staff-figure > #staff-image {
    height: clamp(220px, 29vw, 340px);
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.75));
}

/* Il selettore torna nell'angolo in basso a destra della scheda. Prima
   ci finiva sopra alla skin perché sotto c'era lo slot dell'inventario,
   che arrivava fino al bordo; tolto quello, l'angolo è libero. */
.staff-picker {
    position: absolute;
    right: clamp(16px, 2.4vw, 26px);
    bottom: clamp(16px, 2.4vw, 26px);
    z-index: 20;
    display: flex;
    gap: 12px;
}
/* Su una colonna sola l'angolo è lontano da tutto: le miniature tornano
   centrate in fondo, su una loro pedana. */
@media (max-width: 900px) {
    .staff-picker {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 8px 10px;
        background: rgba(13, 14, 18, 0.8);
        border: 2px solid var(--mc-border-dark);
        border-radius: 3px;
    }
}
.staff-picker-btn { cursor: pointer; line-height: 0; }
.staff-picker img {
    width: 54px;
    height: 54px;
    border-radius: 3px;
    background: #14161d;
    object-fit: cover;
}

.staff-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #0d0e12;
    overflow: hidden;
}
.staff-progress > div {
    height: 100%;
    width: 0;
    background: var(--accent-orange);
}

/* ============================================================
   06 · COMMUNITY
   ============================================================ */
.discord-card {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
    overflow: hidden;
}
@media (max-width: 900px) {
    .discord-card { grid-template-columns: 1fr; }
}
.discord-art {
    position: relative;
    min-height: 320px;
    background: #191b23;
    border-right: 2px solid var(--mc-border-dark);
    overflow: hidden;
    cursor: crosshair;
}
@media (max-width: 900px) {
    .discord-art {
        border-right: none;
        border-bottom: 2px solid var(--mc-border-dark);
        min-height: 260px;
        order: -1;
    }
}
.discord-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 420px;
    margin: auto;
    object-fit: contain;
}
.discord-art .alien-img-1 { object-position: center; }
.discord-art .alien-img-2 { object-position: top; }

/* Come per la classifica: la mascotte si prende una colonna a sinistra e
   la sezione si allarga, altrimenti la card si mangerebbe lo spazio. */
#discord .sec-inner { width: min(1220px, 100%); }
.discord-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
    /* In piedi sulla stessa linea del fondo della card, non a mezz'aria. */
    align-items: end;
    gap: clamp(8px, 1.6vw, 26px);
}
.discord-mascot {
    /* Alta quanto la card anche se vuota: e' su di lei che l'entrata
       [data-reveal] misura la posizione, e una colonna alta zero finirebbe
       sotto la piega restando spenta. */
    align-self: stretch;
    /* Colonna vuota, l'alieno e' fuori flusso: in flusso sarebbe lui a
       dettare l'altezza della riga e spingerebbe la card giu', staccandola
       dal titolo. Cosi' puo' essere piu' alto della card senza spostarla. */
    position: relative;
}
.discord-mascot img {
    position: absolute;
    left: 0;
    /* 26px = il padding che .mc-corners lascia attorno alla card per gli
       angolari: i piedi cadono sul bordo basso della card, non degli angolari. */
    bottom: 26px;
    /* Stessa altezza dell'arciere accanto alla classifica: la sua larghezza
       per il rapporto fra le due sagome (471x529 contro 305x600). */
    width: clamp(130px, 17.7vw, 257px);
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.65));
}
/* Sopra questa soglia la sezione (1220px) non tocca ancora il padding di
   pagina: c'e' margine per spostare la mascotte piu' verso il bordo. */
@media (min-width: 1380px) {
    .discord-mascot img { left: -70px; }
}
@media (max-width: 900px) {
    .discord-grid { grid-template-columns: 1fr; }
    .discord-mascot { display: none; }
}

.discord-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(28px, 3.4vw, 52px);
}
.discord-title {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1rem, 2vw, 1.7rem);
    line-height: 1.7;
    color: #fff;
}
.discord-title span { color: var(--accent-orange); }
.discord-actions { display: flex; }

/* ============================================================
   07 · DOMANDE
   ------------------------------------------------------------
   <details> nativo: si apre senza JavaScript e resta accessibile
   da tastiera. L'apertura anima grid-template-rows da 0fr a 1fr —
   dove non è supportato il pannello compare di colpo, che è il
   comportamento standard di <details> e non un difetto.
   ============================================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: var(--bg-panel);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 4px 0 var(--mc-border-dark);
    overflow: hidden;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.66rem;
    line-height: 1.75;
    color: #e5e7eb;
    transition: color 0.16s, background-color 0.16s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #fff; background: #232733; }

/* Aperta, la domanda resta il coperchio della scatola e la risposta si
   apre sul fondo della pagina, come una finestra nel pannello: due toni
   diversi, separati da un filetto pieno. Prima le due parti dividevano
   lo stesso fondo e si leggevano come un blocco solo, con la risposta
   che galleggiava sotto la domanda.

   Due toni e non solo una riga: fra i grigi del pannello la riga da sola
   e' scuro su scuro e non si vede: e' il salto di fondo che fa il
   confine, il filetto lo rifinisce.

   Il filetto e' un'ombra interna e non un border: un bordo vero
   allungherebbe la scatola di 2px nel momento in cui si apre, e lo
   scatto si vedrebbe proprio sotto al dito che ha appena cliccato. */
.faq-item[open] summary {
    color: var(--accent-orange);
    box-shadow: inset 0 -2px 0 var(--mc-border-dark);
}

/* Il segno è un più fatto di due barre: aprendo, la verticale si
   ritira e resta il meno. Nessuna rotazione — un simbolo a pixel che
   gira mostra i bordi scalettati. */
.faq-mark {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
.faq-mark::before,
.faq-mark::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.22s var(--ease-out-expo), opacity 0.16s;
}
.faq-mark::before { left: 0; right: 0; top: 8px; height: 4px; }
.faq-mark::after  { top: 0; bottom: 0; left: 8px; width: 4px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }

.faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s var(--ease-out-expo);
}
.faq-item[open] .faq-body { grid-template-rows: 1fr; }
.faq-body > div {
    overflow: hidden;
    background: var(--bg-dark);
}
/* Stessa impostazione del testo corrente di tutte le altre sezioni
   (.sec-text): stesso corpo, stessa interlinea, stesso grigio. Il salto
   che si sentiva non era il carattere — Outfit e' il carattere di lettura
   del sito, dall'occhiello dell'eroe ai documenti legali — ma il fatto
   che non c'era niente fra il titolo a pixel e il paragrafo.
   La misura tiene la riga sotto i settanta caratteri: a tutta larghezza
   della scatola erano piu' di novanta. */
.faq-body p {
    margin: 0;
    padding: 20px 22px 22px;
    max-width: 66ch;
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--text-gray);
}
/* Come .sec-text b: l'enfasi e' chiara, non arancione. */
.faq-body b,
.faq-body strong { color: #e5e7eb; font-weight: 700; }
.faq-body code {
    padding: 1px 6px;
    font-size: 1.1rem;
    color: var(--accent-orange);
    background: #0d0e12;
    /* 2px come ogni altro bordo del sito: a 1px era l'unico filo sottile. */
    border: 2px solid var(--mc-border-dark);
    border-radius: 2px;
}

/* ============================================================
   MODALI — guscio comune
   ------------------------------------------------------------
   Testata, corpo scorrevole e croce di chiusura sono gli stessi per
   "Come entrare" e per i documenti legali: due modali con due
   intestazioni diverse si leggono come due pezzi di siti diversi.
   ============================================================ */
@keyframes modalBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalBoxIn {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
#join-modal.modal-open > div:first-child {
    animation: modalBackdropIn 0.25s ease-out;
}
#join-modal.modal-open .mc-window {
    animation: modalBoxIn 0.4s var(--ease-out-back);
}
#join-modal.modal-closing {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

/* Il guscio dei modal NON è una card cliccabile: l'hover di .mc-window
   (base.css) lo faceva sobbalzare ogni volta che il puntatore attraversava
   il pannello. Qui lo si annulla, animazione di entrata a parte. */
#join-modal .mc-window {
    transition: none;
}
#join-modal .mc-window:hover {
    transform: none;
    box-shadow: 0 4px 0 var(--mc-border-dark);
}

.join-shell  { max-width: 1040px; }

.modal-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #191b23;
    /* Il blocco grigio deve finire su un bordo, non sfumare nel
       documento: senza, non si capiva dove terminasse la testata e le
       linguette sembravano appoggiate sul testo. */
    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); }

/* Chiusura dei modal: stesso stampo dei bottoni del sito (rosso pieno,
   bordo netto, estrusione sotto) invece di una crocetta grigia piatta. */
.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);
}

/* Selettore a segmenti dei documenti legali: tre caselle dentro una
   cornice sola, come un interruttore a levetta. Prima erano tre
   linguette staccate e la sottolineatura dell'attiva si perdeva. */
/* Il margine è lo STESSO sopra e sotto: prima era 0 in alto e 18px in
   basso, quindi le linguette stavano incollate al filetto della
   testata e lontanissime dalla fine del blocco grigio. Ora la fascia
   è simmetrica e il selettore ci sta in mezzo. */
.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; }
/* La linguetta attiva porta la stessa sfaccettatura degli altri pezzi
   arancioni del sito: luce in alto a sinistra, ombra in basso a
   destra. Sono ombre INTERNE, perché una esterna sborderebbe dalla
   guida, che ha cinque pixel di padding. */
.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);
}

/* ── Modale "Come entrare": corpo ──────────────────────────── */
.join-grid {
    display: grid;
    gap: clamp(20px, 3vw, 38px);
}
@media (min-width: 900px) {
    .join-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
}

.join-col { display: flex; flex-direction: column; }
.join-col-label,
.join-media-label {
    display: block;
    margin-bottom: 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.46rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
}
@media (max-width: 899px) {
    .join-col-label,
    .join-media-label { text-align: center; }
}

.join-steps {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.join-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
/* Filo che unisce i passaggi: due quadratini, non una linea continua.
   Una linea sottile in mezzo a un'interfaccia a blocchi è l'unica
   cosa che si vede subito essere disegnata da un'altra mano. */
.join-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 42px;
    width: 4px;
    height: calc(100% - 30px);
    background-image: linear-gradient(to bottom, #2f3444 0 4px, transparent 4px 10px);
    background-size: 4px 10px;
}
.join-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    color: #fff;
    background: var(--accent-orange);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--accent-orange-dark);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.join-step-body { min-width: 0; padding-top: 3px; }
.join-step h4 {
    margin: 0 0 5px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.62rem;
    line-height: 1.6;
    color: #fff;
    text-transform: none;
}
.join-step p {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-gray);
}
.join-step strong { color: #e5e7eb; font-weight: 700; }
.join-step em { color: #e5e7eb; font-style: normal; }
.join-step code {
    padding: 1px 6px;
    font-size: 1.05rem;
    color: var(--accent-orange);
    background: #0d0e12;
    border: 1px solid var(--mc-border-dark);
    border-radius: 2px;
}
.join-step-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.join-step-title h4 { margin-bottom: 0; }
.join-step-tag {
    padding: 4px 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
    border: 2px dashed #2f3444;
    border-radius: 2px;
}
.join-step.is-unlinked::after { display: none; }

/* Passaggio facoltativo: staccato dagli altri e in grigio, così si
   vede che la sequenza obbligatoria è finita al quarto. */
.join-step.is-optional {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 2px dashed #232733;
}
.join-step.is-optional .join-step-num {
    color: #cbd5e1;
    background: #2f3444;
    box-shadow: 0 3px 0 #171a22;
}
.join-step.is-optional h4 { color: #cbd5e1; }

.join-ip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding: 16px 18px;
    background: #0d0e12;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
}
.join-ip-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.join-ip-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.44rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
}
.join-ip .ip-value { font-size: 1.6rem; }
.join-ip-copy { flex-shrink: 0; width: auto; }

/* Registrazione dello schermo: incassata come lo schermo del
   televisore del carosello. */
.join-media { display: flex; flex-direction: column; }
/* La cornice si stringe sulla registrazione: con flex:1 si allungava fino
   all'altezza della colonna dei passaggi e sotto alla GIF restava mezzo
   pannello arancione vuoto. */
.join-media-frame {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    background: var(--accent-orange);
    border: 3px solid var(--mc-border-dark);
    box-shadow:
        inset 4px 4px 0 #fbbf24,
        inset -4px -4px 0 var(--accent-orange-dark),
        0 6px 0 var(--mc-border-dark);
}
.join-media-frame img {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid var(--mc-border-dark);
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.55);
}
@media (max-width: 899px) {
    .join-media { display: none; }
}

/* ── Paginazione carousel (dots) ──────────────────────────── */
.carousel-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 15;
    padding: 6px 10px;
    background: rgba(13, 14, 18, 0.65);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out-expo);
}
.group:hover .carousel-dots,
.carousel-dots.always-on { opacity: 1; }

.carousel-dot {
    width: 12px;
    height: 12px;
    background: #4b5563;
    border: 2px solid var(--mc-border-dark);
    cursor: pointer;
    padding: 0;
    transition: all 0.25s var(--ease-out-back);
    image-rendering: pixelated;
}
.carousel-dot:hover { background: #9ca3af; transform: scale(1.2); }
.carousel-dot.active {
    background: var(--accent-orange);
    width: 28px;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* ── Cornice a televisore (carosello modalità) ────────────────
   Bordo arancio con lo spessore di un mobile: spigolo alto-sinistro
   schiarito, spigolo basso-destro nell'arancio scuro, e sotto
   l'ombra piatta da 8px che tutti i pezzi arancioni portano.

   Non usa .mc-window apposta: .mc-window-static:hover riscrive
   box-shadow con !important e spianerebbe la sfaccettatura al
   passaggio del mouse. */
.tv-frame {
    background: var(--accent-orange);
    border: 3px solid var(--mc-border-dark);
    border-radius: 0;
    padding: 12px;
    box-shadow:
        inset 5px 5px 0 #fbbf24,
        inset -5px -5px 0 var(--accent-orange-dark),
        0 8px 0 var(--mc-border-dark);
}
/* Lo schermo: incassato nel mobile, quindi il rilievo è invertito e
   il bordo nero lo stacca dall'arancio. */
.tv-frame img {
    border-radius: 0;
    border: 3px solid var(--mc-border-dark);
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.55);
}

/* ── Sezione modalità: due colonne ────────────────────────── */
.mode-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 900px) {
    .mode-grid { grid-template-columns: 1fr; }
    .mode-media { order: -1; }
}
.mode-copy { display: flex; flex-direction: column; gap: 22px; }

/* Elenco spuntato.
   Prima erano tre pannelli incassati affiancati: tre scatole per tre
   frasi corte, cioè più cornice che contenuto. Prima ancora, tre
   righe separate da filetti, cioè una tabella senza intestazione.

   Qui torna il gesto che la pagina aveva già prima del rifacimento:
   la voce scivola di sei pixel a destra e il testo passa al bianco,
   mentre il segno di spunta cresce di un quarto. Costa due
   transizioni e si capisce senza doverci pensare. */
.mode-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mode-checks li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-gray);
    /* Si scrive `translate` e non `transform`: la <li> porta un
       data-reveal, e a entrata finita il motore delle animazioni le
       scrive `transform: none` INLINE — che vince su qualunque regola
       del foglio, hover compreso. Come proprieta' separata lo
       spostamento si compone con quella inline invece di essere
       sovrascritto. Stesso motivo per cui .mc-corners usa translate. */
    transition: color 0.2s, translate 0.2s var(--ease-out-back);
}
.mode-checks li:hover {
    color: #fff;
    translate: 6px 0;
}
.mode-checks b {
    font-weight: 700;
    color: #e5e7eb;
    transition: color 0.2s;
}
.mode-checks li:hover b { color: #fff; }
/* Il testo sta in uno <span> e non sciolto nella <li>: in un contenitore
   flex ogni nodo di testo diventa un elemento a se', e il gap di 14px
   finiva anche fra una parola in grassetto e la virgola che la segue. */
.mode-checks li > span { min-width: 0; }

/* Solo il segno di spunta, senza il quadrato attorno: la cornice
   raddoppiava il contorno che l'elenco ha già nell'allineamento, e a
   22px si leggeva più il quadrato del segno. */
.mode-checks li > svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--accent-orange);
    image-rendering: pixelated;
    transition: transform 0.2s var(--ease-out-back);
}
.mode-checks li:hover > svg { transform: scale(1.25); }

.mode-actions { display: flex; flex-wrap: wrap; gap: 12px; }







/* Numeri che cambiano: piccolo scatto */
@keyframes countPop {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
.count-pop { animation: countPop 0.35s var(--ease-out-back); display: inline-block; }