:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --ocean-gradient: linear-gradient(135deg, #5B9BD5 0%, #7EC8E3 50%, #5B9BD5 100%);
    --gold-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    --glass-bg: rgba(91, 155, 213, 0.25);
    --glass-border: rgba(255, 255, 255, 0.3);
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --accent-blue: #7EC8E3;
    --accent-gold: rgba(96, 165, 250, 0.3);
    --accent-bluish: #7db8ff;
    --shadow-soft: 0 8px 32px rgba(20, 40, 80, 0.15);
    --shadow-glow: 0 0 20px rgba(125, 184, 255, 0.6);
    --cyber-blue: #7EC8E3;
    --cyber-purple: #a855f7;
    --color-buff: #4ade80;
    --color-nerf: #f87171;
    --panel-bg: rgba(30, 58, 138, 0.9);
    --header-height: 90px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Exo 2', sans-serif;
    color: var(--text-primary);
    position: relative;
    overflow-x: hidden;
}


/* Enhanced floating particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0;
    }
    50% {
        transform: translateY(-100px) translateX(50px);
        opacity: 1;
    }
}

/* Top header - main title */
.header-top {
    text-align: center;
    padding: 1.5rem 0;
    background: linear-gradient(180deg, rgba(30, 60, 120, 0.35) 0%, transparent 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 100;
}

/* Section headers with glow effects */
.header {
    display: none;
}

.header-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
    animation: headerScan 3s linear infinite;
}

@keyframes headerScan {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.header-top h1 {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--cyber-blue), var(--gold-gradient));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(0, 217, 255, 0.5);
    margin-bottom: 0.3rem;
    animation: titleGlow 3s ease-in-out infinite alternate;
    letter-spacing: 2px;
}

@keyframes titleGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.3));
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0 0 35px rgba(0, 217, 255, 0.6));
        transform: scale(1.02);
    }
}

.header-top p {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0;
}

/* App container */
.app-container {
    width: 100%;
    height: 100vh;
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Navigation header */
.nav-header {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    z-index: 100;
    padding: 0 2rem;
}

.main-container {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 2rem;
    width: 100%;
    height: calc(100vh - var(--header-height) - 8rem);
    position: relative;
    z-index: 50;
    flex: 1;
    transition: grid-template-columns 0.3s ease;
    overflow: hidden;
}

/* Collapsed state */
.main-container.left-panel-collapsed {
    grid-template-columns: 50px 1fr;
}

/* Collapse toggle button - Modern Minimal Design */
.collapse-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -30px;
    width: 30px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 40px 40px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.collapse-toggle::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 0.5s ease;
}

.collapse-toggle:hover::before {
    transform: scale(1);
}

.collapse-toggle:hover {
    transform: translateY(-50%) scaleX(1.2);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(96, 165, 250, 0.3);
}

.collapse-toggle:active {
    transform: translateY(-50%) scaleX(0.9);
}

.collapse-toggle i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.collapse-toggle:hover i {
    color: #fff;
    transform: translateX(-3px);
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.8);
}

.left-panel-collapsed .collapse-toggle {
    right: -30px;
}

.left-panel-collapsed .collapse-toggle i {
    transform: rotate(180deg);
}

.left-panel-collapsed .collapse-toggle:hover i {
    transform: rotate(180deg) translateX(3px);
}

/* Hide content when collapsed */
.left-panel-collapsed .left-panel .controls-container,
.left-panel-collapsed .left-panel #ship-grid,
.left-panel-collapsed .left-panel #commanders-grid,
.left-panel-collapsed .left-panel #combined-ship-grid,
.left-panel-collapsed .left-panel #combined-ship-container,
.left-panel-collapsed .left-panel #combined-commander-container,
.left-panel-collapsed .left-panel button:not(.collapse-toggle),
.left-panel-collapsed .left-panel h3,
.left-panel-collapsed .left-panel h4,
.left-panel-collapsed .left-panel p {
    display: none !important;
}

.left-panel-collapsed .left-panel {
    padding: 1rem 0.5rem;
    align-items: center;
}

.left-panel-collapsed .left-panel .collapse-toggle {
    display: flex !important;
}

.right-panel-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: visible;
}


/* Enhanced glass panels */
.left-panel, .right-panel {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(21, 40, 100, 0.85) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(126, 200, 227, 0.3);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 50;
}

.right-panel {
    overflow-y: auto;
}

.left-panel::before, .right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
    animation: panelScan 4s linear infinite;
}

@keyframes panelScan {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.left-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow: visible;
    position: relative;
}

.right-panel {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
    height: 100%;
}

.right-panel::-webkit-scrollbar {
    width: 8px;
}

.right-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.right-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--accent-blue), var(--cyber-purple));
    border-radius: 4px;
}

/* Enhanced filter steps */
.filter-step {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(21, 40, 100, 0.3) 100%);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.filter-step::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.filter-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 217, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(0, 217, 255, 0.3);
}

.filter-step:hover::after {
    opacity: 1;
}

.filter-step h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--cyber-blue);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-step h3::before {
    content: '⚓';
    font-size: 1.3rem;
    filter: drop-shadow(0 0 10px var(--cyber-blue));
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* Fixed back button */
.back-button {
    padding: 0.7rem 1.5rem;
    background: var(--primary-gradient);
    color: var(--text-primary);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.back-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.back-button:hover {
    background: var(--primary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgb(39 44 82);
    border-color: rgba(96, 165, 250, 0.2);
}

.back-button:hover::before {
    width: 200%;
    height: 200%;
}

/* Enhanced nation flags */
.nation-flag {
    width: 100px;
    height: 67px;
    border-radius: 12px;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(20, 40, 80, 0.25);
    background: #fff;
    position: relative;
    overflow: hidden;
}

.nation-flag::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.nation-flag:hover {
    transform: scale(1.1) rotate(2deg) translateY(-3px);
    border-color: var(--cyber-blue);
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3),
    0 0 20px rgba(0, 217, 255, 0.4);
}

.nation-flag:hover::after {
    width: 150%;
    height: 150%;
}

.nation-flag.active {
    border-color: var(--accent-gold);
    transform: scale(1.1);
    box-shadow: 0 0 30px var(--accent-gold),
    inset 0 0 10px rgba(255, 215, 0, 0.2);
}

/* Enhanced filter buttons */
.filter-btn {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(147, 51, 234, 0.1));
    color: var(--text-primary);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 25px;
    border-color: rgba(59, 130, 246, 0.3);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25) 0%, rgba(147, 51, 234, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.3);
    border-color: var(--cyber-blue);
}

.filter-btn:hover::before {
    width: 200%;
    height: 200%;
}

.filter-btn.active {
    background: var(--primary-gradient);
    border-color: var(--accent-blue);
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Enhanced reset button */
#reset-button, #commanders-reset-button {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8));
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
}

#reset-button::before, #commanders-reset-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

#reset-button:hover::before, #commanders-reset-button:hover::before {
    left: 100%;
}

#reset-button:hover, #commanders-reset-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4),
    0 0 30px rgba(239, 68, 68, 0.3);
}

/* Enhanced ship grid */
#ship-grid, #commanders-grid, #combined-ship-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
    padding-top: 1rem;
    padding-bottom: 1rem; /* Add consistent bottom padding */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 600px;
}

/* Combined section specific styles for scrolling */
#combined-section .left-panel {
    overflow: hidden;
    max-height: calc(100vh - 200px);
}

/* Combined section right panel styling overhaul */
#combined-details-panel {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95) 0%, rgba(21, 40, 100, 0.9) 100%);
    border-radius: 20px;
    padding: 2rem;
    overflow-y: auto;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
}

/* Combined calculator header styling */
#combined-details-panel .ship-header {
    margin-bottom: 2rem;
}

/* Commander skills tier containers */
.combined-skill-tier {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(21, 40, 100, 0.35) 100%);
    border: 1px solid rgba(126, 200, 227, 0.4);
    border-radius: 15px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.combined-skill-tier:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

/* Tier labels with game-style badges */
.combined-skill-tier h5 {
    background: linear-gradient(135deg, #60a5fa, #093d6f);
    color: #ffffff;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Special styling for legendary tier */
.combined-skill-tier:has(h5:contains("Legendary")) h5 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
    animation: legendaryGlow 2s ease-in-out infinite alternate;
}

@keyframes legendaryGlow {
    0% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(1.2);
    }
}

