/* --- Custom Cursor --- */
html,
body,
* {
    cursor: url('./images/cursor.png?v=3'), auto !important;
}

button,
a,
.clickable {
    cursor: url('./images/cursor.png?v=3'), pointer !important;
}

/* --- Card Flip Enhancement --- */
@keyframes cardFlipEnhance {
    0% {
        /* Start state (already flipped face-up by the removal of .face-down) */
        transform: rotateY(0deg) scale(1);
        box-shadow: none;
    }

    50% {
        /* Scale up slightly and add glow mid-animation */
        transform: rotateY(0deg) scale(1.1);
        box-shadow: 0 0 15px 5px gold;
        /* Adjust glow color/size */
    }

    100% {
        /* Return to normal scale */
        transform: rotateY(0deg) scale(1);
        box-shadow: none;
    }
}

/* --- Oversummon Transformation Animation --- */
@keyframes oversummonTransform {
    0% {
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }

    25% {
        transform: scale(1.1);
        filter: brightness(1.5) hue-rotate(45deg);
        box-shadow: 0 0 20px 10px #ff9d00;
        opacity: 0.9;
    }

    50% {
        transform: scale(0.9) rotate(5deg);
        filter: brightness(2) hue-rotate(90deg);
        box-shadow: 0 0 30px 15px #ff5e00;
        opacity: 0.7;
    }

    75% {
        transform: scale(1.2) rotate(-5deg);
        filter: brightness(2.5) hue-rotate(135deg);
        box-shadow: 0 0 40px 20px #ff0000;
        opacity: 0.5;
    }

    100% {
        transform: scale(1) rotate(0);
        filter: brightness(3) hue-rotate(180deg);
        box-shadow: 0 0 50px 25px #ffffff;
        opacity: 0.2;
    }
}

.oversummon-transforming {
    animation: oversummonTransform 0.8s ease-in-out forwards;
    pointer-events: none;
    /* Prevent interaction during animation */
    z-index: 100;
    /* Ensure it's visible above other elements */
}

/* --- Whispering Woods: Entangled Effect --- */
@keyframes entangledAnimation {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 128, 0, 0);
        border-color: inherit;
    }

    50% {
        box-shadow: 0 0 10px 3px rgba(0, 128, 0, 0.7);
        border-color: green;
    }

    100% {
        box-shadow: 0 0 0 0px rgba(0, 128, 0, 0);
        border-color: inherit;
    }
}

.card.entangled {
    animation: entangledAnimation 1s ease-in-out;
    position: relative;
}

.card.entangled::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(45deg, transparent 45%, green 45%, green 55%, transparent 55%),
        linear-gradient(135deg, transparent 45%, green 45%, green 55%, transparent 55%);
    background-size: 10px 10px;
    background-position: 0 0;
    opacity: 0.5;
    pointer-events: none;
    z-index: 10;
}

.card.entangled .card-stats {
    background-color: rgba(255, 0, 0, 0.2);
}

.shop-item {
    background-color: #333;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* For containing purchase effect */
}

.shop-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.shop-item.selected {
    transform: scale(1.05);
    box-shadow: 0 0 20px 5px gold;
}

@keyframes purchaseConfirm {
    0% {
        transform: scale(0.8);
        opacity: 0;
        background-color: rgba(0, 255, 0, 0.5);
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        background-color: rgba(0, 255, 0, 0.7);
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        background-color: rgba(0, 255, 0, 0);
    }
}

.shop-item-purchased-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    pointer-events: none;
    animation: purchaseConfirm 0.8s ease-out forwards;
    z-index: 10;
}

.pack-revealed-card-overlay.flipping {
    /* Apply this animation briefly after the main flip transition */
    animation: cardFlipEnhance 0.4s ease-out forwards;
    /* Ensure it stays above others during animation */
    z-index: 5;
}


/* --- Active Turn Indicator --- */
@keyframes activeTurnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
    }
}

.active-turn {
    animation: activeTurnPulse 1.5s ease-out;
    animation-iteration-count: 3;
    border: 2px solid #00ff00;
    border-radius: 5px;
}

/* --- Event Card Limit Styling --- */
.card.event-limit-reached {
    opacity: 0.7;
    filter: grayscale(30%);
}

.event-limit-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
}

/* PvP turn notification */
.turn-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 10px;
    font-size: 24px;
    z-index: 1000;
    animation: fadeInOut 2s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* --- Staggered Card Appearance --- */
@keyframes cardAppear {
    from {
        opacity: 0;
        /* Restore opacity 0 */
        transform: rotateY(180deg) scale(0.8);
    }

    to {
        opacity: 1;
        /* Restore opacity 1 */
        transform: rotateY(180deg) scale(1);
    }
}

.pack-revealed-card-overlay.card-appear {
    /* Apply the animation */
    animation: cardAppear 0.5s ease-out forwards;
    /* Let the animation's 'from' state handle initial opacity */
    /* opacity: 0; */
}


/* --- Pack Opening Visuals --- */
.pack-visual-overlay {
    /* Base styles for the pack visual */
    width: 250px;
    /* Adjust size as needed */
    height: 350px;
    /* Adjust size as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s ease-out;
    position: relative;
    /* Needed for pseudo-elements if used */
    /* margin: 20px auto; */
    /* Removed auto margin for centering */
    margin-bottom: 30px;
    /* Space below the pack before controls */
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    /* Enhanced shadow */
}

.pack-visual-overlay:hover {
    transform: scale(1.05);
}

/* Specific pack art */
.pack-visual-starter {
    background-image: url('../images/packs/pack_starter.png');
    /* Adjust path if needed */
}

.pack-visual-rare {
    background-image: url('../images/packs/pack_rare.png');
    /* Adjust path if needed */
}

.pack-visual-legendary {
    background-image: url('../images/packs/pack_legendary.png');
    /* Adjust path if needed */
}

.pack-visual-birdwell {
    background-image: url('../images/packs/pack_birdwell.png');
    /* Adjust path if needed */
}

.pack-visual-basement {
    background-image: url('../images/packs/pack_basement.png');
    /* Adjust path if needed */
}

.pack-visual-default {
    background-color: #555;
    border: 2px dashed #888;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    text-align: center;
    content: 'Default Pack Art';
    /* Show text if image fails */
}

/* Tear Animation */
.pack-visual-overlay.tearing {
    animation: packTear 0.8s ease-in-out forwards;
}

@keyframes packTear {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1) rotateY(15deg) rotateZ(5deg);
        /* Add Y rotation */
        opacity: 0.8;
    }

    100% {
        transform: scale(0.5) rotateY(-25deg) rotateZ(-10deg);
        /* Add Y rotation */
        opacity: 0;
    }
}

/* Ensure pack opening area is styled */
#pack-opening-area {
    perspective: 1000px;
    /* Add perspective for 3D transforms */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Themed background */
    background-image: url('../images/backgrounds/shop_opening_bg.jpg');
    /* Adjust path */
    background-size: cover;
    background-position: center;
    /* background-color: rgba(0, 0, 0, 0.7); */
    /* Replaced with image */
    display: none;
    /* Hidden by default */
    align-items: center;
    /* Center horizontally */
    justify-content: flex-end;
    /* Align content (pack, cards, controls) towards the bottom */
    padding-bottom: 5%;
    /* Add some space from the bottom */
    z-index: 1000;
    flex-direction: column;
    /* Stack banner, cards, controls */
}

#pack-opening-area.active {
    display: flex;
}

.pack-card-display-area-overlay {
    perspective: 800px;
    /* Add perspective for card flips */
    display: flex;
    flex-wrap: wrap;
    /* Allow cards to wrap */
    justify-content: center;
    align-items: flex-end;
    /* Align cards to the bottom of their container */
    gap: 15px;
    /* Slightly reduced gap */
    padding: 20px;
    max-width: 80%;
    /* Adjust width */
    height: 40%;
    /* Adjust height relative to the screen */
    margin-bottom: 20px;
    /* Space between cards and pack */
    overflow-y: auto;
    /* Allow scrolling if many cards */
    /* Optional: Add a subtle background or border to define the area */
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* border-radius: 10px; */
}

.pack-revealed-card-overlay {
    /* This is the .card element clone */
    /* Styles for revealed cards in the overlay */
    transform-style: preserve-3d;
    /* Still needed on the parent */
    transition: transform 0.6s;
    position: relative;
    /* Keep relative for positioning context */
    /* Remove fixed width/height, let it inherit from .card styles */
    /* width: var(--card-width); */
    /* height: var(--card-height); */
    border-radius: 10px;
    /* Match card template */
}

/* Apply flip rotation to the specific pack opening card */
.pack-opening-card.face-down {
    transform: rotateY(180deg);
}

/* Scope absolute positioning and flip styles ONLY to pack opening cards */
.pack-opening-card .card-face,
.pack-opening-card .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: inherit;
    overflow: hidden;
}

.pack-opening-card .card-face {
    z-index: 2;
    /* Ensure content is displayed correctly */
    display: flex;
    flex-direction: column;
    /* background-color: var(--card-bg-color, #fff); */
    /* Removed: This was covering the image area's background image */
}

.pack-opening-card .card-back {
    background-image: url('../images/card_back.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* transform: rotateY(180deg); */
    /* Handled by .face-down on parent */
}

/* Remove the broad absolute positioning that broke normal cards */
/* (The previous block replaces the problematic broader selectors) */

.pack-opened-banner {
    color: white;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.pack-controls-overlay {
    margin-top: 20px;
}

.pack-okay-button-overlay {
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
}

/* Pulsing effect for face-down cards */
.pack-revealed-card-overlay.pulsing {
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        transform: rotateY(180deg) scale(1);
        box-shadow: 0 0 5px rgba(255, 255, 180, 0.5);
    }

    50% {
        transform: rotateY(180deg) scale(1.03);
        box-shadow: 0 0 15px rgba(255, 255, 180, 0.8);
    }
}

/* --- Slot Glow Animation --- */
@keyframes slotGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(70, 130, 180, 0);
        /* SteelBlue, transparent */
    }

    50% {
        box-shadow: 0 0 15px 5px rgba(70, 130, 180, 0.7);
        /* SteelBlue, more visible */
    }

    100% {
        box-shadow: 0 0 0 0 rgba(70, 130, 180, 0);
        /* SteelBlue, transparent */
    }
}

.slot-glowing {
    animation: slotGlow 0.7s ease-out;
}

/* --- Unit Defeated Animation --- */
@keyframes unitDefeated {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.unit-defeated-animation {
    animation: unitDefeated 0.6s ease-out forwards;
}

/* --- Unit Attack Lunge Animation --- */
@keyframes unitLunge {
    0% {
        transform: translateX(0);
        position: relative;
        /* Ensure z-index is respected */
        z-index: 10;
        /* Bring to front during animation */
    }

    50% {
        transform: translateX(15px);
        /* Lunge distance, adjust as needed */
    }

    100% {
        transform: translateX(0);
        z-index: auto;
        /* Reset z-index */
    }
}

.unit-attacking-lunge {
    animation: unitLunge 0.3s ease-out;
}

/* New Card Indicator */
.new-card-indicator::after {
    content: 'NEW!';
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #ffcc00;
    /* Bright yellow */
    color: #333;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 10;
    /* Ensure it's above the card */
    transform: rotate(15deg);
}

/* Rarity Backgrounds for Overlay */
.reveal-bg-rare {
    background: radial-gradient(circle, rgba(0, 50, 150, 0.8) 0%, rgba(0, 20, 60, 0.9) 100%);
}

.reveal-bg-legendary {
    background: radial-gradient(circle, rgba(150, 100, 0, 0.8) 0%, rgba(60, 40, 0, 0.9) 100%);
}

/* Holo Effect */
.holo-effect {
    position: relative;
    overflow: hidden;
}

.holo-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.4) 48%,
            rgba(255, 255, 255, 0.4) 52%,
            transparent 80%);
    transform: rotate(25deg);
    animation: holoShine 4s infinite linear;
    z-index: 1;
    /* Below card content but above background */
}

@keyframes holoShine {
    0% {
        transform: translateX(-75%) translateY(-75%) rotate(25deg);
    }

    100% {
        transform: translateX(25%) translateY(25%) rotate(25deg);
    }
}


/* --- Welcome Screen Styles --- */
#screen-welcome {
    display: flex;
    /* Use flexbox for centering */
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(to bottom, #1a1a2e, #16213e);
    /* Dark gradient background */
    color: #e0e0e0;
    /* Light text color */
    padding: 40px;
    box-sizing: border-box;
    /* height: 100%; Removed as absolute positioning with top/bottom defines height */
}

.welcome-container {
    background-color: rgba(30, 30, 50, 0.85);
    /* Slightly darker, more opaque */
    padding: 40px 50px;
    /* Increase padding */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.2);
    /* Outer and inner shadow */
    max-width: 750px;
    /* Slightly wider */
    border: 1px solid rgba(120, 120, 180, 0.6);
    /* Slightly brighter border */
}

.welcome-header {
    margin-bottom: 25px;
}

.welcome-logo {
    max-width: 150px;
    /* Adjust logo size */
    margin-bottom: 15px;
}

.welcome-header h2 {
    color: #a7c7e7;
    /* Lighter blue for title */
    font-size: 2.5em;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.welcome-visual {
    margin-bottom: 25px;
}

.welcome-description p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #c0c0c0;
    /* Slightly dimmer text */
}

.welcome-actions {
    margin-top: 30px;
}

.cta-button {
    background: linear-gradient(145deg, #5f43b2, #8a63d2);
    /* Purple/Blue gradient */
    border: none;
    color: white;
    padding: 18px 40px;
    /* Increased padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3em;
    /* Increased font size */
    font-weight: bold;
    border-radius: 10px;
    /* Slightly larger radius */
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    /* More pronounced shadow */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.cta-button:hover {
    background: linear-gradient(145deg, #6c4ec0, #9b74e0);
    /* Slightly lighter gradient on hover */
    transform: translateY(-3px);
    /* Lift slightly more */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    /* Larger shadow on hover */
}

.cta-button:active {
    transform: translateY(0px);
    /* No lift on active */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    /* Smaller shadow on active */
    background: linear-gradient(145deg, #553a9f, #7e5abf);
    /* Slightly darker on active */
}

/* Ensure welcome screen is hidden initially if needed */
/* Add this if it's not handled by the .screen and .active logic */
/* #screen-welcome:not(.active) {
    display: none;
} */





/* Utility Classes */
.hidden {
    display: none !important;
    /* Use !important to override potential inline styles */

    #menu-logout.hidden {
        display: none;
    }

}


/* Battle Log Scrolling */
#battle-log {
    max-height: 150px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Enable vertical scrollbar when content exceeds max-height */
    padding-right: 5px;
    /* Add some padding so scrollbar doesn't overlap text */
    border: 1px solid #444;
    /* Optional: Add border for clarity */
    background-color: rgba(0, 0, 0, 0.1);
    /* Optional: Slight background */
}

/* Style the scrollbar (Optional, Webkit browsers) */
#battle-log::-webkit-scrollbar {
    width: 8px;
}

#battle-log::-webkit-scrollbar-track {
    background: #2c2c2c;
}

#battle-log::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 4px;
    border: 1px solid #2c2c2c;
}

/* Floating Damage Number Styles */
@keyframes floatFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.damage-number {
    position: absolute;
    font-size: 1.5em;
    /* Adjust size as needed */
    font-weight: bold;
    color: red;
    text-shadow: 1px 1px 2px black;
    /* Add shadow for visibility */
    pointer-events: none;
    /* Prevent interaction */
    z-index: 1000;
    /* Ensure it's above other elements */
    animation: floatFadeOut 1s ease-out forwards;
}

/* Optional: Style for player damage */
.player-damage {
    color: darkred;
    font-size: 2em;
    /* Make player damage more prominent */
}


/* --- Global Styles & Theme --- */
/* --- Font Definitions --- */
/* Self-hosted Roboto */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* Use swap for better perceived performance */
    /* Updated to point to the TTF file in the static subdirectory */
    src: url('../fonts/static/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/static/Roboto-Bold.ttf') format('truetype');
}

/* --- Battle End Fanfare Overlay --- */
.fanfare-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.fanfare-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.fanfare-content {
    text-align: center;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease-out;
}

.fanfare-overlay.show .fanfare-content {
    transform: scale(1);
    opacity: 1;
}

#fanfare-result-text {
    font-family: var(--font-title);
    font-size: 6em;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow:
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px var(--accent-color),
        0 0 40px var(--accent-color),
        0 0 50px var(--accent-color),
        3px 3px 5px rgba(0, 0, 0, 0.7);
}

.fanfare-overlay.victory #fanfare-result-text {
    color: #ffd700;
    text-shadow:
        0 0 10px #fff,
        0 0 20px #ffd700,
        0 0 30px #ffd700,
        0 0 40px #ffae00,
        0 0 50px #ffae00,
        3px 3px 5px rgba(0, 0, 0, 0.7);
}

.fanfare-overlay.defeat #fanfare-result-text {
    color: #a0a0a0;
    text-shadow:
        0 0 10px #555,
        0 0 20px #555,
        0 0 30px #333,
        0 0 40px #333,
        3px 3px 5px rgba(0, 0, 0, 0.9);
}

.fanfare-overlay.draw #fanfare-result-text {
    color: #add8e6;
    text-shadow:
        0 0 10px #fff,
        0 0 20px #add8e6,
        0 0 30px #87ceeb,
        0 0 40px #87ceeb,
        3px 3px 5px rgba(0, 0, 0, 0.7);
}

/* Orbitron (Still imported, self-host if needed) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

:root {
    --primary-bg: #1a1a2e;
    /* Dark blue/purple */
    --secondary-bg: #16213e;
    --tertiary-bg: #0f3460;
    --accent-color: #e94560;
    /* Pink/Red accent */
    --accent-color-rgb: 233, 69, 96;
    /* RGB values for rgba() usage */
    --text-light: #e0e0e0;
    --text-dark: #333;
    --card-bg: #2a2a4a;
    --card-border: #53537a;
    --zone-bg: rgba(15, 52, 96, 0.7);
    /* Semi-transparent dark blue */
    --zone-border: #5a7d9a;
    --aether-color: #40e0d0;
    /* Turquoise for Aether */
    --sp-color: #ff6b6b;
    /* Light red for SP (formerly LP) */
    --error-bg: rgba(220, 53, 69, 0.9);
    /* Semi-transparent red */
    --error-border: #dc3545;
    /* Solid red */

    --font-main: 'Roboto', sans-serif;
    --font-title: 'Orbitron', sans-serif;
}

/* Apply border-box sizing globally for more predictable layouts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    margin: 0;
    background-color: var(--primary-bg);
    /* Fallback color */
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Placeholder background for the whole app - Replace URL */
    background-image: linear-gradient(rgba(26, 26, 46, 0.85), rgba(22, 33, 62, 0.85)), url('images/backgrounds/main-wallpaper.png');
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
    /* Prevent horizontal scrollbars but allow vertical */
    overflow-y: auto;
    /* Allow vertical scrolling when needed */
}

/* Disable animations globally if needed */
.animations-disabled *,
.animations-disabled *::before,
.animations-disabled *::after {
    animation: none !important;
    transition: none !important;
}


header {
    background-color: rgba(22, 33, 62, 0.9);
    /* Semi-transparent header */
    color: var(--text-light);
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    /* Prevent header from shrinking */
    z-index: 100;
    /* Keep header on top */
}

header h1 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.9em;
    /* Slightly larger */
    color: #fff;
    /* White title */
    text-shadow: 0 0 8px var(--accent-color), 1px 1px 2px rgba(0, 0, 0, 0.7);
    /* Accent glow + dark shadow */
}

header nav button {
    margin-left: 15px;
    padding: 8px 18px;
    background-color: var(--tertiary-bg);
    color: var(--text-light);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

header nav button:hover {
    background-color: var(--accent-color);
    color: var(--primary-bg);
}

#player-info {
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.3);
    /* Darker, less blue background */
    padding: 8px 18px;
    /* More padding */
    border-radius: 20px;
    /* Pill shape */
    border: 1px solid var(--accent-color);
    /* Accent border */
    display: flex;
    /* Use flex for alignment */
    align-items: center;
    gap: 15px;
    /* Space between items */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#player-info:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Dropdown menu styles */
.player-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(22, 33, 62, 0.95);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin-top: 10px;
    display: none;
    flex-direction: column;
    z-index: 200;
    min-width: 150px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.player-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--accent-color);
}

/* Show dropdown on hover (for desktop) */
.dropdown-trigger:hover .player-dropdown,
.dropdown-trigger:focus .player-dropdown,
.dropdown-trigger:focus-within .player-dropdown {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Show dropdown when active class is added (for JS toggle/mobile) */
.player-dropdown.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Dropdown indicator */
.dropdown-indicator {
    font-size: 0.7em;
    margin-left: 5px;
    color: var(--accent-color);
    transition: transform 0.2s ease;
}

#player-info:hover .dropdown-indicator,
#player-info:focus .dropdown-indicator,
#player-info.active .dropdown-indicator {
    transform: rotate(180deg);
}

.player-dropdown button {
    background-color: transparent;
    color: var(--text-light);
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 5px 0;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: var(--font-main);
    font-weight: bold;
}

.player-dropdown button:hover {
    background-color: var(--accent-color);
    color: var(--primary-bg);
}

#player-info span {
    margin-left: 0;
    /* Remove default margin */
    display: flex;
    /* Align icon and text within span */
    align-items: center;
    gap: 5px;
    /* Space between icon and text */
}

/* Add icons */
#player-name::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23c9a84c'/%3E%3Cpath d='M12 14c-5 0-8 2.5-8 5v1h16v-1c0-2.5-3-5-8-5z' fill='%23c9a84c' opacity='0.7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.8;
    margin-right: 0.25em;
}

#player-coins::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='10' cy='16' rx='7' ry='4' fill='%23c9a84c' opacity='0.5'/%3E%3Cellipse cx='10' cy='14' rx='7' ry='4' fill='%23c9a84c' opacity='0.7'/%3E%3Cellipse cx='10' cy='12' rx='7' ry='4' fill='%23c9a84c'/%3E%3Cellipse cx='10' cy='12' rx='4.5' ry='2.5' fill='none' stroke='%23ffd54f' stroke-width='0.7' opacity='0.6'/%3E%3Ctext x='10' y='13.5' text-anchor='middle' font-size='5' font-weight='bold' fill='%23ffd54f' font-family='serif'%3EA%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.8;
}

/* XP Progress Bar Styles */
.xp-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
    min-width: 150px;
}

.xp-level-display {
    font-weight: bold;
    color: #ffcc00;
    margin-bottom: 3px;
    font-size: 0.9em;
    text-shadow: 0 0 3px rgba(255, 204, 0, 0.5);
}

.xp-progress-bar {
    width: 100%;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #4a9eff, #7dc4ff);
    width: 0%;
    /* Will be set by JS */
    border-radius: 6px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 5px rgba(77, 166, 255, 0.7);
}

.xp-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Level Up Notification Styles */
.level-up-notification {
    background: linear-gradient(135deg, #2a3f8f, #4a6bff);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 20px rgba(74, 107, 255, 0.7);
    border: 2px solid #ffcc00;
    color: white;
    text-align: center;
    animation: level-up-glow 2s infinite alternate;
}

@keyframes level-up-glow {
    from {
        box-shadow: 0 0 10px rgba(74, 107, 255, 0.7);
    }

    to {
        box-shadow: 0 0 25px rgba(74, 107, 255, 0.9), 0 0 10px rgba(255, 204, 0, 0.5);
    }
}

.level-up-header {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #ffcc00;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

.level-up-level {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.level-up-rewards {
    font-size: 1.1em;
    color: #e0e0ff;
}

/* Toast modifications for level-up */
.toast.level-up,
.toast-message.level-up {
    background: none;
    border: none;
    box-shadow: none;
    max-width: 300px;
}

/* Toast message styles */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.toast-message {
    background-color: rgba(40, 40, 60, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    max-width: 350px;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.3s, transform 0.3s;
}

.toast-message.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-message.info {
    border-left: 4px solid #4a9eff;
}

.toast-message.success {
    border-left: 4px solid #4caf50;
}

.toast-message.warning {
    border-left: 4px solid #ff9800;
}

.toast-message.error {
    border-left: 4px solid #f44336;
}

main#game-container {
    flex-grow: 1;
    padding: 30px;
    position: relative;
    /* Needed for absolute positioning of screens */
    overflow-x: hidden;
    /* Prevent horizontal scrollbars */
    overflow-y: auto;
    /* Allow vertical scrolling when needed */
}

.screen {
    /* display: none; */
    /* Let opacity and pointer-events handle visibility */
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    /* Removed bottom: 0; Position relative to game-container padding */
    padding: 30px;
    background-color: rgba(22, 33, 62, 0.85);
    border: 1px solid var(--zone-border);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    /* Start hidden */
    transform: translateX(50px) scale(0.95);
    /* Start slightly off-screen right and smaller */
    pointer-events: none;
    overflow-y: auto;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* Define transition */
    z-index: 5;
    /* Default z-index */
}

.screen.active {
    opacity: 1 !important;
    transform: translateX(0) scale(1);
    /* Move to final position */
    pointer-events: auto !important;
    /* Make active screen interactive */
    transform: translateX(0) scale(1);
    /* Slide in to center and normal size */
    z-index: 10;
    /* Active screen on top */
}

/* Entering state (before transition starts) */
.screen.screen-entering {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
    /* Start slightly off-screen left */
}

/* Exiting state (during transition) */
.screen.screen-exiting {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
    /* Slide off-screen right */
    pointer-events: none;
    /* Disable interaction immediately */
    z-index: 5;
    /* Ensure exiting screen is behind entering screen */
}

/* === Welcome Screen - Full viewport, ABOVE EVERYTHING === */
#screen-welcome.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0d1117 0%, #1a1a2e 50%, #16213e 100%) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.welcome-container {
    text-align: center;
    max-width: 600px;
    width: 90%;
    padding: 40px 20px;
}

.welcome-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.welcome-header h2 {
    color: #ffd700;
    font-family: var(--font-title);
    font-size: 1.8em;
    margin-bottom: 20px;
    border: none;
    padding: 0;
}

.welcome-description {
    color: #b8c4d0;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
}

.welcome-description p {
    margin-bottom: 10px;
}

#join-adventure-button {
    background: linear-gradient(135deg, #e94560, #c0392b);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 16px 48px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative;
    z-index: 100;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#join-adventure-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.5), 0 4px 15px rgba(0, 0, 0, 0.3);
}

#join-adventure-button:active {
    transform: scale(0.98);
}

/* === Login/Signup screens - same viewport treatment === */
#screen-login.active,
#screen-signup.active,
#screen-forgot-password.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0d1117 0%, #1a1a2e 50%, #16213e 100%) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* --- Phase Announcement Styling --- */
.phase-announcement {
    position: fixed;
    /* Position relative to viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    /* Start smaller */
    padding: 20px 40px;
    background-color: rgba(15, 52, 96, 0.9);
    /* Dark blue background */
    color: var(--text-light);
    font-family: var(--font-title);
    font-size: 2.5em;
    font-weight: bold;
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 1001;
    /* Above most elements */
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Phase-specific colors (examples) */
.phase-announcement.phase-draw {
    border-color: #40e0d0;
    color: #40e0d0;
}

/* Aether Blue */
.phase-announcement.phase-gather {
    border-color: #90ee90;
    color: #90ee90;
}

/* Light Green */
.phase-announcement.phase-main {
    border-color: #ffd700;
    color: #ffd700;
}

/* Gold */
.phase-announcement.phase-combat {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* Light Red */
.phase-announcement.phase-end {
    border-color: #cccccc;
    color: #cccccc;
}

/* Grey */

/* Animation */
@keyframes phaseAnnounceAnimation {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    /* Pop in */
    80% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    /* Hold */
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }

    /* Fade out */
}

.phase-announcement.animate {
    animation: phaseAnnounceAnimation 2s ease-in-out forwards;
    /* Match JS timeout */
}

.screen h2 {
    margin-top: 0;
    font-family: var(--font-title);
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.8em;
}

/* --- Main Collection Controls --- */
.collection-controls-main {
    display: flex;
    justify-content: flex-start;
    /* Align to left */
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    border: 1px solid var(--zone-border);
    /* Add subtle border */
}

.collection-controls-main select,
.collection-controls-main input[type="checkbox"] {
    padding: 8px;
    border: 1px solid var(--zone-border);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 0.9em;
    /* Slightly smaller font */
}

.collection-controls-main select {
    min-width: 150px;
    /* Give dropdown some width */
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 0.9em;
}

.filter-toggle input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    /* Adjust checkbox size */
    height: 16px;
}

#collection-undo-button {
    margin-left: auto;
    /* Push to the right */
    /* Add specific styles if needed, otherwise inherits from button.secondary */
}

/* Collection Value Display */
#collection-value-display {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    border: 1px solid var(--zone-border);
}

#collection-value-display span {
    color: #ffd700;
    /* Gold for coin value */
    margin-left: 5px;
}

/* --- General Button Styling --- */
button,
.button-like {
    /* Added .button-like for potential non-button elements */
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    font-family: var(--font-main);
    cursor: pointer;
    background: linear-gradient(180deg, var(--tertiary-bg) 0%, #0a2244 100%);
    /* Dark blue gradient */
    color: var(--text-light);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    margin: 5px;
    transition: all 0.2s ease-in-out;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* Subtle outer shadow + inner shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

button:hover,
.button-like:hover {
    background: linear-gradient(180deg, #f05570 0%, var(--accent-color) 100%);
    /* Lighter accent gradient */
    color: #fff;
    /* Brighter text on hover */
    border-color: #ff8a8a;
    /* Lighter accent border */
    /* Stronger outer shadow, remove inner shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 5px rgba(233, 69, 96, 0.3);
    /* Add subtle glow */
    transform: translateY(-1px);
    /* Slight lift */
}


/* --- Main Menu Specific Styles --- */
.main-menu-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    /* Left panel, Center (flexible), Right panel */
    gap: 30px;
    align-items: start;
    /* Align panels to the top */
    padding: 20px;
}

.main-menu-left-panel,
.main-menu-right-panel {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--zone-border);
}

.main-menu-center-panel h2 {
    text-align: center;
    color: var(--accent-color);
    font-family: var(--font-title);
    margin-bottom: 25px;
    font-size: 2.2em;
}

.main-menu-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two equal columns */
    gap: 15px;
    /* Spacing between buttons */
    margin-top: 20px;
}

.main-menu-buttons button {
    width: 100%;
    /* Make buttons fill their grid cell */
    padding: 15px 10px;
    /* Adjust padding for better look in grid */
    font-size: 1.1em;
    display: flex;
    /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Space between icon and text */
}

.main-menu-left-panel h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
}

#main-menu-avatar-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px auto;
    border: 3px solid var(--accent-color);
}

