/* General Case Battle Styles */
.casebattle-container {
    /* Styles for the main container of case battle pages */
}

/* Create Case Battle Page */
#selected-cases-container .casino-card,
#all-cases-grid .casino-card {
    border: 2px solid transparent; /* Base border */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#selected-cases-container .casino-card:hover,
#all-cases-grid .casino-card:hover {
    border-color: #FFD700; /* Gold border on hover */
    box-shadow: 0 0 10px #FFD700;
}

.quantity-input {
    -moz-appearance: textfield; /* Firefox */
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.casino-checkbox {
    border-color: #4a5568; /* Slightly darker border for checkboxes */
}
.casino-checkbox:checked {
    background-color: #8B5CF6; /* Purple when checked */
    border-color: #8B5CF6;
}
.casino-checkbox:focus {
    ring: 2px;
    ring-color: #A78BFA; /* Lighter purple for focus ring */
    ring-offset: 1px;
}


/* Add Case Modal Specific Styles */
#add-case-modal .casino-card { /* Specificity for cards within the modal */
    background-color: #2d3748; /* Slightly different bg for modal cards if needed */
}

#all-cases-grid {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 #2d3748;
}
#all-cases-grid::-webkit-scrollbar {
    width: 8px;
}
#all-cases-grid::-webkit-scrollbar-track {
    background: #2d3748;
    border-radius: 4px;
}
#all-cases-grid::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    border-radius: 4px;
    border: 2px solid #2d3748;
}


/* Case Battle Overview Page */
.battle-status-waiting {
    background-color: #4A5568; /* Gray */
    color: white;
}
.battle-status-live {
    background-color: #38A169; /* Green */
    color: white;
}
.battle-status-finished {
    background-color: #805AD5; /* Purple */
    color: white;
}
.battle-status-cancelled {
    background-color: #E53E3E; /* Red */
    color: white;
}

/* Case Battling (View) Page */
.player-battle-inventory .item-card {
    /* Styles for items shown in a player's temporary battle inventory */
}

.case-spinner-area {
    /* Styles for the area where case spinning animation occurs */
}

.upcoming-cases-list .case-preview {
    /* Styles for small previews of upcoming cases */
}

.emoji-reaction-display {
    /* Styles for displaying emoji reactions */
}