/* Skills container with card-hand effect */
.combined-skills-grid {
    position: relative;
    height: 220px;
    margin: 1rem 0;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Individual skill cards with card-in-hand effect */
.combined-skill-card {
    position: absolute;
    width: 160px;
    height: 220px;
    background: linear-gradient(135deg, #1e2f50 0%, #00437d 100%);
    border: 2px solid rgba(126, 200, 227, 0.6);
    border-radius: 12px;
    padding: 0.6rem 0.6rem 0.8rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(5px);
    background-color: rgb(66 103 137 / 95%);
}

/* Dynamic card positioning based on count */
/* For 2 cards */
.combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(1) {
    left: 35%;
    transform: translateX(-50%) rotate(-8deg);
    z-index: 1;
}

.combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(2) {
    left: 65%;
    transform: translateX(-50%) rotate(8deg);
    z-index: 2;
}

/* For 3 cards */
.combined-skills-grid[data-card-count="3"] .combined-skill-card:nth-child(1) {
    left: 25%;
    transform: translateX(-50%) rotate(-12deg);
    z-index: 1;
}

.combined-skills-grid[data-card-count="3"] .combined-skill-card:nth-child(2) {
    left: 50%;
    transform: translateX(-50%) rotate(0deg) translateY(-10px);
    z-index: 3;
}

.combined-skills-grid[data-card-count="3"] .combined-skill-card:nth-child(3) {
    left: 75%;
    transform: translateX(-50%) rotate(12deg);
    z-index: 2;
}

/* For 4 cards */
.combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(1) {
    left: 20%;
    transform: translateX(-50%) rotate(-15deg);
    z-index: 1;
}

.combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(2) {
    left: 40%;
    transform: translateX(-50%) rotate(-5deg) translateY(-5px);
    z-index: 2;
}

.combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(3) {
    left: 60%;
    transform: translateX(-50%) rotate(5deg) translateY(-5px);
    z-index: 2;
}

.combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(4) {
    left: 80%;
    transform: translateX(-50%) rotate(15deg);
    z-index: 1;
}

/* For 5+ cards */
.combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(1),
.combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(1) {
    left: 10%;
    transform: translateX(-50%) rotate(-20deg);
    z-index: 1;
}

.combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(2),
.combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(2) {
    left: 30%;
    transform: translateX(-50%) rotate(-10deg) translateY(-5px);
    z-index: 2;
}

.combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(3),
.combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(3) {
    left: 50%;
    transform: translateX(-50%) rotate(0deg) translateY(-10px);
    z-index: 3;
}

.combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(4),
.combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(4) {
    left: 70%;
    transform: translateX(-50%) rotate(10deg) translateY(-5px);
    z-index: 2;
}

.combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(5),
.combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(5) {
    left: 90%;
    transform: translateX(-50%) rotate(20deg);
    z-index: 1;
}

.combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(6) {
    left: 95%;
    transform: translateX(-50%) rotate(25deg) translateY(10px);
    z-index: 0;
}

/* Hover effect - card comes forward slightly without too much movement */
.combined-skill-card:hover {
    z-index: 10 !important;
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.8) 0%, rgba(59, 130, 246, 0.7) 100%);
    box-shadow: 0 15px 40px rgba(96, 165, 250, 0.3);
    height: 280px;
}

/* Add invisible hover area to prevent losing hover */
.combined-skill-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: -1;
}

/* Specific hover transforms based on original position */
.combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(1):hover {
    transform: translateX(-50%) translateY(-15px) scale(1.05) rotate(-2deg) !important;
}

.combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(2):hover {
    transform: translateX(-50%) translateY(-15px) scale(1.05) rotate(2deg) !important;
}

.combined-skills-grid[data-card-count="3"] .combined-skill-card:hover {
    transform: translateX(-50%) translateY(-15px) scale(1.05) rotate(0deg) !important;
}

.combined-skills-grid[data-card-count="4"] .combined-skill-card:hover,
.combined-skills-grid[data-card-count="5"] .combined-skill-card:hover,
.combined-skills-grid[data-card-count="6"] .combined-skill-card:hover {
    transform: translateX(-50%) translateY(-15px) scale(1.05) rotate(0deg) !important;
}

.combined-skill-card.selected {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.7) 0%, rgba(59, 130, 246, 0.5) 100%);
    border-color: var(--accent-primary);
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.5), inset 0 0 20px rgba(96, 165, 250, 0.3);
}

/* Special effect for legendary skills */
.combined-skill-tier:has(h5:contains("Legendary")) .combined-skill-card.selected {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.7) 0%, rgba(245, 158, 11, 0.5) 100%);
    border-color: #fbbf24;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.5), inset 0 0 20px rgba(251, 191, 36, 0.3);
}

/* Skill icon styling - smaller for more space */
.combined-skill-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Special gold styling for legendary tier icons */
.combined-skill-tier:has(h5:contains("Legendary")) .combined-skill-icon {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
}

.combined-skill-icon img {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Skill card content styling - smaller text */
.combined-skill-card .skill-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.1rem 0 0;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(20, 40, 80, 0.4);
    position: relative;
    z-index: 2;
    line-height: 1;
    flex-shrink: 0;
}

/* Scrollable skill description container */
.skill-description-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 0.2rem;
}

/* Scrollable skill description */
.combined-skill-card .skill-description {
    font-size: 0.95rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 2px;
}

/* Skill trait value container */
.combined-skill-card .skill-trait-value {
    display: flex;
    flex-direction: column;
}

/* Individual trait effects */
.combined-skill-card .trait-effect {
    background: rgba(50, 90, 150, 0.35);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border-left: 2px solid rgba(96, 165, 250, 0.5);
    font-size: 0.9rem;
    line-height: 1.15;
    margin-bottom: 0.3rem;
}

.combined-skill-card .trait-effect:last-child {
    margin-bottom: 0;
}

/* Only apply scroll if more than 2 effects */
.skill-description-wrapper.needs-scroll {
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
}

/* Removed smooth scrolling to prevent stuttering */
.skill-description-wrapper {
    /* scroll-behavior removed for better performance */
}

/* Container for scrolling content */
.skill-description-wrapper.needs-scroll .skill-description {
    position: absolute;
    top: 0;
    width: 100%;
}

/* Auto-scroll animation for overflow content - only on card hover */
.combined-skill-card:hover .skill-description-wrapper.needs-scroll .skill-description {
    animation: autoScroll 15s linear infinite;
}

/* Auto-scroll continues even on hover for better UX */
/* Removed animation-play-state: paused */

/* Pause animation on manual scroll */
.skill-description-wrapper.user-scrolling .skill-description {
    animation-play-state: paused !important;
}

@keyframes autoScroll {
    0%, 10% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(calc(-100% + 140px));
    }
    60% {
        transform: translateY(calc(-100% + 140px));
    }
    90%, 100% {
        transform: translateY(0);
    }
}

/* Custom scrollbar for skill descriptions */
.skill-description-wrapper::-webkit-scrollbar {
    width: 3px;
}

.skill-description-wrapper::-webkit-scrollbar-track {
    background: rgba(30, 60, 120, 0.3);
    border-radius: 2px;
}

.skill-description-wrapper::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.5);
    border-radius: 2px;
}

.skill-description-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.7);
}

/* Inspiration cards styling */
.combined-inspiration-card {
    background: linear-gradient(135deg, #4a7fbf 0%, #3e698b 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.combined-inspiration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Inspiration slot styling */
.combined-inspiration-slot {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(30, 60, 120, 0.3);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.combined-inspiration-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fbbf24;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.combined-inspiration-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stats display with modern game UI style */
.combined-stats-category {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(21, 40, 100, 0.3) 100%);
    border: 1px solid rgba(126, 200, 227, 0.4);
    border-radius: 15px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.combined-stats-category:nth-child(even) {
    transform: translateX(5px);
}

.combined-stats-category:nth-child(odd) {
    transform: translateX(-5px);
}

.combined-stats-category:hover {
    transform: translateX(0) scale(1.02);
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.2);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%);
}

/* Removed animated scan line for cleaner look */

/* Removed statsScan animation for cleaner design */

/* Clean stat display styling */
#combined-stats-display {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100%;
}

/* Grid layout for stats when left panel is collapsed */
.left-panel-collapsed #combined-stats-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.left-panel-collapsed .combined-stats-category {
    margin-bottom: 0;
}

/* Make skill cards closer together when collapsed */
.left-panel-collapsed .combined-skills-grid {
    gap: 15px;
}

.left-panel-collapsed .combined-skill-tier {
    margin-bottom: 1rem;
}

