/* ============================================================================
   BUSH BUDDY — "THE HEXTECH GROVE" DESIGN LAYER
   ----------------------------------------------------------------------------
   Loaded after styles.css. Everything here is derived from each theme's own
   tokens (via color-mix), so all eleven themes get the same treatment: layered
   atmosphere, glass surfaces with gradient hairlines, serif-cap display type,
   and player-colored accents. Remove the <link> in index.html to roll back.
   ============================================================================ */

:root {
    /* Grove pairing: chunky, characterful titles; condensed scoreboard numbers
       and labels; a friendly sans for everything else. */
    --font-title: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* The legacy sheet references --border-radius everywhere but never defined
       it, which quietly squared every corner. */
    --border-radius: 12px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    --bush: var(--color-win);
    --ink: var(--text-primary);
    --ink-dim: var(--text-secondary);
    --ink-faint: color-mix(in srgb, var(--text-secondary) 70%, transparent);

    --glass: color-mix(in srgb, var(--bg-surface) 74%, transparent);
    --glass-strong: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    --glass-deep: color-mix(in srgb, var(--bg-darker) 70%, transparent);
    --hairline: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --hairline-strong: color-mix(in srgb, var(--text-primary) 16%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
    --bush-wash: color-mix(in srgb, var(--bush) 12%, transparent);
    --sheen: color-mix(in srgb, #ffffff 7%, transparent);

    --shadow-ink: rgba(0, 0, 0, 0.55);
    --shadow-lift: 0 1px 0 var(--sheen) inset, 0 22px 44px -22px var(--shadow-ink), 0 3px 10px -4px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 1px 0 var(--sheen) inset, 0 30px 60px -24px var(--shadow-ink), 0 0 0 1px var(--accent-line), 0 0 36px -8px var(--accent-glow);

    --title-gradient: linear-gradient(120deg, var(--text-white) 0%, var(--accent-light) 38%, var(--accent) 100%);
    --brand-gradient: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--bush) 130%);

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light themes: gentler shadows, crisper glass. */
[data-theme="classic-light"],
[data-theme="catppuccin-latte"] {
    --shadow-ink: rgba(15, 23, 42, 0.16);
    --glass: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    --hairline: color-mix(in srgb, var(--text-primary) 12%, transparent);
    --sheen: rgba(255, 255, 255, 0.9);
    --title-gradient: linear-gradient(120deg, var(--text-primary) 0%, var(--accent-dark) 55%, var(--accent) 100%);
    --brand-gradient: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 60%, var(--bush) 140%);
}

/* ---------------------------------------------------------------------------
   ATMOSPHERE: aurora washes, hextech lattice, grain, fireflies
   --------------------------------------------------------------------------- */
html { background: var(--bg-darker); }

body {
    background:
        radial-gradient(1100px 680px at 88% -12%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%),
        radial-gradient(900px 620px at 4% 108%, color-mix(in srgb, var(--bush) 13%, transparent), transparent 60%),
        radial-gradient(760px 520px at 46% 38%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%),
        var(--bg-darker);
    background-attachment: fixed;
    letter-spacing: 0.005em;
}

/* Hextech lattice, tinted by the theme accent through a mask. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--accent);
    opacity: 0.045;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z M28 63v35' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 56px 98px repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z M28 63v35' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 56px 98px repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z M28 63v35' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(ellipse at 70% 0%, #000 0%, transparent 75%);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z M28 63v35' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(ellipse at 70% 0%, #000 0%, transparent 75%);
    -webkit-mask-size: 56px 98px, 100% 100%;
            mask-size: 56px 98px, 100% 100%;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

/* Film grain keeps the big gradients from banding and adds tactility. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.portal-wrapper { position: relative; z-index: 1; }

.fireflies {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.fireflies span {
    position: absolute;
    bottom: -12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bush) 80%, #fff);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--bush) 60%, transparent);
    opacity: 0;
    animation: firefly-rise var(--dur, 22s) linear infinite;
    animation-delay: var(--delay, 0s);
    left: var(--x, 50%);
}
.fireflies span:nth-child(3n) {
    background: color-mix(in srgb, var(--accent) 80%, #fff);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
@keyframes firefly-rise {
    0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    10%  { opacity: 0.8; }
    50%  { transform: translate3d(var(--drift, 40px), -52vh, 0) scale(1); opacity: 0.55; }
    85%  { opacity: 0.7; }
    100% { transform: translate3d(calc(var(--drift, 40px) * -0.6), -105vh, 0) scale(0.7); opacity: 0; }
}
[data-theme="classic-light"] .fireflies,
[data-theme="catppuccin-latte"] .fireflies { opacity: 0.55; }

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

::selection { background: var(--accent-glow); color: var(--text-white); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
* { scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent; scrollbar-width: thin; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   SIDEBAR — glass rail
   --------------------------------------------------------------------------- */
.sidebar {
    width: 268px;
    padding: 22px 16px 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 22%),
        color-mix(in srgb, var(--bg-dark) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
            backdrop-filter: blur(20px) saturate(1.25);
    border-right: 1px solid var(--hairline);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent) 10%, transparent), 12px 0 40px -30px var(--shadow-ink);
    gap: 4px;
}

.brand {
    position: relative;
    gap: 12px;
    margin: 0 4px 18px;
    padding: 6px 6px 18px;
    border-bottom: none;
    cursor: pointer;
}
.brand::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.brand:hover { opacity: 1; }
.logo-emoji {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--bush) 28%, transparent), transparent 70%),
        color-mix(in srgb, var(--bg-surface) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--bush) 40%, transparent);
    box-shadow: 0 0 24px -6px color-mix(in srgb, var(--bush) 70%, transparent), inset 0 1px 0 var(--sheen);
    filter: none;
    animation: crest-breathe 5s ease-in-out infinite;
}
.brand-mark-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--bush);
    fill: color-mix(in srgb, var(--bush) 18%, transparent);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bush) 60%, transparent));
}
@keyframes crest-breathe {
    0%, 100% { box-shadow: 0 0 22px -8px color-mix(in srgb, var(--bush) 70%, transparent), inset 0 1px 0 var(--sheen); }
    50%      { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--bush) 85%, transparent), inset 0 1px 0 var(--sheen); }
}
.brand-text h2 {
    font-family: var(--font-title);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.1;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-text .version {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    border: 1px solid var(--hairline);
    border-radius: 99px;
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
}

.nav-menu { gap: 3px; margin-bottom: 18px; }
.nav-item {
    position: relative;
    gap: 12px;
    padding: 7px 10px 7px 7px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    color: var(--ink-dim);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms, transform 180ms var(--ease-out);
}
.nav-item .icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border: 1px solid var(--hairline);
    transition: inherit;
}
.nav-item:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-color: transparent;
    transform: translateX(2px);
}
.nav-item:hover .icon { color: var(--accent); border-color: var(--accent-line); }
.nav-item.active {
    color: var(--ink);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow: 0 8px 24px -14px var(--accent-glow);
}
.nav-item.active .icon {
    color: var(--bg-darker);
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 0 16px -2px var(--accent-glow);
}
.nav-item.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 4px;
    height: 22px;
    translate: 0 -50%;
    border-radius: 0 4px 4px 0;
    background: var(--brand-gradient);
    box-shadow: 0 0 14px var(--accent);
}

