/* Custom Properties (for easier theming/consistency) */
:root {
    --primary-text-color: #e5e7eb; /* Light gray for main text */
    --secondary-text-color: #9ca3af; /* Muted gray for secondary info */
    --accent-color-light: #fcd34d; /* Brighter gold/orange */
    --accent-color-dark: #f59e0b; /* Deeper gold/orange */
    --dark-bg-color: #1a202c; /* General dark background */
    --section-bg-color: #1f2937; /* Slightly lighter dark for cards/sections */
    --border-color: #374151; /* Dark border/separator color */
    --hover-bg-color: #2c384a; /* Darker hover state background */
    --pro-tip-bg-color: #362e19; /* Warm dark for pro tips */
    --pro-tip-border-color: #f59e0b;
    --red-danger: #dc2626;
    --yellow-warning: #fbbf24;
    --green-success: #22c55e;
    /* For Admin Editing Styles */
    --accent-color: #e6b800;
    --accent-color-rgb: 230, 184, 0;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
}


/* Override body background for cosmic background pages */
body {
    background-color: transparent !important;
    background-image: none !important;
}

/* Core styles for the background canvas - ENSURE THIS IS PRESENT */
#background-canvas {
    position: fixed; /* Essential for z-index to work correctly relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Pushes it far behind other content */
}

/* Ensure the main page wrapper provides proper stacking context */
#page-wrapper {
    position: relative; /* Establishes a stacking context */
    z-index: 0; /* Make sure it's above the canvas (default is auto, but explicit is safer) */
    min-height: 100vh; /* Ensure it covers the whole viewport vertically */
    display: flex; /* Helps ensure content pushes footer down if you have one */
    flex-direction: column;
    border: none !important; /* Ensure no border on page wrapper */
    outline: none !important; /* Ensure no outline */
}

/* Character Page Layout */
#command-center-container {
    padding: 0; /* Remove padding if any, allow content to stretch */
    max-width: none; /* Allow full width */
    position: relative; /* Establish a stacking context for its children */
    z-index: 1; /* Make sure it's above the canvas and page-wrapper's default z-index */
    flex-grow: 1; /* Allow it to take available vertical space */
    border: none !important; /* Ensure no border on the container */
    outline: none !important; /* Ensure no outline */
}

#real-content {
    display: none; /* Completely hidden until loaded */
    grid-template-areas:
        "header header"
        "sidebar abilities";
    grid-template-columns: 17.5rem 1fr; /* 17.5rem */
    grid-template-rows: auto 1fr; /* Header auto height, main content takes rest */
    gap: 2rem; /* Increased gap for more breathing room */
    padding: 2rem; /* Increased padding */
    max-width: 70rem; /* 70rem */
    margin: 0 auto; /* Center the content */
    transform: translateY(1.25rem); /* 1.25rem */
    opacity: 0; /* Hidden by default, revealed by JS */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
    border: none !important; /* Ensure no border on the grid container */
    outline: none !important; /* Ensure no outline */
}

#real-content.content-revealed {
    display: grid; /* Show as grid when revealed */
    opacity: 1;
    transform: translateY(0); /* Move to final position */
}

/* Staggered entrance animations for content sections */
#real-content.content-revealed .character-header-section {
    animation: slideInFromTop 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

#real-content.content-revealed .character-sidebar-section {
    animation: slideInFromLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

#real-content.content-revealed .character-abilities-section {
    animation: slideInFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-1.875rem); /* -1.875rem */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-1.875rem); /* -1.875rem */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(1.875rem); /* 1.875rem */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Skeleton Loader adjustments for the new layout */
#skeleton-loader {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar abilities";
    grid-template-columns: 17.5rem 1fr; /* 17.5rem */
    grid-template-rows: 12.5rem 1fr; /* 12.5rem */
    gap: 2rem;
    padding: 2rem;
    max-width: 70rem; /* 70rem */
    margin: 0 auto;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
    position: relative;
    width: 100%;
    min-height: 100vh; /* Ensure it covers initial viewport */
    /* Background will be handled by the cosmic canvas */
    z-index: 10; /* Make sure it's on top during load */
}