/* Override card positioning to bring them closer when collapsed - but not too close */
/* 2 cards */
.left-panel-collapsed .combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(1) {
    left: 40% !important;
    transform: translateX(-50%) rotate(-5deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(2) {
    left: 60% !important;
    transform: translateX(-50%) rotate(5deg) !important;
}

/* 3 cards */
.left-panel-collapsed .combined-skills-grid[data-card-count="3"] .combined-skill-card:nth-child(1) {
    left: 30% !important;
    transform: translateX(-50%) rotate(-5deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="3"] .combined-skill-card:nth-child(2) {
    left: 50% !important;
    transform: translateX(-50%) rotate(0deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="3"] .combined-skill-card:nth-child(3) {
    left: 70% !important;
    transform: translateX(-50%) rotate(5deg) !important;
}

/* 4 cards */
.left-panel-collapsed .combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(1) {
    left: 25% !important;
    transform: translateX(-50%) rotate(-5deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(2) {
    left: 42% !important;
    transform: translateX(-50%) rotate(-2deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(3) {
    left: 58% !important;
    transform: translateX(-50%) rotate(2deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="4"] .combined-skill-card:nth-child(4) {
    left: 75% !important;
    transform: translateX(-50%) rotate(5deg) !important;
}

/* 5 cards */
.left-panel-collapsed .combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(1) {
    left: 20% !important;
    transform: translateX(-50%) rotate(-5deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(2) {
    left: 35% !important;
    transform: translateX(-50%) rotate(-2.5deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(3) {
    left: 50% !important;
    transform: translateX(-50%) rotate(0deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(4) {
    left: 65% !important;
    transform: translateX(-50%) rotate(2.5deg) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="5"] .combined-skill-card:nth-child(5) {
    left: 80% !important;
    transform: translateX(-50%) rotate(5deg) !important;
}

/* 6 cards */
.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(1) {
    left: 20% !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(2) {
    left: 32% !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(3) {
    left: 44% !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(4) {
    left: 56% !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(5) {
    left: 68% !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:nth-child(6) {
    left: 80% !important;
}

/* Make skill cards bigger with larger font when collapsed */
.left-panel-collapsed .combined-skill-card {
    width: 200px !important;
    height: 260px !important;
}

/* Adjust hover states for bigger cards */
.left-panel-collapsed .combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(1):hover,
.left-panel-collapsed .combined-skills-grid[data-card-count="2"] .combined-skill-card:nth-child(2):hover {
    transform: translateX(-50%) translateY(-15px) scale(1.15) !important;
}

.left-panel-collapsed .combined-skills-grid[data-card-count="3"] .combined-skill-card:hover,
.left-panel-collapsed .combined-skills-grid[data-card-count="4"] .combined-skill-card:hover,
.left-panel-collapsed .combined-skills-grid[data-card-count="5"] .combined-skill-card:hover,
.left-panel-collapsed .combined-skills-grid[data-card-count="6"] .combined-skill-card:hover {
    transform: translateX(-50%) translateY(-15px) scale(1.15) !important;
}

.left-panel-collapsed .combined-skill-card .skill-name {
    font-size: 1.3rem !important;
}

.left-panel-collapsed .combined-skill-card .skill-description {
    font-size: 1.1rem !important;
}

.left-panel-collapsed .combined-skill-card .trait-effect {
    font-size: 1rem !important;
}

/* Make inspiration cards wider with bigger text when collapsed */
.left-panel-collapsed .combined-inspiration-slot {
    flex: 1 1 48% !important;
    max-width: none !important;
}

.left-panel-collapsed .inspirations-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: space-between !important;
}

.left-panel-collapsed .combined-inspiration-slot h4 {
    font-size: 1.2rem !important;
}

.left-panel-collapsed .combined-inspiration-slot .inspiration-commander-name {
    font-size: 1.1rem !important;
}

.left-panel-collapsed .combined-inspiration-slot .inspiration-skill-name {
    font-size: 1rem !important;
}

.left-panel-collapsed .combined-inspiration-slot .inspiration-rank-info {
    font-size: 0.95rem !important;
}

/* Make selected skills section wider with bigger text when collapsed */
.left-panel-collapsed #combined-selected-skills {
    width: 100% !important;
}

.left-panel-collapsed #combined-selected-skills h4 {
    font-size: 1.3rem !important;
}

.left-panel-collapsed #combined-skills-summary {
    font-size: 1.1rem !important;
}

.left-panel-collapsed #combined-skills-summary .skill-summary-item {
    font-size: 1rem !important;
    padding: 0.8rem !important;
}


/* Active effects styled like stat categories */
#combined-active-effects > div {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(21, 40, 100, 0.3) 100%) !important;
    border: 1px solid rgba(126, 200, 227, 0.4) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.3s ease !important;
}

#combined-active-effects > div:nth-child(even) {
    transform: translateX(10px);
}

#combined-active-effects > div:nth-child(odd) {
    transform: translateX(-10px);
}

#combined-active-effects > div:hover {
    transform: translateX(0) scale(1.02);
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.2);
}

#combined-active-effects > div > div:first-child {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    color: #e2e8f0 !important;
    margin-bottom: 0.25rem;
}

#combined-active-effects > div > div:last-child {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

.combined-stats-category h4 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ships tab specific - smaller stats cards */
#ships-section .combined-stats-category {
    padding: 0.8rem 1rem;
    margin-bottom: 0.7rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#ships-section .combined-stats-category h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

#ships-section .stat-row {
    padding: 0.3rem 0;
}

#ships-section .stat-name {
    font-size: 0.8rem;
}

#ships-section .stat-value {
    font-size: 0.8rem;
}

/* Ensure module slots maintain consistent size */
.modal-slot-icon {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.modal-slot-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
}

/* Fix container sizing to prevent shifts */
.combined-module-slot {
    min-width: 100px;
    width: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.modal-slot-label {
    font-size: 0.75rem;
    line-height: 1.1;
    text-align: center;
    word-wrap: break-word;
    max-width: 90px;
    margin-top: 0.25rem;
}

.combined-stats-category h4 i {
    color: var(--accent-blue);
    font-size: 1.1rem;
    filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.5));
}

.combined-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: rgba(96, 165, 250, 0.05);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.combined-stat-row:hover {
    background: rgba(96, 165, 250, 0.1);
    border-left-color: #60a5fa;
    transform: translateX(5px);
}

.combined-stat-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.combined-stat-value {
    font-weight: 700;
    color: #ffffff;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(20, 40, 80, 0.25);
}

.combined-stat-value.modified {
    color: #60a5fa;
}

.combined-stat-diff {
    font-size: 0.85rem;
    margin-left: 0.5rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.combined-stat-diff.buff {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.combined-stat-diff.nerf {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Module slots container */
#combined-module-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Module slot styling */
.combined-module-slot {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 64, 175, 0.05) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.combined-module-slot:hover {
    transform: translateY(-2px);
    border-color: #fbbf24;
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.2);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.combined-module-slot.module-selected {
    border-color: #4ade80;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.combined-module-slot .modal-slot-icon {
    color: #60a5fa;
    font-size: 1.8rem;
}

.combined-module-slot.module-selected .modal-slot-icon {
    color: #4ade80;
}

.combined-module-slot .modal-slot-label {
    font-weight: 600;
    color: #e5e7eb;
    line-height: 1.2;
}

/* Rank selectors styling */
.combined-rank-selector {
    background: rgba(70, 104, 215, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: #e5e7eb;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.combined-rank-selector:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Staggered tier positioning */
.combined-skill-tier.stagger-left {
    transform: translateX(-10px);
}

.combined-skill-tier.stagger-right {
    transform: translateX(10px);
}

/* Position variations for skills */
.combined-skill-card.position-primary {
    transform: rotate(-1deg);
}

.combined-skill-card.position-secondary {
    transform: rotate(1deg) translateY(-5px);
}

.combined-skill-card.position-tertiary {
    transform: rotate(-0.5deg) translateY(3px);
}

/* Enhanced inspiration section for combined view */
#combined-inspirations-container {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    align-items: stretch;
}

#combined-inspirations-container .inspiration-slot-wrapper {
    flex: 1;
    background: linear-gradient(135deg, #1e2f50 0%, #00437d 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#combined-inspirations-container .inspiration-slot-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
    animation: shimmer 3s infinite;
}

#combined-inspirations-container .inspiration-slot {
    background: rgba(50, 90, 150, 0.3);
    border: 2px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    min-height: 280px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 1rem;
}

#combined-inspirations-container .inspiration-slot:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.2);
}

#combined-inspirations-container .inspiration-placeholder {
    text-align: center;
    color: rgba(251, 191, 36, 0.8);
}

#combined-inspirations-container .inspiration-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Update the rank selectors in combined view */
#combined-details-panel .rank-selectors {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#combined-details-panel .rank-selectors label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#combined-details-panel .rank-selectors select {
    background: rgba(70, 104, 215, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 0.5rem;
    color: #e5e7eb;
    cursor: pointer;
}

#combined-details-panel .rank-selectors select:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Enhanced ship cards */
.ship-card {
    background: linear-gradient(135deg, rgba(150, 200, 255, 0.15) 0%, rgba(100, 150, 200, 0.1) 100%);
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
    min-height: 230px;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
}

.ship-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(96, 165, 250, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ship-card:hover::before {
    opacity: 1;
}

.ship-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--cyber-blue);
    box-shadow: 0 15px 40px rgba(96, 165, 250, 0.3),
    0 0 30px rgba(96, 165, 250, 0.2);
    z-index: 10;
    position: relative;
}

.ship-card.active {
    border-color: var(--accent-gold);
    box-shadow: 0 0 35px var(--accent-gold),
    inset 0 0 15px rgba(255, 215, 0, 0.1);
    transform: translateY(-5px);
}

.ship-card img {
    width: 100%;
    height: auto;
    max-height: 140px;
    margin-top: 10px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.ship-card:hover img {
    transform: scale(1.1);
}

.ship-card p {
    margin: 1rem 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ship-card.legendary {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.3);
}

.ship-card.legendary p {
    color: var(--cyber-blue);
    font-weight: 700;
    text-shadow: 0 0 15px var(--accent-gold);
}

.ship-card.legendary:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.4);
}

/* Enhanced details panel */
.details-panel h1 {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--cyber-blue), var(--cyber-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(96, 165, 250, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.details-panel h1.legendary {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.7);
}

.details-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.details-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Enhanced ship header */
.ship-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(96, 165, 250, 0.3);
}

.ship-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.ship-header-right {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.ship-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--cyber-blue);
    animation: headerLineGrow 2s ease forwards;
}

@keyframes headerLineGrow {
    from {
        width: 0;
    }
    to {
        width: 100px;
    }
}

.ship-header .ship-name {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.2rem;


    background: linear-gradient(135deg, var(--cyber-blue), var(--cyber-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(0, 217, 255, 0.5);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ship-header .ship-name.gold {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.7);
}

.ship-header .ship-label {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.3rem 1.5rem;
    border-radius: 25px;
    background: var(--gold-gradient);
    color: #1e293b;
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
    margin-left: 5rem;
    letter-spacing: 1px;
    display: inline-block;
    text-transform: uppercase;
}

.ship-header .ship-label:not(.gold) {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Enhanced details sections */
.details-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    transition: none;
    position: relative;
    margin-bottom: 1.5rem;
    overflow: visible;
}

/* Removed animated scan line for cleaner design */

@keyframes sectionScanContained {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Removed hover effect for flatter design */

.details-section:last-child {
    margin-bottom: 0;
}

.details-section h2 {
    font-family: 'Exo 2', sans-serif;
    color: var(--accent-blue);
    padding: 0.75rem 1.2rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* Removed emoji decoration for cleaner look */

.details-section h3 {
    font-family: 'Orbitron', monospace;
    color: var(--accent-white);
    margin: 1rem 0 0.5rem 0;
    font-size: 1rem;
    border-left: 3px solid var(--accent-gold);
    padding-left: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Enhanced tables */
.stat-table, .info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.stat-table td, .info-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: background 0.2s ease;
}

.stat-table tr:hover td, .info-table tr:hover td {
    background: rgba(96, 165, 250, 0.05);
}

.stat-table tr:last-child td, .info-table tr:last-child td {
    border-bottom: none;
}

.stat-table td:first-child, .info-table td:first-child {
    font-weight: 600;
    color: var(--accent-blue);
    width: 40%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-table td:nth-child(2), .info-table td:nth-child(2) {
    color: var(--text-secondary);
}

.stat-table td:nth-child(3) {
    color: var(--accent-gold);
    font-weight: 600;
}

/* Enhanced lists */
.consumables-list li, .traits-list li {
    margin-bottom: 0.8rem;
    list-style-type: none;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%);
    border-radius: 10px;
    border-left: 3px solid var(--accent-blue);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.consumables-list li::before, .traits-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.1), transparent);
    transition: left 0.5s ease;
}

.consumables-list li:hover::before, .traits-list li:hover::before {
    left: 100%;
}

.consumables-list li:hover, .traits-list li:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(147, 51, 234, 0.08) 100%);
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.1);
}

.consumables-list ul, .traits-list ul {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

.consumables-list ul li, .traits-list ul li {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--accent-gold);
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

/* Enhanced expandable content */
.expandable-content {
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.expandable-content.expanded {
    max-height: none;
}

.expandable-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, rgba(70, 110, 184, 0.95));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.expandable-content.expanded::after {
    opacity: 0;
}

.expand-button {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(147, 51, 234, 0.2));
    color: var(--text-primary);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    margin-top: 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.expand-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.expand-button:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(147, 51, 234, 0.3));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.2);
}

