/* Game board and layout styles */

/* Game View Layout */
#game-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Keep visible to prevent cropping */
    box-sizing: border-box; /* Include padding and border in dimensions */
    padding: 0; /* Ensure no padding */
    margin: 0; /* Ensure no margin */
}

/* Screen shake effect for damage */
@keyframes screen-shake {
    0% { transform: translate(0, 0); }
    10% { transform: translate(calc(var(--shake-amp, 6px) * -1), calc(var(--shake-amp, 6px) * -0.7)); }
    20% { transform: translate(calc(var(--shake-amp, 6px) * 1), calc(var(--shake-amp, 6px) * 0.5)); }
    30% { transform: translate(calc(var(--shake-amp, 6px) * -0.8), calc(var(--shake-amp, 6px) * 0.8)); }
    40% { transform: translate(calc(var(--shake-amp, 6px) * 0.7), calc(var(--shake-amp, 6px) * -0.5)); }
    50% { transform: translate(calc(var(--shake-amp, 6px) * -0.6), calc(var(--shake-amp, 6px) * 0.6)); }
    60% { transform: translate(calc(var(--shake-amp, 6px) * 0.5), calc(var(--shake-amp, 6px) * -0.35)); }
    70% { transform: translate(calc(var(--shake-amp, 6px) * -0.4), calc(var(--shake-amp, 6px) * 0.4)); }
    80% { transform: translate(calc(var(--shake-amp, 6px) * 0.35), calc(var(--shake-amp, 6px) * -0.3)); }
    90% { transform: translate(calc(var(--shake-amp, 6px) * -0.25), calc(var(--shake-amp, 6px) * 0.25)); }
    100% { transform: translate(0, 0); }
}

.screen-shake {
    animation: screen-shake 450ms ease-in-out;
    will-change: transform;
}

/* Game notification - non-intrusive alerts */
.game-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    z-index: 9999;
    font-size: 18px;
    text-align: center;
    pointer-events: none; /* Let clicks pass through */
    animation: notification-fade-in 0.3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.game-notification.fade-out {
    animation: notification-fade-out 0.5s ease-in-out forwards;
}

@keyframes notification-fade-in {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes notification-fade-out {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to { opacity: 0; transform: translate(-50%, -40%); }
}

.player-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0; /* Removed all padding */
    margin: 0; /* Ensure no margins */
    position: relative;
    justify-content: space-between; /* Push content to edges */
    overflow: visible; /* Allow content to overflow */
    box-sizing: border-box; /* Include padding and border in dimensions */
    min-height: 33vh; /* Ensure minimum height */
}

/* Areas positioned by the background image */
#opponent-area {
    /* Top area of the game board */
    margin-bottom: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    position: relative;
    min-height: 33vh; /* Ensure minimum height */
}

/* Container for opponent cards and board, ensures proper spacing */


#player-area {
    /* Bottom area of the game board */
    margin-top: 0;
    padding-bottom: 0; /* No padding needed with the new structure */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    min-height: 33vh;
}

/* Container for player cards and board, ensures proper spacing */


/* Elevate whole play areas to create higher stacking context for enlarged cards */
#player-area,
#opponent-area {
    position: relative;
}

/* Removed red/green flash overlays; keeping shake-only feedback */

/* Game Board Middle Section */
#game-board-middle {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center;
    padding: 5px 20px;
    /* Removed background to let board image show through */
    height: 120px; /* Fixed height to create better symmetry */
    flex-shrink: 0; /* Prevent shrinking */
}

#turn-indicator {
    display: none; /* Hide the turn indicator */
}

#end-turn-btn {
    position: fixed;
    top: 50%; /* Center vertically between the portraits */
    right: 100px; /* Slightly to the left of the player icons */
    transform: translateY(-50%); /* Center vertically only */
    padding: 15px 30px; /* Increased padding for larger button */
    font-weight: bold;
    font-size: 18px; /* Increased font size */
    min-width: 200px; /* Minimum width to ensure it's large enough */
    transition: all 0.2s ease;
    z-index: 20;
    
    /* Storyboard-matching styling */
    border: 2px solid rgba(238, 219, 241, 0.7); /* Thicker border with higher opacity */
    border-radius: 15px; /* Larger radius for the bigger button */
    background-color: rgba(30, 10, 40, 0.8); /* Slightly more visible background */
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* Larger shadow */
    color: #eedbf1; /* Light purple text color to match other UI elements */
    outline: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 1px; /* Improved text spacing */
}

#end-turn-btn:hover {
    background-color: rgba(50, 20, 60, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
    border-color: rgba(238, 219, 241, 1);
    transform: translateY(-52%); /* Slight lift effect */
}

