/* ==========================================================================
   PAGE: CHARACTERS (REDESIGN V4 - Holographic)
   ========================================================================== */

/* 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 */
}

/* --- Page Header --- */
/* Defines the style for the header of the page. */
.page-header {
    text-align: left; /* Aligns the text to the left. */
    padding: 2rem 1rem 3rem 0; /* Adds padding: top, right, bottom, left (no left padding). */
    max-width: calc(6 * 200px + 5 * 1.25rem); /* Matches the exact width of the character grid. */
    margin: 0 auto 0 0; /* Centers the header above the grid, aligned to the left. */
}
/* Defines the style for the main heading (h1) within the page header. */
.page-header h1 {
    font-family: var(--font-display); /* Sets the font for the heading. */
    font-size: clamp(2.5rem, 6vw, 4rem); /* Sets a responsive font size that adjusts to the viewport width. */
    letter-spacing: 0.1875rem; /* Adds space between letters. */
    color: var(--accent-cyan); /* Sets the color of the text. */
    margin-bottom: 0.5rem; /* Adds a small margin below the heading. */
    text-shadow: 0 0 0.625rem var(--accent-cyan), 0 0 1.25rem var(--accent-cyan), 0 0 2.5rem rgba(0, 255, 255, 0.5); /* Adds a glowing effect to the text. */
    animation: flicker 3s infinite alternate; /* Applies a flickering animation to the text. */
}

/* Defines the flicker animation used for the h1 heading. */
@keyframes flicker {
    /* These percentages define the points in the animation where the text-shadow is visible. */
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: /* Defines the glowing text shadow effect. */
        0 0 0.625rem var(--accent-cyan), /* Inner glow. */
        0 0 1.25rem var(--accent-cyan), /* Middle glow. */
        0 0 2.5rem rgba(0, 255, 255, 0.5), /* Outer glow with transparency. */
        0 0 4.375rem rgba(0, 255, 255, 0.5); /* Widest glow with transparency. */
    }
    /* These percentages define the points in the animation where the text-shadow is removed to create a flicker. */
    20%, 24%, 55% {
        text-shadow: none; /* Removes the text shadow to create the flicker effect. */
    }
}

/* Defines the style for paragraphs within the page header. */
.page-header p {
    font-size: 1.1rem; /* Sets the font size for the paragraph text. */
    color: var(--text-secondary); /* Sets the color of the paragraph text. */
    line-height: 1.6; /* Sets the space between lines of text. */
    text-align: left; /* Ensures paragraph is left-aligned under the h1. */
    margin: 0; /* Removes default margin to align directly under h1. */
}

/* --- Main Content Layout --- */
/* Defines the main layout container with sidebar and content area. */
.main-content-layout {
    display: flex; /* Uses Flexbox for layout. */
    gap: 0; /* Removes gap between sidebar and content for full-height sidebar. */
    min-height: 100vh; /* Ensures full viewport height. */
}

/* --- Sidebar Layout --- */
/* Defines the sidebar container for all filter controls. */
.filters-sidebar {
    width: 300px; /* Sets a fixed width for the sidebar. */
    flex-shrink: 0; /* Prevents the sidebar from shrinking. */
    padding: 2rem 1.5rem; /* Adds padding inside the sidebar. */
    background-color: rgba(13, 17, 23, 0.9); /* Sets a semi-transparent background color. */
    backdrop-filter: blur(0.75rem); /* Applies a blur effect to the area behind the element. */
    -webkit-backdrop-filter: blur(0.75rem); /* Safari-specific prefix for backdrop-filter. */
    border-right: 1px solid var(--accent-cyan-faded); /* Adds a faded cyan border on the right. */
    box-shadow: 2px 0 1.25rem rgba(0, 255, 255, 0.1); /* Adds a subtle glow effect on the right. */
    opacity: 0; /* Starts the sidebar as invisible for animation. */
    transform: translateX(-1.25rem); /* Moves the sidebar left slightly before it animates in. */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Adds smooth transitions for appearance effects. */
    height: calc(100vh - 4rem); /* Makes the sidebar full viewport height minus navbar. */
    position: fixed; /* Makes the sidebar fixed to the viewport. */
    top: 4rem; /* Aligns the sidebar below the navigation bar. */
    left: 0; /* Aligns the sidebar to the left of the viewport. */
    overflow-y: auto; /* Allows scrolling if content exceeds height. */
    z-index: 10; /* Ensures sidebar appears above other content. */
}

