/**
 * Pac-Man 90 - Retro Arcade Stylesheet
 * 
 * Implementa a estética completa dos Fliperamas dos anos 90:
 * Filtro CRT, Scanlines dinâmicas, Flicker sutil, Cantos arredondados,
 * Brilho neon de fósforo e responsividade para diferentes resoluções.
 */

/* Importa a fonte retro pixel clássica do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --cabinet-bg: #0b0518;
    --border-color: #331966;
    --neon-cyan: #00ffff;
    --neon-pink: #ff00ff;
    --phosphor-yellow: #ffff00;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    image-rendering: pixelated; /* Garante pixel-art nítido */
}

body {
    background-color: #030107;
    color: #ffffff;
    font-family: 'Press Start 2P', monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
}

/* Título de Cabeçalho do Cabinet */
.arcade-header {
    text-align: center;
    margin-bottom: 12px;
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
    animation: neon-flicker 2.5s infinite alternate;
}

/* Moldura Externa do Cabinet Retro */
#game-container {
    position: relative;
    padding: 16px;
    background: #0f0b1e;
    border: 6px solid #22123f;
    border-radius: 20px;
    box-shadow: 
        0 0 0 3px #0b0518,
        0 20px 40px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(110, 30, 200, 0.2),
        inset 0 0 20px rgba(0, 0, 0, 0.9);
    max-width: 100%;
    max-height: 95vh;
}

/* Efeito de Curvatura e Vidro CRT */
.crt-effect {
    overflow: hidden;
}

.crt-effect::after {
    content: " ";
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    bottom: 16px;
    right: 16px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    border-radius: 12px;
    z-index: 10;
}

/* Efeito de Scanlines dinâmicas (Linhas de Fósforo de TV de tubo) */
.scanlines-effect::before {
    content: " ";
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    bottom: 16px;
    right: 16px;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.35) 50%
    ), linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.05),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.05)
    );
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
    border-radius: 12px;
    z-index: 9;
    opacity: 0.85;
}

/* Área de Tela Interna com vidro arqueado */
#screen {
    position: relative;
    border-radius: 12px;
    background-color: #0b0518;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Canvas do Jogo */
#gameCanvas {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    /* Efeito de Bloom leve na tela */
    filter: contrast(1.05) brightness(1.08) saturate(1.15);
}

/* Controles de Ajuda Inferiores */
.cabinet-footer {
    margin-top: 14px;
    font-size: 7px;
    color: #665c84;
    text-align: center;
    line-height: 1.6;
}

.cabinet-footer span {
    color: var(--neon-cyan);
}

/* Animações Ambientais */
@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 4px var(--neon-pink),
            0 0 10px var(--neon-pink),
            0 0 20px var(--neon-pink);
    }
    20%, 24%, 55% {
        text-shadow: none;
        color: #440044;
    }
}

/* Animação sutil de cintilação CRT de TV de tubo */
.crt-effect #gameCanvas {
    animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
    0% { opacity: 0.996; }
    50% { opacity: 1.0; }
    100% { opacity: 0.998; }
}

/* Responsividade Básica Adaptável */
@media (max-height: 900px) {
    #game-container {
        padding: 10px;
        border-width: 4px;
    }
    #gameCanvas {
        max-height: 75vh;
    }
    .arcade-header {
        margin-bottom: 6px;
    }
}

@media (max-width: 500px) {
    #gameCanvas {
        max-height: 70vh;
    }
    .arcade-header {
        font-size: 6px;
    }
    .cabinet-footer {
        font-size: 6px;
    }
}