/* Styles specific to Tetheroids Game */

/* Canvas styling (inherits border, box-shadow from base) */
.game-board {
    background-color: #000; /* Black game area */
    display: block; /* Remove extra space below canvas */
    /* Responsive canvas */
    width: 100%;
    height: auto;
    max-width: 800px; /* Limit max width */
    aspect-ratio: 4 / 3; /* Maintain aspect ratio */
    image-rendering: pixelated; /* Keep graphics sharp */
}

/* Overlay for menus (inherits base overlay styles) */
.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 17, 23, 0.9); /* Dark overlay */
    display: flex; /* Initially shown by JS */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    border-radius: 0.5rem; /* Match canvas rounding */
    z-index: 10; /* Ensure overlay is above canvas */
}

/* Score display styling */
.score-display {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px; /* Match canvas max-width */
    margin-bottom: 0.5rem; /* Space below scores */
    font-size: 1.25rem; /* Slightly larger score text */
}
.score-item {
     flex-basis: 45%; /* Give some space between items */
}
.score-item.right {
    text-align: right;
}

/* Prevent text selection */
canvas, .btn, .pixel-text {
    user-select: none;
}

/* Item Drop Styling (in-game drawn via canvas) */
/* .item-icon class might not be needed if drawn on canvas */

/* Ensure game container takes space */
#game-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}