/* Defines the style for the sidebar when it becomes visible (class added by JavaScript). */
.filters-sidebar.visible {
    opacity: 1; /* Makes the sidebar fully visible. */
    transform: translateX(0); /* Moves the sidebar to its original position. */
}

/* --- Search Section --- */
/* Defines the search section at the top of the sidebar. */
.filter-search-section {
    margin-bottom: 2rem; /* Adds space below the search section. */
}

/* Defines the spacing between search title and search input. */
.filter-search-section .filter-group {
    margin-top: 0.5rem; /* Reduces space between "Search" title and search box. */
}

/* --- Characters Content Area --- */
/* Defines the main content area for character cards. */
.characters-content {
    flex: 1; /* Allows the content area to take up remaining space. */
    min-width: 0; /* Prevents flex item from overflowing. */
    margin-left: -10px; /* Negative margin to move content closer to sidebar and eliminate whitespace. */
    margin-top: 4rem; /* Adds top margin to account for navbar height. */
    padding: 2rem 1rem 2rem 0; /* Adds padding: top, right, bottom, left (no left padding). */
}

/* --- Header Animation --- */
/* Defines the style for the page header elements with animation. */
.page-header {
    opacity: 0; /* Starts the header as invisible for animation. */
    transform: translateY(1.25rem); /* Moves the header down slightly before it animates in. */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Adds smooth transitions for appearance effects. */
}

/* Defines the style for the header when it becomes visible (class added by JavaScript). */
.page-header.visible {
    opacity: 1; /* Makes the header fully visible. */
    transform: translateY(0); /* Moves the header to its original position. */
}

/* Defines the container for the primary filter controls (like search and sort). */
.filter-main-controls {
    display: flex; /* Uses Flexbox for layout. */
    flex-direction: column; /* Stacks children vertically. */
    gap: 1.5rem; /* Sets the space between its children. */
    margin-bottom: 2rem; /* Adds space below this section. */
}

/* Defines the container for secondary filter controls (like filter buttons). */
.filter-secondary-controls {
    display: flex; /* Uses Flexbox for layout. */
    flex-direction: column; /* Stacks children vertically. */
    gap: 1.5rem; /* Sets the space between filter groups. */
    margin-bottom: 2rem; /* Adds space below this section. */
}

/* Defines the container for action buttons (like 'clear filters'). */
.filter-actions {
    display: flex; /* Uses Flexbox for layout. */
    justify-content: center; /* Centers the button horizontally. */
}

/* Defines the style for the sort controls section at the bottom of the sidebar. */
.filter-sort-controls {
    margin-top: 2rem; /* Adds gap between filter actions and sort controls. */
    padding-top: 1.5rem; /* Adds padding at the top. */
    border-top: 1px solid var(--border-color); /* Adds a subtle border above the sort section. */
}

/* Defines a group of related filter elements (e.g., a label and a dropdown). */
.filter-group {
    display: flex; /* Uses Flexbox for layout. */
    flex-direction: column; /* Stacks children vertically. */
    gap: 0.75rem; /* Sets the space between elements in the group. */
    align-items: stretch; /* Makes children take full width. */
}

/* Defines the style for the title of a filter group. */
.filter-group-title {
    font-size: 1rem; /* Sets the font size. */
    font-weight: 700; /* Sets the font to bold. */
    color: var(--text-headings); /* Sets the text color. */
    margin: 0; /* Removes any default margin. */
    text-transform: uppercase; /* Makes the text uppercase. */
    letter-spacing: 1px; /* Adds space between letters. */
}

/* Defines the style for labels within filter groups. */
.filter-label {
    font-weight: 600; /* Sets the font to semi-bold. */
    font-size: 0.9rem; /* Sets the font size. */
    color: var(--text-secondary); /* Sets the text color. */
    text-transform: uppercase; /* Makes the text uppercase. */
    letter-spacing: 0.0313rem; /* Adds a small amount of space between letters. */
    flex-shrink: 0; /* Prevents the label from shrinking if space is limited. */
}

/* Defines the container for the search input field. */
.search-filter {
    position: relative; /* Establishes a positioning context for child elements. */
    flex-grow: 1; /* Allows the search filter to take up available space in its flex container. */
}

/* Defines the style for the search icon inside the input field. */
.search-icon {
    position: absolute; /* Positions the icon relative to the .search-filter container. */
    left: 1rem; /* Positions the icon from the left edge of the container. */
    top: 50%; /* Positions the icon vertically in the middle. */
    transform: translateY(-50%); /* Adjusts the vertical position to be perfectly centered. */
    width: 1rem; /* Sets the width of the icon. */
    height: 1rem; /* Sets the height of the icon. */
    color: var(--text-secondary); /* Sets the color of the icon. */
    pointer-events: none; /* Allows clicks to pass through the icon to the input field below. */
}

