/* GEA · Cards — generic, news, match, team, player, tournament, job */

.gea-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xl);
    /* overflow visible by default so child popovers/dropdowns can escape.
       Media clipping is handled on .gea-card__media itself. Add the
       --clip modifier when a card needs to crop its inner content. */
    transition: border-color .2s var(--gea-ease-out), box-shadow .2s var(--gea-ease-out), transform .2s var(--gea-ease-out);
}
.gea-card--clip { overflow: hidden; }
.gea-card--interactive { cursor: pointer; }
.gea-card--interactive:hover {
    border-color: var(--gea-border-strong);
    box-shadow: var(--gea-shadow-lg);
    transform: translateY(-2px);
}
.gea-card--featured { border-color: rgba(1,238,235,.32); box-shadow: var(--gea-glow-brand); }

.gea-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--gea-space-5); border-bottom: 1px solid var(--gea-border-subtle); }
.gea-card__title  { font-size: var(--gea-text-lg); font-weight: var(--gea-weight-semibold); color: var(--gea-text); }
.gea-card__body   { padding: var(--gea-space-5); display: flex; flex-direction: column; gap: var(--gea-space-3); flex: 1; }
.gea-card__footer { padding: var(--gea-space-4) var(--gea-space-5); border-top: 1px solid var(--gea-border-subtle); display: flex; align-items: center; justify-content: space-between; }
.gea-card__media  { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--gea-surface); border-top-left-radius: inherit; border-top-right-radius: inherit; }
.gea-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--gea-ease-out); }
.gea-card--interactive:hover .gea-card__media img { transform: scale(1.04); }

/* NEWS */
.gea-news {
    display: flex; flex-direction: column;
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xl); overflow: hidden;
    transition: border-color .2s var(--gea-ease-out), transform .2s var(--gea-ease-out), box-shadow .2s var(--gea-ease-out);
    cursor: pointer;
}
.gea-news:hover { border-color: var(--gea-border-strong); transform: translateY(-2px); box-shadow: var(--gea-shadow-md); }
.gea-news__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--gea-surface); }
.gea-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--gea-ease-out); }
.gea-news:hover .gea-news__media img { transform: scale(1.04); }
.gea-news__cat {
    position: absolute; top: 12px; left: 12px;
    height: 22px; padding: 0 8px;
    background: var(--gea-brand-500); color: var(--gea-text-on-brand);
    font-size: var(--gea-text-2xs); font-weight: var(--gea-weight-bold);
    text-transform: uppercase; letter-spacing: var(--gea-tracking-wider);
    border-radius: var(--gea-radius-xs);
    display: inline-flex; align-items: center;
}

/* Logo variant — when the category corresponds to a game, drop the cyan
   text pill in favour of a compact dark badge that frames the game logo. */
.gea-news__cat--logo {
    height: 32px; width: 32px; padding: 4px;
    background: rgba(10, 12, 14, 0.72);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gea-radius-md);
    color: inherit;
    text-transform: none; letter-spacing: normal;
    justify-content: center;
}
.gea-news__body { padding: var(--gea-space-5); display: flex; flex-direction: column; gap: var(--gea-space-2); flex: 1; }
.gea-news__title {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-lg); font-weight: var(--gea-weight-semibold);
    line-height: var(--gea-leading-snug); color: var(--gea-text);
    letter-spacing: var(--gea-tracking-tight);
}
.gea-news__excerpt { font-size: var(--gea-text-sm); color: var(--gea-text-muted); line-height: var(--gea-leading-normal); }
.gea-news__meta {
    margin-top: auto; display: flex; align-items: center; gap: var(--gea-space-3);
    padding-top: var(--gea-space-3);
    font-size: var(--gea-text-xs); color: var(--gea-text-subtle);
}
.gea-news__meta-dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; }

/* News show — full byline row used on the article hero. Always horizontal,
   icons + text always inline regardless of page font sizes. */
.gea-news__byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gea-space-3) var(--gea-space-5);
    margin-top: var(--gea-space-4);
    color: var(--gea-text-muted);
    font-size: var(--gea-text-sm);
}
.gea-news__byline-author {
    display: inline-flex;
    align-items: center;
    gap: var(--gea-space-2);
    text-decoration: none;
    color: inherit;
    transition: color .15s var(--gea-ease-out);
}
a.gea-news__byline-author:hover { color: var(--gea-brand-300); }
.gea-news__byline-name {
    color: var(--gea-text);
    font-weight: var(--gea-weight-medium);
}
a.gea-news__byline-author:hover .gea-news__byline-name { color: var(--gea-brand-300); }