.hero-banner-skeleton {
    grid-area: header;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--section-bg-color) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    border-radius: 0.5rem; /* 0.5rem */
    height: 12.5rem; /* 12.5rem */
    animation: skeleton-loading 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.hero-banner-skeleton::before {
    content: '';
    position: absolute;
    top: 1.25rem; /* 1.25rem */
    left: 1.25rem; /* 1.25rem */
    width: 12.5rem; /* 12.5rem */
    height: 2.5rem; /* 2.5rem */
    background: var(--section-bg-color);
    border-radius: 0.25rem; /* 0.25rem */
    opacity: 0.3;
}

.hero-banner-skeleton::after {
    content: '';
    position: absolute;
    bottom: 1.25rem; /* 1.25rem */
    left: 1.25rem; /* 1.25rem */
    width: 9.375rem; /* 9.375rem */
    height: 1.25rem; /* 1.25rem */
    background: var(--section-bg-color);
    border-radius: 0.25rem; /* 0.25rem */
    opacity: 0.3;
}

.hero-column-skeleton {
    grid-area: sidebar;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--section-bg-color) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    border-radius: 0.5rem; /* 0.5rem */
    height: 30rem; /* 30rem */
    animation: skeleton-loading 1.5s ease-in-out infinite;
    animation-delay: 0.2s;
    position: relative;
    overflow: hidden;
}

.hero-column-skeleton::before {
    content: '';
    position: absolute;
    top: 1.25rem; /* 1.25rem */
    left: 1.25rem; /* 1.25rem */
    right: 1.25rem; /* 1.25rem */
    height: 1.875rem; /* 1.875rem */
    background: var(--section-bg-color);
    border-radius: 0.25rem; /* 0.25rem */
    opacity: 0.3;
}

.hero-column-skeleton::after {
    content: '';
    position: absolute;
    top: 4.375rem; /* 4.375rem */
    left: 1.25rem; /* 1.25rem */
    right: 1.25rem; /* 1.25rem */
    height: 12.5rem; /* 12.5rem */
    background: var(--section-bg-color);
    border-radius: 0.25rem; /* 0.25rem */
    opacity: 0.3;
}

.abilities-column-skeleton {
    grid-area: abilities;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--section-bg-color) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    border-radius: 0.5rem; /* 0.5rem */
    height: 40rem; /* 40rem */
    animation: skeleton-loading 1.5s ease-in-out infinite;
    animation-delay: 0.4s;
    position: relative;
    overflow: hidden;
}

.abilities-column-skeleton::before {
    content: '';
    position: absolute;
    top: 1.25rem; /* 1.25rem */
    left: 1.25rem; /* 1.25rem */
    right: 1.25rem; /* 1.25rem */
    height: 1.875rem; /* 1.875rem */
    background: var(--section-bg-color);
    border-radius: 0.25rem; /* 0.25rem */
    opacity: 0.3;
}

.abilities-column-skeleton::after {
    content: '';
    position: absolute;
    top: 4.375rem; /* 4.375rem */
    left: 1.25rem; /* 1.25rem */
    right: 1.25rem; /* 1.25rem */
    height: 18.75rem; /* 18.75rem */
    background: var(--section-bg-color);
    border-radius: 0.25rem; /* 0.25rem */
    opacity: 0.3;
}

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


/* Character Header Section */
#character-header {
    grid-area: header;
    position: relative;
    display: flex;
    align-items: flex-end; /* Align info to the bottom */
    padding: 2.4rem 2rem; /* More generous padding */
    border-radius: 0.75rem; /* 0.75rem */
    overflow: hidden;
    min-height: 15rem; /* 15rem */
    background: linear-gradient(135deg, var(--section-bg-color), var(--dark-bg-color)); /* Darker, more pronounced gradient */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5); /* 0.5rem 1.5rem */
    color: var(--primary-text-color);
    margin-bottom: 1.6rem;
    transition: all 0.3s ease; /* For focus effect */
    border: 1px solid transparent; /* Prepare for border on focus */
    opacity: 0; /* Start hidden for animation */
    transform: translateY(-1.875rem); /* -1.875rem */
}
#character-header.is-in-focus {
    box-shadow: 0 0 1.25rem var(--role-glow-color, rgba(245, 158, 11, 0.5)),
                0 0.375rem 1.25rem var(--role-glow-color, rgba(245, 158, 11, 0.3)); /* 2.5rem, 0.75rem, 2.5rem */
    border-color: var(--role-glow-color, var(--accent-color-dark));
    transform: translateY(-0.1875rem); /* -0.1875rem */
}