#end-turn-btn:active {
    transform: translateY(-48%); /* Slight push down effect when clicked */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

#end-turn-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(20, 20, 20, 0.6);
    border-color: rgba(238, 219, 241, 0.3);
    transform: translateY(-50%); /* Reset any transform effects */
}

/* Player Information */
.player-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    padding: 10px;
    border-radius: 4px;
}

/* Portrait styles moved to indicators.css */
.player-portrait.valid-target {
    box-shadow: 0 0 20px #eedbf1;
    transform: scale(1.05);
}

/* Board and Hand Containers */
.board-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Center items vertically */
    min-height: 80px;
    margin: 0;
    /* Removed background to let board image show through */
    padding: 0;
    position: relative;
    overflow: visible; /* Allow cards to overflow without being cut */
}

/* Position board containers in the middle */
#opponent-board {
    margin-top: 60px !important; /* Further reduced margin to lift the board even higher */
    position: relative;
}

#player-board {
    margin-bottom: 120px; /* Increased margin to make room for absolute positioned hand */
    position: relative;
}

.hand-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0; /* Removed vertical margin */
    /* Removed background to let board image show through */
    padding: 0; /* Removed padding to allow cards to touch the edge */
    position: relative;
    overflow: visible; /* Allow cards to overflow without being cut */
    pointer-events: none; /* Allow events to pass through the container */
}

/* Position opponent hand at the top edge */


/* Position player hand at the bottom edge */
/* Hand positioning - now matches deck wrapper structure */
#player-hand, #opponent-hand {
    /* Styles are now set in JS with percentage-based positioning */
    /* This keeps basic styling only in CSS */
    overflow: visible;
    z-index: 10;
    box-sizing: border-box;
    pointer-events: none; /* Allow events to pass through the container */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align cards at the bottom */
    padding-bottom: 10px; /* Add some space at the bottom */
}

/* Arched hand layouts */
#player-hand {
    position: relative;
    height: 120px; /* Provide space for the arch */
    margin-bottom: -25px; /* Move cards down to create partial cutoff */
    padding-bottom: 0; /* Remove bottom padding to enhance cutoff effect */
}

#opponent-hand {
    position: relative;
    height: 120px; /* Provide space for the arch */
    align-items: flex-start; /* Align cards at the top (opposite of player) */
    padding-top: 0; /* Remove top padding to enhance cutoff effect */
    padding-left: 4px; /* Subtle asymmetrical offset */
    transform: rotate(-0.5deg); /* Very slight tilt to the entire hand container */
    margin-top: -25px; /* Move cards up to create partial cutoff */
}

/* Card styling - simplified since wrappers were removed */
.card {
    transition: transform 0.2s ease, z-index 0.2s;
    z-index: 5;
    will-change: transform;
    pointer-events: auto; /* Make cards interactive again */
    /* Base card size moved to cards.css */
    margin: 0 -10px; /* Negative margin for overlap */
    border: 1px solid rgba(0, 0, 0, 0.15); /* Subtle border to enhance visibility */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* Stronger shadow for better depth */
}

/* Fan-out effect for player hand cards */
#player-hand .card {
    margin: 0 -8px; /* Reduced overlap for more spacing between cards */
    transform-origin: bottom center; /* Rotate from bottom center */
}

/* Messy, human-like arrangement for opponent hand cards */
#opponent-hand .card {
    margin: 0 -6px; /* Less overlap for more spacing between cards */
    transform-origin: top center; /* Rotate from top center (opposite of player) */
    transition: transform 0.15s ease, box-shadow 0.15s ease; /* Slightly faster transitions */
}

/* Apply different rotation angles based on card position - player */
/* More balanced arch with less extreme angles */
/* Create consistent right-to-left overlapping pattern */
#player-hand .card { z-index: 1; } /* Base z-index */
#player-hand .card:nth-child(1) { z-index: 1; }
#player-hand .card:nth-child(2) { z-index: 2; }
#player-hand .card:nth-child(3) { z-index: 3; }
#player-hand .card:nth-child(4) { z-index: 4; }
#player-hand .card:nth-child(5) { z-index: 5; }
#player-hand .card:nth-child(6) { z-index: 6; }
#player-hand .card:nth-child(7) { z-index: 7; }
#player-hand .card:nth-child(8) { z-index: 8; }
#player-hand .card:nth-child(9) { z-index: 9; }
#player-hand .card:nth-child(10) { z-index: 10; }

/* For 5 cards (most common case) */
#player-hand .card:nth-child(1) { transform: rotate(-12deg); }
#player-hand .card:nth-child(2) { transform: rotate(-6deg); }
#player-hand .card:nth-child(3) { transform: rotate(0deg); }
#player-hand .card:nth-child(4) { transform: rotate(6deg); }
#player-hand .card:nth-child(5) { transform: rotate(12deg); }