/* Battle Options Grouping */
.battle-options-group {
    border: 1px solid var(--border-color, #2E2A4C); /* Use main border color */
    border-radius: 8px; /* Consistent with player config slider */
    padding: 1.25rem; /* More padding */
    margin-top: 1.5rem;
    background-color: var(--secondary-bg, #1E1C30); /* Darker background for the group */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.battle-options-legend {
    padding: 0.25rem 0.75rem;
    font-weight: 700; /* Bolder */
    color: var(--tertiary-text, #FFFFFF); /* White text */
    font-size: 1rem; /* Slightly larger */
    margin-left: 0; /* Reset margin */
    background-color: var(--accent-purple, #5C49D0); /* Accent background for legend */
    border-radius: 4px;
    display: inline-block; /* To allow background and padding */
    margin-bottom: 1rem; /* Space below legend */
    clip-path: var(--clip-path-button-sm); /* Use a clip-path for style */
}

.battle-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Space between options */
}

.battle-option-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--tertiary-bg, #23203C); /* Background for each option item */
    border-radius: 6px;
    border: 1px solid var(--border-color-light, #4A456C);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.battle-option-item:hover {
    background-color: var(--secondary-bg, #1E1C30); /* Darken on hover */
    border-color: var(--accent-purple-hover, #8471F7);
}

.casino-checkbox { /* Overriding some Tailwind defaults for custom look */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    border: 2px solid var(--border-color-light, #4A456C);
    border-radius: 4px;
    background-color: var(--secondary-bg, #1E1C30);
    cursor: pointer;
    position: relative;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-right: 0.75rem; /* Space between checkbox and label content */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.casino-checkbox:checked {
    background-color: var(--accent-purple, #5C49D0);
    border-color: var(--accent-purple-hover, #8471F7);
}

.casino-checkbox:checked::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem; /* Adjust icon size */
    color: var(--tertiary-text, #FFFFFF);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.casino-checkbox:focus-visible { /* For keyboard navigation */
    box-shadow: 0 0 0 2px rgba(var(--accent-purple-rgb, 92, 73, 208), 0.5);
}

.battle-option-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-grow: 1;
    color: var(--primary-text, #BEBBDA);
}

.battle-option-icon {
    font-size: 1.1rem; /* Icon size */
    margin-right: 0.6rem; /* Space between icon and text */
    width: 20px; /* Fixed width for alignment */
    text-align: center;
}

.battle-option-text {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--primary-text, #BEBBDA);
}

.battle-option-description {
    font-size: 0.75rem;
    color: var(--secondary-text, #716D9E);
    margin-left: 0.5rem;
    font-style: italic;
}


/* Enhanced Total Cost Display */
.battle-cost-display-wrapper {
    background-color: var(--tertiary-bg, #23203C); /* Use theme tertiary background */
    border: 1px solid var(--border-color, #2E2A4C);
}

.battle-cost-display-wrapper #total-battle-cost {
    font-size: 2.25rem; /* Larger font for the cost */
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.battle-cost-display-wrapper .crashpoints-icon {
    height: 2rem; /* Slightly larger icon */
    width: auto;
}

/* Player Configuration Slider Styles */
.player-config-slider-container {
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* Make items stretch to the same height if content differs */
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
    gap: 8px; /* Gap between options */
    padding: 10px;
    background-color: var(--tertiary-bg, #23203C);
    border-radius: 8px;
    border: 1px solid var(--border-color, #2E2A4C);
}

.player-config-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    cursor: pointer;
    padding: 10px 5px; /* Adjust padding */
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    flex: 1; /* Allow options to grow and share space */
    min-width: 80px; /* Minimum width for each option */
    border: 1px solid transparent; /* Placeholder for active border */
}

.player-config-option:hover {
    background-color: var(--secondary-bg, #1E1C30);
    transform: translateY(-2px);
}

.player-config-option.active {
    background-color: var(--accent-purple, #5C49D0);
    color: var(--tertiary-text, #FFFFFF);
    box-shadow: 0 0 8px rgba(var(--accent-purple-rgb, 92, 73, 208), 0.7);
    border: 1px solid var(--accent-purple-hover, #8471F7);
    transform: translateY(-1px); /* Slight lift for active state */
}

.player-config-option.active .player-config-icon,
.player-config-option.active .player-config-title,
.player-config-option.active .player-config-description {
    color: var(--tertiary-text, #FFFFFF);
}

.player-config-icon {
    font-size: 22px; /* Icon size */
    margin-bottom: 6px;
    color: var(--primary-text, #BEBBDA);
    height: 25px; /* Fixed height for icon area */
    line-height: 25px; /* Vertically center icon if it's text-based */
}

.player-config-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text, #BEBBDA);
    margin-bottom: 2px;
}

.player-config-description {
    font-size: 0.65rem;
    color: var(--secondary-text, #716D9E);
}


/* jQuery UI Tooltip Customization */
.ui-tooltip.casino-tooltip {
    background: var(--secondary-bg, #1E1C30);
    color: var(--primary-text, #BEBBDA);
    border: 1px solid var(--border-color, #2E2A4C);
    border-radius: 4px;
    padding: 8px;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    max-width: 250px;
}
.ui-tooltip.casino-tooltip .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.ui-tooltip.casino-tooltip .arrow.top {
    top: -16px;
    bottom: auto;
}
.ui-tooltip.casino-tooltip .arrow.left {
    left: 0;
}
.ui-tooltip.casino-tooltip .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px var(--secondary-bg, #1E1C30); /* Match tooltip background */
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 1px solid var(--border-color, #2E2A4C); /* Match tooltip border */
    border-bottom: 1px solid var(--border-color, #2E2A4C); /* Match tooltip border */
    background: var(--secondary-bg, #1E1C30); /* Match tooltip background */
}
.ui-tooltip.casino-tooltip .arrow.top:after {
    bottom: -20px;
    top: auto;
}


/* New Layout Styles for casebattling.php */
.battle-page-container {
    background-color: var(--primary-bg, #141225); /* Match image's dark background */
}

.battle-top-bar a.casino-button-outline-purple {
    background-color: transparent;
    border: 1px solid var(--accent-purple, #5C49D0);
    color: var(--accent-purple, #5C49D0);
    clip-path: var(--clip-path-button-sm);
    padding: 0.5rem 1rem; /* Adjust padding */
}
.battle-top-bar a.casino-button-outline-purple:hover {
    background-color: var(--accent-purple, #5C49D0);
    color: var(--tertiary-text, #FFFFFF);
}

.battle-header-info {
    background-color: var(--secondary-bg, #1E1C30); /* Dark card background */
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2E2A4C);
}

.battle-header-case-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--tertiary-bg, #23203C);
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color-light, #4A456C);
    min-width: 70px; /* Ensure cases have some width */
}
.battle-header-case-img {
    width: 48px; /* Adjust as per image */
    height: 48px;
    object-fit: contain;
    margin-bottom: 0.25rem;
}
.battle-header-case-price {
    font-size: 0.7rem;
    color: var(--accent-gold, #FFD700);
}


/* Player Card New Styles */
.battle-player-card {
    background-color: var(--secondary-bg, #1E1C30);
    border: 1px solid var(--border-color, #2E2A4C);
    border-radius: 8px;
    padding: 0.75rem; /* Adjust padding */
    display: flex;
    flex-direction: column;
}

.player-main-item-area { /* This is also .player-spinner-area */
    width: 100%;
    height: 180px; /* Adjust to make it squarish for large item */
    background-color: #1A202C; /* Darker area for item/spinner */
    border-radius: 6px;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden; /* Important for spinner */
    display: flex; /* For centering placeholder if any */
    align-items: center;
    justify-content: center;
}
.player-main-item-area .spinner-reel-container { /* Ensure this is styled correctly */
    width: 100%;
    height: 100%;
}
.player-main-item-area .spinner-marker { /* Re-style marker if needed */
    width: 3px;
    background-color: var(--accent-gold);
    box-shadow: 0 0 5px var(--accent-gold);
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    z-index: 10;
}

.won-item-details-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: rgba(26, 32, 44, 0.8); /* Semi-transparent overlay over spinner area */
}
.won-item-image {
    max-width: 100px; /* Adjust as needed */
    max-height: 100px;
    object-fit: contain;
    margin-bottom: 0.25rem;
}
.won-item-name { font-size: 0.9rem; font-weight: 600; color: var(--primary-text); }
.won-item-condition { font-size: 0.7rem; color: var(--secondary-text); }
.won-item-price { font-size: 0.8rem; color: var(--accent-green); font-weight: 500; }


.player-info-bar {
    /* background-color: var(--tertiary-bg); */ /* Already set by Tailwind */
    /* padding: 0.25rem 0.5rem; */ /* Tailwind px-2 py-1 */
}
.player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--accent-purple);
    margin-right: 0.5rem;
}
.player-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* Prevent long names from breaking layout */
}

.player-battle-inventory-grid {
    /* grid grid-cols-4 sm:grid-cols-5 gap-1 p-2 mt-1 min-h-[50px] */
    /* Styles from Tailwind are good, can add more specific if needed */
    background-color: rgba(0,0,0,0.1); /* Subtle background for the grid */
    border-radius: 4px;
}
.player-unboxed-item {
    background-color: var(--tertiary-bg);
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* Make items square */
    overflow: hidden;
}
.player-unboxed-item-img {
    max-width: 80%; /* Relative to parent item box */
    max-height: 60%;
    object-fit: contain;
    margin-bottom: 2px;
}
.player-unboxed-item-price {
    font-size: 0.6rem;
    color: var(--accent-gold);
    margin-top: auto; /* Push price to bottom */
}


/* Player Specific Spinner Styles (adjusting existing ones) */
.player-spinner-area { /* This is the .player-main-item-area now */
    /* height: 180px; */ /* Set above */
    padding: 5px; /* Small padding around the reel */
    background-color: #1a202c; /* Darker background for contrast */
    width: 100%; /* Take full width of parent card */
    /* min-width: 300px; Removed, as it might force overflow */
    border: 1px solid var(--border-color-light);
    overflow: hidden; /* Crucial for containing the strip */
    position: relative; /* Needed if the marker is positioned relative to this */
    box-sizing: border-box; /* Ensure padding and border are included in width/height */
}

.spinner-reel-container {
    width: 100%;
    height: 100%; /* Full height of parent */
    overflow: hidden;
    position: relative;
}

.spinner-item-strip {
    display: flex;
    height: 100%; /* Full height of parent */
    will-change: transform;
    /* position: relative; Removed, not strictly needed for flex container */
    z-index: 1; /* Below the marker */
    /* transition: transform 7s cubic-bezier(0.22, 0.61, 0.36, 1); Default, can be overridden in JS */
}

.spinner-item {
    flex: 0 0 auto; 
    width: 80px; /* Item width in spinner */
    height: 100%; 
    margin: 0 3px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--tertiary-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 5px; /* Adjust padding */
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.spinner-item img {
    max-width: 50px; /* Image size in spinner item */
    max-height: 50px; 
    object-fit: contain;
    margin-bottom: 4px;
}

.spinner-item .item-name {
    font-size: 0.7rem; /* Font size in spinner item */
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.spinner-item .item-rarity {
    font-size: 0.65rem; /* Font size for rarity in spinner */
    text-transform: capitalize;
}

/* .spinner-marker is defined within .player-main-item-area now */

/* Winning item highlight in spinner strip */
.spinner-item.won-item-highlight {
    border-color: var(--accent-gold);
    box-shadow: 0 0 15px var(--accent-gold);
    transform: scale(1.05);
    background-color: var(--accent-purple); /* Highlight background */
}
.spinner-item.won-item-highlight .item-name,
.spinner-item.won-item-highlight .item-rarity {
    color: var(--tertiary-text); /* Brighter text for winning item */
}

/* Exclusive Drop Display within player card */
.exclusive-drop-won-display {
    margin-top: 5px;
    padding: 5px;
    background-color: rgba(var(--accent-gold-rgb, 255, 215, 0), 0.1); /* Assuming --accent-gold-rgb is defined */
    border: 1px solid var(--accent-gold);
    border-radius: 4px;
    text-align: center;
}
.exclusive-drop-won-display img {
    max-width: 30px;
    max-height: 30px;
}

/* Emoji Reaction Panel Styles (Keep if used elsewhere, or remove if only for battle view) */
#emoji-reaction-panel .emoji-btn {
    /* Basic styling, can be enhanced */
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}
#emoji-reaction-panel .emoji-btn:hover {
    transform: scale(1.2);
}
#emoji-reaction-panel .emoji-btn:active {
    transform: scale(1.1);
}

#emoji-reaction-display-area {
    display: flex;
    flex-wrap: wrap; /* Allow emojis to wrap */
    justify-content: center; /* Center emojis if they don't fill the line */
    align-items: center;
    gap: 2px; /* Small gap between emoji bubbles */
    padding: 5px;
    min-height: 40px; /* Ensure it has some height even when empty */
    border-radius: 4px;
    background-color: var(--tertiary-bg); /* Slightly lighter than card bg for contrast */
    border: 1px solid var(--border-color-light);
}

#emoji-reaction-display-area .inline-block { /* Style for each emoji bubble */
    transition: transform 0.2s ease-out;
}
#emoji-reaction-display-area .inline-block:hover {
    transform: scale(1.1);
}

/* Styles for Case Cards in Battle View */
.battle-view-case-list {
    /* Uses grid from casebattling.php */
}
.battle-case-card-link .casino-card {
    height: 100%; /* Make cards fill the link height */
    justify-content: space-around; /* Distribute content a bit */
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.battle-case-card-link .casino-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}
.battle-view-case-list .text-xxs { /* Custom smaller text if needed */
    font-size: 0.65rem; 
    line-height: 0.85rem;
}

/* Battle Templates Table Styles */
#battle-templates-container {
    max-height: 400px; /* Or any desired height */
    overflow-y: auto; /* Enable vertical scroll if content exceeds max-height */
    /* overflow-x: auto; is on the div in HTML for horizontal scroll on small screens */
}

#battle-templates-table {
    width: 100%;
    border-collapse: collapse; /* Or separate, depending on desired style */
    background-color: var(--tertiary-bg);
    border-radius: 6px;
    overflow: hidden; /* To make border-radius work on table */
}

.battle-templates-thead tr {
    background-color: var(--secondary-bg); /* Darker header for table */
    color: var(--accent-gold); /* Gold text for headers */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

#battle-templates-table th,
#battle-templates-table td {
    padding: 0.75rem 1rem; /* Tailwind px-4 py-3 equivalent */
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}

#battle-templates-table th {
    font-weight: 600;
}

#battle-templates-table tbody tr.battle-template-row {
    background-color: var(--tertiary-bg);
    transition: background-color 0.2s ease-in-out;
}

#battle-templates-table tbody tr.battle-template-row:hover {
    background-color: var(--secondary-bg); /* Darken row on hover */
}

#battle-templates-table tbody tr:last-child td {
    border-bottom: none; /* Remove border from last row */
}

#battle-templates-table .use-template-btn {
    background-color: var(--accent-blue);
    clip-path: var(--clip-path-button-sm); /* Keep smaller clip path for aesthetics */
    font-size: 0.8rem; /* Slightly larger font */
    padding: 0.5rem 0.8rem; /* Increased padding for a larger button feel */
    min-width: 80px; 
    text-align: center;
    line-height: 1.2; /* Ensure text is centered well with new padding */
}

#battle-templates-table .use-template-btn:hover {
    background-color: var(--accent-blue-hover, #2563EB);
    filter: brightness(1.1);
}

#battle-templates-table td.truncate { /* This class is no longer used on the cases TD, but kept for other potential uses */
    max-width: 150px; /* Or your desired max-width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Styles for new case display in templates table */
.template-cases-td {
    vertical-align: middle; /* Ensure content aligns well if row height varies */
}

.template-cases-container {
    display: flex;
    flex-wrap: wrap; /* Allow cases to wrap to next line if not enough space */
    gap: 6px; /* Space between case items */
    align-items: center; /* Align items vertically */
    padding: 2px 0; /* Small padding within the cell */
    /* width: 90px; */ /* Removed as it's now inline */
}

/* New styles for template-case-card, replacing template-case-item */
.template-case-card {
    position: relative; /* For the quantity badge */
    padding: 0.2rem; /* Override default casino-card padding - Smaller padding */
    min-width: 38px; /* Ensure a minimum size - Smaller */
    max-width: 48px; /* Ensure it doesn't get too big - Smaller */
    height: auto; /* Let content determine height, or set fixed if needed */
    display: flex; /* Already in casino-card, but ensure it's column */
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center image and badge */
    /* Inherits background, border, radius, shadow from .casino-card */
}

.template-case-card:hover {
    /* Inherits hover from .casino-card, can add specific overrides if needed */
    border-color: var(--accent-gold); /* Example: gold border on hover */
}

.template-case-image {
    width: 24px; /* Size of the case image - Smaller */
    height: 24px; /* Smaller */
    object-fit: contain;
    border-radius: 2px; /* Slightly rounded corners for the image itself */
}

.template-case-quantity-badge {
    position: absolute;
    bottom: -5px; /* Position badge slightly overlapping and below - Adjusted */
    right: -5px; /* Adjusted */
    background-color: var(--accent-purple);
    color: var(--tertiary-text);
    font-size: 0.6rem; /* Small font for badge - Smaller */
    font-weight: 600;
    padding: 0px 3px; /* Adjusted padding */
    border-radius: 50%; /* Circular badge */
    line-height: 1;
    border: 1px solid var(--secondary-bg); /* Border to separate from image */
    min-width: 14px; /* Ensure badge has some width - Smaller */
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2); /* Slightly reduced shadow */
}

/* Styles for the new detail cards in the template table */
.template-detail-card {
    display: inline-flex; /* Changed to inline-flex to allow multiple cards per cell if needed, or just center one */
    align-items: center;
    justify-content: flex-start; /* Align content to the start */
    padding: 0.4rem 0.6rem; /* Smaller padding than full casino-card */
    background-color: var(--secondary-bg); /* Slightly lighter than cell bg for card effect */
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    font-size: 0.75rem; /* Small text for details */
    color: var(--primary-text);
    min-width: 80px; /* Minimum width for the card */
    text-align: left; /* Text aligned to left */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.template-detail-card i { /* Styling for Font Awesome icons */
    font-size: 0.85rem; /* Icon size */
    /* color is set inline in JS for variety, or can be themed here */
}

.template-detail-card img.inline-block { /* For crashpoints image */
    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5)); /* Subtle glow */
}

.template-detail-card span {
    white-space: nowrap; /* Prevent text wrapping within the small card */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* Limit width of text if it's too long */
}

#battle-templates-table td.align-middle {
    vertical-align: middle;
}

/* Team Battle Layout Styles */
#team-battle-container .team-column {
    /* .casino-card provides base styling */
    min-height: 300px; 
}

#team-battle-container .team-header {
    border-bottom: 1px solid var(--border-color-light, #4A456C);
    padding-bottom: 0.75rem;
}

#team-1-players .battle-player-card,
#team-2-players .battle-player-card {
    width: 100%;
}

/* Responsive adjustments for team player grids */
@media (max-width: 767px) { /* Corresponds to Tailwind's 'md' breakpoint */
    #team-1-players, #team-2-players {
        /* Example: stack to 1 column on very small screens if sm:grid-cols-2 is too wide */
        /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
    }
}

/* For 3v3, make the third player card in a team span 2 columns on sm+ screens */
@media (min-width: 640px) { /* Tailwind's sm breakpoint */
    .player-card-3v3-large {
        grid-column: span 2 / span 2;
    }
}