/* ============================================================
   OrionSS — ss.css
   I pezzi propri del sito del tool. Tutto il resto (bottoni a
   blocco, sezioni, FAQ, modali, footer) arriva dagli stessi
   fogli del sito principale, copiati in css/ così come sono.
   Pagina unica: hero a due colonne, procedura, download, domande.
   ============================================================ */

:root {
    --ss-ok:   #4ade80;
    --ss-warn: #f59e0b;
    --ss-bad:  #ef4444;
}

/* Una pagina corta: meno aria fra le sezioni del sito principale. */
.sec { padding-block: clamp(56px, 8vh, 96px); }
.sec-head { margin-bottom: clamp(28px, 4.5vh, 52px); }

/* ============================================================
   HERO — testo a sinistra, lente a destra
   ============================================================ */
.hero-ss {
    min-height: 0;
    padding-top: clamp(36px, 7vh, 80px);
    padding-bottom: clamp(48px, 8vh, 88px);
}
.hero-ss-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
}
.hero-ss-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.4vh, 24px);
}
.hero-ss .hero-title { font-size: clamp(2.2rem, 6vw, 4.4rem); }
.hero-ss .xray { margin-inline: auto; }
@media (max-width: 900px) {
    .hero-ss-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-ss-text { align-items: center; }
    .hero-ss-inner > :last-child { order: -1; }
    .hero-ss .hero-actions,
    .hero-facts { justify-content: center; }
}

/* ── Lente a raggi X ──
   Due copie della stessa immagine una sopra l'altra: quella sotto è
   "radiografata" e si vede solo dentro la lente. Il JS scrive la
   posizione (--lx, --ly) già agganciata alla griglia, il ritaglio lo
   fa il CSS. Sotto ci sono tre scritte che in superficie non esistono:
   è quello che fa uno screenshare. */
.xray {
    --ls: 120px;
    --lx: 0px;
    --ly: 0px;
    position: relative;
    width: clamp(220px, 32vw, 420px);
    aspect-ratio: 495 / 504;
    cursor: crosshair;
    user-select: none;
}
.xray img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}
.xray-base { filter: drop-shadow(0 12px 0 rgba(9, 11, 16, 0.7)); }
.xray-under {
    position: absolute;
    inset: 0;
    clip-path: inset(var(--ly) calc(100% - var(--lx) - var(--ls)) calc(100% - var(--ly) - var(--ls)) var(--lx));
    pointer-events: none;
}
.xray-under img {
    filter: grayscale(1) invert(1) contrast(1.5) sepia(1) hue-rotate(160deg) saturate(2.4) brightness(0.95);
}
/* il retino: le righe di scansione del fondo (.bg-scan), fitte e chiare */
.xray-under::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom, rgba(13, 14, 18, 0.55) 0 2px, transparent 2px 4px);
}
.xray-tag {
    position: absolute;
    z-index: 1;
    padding: 1px 6px;
    font-family: 'VT323', monospace;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    line-height: 1.2;
    white-space: nowrap;
    color: #fecaca;
    background: #2a0f12;
    border: 2px solid var(--ss-bad);
}
.xray-lens {
    position: absolute;
    left: var(--lx);
    top: var(--ly);
    width: var(--ls);
    height: var(--ls);
    border: 3px solid var(--accent-orange);
    box-shadow: 0 3px 0 var(--accent-orange-dark), inset 0 0 0 2px rgba(13, 14, 18, 0.6);
    pointer-events: none;
}
/* mirino: quattro tacche a metà dei lati, non una croce sopra al punto guardato */
.xray-lens::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--accent-orange) 0 0) 50% 0    / 4px 10px no-repeat,
        linear-gradient(var(--accent-orange) 0 0) 50% 100% / 4px 10px no-repeat,
        linear-gradient(var(--accent-orange) 0 0) 0 50%    / 10px 4px no-repeat,
        linear-gradient(var(--accent-orange) 0 0) 100% 50% / 10px 4px no-repeat;
}
.xray-lens b {
    position: absolute;
    top: 100%;
    left: -3px;
    margin-top: 7px;
    padding: 4px 6px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.4rem;
    font-weight: normal;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #2a1a04;
    background: var(--accent-orange);
    border: 2px solid var(--mc-border-dark);
}

