/* Importing the custom PrintChar21 font */
@font-face {
    font-family: 'PrintChar21';
    src: url('fonts/PrintChar21.ttf') format('truetype');
}

/* Basic styling for the body to achieve the retro terminal look */
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
    color: lime;
    font-family: 'PrintChar21', monospace;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CRT Scanline Effect */
body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(8, 83, 81, 0.265) 0.7em,
        rgba(0, 0, 0, 0.313) 0.95em,
        rgba(0, 0, 0, 0.301) 0.5em,
        rgba(9, 133, 20, 0.404) 0.5em
    );
    animation: flicker 5s infinite alternate;
    z-index: 1;
    pointer-events: none;
}

/* Styling for the game area */
#gameArea {
    width: 800px;  /* Adjust based on your preference */
    height: 600px; /* Adjust based on your preference */
    display: grid;
    grid-template-columns: repeat(32, 1fr);  /* Creates a 32x32 grid */
    grid-template-rows: repeat(24, 1fr);
    gap: 6px;
    animation: flicker 0.9s infinite alternate;
    /* background-color: rgb(0, 15, 3); */
    /* border: 4px dotted   rgba(0, 255, 0, 0.329); */
}

/* Individual cells within the game area, initially all cells are empty */
.gameCell {
    width: 100%;
    height: 100%;
    background-color: black; /* Same as the body background for empty cells */
}

.controls {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 0;
    background-color: black; /* Optional, to match the game's retro theme */
}

button {
    padding: 10px 60px;
    font-size: 16px;
    color: rgb(0, 40, 12);
    background-color: green;
    border: none;
    cursor: pointer;
    margin-right: 20px;
}

button:hover {
    background-color: darkgreen;
}

.gameCell {
    width: 100%;
    height: 100%;
    background-color: black; /* Empty cells are black */
}

.snake {
    background-color: lime; /* Snake segments are lime */
}

.powerUp {
    background-color: red; /* Power-ups are red */
}

.borderCell {
    background-color: rgb(0, 51, 0);  /* or any color you prefer for the border */
}

#gameOverMessage {
    color: red;
    font-size: 48px; /* Adjust the size as needed */
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10; /* Ensure it's above other elements */
}

#scoreContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px; /* Space between score and high score */
}

#scoreDisplay, #highScoreDisplay {
    color: lime;
    font-size: 24px; /* Adjust the size as needed */
    text-align: center;
    margin: 10px 0;
}

/* If you want to ensure both score and high score always take up the same amount of space */
#scoreDisplay, #highScoreDisplay {
    min-width: 160px;
}



@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: .8; }
    100% { opacity: 0.9; }
}