#main-menu-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Welcome/Login Screen Styles --- */
#screen-welcome {
        /* Override default screen positioning for a centered modal-like feel */
        position: fixed;
        /* Use fixed to center on viewport */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        /* Use flex to center content */
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.7);
        /* Darker overlay */
        padding: 0;
        /* Remove screen padding */
        border: none;
        /* Remove screen border */
        border-radius: 0;
        /* Remove screen border-radius */
        z-index: 100;
        /* Ensure it's above other screens initially */
        /* Keep transition properties */
        opacity: 0;
        transform: scale(0.9);
        pointer-events: none;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    #screen-welcome.active {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    .welcome-container {
        background-color: var(--secondary-bg);
        padding: 40px;
        border-radius: 15px;
        border: 2px solid var(--accent-color);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        max-width: 800px;
        /* Limit width */
        width: 90%;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .welcome-header {
        display: flex;
        flex-direction: column;
        /* Stack logo and title */
        align-items: center;
        gap: 15px;
    }

    .welcome-logo {
        max-width: 150px;
        /* Adjust logo size */
        height: auto;
    }

    .welcome-header h2 {
        font-family: var(--font-title);
        color: var(--accent-color);
        font-size: 2.5em;
        margin: 0;
        border-bottom: none;
        /* Remove default screen title border */
        padding-bottom: 0;
    }

    .welcome-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Side-by-side description and form */
        gap: 40px;
        text-align: left;
    }

    .welcome-description p {
        font-size: 1.1em;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .auth-form-container {
        position: relative;
        /* For positioning forms */
        min-height: 300px;
        /* Ensure container has height */
    }

    .auth-form {
        position: absolute;
        /* Stack forms */
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.15);
        padding: 25px;
        border-radius: 8px;
        border: 1px solid var(--zone-border);
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    .auth-form.active-form {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .auth-form h3 {
        text-align: center;
        color: var(--text-light);
        margin-top: 0;
        margin-bottom: 25px;
        font-size: 1.5em;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        font-size: 0.9em;
        color: var(--text-light);
    }

    .form-group input[type="text"],
    .form-group input[type="password"] {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--card-border);
        background-color: var(--primary-bg);
        color: var(--text-light);
        border-radius: 4px;
        font-size: 1em;
    }

    .form-group input[type="text"]:focus,
    .form-group input[type="password"]:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 5px rgba(233, 69, 96, 0.5);
    }

    .auth-button {
        width: 100%;
        padding: 12px;
        font-size: 1.1em;
        margin-top: 10px;
        /* Inherits general button styles, can add specifics here */
    }

    .auth-switch {
        text-align: center;
        margin-top: 20px;
        font-size: 0.9em;
    }

    .auth-switch a {
        color: var(--accent-color);
        text-decoration: none;
        font-weight: bold;
    }

    .auth-switch a:hover {
        text-decoration: underline;
    }

    .auth-error {
        color: var(--error-bg);
        background-color: rgba(220, 53, 69, 0.1);
        border: 1px solid var(--error-border);
        padding: 10px;
        border-radius: 4px;
        margin-top: 15px;
        text-align: center;
        font-size: 0.9em;
        display: none;
        /* Hidden by default */
    }

    /* Responsive adjustments for smaller screens if needed */
    @media (max-width: 768px) {
        .welcome-content {
            grid-template-columns: 1fr;
            /* Stack description and form */
        }

        .welcome-container {
            padding: 25px;
        }
    }


    /* --- Login/Signup Screen Styles --- */
    #screen-login,
    #screen-signup {
        display: flex;
        /* Use flex to center the auth container */
        justify-content: center;
        align-items: center;
        background: linear-gradient(to bottom, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.9)),
            url('images/backgrounds/main-wallpaper.png');
        /* Add background image */
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* Add decorative elements */
    #screen-signup::before,
    #screen-login::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            radial-gradient(circle at 10% 20%, rgba(var(--accent-color-rgb), 0.1) 0%, transparent 20%),
            radial-gradient(circle at 90% 80%, rgba(64, 224, 208, 0.1) 0%, transparent 20%),
            linear-gradient(45deg, transparent 48%, rgba(var(--accent-color-rgb), 0.03) 50%, transparent 52%) 0 0 / 30px 30px,
            linear-gradient(-45deg, transparent 48%, rgba(64, 224, 208, 0.03) 50%, transparent 52%) 0 0 / 30px 30px;
        pointer-events: none;
    }

    .auth-container {
        background-color: rgba(15, 15, 30, 0.92);
        /* Slightly more opaque background */
        padding: 50px 60px;
        /* Increased padding */
        border-radius: 15px;
        border: 1px solid var(--zone-border);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7),
            0 0 15px rgba(var(--accent-color-rgb), 0.2);
        /* Add accent glow */
        width: 100%;
        max-width: 500px;
        /* Slightly wider */
        text-align: center;
        position: relative;
        backdrop-filter: blur(5px);
        /* Add blur effect for modern browsers */
    }

    /* Add decorative corner accent */
    .auth-container::after {
        content: '';
        position: absolute;
        top: -5px;
        right: -5px;
        width: 80px;
        height: 80px;
        border-top: 2px solid var(--accent-color);
        border-right: 2px solid var(--accent-color);
        border-top-right-radius: 15px;
        pointer-events: none;
    }

    .auth-container h2 {
        color: var(--accent-color);
        font-family: var(--font-title);
        margin-bottom: 35px;
        font-size: 2.2em;
        border-bottom: 2px solid var(--accent-color);
        padding-bottom: 15px;
        text-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.3);
        letter-spacing: 1px;
    }

    .auth-form {
        /* Remove absolute positioning if it was added */
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background: none;
        /* Remove inner background */
        border: none;
        /* Remove inner border */
        padding: 0;
        /* Remove inner padding */
        text-align: left;
        /* Align form elements left */
    }

    .form-group {
        margin-bottom: 25px;
        position: relative;
        /* For password toggle */
    }

    .form-group label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 1em;
        color: var(--text-light);
        opacity: 0.95;
        letter-spacing: 0.5px;
        transition: color 0.2s;
    }

    .form-group:focus-within label {
        color: var(--accent-color);
        /* Change label color when input is focused */
    }

    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group input[type="email"] {
        width: 100%;
        padding: 14px 18px;
        /* Larger padding */
        padding-right: 45px;
        /* Space for toggle button */
        border: 1px solid var(--card-border);
        background-color: rgba(0, 0, 0, 0.3);
        /* Darker input background */
        color: var(--text-light);
        border-radius: 8px;
        font-size: 1.05em;
        transition: all 0.3s ease;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .form-group input[type="text"]:focus,
    .form-group input[type="password"]:focus,
    .form-group input[type="email"]:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 12px rgba(233, 69, 96, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.1);
        background-color: rgba(10, 10, 20, 0.4);
        /* Slightly lighter when focused */
    }

    /* Style the password toggle button */
    .toggle-password {
        position: absolute;
        right: 10px;
        top: 60%;
        /* Adjust vertical alignment */
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #aaa;
        cursor: pointer;
        padding: 5px;
        font-size: 1.2em;
        /* Make icon slightly larger */
    }

    .toggle-password:hover {
        color: var(--text-light);
    }


    .auth-button {
        width: 100%;
        padding: 16px;
        font-size: 1.2em;
        margin-top: 20px;
        /* Inherits general button styles, add specifics if needed */
        background: linear-gradient(180deg, var(--accent-color) 0%, #c8304d 100%);
        border-color: #ff8a8a;
        border-radius: 8px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .auth-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
    }

    .auth-button:hover {
        background: linear-gradient(180deg, #f05570 0%, var(--accent-color) 100%);
        border-color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(233, 69, 96, 0.5);
    }

    .auth-button:hover::after {
        left: 100%;
    }

    .auth-button:active {
        transform: translateY(1px);
        box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
    }

    .auth-switch {
        text-align: center;
        margin-top: 30px;
        font-size: 1em;
        color: #ccc;
    }

    .auth-switch a {
        color: var(--accent-color);
        text-decoration: none;
        font-weight: bold;
        transition: all 0.2s;
        padding: 2px 5px;
        border-bottom: 1px dashed rgba(233, 69, 96, 0.3);
    }

    .auth-switch a:hover {
        color: #ff8a8a;
        text-decoration: none;
        border-bottom: 1px solid rgba(233, 69, 96, 0.8);
        background-color: rgba(233, 69, 96, 0.05);
    }

    .auth-error {
        color: #ff6b6b;
        /* Lighter red for error text */
        background-color: rgba(220, 53, 69, 0.15);
        border: 1px solid rgba(220, 53, 69, 0.5);
        padding: 14px;
        border-radius: 8px;
        margin-top: 25px;
        text-align: center;
        font-size: 0.95em;
        display: block;
        /* Show by default, JS can hide if empty */
        min-height: 1.2em;
        /* Reserve space */
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
    }

    /* Back Button Styling */
    .back-button {
        /* Use secondary button style */
        background: linear-gradient(180deg, #4a4a6a 0%, #3a3a5a 100%);
        border-color: #777;
        color: var(--text-light);
        padding: 12px 24px;
        font-size: 0.95em;
        margin-top: 30px;
        display: block;
        /* Make it block to center */
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
    }

    .back-button:hover {
        background: linear-gradient(180deg, #6a6a8a 0%, #5a5a7a 100%);
        border-color: #aaa;
        color: var(--text-light);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .back-button:active {
        transform: translateY(1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Password Feedback Styling */
    #password-strength-feedback,
    #password-match-feedback {
        font-size: 0.85em;
        margin-top: 6px;
        min-height: 1.1em;
        /* Reserve space */
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }

    .strength-0,
    .strength-1 {
        color: #dc3545;
    }

    /* Weak (Red) */
    .strength-2 {
        color: #ffc107;
    }

    /* Moderate (Yellow) */
    .strength-3,
    .strength-4 {
        color: #28a745;
    }

    /* Strong (Green) */

    .no-match {
        color: #dc3545;
    }

    /* Mismatch (Red) */
    .match {
        color: #28a745;
    }

    /* Match (Green) */

}

.main-menu-right-panel h4 {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.news-placeholder p {
    margin-bottom: 10px;
    font-size: 0.9em;
    line-height: 1.4;
}

#screen-battle {
    /* background-image: url('../images/backgrounds/battle_bg_default.png'); REMOVED — handled by battle-clean.css */
    background-color: #030308;
    /* Opaque fallback — battle-clean.css handles actual background */
    background-size: cover;
    /* Cover the entire area */
    background-position: center center;
    /* Center the image */
    background-repeat: no-repeat;
}

#battle-info {
    background: linear-gradient(to bottom, rgba(40, 40, 70, 0.95), rgba(30, 30, 50, 0.9));
    /* Dark blue/purple gradient */
    padding: 8px 15px;
    border-radius: 0 0 8px 8px;
    /* Rounded bottom corners */
    border-bottom: 2px solid var(--accent-color-dark, #4a4a8a);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    color: var(--text-light, #e0e0e0);
    display: flex;
    /* Use flexbox for alignment */
    justify-content: space-between;
    /* Space out elements */
    align-items: center;
    /* Vertically center items */
    /* position: sticky; */
    /* Removed to respect parent's padding-top */
    /* top: 0; */
    /* Removed */
    z-index: 100;
    /* Ensure it's above other elements (retained, may not be strictly necessary now but harmless) */
}

/* Style individual stats within the info bar */
#battle-info .battle-stat {
    margin: 0 10px;
    display: flex;
    align-items: center;
}

/* Opponent info styling - Clarified identifier */
#opponent-info {
    position: relative;
    padding: 8px 12px;
    background-color: rgba(30, 30, 50, 0.8);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--accent-color-dark);
}

/* AI identifier badge */
#opponent-info::before {
    content: 'AI';
    position: absolute;
    top: -8px;
    left: 10px;
    background-color: var(--accent-color-dark);
    color: #fff;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Human player indicator - hidden by default, shown via JS when it's a human player */
#opponent-info.human-player::before {
    content: 'HUMAN';
    background-color: #4caf50;
}

/* --- Aether Display Styling --- */
.player-aether-display,
.opponent-aether-display {
    display: flex;
    flex-direction: column;
    /* Make it vertical */
    align-items: center;
    /* Center items horizontally */
    padding: 8px 5px;
    /* Adjust padding */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: 1px solid var(--aether-color-dark, #3a007a);
    /* min-width: 80px; Removed min-width */
    justify-content: flex-start;
    /* Align items to the top */
    gap: 4px;
    /* Add gap between elements */
}

.aether-display {
    /* Container for potential crystal icons - currently empty */
    /* margin-right: 5px; Removed right margin */
    margin-bottom: 4px;
    /* Add bottom margin */
}

.aether-label {
    font-size: 0.9em;
    margin-right: 4px;
    color: var(--aether-color-light, #c0a0ff);
}

#player-aether-value,
#opponent-aether-value {


    .aether-crystal {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: var(--aether-color, #e0c0ff);
        border: 1px solid var(--aether-color-dark, #8000ff);
        border-radius: 50%;
        /* Simple orb */
        margin: 0 2px;
        box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.5), 0 0 5px var(--aether-color, #e0c0ff);
        vertical-align: middle;
    }

    /* --- Deck/Discard Zone Styling --- */
    .deck-zone,
    .discard-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Center content vertically */
        padding: 10px 5px;
        border: 2px solid rgba(85, 85, 85, 0.6);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);
        text-align: center;
        min-width: 80px;
        /* Ensure some width */
        position: relative;
        /* For potential absolute positioning inside */
        height: 100px;
        /* Give a fixed height */
    }

    .deck-zone .zone-label,
    .discard-zone .zone-label {
        font-size: 0.8em;
        color: var(--text-muted, #aaa);
        margin-bottom: 5px;
        font-weight: bold;
    }

    .deck-zone .card-count,
    .discard-zone .card-count {
        font-size: 0.9em;
        color: var(--text-light, #eee);
        margin-bottom: 8px;
    }

    .deck-zone .card-back,
    .discard-zone .discard-pile-top {
        width: 50px;
        /* Adjust size */
        height: 70px;
        background-color: #333;
        /* Placeholder color */
        border: 1px solid #555;
        border-radius: 4px;
        background-image: url('../images/card_back.png');
        /* Use actual card back */
        background-size: cover;
        background-position: center;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Specific style for discard pile top card visual */
    .discard-zone .discard-pile-top {
        /* Could potentially show the actual top card image later */
        background-image: none;
        /* Clear card back for discard */
        background-color: #222;
        /* Darker placeholder */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 0.7em;
    }

    .discard-zone .discard-pile-top::before {
        content: 'Discard';
    }

    /* Position opponent deck/discard */
    .opponent-deck-discard {
        position: absolute;
        top: 70px;
        /* Position below info bar */
        right: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 5;
        /* Below info bar */
    }

    /* Position player lower area (deck, hand, discard) */
    .player-lower-area {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        /* Span across bottom */
        display: flex;
        justify-content: space-between;
        /* Space out deck, hand, discard */
        align-items: flex-end;
        /* Align to bottom */
        gap: 15px;
        z-index: 50;
        /* Above field, below modals */
        height: 230px;
        /* Define height for alignment */
    }

    #player-deck-zone {
        /* Positioned by flexbox in player-lower-area */
        height: auto;
        /* Override fixed height if needed */
    }

    #player-discard-zone {
        /* Positioned by flexbox in player-lower-area */
        cursor: pointer;
        /* Indicate clickable */
        transition: background-color 0.2s;
        height: auto;
        /* Override fixed height if needed */
    }

    #player-discard-zone:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Adjust hand zone positioning within lower area */
    #player-hand {
        flex-grow: 1;
        /* Allow hand to take remaining space */
        /* Remove absolute positioning if previously set */
        position: relative;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: 70%;
        /* Limit hand width */
        margin: 0 auto;
        /* Center hand between deck/discard */
        height: 100%;
        /* Fill the lower area height */
        border-color: transparent;
        /* Make hand border transparent */
        background: none;
        /* Remove hand background */
    }


    font-weight: bold;
    font-size: 1.1em;
    color: var(--aether-color, #e0c0ff);
    min-width: 1.5em;
    /* Space for 2 digits */
    text-align: right;
}


/* Style the next phase prompt */
.next-phase-prompt {
    margin-left: 15px;
    font-style: italic;
    color: var(--accent-color-light, #a0a0ff);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.next-phase-prompt:hover {
    background-color: rgba(255, 255, 255, 0.1);
}



button:active,
.button-like:active {
    transform: translateY(0px);
    /* Remove lift, slight push down from normal */
    /* Less shadow, more pronounced inner shadow */
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, #c8304d 0%, var(--accent-color) 100%);
    /* Invert hover gradient */
}

/* Style for potentially less important buttons */
button.secondary,
.button-like.secondary {
    background: linear-gradient(180deg, #4a4a6a 0%, #3a3a5a 100%);
    border-color: #777;
}

button.secondary:hover,
.button-like.secondary:hover {
    background: linear-gradient(180deg, #6a6a8a 0%, #5a5a7a 100%);
    border-color: #aaa;
    color: var(--text-light);
}

/* Pulsing effect for Next Phase button */
@keyframes pulsePhaseButton {
    0% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 5px rgba(233, 69, 96, 0.3);
    }

    /* Base hover shadow */
    50% {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(233, 69, 96, 0.7);
    }

    /* Enhanced glow */
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 5px rgba(233, 69, 96, 0.3);
    }

    /* Back to base */
}

#phase-button:not(:disabled) {
    /* Apply only when button is enabled */
    /* Use the hover styles as the base */
    background: linear-gradient(180deg, #f05570 0%, var(--accent-color) 100%);
    color: #fff;
    border-color: #ff8a8a;
    animation: pulsePhaseButton 1.5s infinite ease-in-out;
}

/* Override hover effect slightly for pulsing button */
#phase-button:not(:disabled):hover {
    transform: translateY(-2px);
    /* Slightly more lift on hover */
}

/* Inline link-like buttons (e.g., Login/Signup switch) */
button.link-style {
    background: none;
    border: none;
    color: var(--accent-color);
    text-decoration: underline;
    padding: 0 5px;
    font-size: 0.9em;
    /* Slightly smaller */
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
}

button.link-style:hover {
    color: var(--text-light);
    transform: none;
    box-shadow: none;
    background: none;
    /* Ensure background doesn't appear on hover */
    border: none;
    text-decoration: none;
    /* Remove underline on hover */
}


/* --- Main Menu Layout --- */
#screen-main-menu {
    padding: 0;
    /* Remove padding from screen itself */
    background-color: transparent;
    /* Let layout handle background */
    border: none;
    /* Remove screen border */
    box-shadow: none;
    /* Remove screen shadow */
    display: flex;
    /* Use flex on the screen directly */
    align-items: center;
    /* Center layout vertically */
    justify-content: center;
    /* Center layout horizontally */
}

.main-menu-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    /* Left Panel, Center Panel, Right Panel */

    /* --- Highlighting --- */
    .field-zone.valid-summon-zone {
        background-color: rgba(100, 255, 100, 0.3) !important;
        /* Light green glow */
        border: 2px solid rgba(102, 255, 102, 0.8) !important;
        box-shadow: 0 0 15px rgba(100, 255, 100, 0.7) !important;
    }

    /* Improved Target Highlighting for Cards */
    .card.valid-target {
        outline: 3px solid #00ffcc !important;
        /* Bright cyan outline */
        outline-offset: 2px;
        box-shadow: 0 0 18px #00ffcc, 0 0 8px #fff !important;
        /* Cyan glow + white inner glow */
        cursor: crosshair !important;
        /* Indicate target selection */
        transform: scale(1.03);
        /* Slightly larger */
        transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, outline 0.1s ease-in-out;
    }

    /* Highlighting for Opponent Player Area */
    /* Highlighting for Opponent Player Area (Targeting the SP display directly) */
    .opponent-stats .sp-display.valid-target {
        outline: 3px solid #ff4d4d !important;
        /* Bright red outline */
        outline-offset: 2px;
        box-shadow: 0 0 18px #ff4d4d, 0 0 8px #fff !important;
        /* Red glow + white inner glow */
        cursor: crosshair !important;
        border-radius: 5px;
        /* Match opponent info styling if needed */
        background-color: rgba(255, 77, 77, 0.2);
        /* Slight red background tint */
        transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, outline 0.1s ease-in-out, background-color 0.1s ease-in-out;
        display: inline-block;
        /* Ensure outline applies correctly */
        padding: 2px 5px;
        /* Add some padding */
    }

    /* Highlighting for Attacker Cards */
    .card.can-attack {
        outline: 3px solid #ffd700 !important;
        /* Gold outline */
        outline-offset: 2px;
        box-shadow: 0 0 18px #ffd700, 0 0 8px #fff !important;
        /* Gold glow + white inner glow */
        cursor: pointer !important;
        /* Indicate it's selectable for attack */
        /* Optional: Add a specific cursor like a sword if desired */
        /* cursor: url('images/cursors/sword.cur'), pointer !important; */
        transform: scale(1.02);
        /* Slightly larger */
        transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, outline 0.1s ease-in-out;
    }

    /* Attack Indicator Animation */
    .card.can-attack-indicator {
        animation: pulse-glow 1.5s infinite ease-in-out;
        cursor: pointer;
        /* Indicate clickable for attack */
    }

    @keyframes pulse-glow {

        0%,
        100% {
            box-shadow: 0 0 8px 2px rgba(0, 255, 0, 0.5);
            /* Softer green glow */
        }

        50% {
            box-shadow: 0 0 16px 5px rgba(144, 238, 144, 0.8);
            /* Brighter, larger light green glow */
        }
    }

    /* Optional: Change cursor globally when targeting */
    body.targeting-active {
        cursor: crosshair;
    }

    gap: 30px;
    width: 90%;
    max-width: 1200px;
    height: 80%;
    max-height: 600px;
    background-color: rgba(22, 33, 62, 0.85);
    /* Panel background */
    padding: 30px;
    border-radius: 10px;
    border: 1px solid var(--zone-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    align-items: start;
    /* Align panel content to top */
}

.main-menu-left-panel,
.main-menu-right-panel {
    background-color: rgba(15, 52, 96, 0.7);
    border: 1px solid var(--zone-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Center text in panels */
}

.main-menu-center-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center buttons vertically */
}

.main-menu-center-panel h2 {
    /* Style the title in the center */
    font-family: var(--font-title);
    color: var(--accent-color);
    font-size: 2.5em;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    border: none;
    /* Remove border from screen h2 */
    padding: 0;
}

.main-menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns for buttons */
    gap: 15px;
    width: 80%;
    /* Limit button area width */
    max-width: 500px;
}

.main-menu-buttons button {
    width: 100%;
    /* Make buttons fill grid cells */
    margin: 0;
    /* Remove default button margin */
    display: flex;
    /* Use flex to align icon and text */
    align-items: center;
    justify-content: center;
    /* Center content (icon + text) */
    gap: 8px;
    /* Space between icon and text */
    position: relative;
    /* For pseudo-element positioning */
    padding-left: 30px;
    /* Make space for icon */
}

/* Add icons using pseudo-elements */
.main-menu-buttons button::before {
    font-family: 'Arial';
    /* Or a dedicated icon font if available */
    font-weight: normal;
    font-size: 1.2em;
    /* Adjust icon size */
    position: absolute;
    /* Position icon within padding */
    left: 10px;
    /* Adjust icon position */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

/* Specific Icons */
#start-npc-battle::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.92 5L5 7l2 2 1-1 5.5 5.5-1.5 1.5 1 1 1.5-1.5L17 17l-1 1 2 2 2-2-1-1 2.5-2.5 1 1 1.5-1.5L19 9l-5.5 5.5-1-1L17 9l-2-2-4.5 4.5L5 6l1-1z' fill='%23c9a84c'/%3E%3Cpath d='M3 19l2 2 4-4-2-2z' fill='%23c9a84c' opacity='0.7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Sword */
#goto-custom-room::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z' fill='%23c9a84c'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Trophy for Custom Rooms */
#goto-deck-manager::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' fill='%23c9a84c' opacity='0.15'/%3E%3Crect x='4' y='2' width='16' height='20' rx='2' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Ctext x='12' y='14' text-anchor='middle' font-size='10' font-weight='bold' fill='%23c9a84c' font-family='serif'%3EA%3C/text%3E%3Ccircle cx='8' cy='6' r='1.5' fill='%23c9a84c' opacity='0.5'/%3E%3Ccircle cx='16' cy='18' r='1.5' fill='%23c9a84c' opacity='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Cards */
#goto-shop::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.16 14.26l.04-.12.94-1.7h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0020.04 4H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7.42c-.14 0-.25-.11-.25-.25z' fill='%23c9a84c'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Cart */
#goto-collection::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z' fill='none'/%3E%3Cpath d='M4 4h7v16H4c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1z' fill='%23c9a84c' opacity='0.3' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpath d='M13 4h7c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1h-7V4z' fill='%23c9a84c' opacity='0.15' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cline x1='12' y1='4' x2='12' y2='20' stroke='%23c9a84c' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Books */
#goto-settings::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 3.17a.49.49 0 00-.48-.41h-3.84a.49.49 0 00-.48.41l-.36 2.18c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.72 9.37a.49.49 0 00.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.18c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.18c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z' fill='%23c9a84c'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Gear */
#dev-card-generator::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z' fill='%23c9a84c'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.25em;
}

/* Wrench */
#goto-login::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23c9a84c'/%3E%3Cpath d='M12 14c-5 0-8 2.5-8 5v1h16v-1c0-2.5-3-5-8-5z' fill='%23c9a84c' opacity='0.7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.25em;
}

/* User */
/* Add more as needed */

.main-menu-left-panel h3 {
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.player-avatar-placeholder {
    width: 120px;
    height: 120px;
    background-color: var(--secondary-bg);
    border: 2px solid var(--zone-border);
    border-radius: 50%;
    /* Circular avatar */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 0.8em;
    position: relative;
    /* For potential image overlay */
}

.player-avatar-placeholder::after {
    content: "AVATAR";
    /* Placeholder text */
    position: absolute;
    color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
}

#main-menu-goto-account {
    margin-top: auto;
    /* Push account button to bottom */
}

.main-menu-right-panel h4 {
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid var(--zone-border);
    padding-bottom: 8px;
}

.news-placeholder {
    font-size: 0.85em;
    /* Slightly smaller */
    color: #bbb;
    /* Lighter grey */
    line-height: 1.4;
    text-align: left;
    /* Align news text left */
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Scroll if content exceeds panel */
}

.news-placeholder p {
    margin-bottom: 10px;
}

button:hover,
.button-like:hover {
    background: linear-gradient(180deg, var(--accent-color) 0%, #c8304d 100%);
    /* Accent gradient */
    color: var(--primary-bg);
    border-color: var(--text-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
    /* Slight lift */
}

button:active,
.button-like:active {
    transform: translateY(1px);
    /* Push down */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Style for potentially less important buttons */
button.secondary,
.button-like.secondary {
    background: linear-gradient(180deg, #4a4a6a 0%, #3a3a5a 100%);
    border-color: #777;
}

button.secondary:hover,
.button-like.secondary:hover {
    background: linear-gradient(180deg, #6a6a8a 0%, #5a5a7a 100%);
    border-color: #aaa;
    color: var(--text-light);
}

/* Inline link-like buttons (e.g., Login/Signup switch) */
button.link-style {
    background: none;
    border: none;
    color: var(--accent-color);
    text-decoration: underline;
    padding: 0 5px;
    font-size: 0.9em;
    /* Slightly smaller */
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
}

button.link-style:hover {
    color: var(--text-light);
}

/* --- Card Hover Effects --- */
.player-hand {
    pointer-events: none; /* Prevent container from interfering with card selection */
}

.player-hand .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    pointer-events: all; /* Allow individual cards to be selectable */
}

.player-hand .card:hover {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 150, 0.6);
    z-index: 200;
    cursor: grab;
}

.player-hand .card:hover~.card {
    transform: translateX(8px);
}

.player-hand .card:has(~ .card:hover) {
    transform: translateX(-8px);
}

    .field-zone .card:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(255, 255, 100, 0.5);
        /* Yellow glow for field */
        z-index: 100;
        /* Ensure hovered card is on top within its zone */
        transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }

    /* Prevent hover effect during drag */
    .card.dragging:hover {
        transform: none;
        /* Override hover transform */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        /* Reset to default or drag shadow */
    }

    /* Ensure non-hovered cards transition back smoothly */
    .player-hand .card,
    .field-zone .card {
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }

    /* --- Card Hover Effects --- */

    /* Hover effect for cards in hand */
    /* Consolidated hover rule - removed to prevent conflicts */

    /* Hover effect for cards on the field (player and opponent) */
    .field-zone .card:hover {
        transform: scale(1.03);
        /* Slightly enlarge */
        box-shadow: 0 0 10px rgba(100, 150, 255, 0.6);
        /* Add a subtle blue glow */
        z-index: 50;
        /* Ensure hovered card is on top within its zone */
        transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }

    /* Ensure transitions apply smoothly when hover ends */
    #player-hand .card,
    .field-zone .card {
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }

    /* Prevent hover effect on placeholder cards */
    .card.placeholder:hover {
        transform: none;
        box-shadow: none;
    }

    /* Prevent hover effect when targeting is active to avoid interference */
    body.targeting-active .card:hover {
        transform: none;
        box-shadow: none;
    }

    /* --- Phase Tracker Styling --- */
    /* --- Phase Tracker Styling (Revised) --- */
    /* Container within #battle-info */
    .turn-phase-tracker {
        /* Targeting the container div from HTML */
        display: flex;
        align-items: center;
        gap: 5px;
        /* Space between Turn, |, Phase */
        background-color: rgba(0, 0, 0, 0.3);
        /* Subtle background */
        padding: 4px 12px;
        border-radius: 15px;
        /* Pill shape */
        border: 1px solid var(--zone-border-empty);
        order: 0;
        /* Position it centrally if possible (depends on #battle-info layout) */
    }

    /* Style for "Turn: X" and "|" separator */
    .turn-phase-tracker>span:not(:has(#phase-tracker)) {
        color: #ccc;
        font-size: 0.9em;
    }

    /* Container for the actual phase steps (Draw, Gather, etc.) */
    #phase-tracker {
        display: flex;
        /* Arrange phases horizontally */
        align-items: center;
        gap: 6px;
        /* Space between phase steps */
        margin-left: 5px;
        /* Space after the '|' separator */
    }

    .phase-step {
        color: #8a9bb8;
        /* Dimmer inactive color */
        padding: 3px 8px;
        /* Smaller padding */
        margin: 0;
        /* Remove margin */
        font-size: 0.85em;
        /* Slightly smaller */
        border-radius: 10px;
        /* More rounded */
        border: 1px solid transparent;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
        cursor: default;
        position: relative;
        background-color: rgba(255, 255, 255, 0.05);
        /* Very subtle background */
    }

    /* Style for the currently active phase */
    .phase-step.active {
        background-color: var(--accent-color);
        /* Use accent color */
        color: #fff;
        /* White text */
        font-weight: bold;
        border-color: rgba(255, 255, 255, 0.5);
        /* Light border */
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
        /* Accent color glow */
    }

    /* Optional: Add separators if desired */
    /*
.phase-step:not(:last-child)::after {
    content: '>';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 0.8em;
}
*/

    /* Style for the next phase action prompt */
    #next-phase-action {
        flex-shrink: 0;
        /* Prevent the button from shrinking */
        min-width: 120px;
        /* Ensure it has a minimum width */
        text-align: center;
        /* Center text within the button */

        #next-phase-action.button-visible {
            display: inline-block !important;
            /* Force display when this class is present */
        }

        /* Style for visually disabling the button without hiding it */
        #next-phase-action.disabled-look {
            opacity: 0.5;
            cursor: not-allowed;
            filter: grayscale(80%);
            pointer-events: none;
            /* Prevent clicks */
            /* Reset hover/active effects */
            background: linear-gradient(180deg, var(--tertiary-bg) 0%, #0a2244 100%);
            border-color: var(--accent-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
            transform: none;
            animation: none;
            /* Remove pulsing */
        }

        #next-phase-action.disabled-look:hover {
            /* Ensure hover doesn't override disabled look */
            opacity: 0.5;
            filter: grayscale(80%);
            background: linear-gradient(180deg, var(--tertiary-bg) 0%, #0a2244 100%);
            border-color: var(--accent-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
            transform: none;
        }
    }

    #next-phase-action {
        display: inline-block;
        /* Display as an inline block element */
        padding: 6px 12px;
        /* Padding around the text */
        background-color: #3a7ab8;
        /* Default background color (adjust as needed) */
        color: white;
        /* Text color */
        border-radius: 5px;
        /* Rounded corners */
        margin-left: 15px;
        /* Space it from the phase tracker */
        font-size: 0.9em;
        /* Font size */
        cursor: pointer;
        /* Indicate it's clickable */
        /* Removed fixed positioning, size, z-index, and !important overrides */
    }

    /* --- Collapsible Window Styling --- */
    .collapsible-window {
        position: absolute;
        bottom: 10px;
        /* Adjust as needed */
        left: 10px;
        /* Adjust as needed */
        width: 300px;
        /* Adjust as needed */
        max-height: 200px;
        /* Max height when expanded */
        background-color: rgba(10, 20, 30, 0.85);
        border: 1px solid #2a3f5f;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Important for hiding content */
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        /* Smooth transition */
        z-index: 60;
        /* Ensure it's above lower area but below modals */
    }

    .window-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 8px;
        background-color: rgba(20, 40, 60, 0.9);
        color: #a0c0ff;
        font-size: 0.9em;
        font-weight: bold;
        cursor: pointer;
        /* Indicate clickable header */
        border-bottom: 1px solid #2a3f5f;
        flex-shrink: 0;
        /* Prevent header from shrinking */
    }

    .window-header span {
        flex-grow: 1;
        /* Allow title to take space */
    }

    .toggle-window-button {
        background: none;
        border: none;
        color: #a0c0ff;
        font-size: 1.2em;
        font-weight: bold;
        cursor: pointer;
        padding: 0 5px;
        line-height: 1;
    }

    .window-content {
        flex-grow: 1;
        overflow-y: auto;
        /* Scroll content if needed */
        padding: 5px;
        /* Padding inside the content area */
        /* Transition properties handled by container */
    }

    /* Minimized State */
    .collapsible-window.minimized {
        max-height: 28px;
        /* Height of the header only */
        padding-top: 0;
        padding-bottom: 0;
    }

    .collapsible-window.minimized .window-content {
        display: none;
        /* Hide content completely when minimized */
        /* Or use visibility: hidden; opacity: 0; if transition needed */
    }

    /* Position specific windows */
    #battle-log-container {
        left: 10px;
        bottom: 250px;
        /* Position above player lower area */
        width: 250px;
    }

    #chat-window-container {
        right: 10px;
        bottom: 250px;
        /* Position above player lower area */
        width: 250px;
    }


    /* --- Battle Log Styling --- */
    #battle-log-container {
        background-color: rgba(10, 20, 30, 0.85);
        /* Dark, slightly transparent background */
        border: 1px solid #2a3f5f;
        /* Dark blue border */
        border-radius: 6px;
        padding: 5px;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
        height: 150px;
        /* Or adjust as needed */
        display: flex;
        flex-direction: column;
    }

    #battle-log-header {
        /* Optional: If you have a header */
        color: #a0c0ff;
        font-size: 0.9em;
        padding-bottom: 4px;
        border-bottom: 1px solid #2a3f5f;
        margin-bottom: 4px;
        font-weight: bold;
    }

    #battle-log-content {
        flex-grow: 1;
        /* Take remaining space */
        overflow-y: visible;
        /* Let child handle scrolling */
        padding-right: 5px;
        /* Space for scrollbar */
        font-size: 0.85em;
        line-height: 1.4;
        color: #d0d0e0;
        /* Light grey text */
        display: flex;
        flex-direction: column;
        height: 150px;
    }

    /* Scrollbar styling (optional, browser-specific) */
    #battle-log-content::-webkit-scrollbar {
        width: 6px;
    }

    #battle-log-content::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    #battle-log-content::-webkit-scrollbar-thumb {
        background-color: #4a5f7f;
        border-radius: 3px;
    }

    #battle-log-content::-webkit-scrollbar-thumb:hover {
        background-color: #6a7f9f;
    }

    /* Add similar styles for Firefox if needed (scrollbar-width, scrollbar-color) */
    #battle-log-content {
        /* Firefox scrollbar styling */
        scrollbar-width: thin;
        scrollbar-color: #4a5f7f rgba(0, 0, 0, 0.2);
    }


    .log-entry {
        padding: 2px 4px;
        margin-bottom: 2px;
        border-bottom: 1px solid rgba(42, 63, 95, 0.3);
        /* Faint separator line */
        transition: background-color 0.2s ease;
    }

    .log-entry:last-child {
        border-bottom: none;
        /* No line after the last entry */
    }

    /* Optional: Style turn markers differently */
    .log-entry:contains('[T') {
        /* Basic check, might need JS class */
        font-weight: bold;
        color: #f0e0a0;
        /* Yellowish for turns */
        margin-top: 5px;

        /* --- Player & Opponent Info Area Styling --- */
        #player-info,
        #opponent-info {
            background-color: rgba(20, 30, 50, 0.8);
            /* Slightly different dark blue */
            border: 1px solid #3a5f8f;
            border-radius: 8px;
            padding: 10px 15px;
            margin: 10px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Center items horizontally */
            width: 180px;
            /* Fixed width, adjust as needed */
            position: relative;
            /* For potential absolute positioning inside */
            transition: box-shadow 0.3s ease;
        }

        #opponent-info {
            /* Potentially different styling for opponent if needed */
            background-color: rgba(50, 20, 30, 0.8);
            border-color: #8f3a5f;
        }

        /* Glow effect for the active player */
        #player-info.active-player,
        #opponent-info.active-player {
            box-shadow: 0 0 15px rgba(255, 220, 100, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);
            border-color: #ffd700;
        }


        #player-name,
        #opponent-name {
            font-size: 1.1em;
            font-weight: bold;
            color: #e0e8ff;
            margin-bottom: 8px;
            text-align: center;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .battle-stat {
            /* Common class for SP, Aether, Deck/Discard */
            display: flex;
            justify-content: space-between;
            /* Space out label and value */
            align-items: center;
            width: 100%;
            margin-bottom: 5px;
            font-size: 0.9em;
            color: #c0d0ff;
        }

        .battle-stat-label {
            font-weight: normal;
            color: #a0b0dd;
            margin-right: 5px;
        }

        .battle-stat-value {
            font-weight: bold;
            color: #ffffff;
        }

        /* Specific styling for SP container */
        .player-sp-display,
        .opponent-sp-display {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            /* For gauge positioning */
        }

        .sp-gauge-container {
            /* Container for the gauge bar */
            width: 12px;
            /* Swapped width and height */
            height: 100%;
            /* Assumes parent has height, adjust if needed */
            background-color: #1a253a;
            /* Dark background for gauge */
            border-radius: 6px 6px 0 0;
            /* Rounded top corners */
            overflow: hidden;
            /* Clip the gauge bar */
            /* margin-top: 4px; */
            /* Adjust margin if needed, e.g., margin-left */
            position: relative;
            border: 1px solid #3a5f8f;
        }

        .sp-gauge {
            /* The actual SP bar */
            width: 100%;
            /* Fill container width */
            /* height is set by JS */
            background: linear-gradient(to top, #ff4d4d, #ff8c4d);
            /* Red to Orange gradient, bottom to top */
            border-radius: 6px 6px 0 0;
            /* Match container rounding */
            transition: height 0.5s ease-out;
            /* Smooth transition on change */
            position: absolute;
            left: 0;
            bottom: 0;
            /* Stick to bottom */
        }

        #opponent-info .sp-gauge {
            /* Different color for opponent? */
            background: linear-gradient(to top, #4d4dff, #4d8cff);
            /* Blue gradient, bottom to top */
        }


        /* SP Change Animation */
        @keyframes sp-change-pulse {
            0% {
                box-shadow: 0 0 5px rgba(255, 100, 100, 0.5);
            }

            50% {
                box-shadow: 0 0 15px rgba(255, 100, 100, 0.8);
            }

            100% {
                box-shadow: 0 0 5px rgba(255, 100, 100, 0.5);
            }
        }

        /* --- Attack Animation Enhancements --- */
        .card.attacking-now {
            /* Brief highlight for the attacker */
            box-shadow: 0 0 15px 5px rgba(255, 220, 100, 0.9) !important;
            /* Use !important to override hover */
            transform: scale(1.05);
            transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
            z-index: 160;
            /* Ensure it's above others */
        }

        .card.defending-now {
            /* Brief shake for the defender */
            animation: shake 0.35s ease-in-out;
            /* Optional: Add a hit flash */
            /* box-shadow: 0 0 15px 5px rgba(255, 50, 50, 0.8) !important; */
            /* transition: box-shadow 0.1s ease-out; */
        }

        /* Player info area shake */
        #player-info.defending-now,
        #opponent-info.defending-now {
            animation: shake 0.35s ease-in-out;
        }


        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            20%,
            60% {
                transform: translateX(-4px);
            }

            40%,
            80% {
                transform: translateX(4px);
            }
        }

        .card-damaged {
            animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
        }


        .sp-gauge-container.sp-change {
            animation: sp-change-pulse 0.6s ease-out;
        }


        /* Aether Display Container */
        .player-aether-display,
        .opponent-aether-display {
            display: flex;
            align-items: center;
            justify-content: center;
            /* Center crystals */
            width: 100%;
            margin-top: 5px;
            min-height: 20px;
            /* Ensure space for crystals */
        }

        /* Deck/Discard Counts */
        .deck-discard-info {
            display: flex;
            justify-content: space-around;
            /* Space out deck and discard */
            width: 100%;
            margin-top: 8px;
            font-size: 0.8em;
            color: #a0b0dd;
        }

        .deck-discard-info>div {
            /* Style individual deck/discard counts */
            text-align: center;
        }


        background-color: rgba(70, 60, 30, 0.3);
        border-top: 1px solid #504020;
        border-bottom-color: #504020;
    }

    /* Optional: Hover effect */
    .log-entry:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

