/* ============================================================
   STYLE.CSS – Aspetto visivo del gioco Pac-Man
   Stessa estetica CRT di Snake con palette giallo/viola
   ============================================================ */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pagina intera: sfondo nero, contenuto centrato */
body {
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Press Start 2P', monospace;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 70%);
    /* Padding verticale per rendere visibili bordo e glow su tutti i 4 lati */
    padding: 20px 0;
}

/* Contenitore del canvas */
#gameContainer {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 0 30px rgba(253, 224, 71, 0.2));
}

/* Canvas principale */
#gameCanvas {
    display: block;
    border: 3px solid #fde047;
    box-shadow:
        0 0 8px  #fde047,
        0 0 20px rgba(253, 224, 71, 0.6),
        0 0 50px rgba(253, 224, 71, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Overlay scanline */
#scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.12) 3px,
        rgba(0, 0, 0, 0.12) 4px
    );
    z-index: 10;
    opacity: 0.8;
}

/* Vignette */
#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
   ============================================================ */

@media (max-width: 430px) {
    body {
        align-items: center;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #gameContainer {
        transform-origin: top center;
        transform: scale(var(--game-scale, 1));
        margin-bottom: calc((var(--game-scale, 1) - 1) * 474px);
    }
}

/* ── Modalità embedded mobile (iframe dentro pagina wrapper) ── */
body.embedded-mobile {
    overflow: hidden !important;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0; /* annulla il padding desktop così il canvas non viene tagliato */
}
body.embedded-mobile #gameContainer {
    width:  100vw;
    /* Mantiene il rapporto esatto del canvas 392 × 474 */
    height: calc(100vw * 474 / 392);
    overflow: hidden;
}
body.embedded-mobile #gameCanvas {
    width:  100%;
    height: 100%;
}

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

#mobile-controls {
    display: none;
}

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(253, 224, 71, 0.10);
    border      : 2px solid rgba(253, 224, 71, 0.35);
    border-radius: 8px;
    color       : #fde047;
    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(253, 224, 71, 0.32);
    border-color : #fde047;
    box-shadow   : 0 0 10px rgba(253, 224, 71, 0.4);
}

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