/* GEA · Widgets — sidebar/aside boxes (Standings, Top Fraggers, Live, etc.).
   A widget = card with a labelled head, optional tabs, and a body that
   typically holds a compact table or list. */

.gea-widget {
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gea-widget__head {
    padding: var(--gea-space-4) var(--gea-space-5);
    border-bottom: 1px solid var(--gea-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--gea-space-3);
    background: var(--gea-bg-subtle);
}
.gea-widget__head-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gea-space-3);
}

.gea-widget__title {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-md);
    font-weight: var(--gea-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-wider);
    color: var(--gea-text);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--gea-space-2-5, 10px);
}
.gea-widget__title::before {
    content: '';
    width: 3px; height: 16px;
    background: var(--gea-brand-500);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(1, 238, 235, 0.6);
}

.gea-widget__action {
    font-size: var(--gea-text-xs);
    font-weight: var(--gea-weight-medium);
    color: var(--gea-text-muted);
    cursor: pointer;
    transition: color .15s var(--gea-ease-out);
}
.gea-widget__action:hover { color: var(--gea-brand-500); }

.gea-widget__body { flex: 1; }
.gea-widget__body--padded { padding: var(--gea-space-4) var(--gea-space-5); }

/* Compact game-tabs row inside a widget head.
   Container: inset dark surface. Active tab: raised dark surface + white
   text + thin brand-cyan dash at the top. Text is horizontally centered. */
.gea-widget .gea-tabs--pill {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-md);
    gap: 2px;
    overflow: visible;
}
.gea-widget .gea-tabs--pill .gea-tab {
    position: relative;
    flex: 1;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--gea-radius-sm);
    font-size: 11px;
    font-weight: var(--gea-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-wide);
    color: var(--gea-text-subtle);
    justify-content: center;       /* horizontal center */
    text-align: center;
    transition:
        color var(--gea-duration-fast) var(--gea-ease-out),
        background-color var(--gea-duration-fast) var(--gea-ease-out);
}
.gea-widget .gea-tabs--pill .gea-tab::after { display: none; }
.gea-widget .gea-tabs--pill .gea-tab:hover { color: var(--gea-text-muted); background: rgba(255,255,255,.03); }
.gea-widget .gea-tabs--pill .gea-tab.is-active {
    color: var(--gea-text);
    background: var(--gea-surface-raised);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* brand-cyan top accent — narrow pill above active tab */
.gea-widget .gea-tabs--pill .gea-tab.is-active::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    width: 16px;
    height: 2px;
    background: var(--gea-brand-500);
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(1, 238, 235, 0.6);
}

/* Compact table in widget — flush, smaller, no outer card */
.gea-widget .gea-table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.gea-widget .gea-table thead th {
    padding: 8px 14px;
    font-size: 9px;
    background: transparent;
}
.gea-widget .gea-table tbody td {
    padding: 10px 14px;
    font-size: var(--gea-text-xs);
}
.gea-widget .gea-table tbody td.gea-table__num {
    font-size: var(--gea-text-xs);
}
.gea-widget .gea-table .gea-table__rank { width: 36px; padding-left: 16px; }
.gea-widget .gea-table .gea-avatar--sm { width: 22px; height: 22px; font-size: 9px; }

/* Highlight row (e.g. user's team or leader) */
.gea-widget .gea-table tr.is-highlight {
    background: rgba(1, 238, 235, 0.08);
    box-shadow: inset 2px 0 0 var(--gea-brand-500);
}

/* TEAM HERO — full-bleed banner with team logo + identity + integrated stats.
   Used on the /teams/{slug} page. */
