/* --------------------------------------------------------------------------
   BRAWL STARS ANALYTICS & SIMULATOR - DESIGN SYSTEM
   Grounded in the game's own comic-bold, star-and-gem visual language:
   warm ink-purple surfaces, Brawl Stars gold as the hero accent, chunky
   rounded display type, and hard offset "comic panel" shadows as the
   signature treatment instead of soft glassy glows.
   -------------------------------------------------------------------------- */

:root {
    /* The site is dark-only (no light theme), but native form controls
       (<select> dropdown lists, scrollbars) ignore our own CSS and render
       in the OS/browser's default light appearance unless told otherwise -
       most visible on a <select> with many options (e.g. the Rankings
       brawler picker), where the open list showed as a jarring white box.
       This single line makes Chromium/Firefox render every native control
       in dark mode to match the page around it. */
    color-scheme: dark;

    /* Color Palette */
    --bg-primary: #150f24;
    --bg-secondary: #1c1530;
    --bg-card: rgba(42, 33, 69, 0.55);
    --bg-hover: rgba(52, 42, 84, 0.85);

    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-glow: rgba(255, 196, 51, 0.2);

    --text-primary: #f5f1ff;
    --text-secondary: #a89bc9;
    --text-muted: #6f6390;

    /* Brawl Stars brand accents - gold is the hero accent (was generic cyan) */
    --accent-gold: #ffc433;
    --accent-gold-deep: #e8a100;
    --accent-pink: #ff3d81;
    --accent-cyan: #2fe0ff;
    --accent-blue: #5a7dff;
    --accent-green: #3ddc84;
    --accent-red: #ff4d5e;
    --accent-purple: #a55eea;
    --accent-orange: #ff8c3d;

    /* Brawl Stars Rarity Colors (authentic in-game coding, unchanged) */
    --rarity-common: #00c3ff;
    --rarity-rare: #34ff74;
    --rarity-super-rare: #5e72ff;
    --rarity-epic: #d850ff;
    --rarity-mythic: #ff2e74;
    --rarity-legendary: #ffcc00;

    /* Typography */
    --font-display: 'Baloo 2', sans-serif;
    --font-family: 'Inter', sans-serif;
    --font-family-mono: 'JetBrains Mono', monospace;

    /* Signature: comic-panel hard offset shadows instead of soft blur glows */
    --shadow-comic: 4px 4px 0 rgba(7, 4, 14, 0.5);
    --shadow-comic-sm: 3px 3px 0 rgba(7, 4, 14, 0.45);
    --shadow-comic-hover: 6px 6px 0 rgba(7, 4, 14, 0.55);
    --box-shadow-glow: 0 8px 32px 0 rgba(255, 196, 51, 0.06);
    --glass-blur: blur(14px);
    --radius: 14px;
}

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

/* :root's color-scheme:dark alone wasn't enough to darken every browser's
   native <select> popup (confirmed by a user screenshot still showing a
   white dropdown list after that fix) - color-scheme is only a hint some
   browsers partially ignore for the native option list specifically.
   Explicit colors on the options themselves are the reliable fix,
   independent of that hint - covers every <select> site-wide (Fuerza,
   Rankings' Brawler picker, the simulator's brawler/map/speed pickers),
   not just the one that was reported. */
select option {
    background-color: var(--bg-secondary);
    color: #ffffff;
}

body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(ellipse 900px 600px at 8% -10%, rgba(255, 196, 51, 0.10), transparent 60%),
        radial-gradient(ellipse 700px 500px at 100% 0%, rgba(255, 61, 129, 0.08), transparent 55%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-family);
    min-height: 100vh;
    overflow-x: hidden;
}

::selection {
    background: var(--accent-gold);
    color: #1a1228;
}

a {
    color: inherit;
}

/* Visible keyboard focus everywhere - accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.menu-item:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* App Container Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styling */
.sidebar {
    width: 280px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: fixed;
    height: 100vh;
    z-index: 10;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    text-decoration: none;
}

/* --- Sidebar search: lets you look up any tag from inside the app,
   without having to leave and come back through the landing page. --- */
.sidebar-search-form {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #171226;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0 4px 0 12px;
    margin-bottom: 6px;
    transition: border-color 0.15s ease;
}

.sidebar-search-form:focus-within {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(255, 196, 51, 0.15);
}

/* The generic input:focus-visible outline (see the accessibility-floor
   rule near the top of this file) draws a plain rectangle around the bare
   <input>, ignoring the pill-shaped wrapper it sits inside - looked like a
   stray box cutting across the rounded search bar. The gold border-color +
   glow on the wrapper above already gives an equally visible focus state
   that follows the pill's own shape, so suppress the mismatched outline
   here instead of stacking both. */
.sidebar-search-input:focus-visible {
    outline: none;
}

.sidebar-search-hash {
    color: var(--text-muted);
    font-weight: 700;
    font-family: var(--font-family-mono);
    font-size: 13px;
}

.sidebar-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 4px;
}

.sidebar-search-input::placeholder {
    color: var(--text-muted);
    text-transform: none;
    font-weight: 500;
}

.sidebar-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.sidebar-search-submit:hover {
    background-color: var(--bg-hover);
}

.sidebar-search-error {
    color: var(--accent-red);
    font-size: 11px;
    margin: 0 2px 18px;
    min-height: 1em;
}

.logo-icon {
    font-size: 26px;
    color: var(--accent-gold);
    text-shadow: 0 0 12px rgba(255, 196, 51, 0.55);
    animation: spark-spin 7s linear infinite;
}

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

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffe8a3, var(--accent-gold) 55%, var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
    position: relative;
}

.menu-item i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.menu-item:hover:not(.disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(2px);
}

