/* --- Main area to hold the game board/hands/etc. --- */
#game-main-area {
    flex-grow: 1; /* Takes up most space */
    position: relative; /* Ensure positioning context for potential future overlays */
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the container height */
    overflow: hidden; /* Prevent internal elements from breaking layout */
    background-image: url('../img/areas/bg01.webp');
    background-size: cover; /* Cover the entire area */
    background-repeat: no-repeat; /* Do not tile the image */
    background-position: center center; /* Center the image */
    perspective: 1000px; /* Add perspective for 3D animations like coin spin */
}

/* --- Player Areas --- */
.player-area {
    flex-grow: 1;
    min-height: 200px; /* Ensure areas don't collapse too much */
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: relative; /* For absolute positioning of hero */
}

#opponent-area {
    border-bottom: 2px dashed #888;
}

#player-area {
}

/* --- Board Area --- */
.board {
    height: 160px; /* Fixed height for creature cards */
    border: 1px solid #aaa;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px;
    min-height: 150px; /* Ensure it doesn't collapse */
    overflow-x: auto; /* Allow scrolling if many creatures */
}

#opponent-board { order: 1; }
#player-board { order: 2; }


/* --- Hand Area --- */
.hand {
    height: 150px; /* Fixed height for hand cards */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px;
    overflow-x: auto; /* Allow scrolling if many cards */
    overflow-y: hidden;
    position: relative; /* Allow z-index control */
    z-index: 5; /* Lift hand above adjacent board area */
}

#opponent-hand { order: 0; }
#player-hand { order: 3; }

/* --- Hero/Player Info --- */
.hero-info {
    position: absolute;
    bottom: 10px; /* Position relative to player-area bottom */
    left: 10px;
    background-color: rgba(255, 255, 255, 0.85); /* Slightly less transparent */
    border: 2px solid #333; /* Make border slightly thicker */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add subtle shadow */
    border-radius: 5px;
    padding: 8px 5px; /* Adjusted padding */
    text-align: center;
    min-width: 60px; /* Made narrower */
    z-index: 10; /* Above board/hand */
    cursor: pointer; /* Make heroes targetable */
    transition: background-color 0.2s ease; /* For visual feedback */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    gap: 4px; /* Reduced gap for vertical layout */
}
#opponent-area .hero-info {
    top: 10px; /* Position relative to player-area top */
    bottom: auto;
}

/* Hero Portrait Styles */
.hero-portrait {
    width: 45px; /* Slightly smaller portrait */
    height: 45px;
    border-radius: 50%; /* Circular portrait */
    border: 2px solid #555;
    background-color: #ccc; /* Fallback color */
    background-size: cover;
    background-position: center;
    margin-bottom: 2px; /* Space below portrait */
}
/* Style for the Player/Opponent text */
.hero-info > div:not(.hero-portrait):not(.mana-container):not(.hero-health):not(.hero-draw-pile):not(.hero-discard-pile) {
    font-size: 0.9em;
    font-weight: bold;
}
.hero-health {
    font-size: 1.1em; /* Slightly smaller health */
    font-weight: bold;
    color: red;
}
.mana-container {
    display: flex; /* Arrange mana crystals horizontally */
    gap: 3px; /* Space between crystals */
    height: 15px; /* Fixed height for the container */
}
.hero-draw-pile, .hero-discard-pile {
    font-size: 0.8em; /* Smaller font for counts */
    color: #333;
    display: block; /* Stack the counts */
}