/* 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: 2.96vmin 5.95vmin;
    border-radius: 8px;
    z-index: 9999;
    font-size: 3.57vmin;
    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);
    color: #eedbf1;
    min-width: 39.63vmin;
}

.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: 9.26vmin;
    /* Slightly to the left of the player icons */
    transform: translateY(-50%);
    /* Center vertically only */
    padding: 2.0vmin 4.0vmin;
    /* Slightly smaller padding for a more compact button */
    font-weight: bold;
    font-size: 2.6vmin;
    /* Slightly smaller font size */
    min-width: 28vmin;
    /* Narrower minimum width */
    transition: all 0.2s ease;
    z-index: 20;

    /* Storyboard-matching styling */
    border: 0.19vmin solid rgba(238, 219, 241, 0.7);
    /* Thicker border with higher opacity */
    border-radius: 1.39vmin;
    /* Larger radius for the bigger button */
    background-color: rgba(30, 10, 40, 0.8);
    /* Slightly more visible background */
    backdrop-filter: blur(0.46vmin);
    box-shadow: 0 0.37vmin 1.11vmin 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: 0.09vmin;
    /* Improved text spacing */
}

#end-turn-btn:hover {
    background-color: rgba(50, 20, 60, 0.9);
    box-shadow: 0 0.56vmin 1.48vmin 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 0.28vmin 0.74vmin 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 */
}

/* Storyboard image entries */
.story-image-entry {
    margin-top: 10px;
}

.story-image-caption {
    color: #eedbf1;
    font-size: 1.0vmin;
    opacity: 0.9;
}

/* Fullscreen overlay (created by JS; styles duplicated inline as fallback) */
#story-image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

/* 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 */
    padding: 0.98vmin 3.97vmin;
    width: 100%;
    height: 23.77vmin;
}

/* 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: 23.77vmin;
    /* Provide space for the arch */
    margin-bottom: -8.91vmin;
    /* Move cards down to create partial cutoff */
    padding-bottom: 0;
    /* Remove bottom padding to enhance cutoff effect */
}

#opponent-hand {
    position: relative;
    height: 23.77vmin;
    /* 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: 0.80vmin;
    /* Subtle asymmetrical offset */
    transform: rotate(-0.5deg);
    /* Very slight tilt to the entire hand container */
    margin-top: -8.91vmin;
    /* 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) {
    /* JS (card-hover.js) applies dynamic transform based on viewport */
    transform-origin: bottom center;
    z-index: 1000;
    /* Above normal cards */
    opacity: 1 !important;
    /* Ensure fully opaque even if summoned/used */
    /* Ensure fully opaque even if summoned/used */
    /* 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, 42.80vmin);
    /* Use CSS variable for consistency */
    height: var(--card-height, 76.07vmin);
    /* 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: calc(var(--card-width) * 3.63);
    /* Width scales with card width: ~385px on 1080p, wider on large viewports */
    height: 100vh;
    /* Touch top and bottom of the screen */
    position: absolute;
    top: 0;
    /* Touch top */
    left: 0;
    /* Touch left */
    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 0.28vmin 0.74vmin 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 {
    /* Story text scales with viewport for consistent proportions */
    color: #eedbf1;
    font-family: inherit;
    font-size: 2.6vmin;
    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: calc(var(--card-width) * 3.63);
        /* +10% (was 250px) */
        height: 100vh;
        /* Touch top/bottom on tablets */
        top: 0;
        left: 0;
    }

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

    .card-slot {
        width: 22.20vmin;
        height: 33.48vmin;
    }

    /* Responsive card wrapper sizing */
    .hand-card-wrapper {
        width: 11.09vmin;
        /* Smaller cards on smaller screens */
        height: 16.04vmin;
        margin: 0 2.38vmin;
        /* 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: calc(var(--card-width) * 3.63);
        /* +10% (was 200px) */
        height: 100vh;
        /* Touch top/bottom on phones */
        top: 0;
        left: 0;
    }

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

    /* Even smaller cards on very small screens */
    .hand-card-wrapper {
        width: 8.91vmin;
        height: 12.88vmin;
        margin: 0 1.59vmin;
        /* Adjusted margins for very small screens but kept spacing */
    }

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