.gea-team-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: var(--gea-space-12);
    background: var(--gea-bg-elevated);
    border-bottom: 1px solid var(--gea-border-subtle);
}
.gea-team-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(900px 500px at 88% 30%, rgba(1,238,235,.14), transparent 65%),
        repeating-linear-gradient(45deg, transparent 0 24px, rgba(255,255,255,.012) 24px 25px),
        linear-gradient(135deg, var(--gea-bg-subtle) 0%, var(--gea-bg-elevated) 60%);
}
.gea-team-hero::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 1px; z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(1,238,235,.4), transparent);
}
.gea-team-hero__inner {
    display: flex;
    align-items: center;
    gap: var(--gea-space-8);
}
.gea-team-hero__logo {
    flex: none;
    width: 140px; height: 140px;
    background: var(--gea-surface);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-2xl);
    display: grid; place-items: center; padding: 18px;
    box-shadow: 0 0 0 1px rgba(1,238,235,.30), 0 0 48px -8px rgba(1,238,235,.40);
    color: var(--gea-brand-500);
    position: relative;
}
.gea-team-hero__logo .gea-icon { width: 100%; height: 100%; }
.gea-team-hero__logo img { width: 100%; height: 100%; object-fit: contain; }
.gea-team-hero__id { display: flex; flex-direction: column; gap: var(--gea-space-2); flex: 1; min-width: 0; }
.gea-team-hero__tag {
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-sm);
    color: var(--gea-brand-300);
    letter-spacing: var(--gea-tracking-wider);
    text-transform: uppercase;
    font-weight: var(--gea-weight-semibold);
}
.gea-team-hero__name {
    font-family: var(--gea-font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: var(--gea-weight-bold);
    line-height: 1;
    color: var(--gea-text);
    letter-spacing: var(--gea-tracking-tighter);
    display: flex; align-items: center; gap: var(--gea-space-3); flex-wrap: wrap;
}
.gea-team-hero__meta {
    display: flex; flex-wrap: wrap; gap: var(--gea-space-3) var(--gea-space-5);
    color: var(--gea-text-muted); font-size: var(--gea-text-sm);
}
.gea-team-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.gea-team-hero__meta-item .gea-icon { color: var(--gea-text-subtle); }
.gea-team-hero__actions { display: flex; gap: var(--gea-space-2); margin-top: var(--gea-space-3); flex-wrap: wrap; }

.gea-team-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gea-space-6);
    margin-top: var(--gea-space-8);
    padding-top: var(--gea-space-6);
    border-top: 1px solid var(--gea-border-subtle);
}
.gea-team-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.gea-team-hero__stat-label {
    font-size: var(--gea-text-2xs);
    color: var(--gea-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    font-weight: var(--gea-weight-semibold);
}
.gea-team-hero__stat-value {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-3xl);
    font-weight: var(--gea-weight-bold);
    line-height: 1;
    color: var(--gea-text);
    font-variant-numeric: tabular-nums;
}
.gea-team-hero__stat-value--brand { color: var(--gea-brand-500); }
.gea-team-hero__stat-sub { font-size: var(--gea-text-xs); color: var(--gea-text-muted); }

@media (max-width: 720px) {
    .gea-team-hero__inner { flex-direction: column; align-items: flex-start; }
    .gea-team-hero__logo { width: 96px; height: 96px; padding: 12px; }
}

/* AD SLOT — fixed-size sponsored panel used in every sidebar across the
   platform. Default ~ 8:5 landscape (half the height of the legacy 4:5).
   Variants: --image (full background photo), --portrait (4:5 tall),
   --square (1:1), --banner (21:9). */
.gea-ad {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 8 / 5;
    padding: var(--gea-space-4);
    background:
        radial-gradient(900px 400px at 75% -10%, rgba(1, 238, 235, 0.18), transparent 65%),
        linear-gradient(180deg, var(--gea-bg-elevated) 0%, var(--gea-surface) 100%);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xl);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s var(--gea-ease-out), transform .2s var(--gea-ease-out);
}
.gea-ad:hover {
    border-color: rgba(1, 238, 235, 0.32);
    transform: translateY(-2px);
}
.gea-ad::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 255, 255, 0.014) 14px 15px);
    pointer-events: none;
    z-index: -1;
}
.gea-ad__label {
    position: absolute;
    top: 14px; right: 14px;
    font-family: var(--gea-font-mono);
    font-size: 9px;
    font-weight: var(--gea-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    color: var(--gea-text-subtle);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xs);
    padding: 4px 8px;
    backdrop-filter: blur(4px);
    z-index: 2;
}
.gea-ad__top {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    background: rgba(1, 238, 235, 0.10);
    border: 1px solid rgba(1, 238, 235, 0.22);
    border-radius: var(--gea-radius-md);
    color: var(--gea-brand-500);
    align-self: flex-start;
}
.gea-ad__top svg.gea-icon { width: 18px; height: 18px; }
.gea-ad__bottom { display: flex; flex-direction: column; gap: var(--gea-space-1); }
.gea-ad__title {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-lg);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-text);
    line-height: 1.2;
    letter-spacing: var(--gea-tracking-tight);
}
.gea-ad__sub {
    font-size: var(--gea-text-xs);
    color: var(--gea-text-muted);
    line-height: 1.4;
}
.gea-ad__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--gea-space-2);
    font-size: var(--gea-text-xs);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-brand-500);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-wide);
}
.gea-ad__cta .gea-icon { width: 12px; height: 12px; transition: transform .15s var(--gea-ease-out); }
.gea-ad:hover .gea-ad__cta .gea-icon { transform: translateX(3px); }

/* Tall portrait — legacy 4:5 size, useful for hero/feature placements */
.gea-ad--portrait {
    aspect-ratio: 4 / 5;
    padding: var(--gea-space-5);
}
.gea-ad--portrait .gea-ad__top {
    width: auto; height: auto;
    flex: 1; place-self: center;
    background: transparent; border: 0;
    margin: var(--gea-space-3) 0;
}
.gea-ad--portrait .gea-ad__top svg.gea-icon { width: 56px; height: 56px; }
.gea-ad--portrait .gea-ad__bottom { gap: var(--gea-space-2); }