.character-header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* Slightly less opaque for better text contrast */
    z-index: 1;
    filter: brightness(0.8) saturate(1.1); /* Subtle image enhancement */
}

.character-header-info {
    position: relative;
    z-index: 2;
    padding-left: 1.25rem; /* 1.25rem */
    text-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.7); /* 0.1875rem 0.375rem */
}

#character-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5.2rem; /* Larger name */
    text-transform: uppercase;
    line-height: 0.8; /* Tighter line height */
    margin: 0;
    color: var(--primary-text-color);
    letter-spacing: 0.125rem; /* 0.125rem */
}

#real-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.04rem; /* Slightly larger */
    font-weight: 500;
    color: var(--secondary-text-color);
    margin-top: 0.64rem; /* More space */
    margin-bottom: 1.2rem;
}

.header-role-difficulty {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 0.8rem;
}

/* Sidebar and Abilities Sections */
#character-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Increased gap */
    transition: all 0.3s ease; /* For focus effect */
    opacity: 0; /* Start hidden for animation */
    transform: translateX(-1.875rem); /* -1.875rem */
    border: none !important; /* Ensure no border on the sidebar container */
    outline: none !important; /* Ensure no outline */
    box-shadow: none !important; /* Ensure no box shadow */
}

.sidebar-portrait {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sidebar-portrait img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.page-footer {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    border-top: 1px solid var(--border-color);
}

/* Ensure no borders on any grid areas */
#real-content > * {
    border: none !important;
    outline: none !important;
}

/* Specifically target the sidebar grid area */
#real-content[style*="grid"] > *:nth-child(2) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#character-sidebar.is-in-focus {
    box-shadow: 0 0.375rem 1.25rem var(--role-glow-color, rgba(245, 158, 11, 0.4)); /* 0.75rem 2.5rem */
}

#character-abilities {
    grid-area: abilities;
    display: flex;
    flex-direction: column;
    gap: 2.4rem; /* More space between ability groups */
    opacity: 0; /* Start hidden for animation */
    transform: translateX(1.875rem); /* 1.875rem */
}

/* Common Section Card Styling */
.section-card {
    background-color: var(--section-bg-color); /* Darker background for sections */
    border-radius: 0.75rem; /* Slightly more rounded */
    padding: 1.6rem 2rem; /* More generous padding */
    box-shadow: 0 0.3125rem 0.875rem rgba(0, 0, 0, 0.4); /* Slightly softer, deeper shadow */
    color: var(--primary-text-color);
    border: 1px solid var(--border-color); /* Neon blue border for each card */
    position: relative;
    overflow: hidden;
}

/* Add a consistent glow effect to the section card borders */
.section-card::before {
    content: '';
    position: absolute;
    top: -0.125rem;
    left: -0.125rem;
    right: -0.125rem;
    bottom: -0.125rem;
    border-radius: 0.875rem;
    background: linear-gradient(45deg, var(--accent-color-light), var(--accent-color-dark));
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
    filter: blur(2px);
}

.section-card h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.92rem; /* Slightly larger */
    color: var(--accent-color-dark); /* Accent color for section titles */
    margin-bottom: 1.2rem;
    border-bottom: 0.125rem solid var(--border-color); /* Consistent border color */
    padding-bottom: 0.6rem;
    letter-spacing: 1px;
}

/* --- FIX FOR ABILITY HEADINGS --- */
/* This targets the h2 elements for "Core Abilities" and "Ultimate Ability" */
.abilities-group h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.92rem; /* Matching section-card h2 size */
    color: var(--accent-color-dark);
    margin-bottom: 1.6rem; /* Increased space BELOW the heading */
    margin-top: 0; /* Ensure no default browser margin-top interfering */
    border-bottom: 0.125rem solid var(--border-color); /* Consistent border */
    padding-bottom: 0.6rem;
    letter-spacing: 1px;
}
/* --- END FIX --- */