/* Defines the style for the search input field itself. */
.search-input {
    width: 100%; /* Makes the input field take the full width of its container. */
    padding: 0.75rem 1rem 0.75rem 2.5rem; /* Sets padding: top, right, bottom, left (left padding makes space for the icon). */
    background-color: var(--body-bg); /* Sets the background color. */
    border: 1px solid var(--border-color); /* Adds a border around the input. */
    border-radius: 0.5rem; /* Rounds the corners of the input field. */
    color: var(--text-primary); /* Sets the color of the text entered by the user. */
    font-size: 1rem; /* Sets the font size of the text. */
    transition: all 0.3s; /* Adds a smooth transition effect to all property changes. */
}

/* Defines the style for the search input and sort select when they are focused (clicked on). */
.search-input:focus,
.sort-select:focus {
    outline: none; /* Removes the default browser outline. */
    border-color: var(--accent-cyan); /* Changes the border color to cyan. */
    box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.2); /* Adds a cyan glow effect to indicate focus. */
}

/* Defines the style for the sort dropdown menu. */
.sort-select {
    width: 100%; /* Makes the select box take the full width of its container. */
    padding: 0.75rem 1rem; /* Adds padding inside the select box. */
    background-color: var(--body-bg); /* Sets the background color. */
    border: 1px solid var(--border-color); /* Adds a border around the select box. */
    border-radius: 0.5rem; /* Rounds the corners of the select box. */
    color: var(--text-primary); /* Sets the color of the text. */
    font-size: 1rem; /* Sets the font size of the text. */
    font-weight: 600; /* Sets the font to semi-bold. */
    transition: all 0.3s; /* Adds a smooth transition effect to all property changes. */
    cursor: pointer; /* Changes the cursor to a pointer on hover. */
    appearance: none; /* Removes the default system appearance of the dropdown arrow. */
    -webkit-appearance: none; /* Safari-specific prefix for appearance. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23a0a7b3'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); /* Adds a custom dropdown arrow using an SVG image. */
    background-repeat: no-repeat; /* Prevents the background image from repeating. */
    background-position: right 0.8rem center; /* Positions the dropdown arrow on the right side. */
    background-size: 1.5em; /* Sets the size of the dropdown arrow icon. */
    padding-right: 3rem; /* Adds padding on the right to prevent text from overlapping the arrow. */
}

/* Defines the style for the sort select box on hover. */
.sort-select:hover {
    color: var(--text-primary); /* Ensures the text color remains the same on hover. */
    border-color: var(--accent-cyan-faded); /* Changes the border color to a faded cyan on hover. */
}

/* Defines the container for filter buttons. */
.filter-buttons {
    display: flex; /* Uses Flexbox for layout. */
    flex-wrap: wrap; /* Allows buttons to wrap to the next line. */
    gap: 0.5rem; /* Sets the space between buttons. */
    justify-content: flex-start; /* Aligns buttons to the start of the container. */
}

/* Defines the base style for all filter buttons. */
.filter-btn {
    padding: 0.6rem 1.1rem; /* Sets the padding inside the button. */
    border-radius: 0.5rem; /* Rounds the corners of the button. */
    font-size: 0.9rem; /* Sets the font size. */
    font-weight: 700; /* Sets the font to bold. */
    text-transform: uppercase; /* Makes the text uppercase. */
    color: #fff; /* Sets the text color to white. */
    cursor: pointer; /* Changes the cursor to a pointer on hover. */
    transition: all 0.2s ease; /* Adds a smooth transition for all property changes. */
    border: 1px solid rgba(0,0,0,0.3); /* Adds a subtle dark border. */
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1); /* Adds a 3D effect with outer and inner shadows. */
    flex: 0 0 auto; /* Prevents buttons from growing/shrinking, maintains natural size. */
    min-width: fit-content; /* Ensures buttons are at least as wide as their content. */
    text-align: center; /* Centers the text within the button. */
    display: flex; /* Uses flexbox for internal layout. */
    align-items: center; /* Centers content vertically. */
    justify-content: center; /* Centers content horizontally. */
}

/* Defines the style for filter buttons on hover. */
.filter-btn:hover {
    transform: translateY(-0.0625rem); /* Lifts the button slightly. */
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1); /* Enhances the 3D effect. */
    filter: brightness(1.1); /* Makes the button slightly brighter. */
}