/* Image variant — full-bleed photo as the ad creative.
   Pass the URL via inline style: --gea-ad-bg: url('...'). */
.gea-ad--image {
    padding: 0;
    background: var(--gea-bg-elevated);
    border-color: var(--gea-border);
}
.gea-ad--image .gea-ad__media {
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--gea-ad-bg, none);
    background-size: cover;
    background-position: center;
    transition: transform .4s var(--gea-ease-out);
}
.gea-ad--image:hover .gea-ad__media { transform: scale(1.03); }
.gea-ad--image .gea-ad__label { z-index: 2; }
.gea-ad--image::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
}
.gea-ad--image .gea-ad__bottom { position: relative; z-index: 2; padding: var(--gea-space-5); }
.gea-ad--image .gea-ad__title  { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.gea-ad--image .gea-ad__sub    { color: rgba(255,255,255,.85); }
.gea-ad--image .gea-ad__top    { display: none; }

/* Other shapes */
.gea-ad--square { aspect-ratio: 1 / 1; }

/* Thin row-spanning strip — used between content cards on the home / news
   grids. Sized to match `.gea-newsletter` exactly so the page rhythm reads as
   "content row → strip row → content row" with consistent strip height. */
.gea-ad--banner {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--gea-space-5);
    justify-content: flex-start;
    padding: var(--gea-space-5) var(--gea-space-6);
    border-radius: var(--gea-radius-xl);
    flex-wrap: wrap;
}
.gea-ad--banner .gea-ad__label { top: 10px; right: 14px; }
.gea-ad--banner .gea-ad__top {
    flex: none;
    align-self: center;
    width: 40px; height: 40px;
}
.gea-ad--banner .gea-ad__top svg.gea-icon { width: 20px; height: 20px; }
.gea-ad--banner .gea-ad__bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
}
.gea-ad--banner .gea-ad__title {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-xl);
    font-weight: var(--gea-weight-bold);
    line-height: 1.2;
    letter-spacing: var(--gea-tracking-tight);
}
.gea-ad--banner .gea-ad__sub {
    font-size: var(--gea-text-sm);
    color: var(--gea-text-muted);
    line-height: 1.4;
}
.gea-ad--banner .gea-ad__cta {
    margin-top: var(--gea-space-1);
    align-self: flex-start;
    flex: none;
    white-space: nowrap;
}
@media (max-width: 540px) {
    .gea-ad--banner { padding: var(--gea-space-4) var(--gea-space-5); }
    .gea-ad--banner .gea-ad__sub { display: none; }
}

/* MARQUEE — endless right-to-left scroll. Markup duplicates the items
   inside two .gea-marquee__group children; animating the track by exactly
   one group's width creates a seamless loop regardless of viewport size. */
.gea-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}
.gea-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation-name: gea-marquee-scroll;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    will-change: transform;
    /* NO gap on the track — each item carries its own margin-right so the
       track width is exactly N × item-with-margin. With 2×N items duplicated,
       translating -50% moves one set off-screen exactly to its replica's
       starting position → seamless infinite loop, no visible jump. */
}
.gea-marquee:hover .gea-marquee__track { animation-play-state: paused; }
.gea-marquee--fast .gea-marquee__track { animation-duration: 24s; }
.gea-marquee--slow .gea-marquee__track { animation-duration: 60s; }

/* Logical group wrapper — exists only so authors can mark "this is one
   loop unit" and duplicate it once for the seamless effect. Layout-wise
   it is transparent: items inside still flex directly inside the track. */
.gea-marquee__group { display: contents; }