.gea-news__byline-sep {
    width: 1px; height: 18px;
    background: var(--gea-border-strong);
    flex: none;
}
.gea-news__byline-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
}
.gea-news__byline-item .gea-icon {
    width: 14px; height: 14px;
    color: var(--gea-text-subtle);
    flex: none;
}

/* Like / Dislike pill buttons for news article footer. */
.gea-react {
    display: inline-flex;
    align-items: center;
    gap: var(--gea-space-2);
    height: 40px;
    padding: 0 16px;
    background: var(--gea-surface-raised);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-full);
    color: var(--gea-text);
    font-family: var(--gea-font-sans);
    font-size: var(--gea-text-sm);
    font-weight: var(--gea-weight-semibold);
    cursor: pointer;
    transition: border-color .15s var(--gea-ease-out), background-color .15s var(--gea-ease-out), color .15s var(--gea-ease-out);
}
.gea-react:hover { border-color: var(--gea-border-strong); }
.gea-react .gea-icon { width: 16px; height: 16px; }
.gea-react__count { font-family: var(--gea-font-mono); color: var(--gea-text-muted); }
.gea-react.is-active.gea-react--like {
    background: rgba(22, 217, 164, 0.12);
    border-color: var(--gea-success);
    color: var(--gea-success);
}
.gea-react.is-active.gea-react--like .gea-react__count { color: inherit; }
.gea-react.is-active.gea-react--dislike {
    background: var(--gea-danger-soft);
    border-color: var(--gea-danger);
    color: var(--gea-danger);
}
.gea-react.is-active.gea-react--dislike .gea-react__count { color: inherit; }

/* FEATURED NEWS — full-bleed image card with overlay (used at top of /news) */
.gea-news--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    aspect-ratio: auto;
}
.gea-news--featured .gea-news__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
    position: relative;
}
.gea-news--featured .gea-news__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0) 30%, var(--gea-bg-elevated) 100%);
}
.gea-news--featured .gea-news__cat {
    z-index: 2;
}
.gea-news--featured .gea-news__body {
    padding: var(--gea-space-6);
    justify-content: center;
}
.gea-news--featured .gea-news__title {
    font-size: var(--gea-text-2xl);
    line-height: var(--gea-leading-snug);
}
.gea-news--featured .gea-news__excerpt {
    font-size: var(--gea-text-md);
    margin-top: var(--gea-space-2);
}
@media (max-width: 720px) {
    .gea-news--featured { grid-template-columns: 1fr; }
    .gea-news--featured .gea-news__media { min-height: 220px; aspect-ratio: 16/9; }
}

/* NEWSLETTER STRIP — wide CTA bar to subscribe inline between news rows */
.gea-newsletter {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gea-space-5);
    padding: var(--gea-space-5) var(--gea-space-6);
    background:
        radial-gradient(800px 300px at 90% -10%, rgba(1,238,235,.15), transparent 70%),
        var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xl);
    flex-wrap: wrap;
}
.gea-newsletter__copy { flex: 1; min-width: 260px; }
.gea-newsletter__title {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-xl);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-text);
    letter-spacing: var(--gea-tracking-tight);
}
.gea-newsletter__sub {
    font-size: var(--gea-text-sm);
    color: var(--gea-text-muted);
    margin-top: 4px;
}
.gea-newsletter__form {
    display: flex; align-items: center; gap: var(--gea-space-2);
    flex: 1; min-width: 280px; max-width: 480px;
}
.gea-newsletter__form .gea-input { flex: 1; }