/* Tre garanzie sotto i bottoni: quello che il tool non fa, in breve. */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero-facts li {
    padding: 8px 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.45rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7c8697;
    background: rgba(13, 14, 18, 0.85);
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--mc-border-dark);
}
.hero-facts b { font-weight: normal; color: #fff; }

/* ============================================================
   PROCEDURA — i passi a sinistra, il PIN a destra con la
   mascotte che sbuca da dietro la card con la lente
   ============================================================ */
.proc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
}
@media (max-width: 900px) { .proc-grid { grid-template-columns: 1fr; } }
.proc-grid .join-steps { margin: 0; }
.proc-grid .join-step h4 { font-size: 0.66rem; }
.proc-grid .join-step p { font-size: 0.98rem; }

/* La card copre la mascotte dalla vita in giù: si vedono testa, lente e spalle. */
.peek {
    --pw: clamp(210px, 20vw, 280px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: calc(var(--pw) * 0.75);
}
.peek-img {
    position: absolute;
    top: 0;
    right: 10%;
    width: var(--pw);
    height: auto;
    pointer-events: none;
}
.peek > .mc-window { position: relative; z-index: 1; }
/* su due colonne la testa sale nello spazio vuoto accanto al titolo */
@media (min-width: 901px) { .peek { margin-top: calc(var(--pw) * -0.5); } }
@media (max-width: 900px) { .peek { width: min(460px, 100%); margin-inline: auto; } }

/* La card del PIN è la finestra di OrionSS mentre chiede il PIN: stessi colori
   (C_BG, C_BAR, C_ORANGE, C_DIM di main.cpp), stesso font (Poppins), stesso
   campo con i trattini che si riempiono e il riquadro arancio sull'ultima
   cifra. I requisiti stanno sotto come una barra di stato, l'avviso è la
   pillola rossa con cui il tool mostra gli errori. */
.ssw {
    --c-bg: #262a36;
    --c-bar: #0e111a;
    --c-org: #ff8f26;
    --c-dim: #949bb5;
    --c-txt: #f5f5fa;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--c-bg);
    font-family: 'Poppins', 'Outfit', sans-serif;
}
.ssw-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding: 0 14px;
    background: var(--c-bar);
    color: var(--c-dim);
    font-size: 13px;
    font-weight: 600;
}
.ssw-name b { font-weight: 600; color: var(--c-org); }
.ssw-btns { display: flex; align-items: center; gap: 16px; }
.ssw-min { width: 10px; height: 2px; background: currentColor; }
.ssw-x {
    width: 10px;
    height: 10px;
    background:
        linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
.ssw-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 18px 20px;
    text-align: center;
}
.ssw-logo { width: 92px; height: auto; }
.ssw-ask { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-dim); }
.ssw-pin {
    display: flex;
    gap: clamp(4px, 0.9vw, 10px);
    padding: 8px 14px;
    background: var(--c-bar);
    border-radius: 10px;
}
.ssw-pin span {
    display: grid;
    place-items: center;
    width: clamp(20px, 2.3vw, 28px);
    height: 40px;
    border-radius: 4px;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1;
    color: rgba(148, 155, 181, 0.55);
}
/* il campo si può usare: input vero e invisibile sopra le celle, come
   keyField() del tool (clic, cifre, incolla, backspace) */
.ssw-pin { position: relative; cursor: text; outline: 2px solid transparent; transition: outline-color 0.15s; }
.ssw-pin:hover { outline-color: rgba(148, 155, 181, 0.35); }
.ssw-pin.is-focus { outline-color: rgba(255, 143, 38, 0.7); }
.ssw-in {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina al tocco */
    color: transparent;
    caret-color: transparent;
    background: none;
    border: 0;
    cursor: text;
}
/* col campo attivo il prossimo trattino si accende e lampeggia */
.ssw-pin.is-focus span.is-next { color: var(--c-txt); animation: ssw-blink 1s steps(1) infinite; }
@keyframes ssw-blink { 50% { opacity: 0.25; } }
.ssw-pin span.is-on { color: var(--c-txt); }
.ssw-pin span.is-cur { background: rgba(255, 143, 38, 0.45); }
.ssw-pin span.is-pop { animation: ssw-pop 0.18s ease-out; }
@keyframes ssw-pop { from { transform: scale(1.35); color: var(--c-org); } }
.ssw-meta { margin: 0; font-size: 12.5px; color: var(--c-dim); }
.ssw-meta b { font-weight: 600; color: var(--c-txt); font-variant-numeric: tabular-nums; }