.sidebar-profiles-section { gap: 6px; margin-bottom: 14px; padding: 0 2px; }
.sidebar-section-title,
.theme-toggle-title,
.sync-title {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    opacity: 1;
    padding: 0 8px;
    margin-bottom: 2px;
}
.sidebar-summoner-list { gap: 2px; }
.sidebar-summoner-btn {
    position: relative;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--ink-dim);
    font-weight: 600;
    font-size: 0.84rem;
    transition: background 160ms var(--ease-out), color 160ms, transform 160ms var(--ease-out);
}
.sidebar-summoner-btn:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--player-color, var(--accent)) 10%, transparent);
    transform: translateX(2px);
}
.sidebar-summoner-btn.active {
    color: var(--ink);
    background: linear-gradient(90deg, color-mix(in srgb, var(--player-color, var(--accent)) 22%, transparent), transparent);
    border: 1px solid color-mix(in srgb, var(--player-color, var(--accent)) 35%, transparent);
    box-shadow: none;
}
.p-winrate-micro {
    font-family: var(--font-num);
    font-size: 0.78rem;
    padding: 1px 7px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--bush) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bush) 25%, transparent);
}

/* Player avatars: a summoner icon inside a ring of the player's color. */
.p-avatar {
    --size: 28px;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--size);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 210deg, var(--player-color, var(--accent)), color-mix(in srgb, var(--player-color, var(--accent)) 30%, transparent), var(--player-color, var(--accent)));
    box-shadow: 0 0 12px -3px var(--player-color, var(--accent));
}
.p-avatar img,
.p-avatar .profile-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--bg-darker);
    border: 1.5px solid var(--bg-darker);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: calc(var(--size) * 0.42);
    color: var(--player-color, var(--accent));
}
.p-avatar.lg { --size: 44px; }
.p-avatar.xl { --size: 64px; }

.theme-toggle-section,
.sync-status {
    margin: 0 2px 8px;
    padding: 12px;
    background: color-mix(in srgb, var(--bg-surface) 55%, transparent);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}
.sync-status { margin-top: 0; margin-bottom: 0; }
.theme-select {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--hairline-strong);
    background-color: color-mix(in srgb, var(--bg-darker) 70%, transparent);
    color: var(--ink);
    font-weight: 600;
}
.pulse-container { margin: 4px 0 0; padding: 0 8px; font-size: 0.8rem; color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   MAIN + PAGE HEROES
   --------------------------------------------------------------------------- */
.main-content {
    padding: 28px 36px 60px;
    scroll-behavior: smooth;
}
.tab-panel.active { animation: panel-in 520ms var(--ease-out); }
@keyframes panel-in {
    from { opacity: 0; transform: translateY(10px) scale(0.995); filter: blur(2px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.tab-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 30px 34px 28px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    background:
        radial-gradient(600px 240px at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
        radial-gradient(420px 260px at 100% 120%, color-mix(in srgb, var(--bush) 14%, transparent), transparent 70%),
        linear-gradient(135deg, var(--glass-strong), color-mix(in srgb, var(--bg-dark) 70%, transparent));
    box-shadow: var(--shadow-lift);
    isolation: isolate;
}
/* Kicker above every page title. */
.tab-header::before {
    content: "Bush Buddy";
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
}
/* Crest watermark, tinted by the theme through a mask. */
.tab-header::after {
    content: "";
    position: absolute;
    right: -28px;
    top: 50%;
    width: 260px;
    height: 260px;
    translate: 0 -50%;
    z-index: -1;
    background: var(--brand-gradient);
    opacity: 0.1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C9 15 9 9 12 3c3 6 3 12 0 18Z'/%3E%3Cpath d='M12 12C8 8 5 7 2 8c1 4 4 6 10 7'/%3E%3Cpath d='M12 12c4-4 7-5 10-4-1 4-4 6-10 7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C9 15 9 9 12 3c3 6 3 12 0 18Z'/%3E%3Cpath d='M12 12C8 8 5 7 2 8c1 4 4 6 10 7'/%3E%3Cpath d='M12 12c4-4 7-5 10-4-1 4-4 6-10 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(-8deg);
}
.tab-header h1 {
    font-family: var(--font-title);
    font-size: clamp(2rem, 2.6vw + 0.8rem, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    gap: 14px;
    background: var(--title-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.tab-header h1 .ui-icon {
    width: 1.1em;
    height: 1.1em;
    padding: 0.22em;
    box-sizing: content-box;
    border-radius: 14px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid var(--accent-line);
    box-shadow: 0 0 22px -6px var(--accent-glow);
    stroke-width: 1.7;
    font-size: 0.62em;
}
.tab-subtitle {
    max-width: 68ch;
    margin-top: 8px;
    font-size: 0.98rem;
    color: var(--ink-dim);
}

/* ---------------------------------------------------------------------------
   SHARED PANEL LANGUAGE
   --------------------------------------------------------------------------- */
.chart-container-wrapper,
.leaderboard-panel,
.june-challenge-panel,
.hall-of-fame-panel,
.recent-shared-matches,
.card {
    position: relative;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-white) 3%, transparent), transparent 120px),
        var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
}

.chart-container-wrapper h3,
.leaderboard-panel h3,
.recent-shared-matches h3,
.hof-header h3,
.june-challenge-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: none;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.chart-container-wrapper h3 .ui-icon,
.leaderboard-panel h3 .ui-icon,
.recent-shared-matches h3 .ui-icon,
.hof-header h3 .ui-icon,
.june-challenge-header h3 .ui-icon {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0.42rem;
    box-sizing: border-box;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
}

/* ---------------------------------------------------------------------------
   RECORD TILES (dashboard metrics)
   --------------------------------------------------------------------------- */
.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.metric-card {
    --tile: var(--accent);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 168px;
    padding: 20px 20px 18px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background:
        radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--tile) 26%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--tile) 8%, transparent), transparent 55%),
        var(--glass);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lift);
    transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms;
}
.metric-card.gold-border,
.metric-card.red-border,
.metric-card.blue-border,
.metric-card.purple-border { border-left: 1px solid var(--hairline); }
.metric-card.gold-border { --tile: var(--accent); }
.metric-card.red-border { --tile: var(--color-loss); }
.metric-card.blue-border { --tile: var(--color-accent); }
.metric-card.purple-border { --tile: #a855f7; }
/* A top edge of light in the tile's color. */
.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tile), transparent);
    opacity: 0.9;
}
/* Shine sweep on hover. */
.metric-card::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -60%;
    width: 45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, #fff 16%, transparent), transparent);
    transform: skewX(-18deg) translateX(0);
    opacity: 0;
}
.metric-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tile) 45%, transparent);
    box-shadow: 0 1px 0 var(--sheen) inset, 0 28px 50px -26px var(--shadow-ink), 0 0 42px -14px var(--tile);
}
.metric-card:hover::after { opacity: 1; animation: tile-shine 900ms var(--ease-out); }
@keyframes tile-shine { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(420%); } }

.metric-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--tile);
    background: color-mix(in srgb, var(--tile) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tile) 35%, transparent);
    box-shadow: 0 0 22px -6px var(--tile);
}
.metric-icon .ui-icon { width: 1.3rem; height: 1.3rem; }
.metric-data { flex: 1; min-width: 0; }
.metric-label {
    order: -1;
    margin: 0 52px 10px 0;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink-dim);
    line-height: 1.3;
}
.metric-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-num);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--text-white);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 30px color-mix(in srgb, var(--tile) 45%, transparent);
}
[data-theme="classic-light"] .metric-value,
[data-theme="catppuccin-latte"] .metric-value { color: var(--text-primary); text-shadow: none; }
.metric-unit {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tile);
}
.metric-sub {
    margin-top: auto;
    padding-top: 14px;
    font-size: 0.8rem;
    color: var(--ink-dim);
    font-weight: 500;
}

