/* B"H */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@900&display=swap');

:root {
    --gevurah-red: #F07; --chesed-blue: #0CF; --netzach-green: #0F9; 
    --hod-orange: #F80; --tiferet-gold: #FFD700; --yesod-violet: #93F; --malkuth-white: #FFF;
    --background-color: #000; --text-color: #FFF; --border-color: #FC0;
    --glow-color: rgba(255, 223, 100, 0.75);
}

html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background-color: var(--background-color); font-family: 'Cinzel', serif;
    color: var(--text-color); overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }
#background-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* Main Menu (Unchanged) */
#main-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 10; width: 100%; height: 100%; position: relative; }
#menu-title { font-size: 3em; font-weight: 900; color: var(--malkuth-white); letter-spacing: 5px; text-shadow: 0 0 15px var(--glow-color); }
.menu-button { width: 80%; max-width: 400px; padding: 15px; margin: 15px 0; font-size: 1.2em; background: transparent; color: #CCC; border: 2px solid var(--border-color); cursor: pointer; transition: all 0.2s ease; text-shadow: 0 0 5px var(--glow-color); box-shadow: 0 0 10px var(--glow-color) inset; }
.menu-button:hover { background-color: var(--tiferet-gold); color: #000; border-color: var(--malkuth-white); box-shadow: 0 0 20px var(--glow-color); }

/* --- CHANGE: Responsive Game Screen Layout --- */
#game-screen {
    position: relative; z-index: 1; display: flex;
    width: 100%; height: 100%; box-sizing: border-box;
    padding: 1.5vh; gap: 1.5vh;
    justify-content: center; align-items: center;
    /* Mobile First: Default to vertical layout */
    flex-direction: column;
}

/* Media Query for wider screens (tablets, desktops) */
@media (orientation: landscape) and (min-width: 768px) {
    #game-screen {
        flex-direction: row;
        gap: 2vw;
    }
}

.player-container {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; height: 100%;
    /* Flex properties to allow containers to grow/shrink properly */
    flex: 1;
    min-height: 0; /* Important for flexbox sizing */
    max-width: 95vw;
}

/* --- CHANGE: Central Descend Button Styling --- */
#shared-controls {
    flex-shrink: 0; /* Prevent the button container from shrinking */
    width: 100%;
    max-width: 450px; /* Match max width for player containers in vertical mode */
}
@media (orientation: landscape) and (min-width: 768px) {
    #shared-controls {
        width: auto; /* Let it size to its content in horizontal mode */
        height: 100%;
        display: flex;
        align-items: center;
    }
}

.action-button {
    width: 100%; padding: clamp(10px, 2vh, 15px); font-family: 'Cinzel', serif;
    font-size: clamp(1em, 2.5vh, 1.2em); background-color: rgba(34,34,34,0.8); color: #AAA;
    border: 2px solid var(--border-color); user-select: none; cursor: pointer; flex-shrink: 0;
    box-shadow: 0 0 10px var(--glow-color) inset;
}

/* --- CHANGE: Player Title now an overlay INSIDE the canvas container --- */
.player-title {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 6; /* Above canvas, below game over */
    font-size: clamp(1em, 3vh, 1.5em);
    color: var(--tiferet-gold);
    text-shadow: 0 0 8px var(--glow-color), 2px 2px 4px #000;
    pointer-events: none; /* Make it non-interactive */
}

.game-board-container {
    position: relative; border: 2px solid var(--border-color);
    box-shadow: 0 0 15px var(--glow-color); width: 100%;
    flex: 1; /* Make it fill the available space in the player-container */
    min-height: 0;
}
.game-board-container canvas { display: block; width: 100%; height: 100%; }

/* --- CHANGE: HUD moved to top-right to not conflict with title --- */
.hud {
    position: absolute; top: 0; right: 0; /* Changed from left: 0 */
    width: auto; /* No longer needs full width */
    padding: 10px; box-sizing: border-box; z-index: 5;
    pointer-events: none; text-align: right;
    font-size: clamp(0.8em, 2vh, 1em);
}
.hud-stats { text-shadow: 2px 2px 4px #000; }

.game-over-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(80,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);
    z-index: 10; display: flex; justify-content: center; align-items: center;
    font-size: clamp(2em, 8vw, 3em); color: white; text-shadow: 0 0 20px #F00;
    animation: pulse 1.5s infinite alternate;
}
@keyframes pulse { from { opacity: 0.8; } to { opacity: 1; } }