/* Theme support */
:root {
    --bg-color: #f5f5f5;
    --text-color: #212529;
    --border-color: #e0e0e0;
    --card-bg: #fafafa;
    --card-border: #e0e0e0;
    --nav-bg: #fafafa;
    --nav-text: #333333;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #d0d0d0;

    /* Battle Simulator Color Scheme - Ice Fortress Theme */
    --bs-primary: #0891b2;           /* Frozen Teal - Primary ice color */
    --bs-primary-dark: #0e7490;      /* Deeper frozen teal for hover states */
    --bs-primary-light: #22d3ee;     /* Lighter ice cyan for accents */
    --bs-secondary: #475569;         /* Slate - Professional, Fortress, Battle-hardened */
    --bs-secondary-light: #64748b;   /* Lighter slate for subtle elements */
    --bs-accent: #22d3ee;            /* Ice Cyan - Frozen accents */
    --bs-accent-light: #67e8f9;      /* Bright ice cyan for highlights */
    --bs-info: #0891b2;              /* Teal - Ice/Water information */
    --bs-info-light: #22d3ee;        /* Bright teal for highlights */
    --bs-success: #10b981;           /* Emerald - Calculated Success, Growth */
    --bs-success-light: #34d399;     /* Lighter emerald */
    --bs-warning: #ffc107;           /* Amber - Standard warning */
    --bs-danger: #dc3545;            /* Red - Standard danger */
    --bs-light: #f8fafc;             /* Slate-50 - Clean, crisp backgrounds */
    --bs-dark: #212529;              /* Near black - Text and dark elements */
    --bs-white: #fafafa;             /* Off-white - Softer than pure white */
    --bs-body-color: #212529;        /* Body text color */
    --bs-card-bg: #fafafa;           /* Card backgrounds */
    --bs-border-color: #e2e8f0;      /* Slate-200 - Subtle borders */
}

/* Light theme (default) */
html.theme-light,
.theme-light {
    --bg-color: #f5f5f5;
    --text-color: #212529;
    --border-color: #e0e0e0;
    --card-bg: #fafafa;
    --card-border: #e0e0e0;
    --nav-bg: #fafafa;
    --nav-text: #333333;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #d0d0d0;
    background-color: #f5f5f5 !important;
    color: #212529 !important;

    /* Battle Simulator Color Scheme - Ice Fortress Theme */
    --bs-primary: #0891b2;           /* Frozen Teal - Primary ice color */
    --bs-primary-dark: #0e7490;      /* Deeper frozen teal for hover states */
    --bs-primary-light: #22d3ee;     /* Lighter ice cyan for accents */
    --bs-secondary: #475569;         /* Slate - Professional, Fortress, Battle-hardened */
    --bs-secondary-light: #64748b;   /* Lighter slate for subtle elements */
    --bs-accent: #22d3ee;            /* Ice Cyan - Frozen accents */
    --bs-accent-light: #67e8f9;      /* Bright ice cyan for highlights */
    --bs-info: #0891b2;              /* Teal - Ice/Water information */
    --bs-info-light: #22d3ee;        /* Bright teal for highlights */
    --bs-success: #10b981;           /* Emerald - Calculated Success, Growth */
    --bs-success-light: #34d399;     /* Lighter emerald */
    --bs-warning: #ffc107;           /* Amber - Standard warning */
    --bs-danger: #dc3545;            /* Red - Standard danger */
    --bs-light: #f8fafc;             /* Slate-50 - Clean, crisp backgrounds */
    --bs-dark: #212529;              /* Near black - Text and dark elements */
    --bs-white: #fafafa;             /* Off-white - Softer than pure white */
    --bs-body-color: #212529;        /* Body text color */
    --bs-card-bg: #fafafa;           /* Card backgrounds */
    --bs-border-color: #e2e8f0;      /* Slate-200 - Subtle borders */
}

html.theme-light body,
.theme-light body {
    background-color: #f5f5f5 !important;
    color: #212529 !important;
}