@keyframes gea-marquee-scroll {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.gea-marquee__item {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-right: var(--gea-space-8);
    color: var(--gea-text-muted);
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-md);
    font-weight: var(--gea-weight-bold);
    letter-spacing: var(--gea-tracking-wider);
    text-transform: uppercase;
    opacity: .55;
    transition: opacity .2s var(--gea-ease-out), color .2s var(--gea-ease-out);
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.gea-marquee__item:hover { opacity: 1; color: var(--gea-text); }
.gea-marquee__item img,
.gea-marquee__item svg { max-height: 32px; width: auto; opacity: .7; transition: opacity .2s var(--gea-ease-out); }
.gea-marquee__item:hover img,
.gea-marquee__item:hover svg { opacity: 1; }

/* SPONSOR strip — partner logos at bottom of sidebar */
.gea-sponsors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--gea-space-3);
}
.gea-sponsor {
    aspect-ratio: 16/9;
    display: grid; place-items: center;
    padding: var(--gea-space-3);
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-lg);
    transition: border-color .15s var(--gea-ease-out);
}
.gea-sponsor:hover { border-color: var(--gea-border-strong); }
.gea-sponsor img,
.gea-sponsor svg { max-width: 80%; max-height: 60%; opacity: .7; transition: opacity .15s var(--gea-ease-out); }
.gea-sponsor:hover img,
.gea-sponsor:hover svg { opacity: 1; }
.gea-sponsor__text {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-md);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-wider);
}
/* ---------- Tournament bracket ---------- */
.gea-bracket {
    --bracket-match-h: 124px;
    --bracket-gap-x: 96px;
    --bracket-gap-y: 56px;
    --bracket-line: rgba(255, 255, 255, .28);
    --bracket-line-active: var(--gea-brand-500);
    --bracket-h-half: calc(var(--bracket-match-h) / 2);
    --bracket-g-half: calc(var(--bracket-gap-y) / 2);
    /* Per-round vertical margin so each round centers between its feeders.
       Recurrence: M_R = 2 * M_{R-1} + matchHeight/2  (M_1 = gap/2). */
    --bracket-mp-1: var(--bracket-g-half);
    --bracket-mp-2: calc(2 * var(--bracket-mp-1) + var(--bracket-h-half));
    --bracket-mp-3: calc(2 * var(--bracket-mp-2) + var(--bracket-h-half));
    --bracket-mp-4: calc(2 * var(--bracket-mp-3) + var(--bracket-h-half));
    --bracket-mp-5: calc(2 * var(--bracket-mp-4) + var(--bracket-h-half));
    /* Connector vertical-leg height = M_R + matchHeight/2 (match-center → pair midpoint). */
    --bracket-cn-1: calc(var(--bracket-mp-1) + var(--bracket-h-half));
    --bracket-cn-2: calc(var(--bracket-mp-2) + var(--bracket-h-half));
    --bracket-cn-3: calc(var(--bracket-mp-3) + var(--bracket-h-half));
    --bracket-cn-4: calc(var(--bracket-mp-4) + var(--bracket-h-half));
    --bracket-cn-5: calc(var(--bracket-mp-5) + var(--bracket-h-half));
    display: flex;
    gap: var(--bracket-gap-x);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--gea-space-4) 4px var(--gea-space-6);
    scrollbar-width: thin;
    align-items: flex-start;
}
.gea-bracket[hidden] { display: none !important; }
.gea-bracket__round {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
.gea-bracket__round-label {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xs);
    font-weight: var(--gea-weight-semibold);
    letter-spacing: var(--gea-tracking-widest);
    text-transform: uppercase;
    color: var(--gea-text-subtle);
    padding: 0 6px;
    margin-bottom: var(--gea-space-4);
    height: 24px;
    line-height: 24px;
    flex: none;
}
.gea-bracket__matches {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.gea-bracket__match {
    height: var(--bracket-match-h);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-subtle);
    border-radius: var(--gea-radius-md);
    overflow: visible;            /* allow connector pseudo-elements */
    position: relative;
    flex: none;
    transition: border-color .15s ease-out;
    display: flex;
    flex-direction: column;
}
.gea-bracket__match > .gea-bracket__row:first-child { border-top-left-radius: var(--gea-radius-md); border-top-right-radius: var(--gea-radius-md); }
.gea-bracket__match > .gea-bracket__meta            { border-bottom-left-radius: var(--gea-radius-md); border-bottom-right-radius: var(--gea-radius-md); }
.gea-bracket__match:hover { border-color: var(--gea-border); }
.gea-bracket__match.is-live {
    border-color: var(--gea-danger);
    box-shadow: 0 0 0 1px var(--gea-danger), 0 4px 16px rgba(220, 38, 38, .15);
}
.gea-bracket__match.is-bye { opacity: .45; }

/* Per-round vertical margin so paired feeders center on the next round's match. */
.gea-bracket__round:nth-child(1) .gea-bracket__matches > .gea-bracket__match { margin: var(--bracket-mp-1) 0; --bracket-cn: var(--bracket-cn-1); }
.gea-bracket__round:nth-child(2) .gea-bracket__matches > .gea-bracket__match { margin: var(--bracket-mp-2) 0; --bracket-cn: var(--bracket-cn-2); }
.gea-bracket__round:nth-child(3) .gea-bracket__matches > .gea-bracket__match { margin: var(--bracket-mp-3) 0; --bracket-cn: var(--bracket-cn-3); }
.gea-bracket__round:nth-child(4) .gea-bracket__matches > .gea-bracket__match { margin: var(--bracket-mp-4) 0; --bracket-cn: var(--bracket-cn-4); }
.gea-bracket__round:nth-child(5) .gea-bracket__matches > .gea-bracket__match { margin: var(--bracket-mp-5) 0; --bracket-cn: var(--bracket-cn-5); }