#next-phase-action {
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: 1px solid #5fa8e3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#next-phase-action:hover {
    background-color: #4a90e2;
    /* Lighter blue on hover */
}

#next-phase-action:active {
    background-color: #2a5a8a;
    /* Darker blue when clicked */
    transform: translateY(1px);
    box-shadow: none;
}

/* Rule removed - Visibility is now controlled by the .hidden class via JavaScript */
/* #next-phase-action:not(.clickable) { */
/*     display: none; */
/* } */

/* No extra closing brace needed here */


/* Specific override for the selected attacker during targeting */
body.targeting-active .card.selected-attacker:hover {
    transform: scale(1.03);
    /* Allow slight scale for selected */
    box-shadow: 0 0 10px rgba(100, 150, 255, 0.6);
}


/* Orphaned properties removed */


/* --- Battle Screen Specific Styles --- */
#screen-battle {
    /* Placeholder background for the battle screen (playmat area) - Replace URL */
    /* background-image: linear-gradient(rgba(15, 52, 96, 0.6), rgba(15, 52, 96, 0.8)), url('https://picsum.photos/seed/aether_playmat/1200/800'); */
    /* OPAQUE — do NOT let body wallpaper bleed through */
    background-color: #030308;
    /* battle-clean.css handles the actual battle background */
    background-size: cover;
    background-position: center;
    padding: 0;
    /* battle-clean.css handles all battle layout — zero padding here */
    display: flex;
    flex-direction: column;
    /* Let flexbox handle height within game-container */
}

#battle-info {
    background-color: rgba(15, 52, 96, 0.9);
    /* Darker info bar */
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 1em;
    display: flex;

    #battle-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Adjust as needed */
        padding: 5px 10px;
        background-color: rgba(0, 0, 0, 0.3);
        /* Example background */
        border-bottom: 1px solid var(--zone-border);
        flex-wrap: wrap;
        /* Allow items to wrap */
        gap: 10px;
        /* Add gap between wrapped items */
    }


    justify-content: space-around;
    /* Evenly space items */
    align-items: center;
    border: 1px solid var(--zone-border);
    flex-shrink: 0;
    /* Prevent shrinking */
    gap: 15px;
    /* Add gap between items */
    flex-wrap: wrap;
    /* Allow wrapping if needed */
}

.battle-stat {
    display: flex;
    /* flex-direction: column; /* Allow horizontal alignment for some */
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
    font-size: 0.9em;
    min-width: 100px;
    /* Give a bit more space */
    text-align: center;
    position: relative;
    /* Needed for pseudo-elements if used on label */
    gap: 8px;
    /* Add gap between label/value and gauge */
}

.battle-stat .stat-label {
    /* Add a class for the label if not present, or target directly */
    display: flex;
    /* Align icon and text */
    align-items: center;
    gap: 4px;
    /* Space between icon and text */
    margin-bottom: 3px;
    /* Space between label and meter */
}

/* --- Turn/Phase Info Styles --- */
.turn-phase-info {
    /* Override default battle-stat flex direction */
    flex-direction: row;
    /* Align turn and phase horizontally */
    gap: 15px;
    /* Space between turn and phase */
    background-color: rgba(0, 0, 0, 0.2);
    /* Subtle background */
    padding: 5px 15px;
    border-radius: 15px;
    border: 1px solid var(--zone-border);
    order: -2;
    /* Place at the very beginning */
    min-width: fit-content;
    /* Don't force min-width */
}

.turn-phase-info span {
    /* Style for Turn: X */
    font-size: 1.1em;
    color: #ccc;
}

.turn-phase-info .current-phase-display {
    /* Style for Phase: Name */
    font-size: 1.2em;
    font-weight: bold;
    color: var(--accent-color);
    /* Highlight current phase */
    text-shadow: 0 0 5px var(--accent-color);
}

/* Removed old #phase-tracker and .phase-indicator styles */

#battle-info {
    background-color: rgba(15, 52, 96, 0.9);
    /* Darker info bar */
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 1em;
    display: flex;
    justify-content: space-around;
    /* Evenly space items */
    align-items: center;
    border: 1px solid var(--zone-border);
    flex-shrink: 0;
    /* Prevent shrinking */
    gap: 15px;
    /* Add gap between items */
    flex-wrap: wrap;
    /* Allow wrapping if needed */
}

.battle-stat {
    display: flex;
    /* flex-direction: column; /* Let items wrap or align differently */
    align-items: center;
    /* Center items horizontally */
    justify-content: center;
    /* Center items horizontally */
    font-size: 0.9em;
    min-width: 100px;
    /* Give a bit more space */
    text-align: center;
    position: relative;
    /* Needed for pseudo-elements if used on label */
    gap: 8px;
    /* Add gap between label/value and gauge */
}

.battle-stat .stat-label {
    /* Add a class for the label if not present, or target directly */
    display: flex;
    /* Align icon and text */
    align-items: center;
    gap: 4px;
    /* Space between icon and text */
    /* margin-bottom: 3px; /* Removed, using gap now */
    font-weight: normal;
    /* Normal weight for label */
    color: #ccc;
    /* Lighter color for label */
}

.battle-stat .stat-value {
    /* Add a class for the value span */
    font-weight: bold;
    font-size: 1.2em;
    /* Slightly larger value */
    line-height: 1;
    /* Adjust line height */
}

/* Add Icons using pseudo-elements on the labels (requires labels to exist in HTML) */
/* Assuming HTML structure like: <div class="battle-stat player-sp-display"><span class="stat-label">Player SP</span><span class="stat-value" id="player-sp-value">30</span>...</div> */
.player-sp-display .stat-label::before,
/* Renamed lp to sp */
.opponent-sp-display .stat-label::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C8.13 3 5 6.13 5 10v8l1.5-1.5L8 18l1.5-1.5L11 18l1-1 1 1 1.5-1.5L16 18l1.5-1.5L19 18v-8c0-3.87-3.13-7-7-7z' fill='%23b388ff' opacity='0.4' stroke='%23b388ff' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23b388ff'/%3E%3Ccircle cx='14' cy='10' r='1.2' fill='%23b388ff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.2em;
    margin-right: 3px;
    /* Space after icon */
}

.player-aether-display .stat-label::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z' fill='%23c9a84c'/%3E%3Cpath d='M12 6l1.2 3.6L17 12l-3.8 1.4L12 17l-1.2-3.6L7 12l3.8-1.4z' fill='%23ffd54f' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 3px;
    /* Space after icon */
}

/* Removed old horizontal meter bar styles */

/* --- Value Change Animation --- */
@keyframes value-change-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.value-changed {
    animation: value-change-pulse 0.4s ease-in-out;
    /* Ensure it stays on top during animation if needed */
    position: relative;
    /* May not be needed if parent is already positioned */
    z-index: 1;
    /* May not be needed */
    display: inline-block;
    /* Prevent animation affecting layout */
}

/* --- New Vertical Spirit Gauge Styles --- */
.spirit-gauge-bg {
    width: 18px;
    /* Width of the gauge */
    height: 60px;
    /* Height of the gauge */
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--zone-border);
    border-radius: 9px;
    /* Rounded ends */
    position: relative;
    /* For positioning the fill */
    overflow: hidden;
    /* Clip the fill and particles */
    margin-top: 5px;
    /* Space below label/value */
}

.spirit-gauge-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Default to full */
    background: linear-gradient(to top, var(--sp-color), #ff8a8a);
    /* Vertical gradient */
    border-radius: 8px;
    /* Match bg radius */
    transition: height 0.4s ease-out;
    /* Animate height changes */
    overflow: hidden;
    /* Ensure particles stay within the fill area visually */
    display: flex;
    /* For particle container */
    align-items: flex-end;
    /* Particles at the top of the fill */
}

.spirit-particles {
    position: absolute;
    bottom: 100%;
    /* Start just above the fill */
    left: 0;
    width: 100%;
    height: 100%;
    /* Particles occupy the fill area */
    pointer-events: none;
    /* Don't block clicks */
    /* Particle styles will be added via pseudo-elements */
}

/* Define particle animation */
@keyframes spiritFlowUp {
    0% {
        transform: translateY(0);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-60px);
        /* Move up gauge height */
        opacity: 0;
    }
}

/* Add particles using pseudo-elements (example with 3 particles) */
.spirit-gauge-fill::before,
.spirit-gauge-fill::after,
.spirit-particles::before {
    /* Using the inner div's pseudo for a third */
    content: '';
    position: absolute;
    bottom: 5px;
    /* Start near bottom of fill */
    left: 50%;
    width: 3px;
    height: 3px;
    background-color: rgba(255, 200, 200, 0.8);
    /* Light SP color */
    border-radius: 50%;
    opacity: 0;
    animation: spiritFlowUp 1.5s infinite ease-out;
}

/* Stagger the animations */
.spirit-gauge-fill::after {
    left: 30%;
    animation-delay: 0.5s;
    width: 2px;
    height: 2px;
}

.spirit-particles::before {
    /* Using the inner div */
    left: 70%;
    animation-delay: 1s;
    width: 4px;
    height: 4px;
}

/* Trigger animation visibility (can be controlled by JS later if needed) */
/* For now, always visible when gauge has height */
.spirit-gauge-fill:not([style*="height: 0%"])::before,
.spirit-gauge-fill:not([style*="height: 0%"])::after,
.spirit-gauge-fill:not([style*="height: 0%"]) .spirit-particles::before {
    opacity: 0.7;
    /* Make visible when gauge isn't empty */
}

/* --- Card Draw Animation --- */
@keyframes cardDrawPlayer {
    0% {
        /* Start at deck position (approximate, JS might refine) */
        transform: translate(-35vw, 10vh) scale(0.5) rotate(-15deg);
        opacity: 0.8;
        z-index: 150;
        /* Ensure it's on top */
    }

    100% {
        /* End in hand position (approximate) */
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
        z-index: auto;
    }
}

@keyframes cardDrawOpponent {
    0% {
        /* Start at opponent deck position (approximate) */
        transform: translate(35vw, -60vh) scale(0.5) rotate(15deg);
        opacity: 0.8;
        z-index: 150;
    }

    100% {
        /* End off-screen or at an opponent hand indicator */
        transform: translate(35vw, -100vh) scale(0.5) rotate(15deg);
        opacity: 0;
        z-index: auto;
    }
}

/* Placeholder element for animation */
.card-draw-animation {
    position: fixed;
    /* Use fixed to position relative to viewport */
    /* Style like a card back or a simple placeholder */
    width: 150px;
    height: 210px;
    background-color: var(--tertiary-bg);
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    /* Don't interfere */
    opacity: 0;
    /* Start hidden */
}

.card-draw-animation.player-draw {
    animation: cardDrawPlayer 0.7s ease-out forwards;
}

.card-draw-animation.opponent-draw {
    animation: cardDrawOpponent 0.7s ease-out forwards;
}


/* Style for Aether bar (remains horizontal for now) */

/* Style for Aether bar (remains horizontal for now) */
.aether-bar-bg {
    /* Renamed from meter-bar-bg */
    width: 100%;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    border: 1px solid #000;
    overflow: hidden;
    /* Clip the inner bar */
    margin-top: 3px;
    /* Space below label/value */
}

.aether-bar {
    height: 100%;
    width: 100%;
    /* Default to full */
    border-radius: 4px;
    transition: width 0.3s ease-out;
    /* Animate changes */
    background: linear-gradient(to right, var(--aether-color), #7fffd4);
}

/* Specific color overrides for values */

/* --- Spell/Effect Animations --- */
.spell-animation {
    position: absolute;
    border-radius: 50%;
    z-index: 1000;
    /* Ensure visibility */
    pointer-events: none;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 1;
}

.spell-fireball {
    width: 25px;
    height: 25px;
    background-color: orange;
    border: 2px solid darkred;
    box-shadow: 0 0 15px 5px rgba(255, 69, 0, 0.7);
}

.spell-impact {
    /* Add a brief visual effect on the target */
    animation: spell-impact-effect 0.3s ease-out;
}

@keyframes spell-impact-effect {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

.player-sp-display .stat-value,
.opponent-sp-display .stat-value {
    color: var(--sp-color);
}

/* Renamed lp to sp */
.player-aether-display .stat-value {
    color: var(--aether-color);
}

.playmat-zone {
    border: 2px solid var(--zone-border);
    min-height: 200px;
    /* Taller zones */
    margin-bottom: 10px;
    padding: 15px;
    background-color: var(--zone-bg);
    border-radius: 8px;
    /* overflow: hidden; */
    /* Removed to allow enlarged card hover */
    flex-grow: 1;
    /* Allow fields to take up space */
}

.field-container {
    /* New container for the zones */
    display: flex;
    justify-content: space-around;
    /* Distribute zones */
    align-items: stretch;
    /* Make zones fill height */
    width: 100%;
    height: 100%;
    gap: 10px;
    /* Gap between zones */
}

.field-zone {
    /* Modern gradient style for empty zones */
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.05);
    /* Subtle background for empty */
    border-radius: 10px;
    /* Slightly more rounded */
    flex-basis: 32%;
    /* Roughly divide into thirds */
    display: flex;
    flex-direction: row;
    /* Align cards horizontally within zone */
    justify-content: center;
    /* Center cards horizontally */
    align-items: center;
    /* Center cards vertically */
    gap: 10px;
    /* Gap between cards in a zone */
    padding: 10px;
    overflow-x: auto;
    /* Allow horizontal scroll within zone if needed */
    min-height: 100%;
    /* Ensure it takes up container height */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    /* Subtle inner shadow */
    transition: all 0.3s ease-in-out;
    /* Smoother transition */
    position: relative;
    /* Needed for pseudo-element */
    border-style: dashed;
    border-width: 2px;

    /* Thematic energy field effect */
    background: radial-gradient(circle,
            rgba(20, 50, 100, 0.15) 0%,
            rgba(20, 40, 80, 0.1) 50%,
            rgba(10, 30, 60, 0.05) 100%);
    overflow: hidden;
}

/* Add subtle pulse animation to field zones */
.field-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle,
            rgba(70, 130, 200, 0.1) 0%,
            rgba(30, 90, 150, 0.05) 40%,
            transparent 70%);
    opacity: 0.5;
    z-index: -1;
    animation: zonePulse 4s infinite alternate ease-in-out;
}

@keyframes zonePulse {
    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }

    100% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Style for zones containing cards: solid border */
.field-zone:not(:empty) {
    border-style: solid;
    border-color: var(--zone-border);
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), var(--zone-bg);
    /* Restore original background */
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(70, 130, 200, 0.15);
    /* Enhanced shadow with outer glow */
}

/* Highlight drop target zones */
.drop-target-zone.over {
    background-color: rgba(233, 69, 96, 0.3);
    /* Slightly stronger highlight */
    border-color: var(--accent-color);
    /* Use accent color for border */
    box-shadow: inset 0 0 15px rgba(233, 69, 96, 0.4);
    /* Add inner glow */
}

/* Empty Zone Indicator */
/* Remove the '+ Summon Here +' text, keep positioning for potential future use */
.field-zone:empty::before {
    content: '';
    /* No text */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Don't interfere with drops */
    /* Removed text-specific styles: color, font-size, font-weight, font-style, white-space */
}

/* Ensure opponent field styles exist */
#opponent-field {
    order: 1;
    /* Place above player */
    /* Add a subtle tint to differentiate opponent's side */
    background-color: rgba(0, 0, 0, 0.05);
    /* Very subtle dark overlay */
    border-radius: 8px;
    /* Match zone radius */
    padding: 5px;
    /* Small padding around the opponent zones */
    margin-bottom: 15px;
    /* Add space below opponent field */
}


#player-field {
    order: 2;
    /* Place below opponent */
    margin-top: 15px;
    /* Add space above player field */
}

/* Duplicate #opponent-field block removed */
.hand-zone {
    border: 2px solid rgba(233, 69, 96, 0.6);
    min-height: 220px;
    /* Increased height for more hover room */
    padding: 10px;
    /* Enhanced gradient for hand with subtle glow */
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.85), rgba(22, 33, 62, 0.95));
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    /* gap: 10px; /* Replaced by negative margin for overlap */
    justify-content: center;
    /* Center the cards */
    align-items: flex-end;
    /* Align cards to bottom for arc effect */
    padding-bottom: 10px;
    /* Add some bottom padding */
    overflow-x: auto;
    /* Allow horizontal scroll */
    overflow-y: visible;
    /* Explicitly allow vertical overflow for hover effect */
    order: 3;
    /* Place at bottom */
    margin-top: 10px;
    flex-shrink: 0;
    /* Prevent shrinking */
    box-shadow: 0 -2px 10px rgba(233, 69, 96, 0.2);
    /* Subtle glow upwards */
    transition: box-shadow 0.3s ease-in-out;
}


/* --- Player Lower Area (Hand, Deck, Discard) --- */
.player-lower-area {
    display: flex;
    justify-content: space-between;
    /* Space out deck, hand, discard */
    align-items: flex-end;
    /* Align items to the bottom */
    margin-top: 15px;
    /* Increased space above lower area */
    order: 3;
    /* Place at bottom */
    gap: 15px;
    flex-shrink: 0;
}

/* Make hand zone take up most space */
.player-lower-area .hand-zone {
    flex-grow: 1;
    margin-top: 0;
    /* Remove margin added previously */
    order: 2;
    /* Hand in the middle */
    min-width: 400px;
    /* Ensure hand has decent width */
}

/* Add overlap and slight vertical offset for fanned effect */
.hand-zone .card {
    margin-left: -50px;
    /* Overlap cards */
    transition: transform 0.2s ease-out, margin-left 0.2s ease-out;
    /* Add margin transition */
    position: relative;
    /* Needed for z-index */
}

.hand-zone .card:first-child {
    margin-left: 0;
    /* No negative margin for the first card */
}

/* Lift card slightly on hover (adjust hover style) */
.hand-zone .card:hover {
    transform: scale(1.1) translateY(-20px);
    /* Moderate lift and scale */
    z-index: 100;
    /* REMOVED: margin-left: -50px; - was causing layout shift */
    cursor: grab;
}

/* --- Deck, Discard, and Hand Counter Zones --- */
.deck-zone,
.discard-zone,
.hand-counter {
    width: 130px;
    /* Slightly wider than a card */
    height: 170px;
    /* Same height as a card */
    border: 2px dashed var(--zone-border);
    border-radius: 10px;
    background-color: rgba(15, 52, 96, 0.5);
    /* Semi-transparent */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Space out label, visual, count */
    padding: 8px;
    box-sizing: border-box;
    position: relative;
    /* For positioning count/label */
    color: rgba(224, 224, 224, 0.7);
    /* Dimmer text */
    flex-shrink: 0;
}

.deck-zone {
    order: 1;
    /* Deck on the left */
}

.discard-zone {
    order: 3;
    /* Discard on the right */
}

/* --- Hand Counter Styling --- */
.hand-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 52, 96, 0.5);
    padding: 8px;
    order: 2;
    position: relative;
    color: rgba(224, 224, 224, 0.7);
}

.hand-counter .zone-label {
    font-size: 0.9em;
    opacity: 0.8;
}

.hand-counter .card-count {
    font-size: 1.5em;
    font-weight: bold;
    color: #e0e0e0;
    text-align: center;
    margin: 5px 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hand-counter .hand-icon {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hand-counter .hand-icon::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 80px;
    background: linear-gradient(135deg, #304878, #1a2c4d);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transform: rotate(-5deg);
}

.hand-counter .hand-icon::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 80px;
    background: linear-gradient(135deg, #304878, #1a2c4d);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transform: rotate(5deg);
}

/* Style for playable cards in hand */
.hand-zone .card.playable {
    /* Add a subtle glow or border change */
    box-shadow: 0 0 12px rgba(64, 224, 208, 0.8),
        /* Aether color glow */
        inset 0 0 4px rgba(64, 224, 208, 0.5),
        2px 2px 5px rgba(0, 0, 0, 0.5);
    /* Keep base shadow */
    border-color: var(--aether-color);
}

/* Ensure hover effect overrides playable glow if needed, or combines */
.hand-zone .card.playable:hover {
    transform: scale(1.75) translateY(-40px);
    /* Keep hover transform */
    z-index: 100;
    margin-left: -50px;
    /* Combine shadows or let hover shadow dominate */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7), 0 0 15px var(--aether-color);
    /* Hover shadow + subtle playable glow */
}


.zone-label {
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 3px;
    z-index: 2;
}

.card-count {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 1.1em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-light);
    padding: 2px 5px;
    border-radius: 50%;
    min-width: 20px;
    text-align: center;
    z-index: 2;
}

/* Placeholder visual for deck */
.card-back {
    width: 80%;
    height: 80%;
    background-color: var(--tertiary-bg);
    /* Darker blue */
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    margin-top: 20px;
    /* Push below label */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--accent-color);
    opacity: 0.6;
}

.card-back::after {
    content: '♦';
    /* Placeholder symbol */
}

/* Placeholder visual for discard */
.discard-pile-top {
    width: 80%;
    height: 80%;
    background-color: rgba(42, 42, 74, 0.5);
    /* Dim card bg */
    border: 1px solid var(--card-border);
    border-radius: 8px;
    margin-top: 20px;
    /* Push below label */
    /* We'll potentially show the actual top card here later */
}

/* --- Opponent Deck/Discard Positioning --- */
.opponent-deck-discard {
    position: absolute;
    top: 60px;
    /* Adjust as needed below battle info */
    right: 30px;
    /* Align to the right */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
    /* Keep above playmat */
}

.opponent-deck-discard .deck-zone,
.opponent-deck-discard .discard-zone {
    width: 90px;
    /* Smaller opponent zones */
    height: 125px;
    border-style: solid;
}

.opponent-deck-discard .card-back,
.opponent-deck-discard .discard-pile-top {
    margin-top: 15px;
    height: 75%;
}

.opponent-deck-discard .card-count {
    font-size: 0.9em;
    bottom: 3px;
    right: 5px;
}

.opponent-deck-discard .zone-label {
    font-size: 0.7em;
}

/* Define pulse animation */
@keyframes pulseAnimation {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(233, 69, 96, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

#end-turn-button {
    background: linear-gradient(180deg, var(--accent-color) 0%, #c8304d 100%);
    /* Use accent gradient */
    color: var(--text-light);
    /* Light text for contrast */
    font-weight: bold;
    font-size: 1.1em;
    /* Slightly larger font */
    position: absolute;
    /* Position relative to screen-battle */
    bottom: 180px;
    /* Fine-tune position */
    right: 30px;
    z-index: 20;
    /* Ensure it's above hand */
    padding: 12px 25px;
    /* More padding */
    border: 2px solid #ff8a8a;
    /* Lighter accent border */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease-in-out;
    /* Keep existing transitions */
}

#end-turn-button:hover {
    background: linear-gradient(180deg, #ff8a8a 0%, var(--accent-color) 100%);
    /* Invert gradient on hover */
    color: var(--primary-bg);
    border-color: var(--text-light);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
}

#end-turn-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Style for when it's the player's turn and the button should pulse */
#end-turn-button.player-turn-active {
    animation: pulseAnimation 2s infinite;
}

/* --- Card Styling --- */
.card {
    border: 2px solid var(--card-border);
    /* Default border, will be overridden by rarity */
    border-radius: 12px;
    width: 150px;
    /* Width */
    height: 210px;
    /* Height */
    background: linear-gradient(145deg, var(--secondary-bg), var(--card-bg));
    /* Subtle gradient */
    color: var(--text-light);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.1);
    /* Enhanced outer shadow + inner highlight */
    cursor: grab;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Restore overflow: hidden on the main card */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, filter 0.3s ease-in-out, opacity 0.4s ease-out, border-color 0.3s ease-out;
    /* Added border-color transition */
    flex-shrink: 0;
    font-size: 0.85em;
    /* Base font */
    transform-style: preserve-3d;
    /* Add 3D effect */
    perspective: 1000px;
    /* Add perspective for 3D effect */
}

/* --- Collection Card Additions --- */
.card-owned-count {
    position: absolute;
    /* Re-enable absolute positioning */
    bottom: 5px;
    /* Position from bottom of image area */
    right: 5px;
    /* Position from right of image area */
    /* margin-left: 5px; Removed */
    /* flex-shrink: 0; Removed */
    background-color: rgba(0, 0, 0, 0.85);
    /* Darker background for better contrast */
    color: #fff;
    font-size: 0.9em;
    /* Increased */
    font-weight: bold;
    padding: 1px 5px 1px 16px;
    /* Slightly smaller padding */
    border-radius: 8px 3px 3px 8px;
    /* Asymmetric rounding */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Brighter border */
    z-index: 2;
    /* Ensure it's above image area */
}

/* Removed book emoji as it cluttered the interface and didn't fit well */

.card.has-duplicates {
    /* Enhanced glow + subtle border pulse */
    border-color: rgba(79, 195, 247, 0.8);
    /* Light blue border */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),
        inset 0 0 3px rgba(255, 255, 255, 0.1),
        0 0 10px rgba(79, 195, 247, 0.7),
        /* Light blue glow */
        0 0 4px rgba(255, 255, 255, 0.5);
    /* Inner white glow */
    /* Optional: Add a subtle animation */
    /* animation: duplicatePulse 2s infinite ease-in-out; */
}

/* Optional pulse animation for duplicates (commented out) */

/* Removed .sell-card-button styles (lines 1081-1111) */

/* Style for cards that have attacked */
.card.has-attacked {
    filter: grayscale(70%) opacity(70%);
    cursor: not-allowed !important;
    /* Indicate it cannot be selected for attack */
}

/* --- Card Attack Animation --- */
/* --- Card Attack Animations --- */
/* Player Attacking (Upwards) */
@keyframes cardAttackAnimationUp {
    0% {
        transform: translate(0, 0) scale(1);
        z-index: 50;
        /* Bring attacker way to front */
    }

    50% {
        transform: translate(0, -40px) scale(1.1);
        /* Move up more, scale slightly more */
        z-index: 50;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
        /* Enhance shadow */
    }

    100% {
        transform: translate(0, 0) scale(1);
        z-index: auto;
        /* Reset z-index */
    }
}

/* Opponent Attacking (Downwards) */
@keyframes cardAttackAnimationDown {
    0% {
        transform: translate(0, 0) scale(1);
        z-index: 50;
        /* Bring attacker way to front */
    }

    50% {
        transform: translate(0, 40px) scale(1.1);
        /* Move down */
        z-index: 50;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
        /* Enhance shadow */
    }

    100% {
        transform: translate(0, 0) scale(1);
        z-index: auto;
        /* Reset z-index */
    }
}

/* Apply animation to the card when attacking */
/* Apply specific animation based on parent */
#player-field .card.card-attacking {
    animation: cardAttackAnimationUp 0.6s ease-in-out forwards;
}

#opponent-field .card.card-attacking {
    animation: cardAttackAnimationDown 0.6s ease-in-out forwards;
}

/* --- Impact Effect Animation --- */
@keyframes impactEffect {
    0% {
        transform: scale(0.5);
        opacity: 1;
        border-width: 4px;
        /* Start thicker */
    }

    100% {
        transform: scale(1.5);
        /* Expand */
        opacity: 0;
        border-width: 1px;
        /* Thin out */
    }
}

.impact-effect {
    position: absolute;
    /* Position relative to target */
    width: 40px;
    height: 40px;
    border: 4px solid var(--sp-color);
    /* Use SP color for damage */
    border-radius: 50%;
    top: 50%;
    /* Center on target */
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    /* Initial state */
    opacity: 0;
    /* Start hidden */
    pointer-events: none;
    /* Don't block clicks */
    z-index: 60;
    /* Above attacking card */
    animation: impactEffect 0.3s ease-out forwards;
}

/* --- Card Destruction Animation --- */
@keyframes cardDestroyAnimation {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.05) rotate(3deg);
        /* Slight shake/enlarge */
    }

    100% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
        /* Shrink and fade out */
    }
}

/* Apply destruction animation */
.card.card-destroyed {
    animation: cardDestroyAnimation 0.5s ease-in-out forwards;
    pointer-events: none;
    /* Prevent interaction during destruction */
}

/* --- Card Sell Animation (Improved Dissolve/Poof) --- */
@keyframes cardSellAnimation {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    30% {
        transform: scale(1.05) rotate(2deg);
        /* Slight wobble */
        filter: brightness(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg) translateY(20px);
        /* Shrink, fade, drop slightly */
        filter: brightness(0.5) blur(3px);
        /* Blur out */
    }

    /* Note: True particle effects require JS/Canvas */
}

/* Apply sell animation */
.card.card-selling {
    animation: cardSellAnimation 0.6s ease-out forwards;
    pointer-events: none;
    /* Prevent interaction during animation */
    z-index: 5;
    /* Ensure it's visible during animation if overlapping */
}

/* --- Card Played Animation --- */
@keyframes cardPlayedAnimation {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    50% {
        transform: scale(1.05);
        /* Slightly larger */
        opacity: 1;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 8px var(--aether-color);
        /* White and Aether glow */
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.1);
        /* Return to normal shadow */
    }
}

/* Apply played animation */
.card.card-played {
    animation: cardPlayedAnimation 0.5s ease-out forwards;
}


/* Define pulsing animation with 3D effect */
@keyframes cardHoverPulse {
    0% {
        transform: scale(1) translateY(0) rotateX(0deg);
    }

    50% {
        transform: scale(1.80) translateY(-25px) rotateX(8deg);
    }

    /* Slightly larger than target with rotation */
    100% {
        transform: scale(1.75) translateY(-20px) rotateX(5deg);
    }

    /* Settle at target */
}

/* Apply pulsing animation on hover with improved 3D effect */
.hand-zone .card:hover,
.field-container .card:hover,
#deck-list .card:hover,
/* Add Deck Manager deck list */
#collection-list-deck .card:hover,
/* Add Deck Manager collection list */
#collection-list-main .card:hover {
    /* Add Main Collection list */
    /* Apply the final state directly for immediate feedback */
    transform: scale(1.75) translateY(-20px) rotateX(5deg);
    /* Add slight 3D rotation */
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.7);
    /* Stronger shadow */
    z-index: 100;
    /* Ensure it's above other cards/UI elements */
    cursor: pointer;
    /* Indicate interactivity */
    /* Add the animation */
    animation: cardHoverPulse 0.4s ease-out forwards;
    /* Apply animation */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 7px;
    /* Increased header padding */
    background-color: rgba(0, 0, 0, 0.4);
    /* Slightly darker for better contrast */
    border-bottom: 1px solid var(--card-border);
    border-top-left-radius: 10px;
    /* Match card border radius */
    border-top-right-radius: 10px;
    /* overflow: hidden; Remove from header, parent clips */
}

.card-cost {
    /* position: static; Remove absolute positioning */
    background-color: var(--aether-color);
    color: var(--primary-bg);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1em;
    /* Make cost slightly larger */
    border: 1px solid rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.card-name {
    font-weight: bold;
    font-size: 0.95em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    /* Allow name to take space */
    margin: 0 5px;
    /* Space around name */
    color: #fff;
    /* Brighter name */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.card-rarity {
    /* Rarity Gem */
    width: 14px;
    /* Slightly larger */
    height: 14px;
    border-radius: 3px;
    /* More gem-like shape */
    background-color: grey;
    /* Default common */
    border: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.3);
    /* Inner highlight */
    flex-shrink: 0;
}

/* Example Rarity Colors */
/* Rarity Gem Colors */
.rarity-common .card-rarity {
    background-color: #9e9e9e;
}

/* Grey */
.rarity-uncommon .card-rarity {
    background-color: #66bb6a;
}

/* Green */
.rarity-rare .card-rarity {
    background-color: #42a5f5;
}

/* Blue */
.rarity-legendary .card-rarity {
    background-color: #ab47bc;
}

/* Purple */
.rarity-token .card-rarity {
    background-color: #bdbdbd;
}

/* Lighter grey for tokens */

/* --- Damage Popup --- */
@keyframes damagePopupAnimation {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.2);
        /* Move up and slightly enlarge */
    }
}