/* Record holder chip (used by tiles and boards). */
.holder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 3px 10px 3px 3px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--player-color, var(--accent)) 35%, transparent);
    background: color-mix(in srgb, var(--player-color, var(--accent)) 10%, transparent);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms, transform 160ms var(--ease-out);
}
.holder-chip:hover { background: color-mix(in srgb, var(--player-color, var(--accent)) 20%, transparent); transform: translateY(-1px); }
.holder-chip .p-avatar { --size: 24px; }
.holder-chip .holder-name { color: var(--ink); font-weight: 700; }
.holder-chip .holder-detail { color: var(--ink-dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Brand lockup stays on one line in the rail. */
.brand-text h2 { font-size: 1.32rem; letter-spacing: -0.02em; white-space: nowrap; }
.tab-header[data-kicker]::before { content: attr(data-kicker); }
.tab-header::before { padding-left: 26px; background: linear-gradient(90deg, var(--accent), var(--accent)) 0 50% / 18px 1px no-repeat; }

/* ---------------------------------------------------------------------------
   CONTEST PANELS (September Showdown + friends)
   --------------------------------------------------------------------------- */
.june-challenge-panel {
    margin: 0 0 14px;
    padding: 24px 24px 20px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background:
        radial-gradient(700px 260px at 0% 0%, color-mix(in srgb, var(--challenge-accent, var(--accent)) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--text-white) 3%, transparent), transparent 140px),
        var(--glass);
}
.june-challenge-header {
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: none;
}
.june-challenge-header h3 { font-size: 1.05rem; color: var(--ink); }
.june-challenge-header h3 .ui-icon {
    color: var(--challenge-accent, var(--accent));
    background: color-mix(in srgb, var(--challenge-accent, var(--accent)) 14%, transparent);
    border-color: color-mix(in srgb, var(--challenge-accent, var(--accent)) 45%, transparent);
    box-shadow: 0 0 20px -6px var(--challenge-accent, var(--accent));
}
.june-challenge-header p { margin-top: 6px; color: var(--ink-dim); font-size: 0.88rem; }
.june-challenge-total {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--challenge-accent, var(--accent)) 45%, transparent);
    background: color-mix(in srgb, var(--challenge-accent, var(--accent)) 12%, transparent);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.june-challenge-panel.contest-live .june-challenge-total::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--challenge-accent, var(--accent));
    box-shadow: 0 0 0 0 var(--challenge-accent, var(--accent));
    animation: live-ping 1.8s ease-out infinite;
}
@keyframes live-ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, var(--challenge-accent, var(--color-loss))); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.june-challenge-panel.contest-live::before { height: 2px; }

.june-challenge-board { gap: 6px; }
.june-challenge-row {
    position: relative;
    overflow: hidden;
    padding: 10px 16px 12px 10px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    transition: transform 200ms var(--ease-out), border-color 200ms, background 200ms;
}
.june-challenge-row:hover {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--player-color, var(--accent)) 45%, transparent);
    background: color-mix(in srgb, var(--player-color, var(--accent)) 8%, var(--glass));
}
.june-challenge-row.september-challenge-row,
.june-challenge-row.bloodtober-row,
.june-challenge-row.assist-row {
    grid-template-columns: 38px 44px minmax(120px, 190px) minmax(0, 1fr) 64px;
    gap: 14px;
}
.june-challenge-row.leader {
    border-color: color-mix(in srgb, var(--challenge-accent, var(--accent)) 55%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--challenge-accent, var(--accent)) 20%, transparent), transparent 55%),
        color-mix(in srgb, var(--bg-surface) 60%, transparent);
    box-shadow: 0 0 34px -14px var(--challenge-accent, var(--accent));
}

/* Rank medals: gold, silver, bronze for the podium. */
.june-challenge-rank { display: grid; place-items: center; }
.june-challenge-rank span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-family: var(--font-num);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-dim);
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--bg-darker) 60%, transparent);
}
.podium-1 .june-challenge-rank span,
.podium-2 .june-challenge-rank span,
.podium-3 .june-challenge-rank span {
    color: #1a1204;
    border: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal) 35%, transparent), 0 0 18px -2px var(--medal), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle at 35% 30%, #fff8 0%, transparent 45%), linear-gradient(145deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #000));
}
.podium-1 { --medal: #f7c948; }
.podium-2 { --medal: #cfd8e3; }
.podium-3 { --medal: #d98a4b; }

.june-challenge-player button {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}
.june-challenge-player button:hover { color: var(--player-color, var(--accent)); }
.june-challenge-player span { font-size: 0.74rem; color: var(--ink-faint); }

.champ-pool-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    cursor: help;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.champ-pool-strip.empty {
    cursor: default;
    color: var(--ink-faint);
    font-size: 0.78rem;
    font-style: italic;
    -webkit-mask-image: none;
            mask-image: none;
}
.pool-champ-img {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6);
    transition: transform 180ms var(--ease-spring);
}
span.pool-champ-img {
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink-dim);
    background: var(--bg-surface-light);
}
.champ-pool-strip:hover .pool-champ-img { transform: translateY(-2px); }
.pool-more {
    flex: 0 0 auto;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0 9px;
    border-radius: 9px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink);
    border: 1px dashed var(--hairline-strong);
}
.june-challenge-kills { align-items: flex-end; }
.june-challenge-kills strong {
    font-family: var(--font-num);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.june-challenge-row.leader .june-challenge-kills strong {
    color: var(--challenge-accent, var(--accent));
    text-shadow: 0 0 18px color-mix(in srgb, var(--challenge-accent, var(--accent)) 60%, transparent);
}
.june-challenge-kills span {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
/* Progress rides the bottom edge of the row. */
.june-challenge-row .june-challenge-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border: none;
    border-radius: 0;
    background: transparent;
}
.june-challenge-row .june-challenge-bar div {
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--challenge-accent, var(--accent)) 30%, transparent), var(--challenge-accent, var(--accent)));
    box-shadow: 0 0 12px var(--challenge-accent, var(--accent));
}
.june-challenge-empty {
    border-radius: 16px;
    border: 1px dashed var(--hairline-strong);
    background: transparent;
}