/* For more cards, use smaller increments */
#player-hand .card:nth-child(6) { transform: rotate(15deg); }
#player-hand .card:nth-child(7) { transform: rotate(18deg); }
#player-hand .card:nth-child(8) { transform: rotate(21deg); }
#player-hand .card:nth-child(9) { transform: rotate(24deg); }
#player-hand .card:nth-child(10) { transform: rotate(27deg); }

/* Apply different rotation angles based on card position - opponent (mirrored) */
/* More balanced arch with less extreme angles */
/* Create consistent left-to-right overlapping pattern (opposite of player) */
#opponent-hand .card { z-index: 1; } /* Base z-index */
#opponent-hand .card:nth-child(1) { z-index: 10; }
#opponent-hand .card:nth-child(2) { z-index: 9; }
#opponent-hand .card:nth-child(3) { z-index: 8; }
#opponent-hand .card:nth-child(4) { z-index: 7; }
#opponent-hand .card:nth-child(5) { z-index: 6; }
#opponent-hand .card:nth-child(6) { z-index: 5; }
#opponent-hand .card:nth-child(7) { z-index: 4; }
#opponent-hand .card:nth-child(8) { z-index: 3; }
#opponent-hand .card:nth-child(9) { z-index: 2; }
#opponent-hand .card:nth-child(10) { z-index: 1; }

/* Semi-random arch pattern for opponent cards - balanced approach */
#opponent-hand .card:nth-child(1) { transform: rotate(10deg) translateY(-5px) translateX(1px); }
#opponent-hand .card:nth-child(2) { transform: rotate(5deg) translateY(-7px) translateX(-1px); }
#opponent-hand .card:nth-child(3) { transform: rotate(0deg) translateY(-8px) translateX(0px); }
#opponent-hand .card:nth-child(4) { transform: rotate(-4deg) translateY(-6px) translateX(1px); }
#opponent-hand .card:nth-child(5) { transform: rotate(-9deg) translateY(-4px) translateX(-1px); }

/* More cards follow the arch but with slight irregularities */
#opponent-hand .card:nth-child(6) { transform: rotate(-12deg) translateY(-5px) translateX(0px); }
#opponent-hand .card:nth-child(7) { transform: rotate(-15deg) translateY(-7px) translateX(1px); }
#opponent-hand .card:nth-child(8) { transform: rotate(-18deg) translateY(-6px) translateX(-1px); }
#opponent-hand .card:nth-child(9) { transform: rotate(-21deg) translateY(-4px) translateX(0px); }
#opponent-hand .card:nth-child(10) { transform: rotate(-24deg) translateY(-3px) translateX(1px); }

/* Remove existing CSS-based hover effects for player hand */
/* Removing obsolete card hover styles that have been replaced by the hover-active class system */

/* Keep opponent hand hover as is (or remove if not needed) - Assuming we keep it */
/* Commenting out original opponent hand hover rule 
   #opponent-hand .card:hover {
   transform: translateY(10px) scale(1.05); 
   z-index: 10;
   } 
*/

/* New 3.5x enlargement hover for BOARD cards (Player & Opponent) */
/* Don't apply to cards being dragged */
#player-board .card:not(.dragging):not(:active):hover,
#opponent-board .card:not(.dragging):not(:active):hover { /* Enlarged board cards */
    transform: scale(var(--board-hover-scale, 1));
    z-index: 1200; /* Above any other cards (hand hover-active is 1000) */
    opacity: 1 !important; /* Override summoned/used transparency */
    overflow: visible; /* Allow status banner to protrude beyond card bounds */
    /* Apply z-index change immediately on hover, rely on base transition for transform */
    transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s ease;
}

/* Card styling with high-quality rendering */
#player-hand .card {
    position: relative; /* Ensure positioning works */
    transition: transform 0.15s ease-out, box-shadow 0.15s ease, z-index 0s ease;
}

/* Card zooming with perfect amount of lifting to keep it in screen */
#player-hand .card.hover-active:not(.dragging):not(:active) {
    /* Scale and reset rotation with minimal lifting to keep card under cursor */
    transform: scale(4.55) rotate(0deg) translateY(-8%) !important;
    transform-origin: bottom center;
    z-index: 1000; /* Above normal cards */
    opacity: 1 !important; /* Ensure fully opaque even if summoned/used */
    margin: 0 5px;
    /* Apply a crisp rendering filter */
    filter: contrast(1.05) brightness(1.05);
    /* Add a strong shadow for better visibility */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

/* Preserve green glow when an enlarged hand card is legally playable */
#player-hand .card.hover-active.legal-play:not(.dragging):not(:active) {
    /* Combine green hue with subtle depth shadow */
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 255, 0, 0.6);
}