.menu-item.active {
    color: #1a1228;
    background: linear-gradient(135deg, var(--accent-gold), #ffdb6e);
    border-color: transparent;
    font-weight: 700;
    box-shadow: var(--shadow-comic-sm);
}

.menu-item.active i {
    color: #1a1228;
}

.menu-item.active::before {
    display: none;
}

.menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.badge {
    position: absolute;
    right: 12px;
    font-size: 9px;
    padding: 2px 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
    font-weight: 600;
}

.menu-item.active .badge {
    background-color: rgba(26, 18, 40, 0.15);
    color: #1a1228;
}

.menu-item-badge {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--accent-red, #ff3d3d);
    margin-left: auto;
    box-shadow: 0 0 0 rgba(255, 61, 61, 0.5);
    animation: menu-item-badge-pulse 2s infinite;
}

@keyframes menu-item-badge-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 61, 61, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(255, 61, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 61, 61, 0); }
}

.update-pending-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 61, 61, 0.12), rgba(255, 180, 67, 0.08));
    border: 1px solid rgba(255, 61, 61, 0.3);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.update-pending-alert:hover {
    border-color: rgba(255, 61, 61, 0.55);
    transform: translateY(-1px);
}

.update-pending-alert > i:first-child {
    color: var(--accent-red, #ff3d3d);
    font-size: 18px;
    flex-shrink: 0;
}

.update-pending-alert-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.update-pending-alert-text strong {
    font-size: 13.5px;
    color: #ffffff;
}

.update-pending-alert-text span {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.update-pending-alert > i:last-child {
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.api-status {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

.status-dot-active {
    color: var(--accent-green);
    font-size: 10px;
    text-shadow: 0 0 6px var(--accent-green);
}

.version {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-family-mono);
}

.sidebar-disclaimer {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 8px;
}

.sidebar-disclaimer a {
    color: var(--text-muted);
    text-decoration: underline;
}

.sidebar-disclaimer a:hover {
    color: var(--text-secondary);
}

/* Main Content Area */
.main-content {
    margin-left: 280px;
    flex-grow: 1;
    min-width: 0;
    padding: 40px;
    min-height: 100vh;
}

/* Top Header */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 24px;
}

.header-title h1 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}

.header-title p {
    color: var(--text-secondary);
    font-size: 14px;
}

.api-token-indicator {
    padding: 8px 16px;
    background-color: rgba(255, 196, 51, 0.08);
    border: 1px solid rgba(255, 196, 51, 0.2);
    border-radius: 30px;
}

.token-status {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header right side: token indicator + auth area, grouped so
   justify-content:space-between on .top-header still puts the title on
   the left and everything else together on the right. */
.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* --- Auth: header area --- */
.auth-header-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 30px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-login-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
}

.auth-logged-in {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-welcome {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-premium-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-pink));
    border: none;
    color: #1a1228;
    padding: 8px 16px;
    border-radius: 30px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow-comic-sm);
    transition: transform 0.15s ease;
}

.auth-premium-btn:hover {
    transform: translateY(-1px);
}

.auth-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-logout-btn:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

/* --- Auth: modal (login / register) --- */
.auth-modal-content {
    max-width: 400px;
    padding: 36px 32px;
}

.auth-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-modal-icon {
    font-size: 28px;
    color: var(--accent-gold);
    margin-bottom: 12px;
    display: block;
}

.auth-modal-header h2 {
    font-family: var(--font-display);
    font-size: 22px;
    margin-bottom: 6px;
}

.auth-modal-header p {
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-google-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    /* min-height avoids a layout jump between the modal opening and GSI's
       async script finishing load + rendering the real button into this
       container (see initGoogleSignIn() in app.js). */
    min-height: 40px;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0 0 18px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border-color);
}

.auth-divider span {
    padding: 0 12px;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.auth-field input {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.auth-field input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(255, 196, 51, 0.15);
}

.auth-checkbox-field {
    margin-bottom: 16px;
}

.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-secondary);
    cursor: pointer;
}

.auth-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--accent-gold);
    cursor: pointer;
}

.auth-checkbox-label a {
    color: var(--text-secondary);
    text-decoration: underline;
}

.auth-error {
    font-size: 12.5px;
    color: var(--accent-red);
    background-color: rgba(255, 77, 94, 0.1);
    border: 1px solid rgba(255, 77, 94, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.auth-success {
    font-size: 12.5px;
    color: var(--accent-green);
    background-color: rgba(61, 220, 132, 0.1);
    border: 1px solid rgba(61, 220, 132, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-pink));
    border: none;
    border-radius: 10px;
    color: #1a1228;
    font-weight: 800;
    font-size: 14px;
    font-family: var(--font-family);
    cursor: pointer;
    box-shadow: var(--shadow-comic-sm);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
}

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-switch {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 18px;
}

.auth-switch a {
    color: var(--accent-gold);
    font-weight: 700;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .auth-welcome {
        display: none;
    }
}

/* Content Sections */
.content-section {
    display: none;
}

.content-section.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

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

/* Section Actions - flex-start (not space-between) so the search bar,
   level selector and rarity filters stay grouped together with a fixed
   gap at any viewport width, instead of getting stretched apart across
   the whole row on wide screens. */
.section-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.search-bar-container {
    position: relative;
    width: 320px;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
}

#brawler-search {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px 12px 46px;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

#brawler-search:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(255, 196, 51, 0.15);
}

.filter-group {
    display: flex;
    gap: 8px;
}

.filter-btn {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-family);
    transition: all 0.15s ease;
}

.filter-btn:hover {
    color: #ffffff;
    background-color: var(--bg-hover);
}

.filter-btn.active {
    background-color: var(--accent-gold);
    color: #1a1228;
    font-weight: 700;
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-comic-sm);
}

/* Class filter row - same base look as .filter-btn, but each button carries
   its own class color via --btn-color (set inline per button) instead of
   the single shared gold used for rarity, so the seven classes stay
   visually distinct at a glance. */
.filters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filters-row-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.filter-btn.class-btn.active {
    background-color: var(--btn-color, var(--accent-gold));
    color: #1a1228;
    font-weight: 700;
    border-color: var(--btn-color, var(--accent-gold));
    box-shadow: var(--shadow-comic-sm);
}

.filter-btn.class-btn i {
    margin-right: 5px;
}