/* Assist Marathon: each row's best game, in the strip slot. */
.assist-best { gap: 10px; color: var(--text-muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.assist-best strong { color: var(--ink); }

/* September winner banner: the dashboard's first week of October. */
.season-winner-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    padding: 14px 20px;
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--september-challenge-color) 55%, transparent);
    background: linear-gradient(110deg,
        color-mix(in srgb, var(--september-challenge-color) 24%, var(--glass)),
        color-mix(in srgb, var(--september-challenge-color) 6%, var(--glass)) 70%);
    box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--september-challenge-color) 75%, transparent);
}
.season-winner-banner.hidden { display: none; }
.swb-crown { display: flex; color: var(--september-challenge-color); }
.swb-crown svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--september-challenge-color) 60%, transparent));
}
.swb-avatars { display: flex; }
.swb-avatars .p-avatar + .p-avatar { margin-left: -10px; }
.swb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swb-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--september-challenge-color);
}
.swb-names { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.swb-names button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.swb-names button:hover { color: var(--september-challenge-color); }
.swb-stat { font-size: 0.85rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   LIVE NOW BANNER
   --------------------------------------------------------------------------- */
.live-now-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    border: none;
    background: none;
}
.live-now-banner.hidden { display: none; }
.live-now-row {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 16px 10px 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--color-loss) 45%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--color-loss) 18%, transparent), transparent 55%),
        var(--glass);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: var(--ink);
    font-size: 0.95rem;
    text-align: left;
    box-shadow: 0 0 44px -18px var(--color-loss), var(--shadow-lift);
    cursor: pointer;
    transition: transform 200ms var(--ease-out), box-shadow 200ms;
}
.live-now-row::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff 8%, transparent) 50%, transparent 70%);
    background-size: 250% 100%;
    animation: live-glare 4.5s ease-in-out infinite;
}
@keyframes live-glare { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.live-now-row:hover { transform: translateY(-2px); box-shadow: 0 0 60px -16px var(--color-loss), var(--shadow-lift); }
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border-radius: 99px;
    background: var(--color-loss);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: 0 0 18px -2px var(--color-loss);
}
.live-now-row .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: 0;
    animation: live-dot 1.2s ease-in-out infinite;
}
@keyframes live-dot { 50% { opacity: 0.35; transform: scale(0.8); } }
.live-champ-img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--player-color, var(--accent));
    box-shadow: 0 0 16px -4px var(--player-color, var(--accent));
}
.live-now-copy { flex: 1; min-width: 0; }
.live-now-copy strong { color: var(--player-color, var(--accent)); font-weight: 800; margin-right: 4px; }
.live-now-text { color: var(--ink); font-weight: 600; }
.live-now-meta { color: var(--ink-dim); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.live-now-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--hairline-strong);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.live-now-cta .ui-icon { width: 0.95rem; height: 0.95rem; }

/* ---------------------------------------------------------------------------
   HALL OF FAME
   --------------------------------------------------------------------------- */
.hall-of-fame-panel { padding: 24px; margin-bottom: 26px; border-radius: var(--r-xl); }
.hof-header { margin-bottom: 18px; align-items: center; }
.hof-sub { font-style: normal; font-size: 0.8rem; color: var(--ink-faint); }
.hof-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hof-card {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--hof-color, var(--accent)) 30%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--hof-color, var(--accent)) 30%, transparent);
    background:
        radial-gradient(220px 120px at 0% 0%, color-mix(in srgb, var(--hof-color, var(--accent)) 20%, transparent), transparent 70%),
        color-mix(in srgb, var(--bg-surface) 55%, transparent);
    transition: transform 220ms var(--ease-out), box-shadow 220ms;
}
.hof-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--hof-color, var(--accent)), transparent);
}
.hof-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px var(--shadow-ink), 0 0 30px -12px var(--hof-color, var(--accent)); }
.hof-card.hof-in-progress { border-style: dashed; }
.hof-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    box-shadow: 0 0 20px -6px var(--hof-color, var(--accent));
}
.hof-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.hof-winner { margin: 6px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hof-winner-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
}
.hof-winner-name .p-avatar { --size: 26px; }
.hof-winner-name:hover { color: var(--player-color, var(--accent)); }
.hof-winner-sep { display: none; }
.hof-stat { font-size: 0.78rem; color: var(--ink-dim); }

/* ---------------------------------------------------------------------------
   RADAR + STANDINGS
   --------------------------------------------------------------------------- */
.dashboard-visuals { gap: 18px; margin-bottom: 26px; }
.chart-container-wrapper,
.leaderboard-panel { padding: 24px; border-radius: var(--r-xl); }
.chart-container-wrapper h3,
.leaderboard-panel h3,
.recent-shared-matches h3 { margin-bottom: 18px; }

.radar-player-toggles { margin: -4px 0 10px; gap: 6px; }
.radar-player-toggle,
.radar-toggle-all {
    height: 30px;
    padding: 0 12px;
    border-radius: 99px;
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--bg-darker) 45%, transparent);
    color: var(--ink-dim);
    font-weight: 700;
}
.radar-player-toggle.selected,
.radar-toggle-all.active {
    color: var(--ink);
    background: var(--accent-wash);
    border-color: var(--accent-line);
    box-shadow: 0 0 16px -6px var(--accent-glow);
}
.echart-view { height: 380px; }

.standing-list { gap: 6px; }
.standing-row {
    position: relative;
    overflow: hidden;
    gap: 12px;
    padding: 8px 16px 8px 10px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    transition: transform 200ms var(--ease-out), border-color 200ms, background 200ms;
}
.standing-row:hover {
    transform: translateX(3px);
    box-shadow: none;
    border-color: color-mix(in srgb, var(--player-color, var(--accent)) 45%, transparent);
    background: color-mix(in srgb, var(--player-color, var(--accent)) 8%, var(--glass));
}
.standing-rank { width: auto; display: grid; place-items: center; }
/* Shared medal look for every ranked board. */
.standing-rank span,
.june-challenge-rank span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--font-num);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-dim);
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--bg-darker) 60%, transparent);
}
.podium-1 .standing-rank span,
.podium-2 .standing-rank span,
.podium-3 .standing-rank span {
    color: #1a1204;
    border: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal) 35%, transparent), 0 0 18px -2px var(--medal), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle at 35% 30%, #fff8 0%, transparent 45%), linear-gradient(145deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #000));
}
.standing-row .p-avatar { --size: 38px; }
.standing-player { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.standing-player:hover { color: var(--player-color, var(--accent)); }
.standing-detail { color: var(--ink-faint); font-weight: 500; font-size: 0.74rem; }
.standing-games { font-family: var(--font-num); font-weight: 600; color: var(--ink-dim); white-space: nowrap; }
.standing-progress {
    width: 90px;
    height: 6px;
    margin: 0 4px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.standing-progress-fill {
    border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--player-color, var(--accent)) 45%, transparent), var(--player-color, var(--accent)));
    box-shadow: 0 0 10px -1px var(--player-color, var(--accent));
}
.standing-winrate {
    font-family: var(--font-num);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 50px;
}
.streak-chip { border-radius: 99px; padding: 1px 8px; }

/* ---------------------------------------------------------------------------
   RECENT MATCHES (squad cards)
   --------------------------------------------------------------------------- */