/* MATCH */
.gea-match {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gea-space-4);
    padding: var(--gea-space-5);
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-lg);
    transition: border-color .2s var(--gea-ease-out);
}
.gea-match:hover { border-color: var(--gea-border-strong); }
.gea-match__team { display: flex; align-items: center; gap: var(--gea-space-3); min-width: 0; width: 100%; }
.gea-match__team--right { flex-direction: row-reverse; }
.gea-match__team--right .gea-match__team-info { text-align: right; }
.gea-match__logo {
    width: 48px; height: 48px; flex: none;
    background: var(--gea-surface); border-radius: var(--gea-radius-md);
    display: grid; place-items: center; padding: 6px;
    color: var(--gea-text-muted);
}
.gea-match__logo .gea-icon { width: 100%; height: 100%; }
.gea-match__logo img { width: 100%; height: 100%; object-fit: contain; }
.gea-match__team-info { min-width: 0; flex: 1; }
.gea-match__team-name {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-md); font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gea-match__team-meta { font-size: var(--gea-text-xs); color: var(--gea-text-subtle); }
.gea-match__center {
    display: flex; flex-direction: column; align-items: center; gap: var(--gea-space-1);
    padding: 0 var(--gea-space-3);
    border-left: 1px solid var(--gea-border-subtle);
    border-right: 1px solid var(--gea-border-subtle);
    min-width: 120px;
}
.gea-match__time {
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-xl); font-weight: var(--gea-weight-bold);
    color: var(--gea-text); letter-spacing: var(--gea-tracking-tight); line-height: 1;
}
.gea-match__score {
    display: flex; align-items: center; gap: var(--gea-space-2);
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xl); font-weight: var(--gea-weight-bold);
}
.gea-match__score-sep { color: var(--gea-text-subtle); }
.gea-match__date { font-size: var(--gea-text-2xs); color: var(--gea-text-subtle); text-transform: uppercase; letter-spacing: var(--gea-tracking-wider); }
.gea-match__live {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--gea-text-2xs); font-weight: var(--gea-weight-bold);
    color: var(--gea-danger); text-transform: uppercase; letter-spacing: var(--gea-tracking-wider);
}
.gea-match__live::before {
    content: ''; width: 6px; height: 6px;
    background: var(--gea-danger); border-radius: 50%;
    animation: gea-pulse 1.4s ease-in-out infinite;
}
@keyframes gea-pulse {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,77,77,.5); }
    50%     { opacity: .85; box-shadow: 0 0 0 6px rgba(255,77,77,0); }
}

/* TEAM */
.gea-team {
    position: relative; display: flex; flex-direction: column;
    padding: var(--gea-space-6);
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-xl); overflow: hidden;
    transition: border-color .2s var(--gea-ease-out), transform .2s var(--gea-ease-out);
}
.gea-team:hover { border-color: var(--gea-brand-500); transform: translateY(-2px); }
.gea-team::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 60%;
    background: radial-gradient(ellipse at top, rgba(1,238,235,.08), transparent 60%);
    pointer-events: none;
}
.gea-team__logo {
    width: 64px; height: 64px;
    background: var(--gea-surface); border-radius: var(--gea-radius-lg);
    display: grid; place-items: center; padding: 10px;
    margin-bottom: var(--gea-space-4); position: relative;
    color: var(--gea-text-muted);
}
.gea-team__logo .gea-icon { width: 100%; height: 100%; color: var(--gea-brand-500); }
.gea-team__name {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-xl); font-weight: var(--gea-weight-bold);
    color: var(--gea-text); letter-spacing: var(--gea-tracking-tight); position: relative;
}
.gea-team__tag {
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-sm); color: var(--gea-brand-500);
    margin-top: 2px; position: relative;
}
.gea-team__meta {
    display: flex; align-items: center; gap: var(--gea-space-4);
    margin-top: var(--gea-space-4); padding-top: var(--gea-space-4);
    border-top: 1px solid var(--gea-border-subtle);
    font-size: var(--gea-text-xs); color: var(--gea-text-muted); position: relative;
}
.gea-team__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.gea-team__meta-item .gea-icon { width: 14px; height: 14px; color: var(--gea-text-subtle); }

/* PLAYER */
.gea-player {
    display: flex; align-items: center; gap: var(--gea-space-4);
    padding: var(--gea-space-4);
    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), background-color .15s var(--gea-ease-out);
}
.gea-player:hover { border-color: var(--gea-border-strong); background: var(--gea-surface); }
.gea-player__info { flex: 1; min-width: 0; }
.gea-player__name { font-size: var(--gea-text-md); font-weight: var(--gea-weight-semibold); color: var(--gea-text); display: flex; align-items: center; gap: 6px; }
.gea-player__role { font-size: var(--gea-text-xs); color: var(--gea-text-subtle); margin-top: 2px; }
.gea-player__game {
    width: 28px; height: 28px;
    background: var(--gea-surface); border-radius: var(--gea-radius-sm);
    display: grid; place-items: center; color: var(--gea-text-muted);
}
.gea-player__game .gea-icon { width: 16px; height: 16px; }
.gea-player__rating {
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-md); font-weight: var(--gea-weight-bold);
    color: var(--gea-brand-500);
}