/* Brawlers Grid */
/* auto-fill + minmax does the responsive work on its own - it naturally
   drops from N columns to N-1 as space shrinks, all the way down to 1 on
   phones, with no extra breakpoints to maintain as the layout evolves.
   (A fixed "force 1 column below 900px" media query used to override this,
   which meant tablets - very much still >900px-adjacent in portrait - got
   a single card stretched edge-to-edge instead of a proper 2-up grid.) */
.brawlers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    min-height: 200px;
}

/* Card Design - comic panel: solid surface, hard offset shadow, rarity ribbon */
.brawler-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-comic-sm);
}

.favorite-star {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.favorite-star:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
    transform: scale(1.08);
}

.favorite-star.favorited {
    color: var(--accent-gold);
    border-color: var(--accent-gold-deep);
}

.brawler-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--rarity-color, var(--accent-gold));
    box-shadow: 0 0 10px var(--rarity-color, var(--accent-gold));
}

.brawler-card:hover {
    transform: translate(-2px, -4px);
    border-color: var(--rarity-color, var(--border-strong));
    box-shadow: var(--shadow-comic-hover);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-title-group {
    display: flex;
    flex-direction: column;
}

/* Portrait pulled from Brawlify's CDN (same numeric brawler ID we already
   store) - makes the grid scannable by face, like the in-game roster,
   instead of by name text alone. Hidden automatically on 404 via onerror. */
.brawler-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid var(--rarity-color, var(--border-color));
    box-shadow: 0 0 10px rgba(var(--rarity-rgb, 255, 196, 51), 0.25);
    flex-shrink: 0;
}

.brawler-rarity {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rarity-color, var(--accent-gold));
}

.badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Class badge - tinted pill using the same --class-color set inline per
   card, so all seven classes read as distinct at a glance without adding
   another full-size color block competing with the rarity one. */
.brawler-class-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--class-color, var(--text-secondary));
    background-color: color-mix(in srgb, var(--class-color, var(--text-secondary)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--class-color, var(--text-secondary)) 40%, transparent);
    padding: 2px 7px;
    border-radius: 20px;
}

.brawler-class-badge i {
    font-size: 9px;
}

.brawler-name {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
    margin-top: 2px;
}

.card-body {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stats-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.preview-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.preview-stat i {
    width: 16px;
    text-align: center;
}

.preview-stat .fa-heart { color: var(--accent-red); }
.preview-stat .fa-burst { color: #ffa726; }
.preview-stat .fa-person-running { color: var(--accent-green); }
.preview-stat .fa-ruler { color: var(--accent-cyan); }

.stat-label-small {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stat-val-small {
    font-weight: 700;
    font-family: var(--font-family-mono);
}

/* Loader Styling */
.loader-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
    color: var(--text-secondary);
    gap: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 196, 51, 0.12);
    border-radius: 50%;
    border-top-color: var(--accent-gold);
    animation: spin 0.9s ease-in-out infinite;
}

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

/* Modal Windows */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 5, 16, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #201936;
    border: 2px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 8px 8px 0 rgba(5, 3, 10, 0.5), 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 20;
}

.modal-close:hover {
    background-color: var(--accent-red);
    color: #ffffff;
    border-color: var(--accent-red);
}

.modal-header {
    padding: 32px 32px 16px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

.modal-brawler-icon {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid var(--rarity-color, var(--border-color));
    box-shadow: 0 0 14px rgba(var(--rarity-rgb, 255, 196, 51), 0.3);
    flex-shrink: 0;
}

.modal-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--rarity-color, var(--accent-gold));
}

.modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brawler-rarity-badge {
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px;
    background-color: rgba(var(--rarity-rgb), 0.15);
    color: var(--rarity-color);
    border: 1px solid rgba(var(--rarity-rgb), 0.3);
}

.modal-brawler-name {
    font-family: var(--font-display);
    font-size: 33px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.modal-body {
    padding: 32px;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
}

/* The 32px padding everywhere in the modal is sized for desktop - on a
   phone it alone eats 64px+ of an already-tight ~350px-wide viewport
   before any actual content. Trimming it back gives every section below
   (stat tiles, ability cards, description) real room instead of fighting
   over what's left. */
@media (max-width: 480px) {
    .modal {
        padding: 10px;
    }

    .modal-header {
        padding: 20px 44px 14px 20px; /* extra right padding clears the close button */
        gap: 14px;
    }

    .modal-body {
        padding: 18px 20px;
    }

    .modal-brawler-icon {
        width: 60px;
        height: 60px;
    }

    .modal-brawler-name {
        font-size: 26px;
    }
}

.modal-brawler-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 28px;
    font-size: 15px;
}

/* Piloto de contenido editorial (2026-09-10) - análisis propio y original
   escrito a mano, no texto de sabor del juego. Solo existe para los pocos
   brawlers ya cargados en BRAWLER_ANALYSIS (brawler-analysis.js); oculto
   por defecto en el HTML y solo se muestra si hay texto para ese brawler
   (ver openBrawlerDetails en app.js). Si el piloto no funciona, basta con
   quitar este bloque + el de index.html + el script tag - no toca nada
   del resto de la ficha. */
.modal-brawler-analysis {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 28px;
}

.modal-brawler-analysis h4 {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-brawler-analysis p {
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: 14.5px;
    margin: 0;
}

/* Modal stats header (title + level selector). flex-wrap matters here: the
   heading + "Fuerza: Fuerza 11" selector don't both fit on one line under
   ~340px (narrow phones) - without it the select just overflows the modal
   instead of wrapping to its own line, dragging the whole modal into
   horizontal scrolling. */
.modal-stats-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 8px;
    margin-bottom: 14px;
}

.modal-stats-header h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-stats-header h3 i {
    color: var(--accent-gold);
}