/* Dark theme */
html.theme-dark,
.theme-dark {
    --bg-color: #0f172a;             /* Slate-900 - Deeper, richer dark */
    --text-color: #f1f5f9;           /* Slate-100 - Softer white for readability */
    --border-color: #334155;         /* Slate-700 - Subtle borders */
    --card-bg: #1e293b;              /* Slate-800 - Card backgrounds */
    --card-border: #334155;          /* Slate-700 - Card borders */
    --nav-bg: #1e293b;               /* Slate-800 - Navigation */
    --nav-text: #f1f5f9;             /* Slate-100 - Nav text */
    --input-bg: #334155;             /* Slate-700 - Input backgrounds */
    --input-text: #f1f5f9;           /* Slate-100 - Input text */
    --input-border: #475569;         /* Slate-600 - Input borders */

    /* Battle Simulator Color Scheme - Dark Mode Ice Fortress */
    --bs-primary: #22d3ee;           /* Bright ice cyan for dark backgrounds */
    --bs-primary-dark: #0891b2;      /* Deeper frozen teal for hover */
    --bs-primary-light: #67e8f9;     /* Even lighter ice cyan for subtle accents */
    --bs-secondary: #64748b;         /* Slate-500 - Lighter slate for dark mode */
    --bs-secondary-light: #94a3b8;   /* Slate-400 - Very light slate */
    --bs-accent: #67e8f9;            /* Cyan-300 - Bright ice accents for visibility */
    --bs-accent-light: #a5f3fc;      /* Cyan-200 - Very light ice cyan */
    --bs-info: #22d3ee;              /* Cyan-400 - Bright teal for dark backgrounds */
    --bs-info-light: #67e8f9;        /* Cyan-300 - Very bright teal */
    --bs-success: #34d399;           /* Emerald-400 - Brighter green for dark mode */
    --bs-success-light: #6ee7b7;     /* Emerald-300 - Very bright green */
    --bs-warning: #fbbf24;           /* Amber-400 - Slightly adjusted for dark mode */
    --bs-danger: #f87171;            /* Red-400 - Softer red for dark backgrounds */
    --bs-light: #1e293b;             /* Slate-800 - Light elements in dark mode */
    --bs-dark: #0f172a;              /* Slate-900 - Darkest elements */
    --bs-white: #f1f5f9;             /* Slate-100 - White text in dark mode */
    --bs-body-color: #f1f5f9;        /* Slate-100 - Body text */
    --bs-card-bg: #1e293b;           /* Slate-800 - Card backgrounds */
    --bs-border-color: #334155;      /* Slate-700 - Border color */
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark theme overrides */
html.theme-dark,
.theme-dark {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html.theme-dark body,
.theme-dark body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html.theme-dark .card,
.theme-dark .card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.theme-dark .card-body,
.theme-dark .card-body {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html.theme-dark .form-control,
html.theme-dark .form-select,
.theme-dark .form-control,
.theme-dark .form-select {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus,
.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    background-color: #334155 !important;
    border-color: #22d3ee !important;
    color: #f1f5f9 !important;
    box-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.25) !important;
}

html.theme-dark .form-label,
.theme-dark .form-label {
    color: #f1f5f9 !important;
}

html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6,
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 {
    color: #f1f5f9 !important;
}

.theme-dark .card-title {
    color: #f1f5f9 !important;
}

.theme-dark .text-muted {
    color: #94a3b8 !important; /* Slate-400 for muted text in dark mode */
}

.theme-dark .border {
    border-color: #334155 !important;
}

.theme-dark .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.theme-dark .dropdown-item {
    color: #f1f5f9 !important;
}

.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.theme-dark .dropdown-divider {
    border-color: #334155 !important;
}

/* ========================================
   Z-INDEX STACKING MANAGEMENT
   Ensures dropdowns appear above cards
   ======================================== */

/* Dropdown menus must appear above all cards and content
   Use z-index: 1050 (Bootstrap modal level) for top priority */
.dropdown-menu {
    z-index: 1050 !important;
}

/* Button groups with dropdowns need proper stacking context
   Relative positioning creates stacking context for dropdown children */
.btn-group {
    position: relative;
    z-index: 10;
}

.btn-group .dropdown-menu {
    z-index: 1050 !important;
}

/* Battle controls card sits below dropdowns
   Lower z-index ensures dropdown menus can appear above the card */
.battle-controls-card {
    position: relative;
    z-index: 1;
}

/* ========================================
   MODAL STYLING
   Theme-aware modal backgrounds and borders
   ======================================== */

/* Light theme modals */
html.theme-light .svs-modal,
.theme-light .svs-modal,
html:not(.theme-dark) .svs-modal {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
}

html.theme-light .svs-modal .modal-header,
.theme-light .svs-modal .modal-header,
html:not(.theme-dark) .svs-modal .modal-header {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.theme-light .svs-modal .modal-body,
.theme-light .svs-modal .modal-body,
html:not(.theme-dark) .svs-modal .modal-body {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

html.theme-light .svs-modal .modal-footer,
.theme-light .svs-modal .modal-footer,
html:not(.theme-dark) .svs-modal .modal-footer {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Dark theme modals */
html.theme-dark .svs-modal,
.theme-dark .svs-modal {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
}

html.theme-dark .svs-modal .modal-header,
.theme-dark .svs-modal .modal-header {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.theme-dark .svs-modal .modal-body,
.theme-dark .svs-modal .modal-body {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

html.theme-dark .svs-modal .modal-footer,
.theme-dark .svs-modal .modal-footer {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Form inputs in modals should match theme */
html.theme-dark .svs-modal .form-control,
.theme-dark .svs-modal .form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

html.theme-dark .svs-modal .form-control:focus,
.theme-dark .svs-modal .form-control:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--bs-primary) !important;
    color: var(--input-text) !important;
}

/* ========================================
   THREE-COLUMN DESKTOP LAYOUT SYSTEM
   Reusable layout pattern for modern controls
   ======================================== */

/* DESKTOP DIVIDER
   Vertical separator for three-column layout

   Usage:
   <div class="d-flex gap-4">
       <div style="flex: 1;">Left Column</div>
       <div class="desktop-divider"></div>
       <div style="flex: 1;">Center Column</div>
       <div class="desktop-divider"></div>
       <div style="flex: 1;">Right Column</div>
   </div>

   The gradient fades at top/bottom for elegant appearance
   Theme-aware: automatically adjusts for light/dark modes */
.desktop-divider {
    width: 1px;
    align-self: stretch;  /* Stretches to match parent height */
    background: linear-gradient(to bottom,
        transparent 0%,        /* Fade in at top */
        rgba(8, 145, 178, 0.15) 10%,
        rgba(8, 145, 178, 0.15) 90%,
        transparent 100%);     /* Fade out at bottom */
}

.theme-dark .desktop-divider {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(34, 211, 238, 0.2) 10%,    /* Brighter in dark mode for visibility */
        rgba(34, 211, 238, 0.2) 90%,
        transparent 100%);
}

/* DESKTOP CONTROL WIDTHS
   Responsive width adjustments for desktop breakpoint (≥1200px)

   Key Principles:
   - Desktop uses natural/fit-content widths (not stretched)
   - Mobile uses 100% width (full-width for touch targets)
   - Tablet uses intermediate values

   These rules ensure controls maintain comfortable sizing on desktop
   while expanding to full width on mobile devices */
@media (min-width: 1200px) {
    /* Modern select: Natural width with minimum for readability */
    .modern-select {
        min-width: 240px;
        max-width: 100%; /* Prevent overflow from long player names */
        width: auto;   /* Fits content, doesn't stretch */
    }

    /* Modern input: Constrained max-width for number inputs */
    .modern-input {
        max-width: 180px;
        width: auto;
    }

    /* Modern checkbox: Fit-content prevents stretching to column width
       min-width ensures comfortable padding and touch target size */
    .modern-check {
        width: fit-content;
        max-width: fit-content;
        padding: 0.625rem 1.5rem;
        min-width: 200px;
    }

    /* Modern action buttons: Natural width based on content */
    .modern-action-button {
        width: auto;
        min-width: auto;
    }
}

.theme-dark .nav-link {
    color: #f1f5f9 !important;
}

.theme-dark .btn-outline-secondary {
    color: #f1f5f9 !important;
    border-color: #64748b !important;
}

.theme-dark .btn-outline-secondary:hover {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #0f172a !important;
}

/* Apply theme to common elements */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.form-control, .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    border-color: #0d6efd;
    color: var(--input-text);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e51740;
}

.validation-message {
    color: var(--bs-danger);
}

.theme-dark .validation-message {
    color: #ea868f;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ========================================
   MODERN BATTLE SIMULATOR CONTROLS
   Ice Fortress Command Center Design System
   ========================================

   OVERVIEW:
   A reusable, responsive control system for building modern UI sections.
   Features glassmorphic design, three-column desktop layout, and full
   mobile responsiveness.

   CORE COMPONENTS:
   1. Container Card (.battle-controls-card) - Main wrapper
   2. Desktop Three-Column Layout - Settings | Action | Data Management
   3. Form Controls - Dropdowns, inputs, checkboxes with consistent styling
   4. Buttons - Primary hero button + secondary action buttons
   5. Responsive Breakpoints - Desktop (≥1200px), Tablet (768-1199px), Mobile (<768px)

   RESPONSIVE PHILOSOPHY:
   - Desktop: Three-column horizontal layout with natural control widths
   - Mobile: Vertical stacking with 100% width controls for touch targets
   - Tablet: Intermediate sizing between desktop and mobile

   THEME SUPPORT:
   All components automatically adapt to light/dark themes via CSS variables.

   For complete documentation and examples, see:
   /wwwroot/CONTROLS_LAYOUT_DOCUMENTATION.md
   ======================================== */

/* ----------------------------------------
   1. CONTROLS CONTAINER
   Glassmorphic card with elevated appearance
   ----------------------------------------

   Usage:
   <div class="battle-controls-card">
       <!-- Your controls here -->
   </div>

   Features:
   - Glassmorphic background with backdrop blur
   - Top accent line (teal gradient)
   - Automatic theme switching (light/dark)
   - Proper z-index for dropdown compatibility
   ---------------------------------------- */
.battle-controls-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.battle-controls-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--bs-primary) 50%,
        transparent 100%);
    opacity: 0.6;
}

.battle-controls-card:hover {
    /* No shadow on hover */
}

/* ----------------------------------------
   2. CONTROLS LAYOUT - THREE-COLUMN PATTERN
   ----------------------------------------

   Desktop Three-Column Layout Pattern:
   <div class="d-none d-xl-block mt-3">
       <div class="d-flex align-items-center justify-content-between gap-4">
           <!-- Left Column: Settings -->
           <div class="d-flex flex-column gap-3" style="flex: 1;">
               <div class="control-group">...</div>
           </div>

           <div class="desktop-divider"></div>

           <!-- Center Column: Primary Action -->
           <div class="d-flex justify-content-center align-items-center" style="flex: 1;">
               <button class="modern-primary-button">Action</button>
           </div>

           <div class="desktop-divider"></div>

           <!-- Right Column: Data Management -->
           <div class="d-flex flex-column gap-2 align-items-end" style="flex: 1;">
               <button class="modern-action-button">Save</button>
           </div>
       </div>
   </div>

   Mobile Layout Pattern:
   <div class="d-xl-none mt-3">
       <div class="d-flex flex-column gap-2">
           <!-- All controls stack vertically -->
       </div>
   </div>
   ---------------------------------------- */

/* Controls row: Flexbox container for horizontal control groups */
.controls-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;  /* Wraps to multiple lines on smaller screens */
}

/* Simulation settings: Centered row for settings controls */
.simulation-settings {
    justify-content: center;
    padding: 0.5rem 0;
    width: 100%;
}

/* Control group: Label + control pairing (e.g., "Mode:" + dropdown) */
.control-group {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0; /* Allow flex children to shrink below content size */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* Select within control group should respect max-width */
.control-group .modern-select {
    flex: 0 1 auto; /* Don't grow, allow shrink, size by content */
    min-width: 0; /* Override browser default to allow shrinking */
}

/* Chain events control: Pushes to the right side */
.control-group.chain-events-control {
    flex: 0 0 auto;
    margin-left: auto; /* Push to the right end */
}

/* ----------------------------------------
   3. LABELS & TYPOGRAPHY
   ---------------------------------------- */
.control-label {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: var(--text-color);
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0.85;
}

.control-label i {
    color: var(--bs-primary);
    font-size: 1rem;
    opacity: 0.9;
}

/* ----------------------------------------
   4. MODERN SELECT DROPDOWN
   Clean with subtle ice accent
   ----------------------------------------

   Usage:
   <select class="form-select modern-select" @bind="value">
       <option value="1">Option 1</option>
   </select>

   Features:
   - Glassmorphic styling with teal accents
   - Hover and focus states with glow effects
   - Disabled state with reduced opacity
   - Theme-aware (light/dark)
   - Responsive: Natural width on desktop, 100% on mobile

   Width Behavior:
   - Desktop (≥1200px): min-width 240px, auto width
   - Mobile (<768px): 100% width for touch targets
   ---------------------------------------- */
.modern-select {
    min-width: 200px; /* Minimum usable width */
    max-width: 350px; /* Hard cap to prevent long player names from breaking layout */
    border: 1.5px solid rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    padding: 0.625rem 2.5rem 0.625rem 1rem; /* Extra right padding for dropdown arrow */
    font-size: 0.9375rem;
    font-weight: 500;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    text-overflow: ellipsis; /* Truncate long text with ellipsis */
    overflow: hidden;
    white-space: nowrap;
}

#simulationMode {
    min-width: 200px; /* Specific width for simulation mode dropdown */
    width: 200px;
}

.modern-select:hover:not(:disabled) {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 3px rgba(8, 145, 178, 0.08);
}

.modern-select:focus {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 4px rgba(8, 145, 178, 0.12);
    outline: none;
}

.modern-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(248, 250, 252, 0.5);
}