/* TOURNAMENT */
.gea-tournament {
    position: relative;
    background: 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;
    transition: border-color .2s var(--gea-ease-out), transform .2s var(--gea-ease-out);
}
.gea-tournament:hover { border-color: var(--gea-brand-500); transform: translateY(-2px); }
.gea-tournament__banner {
    aspect-ratio: 21/9;
    background: linear-gradient(135deg, var(--gea-brand-800) 0%, var(--gea-neutral-900) 60%, var(--gea-brand-700) 100%);
    position: relative; display: grid; place-items: center; padding: var(--gea-space-6);
}
.gea-tournament__banner::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(1,238,235,.18), transparent 40%), radial-gradient(circle at 80% 30%, rgba(1,238,235,.08), transparent 40%);
}
.gea-tournament__title {
    position: relative;
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-2xl); font-weight: var(--gea-weight-bold);
    color: var(--gea-text); text-align: center;
    text-transform: uppercase; letter-spacing: var(--gea-tracking-tight);
}
.gea-tournament__body { padding: var(--gea-space-5); display: flex; flex-direction: column; gap: var(--gea-space-3); }
.gea-tournament__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gea-space-3) var(--gea-space-5); font-size: var(--gea-text-xs); color: var(--gea-text-muted); }
.gea-tournament__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.gea-tournament__meta-item .gea-icon { width: 14px; height: 14px; color: var(--gea-brand-500); }
.gea-tournament__prize {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-xl); font-weight: var(--gea-weight-bold);
    color: var(--gea-brand-500); line-height: 1;
}
.gea-tournament__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--gea-space-3); border-top: 1px solid var(--gea-border-subtle); }

/* JOB */
.gea-job {
    display: flex; flex-direction: column; gap: var(--gea-space-3);
    padding: var(--gea-space-5);
    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-job:hover { border-color: var(--gea-brand-500); }
.gea-job__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gea-space-3); }
.gea-job__title { font-size: var(--gea-text-md); font-weight: var(--gea-weight-semibold); color: var(--gea-text); }
.gea-job__company { font-size: var(--gea-text-xs); color: var(--gea-text-muted); margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; }
.gea-job__tags { display: flex; flex-wrap: wrap; gap: var(--gea-space-2); }
.gea-job__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--gea-space-3); border-top: 1px solid var(--gea-border-subtle); font-size: var(--gea-text-xs); color: var(--gea-text-subtle); }

/* ============== COLLAPSIBLE CARD ==============
   Card with a clickable header that expands/collapses the body. The
   chevron rotates 180° when open. Used for the team invite section
   where the manager toggles the "Invite a player" and "Invite staff"
   cards open one at a time. */
.gea-card--collapsible { padding: 0; }
.gea-card--collapsible .gea-card__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--gea-space-3);
    padding: var(--gea-space-4) var(--gea-space-5);
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    border-radius: var(--gea-radius-lg);
    transition: background-color .15s var(--gea-ease-out);
}
.gea-card--collapsible .gea-card__toggle:hover {
    background: rgba(255, 255, 255, .02);
}
.gea-card--collapsible[data-open="true"] .gea-card__toggle:hover {
    background: transparent;
}
.gea-card--collapsible .gea-card__toggle-lead {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--gea-radius-md);
    background: rgba(1, 238, 235, .08);
    color: var(--gea-brand-500);
}
.gea-card--collapsible .gea-card__toggle-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.gea-card--collapsible .gea-card__toggle-title {
    font-family: var(--gea-font-display);
    font-weight: var(--gea-weight-semibold);
    font-size: var(--gea-text-md);
    color: var(--gea-text);
}
.gea-card--collapsible .gea-card__toggle-sub {
    font-size: var(--gea-text-xs);
    color: var(--gea-text-subtle);
}
.gea-card--collapsible .gea-card__toggle-icon {
    flex: none;
    width: 18px; height: 18px;
    color: var(--gea-text-muted);
    transition: transform .25s var(--gea-ease-out), color .25s var(--gea-ease-out);
}
.gea-card--collapsible[data-open="true"] .gea-card__toggle-icon {
    transform: rotate(180deg);
    color: var(--gea-brand-500);
}
.gea-card--collapsible:not([data-open="true"]) .gea-card__body,
.gea-card--collapsible:not([data-open="true"]) .gea-card__footer {
    display: none !important;
}
.gea-card--collapsible[data-open="true"] {
    border-color: rgba(1, 238, 235, .25);
    box-shadow: 0 0 0 1px rgba(1, 238, 235, .08);
}

