/* 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: auto; /* CHANGE: Allow scrolling if content overflows */
    -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); }

/* --- MAJOR CHANGE: Fully Responsive Game Screen Layout --- */
#game-screen {
    position: relative; z-index: 1; display: flex;
    width: 100%;
    min-height: 100%; /* CHANGE: Use min-height to allow content to expand */
    height: auto; /* CHANGE: Let height be determined by content */
    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/landscape screens */
@media (orientation: landscape) {
    #game-screen {
        flex-direction: row;
        gap: 2vw;
    }
}

.player-container {
    display: flex; flex-direction: column; align-items: center;
    flex: 1 1 0; /* CHANGE: Allow containers to grow/shrink properly */
    width: 100%;
    max-width: 450px; /* ADD: Constrain width in portrait mode */
    max-height: 85vh; /* ADD: Constrain height in landscape mode */
    min-height: 0; 
}

@media (orientation: landscape) {
    .player-container {
        max-width: 45vh; /* ADD: Constrain width based on viewport height in landscape */
        max-height: 95vh; /* ADD: Allow more height in landscape */
    }
}


/* --- CHANGE: Central Descend Button Styling --- */
#shared-controls {
    flex-shrink: 0; 
    width: 100%;
    max-width: 450px; 
}
@media (orientation: landscape) {
    #shared-controls {
        width: auto; 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;
}

.player-title {
    position: absolute; top: 5px; left: 10px; z-index: 6; 
    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;
}

/* --- CRITICAL CHANGE: Aspect Ratio Enforcement --- */
.game-board-container {
    position: relative; border: 2px solid var(--border-color);
    box-shadow: 0 0 15px var(--glow-color); 
    width: 100%;
    flex: 1; min-height: 0;
    /* This magical line maintains the 10x18 aspect ratio of the visible game area! */
    aspect-ratio: 10 / 18;
}
.game-board-container canvas { display: block; width: 100%; height: 100%; }

.hud {
    position: absolute; top: 0; right: 0;
    width: auto; 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; } }