.expand-button:hover::before {
    width: 200%;
    height: 200%;
}

.expand-button.expanded {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.3);
}

.expand-button.expanded:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
}

/* Enhanced welcome message */
.welcome-message {
    text-align: center;
    padding: 3rem;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-message h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.welcome-message p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* Enhanced loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--cyber-blue);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Enhanced traits */
.traits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.2rem 0 2.2rem 0;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.traits-list li {
    display: inline-block;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.2));
    color: #fff;
    border-radius: 25px;
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: 1.5px solid var(--accent-blue);
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin: 0;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.traits-list li:hover {
    background: var(--gold-gradient);
    color: #1e293b;
    border-color: var(--accent-gold);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.details-section.traits-section {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.details-section.traits-section h2 {
    display: none;
}

/* Enhanced mod slots */
.mod-slots-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-start;
    margin: 1.5rem 0 2rem 0;
    flex-wrap: wrap;
}

.mod-slot-box {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(251, 191, 36, 0.10));
    border: 2.5px solid var(--accent-blue);
    border-radius: 15px;
    min-width: 110px;
    min-height: 110px;
    max-width: 160px;
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 5px 20px rgba(96, 165, 250, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    overflow: visible;
    z-index: 1;
}

.mod-slot-box:hover {
    border: 2.5px solid var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.15));
    box-shadow: 0 10px 35px rgba(251, 191, 36, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    z-index: 10;
}

.mod-slot-label {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mod-options-popup {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    bottom: auto;
    margin-left: 12px;
    margin-top: 0;
    margin-bottom: 0;
    transform: none;
    min-width: 420px;
    background: linear-gradient(135deg, rgba(70, 111, 179, 0.98) 0%, rgba(60, 101, 169, 0.95) 100%);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(20, 40, 80, 0.4),
    0 0 30px rgba(96, 165, 250, 0.2);
    padding: 1.2rem;
    z-index: 300000;
    color: #fff;
    font-size: 1rem;
    text-align: left;
    border: 2px solid var(--accent-blue);
    pointer-events: none;
    overflow: visible;
    backdrop-filter: blur(20px);
}

.mod-option-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.mod-option-card {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(251, 191, 36, 0.1));
    border: 1.5px solid var(--accent-blue);
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 1.2rem;
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: all 0.3s ease;
    margin: 0;
    text-align: left;
    white-space: normal;
}

.mod-option-card:hover, .mod-option-card:focus {
    background: var(--gold-gradient);
    color: #1e293b;
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mod-option-title {
    font-weight: 700;
    color: var(--cyber-blue);
    margin-bottom: 0.5rem;
    font-size: 1.08rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mod-option-desc {
    color: #fff;
    font-size: 0.97rem;
    font-weight: 400;
    margin-bottom: 0;
    white-space: pre-line;
    line-height: 1.4;
}

/* Position consumable pop-ups above the slot */
.mod-slot-box.consumable-slot-box .consumable-popup {
    top: auto;
    bottom: 100%; /* attach to top of slot */
    left: 50%; /* center horizontally */
    transform: translate(-50%, -12px); /* small gap */
    margin-left: 0; /* override previous */
}

/* Responsive design */
@media (max-width: 1200px) {
    .main-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    .left-panel {
        order: 2;
    }

    .right-panel {
        order: 1;
    }

    .details-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header h1 {
        font-size: 2.5rem;
    }

    .main-container {
        padding: 0 1rem;
        gap: 1rem;
    }

    .details-content {
        grid-template-columns: 1fr;
    }

    #ship-grid, #commanders-grid, #combined-ship-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        max-height: 300px;
    }

    .expandable-content {
        max-height: 250px;
    }

    .mod-option-list {
        grid-template-columns: 1fr;
    }

    .mod-options-popup {
        min-width: 280px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

.details-section.modifications-section {
    overflow: visible;
    position: relative;
    z-index: 50000; /* below pop-ups but above background */
}

.details-section.consumables-section {
    overflow: visible;
    position: relative;
    z-index: 100000;
}

.details-content {
    overflow: visible;
}

.details-column {
    overflow: visible;
}

.mod-slot-box.consumable-slot-box {
    z-index: 1;
}

.mod-slot-box.consumable-slot-box:hover {
    z-index: 10;
}

.mod-options-popup.consumable-popup {
    z-index: 290000;
}

/* Revert single-column grid for .consumable-popup */
.consumable-popup .mod-option-list {
    display: block;
}

/* Make the consumable popup modal wider and restore default position */
.consumable-popup {
    top: 0;
    left: 100%;
    bottom: auto;
    margin-left: 12px;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 300px;
    width: max-content;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

.consumable-popup .mod-option-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent-blue);
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.consumable-popup .mod-option-desc {
    font-size: 0.98rem;
    color: #fff;
    margin-bottom: 0.5em;
}

.consumable-popup ul {
    margin: 0.5em 0 0 0;
    padding-left: 1.2em;
    font-size: 0.93rem;
    color: var(--text-secondary);
}

.consumable-popup li {
    margin-bottom: 0.2em;
}

.consumable-popup em {
    font-style: italic;
    color: var(--accent-gold);
}

.mod-options-popup,
.consumable-popup {
    top: 0;
    left: 100%;
    bottom: auto;
    margin-left: 12px;
    margin-top: 0;
    margin-bottom: 0;
    transform: none !important;
}

.mod-slot-box:hover .mod-options-popup {
    display: block;
    pointer-events: auto;
}

/* Ensure modification pop-ups appear above consumables */
.mod-options-popup:not(.consumable-popup) {
    z-index: 310000; /* higher than consumable pop-ups */
}

/* Tabs styling */
.tabs {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(20, 25, 45, 0.85) 0%, rgba(15, 20, 35, 0.85) 100%) !important;
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(20, 40, 80, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Sliding bubble background */
.tabs::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    height: calc(100% - 1.5rem);
    width: var(--tab-width, 0);
    background: var(--primary-gradient);
    transform: translateX(var(--tab-offset, 0));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 18px;
    opacity: 1;
    z-index: 0;
}

/* Sliding indicator */
.tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: var(--tab-width, 0);
    background: linear-gradient(90deg, var(--accent-blue), var(--cyber-purple));
    transform: translateX(var(--tab-offset, 0));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.8);
}

.tab-button {
    padding: 1rem 2.5rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.75px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tab-button i {
    margin-right: 0.6rem;
    font-size: 1.1rem;
}

.tab-button:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
}

.tab-button.active {
    color: #fff;
}

/* User Menu Styles */
.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    color: var(--text-primary);
}