/* Defines specific background colors and borders for each filter button based on its value attribute. */
.filter-btn[value="Vanguard"] { background: linear-gradient(to bottom, var(--role-vanguard), #2980b9); border-color: #2471a3; } /* Vanguard button style. */
.filter-btn[value="Duelist"] { background: linear-gradient(to bottom, var(--role-duelist), #c0392b); border-color: #a93226; } /* Duelist button style. */
.filter-btn[value="Strategist"] { background: linear-gradient(to bottom, var(--role-strategist), #27ae60); border-color: #229954; } /* Strategist button style. */
.filter-btn[value="Easy"] { background: linear-gradient(to bottom, #69db96, #41c875); border-color: #36a561; } /* Easy difficulty button style. */
.filter-btn[value="Medium"] { background: linear-gradient(to bottom, #f7b75a, #f39c12); border-color: #d68910; } /* Medium difficulty button style. */
.filter-btn[value="Hard"] { background: linear-gradient(to bottom, #f18c82, #e74c3c); border-color: #cb4335; } /* Hard difficulty button style. */
.filter-btn[value="Poke"] { background: linear-gradient(to bottom, #5dade2, #3498db); border-color: #2c81b8; } /* Poke playstyle button style. */
.filter-btn[value="Dive"] { background: linear-gradient(to bottom, #ec7063, #e74c3c); border-color: #cb4335; } /* Dive playstyle button style. */
.filter-btn[value="Brawl"] { background: linear-gradient(to bottom, #af7ac5, #9b59b6); border-color: #884ea0; } /* Brawl playstyle button style. */

/* Defines the style for a filter button when it is active (selected). */
.filter-btn.active {
    background-color: var(--accent-cyan); /* Sets the base background to cyan. */
    background-image: linear-gradient(to bottom, var(--accent-cyan), #00b8b8); /* Overlays a cyan gradient. */
    border-color: var(--accent-cyan); /* Sets the border color to cyan. */
    color: #fff; /* Ensures the text color is white. */
    text-shadow: 0 0 0.625rem rgba(0,0,0,0.7); /* Adds a dark shadow to the text for readability. */
    box-shadow: 0 0 1.25rem rgba(0, 255, 255, 0.5), inset 0 0 0.3125rem rgba(255,255,255,0.3); /* Adds a bright cyan glow and a subtle inner highlight. */
    transform: translateY(0); /* Resets any transform effect from hover. */
    filter: brightness(1); /* Resets any brightness effect from hover. */
}

/* Defines the style for the 'Clear' button. */
.clear-btn {
    padding: 0.75rem 1.5rem; /* Sets the padding inside the button. */
    background-color: transparent; /* Makes the background transparent. */
    border: 1px solid var(--accent-red-faded); /* Adds a faded red border. */
    color: var(--accent-red); /* Sets the text color to red. */
    border-radius: 0.5rem; /* Rounds the corners of the button. */
    font-size: 0.9rem; /* Sets the font size. */
    font-weight: 700; /* Sets the font to bold. */
    cursor: pointer; /* Changes the cursor to a pointer on hover. */
    transition: all 0.2s ease; /* Adds a smooth transition for all property changes. */
}

/* Defines the style for the 'Clear' button on hover. */
.clear-btn:hover {
    background-color: var(--accent-red); /* Changes the background to red. */
    color: var(--body-bg); /* Changes the text color to the main background color for contrast. */
    box-shadow: 0 0 0.9375rem rgba(255, 75, 75, 0.5); /* Adds a red glow effect. */
}

/* --- Role Sections --- */
/* Defines the style for a section that groups characters by role (e.g., Vanguard). */
.role-section {
    margin-bottom: 4rem; /* Adds space below each role section. */
    opacity: 0; /* Starts the section as invisible for animation purposes. */
    transform: translateY(1.875rem); /* Moves the section down slightly before it animates in. */
    animation: slide-up 0.6s forwards; /* Applies a slide-up animation. 'forwards' keeps it in its final state. */
}
/* Defines the slide-up animation for the role sections. */
@keyframes slide-up { to { opacity: 1; transform: translateY(0); } } /* Animates the section to be fully visible and in its original position. */

/* Defines the style for the header of a role section. */
.role-section-header {
    display: flex; /* Uses Flexbox for layout. */
    align-items: center; /* Aligns the icon and title vertically. */
    gap: 1rem; /* Adds space between the icon and the title. */
    padding-bottom: 1rem; /* Adds space below the header content. */
    border-bottom: 0.125rem solid; /* Adds a colored border at the bottom of the header. The color is set by the specific role class. */
    margin-bottom: 2rem; /* Adds space below the header. */
    width: calc(6 * 200px + 5 * 1.25rem); /* Matches the exact width of the character grid (6 cards + 5 gaps). */
}

/* Defines the style for the title (h2) within the role section header. */
.role-section-header h2 { font-family: var(--font-display); font-size: 2.8rem; margin: 0; } /* Sets the font, size, and removes default margin. */
/* Defines the style for the role icon within the header. */
.role-section-header .role-icon { width: 2.5rem; height: 2.5rem; } /* Sets the size of the role icon. */

/* --- Role-Specific Colors --- */
/* Sets the border color for the Vanguard section. */
.role-section.vanguard { border-color: var(--accent-blue); }
/* Sets the text and icon color for the Vanguard section. */
.role-section.vanguard h2, .role-section.vanguard .role-icon { color: var(--accent-blue); }
/* Sets the border color for the Duelist section. */
.role-section.duelist { border-color: var(--role-duelist); }
/* Sets the text and icon color for the Duelist section. */
.role-section.duelist h2, .role-section.duelist .role-icon { color: var(--role-duelist); }
/* Sets the border color for the Strategist section. */
.role-section.strategist { border-color: var(--role-strategist); }
/* Sets the text and icon color for the Strategist section. */
.role-section.strategist h2, .role-section.strategist .role-icon { color: var(--role-strategist); }

/* Defines the grid layout for displaying the character cards. */
.character-grid {
    display: grid; /* Uses CSS Grid for layout. */
    grid-template-columns: repeat(6, 200px); /* Creates a grid with 6 fixed-width columns of 200px each. */
    gap: 1.25rem; /* Sets the space between the character cards. */
    justify-content: start; /* Aligns grid to the left. */
}

/* ======================================================= */
/* ==   CHARACTER CARD STYLES                           == */
/* ======================================================= */

/* Defines a shimmering animation for a holographic effect. */
@keyframes holographic-shimmer {
    from { transform: translateX(-100%) skewX(-30deg); } /* Starts the shimmer off-screen to the left. */
    to { transform: translateX(100%) skewX(-30deg); } /* Moves the shimmer across the element to the right. */
}

/* Defines the style for the link that wraps each character card. */
.hero-card-link {
    display: block; /* Makes the link a block-level element, taking up the full space. */
    text-decoration: none; /* Removes the default underline from the link. */
    color: inherit; /* Makes the link inherit its text color from its parent. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adds smooth transitions for transform and shadow effects. */
    border-radius: 0.75rem; /* Rounds the corners of the link area. */
}

/* Defines the style for the character card link on hover. */
.hero-card-link:hover {
  transform: translateY(-0.625rem); /* Lifts the card up slightly. */
  box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.6), 0 0 2.5rem var(--glow-color); /* Adds a pronounced shadow and a colored glow. */
}

/* Defines the main container for a character card. */
.hero-card {
  position: relative; /* Establishes a positioning context for child elements. */
  display: flex; /* Uses Flexbox for layout. */
  flex-direction: column; /* Stacks child elements vertically. */
  justify-content: flex-end; /* Aligns content to the bottom of the card. */
  height: 320px; /* Sets a fixed height for uniform card sizes (halfway between original and current). */
  border-radius: 0.75rem; /* Rounds the corners of the card. */
  overflow: hidden; /* Hides any content that extends beyond the card's rounded corners. */
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* Adds a subtle shadow to the card. */
  opacity: 0; /* Starts the card as invisible for animation. */
  transform: translateY(1.25rem); /* Moves the card down slightly before it animates in. */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, border-color 0.3s ease; /* Adds smooth transitions for appearance effects. */
}
/* Defines the style for a card when it becomes visible (class added by JavaScript). */
.hero-card.visible {
  opacity: 1; /* Makes the card fully visible. */
  transform: translateY(0); /* Moves the card to its original position. */
}

/* Defines the style for the background image of the character card. */
.hero-card-bg {
    position: absolute; /* Positions the image relative to the .hero-card container. */
    top: 0; /* Aligns the image to the top edge. */
    left: 0; /* Aligns the image to the left edge. */
    width: 100%; /* Makes the image fill the container's width. */
    height: 100%; /* Makes the image fill the container's height. */
    object-fit: cover; /* Ensures the image covers the entire area, cropping if necessary. */
    z-index: 1; /* Places the background image behind other content. */
    transition: transform 0.4s ease-in-out; /* Adds a smooth transition for the zoom effect. */
}
/* Defines the style for the background image when the card is hovered. */
.hero-card-link:hover .hero-card-bg {
    transform: scale(1.25) !important; /* Zooms the background image in. '!important' is used to override inline styles from JavaScript. */
}
/* Defines the gradient overlay on top of the background image. */
.hero-card-overlay {
    position: relative; /* Positions this element within the normal flow. */
    z-index: 2; /* Places the overlay above the background image. */
    padding: 0; /* Removes any default padding. */
    background: linear-gradient(to top, rgba(18, 18, 18, 1) 30%, rgba(18, 18, 18, 0.8) 65%, transparent 100%); /* Creates a dark gradient from the bottom up to ensure text is readable. */
}

/* Defines the container for the hero's information (name, tags). */
.hero-info {
    padding: 0.75rem 0.75rem 0.5rem 0.75rem; /* Sets padding: top, right, bottom, left. */
}

/* Defines the style for the hero's name (h4). */
.hero-info h4 {
  font-family: var(--font-display); /* Sets the font for the name. */
  font-size: 2.5rem; /* Moderate increase in font size for better visibility. */
  text-align: center; /* Centers the name text. */
  color: var(--text-headings); /* Sets the text color. */
  margin: 0; /* Removes any default margin. */
  line-height: 1.1; /* Sets the space between lines of text. */
  text-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.5); /* Adds a subtle shadow to the text for readability. */
}

/* Defines the container for all tags on a hero card. */
.hero-tags {
    width: 100%; /* Makes the container take the full width of the card. */
    display: flex; /* Uses Flexbox for layout. */
    flex-direction: column; /* Stacks the tags vertically. */
    gap: 0; /* Removes any gap between tag elements. */
}

/* Defines a wrapper for the playstyle tags. */
.playstyle-tags-wrapper {
    display: flex; /* Uses Flexbox for layout. */
    flex-direction: column; /* Stacks the tags vertically. */
    gap: 0; /* Removes any gap between tag elements. */
}

/* Defines the base style for a single playstyle tag. */
.playstyle-tag {
    padding: 0.4rem 0.9rem; /* Increased padding for bigger tags. */
    font-size: 0.9rem; /* Further increased font size for better visibility. */
    font-weight: 700; /* Sets the font to bold. */
    text-transform: uppercase; /* Makes the text uppercase. */
    text-align: center; /* Centers the tag text. */
    color: #fff; /* Sets the text color to white. */
    text-shadow: 1px 1px 0.125rem rgba(0,0,0,0.5); /* Adds a subtle shadow to the text for readability. */
}

/* === Difficulty Bar Styles (for Canvas Animation) === */
/* Defines the container for the animated difficulty bar. */
.difficulty-tag {
    background-color: #111; /* Fallback color if the canvas animation doesn't load. */
    position: relative; /* Establishes a positioning context for child elements. */
    padding: 0; /* Removes any default padding. */
    overflow: hidden; /* Hides any content that extends beyond the container's bounds. */
    display: flex; /* Uses Flexbox for layout. */
    align-items: center; /* Centers the text vertically. */
    justify-content: center; /* Centers the text horizontally. */
}

/* Defines a pseudo-element for the difficulty tag, likely for an overlay effect. */
.difficulty-tag::before {
    content: ''; /* Required for a pseudo-element to be displayed. */
    position: absolute; /* Positions the overlay relative to the .difficulty-tag container. */
    top: 0; /* Aligns the overlay to the top edge. */
    left: 0; /* Aligns the overlay to the left edge. */
    width: 100%; /* Makes the overlay fill the container's width. */
    height: 100%; /* Makes the overlay fill the container's height. */
    background-color: rgba(0, 0, 0, 0.0); /* Sets a transparent background. */
    z-index: 1; /* Places this overlay above the canvas but below the text. */
}

/* Defines the style for the canvas element used for the animated bar. */
.difficulty-tag canvas {
    position: absolute; /* Positions the canvas relative to the .difficulty-tag container. */
    top: 0; /* Aligns the canvas to the top edge. */
    left: 0; /* Aligns the canvas to the left edge. */
    width: 100%; /* Makes the canvas fill the container's width. */
    height: 100%; /* Makes the canvas fill the container's height. */
    z-index: 0; /* Places the canvas at the very back of the stacking context. */
}

/* Defines the style for the text that sits on top of the difficulty bar. */
.difficulty-text {
    display: block; /* Makes the element a block-level element. */
    position: relative; /* Positions the text within the normal flow. */
    z-index: 2; /* Places the text above the canvas and the ::before pseudo-element. */
    padding: 0.5rem 0.75rem; /* Sets the padding inside the text container. */
    font-size: 1rem; /* Increased font size for better visibility. */
    letter-spacing: 1px; /* Adds space between letters. */
    font-weight: 700; /* Sets the font to bold. */
    text-transform: uppercase; /* Makes the text uppercase. */
    text-align: center; /* Centers the text. */
    color: #fff; /* Sets the text color to white. */
    text-shadow: 0 0 0.3125rem rgba(0,0,0,0.8); /* Adds a dark shadow to the text for readability. */
    white-space: nowrap; /* Prevents the text from wrapping to a new line. */
}

/* --- Playstyle Bar Colors --- */
/* This section defines the background colors for various playstyle tags. */
.playstyle-tag.playstyle-poke, .playstyle-tag.playstyle-ranged { background-color: #3498db; } /* Sets the background color for 'Poke' and 'Ranged' tags. */
.playstyle-tag.playstyle-dive { background-color: #e74c3c; } /* Sets the background color for 'Dive' tags. */
.playstyle-tag.playstyle-brawl, .playstyle-tag.playstyle-brawler { background-color: #9b59b6; } /* Sets the background color for 'Brawl' and 'Brawler' tags. */
.playstyle-tag.playstyle-flanker { background-color: #475569; } /* Sets the background color for 'Flanker' tags. */
.playstyle-tag.playstyle-marksman { background-color: #6366f1; } /* Sets the background color for 'Marksman' tags. */
.playstyle-tag.playstyle-area-control, .playstyle-tag.playstyle-area-denial, .playstyle-tag.playstyle-area-damage { background-color: #ec407a; } /* Sets the background color for area control/damage related tags. */
.playstyle-tag.playstyle-disruptor, .playstyle-tag.playstyle-disruption { background-color: #ff7043; } /* Sets the background color for disruptor tags. */
.playstyle-tag.playstyle-mobile { background-color: #26c6da; } /* Sets the background color for 'Mobile' tags. */
.playstyle-tag.playstyle-aerial, .playstyle-tag.playstyle-flight { background-color: #78909c; } /* Sets the background color for aerial/flight tags. */
.playstyle-tag.playstyle-high-burst, .playstyle-tag.playstyle-burst-damage { background-color: #ef5350; } /* Sets the background color for high burst damage tags. */
.playstyle-tag.playstyle-protector { background-color: #c08b51; } /* Sets the background color for 'Protector' tags. */
.playstyle-tag.playstyle-hybrid { background-color: #1abc9c; } /* Sets the background color for 'Hybrid' tags. */
.playstyle-tag.playstyle-anti-dive, .playstyle-tag.playstyle-anti-tank { background-color: #5a67c1; } /* Sets the background color for anti-dive/tank tags. */
.playstyle-tag.playstyle-anchor { background-color: #78909c; } /* Sets the background color for 'Anchor' tags. */
.playstyle-tag.playstyle-durable, .playstyle-tag.playstyle-durable-protector { background-color: #8392a2; } /* Sets the background color for durable/protector tags. */
.playstyle-tag.playstyle-high-sustain, .playstyle-tag.playstyle-sustain { background-color: #84cc16; } /* Sets the background color for high sustain tags. */
.playstyle-tag.playstyle-melee { background-color: #f57c00; } /* Sets the background color for 'Melee' tags. */
.playstyle-tag.playstyle-mid-range { background-color: #009688; } /* Sets the background color for 'Mid-range' tags. */
.playstyle-tag.playstyle-assassin { background-color: #5e35b1; } /* Sets the background color for 'Assassin' tags. */
.playstyle-tag.playstyle-skirmisher { background-color: #03a9f4; } /* Sets the background color for 'Skirmisher' tags. */
.playstyle-tag.playstyle-healer { background-color: #b3e5fc; color: #333; } /* Sets the background color for 'Healer' tags and changes text color for readability. */
.playstyle-tag.playstyle-damage-amplifier { background-color: #d81b60; } /* Sets the background color for 'Damage Amplifier' tags. */
.playstyle-tag.playstyle-crowd-control { background-color: #880e4f; } /* Sets the background color for 'Crowd Control' tags. */
.playstyle-tag.playstyle-freeze { background-color: #a7d8de; color: #333; } /* Sets the background color for 'Freeze' tags and changes text color for readability. */
.playstyle-tag.playstyle-mobile-support { background-color: #66bb6a; } /* Sets the background color for 'Mobile Support' tags. */
.playstyle-tag.playstyle-offensive-hybrid { background-color: #c62828; } /* Sets the background color for 'Offensive Hybrid' tags. */
.playstyle-tag.playstyle-sniper { background-color: #00695c; } /* Sets the background color for 'Sniper' tags. */
.playstyle-tag.playstyle-anti-healer, .playstyle-tag.playstyle-debuff { background-color: #4a148c; } /* Sets the background color for anti-healer/debuff tags. */
.playstyle-tag.playstyle-form-switcher { background-color: #8e24aa; } /* Sets the background color for 'Form Switcher' tags. */
.playstyle-tag.playstyle-damage-avoidance { background-color: #bdbdbd; color: #333; } /* Sets the background color for 'Damage Avoidance' tags and changes text color for readability. */

/* --- No Results State --- */
/* Defines the style for the message shown when no characters match the filters. */
.no-results-card {
  grid-column: 1 / -1; /* Makes the card span all columns of the grid. */
  background-color: var(--card-bg); /* Sets the background color. */
  border: 1px solid var(--border-color); /* Adds a border. */
  border-radius: 0.75rem; /* Rounds the corners. */
  padding: 3rem; /* Adds padding inside the card. */
  text-align: center; /* Centers the text. */
  color: var(--text-secondary); /* Sets the text color. */
  width: 100%; /* Ensures the card takes the full width. */
  margin-top: 2rem; /* Adds space above the card. */
}
/* Defines the style for the heading within the no-results card. */
.no-results-card h3 { color: var(--text-headings); font-size: 1.25rem; } /* Sets the color and font size for the heading. */
/* Hides the no-results card when the 'hidden' attribute is present. */
.no-results-card[hidden] { display: none; } /* Ensures the card is not visible when it should be hidden. */

/* --- Hide card logic --- */
/* Defines the style for hiding a character card. */
.hero-card-link.hidden { display: none; } /* Hides any character card that has the 'hidden' class. */

/* --- Responsive --- */
/* This section contains styles that apply only on smaller screens to make the layout responsive. */


/* Styles for tablets and smaller desktops (up to 992px wide). */
@media (max-width: 62rem) {
    .main-content-layout { 
        flex-direction: column; /* Stacks sidebar and content vertically on smaller screens. */
        gap: 0; /* Removes gap for full-width sidebar. */
    }
    .filters-sidebar { 
        width: 100%; /* Makes the sidebar take full width on smaller screens. */
        position: static; /* Removes fixed positioning on smaller screens. */
        height: auto; /* Allows sidebar to size to content. */
        border-right: none; /* Removes right border. */
        border-bottom: 1px solid var(--accent-cyan-faded); /* Adds bottom border instead. */
        box-shadow: 0 2px 1.25rem rgba(0, 255, 255, 0.1); /* Changes shadow to bottom. */
    }
    .characters-content {
        margin-left: 0; /* Removes left margin on smaller screens. */
        padding: 1rem 1rem 1rem 0; /* Reduces padding on smaller screens, no left padding. */
    }
    .character-grid { grid-template-columns: repeat(4, 200px); } /* Changes the character grid to have 4 fixed-width columns on tablets. */
    .hero-card { height: 280px; } /* Proportionally smaller cards on tablets. */
    .role-section-header { width: calc(4 * 200px + 3 * 1.25rem); } /* Matches the exact width of the character grid on tablets (4 cards + 3 gaps). */
    .page-header { max-width: calc(4 * 200px + 3 * 1.25rem); } /* Matches the character grid width on tablets. */
}

/* Styles for mobile devices (up to 576px wide). */
@media (max-width: 36rem) {
    .page-header h1 { font-size: 2.5rem; } /* Reduces the font size of the main page title. */
    .character-grid { grid-template-columns: repeat(3, 200px); gap: 1rem; } /* Changes the character grid to have 3 fixed-width columns on mobile. */
    .role-section-header { width: calc(3 * 200px + 2 * 1rem); } /* Matches the exact width of the character grid on mobile (3 cards + 2 gaps). */
    .page-header { max-width: calc(3 * 200px + 2 * 1rem); } /* Matches the character grid width on mobile. */
    .role-section-header h2 { font-size: 2.2rem; } /* Reduces the font size of the role section titles. */
    .role-section-header .role-icon { width: 2rem; height: 2rem; } /* Reduces the size of the role icons. */
    .filters-sidebar { 
        padding: 1rem; /* Reduces padding on mobile. */
    }
    .characters-content {
        padding: 0.5rem 0.5rem 0.5rem 0; /* Further reduces padding on mobile, no left padding. */
    }
    .filter-main-controls, 
    .filter-secondary-controls { 
        gap: 1rem; /* Reduces gap between filter groups on mobile. */
    }
    .hero-card { height: 240px; } /* Proportionally smaller cards on mobile. */
}