/* ============================================================
   STYLE.CSS – Aspetto visivo del gioco
   Tutto il "look retrò" viene da qui:
     - sfondo nero
     - font pixel-art
     - bordo verde luminoso (effetto monitor CRT)
     - righe scanline sovrapposte
   ============================================================ */

/* Reset: toglie margini e padding di default dal browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pagina intera: sfondo nero, contenuto centrato */
body {
    background-color: #000000;
    display: flex;
    justify-content: center;   /* centra orizzontalmente */
    align-items: center;       /* centra verticalmente */
    min-height: 100vh;         /* occupa tutta l'altezza dello schermo */
    font-family: 'Press Start 2P', monospace;
    overflow: hidden;          /* niente barre di scorrimento */

    /* Sfondo con leggero gradiente radiale per effetto profondità spaziale */
    background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 70%);
}

/* Contenitore del canvas: posizionato in modo relativo
   così l'overlay scanline si sovrappone correttamente */
#gameContainer {
    position: relative;
    display: inline-block;
    /* Leggera ombra esterna per isolare visivamente il gioco */
    filter: drop-shadow(0 0 30px rgba(0, 255, 65, 0.2));
}

/* Il canvas è il vero "schermo" del gioco.
   Il bordo e il glow verde simulano un monitor arcade. */
#gameCanvas {
    display: block;
    border: 3px solid #00FF41;

    /* Effetto glow verde multi-livello (strato interno + esterno) */
    box-shadow:
        0 0 8px  #00FF41,
        0 0 20px rgba(0, 255, 65, 0.6),
        0 0 50px rgba(0, 255, 65, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Overlay scanline: copre l'intero canvas con righe sottili
   per imitare la griglia di pixel di un vecchio tubo catodico */
#scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Non intercetta clic o tasti (il gioco deve funzionare sotto) */
    pointer-events: none;

    /* Pattern di righe: trasparente + riga scura ogni 4px */
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.12) 3px,
        rgba(0, 0, 0, 0.12) 4px
    );

    /* Sopra al canvas, sotto eventuali popup */
    z-index: 10;

    /* Piccola opacità globale per non scurire troppo */
    opacity: 0.8;
}

/* Vignette: angoli più scuri, come uno schermo CRT reale */
#gameContainer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 11;
}

/* ============================================================
   RESPONSIVE MOBILE
   Su schermi stretti il canvas si scala con CSS custom property
   --game-scale (settata da JS in setupMobile).
   I controlli touch compaiono solo se body.touch-device.
   ============================================================ */

@media (max-width: 820px) {
    body {
        align-items: flex-start;
        overflow-y: auto;          /* consente scroll verticale per i controlli */
        overflow-x: hidden;
    }

    #gameContainer {
        transform-origin: top center;
        transform: scale(var(--game-scale, 1));
        /* Annulla lo spazio vuoto lasciato dal transform */
        margin-bottom: calc((var(--game-scale, 1) - 1) * 600px);
    }
}

/* ── Pannello controlli touch ─────────────────────────────── */

#mobile-controls {
    display: none;   /* nascosto su desktop / senza touch */
}

body.touch-device #mobile-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px 20px;
    gap: 16px;
    position: relative;
    z-index: 20;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(0, 0, 0, 0.6);
}

/* D-pad a croce: griglia 3×2 */
.mc-dpad {
    display: grid;
    grid-template-columns: 52px 52px 52px;
    grid-template-rows: 52px 52px;
    gap: 5px;
}

/* Pannello azioni destra */
.mc-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Base comune per tutti i tasti */
.mc-btn {
    background  : rgba(0, 255, 65, 0.10);
    border      : 2px solid rgba(0, 255, 65, 0.35);
    border-radius: 8px;
    color       : #00FF41;
    font-family : 'Press Start 2P', monospace;
    font-size   : 14px;
    width       : 52px;
    height      : 52px;
    display     : flex;
    align-items : center;
    justify-content: center;
    touch-action: none;
    cursor      : pointer;
    -webkit-tap-highlight-color: transparent;
    transition  : background 0.06s, border-color 0.06s;
}

.mc-btn:active,
.mc-btn.pressed {
    background   : rgba(0, 255, 65, 0.32);
    border-color : #00FF41;
    box-shadow   : 0 0 10px rgba(0,255,65,0.4);
}

/* Cella vuota nella croce direzionale */
.mc-empty {
    visibility: hidden;
}

/* Bottone FIRE – circolare, rosso */
#mc-fire {
    width         : 84px;
    height        : 84px;
    font-size     : 9px;
    letter-spacing: 0.03em;
    background    : rgba(255, 50, 50, 0.14);
    border-color  : rgba(255, 80, 80, 0.45);
    border-radius : 50%;
    color         : #FF5555;
}

#mc-fire:active,
#mc-fire.pressed {
    background  : rgba(255, 50, 50, 0.42);
    border-color: #FF4444;
    box-shadow  : 0 0 14px rgba(255,50,50,0.5);
}

/* Bottone PAUSA – piccolo, grigio */
#mc-pause {
    width       : 52px;
    height      : 36px;
    font-size   : 15px;
    background  : rgba(120, 120, 120, 0.12);
    border-color: rgba(160, 160, 160, 0.28);
    color       : #888888;
    border-radius: 6px;
}