.user-menu-toggle:hover {
    background: rgba(91, 155, 213, 0.4);
    border-color: var(--cyber-blue);
    box-shadow: 0 0 20px rgba(126, 200, 227, 0.3);
}

.user-menu-toggle i:first-child {
    font-size: 1.25rem;
    color: var(--cyber-blue);
}

.dropdown-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.user-menu-toggle.active .dropdown-icon {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background: rgba(126, 200, 227, 0.2);
    color: var(--cyber-blue);
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.dropdown-item:hover i {
    color: var(--cyber-blue);
}

.dropdown-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 0.5rem 0;
}

.badge.premium {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    border-radius: 4px;
    font-weight: 600;
    margin-left: auto;
}

.subscribe-link {
    color: #fbbf24 !important;
}

.subscribe-link:hover {
    background: rgba(251, 191, 36, 0.2) !important;
}

/* Auth Buttons */
.auth-buttons {
    display: flex;
    gap: 1rem;
}

.btn-login,
.btn-subscribe {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-login {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.btn-login:hover {
    background: rgba(91, 155, 213, 0.4);
    border-color: var(--cyber-blue);
    box-shadow: 0 0 20px rgba(126, 200, 227, 0.3);
}

.btn-subscribe {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    border: none;
}

.btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4);
}

/* Commander skills */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.skill-tier {
    background: rgba(80, 120, 180, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 15px;
    padding: 1rem;
    transition: all 0.25s;
}

.skill-tier h4 {
    font-family: 'Orbitron', monospace;
    color: var(--accent-gold);
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skill-tier:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.25);
}

.skill-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 2px solid rgba(96, 165, 250, 0.3);
    background: rgba(130, 180, 230, 0.12);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.skill-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.skill-icon:hover {
    border-color: var(--accent-gold);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.skill-icon.selected {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.1));
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

.skill-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(70, 111, 179, 0.98) 0%, rgba(60, 101, 169, 0.95) 100%);
    border: 2px solid var(--accent-blue);
    border-radius: 8px;
    padding: 0.8rem;
    min-width: 200px;
    max-width: 300px;
    color: #fff;
    font-size: 1rem;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.skill-icon:hover .skill-tooltip {
    opacity: 1;
}

.skill-tooltip h5 {
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.skill-tooltip p {
    line-height: 1.3;
    margin: 0;
}

/* Build button */
.build-btn {
    padding: 0.6rem 1.5rem;
    background: var(--primary-gradient);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #fff;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.build-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.build-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
    border-color: var(--cyber-blue);
}

.build-btn:hover::before {
    width: 200%;
    height: 200%;
}

/* Build modal */
.build-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 40, 80, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500000;
    backdrop-filter: blur(5px);
}

.build-content {
    background: linear-gradient(135deg, rgba(70, 111, 179, 0.95) 0%, rgba(60, 101, 169, 0.9) 100%);
    border: 2px solid rgba(96, 165, 250, 0.3);
    border-radius: 20px;
    padding: 2rem;
    width: min(95%, 600px);
    max-height: 90vh;
    overflow-y: auto;
    backdrop-filter: blur(20px);
    color: #fff;
    box-shadow: 0 20px 60px rgba(20, 40, 80, 0.6);
}

.build-content h2 {
    margin-top: 0;
    text-align: center;
    font-family: 'Orbitron', monospace;
    color: var(--accent-gold);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.build-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.build-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.build-controls select {
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    backdrop-filter: blur(10px);
}

.build-controls select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}

.resource-result {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(147, 51, 234, 0.05));
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.resource-result h3 {
    color: var(--accent-gold);
    margin-bottom: 1rem;
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
}

.resource-result ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    list-style: none;
}

.resource-result li {
    margin-bottom: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
}

.resource-result li:last-child {
    border-bottom: none;
}

.resource-result .resource-name {
    color: var(--text-secondary);
}

.resource-result .resource-amount {
    color: var(--accent-gold);
    font-weight: 700;
}

.skill-section {
    margin: 2rem 0;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(96, 165, 250, 0.05));
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
}

.skill-stats {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(96, 165, 250, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.skill-stats h3 {
    color: var(--accent-gold);
    margin-bottom: 1rem;
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
}

.skill-stats ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    list-style: disc;
}

.skill-stats li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.close-build {
    padding: 0.8rem 2rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8));
    border: none;
    border-radius: 15px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.close-build:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4);
}