.level-select-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.level-select-wrapper label {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.level-select-wrapper .level-select {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: #ffffff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

/* Compact at-a-glance stat grid - replaces the old 7-row progress-bar list */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

@media (max-width: 620px) {
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small phones: even 2-per-row is too tight for a value like
   "880 x 5 (Total: 4400)" to read comfortably once it wraps - full-width
   tiles give it room to breathe. */
@media (max-width: 400px) {
    .modal-stats-grid {
        grid-template-columns: 1fr;
    }
}

.modal-stat-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* grid items default to a content-based min-width, which
        stopped long values like "880 x 5 (Total: 4400)" from ever shrinking
        to the tile's actual grid column - the ellipsis on .modal-stat-tile-
        -value never kicked in, so the whole grid overflowed instead. */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
}

.modal-stat-tile i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.modal-stat-tile-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.modal-stat-tile-label {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* No truncation, anywhere - a stats simulator that ellipsis-hides part of a
   number (the "x5" multiplier, the "(Total: ...)") defeats its own purpose.
   Tiles this value doesn't fit in just grow taller instead. */
.modal-stat-tile-value {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text-primary);
}

/* Small hint icon next to ambiguous stat labels (e.g. "Carga Super") -
   hover/tap the tile for a native tooltip explaining what the number means. */
.modal-stat-tile-label .stat-tile-info-icon {
    font-size: 9px;
    width: auto;
    color: var(--text-muted);
    opacity: 0.7;
    cursor: help;
}

/* Hipercarga charge rate + universal buff, shown inline with the ability
   card instead of a separate stat tile (it's conditional, unlike the main
   grid which always applies). */
.hypercharge-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.hypercharge-info-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 0, 255, 0.06);
    border: 1px solid rgba(255, 0, 255, 0.2);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: help;
}

.hypercharge-info-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hypercharge-info-value {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: 13px;
    color: #ff00ff;
}

.hypercharge-info-value.hypercharge-buffs {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--text-secondary);
}

/* Tabs: Habilidades groups everything a brawler "does" (Gadgets, Star Powers,
   Hipercarga); Refuerzos (gear) is equipment, not an ability, so it moves
   behind its own tab that only appears when the brawler actually has one -
   instead of always rendering a forced-scroll column of every section. */
.modal-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
    padding-bottom: 4px;
}

.modal-tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.modal-tab-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.04);
}

.modal-tab-btn.active {
    color: var(--accent-gold);
    background-color: rgba(255, 196, 51, 0.08);
    box-shadow: inset 0 -3px 0 var(--accent-gold);
}

.modal-tab-panel {
    display: none;
}

.modal-tab-panel.active {
    display: block;
    animation: fadeIn 0.25s ease-out;
}

.modal-abilities-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

@media (max-width: 620px) {
    .modal-abilities-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Hipercarga sits below the Gadgets/Star Powers columns, in its own
   full-width row - only one exists per brawler, so it doesn't need a column
   of its own, but a top divider keeps it visually distinct from the pair. */
.modal-hypercharge-row {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ability-section h4 {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Abilities (Gadgets & Star Powers) */
.ability-section {
    margin-bottom: 24px;
}

.abilities-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ability-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* No background/border here on purpose - just a sizing/centering box for
   the bare icon (real Brawlify art or a FontAwesome glyph), floating on its
   own like the in-game icons do, not boxed inside a colored square/circle. */
.ability-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
}

/* Real Gadget/Star Power icon (borderless CDN variant - the bare icon
   graphic, no baked-in frame), layered over the generic FontAwesome
   fallback already inside the wrapper - a 404 just removes the <img>
   (onerror="this.remove()") and the fallback icon shows through.
   object-fit: contain (not cover) so the whole icon shows uncropped. */
.ability-icon-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gadget-icon-wrapper {
    color: var(--accent-green);
}

.starpower-icon-wrapper {
    color: var(--accent-gold);
}

.hypercharge-icon-wrapper {
    color: #ff00ff;
}

.ability-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.ability-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ability-name {
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
}

.ability-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Buffie note: a highlighted addition below an ability card's own
   description instead of replacing it - a Buffie enhances an ability, it
   doesn't rewrite it. Always visible (no toggle) - the real per-brawler
   Buffie portrait already sets it apart visually. */
.ability-desc-buffie {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8a123;
    background: rgba(255, 153, 0, 0.07);
    border-left: 2px solid #f8a123;
    padding: 6px 8px;
    border-radius: 0 6px 6px 0;
}

/* Real per-brawler Buffie art (~21 brawlers have one downloaded - see
   assets/buffie_icons/); the generic fa-cat icon next to the text still
   shows regardless, this just adds the actual companion portrait when we
   have it. onerror in buildAbilityCardHTML removes the <img> for the ~85
   brawlers without one, leaving just the generic icon + text as before. */
.buffie-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Live Rotation Strip - maps currently active in-game, shown side by side */
.live-rotation-panel {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 24px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-comic-sm);
    margin-bottom: 24px;
}

.live-rotation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.live-rotation-panel h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-rotation-panel h3 i {
    color: #ff4d4d;
}

.live-rotation-freshness {
    font-size: 11px;
    color: var(--text-muted);
}

.live-rotation-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.live-rotation-card {
    flex: 0 0 auto;
    width: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.live-rotation-card:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.live-rotation-card.active {
    background-color: rgba(255, 196, 51, 0.1);
    border-color: rgba(255, 196, 51, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 196, 51, 0.15);
}

.live-rotation-card .map-item-thumb {
    width: 72px;
    height: 72px;
}

.live-rotation-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    max-width: 100%;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em;
}

.live-rotation-time {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* Maps Module Layout */
.maps-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .maps-layout {
        grid-template-columns: 1fr;
    }
}

.maps-sidebar-panel {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-comic-sm);
}

.maps-sidebar-panel h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.maps-sidebar-panel h3 i {
    color: var(--accent-gold);
}

.map-search-bar-container {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}

.map-search-bar-container .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

#map-search {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px 10px 40px;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

#map-search:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(255, 196, 51, 0.15);
}

.map-mode-filter-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
}

.map-mode-filter-group .filter-btn {
    text-align: center;
}

.maps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 380px);
    overflow-y: auto;
    padding-right: 4px;
}

.map-item {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.map-item:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
    transform: translateX(4px);
}

.map-item.active {
    background-color: rgba(255, 196, 51, 0.1);
    border-color: rgba(255, 196, 51, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 196, 51, 0.15);
}