/* Subtle movement and highlight for opponent cards without changing z-index rank */
#opponent-hand .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#opponent-hand .card:hover {
    /* Subtle downward movement */
    transform: translateY(5px) !important;
    /* Apply highlight without scaling */
    box-shadow: 0 0 8px rgba(238, 219, 241, 0.8);
    /* No z-index change to maintain natural overlapping order */
}

/* CSS-based hover effects for more consistent animations */
.hand-card-wrapper:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 10;
}

/* Card Slots on Board */

/* Ensure slots stay under cards by default */
.card-slot {
    z-index: 1;
}

/* When a slot is hovered (because its card is hovered), elevate slot as well to allow child card to exceed sibling slots */
.card-slot:hover {
    z-index: 8000 !important; /* Slightly below card but above other slots */
    overflow: visible; /* Allow enlarged card to overflow */
}

/* Universal rule: any card being hovered/enlarged jumps above everything */
.card.hover-active,
.card:not(.dragging):not(:active):hover {
    position: relative;
    z-index: 9000 !important; /* Very top, below modal overlays only */
    opacity: 1 !important;
}

/* Elevated z-index for any enlarged card (hand hover-active or board hover) */
.card.hover-active,
#player-board .card:not(.dragging):not(:active):hover,
#opponent-board .card:not(.dragging):not(:active):hover {
    position: relative;
    z-index: 9500 !important; /* Top level for enlarged cards */
    opacity: 1 !important;
}

.card-slot-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

.card-slot {
    /* Use the exact same dimensions as .card */
    width: var(--card-width, 45px); /* Use CSS variable for consistency */
    height: var(--card-height, 80px); /* Use CSS variable for consistency */
    margin: 0 20px; /* Match the card margin to ensure consistent spacing */
    border-radius: 0; /* Removed corner rounding to match cards */
    border: 2px dashed rgba(238, 219, 241, 0.5);
    position: relative;
    box-sizing: content-box; /* Ensure border doesn't affect dimensions */
}

/* Story Container */
#story-container {
    width: 350px; /* Keeping the width from UI improvements */
    height: calc(100vh - 40px); /* Extend to full height minus top and bottom padding */
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
    border: 1px solid rgba(238, 219, 241, 0.5);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

#story-scroll {
    max-height: calc(100vh - 60px); /* Adjusted for new container height */
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(238, 219, 241, 0.7) rgba(0, 0, 0, 0.3);
    flex: 1;
    position: relative;
}

#story-scroll::-webkit-scrollbar {
    width: 8px;
}

#story-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#story-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(238, 219, 241, 0.7);
    border-radius: 4px;
}

#story-content {
    /* existing styles */
    /* existing styles */
    color: #eedbf1;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 5px;
    overflow-y: visible;
    height: 100%;
}

.story-entry {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(238, 219, 241, 0.3);
    animation: fadeIn 0.5s;
    color: #eedbf1;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    font-family: inherit;
    line-height: 1.4;
    word-wrap: break-word;
    user-select: text;
    text-align: left;
}

/* Custom Indicators */
.player-health, .player-mana {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
}

.player-health {
    color: #ff6b6b;
}

.player-mana {
    color: #6b9fff;
}

/* Stack context override to ensure enlarged hand cards render above everything */
#player-area,
#opponent-area {
    position: relative;
    z-index: auto !important; /* Allow children to manage stacking context */
}

#player-hand,
#opponent-hand {
    position: relative;
    z-index: 4500 !important; /* Direct ancestors of hand cards */
}

.story-highlight {
    font-weight: bold;
    color: #ffdf5c;
}

/* Responsive Game Board */
@media screen and (max-width: 768px) {
    #story-container {
        width: 250px;
        height: 350px;
    }

    #story-scroll {
        max-height: 330px;
    }

    .card-slot {
        width: 80px;
        height: 120px;
    }

    /* Responsive card wrapper sizing */
    .hand-card-wrapper {
        width: 40px; /* Smaller cards on smaller screens */
        height: 58px;
        margin: 0 12px; /* Adjusted margins for smaller screens but kept spacing */
    }

    /* Adjust hand containers for smaller screens */
    #player-hand, #opponent-hand {
        padding: 0;
    }
}

@media screen and (max-width: 480px) {
    #story-container {
        width: 200px;
        height: 300px;
    }

    #story-scroll {
        max-height: 280px;
    }

    /* Even smaller cards on very small screens */
    .hand-card-wrapper {
        width: 32px;
        height: 46px;
        margin: 0 8px; /* Adjusted margins for very small screens but kept spacing */
    }

    .player-info {
        flex-wrap: wrap;
    }
}