.tier-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tier-selector label {
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selected-skills {
    background: rgb(26 42 84);
    border: 1px solid rgba(126, 200, 227, 0.4);
    box-shadow: 0 0 10px rgba(126, 200, 227, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.selected-skills h4 {
    color: var(--accent-white);
    margin-bottom: 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.selected-skills .skill-name {
    color: var(--accent-blue);
    font-weight: 600;
}

/* ----- SHIP BUILD MODAL (NEW & IMPROVED) ----- */
.ship-build-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 40, 80, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500000;
    backdrop-filter: blur(8px);
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

.ship-build-modal .build-content {
    width: min(95%, 1400px);
    max-height: 90vh;
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 2rem;
    padding: 2.5rem;
}

.ship-build-info {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(96, 165, 250, 0.3);
}

.ship-build-info h3 {
    font-family: 'Orbitron', monospace;
    color: var(--cyber-blue);
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.ship-class {
    color: var(--accent-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
}

.build-left-column, .build-right-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.build-left-column {
    overflow-y: auto;
    padding-right: 1rem;
}

.module-selection-section h4,
.stats-comparison-section h4 {
    font-family: 'Orbitron', monospace;
    color: var(--accent-gold);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--accent-gold);
    padding-bottom: 0.5rem;
}

#interactive-module-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1.5rem;
}

/* FIX: Wrapper for hover */
.modal-module-wrapper {
    position: relative;
    z-index: 1000001; /* ensure above other sections */
}

/* FIX: Trigger hover on wrapper */
.modal-module-wrapper:hover .modal-module-popup,
.modal-module-popup:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.modal-module-slot {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(251, 191, 36, 0.10));
    border: 2px solid var(--accent-blue);
    border-radius: 15px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-module-wrapper:hover {
    z-index: 1000003;
}

/* Add invisible bridge to maintain hover */
.modal-module-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 15px;
    height: 100%;
    z-index: 1000002;
}

.modal-module-wrapper:hover .modal-module-slot {
    border-color: var(--accent-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(251, 191, 36, 0.3);
}

.modal-slot-icon {
    font-size: 3rem;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

.modal-module-wrapper:hover .modal-slot-icon {
    transform: scale(1.1);
}

.modal-slot-label {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-module-popup {
    display: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 10px;
    width: max-content;
    max-width: 350px;
    background: linear-gradient(135deg, #1e2f50 0%, #00437d 100%);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    padding: 1rem;
    z-index: 1000002;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 10px 40px rgba(20, 40, 80, 0.5);
}

.modal-module-option {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(147, 51, 234, 0.08));
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--accent-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-module-option:last-child {
    margin-bottom: 0;
}

.modal-module-option:hover, .modal-module-option.selected {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.15));
    transform: translateX(5px);
}

.modal-module-option h5 {
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.modal-module-option p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.stats-comparison-section {
    overflow-y: auto;
    padding-right: 1rem;
}

.stats-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
}

.stats-column {
    background: rgba(40, 70, 120, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.stats-column-header {
    font-family: 'Orbitron', monospace;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    color: var(--cyber-blue);
    border-bottom: 1px solid rgba(96, 165, 250, 0.3);
}

.stat-category {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--accent-gold);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    background: rgba(251, 191, 36, 0.1);
    padding: 0.25rem;
    border-radius: 5px;
}

.stat-category:first-child {
    margin-top: 0;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    align-items: center;
    font-size: 0.9rem;
    width: 100%;
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-name {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.85rem;
}

.stat-value {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

.stat-value.modified.buff {
    color: var(--color-buff);
}

.stat-value.modified.nerf {
    color: var(--color-nerf);
}

.stat-value.modified .stat-diff {
    font-size: 0.8rem;
    margin-left: 0.5rem;
    opacity: 0.9;
}

/* Responsive design for NEW ship build modal */
@media (max-width: 1400px) {
    .ship-build-modal .build-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .build-left-column, .build-right-column {
        overflow-y: visible;
        padding-right: 0;
    }

    .stats-comparison-section {
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .ship-build-modal .build-content {
        padding: 1.5rem;
    }

    #interactive-module-slots {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 1rem;
    }

    .modal-module-slot {
        height: 120px;
    }

    .modal-module-popup {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        width: 90vw;
        max-width: 300px;
    }
}

/* ----- COMBINED BUILD MODAL (ENHANCED) ----- */
.combined-build-modal .build-content {
    width: min(95%, 1600px);
    max-height: 90vh;
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 2.5rem;
    padding: 3rem;
}

.combined-build-modal .build-left-column,
.combined-build-modal .build-right-column {
    overflow-y: auto;
    padding-right: 1rem;
}

.combined-build-modal .build-section {
    background: rgba(30, 60, 120, 0.3);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 15px;
    padding: 1.5rem;
}

.combined-build-modal .build-section h3 {
    font-family: 'Orbitron', monospace;
    color: var(--accent-gold);
    margin: 0 0 1.2rem 0;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.4);
    padding-bottom: 0.5rem;
}

.rank-selectors {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.rank-selectors label {
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rank-selectors {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(21, 40, 100, 0.35) 100%);
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.2);

}

.rank-selectors label {
    display: flex;
    gap: 0.4rem;
    flex: 1;
    font-weight: 600;
    color: var(--accent-white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rank-selectors select {
    padding: 0.8rem 1rem;
    background: rgba(60, 90, 150, 0.9);
    border: 2px solid rgba(96, 165, 250, 0.4);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Orbitron', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 3px rgba(20, 40, 80, 0.25);
    min-height: 2.8rem;
    line-height: 1.2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.2rem;
    padding-right: 2.5rem;
}

.rank-selectors select:hover {
    border-color: var(--accent-gold);
    background: rgba(70, 100, 160, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rank-selectors select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rank-selectors select option {
    background: rgba(60, 90, 150, 0.95);
    color: #fff;
    padding: 0.5rem;
    font-weight: 500;
}

/* Inspiration rank styling - matching commander rank exactly */
.inspiration-ranks select {
    width: 100%;
    padding: 0.8rem 0.8rem;
    background: rgba(60, 90, 150, 0.9);
    border: 2px solid rgba(96, 165, 250, 0.4);
    color: #fff;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Orbitron', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 3px rgba(20, 40, 80, 0.25);
    min-height: 2.5rem;
    line-height: 1.2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 2rem;
}

.inspiration-ranks select:hover {
    border-color: var(--accent-gold);
    background-color: rgba(80, 110, 170, 0.9);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.inspiration-ranks select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.inspiration-ranks select option {
    background: rgba(60, 90, 150, 0.95);
    color: #fff;
    padding: 0.3rem;
    font-weight: 500;
}

.inspiration-ranks label {
    font-weight: 600;
    color: var(--accent-gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspiration-ranks {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.2);
    margin-top: 0.8rem;
}

/* Enhanced Commander Skill Styling - Matching Inspiration Style */
.commander-skill-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.10));
    border: 2px solid var(--accent-blue);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    min-height: 100px;
    overflow: hidden;
}

.commander-skill-option:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--accent-blue);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.4);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.12));
}

.commander-skill-option.selected {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.20), rgba(96, 165, 250, 0.15));
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

.skill-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
}

.skill-icon-wrapper {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

.skill-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
}

.skill-name {
    font-weight: 600;
    color: var(--accent-gold) !important;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Force skill names to be gold */
.commander-skill-option .skill-name {
    color: var(--accent-gold) !important;
}

.skill-description {
    width: 100%;
}


.trait-effect {
    position: relative;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    font-family: 'Orbitron', monospace;
}

.skill-trait-value {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.skill-tier-label {
    display: none;
}

/* Combined build modal specific overrides */
.combined-build-modal .commander-skill-option {
    min-width: 200px;
}

.combined-build-modal .commander-skill-option:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.25);
}

/* Remove background from details section in combined build modal */
#combined-build-content .details-section,
.combined-build-modal .details-section {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

#combined-build-content .details-section::before,
.combined-build-modal .details-section::before {
    display: none !important;
}

/* Override skill tier headers to gold in combined modal */
#combined-skill-tiers h5,
.combined-build-modal .skill-tier h5,
#combined-details-panel .skill-tier h5,
.right-panel .skill-tier h5 {
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Override skill names to gold in combined modal */
#combined-skill-tiers .skill-name,
.combined-build-modal .commander-skill-option .skill-name,
.commander-skill-option .skill-content .skill-name,
#combined-details-panel .commander-skill-option .skill-name,
.right-panel .commander-skill-option .skill-name {
    color: var(--accent-blue) !important;
    font-weight: 600;
}

/* Style the commander skills section header */
.commander-skills-section h3 {
    color: var(--accent-white) !important;
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

@media (max-width: 1400px) {
    .combined-build-modal .build-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
}

@media (max-width: 768px) {
    .combined-build-modal .build-content {
        padding: 2rem;
    }

    .rank-selectors {
        flex-direction: column;
    }
}

/* Size tweaks for module slots within combined build */
.combined-build-modal #combined-module-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* smaller boxes */
    gap: 1rem;
}

.combined-build-modal .modal-module-slot {
    height: 110px; /* was 140px */
    max-width: 110px;
}

.combined-build-modal .modal-slot-icon {
    font-size: 2.2rem; /* shrink icon */
    margin-bottom: 0.3rem;
}

.combined-build-modal .modal-slot-label {
    font-size: 0.9rem;
}

/* Size tweaks for module slots within inline combined calculator (right panel) */

/* Override clipping inside animated panels so hover popups aren’t cut off */
.details-section {
    overflow: visible; /* was hidden earlier – allow children to extend */
}

#combined-module-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* smaller boxes */
    gap: 0.8rem;
}

#combined-module-slots .modal-module-slot {
    height: 90px; /* reduce height */
    max-width: 90px;
}

#combined-module-slots .modal-slot-icon {
    font-size: 1.8rem; /* shrink icon */
    margin-bottom: 0.25rem;
}

#combined-module-slots .modal-slot-label {
    font-size: 0.8rem;
}

/* ----- INLINE COMBINED BUILD PANEL ----- */
.combined-build-panel {
    /* Match glassy panels used elsewhere (left/right-panel) */
    background: linear-gradient(135deg, rgba(130, 180, 230, 0.12) 0%, rgba(100, 150, 200, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    margin-top: 1.5rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.combined-build-panel .build-content {
    display: grid;
    grid-template-columns: 420px 1fr; /* slightly slimmer */
    gap: 2rem;
}

@media (max-width: 1200px) {
    .combined-build-panel .build-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
}

.combined-build-panel .build-section,
.combined-build-modal .build-section {
    background: linear-gradient(135deg, rgba(130, 180, 230, 0.15) 0%, rgba(100, 150, 200, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.combined-build-panel .build-section:hover,
.combined-build-modal .build-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(96, 165, 250, 0.3);
}

/* Ship-build modal overrides to make module slots fit on one row */
.ship-build-modal #interactive-module-slots {
    display: flex;
    flex-wrap: nowrap; /* keep them on one line */
    justify-content: center;
    gap: 1rem; /* a bit tighter */
    overflow-x: auto; /* scroll if viewport too narrow */
}

.ship-build-modal .modal-module-slot {
    min-width: 80px;
    max-width: 80px;
    height: 80px; /* square, more compact */
}

.ship-build-modal .modal-slot-icon {
    font-size: 1.8rem; /* shrink icon */
    margin-bottom: 0.2rem;
}

.ship-build-modal .modal-slot-label {
    font-size: 0.7rem; /* smaller caption */
}

/* Inspirations Section Styles */
.inspirations-section {
    background: #1a2952;
    border: 1px solid rgba(126, 200, 227, 0.4);
    border-radius: 15px;
    padding: 1.5rem;
}

.inspirations-container {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: stretch;
}

.inspiration-slot-wrapper {
    flex: 1;
    max-width: 200px;
}

.inspiration-slot {
    flex: 1;
    min-height: 120px;
    max-width: 200px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(251, 191, 36, 0.10));
    border: 2px solid var(--accent-blue);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Icons in inspiration slots */
.inspiration-slot .commander-nation-flag,
.inspiration-slot .commander-ship-type-icon {
    position: absolute;
    z-index: 10;
}

.inspiration-slot .commander-nation-flag {
    top: 6px;
    left: 6px;
    width: 20px;
    height: 13px;
}

.inspiration-slot .commander-ship-type-icon {
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
}

.inspiration-slot:hover {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.15));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}

.inspiration-slot-content {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inspiration-placeholder {
    text-align: center;
    color: var(--text-secondary);
}

.inspiration-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--accent-blue);
}

.inspiration-placeholder p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.inspiration-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.inspiration-commander-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    margin-bottom: 0.5rem;
}

.inspiration-base-trait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.inspiration-trait-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.inspiration-trait-value {
    font-size: 0.75rem;
    color: var(--accent-gold);
    font-weight: 600;
    font-family: 'Orbitron', monospace;
}

.inspiration-trait-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.inspiration-trait-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.4rem;
}