.recent-shared-matches { padding: 24px; border-radius: var(--r-xl); }
.shared-matches-list { gap: 12px; }
.shared-match-card {
    --outcome: var(--accent);
    position: relative;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--outcome) 28%, var(--hairline));
    background:
        radial-gradient(520px 140px at 0% 0%, color-mix(in srgb, var(--outcome) 13%, transparent), transparent 70%),
        color-mix(in srgb, var(--bg-surface) 55%, transparent);
    box-shadow: 0 16px 32px -24px var(--shadow-ink);
    transition: transform 220ms var(--ease-out), border-color 220ms, box-shadow 220ms;
}
.shared-match-card.outcome-win { --outcome: var(--color-win); }
.shared-match-card.outcome-loss { --outcome: var(--color-loss); }
.shared-match-card.outcome-split { --outcome: #f59e0b; }
.shared-match-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--outcome);
    box-shadow: 0 0 14px var(--outcome);
}
.shared-match-card:hover,
.shared-match-card.opgg-expanded-row {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--outcome) 55%, transparent);
    box-shadow: 0 22px 40px -26px var(--shadow-ink), 0 0 36px -18px var(--outcome);
}
.shared-match-card > .match-top-meta {
    background: none;
    border-bottom: none;
    padding: 14px 18px 0;
}
.match-top-meta .mtm-item { color: var(--ink-faint); font-weight: 600; }
.smatch-header {
    padding: 6px 18px 10px;
    background: none;
    border-bottom: 1px solid var(--hairline);
}
.shared-match-card.opgg-expanded-row .smatch-header { border-bottom-color: var(--hairline); }
.smatch-title {
    gap: 10px;
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--outcome);
    text-shadow: 0 0 18px color-mix(in srgb, var(--outcome) 45%, transparent);
}
.smatch-title .ui-icon { width: 1.05rem; height: 1.05rem; }
.smatch-meta { color: var(--ink-dim); font-weight: 600; letter-spacing: 0.02em; }
.smatch-player-row {
    gap: 14px;
    padding: 9px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-left: none;
}
.smatch-player-row:hover { background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.smatch-player-row.sm-win,
.smatch-player-row.sm-loss { border-left: none; }
.shared-match-card.outcome-split .smatch-player-row.sm-win { box-shadow: inset 3px 0 0 var(--color-win); }
.shared-match-card.outcome-split .smatch-player-row.sm-loss { box-shadow: inset 3px 0 0 var(--color-loss); }
.sm-rank { width: 26px; height: 26px; font-family: var(--font-num); border-color: var(--hairline-strong); background: color-mix(in srgb, var(--bg-darker) 60%, transparent); }
.sm-rank.medal-gold,
.sm-rank.medal-silver,
.sm-rank.medal-bronze {
    color: #1a1204;
    border: none;
    box-shadow: 0 0 14px -3px var(--medal), inset 0 1px 1px rgba(255, 255, 255, 0.55);
    background: radial-gradient(circle at 35% 30%, #fff8 0%, transparent 45%), linear-gradient(145deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #000));
}
.sm-rank.medal-gold { --medal: #f7c948; }
.sm-rank.medal-silver { --medal: #cfd8e3; }
.sm-rank.medal-bronze { --medal: #d98a4b; }
.sm-champ-img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--hairline-strong); }
.sm-name-lbl { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.sm-name:hover .sm-name-lbl { color: var(--accent); }
.sm-champ-lbl { color: var(--ink-faint); }
.sm-kda-counts { font-family: var(--font-num); font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.sm-kda-ratio { color: var(--ink-faint); }
.sm-tier { border-radius: 8px; min-width: 32px; }
.award-badge {
    border-radius: 99px;
    padding: 3px 9px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------------
   PROFILE: splash hero, glass side panels, outcome-edged match rows
   --------------------------------------------------------------------------- */
.profile-layout-grid-master {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 22px;
    animation: panel-in 520ms var(--ease-out);
}
.profile-hero {
    --player-color: var(--accent);
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px 28px;
    min-height: 300px;
    padding: 36px 36px 28px;
    border-radius: var(--r-xl);
    border: 1px solid color-mix(in srgb, var(--player-color) 30%, var(--hairline));
    background:
        radial-gradient(700px 320px at 0% 100%, color-mix(in srgb, var(--player-color) 22%, transparent), transparent 70%),
        var(--glass-strong);
    box-shadow: var(--shadow-lift), 0 0 70px -34px var(--player-color);
}
.profile-hero-art {
    position: absolute;
    inset: -2%;
    z-index: -2;
    background-size: cover;
    background-position: center 20%;
    animation: hero-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.6%, 1%, 0); }
}
.profile-hero-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, var(--bg-darker) 6%, color-mix(in srgb, var(--bg-darker) 72%, transparent) 42%, color-mix(in srgb, var(--bg-darker) 18%, transparent) 100%),
        linear-gradient(0deg, var(--bg-darker) 0%, color-mix(in srgb, var(--bg-darker) 40%, transparent) 38%, transparent 70%),
        radial-gradient(520px 260px at 8% 100%, color-mix(in srgb, var(--player-color) 30%, transparent), transparent 70%);
}
.profile-hero-main { display: flex; align-items: center; gap: 26px; min-width: 0; }
.profile-hero .profile-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 124px;
    height: 124px;
    padding: 3px;
    border: none;
    border-radius: 32px;
    background: conic-gradient(from 200deg, var(--player-color), color-mix(in srgb, var(--player-color) 25%, transparent), var(--player-color));
    box-shadow: 0 0 46px -8px var(--player-color), 0 24px 40px -20px rgba(0, 0, 0, 0.7);
    margin: 0;
}
.profile-hero .profile-avatar img,
.profile-hero .profile-avatar .profile-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 29px;
    object-fit: cover;
    border: 2px solid var(--bg-darker);
    background: var(--bg-darker);
    display: grid;
    place-items: center;
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--player-color);
}
.profile-hero .profile-level-badge {
    position: absolute;
    left: 50%;
    bottom: -11px;
    translate: -50% 0;
    margin: 0;
    padding: 3px 11px;
    border-radius: 99px;
    border: 1px solid var(--player-color);
    background: var(--bg-darker);
    color: var(--ink);
    font-family: var(--font-num);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 0 16px -4px var(--player-color);
}
.profile-hero .profile-info-details { align-items: flex-start; text-align: left; min-width: 0; }
.profile-hero-kicker {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--player-color);
}
.profile-hero .profile-summoner-lbl-huge {
    margin: 6px 0 6px;
    padding: 0;
    border: none;
    font-family: var(--font-title);
    font-size: clamp(2.4rem, 3.8vw + 0.5rem, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-white);
    text-shadow: 0 6px 34px rgba(0, 0, 0, 0.55);
    overflow-wrap: anywhere;
}
[data-theme="classic-light"] .profile-hero .profile-summoner-lbl-huge,
[data-theme="catppuccin-latte"] .profile-hero .profile-summoner-lbl-huge { text-shadow: 0 2px 18px rgba(255, 255, 255, 0.8); }
.profile-hero .profile-riot-id-lbl { font-size: 0.95rem; font-weight: 600; color: var(--ink-dim); }
.profile-hero .profile-sync-date { margin-top: 2px; font-size: 0.75rem; font-style: normal; color: var(--ink-faint); }

.profile-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(104px, auto)); gap: 10px; }
.hero-stat {
    padding: 12px 16px 11px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-darker) 58%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 var(--sheen);
}
.hero-stat strong {
    display: block;
    font-family: var(--font-num);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-white);
    font-variant-numeric: tabular-nums;
}
.hero-stat:first-child strong { color: var(--player-color); text-shadow: 0 0 22px color-mix(in srgb, var(--player-color) 50%, transparent); }
.hero-stat span {
    display: block;
    margin-top: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    white-space: nowrap;
}

.profile-hero-crowns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-hero-crowns .blood-royale-winner-badge {
    margin: 0;
    padding: 6px 16px 6px 6px;
    border-radius: 99px;
    gap: 10px;
    animation: crown-glint 6s ease-in-out infinite;
}
.profile-hero-crowns .blood-royale-winner-badge .brw-crown { width: 32px; height: 32px; }
.profile-hero-crowns .blood-royale-winner-badge .brw-text { flex-direction: row; align-items: baseline; gap: 8px; }
.profile-hero-crowns .blood-royale-winner-badge .brw-text strong { font-size: 0.78rem; letter-spacing: 0.1em; }
.profile-hero-crowns .blood-royale-winner-badge .brw-text span { font-size: 0.74rem; }
@keyframes crown-glint { 0%, 88%, 100% { filter: none; } 94% { filter: brightness(1.35) saturate(1.2); } }