/* L-shaped connector going OUT to the right of every match (except in the last round).
   Odd siblings extend DOWN from match-center to pair midpoint; even siblings extend UP.
   The pseudo-element's border-top/bottom is the horizontal stub, border-right is the vertical leg. */
.gea-bracket__round:not(:last-child) .gea-bracket__matches > .gea-bracket__match:nth-child(odd)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--bracket-gap-x) / 2);
    width: calc(var(--bracket-gap-x) / 2);
    height: var(--bracket-cn);
    border-top: 1px solid var(--bracket-line);
    border-right: 1px solid var(--bracket-line);
    pointer-events: none;
}
.gea-bracket__round:not(:last-child) .gea-bracket__matches > .gea-bracket__match:nth-child(even)::after {
    content: '';
    position: absolute;
    bottom: 50%;
    right: calc(-1 * var(--bracket-gap-x) / 2);
    width: calc(var(--bracket-gap-x) / 2);
    height: var(--bracket-cn);
    border-bottom: 1px solid var(--bracket-line);
    border-right: 1px solid var(--bracket-line);
    pointer-events: none;
}

/* Incoming horizontal stub on every match in rounds 2+ — meets the right end of the prev round's L. */
.gea-bracket__round:not(:first-child) .gea-bracket__matches > .gea-bracket__match::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--bracket-gap-x) / 2);
    width: calc(var(--bracket-gap-x) / 2);
    height: 1px;
    background: var(--bracket-line);
    pointer-events: none;
}

.gea-bracket__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 10px;
    border-bottom: 1px solid var(--gea-border-subtle);
    flex: 1;
    min-height: 0;
}
.gea-bracket__row:last-of-type { border-bottom: 0; }
.gea-bracket__row.is-winner {
    background: linear-gradient(90deg, rgba(1, 238, 235, .12), transparent 70%);
}
.gea-bracket__row.is-winner .gea-bracket__name { color: var(--gea-text); font-weight: var(--gea-weight-semibold); }
.gea-bracket__row.is-winner .gea-bracket__score { color: var(--gea-brand-500); font-weight: var(--gea-weight-bold); }
.gea-bracket__row.is-loser  .gea-bracket__name,
.gea-bracket__row.is-loser  .gea-bracket__score { color: var(--gea-text-subtle); }
.gea-bracket__team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.gea-bracket__logo {
    width: 28px; height: 28px;
    border-radius: 5px;
    flex: none;
    object-fit: cover;
    background: var(--gea-surface-raised);
}
.gea-bracket__logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gea-font-display);
    font-size: 13px;
    font-weight: var(--gea-weight-bold);
    color: var(--gea-text-muted);
    text-transform: uppercase;
}
.gea-bracket__name {
    font-size: var(--gea-text-base);
    color: var(--gea-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gea-bracket__score {
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-base);
    color: var(--gea-text-muted);
    min-width: 24px;
    text-align: right;
    font-weight: var(--gea-weight-semibold);
}
.gea-bracket__meta {
    padding: 6px 14px;
    background: rgba(255, 255, 255, .03);
    font-family: var(--gea-font-mono);
    font-size: 11px;
    color: var(--gea-text-subtle);
    text-align: center;
    flex: none;
    border-top: 1px solid var(--gea-border-subtle);
}
.gea-bracket__live { color: var(--gea-danger); font-weight: var(--gea-weight-bold); letter-spacing: .04em; }


/* ============================================================
   SQUARE AVATAR — variant used in identity hero, profile-edit
   preview and anywhere else a non-circular avatar fits the
   layout better than a round one. Same brand glow as round.
   ============================================================ */
.gea-avatar-square {
    width: 96px;
    height: 96px;
    flex: none;
    border-radius: 24px;
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-strong);
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
}
.gea-avatar-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gea-avatar-square__initials {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xl);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-brand-500);
    letter-spacing: var(--gea-tracking-tight);
}

/* ============================================================
   AVATAR CROPPER — modal stage hosting Cropper.js
   ============================================================ */
.gea-cropper-stage {
    width: 100%;
    max-width: 480px;
    max-height: 480px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: var(--gea-surface);
    border-radius: var(--gea-radius-md);
    overflow: hidden;
}
.gea-cropper-stage img {
    display: block;
    max-width: 100%;
}

/* ============================================================
   IDENTITY HERO — used on profile + team pages.
   A self-contained .gea-card carrying the identity (avatar +
   name + meta + actions) plus a stat strip below a divider.
   ============================================================ */
.gea-id-hero { position: relative; }

.gea-id-hero__overlap {
    position: relative;
    z-index: 2;
    margin-top: var(--gea-space-6);
}

