/* Styles specific to Scroll Rush */
#game-container {
    display: flex; /* Let arcade logic handle display */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align to top */
    width: 100%;
    max-width: 740px; /* Slightly wider to accommodate canvas + padding */
    padding-top: 10px;
    position: relative;
}

/* Game Board container */
.game-board {
    background: #000; /* Black bg */
    border: 8px solid #212d3d; /* Darker blue/gray border */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    padding: 10px; /* Reduced padding */
    /* display: none; Let JS handle display */
    position: relative; /* For game over screen */
    width: 100%; /* Take full width of parent */
    max-width: calc(16 * 40px + 20px + 16px); /* COLS * TILE_SIZE + padding + border */
}
/* Game Overlay (Start/End Menu) */

/* Game UI (Scores, Timer) */
.game-ui {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align items */
    margin-bottom: 10px; /* Reduced margin */
    font-size: 0.7rem;
    text-shadow: 2px 2px #000; /* Pixel text */
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 10px; /* Add gap between UI elements */
}

.player-ui {
    /* min-width: 150px; Removed min-width */
    margin: 0; /* Removed margin */
    white-space: nowrap; /* Prevent text wrapping */
}

.player-ui-p1 { color: #ef4444; } /* P1 red */
.player-ui-p2 { color: #3b82f6; } /* P2 blue */
.timer-ui { color: #facc15; } /* Yellow timer */

.game-ui span {
    color: #fff; /* White text for values */
    margin-left: 5px; /* Space between label and value */
}

.timer-ui span {
    color: #facc15; /* Yellow */
    text-shadow: 0 0 5px #facc15;
    font-size: 1.1rem; /* Slightly larger timer */
    min-width: 50px; /* Adjusted width */
    display: inline-block;
    text-align: right;
}

/* Canvas Styling */
canvas {
    background-color: #222; /* Dark floor */
    display: block;
    border: 2px solid #303d4d; /* Inner border slightly lighter */
    max-width: 100%;
    height: auto;
    /* aspect-ratio: 16 / 12; Set implicitly by width/height attributes */
}

/* Screen shake animation */
@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    25%, 75% { transform: translate(-4px, 0px); }
    50% { transform: translate(4px, 0px); }
}

.shake {
    animation: shake 0.25s linear; /* Slightly faster shake */
}



#gameOverScreen {
    display: none; /* Hidden by default */
}

/* Game Over Text */
#gameOverTitle {
    font-size: 1.8rem; /* Slightly larger */
    color: #ef4444; /* Red */
    text-shadow: 0 0 8px #ef4444;
    margin-bottom: 15px;
}

#winner {
    font-size: 1.1rem;
    color: #facc15; /* Yellow */
    text-shadow: 0 0 8px #facc15;
    margin-bottom: 25px;
}

/* Item descriptions below the map */
.item-description {
    /* display: none; Let JS handle display */
    color: #9ca3af; /* Lighter gray */
    font-size: 0.6rem; /* Smaller text */
    margin-top: 10px; /* Reduced margin */
    width: 100%; /* Take full width */
    max-width: calc(16 * 40px); /* Match canvas width */
    text-align: center;
    line-height: 1.5;
}