/* Fasi: PIN -> verifica (rotellina) -> scansione -> fine. Stanno nella stessa
   cella della griglia, così la finestra ha sempre l'altezza della più alta. */
.ssw-stage { display: grid; width: 100%; }
.ssw-st {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s 0.25s;
}
.ssw[data-state="pin"] .ssw-st-pin,
.ssw[data-state="verify"] .ssw-st-pin,
.ssw[data-state="scan"] .ssw-st-scan,
.ssw[data-state="done"] .ssw-st-done { opacity: 1; visibility: visible; transition: opacity 0.25s; }
/* in verifica la scadenza lascia il posto alla rotellina, nello stesso spazio */
.ssw-st-pin { position: relative; }
.ssw-spin {
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border: 3px solid rgba(255, 143, 38, 0.18);
    border-top-color: var(--c-org);
    border-radius: 50%;
    opacity: 0;
    animation: ssw-rot 0.7s linear infinite;
}
.ssw[data-state="verify"] .ssw-spin { opacity: 1; }
.ssw[data-state="verify"] .ssw-st-pin .ssw-meta { visibility: hidden; }
@keyframes ssw-rot { to { transform: rotate(360deg); } }
/* barra come quella del tool: binario scuro, riempimento arancio, riflesso giallo */
.ssw-prog {
    position: relative;
    width: min(330px, 86%);
    height: 11px;
    background: var(--c-bar);
    border-radius: 6px;
    overflow: hidden;
}
.ssw-prog i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--w, 0%);
    background: var(--c-org);
    border-radius: 6px;
    box-shadow: inset 0 3px 0 rgba(255, 201, 56, 0.45);
    transition: width 0.35s ease-out;
}
.ssw-ok { color: var(--c-txt); }
.ssw[data-state="done"] { cursor: pointer; }
.ssw-st-done u { text-underline-offset: 3px; color: var(--c-org); }

@media (prefers-reduced-motion: reduce) { .ssw-pin span.is-pop { animation: none; } }

/* ============================================================
   DOWNLOAD — una card sola: a sinistra la mascotte col tablet
   (la finestra del tool durante lo scan) in un riquadro scuro,
   file, bottone e impronta a destra
   ============================================================ */
/* La metà della mascotte è fatta come .discord-art del sito principale:
   fondo scuro pieno per tutta l'altezza, separata da un bordo. */
.dl-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    align-items: stretch;
    width: min(940px, 100%);
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
}
.dl-art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 2.4vw, 28px);
    background: #191b23;
    border-right: 2px solid var(--mc-border-dark);
}
.dl-mascot {
    display: block;
    width: 100%;
    max-width: 250px;
    height: auto;
    pointer-events: none;
}
.dl-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(22px, 3vw, 34px);
}
.dl-file {
    display: flex;
    align-items: center;
    gap: 18px;
}
.dl-file-ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #14161d;
    border-radius: 3px;
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.5);
    color: var(--accent-orange);
}
.dl-file-ico svg { width: 34px; height: 34px; }
.dl-file-name {
    margin: 0 0 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(0.8rem, 1.8vw, 1.1rem);
    color: #fff;
    text-transform: none;
}
.dl-file-meta {
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: var(--text-gray);
}
.dl-file-meta b { font-weight: normal; color: var(--accent-orange); }
.dl-main .dl-btn { width: 100%; }
.dl-hash {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: #14161d;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
}
@media (max-width: 700px) {
    .dl-card { grid-template-columns: 1fr; }
    .dl-mascot { max-width: 200px; }
    .dl-art { border-right: none; border-bottom: 2px solid var(--mc-border-dark); }
}

/* ============================================================
   DOMANDE — due colonne, ogni voce si apre al suo posto
   ============================================================ */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; } }
/* Aperte, le voci hanno tutte la stessa scatola: domanda alta quanto la più
   lunga, risposta alta quanto la più lunga (misure scritte da ss.js). La
   risposta corta resta in alto con il fondo scuro sotto, invece di una
   scheda più bassa delle altre. Il min-height sta sul paragrafo e non sul
   contenitore che si apre: così l'animazione 0fr → 1fr resta. */
.faq-grid .faq-item > summary { min-height: var(--faq-sum, 0px); }
.faq-grid .faq-body p { min-height: var(--faq-ans, 0px); max-width: none; }
#procedura .section-title::after,
#domande .section-title::after { left: 0; transform: none; }