.damage-popup {
    position: absolute;
    top: 40%;
    /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%);
    /* Center horizontally */
    font-size: 1.8em;
    /* Larger font */
    font-weight: bold;
    color: #ff4d4d;
    /* Bright red */
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 5px #000;
    /* Black outline */
    pointer-events: none;
    /* Don't interfere with clicks */
    z-index: 15;
    /* Above cards */
    animation: damagePopupAnimation 0.8s ease-out forwards;
}

/* --- Heal Popup --- */
@keyframes healPopupAnimation {

    /* Can reuse damage animation or create a new one */
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.2);
    }
}

.heal-popup {
    position: absolute;
    top: 40%;
    /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%);
    /* Center horizontally */
    font-size: 1.8em;
    /* Larger font */
    font-weight: bold;
    color: #4caf50;
    /* Green for healing */
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 5px #000;
    /* Black outline */
    pointer-events: none;
    /* Don't interfere with clicks */
    z-index: 15;
    /* Above cards */
    animation: healPopupAnimation 0.8s ease-out forwards;
    /* Use same/similar animation */
}

.rarity-legendary .card-rarity {
    background-color: #ffca28;
}

/* Gold */

/* Enhanced Rarity Border Colors with glow effects */
.card.rarity-common {
    border-color: #9e9e9e;
}

.card.rarity-uncommon {
    border-color: #66bb6a;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 5px rgba(102, 187, 106, 0.3);
}

.card.rarity-rare {
    border-color: #42a5f5;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 8px rgba(66, 165, 245, 0.4);
}

.card.rarity-legendary {
    border-color: #ffca28;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 202, 40, 0.5);
}



.card-image-area {
    position: relative;
    /* Set as positioning context for owned count */
    height: 100px;
    /* Increased image area height */
    /* Subtle diagonal gradient for when no image is available */
    background: linear-gradient(135deg, rgba(83, 83, 122, 0.5) 25%, transparent 25%, transparent 50%, rgba(83, 83, 122, 0.5) 50%, rgba(83, 83, 122, 0.5) 75%, transparent 75%, transparent 100%),
        linear-gradient(45deg, #4a4a6a, #3a3a5a);
    /* Base gradient */
    background-size: 10px 10px, 100% 100%;
    /* Pattern size, base size */
    margin: 4px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: rgba(224, 224, 224, 0.3);
    /* Lighter, more subtle placeholder text */
    overflow: hidden;
    text-align: center;
    background-size: cover;
    /* For actual images */
    background-position: center;
    /* For actual images */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    /* Add inner shadow for depth */
}

/* Enhanced placeholder icon for card images */
.card-image-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* More detailed SVG placeholder with card game theme */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,20 L80,20 L80,80 L20,80 Z' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3Cpath d='M50,30 A20,20 0 0,1 70,50 A20,20 0 0,1 50,70 A20,20 0 0,1 30,50 A20,20 0 0,1 50,30 Z' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2'/%3E%3Cpath d='M35,35 L65,65 M35,65 L65,35' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    /* Larger icon */
    opacity: 0.7;
    /* More visible */
    z-index: 0;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
    /* Add subtle shadow to the icon */
}

/* --- Pack Opening Overlay Style --- */

/* Container for the revealed cards */
.pack-card-display-area-overlay {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* Responsive grid */
    gap: 25px;
    /* Spacing between cards */
    padding: 30px;
    /* Padding around the grid */
    justify-items: center;
    /* Center cards horizontally in their grid cell */
    align-items: center;
    /* Center cards vertically */
    width: 100%;
    max-width: 800px;
    /* Limit max width of the grid */
    margin: 20px auto;
    /* Center the grid container */
    position: relative;
    /* Needed for banner positioning */
}

/* Individual revealed card styling */
.pack-revealed-card-overlay {
    width: 120px;
    /* Consistent card width */
    aspect-ratio: 2.5 / 3.5;
    /* Standard card aspect ratio */
    position: relative;
    /* Needed for the "New!" indicator */
    transition: transform 0.2s ease-out;
    /* Smooth hover effect */
    cursor: default;
    /* Default cursor, no magnification */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pack-revealed-card-overlay:hover {
    transform: scale(1.05);
    /* Slight scale on hover */
    z-index: 5;
    /* Bring hovered card to front */
}

/* "New!" Indicator Styling is handled later in the file using ::before */
/* (Rule removed to prevent duplication) */

@keyframes newIndicatorPulse {
    from {
        opacity: 0.8;
        transform: rotate(5deg) scale(0.95);
    }

    to {
        opacity: 1;
        transform: rotate(5deg) scale(1.05);
    }
}


/* Enhanced Pulsing Animation for Face-Down Cards */
@keyframes subtlePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }
}

.card.pulsing {
    /* Apply to the card element itself */
    animation: subtlePulse 2s infinite ease-in-out;
}

/* Placeholder Styles for Other Effects */
.pack-visual-overlay {
    /* Placeholder for pack art */
    /* Style the pack visual before tearing */
    width: 200px;
    height: 300px;
    background-color: #555;
    border: 2px solid #888;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    cursor: pointer;
    transition: transform 0.5s ease;
    /* For tear effect */
}

.pack-visual-overlay.tearing {
    /* CSS animation for tearing - e.g., scale down, rotate, fade out */
    animation: tearAnimation 0.5s forwards;
    /* border: 1px dashed red; */
    /* Placeholder indicator removed */
}

@keyframes tearAnimation {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.1) rotate(30deg);
        opacity: 0;
    }
}

/* Improved Holo Effect for Rare+ Cards */
.card.holo-effect {
    position: relative;
    /* Needed for pseudo-element */
    overflow: hidden;
    /* Keep effect contained */
}

.card.holo-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    /* Start further left, cover full height */
    width: 200%;
    height: 100%;
    /* Wide enough to sweep across */
    /* More colorful rainbow gradient */
    background: linear-gradient(110deg,
            /* Angle of the shine */
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 0, 255, 0.35) 35%,
            /* Magenta */
            rgba(0, 255, 255, 0.35) 50%,
            /* Cyan */
            rgba(255, 255, 0, 0.35) 65%,
            /* Yellow */
            rgba(255, 255, 255, 0) 80%);
    background-size: 100% 100%;
    /* Ensure gradient covers the element */
    transform: skewX(-25deg);
    /* Skew the shine for a dynamic look */
    animation: holoShineImproved 4s infinite linear;
    /* Slower, smoother animation */
    pointer-events: none;
    /* Allow interaction with card */
    z-index: 1;
    /* Above card background/image, below text/stats */
    opacity: 0.65;
    /* Adjust visibility */
    mix-blend-mode: overlay;
    /* Blend effect with card art */
}

@keyframes holoShineImproved {
    0% {
        left: -120%;
        /* Start further off-screen left */
        opacity: 0.5;
    }

    50% {
        left: 100%;
        /* Move fully across to the right */
        opacity: 0.75;
        /* Slightly brighter mid-sweep */
    }

    100% {
        left: -120%;
        /* Loop back to start */
        opacity: 0.5;
    }
}


.pack-opened-banner {
    /* Style the "Pack Opened!" banner */
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    animation: fadeInDown 0.5s ease-out;
    /* Simple fade-in animation */
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.pack-opening-area.reveal-bg-rare {
    /* Placeholder background for rare+ packs */
    background: radial-gradient(circle, rgba(60, 60, 180, 0.5) 0%, rgba(22, 33, 62, 0.85) 70%);
}

.pack-opening-area.reveal-bg-legendary {
    /* Placeholder background for legendary packs */
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(22, 33, 62, 0.85) 70%);
}

/* Controls container */
.pack-controls-overlay {
    text-align: center;
    margin-top: 30px;
    padding-bottom: 20px;
    /* Add padding at the bottom */
}

/* Okay button specific styling if needed */
.pack-okay-button-overlay {
    padding: 12px 30px;
    /* Larger button */
    font-size: 1.1em;
}

/* --- End Pack Opening Overlay Style --- */

.card-image-area span {
    /* Ensure text is above icon */
    position: relative;
    z-index: 1;
}

.card-type-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    padding: 3px 7px;
    background-color: rgba(0, 0, 0, 0.35);
    /* Darker background for better visibility */
    border-bottom: 1px solid var(--card-border);
    border-top: 1px solid var(--card-border);
    font-family: var(--font-accent, 'Georgia', serif);
    /* Use a slightly different font if available */
    font-weight: bold;
}

.card-type {
    font-style: italic;
}

.card-set {
    /* Placeholder for set icon */
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 5px;
    /* Add some space from type */
}

.card-text-box {
    /* flex-grow: 1; Removed */
    height: 45px;
    /* Adjusted fixed height for text box */
    padding: 5px 7px;
    font-size: 0.8em;
    line-height: 1.3;
    overflow-y: auto;
    /* Enable scrolling for long texts */
    margin: 4px;
    /* Add margin to match image area */
    background-color: rgba(0, 0, 0, 0.15);
    /* Subtle background for better readability */
    border-radius: 4px;
    /* Use mask image to create angled text fade at bottom */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Very subtle border */
    color: var(--text-light);
    /* Ensure good contrast */
    scrollbar-width: thin;
    /* For Firefox */
    scrollbar-color: var(--card-border) transparent;
    /* For Firefox */
}

/* Webkit scrollbar styling for text box */
.card-text-box::-webkit-scrollbar {
    width: 5px;
}

.card-text-box::-webkit-scrollbar-track {
    background: transparent;
}

.card-text-box::-webkit-scrollbar-thumb {
    background-color: var(--card-border);
    border-radius: 3px;
}

.card-ability {
    font-style: italic;
    margin-bottom: 3px;
    /* Display ability text if present */
}

.card-description {
    /* Display description text */
}

/* Hide ability if 'None' or empty */
.card-ability:empty,
.card-ability:contains('None') {
    /* Requires JS to add 'contains' or check text */
    display: none;
}


.card-stats {
    position: absolute;
    /* Restore absolute positioning */
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    /* Space out stats */
    align-items: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    /* Darker gradient */
    padding: 4px 0;
    /* Slightly more padding */
    border-top: 1px solid var(--card-border);
    border-radius: 0 0 8px 8px;
    /* Match card bottom radius */
    height: 28px;
    /* Explicit height */
    box-sizing: border-box;
}

.card-stats .stat {
    /* Container for icon + value */
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: bold;
    font-size: 1.1em;
    /* Larger stats */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Add icons using pseudo-elements */
.card-attack::before {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.92 5L5 7l2 2 1-1 5.5 5.5-1.5 1.5 1 1 1.5-1.5L17 17l-1 1 2 2 2-2-1-1 2.5-2.5 1 1 1.5-1.5L19 9l-5.5 5.5-1-1L17 9l-2-2-4.5 4.5L5 6l1-1z' fill='%23c9a84c'/%3E%3Cpath d='M3 19l2 2 4-4-2-2z' fill='%23c9a84c' opacity='0.7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.9;
    margin-right: 1px;
    /* Fine-tune spacing */
}

.card-defense::before {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L3 7v5c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5zm0 2.18l7 3.89v4.43c0 4.56-3.07 8.82-7 9.88-3.93-1.06-7-5.32-7-9.88V8.07l7-3.89z' fill='%231565c0'/%3E%3Cpath d='M12 6.5L7 9.2V12c0 3.17 2.13 6.14 5 6.92 2.87-.78 5-3.75 5-6.92V9.2L12 6.5z' fill='%231565c0' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.9;
    margin-right: 1px;
}

.card-health::before {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23c62828'/%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23ef5350' opacity='0.4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.9;
    margin-right: 1px;
}

/* Hide stats container if not a Summon */
.card:not(.type-summon) .card-stats {
    display: none;
}

/* Drag and Drop Styles */
.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.draggable {
    cursor: grab;
}

.draggable {
    cursor: grab;
}

.drop-zone.over {
    border-style: dashed;
    border-color: var(--accent-color);
    background-color: rgba(233, 69, 96, 0.1);
    /* Highlight drop zone */
}

/* --- Animations --- */
@keyframes cardPlayedAnimation {
    from {
        transform: translateY(30px) scale(0.9);
        /* Start lower and smaller */
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        /* End at normal position/size */
        opacity: 1;
    }
}

.card-played {
    animation: cardPlayedAnimation 0.5s ease-out forwards;
}

@keyframes cardAttackAnimation {
    0% {
        transform: translate(0, 0) skewX(0) scale(1);
    }

    50% {
        transform: translate(0, -15px) skewX(-5deg) scale(1.1);
        z-index: 10;
    }

    /* Move forward, skew slightly, scale up */
    100% {
        transform: translate(0, 0) skewX(0) scale(1);
    }
}

.card-attacking {
    animation: cardAttackAnimation 0.6s ease-in-out;
}

@keyframes damageFlashAnimation {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.8) drop-shadow(0 0 5px var(--lp-color));
    }

    /* Flash red/bright */
}

.card-damaged {
    animation: damageFlashAnimation 0.4s ease-in-out;
}

@keyframes cardDestroyedAnimation {
    from {
        transform: scale(1);
        opacity: 1;
        filter: grayscale(0);
    }

    to {
        transform: scale(0.8) rotateZ(-15deg);
        opacity: 0;
        filter: grayscale(100%);
    }
}

.card-destroyed {
    animation: cardDestroyedAnimation 0.5s ease-in forwards;
    /* Keep in place until animation ends, then JS should remove */
    pointer-events: none;
    /* Prevent interaction while disappearing */
}

/* --- Targeting --- */
.valid-target {
    cursor: pointer !important;
    /* Indicate clickability */
    box-shadow: 0 0 15px 5px var(--aether-color);
    /* Glowing effect */
    outline: 2px solid var(--aether-color);
}

.targeting-active body {
    /* Maybe change cursor globally */
    cursor: crosshair;
}

@keyframes packCardReveal {
    from {
        transform: scale(0.8) rotateY(90deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

/* --- Pack Opening Animation --- */
@keyframes packCardFlipReveal {
    0% {
        transform: scale(0.8) rotateY(180deg);
        /* Start smaller and flipped */
        opacity: 0;
    }

    60% {
        transform: scale(1.1) rotateY(0deg);
        /* Flip to front and slightly overshoot scale */
        opacity: 1;
        box-shadow: 0 0 20px var(--accent-color);
        /* Add glow during flip */
    }

    100% {
        transform: scale(1);
        /* Settle to normal size */
        opacity: 1;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.1);
        /* Normal shadow */
    }
}

.pack-card-reveal {
    transform-style: preserve-3d;
    /* Needed for rotation */
    opacity: 0;
    /* Start hidden */
    animation: packCardFlipReveal 0.8s ease-out forwards;
    /* Longer duration for flip */
    animation-delay: var(--reveal-delay, 0s);
    /* Use CSS variable for stagger */
    backface-visibility: hidden;
    /* Hide back during flip */
}

/* --- Lane-Based Combat Preview and Attack Animations --- */
.combat-preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.combat-preview-arrow {
    position: absolute;
    height: 8px;
    background-color: var(--preview-arrow-color, rgba(255, 255, 0, 0.7));
    transform-origin: left center;
    pointer-events: none;
    z-index: 25;
}

.combat-preview-arrow::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 12px solid var(--preview-arrow-color, rgba(255, 255, 0, 0.7));
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.combat-preview-arrow.preview-style {
    background-image: linear-gradient(to right,
            var(--preview-arrow-color, rgba(255, 255, 0, 0.7)) 50%,
            transparent 50%);
    background-size: 20px 100%;
    animation: march-ants 1s linear infinite;
}

@keyframes march-ants {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 20px 0;
    }
}

.attack-animation-container {
    position: absolute;
    /* Changed from fixed to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.attack-effect {
    position: absolute;
    width: 15px;
    /* Width of the streak */
    height: 3px;
    /* Thickness of the streak */
    /* Yellow light streak gradient */
    background: linear-gradient(to right, rgba(255, 255, 100, 0), rgba(255, 255, 200, 1), rgba(255, 255, 100, 0));
    border-radius: 2px;
    transform-origin: left center;
    /* Rotate around the start point */
    /* Use the existing animation, but ensure it works with the new look */
    animation: attack-animation 0.5s linear forwards;
    /* Keep existing animation for travel */
    z-index: 1001;
    /* Ensure it's above cards */
    box-shadow: 0 0 5px yellow;
    /* Add glow */
}

/* Remove the arrow head */
.attack-effect::after {
    content: none;
}

@keyframes attack-animation {
    0% {
        width: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        width: calc(100% + var(--end-x, 0px));
        transform: translateY(var(--end-y, 0px));
        opacity: 1;
    }
}

/* --- Deck Manager & Collection Styles --- */
.deck-manager-layout {
    display: flex;
    gap: 30px;
    /* Let screen handle height/scrolling */
}

.card-list {
    border: 2px solid var(--zone-border);
    padding: 20px;
    height: calc(100% - 44px);
    /* Adjust for padding */
    overflow-y: auto;
    background-color: rgba(15, 52, 96, 0.6);
    /* Slightly lighter zone bg */
    border-radius: 8px;
    flex-basis: 50%;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    /* Inner shadow */
    display: grid;
    /* Use Grid layout */
    /* Auto-fit columns with a minimum width slightly larger than the card */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    /* Adjust gap */
    align-content: start;
    /* Align items to the top */
    justify-items: center;
    /* Center cards within grid cells */
}

/* Removed generic .card-list .card:hover (lines 1802-1807) */

#deck-list {
    border-color: var(--accent-color);
    /* Highlight deck list */
    background-color: rgba(15, 52, 96, 0.75);
    /* Darker background for deck */
}

/* Style collection list similarly */
#collection-list-main,
#collection-list-deck {
    background-color: rgba(15, 52, 96, 0.6);
}

/* Style Shop pack opening area */
#pack-opening-area {
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed var(--accent-color);
    border-radius: 8px;
    min-height: 180px;
    /* Height for cards */
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(15, 52, 96, 0.5);
}

#pack-opening-area h3 {
    width: 100%;
    text-align: center;
    color: var(--accent-color);
    margin-bottom: 10px;
}

/* Style Settings screen placeholder */
#screen-settings p {
    text-align: center;
    font-size: 1.2em;
    color: #aaa;
    margin-bottom: 30px;
}

/* --- Settings Screen --- */
.settings-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Label, Control, Value */
    gap: 15px 20px;
    align-items: center;
    max-width: 500px;
    margin: 0 auto 30px auto;
    /* Center grid */
}

.settings-grid label {
    text-align: right;
    font-weight: bold;
    color: var(--accent-color);
}

.settings-grid input[type="range"] {
    width: 100%;
    cursor: pointer;
}

/* Basic styling for range inputs */
.settings-grid input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--secondary-bg);
    border-radius: 4px;
    border: 1px solid var(--zone-border);
}

.settings-grid input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
}

.settings-grid input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.settings-grid input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    justify-self: start;
    /* Align checkbox left */
}

.settings-grid span {
    /* For volume percentage display */
    min-width: 40px;
    /* Ensure space for text */
    text-align: right;
    font-weight: bold;
}

#save-settings-button {
    display: block;
    /* Make it block to center */
    margin: 20px auto 0 auto;
    /* Center button */
}


/* --- Account Forms (Login/Signup) --- */
.account-form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px 10px;
    max-width: 400px;
    margin: 20px auto;
    align-items: center;
}

.account-form label {
    text-align: right;
    font-weight: bold;
    color: var(--accent-color);
}

.account-form input {
    padding: 10px;
    border: 1px solid var(--zone-border);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 1em;
}

.account-form button[type="submit"] {
    grid-column: 1 / -1;
    /* Span full width */
    margin-top: 10px;
    padding: 12px;
}

.account-form p {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

.account-form p button {
    /* Style the inline button differently */
    /* Use link-style class now */
}

.account-form p button:hover {
    /* Use link-style class now */
}

/* --- Card Generator Form --- */
#card-generator-form {
    display: grid;
    grid-template-columns: 120px 1fr;
    /* Fixed label column */
    gap: 12px 20px;
    max-width: 500px;
}

#card-generator-form label {
    text-align: right;
    color: var(--accent-color);
    font-weight: bold;
}

#card-generator-form input,
#card-generator-form select,
#card-generator-form textarea {
    padding: 10px;
    border: 1px solid var(--zone-border);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-main);
}

#card-generator-form textarea {
    min-height: 60px;
    resize: vertical;
}

#card-generator-form button[type="submit"] {
    grid-column: 2 / 3;
    /* Span across the second column */
    justify-self: start;
    /* Align button to the left */
}


/* --- Battle Log --- */
#battle-log-container {
    position: absolute;
    bottom: 10px;
    /* Position above footer */
    left: 15px;
    width: 280px;
    /* Adjust width as needed */
    height: auto;
    /* Allow dynamic height based on content */
    max-height: 200px;
    /* Increased max-height for expanded state */
    background-color: rgba(15, 52, 96, 0.85);
    /* Consistent dark bg */
    border: 1px solid var(--zone-border);
    border-radius: 6px;
    padding: 5px 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    z-index: 15;
    /* Above hand zone, below end turn button? */
    display: flex;
    flex-direction: column;
}

#battle-log-container h4 {
    margin: 0 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--zone-border);
    color: var(--accent-color);
    font-size: 0.9em;
    text-align: center;
}

.log-area {
    flex-grow: 1;
    overflow-y: auto;
    /* Enable vertical scrolling */
    font-size: 0.75em;
    line-height: 1.4;
    color: var(--text-light);
    max-height: 150px;
    /* Explicit height for scroll area */
    height: 150px;
    /* Fixed height to ensure scrolling */
}

.log-area p {
    /* Style individual log messages */
    margin: 0;
    padding: 3px 5px;
    /* Add some padding */
    word-wrap: break-word;
    border-radius: 3px;
    transition: background-color 0.2s;
    /* Smooth background change */
}

/* Alternating row colors */
.log-area p:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.15);
}

.log-area p:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Style for turn markers (assuming they start with '---') */
.log-area p:where(:first-child, [data-log-type="turn-marker"]) {
    /* Target first or marked */
    font-weight: bold;
    color: var(--accent-color);
    background-color: rgba(233, 69, 96, 0.15);
    /* Accent background */
    margin-top: 5px;
    /* Add space before turn marker */
    text-align: center;
    border-top: 1px solid var(--zone-border);
    border-bottom: 1px solid var(--zone-border);
}

/* --- Chat Window Styles --- */
#chat-window-container {
    position: absolute;
    bottom: 180px;
    /* Align with bottom of hand/deck/discard */
    right: 30px;
    /* Position near end turn button */
    width: 280px;
    /* height: 250px; */
    /* Remove fixed height */
    max-height: 250px;
    /* Control expanded size */
    background-color: rgba(15, 52, 96, 0.85);
    border: 1px solid var(--zone-border);
    border-radius: 6px;
    padding: 5px 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    z-index: 15;
    display: flex;
    flex-direction: column;
}

#chat-window-container h4 {
    margin: 0 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--zone-border);
    color: var(--accent-color);
    font-size: 0.9em;
    text-align: center;
}

#chat-messages {
    /* Inherits .log-area styles */
    margin-bottom: 5px;
}

.chat-input-area {
    display: flex;
    gap: 5px;
    margin-top: auto;
    /* Push to bottom */
    flex-shrink: 0;
}

#chat-input {
    flex-grow: 1;
    padding: 5px 8px;
    border: 1px solid var(--zone-border);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--text-light);
    font-size: 0.8em;
}

#chat-input:disabled {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
}

#chat-send-button {
    padding: 5px 10px;
    font-size: 0.8em;
}

#chat-send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-message {
    /* Style for system messages in chat */
    color: #aaa;
    font-style: italic;
    text-align: center;
}

/* --- End Chat Window Styles --- */

/* --- Collapsible Window Styles (Log/Chat) --- */
.collapsible-window {
    /* Use existing positioning from log/chat containers */
    /* Add height transition */
    transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
    /* Needed for smooth height transition */
}

.window-header {
    display: flex;
    justify-content: space-between;
    /* Push button to right */
    align-items: center;
    cursor: pointer;
    /* Indicate header is clickable (optional) */
    /* Use existing h4 styles from log/chat */
    margin: 0 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--zone-border);
    color: var(--accent-color);
    font-size: 0.9em;
    text-align: center;
    /* Keep text centered */
}

.window-header span {
    flex-grow: 1;
    /* Allow title to take space */
}

.toggle-window-button {
    background: none;
    border: 1px solid var(--zone-border);
    color: var(--text-light);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 10px;
    opacity: 0.7;
    transition: opacity 0.2s, background-color 0.2s;
}

.toggle-window-button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.window-content {
    flex-grow: 1;
    /* Allow content to fill space */
    display: flex;
    /* Needed for log/chat internal layout */
    flex-direction: column;
    overflow: hidden;
    /* Prevent content overflow when animating */
    /* Add opacity transition with slight delay */
    transition: opacity 0.3s ease-in-out 0.1s;
}

/* Default state (expanded) */
.collapsible-window {
    /* Define default height/max-height or let content dictate */
    height: auto;
    /* Or max-height: 200px; etc. */
    overflow: visible;
    /* Or auto if scrolling is needed */
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
    /* Smooth transition */
}

.window-content {
    opacity: 1;
    transition: opacity 0.3s ease-out;
    pointer-events: auto;
    /* Ensure content is interactive */
}


/* Minimized State */
.collapsible-window.minimized {
    height: 30px !important;
    /* Force height to roughly header size */
    padding-top: 5px;
    padding-bottom: 5px;
}

.collapsible-window.minimized .window-content {
    opacity: 0;
    height: 0;
    pointer-events: none;
}

/* Ensure battle log is not collapsed when expanded */
#battle-log-container:not(.minimized) #battle-log-content {
    display: flex;
    opacity: 1;
    height: auto;
    max-height: 150px;
}

#battle-log-container:not(.minimized) #battle-log {
    height: 150px;
    overflow-y: auto;
    display: block;
}

/* We'll need JS to add data-log-type="turn-marker" for non-first turn lines */

/* Scrollbar styling (optional, browser-specific) */
.log-area::-webkit-scrollbar {
    width: 6px;
}

.log-area::-webkit-scrollbar-track {
    background: var(--secondary-bg);
    border-radius: 3px;
}

.log-area::-webkit-scrollbar-thumb {
    background-color: var(--zone-border);
    border-radius: 3px;
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 15px;
    /* margin-top: 30px; Removed margin as screens are absolute */
    background-color: rgba(22, 33, 62, 0.9);
    color: #aaa;
    font-size: 0.9em;
    border-top: 1px solid var(--zone-border);
    flex-shrink: 0;
    /* Prevent footer shrinking */
    position: relative;
    /* Ensure it stays below absolute positioned screens */
    z-index: 50;
}

/* --- Shop Screen Styles --- */
#screen-shop h2 {
    margin-bottom: 30px;
    /* More space below title */
}

.shop-items-container {
    display: grid;
    /* Use grid for better alignment */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Responsive columns */
    gap: 30px;
    margin-bottom: 40px;
    /* Space before pack opening area */
    /* flex-wrap: wrap; No longer needed with grid */
}

.shop-item {
    background: rgba(0, 0, 0, 0.2);
    /* Darker, semi-transparent background */
    border: 2px solid var(--zone-border);
    /* Default border */
    border-radius: 10px;
    padding: 25px;
    /* width: 250px; Remove fixed width, let grid handle it */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    position: relative;
    /* For potential pseudo-element borders */
    overflow: hidden;
    /* Ensure pseudo-elements don't overflow weirdly */
}

.shop-item:hover {
    transform: scale(1.03);
    /* Slight enlargement */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    /* Base hover shadow */
    /* Themed hover glow added below */
}

.shop-item h3 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--text-light);
    font-family: var(--font-title);
    font-size: 1.4em;
}

.shop-item-icon {
    width: 100px;
    /* Keep size */
    height: 100px;
    border-radius: 5px;
    /* Slightly smaller radius */
    margin-bottom: 20px;
    /* More space below icon */
    background-color: transparent;
    /* Remove placeholder color */
    border: none;
    /* Remove placeholder border */
    display: block;
    /* Remove flex properties */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Remove ::before gift icon */
}

/* Remove old .pack-icon rules */

/* --- New Themed Pack Icons --- */
/* Assumes images are in frontend/images/packs/ */
.shop-item.pack-type-starter .shop-item-icon {
    background-image: url('images/packs/starter_pack.png');
}

.shop-item.pack-type-rare .shop-item-icon {
    background-image: url('images/packs/rare_pack.png');
}

.shop-item.pack-type-legendary .shop-item-icon {
    background-image: url('images/packs/legendary_pack.png');
}

.shop-item.pack-type-birdwell .shop-item-icon {
    background-image: url('images/packs/birdwell_pack.png');
}

.shop-item.pack-type-basement .shop-item-icon {
    background-image: url('images/packs/basement_pack.png');
}

/* --- End Themed Pack Icons --- */


.shop-item-description {
    font-size: 0.9em;
    /* Keep size */
    color: #d0d0d0;
    /* Slightly brighter */
    line-height: 1.4;
    flex-grow: 1;
    /* Allow description to push cost/button down */
    margin-bottom: 15px;
}

.shop-item-cost {
    font-weight: bold;
    color: #ffd700;
    /* Gold color for cost */
    margin-bottom: 20px;
    font-size: 1.1em;
    display: flex;
    /* Align icon and text */
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.shop-item-cost::before {
    /* Replace coin emoji with a pseudo-element */
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z' fill='%23c9a84c'/%3E%3Cpath d='M12 6l1.2 3.6L17 12l-3.8 1.4L12 17l-1.2-3.6L7 12l3.8-1.4z' fill='%23ffd54f' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.8;
}

.shop-item .buy-button {
    /* Target buy button specifically within shop item */
    width: 80%;
    padding: 12px 20px;
    margin-top: auto;
    /* Push button to bottom */
    /* Add animation */
    animation: buyButtonGlow 2.5s ease-in-out infinite alternate;
}

/* --- Themed Pack Borders --- */
.shop-item.pack-type-starter {
    border-color: #a0a0a0;
}

/* Grey */
.shop-item.pack-type-rare {
    border-color: #60a0ff;
}

/* Blue */
.shop-item.pack-type-legendary {
    border-color: #c070ff;
}

/* Purple */
.shop-item.pack-type-birdwell {
    border-color: #40e0d0;
}

/* Turquoise */
.shop-item.pack-type-basement {
    border-color: #ff8c00;
}

/* Dark Orange */

.shop-item.pack-type-starter:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px #a0a0a0;
}

.shop-item.pack-type-rare:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px #60a0ff;
}

.shop-item.pack-type-legendary:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px #c070ff;
}

.shop-item.pack-type-birdwell:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px #40e0d0;
}

.shop-item.pack-type-basement:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px #ff8c00;
}

/* --- End Themed Pack Borders --- */

/* --- Buy Button Animation --- */
@keyframes buyButtonGlow {
    from {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.2), 0 0 3px rgba(233, 69, 96, 0.2);
    }

    to {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.2), 0 0 10px rgba(233, 69, 96, 0.6);
    }
}

/* --- End Buy Button Animation --- */

#pack-opening-area {
    /* Change to overlay */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    border-radius: 10px;
    /* Match screen radius */
    min-height: auto;
    /* Remove min-height */
    display: none;
    /* Hidden by default */
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    background: rgba(10, 10, 20, 0.9);
    /* Dark overlay */
    backdrop-filter: blur(4px);
    /* Blur background */
    z-index: 100;
    /* High z-index */
    overflow: hidden;
}

.pack-opening-header {
    font-family: var(--font-title);
    color: var(--accent-color);
    font-size: 2em;
    text-shadow: 0 0 10px var(--accent-color);
    margin-bottom: 20px;
}

.pack-particle-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    /* Placeholder for actual particle effects via JS or more CSS */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.5;
}

.pack-cards-reveal-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* Above particles */
    perspective: 1000px;
    /* Needed for 3D rotation */
}

/* Style for revealed cards */
#pack-opening-area .card {
    width: 120px;
    /* Slightly larger than discard modal */
    height: 170px;
    font-size: 0.7em;
    cursor: default;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    /* Animation properties set by JS */
    backface-visibility: hidden;
    /* Hide back during flip */
}

/* Add glow/border for high rarity reveals */
#pack-opening-area .card.high-rarity-reveal {
    box-shadow: 0 0 15px 5px gold, 0 5px 15px rgba(0, 0, 0, 0.4);
    /* Gold glow */
}

#pack-opening-area .card.rarity-legendary {
    box-shadow: 0 0 20px 8px #c070ff, 0 5px 15px rgba(0, 0, 0, 0.4);
    /* Purple glow for legendary */
}


.pack-okay-button {
    margin-top: 25px;
    padding: 10px 30px;
    z-index: 2;
    /* Above particles */
    /* Animation set by JS */
}

/* --- End Shop Screen Styles --- */

/* --- Card Inspection Styles --- */
#card-inspection-area {
    position: absolute;
    /* Position relative to game-container */
    z-index: 1000;
    /* Significantly increased z-index to ensure it's above everything */
    display: none;
    /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none !important;
    /* Ensure it doesn't block mouse events on elements underneath */
    background-color: rgba(0, 0, 0, 0.75);
    /* Darker backdrop for better contrast */
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(64, 224, 208, 0.3);
    /* Enhanced glow effect */
    transform: scale(0.95);
    /* Start slightly smaller for animation */
    border: 1px solid rgba(64, 224, 208, 0.4);
    /* Aether-colored border */
    backdrop-filter: blur(3px);
    /* Add slight blur effect to background */
}

#card-inspection-area.visible {
    transform: scale(1);
    /* Full size when visible */
}

#card-inspection-area .card.inspection-view {
    /* Make the inspected card larger and more impressive */
    width: 240px;
    /* Increased size */
    height: 336px;
    /* Maintain aspect ratio (approx 1.4) */
    font-size: 1em;
    /* Slightly larger base font for readability */
    cursor: default;
    /* Not draggable/grabbable */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 0 15px rgba(64, 224, 208, 0.4);
    /* Enhanced glow effect */
    pointer-events: none;
    /* Prevent the preview card itself from interfering with mouse events */
    transform: translateY(0);
    /* Reset for animation */
    animation: cardFloatEffect 3s ease-in-out infinite;
    /* Add subtle floating animation */
    border-width: 2px;
    /* Slightly thicker border */
}