/* ============================================================
   ACHIEVEMENT BADGE CARD — single-row card showing icon + name
   + tier ribbon. Tier modifier sets the icon-tile gradient.
   .is-locked dims the whole card to ~40% so the user sees the
   shape of what's still to unlock without it shouting for
   attention. Secret unlocks render with i-lock + "???".
   ============================================================ */
.gea-badge-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gea-space-3);
    padding: var(--gea-space-4);
    background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-lg);
    transition: border-color var(--gea-duration-base) var(--gea-ease-out),
                transform var(--gea-duration-base) var(--gea-ease-out),
                box-shadow var(--gea-duration-base) var(--gea-ease-out);
}
.gea-badge-card:hover {
    border-color: var(--gea-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--gea-shadow-md);
}
.gea-badge-card.is-locked {
    opacity: .42;
    filter: saturate(.4);
}
.gea-badge-card.is-locked:hover {
    transform: none;
    box-shadow: none;
}

.gea-badge-card__icon {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--gea-radius-md);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border);
    color: var(--gea-text);
}
.gea-badge-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gea-badge-card__name {
    font-family: var(--gea-font-display);
    font-weight: var(--gea-weight-semibold);
    font-size: var(--gea-text-sm);
    color: var(--gea-text);
    line-height: var(--gea-leading-tight);
}
.gea-badge-card__sub {
    font-size: var(--gea-text-xs);
    line-height: var(--gea-leading-tight);
}
.gea-badge-card__tier {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    font-weight: var(--gea-weight-bold);
    padding: 3px 8px;
    border-radius: var(--gea-radius-full);
    color: var(--gea-text-on-brand);
}

/* Tier color schemes — applied to the icon tile + tier pill. */
.gea-badge-card--bronze .gea-badge-card__icon {
    background: linear-gradient(135deg, rgba(205, 127, 50, .25), rgba(205, 127, 50, .08));
    border-color: rgba(205, 127, 50, .45);
    color: #E5A872;
}
.gea-badge-card--bronze .gea-badge-card__tier {
    background: rgba(205, 127, 50, .85);
    color: #1a1a1a;
}

.gea-badge-card--silver .gea-badge-card__icon {
    background: linear-gradient(135deg, rgba(192, 192, 200, .28), rgba(192, 192, 200, .08));
    border-color: rgba(192, 192, 200, .45);
    color: #DEDEE6;
}
.gea-badge-card--silver .gea-badge-card__tier {
    background: rgba(220, 220, 230, .92);
    color: #1a1a1a;
}

.gea-badge-card--gold .gea-badge-card__icon {
    background: linear-gradient(135deg, rgba(255, 195, 0, .28), rgba(255, 195, 0, .08));
    border-color: rgba(255, 195, 0, .55);
    color: #FFD24D;
}
.gea-badge-card--gold .gea-badge-card__tier {
    background: linear-gradient(135deg, #FFD24D, #FFB020);
    color: #1a1a1a;
}

.gea-badge-card--legendary .gea-badge-card__icon {
    background: linear-gradient(135deg, var(--gea-brand-500), rgba(1, 238, 235, .15));
    border-color: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
}
.gea-badge-card--legendary .gea-badge-card__tier {
    background: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
}
.gea-badge-card--legendary {
    box-shadow: 0 0 0 1px rgba(1, 238, 235, .2), 0 8px 24px -8px rgba(1, 238, 235, .35);
}
/* ============== USE-CASE GRID ==============
   2-col grid of organizer feature cards on the Become Organizer page.
   Each card has copy on top, screenshot below — collapses to 1 col under 720px. */
.gea-usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gea-space-5);
}
@media (max-width: 720px) {
    .gea-usecase-grid { grid-template-columns: 1fr; }
}