.gea-id-hero__card {
    border-color: rgba(1, 238, 235, .18);
    border-radius: 24px;
    box-shadow: none;
    overflow: visible;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Top row — avatar | identity | actions */
.gea-id-hero__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gea-space-5);
    flex-wrap: wrap;
}

.gea-id-hero__avatar {
    flex: none;
    width: 104px;
    height: 104px;
    border-radius: 24px;
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-strong);
    box-shadow: 0 0 0 4px rgba(1, 238, 235, .12), 0 0 32px rgba(1, 238, 235, .25);
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
}
.gea-id-hero__avatar--lg { width: 140px; height: 140px; border-radius: 28px; }
.gea-id-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gea-id-hero__avatar-initials {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-4xl);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-brand-500);
    letter-spacing: var(--gea-tracking-tight);
}

.gea-id-hero__identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gea-space-2);
}

.gea-id-hero__name {
    display: flex;
    align-items: center;
    gap: var(--gea-space-3);
    flex-wrap: wrap;
    margin: 0;
}

.gea-id-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--gea-space-4);
    flex-wrap: wrap;
    color: var(--gea-text-muted);
    font-size: var(--gea-text-sm);
}
.gea-id-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--gea-space-2);
}
.gea-id-hero__meta-item .gea-icon { width: 14px; height: 14px; color: var(--gea-text-subtle); }

.gea-id-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--gea-space-2);
    flex-wrap: wrap;
    flex: none;
}

/* Compact social-icon row shown below the meta in the hero card. */
.gea-id-hero__socials {
    display: flex;
    align-items: center;
    gap: var(--gea-space-2);
    flex-wrap: wrap;
    margin-top: var(--gea-space-1);
}
.gea-id-hero__socials .gea-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-sm);
    transition: border-color .15s var(--gea-ease-out), color .15s var(--gea-ease-out);
}
.gea-id-hero__socials .gea-icon-btn:hover {
    border-color: var(--gea-brand-500);
    color: var(--gea-brand-500);
}

/* 2-column hero split — identity (LEFT) + 2x2 stat grid (RIGHT).
   Collapses to a single column on narrow screens. */
.gea-id-hero__split {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: var(--gea-space-6);
    align-items: start;
}
@media (max-width: 900px) {
    .gea-id-hero__split { grid-template-columns: 1fr; }
}

/* 2x2 stat-card grid (gaming-dashboard style) */
.gea-id-hero__stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gea-space-3);
}
.gea-id-hero__stat-card {
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-subtle);
    border-radius: var(--gea-radius-md);
    padding: var(--gea-space-3) var(--gea-space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color .2s var(--gea-ease-out), box-shadow .2s var(--gea-ease-out);
}
.gea-id-hero__stat-card:hover {
    border-color: rgba(1, 238, 235, .35);
    box-shadow: 0 0 0 1px rgba(1, 238, 235, .15);
}

/* Original strip layout — kept for profile pages that still use it */
.gea-id-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gea-space-4);
}
.gea-id-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--gea-space-2) var(--gea-space-3);
    border-left: 2px solid transparent;
    transition: border-color .2s var(--gea-ease-out);
}
.gea-id-hero__stat:hover { border-left-color: var(--gea-brand-500); }
.gea-id-hero__stat-label {
    font-size: var(--gea-text-2xs);
    font-weight: var(--gea-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    color: var(--gea-text-subtle);
}
.gea-id-hero__stat-value {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-3xl);
    font-weight: var(--gea-weight-bold);
    line-height: 1;
    color: var(--gea-text);
    letter-spacing: var(--gea-tracking-tight);
    margin-top: 2px;
}
.gea-id-hero__stat-sub {
    font-size: var(--gea-text-xs);
    color: var(--gea-text-muted);
    margin-top: 2px;
}

/* Mobile — stack the row */
@media (max-width: 767px) {
    .gea-id-hero__row { flex-direction: column; align-items: stretch; }
    .gea-id-hero__avatar {
        width: 88px; height: 88px;
        align-self: flex-start;
    }
    .gea-id-hero__actions { width: 100%; }
    .gea-id-hero__actions .gea-btn { flex: 1; justify-content: center; }
    .gea-id-hero__stat-value { font-size: var(--gea-text-2xl); }
}


/* ============================================================
   MATCH MINI — compact "last N match summary" cards used in
   horizontal strips on team pages. Each card shows date, W/L
   pip, and the two participating teams stacked vertically.
   ============================================================ */
.gea-match-mini-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gea-space-3);
}