.inspiration-commander-name {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(96, 165, 250, 0.3);
    padding-bottom: 0.3rem;
}

.inspiration-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(248, 113, 113, 0.8);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.inspiration-slot:hover .inspiration-remove {
    opacity: 1;
}

.inspiration-remove:hover {
    background: rgba(248, 113, 113, 1);
}

/* Inspiration Modal Styles */
.inspiration-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 40, 80, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.inspiration-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.95), rgba(42, 82, 152, 0.95));
    border: 2px solid var(--accent-blue);
    border-radius: 15px;
    padding: 2rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
}

/* Inspiration modal scrollbar styling */
.inspiration-modal-content::-webkit-scrollbar {
    width: 6px;
}

.inspiration-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.inspiration-modal-content::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.inspiration-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

.inspiration-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.inspiration-modal-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0;
}

.inspiration-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.inspiration-modal-close:hover {
    color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.1);
}

/* Filter Controls */
.inspiration-filters {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(147, 51, 234, 0.05));
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 10px;
}

.filter-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-input, .filter-select {
    padding: 0.7rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.15));
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Dropdown options styling */
.filter-select option {
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.95), rgba(42, 82, 152, 0.95));
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Icon selector styles */
.icon-selector {
    position: relative;
    margin-top: 0.5rem;
}

.icon-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.icon-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-dropdown-trigger:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: var(--accent-gold);
}

.icon-dropdown-trigger.open {
    border-color: var(--accent-gold);
    background: rgba(251, 191, 36, 0.1);
}

.icon-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 60, 114, 0.95);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    padding: 0.5rem;
}

.icon-dropdown-content.show {
    display: block;
}

.icon-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.icon-option {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(96, 165, 250, 0.3);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(147, 51, 234, 0.05));
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.icon-option:hover {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.15));
    transform: scale(1.1);
}

.icon-option.selected {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(96, 165, 250, 0.2));
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.icon-option img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.flag-option img {
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

.ship-type-option img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(1.2);
}

.icon-option.all-option {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(96, 165, 250, 0.15));
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--accent-blue);
}

.icon-option.all-option:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(147, 51, 234, 0.2));
    color: var(--accent-gold);
}

/* Loading Indicator */
.inspiration-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(96, 165, 250, 0.3);
    border-top: 3px solid var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.inspiration-loading p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* No Results Message */
.inspiration-no-results {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.inspiration-no-results p {
    font-size: 1.1rem;
    margin: 0;
}

.inspiration-commanders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    min-height: 200px;
}

.inspiration-commander-card {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(251, 191, 36, 0.10));
    border: 2px solid rgba(96, 165, 250, 0.25);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
}

.inspiration-commander-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.25);
}

.inspiration-commander-card.selected {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(96, 165, 250, 0.15));
}

.inspiration-card-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    border: 2px solid var(--accent-blue);
}

.inspiration-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.inspiration-card-trait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.inspiration-card-trait-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.inspiration-card-trait-name {
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.4rem;
}

.inspiration-card-trait-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    width: 100%;
}

.inspiration-card-trait-preview {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

.trait-effect {
    background: linear-gradient(135deg, #1e2f50 0%, #00437d 100%);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.65rem;
    line-height: 1.3;
}

.trait-effect:last-child {
    margin-bottom: 0;
}

.inspiration-card-type {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nation flag and ship type icons */
.commander-nation-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.commander-ship-type-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.trait-placeholder {
    width: 20px;
    height: 20px;
    background: var(--accent-blue);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
}

.inspiration-trait-icon.trait-placeholder,
.inspiration-card-trait-icon.trait-placeholder {
    width: 24px;
    height: 24px;
    background: var(--accent-blue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .inspirations-container {
        flex-direction: column;
        gap: 1rem;
    }

    .inspiration-slot-wrapper {
        max-width: none;
    }

    .inspiration-slot {
        max-width: none;
    }

    .inspiration-modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    .inspiration-commanders-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .filter-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filter-group {
        width: 100%;
    }
}

/* Additional redesign overrides */
.tab-button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 20px rgba(96, 165, 250, 0.2) !important;
}

.tab-button.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(147, 51, 234, 0.2)) !important;
    color: var(--text-primary) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.15), inset 0 0 20px rgba(96, 165, 250, 0.1) !important;
}

/* Enhanced panel styles */
.left-panel, .right-panel {
    background: linear-gradient(135deg, rgba(20, 25, 45, 0.85) 0%, rgba(15, 20, 35, 0.85) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    height: 100% !important;
}

.left-panel {
    overflow: visible !important;
}

.right-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2.5rem !important;
}

/* Better scrollbar styling */
.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar {
    width: 6px;
}

.left-panel::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.left-panel::-webkit-scrollbar-thumb:hover,
.right-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

/* Better welcome message styling */
.welcome-message {
    text-align: center;
    padding: 3rem;
    background: radial-gradient(circle at center, rgba(96, 165, 250, 0.05) 0%, transparent 70%);
    border-radius: 20px;
    margin-top: 20%;
}

.welcome-message h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #60a5fa, #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.welcome-message p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* Ensure fixed heights */
#ships-section,
#commanders-section,
#combined-section {
    height: calc(100vh - var(--header-height) - 6rem) !important;
    max-height: calc(100vh - var(--header-height) - 6rem) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Make ship and commander grids scrollable */
#ship-grid,
#commanders-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
    margin-top: 1rem;
    padding-right: 0.5rem;
    min-height: 0;
}

#ship-grid::-webkit-scrollbar,
#commanders-grid::-webkit-scrollbar {
    width: 6px;
}

#ship-grid::-webkit-scrollbar-track,
#commanders-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

#ship-grid::-webkit-scrollbar-thumb,
#commanders-grid::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 3px;
}

/* Combined section selection areas - both should scroll */
/* Remove special combined styling */

#combined-ship-selection::-webkit-scrollbar,
#combined-commander-selection::-webkit-scrollbar {
    width: 6px;
}

#combined-ship-selection::-webkit-scrollbar-track,
#combined-commander-selection::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

#combined-ship-selection::-webkit-scrollbar-thumb,
#combined-commander-selection::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 3px;
}

/* Controls container should not grow */
.controls-container {
    flex-shrink: 0;
}

/* Filter containers - no scroll */
#filter-container,
#commanders-filter-container {
    overflow: visible;
}

/* Add control-step styling to ships and commanders tabs to match combined */
#ships-section .filter-step,
#commanders-section .filter-step {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(21, 40, 100, 0.35) 100%);
    border: 1px solid rgba(126, 200, 227, 0.4);
    border-radius: 15px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

#ships-section .filter-step:hover,
#commanders-section .filter-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

/* Remove all special combined filter container styling */

/* Nation/Flag buttons container */
#combined-ship-selection .nation-buttons-container,
#combined-ship-selection > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

/* Each flag button takes 1/3 width minus gap */
/* Combined section specific adjustments */
/* Make all left panels smaller and consistent */
#ships-section .left-panel,
#commanders-section .left-panel,
#combined-section .left-panel {
    height: calc(100% - 100px);
    padding: 1.5rem;
}

/* Compact layout when ship is selected */
#combined-filter-container:has(.selected-ship-info) {
    gap: 0.5rem;
}

/* Hide the ship selection div when ship is selected */
#combined-ship-selection:has(.selected-ship-info) > button:not(.change-ship-btn) {
    display: none;
}

/* Control step headers in combined */
#combined-filter-container .control-step h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Reduce header margin when content is present */
#combined-filter-container .control-step:has(.selected-ship-info) h3 {
    margin-bottom: 0.5rem;
}