.section-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.04rem;
    color: var(--primary-text-color);
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    font-weight: 600; /* Bolder for h3 */
}

/* Overview Section */
.overview-section .detail-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.64rem; /* Slightly more spacing */
}

.overview-section .detail-label {
    font-weight: 600; /* Bolder label */
    color: var(--secondary-text-color);
    min-width: 4.5rem;
    letter-spacing: 0.0313rem;
}
.overview-section .role-badge { /* Ensure consistency */
    background-color: var(--red-danger); /* Fallback, should be set by JS */
}

/* Stats Section - NEW Horizontal Bar Design */
.stats-list {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.stats-list li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-bar-container {
    width: 100%;
}

.stat-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.stat-bar-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-text-color);
}

.stat-bar-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: var(--secondary-text-color);
}

.stat-bar {
    width: 100%;
    height: 0.75rem;
    background-color: var(--border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color-dark), var(--accent-color-light));
    border-radius: 0.375rem;
    transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Color coding for the bar fill based on rating */
.stat-bar-container[data-rating="low"] .stat-bar-fill { background: linear-gradient(90deg, #b91c1c, #f87171); }
.stat-bar-container[data-rating="medium"] .stat-bar-fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.stat-bar-container[data-rating="high"] .stat-bar-fill { background: linear-gradient(90deg, #16a34a, #4ade80); }
.stat-bar-container[data-rating="extreme"] .stat-bar-fill { background: linear-gradient(90deg, #0e7490, #22d3ee); }


/* Team-Up Section */
.teamup-section {
    text-align: center;
    background-color: var(--pro-tip-bg-color); /* Consistent with pro-tip background */
    border: 1px solid var(--accent-color-dark);
}

.teamup-section h2 {
    color: var(--accent-color-light); /* Brighter accent for Team-Up title */
    border-bottom-color: var(--accent-color-dark);
}

.synergy-partner-display {
    display: flex;
    align-items: center;
    gap: 0.96rem; /* Slightly more space */
    justify-content: center;
    margin-bottom: 0.96rem;
}

#synergy-partner-image {
    width: 3.5rem; /* Larger image */
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.1875rem solid var(--accent-color-light); /* Thicker, brighter border */
    box-shadow: 0 0 0.375rem rgba(252, 211, 77, 0.3); /* Glowing effect */
}

.synergy-partner-info {
    text-align: left;
}

.teamup-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem; /* Larger name */
    color: var(--accent-color-light);
    margin: 0 0 0.3rem 0;
    letter-spacing: 1px;
}

.teamup-partner-label {
    font-weight: 600;
    color: var(--primary-text-color);
}

#teamup-partner {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--primary-text-color);
}

.teamup-bonus {
    margin-top: 1.2rem; /* More space */
    font-style: italic;
    color: var(--secondary-text-color);
    font-size: 0.76rem; /* Slightly larger text */
    line-height: 1.5;
}

/* Synergy Section */
.synergy-section h2 {
    color: var(--green-success); /* Use a different color to distinguish from matchups */
}

.synergy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.synergy-card {
    background-color: rgba(34, 197, 94, 0.1); /* Greenish background */
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--green-success);
    transition: all 0.3s ease;
    transform: translateY(0);
}

.synergy-card:hover {
    background-color: rgba(34, 197, 94, 0.2);
    transform: translateY(-0.3125rem);
    border-color: #4ade80; /* Lighter green */
}

.synergy-card-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.1875rem solid var(--green-success);
    object-fit: cover;
    transition: border-color 0.3s ease;
    margin-bottom: 0.8rem;
}

.synergy-card:hover .synergy-card-avatar {
    border-color: #4ade80;
}

.synergy-card-name {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text-color);
    margin-bottom: 0.5rem;
}

.synergy-card-reason {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    line-height: 1.5;
    font-style: italic;
}

/* Matchups Section - NEW Card-based Design */
.matchup-category h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: var(--primary-text-color);
}