@keyframes cardFloatEffect {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(0.5deg);
    }

    /* Subtle float and rotation */
}

/* Add class for rarity-specific effects */
#card-inspection-area .card.inspection-view.rarity-legendary {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.4);
    /* Gold glow for legendary */
    animation: legendaryCardFloat 3s ease-in-out infinite;
    /* Special animation for legendary */
}

@keyframes legendaryCardFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3);
    }

    50% {
        transform: translateY(-8px) rotate(1deg);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5);
    }

    /* Enhanced effect */
}

/* Ensure nested elements scale appropriately */
.inspection-view .card-header {
    padding: 6px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    /* Darker header */
}

.inspection-view .card-cost {
    width: 28px;
    height: 28px;
    font-size: 1.3em;
    box-shadow: 0 0 5px rgba(64, 224, 208, 0.5);
    /* Add glow to cost */
}

.inspection-view .card-name {
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    /* Add text shadow for better readability */
}

.inspection-view .card-rarity {
    width: 18px;
    height: 18px;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    /* Add glow to rarity gem */
}

.inspection-view .card-image-area {
    height: 140px;
    /* Even larger image area */
    margin: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
    /* Add inner shadow for depth */
    border-width: 2px;
    /* Thicker border */
}

.inspection-view .card-type-line {
    padding: 5px 10px;
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    /* Darker background */
}

.inspection-view .card-text-box {
    padding: 10px;
    font-size: 1.1em;
    /* Larger text */
    line-height: 1.4;
    background-color: rgba(0, 0, 0, 0.25);
    /* Darker background for better contrast */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Subtle border */
    max-height: 70px;
    /* Control max height */
}

.inspection-view .card-stats {
    padding: 8px 10px;
    font-size: 1.2em;
    /* Larger stats */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
    /* Darker gradient background */
}

.inspection-view .card-stats .stat {
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    /* Add text shadow to stats */
}

.inspection-view .card-attack::before,
.inspection-view .card-defense::before,
.inspection-view .card-health::before {
    font-size: 1.1em;
    /* Larger icons */
}

.inspection-view .card-status-indicator {
    font-size: 0.9em;
    color: var(--accent-color);
    font-weight: bold;
    text-align: center;
    padding: 4px 0;
    background-color: rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    /* Add text shadow */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle top border */
}

/* Add close button to card inspection (optional) */
.inspection-close-button {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    /* Above the card */
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

.inspection-close-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- End Card Inspection Styles --- */

/* --- Modal Styles (for Discard Pile, etc.) --- */
.modal-overlay {
    position: fixed;
    /* Cover entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    /* Dark semi-transparent background */
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* High z-index */
    padding: 30px;
    box-sizing: border-box;
}

/* Make modal visible when active */
.modal-overlay.show {
    display: flex;
    /* Override display: none */
}

.modal-content {
    background-color: var(--secondary-bg);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid var(--zone-border);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    max-width: 90%;
    max-height: 85%;
    display: flex;
    flex-direction: column;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: var(--accent-color);
    font-family: var(--font-title);
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.modal-close-button:hover {
    opacity: 1;
}

.modal-card-list {
    display: flex;
    flex-wrap: wrap;
    /* Allow cards to wrap */
    gap: 15px;
    justify-content: center;
    overflow-y: auto;
    /* Allow scrolling if many cards */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    flex-grow: 1;
    /* Take remaining space */
}

/* Adjust card size within modal */
.modal-card-list .card {
    width: 100px;
    /* Smaller cards in modal */
    height: 142px;
    font-size: 0.6em;
    cursor: default;
    /* Not interactive */
}

.modal-card-list .card:hover {
    /* Disable hover effect in modal */
    transform: none;
}

/* --- Base Sell Quantity Modal Style (Hidden) --- */
#sell-quantity-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none !important;
    z-index: 1500;
    transition: opacity 0.3s ease-out;
}

/* --- Active Sell Quantity Modal Style (Visible) --- */
#sell-quantity-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: auto !important;
}

/* --- Sell Quantity Modal Specific Styles --- */
#sell-quantity-modal .modal-content {
    max-width: 450px;
    /* Slightly wider modal for controls */
}

.sell-modal-details {
    margin: 20px 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: 1px solid var(--zone-border);
}

.sell-modal-details p {
    margin: 10px 0;
    line-height: 1.5;
}

.sell-modal-details strong {
    color: var(--accent-color);
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    justify-content: center;
}

.quantity-selector label {
    font-weight: bold;
    margin-right: 5px;
}

.quantity-selector input[type="number"] {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 1px solid var(--zone-border);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    /* Hide spinner arrows (optional) */
    -moz-appearance: textfield;
}

.quantity-selector input[type="number"]::-webkit-outer-spin-button,
.quantity-selector input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-selector button {
    padding: 5px 10px;
    font-size: 1.2em;
    line-height: 1;
    min-width: 35px;
}

.sell-value-preview {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
}

.sell-value-preview strong {
    color: #ffd700;
    /* Gold for coin value */
}

.sell-value-preview strong::before {
    /* Add coin icon */
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='10' cy='16' rx='7' ry='4' fill='%23c9a84c' opacity='0.5'/%3E%3Cellipse cx='10' cy='14' rx='7' ry='4' fill='%23c9a84c' opacity='0.7'/%3E%3Cellipse cx='10' cy='12' rx='7' ry='4' fill='%23c9a84c'/%3E%3Cellipse cx='10' cy='12' rx='4.5' ry='2.5' fill='none' stroke='%23ffd54f' stroke-width='0.7' opacity='0.6'/%3E%3Ctext x='10' y='13.5' text-anchor='middle' font-size='5' font-weight='bold' fill='%23ffd54f' font-family='serif'%3EA%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
    opacity: 0.8;
}

.warning-text {
    color: #ffcc00;
    /* Yellow warning */
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    font-size: 0.9em;
}

.modal-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
}

.modal-actions button {
    padding: 12px 25px;
    /* Larger buttons */
    min-width: 120px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.1);
    z-index: auto;
}

/* --- End Modal Styles --- */

/* --- Card Ability Button --- */
.card-ability-button {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 5px;
    font-size: 0.8em;
    /* Smaller font */
    background-color: rgba(0, 150, 255, 0.8);
    /* Blueish */
    color: white;
    border: 1px solid #0056b3;
    border-radius: 3px;
    cursor: pointer;
    z-index: 2;
    /* Above card stats */
    white-space: nowrap;
    opacity: 0.9;
    transition: opacity 0.2s, background-color 0.2s;
}

.card-ability-button:hover {
    opacity: 1;
    background-color: rgba(0, 180, 255, 0.9);
}


/* --- Deck Manager Enhancements --- */

/* Overall Layout */
#screen-deck-manager {
    display: flex;
    /* Use flex for overall screen layout */
    flex-direction: column;
    height: 100%;
    /* Make screen take full height */
    padding: 15px;
    /* Reduce padding */
}

.deck-management-controls {
    display: flex;
    flex-wrap: wrap;
    /* Allow buttons to wrap */
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: rgba(15, 52, 96, 0.8);
    /* Similar to battle info */
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid var(--zone-border);
    flex-shrink: 0;
    /* Prevent controls from shrinking */
}

.deck-management-controls h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.4em;
    /* Smaller title */
    color: var(--text-light);
    /* White title */
    margin-right: 15px;
    /* Space after title */
}

.deck-management-controls select,
.deck-management-controls input[type="text"] {
    padding: 8px 12px;
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--zone-border);
    border-radius: 4px;
    font-family: var(--font-main);
    min-width: 150px;
    /* Ensure selector is wide enough */
}

.deck-management-controls input[type="text"] {
    min-width: 200px;
}

.deck-management-controls button {
    padding: 6px 12px;
    /* Smaller buttons */
    font-size: 0.9em;
    margin: 0;
    /* Remove default margin */
}

.deck-builder-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two main columns */
    gap: 20px;
    flex-grow: 1;
    /* Allow layout to fill remaining space */
    overflow: hidden;
    /* Prevent layout overflow */
    height: calc(100% - 70px);
    /* Adjust based on control bar height */
}

.deck-builder-left-panel,
.deck-builder-right-panel {
    display: flex;
    flex-direction: column;
    background-color: rgba(15, 52, 96, 0.6);
    /* Slightly more transparent */
    border: 1px solid var(--zone-border);
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
    /* Prevent panel overflow */
}

.deck-builder-left-panel h3,
.deck-builder-right-panel h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-family: var(--font-title);
    color: var(--accent-color);
    font-size: 1.2em;
    text-align: center;
    border-bottom: 1px solid var(--zone-border);
    padding-bottom: 8px;
}

/* View Options (Shared) */
.deck-view-options,
.collection-view-options {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.deck-view-options span,
.collection-view-options span {
    font-size: 0.9em;
    margin-right: 5px;
}

.view-button {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: var(--secondary-bg);
    border: 1px solid var(--zone-border);
    color: var(--text-light);
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.view-button.active {
    background-color: var(--accent-color);
    color: var(--primary-bg);
    font-weight: bold;
}

.view-button:not(.active):hover {
    background-color: var(--tertiary-bg);
}


/* Card List Styling (Shared) */
.card-list {
    flex-grow: 1;
    /* Allow list to fill space */
    overflow-y: auto;
    /* Enable scrolling */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    /* Darker inner background */
    border-radius: 5px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    /* Subtle inner border */
    min-height: 150px;
    /* Ensure minimum height */
}

/* Grid View */
.card-list.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    /* Increased minmax for new card width + gap */
    gap: 15px;
    /* Increased gap */
    align-content: start;
    /* Align items to the top */
}

.card-list.view-grid .card {
    /* Adjust card size for grid view if needed */
    /* transform: scale(0.9); Removed scaling for better readability */
    margin: 0;
    /* Reset margin */
}

/* List View */
.card-list.view-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-list.view-list .card {
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 5px 8px;
    height: auto;
    /* Override fixed height */
    width: 100%;
    /* Full width */
    transform: scale(1);
    /* Reset scale */
    box-shadow: none;
    /* Remove card shadow */
}

.card-list.view-list .card .card-image-area,
.card-list.view-list .card .card-stats,
.card-list.view-list .card .card-description,
.card-list.view-list .card .card-ability {
    display: none;
    /* Hide elements not needed in list view */
}

.card-list.view-list .card .card-header {
    display: flex;
    justify-content: space-between;
    /* Revert to space-between */
    width: 100%;
    align-items: center;
    padding: 0;
    border: none;
}

.card-list.view-list .card .card-cost {
    font-size: 1em;
    margin-right: 10px;
}

.card-list.view-list .card .card-name {
    font-size: 1em;
    font-weight: bold;
    flex-grow: 1;
    /* Allow name to take space */
    text-align: left;
}

.card-list.view-list .card .card-type-line {
    font-size: 0.8em;
    color: #ccc;
    margin-left: 10px;
    /* Revert margin */
    /* white-space: nowrap; Removed for list view */
}

.card-list.view-list .card .card-rarity {
    font-size: 0.8em;
    margin-left: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    /* Keep rarity colors */
}

.card-list.view-list .card .card-rarity.Common {
    background-color: grey;
    color: white;
}

.card-list.view-list .card .card-rarity.Uncommon {
    background-color: green;
    color: white;
}

.card-list.view-list .card .card-rarity.Rare {
    background-color: blue;
    color: white;
}

.card-list.view-list .card .card-rarity.Legendary {
    background-color: purple;
    color: white;
}


/* Left Panel Specifics */
.deck-analysis-preview {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--zone-border);
    flex-shrink: 0;
    /* Prevent shrinking */
}

.deck-analysis-preview h4 {
    margin: 0 0 8px 0;
    font-size: 1em;
    color: var(--text-light);
    text-align: center;
}

#mana-curve-display {
    height: 80px;
    /* Adjust height as needed */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    /* Bars grow from bottom */
    justify-content: space-around;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Placeholder for mana curve bars */
#mana-curve-display .mana-bar {
    background-color: var(--aether-color);
    width: 10%;
    /* Adjust width based on max cost */
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease-out;
    position: relative;
    /* For cost label */
}

#mana-curve-display .mana-bar::after {
    /* Cost label */
    content: attr(data-cost);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7em;
    color: #ccc;
}

#mana-curve-display .mana-bar::before {
    /* Count label */
    content: attr(data-count);
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    color: white;
    font-weight: bold;
}


.deck-customization {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--zone-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.deck-customization label {
    font-size: 0.9em;
    margin-bottom: -4px;
    /* Reduce space below label */
}

.deck-customization input[type="text"],
.deck-customization textarea {
    width: 100%;
    padding: 6px 10px;
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--zone-border);
    border-radius: 4px;
    font-family: var(--font-main);
    box-sizing: border-box;
    /* Include padding in width */
}

.deck-customization textarea {
    resize: vertical;
    /* Allow vertical resize */
    min-height: 40px;
}


/* Deck Stats Display */
.deck-stats-display {
    margin-top: 15px;
    font-size: 0.9em;
}

.deck-stats-display h4 {
    margin-bottom: 5px;
}

.deck-stats-display>div {
    margin-bottom: 5px;
    /* Space between Types and Rarities lines */
    display: flex;
    /* Use flex for inline tags */
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 5px 8px;
    /* Row and column gap */
    align-items: center;
}

.deck-stats-display strong {
    margin-right: 5px;
}

.stat-item {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    /* Rounded corners for tag look */
    background-color: var(--secondary-bg-darker);
    /* Default background */
    color: var(--text-light);
    font-size: 0.85em;
    white-space: nowrap;
}

.stat-rarity.rarity-common {
    background-color: #808080;
    /* Grey */
    color: #fff;
}

.stat-rarity.rarity-uncommon {
    background-color: #36a83d;
    /* Green */
    color: #fff;
}

.stat-rarity.rarity-rare {
    background-color: #4a90e2;
    /* Blue */
    color: #fff;
}

.stat-rarity.rarity-legendary {
    background-color: #f5a623;
    /* Orange */
    color: #000;
}


/* Right Panel Specifics */
.collection-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-shrink: 0;
    /* Prevent shrinking */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

.filter-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-grow: 1;
    /* Allow filters to take space */
    flex-wrap: wrap;
}

.filter-controls input[type="text"],
.filter-controls select {
    padding: 6px 10px;
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--zone-border);
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 0.9em;
}

.filter-controls input[type="text"] {
    min-width: 150px;
    /* Minimum search width */
    flex-grow: 1;
    /* Allow search to expand */
}

.filter-controls select {
    min-width: 120px;
}

/* Drag and Drop Placeholders/Feedback */
.card-list.drag-over {
    border: 2px dashed var(--accent-color);
    background-color: rgba(233, 69, 96, 0.1);
    /* Accent tint */
}

.card.dragging {
    opacity: 0.4;
    transform: scale(0.8) rotate(5deg);
    /* Tilt while dragging */
}

.card-placeholder {
    /* Placeholder element during drag */
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px dashed #888;
    border-radius: 5px;
    min-height: 100px;
    /* Match card height approx */
    min-width: 70px;
    /* Match card width approx */
    margin: 5px;
    /* Match card gap */
}

.card-list.view-list .card-placeholder {
    min-height: 30px;
    /* Adjust for list view */
    min-width: 100%;
    margin: 2px 0;
}

/* --- Deck Builder Filter Controls --- */
.filter-controls {
    display: flex;
    flex-wrap: wrap;
    /* Allow filters to wrap on smaller screens */
    gap: 8px;
    /* Space between filter elements */
    align-items: center;
}

.filter-controls select,
.filter-controls input[type="number"] {
    padding: 6px 8px;
    /* Slightly smaller padding */
    font-size: 0.85em;
    /* Smaller font */
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--zone-border);
    border-radius: 4px;
    font-family: var(--font-main);
    max-width: 120px;
    /* Limit width of dropdowns */
}

.filter-controls input[type="number"] {
    max-width: 80px;
    /* Smaller width for cost inputs */
    -moz-appearance: textfield;
    /* Hide spinners in Firefox */
}

.filter-controls input[type="number"]::-webkit-outer-spin-button,
.filter-controls input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    /* Hide spinners in Chrome/Safari */
    margin: 0;
}

#clear-filters-button {
    padding: 5px 8px;
    /* Small padding */
    font-size: 0.9em;
    background-color: var(--secondary-bg);
    border: 1px solid var(--zone-border);
    color: var(--accent-color);
    /* Use accent for clear button */
    font-weight: bold;
    border-radius: 50%;
    /* Make it round */
    line-height: 1;
    /* Ensure 'X' is centered */
    min-width: 24px;
    /* Ensure minimum size */
    margin-left: 5px;
    /* Space before sort */
}

#clear-filters-button:hover {
    background-color: var(--accent-color);
    color: var(--primary-bg);
    border-color: var(--accent-color);
}

#chat-input:disabled {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
}

#chat-send-button {
    padding: 5px 10px;
    font-size: 0.8em;
}

#chat-send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-message {
    /* Style for system messages in chat */
    color: #aaa;
    font-style: italic;
    text-align: center;
}

/* --- End Chat Window Styles --- */

/* --- Deck Manager Owned Count Hiding in Preview --- */
/* Hide the deck manager specific count in the inspection view */
.inspection-view .card-owned-count {
    display: none !important;
    /* Ensure it's hidden in the preview */
}

/* --- Holo Effect --- */

@keyframes holoShimmer {
    0% {
        background-position: -125% -125%;
    }

    50% {
        background-position: 125% 125%;
    }

    100% {
        background-position: -125% -125%;
    }
}

.card.rarity-rare::before,
.card.rarity-legendary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.3) 35%,
            rgba(255, 255, 255, 0.15) 45%,
            transparent 60%);
    background-size: 250% 250%;
    /* Make gradient larger */
    background-position: -125% -125%;
    /* Start position off-screen */
    mix-blend-mode: overlay;
    /* Blend with card content */
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.6s ease-out;
    /* Slower, smoother opacity transition */
    z-index: 1;
    /* Above card content but below header/stats */
    border-radius: inherit;
    /* Match card rounding */
    pointer-events: none;
    /* Don't interfere with clicks */
}

/* Stronger/different effect for Legendary */
.card.rarity-legendary::before {
    background: linear-gradient(115deg,
            transparent 15%,
            rgba(255, 223, 100, 0.4) 30%,
            /* Goldish tint */
            rgba(200, 180, 255, 0.3) 45%,
            /* Purplish tint */
            rgba(180, 255, 220, 0.2) 60%,
            /* Greenish tint */
            transparent 75%);
    background-size: 250% 250%;
    background-position: -125% -125%;
    mix-blend-mode: color-dodge;
    /* Different blend for legendary */
    /* Ensure transition matches base */
    transition: opacity 0.6s ease-out;
}

/* Show effect on hover */
.card.rarity-rare:hover::before,
.card.rarity-legendary:hover::before {
    opacity: 0.65;
    /* Slightly adjust opacity */
    /* Apply the continuous shimmer animation */
    animation: holoShimmer 4s linear infinite;
    /* Adjust duration (4s) and timing function (linear) as needed */
    /* Opacity transition still handled by the base rule */
}

/* --- End Holo Effect --- */

/* --- Shopkeeper & Shop Layout Styles --- */
#screen-shop {
    position: relative;
    /* Keep relative for pack opening overlay */
    overflow: hidden;
    display: flex;
    /* Re-apply flex */
    gap: 20px;
    /* Reduce gap slightly */
    height: 100%;
    /* Fill parent height */
    padding: 20px;
    /* Adjust padding */
    box-sizing: border-box;
}

#shopkeeper-container {
    position: relative;
    /* Back to relative within flex */
    /* bottom: -20px; */
    /* Remove absolute positioning */
    /* left: 10px; */
    flex: 0 0 220px;
    /* Reduced width for better fit */
    height: auto;
    align-self: flex-end;
    /* Stick to bottom */
    z-index: 15;
    animation: shopkeeperBreathe 8s ease-in-out infinite,
        shopkeeperAura 6s ease-in-out infinite alternate,
        robeMovement 12s ease-in-out infinite alternate;
    margin-bottom: -20px;
    /* Allow slight overlap at bottom */
}

/* Remove ::after frame element for now, simplify layout */

#shopkeeper-image {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    /* Indicate interactivity */
    transition: transform 0.2s ease-in-out;
    /* For hover effect */
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
    /* Add subtle shadow */
}

#shopkeeper-image:hover {
    transform: scale(1.03) rotate(-2deg);
    /* Slight zoom and head tilt on hover */
    /* Add hand move animation later if needed */
}

.dialogue-bubble {
    position: absolute;
    /* Keep absolute */
    bottom: 100%;
    /* Position above the container */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    /* Center bubble, less vertical offset */
    /* Add rune/magic style later */
    width: 280px;
    /* Max width */
    background-color: rgba(15, 52, 96, 0.9);
    /* Dark blue, semi-transparent */
    border: 2px solid var(--accent-color);
    border-radius: 15px;
    padding: 15px 20px;
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.4;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    z-index: 21;
    /* Above the sorcerer image */
    opacity: 0;
    /* Hidden initially */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    /* Don't block clicks */
}

/* Optional: Add a little pointer/tail to the bubble */
.dialogue-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    /* Position below the bubble */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--accent-color);
    /* Match border color */
}

#shopkeeper-dialogue-bubble.visible {
    opacity: 1;
    pointer-events: auto;
    /* Allow interaction if needed */
}

.shop-content-column {
    /* margin-left: 340px; Remove margin */
    flex-grow: 1;
    /* Allow this column to take up space */
    height: 100%;
    /* Fill flex container height */
    overflow-y: auto;
    /* IMPORTANT: Make this column scrollable */
    padding: 20px;
    /* Adjust padding */
    position: relative;
    background-color: #f5e9d4;
    /* Base parchment color */
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 5px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
    /* Remove borders */
    border: none;
    min-height: 0;
    /* Helps flex calculation with overflow */
}

/* --- Promo Code Scroll Styles --- */
.promo-scroll-container {
    background-color: #e8d8b0;
    /* Slightly different scroll color */
    border: 2px solid #8b4513;
    /* Brown border */
    border-radius: 5px;
    padding: 20px 40px;
    /* More horizontal padding */
    margin: 30px auto;
    max-width: 450px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Add scroll "ends" */
.promo-scroll-container::before,
.promo-scroll-container::after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 15px;
    background-color: #a0522d;
    /* Darker brown for ends */
    border: 2px solid #8b4513;
    border-radius: 5px;
}

.promo-scroll-container::before {
    left: 5px;
}

.promo-scroll-container::after {
    right: 5px;
}

.promo-code-section {
    position: relative;
    /* Ensure content is above pseudo-elements */
    z-index: 1;
    text-align: center;
}

.promo-code-section h3 {
    color: #5a3a1a;
    /* Dark brown text */
    font-family: 'Georgia', serif;
    /* More thematic font */
    margin-bottom: 15px;
}

#promo-code-input {
    border: 1px solid #a0522d;
    background-color: #fdf5e6;
    /* Light parchment */
    color: #5a3a1a;
    padding: 8px 12px;
    border-radius: 3px;
    margin-right: 8px;
}

#submit-promo-code {
    background: linear-gradient(#a0522d, #8b4513);
    color: #fdf5e6;
    border: 1px solid #5a3a1a;
    padding: 8px 15px;
}

#submit-promo-code:hover {
    background: linear-gradient(#b86b3d, #a0522d);
    border-color: #4a2a0a;
}

.promo-status {
    color: #8b0000;
    /* Dark red for status */
    margin-top: 10px;
    font-size: 0.9em;
}

.promo-status.success {
    color: #006400;
}

/* Dark green */
/* --- End Promo Code Scroll Styles --- */

/* --- End Shopkeeper & Shop Layout Styles --- */

/* --- Shop Item Layout --- */
.shop-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Responsive grid */
    gap: 25px;
    /* Space between items */
    padding: 20px 0;
    /* Padding top/bottom */
    margin-bottom: 30px;
    /* Space before promo code */
}

.shop-item {
    background-color: rgba(160, 82, 45, 0.2);
    /* Semi-transparent brown on parchment */
    border: 2px solid #8B4513;
    /* SaddleBrown border */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute content vertically */
}

.shop-item:hover {
    transform: translateY(-5px);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}

.shop-item-icon {
    width: 80px;
    height: 110px;
    /* Approximate pack aspect ratio */
    margin: 0 auto 15px auto;
    background-color: #5a3a1a;
    /* Placeholder color */
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    border: 1px solid #d2b48c;
    /* Tan border */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
}

/* Specific Pack Icons (using background images) */
.pack-icon.starter {
    background-image: url('../images/packs/starter_pack.png');
}

.pack-icon.rare {
    background-image: url('../images/packs/rare_pack.png');
}

.pack-icon.legendary {
    background-image: url('../images/packs/legendary_pack.png');
}

.pack-icon.birdwell {
    background-image: url('../images/packs/birdwell_pack.png');
}

.pack-icon.basement {
    background-image: url('../images/packs/basement_pack.png');
}

/* Add more specific pack icons as needed */

.shop-item h3 {
    color: #5a3a1a;
    /* Dark brown */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.shop-item-description {
    font-size: 0.9em;
    color: #6b4f2f;
    /* Darker brown text */
    margin-bottom: 15px;
    flex-grow: 1;
    /* Allow description to take up space */
    min-height: 40px;
    /* Ensure some space for description */
}

.shop-item-cost {
    font-weight: bold;
    color: #8B4513;
    /* SaddleBrown */
    margin-bottom: 15px;
    font-size: 1.1em;
}

.shop-item .buy-button {
    /* Inherits general button styles, but can add specifics */
    background: linear-gradient(#a0522d, #8b4513);
    /* Brown gradient */
    color: #fdf5e6;
    border: 1px solid #5a3a1a;
    padding: 10px 15px;
    width: 80%;
    /* Make button wider */
    margin: 0 auto;
    /* Center button */
}

.shop-item .buy-button:hover {
    background: linear-gradient(#b86b3d, #a0522d);
    border-color: #4a2a0a;
}

/* --- End Shop Item Layout --- */


/* --- Shopkeeper Animations --- */
@keyframes shopkeeperBreathe {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.01);
    }

    /* Subtle lift and slight scale */
}

@keyframes shopkeeperAura {
    0% {
        filter: drop-shadow(0 0 3px rgba(120, 80, 200, 0.3));
    }

    /* Faint purple aura */
    100% {
        filter: drop-shadow(0 0 6px rgba(100, 60, 180, 0.5));
    }

    /* Slightly stronger aura */
}

/* Eye blink could be done with a separate overlay element or more complex SVG/sprite sheet */
/* Head tilt is added directly to the hover effect for simplicity */

/* --- Riddle Section Styles --- */
.riddle-container {
    background-color: rgba(15, 52, 96, 0.8);
    /* Similar to dialogue bubble */
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 20px;
    margin: 30px auto;
    /* Center it horizontally, add space */
    max-width: 500px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.riddle-container h4 {
    margin-top: 0;
    color: var(--accent-color);
    font-family: var(--font-title);
    font-size: 1.3em;
    margin-bottom: 15px;
}

.riddle-question {
    font-style: italic;
    color: #d0d0d0;
    margin-bottom: 20px;
    line-height: 1.5;
}

#riddle-answer-input {
    padding: 8px 12px;
    border: 1px solid var(--zone-border);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border-radius: 4px;
    margin-right: 10px;
    width: 60%;
    /* Adjust width */
}

#submit-riddle-answer {
    /* Use default button styles */
    padding: 8px 15px;
    /* Slightly smaller padding */
}

.riddle-status {
    margin-top: 15px;
    font-weight: bold;
    min-height: 1.2em;
    /* Reserve space */
}

.riddle-status.success {
    color: #4caf50;
    /* Green for success */
}

.riddle-status.error {
    color: #f44336;
    /* Red for error/incorrect */
}

/* --- End Riddle Section Styles --- */

/* --- Added Shopkeeper Animations --- */
@keyframes robeMovement {

    0%,
    100% {
        transform: skewX(-0.2deg) translateX(0);
    }

    50% {
        transform: skewX(0.2deg) translateX(1px);
    }

    /* Very subtle skew and shift */
}

/* Glowing eyes would likely need an overlay image/element */

/* --- Pack Opening Animations --- */
@keyframes cardReveal {
    from {
        opacity: 0;
        transform: scale(0.8) rotateY(90deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- End Pack Opening Animations --- */

/* --- Secret Shop Styles --- */
.secret-shop-container {
    position: absolute;
    /* Position relative to #screen-shop */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    /* High z-index to cover shop content */
    display: flex;
    /* Use flex to center content */
    justify-content: center;
    align-items: center;
    /* display: none; Initially hidden via inline style */
    opacity: 0;
    /* Start hidden for transition */
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    /* Don't block clicks when hidden */
}

.secret-shop-container.visible {
    opacity: 1;
    pointer-events: auto;
    /* Allow interaction when visible */
}

.secret-shop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 20, 0.85);
    /* Dark, slightly purple overlay */
    backdrop-filter: blur(5px);
    /* Optional blur effect */
}

.secret-shop-content {
    position: relative;
    /* Keep content above overlay */
    background-color: var(--secondary-bg);
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 25px rgba(233, 69, 96, 0.4);
    /* Accent color glow */
    border-radius: 10px;
    padding: 30px;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    /* Limit height */
    overflow-y: auto;
    /* Allow scrolling for items */
    text-align: center;
    transform: scale(0.9);
    /* Start slightly smaller for entry animation */
    transition: transform 0.3s ease-out;
}

.secret-shop-container.visible .secret-shop-content {
    transform: scale(1);
    /* Scale to full size when visible */
}

/* --- AI Status Indicator --- */
.ai-status-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(15, 52, 96, 0.85);
    /* Semi-transparent dark blue */
    color: var(--text-light);
    padding: 20px 40px;
    border-radius: 10px;
    border: 1px solid var(--accent-color);
    font-size: 1.4em;
    font-family: var(--font-title);
    z-index: 500;
    /* Ensure it's above most battle elements */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    display: none;
    /* Hidden by default, controlled by JS */
}

.ai-status-indicator .ellipsis span {
    opacity: 0;
    animation: ellipsis-fade 1.4s infinite;
}

.ai-status-indicator .ellipsis span:nth-child(1) {
    animation-delay: 0s;
}

.ai-status-indicator .ellipsis span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-status-indicator .ellipsis span:nth-child(3) {
    animation-delay: 0.4s;
}

/* --- Initiative Roll Overlay --- */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    /* Darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Ensure it's on top of everything */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.initiative-content {
    background-color: var(--secondary-bg);
    padding: 40px;
    border-radius: 15px;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 25px rgba(233, 69, 96, 0.4);
    /* Accent glow */
    text-align: center;
    color: var(--text-light);
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.overlay.visible .initiative-content {
    transform: scale(1);
}

.initiative-content h2 {
    margin-top: 0;
    margin-bottom: 30px;
    font-family: var(--font-title);
    color: var(--accent-color);
    font-size: 2em;
}

.dice-area {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    gap: 40px;
}

.dice-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dice-label {
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: bold;
}

.die {
    width: 80px;
    height: 80px;
    background-color: #f0f0f0;
    border: 2px solid #555;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    font-weight: bold;
    color: var(--text-dark);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 3px 3px 5px rgba(0, 0, 0, 0.3);
    /* Basic animation placeholder */
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* Overshoot effect */
}

/* Simple roll animation */
.die.rolling {
    transform: rotate(720deg) scale(0.8);
}

.initiative-result-text {
    margin-top: 20px;
    font-size: 1.5em;
    font-weight: bold;
    min-height: 1.5em;
    /* Reserve space */
    color: var(--aether-color);
    /* Use a distinct color */
}

/* Winner highlighting (example) */
.dice-container.winner .die {
    border-color: gold;
    box-shadow: 0 0 15px gold, inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.dice-container.winner .dice-label {
    color: gold;
}

@keyframes ellipsis-fade {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.secret-shop-content h4 {
    margin-top: 0;
    font-family: var(--font-title);
    color: var(--accent-color);
    font-size: 1.6em;
    margin-bottom: 25px;
}

/* Reuse shop item styles but maybe with slight variation */
.shop-items-container.secret {
    /* Add specific styles if needed, otherwise inherits from .shop-items-container */
    gap: 25px;
    /* Slightly more space */
}

#close-secret-shop {
    margin-top: 30px;
    /* Use default button styles */
}

/* --- Pack Opening Revamp Styles --- */


/* Default / Common Background */
#pack-opening-area.bg-rarity-common {
    background: radial-gradient(circle, rgba(40, 40, 80, 0.9) 0%, rgba(15, 15, 30, 0.95) 70%);
}

/* Uncommon Background */
#pack-opening-area.bg-rarity-uncommon {
    background: radial-gradient(circle, rgba(30, 60, 40, 0.9) 0%, rgba(10, 25, 15, 0.95) 70%);
    /* Greenish */
}

/* Rare Background */
#pack-opening-area.bg-rarity-rare {
    background: radial-gradient(circle, rgba(40, 40, 100, 0.9) 0%, rgba(15, 15, 40, 0.95) 70%);
    /* Bluish/Purplish */
}

/* Legendary Background */
#pack-opening-area.bg-rarity-legendary {
    background: radial-gradient(circle, rgba(80, 60, 20, 0.95) 0%, rgba(40, 30, 5, 0.98) 70%);
    /* Gold/Brownish */
}

.pack-opening-active {

    /* Rarity Distribution Display */
    .pack-rarity-info {
        color: var(--text-light);
        font-size: 0.9em;
        margin-bottom: 15px;
        /* Space below rarity info */
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 5px 10px;
        border-radius: 4px;
        border: 1px solid var(--zone-border);
    }

    .pack-rarity-info span {
        /* Style individual rarity counts */
        margin: 0 5px;
        font-weight: bold;
    }

    /* Use existing card rarity classes for colors if defined, or add specific ones */
    .pack-rarity-info .rarity-common {
        color: #ccc;
    }

    .pack-rarity-info .rarity-uncommon {
        color: #6f6;
    }

    /* Example green */
    .pack-rarity-info .rarity-rare {
        color: #88f;
    }

    /* Example blue */
    .pack-rarity-info .rarity-legendary {
        color: gold;
    }

    /* Styles when the opening process is active */
    /* Example: background effects container */
    background: radial-gradient(circle, rgba(40, 40, 80, 0.9) 0%, rgba(15, 15, 30, 0.95) 70%);
}

.pack-visual {
    /* Styles for the pack image/element before opening */
    padding: 50px 80px;
    border: 3px solid gold;
    border-radius: 10px;
    background: linear-gradient(145deg, #2a2a4a, #1e1e38);
    /* Dark gradient */
    color: gold;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.5s ease-out;
    /* Add opacity transition */
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.4);
    /* Add inset shadow */
    position: relative;
    /* Needed for potential pseudo-elements */
    overflow: hidden;
    /* Hide parts during animation */
}

