/* ==========================================================
   REGISTRAZIONE FONT LOCALE CUSTOM
   ================================================---------- */
@font-face {
    font-family: 'CustomGlitchFont';
    src: url('../font/glitch.ttf');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================
   RESET (le variabili vivono in tokens.css — design system)
   ================================================---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* I form control NON ereditano text-transform in alcuni browser (UA stylesheet
   di Edge/Firefox li resetta a none): forziamo l'eredità dal body (MAIUSCOLO). */
button, input, select, textarea {
    text-transform: inherit;
}

/* ==========================================================
   SFONDO CON BACKGROUND.PNG, NEON CALDO E INTENSO
   ================================================---------- */
body {
    /* Base scura profonda: gli effetti luce vivono in #sfondo-fx (puro CSS) */
    background:
        radial-gradient(ellipse 120% 80% at 50% 25%, #0d0721 0%, #070313 45%, #020108 100%);
    background-attachment: fixed;

    color: var(--text-main);
    
    /* Applicazione centrale del font tramite variabile */
    font-family: var(--font-main);
    /* Il font in minuscolo rende male: tutto il testo del gioco è MAIUSCOLO */
    text-transform: uppercase;

    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ==========================================================
   SFONDO FX — "cyberpunk loader" in puro CSS.
   Fasci di luce conici GIGANTI che ruotano (transform =
   compositor, costo ~zero), pulsazione centrale, scanlines.
   ================================================---------- */
#sfondo-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* CERCHIO NEON gigante: gradiente che ruota + copia sfocata che IRRADIA
   (stile "magic card" a scala schermo; la rotazione è transform=compositor) */
.fx-cerchio, .fx-cerchio-glow {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 108vmin;
    height: 108vmin;
    margin: -54vmin 0 0 -54vmin;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #5ddcff, #3c67e3 30%, #4e00c2 55%, #ff0055 76%, #5ddcff 100%);
    animation: fxGira 9s linear infinite;
    will-change: transform;
}
/* Struttura "magic card": il disco a gradiente ruota, la copertura interna
   scura (::after, che ruota con lui) lascia visibile SOLO il bordo. */
.fx-cerchio::after, .fx-cerchio-glow::after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: radial-gradient(circle, #0c0620 0%, #070313 75%);
}
.fx-cerchio { opacity: 1; }
/* la luce irradiata: stessa struttura ma sfocata (banda più larga) */
.fx-cerchio-glow {
    filter: blur(46px);
    opacity: 0.85;
}
.fx-cerchio-glow::after { inset: 40px; }
@keyframes fxGira { to { transform: rotate(360deg); } }

/* Ambiente tenue dietro il cerchio (la profondità vera la fa il faro) */
.fx-cerchio-retro {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 150vmin;
    height: 150vmin;
    margin: -75vmin 0 0 -75vmin;
    background: radial-gradient(circle,
        rgba(90, 60, 220, 0.16) 0%,
        rgba(0, 160, 255, 0.06) 38%,
        transparent 62%);
    animation: fxRespira 8s ease-in-out infinite alternate;
    will-change: opacity;
}

/* FARO ORBITANTE: una sorgente di luce FISICA che gira in sincrono col
   gradiente del cerchio e gli passa DIETRO — la copertura scura del cerchio
   la occulta al passaggio: è questo che crea la profondità. */
.fx-orbita {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 108vmin;
    height: 108vmin;
    margin: -54vmin 0 0 -54vmin;
    animation: fxGira 9s linear infinite;   /* stessa rotazione del cerchio */
    will-change: transform;
}
.fx-faro {
    position: absolute;
    top: -16vmin;                            /* seduto sul bordo, fuori e dentro */
    left: 50%;
    width: 64vmin;
    height: 64vmin;
    margin-left: -32vmin;
    background: radial-gradient(circle,
        rgba(120, 200, 255, 0.55) 0%,
        rgba(80, 110, 240, 0.22) 38%,
        transparent 65%);
}

/* Fonti di luce agli angoli dello schermo (respirano sfalsate) */
.fx-luce {
    position: absolute;
    width: 80vmax;
    height: 80vmax;
    animation: fxRespira 6s ease-in-out infinite alternate;
    will-change: opacity;
}
.fx-luce.tl { left: -40vmax; top: -40vmax;    background: radial-gradient(circle, rgba(0, 200, 255, 0.22) 0%, transparent 60%); }
.fx-luce.tr { right: -40vmax; top: -40vmax;   background: radial-gradient(circle, rgba(112, 56, 248, 0.26) 0%, transparent 60%); animation-delay: 1.5s; }
.fx-luce.bl { left: -40vmax; bottom: -40vmax; background: radial-gradient(circle, rgba(255, 0, 85, 0.16) 0%, transparent 60%); animation-delay: 3s; }
.fx-luce.br { right: -40vmax; bottom: -40vmax; background: radial-gradient(circle, rgba(60, 103, 227, 0.22) 0%, transparent 60%); animation-delay: 4.5s; }
@keyframes fxRespira {
    from { opacity: 0.45; }
    to   { opacity: 1; }
}

/* Scanlines sottili (statiche, danno grana "monitor") */
.fx-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 4px);
}

/* Rispetta chi ha "riduci movimento" (batteria/accessibilità su mobile) */
@media (prefers-reduced-motion: reduce) {
    .fx-cerchio, .fx-cerchio-glow, .fx-cerchio-retro, .fx-orbita, .fx-luce { animation: none; }
    .hud-status { animation: none; }
}

.hud-container {
    width: 100%;
    max-width: 480px;
    position: relative;
    z-index: 1;
}

/* Desktop: colonna HUD più larga (le card overlay stanno in components.css) */
@media (min-width: 900px) {
    .hud-container { max-width: 640px; }
}

/* Navbar Superiore HUD (bordo animato in components.css) */
.hud-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    letter-spacing: 2px;
}

.hud-title {
    color: var(--hud-light);
    font-weight: bold;
    text-shadow: 0 0 8px var(--hud-purple);
}

.hud-status {
    color: var(--hud-neon-pink);
    font-weight: bold;
    text-shadow: 0 0 8px var(--hud-neon-pink);
    animation: pulseStatus 2s infinite;
}

@keyframes pulseStatus {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}