.map-item-thumb-wrapper {
    position: relative;
    flex-shrink: 0;
}

.map-item-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background-color: #0d0a18;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: block;
}

.map-item-thumb-wrapper .map-live-dot {
    position: absolute;
    top: -3px;
    right: -3px;
}

.map-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff4d4d;
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 6px rgba(255, 77, 77, 0.8);
    display: inline-block;
    animation: mapLivePulse 1.6s ease-in-out infinite;
}

@keyframes mapLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.map-live-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 12px;
    width: fit-content;
    border-radius: 30px;
    background-color: rgba(255, 77, 77, 0.12);
    border: 1px solid rgba(255, 77, 77, 0.35);
    color: #ffb3b3;
    font-size: 12px;
    font-weight: 700;
}

.map-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.map-item-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-item-mode {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 9px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

/* Real Brawl Stars game-mode icon shown inside mode badges (map list, live
   rotation, map detail) - see backend's /api/img/mode/{id} proxy. */
.mode-badge-icon {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.map-item-mode.atrapagemas { background-color: rgba(216, 80, 255, 0.18); color: #e59bff; }
.map-item-mode.balon-brawl { background-color: rgba(61, 220, 132, 0.18); color: #8ff0bb; }
.map-item-mode.caza-estelar { background-color: rgba(47, 224, 255, 0.18); color: #9cf0ff; }
.map-item-mode.noqueo { background-color: rgba(255, 92, 92, 0.18); color: #ffb3b3; }
.map-item-mode.zona-restringida { background-color: rgba(255, 180, 67, 0.18); color: #ffd199; }
.map-item-mode.supervivencia-solo { background-color: rgba(255, 61, 129, 0.18); color: #ff9dc0; }
.map-item-mode.supervivencia-duo { background-color: rgba(255, 122, 184, 0.18); color: #ffbcdd; }
.map-item-mode.supervivencia-trio { background-color: rgba(201, 61, 255, 0.18); color: #e3aeff; }
.map-item-mode.hockey-brawl { background-color: rgba(90, 200, 250, 0.18); color: #b3e6ff; }
.map-item-mode.arena { background-color: rgba(255, 217, 61, 0.18); color: #ffec99; }
.map-item-mode.atraco { background-color: rgba(77, 150, 255, 0.18); color: #a8c9ff; }
.map-item-mode.duelos { background-color: rgba(255, 77, 109, 0.18); color: #ffaebb; }
.map-item-mode.destruccion { background-color: rgba(162, 89, 255, 0.18); color: #d1aeff; }
.map-item-mode.brawloncesto { background-color: rgba(255, 140, 66, 0.18); color: #ffc499; }
.map-item-mode.voleibrawl { background-color: rgba(45, 224, 168, 0.18); color: #9df5da; }

/* Map Detail Panel */
.map-detail-panel {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-comic-sm);
}

.map-detail-empty {
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.map-detail-empty p {
    font-size: 15px;
}

.map-detail-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.map-detail-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 20px;
}

.map-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px;
    margin-bottom: 10px;
}

.map-mode-badge .mode-badge-icon {
    width: 16px;
    height: 16px;
}

/* Mode colors */
.map-mode-badge.atrapagemas { background-color: rgba(216, 80, 255, 0.18); color: #e59bff; border: 1px solid rgba(216, 80, 255, 0.35); }
.map-mode-badge.balon-brawl { background-color: rgba(61, 220, 132, 0.18); color: #8ff0bb; border: 1px solid rgba(61, 220, 132, 0.35); }
.map-mode-badge.caza-estelar { background-color: rgba(47, 224, 255, 0.18); color: #9cf0ff; border: 1px solid rgba(47, 224, 255, 0.35); }
.map-mode-badge.noqueo { background-color: rgba(255, 92, 92, 0.18); color: #ffb3b3; border: 1px solid rgba(255, 92, 92, 0.35); }
.map-mode-badge.zona-restringida { background-color: rgba(255, 180, 67, 0.18); color: #ffd199; border: 1px solid rgba(255, 180, 67, 0.35); }
.map-mode-badge.supervivencia { background-color: rgba(255, 61, 129, 0.18); color: #ff9dc0; border: 1px solid rgba(255, 61, 129, 0.35); }
.map-mode-badge.hockey-brawl { background-color: rgba(90, 200, 250, 0.18); color: #b3e6ff; border: 1px solid rgba(90, 200, 250, 0.35); }
.map-mode-badge.arena { background-color: rgba(255, 217, 61, 0.18); color: #ffec99; border: 1px solid rgba(255, 217, 61, 0.35); }

.map-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 8px;
}

/* Map Visual Panel - the real official map render, resolved server-side */
.map-visual-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.map-visual-panel h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-visual-panel h4 i {
    color: var(--accent-gold);
}

.map-image-wrapper {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: #0d0a18;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.map-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Map Stats Panel - best brawlers / most used / best teams for this map */
.map-stats-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 20px;
}

.map-stats-panel h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-stats-panel h4 i {
    color: var(--accent-gold);
}

.map-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 560px) {
    .map-stats-grid {
        grid-template-columns: 1fr;
    }
}

.map-stats-col h5,
.map-best-teams-block h5 {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.map-stats-col h5 i,
.map-best-teams-block h5 i {
    color: var(--accent-cyan);
}

.map-stats-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.map-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-stats-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: contain;
    background-color: rgba(255, 255, 255, 0.04);
}

.map-stats-name {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    width: 60px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-stats-bar-track {
    flex-grow: 1;
    height: 6px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.map-stats-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
}

.map-stats-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.map-teams-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-team-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
}

.map-team-rank {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-gold);
    width: 20px;
    flex-shrink: 0;
}

.map-team-icons {
    display: flex;
}

.map-team-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background-color: rgba(255, 255, 255, 0.06);
    object-fit: contain;
    margin-left: -8px;
}

.map-team-icon:first-child {
    margin-left: 0;
}

.map-team-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.map-team-winrate {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-green);
}

.map-team-picks {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* Meta Stats Table Layout */
.stats-container {
    padding: 32px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stats-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.stats-header-info h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-header-info p {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.mode-tab {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mode-tab:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.mode-tab.active {
    color: #0a0a0a;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    border-color: transparent;
}

.mode-selector-group {
    display: flex;
    gap: 8px;
}

.mode-filter-btn {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-family);
    font-weight: 600;
    transition: all 0.2s ease;
}

.mode-filter-btn:hover {
    color: #ffffff;
    background-color: var(--bg-hover);
}

.mode-filter-btn.active {
    background-color: var(--accent-gold);
    color: #1a1228;
    border-color: var(--accent-gold);
    font-weight: 700;
    box-shadow: var(--shadow-comic-sm);
}

.table-wrapper {
    overflow-x: auto;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.meta-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14.5px;
}

.meta-table th, .meta-table td {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.meta-table th {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.meta-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.meta-table th.sortable:hover {
    color: #ffffff;
}

.meta-table th.sortable i {
    margin-left: 6px;
    opacity: 0.6;
}

.meta-table th.active-sort {
    color: var(--accent-gold);
}

.meta-table th.active-sort i {
    opacity: 1;
}

.meta-table tbody tr {
    transition: background-color 0.2s ease;
}

.meta-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.meta-table tbody tr:last-child td {
    border-bottom: none;
}

/* Relative Performance Meter */
.relative-performance-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 160px;
}

.relative-performance-bar {
    height: 6px;
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.relative-performance-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent-pink), var(--accent-gold));
    box-shadow: 0 0 6px rgba(255, 196, 51, 0.3);
}

.relative-performance-val {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 700;
    width: 32px;
    text-align: right;
    color: #ffffff;
}

/* Esports Module Layout */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.team-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card:hover {
    background-color: var(--bg-hover);
    border-color: rgba(255, 196, 51, 0.3);
    transform: translateY(-3px);
    box-shadow: var(--shadow-comic-sm);
}

.team-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-color: rgba(255, 196, 51, 0.1);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(255, 196, 51, 0.2);
    text-shadow: 0 0 4px rgba(255, 196, 51, 0.4);
}

.team-info-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-name-text {
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
}

.team-region-text {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}

/* Simulator Module Layout */
.simulator-layout {
    display: flex;
    gap: 32px;
    align-items: stretch;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .simulator-layout {
        flex-direction: column;
    }

    .simulator-control-panel {
        width: 100% !important;
    }
}

.simulator-control-panel {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.setup-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setup-group label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sim-select {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-family: var(--font-family);
    outline: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sim-select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(255, 196, 51, 0.15);
}

.sim-select option {
    background-color: var(--bg-secondary);
    color: #ffffff;
}

.run-sim-btn:hover {
    filter: brightness(1.1);
    box-shadow: var(--shadow-comic-hover);
}

.run-sim-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* Playback Control button hovers */
.control-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--accent-gold) !important;
}

/* Winner Banner */
.winner-announcement.team-a {
    background-color: rgba(90, 125, 255, 0.12);
    border: 1px solid rgba(90, 125, 255, 0.35);
    color: #8fa6ff;
    box-shadow: 0 0 10px rgba(90, 125, 255, 0.1);
}

.winner-announcement.team-b {
    background-color: rgba(255, 61, 129, 0.12);
    border: 1px solid rgba(255, 61, 129, 0.35);
    color: var(--accent-pink);
    box-shadow: 0 0 10px rgba(255, 61, 129, 0.1);
}

/* Battle logs styling */
.log-entry {
    border-left: 3px solid transparent;
    padding-left: 10px;
    margin-bottom: 4px;
    word-break: break-word;
}

.log-entry.shoot-log {
    border-color: var(--accent-blue);
    color: #b0c2ff;
}

.log-entry.hit-log {
    border-color: #ffd54f;
    color: #ffe082;
}

.log-entry.kill-log {
    border-color: #ef5350;
    color: #ef5350;
    font-weight: 700;
}

.log-entry.heal-log {
    border-color: var(--accent-green);
    color: #8ff0bb;
}

.log-entry.victory-log {
    border-color: var(--accent-green);
    color: #8ff0bb;
    font-weight: 700;
    background-color: rgba(61, 220, 132, 0.06);
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 10px;
    border-left: 4px solid var(--accent-green);
}

.log-entry.system-log {
    color: var(--text-muted);
    font-style: italic;
}

/* Game Updates Module */
.update-entry {
    border-left: 3px solid var(--accent-gold);
    position: relative;
    padding: 4px 0 24px 20px;
    margin-bottom: 4px;
}

.update-entry::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 8px rgba(255, 196, 51, 0.6);
}

.update-entry-video-embed {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.update-entry-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.update-entry-image {
    display: block;
    width: 100%;
    max-width: 360px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.update-entry-date {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    margin-bottom: 4px;
}

.update-entry-title {
    font-family: var(--font-display);
    margin: 0 0 10px 0;
    font-size: 17px;
}

/* Progressive disclosure: clamp to 3 lines by default so the full history
   stays scannable - a long wall of text per entry was the whole complaint. */
.update-summary {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.update-summary.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.update-entry-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.update-expand-btn {
    background: none;
    border: none;
    color: var(--accent-gold);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.update-expand-btn:hover {
    text-decoration: underline;
}

.update-source-link {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.update-source-link:hover {
    color: var(--accent-cyan);
}

/* Mobile navigation - sidebar becomes an off-canvas panel below 900px */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--accent-gold);
    font-size: 18px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-comic-sm);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 5, 16, 0.65);
    backdrop-filter: blur(2px);
    z-index: 15;
}

@media (max-width: 900px) {
    .mobile-nav-toggle {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 20;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.4);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar.open ~ .sidebar-overlay,
    .sidebar-overlay.visible {
        display: block;
    }

    .main-content {
        margin-left: 0;
        padding: 24px 20px;
        padding-top: 76px;
    }

    .top-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .header-title h1 {
        font-size: 24px;
    }

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

    .section-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Generic panel shell used across sections - some panels (.teams-panel,
   .esports-stats-panel) rely on this alone with no dedicated selector of
   their own, so it needs full chrome, not just the shadow. */
.glass-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-comic-sm);
}

/* Honest "not real yet" placeholder - used instead of fabricating numbers
   wherever there's no real aggregated-battle-log data source to back a
   stat (meta win/pick/ban rates, per-map best brawlers/teams). */
.data-pending-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 28px 16px;
}

.data-pending-notice i {
    font-size: 26px;
    color: var(--accent-gold);
}

.data-pending-notice h5 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.map-stats-empty {
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 10px 0;
}

.map-stats-sample-note {
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 6px;
    margin-bottom: 14px;
}

.data-pending-notice p {
    color: var(--text-secondary);
    font-size: 13px;
    max-width: 440px;
    line-height: 1.5;
}

.teams-panel h3,
.esports-stats-panel h3,
.esports-tournaments-panel h3,
.esports-tournament-header h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.teams-panel h3 i,
.esports-stats-panel h3 i,
.esports-tournaments-panel h3 i {
    color: var(--accent-gold);
}

/* Real esports data (liquipedia.net/brawlstars sync) */
.esports-tournament-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.esports-tournament-item {
    font-family: inherit;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.15s ease;
}

.esports-tournament-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.esports-tournament-item.active {
    border-color: var(--accent-gold);
    background-color: rgba(255, 196, 51, 0.06);
}

.esports-official-badge {
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1a1228;
    background: linear-gradient(135deg, var(--accent-gold), #ffdb6e);
    padding: 2px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.esports-tournament-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
}

.esports-tournament-item-meta {
    font-size: 11.5px;
    color: var(--text-muted);
}

.esports-tournament-meta {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.esports-bracket-layout {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.esports-bracket {
    flex: 1 1 540px;
    max-width: 780px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Classic converging-lines tournament tree: one column per round, flex
   stretches every .bracket-round to the tallest round's height (round 1,
   the one with the most matches) so justify-content:space-around spreads
   each round's matches out evenly. The actual connector lines are drawn
   in JS (drawBracketConnectors in app.js) into .bracket-connectors, an
   absolutely-positioned overlay measured from real rendered match
   positions - a pure-CSS nth-child trick can't land correctly when a
   round has far fewer matches than its feeder round (the 1-match Grand
   Final being the case that broke it). */
.bracket-tree {
    display: flex;
    align-items: stretch;
    min-width: max-content;
    position: relative;
}

.bracket-connectors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bracket-connector-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.18);
}

.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 0 0 235px;
    position: relative;
    padding-top: 26px;
    z-index: 1;
}

.bracket-round-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 30px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-cyan);
}

.bracket-match {
    position: relative;
    margin: 10px 30px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bracket-match:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.bracket-match-active {
    border-color: var(--accent-cyan);
    background-color: rgba(72, 219, 251, 0.06);
}

.bracket-match-team {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 4px 0;
}

.bracket-match-team-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-match-team-score {
    font-family: var(--font-family-mono);
    color: var(--text-muted);
    flex-shrink: 0;
}

.bracket-match-winner {
    color: #ffffff;
}

.bracket-match-winner .bracket-match-team-score {
    color: var(--accent-green);
}

.esports-match-detail-panel {
    padding: 16px 20px;
    /* Docked beside the tree (see .esports-bracket-layout) instead of
       stretched full-width below it - without a cap, picks/bans used to
       sit in a 2-col grid spanning the page's full width, pushing team
       A's data to the left edge and team B's to the right edge with a
       dead gap in between. flex-basis/max-width keep it a bit larger
       than before while staying close in proportion to the tree next to it. */
    flex: 1 1 480px;
    max-width: 560px;
}

.esports-match-detail-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.esports-match-detail-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    flex-wrap: wrap;
}

.esports-match-detail-score {
    font-family: var(--font-family-mono);
    font-size: 17px;
    color: #ffffff;
    margin: 0 4px;
}

.esports-match-mvp {
    font-size: 11.5px;
    color: var(--accent-gold);
    margin-top: 6px;
}

@media (max-width: 860px) {
    .bracket-round {
        flex: 0 0 170px;
    }

    .bracket-match {
        margin: 8px 20px;
    }

    .bracket-connectors {
        display: none;
    }
}

.esports-match-games {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.esports-game-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    padding: 6px 0;
}

.esports-game-row + .esports-game-row {
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.esports-game-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.esports-game-map {
    color: var(--text-secondary);
}

.esports-game-mode {
    color: var(--text-muted);
}

.esports-game-score {
    font-family: var(--font-family-mono);
    color: #ffffff;
    font-weight: 700;
    flex-shrink: 0;
}

.esports-game-row-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.esports-game-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.esports-game-picks-b {
    justify-content: flex-end;
}

.esports-game-row-bans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.esports-game-bans {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.esports-game-row-bans .esports-game-bans:last-child {
    justify-content: flex-end;
}

.esports-brawler-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    text-transform: capitalize;
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1.6;
}

.esports-brawler-chip img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 3px;
}

.esports-brawler-chip-banned {
    background-color: rgba(255, 71, 87, 0.08);
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 71, 87, 0.4);
}

.esports-brawler-chip-banned img {
    filter: grayscale(1);
    opacity: 0.6;
}

.esports-brawler-stats-block,
.esports-map-stats-block {
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 20px;
}

.esports-brawler-stats-block h4,
.esports-map-stats-block h4 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.esports-brawler-stats-block h4 i,
.esports-map-stats-block h4 i {
    color: var(--accent-cyan);
}

.esports-team-logo {
    object-fit: contain;
    border-radius: 4px;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.04);
}

.esports-brawler-row {
    cursor: pointer;
}

/* Club name inside a player ranking row - a real link to /club/{tag},
   nested inside a row that itself links to /player/{tag} (see
   data-stop-row-click in app.js's wireRankingRowLinks). */
.rankings-club-link {
    color: var(--accent-cyan);
    text-decoration: none;
}

.rankings-club-link:hover {
    text-decoration: underline;
}

.esports-brawler-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.esports-row-caret {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    width: 10px;
}

.esports-brawler-row-open .esports-row-caret {
    transform: rotate(90deg);
    color: var(--accent-cyan);
}

.esports-brawler-detail-row td {
    padding: 0;
    background-color: rgba(255, 255, 255, 0.02);
}

.esports-brawler-detail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 16px 20px;
}

.esports-brawler-detail h5 {
    margin: 0 0 10px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.esports-detail-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.esports-detail-mode-name {
    color: var(--text-secondary);
}

.esports-detail-mode-record,
.esports-detail-mode-wr {
    font-family: var(--font-family-mono);
    white-space: nowrap;
}

.esports-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esports-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.esports-detail-chip img {
    height: 14px;
    width: auto;
    max-width: 30px;
    object-fit: contain;
    border-radius: 3px;
}

.esports-detail-chip em {
    font-style: normal;
    color: var(--text-muted);
    font-family: var(--font-family-mono);
}

.esports-detail-empty {
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .esports-brawler-detail {
        grid-template-columns: 1fr;
    }
}

.esports-team-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50%;
    font-weight: 800;
    flex-shrink: 0;
}

.esports-wr-bar-track {
    height: 4px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 3px;
    min-width: 60px;
}

.esports-wr-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.esports-rosters-block {
    margin-top: 20px;
}

.esports-rosters-block h4 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.esports-rosters-block h4 i {
    color: var(--accent-gold);
}

.esports-rosters-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.esports-roster-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
}

.esports-roster-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.esports-roster-team-name {
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
}

.esports-roster-players {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esports-roster-player {
    font-size: 11.5px;
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.04);
    padding: 3px 8px;
    border-radius: 6px;
}

@media (max-width: 860px) {
    .esports-game-row-picks,
    .esports-game-row-bans {
        grid-template-columns: 1fr;
    }

    .esports-game-picks-b,
    .esports-game-row-bans .esports-game-bans:last-child {
        justify-content: flex-start;
    }
}

/* Mi seguimiento (linked player + daily trophy history) */
.tracking-note { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.tracking-panel { max-width: 520px; }
.tracking-panel p { color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.tracking-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.tracking-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent-gold); }
.tracking-consent a { color: var(--accent-cyan); }
.tracking-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tracking-header h4 { font-size: 20px; color: var(--text-primary); margin: 0; }
.tracking-unlink-btn { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-family); }
.tracking-unlink-btn:hover { color: var(--accent-red); border-color: var(--accent-red); }
.tracking-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tracking-stat-sub { font-size: 11px; color: var(--text-muted); }
.tracking-stat { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tracking-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tracking-stat-value { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.tracking-stat-value.positive { color: var(--accent-green); }
.tracking-stat-value.negative { color: var(--accent-red); }
.tracking-chart-wrap { position: relative; height: 320px; }
@media (max-width: 600px) {
    .tracking-summary { grid-template-columns: 1fr; }
    .tracking-chart-wrap { height: 260px; }
}

/* Confirmation toast after register/login */
.auth-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); max-width: min(92vw, 460px); background: var(--bg-secondary); border: 1px solid var(--accent-green); color: var(--text-primary); padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 10000; text-align: center; }
.auth-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* "Revisa tu correo" view of the auth modal (shown after sign-up / login before verifying) */
.verify-email-address { text-align: center; font-weight: 800; font-size: 16px; color: var(--accent-gold); word-break: break-all; margin: 4px 0 14px; }
.auth-hint { color: var(--text-secondary); font-size: 13px; line-height: 1.5; text-align: center; margin: 0 0 14px; }

/* Mi cuenta */
.account-rows { display: flex; flex-direction: column; margin-bottom: 20px; max-width: 560px; }
.account-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; }
.account-label { color: var(--text-muted); font-weight: 600; }
.account-value { color: var(--text-primary); font-weight: 600; text-align: right; word-break: break-all; }
.account-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.account-actions a.tracking-unlink-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.account-danger { margin-top: 32px; padding: 18px; border: 1px solid rgba(255, 77, 94, 0.4); border-radius: 12px; max-width: 560px; }
.account-danger h4 { margin: 0 0 6px; color: var(--accent-red); font-size: 16px; }
.account-danger form { margin-top: 14px; }
.account-danger-btn { margin-top: 12px; background: none; border: 1px solid var(--accent-red); color: var(--accent-red); padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-family); }
.account-danger-btn:hover:not(:disabled) { background: rgba(255, 77, 94, 0.12); }
.account-danger-btn-solid { background: var(--accent-red); color: #fff; }
.account-danger-btn-solid:hover:not(:disabled) { background: var(--accent-red); filter: brightness(1.1); }
.account-danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Mi cuenta: security block and inline forms */
.account-block { margin-top: 28px; max-width: 560px; }
.account-block h4 { margin: 0 0 6px; color: var(--text-primary); font-size: 16px; }
.account-form { max-width: 420px; margin: 14px 0 6px; }

.tracking-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Premium plan badge (header + Mi seguimiento) */
.auth-plan-badge { display: flex; align-items: center; gap: 5px; background: linear-gradient(90deg, var(--accent-gold), var(--accent-pink)); color: #1a1228; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; padding: 5px 10px; border-radius: 20px; white-space: nowrap; }
.tracking-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Mi seguimiento: Partidas recientes (Premium) */
.tracking-battles-block { margin-top: 28px; }
.tracking-battles-block h4 { font-size: 16px; color: var(--text-primary); margin: 0 0 10px; }
.tracking-upsell { display: flex; align-items: flex-start; gap: 12px; background: rgba(255, 196, 51, 0.08); border: 1px solid rgba(255, 196, 51, 0.25); border-radius: 12px; padding: 14px 16px; }
.tracking-upsell i { color: var(--accent-gold); font-size: 18px; margin-top: 2px; }
.tracking-upsell p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.tracking-battles-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tracking-battles-table th { text-align: left; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.tracking-battles-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--text-primary); white-space: nowrap; }
.tracking-battles-table td.positive { color: var(--accent-green); font-weight: 700; }
.tracking-battles-table td.negative { color: var(--accent-red); font-weight: 700; }