/* Add class for the opening animation */
.pack-visual.opening {
    animation: packOpenShake 0.5s ease-in-out, packOpenFadeOut 0.3s 0.5s ease-out forwards;
    /* Shake first, then fade out */
}

.pack-visual:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}

.pack-opening-header {
    font-family: var(--font-title);
    color: gold;
    font-size: 2em;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

#pack-reveal-focus-area {
    /* Area where the single card is revealed large */
    width: 100%;
    height: 60%;
    /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    /* For 3D effects */
    pointer-events: none;
    /* Make focus area pass clicks through */
    margin-bottom: 10px;
    /* Space between focus and tray */
}

.focused-card {
    /* The main revealed card - LARGER SIZE */
    transform: scale(2);
    /* Double the size */
    z-index: 1010;
    /* Above other elements */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-color);
    /* More prominent shadow */
    /* Base transition for movement/effects */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    /* Add other base styles if needed, inheriting from .card */
}

/* Add 3D tilt effect placeholder class */
.focused-card.tilt-effect {
    /* Styles will be applied by JS library or custom script */
    /* Example: transition: transform 0.1s linear; */
}

/* Add shine effect placeholder class */
.focused-card .shine-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 60%);
    background-size: 200% 100%;
    animation: cardShine 3s infinite linear;
    opacity: 0;
    /* Hidden by default, shown on high rarity? */
    border-radius: inherit;
    /* Match card border radius */
    pointer-events: none;
}

.focused-card.rarity-rare .shine-effect,
.focused-card.rarity-legendary .shine-effect {
    opacity: 0.7;
    /* Show shine for rare/legendary */
}


#pack-revealed-cards-tray {
    /* Container for cards already revealed */
    width: 100%;
    height: 25%;
    /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -20px;
    /* Overlap cards slightly */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow-x: auto;
    /* Allow scrolling if many cards */
    overflow-y: hidden;
}

.revealed-card-tray {
    /* Styling for cards in the bottom tray */
    transform: scale(0.6);
    /* Smaller size in tray */
    opacity: 0.8;
    margin: 0 -15px;
    /* Overlap adjustment */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.revealed-card-tray:hover {
    transform: scale(0.65) translateY(-5px);
    /* Slightly larger on hover */
    opacity: 1;
    z-index: 1;
    /* Bring hovered card to front */
}


#pack-reveal-controls {
    /* Container for buttons like "Reveal Next", "Reveal All" */
    margin-top: 15px;
    display: flex;
    /* z-index: 1010; REMOVED temporary z-index */
    pointer-events: auto;
    /* Ensure controls container receives events */
    gap: 15px;
}

/* --- Animations --- */

/* --- Rarity-Specific Reveal Animations --- */

/* Base reveal transition (applied via JS currently, might remove if CSS handles all) */
/* .focused-card { transition: opacity 0.5s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } */

/* Common Reveal (Simple, quick flip) */
@keyframes commonCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.6) rotateY(90deg);
    }

    100% {
        opacity: 1;
        transform: scale(2) rotateY(0deg);
    }
}

/* Apply to common */
.focused-card.rarity-common {
    animation: commonCardReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* Standard ease */
    transform: scale(2);
    opacity: 1;
    /* Set final state */
}

/* Apply to common if needed, or rely on JS transition */
/* .focused-card.rarity-common { animation: commonCardReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } */


/* Uncommon Reveal (Slightly faster, bounce) */
@keyframes uncommonCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.6) rotateY(100deg);
    }

    75% {
        opacity: 1;
        transform: scale(2.1) rotateY(-8deg);
    }

    /* Bounce overshoot */
    100% {
        opacity: 1;
        transform: scale(2) rotateY(0deg);
    }
}

.focused-card.rarity-uncommon {
    animation: uncommonCardReveal 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* Faster with bounce */
    transform: scale(2);
    /* Ensure final state is set */
    opacity: 1;
    /* Ensure final state is set */
}


/* Rare Reveal (More dramatic, slight color flash/pulse) */
@keyframes rareCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.7) rotateX(-90deg) translateY(20px);
    }

    /* Rotate from top, slight move */
    50% {
        opacity: 0.7;
        transform: scale(2.0) rotateX(0deg) translateY(0);
    }

    /* Land */
    70% {
        opacity: 1;
        transform: scale(2.1) rotateX(5deg);
        filter: brightness(1.2);
    }

    /* Pulse bright */
    100% {
        opacity: 1;
        transform: scale(2) rotateX(0deg);
        filter: brightness(1.0);
    }

    /* Settle */
}

.focused-card.rarity-rare {
    animation: rareCardReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    /* Ease out quint */
    transform: scale(2);
    /* Ensure final state is set */
    opacity: 1;
    /* Ensure final state is set */
}

/* Legendary Reveal (Use existing effects, ensure animation doesn't conflict if added) */
/* If adding specific keyframes, ensure they complement the border/glow effects */
/* Example: Could add a slower, more majestic rotation */
/* @keyframes legendaryCardReveal { ... } */
/* .focused-card.rarity-legendary { animation: legendaryCardReveal 1.1s ease-out forwards; } */
/* .focused-card.rarity-legendary { animation: legendaryCardReveal 1.0s ease-out forwards; } */


/* Basic card reveal (can be refined) - Keep for reference or remove */
@keyframes cardRevealFocus {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateY(90deg);
    }

    /* <<< REMOVING misplaced packShake keyframes and rule from here */
    100% {
        opacity: 1;
        transform: scale(2) rotateY(0deg);
        /* End at 2x size */
    }
}

/* Pack Shake Animation */
@keyframes packShake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }

    10%,
    50%,
    90% {
        transform: translate(-2px, -1px) rotate(-1deg);
    }

    30%,
    70% {
        transform: translate(2px, 1px) rotate(1deg);
    }
}

.pack-visual.shaking {
    animation: packShake 0.3s linear infinite;
}

/* Pack Opening Animations */
@keyframes packOpenShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes packOpenFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Basic Particle Styles */
.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Don't interfere with clicks */
    overflow: hidden;

    /* Enhance Legendary Pull Effect */
    .focused-card.legendary-pull-effect {
        /* Make existing glow stronger */
        box-shadow: 0 0 40px rgba(255, 225, 50, 0.9),
            /* Brighter gold */
            0 0 20px rgba(255, 255, 180, 0.7),
            /* Wider inner yellow */
            0 0 60px rgba(255, 180, 0, 0.6);
        /* Orange outer halo */
        /* Add an animated border */
        border: 2px solid transparent;
        /* Start transparent */
        animation: legendaryBorderPulse 1.5s infinite ease-in-out;
    }

    /* Make legendary light ray pulse more intensely */
    .focused-card.legendary-pull-effect::after {
        animation: lightRayPulseLegendary 1.2s ease-out forwards;
        /* Use a different animation */
        background: radial-gradient(circle, rgba(255, 235, 100, 0.7) 0%, rgba(255, 215, 0, 0) 65%);
        /* Brighter, wider gold */
    }

    @keyframes lightRayPulseLegendary {

        /* Skip Button Styling */
        .pack-skip-button {
            position: absolute;
            /* Position relative to the pack opening area */
            bottom: 20px;
            right: 20px;
            padding: 5px 10px;
            font-size: 0.8em;
            background-color: rgba(0, 0, 0, 0.5);
            color: #ccc;
            border: 1px solid #555;
            border-radius: 4px;
            z-index: 1020;
            /* Above particles, below focused card maybe */
            opacity: 0.7;
            transition: opacity 0.2s, background-color 0.2s;
        }

        .pack-skip-button:hover {
            opacity: 1;
            background-color: rgba(50, 50, 50, 0.7);

            /* Card Art Zoom Effect */
            .card-art-zoom-overlay {
                position: absolute;
                width: 80%;
                /* Adjust size as needed */
                padding-top: 55%;
                /* Aspect ratio approximation */
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                /* Rounded corners */
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
                z-index: 1015;
                /* Above background, below final card */
                pointer-events: none;
                opacity: 0;
                transform: scale(0.8);
            }

            .card-art-zoom-overlay.zoom-in {
                animation: artZoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
                /* Overshoot */
            }

            .card-art-zoom-overlay.zoom-out {
                animation: artZoomOut 0.3s ease-out forwards;
            }

            @keyframes artZoomIn {
                from {
                    opacity: 0;
                    transform: scale(0.8);
                }

                to {
                    opacity: 1;
                    transform: scale(1.1);
                    /* Zoom slightly larger */
                }
            }

            @keyframes artZoomOut {
                from {
                    opacity: 1;
                    transform: scale(1.1);
                }

                to {
                    opacity: 0;
                    transform: scale(0.9);
                }
            }

            color: #fff;
        }

        0% {
            transform: translate(-50%, -50%) scale(0);
            opacity: 0.7;
        }

        70% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 1;
        }

        /* Scale slightly larger */
        100% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0;
        }
    }

    @keyframes legendaryBorderPulse {

        0%,
        100% {
            border-color: rgba(255, 215, 0, 0.6);
        }

        50% {
            border-color: rgba(255, 235, 150, 1);
        }

        /* Pulse brighter */
    }

    z-index: 1005;
    /* Above background, below focused card */
}

/* Quick fade-in for Reveal All */
@keyframes quickFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.revealed-card-tray.reveal-all-fade {
    animation: quickFadeIn 0.3s ease-out forwards;
}

.confetti-particle {
    position: absolute;
    width: 8px;
    height: 12px;
    opacity: 0;
    pointer-events: none;
}

/* --- Elemental Effect Placeholders --- */
.focused-card .elemental-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    /* Match card radius */
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    /* Behind card content, above background effects */
    background-size: cover;
    mix-blend-mode: overlay;
    /* Experiment with blend modes */
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    /* Play once */
    animation-fill-mode: forwards;
}

/* --- Element-Specific Particles --- */
.element-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    /* Above overlay, below card content */
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* Fire Particles (Embers) */
.element-particle.fire {
    background-color: #ffcc00;
    box-shadow: 0 0 5px #ff8800;
    animation-name: fireParticleMove;
}

@keyframes fireParticleMove {
    0% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5);
    }

    /* Move and shrink */
}

/* Water Particles (Bubbles) */
.element-particle.water {
    background-color: #87cefa;
    border: 1px solid #add8e6;
    animation-name: waterParticleMove;
}

@keyframes waterParticleMove {
    0% {
        opacity: 0.7;
        transform: translate(0, 0) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.2);
    }

    /* Move and grow slightly */
}

/* Nature Particles (Leaves) */
.element-particle.nature {
    background-color: #90ee90;
    width: 8px;
    height: 10px;
    /* Leaf shape */
    border-radius: 50% 0;
    /* Simple leaf shape */
    animation-name: natureParticleMove;
}

@keyframes natureParticleMove {
    0% {
        opacity: 0.8;
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    }

    /* Move and rotate */
}

/* Add other elements (Shadow, Light, etc.) similarly */
.element-particle.shadow {
    background-color: #9370db;
    opacity: 0.6;
    animation-name: shadowParticleMove;
}

@keyframes shadowParticleMove {
    0% {
        opacity: 0.6;
        transform: translate(0, 0) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.2);
    }

    /* Move and shrink drastically */
}

.element-particle.light {
    background-color: #fffacd;
    box-shadow: 0 0 6px #fff;
    animation-name: lightParticleMove;
}

@keyframes lightParticleMove {
    0% {
        opacity: 0.9;
        transform: translate(0, 0) scale(0.5);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }

    /* Move and grow */
}

/* Fire Effect */
.focused-card.element-fire .elemental-overlay {
    /* Example: Subtle animated embers or heat distortion */
    background: radial-gradient(circle at bottom, rgba(255, 100, 0, 0.4) 0%, transparent 60%);
    animation-name: elementFirePulse;
}

@keyframes elementFirePulse {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Water Effect */
.focused-card.element-water .elemental-overlay {
    /* Example: Rippling water effect */
    background: radial-gradient(circle at center, rgba(50, 150, 255, 0.3) 0%, transparent 70%);
    animation-name: elementWaterPulse;
}

@keyframes elementWaterPulse {
    0% {
        opacity: 0;
        transform: scaleY(0.9);
    }

    50% {
        opacity: 0.5;
        transform: scaleY(1.02);
    }

    100% {
        opacity: 0;
        transform: scaleY(1);
    }
}

/* Shadow Effect */
.focused-card.element-shadow .elemental-overlay {
    /* Example: Wisps of shadow */
    background: radial-gradient(ellipse at center, rgba(80, 0, 120, 0.4) 0%, transparent 70%);
    animation-name: elementShadowPulse;
    mix-blend-mode: multiply;
}

@keyframes elementShadowPulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

/* Add more elements (Light, Nature, Earth, Wind etc.) similarly */
.focused-card.element-light .elemental-overlay {
    background: radial-gradient(circle at center, rgba(255, 255, 200, 0.4) 0%, transparent 60%);
    animation-name: elementLightPulse;
    mix-blend-mode: screen;
}

@keyframes elementLightPulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.focused-card.element-nature .elemental-overlay {
    background: radial-gradient(circle at bottom, rgba(50, 180, 50, 0.3) 0%, transparent 60%);
    animation-name: elementNaturePulse;
}

@keyframes elementNaturePulse {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* <<< Added missing closing brace */

/* Confetti Styles */
.confetti-particle {
    position: absolute;
    width: 8px;
    height: 12px;
    opacity: 0;
    pointer-events: none;
    animation: confettiFall 2s ease-out forwards;
    /* <<< Moved animation here */
    /* Random rotation and background color set by JS */
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateY(300px) rotate(360deg);
        /* Fall downwards and rotate */
    }
}


.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: gold;
    /* Or vary based on rarity */
    border-radius: 50%;
    opacity: 0;
    /* Start hidden */
    animation: particleBurst 0.8s ease-out forwards;
}

@keyframes particleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        /* Use CSS variables for direction */
    }
}

/* --- Simple Animation Fallbacks --- */

/* Disable complex rarity reveal animations */
.simple-animations .focused-card.rarity-uncommon,
.simple-animations .focused-card.rarity-rare,
.simple-animations .focused-card.rarity-legendary {
    animation: commonCardReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* Use common animation */
}

/* Disable tilt effect (JS should ideally check this class too, but CSS can help) */
.simple-animations .focused-card {
    /* Override tilt styles if applied */
    transform: scale(2) !important;
    /* Force final scale */
    transition: none !important;
    /* Disable transitions */
}

/* Hide tilt glare */
.simple-animations [data-tilt-glare] {
    display: none !important;
}


/* Disable art zoom */
.simple-animations .card-art-zoom-overlay {
    display: none !important;
    /* Hide the overlay entirely */
}

/* Disable elemental particles/overlays */
.simple-animations .elemental-overlay,
.simple-animations .element-particle {
    display: none !important;
}

/* Disable pack shake animation */
.simple-animations .pack-visual.shaking {
    animation: none !important;
}

/* Disable confetti */
.simple-animations .confetti-particle {
    display: none !important;
}

/* Disable enhanced legendary effects */
.simple-animations .focused-card.legendary-pull-effect {
    animation: commonCardReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* Fallback */
    border: none !important;
    /* Remove border pulse */
    /* Use standard legendary glow */
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 255, 150, 0.6);
}

.simple-animations .focused-card.legendary-pull-effect::after {
    animation: none !important;
    /* Disable light ray pulse */
    opacity: 0 !important;
}

/* Placeholder for rarity light rays */
.focused-card::after {
    /* Example using pseudo-element */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    /* Large size */
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: -1;
    /* Behind the card */
    pointer-events: none;
}

.focused-card.rarity-rare::after {
    animation: lightRayPulse 1.5s ease-out forwards;
    background: radial-gradient(circle, rgba(170, 100, 255, 0.4) 0%, rgba(170, 100, 255, 0) 60%);
    /* Purple */
}

.focused-card.rarity-legendary::after {
    animation: lightRayPulse 1.2s ease-out forwards;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(255, 215, 0, 0) 60%);
    /* Gold */
}

@keyframes lightRayPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.5;
    }

    70% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Card Shine Animation */
@keyframes cardShine {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

/* Rarity Glow Effects */
.focused-card.rarity-common {
    /* Optional subtle glow */
    /* box-shadow: 0 0 8px rgba(200, 200, 200, 0.3); */
}

.focused-card.rarity-uncommon {
    box-shadow: 0 0 12px rgba(100, 200, 100, 0.5);
    /* Greenish */
}

.focused-card.rarity-rare {
    box-shadow: 0 0 20px rgba(120, 120, 255, 0.7), 0 0 8px rgba(180, 180, 255, 0.5);
    /* Blue/Purple */
}

.focused-card.rarity-legendary {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 255, 150, 0.6);
    /* Gold */
}

/* Summary Screen Styles */
.pack-summary-active {
    justify-content: flex-start;
    /* Align content to top */
    padding-top: 50px;
}

.pack-summary-list {
    display: flex;
    flex-wrap: wrap;
    /* Allow cards to wrap */
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    max-height: 70vh;
    /* Limit height and allow scroll */
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--zone-border);
    background-color: rgba(0, 0, 0, 0.2);
}

.summary-card-item {
    transform: scale(0.75);
    /* Slightly smaller than normal card size */
    margin: 5px;
    /* Reset any reveal-specific styles */
    opacity: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Summary Statistics Styling */
.pack-summary-stats {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(15, 52, 96, 0.7);
    /* Use zone background color */
    border: 1px solid var(--zone-border);
    border-radius: 5px;
    text-align: center;
    font-size: 0.9em;
    color: var(--text-light);
}

.pack-summary-stats p {
    margin: 5px 0;
}

.pack-summary-stats .stat-value {
    font-weight: bold;
    color: var(--aether-color);
    /* Use a highlight color */
    margin-left: 5px;
}


.pack-close-button,
.pack-summary-button,
.pack-action-button,
#pack-reveal-controls button {
    /* Ensure buttons within controls are clickable */
    pointer-events: auto;
}

.pack-close-button,
.pack-summary-button,
.pack-action-button {
    margin-top: 20px;
    margin-left: 5px;
    /* Add some spacing between buttons */
    margin-right: 5px;
}

/* Specific style for the share button */
.share-button {
    background: linear-gradient(180deg, #40e0d0 0%, #1aa090 100%);
    /* Teal gradient */
    border-color: #40e0d0;
}


/* --- NEW: Enhanced Overlay Pack Opening --- */

#pack-opening-area.pack-opening-overlay-style {
    /* --- Overlay Styles --- */
    position: fixed;
    /* Position relative to viewport */
    inset: 0;
    /* Cover entire screen */
    /* Darker, magical background with subtle texture/noise */
    background-color: #0a0c1a;
    /* Fallback */
    background-image: linear-gradient(rgba(5, 8, 20, 0.9), rgba(5, 8, 20, 0.99)), url('images/backgrounds/noise-texture.png');
    /* Add noise texture */
    background-blend-mode: multiply;
    z-index: 1000;
    /* Ensure it's on top of other UI */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content (pack, then cards) */
    padding: 20px;
    overflow-y: auto;
    /* Allow scrolling if content overflows */
    /* Add fade-in animation */
    opacity: 0;
    animation: overlayFadeIn 0.4s ease-out forwards;
    box-sizing: border-box;
    /* Ensure padding is included in dimensions */
    /* Placeholder for dynamic background */
    transition: background 0.8s ease-in-out;
}

/* Dynamic Background States (JS adds these classes) */
#pack-opening-area.pack-opening-overlay-style.reveal-bg-rare {
    background: radial-gradient(ellipse at center, rgba(50, 40, 20, 0.95) 0%, rgba(15, 10, 5, 0.98) 100%);
    /* Warm glow */
}

#pack-opening-area.pack-opening-overlay-style.reveal-bg-legendary {
    background: radial-gradient(ellipse at center, rgba(80, 70, 30, 0.95) 0%, rgba(25, 20, 5, 0.98) 100%);
    /* Golden glow */
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Pack Visual */
.pack-visual-overlay {
    width: 200px;
    /* Adjust size */
    height: 300px;
    /* Adjust size */
    background: linear-gradient(145deg, #f0f0f0, #c0c0c0);
    /* Silver foil gradient */
    border: 1px solid #aaa;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease-out;
}

.pack-visual-overlay::before {
    /* Shine effect */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    opacity: 0.7;
    pointer-events: none;
}

.pack-visual-overlay:hover {
    transform: scale(1.05);
}

/* Pack Tearing Animation */
.pack-visual-overlay.tearing {
    animation: packTear 1.2s ease-in-out forwards;
    /* TODO: Add particle effects during tear? */
}

@keyframes packTear {
    0% {
        transform: scale(1.05);
        opacity: 1;
    }

    30% {
        transform: scale(1.1) rotate(-5deg);
    }

    /* Initial tear */
    /* Simulate top tearing open - could use clip-path or multiple elements */
    60% {
        transform: scale(1.15) rotate(5deg);
        opacity: 0.8;
        /* clip-path: inset(0 0 50% 0); */
    }

    100% {
        transform: scale(0.5) rotate(10deg);
        opacity: 0;
        /* clip-path: inset(0 0 100% 0); */
    }
}

/* Remove layout shift state - overlay handles centering (No longer needed) */


/* Card Display Area (Horizontal Rows) */
.pack-card-display-area-overlay {
    display: flex;
    flex-wrap: wrap;
    /* Allow cards to wrap into rows */
    justify-content: center;
    /* Center cards horizontally */
    align-items: center;
    /* Center cards vertically */
    gap: 30px;
    /* Adjust gap */
    padding: 50px 20px 130px 20px;
    /* Adjust padding */
    width: 100%;
    max-width: 95%;
    /* Use percentage for responsiveness */
    margin-top: 30px;
    /* More space from top */
    perspective: 1800px;
    /* Increase perspective for more dramatic flip */
    box-sizing: border-box;
    /* Include padding in width calculation */
}

/* Revealed Cards (Overlay Style) - Increase Specificity */
#pack-opening-area .pack-revealed-card-overlay {
    /* Adjusted Size & Responsive Max Width */
    width: 220px !important;
    /* Back to a moderate base width */
    min-height: 308px !important;
    /* Maintain aspect ratio */
    max-width: min(220px, 28vw);
    /* Max width relative to viewport, capped at base */
    font-size: 1em;
    /* Reset font size */
    border-width: 4px;
    /* Thicker border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s ease-out;
    /* Slower, more dramatic flip + shadow transition */
    transform-style: preserve-3d;
    /* Needed for flip */
    position: relative;
    /* Needed for face-down overlay */
    cursor: default;
    /* Default cursor, magnification on hover */

    /* Gentle Floating Animation */
    /* Breathing/Floating Animation */
    animation: cardBreathingEnhanced 7s ease-in-out infinite alternate;
    position: relative;
    /* Needed for absolute positioning of indicator */
}

/* Face-down state */
.pack-revealed-card-overlay.face-down {
    transform: rotateY(180deg) scale(0.95);
    /* Start flipped and slightly smaller */
    /* Show silhouette/glow instead of card back */
}

.pack-revealed-card-overlay .card-inner {
    /* Ensure inner content is hidden when face-down */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Modify ::after for silhouette/pre-reveal glow */
.pack-revealed-card-overlay.face-down::after {
    content: '';
    position: absolute;
    inset: -5px;
    /* Slightly larger than card */
    background: radial-gradient(ellipse at center, rgba(100, 150, 255, 0.3) 0%, rgba(50, 80, 150, 0) 70%);
    /* Mysterious glow */
    border-radius: 12px;
    /* Match card + extra */
    transform: rotateY(180deg);
    /* Position on the back */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 2;
    opacity: 0.8;
    filter: blur(3px);
}

/* Hide default card back image */
/* .pack-revealed-card-overlay::after { background-image: none; background-color: transparent; } */

/* Pulsing Animation */
/* Modify pulsing to affect the silhouette glow */
.pack-revealed-card-overlay.pulsing.face-down::after {
    animation: silhouettePulse 2s ease-in-out infinite;
}

/* Keyframes for silhouette pulse */
@keyframes silhouettePulse {

    0%,
    100% {
        opacity: 0.6;
        filter: blur(5px);
        transform: rotateY(180deg) scale(1);
    }

    50% {
        opacity: 1;
        filter: blur(2px);
        transform: rotateY(180deg) scale(1.03);
    }
}

/* Rarity Auras/Glows (Applied after flip) - Corrected Colors & Enhanced */
#pack-opening-area .pack-revealed-card-overlay {
    /* Base shadow - Added specificity */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /* Slightly stronger base shadow */
    border-color: #555;
    /* Default darker border */
}

#pack-opening-area .pack-revealed-card-overlay.rarity-common {
    border-color: #90a4ae;
}

/* Slightly bluish Grey border */
#pack-opening-area .pack-revealed-card-overlay.rarity-uncommon {
    border-color: #4fc3f7;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(79, 195, 247, 0.6);
}

/* Light Blue border + glow */
#pack-opening-area .pack-revealed-card-overlay.rarity-rare {
    border-color: #ffb74d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 183, 77, 0.8);
}

/* Orange border + stronger glow */
#pack-opening-area .pack-revealed-card-overlay.rarity-epic {
    border-color: #ce93d8;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 25px rgba(206, 147, 216, 0.9);
}

/* Light Purple border + stronger glow */
#pack-opening-area .pack-revealed-card-overlay.rarity-legendary {
    border-color: #fff176;
    /* Brighter Gold border */
    /* Brighter Gold glow + breathing animation */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 30px #fff176, 0 0 50px #ffca28;
    animation: cardBreathingEnhanced 7s ease-in-out infinite alternate, legendaryGlowOverlay 2.5s ease-in-out infinite alternate;
    /* Use enhanced breathing */
}

/* Enhanced Breathing Animation */
@keyframes cardBreathingEnhanced {
    from {
        transform: scale(1) translateY(0px);
    }

    to {
        transform: scale(1.03) translateY(-4px);
    }
}

@keyframes legendaryGlowOverlay {
    from {
        box-shadow: 0 0 18px #ffd54f, 0 0 30px #ffb300;
    }

    to {
        box-shadow: 0 0 25px #fff8e1, 0 0 45px #ffc107;
    }
}

/* Holo Effect Placeholder */
/* Refined Holo Effect Placeholder */
#pack-opening-area .pack-revealed-card-overlay.holo-effect .card-image::before {
    /* Added specificity */
    content: '';
    position: absolute;
    inset: 0;
    /* More complex gradient for better holo */
    background: linear-gradient(115deg,
            transparent 25%,
            rgba(255, 255, 255, 0.4) 45%,
            rgba(255, 255, 255, 0.4) 55%,
            transparent 75%);
    background-size: 250% 250%;
    background-position: 50% 50%;
    animation: holoShine 5s linear infinite;
    opacity: 0.7;
    /* Slightly more visible */
    mix-blend-mode: color-dodge;
    /* Often looks good for holo */
    pointer-events: none;
    border-radius: inherit;
    /* Match card rounding */
}

@keyframes holoShine {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -150% 0;
    }
}


/* Magnified Card Style (Click Focus) */
.magnified-pack-card {
    /* Inherits base .card styles */
    /* Positioned via JS */
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    /* Smooth appearance */
    /* JS will set position, z-index, and scale */
}


/* Controls Container */
.pack-controls-overlay {
    position: absolute;
    /* Position relative to opening area */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 25px;
    z-index: 100;
    /* Above cards */
    opacity: 0;
    /* Hidden initially */
    animation: controlsFadeInOverlay 0.5s ease-out 1s forwards;
    /* Fade in after flip */
}

@keyframes controlsFadeInOverlay {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Control Buttons */
/* Restyle Okay Button */
.pack-okay-button-overlay {
    padding: 12px 40px;
    /* Larger padding */
    font-size: 1.3em;
    /* Larger font */
    font-family: var(--font-title);
    /* Use title font */
    border-radius: 25px;
    /* More rounded */
    background: linear-gradient(180deg, var(--accent-color) 0%, #c8304d 100%);
    /* Accent gradient */
    border: 2px solid rgba(255, 255, 255, 0.5);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-out;
}

.pack-okay-button-overlay:hover {
    background: linear-gradient(180deg, #f05570 0%, var(--accent-color) 100%);
    border-color: #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), 0 0 10px var(--accent-color), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.pack-okay-button-overlay:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(0, 0, 0, 0.3);
}

/* Remove styles for non-existent button */
/*
.pack-view-collection-button-overlay { ... }
.pack-view-collection-button-overlay:hover { ... }
*/
.pack-view-collection-button-overlay {
    /* Use secondary style */
    background: linear-gradient(180deg, #4a4a6a 0%, #3a3a5a 100%);
    border-color: #777;
}

.pack-view-collection-button-overlay:hover {
    background: linear-gradient(180deg, #6a6a8a 0%, #5a5a7a 100%);
    border-color: #aaa;
    color: var(--text-light);
}

.share-button:hover {
    background: linear-gradient(180deg, #60f0e0 0%, #30c0b0 100%);
    border-color: #60f0e0;
    color: var(--primary-bg);
}

/* Style disabled buttons */
button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: #555 !important;
    /* Override gradients */
    border-color: #777 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: none;
    /* Prevent hover/active effects */
}

/* --- End Secret Shop Styles --- */


/* "New Card" Indicator Styles */
#pack-opening-area .pack-revealed-card-overlay.new-card-indicator::before {
    content: 'NEW!';
    position: absolute;
    top: 8px;
    /* Adjust position */
    right: 8px;
    /* Adjust position */
    background-color: var(--accent-color);
    /* Bright background */
    color: #fff;
    /* White text */
    font-size: 0.75em;
    /* Small text */
    font-weight: bold;
    padding: 4px 7px;
    /* Adjust padding */
    border-radius: 4px;
    z-index: 5;
    /* Above card content */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Optional: Add animation */
    animation: newIndicatorGlow 1.5s ease-in-out infinite alternate;
    pointer-events: none;
    /* Don't interfere with card click */
}

@keyframes newIndicatorGlow {
    from {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 5px var(--accent-color);
        transform: scale(1);
    }

    to {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 12px #ff8a8a;
        transform: scale(1.05);
    }

    /* Lighter glow + slight scale */
}

/* --- Coin Feedback Animation --- */
@keyframes floatToCoinCounter {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        /* Target coordinates will be set via JS */
        transform: translate(var(--target-x, 0), var(--target-y, 0)) scale(0.5);
    }
}

.coin-feedback-popup {
    position: absolute;
    /* Position relative to the triggering element initially */
    background-color: rgba(255, 215, 0, 0.9);
    /* Gold background */
    color: #333;
    /* Dark text */
    padding: 5px 10px;
    border-radius: 15px;
    /* Pill shape */
    font-size: 1.1em;
    font-weight: bold;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    /* Above modals */
    pointer-events: none;
    white-space: nowrap;
    /* Animation will be applied via JS */
    /* animation: floatToCoinCounter 1.5s ease-in forwards; */
}

.coin-feedback-popup::before {
    /* Add coin icon */
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='10' cy='16' rx='7' ry='4' fill='%23c9a84c' opacity='0.5'/%3E%3Cellipse cx='10' cy='14' rx='7' ry='4' fill='%23c9a84c' opacity='0.7'/%3E%3Cellipse cx='10' cy='12' rx='7' ry='4' fill='%23c9a84c'/%3E%3Cellipse cx='10' cy='12' rx='4.5' ry='2.5' fill='none' stroke='%23ffd54f' stroke-width='0.7' opacity='0.6'/%3E%3Ctext x='10' y='13.5' text-anchor='middle' font-size='5' font-weight='bold' fill='%23ffd54f' font-family='serif'%3EA%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
    opacity: 0.8;
}

/* --- Collection Screen Layout --- */
.collection-layout {
    display: flex;
    gap: 20px;
    padding-top: 15px;
    /* Adjust padding */
    padding-bottom: 15px;
}

.collection-main-area {
    flex-grow: 1;
    /* Main area takes most space */
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent flex item overflow */
}

#collection-list-main {
    flex-grow: 1;
    /* Allow list to fill space */
    height: auto;
    /* Override fixed height if previously set */
}

/* --- Sell Portal Styles --- */
#sell-portal-area {
    flex-basis: 250px;
    /* Fixed width for the portal */
    flex-shrink: 0;
    border: 2px dashed var(--accent-color);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 52, 96, 0.5);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#sell-portal-area h4 {
    margin-top: 0;
    color: var(--accent-color);
}

#sell-portal-area p {
    font-size: 0.9em;
    color: var(--text-light);
    opacity: 0.8;
    margin-bottom: 20px;
}

.portal-visual {
    width: 100px;
    height: 100px;
    border: 3px solid var(--aether-color);
    border-radius: 50%;
    margin-bottom: 15px;
    background: radial-gradient(circle, rgba(64, 224, 208, 0.1) 0%, rgba(22, 33, 62, 0.5) 70%);
    box-shadow: 0 0 15px var(--aether-color), inset 0 0 10px rgba(64, 224, 208, 0.5);
    animation: portalPulse 3s infinite ease-in-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes portalPulse {
    0% {
        box-shadow: 0 0 15px var(--aether-color), inset 0 0 10px rgba(64, 224, 208, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px var(--aether-color), inset 0 0 15px rgba(64, 224, 208, 0.7);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 15px var(--aether-color), inset 0 0 10px rgba(64, 224, 208, 0.5);
        transform: scale(1);
    }
}

/* Style when dragging over the portal */
#sell-portal-area.drag-over {
    background-color: rgba(64, 224, 208, 0.2);
    /* Aether color highlight */
    border-color: #fff;
}

#sell-portal-area.drag-over .portal-visual {
    transform: scale(1.1);
    box-shadow: 0 0 30px var(--aether-color), inset 0 0 20px rgba(64, 224, 208, 0.8);
}

#sell-portal-feedback {
    margin-top: 10px;
    font-size: 0.9em;
    min-height: 1.2em;
    /* Reserve space */
}

#sell-portal-feedback.success {
    color: #90ee90;
    /* Light green */
}

#sell-portal-feedback.error {
    color: #ff6b6b;
    /* Light red */
}

/* --- Avatar Styles --- */
.header-avatar {
    width: 40px;
    /* Adjust size as needed */
    height: 40px;
    border-radius: 50%;
    /* Make it circular */
    border: 2px solid var(--accent-color);
    margin-right: 10px;
    /* Space between avatar and name */
    vertical-align: middle;
    /* Align with text */
    object-fit: cover;
    /* Ensure image covers the area */
}

.player-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--secondary-bg);
    border: 3px solid var(--zone-border);
    margin: 15px auto;
    /* Center horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Clip image */
}

.player-avatar-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Account Info Screen Styles --- */
#screen-account-info {
    /* Use flex or grid for layout */
}

.account-info-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 40px;
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.account-details,
.avatar-selection {
    padding: 20px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--zone-border);
    border-radius: 6px;
}