.gea-match-mini {
    display: flex;
    flex-direction: column;
    gap: var(--gea-space-2);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-subtle);
    border-radius: var(--gea-radius-md);
    padding: var(--gea-space-3);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--gea-ease-out), box-shadow .2s var(--gea-ease-out);
}
.gea-match-mini:hover {
    border-color: rgba(1, 238, 235, .35);
    box-shadow: 0 0 0 1px rgba(1, 238, 235, .12);
}
.gea-match-mini__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gea-space-2);
}
.gea-match-mini__date {
    font-size: var(--gea-text-2xs);
    color: var(--gea-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    font-weight: var(--gea-weight-semibold);
}
.gea-match-mini__result {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xs);
    font-weight: var(--gea-weight-bold);
    line-height: 1;
}
.gea-match-mini__result--w {
    background: rgba(34, 197, 94, .15);
    color: var(--gea-success);
    border: 1px solid rgba(34, 197, 94, .3);
}
.gea-match-mini__result--l {
    background: rgba(239, 68, 68, .15);
    color: var(--gea-danger);
    border: 1px solid rgba(239, 68, 68, .3);
}
.gea-match-mini__result--d {
    background: rgba(255, 255, 255, .06);
    color: var(--gea-text-muted);
    border: 1px solid var(--gea-border);
}
.gea-match-mini__teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--gea-border-subtle);
    padding-top: var(--gea-space-2);
}
.gea-match-mini__team {
    display: flex;
    align-items: center;
    gap: var(--gea-space-2);
    font-size: var(--gea-text-sm);
}
.gea-match-mini__team-logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--gea-bg-elevated);
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    color: var(--gea-text-subtle);
}
.gea-match-mini__team-logo img { width: 100%; height: 100%; object-fit: cover; }
.gea-match-mini__team-tag {
    font-family: var(--gea-font-mono);
    font-weight: var(--gea-weight-semibold);
    letter-spacing: var(--gea-tracking-tight);
}
.gea-match-mini__team-score {
    margin-left: auto;
    font-family: var(--gea-font-display);
    font-weight: var(--gea-weight-bold);
    font-size: var(--gea-text-md);
}


/* ============================================================
   UPCOMING CARD — match preview card with tournament line,
   bold date/time and the two teams' tags + logos.
   ============================================================ */
.gea-upcoming-card {
    display: flex;
    flex-direction: column;
    gap: var(--gea-space-2);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-subtle);
    border-radius: var(--gea-radius-md);
    padding: var(--gea-space-4);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--gea-ease-out), transform .2s var(--gea-ease-out);
}
.gea-upcoming-card:hover {
    border-color: rgba(1, 238, 235, .35);
    transform: translateY(-2px);
}
.gea-upcoming-card__tournament {
    font-size: var(--gea-text-xs);
    color: var(--gea-text-muted);
    line-height: 1.4;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gea-upcoming-card__date {
    display: flex;
    align-items: baseline;
    gap: var(--gea-space-2);
}
.gea-upcoming-card__date-day {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-md);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-text);
}
.gea-upcoming-card__date-time {
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-md);
    color: var(--gea-brand-500);
    font-weight: var(--gea-weight-semibold);
}
.gea-upcoming-card__matchup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gea-space-2);
    border-top: 1px solid var(--gea-border-subtle);
    padding-top: var(--gea-space-2);
}
.gea-upcoming-card__side {
    display: flex;
    align-items: center;
    gap: var(--gea-space-2);
    flex: 1;
    min-width: 0;
}
.gea-upcoming-card__side:last-child { justify-content: flex-end; }
.gea-upcoming-card__vs {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    color: var(--gea-text-subtle);
    flex: none;
}


/* ============================================================
   ROSTER CARD — tall player card with square avatar fills
   the top, info below. Hover: lift + cyan border.
   ============================================================ */
.gea-roster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gea-space-3);
}
@media (max-width: 768px) { .gea-roster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gea-roster-grid { grid-template-columns: 1fr; } }

.gea-roster-card {
    display: flex;
    flex-direction: column;
    gap: var(--gea-space-2);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-subtle);
    border-radius: var(--gea-radius-md);
    padding: var(--gea-space-2);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--gea-ease-out), transform .2s var(--gea-ease-out), box-shadow .2s var(--gea-ease-out);
}
.gea-roster-card:hover {
    border-color: rgba(1, 238, 235, .4);
    transform: translateY(-2px);
    box-shadow: var(--gea-shadow-lg), 0 0 24px rgba(1, 238, 235, .12);
}

.gea-roster-card__avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--gea-radius-md);
    overflow: hidden;
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border-subtle);
    display: grid;
    place-items: center;
}
.gea-roster-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gea-roster-card__avatar-initials {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xl);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-brand-500);
    letter-spacing: var(--gea-tracking-tight);
}

/* Role pin overlaid on the bottom-left of the avatar (Captain etc.) */
.gea-roster-card__role-pin {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 1px 6px;
    background: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
    font-size: 9px;
    font-weight: var(--gea-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-wider);
    border-radius: var(--gea-radius-xs);
    line-height: 1.4;
}
.gea-roster-card__role-pin--neutral {
    background: var(--gea-bg);
    color: var(--gea-text);
    border: 1px solid var(--gea-border-strong);
}