/* Side panels join the glass language. */
.profile-averages-radar-pane,
.profile-masteries-list-panel,
.profile-trophy-panel,
.profile-ranked-stats-panel,
.scout-info-panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-white) 3%, transparent), transparent 100px),
        var(--glass);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
}
.profile-averages-radar-pane h3,
.profile-masteries-list-panel h3,
.profile-trophy-panel h3,
.profile-ranked-stats-panel h3 {
    color: var(--ink);
    font-family: var(--font-display);
    letter-spacing: 0.16em;
    border-bottom: none;
}
.profile-averages-radar-pane h3 .ui-icon,
.profile-masteries-list-panel h3 .ui-icon,
.profile-trophy-panel h3 .ui-icon,
.right-pane-header-title .ui-icon { color: var(--accent); }

.right-pane-header-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    color: var(--ink);
    border-bottom: none;
    padding: 4px 4px 2px;
}
.profile-deeds-list-container { gap: 10px; }
.match-history-drill-item > .match-top-meta { padding: 2px 6px 6px; }
.opgg-match-row {
    --outcome: var(--accent);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--outcome) 22%, var(--hairline));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--outcome) 13%, transparent), transparent 45%),
        color-mix(in srgb, var(--bg-surface) 55%, transparent);
    box-shadow: 0 14px 28px -24px var(--shadow-ink);
    transition: transform 200ms var(--ease-out), border-color 200ms, box-shadow 200ms;
}
.opgg-match-row.victory { --outcome: var(--color-win); border-left: 1px solid color-mix(in srgb, var(--color-win) 22%, var(--hairline)); }
.opgg-match-row.defeat { --outcome: var(--color-loss); border-left: 1px solid color-mix(in srgb, var(--color-loss) 22%, var(--hairline)); }
.opgg-match-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--outcome);
    box-shadow: 0 0 12px var(--outcome);
}
.opgg-match-row:hover,
.opgg-match-row.opgg-expanded-row {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--outcome) 50%, transparent);
    box-shadow: 0 18px 34px -24px var(--shadow-ink), 0 0 30px -16px var(--outcome);
}

/* Legacy variables the old sheet references but never defined. */
:root { --gold-primary: var(--accent); --text-muted: var(--text-secondary); }

.avg-strong { color: var(--text-white); font-weight: 700; }
.avg-accent { color: var(--accent); }
.trophy-count,
.trophy-stat-num { color: var(--text-white); }
.trophy-label,
.trophy-stat-lbl { color: var(--ink-dim); }
.trophy-stat,
.trophy-badge {
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-darker) 40%, transparent);
    transition: transform 180ms var(--ease-out), border-color 180ms;
}
.trophy-badge:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.trophy-stat-num { font-family: var(--font-num); font-size: 1.5rem; }

/* Profile match rows: keep the stat lines on one line in the narrower pane. */
.match-metrics .metric-line { white-space: nowrap; }
.match-mode-badge { text-transform: none; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------------------
   CONTROLS: buttons, inputs, filter pills, loaders, toast
   --------------------------------------------------------------------------- */
.btn {
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: transform 160ms var(--ease-out), box-shadow 200ms, background 200ms, border-color 200ms, color 200ms;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.btn-primary {
    color: var(--bg-darker);
    border: 1px solid transparent;
    background: var(--brand-gradient);
    box-shadow: 0 10px 26px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover:not(:disabled) {
    background: var(--brand-gradient);
    filter: brightness(1.08);
    box-shadow: 0 14px 30px -12px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}
.btn-primary:disabled { opacity: 0.45; filter: saturate(0.6); }
.btn-secondary {
    color: var(--ink);
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    border: 1px solid var(--hairline-strong);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.btn-outline {
    color: var(--ink);
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
}
.btn-outline:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 0 22px -8px var(--accent-glow); }
.btn-outline .ui-icon { color: var(--accent); }

.search-input,
.player-input-wrap input {
    border-radius: 14px;
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--bg-darker) 55%, transparent);
    color: var(--ink);
    transition: border-color 180ms, box-shadow 180ms;
}
.search-input:focus,
.player-input-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.filter-group-label { font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.filter-tab {
    border-radius: 99px;
    padding: 7px 14px;
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--bg-darker) 40%, transparent);
    color: var(--ink-dim);
    font-weight: 600;
    transition: background 160ms, color 160ms, border-color 160ms, transform 160ms var(--ease-out);
}
.filter-tab:hover { color: var(--ink); border-color: var(--accent-line); transform: translateY(-1px); }
.filter-tab.active {
    color: var(--bg-darker);
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 8px 20px -10px var(--accent-glow);
}

/* Loaders: a spinning hextech ring above the message. */
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 46px 0;
    color: var(--ink-dim);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.loader::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-top-color: var(--accent);
    border-right-color: var(--bush);
    box-shadow: 0 0 26px -6px var(--accent-glow);
    animation: loader-spin 900ms linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }

.toast {
    right: 28px;
    bottom: 28px;
    padding: 13px 18px 13px 16px;
    border-radius: 14px;
    border: 1px solid var(--hairline-strong);
    border-left: 4px solid var(--accent);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    color: var(--ink);
    box-shadow: 0 24px 50px -20px var(--shadow-ink);
}

/* ---------------------------------------------------------------------------
   THE GROVE
   --------------------------------------------------------------------------- */
.grove-section,
.grove-panel,
.grove-card {
    border-radius: var(--r-xl);
}
.duo-row {
    grid-template-columns: 38px minmax(0, 1fr) auto auto 110px 58px;
    gap: 14px;
    padding: 8px 16px 8px 10px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    transition: transform 200ms var(--ease-out), border-color 200ms, background 200ms;
}
.duo-row:hover { transform: translateX(3px); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 6%, var(--glass)); }
.duo-rank { display: grid; place-items: center; }
.duo-rank span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--font-num);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-dim);
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--bg-darker) 60%, transparent);
}
.podium-1 .duo-rank span,
.podium-2 .duo-rank span,
.podium-3 .duo-rank span {
    color: #1a1204;
    border: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal) 35%, transparent), 0 0 18px -2px var(--medal), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle at 35% 30%, #fff8 0%, transparent 45%), linear-gradient(145deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #000));
}
.duo-avatars { display: inline-flex; margin-right: 6px; }
.duo-avatars .p-avatar { --size: 34px; }
.duo-avatars .p-avatar + .p-avatar { margin-left: -10px; }
.duo-name { font-weight: 700; color: var(--ink); }
.duo-plus { color: var(--accent); font-weight: 800; }
.duo-games { color: var(--ink-dim); }
.duo-games strong { font-family: var(--font-num); font-size: 1.05rem; color: var(--ink); }
.duo-wr-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text-primary) 9%, transparent); overflow: hidden; }
.duo-wr-bar div { height: 100%; border-radius: 99px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.duo-winrate { font-family: var(--font-num); font-size: 1.3rem; font-weight: 700; }
.duo-lowsample-pill { border-radius: 99px; }

/* ---------------------------------------------------------------------------
   CHAMP MUSIC
   --------------------------------------------------------------------------- */
.music-filters-bar {
    padding: 20px;
    border-radius: var(--r-xl);
    border: 1px solid var(--hairline);
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lift);
}
.music-results-summary { color: var(--ink-dim); margin: 16px 4px 12px; }
.music-catalog-grid { gap: 14px; }
.music-card-item {
    border-radius: 18px;
    border: 1px solid var(--hairline);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
        var(--glass);
    box-shadow: 0 16px 30px -24px var(--shadow-ink);
    transition: transform 220ms var(--ease-out), border-color 220ms, box-shadow 220ms;
}
.music-card-item:hover,
.music-card-item.expanded-item {
    transform: translateY(-3px);
    border-color: var(--accent-line);
    box-shadow: 0 22px 40px -24px var(--shadow-ink), 0 0 30px -14px var(--accent-glow);
}
.music-card-header { gap: 12px; justify-content: flex-start; border-bottom: none; padding-bottom: 0; }
.music-card-header .music-expand-indicator { margin-left: auto; }
.music-champ-img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    object-fit: cover;
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
}
span.music-champ-img { display: grid; place-items: center; font-weight: 700; color: var(--ink-dim); background: var(--bg-surface-light); }
.music-champ-name { font-family: var(--font-title); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.music-genre-pill,
.music-role-pill { border-radius: 99px; }

/* ---------------------------------------------------------------------------
   POSITION SELECTOR
   --------------------------------------------------------------------------- */
.roles-app-grid { gap: 18px; }
.card { padding: 24px; border-radius: var(--r-xl); }
.card h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--hairline);
}
.player-input-wrap { flex: 1 1 160px; min-width: 150px; }
.player-input-wrap input { width: 100%; padding: 9px 12px; }