.account-details h3,
.avatar-selection h3 {
    margin-top: 0;
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.current-avatar-section,
.account-name-section {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.current-avatar-section label,
.account-name-section label {
    font-weight: bold;
    width: 120px;
    /* Align labels */
    flex-shrink: 0;
}

/* Status message styles */
#account-status-message {
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
}

#account-status-message.success {
    background-color: rgba(0, 128, 0, 0.2);
    color: #90ee90;
    /* Light green */
    border: 1px solid #008000;
}

#account-status-message.error {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff6b6b;
    /* Light red */
    border: 1px solid #ff0000;
}

.account-avatar-display {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    object-fit: cover;
}

#account-display-name {
    padding: 8px 12px;
    border: 1px solid var(--zone-border);
    background-color: var(--primary-bg);
    color: var(--text-light);
    border-radius: 4px;
    font-size: 1em;
    flex-grow: 1;
    /* Allow input to take remaining space */
}

#account-save-changes {
    display: block;
    /* Make button full width */
    width: 100%;
    margin-top: 10px;
}

#account-status-message {
    margin-top: 15px;
    font-weight: bold;
    text-align: center;
    min-height: 1.2em;
    /* Reserve space */
}

.avatar-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    /* Responsive grid */
    gap: 15px;
    max-height: 300px;
    /* Limit height and allow scroll */
    overflow-y: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.avatar-option {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* Transparent border for spacing */
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
    object-fit: cover;
    background-color: var(--primary-bg);
    /* Background for loading/error */
}

.avatar-option:hover {
    border-color: var(--text-light);
    transform: scale(1.05);
}

.avatar-option.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
    transform: scale(1.1);
}

#account-logout-button {
    margin-top: 30px;
    display: block;
    /* Make it block level */
    margin-left: auto;
    /* Push to right */
    margin-right: auto;
    /* Center it */
    width: fit-content;
    /* Size to content */
}

/* --- Custom Room Styles --- */
.custom-room-view {
    width: 100%;
    padding: 20px;
    background-color: rgba(26, 26, 46, 0.8);
    border-radius: 8px;
    margin-bottom: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.custom-room-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.custom-room-list-container {
    background-color: rgba(15, 52, 96, 0.7);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid var(--zone-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.custom-room-list-container h3 {
    margin-top: 0;
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-room-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 10px;
    padding: 15px;
    background-color: rgba(22, 33, 62, 0.7);
    border-radius: 6px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    align-items: center;
    background-color: rgba(22, 33, 62, 0.8);
    border: 1px solid var(--zone-border);
    border-radius: 5px;
    padding: 15px;
    transition: background-color 0.2s;
}

.custom-room-item:hover {
    background-color: rgba(22, 33, 62, 1);
}

.custom-room-item .room-name {
    font-weight: bold;
    font-size: 1.1em;
}

.form-group {
    margin-bottom: 20px;
}

.form-group h4 {
    margin-bottom: 10px;
    color: var(--accent-color);
}

.rule-option {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.rule-option label {
    width: 200px;
    margin-right: 10px;
}

.rule-option input[type="number"] {
    width: 80px;
    padding: 5px;
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--card-border);
    border-radius: 4px;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.custom-room-item .join-room-button {
    padding: 8px 15px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-room-item .join-room-button:hover {
    background-color: #d03a50;
}

.custom-room-item .join-room-button:disabled {
    background-color: #666;
    cursor: not-allowed;
}

.primary-button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.primary-button:hover {
    background-color: #d03a50;
}

.secondary-button {
    background-color: var(--tertiary-bg);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.secondary-button:hover {
    background-color: #0a2845;
    margin: 0;
}

/* Room status colors */
.room-status-waiting {
    border-left: 4px solid #ffd700;
    /* Gold */
}

.room-status-ready {
    border-left: 4px solid #40e0d0;
    /* Turquoise */
}

.room-status-in-progress {
    border-left: 4px solid #ff6b6b;
    /* Light red */
    opacity: 0.7;
}

.room-status-completed {
    border-left: 4px solid #cccccc;
    /* Grey */
    opacity: 0.5;
}

.no-rooms-message {
    text-align: center;
    padding: 20px;
    color: #aaa;
    font-style: italic;
}

/* Create Room Form */
#create-room-form {
    background-color: rgba(15, 52, 96, 0.7);
    border: 1px solid var(--zone-border);
    border-radius: 8px;
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group h4 {
    color: var(--accent-color);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 5px;
}

.rule-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    background-color: rgba(22, 33, 62, 0.5);
    border-radius: 5px;
}

.rule-option label {
    flex: 1;
}

.rule-option input[type="number"] {
    width: 80px;
    padding: 5px;
    background-color: var(--secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--zone-border);
    border-radius: 4px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Room Details View */
#room-details-content {
    background-color: rgba(15, 52, 96, 0.7);
    border: 1px solid var(--zone-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.room-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--accent-color);
}

.room-details-header h3 {
    margin: 0;
    color: var(--accent-color);
}

.room-status-badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
}

.status-waiting {
    background-color: #ffd700;
    color: #333;
}

.status-ready {
    background-color: #40e0d0;
    color: #333;
}

.status-in-progress {
    background-color: #ff6b6b;
    color: #fff;
}

.room-details-section {
    margin-bottom: 15px;
}

.room-details-section h4 {
    color: var(--text-light);
    margin-bottom: 10px;
}

.players-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.player-item {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: rgba(22, 33, 62, 0.5);
    border-radius: 5px;
}

.player-item.host::after {
    content: 'Host';
    margin-left: auto;
    padding: 2px 8px;
    background-color: var(--accent-color);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8em;
}

.rules-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rule-item {
    padding: 8px;
    background-color: rgba(22, 33, 62, 0.5);
    border-radius: 5px;
}

.room-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- Feathered Fugue Selection Modal --- */
#fugue-selection-modal .modal-content {
    max-width: 80%;
    /* Allow wider modal for cards */
    max-height: 80vh;
}

#fugue-selection-modal h2 {
    color: var(--aether-color);
    /* Use a distinct color */
}

#fugue-card-options {
    display: flex;
    flex-wrap: wrap;
    /* Allow cards to wrap */
    justify-content: center;
    /* Center cards */
    gap: 15px;
    /* Space between cards */
    margin: 20px 0;
    padding: 10px;
    max-height: 50vh;
    /* Limit height and allow scroll */
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.2);
    /* Darker background for contrast */
    border: 1px solid var(--zone-border);
    border-radius: 5px;
}

/* Style cards within the Fugue modal */
.fugue-options .card {
    cursor: pointer;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    border: 2px solid transparent;
    /* Add border for selection indicator */
}

.fugue-options .card:hover {
    transform: scale(1.03);
    box-shadow: 0 0 10px var(--aether-color);
}

.fugue-options .card.selected {
    border-color: var(--accent-color);
    /* Highlight selected cards */
    box-shadow: 0 0 15px var(--accent-color);
    transform: scale(1.02);
    /* Slightly different scale when selected */
}

#fugue-selection-modal .modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    /* Space out buttons */
}

#fugue-selection-modal button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #555;
    /* Grey out disabled button */
    border-color: #777;
    box-shadow: none;
    transform: none;
}

/* --- Opponent Hand Reveal Area --- */
#opponent-hand-reveal-area {
    position: absolute;
    top: 10px;
    /* Position near the top */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 900px;
    background-color: rgba(15, 52, 96, 0.9);
    /* Dark blue, slightly transparent */
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 900;
    /* Below modals but above most battle elements */
    display: none;
    /* Hidden by default */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#opponent-hand-reveal-area.visible {
    display: block;
    opacity: 1;
}

#opponent-hand-reveal-area h4 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    color: var(--accent-color);
    font-family: var(--font-title);
}

.hand-reveal-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* Allow cards to wrap if many */
    gap: 10px;
    min-height: 100px;
    /* Ensure some height even if empty */
}

/* Style cards within the reveal area (make them smaller) */
.hand-reveal-cards .card {
    transform: scale(0.7);
    /* Make cards smaller */
    margin: -15px -10px;
    /* Adjust negative margins due to scaling */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    /* No hover effects needed usually */
}

/* --- Dynamic Battlefield Backgrounds --- */
#screen-battle.battle-bg-forest {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('images/backgrounds/battle-forest.png');
    /* Replace with actual image path */
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
    /* Smooth transition */
}

#screen-battle.battle-bg-volcano {
    background-image: linear-gradient(rgba(50, 0, 0, 0.5), rgba(100, 10, 0, 0.7)), url('images/backgrounds/battle-volcano.png');
    /* Replace with actual image path */
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
    /* Smooth transition */
}

#screen-battle.battle-bg-sanctuary {
    background-image: linear-gradient(rgba(100, 150, 255, 0.3), rgba(200, 220, 255, 0.5)), url('images/backgrounds/battle-sanctuary.png');
    /* Replace with actual image path */
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
    /* Smooth transition */
}


/* --- Battlefield Visual Effects --- */
@keyframes flashEffect {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    50% {
        box-shadow: 0 0 30px 20px rgba(255, 255, 255, 0.9);
    }

    /* Increased spread/blur */
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Example: Overlay for effects */
#battle-effect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* Don't interfere with clicks */
    z-index: 50;
    /* Above background, below cards/UI */
    background-color: transparent;
    /* Default */
    border-radius: inherit;
    /* Match parent screen's border radius */
    overflow: hidden;
    /* Keep effects contained */
}

/* Example: Applying flash to the overlay */
#battle-effect-overlay.flash-effect {
    animation: flashEffect 0.5s ease-out;
}

/* Example: Ongoing effect visual (Songbird Sanctuary) */
#screen-battle.effect-songbird-sanctuary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255, 255, 180, 0.18) 0%, transparent 45%),
        /* Adjusted position/size */
        radial-gradient(circle at 80% 75%, rgba(180, 255, 255, 0.12) 0%, transparent 40%);
    /* Adjusted position/size */
    pointer-events: none;
    z-index: 6;
    /* Just above the background */
    opacity: 0.7;
    animation: subtlePulse 6s infinite ease-in-out alternate;
    /* Slower pulse */
    border-radius: inherit;
    /* Match parent */
}

@keyframes subtlePulse {
    from {
        opacity: 0.4;
        filter: blur(2px);
    }

    /* Add subtle blur */
    to {
        opacity: 0.8;
        filter: blur(0px);
    }
}

/* --------------------- Pre-Battle Setup Screen Styles --------------------- */
#screen-pre-battle-setup {
    background: url('images/backgrounds/pre_battle_bg.jpg') no-repeat center center;
    background-size: cover;
    color: #ffffff;
    padding: 20px;
    height: calc(100vh - 100px);
    overflow-y: auto;
}

.pre-battle-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.pre-battle-difficulty {
    grid-column: 1;
    grid-row: 1;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 15px;
}

.pre-battle-opponent-selection {
    grid-column: 2;
    grid-row: 1 / span 2;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 15px;
    overflow-y: auto;
    max-height: 500px;
}

.pre-battle-configuration {
    grid-column: 1;
    grid-row: 2;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 15px;
}

.pre-battle-player-preview {
    grid-column: 1 / span 2;
    grid-row: 3;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 15px;
}

.pre-battle-actions {
    grid-column: 1 / span 2;
    text-align: center;
    margin-top: 20px;
}

/* Difficulty Options */
.difficulty-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.difficulty-option {
    background-color: rgba(30, 30, 60, 0.8);
    border: 2px solid #3a3a6a;
    border-radius: 8px;
    padding: 10px;
    flex: 1;
    min-width: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.difficulty-option:hover {
    background-color: rgba(60, 60, 100, 0.8);
    transform: translateY(-3px);
}

.difficulty-option.selected {
    border-color: #6a9cff;
    box-shadow: 0 0 15px #6a9cff;
    background-color: rgba(50, 50, 120, 0.9);
}

.difficulty-option h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #ffffff;
}

.difficulty-option p {
    margin: 0;
    font-size: 0.9em;
    color: #cccccc;
}

/* Opponent Selection */
.opponent-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.opponent-option {
    display: flex;
    background-color: rgba(30, 30, 60, 0.8);
    border: 2px solid #3a3a6a;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.opponent-option:hover {
    background-color: rgba(60, 60, 100, 0.8);
    transform: translateX(-3px);
}

.opponent-option.selected {
    border-color: #6a9cff;
    box-shadow: 0 0 15px #6a9cff;
    background-color: rgba(50, 50, 120, 0.9);
}

.opponent-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #6a6a9a;
    flex-shrink: 0;
}

.opponent-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opponent-details {
    margin-left: 15px;
    flex-grow: 1;
}

.opponent-details h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #ffffff;
}

.opponent-details p {
    margin: 4px 0;
    color: #cccccc;
    font-size: 0.9em;
}

.opponent-key-cards {
    font-style: italic;
    color: #aaaaff !important;
}

.win-record {
    font-weight: bold;
    color: #ffcc00 !important;
}

/* Battle Configuration */
.config-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.config-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.config-option label {
    flex: 1;
    color: #ffffff;
}

.config-option input,
.config-option select {
    flex: 1;
    background-color: rgba(40, 40, 80, 0.8);
    border: 1px solid #5a5a8a;
    border-radius: 4px;
    padding: 8px;
    color: #ffffff;
}

/* Player Deck Preview */
.deck-preview {
    background-color: rgba(30, 30, 60, 0.8);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    min-height: 100px;
}

/* Buttons */
#start-battle-button,
#return-to-menu-button {
    background: linear-gradient(to bottom, #4a6cd4, #2a4cb4);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 25px;
    margin: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

#start-battle-button {
    background: linear-gradient(to bottom, #4ad45a, #2ab44a);
    font-weight: bold;
}

#start-battle-button:hover {
    background: linear-gradient(to bottom, #3ae45a, #20c440);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.3);
}

#return-to-menu-button:hover {
    background: linear-gradient(to bottom, #5a7ce4, #3a5cc4);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 255, 0.3);
}

/* --------------------- Enhanced Versus Screen Styles --------------------- */
#screen-versus {
    background: linear-gradient(135deg,
            rgba(16, 21, 62, 0.95) 0%,
            rgba(26, 26, 46, 0.95) 50%,
            rgba(16, 21, 62, 0.95) 100%),
        url('images/backgrounds/versus_bg.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 100px);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

#screen-versus::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 204, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(138, 99, 210, 0.1) 0%, transparent 50%);
    pointer-events: none;
    animation: backgroundPulse 4s ease-in-out infinite;
}

.versus-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 1300px;
    position: relative;
    z-index: 2;
}