.dl-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.42rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
}
.dl-copyrow { display: flex; gap: 8px; align-items: stretch; }
.dl-copyrow code {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-family: 'VT323', monospace;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--accent-orange);
    word-break: break-all;
    background: #0b0d12;
    border: 2px solid var(--mc-border-dark);
    border-radius: 2px;
}
.dl-copyrow .btn-px { width: auto; flex-shrink: 0; }

/* Link e comandi dentro le risposte e i passaggi: arancio come nei
   documenti legali (.legal-doc a). */
.faq-body a,
.join-step a {
    color: var(--accent-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.faq-body code {
    padding: 0 6px;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    color: var(--accent-orange);
    background: #0b0d12;
}

/* Sotto la finestra del tool: una card del sito appesa alla finestra con
   due catenelle a pixel, col quadratino rosso dei passi. Il punto
   esclamativo è disegnato a pixel e centrato nella griglia (quello del
   font cadeva fuori centro). */
.ssw-sign {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
}
.ssw-sign::before,
.ssw-sign::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    width: 4px;
    height: 30px;
    background: repeating-linear-gradient(to bottom, #8a8f99 0 4px, #3a3d45 4px 6px, #5d616a 6px 9px, #3a3d45 9px 10px);
    box-shadow: 1px 0 0 #1c1e24, -1px 0 0 #1c1e24;
}
.ssw-sign::before { left: 16%; }
.ssw-sign::after { right: 16%; }
.ssw-note-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: #dc2626;
    border: 2px solid var(--mc-border-dark);
    border-radius: 3px;
    box-shadow: 0 3px 0 #7f1d1d;
}
.ssw-note-ico svg { width: 16px; height: 16px; }
.ssw-note-txt h4 {
    margin: 0 0 4px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    line-height: 1.6;
    color: #fff;
}
.ssw-note-txt p {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-gray);
}
.ssw-note-txt strong { color: #fca5a5; font-weight: 700; }

/* ============================================================
   NOTE DEI DOCUMENTI LEGALI — in stile GUI del gioco
   ------------------------------------------------------------
   Riquadro pieno (niente trasparenze), smusso chiaro in alto a
   sinistra e scuro in basso a destra come le finestre del gioco,
   icona a pixel a sinistra (cartello rosso per gli avvisi, "i" oro
   per le informazioni), testo nel carattere a pixel.
   ============================================================ */
.legal-doc .legal-note {
    position: relative;
    max-width: 64ch;
    padding: 12px 16px 13px 52px;
    background: #16181f;
    border: 2px solid #3b3220;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.06),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45),
        0 3px 0 var(--mc-border-dark);
}
.legal-doc .legal-note.is-warn { background: #1c1214; border-color: #5c1d1d; }
.legal-doc .legal-note::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 13px;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%233f2a00' d='M3 2h12v1h1v12h-1v1H3v-1H2V3h1z'/%3E%3Cpath fill='%23ffaa00' d='M2 1h12v1h1v12h-1v1H2v-1H1V2h1z'/%3E%3Cpath fill='%231e212b' d='M7 3h2v2H7zM6 6h3v6h1v1H6v-1h1V7H6z'/%3E%3C/svg%3E") center / contain no-repeat;
    image-rendering: pixelated;
}
.legal-doc .legal-note.is-warn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%233f1515' d='M8 2h2v2h1v2h1v2h1v2h1v2h1v2h1v2H2v-2h1v-2h1v-2h1V8h1V6h1V4h1z'/%3E%3Cpath fill='%23ff5555' d='M7 1h2v2h1v2h1v2h1v2h1v2h1v2h1v2H1v-2h1v-2h1V9h1V7h1V5h1V3h1z'/%3E%3Cpath fill='%231d1417' d='M7 5h2v5H7zM7 11h2v2H7z'/%3E%3C/svg%3E"); }
.legal-doc .legal-note .legal-note-label { color: #ffaa00; }
.legal-doc .legal-note.is-warn .legal-note-label { color: #ff5555; }
.legal-doc .legal-note p {
    margin: 4px 0 0;
    font-family: 'VT323', monospace;
    font-size: 1.28rem;
    line-height: 1.25;
    color: #e5e7eb;
    text-shadow: 2px 2px 0 #000;
}
.legal-doc .legal-note strong { font-weight: normal; color: #ffff55; }