.strong-against h3 { color: var(--green-success); }
.weak-against h3 { color: var(--red-danger); }

.matchup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: 1rem;
}

.matchup-card {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    transform: translateY(0);
}

.matchup-card:hover {
    background-color: rgba(0,0,0,0.4);
    transform: translateY(-0.3125rem);
    border-color: var(--accent-color-dark);
}

.matchup-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.matchup-card-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.1875rem solid var(--border-color);
    object-fit: cover;
    transition: border-color 0.3s ease;
}

.matchup-card:hover .matchup-card-avatar {
    border-color: var(--accent-color-light);
}

.matchup-card-name {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text-color);
}

.matchup-card-reason {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    line-height: 1.5;
    font-style: italic;
}


/* Ability Cards (Core and Ultimate) */
.abilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); /* Slightly larger min-width for cards */
    gap: 1.6rem; /* Increased gap */
}

.ultimate-grid {
    display: flex;
    justify-content: center;
    padding: 1.6rem 0;
}

.ability-card {
    background-color: var(--section-bg-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.5); /* Deeper shadow */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color); /* Subtle border */
    transform: perspective(62.5rem) translateZ(0); /* Prepare for 3D transform */
}

.ability-card:hover {
    transform: perspective(62.5rem) translateZ(0.625rem); /* Lift effect on hover */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}


.ability-card.is-in-focus {
    box-shadow: 0 0.25rem 1rem var(--role-glow-color, rgba(245, 158, 11, 0.6)); /* Stronger glow */
    border-color: var(--role-glow-color, var(--accent-color-dark));
    transform: translateY(-0.1875rem); /* More pronounced lift */
}

.ability-card.ultimate {
    border: 0.125rem solid var(--accent-color-dark); /* Ultimate gets a stronger highlight */
    background: linear-gradient(145deg, var(--section-bg-color), #0d141f); /* Deeper gradient for ultimate */
    box-shadow: 0 0 0.75rem rgba(245, 158, 11, 0.4); /* More intense glow */
    max-width: 31.25rem;
    width: 100%;
}
.ability-card.ultimate.is-in-focus {
    box-shadow: 0 0.5rem 1.5rem rgba(245, 158, 11, 0.7), 0 0 1rem rgba(245, 158, 11, 0.5); /* Even stronger glow for ultimate on focus */
}

/* === START: UPDATED/FIXED THUMBNAIL STYLING === */

/* This parent container correctly creates the 16:9 aspect ratio box. */
.ability-video-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #222;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.ability-video-thumbnail::after { /* Overlay for video */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%); /* Gradient fade up */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.ability-video-thumbnail:hover::after {
    opacity: 0.7; /* Make overlay slightly more visible on hover */
}

/* This rule applies to both regular <video> and the .youtube-thumbnail <div>.
   It makes them fill the parent container perfectly. */
.ability-video-thumbnail video,
.youtube-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.2s ease;
}

/* Specific styling for the YouTube thumbnail div */
.youtube-thumbnail {
    background-size: cover;
    background-position: center;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

.ability-video-thumbnail:hover video,
.ability-video-thumbnail:hover .youtube-thumbnail {
    transform: scale(1.08); /* More pronounced zoom */
    filter: brightness(1.1) saturate(1.1); /* Subtle color pop on hover */
}

/* The red play button for YouTube thumbnails */
.youtube-thumbnail .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.75rem;
    height: 3.75rem;
    background: rgba(255, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* The triangle icon inside the play button */
.youtube-thumbnail .play-button span {
    color: white;
    font-size: 1.25rem;
    margin-left: 0.1875rem; /* Visually center the triangle */
}

/* Hover effect for the YouTube play button */
.youtube-thumbnail:hover .play-button {
    background: rgba(255, 0, 0, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* The default play icon (for non-YouTube videos) */
.ability-video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3.2rem;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.9);
    z-index: 10;
}

/* HIDE the default play-icon if a youtube-thumbnail is present to avoid overlap */
.ability-video-thumbnail:has(.youtube-thumbnail) .play-icon {
    display: none;
}

.ability-video-thumbnail:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* === END: UPDATED/FIXED THUMBNAIL STYLING === */

.ability-content {
    padding: 1.44rem; /* More padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ability-name-keybind {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.72rem; /* More space */
}

.ability-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem; /* Even larger name */
    color: var(--accent-color-light); /* Brighter color */
    line-height: 1.1;
    margin: 0;
    letter-spacing: 1px;
    text-shadow: 0 0 0.3125rem rgba(0,0,0,0.5); /* Add a glow */
}

.ability-keybind {
    background: linear-gradient(145deg, var(--accent-color-dark), var(--accent-color-light));
    color: var(--dark-bg-color);
    padding: 0.4rem 0.8rem;
    border-radius: 0.375rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 800; /* Bolder */
    text-transform: uppercase;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.5), inset 0 -0.125rem 0.125rem rgba(0,0,0,0.2);
    letter-spacing: 0.05rem;
    border: 1px solid rgba(255,255,255,0.2);
    transform: translateY(-0.125rem);
}