.gea-usecase {
    background: var(--gea-surface-1);
    border: 1px solid var(--gea-border-2);
    border-radius: var(--gea-radius-lg);
    padding: var(--gea-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--gea-space-4);
    transition: border-color .2s, transform .2s;
}
.gea-usecase:hover {
    border-color: var(--gea-brand-700, rgba(1,238,235,.4));
    transform: translateY(-2px);
}

.gea-usecase__copy { display: flex; flex-direction: column; gap: var(--gea-space-2); }
.gea-usecase__title {
    font-family: var(--gea-font-display, inherit);
    font-size: var(--gea-text-lg);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.gea-usecase__body {
    font-size: var(--gea-text-sm);
    color: var(--gea-text-muted);
    line-height: var(--gea-leading-relaxed, 1.65);
    margin: 0;
}

.gea-usecase__media {
    margin-top: auto;
    border-radius: var(--gea-radius-md);
    background: var(--gea-bg, #07090c);
    border: 1px solid var(--gea-border-2);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.gea-usecase__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Empty placeholder state — when image fails to load */
.gea-usecase__media.is-empty img { display: none; }
.gea-usecase__media.is-empty {
    border-style: dashed;
    background:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(1,238,235,.04) 8px 9px),
        var(--gea-bg);
}
.gea-usecase__media.is-empty::before {
    content: '🖼  Drop your screenshot here';
    color: var(--gea-text-subtle);
    font-size: var(--gea-text-sm);
    font-family: var(--gea-font-mono, monospace);
}

/* ============== STATS BANNER ==============
   Wide hero-style card with background image, brand block left,
   3 stats right. Used at the bottom of the Become Organizer page. */
.gea-stats-banner {
    border-radius: var(--gea-radius-lg);
    padding: clamp(var(--gea-space-5), 5vw, var(--gea-space-8));
    background-color: var(--gea-surface-1);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--gea-border-2);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gea-space-6);
    align-items: center;
    min-height: 220px;
}
@media (max-width: 720px) {
    .gea-stats-banner {
        grid-template-columns: 1fr;
        padding: var(--gea-space-5);
    }
}