/* ---------------------------------------------------------------------------
   BUSHSCOPE + CHECKLIST touches
   --------------------------------------------------------------------------- */
.bushscope-toolbar {
    padding: 12px 14px 12px 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    border: 1px solid var(--hairline);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}
.bushscope-status { color: var(--ink-dim); font-weight: 600; }
.bushscope-btn { padding: 8px 16px; }
#bushscope-content .loader::before {
    width: 64px;
    height: 64px;
    border: 1px solid color-mix(in srgb, var(--bush) 35%, transparent);
    border-top-color: var(--bush);
    border-right-color: transparent;
    background:
        conic-gradient(from 0deg, color-mix(in srgb, var(--bush) 45%, transparent), transparent 25%),
        radial-gradient(circle, color-mix(in srgb, var(--bush) 25%, transparent) 0 3px, transparent 4px),
        repeating-radial-gradient(circle, transparent 0 10px, color-mix(in srgb, var(--bush) 18%, transparent) 10px 11px);
    box-shadow: 0 0 40px -10px var(--bush);
    animation: loader-spin 2.2s linear infinite;
}
.bushscope-game-card,
.bushscope-empty {
    border-radius: var(--r-xl);
    border: 1px solid var(--hairline);
    background: var(--glass);
    box-shadow: var(--shadow-lift);
}
.checklist-chips { gap: 8px; }
.checklist-chip { border-radius: 99px; }

/* The rail scrolls as a whole on short screens rather than crushing the list. */
.sidebar { overflow-y: auto; overflow-x: hidden; }
.sidebar-profiles-section { flex: 1 0 auto; overflow: visible; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .profile-layout-grid-master { grid-template-columns: 1fr; }
    .profile-hero { grid-template-columns: 1fr; }
    .profile-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    /* A glass app bar carries the brand and the menu button. */
    .portal-wrapper::before {
        content: "";
        position: fixed;
        inset: 0 0 auto 0;
        height: 64px;
        z-index: 150;
        background: color-mix(in srgb, var(--bg-dark) 78%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
                backdrop-filter: blur(18px) saturate(1.2);
        border-bottom: 1px solid var(--hairline);
    }
    .portal-wrapper::after {
        content: "Bush Buddy";
        position: fixed;
        top: 20px;
        left: 70px;
        z-index: 151;
        font-family: var(--font-title);
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        pointer-events: none;
    }
    .hamburger-toggle {
        top: 10px;
        left: 12px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid var(--accent-line);
        background: var(--accent-wash);
        color: var(--accent);
        box-shadow: 0 0 20px -8px var(--accent-glow);
    }
    .sidebar {
        width: 280px;
        left: -300px;
        z-index: 250;
        background: color-mix(in srgb, var(--bg-dark) 94%, transparent);
    }
    .sidebar-overlay { z-index: 240; }
    .main-content { padding: 80px 14px 40px; }

    .tab-header { padding: 22px 20px 20px; border-radius: var(--r-lg); margin-bottom: 18px; }
    .tab-header::after { width: 160px; height: 160px; right: -30px; }
    .tab-header h1 { font-size: 1.7rem; }
    .tab-subtitle { font-size: 0.9rem; }

    .metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-card { min-height: 138px; padding: 14px; border-radius: 16px; }
    .metric-icon { width: 32px; height: 32px; top: 12px; right: 12px; border-radius: 10px; }
    .metric-icon .ui-icon { width: 1rem; height: 1rem; }
    .metric-label { margin-right: 36px; font-size: 0.64rem; letter-spacing: 0.12em; }
    .metric-value { font-size: 2.1rem; }
    .metric-unit { font-size: 0.7rem; }
    .holder-chip .holder-detail { display: none; }

    .june-challenge-panel,
    .hall-of-fame-panel,
    .recent-shared-matches,
    .chart-container-wrapper,
    .leaderboard-panel { padding: 16px; border-radius: var(--r-lg); }
    .june-challenge-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .june-challenge-row.september-challenge-row,
    .june-challenge-row.bloodtober-row,
    .june-challenge-row.assist-row {
        grid-template-columns: 32px 40px minmax(0, 1fr) auto;
        grid-template-areas: "rank av player score" "pool pool pool pool";
        row-gap: 10px;
        gap: 10px;
    }
    .september-challenge-row > .june-challenge-rank, .bloodtober-row > .june-challenge-rank, .assist-row > .june-challenge-rank { grid-area: rank; }
    .september-challenge-row > .p-avatar, .bloodtober-row > .p-avatar, .assist-row > .p-avatar { grid-area: av; --size: 38px; }
    .september-challenge-row > .june-challenge-player, .bloodtober-row > .june-challenge-player, .assist-row > .june-challenge-player { grid-area: player; }
    .september-challenge-row > .champ-pool-strip, .bloodtober-row > .champ-pool-strip, .assist-row > .champ-pool-strip { grid-area: pool; }
    .september-challenge-row > .june-challenge-kills, .bloodtober-row > .june-challenge-kills, .assist-row > .june-challenge-kills { grid-area: score; }
    .pool-champ-img { flex-basis: 26px; width: 26px; height: 26px; border-radius: 8px; }

    .live-now-row { gap: 10px; padding: 10px 12px; }
    .live-now-cta,
    .live-now-meta { display: none; }

    .standing-games,
    .standing-progress { display: none; }
    .duo-row { grid-template-columns: 32px minmax(0, 1fr) 54px; }
    .duo-games,
    .duo-record,
    .duo-wr-bar { display: none; }
    .duo-avatars .p-avatar { --size: 28px; }

    .profile-hero { padding: 24px 18px 20px; min-height: 0; border-radius: var(--r-lg); }
    .profile-hero-main { gap: 18px; }
    .profile-hero .profile-avatar { width: 88px; height: 88px; border-radius: 24px; }
    .profile-hero .profile-avatar img,
    .profile-hero .profile-avatar .profile-avatar-fallback { border-radius: 21px; }
    .profile-hero-stats { grid-template-columns: 1fr 1fr; }
    .hero-stat strong { font-size: 1.6rem; }
    .profile-hero-crowns .blood-royale-winner-badge .brw-text { flex-direction: column; gap: 0; }

    .toast { left: 14px; right: 14px; bottom: 14px; }
}

@media (max-width: 768px) {
    .profile-hero .profile-avatar { width: 76px; height: 76px; border-radius: 22px; }
    .profile-hero .profile-avatar img,
    .profile-hero .profile-avatar .profile-avatar-fallback { border-radius: 19px; }
    .profile-hero .profile-summoner-lbl-huge { font-size: clamp(1.45rem, 7.4vw, 2.4rem); overflow-wrap: normal; word-break: normal; }
}

/* Unrolled scoreboards: teams side by side only when there is room for the
   item column; otherwise stacked, full width. */
.collapsible-scoreboard-wrapper { box-shadow: inset 0 12px 24px -12px rgba(0, 0, 0, 0.5); }
@media (max-width: 1680px) {
    .match-unrolled-detailed-scoreboard:not(.arena-scoreboard) { grid-template-columns: 1fr; gap: 14px; }
}
.scoreboard-team-panel {
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-darker) 55%, transparent);
}
.scoreboard-team-header { letter-spacing: 0.16em; font-weight: 700; }
.scoreboard-team-header.blue-side,
.scoreboard-team-header.red-side { border-bottom-width: 1px; }
.participant-row { border-bottom-color: color-mix(in srgb, var(--text-primary) 5%, transparent); transition: background 160ms; }
.participant-row:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }

/* Page titles: the gradient lives on an inline-block wrapper around the text,
   not on the flex h1. Safari paints background-clip:text on a flex container's
   anonymous text as transparent, which left the title dark on dark themes. A
   solid light color sits underneath for any engine that can't clip at all. */
.tab-header h1 {
    background: none;
    color: var(--text-white);
    -webkit-text-fill-color: currentColor;
}
.tab-title-text {
    display: inline-block;
    padding-bottom: 0.06em;
    color: var(--text-white);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .tab-title-text {
        background: var(--title-gradient);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Grove pairing touch-ups: condensed numerals read best a size up, and the one
   face the legacy sheet hard-coded now follows the pairing. */
.june-challenge-kills strong { font-size: 2rem; }
.standing-winrate,
.duo-winrate { font-size: 1.5rem; }
.sm-kda-counts { font-size: 1.25rem; }
.trophy-stat-num { font-size: 1.7rem; }
.checklist-sheet thead th { font-family: var(--font-display); letter-spacing: 0.1em; }
.brand-text h2 { text-transform: none; }
/* The legacy body turned on Inter-specific character variants; on the Grove
   faces they squash word spacing, so reset them. */
body { font-feature-settings: normal; }
.profile-hero .profile-summoner-lbl-huge {
    font-size: clamp(2.2rem, 2.6vw + 0.5rem, 3.3rem);
    overflow-wrap: break-word;
}
/* Plus Jakarta Sans sets narrow word spaces; open them slightly. Zero tracking
   keeps its ligatures ("ff") intact. */
body { letter-spacing: 0; word-spacing: 0.06em; }

/* ---------------------------------------------------------------------------
   PREDICTIONS
   --------------------------------------------------------------------------- */
.pred-me { margin: 0 0 18px; }
.pred-me-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--player-color, var(--accent)) 45%, transparent);
    background: linear-gradient(110deg, color-mix(in srgb, var(--player-color, var(--accent)) 16%, var(--glass)), var(--glass) 70%);
}
.pred-me-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pred-me-text strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.pred-me-text span { color: var(--text-muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.pred-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    border: 1px solid var(--hairline-strong);
    background: var(--glass);
}
.pred-join select,
.pred-join input,
.pred-stake input {
    padding: 9px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline-strong);
    background: var(--glass-strong);
    color: var(--ink);
    font: inherit;
}
.pred-join-note { flex-basis: 100%; color: var(--text-muted); font-size: 0.82rem; }
.pred-error { flex-basis: 100%; color: var(--color-loss, #f43f5e); font-size: 0.84rem; }
.pred-error:empty { display: none; }
.pred-btn {
    padding: 9px 16px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms, transform 160ms var(--ease-out);
}
.pred-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 34%, transparent); transform: translateY(-1px); }
.pred-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pred-btn.ghost { background: transparent; border-color: var(--hairline-strong); }

.pred-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.pred-side { display: flex; flex-direction: column; gap: 18px; }
.pred-group + .pred-group { margin-top: 22px; }
.pred-group > h3,
.pred-panel > h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pred-panel > h3 svg { width: 16px; height: 16px; color: var(--accent); }
.pred-panel { padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--hairline-strong); background: var(--glass); }
.pred-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pred-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--hairline-strong);
    background: var(--glass);
}
.pred-card.live { border-color: color-mix(in srgb, var(--color-win, #22c55e) 50%, transparent); }
.pred-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pred-card-head h4 { margin: 0; flex: 1 1 auto; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.pred-closes, .pred-period { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pred-card.live .pred-closes { color: var(--color-win, #22c55e); }
.pred-lineup { display: flex; gap: 6px; }
.pred-champ-img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.pred-outcomes { display: flex; flex-direction: column; gap: 6px; }
.pred-outcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 44px;
    grid-template-areas: "label bar price" "stakes stakes stakes";
    align-items: center;
    gap: 2px 10px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms, background 140ms;
}
.pred-outcome:disabled { cursor: default; }
.pred-outcome:not(:disabled):hover { border-color: var(--hairline-strong); }
.pred-outcome.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pred-outcome-label { grid-area: label; display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.pred-outcome-label .p-avatar { --size: 22px; }
.pred-outcome-bar { grid-area: bar; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.pred-outcome-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pred-outcome-price { grid-area: price; text-align: right; font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.pred-outcome-stakes { grid-area: stakes; font-size: 0.74rem; color: var(--text-muted); }
.pred-stake { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pred-stake input { width: 110px; }
.pred-quick { display: flex; gap: 4px; }
.pred-quick button {
    padding: 6px 9px;
    border-radius: 99px;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.pred-quick button:hover { color: var(--ink); }
.pred-pays { flex: 1; font-weight: 700; color: var(--color-win, #22c55e); font-variant-numeric: tabular-nums; }
.pred-bets { display: flex; flex-wrap: wrap; gap: 6px; }
.pred-bet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--player-color) 40%, transparent);
    font-size: 0.78rem;
    color: var(--ink);
}
.pred-bet .p-avatar { --size: 20px; }
.pred-empty { padding: 22px; border-radius: var(--r-lg); border: 1px dashed var(--hairline-strong); color: var(--text-muted); text-align: center; }
.pred-empty.small { padding: 12px; font-size: 0.85rem; }
.pred-king { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; }
.pred-king + .pred-king { border-top: 1px solid var(--hairline-strong); }
.pred-king .p-avatar { --size: 28px; }
.pred-king button { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.pred-king-rank { color: var(--text-muted); font-family: var(--font-num); text-align: center; }
.pred-king-points { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.pred-king.unjoined { opacity: 0.5; }
.pred-king.unjoined .pred-king-points { font-family: inherit; font-weight: 400; font-size: 0.8rem; }
.pred-result + .pred-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline-strong); }
.pred-result-head { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--text-muted); }
.pred-result-head strong { color: var(--ink); }
.pred-result-bets { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pred-result-bet.up { color: var(--color-win, #22c55e); }
.pred-result-bet.down { color: var(--color-loss, #f43f5e); }

@media (max-width: 1100px) {
    .pred-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pred-cards { grid-template-columns: 1fr; }
    .pred-outcome { grid-template-columns: minmax(0, 1fr) 60px 40px; }
}