.versus-player,
.versus-opponent {
    text-align: center;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: slidein 1.2s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 204, 0, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.versus-player {
    transform: perspective(1000px) rotateY(10deg);
    animation-name: slideinLeft;
    border-left: 3px solid #ffcc00;
}

.versus-opponent {
    transform: perspective(1000px) rotateY(-10deg);
    animation-name: slideinRight;
    border-right: 3px solid #8a63d2;
}

.versus-avatar {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffcc00;
    box-shadow:
        0 0 30px rgba(255, 204, 0, 0.8),
        inset 0 0 20px rgba(255, 204, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

.versus-opponent .versus-avatar {
    border-color: #8a63d2;
    box-shadow:
        0 0 30px rgba(138, 99, 210, 0.8),
        inset 0 0 20px rgba(138, 99, 210, 0.1);
}

.versus-avatar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffcc00, #ff8c00, #ffcc00);
    animation: rotateBorder 3s linear infinite;
    z-index: -1;
}

.versus-opponent .versus-avatar::before {
    background: conic-gradient(from 0deg, #8a63d2, #5f43b2, #8a63d2);
}

.versus-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.versus-avatar:hover {
    transform: scale(1.05);
}

.versus-avatar:hover img {
    transform: scale(1.1);
}

.versus-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.versus-text {
    font-size: 6em;
    font-weight: 900;
    color: #ffcc00;
    text-shadow:
        0 0 20px rgba(255, 204, 0, 1),
        0 0 40px rgba(255, 204, 0, 0.8),
        0 0 60px rgba(255, 204, 0, 0.6);
    animation: enhancedPulse 2.5s ease-in-out infinite;
    background: linear-gradient(45deg, #ffcc00, #ff8c00, #ffcc00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.versus-text::before {
    content: 'VS';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, #8a63d2, #5f43b2, #8a63d2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    transform: translate(3px, 3px);
    z-index: -1;
}

#versus-player-name,
#versus-opponent-name {
    font-size: 2.2em;
    margin: 15px 0 10px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
    font-weight: bold;
    background: linear-gradient(45deg, #ffffff, #e0e0e0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#versus-player-deck-name,
#versus-opponent-deck-name {
    font-size: 1.4em;
    color: #a7c7e7;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(167, 199, 231, 0.6);
    font-style: italic;
    opacity: 0.9;
}

#versus-continue-button {
    background: linear-gradient(135deg, #4ad45a, #2ab44a, #1a9a3a);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px 35px;
    margin: 20px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: fadeInScale 2s ease-in-out 1s forwards;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow:
        0 8px 25px rgba(74, 212, 90, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

#versus-continue-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

#versus-continue-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 15px 35px rgba(74, 212, 90, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #5ae46a, #3ac45a, #2aaa4a);
}

#versus-continue-button:hover::before {
    left: 100%;
}

/* Enhanced Versus Screen Animations */
@keyframes slideinLeft {
    from {
        transform: translateX(-400px) perspective(1000px) rotateY(60deg) scale(0.8);
        opacity: 0;
        filter: blur(5px);
    }

    to {
        transform: translateX(0) perspective(1000px) rotateY(10deg) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideinRight {
    from {
        transform: translateX(400px) perspective(1000px) rotateY(-60deg) scale(0.8);
        opacity: 0;
        filter: blur(5px);
    }

    to {
        transform: translateX(0) perspective(1000px) rotateY(-10deg) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes enhancedPulse {
    0% {
        transform: scale(1);
        text-shadow:
            0 0 20px rgba(255, 204, 0, 1),
            0 0 40px rgba(255, 204, 0, 0.8),
            0 0 60px rgba(255, 204, 0, 0.6);
    }

    50% {
        transform: scale(1.1);
        text-shadow:
            0 0 30px rgba(255, 204, 0, 1),
            0 0 60px rgba(255, 204, 0, 0.9),
            0 0 90px rgba(255, 204, 0, 0.7);
    }

    100% {
        transform: scale(1);
        text-shadow:
            0 0 20px rgba(255, 204, 0, 1),
            0 0 40px rgba(255, 204, 0, 0.8),
            0 0 60px rgba(255, 204, 0, 0.6);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes backgroundPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --------------------- Post-Battle Results Screen Styles --------------------- */
#screen-battle-results {
    background: url('images/backgrounds/results_bg.jpg') no-repeat center center;
    background-size: cover;
    color: #ffffff;
    padding: 20px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.results-header {
    text-align: center;
    margin-bottom: 20px;
}

#results-outcome {
    font-size: 3em;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    margin: 20px 0;
    animation: outcomeGlow 2s infinite alternate;
}

.results-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 90%;
    max-width: 1200px;
}

.results-stats,
.results-rewards,
.results-performance {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Enhanced Post-Battle Screen Styles */

/* MVP Section */
.mvp-section {
    background-color: rgba(255, 215, 0, 0.1);
    border: 2px solid #FFD700;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    animation: mvpGlow 2s infinite alternate;
}

.mvp-card-spotlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mvp-card-image {
    width: 120px;
    height: 160px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    border: 3px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    animation: mvpCardPulse 2s infinite;
}

.mvp-details {
    text-align: left;
}

.mvp-card-name {
    font-size: 1.5em;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 10px;
}

.mvp-damage {
    font-size: 1.2em;
    color: #FF6B6B;
    font-weight: bold;
    margin-bottom: 10px;
}

.mvp-badge {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    text-shadow: none;
    animation: badgeShine 3s infinite;
}

/* Performance Grade Styling */
.performance-grade {
    font-size: 1.3em !important;
    font-weight: bold !important;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
}

.performance-grade.grade-s {
    background: linear-gradient(45deg, #FF6B6B, #FFD93D);
    color: #000;
}

.performance-grade.grade-a {
    background: linear-gradient(45deg, #4ECDC4, #44A08D);
    color: #fff;
}

.performance-grade.grade-b {
    background: linear-gradient(45deg, #6C5CE7, #A8E6CF);
    color: #fff;
}

.performance-grade.grade-c {
    background: linear-gradient(45deg, #95A5A6, #BDC3C7);
    color: #000;
}

/* Card Drops Section */
.card-drops-section {
    background-color: rgba(0, 150, 255, 0.1);
    border: 2px solid #0096FF;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
}

.card-drops-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

.card-drop {
    width: 100px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.5s ease;
    cursor: pointer;
}

.card-drop.card-drop-revealed {
    transform: scale(1);
    opacity: 1;
    animation: cardDropReveal 0.8s ease;
}

.card-drop.new-card {
    animation: newCardShine 2s infinite alternate;
}

.card-drop-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.card-drop-image {
    width: 100%;
    height: 70%;
    object-fit: cover;
}

.card-drop-name {
    position: absolute;
    bottom: 30px;
    left: 5px;
    right: 5px;
    font-size: 0.7em;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 2px;
    border-radius: 3px;
}

.card-drop-rarity {
    position: absolute;
    bottom: 15px;
    left: 5px;
    right: 5px;
    font-size: 0.6em;
    text-align: center;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;
}

.card-drop-bonus {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    font-size: 0.5em;
    text-align: center;
    background-color: rgba(255, 215, 0, 0.9);
    color: #000;
    padding: 2px;
    border-radius: 3px;
    font-weight: bold;
}

.new-card-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #FF6B6B;
    color: #fff;
    font-size: 0.5em;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    animation: newIndicatorPulse 1s infinite;
}

/* Rarity-specific styling */
.card-drop.rarity-common .card-drop-inner {
    border: 2px solid #95A5A6;
}

.card-drop.rarity-common .card-drop-rarity {
    background-color: #95A5A6;
    color: #000;
}

.card-drop.rarity-uncommon .card-drop-inner {
    border: 2px solid #2ECC71;
}

.card-drop.rarity-uncommon .card-drop-rarity {
    background-color: #2ECC71;
    color: #fff;
}

.card-drop.rarity-rare .card-drop-inner {
    border: 2px solid #3498DB;
}

.card-drop.rarity-rare .card-drop-rarity {
    background-color: #3498DB;
    color: #fff;
}

.card-drop.rarity-legendary .card-drop-inner {
    border: 2px solid #E74C3C;
}

.card-drop.rarity-legendary .card-drop-rarity {
    background-color: #E74C3C;
    color: #fff;
}

/* Animations */
@keyframes mvpGlow {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    }

    100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

@keyframes mvpCardPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badgeShine {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
}

@keyframes cardDropReveal {
    0% {
        transform: scale(0) rotateY(180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.1) rotateY(90deg);
        opacity: 0.5;
    }

    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes newCardShine {
    0% {
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.9);
    }
}

@keyframes newIndicatorPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes outcomeGlow {
    0% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    100% {
        text-shadow: 0 0 25px rgba(255, 255, 255, 1);
    }
}

/* --- Social and Notification Styles Removed --- */


/* --- Deck Manager Three-Column Layout --- */
.deck-builder-layout.three-column {
    display: flex;
    gap: 20px;
    height: calc(100% - 70px);
    /* Adjust based on control bar height */
    overflow: hidden;
}

.deck-builder-collection-panel,
.deck-builder-deck-panel,
.deck-builder-info-panel {
    display: flex;
    flex-direction: column;
    background-color: rgba(15, 52, 96, 0.65);
    /* Slightly adjusted background */
    border: 1px solid var(--zone-border);
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
    /* Prevent panel content overflow */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

.deck-builder-collection-panel {
    flex: 1 1 35%;
    /* Collection takes slightly more space */
}

.deck-builder-deck-panel {
    flex: 1 1 30%;
    /* Deck list in the middle */
}

.deck-builder-info-panel {
    flex: 1 1 35%;
    /* Info/stats panel */
}

/* Panel Headers */
.deck-builder-collection-panel h3,
.deck-builder-deck-panel h3,
.deck-builder-info-panel h4 {
    /* Use h4 for sub-sections in info panel */
    margin-top: 0;
    margin-bottom: 10px;
    font-family: var(--font-title);
    color: var(--accent-color);
    font-size: 1.2em;
    text-align: center;
    border-bottom: 1px solid var(--zone-border);
    padding-bottom: 8px;
    flex-shrink: 0;
    /* Prevent header shrinking */
}

/* Ensure card lists fill space and scroll */
.deck-builder-collection-panel .collection-controls,
.deck-builder-deck-panel .deck-view-options {
    flex-shrink: 0;
    /* Prevent controls shrinking */
    margin-bottom: 10px;
}

.deck-builder-collection-panel #collection-list-deck,
.deck-builder-deck-panel #deck-list {
    flex-grow: 1;
    /* Allow list to fill space */
    overflow-y: auto;
    /* Enable scrolling */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    /* Darker inner background */
    border-radius: 5px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    /* Subtle inner border */
    min-height: 150px;
    /* Ensure minimum height */
}

/* Info Panel Content Layout */
.deck-builder-info-panel .deck-manager-controls {
    flex-shrink: 0;
    margin-bottom: 15px;
    /* Styles for buttons within controls are already defined */
}

.deck-builder-info-panel .deck-customization {
    flex-shrink: 0;
    margin-bottom: 15px;
}

.deck-builder-info-panel .deck-analysis-preview {
    flex-shrink: 0;
    margin-top: auto;
    /* Push analysis to bottom if space allows */
    padding-top: 10px;
    border-top: 1px solid var(--zone-border);
}

/* Adjust mana curve display within info panel */
.deck-builder-info-panel #mana-curve-display {
    height: 60px;
    /* Slightly smaller height */
}

/* Adjust deck stats display */
.deck-builder-info-panel .deck-stats-display {
    margin-top: 10px;
}

/* Remove old two-column layout styles if they exist */
.deck-builder-left-panel,
.deck-builder-right-panel {
    /* These might be removed or overridden by the new panel styles */
}

/* Empty state for notifications */
.empty-state {
    color: #aaa;
    text-align: center;
    padding: 20px;
}

/* --- End Social Sidebar Styles --- */

/* --- Shop Screen Layout --- */
#screen-shop {
    background: url('../images/backgrounds/shop_bg.jpg') no-repeat center center fixed;
    /* Themed background */
    background-size: cover;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    /* Use flex for centering layout */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Ensure it takes full viewport height */
}

.shop-layout {
    display: flex;
    align-items: flex-start;
    /* Align items to the top */
    gap: 30px;
    max-width: 1400px;
    /* Limit overall width - Increased */
    width: 95%;
    /* Use percentage for responsiveness - Increased */
    margin: 20px auto;
    /* Center the layout */
    background-color: #2c3e50;
    /* Dark slate blue - Replaced checkered/dark semi-transparent */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid #4a6278;
    /* Adjusted border color */
}

#shopkeeper-container {
    flex: 0 0 250px;
    /* Slightly larger fixed width for shopkeeper */
    text-align: center;
    position: relative;
    /* For dialogue bubble positioning */
    margin-top: 20px;
    /* Add some top margin */
}

#shopkeeper-image {
    max-width: 100%;
    /* Make image responsive within container */
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    /* Space below image */
    border: 2px solid #4a3a2a;
    /* Add a border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#shopkeeper-dialogue-bubble {
    /* Keep existing dialogue styles, adjust position if needed */
    position: absolute;
    bottom: 100%;
    /* Position above the image */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 15px;
    /* Space between bubble and image */
    width: 250px;
    /* Adjust width */
    /* Ensure dialogue bubble styles are defined elsewhere or add them */
    background-color: rgba(40, 40, 40, 0.9);
    color: #eee;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #666;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    font-size: 0.95em;
}

.shop-content-column {
    flex: 1;
    /* Allow content to take remaining space */
}

.shop-content-column h2 {
    color: #ffd700;
    /* Gold color for title */
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.shop-items-container {
    display: flex;
    /* Arrange packs horizontally */
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 25px;
    /* Space between packs */
    justify-content: center;
    /* Center packs */
}

.shop-item {
    background-color: #34495e;
    /* Slightly lighter slate blue - New item background */
    border: 1px solid #4a6278;
    /* Adjusted border to match layout */
    border-radius: 10px;
    padding: 20px;
    width: 200px;
    /* Slightly wider pack item */
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Space out content vertically */
}

.shop-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.5);
    /* Gold border on hover */
}

.shop-item-icon {
    width: 100px;
    /* Adjust icon size */
    height: 140px;
    /* Adjust icon size */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 15px auto;
    /* Center icon */
    border-radius: 5px;
}

/* Specific pack icons (assuming images exist) */
.pack-icon.starter {
    background-image: url('../images/packs/pack_starter.png');
}

.pack-icon.rare {
    background-image: url('../images/packs/pack_rare.png');
}

.pack-icon.legendary {
    background-image: url('../images/packs/pack_legendary.png');
}

.pack-icon.birdwell {
    background-image: url('../images/packs/pack_birdwell.png');
}

.pack-icon.basement {
    background-image: url('../images/packs/pack_basement.png');
}

.shop-item h3 {
    margin: 10px 0 5px 0;
    font-size: 1.2em;
    color: #ecf0f1;
    /* Warmer off-white */
}

.shop-item-description {
    font-size: 0.9em;
    color: #bdc3c7;
    /* Lighter grey */
    min-height: 40px;
    /* Adjust height */
    margin-bottom: 15px;
    flex-grow: 1;
    /* Allow description to take up space */
}

.shop-item-cost {
    font-weight: bold;
    font-size: 1.1em;
    color: #ffd700;
    /* Gold color for cost */
    margin-bottom: 15px;
}

.buy-button {
    /* Style the buy button */
    padding: 10px 20px;
    background: linear-gradient(145deg, #16a085, #1abc9c);
    /* Teal gradient - New button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.buy-button:hover {
    background: linear-gradient(145deg, #1abc9c, #2ecc71);
    /* Lighter teal/green on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.buy-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Riddle/Promo Code Sections */
#riddle-section,
#promo-code-section,
#secret-shop-section {
    margin-top: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    /* Slightly darker */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#riddle-section h4,
#promo-code-section h4,
#secret-shop-section h4 {
    margin-bottom: 15px;
    color: #ddd;
    font-size: 1.1em;
}

#riddle-answer-input,
#promo-code-input {
    padding: 8px 10px;
    margin-right: 8px;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #333;
    color: #eee;
}

#submit-riddle-answer,
#submit-promo-code,
#close-secret-shop {
    padding: 8px 15px;
    cursor: pointer;
    /* Use similar style as buy-button or a secondary style */
    background-color: #555;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

#submit-riddle-answer:hover,
#submit-promo-code:hover,
#close-secret-shop:hover {
    background-color: #777;
}

#secret-shop-items {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 15px;
}

.secret-shop-item {
    /* Similar styling to .shop-item but maybe distinct */
    background-color: rgba(75, 0, 130, 0.5);
    /* Indigo/Purple background */
    border: 1px solid #8a2be2;
    /* Blue Violet border */
    border-radius: 8px;
    padding: 15px;
    width: 180px;
    text-align: center;
    color: #eee;
    cursor: pointer;
    /* Added cursor */
    /* 3D Effect Start */
    transform-style: preserve-3d;
    transform: rotateY(0deg) rotateX(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

    /* Hover effect for secret shop item */
    .secret-shop-item:hover {
        /* 3D Effect Hover Start */
        transform: rotateY(5deg) rotateX(5deg) scale(1.03);
        box-shadow: 8px 8px 20px rgba(40, 0, 70, 0.6);
        /* Darker purple shadow, enhanced for 3D */
        /* 3D Effect Hover End */
    }

    /* 3D Effect End */
}

.secret-shop-item h5 {
    margin: 5px 0;
    color: #f0f0f0;
}

.secret-shop-item .shop-item-cost {
    color: #9370db;
    /* Medium Purple cost */
}

.secret-shop-item button {
    /* Style buy button for secret items */
    padding: 6px 12px;
    background-color: #6a0dad;
    /* Purple */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.secret-shop-item button:hover {
    background-color: #8a2be2;
    /* Lighter purple */
}

/* --- Bundle Offers Section Styles --- */
.bundles-container {
    margin-top: 40px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border: 2px solid rgba(255, 215, 0, 0.5);
    /* Gold border to make bundles stand out */
}

.bundles-container h3 {
    color: #ffd700;
    /* Gold color for title */
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.5em;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.bundles-container p {
    text-align: center;
    margin-bottom: 20px;
    color: #f0f0f0;
}

/* Bundle Items Container */
.bundle-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Bundle Item Card */
.bundle-item {
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bundle-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.bundle-item::before {
    content: "BUNDLE";
    position: absolute;
    top: 10px;
    right: -30px;
    background-color: #ffd700;
    color: #000;
    padding: 5px 30px;
    font-size: 0.7em;
    font-weight: bold;
    transform: rotate(45deg);
    z-index: 1;
}

.bundle-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0;
    color: #ffd700;
    text-align: center;
}

.bundle-description {
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 15px;
    color: #f0f0f0;
}

.bundle-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.bundle-item-preview {
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.bundle-item-preview.pack {
    background-image: url('images/packs/starter_pack.png');
}

.bundle-item-preview.cosmetic {
    background-image: url('images/cosmetics/borders/gold_border.png');
}

.bundle-item-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
    border: 1px solid #ffd700;
}

.bundle-price {
    font-weight: bold;
    color: #ffd700;
    font-size: 1.2em;
    margin: 10px 0;
    position: relative;
}

.bundle-price::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z' fill='%23c9a84c'/%3E%3Cpath d='M12 6l1.2 3.6L17 12l-3.8 1.4L12 17l-1.2-3.6L7 12l3.8-1.4z' fill='%23ffd54f' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 4px;
}

.bundle-original-price {
    font-size: 0.9em;
    color: #aaa;
    text-decoration: line-through;
    margin-bottom: 5px;
}

.bundle-savings {
    font-size: 0.9em;
    color: #4CAF50;
    /* Green for savings */
    margin-bottom: 10px;
}

.bundle-item button {
    background-color: rgba(255, 215, 0, 0.3);
    color: #fff;
    border: 1px solid #ffd700;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    width: 80%;
}

.bundle-item button:hover {
    background-color: rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
}

.bundle-item button:disabled {
    background-color: #555;
    border-color: #777;
    color: #999;
    cursor: not-allowed;
}

/* --- Cosmetics Section Styles --- */
.cosmetics-container {
    margin-top: 40px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    /* Subtle gold border */
}

.cosmetics-container h3 {
    color: #ffd700;
    /* Gold color for title */
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.5em;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.cosmetics-container p {
    text-align: center;
    margin-bottom: 20px;
    color: #e0e0e0;
}

/* Shop Tabs */
.shop-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
}

.shop-tab-button {
    background-color: rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-tab-button:hover {
    background-color: rgba(255, 215, 0, 0.2);
}

.shop-tab-button.active {
    background-color: rgba(255, 215, 0, 0.3);
    color: white;
    border-color: #ffd700;
}

/* Cosmetics Items Container */
.cosmetics-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

/* Loading Spinner */
.loading-spinner {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: #e0e0e0;
}

/* Cosmetic Item Card */
.cosmetic-item {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.cosmetic-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

.cosmetic-item.owned {
    border-color: #4CAF50;
    /* Green border for owned items */
}

.cosmetic-item.unaffordable {
    opacity: 0.7;
}

.cosmetic-preview {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cosmetic-item h4 {
    margin: 5px 0;
    color: #ffd700;
    font-size: 1em;
    text-align: center;
}

.cosmetic-item p {
    font-size: 0.8em;
    color: #e0e0e0;
    text-align: center;
    margin: 5px 0 10px;
    height: 40px;
    overflow: hidden;
}

.cosmetic-cost {
    font-weight: bold;
    color: #ffd700;
    margin: 5px 0;
}

.cosmetic-cost::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='%237c4dff' opacity='0.2'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23b388ff' stroke-width='1.5'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='3' fill='none' stroke='%23b388ff' stroke-width='0.8' opacity='0.5' transform='rotate(-30 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='3' fill='none' stroke='%23b388ff' stroke-width='0.8' opacity='0.5' transform='rotate(30 12 12)'/%3E%3Ccircle cx='10' cy='9' r='2' fill='%23e1bee7' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 4px;
}

.cosmetic-item button {
    background-color: rgba(255, 215, 0, 0.3);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 5px;
}

.cosmetic-item button:hover {
    background-color: rgba(255, 215, 0, 0.5);
}

.cosmetic-item button:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
}

.cosmetic-item .owned-label {
    background-color: #4CAF50;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.8em;
    margin-top: 5px;
}



/* Add styles for Deck Manager list scrolling */
#screen-deck-manager .deck-builder-collection-panel #collection-list-deck,
#screen-deck-manager .deck-builder-deck-panel #deck-list {
    max-height: calc(100vh - 250px);
    /* Adjust height based on surrounding elements (header, controls, etc.) */
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding-right: 5px;
    /* Space for scrollbar */
    /* Ensure proper layout if using flex/grid */
    flex-grow: 1;
    /* Allow lists to take available space */
    min-height: 200px;
    /* Prevent collapsing completely */
}

/* Optional: Style scrollbars for webkit browsers */
#screen-deck-manager #collection-list-deck::-webkit-scrollbar,
#screen-deck-manager #deck-list::-webkit-scrollbar {
    width: 8px;
}

#screen-deck-manager #collection-list-deck::-webkit-scrollbar-track,
#screen-deck-manager #deck-list::-webkit-scrollbar-track {
    background: #2c2c2c;
    border-radius: 4px;
}

#screen-deck-manager #collection-list-deck::-webkit-scrollbar-thumb,
#screen-deck-manager #deck-list::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 4px;
    border: 1px solid #2c2c2c;
}

/* Ensure card lists have a background for scrollbar visibility */
#screen-deck-manager #collection-list-deck,
#screen-deck-manager #deck-list {
    background-color: rgba(10, 10, 20, 0.5);
    /* Example background */
    border-radius: 5px;
}




/* Card Detail Modal Styles */
#card-detail-modal {
    /* Uses .modal-overlay styles for base overlay */
    /* Initially hidden */
    display: none;
    z-index: 1000;
    /* Increased z-index to ensure it's above everything */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Darker backdrop for better focus */
    backdrop-filter: blur(5px);
    /* Add blur effect to background */
    animation: fadeIn 0.3s ease-out;
    /* Smooth fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.card-detail-content {
    max-width: 600px;
    /* Reduced max width */
    width: 90%;
    max-height: 80vh;
    margin: 10vh auto;
    /* Center vertically with margin */
    background-color: rgba(10, 15, 25, 0.98);
    /* Dark background */
    border: 2px solid #ffd700;
    /* Gold border */
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(184, 134, 11, 0.4);
    /* Gold-tinted glow */
    transform: translateY(0);
    /* Reset for animation */
    animation: slideUp 0.4s ease-out;
    /* Slide up animation */
    position: relative;
    /* For positioning elements */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Hide overflow */
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Card Banner */
.card-banner-container {
    position: relative;
    width: 100%;
    height: 200px;
    /* Fixed height for banner */
    overflow: hidden;
}

.card-banner-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.card-banner-title {
    position: absolute;
    bottom: 15px;
    left: 20px;
    color: #ffd700;
    font-size: 2em;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 2;
    font-family: var(--font-title);
}

/* Card Info Container */
.card-info-container {
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    /* Allow scrolling for content */
}

/* Card Info Section */
.card-info-section {
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 5px;
}

.info-label {
    color: #ffd700;
    font-size: 0.8em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value {
    font-weight: bold;
    font-size: 1.1em;
}

/* Card Stats Section */
.card-stats-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 0 5px;
}

.stat-item.attack {
    background-color: rgba(180, 30, 30, 0.3);
    border-bottom: 3px solid rgba(220, 50, 50, 0.7);
}

.stat-item.defense {
    background-color: rgba(30, 80, 180, 0.3);
    border-bottom: 3px solid rgba(50, 100, 220, 0.7);
}

.stat-item.health {
    background-color: rgba(30, 180, 80, 0.3);
    border-bottom: 3px solid rgba(50, 220, 100, 0.7);
}

.stat-label {
    color: #ffd700;
    font-size: 0.8em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.stat-value {
    font-weight: bold;
    font-size: 1.6em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

/* Section Titles */
.section-title {
    color: #ffd700;
    font-size: 1.1em;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

/* Section Content */
.section-content {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 5px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.flavor-text {
    font-style: italic;
    color: #cccccc;
}

/* Related Cards Section */
.card-related-section {
    margin-top: 15px;
}

.card-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.card-related-item {
    width: 70px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-related-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Close button */
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffd700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffd700;
    font-size: 1.3em;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modal-close-button:hover {
    background-color: rgba(184, 134, 11, 0.3);
    transform: scale(1.1);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .card-detail-content {
        width: 95%;
        max-height: 85vh;
    }

    .card-banner-container {
        height: 150px;
    }

    .card-banner-title {
        font-size: 1.6em;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 1.4em;
    }
}


/* Card Banner */
.card-banner-container {
    position: relative;
    width: 100%;
    height: 200px;
    /* Fixed height for banner */
    overflow: hidden;
}

.card-banner-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.card-banner-title {
    position: absolute;
    bottom: 15px;
    left: 20px;
    color: #ffd700;
    font-size: 2em;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 2;
    font-family: var(--font-title);
}

/* Card Info Container */
.card-info-container {
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    /* Allow scrolling for content */
}

/* Left side - Card Image */
.card-detail-left {
    flex: 0 0 45%;
    /* Take 45% of the width */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

/* Right side - Card Info */
.card-detail-right {
    flex: 0 0 55%;
    /* Take 55% of the width */
    background-color: rgba(10, 15, 25, 0.98);
    /* Dark background */
    border: 2px solid #ffd700;
    /* Gold border */
    border-radius: 8px;
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    overflow-y: auto;
    /* Allow scrolling for content */
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .card-detail-content {
        flex-direction: column;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .card-detail-left {
        flex: 0 0 auto;
        height: 40vh;
        width: 100%;
    }

    .card-detail-right {
        flex: 0 0 auto;
        width: 100%;
        max-height: 50vh;
    }

    .card-detail-image .card {
        transform: scale(1.5);
        max-height: 40vh;
    }
}

/* Card detail header */
.card-detail-header {
    position: relative;
    background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
    border-radius: 12px 12px 0 0;
    padding: 10px 20px;
    margin: -1px;
    /* Extend slightly beyond the modal content border */
    color: #000;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-detail-header h2 {
    margin: 0;
    font-size: 1.6em;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    font-family: var(--font-title);
}

.card-detail-header-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 5px;
    font-size: 0.9em;
    font-weight: bold;
}

.card-detail-header-info span {
    display: inline-block;
}

/* Card Info Section */
.card-info-section {
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 5px;
}

.info-label {
    color: #ffd700;
    font-size: 0.8em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value {
    font-weight: bold;
    font-size: 1.1em;
}

/* Add subtle glow effect around the card container */
.card-detail-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(64, 224, 208, 0.2);
    pointer-events: none;
    z-index: -1;
}

/* Card Stats Section */
.card-stats-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 0 5px;
}

.stat-item.attack {
    background-color: rgba(180, 30, 30, 0.3);
    border-bottom: 3px solid rgba(220, 50, 50, 0.7);
}

.stat-item.defense {
    background-color: rgba(30, 80, 180, 0.3);
    border-bottom: 3px solid rgba(50, 100, 220, 0.7);
}

.stat-item.health {
    background-color: rgba(30, 180, 80, 0.3);
    border-bottom: 3px solid rgba(50, 220, 100, 0.7);
}

.stat-label {
    color: #ffd700;
    font-size: 0.8em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.stat-value {
    font-weight: bold;
    font-size: 1.6em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

/* Related Cards Section */
.card-related-section {
    margin-top: 15px;
}

.card-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.card-related-item {
    width: 70px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-related-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Close button */
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffd700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffd700;
    font-size: 1.3em;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modal-close-button:hover {
    background-color: rgba(184, 134, 11, 0.3);
    transform: scale(1.1);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .card-detail-content {
        width: 95%;
        max-height: 85vh;
    }

    .card-banner-container {
        height: 150px;
    }

    .card-banner-title {
        font-size: 1.6em;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 1.4em;
    }
}

/* --- Card Display Modal --- */
.card-display-modal {
    position: fixed;
    z-index: 1000;
    /* Very high z-index to be above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Dark backdrop */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    /* Add blur effect to background */
    opacity: 0;
    transition: opacity 0.3s ease-out;
    animation: fadeIn 0.3s ease-out forwards;
}

.card-preview-container {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.95);
    animation: scaleIn 0.4s ease-out forwards;
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

.detail-card {
    transform: scale(2.2);
    /* Significantly larger card */
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 20px rgba(64, 224, 208, 0.4);
    /* Enhanced glow */
    border-width: 2px;
    /* Thicker border */
    animation: cardPulse 3s ease-in-out infinite;
    /* Add subtle pulsing animation */
}

@keyframes cardPulse {

    0%,
    100% {
        transform: scale(2.2) rotate(0deg);
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 20px rgba(64, 224, 208, 0.4);
    }

    50% {
        transform: scale(2.25) rotate(0.5deg);
        /* Subtle scale and rotation */
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.6), 0 0 25px rgba(64, 224, 208, 0.5);
    }
}

/* Special effects for legendary cards */
.detail-card.rarity-legendary {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
    /* Gold glow */
    animation: legendaryPulse 3s ease-in-out infinite;
}

@keyframes legendaryPulse {

    0%,
    100% {
        transform: scale(2.2) rotate(0deg);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
    }

    50% {
        transform: scale(2.25) rotate(0.5deg);
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.5);
    }
}

/* Close button for the modal */
.card-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1001;
}

.card-modal-close:hover {
    background-color: rgba(233, 69, 96, 0.8);
    transform: scale(1.1);
    border-color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .detail-card {
        transform: scale(1.8);
        /* Slightly smaller on mobile */
    }

    @keyframes cardPulse {

        0%,
        100% {
            transform: scale(1.8);
        }

        50% {
            transform: scale(1.85);
        }
    }
}

.card-detail-info p {
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 1.05em;
    /* Slightly larger text */
    padding: 0 5px;
}

.card-detail-info strong {
    color: #ffd700;
    /* Brighter gold for labels to match theme */
    margin-right: 8px;
    font-weight: 600;
    display: inline-block;
    min-width: 100px;
    /* Fixed width for labels to align values */
}

#card-detail-stats {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    /* Darker background */
    border-radius: 8px;
    border: 1px solid rgba(184, 134, 11, 0.3);
    /* Subtle gold border */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Three columns for stats */
    gap: 10px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.attack-stat {
    background-color: rgba(180, 30, 30, 0.2);
    /* Reddish tint for attack */
    border-left: 3px solid rgba(220, 50, 50, 0.7);
}

.defense-stat {
    background-color: rgba(30, 80, 180, 0.2);
    /* Bluish tint for defense */
    border-left: 3px solid rgba(50, 100, 220, 0.7);
}

.health-stat {
    background-color: rgba(30, 180, 80, 0.2);
    /* Greenish tint for health */
    border-left: 3px solid rgba(50, 220, 100, 0.7);
}

.stat-box strong {
    color: #ffd700;
    font-size: 0.9em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-box span {
    font-weight: bold;
    font-size: 1.5em;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

/* Stat value indicators */
.high-stat {
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2), 0 0 5px rgba(255, 255, 255, 0.1);
    border-width: 2px;
}

.high-stat span {
    font-size: 1.7em;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.medium-stat {
    box-shadow: inset 0 0 7px rgba(255, 255, 255, 0.1);
}

.low-stat {
    opacity: 0.85;
}

/* Specific stat color enhancements */
.attack-stat.high-stat {
    border-color: rgba(255, 80, 80, 0.9);
    background-color: rgba(220, 50, 50, 0.3);
}

.defense-stat.high-stat {
    border-color: rgba(80, 130, 255, 0.9);
    background-color: rgba(50, 100, 220, 0.3);
}

.health-stat.high-stat {
    border-color: rgba(80, 255, 130, 0.9);
    background-color: rgba(50, 220, 100, 0.3);
}

/* Related Cards Section */
.card-related-section {
    margin-top: 20px;
}

.card-related-section h3 {
    color: #ffd700;
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 5px;
}

/* Add close button */
.card-detail-close,
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffd700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffd700;
    font-size: 1.3em;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* --- Card Selection Dialog Styles --- */
#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
}

#card-selection-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    background-color: var(--secondary-bg, #1a1a2e);
    border: 3px solid var(--accent-color, #ffd700);
    border-radius: 10px;
    z-index: 1100;
    display: none;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}

.dialog-header {
    padding: 15px 20px;
    background-color: var(--primary-bg, #0f0f1e);
    border-bottom: 2px solid var(--accent-color, #ffd700);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-header h2 {
    margin: 0;
    color: var(--accent-color, #ffd700);
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dialog-close-btn {
    background: none;
    border: none;
    color: var(--accent-color, #ffd700);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.dialog-close-btn:hover {
    background-color: rgba(255, 215, 0, 0.2);
}

.dialog-description {
    padding: 15px 20px;
    color: var(--text-color, #ffffff);
    font-size: 1.1em;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-selection-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.selectable-discard-card {
    width: 130px;
    height: 182px;
    background-color: var(--card-bg, #2a2a40);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.selectable-discard-card:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: var(--accent-color, #ffd700);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.selectable-discard-card .card-image {
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.selectable-discard-card .card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.selectable-discard-card .card-info {
    padding: 5px;
    height: 35%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.selectable-discard-card .card-info h3 {
    margin: 0;
    font-size: 0.9em;
    color: var(--accent-color, #ffd700);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selectable-discard-card .card-info .card-type {
    margin: 2px 0;
    font-size: 0.7em;
    color: #aaa;
    text-align: center;
}

.selectable-discard-card .card-info .card-description {
    font-size: 0.7em;
    color: #ddd;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-detail-close:hover,
.modal-close-button:hover {
    background-color: rgba(184, 134, 11, 0.3);
    transform: scale(1.1);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    color: #ffffff;
}

/* Related Cards List */
.card-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.card-related-item {
    width: 80px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-related-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Add related cards section */
.card-related-section {
    margin-top: 25px;
    border-top: 1px solid rgba(184, 134, 11, 0.3);
    padding-top: 15px;
}

.card-related-section h3 {
    color: #b8860b;
    font-size: 1.2em;
    margin-bottom: 15px;
    text-align: center;
}

.card-related-list {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.card-related-item {
    width: 80px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-related-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(184, 134, 11, 0.5);
}

/* --- Abyssal Scout Choice Dialog Styles --- */
.game-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 90vw;
    background-color: var(--secondary-bg, #1a1a2e);
    border: 3px solid var(--accent-color, #ffd700);
    border-radius: 10px;
    z-index: 1100;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
    padding: 20px;
    color: var(--text-color, #ffffff);
}

.abyssal-scout-dialog h3 {
    margin: 0 0 15px 0;
    color: var(--accent-color, #ffd700);
    font-size: 1.4em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.abyssal-scout-dialog p {
    margin: 0 0 20px 0;
    color: var(--text-color, #ffffff);
    font-size: 1.1em;
    text-align: center;
    line-height: 1.4;
}

.dialog-card-preview {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.dialog-card-preview .card {
    transform: scale(0.8);
    pointer-events: none;
}

.dialog-buttons {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin-top: 20px;
}

.dialog-button {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid var(--accent-color, #ffd700);
    background-color: transparent;
    color: var(--accent-color, #ffd700);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dialog-button:hover {
    background-color: var(--accent-color, #ffd700);
    color: var(--primary-bg, #0f0f1e);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.dialog-button.keep-button:hover {
    background-color: #4CAF50;
    border-color: #4CAF50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.dialog-button.move-button:hover {
    background-color: #f44336;
    border-color: #f44336;
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.3);
}

/* --- Social Screen Styles --- */
.social-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.social-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.social-tab-button {
    background-color: #333;
    color: #ccc;
    border: 1px solid #555;
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-tab-button:hover {
    background-color: #444;
}

.social-tab-button.active {
    background-color: #555;
    color: #fff;
    border-bottom: 2px solid #8a5cf5;
}

.social-content {
    flex: 1;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px;
}

.social-section {
    height: 100%;
}

.social-section.hidden {
    display: none;
}

.social-list {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.social-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
    background-color: rgba(50, 50, 50, 0.5);
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.social-list-item:hover {
    background-color: rgba(70, 70, 70, 0.5);
}

.friend-status {
    margin-left: 5px;
    font-size: 0.9em;
}

.status-online {
    color: #4CAF50;
}

.status-offline {
    color: #9e9e9e;
}

.status-in-game {
    color: #2196F3;
}

.status-pending {
    color: #FFC107;
}

.status-friends {
    color: #4CAF50;
}

.requests-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.requests-column {
    flex: 1;
}

.search-container {
    display: flex;
    margin-bottom: 15px;
}

#user-search-input {
    flex: 1;
    padding: 8px;
    border-radius: 5px 0 0 5px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
}

#user-search-button {
    padding: 8px 15px;
    border-radius: 0 5px 5px 0;
    background-color: #8a5cf5;
    color: white;
    border: none;
    cursor: pointer;
}

#user-search-button:hover {
    background-color: #7a4ce5;
}

/* Chat Styles */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid #444;
}

.chat-input-container input {
    flex: 1;
    padding: 8px;
    border-radius: 5px 0 0 5px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
}

.chat-input-container button {
    padding: 8px 15px;
    border-radius: 0 5px 5px 0;
    background-color: #8a5cf5;
    color: white;
    border: none;
    cursor: pointer;
}

.chat-input-container button:hover {
    background-color: #7a4ce5;
}

.chat-message {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 5px;
    background-color: rgba(50, 50, 50, 0.5);
}

.chat-message .sender {
    font-weight: bold;
    margin-right: 5px;
}

.chat-message .timestamp {
    font-size: 0.8em;
    color: #aaa;
    margin-left: 5px;
}

.chat-message.own-message {
    background-color: rgba(70, 70, 120, 0.5);
    text-align: right;
}

.loading-indicator {
    text-align: center;
    color: #aaa;
    font-style: italic;
}

/* Direct Message Styles for Social Hub */
.dm-container {
    display: flex;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.dm-contacts {
    width: 30%;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto;
    padding: 10px;
}

.dm-chat {
    width: 70%;
    display: flex;
    flex-direction: column;
}

#dm-chat-header {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#dm-chat-header h4 {
    margin: 0;
    text-align: center;
}

.dm-contact-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dm-contact-item:hover {
    background-color: rgba(52, 73, 94, 0.8);
}

.dm-contact-item.active {
    background-color: rgba(41, 128, 185, 0.5);
}

.dm-unread-badge {
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7em;
    margin-left: 5px;
}

/* Legacy Direct Message Window (Popup style) */
.dm-window {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 300px;
    height: 400px;
    background-color: #222;
    border: 1px solid #444;
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.dm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #333;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}

.dm-header h4 {
    margin: 0;
}

.dm-close-button {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 1.2em;
}

.dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.dm-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid #444;
}

.dm-input-container input {
    flex: 1;
    padding: 8px;
    border-radius: 5px 0 0 5px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
}

.dm-input-container button {
    padding: 8px 15px;
    border-radius: 0 5px 5px 0;
    background-color: #8a5cf5;
    color: white;
    border: none;
    cursor: pointer;
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #f44336;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
}

/* Battle Emotes */
.battle-emote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 10px;
    color: white;
    z-index: 1000;
    text-align: center;
    animation: emote-appear 0.5s ease-in-out, emote-float 3s ease-in-out;
}

.battle-emote .emote-sender {
    font-size: 14px;
    margin-bottom: 5px;
}

.battle-emote .emote-icon {
    font-size: 32px;
}

.emote-fadeout {
    animation: emote-fadeout 1s ease-in-out forwards;
}

@keyframes emote-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes emote-float {
    0% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, -60%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes emote-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Emote Selector */
.emote-selector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    padding: 15px;
    z-index: 1001;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.emote-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.emote-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.emote-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.emote-item .emote-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.emote-item .emote-name {
    font-size: 12px;
    color: white;
    text-align: center;
}

.emote-button {
    cursor: pointer;
    font-size: 18px;
    background: none;
    border: none;
    color: #ffcc00;
    transition: transform 0.2s;
}

.emote-button:hover {
    transform: scale(1.2);
}

/* Waiting Indicator for Server Operations */
.waiting-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1010;
    color: white;
    font-size: 18px;
}

.waiting-indicator .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.waiting-indicator .waiting-message {
    text-align: center;
    max-width: 80%;
}

/* Turn Time Limit Display */
.turn-time-limit {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 0.9em;
    color: #fff;
}

/* ==========================================================================
   Leaderboard Styles
   ========================================================================== */

#social-leaderboard-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.1);
    /* Slightly darker background for the section */
    border-radius: 8px;
}

.leaderboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color-dark);
    padding-bottom: 10px;
}

.leaderboard-tab {
    padding: 8px 15px;
    background-color: var(--secondary-color-dark);
    color: var(--text-color-light);
    border: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.leaderboard-tab:hover {
    background-color: var(--primary-color-light);
    color: var(--background-color);
}

.leaderboard-tab.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

.player-rank-container {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid var(--primary-color-transparent);
}

.player-rank-loading p,
.player-rank-not-ranked p {
    text-align: center;
    color: var(--text-color-medium);
    font-style: italic;
}

.player-rank-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.player-rank-position {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--accent-color-gold);
    min-width: 50px;
    text-align: center;
}

.player-rank-details {
    flex-grow: 1;
}

.player-rank-name {
    font-weight: bold;
    font-size: 1.1em;
}

.player-rank-score {
    color: var(--text-color-medium);
    font-size: 0.9em;
}

.leaderboard-content {
    flex-grow: 1;
    overflow-y: auto;
    /* Allow scrolling if content exceeds height */
    max-height: 400px;
    /* Adjust as needed */
    padding-right: 10px;
    /* Space for scrollbar */
}

.leaderboard-entries-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--text-color-medium);
}

.leaderboard-loading .spinner {
    margin-bottom: 15px;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: background-color 0.2s ease;
    gap: 15px;
}

.leaderboard-entry:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.leaderboard-position {
    font-weight: bold;
    color: var(--accent-color-gold);
    min-width: 40px;
    text-align: right;
    font-size: 1.1em;
}

.leaderboard-player-info {
    flex-grow: 1;
}

.leaderboard-player-name {
    font-weight: 500;
}

.leaderboard-player-score {
    font-size: 0.9em;
    color: var(--text-color-medium);
}

.leaderboard-player-actions {
    display: flex;
    gap: 8px;
}

.leaderboard-action-btn {
    background: none;
    border: 1px solid var(--primary-color-transparent);
    color: var(--text-color-light);
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.leaderboard-action-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.leaderboard-action-btn i {
    font-size: 0.9em;
}

/* Top 3 Styling */
.leaderboard-entry.leaderboard-top-1 {
    background-color: rgba(255, 215, 0, 0.2);
    /* Gold tint */
    border-left: 4px solid var(--accent-color-gold);
}

.leaderboard-entry.leaderboard-top-1 .leaderboard-position {
    color: var(--accent-color-gold);
    font-size: 1.3em;
}

.leaderboard-entry.leaderboard-top-2 {
    background-color: rgba(192, 192, 192, 0.2);
    /* Silver tint */
    border-left: 4px solid silver;
}

.leaderboard-entry.leaderboard-top-2 .leaderboard-position {
    color: silver;
    font-size: 1.2em;
}

.leaderboard-entry.leaderboard-top-3 {
    background-color: rgba(205, 127, 50, 0.2);
    /* Bronze tint */
    border-left: 4px solid #cd7f32;
}

.leaderboard-entry.leaderboard-top-3 .leaderboard-position {
    color: #cd7f32;
    font-size: 1.15em;
}

.leaderboard-empty p {
    text-align: center;
    padding: 20px;
    color: var(--text-color-medium);
    font-style: italic;
}

.leaderboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--primary-color-dark);
    font-size: 0.9em;
    color: var(--text-color-medium);
}

#leaderboard-refresh-btn {
    padding: 5px 10px;
    font-size: 0.9em;
}

/* Scrollbar for leaderboard content */
.leaderboard-content::-webkit-scrollbar {
    width: 8px;
}

.leaderboard-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.leaderboard-content::-webkit-scrollbar-thumb {
    background-color: var(--primary-color-dark);
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.leaderboard-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

/* --- New Shop UI Styles --- */

/* Main container for shop items */
#bundle-items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* Increased gap */
    padding: 30px;
    justify-content: center;
    align-items: flex-start;
    /* Align items to the top */
}

/* Individual shop item card */
.shop-item-card {
    background: linear-gradient(145deg, #2c2f33, #23272a);
    /* Dark gradient background */
    border: 1px solid #4f545c;
    /* Slightly lighter border */
    border-radius: 12px;
    /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(0, 0, 0, 0.2);
    /* Deeper shadow */
    color: #e0e0e0;
    /* Light text */
    display: flex;
    flex-direction: column;
    width: 320px;
    /* Fixed width for consistency */
    overflow: hidden;
    /* Clip content */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    /* For potential overlays */
}

.shop-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(79, 84, 92, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.3);
    /* Enhanced hover shadow */
}

.shop-item-card.unaffordable {
    opacity: 0.7;
    filter: grayscale(50%);
}

/* Card Header */
.shop-item-header {
    background-color: rgba(0, 0, 0, 0.2);
    /* Semi-transparent dark header */
    padding: 12px 20px;
    border-bottom: 1px solid #4f545c;
}

.shop-item-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    color: #ffffff;
    /* White title */
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Card Body */
.shop-item-body {
    padding: 15px 20px;
    flex-grow: 1;
    /* Allow body to expand */
    display: flex;
    flex-direction: column;
}

.shop-item-visuals {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    min-height: 80px;
    /* Ensure space even if empty */
}

.shop-item-preview {
    width: 60px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background-color: #3a3f44;
    /* Fallback color */
    border: 1px solid #5a5f64;
}

.pack-preview {
    /* Specific styles if needed */
}

.cosmetic-preview {
    /* Specific styles if needed, e.g., slightly different border */
    border: 1px solid #7a7f84;
}

.shop-item-preview-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: #7289da;
    /* Discord blurple accent */
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.shop-item-description {
    font-size: 0.95em;
    color: #b9bbbe;
    /* Lighter gray text */
    margin-bottom: 15px;
    line-height: 1.4;
    flex-grow: 1;
    /* Allow description to take available space */
}

.contents-summary-title {
    font-size: 1em;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    border-top: 1px solid #4f545c;
    padding-top: 10px;
}

.shop-item-contents-summary {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    /* Spacing below summary */
    font-size: 0.9em;
}

.summary-item {
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
}

.summary-item::before {
    content: '•';
    color: #7289da;
    /* Accent color */
    position: absolute;
    left: 0;
    top: 0;
}

/* Card Footer */
.shop-item-footer {
    background-color: rgba(0, 0, 0, 0.2);
    /* Match header */
    padding: 15px 20px;
    border-top: 1px solid #4f545c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.shop-item-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.currency-icon {
    color: #FFD700;
    /* Gold color for currency */
    margin-right: 3px;
}

.shop-item-price-original {
    font-size: 0.85em;
    color: #999;
    text-decoration: line-through;
}

.shop-item-price-current {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffffff;
}

.shop-item-savings {
    font-size: 0.8em;
    color: #43b581;
    /* Green for savings */
    font-weight: bold;
    background-color: rgba(67, 181, 129, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Styled Button (Reusing/Adapting existing styles if available, or defining new ones) */
.shop-item-purchase-button.styled-button {
    background: linear-gradient(to bottom, #7289da, #5f73bc);
    /* Blurple gradient */
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.shop-item-purchase-button.styled-button:hover:not(:disabled) {
    background: linear-gradient(to bottom, #8ea1e1, #7289da);
    /* Lighter gradient on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.shop-item-purchase-button.styled-button:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.shop-item-purchase-button.styled-button:disabled {
    background: #4f545c;
    /* Dark gray disabled */
    color: #96989d;
    cursor: not-allowed;
    box-shadow: none;
}

/* Fallback for missing images */
.shop-item-preview:before {
    content: "!";
    /* Indicate missing image */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: red;
    font-size: 2em;
    font-weight: bold;
    opacity: 0;
    /* Hide initially */
    transition: opacity 0.3s;
}

/* Show fallback only if background-image fails (this is tricky, JS might be better) */
/* Basic approach: Assume image failed if style is applied but background isn't rendering */
.shop-item-preview[style*="background-image"]:not(:valid):before {
    /* :valid pseudo may not work as expected here */
    /* This selector is experimental; a JS check for image load failure is more reliable */
    /* opacity: 1; */
}

/* No bundles message styling */
.no-bundles-message {
    color: #b9bbbe;
    font-size: 1.2em;
    text-align: center;
    padding: 50px;
    width: 100%;
}

/* --- Confirmation Dialog Styles --- */
.confirmation-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.confirmation-dialog {
    background-color: #1a2035;
    border: 2px solid #2a3252;
    border-radius: 8px;
    padding: 20px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.confirmation-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.confirmation-dialog-message {
    font-size: 18px;
    text-align: center;
    color: #e0e0e0;
    margin: 10px 0;
}

.confirmation-dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.confirmation-dialog-confirm,
.confirmation-dialog-cancel {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirmation-dialog-confirm {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #3d8b40;
}

.confirmation-dialog-confirm:hover {
    background-color: #3d8b40;
}

.confirmation-dialog-cancel {
    background-color: #f44336;
    color: white;
    border: 1px solid #e53935;
}

.confirmation-dialog-cancel:hover {
    background-color: #e53935;
}

/* --- Oversummon Animation Styles --- */
@keyframes oversummon-transform {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }

    25% {
        transform: scale(1.15);
        opacity: 0.8;
        filter: brightness(1.5);
    }

    50% {
        transform: scale(0.9);
        opacity: 0.6;
        filter: brightness(0.8);
    }

    75% {
        transform: scale(1.1);
        opacity: 0.9;
        filter: brightness(1.3);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

.oversummon-transforming {
    animation: oversummon-transform 0.8s ease-in-out;
    position: relative;
    z-index: 10;
}

.oversummon-transforming::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 140, 0, 0.4) 70%, transparent 100%);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    animation: oversummon-glow 0.8s ease-in-out;
}

@keyframes oversummon-glow {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Sticky Top Bar & Home Button Styles */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #2c3e50;
    /* Dark theme color for the bar */
    padding: 0 20px;
    /* Horizontal padding; vertical alignment handled by flex */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    /* Vertically center items in the bar */
    height: 60px;
    /* Explicit height for the bar */
    box-sizing: border-box;
    /* Ensures padding & border don't add to height/width */
}

.header-button {
    background-color: #4a6fa5;
    /* A slightly lighter blue for contrast */
    color: white;
    border: none;
    padding: 0 15px;
    /* Horizontal padding */
    margin-right: 20px;
    /* Space between home button and next element */
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    height: 36px;
    /* Fixed height for the button */
    line-height: 36px;
    /* Vertically center text in the button */
    text-align: center;
}

.header-button:hover {
    background-color: #5a7fae;
    /* Slightly lighter on hover */
}

/* Adjust main content container's padding to prevent overlap with the fixed #top-bar */
/* This targets the .main-menu-container specifically within the #screen-main-menu */
/* #screen-main-menu .main-menu-container {
    padding-top: 60px; */
/* This should match the height of #top-bar */
/* } */

/* General padding for all screens to account for the sticky top bar */
.screen {
    padding-top: 60px;
    /* Height of the sticky top bar */
    /* Ensure screens still take up full height and allow internal scrolling if content overflows */
    height: calc(100vh - 60px);
    /* Adjust height to prevent double scrollbars with the body */
    overflow-y: auto;
    /* Allow individual screens to scroll their content */
    box-sizing: border-box;
    /* Include padding in the element's total width and height */
}

/*
   The #screen-main-menu .main-menu-container itself might still need 100vh
   if its internal structure relies on it, but the padding is now handled by .screen.
   If .main-menu-container had specific height or overflow properties for its layout,
   those might need to be preserved or adjusted.
   For now, let's ensure it still behaves as expected within the .screen parent.
*/
#screen-main-menu .main-menu-container {
    height: 100%;
    /* Occupy the full height of its .screen parent */
    display: flex;
    flex-direction: column;
    /* overflow: hidden; /* This might conflict with internal scrolling of main-content-area */
}

/* === VIEWPORT LOCKING FOR ALL MENU SCREENS === */
/* Applied to prevent empty space and ensure proper viewport control */
/* Using the same pre-battle screen approach for consistency */

#screen-deck-manager,
#screen-fusion-chamber,
#screen-settings,
#screen-shop,
#screen-cosmetics,
#screen-rules-tips,
#screen-story-mode,
#screen-weekly-raids,
#screen-leaderboard,
#screen-account-info {
    /* NOTE: #screen-trade-central excluded as it already has proper viewport locking */
    /* NOTE: #screen-collection excluded as it needs special layout handling */
    /* VIEWPORT LOCKING - Same approach as main menu and pre-battle screen */
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    
    display: flex;
    flex-direction: column;
}

/* Special viewport locking for Collection - preserve horizontal layout */
#screen-collection {
    /* VIEWPORT LOCKING - Same positioning but preserve collection layout */
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    
    padding: 20px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    
    /* Preserve existing collection layout - don't override display */
}