.gea-stats-banner__brand { display: flex; gap: var(--gea-space-4); align-items: flex-start; }
.gea-stats-banner__logo {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: contain;
}
.gea-stats-banner__copy { display: flex; flex-direction: column; }
.gea-stats-banner__title {
    margin: 0;
    font-family: var(--gea-font-display, inherit);
    font-size: clamp(var(--gea-text-xl), 2.5vw, 28px);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.gea-stats-banner__sub {
    margin: var(--gea-space-2) 0 0;
    color: var(--gea-text-muted);
    font-size: var(--gea-text-sm);
    max-width: 50ch;
}

.gea-stats-banner__stats {
    display: flex;
    gap: var(--gea-space-6);
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .gea-stats-banner__stats { gap: var(--gea-space-4); }
}
.gea-stats-banner__stat { display: flex; flex-direction: column; gap: 2px; }
.gea-stats-banner__num {
    font-family: var(--gea-font-display, inherit);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: var(--gea-weight-bold);
    color: var(--gea-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.gea-stats-banner__lbl {
    font-size: var(--gea-text-2xs);
    color: var(--gea-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ============== BRAND-EDGE CARD ==============
   Subscription card variant with cyan top border for emphasis. */
.gea-card.gea-card--brand-edge {
    border-top: 2px solid var(--gea-brand-500, #01EEEB);
}

/* ============== USE-CASE ILLUSTRATIONS ==============
   Self-contained design-system mockups inside each .gea-usecase card.
   No external images — all built from GEA tokens (colour, spacing, fonts).
   Each .gea-illu--* variant is a small, themed cameo of a real product
   surface (bracket, check-in row, stream overlay, Discord embed, etc.). */

.gea-illu {
    background: linear-gradient(160deg, #0a0f15 0%, #07090c 100%);
    border-color: var(--gea-border-2);
    overflow: hidden;
    padding: var(--gea-space-4);
    align-items: stretch;
    justify-content: stretch;
    position: relative;
}
.gea-illu::before { content: none !important; }

.gea-illu__panel {
    background: var(--gea-surface-1, #131a22);
    border: 1px solid var(--gea-border-2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 12px 40px -16px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
}
.gea-illu__panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 6px; border-bottom: 1px solid var(--gea-border-2);
}
.gea-illu__panel-title {
    font-size: 11px; font-weight: 700; color: var(--gea-text);
    letter-spacing: 0.02em;
}
.gea-illu__panel-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: center;
}
.gea-illu__label { font-size: 10px; color: var(--gea-text-muted); }
.gea-illu__field {
    background: #07090c;
    border: 1px solid var(--gea-border-2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--gea-text);
    font-family: var(--gea-font-mono, monospace);
}
.gea-illu__pill {
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--gea-border-2);
    color: var(--gea-text-muted);
    background: #07090c;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gea-illu__pill--brand {
    background: rgba(1,238,235,.12);
    border-color: rgba(1,238,235,.4);
    color: #01EEEB;
}
.gea-illu__pill--ok {
    background: rgba(46,160,67,.12);
    border-color: rgba(46,160,67,.4);
    color: #4ed27a;
}
.gea-illu__btn {
    align-self: flex-start;
    background: #01EEEB;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    margin-top: 4px;
}
.gea-illu__btn--brand { background: #01EEEB; color: #000; }
.gea-illu__teamlogo {
    width: 24px; height: 24px; flex: 0 0 auto;
    background: linear-gradient(135deg, #1f2933, #0d1117);
    border: 1px solid var(--gea-border-2);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
    color: var(--gea-brand-300, #01EEEB);
}
.gea-illu__teamlogo--lg { width: 38px; height: 38px; font-size: 16px; }
.gea-illu__teamname { font-size: 11px; font-weight: 600; color: var(--gea-text); flex: 1; }
.gea-illu__teamrow {
    display: flex; align-items: center; gap: 8px;
    background: #07090c;
    border: 1px solid var(--gea-border-2);
    border-radius: 8px;
    padding: 6px 8px;
}

/* === 1. Bracket / Schedule === */
.gea-illu--bracket .gea-illu__bracket {
    position: absolute; inset: 12px auto 12px 12px;
    width: 38%;
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0.6;
}
.gea-illu__match {
    background: rgba(13,17,23,.85);
    border: 1px solid var(--gea-border-2);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px;
    color: var(--gea-text);
}
.gea-illu__match.is-loser { opacity: 0.55; }
.gea-illu__match b {
    font-family: var(--gea-font-mono, monospace);
    font-weight: 700;
    color: #01EEEB;
}
.gea-illu--bracket .gea-illu__panel--schedule {
    position: absolute; right: 12px; top: 16px; bottom: 16px;
    width: 56%;
    z-index: 2;
}

/* === 2. Branded organizer profile === */
.gea-illu--brand { padding: 0; }
.gea-illu__banner {
    height: 50%;
    background:
        radial-gradient(circle at 20% 100%, rgba(1,238,235,.45) 0%, transparent 60%),
        linear-gradient(135deg, #0d1f2a 0%, #051319 60%, #0a1014 100%);
    position: relative;
}
.gea-illu__banner::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(1,238,235,.06) 0 1px, transparent 1px 12px);
    opacity: 0.5;
}
.gea-illu--brand .gea-illu__avatar {
    position: absolute;
    left: 24px;
    top: calc(50% - 28px);
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #01EEEB, #0099aa);
    border-radius: 50%;
    border: 3px solid #07090c;
    display: grid; place-items: center;
    font-weight: 900; font-size: 22px;
    color: #000;
    z-index: 2;
}
.gea-illu__brand-meta {
    position: absolute;
    inset: auto 16px 16px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.gea-illu__brand-name {
    font-size: 14px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
}
.gea-illu__verified { width: 14px; height: 14px; color: #01EEEB; display: inline-flex; }
.gea-illu__verified svg { width: 100%; height: 100%; }
.gea-illu__brand-sub { font-size: 10px; color: var(--gea-text-muted); }
.gea-illu__chips { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.gea-illu__chip {
    font-size: 9px; padding: 3px 8px;
    background: rgba(1,238,235,.08);
    border: 1px solid rgba(1,238,235,.3);
    border-radius: 999px;
    color: #01EEEB;
    font-weight: 600;
}

/* === 3. Match check-in === */
.gea-illu--checkin .gea-illu__panel { width: 100%; height: 100%; border-radius: 10px; }

/* === 4. Stream overlay / OBS === */
.gea-illu--stream { padding: 0; }
.gea-illu__broadcast { position: relative; width: 100%; height: 100%; overflow: hidden; }
.gea-illu__broadcast-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(40,80,120,.6) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(20,30,60,.6) 0%, transparent 50%),
        linear-gradient(160deg, #0a1018 0%, #050810 100%);
}
.gea-illu__broadcast-bg::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
}
.gea-illu__overlay {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px;
    background: rgba(7,9,12,.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(1,238,235,.3);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.gea-illu__overlay-side { display: flex; align-items: center; gap: 10px; }
.gea-illu__overlay-vs {
    font-size: 10px; font-weight: 700; color: var(--gea-text-muted);
    letter-spacing: 0.2em;
}
.gea-illu__score {
    font-family: var(--gea-font-mono, monospace);
    font-size: 22px; font-weight: 800;
    color: #fff;
    min-width: 18px; text-align: center;
}
.gea-illu__broadcast-cap {
    position: absolute;
    bottom: 12px; left: 12px; right: 12px;
    text-align: center;
    font-size: 10px;
    color: var(--gea-text-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* === 5. Discord webhook embed === */
.gea-illu--discord {
    background: #36393f;
    padding: var(--gea-space-4);
}
.gea-illu__discord-msg { display: flex; gap: 10px; color: #dcddde; }
.gea-illu__bot-avatar {
    width: 36px; height: 36px; flex: 0 0 auto;
    background: linear-gradient(135deg, #01EEEB, #0099aa);
    border-radius: 50%;
    display: grid; place-items: center;
    color: #000; font-weight: 900; font-size: 16px;
}
.gea-illu__discord-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gea-illu__discord-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.gea-illu__discord-head strong { color: #fff; }
.gea-illu__discord-tag {
    background: #5865f2; color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px;
    letter-spacing: 0.04em;
}
.gea-illu__discord-time { font-size: 10px; color: #a3a6aa; }
.gea-illu__embed {
    margin-top: 4px;
    background: #2f3136;
    border-left: 4px solid #01EEEB;
    border-radius: 4px;
    padding: 10px 12px;
    color: #dcddde;
    display: flex; flex-direction: column; gap: 4px;
}
.gea-illu__embed-title { font-size: 12px; font-weight: 700; color: #fff; }
.gea-illu__embed-sub { font-size: 11px; color: #b9bbbe; }

/* === 6. Analytics === */
.gea-illu--analytics {
    flex-direction: column;
    gap: var(--gea-space-3);
    justify-content: flex-start;
}
.gea-illu__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}
.gea-illu__kpi {
    background: var(--gea-surface-1);
    border: 1px solid var(--gea-border-2);
    border-radius: 8px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
    align-items: flex-start;
}
.gea-illu__kpi-num {
    font-family: var(--gea-font-display, inherit);
    font-size: 20px; font-weight: 800;
    color: var(--gea-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.gea-illu__kpi-lbl {
    font-size: 9px; color: var(--gea-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600;
}
.gea-illu__chart {
    width: 100%; flex: 1;
    background: var(--gea-surface-1);
    border: 1px solid var(--gea-border-2);
    border-radius: 8px;
    padding: 8px;
    display: flex; align-items: stretch;
}
.gea-illu__chart svg { width: 100%; height: 100%; }

/* ============== STAT CARD ==============
   Compact KPI tile used on the admin Security & Operations dashboard.
   Stack: label (overline) → big number → small subtitle. */
.gea-stat-card {
    background: var(--gea-surface-1);
    border: 1px solid var(--gea-border-2);
    border-radius: var(--gea-radius-md);
    padding: var(--gea-space-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gea-stat-card__lbl {
    font-size: var(--gea-text-xs);
    color: var(--gea-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.gea-stat-card__num {
    font-family: var(--gea-font-display, inherit);
    font-size: 32px;
    font-weight: 800;
    color: var(--gea-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.gea-stat-card__sub {
    font-size: var(--gea-text-2xs);
    color: var(--gea-text-subtle);
    margin-top: 2px;
}