@font-face {
    font-family: 'Emulogic';
    src: url('assets/font/Emulogic.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

body {
margin: auto;
padding: 20px;
background-color: #000;
flex-direction: column;
display: flex;
width: 400px;
gap: 20px;
justify-content: center;
align-items: center;
min-height: 100vh;
position: relative;
animation: crt-flicker 0.9s infinite alternate;
}


@keyframes crt-flicker {
0%, 100% { opacity: 0.98; }
20% { opacity: 0.99; }
40% { opacity: 1; }
60% { opacity: 0.98; }
80% { opacity: 0.97; }
}


body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
    repeating-linear-gradient(
        to bottom,
        rgba(80, 80, 100, 0.2) 0,
        rgba(60, 70, 90, 0.3) 2px,
        transparent 3px,
        transparent 5px
    );
z-index: 9998;
pointer-events: none;
animation: scanlines 4s linear infinite;
mix-blend-mode: overlay;
}


body::after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
    repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 1px,
        rgba(255, 255, 255, 0.03) 1px,
        rgba(255, 255, 255, 0.03) 3px
    );
z-index: 9999;
pointer-events: none;
mix-blend-mode: overlay;
}


@keyframes scanlines {
0% { background-position: 0 0; }
100% { background-position: 0 10px; }
}

.pacman-logo {
    height: 70px;
    width: auto;
}


footer {
    margin: auto 0 30px 0;
    text-align: center;
    color: #fff;
    font-family: 'Emulogic';
    font-size: 10px;
}

#canvas {
    position: fixed;
    display: none;
}

#animation, #ghost {
    width: 140px;
    height: 20px;
}

#gameOver {
    text-align: center;
    color: #fff;
    font-family: 'Emulogic';
}

#startButton {
    width: fit-content;
    color: #fff;
    background-color: #db851c;
    border-radius: 10px;
    border: 3px solid #d03e19;
    font-family: 'Emulogic';
    padding: 5px 10px;
}

#startButton:hover {
    background-color: #d03e19;
    color: #fff;
    cursor:pointer;
}

#gameOver,
#startButton,
#canvas {
    transition: opacity 0.5s ease-in-out;
}

#mute-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

#mute-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}