:root {
    --arcade-top-bg-img: url("../../images/background/banner_top-NegDeer.png");
}

/* Conteneur principal de la borne */
.arcade-machine {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Partie haute de la borne (marquee) */
.arcade-top {
    background: var(--arcade-top-bg-img) no-repeat;
    background-size: cover;
    background-position: center;
    border: 8px solid var(--arcade-dark);
    border-bottom: none;
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
    padding: 1.65rem;
    text-align: center;
    box-shadow:
        inset 0 -10px 20px var(--arcade-top-shadow1-color),
        0 5px 15px var(--arcade-top-shadow2-color);
}

.arcade-title {
    color: var(--text-color);
    font-size: 4rem;
    font-weight: bold;
    text-shadow:
        /* Contour ultra-accentué (8 directions) */
        -3px -3px 0 #000,  /* Haut-Gauche */
        0px -3px 0 #000,  /* Haut */
        3px -3px 0 #000,  /* Haut-Droite */
        3px  0px 0 #000,  /* Droite */
        3px  3px 0 #000,  /* Bas-Droite */
        0px  3px 0 #000,  /* Bas */
        -3px  3px 0 #000,  /* Bas-Gauche */
        -3px  0px 0 #000,  /* Gauche */

            /* Effets néons (placés après pour être sous le contour) */
        0 0 15px var(--body-bg-second-color),
        0 0 25px var(--body-bg-second-color);

    letter-spacing: 4px;
    font-family: var(--arcade-title-font);
    line-height: .8;

    /* Sécurité supplémentaire : le stroke natif */
    /*-webkit-text-stroke: 1px #000;*/
}

@keyframes neon-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}


/* Responsive */
@media (max-width: 768px) {
    .arcade-top {
        border-radius: 30px 30px 0 0;
        padding: 1.25rem .9rem;
    }

    .arcade-title {
        font-size: 2.5rem;
        letter-spacing: 1px;

        text-shadow:
            /* Contour ultra-accentué (8 directions) */
            -2px -2px 0 #000,  /* Haut-Gauche */
            0px -2px 0 #000,  /* Haut */
            2px -2px 0 #000,  /* Haut-Droite */
            2px  0px 0 #000,  /* Droite */
            2px  2px 0 #000,  /* Bas-Droite */
            0px  2px 0 #000,  /* Bas */
            -2px  2px 0 #000,  /* Bas-Gauche */
            -2px  0px 0 #000,  /* Gauche */

                /* Effets néons (placés après pour être sous le contour) */
            0 0 15px var(--body-bg-second-color),
            0 0 25px var(--body-bg-second-color);
    }
}

@media (max-width: 480px) {
    body {
        padding: .62rem;
    }

    .arcade-top {
        border-width: 4px;
    }
}