.ability-description {
    font-size: 0.85rem; /* Slightly larger for readability */
    color: var(--primary-text-color); /* Brighter text */
    margin-bottom: 1.2rem; /* More space */
    line-height: 1.7; /* Better readability */
    flex-grow: 1;
}

/* Ability Details List */
.ability-details-list {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.detail-label {
    color: var(--secondary-text-color);
    font-weight: 500;
}

.detail-value {
    color: var(--primary-text-color);
    font-weight: 700;
}

/* Updated Pro-Tip Box Styling */
.ability-pro-tip {
    background-color: rgba(252, 211, 77, 0.08); /* A very light, transparent yellow */
    border: 1px solid var(--pro-tip-border-color);
    border-left: 4px solid var(--pro-tip-border-color);
    padding: 1rem 1.2rem;
    font-size: 0.85rem;
    color: var(--primary-text-color); /* Use primary text color for better readability */
    margin-top: 1.5rem;
    border-radius: 0.5rem;
    line-height: 1.6;
    position: relative;
}

.ability-pro-tip-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-color-light);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.ability-pro-tip-heading .icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
}

/* Remove the old ::before pseudo-element and the strong tag styling */
.ability-pro-tip::before {
    display: none;
}

.ability-pro-tip strong {
    display: none;
}


/* Tags (Role, Playstyle) */
.role-badge {
    display: inline-block;
    background-color: var(--red-danger); /* Example color, should be set by JS dynamically */
    color: white;
    padding: 0.4rem 0.8rem; /* More padding */
    border-radius: 0.4375rem; /* More rounded */
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0437rem; /* More letter spacing */
    margin-right: 0.6rem; /* More space */
    white-space: nowrap; /* Prevent breaking */
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3); /* Subtle shadow for tags */
}

.playstyle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem; /* Increased gap */
}

.playstyle-tag {
    background-color: var(--border-color);
    color: var(--primary-text-color);
    padding: 0.32rem 0.72rem; /* More padding */
    border-radius: 0.25rem;
    font-size: 0.68rem; /* Slightly larger */
    white-space: nowrap;
    letter-spacing: 0.0187rem;
}

/* Difficulty Stars */
.difficulty-stars {
    display: flex;
    gap: 0.24rem; /* More space between stars */
}

.difficulty-stars .star {
    color: var(--accent-color-dark); /* Gold star */
    font-size: 1.04rem; /* Larger stars */
    line-height: 1; /* Align stars correctly */
    text-shadow: 0 0 0.25rem rgba(245, 158, 11, 0.5); /* Subtle glow */
}
.difficulty-stars .star.empty {
    color: var(--border-color); /* Greyed out star */
    text-shadow: none;
}

/* Not Found Page */
.not-found {
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
    padding: 3rem; /* More padding */
    color: var(--primary-text-color);
    background-color: var(--section-bg-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    max-width: 40rem; /* Constrain width */
    margin: 2.5rem auto; /* Center with margin */
}
.not-found h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem; /* Larger title */
    color: var(--red-danger);
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
}
.not-found p {
    font-size: 0.96rem; /* Larger text */
    color: var(--secondary-text-color);
    margin-bottom: 2rem;
    line-height: 1.6;
}
.not-found .back-link {
    display: inline-block;
    background-color: var(--accent-color-dark);
    color: var(--dark-bg-color);
    padding: 0.8rem 1.6rem; /* More padding */
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-size: 0.88rem;
    box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.3);
}
.not-found .back-link:hover {
    background-color: var(--accent-color-light);
    transform: translateY(-0.125rem);
}