.gea-roster-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--gea-space-1) var(--gea-space-1);
}
.gea-roster-card__name {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-sm);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gea-roster-card__role {
    font-size: var(--gea-text-2xs);
    color: var(--gea-text-muted);
    line-height: 1.3;
}


/* ============================================================
   ADMIN · LEAGUE STANDINGS EDITOR
   Each row is its own <form> — valid HTML, predictable submit,
   no display:contents inside <tr> hack. CSS Grid keeps the
   columns aligned across rows.
   ============================================================ */
.gea-standings-edit__head,
.gea-standings-edit__row {
    display: grid;
    grid-template-columns:
        56px           /* rank input */
        minmax(180px, 1.6fr)  /* team name + tag */
        repeat(6, minmax(56px, 1fr))  /* P W L Diff Pts Form */
        92px;          /* save button */
    gap: var(--gea-space-2);
    align-items: center;
    padding: var(--gea-space-2) var(--gea-space-4);
}
.gea-standings-edit__head {
    background: var(--gea-bg-elevated);
    border-bottom: 1px solid var(--gea-border-subtle);
    color: var(--gea-text-subtle);
    font-size: var(--gea-text-2xs);
    font-weight: var(--gea-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    padding-top: var(--gea-space-3);
    padding-bottom: var(--gea-space-3);
}

.gea-standings-edit__row {
    border-bottom: 1px solid var(--gea-border-subtle);
    transition: background-color .15s var(--gea-ease-out);
    margin: 0;
}
.gea-standings-edit__row:hover { background: rgba(255, 255, 255, .015); }
.gea-standings-edit__row:last-of-type { border-bottom: 0; }
.gea-standings-edit__row .gea-input { width: 100%; }
.gea-standings-edit__rank { font-weight: var(--gea-weight-semibold); text-align: center; }

.gea-standings-edit__team {
    display: flex;
    align-items: center;
    gap: var(--gea-space-3);
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.gea-standings-edit__team:hover strong { color: var(--gea-brand-500); }

.gea-standings-edit__actions {
    display: flex;
    justify-content: flex-end;
}

/* Remove-team form sits *between* rows as a separate utility line. */
.gea-standings-edit__remove {
    display: flex;
    justify-content: flex-end;
    padding: var(--gea-space-2) var(--gea-space-4) var(--gea-space-3);
    border-bottom: 1px solid var(--gea-border-subtle);
}
.gea-standings-edit__remove:last-child { border-bottom: 0; }

@media (max-width: 1100px) {
    .gea-standings-edit__head { display: none; }
    .gea-standings-edit__row {
        grid-template-columns: 56px 1fr;
        gap: var(--gea-space-2);
        padding: var(--gea-space-3) var(--gea-space-4);
    }
    .gea-standings-edit__row .gea-input,
    .gea-standings-edit__actions {
        grid-column: 1 / -1;
    }
    .gea-standings-edit__rank { grid-column: 1; }
    .gea-standings-edit__team { grid-column: 2; }
}

/* ============================================================
   ORGANISED-BY BADGE — small clickable chip showing the
   tournament organizer's logo + name. Drops onto tournament
   show pages, tournament cards in lists, etc. Always links to
   the organizer's public profile.
   ============================================================ */
.gea-organised-by {
    display: inline-flex;
    align-items: center;
    gap: var(--gea-space-2);
    padding: var(--gea-space-1) var(--gea-space-3) var(--gea-space-1) var(--gea-space-1);
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-lg);    /* rounded square, not pill — square logo fits cleanly */
    text-decoration: none;
    color: var(--gea-text);
    transition: border-color .15s var(--gea-ease-out), background-color .15s var(--gea-ease-out);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;                       /* clip the avatar's outer edges to the pill curve */
}
.gea-organised-by:hover {
    border-color: rgba(1, 238, 235, .35);
    background: var(--gea-surface);
}
.gea-organised-by .gea-avatar {
    border-radius: var(--gea-radius-md);    /* match parent radius scale */
}
.gea-organised-by__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: var(--gea-space-1);
}
.gea-organised-by__label {
    font-size: var(--gea-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    color: var(--gea-text-subtle);
    line-height: 1;
}
.gea-organised-by__name {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-xs);
    color: var(--gea-text);
    line-height: var(--gea-leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gea-organised-by--md {
    padding: var(--gea-space-1-5) var(--gea-space-4) var(--gea-space-1-5) var(--gea-space-1-5);
    border-radius: var(--gea-radius-lg);
}
.gea-organised-by--md .gea-organised-by__name { font-size: var(--gea-text-sm); }
.gea-organised-by--md .gea-avatar { border-radius: var(--gea-radius-md); }