/* ----------------------------------------
   5. MODERN INPUT FIELD
   ---------------------------------------- */
.modern-input {
    max-width: 150px;
    border: 1.5px solid rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.modern-input:hover:not(:disabled) {
    border-color: var(--bs-primary);
}

.modern-input:focus {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 4px rgba(8, 145, 178, 0.12);
    outline: none;
}

.modern-input::placeholder {
    color: var(--bs-secondary-light);
    font-weight: 400;
}

/* ----------------------------------------
   6. MODERN CHECKBOX
   Pill-style with subtle background
   ----------------------------------------

   Usage:
   <div class="form-check modern-check">
       <input class="form-check-input" type="checkbox" id="myCheck" @bind="value">
       <label class="form-check-label" for="myCheck">
           <i class="bi bi-check-circle me-1"></i>
           Label Text
       </label>
   </div>

   Features:
   - Pill-shaped container with glassmorphic background
   - Custom checkbox styling with teal accent
   - Icon support in labels
   - Hover state with color transition
   - Theme-aware

   Width Behavior:
   - Desktop (≥1200px): fit-content with min-width 200px
   - Mobile (<768px): 100% width for touch targets

   IMPORTANT: On desktop, use width: fit-content to prevent
   stretching to full column width in flex containers.
   ---------------------------------------- */
.modern-check {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background: rgba(248, 250, 252, 0.6);
    border: 1.5px solid rgba(226, 232, 240, 0.5);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-check:hover {
    background: rgba(8, 145, 178, 0.05);
    border-color: rgba(8, 145, 178, 0.3);
}

.modern-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(71, 85, 105, 0.3);
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin: 0; /* Remove Bootstrap default margins */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.modern-check .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

.modern-check .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12);
}