/* Modal Video Player Styling */
#modal-video-player {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#modal-video-player.modal-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disable interaction when hidden */
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
    backdrop-filter: blur(0.5rem); /* More blur */
}

.modal-content {
    position: relative;
    width: 90vw;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 64rem;
    max-height: 90vh;
    background-color: #0d141f;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.7);
    z-index: 1001;
}

#modal-video {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem; /* More rounded video corners */
    position: relative;
    overflow: hidden;
}

#modal-video video,
#modal-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.modal-close-btn {
    position: absolute;
    top: -2rem;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2.4rem; /* Larger close button */
    cursor: pointer;
    z-index: 1002;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 0 0 0.5rem rgba(0,0,0,0.5);
}

.modal-close-btn:hover {
    color: var(--accent-color-light);
    transform: rotate(90deg); /* Spin on hover */
}

/* ================================================================================= */
/* === ADMIN & EDITING STYLES === */
/* ================================================================================= */

/* --- Admin Button Styling --- */
.admin-edit-button,
.admin-cancel-button {
    background-color: var(--accent-color);
    color: var(--dark-bg-color, #1a202c);
    padding: 0.5rem 0.9375rem;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
    margin-top: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
}

.admin-edit-button:hover {
    background-color: var(--accent-color-light);
}

.admin-cancel-button {
    background-color: var(--color-danger);
    color: white;
    margin-top: 0.625rem;
}

.admin-cancel-button:hover {
    background-color: var(--color-danger-dark);
}

/* --- Editing Mode Visual Cues --- */
body.editing-mode [contenteditable="true"],
body.editing-mode .editing-input {
    border: 1px dashed var(--accent-color);
    padding: 0.125rem 0.3125rem;
    background-color: rgba(var(--accent-color-rgb), 0.1);
    min-width: 3.125rem;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
}

body.editing-mode [contenteditable="true"]:focus,
body.editing-mode .editing-input:focus {
    outline: 0.125rem solid var(--accent-color);
    background-color: rgba(var(--accent-color-rgb), 0.2);
    border-color: var(--accent-color);
}

body.editing-mode textarea.editing-input {
    min-height: 5rem;
    resize: vertical;
}

.character-header-image input.editing-input,
.ability-video-thumbnail input.editing-input {
    position: absolute;
    bottom: 0.625rem;
    left: 0.625rem;
    width: calc(100% - 1.25rem);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid var(--accent-color);
    padding: 0.5rem 0.625rem;
    z-index: 10;
    box-sizing: border-box;
    border-radius: 0.1875rem;
    font-size: 0.9rem;
}

body.editing-mode .ability-video-thumbnail .play-icon,
body.editing-mode .ability-video-thumbnail .play-button {
    display: none !important;
}

body.editing-mode #biography-section {
    display: block !important;
}

body.editing-mode select.editing-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(var(--accent-color-rgb), 0.1);
    color: var(--primary-text-color);
    border: 1px dashed var(--accent-color);
    padding: 0.3125rem 0.625rem;
    border-radius: 0.1875rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.2;
    background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1em;
    padding-right: 1.5625rem;
}

.stat-rating-editor {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.3125rem;
    color: var(--primary-text-color);
    font-size: 0.9rem;
}

body.editing-mode .stat-bar-background {
    border: 1px solid rgba(var(--accent-color-rgb), 0.5);
}


/* Lore Section */
.lore-section {
    /* The .section-card class already provides most of the styling. */
}

.lore-subsection {
    margin-bottom: 1.5rem;
}

.lore-subsection:last-child {
    margin-bottom: 0;
}

.lore-subsection h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color-light);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.lore-subsection p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--secondary-text-color);
}


/* Skins & Cosmetics Section */
.skins-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.skin-card {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    cursor: pointer;
}

.skin-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color-dark);
}

.skin-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.skin-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text-color);
}


