/*
   FIX: Add spacing between character cards in battle
   and ensure background images are fully visible (contain)
   FIX: Ensure character cards are clickable
   FIX: Elevate Detail Modal Z-Index (CRITICAL)
*/

/* Increase gap between characters in battle */
.team-area {
    gap: 40px !important; /* Was 20px */
}

/* Ensure character card image is fully visible */
.character-card {
    background-size: contain !important; /* Was cover */
    background-repeat: no-repeat !important;
    background-position: center bottom !important; /* Anchor to bottom */
    background-color: var(--card-bg); /* Ensure background color fills the rest */
    pointer-events: auto !important; /* Ensure it receives clicks */
    z-index: 10 !important; /* Ensure it is above simple backgrounds */
}

/* Make card wrapper slightly larger to accommodate spacing if needed,
   but gap handles most of it. */
.character-wrapper {
    margin: 0 10px; /* Add extra margin just in case */
    pointer-events: auto !important;
}

/* Ensure no floating text blocks the card */
.damage-number, .floating-text {
    pointer-events: none !important;
}

/* Ensure overlay in card does not block */
.card-overlay {
    pointer-events: none !important;
}

/* FIX: Elevate Detail Modal Z-Index */
/* Using specific ID selector to override other styles */
#detail-modal {
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex !important; /* Force flex display when visible */
    justify-content: center; align-items: center;
    z-index: 20000 !important; /* Higher than game-container (9999) */
}

/* BUT: We need a way to hide it.
   The .hidden class must override the display: flex !important.
   So we make .hidden MORE specific or use !important as well.
*/
#detail-modal.hidden {
    display: none !important;
}

/* Ensure modal content is visible on top */
.modal-content-wrapper {
    z-index: 20010 !important;
    position: relative !important;
}

/* FIX: Move controls up to avoid blockage */
#skills-container {
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 9999 !important; /* Ensure it's on top of everything in battle */
}

/* Modify skill buttons for horizontal layout */
.skill-arc-btn {
    border-radius: 8px !important; /* Standard button shape */
    width: auto !important;
    min-width: 120px !important;
    text-align: center !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    font-size: 14px !important; /* Reduce font size slightly */
    white-space: nowrap !important; /* Prevent wrapping */
}

.skill-arc-btn:hover {
    width: auto !important; /* Disable expansion effect */
    transform: scale(1.05) !important;
}

#resource-container {
    bottom: 120px !important; /* Moved up significantly */
    z-index: 9000 !important; /* Ensure visibility */
}

/* FIX: Detail View Status List Scrolling */
.detail-buff-list {
    display: flex;
    flex-direction: column;
    max-height: 150px; /* Reduced height to save space */
    overflow-y: auto !important; /* Enable scroll */
    padding-right: 5px;
    margin-bottom: 10px; /* Add spacing */
}

/* Make status rows compact */
.detail-buff-row {
    padding: 5px !important;
    margin-bottom: 5px !important;
    font-size: 0.9em !important;
}

/* Scrollbar for detail status list */
.detail-buff-list::-webkit-scrollbar {
    width: 6px;
}
.detail-buff-list::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

/* FIX: Shield blocked in Detail View */
/* Ensure the text is visible and not hidden by container overflow */
.vital-row {
    overflow: visible !important;
}
.vital-val {
    width: auto !important; /* Allow expansion */
    min-width: 60px;
    padding-left: 5px;
}

/* FIX: Bottom Left Shield Blocked */
/* Add padding to the bottom of the battlefield to ensure character cards (and their mini-shields) aren't cut off */
#battle-field {
    padding-bottom: 80px !important;
}

/* Also ensure character wrappers have enough space */
.character-wrapper {
    margin-bottom: 20px !important;
}

/* FIX: Elevate Item Source Modal Z-Index */
/* Must be higher than detail-modal (20000) and other modals */
#item-source-modal {
    z-index: 20050 !important;
}