.modern-check .form-check-label {
    font-weight: 500;
    font-size: 0.9375rem;
    margin-left: 0.625rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-color);
}

.modern-check .form-check-label i {
    color: var(--bs-primary);
    font-size: 1.125rem;
}

/* ----------------------------------------
   7. MODERN ACTION BAR
   Three-column grid layout
   ---------------------------------------- */
.modern-action-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(15, 23, 42, 0.02);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: visible;
}

/* Extended action bar with settings row */
.modern-action-bar.extended-bar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
}

.battle-settings-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    flex-wrap: wrap;
}

.actions-grid-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

.modern-action-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--bs-primary) 50%,
        transparent 100%);
    opacity: 0.5;
}

.action-section {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.action-left {
    justify-content: flex-start;
}

.action-center {
    justify-content: center;
}

.action-right {
    justify-content: flex-end;
}

/* ----------------------------------------
   8. PRIMARY BUTTON (HERO ELEMENT)
   Ice gradient with glow effects
   ---------------------------------------- */
.modern-primary-button {
    min-width: 380px;
    padding: 1.125rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    border-radius: 12px;
    background: linear-gradient(135deg,
        #0891b2 0%,
        #0e7490 50%,
        #155e75 100%);
    border: none;
    color: white;
    box-shadow:
        0 4px 12px rgba(8, 145, 178, 0.25),
        0 8px 24px rgba(8, 145, 178, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    position: relative;
    overflow: hidden;
}

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

.modern-primary-button:hover:not(:disabled)::before {
    left: 100%;
}

.modern-primary-button:hover:not(:disabled) {
    background: linear-gradient(135deg,
        #0997be 0%,
        #0f7a96 50%,
        #16667d 100%);
    box-shadow:
        0 4px 12px rgba(8, 145, 178, 0.25),
        0 8px 24px rgba(8, 145, 178, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.modern-primary-button:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 2px 8px rgba(8, 145, 178, 0.25),
        0 4px 16px rgba(8, 145, 178, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modern-primary-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.modern-primary-button .battle-icon {
    width: 1.375rem;
    height: 1.375rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ----------------------------------------
   9. SECONDARY ACTION BUTTONS
   Clean ghost buttons with hover reveal
   ---------------------------------------- */
.modern-action-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px;
    border: 1.5px solid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.modern-action-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn-outline-primary.modern-action-button {
    border-color: rgba(8, 145, 178, 0.4);
    color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-primary.modern-action-button::before {
    background-color: var(--bs-primary);
}

.btn-outline-primary.modern-action-button:hover:not(:disabled) {
    border-color: rgba(8, 145, 178, 0.6);
    background-color: rgba(8, 145, 178, 0.05);
    color: var(--bs-primary) !important;
}

.btn-outline-primary.modern-action-button:hover:not(:disabled) span,
.btn-outline-primary.modern-action-button:hover:not(:disabled) i {
    color: var(--bs-primary) !important;
}

.btn-outline-primary.modern-action-button:hover:not(:disabled)::before {
    width: 0;
    height: 0;
}

.btn-outline-secondary.modern-action-button {
    border-color: rgba(8, 145, 178, 0.4);
    color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-secondary.modern-action-button::before {
    background-color: var(--bs-primary);
}

.btn-outline-secondary.modern-action-button:hover:not(:disabled) {
    border-color: rgba(8, 145, 178, 0.6);
    background-color: rgba(8, 145, 178, 0.05);
    color: var(--bs-primary) !important;
}

.btn-outline-secondary.modern-action-button:hover:not(:disabled) span,
.btn-outline-secondary.modern-action-button:hover:not(:disabled) i {
    color: var(--bs-primary) !important;
}

.btn-outline-secondary.modern-action-button:hover:not(:disabled)::before {
    width: 0;
    height: 0;
}

.modern-action-button:active:not(:disabled) {
    transform: translateY(0);
}

.modern-action-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.modern-action-button i {
    font-size: 1.0625rem;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.modern-action-button span {
    position: relative;
    z-index: 1;
}

.modern-action-button:hover:not(:disabled) i {
    transform: none;
}

/* ----------------------------------------
   10. DARK THEME OVERRIDES
   Inverted glassmorphism with ice accents
   ---------------------------------------- */
.theme-dark .battle-controls-card {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(51, 65, 85, 0.8);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.theme-dark .battle-controls-card::before {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--bs-primary) 50%,
        transparent 100%);
    opacity: 0.8;
}

.theme-dark .battle-controls-card:hover {
    /* No shadow on hover */
}

.theme-dark .modern-action-bar {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(51, 65, 85, 0.8);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.theme-dark .battle-settings-row {
    border-bottom-color: rgba(71, 85, 105, 0.5);
}

.theme-dark .modern-action-bar::before {
    opacity: 0.7;
}

.theme-dark .control-label {
    color: var(--text-color);
    opacity: 0.9;
}

.theme-dark .modern-select,
.theme-dark .modern-input {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.theme-dark .modern-select:hover:not(:disabled),
.theme-dark .modern-input:hover:not(:disabled) {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(34, 211, 238, 0.12);
}

.theme-dark .modern-select:focus,
.theme-dark .modern-input:focus {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 0 0 4px rgba(34, 211, 238, 0.15);
}

.theme-dark .modern-select:disabled {
    background-color: rgba(51, 65, 85, 0.3);
}

.theme-dark .modern-check {
    background: rgba(51, 65, 85, 0.4);
    border-color: rgba(71, 85, 105, 0.4);
}

.theme-dark .modern-check:hover {
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.3);
}

.theme-dark .modern-check .form-check-input {
    border-color: rgba(100, 116, 139, 0.5);
    background-color: rgba(51, 65, 85, 0.5);
    margin: 0; /* Remove Bootstrap default margins */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.theme-dark .modern-check .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.theme-dark .modern-primary-button {
    background: linear-gradient(135deg,
        #22d3ee 0%,
        #0891b2 50%,
        #0e7490 100%);
    box-shadow:
        0 4px 12px rgba(34, 211, 238, 0.3),
        0 8px 24px rgba(34, 211, 238, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-dark .modern-primary-button:hover:not(:disabled) {
    background: linear-gradient(135deg,
        #2dd4f4 0%,
        #0a9bb8 50%,
        #0f7f8e 100%);
    box-shadow:
        0 4px 12px rgba(34, 211, 238, 0.3),
        0 8px 24px rgba(34, 211, 238, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.theme-dark .btn-outline-primary.modern-action-button {
    border-color: rgba(34, 211, 238, 0.4);
    color: var(--bs-primary);
}

.theme-dark .btn-outline-primary.modern-action-button:hover:not(:disabled) {
    border-color: rgba(34, 211, 238, 0.6);
    background-color: rgba(34, 211, 238, 0.08);
    color: var(--bs-primary) !important;
}

.theme-dark .btn-outline-primary.modern-action-button:hover:not(:disabled) span,
.theme-dark .btn-outline-primary.modern-action-button:hover:not(:disabled) i {
    color: var(--bs-primary) !important;
}

.theme-dark .btn-outline-secondary.modern-action-button {
    border-color: rgba(34, 211, 238, 0.4);
    color: var(--bs-primary);
}

.theme-dark .btn-outline-secondary.modern-action-button:hover:not(:disabled) {
    border-color: rgba(34, 211, 238, 0.6);
    background-color: rgba(34, 211, 238, 0.08);
    color: var(--bs-primary) !important;
}

.theme-dark .btn-outline-secondary.modern-action-button:hover:not(:disabled) span,
.theme-dark .btn-outline-secondary.modern-action-button:hover:not(:disabled) i {
    color: var(--bs-primary) !important;
}

/* ----------------------------------------
   11. RESPONSIVE DESIGN
   Mobile-first breakpoints
   ----------------------------------------

   Breakpoint Strategy:
   - Mobile (<768px): 100% width, vertical stacking
   - Tablet (768px - 1199px): Intermediate sizing
   - Desktop (≥1200px): Three-column layout, natural widths

   Key Responsive Patterns:
   1. Use d-xl-none for mobile-only sections
   2. Use d-none d-xl-block for desktop-only sections
   3. All controls expand to 100% width on mobile
   4. Desktop uses fit-content/auto widths
   5. gap properties adjust for each breakpoint

   Implementation Example:
   <!-- Mobile -->
   <div class="d-xl-none">
       <div class="d-flex flex-column gap-2">
           <button class="modern-primary-button w-100">Button</button>
       </div>
   </div>

   <!-- Desktop -->
   <div class="d-none d-xl-block">
       <div class="d-flex gap-4">
           <button class="modern-primary-button">Button</button>
       </div>
   </div>
   ---------------------------------------- */

/* Intermediate desktop screens (1200px - 1400px)
   Reduce min-widths to prevent horizontal overflow */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .modern-primary-button {
        min-width: 320px; /* Reduced from 380px */
    }

    .modern-select {
        min-width: 180px; /* Reduced from 240px/280px */
        max-width: 280px; /* Stricter constraint for intermediate screens */
    }

    .modern-input {
        max-width: 140px; /* Slightly smaller */
    }

    /* Tighter spacing for the controls */
    .controls-row {
        gap: 1.5rem; /* Reduced from 2rem */
    }

    .control-group {
        gap: 0.75rem; /* Reduced from 0.875rem */
    }

    /* Allow content to shrink more */
    .battle-controls-card {
        padding: 1.5rem 1.75rem; /* Reduced horizontal padding */
    }
}

@media (max-width: 1199.98px) {
    .modern-primary-button {
        min-width: 300px;
        padding: 1rem 2rem;
        font-size: 1.0625rem;
    }

    .modern-action-bar {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .controls-row {
        gap: 1.5rem;
    }
}

/* Tablet/Medium screens (768px - 1199px) */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .modern-primary-button {
        min-width: 300px;
        padding: 1rem 2rem;
        font-size: 1.0625rem;
    }

    .modern-action-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }

    .modern-select {
        min-width: 200px;
        max-width: 300px; /* Prevent long player names from breaking layout */
        font-size: 0.9rem;
    }

    .modern-check {
        padding: 0.625rem 1.25rem;
    }

    .controls-row {
        gap: 1.5rem;
    }
}

/* Mobile screens (< 768px) */
@media (max-width: 767.98px) {
    .battle-controls-card {
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
    }

    .modern-action-bar {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .modern-action-bar.mobile-compact {
        padding: 1.5rem;
    }

    .battle-settings-row.mobile-settings {
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .controls-row {
        gap: 1rem;
        justify-content: center;
    }

    .control-group {
        flex-direction: column;
    }

    .modern-select {
        width: 100%;
        max-width: 100%;
        min-width: auto; /* Allow full shrink on mobile */
    }

    .control-group.chain-events-control {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .control-label {
        font-size: 0.8125rem;
    }

    .modern-select {
        min-width: 100%;
        width: 100%;
        font-size: 0.9rem;
    }

    #simulationMode {
        min-width: 100%; /* Override desktop specific width on mobile */
        width: 100%;
    }

    .modern-input {
        max-width: 100%;
        width: 100%;
        font-size: 0.9rem;
    }

    .modern-primary-button {
        min-width: 100%;
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .modern-action-button {
        min-width: 100%;
        width: 100%;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .modern-check {
        min-width: 100%;
        width: 100%;
        justify-content: flex-start;
        padding: 0.625rem 1rem;
    }
}

/* ----------------------------------------
   12. ACCESSIBILITY
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .battle-controls-card,
    .modern-action-bar,
    .modern-select,
    .modern-input,
    .modern-check,
    .modern-primary-button,
    .modern-action-button,
    .modern-action-button::before,
    .modern-primary-button::before {
        transition: none;
        animation: none;
    }
}

/* Focus visible for keyboard navigation */
.modern-select:focus-visible,
.modern-input:focus-visible,
.modern-check .form-check-input:focus-visible,
.modern-primary-button:focus-visible,
.modern-action-button:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========================================
   ENHANCED BATTLE COMMAND CENTER
   Premium Spacious Layout System
   ======================================== */

/* ----------------------------------------
   MAIN CONTAINER - ULTRA PREMIUM OPEN DESIGN
   ---------------------------------------- */
.battle-command-center {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 6rem;
    position: relative;
    overflow: visible;
}

.battle-command-center::before {
    display: none;
}

/* ----------------------------------------
   DESKTOP VARIANT - ULTRA PREMIUM CENTERED LAYOUT
   ---------------------------------------- */
.battle-command-center.desktop-variant {
    padding: 12rem 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------
   PREMIUM CONFIG SECTION - CENTERED VERTICAL STACK
   ---------------------------------------- */
.premium-config-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    width: 100%;
}

.config-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.4;
    text-align: center;
}

.settings-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5rem;
    width: 100%;
    max-width: 700px;
}

.control-card-premium {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 24px;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow:
        0 4px 16px rgba(8, 145, 178, 0.06),
        0 16px 64px rgba(8, 145, 178, 0.03),
        0 0 0 1px rgba(8, 145, 178, 0.04);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.control-card-premium:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 8px 24px rgba(8, 145, 178, 0.1),
        0 24px 80px rgba(8, 145, 178, 0.06),
        0 0 0 1px rgba(8, 145, 178, 0.12);
    transform: translateY(-4px);
}

.control-card-premium.checkbox-card-premium {
    padding: 3.5rem 4rem;
    align-items: center;
    justify-content: center;
}

.control-label-premium {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.5;
    text-align: center;
}

/* ----------------------------------------
   PREMIUM DIVIDER - ELEGANT SEPARATOR
   ---------------------------------------- */
.premium-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    width: 100%;
    max-width: 800px;
    padding: 4rem 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(8, 145, 178, 0.15) 50%,
        transparent 100%);
}

.divider-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.25;
}

.divider-battle-icon {
    width: 100%;
    height: 100%;
    color: var(--bs-primary);
    filter: drop-shadow(0 2px 8px rgba(8, 145, 178, 0.3));
}

/* ----------------------------------------
   PREMIUM PRIMARY SECTION - HERO BUTTON ISOLATION
   ---------------------------------------- */
.premium-primary-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 8rem 0;
}

/* ----------------------------------------
   PREMIUM ACTIONS SECTION - CENTERED BUTTON GROUPS
   ---------------------------------------- */
.premium-actions-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rem;
    width: 100%;
    max-width: 700px;
}

.action-group-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: 100%;
}

.action-group-label-premium {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.35;
    text-align: center;
}

.action-buttons-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    width: 100%;
}

/* ----------------------------------------
   MOBILE VARIANT - PREMIUM MOBILE EXPERIENCE
   ---------------------------------------- */
.battle-command-center.mobile-variant {
    padding: 4rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.command-settings-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.control-group-mobile {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow:
        0 4px 12px rgba(8, 145, 178, 0.06),
        0 12px 32px rgba(8, 145, 178, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.control-label-mobile {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.control-label-mobile i {
    display: none; /* Remove icons for cleaner look */
}

/* ----------------------------------------
   PRIMARY ACTION SECTION - COMMANDING
   ---------------------------------------- */
.primary-action-section {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

/* ----------------------------------------
   SECONDARY ACTIONS SECTION (Mobile) - SPACIOUS
   ---------------------------------------- */
.secondary-actions-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-top: 2.5rem;
    border-top: none;
}

.action-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.action-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.35;
}

.action-buttons {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* ----------------------------------------
   ENHANCED INPUT CONTROLS - ELEGANT & SPACIOUS
   ---------------------------------------- */
.battle-select,
.battle-input {
    border: 1.5px solid rgba(8, 145, 178, 0.15);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    font-size: 1.0625rem;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--input-text);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 12px rgba(8, 145, 178, 0.04),
        0 8px 24px rgba(8, 145, 178, 0.02);
    width: 100%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.battle-select:hover:not(:disabled),
.battle-input:hover:not(:disabled) {
    border-color: rgba(8, 145, 178, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 6px 16px rgba(8, 145, 178, 0.08),
        0 12px 32px rgba(8, 145, 178, 0.06),
        0 0 0 5px rgba(8, 145, 178, 0.08);
    transform: translateY(-2px);
}

.battle-select:focus,
.battle-input:focus {
    border-color: var(--bs-primary);
    background-color: rgba(255, 255, 255, 1);
    box-shadow:
        0 8px 20px rgba(8, 145, 178, 0.12),
        0 16px 40px rgba(8, 145, 178, 0.08),
        0 0 0 6px rgba(8, 145, 178, 0.15);
    outline: none;
    transform: translateY(-2px);
}

.battle-select:disabled,
.battle-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: rgba(248, 250, 252, 0.3);
    transform: none;
}

/* ----------------------------------------
   ENHANCED CHECKBOX CARD - REFINED
   ---------------------------------------- */
.battle-checkbox-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.battle-checkbox-card:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.battle-checkbox-card input[type="checkbox"] {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid rgba(8, 145, 178, 0.25);
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.8);
}

.battle-checkbox-card input[type="checkbox"]:hover {
    border-color: rgba(8, 145, 178, 0.4);
    transform: scale(1.05);
}

.battle-checkbox-card input[type="checkbox"]:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 5px rgba(8, 145, 178, 0.15);
    transform: scale(1.05);
}

.battle-checkbox-card input[type="checkbox"]:focus {
    box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.2);
}

.battle-checkbox-card .checkbox-label {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
    flex-grow: 1;
}

.battle-checkbox-card .checkbox-label i {
    display: none; /* Remove icon for cleaner look */
}

/* ----------------------------------------
   HERO PRIMARY BUTTON (Desktop) - ULTIMATE COMMANDING PRESENCE
   ---------------------------------------- */
.battle-hero-btn {
    min-width: 700px;
    padding: 3.5rem 7rem;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 24px;
    background: linear-gradient(135deg,
        #0891b2 0%,
        #0e7490 50%,
        #155e75 100%);
    border: none;
    color: white;
    box-shadow:
        0 16px 48px rgba(8, 145, 178, 0.45),
        0 32px 96px rgba(8, 145, 178, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

.battle-hero-btn::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.9s ease;
}

.battle-hero-btn:hover:not(:disabled)::before {
    left: 100%;
}

.battle-hero-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,
        #22d3ee 0%,
        #0891b2 50%,
        #0e7490 100%);
    box-shadow:
        0 20px 56px rgba(8, 145, 178, 0.55),
        0 40px 120px rgba(8, 145, 178, 0.45),
        0 0 0 10px rgba(8, 145, 178, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 3px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-10px) scale(1.04);
}

.battle-hero-btn:active:not(:disabled) {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 10px 28px rgba(8, 145, 178, 0.45),
        0 20px 64px rgba(8, 145, 178, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.battle-hero-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.battle-hero-btn .battle-icon {
    width: 2.25rem;
    height: 2.25rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
    animation: pulse-icon 3.5s ease-in-out infinite;
}

/* ----------------------------------------
   MODERN ACTION BUTTONS - SMALLER, REFINED
   ---------------------------------------- */
.battle-action-btn-modern {
    padding: 1rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 14px;
    border: 1.5px solid;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow:
        0 2px 8px rgba(8, 145, 178, 0.04),
        0 6px 16px rgba(8, 145, 178, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.battle-action-btn-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn-outline-primary.battle-action-btn-modern {
    border-color: rgba(8, 145, 178, 0.25);
    color: var(--bs-primary);
    background-color: rgba(255, 255, 255, 0.02);
}

.btn-outline-primary.battle-action-btn-modern::before {
    background-color: var(--bs-primary);
}

.btn-outline-primary.battle-action-btn-modern:hover:not(:disabled) {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: white;
    box-shadow:
        0 6px 16px rgba(8, 145, 178, 0.3),
        0 12px 32px rgba(8, 145, 178, 0.18),
        0 0 0 4px rgba(8, 145, 178, 0.12);
    transform: translateY(-3px);
}

.btn-outline-primary.battle-action-btn-modern:hover:not(:disabled)::before {
    width: 350%;
    height: 350%;
}

.btn-outline-secondary.battle-action-btn-modern {
    border-color: rgba(71, 85, 105, 0.2);
    color: var(--bs-secondary);
    background-color: rgba(255, 255, 255, 0.02);
}

.btn-outline-secondary.battle-action-btn-modern::before {
    background-color: var(--bs-secondary);
}

.btn-outline-secondary.battle-action-btn-modern:hover:not(:disabled) {
    border-color: var(--bs-secondary);
    background-color: var(--bs-secondary);
    color: white;
    box-shadow:
        0 5px 14px rgba(71, 85, 105, 0.22),
        0 10px 28px rgba(71, 85, 105, 0.12),
        0 0 0 4px rgba(71, 85, 105, 0.1);
    transform: translateY(-3px);
}

.btn-outline-secondary.battle-action-btn-modern:hover:not(:disabled)::before {
    width: 350%;
    height: 350%;
}

.battle-action-btn-modern:active:not(:disabled) {
    transform: translateY(0);
}

.battle-action-btn-modern:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.battle-action-btn-modern i {
    font-size: 1rem;
    transition: transform 0.4s ease;
}

.battle-action-btn-modern:hover:not(:disabled) i {
    transform: scale(1.12);
}

/* ----------------------------------------
   PRIMARY BUTTON (Mobile) - PREMIUM MOBILE
   ---------------------------------------- */
.battle-primary-btn {
    width: 100%;
    max-width: 500px;
    padding: 1.75rem 3.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 18px;
    background: linear-gradient(135deg,
        #0891b2 0%,
        #0e7490 50%,
        #155e75 100%);
    border: none;
    color: white;
    box-shadow:
        0 8px 20px rgba(8, 145, 178, 0.35),
        0 16px 48px rgba(8, 145, 178, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.125rem;
    position: relative;
    overflow: hidden;
}

.battle-primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent);
    transition: left 0.7s ease;
}

.battle-primary-btn:hover:not(:disabled)::before {
    left: 100%;
}

.battle-primary-btn:active:not(:disabled) {
    background: linear-gradient(135deg,
        #22d3ee 0%,
        #0891b2 50%,
        #0e7490 100%);
    box-shadow:
        0 10px 24px rgba(8, 145, 178, 0.4),
        0 20px 60px rgba(8, 145, 178, 0.3),
        0 0 0 5px rgba(8, 145, 178, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.35);
    transform: scale(0.98);
}

.battle-primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.battle-primary-btn .battle-icon {
    width: 1.625rem;
    height: 1.625rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
    animation: pulse-icon 2.75s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.95;
    }
}

/* ----------------------------------------
   ACTION BUTTONS - REFINED ELEGANCE
   ---------------------------------------- */
.battle-action-btn {
    padding: 1.25rem 2.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 16px;
    border: 1.5px solid;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow:
        0 4px 12px rgba(8, 145, 178, 0.06),
        0 8px 24px rgba(8, 145, 178, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.battle-action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn-outline-primary.battle-action-btn {
    border-color: rgba(8, 145, 178, 0.25);
    color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-primary.battle-action-btn::before {
    background-color: var(--bs-primary);
}

.btn-outline-primary.battle-action-btn:hover:not(:disabled) {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: white;
    box-shadow:
        0 8px 20px rgba(8, 145, 178, 0.35),
        0 16px 40px rgba(8, 145, 178, 0.2),
        0 0 0 5px rgba(8, 145, 178, 0.15);
    transform: translateY(-4px);
}

.btn-outline-primary.battle-action-btn:hover:not(:disabled)::before {
    width: 350%;
    height: 350%;
}

.btn-outline-secondary.battle-action-btn {
    border-color: rgba(71, 85, 105, 0.2);
    color: var(--bs-secondary);
    background-color: transparent;
}

.btn-outline-secondary.battle-action-btn::before {
    background-color: var(--bs-secondary);
}

.btn-outline-secondary.battle-action-btn:hover:not(:disabled) {
    border-color: var(--bs-secondary);
    background-color: var(--bs-secondary);
    color: white;
    box-shadow:
        0 6px 16px rgba(71, 85, 105, 0.25),
        0 12px 32px rgba(71, 85, 105, 0.15),
        0 0 0 5px rgba(71, 85, 105, 0.12);
    transform: translateY(-4px);
}

.btn-outline-secondary.battle-action-btn:hover:not(:disabled)::before {
    width: 350%;
    height: 350%;
}

.battle-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.battle-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.battle-action-btn i {
    font-size: 1.125rem;
    transition: transform 0.4s ease;
}

.battle-action-btn:hover:not(:disabled) i {
    transform: scale(1.15);
}

/* ----------------------------------------
   DARK THEME OVERRIDES
   ---------------------------------------- */
.theme-dark .battle-command-center {
    background: transparent;
}

.theme-dark .control-card-premium {
    background: rgba(30, 41, 59, 0.5);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 16px 64px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(34, 211, 238, 0.08);
}

.theme-dark .control-card-premium:hover {
    background: rgba(30, 41, 59, 0.7);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 24px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(34, 211, 238, 0.15);
}

.theme-dark .divider-line {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.2) 50%,
        transparent 100%);
}

.theme-dark .divider-battle-icon {
    color: var(--bs-primary);
    filter: drop-shadow(0 2px 10px rgba(34, 211, 238, 0.4));
}

.theme-dark .command-settings-section,
.theme-dark .control-group-mobile {
    background: rgba(30, 41, 59, 0.4);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.2);
}

.theme-dark .secondary-actions-section {
    border-top-color: transparent;
}

.theme-dark .battle-select,
.theme-dark .battle-input {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-dark .battle-select:hover:not(:disabled),
.theme-dark .battle-input:hover:not(:disabled) {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 0 4px rgba(34, 211, 238, 0.12);
}

.theme-dark .battle-select:focus,
.theme-dark .battle-input:focus {
    border-color: var(--bs-primary);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 0 5px rgba(34, 211, 238, 0.15);
}

.theme-dark .battle-select:disabled,
.theme-dark .battle-input:disabled {
    background-color: rgba(51, 65, 85, 0.3);
}

.theme-dark .battle-checkbox-card {
    background: rgba(51, 65, 85, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
}

.theme-dark .battle-checkbox-card:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.4);
}

.theme-dark .battle-checkbox-card input[type="checkbox"] {
    border-color: rgba(100, 116, 139, 0.5);
    background-color: rgba(51, 65, 85, 0.5);
}

.theme-dark .battle-checkbox-card input[type="checkbox"]:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
}

.theme-dark .battle-hero-btn,
.theme-dark .battle-primary-btn {
    background: linear-gradient(135deg,
        #22d3ee 0%,
        #0891b2 50%,
        #0e7490 100%);
    box-shadow:
        0 6px 16px rgba(34, 211, 238, 0.35),
        0 10px 32px rgba(34, 211, 238, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.theme-dark .battle-hero-btn:hover:not(:disabled),
.theme-dark .battle-primary-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,
        #67e8f9 0%,
        #22d3ee 50%,
        #0891b2 100%);
    box-shadow:
        0 8px 20px rgba(34, 211, 238, 0.45),
        0 14px 40px rgba(34, 211, 238, 0.35),
        0 0 0 5px rgba(34, 211, 238, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-dark .btn-outline-primary.battle-action-btn {
    border-color: rgba(34, 211, 238, 0.5);
    color: var(--bs-primary);
}

.theme-dark .btn-outline-primary.battle-action-btn:hover:not(:disabled) {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: #0f172a;
    box-shadow:
        0 5px 14px rgba(34, 211, 238, 0.35),
        0 0 0 4px rgba(34, 211, 238, 0.15);
}

.theme-dark .btn-outline-secondary.battle-action-btn {
    border-color: rgba(100, 116, 139, 0.5);
    color: var(--bs-secondary-light);
}

.theme-dark .btn-outline-secondary.battle-action-btn:hover:not(:disabled) {
    border-color: var(--bs-secondary-light);
    background-color: var(--bs-secondary-light);
    color: #0f172a;
    box-shadow:
        0 5px 14px rgba(100, 116, 139, 0.28),
        0 0 0 4px rgba(100, 116, 139, 0.12);
}

/* ----------------------------------------
   RESPONSIVE BREAKPOINTS - GRACEFUL SCALING
   ---------------------------------------- */
@media (max-width: 1599.98px) {
    .battle-command-center.desktop-variant {
        padding: 10rem 5rem;
        gap: 8rem;
    }

    .premium-config-section {
        gap: 5rem;
    }

    .settings-stack {
        gap: 4rem;
    }

    .control-card-premium {
        padding: 3.5rem;
    }

    .premium-primary-section {
        padding: 6rem 0;
    }

    .premium-actions-section {
        gap: 6rem;
    }

    .action-group-premium {
        gap: 2.5rem;
    }

    .battle-hero-btn {
        min-width: 600px;
        padding: 3rem 6rem;
        font-size: 1.75rem;
    }

    .battle-action-btn-modern {
        padding: 0.9375rem 1.875rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 1399.98px) {
    .battle-command-center.desktop-variant {
        padding: 8rem 4rem;
        gap: 7rem;
    }

    .premium-config-section {
        gap: 4rem;
    }

    .settings-stack {
        gap: 3.5rem;
        max-width: 600px;
    }

    .control-card-premium {
        padding: 3rem;
    }

    .premium-primary-section {
        padding: 5rem 0;
    }

    .premium-actions-section {
        gap: 5rem;
        max-width: 600px;
    }

    .action-group-premium {
        gap: 2.25rem;
    }

    .battle-hero-btn {
        min-width: 550px;
        padding: 2.75rem 5.5rem;
        font-size: 1.625rem;
    }

    .battle-action-btn-modern {
        padding: 0.875rem 1.75rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 1199.98px) {
    .battle-command-center.desktop-variant {
        padding: 6rem 3rem;
        gap: 6rem;
        max-width: 900px;
    }

    .premium-config-section {
        gap: 3.5rem;
    }

    .settings-stack {
        gap: 3rem;
        max-width: 550px;
    }

    .control-card-premium {
        padding: 2.5rem;
    }

    .premium-divider {
        gap: 2rem;
        padding: 3rem 0;
    }

    .premium-primary-section {
        padding: 4rem 0;
    }

    .premium-actions-section {
        gap: 4rem;
        max-width: 550px;
    }

    .action-group-premium {
        gap: 2rem;
    }

    .battle-hero-btn {
        min-width: 480px;
        padding: 2.5rem 5rem;
        font-size: 1.5rem;
    }

    .battle-action-btn-modern {
        padding: 0.875rem 1.625rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 767.98px) {
    .battle-command-center.mobile-variant {
        padding: 3.5rem 2rem;
        gap: 3.5rem;
    }

    .settings-content {
        gap: 1.75rem;
    }

    .control-group-mobile {
        padding: 1.75rem 2rem;
    }

    .battle-primary-btn {
        padding: 1.5rem 3rem;
        font-size: 1.125rem;
    }

    .battle-action-btn {
        padding: 1.125rem 2rem;
        font-size: 0.9375rem;
    }

    .action-buttons {
        gap: 1.125rem;
    }

    .primary-action-section {
        padding: 2.5rem 0;
    }

    .secondary-actions-section {
        gap: 2.5rem;
        padding-top: 2rem;
    }

    .action-group {
        gap: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .battle-command-center.mobile-variant {
        padding: 3rem 1.75rem;
        gap: 3rem;
    }

    .battle-primary-btn {
        max-width: 100%;
        font-size: 1.125rem;
        padding: 1.5rem 2.5rem;
    }

    .action-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .battle-action-btn {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
    }

    .control-group-mobile {
        padding: 1.625rem 1.75rem;
    }

    .settings-content {
        gap: 1.5rem;
    }

    .secondary-actions-section {
        gap: 2rem;
    }
}

/* ----------------------------------------
   ACCESSIBILITY
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .battle-command-center,
    .battle-select,
    .battle-input,
    .battle-checkbox-card,
    .battle-hero-btn,
    .battle-primary-btn,
    .battle-action-btn,
    .battle-action-btn::before,
    .battle-hero-btn::before,
    .battle-primary-btn::before {
        transition: none;
        animation: none;
    }
}

/* Focus visible for keyboard navigation */
.battle-select:focus-visible,
.battle-input:focus-visible,
.battle-checkbox-card input:focus-visible,
.battle-hero-btn:focus-visible,
.battle-primary-btn:focus-visible,
.battle-action-btn:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}