/* Changelog Section */
.changelog-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.changelog-entry {
    background-color: var(--section-bg-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 0.3125rem 0.875rem rgba(0, 0, 0, 0.4);
}

.changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.changelog-version {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--primary-text-color);
}

.changelog-date {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.changelog-changes {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.changelog-changes li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.6;
    color: var(--primary-text-color);
    padding-left: 1.5em; /* Indent for the bullet */
    position: relative;
}

.changelog-changes li:last-child {
    border-bottom: none;
}

.changelog-changes li::before {
    content: '•';
    color: var(--accent-color-dark);
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
}


/* Strategy Section - NEW Card-based Design */
.strategy-section .strategy-grid {
    display: grid;
    grid-template-columns: 1fr; /* Each card takes a full row */
    gap: 1rem; /* Space between cards */
    margin-top: 1rem;
}

.strategy-card {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.strategy-card:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color-dark);
    transform: translateY(-0.1875rem);
}

.strategy-card-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accent-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.strategy-card-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.strategy-card-content {
    flex-grow: 1;
}

.strategy-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text-color);
    margin: 0 0 0.25rem 0;
}

.strategy-card-value {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    line-height: 1.5;
    margin: 0;
}


/* Voice Lines Section */
.voice-lines-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.voice-line-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.voice-line-item:hover {
    border-color: var(--accent-color-dark);
    background-color: rgba(0,0,0,0.4);
}

.voice-line-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text-color);
}

.play-voice-line-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--secondary-text-color);
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.play-voice-line-btn:hover {
    color: var(--accent-color-light);
    background-color: rgba(255,255,255,0.1);
}

.play-voice-line-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}


/* Responsive Design */
@media (max-width: 64rem) {
    #real-content {
        grid-template-areas:
            "header"
            "sidebar"
            "abilities";
        grid-template-columns: 1fr; /* Single column layout */
        padding: 1.6rem;
        gap: 1.6rem;
    }
    #skeleton-loader {
        grid-template-columns: 1fr;
        grid-template-rows: 12.5rem auto auto;
        padding: 1.6rem;
        gap: 1.6rem;
    }
    #character-header {
        padding: 1.6rem;
        min-height: 12.5rem;
    }
    #character-name { font-size: 4rem; }
    #real-name { font-size: 0.88rem; }
    .abilities-grid {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        gap: 1.2rem;
    }
    .section-card { padding: 1.44rem 1.6rem; }
}

@media (max-width: 48rem) {
    #character-header {
        min-height: 10rem;
        padding: 1.2rem;
    }
    #character-name { font-size: 3.2rem; }
    #real-name { font-size: 0.8rem; }
    .header-role-difficulty {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.64rem;
        margin-bottom: 0.64rem;
    }
    .section-card { padding: 1.2rem; }
    .section-card h2 { font-size: 1.6rem; }
    .ability-card { border-radius: 0.625rem; }
    .ability-name { font-size: 1.44rem; }
    .ability-content { padding: 1.2rem; }
    .ability-keybind { font-size: 0.72rem; }
    .ability-description { font-size: 0.72rem; }
    .ability-pro-tip { font-size: 0.72rem; }
    .playstyle-tag { font-size: 0.6rem; }
    .role-badge { font-size: 0.64rem; }
    .difficulty-stars .star { font-size: 0.96rem; }
    #synergy-partner-image { width: 2.75rem; height: 2.75rem; }
    .teamup-name { font-size: 1.28rem; }
}

@media (max-width: 30rem) {
    #real-content { padding: 1.2rem; gap: 1.2rem; }
    #character-header { padding: 0.8rem; min-height: 9rem; }
    #character-name { font-size: 2.4rem; }
    #real-name { font-size: 0.68rem; }
    .abilities-grid { grid-template-columns: 1fr; }
    .section-card { padding: 1rem; }
    .section-card h2 { font-size: 1.44rem; }
    .ability-content { padding: 1rem; }
    .ability-name { font-size: 1.28rem; }
    .icon-stat { font-size: 0.68rem; }
    .not-found h1 { font-size: 2rem; }
    .not-found p { font-size: 0.8rem; }
}