#combined-filter-container .control-step {
    margin-bottom: 1.5rem;
}

/* When ship is selected, reduce spacing */
#combined-filter-container .control-step:first-child:has(.selected-ship-info) {
    margin-bottom: 0.5rem;
}

/* Selected ship info styling */
.selected-ship-info {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.selected-ship-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.selected-ship-info p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.selected-ship-info button {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

/* Force remove margins and compact spacing */
#commander-control-step,
.control-step:nth-child(2) {
    margin-top: 35px !important;
}

/* When ship is selected, use reasonable spacing */
#combined-filter-container:has(img[src*="ships"]) {
    gap: 1rem !important;
}

#combined-filter-container:has(img[src*="ships"]) #ship-control-step {
    margin-bottom: 1rem !important;
}

/* Make ship display more compact */
#combined-ship-selection div[onclick*="resetShipSelection"] {
    padding: 10px !important;
    margin: 0 !important;
}

#combined-ship-selection div[onclick*="resetShipSelection"] img {
    width: 80px !important;
    height: auto !important;
}

#combined-ship-selection div[onclick*="resetShipSelection"] h3 {
    font-size: 1rem !important;
    margin: 0 !important;
}

#combined-ship-selection div[onclick*="resetShipSelection"] p {
    font-size: 0.85rem !important;
    margin: 2px 0 !important;
}

#combined-ship-selection div[onclick*="resetShipSelection"] small {
    font-size: 0.75rem !important;
}

/* Remove any min-height from selections */
#combined-ship-selection,
#combined-commander-selection {
    min-height: 0 !important;
}

/* NO SCROLLING - just normal overflow */
#combined-filter-container {
    overflow: visible;
}

/* Particle optimization */
.particles {
    opacity: 0.4;
}

/* Additional viewport scroll prevention */
html {
    overflow: hidden !important;
    height: 100% !important;
}

body {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100vh !important;
}

/* Force grid layout for ALL button containers in combined */
#combined-ship-selection > *:not(button) {
    grid-column: span 3;
}

/* Ensure particles don't cause overflow */
#particles,
.particles {
    position: fixed !important;
    pointer-events: none;
}

/* Control button improvements */
button#reset-button,
button#commanders-reset-button,
button#combined-calculate-button,
button#combined-reset-button {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(96, 165, 250, 0.2);
    color: var(--text-primary);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    width: 100%;
}

/* Prevent body scroll when content is added */
* {
    box-sizing: border-box;
}

/* Ensure main sections don't cause body scroll */
#ships-section,
#commanders-section,
#combined-section {
    overflow: hidden !important;
}

/* Ships and commanders section panels must have fixed heights */
#ships-section .left-panel,
#ships-section .right-panel,
#commanders-section .left-panel,
#commanders-section .right-panel {
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

/* Ships and commanders left panels must handle overflow properly */
#ships-section .left-panel,
#commanders-section .left-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Ships and commanders right panels must scroll */
#ships-section .right-panel,
#commanders-section .right-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Fix expanding containers in ships and commanders tabs - match combined styling */
#details-panel,
#commanders-details-panel {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95) 0%, rgba(21, 40, 100, 0.9) 100%);
    border-radius: 20px;
    padding: 2rem;
    overflow-y: auto;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent content from pushing container size */
#details-panel .details-content,
#commanders-details-panel .details-content {
    height: auto !important;
    overflow: visible !important;
}

/* Make ships and commanders details sections match combined tab styling */
#details-panel .details-section,
#commanders-details-panel .details-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    transition: none;
    position: relative;
    margin-bottom: 1.5rem;
    overflow: visible;
}

#details-panel .details-section h2,
#commanders-details-panel .details-section h2 {
    font-family: 'Exo 2', sans-serif;
    color: var(--accent-blue);
    padding: 0.75rem 1.2rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(147, 51, 234, 0.1));
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* Remove combined overflow styles */

/* Nation buttons in regular filter should also be grid */
#filter-container .nation-selection,
#filter-container [data-step="nation"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

#filter-container button[data-nation],
#filter-container .nation-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 70px !important;
}

button#reset-button:hover,
button#commanders-reset-button:hover,
button#combined-calculate-button:hover,
button#combined-reset-button:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(147, 51, 234, 0.2));
    border-color: rgba(96, 165, 250, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.2);
}

/* Make all sections use consistent styling */
.controls-container {
    /* Default styling for all filter containers */
}

/* Control steps styling */
.control-step {
    margin-bottom: 1.5rem;
}

/* Class/Type selection - 2 per row */
.filter-buttons:has(.filter-btn) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 !important;
    background: none !important;
}

/* Style class/type buttons like menu tabs */
.filter-btn {
    padding: 1rem 2.5rem !important;
    background: linear-gradient(135deg, #1e2f50 0%, #00437d 100%);
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1.0px solid var(--accent-gold);
    border-radius: 18px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.75px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px) !important;
}

.filter-btn.selected,
.filter-btn.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(147, 51, 234, 0.2)) !important;
    color: var(--text-primary) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.15), inset 0 0 20px rgba(96, 165, 250, 0.1) !important;
}

/* Remove icons - keep buttons clean like menu tabs */

/* Fix Aircraft Carrier text and underscores */
.filter-btn[data-value*="Aircraft_Carrier"],
.filter-btn[data-value*="Aircraft Carrier"],
.filter-btn[data-value*="Carrier"] {
    font-size: 0.85rem !important;
    padding: 1rem 1.5rem !important;
}

/* Remove underscores from all filter buttons */
.filter-btn {
    text-transform: uppercase !important;
}

/* Just make Aircraft_Carriers button smaller to fit */
.filter-btn[data-value="Aircraft_Carriers"] {
    font-size: 0.85rem !important;
}

/* Tier selection - horizontal row */
.filter-buttons:has(.filter-btn[data-value*="Tier"]),
.filter-buttons:has(.filter-btn[data-value*="Legendary"]) {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 0.5rem !important;
}

/* Smaller tier buttons */
.filter-btn[data-value*="Tier"],
.filter-btn[data-value="Legendary"] {
    min-height: 45px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
}

.control-step h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-step h3 i {
    color: var(--accent-blue);
}

/* OVERRIDE: Reasonable spacing in combined when ship selected */
#combined-filter-container[style*="gap"] {
    gap: 1rem !important;
}

#commander-control-step[style*="margin-top"] {
    margin-top: 35px !important;
}

/* COMBINED TAB SPECIFIC FIXES ONLY */
/* Reduce min-heights in combined */
#combined-section #combined-ship-selection[style*="min-height"],
#combined-section #combined-commander-selection[style*="min-height"] {
    min-height: 120px !important;
}

/* Reduce gaps and margins */
#combined-section .control-step {
    margin-bottom: 0.5rem !important;
}

#combined-section .control-step h3 {
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem !important;
}

/* Only affect combined tab inner scroll */
#combined-section #combined-commander-selection > div[style*="max-height"],
#combined-section #combined-commander-selection > div[style*="overflow"] {
    min-height: 300px !important;
    border: 2px solid var(--accent-gold);
    border-radius: 10px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent !important;
}

/* Combined tab scrollbar styling */
#combined-section #combined-commander-selection > div::-webkit-scrollbar {
    width: 6px !important;
}

#combined-section #combined-commander-selection > div::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 3px !important;
}

#combined-section #combined-commander-selection > div::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3) !important;
    border-radius: 3px !important;
}

#combined-section #combined-commander-selection > div::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5) !important;
}

/* Combined ship grid scrollbar styling */
#combined-ship-grid {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent !important;
    max-height: 400px !important;
}

/* Fix combined ship selection scrollability */
#combined-ship-selection {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 400px !important;
}

#combined-ship-grid::-webkit-scrollbar {
    width: 6px !important;
}

#combined-ship-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 3px !important;
}

#combined-ship-grid::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3) !important;
    border-radius: 3px !important;
}

#combined-ship-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5) !important;
}

/* Make ship cards smaller in both sections */
.ship-card {
    min-height: 180px !important;
    max-height: 180px !important;
}

.ship-card img {
    max-height: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
}

.ship-card p {
    font-size: 0.85rem !important;
    margin-top: 0.5rem !important;
}

/* Adjust grid spacing */
#ship-grid, #combined-ship-grid {
    gap: 1rem !important;
}

/* Fix hover animation overflow */
#ship-selection-container,
#ship-selection-wrapper,
#combined-ship-selection,
.control-step {
    overflow: visible !important;
}

/* Ensure grids have padding for hover effects */
#ship-grid,
#combined-ship-grid {
    padding: 10px !important;
    margin: -10px !important;
}


/* Hide ship selection header in combined section */
#combined-section #ship-control-step h3 {
    display: none !important;
}

/* Reduce search bar margin when filter buttons are shown */
.persistent-search-container.filter-active input {
    margin-bottom: 5px !important;
}