/* ==========================================================================
   SWITCH GAMERS — Design System
   Black + Gold + White. Gold is an accent, never a wash.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --sg-black:        #080808;
    --sg-bg:           #111111;
    --sg-charcoal:     #1A1A1A;
    --sg-charcoal-2:   #232323;
    --sg-gold:         #D4A017;
    --sg-gold-bright:  #F5C542;
    --sg-gold-deep:    #9A6B00;
    --sg-white:        #FFFFFF;
    --sg-gray-light:   #F4F4F4;
    --sg-gray-text:    #666666;

    /* Semantic — light surfaces */
    --surface:         #FFFFFF;
    --surface-sunken:  #F7F7F8;
    --surface-raised:  #FFFFFF;
    --border:          #E4E4E7;
    --border-strong:   #D0D0D5;
    --text:            #14141A;
    --text-muted:      #6B6B76;
    --text-subtle:     #74747F;   /* 4.62:1 on white — AA for body text */

    /* Semantic — dark surfaces (used inside .sg-dark blocks) */
    --dark-surface:      #161616;
    --dark-surface-2:    #1E1E1E;
    --dark-border:       #2A2A2A;
    --dark-border-gold:  rgba(212, 160, 23, 0.28);
    --dark-text:         #F2F2F4;
    --dark-text-muted:   #9A9AA4;

    /* Status */
    --success:      #1E9E62;
    --success-bg:   #E7F6EF;
    --warning:      #C77A0A;
    --warning-bg:   #FDF3E2;
    --danger:       #C93A32;
    --danger-bg:    #FCECEB;
    --info:         #2C72C7;
    --info-bg:      #E9F1FC;
    --live:         #E23D33;

    /* Typography */
    --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* Geometry — tight radii keep the esports edge */
    --radius:    4px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(8, 8, 8, 0.06);
    --shadow:    0 2px 8px rgba(8, 8, 8, 0.08);
    --shadow-lg: 0 12px 32px rgba(8, 8, 8, 0.14);
    --shadow-gold: 0 6px 24px rgba(212, 160, 23, 0.25);

    --header-h: 72px;
    --container: 1280px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    margin: 0 0 var(--sp-3);
    text-transform: uppercase;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--sg-gold-deep); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

strong { font-weight: 650; }
small { font-size: 0.8125rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

/* Visible focus for keyboard users only (spec 72). */
:focus-visible {
    outline: 3px solid var(--sg-gold);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; top: -100px; left: var(--sp-4);
    z-index: 999; padding: var(--sp-3) var(--sp-4);
    background: var(--sg-gold); color: var(--sg-black);
    font-weight: 700; border-radius: var(--radius);
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: var(--sg-black); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}
.container-narrow { max-width: 820px; }
.container-wide   { max-width: 1520px; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-sm { padding-block: clamp(2rem, 4vw, 3rem); }

.sg-dark {
    background: var(--sg-bg);
    color: var(--dark-text);
    --surface: var(--dark-surface);
    --surface-sunken: var(--sg-black);
    --surface-raised: var(--dark-surface-2);
    --border: var(--dark-border);
    --border-strong: #383838;
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --text-subtle: #7A7A84;
}
.sg-dark h1, .sg-dark h2, .sg-dark h3, .sg-dark h4 { color: var(--dark-text); }
.sg-dark a:hover { color: var(--sg-gold-bright); }

.sg-black { background: var(--sg-black); }
.sg-sunken { background: var(--surface-sunken); }

.grid { display: grid; gap: var(--sp-5); }
/* Grid items default to min-width:auto, which lets a wide child (a bracket, a
   table) stretch its track and push the whole page into horizontal scroll.
   Scrollable children handle their own overflow instead. */
.grid > *, .grid-sidebar > *, .grid-versus > *, .grid-auto > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Main content + sidebar. A class rather than an inline style so the
   responsive collapse below can actually take effect — inline
   grid-template-columns would win over any media query. */
.grid-sidebar {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
}

/* Player A — score — player B */
.grid-versus {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-start { display: flex; align-items: center; gap: var(--sp-3); }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.section-head > div { min-width: 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 0.875rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sg-gold-deep);
    margin-bottom: var(--sp-2);
}
.sg-dark .eyebrow { color: var(--sg-gold); }
.eyebrow::before {
    content: ''; width: 24px; height: 2px;
    background: var(--sg-gold); flex: none;
}

.section-title { margin: 0; }
.section-lede {
    color: var(--text-muted); max-width: 62ch; margin-top: var(--sp-3);
    font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--sg-charcoal);
    --btn-fg: var(--sg-white);
    --btn-bd: var(--sg-charcoal);
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: 0.8rem 1.6rem;
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    line-height: 1;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 2px solid var(--btn-bd);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
                background-color 0.16s var(--ease), border-color 0.16s var(--ease),
                color 0.16s var(--ease);
    white-space: nowrap;
    text-align: center;
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; transform: none !important;
}

.btn-gold {
    --btn-bg: var(--sg-gold);
    --btn-fg: var(--sg-black);
    --btn-bd: var(--sg-gold);
    background-color: var(--sg-gold);
    background-image: linear-gradient(135deg, var(--sg-gold-bright), var(--sg-gold));
}
.btn-gold:hover { box-shadow: var(--shadow-gold); color: var(--sg-black); }

.btn-outline {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
}
.btn-outline:hover { --btn-bd: var(--sg-gold); color: var(--text); }

.btn-outline-gold {
    --btn-bg: transparent;
    --btn-fg: var(--sg-gold);
    --btn-bd: var(--sg-gold);
}
.btn-outline-gold:hover { background: var(--sg-gold); color: var(--sg-black); }

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text-muted);
    --btn-bd: transparent;
    padding-inline: var(--sp-3);
}
.btn-ghost:hover { --btn-fg: var(--text); background: var(--surface-sunken); }

.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn-success { --btn-bg: var(--success); --btn-fg: #fff; --btn-bd: var(--success); }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 1.05rem 2.25rem; font-size: 1.125rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0.6rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    position: relative;
}
.card-flush { padding: 0; overflow: hidden; }
.card-hover { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--sg-gold);
}
.sg-dark .card { border-color: var(--dark-border); }
.sg-dark .card-hover:hover { border-color: var(--dark-border-gold); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }

.card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.card-header h3, .card-header h4 { margin: 0; }
.card-body { padding: var(--sp-5); }
.card-footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
}

/* Gold top rule marks a featured card without flooding it with colour. */
.card-featured::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--sg-gold-deep), var(--sg-gold-bright), var(--sg-gold-deep));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* --------------------------------------------------------------------------
   7. Badges & pills
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-family: var(--font-display);
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    line-height: 1;
    border-radius: var(--radius);
    background: var(--surface-sunken); color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge-gold    { background: rgba(212,160,23,0.14); color: var(--sg-gold-deep); border-color: rgba(212,160,23,0.35); }
.badge-success { background: var(--success-bg); color: var(--success); border-color: rgba(30,158,98,0.3); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(199,122,10,0.3); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(201,58,50,0.3); }
.badge-info    { background: var(--info-bg);    color: var(--info);    border-color: rgba(44,114,199,0.3); }
.badge-muted   { background: var(--surface-sunken); color: var(--text-subtle); }
.badge-dark    { background: var(--sg-charcoal); color: var(--sg-white); border-color: var(--sg-charcoal); }

.sg-dark .badge { background: rgba(255,255,255,0.06); color: var(--dark-text-muted); border-color: var(--dark-border); }
.sg-dark .badge-gold { background: rgba(212,160,23,0.18); color: var(--sg-gold-bright); border-color: rgba(212,160,23,0.4); }
.sg-dark .badge-success { background: rgba(30,158,98,0.18); color: #4FD39A; border-color: rgba(30,158,98,0.4); }
.sg-dark .badge-danger  { background: rgba(201,58,50,0.18); color: #F08078; border-color: rgba(201,58,50,0.4); }
.sg-dark .badge-warning { background: rgba(199,122,10,0.18); color: #F0B454; border-color: rgba(199,122,10,0.4); }

/* Live indicator with a pulsing dot. */
.badge-live {
    background: rgba(226,61,51,0.14); color: var(--live);
    border-color: rgba(226,61,51,0.4);
}
.badge-live::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--live); animation: sg-pulse 1.8s ease-in-out infinite;
}
@keyframes sg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

/* --------------------------------------------------------------------------
   8. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    background: rgba(8, 8, 8, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.site-header .container {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand img { height: 42px; width: auto; }
.brand-text {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--sg-white); line-height: 1;
}
.brand-text span { color: var(--sg-gold); }

.main-nav { display: flex; align-items: center; gap: 0.35rem; }
.main-nav a {
    position: relative;
    padding: 0.55rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    border-radius: var(--radius);
    transition: color 0.16s var(--ease);
    white-space: nowrap;
}
.main-nav a:hover { color: var(--sg-white); }
.main-nav a.is-active { color: var(--sg-gold); }
.main-nav a.is-active::after {
    content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0;
    height: 2px; background: var(--sg-gold);
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.nav-toggle {
    display: none;
    background: none; border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    padding: 0.5rem; cursor: pointer;
    color: var(--sg-white);
}

/* Notification bell */
.bell { position: relative; display: inline-flex; padding: 0.5rem; color: rgba(255,255,255,0.8); }
.bell:hover { color: var(--sg-gold); }
.bell-count {
    position: absolute; top: 2px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--sg-gold); color: var(--sg-black);
    font-size: 0.6875rem; font-weight: 700;
    border-radius: var(--radius-pill);
    line-height: 1;
}

/* Avatar */
.avatar {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: none;
    border-radius: 50%;
    background-color: var(--sg-gold);
    background-image: linear-gradient(135deg, var(--sg-gold), var(--sg-gold-deep));
    color: var(--sg-black);
    font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    border: 2px solid rgba(212,160,23,0.5);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; font-size: 0.75rem; border-width: 1px; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar-xl { width: 112px; height: 112px; font-size: 2.25rem; border-width: 3px; }

/* User menu */
.user-menu { position: relative; }
.user-menu-trigger {
    display: flex; align-items: center; gap: var(--sp-2);
    background: none; border: 0; cursor: pointer; padding: 0.25rem;
    color: var(--sg-white); font: inherit;
}
.user-menu-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 230px;
    background: var(--sg-charcoal);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    display: none;
    z-index: 120;
}
.user-menu-panel.is-open { display: block; }
.user-menu-panel a, .user-menu-panel button {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; padding: 0.6rem 0.75rem;
    color: rgba(255,255,255,0.82); font-size: 0.9375rem;
    background: none; border: 0; cursor: pointer; text-align: left;
    border-radius: var(--radius); font-family: inherit;
}
.user-menu-panel a:hover, .user-menu-panel button:hover {
    background: rgba(255,255,255,0.07); color: var(--sg-gold);
}
.user-menu-divider { height: 1px; background: rgba(255,255,255,0.1); margin: var(--sp-2) 0; }
.user-menu-head { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: var(--sp-2); }
.user-menu-head strong { display: block; color: var(--sg-white); font-family: var(--font-display); letter-spacing: 0.04em; }
.user-menu-head span { font-size: 0.8125rem; color: rgba(255,255,255,0.5); }

/* Mobile drawer */
.mobile-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--sg-black);
    padding: var(--sp-5);
    overflow-y: auto;
    z-index: 99;
    display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
    display: block; padding: var(--sp-4) 0;
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav a.is-active { color: var(--sg-gold); }
.mobile-nav .btn-group { margin-top: var(--sp-5); }

/* Bottom tab bar for phones (spec 71) */
.tab-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    background: rgba(8,8,8,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom));
}
.tab-bar-inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.tab-bar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0.45rem 0.25rem;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
    color: rgba(255,255,255,0.6);
}
.tab-bar a.is-active { color: var(--sg-gold); }
.tab-bar svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--sg-black);
    color: var(--sg-white);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: 0;                 /* the render bleeds to the band edge */
    overflow: hidden;
}
/* Angular panel artwork sits behind everything, then a hex mesh for texture,
   then a radial glow. Three cheap layers instead of one heavy photograph. */
.hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('../img/art/hero-panels.svg');
    background-size: cover;
    background-position: center right;
    pointer-events: none;
}
.hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 56px 96px;
    opacity: 0.5;
    mask-image: radial-gradient(circle at 50% 40%, #000 8%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 8%, transparent 78%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: end;
    /* Sized so the copy nearly fills the row. A taller row left a band of dead
       space above and below the text that read as a layout mistake. */
    min-height: clamp(380px, 38vw, 540px);
}
.hero-copy {
    align-self: center;
    padding-bottom: clamp(0.75rem, 2vw, 1.75rem);
}

.hero-title {
    font-size: clamp(2.75rem, 7.5vw, 5.5rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: 0.005em;
    margin-bottom: var(--sp-4);
    color: var(--sg-white);
}
.hero-title .gold { color: var(--sg-gold); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title .gold {
        background-image: linear-gradient(135deg, var(--sg-gold-bright) 10%, var(--sg-gold) 55%, var(--sg-gold-deep));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--sg-gold);
    margin-bottom: var(--sp-5);
}
.hero-lede {
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    color: rgba(255,255,255,0.76);
    max-width: 52ch; margin-bottom: var(--sp-6);
}
.hero-logo { max-width: 460px; margin-inline: auto; filter: drop-shadow(0 18px 44px rgba(212,160,23,0.28)); }

/* ── Hero figure: game mark behind, character render in front ──────────────
   The render is anchored to the bottom of the hero so it bleeds off the edge
   rather than floating in a box. .hero keeps overflow:hidden, which crops it
   cleanly against the next section. */
/* Empty spacer: it reserves the column the render occupies so the copy never
   runs underneath it. */
.hero-figure {
    min-height: clamp(380px, 38vw, 540px);
}

/* Bounded by the figure's height rather than its width. Sizing by width let the
   render grow past the column and clip the game mark off the right edge, and
   spill down over the counters. Height-bound keeps the whole composition in
   frame at every viewport. */
/* Spans the full height of the band and is right-aligned to the container
   edge, so the figure stands on the floor of the hero the way key art should.
   Sized by height, which is what makes it fill the band rather than sit in a
   box the way a width-constrained image does. */
.hero-render {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--container));
    padding-inline: var(--sp-5);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 1;
    pointer-events: none;
}
.hero-render picture { display: block; height: 100%; }
.hero-render img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;                   /* height drives the size, not width */
    filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.8));
}

/* Gold halo so the cut-out reads as lit rather than pasted on. */
.hero-render::before {
    content: '';
    position: absolute;
    right: 8%; bottom: 6%;
    width: min(46%, 520px); aspect-ratio: 1;
    background: radial-gradient(circle, rgba(212, 160, 23, 0.34), transparent 66%);
    filter: blur(34px);
    z-index: -1;
}

.hero-mark {
    position: absolute;
    top: 0; right: 0;
    width: min(46%, 340px);
    z-index: 1;
    opacity: 0.95;
    pointer-events: none;
}
.hero-mark picture, .hero-mark img {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7));
}

/* Live counters strip under the hero */
.hero-stats {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: repeat(4, 1fr);
    column-gap: var(--sp-4); row-gap: var(--sp-6);
    margin-top: 0;
    padding-top: var(--sp-6);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(to top, var(--sg-black) 62%, transparent);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800;
    line-height: 1; color: var(--sg-gold);
}
.hero-stat-label {
    font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin-top: 0.4rem;
    line-height: 1.35;
    text-wrap: balance;
}
.hero-stats > * { min-width: 0; }

/* --------------------------------------------------------------------------
   10. Stat tiles
   -------------------------------------------------------------------------- */
.stat-tile {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    position: relative;
    overflow: hidden;
}
.stat-tile-accent::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--sg-gold);
}
.stat-label {
    font-family: var(--font-display);
    font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800;
    line-height: 1; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat-value.gold { color: var(--sg-gold-deep); }
.sg-dark .stat-value.gold { color: var(--sg-gold); }
.stat-meta { font-size: 0.8125rem; color: var(--text-subtle); margin-top: var(--sp-2); }

.delta { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 650; font-size: 0.8125rem; }
.delta-up   { color: var(--success); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}
.table-wrap > table { border: 0; margin: 0; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
thead th {
    background: var(--surface-sunken);
    font-family: var(--font-display);
    font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
}
tbody td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 0.12s var(--ease); }
tbody tr:hover { background: var(--surface-sunken); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.num-c { text-align: center; font-variant-numeric: tabular-nums; }
th.num, th.num-c { text-align: inherit; }
th.num { text-align: right; }
th.num-c { text-align: center; }

/* Rank column */
.rank {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.0625rem; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    width: 3.5rem;
}
.rank-1, .rank-2, .rank-3 {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: var(--radius);
    font-size: 0.9375rem; color: var(--sg-black);
}
.rank-1 { background: linear-gradient(135deg, var(--sg-gold-bright), var(--sg-gold)); }
.rank-2 { background: linear-gradient(135deg, #E2E2E6, #B9B9C0); }
.rank-3 { background: linear-gradient(135deg, #D6A15E, #A6743A); color: #fff; }

/* Player cell */
.player-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.player-cell-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-cell-name:hover { color: var(--sg-gold-deep); }
.sg-dark .player-cell-name:hover { color: var(--sg-gold); }
.player-cell-meta { font-size: 0.75rem; color: var(--text-subtle); }

/* Highlight the signed-in player's own row */
tr.is-you { background: rgba(212,160,23,0.09) !important; }
tr.is-you td:first-child { box-shadow: inset 3px 0 0 var(--sg-gold); }

/* Form guide W/D/L pills */
.form-guide { display: inline-flex; gap: 3px; }
.form-pill {
    display: grid; place-items: center;
    width: 21px; height: 21px; border-radius: 3px;
    font-size: 0.6875rem; font-weight: 700; color: #fff;
    font-family: var(--font-display);
}
.form-w { background: var(--success); }
.form-d { background: var(--text-subtle); }
.form-l { background: var(--danger); }

/* --------------------------------------------------------------------------
   12. Tournament cards
   -------------------------------------------------------------------------- */
.tournament-card {
    display: flex; flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
    height: 100%;
}
.tournament-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--sg-gold);
}
.tournament-banner {
    position: relative;
    aspect-ratio: 16 / 7;
    background-color: var(--sg-charcoal);
    background-image: linear-gradient(135deg, var(--sg-charcoal), var(--sg-black));
    display: grid; place-items: center;
    overflow: hidden;
}
.tournament-banner img { width: 100%; height: 100%; object-fit: cover; }
.tournament-banner::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(420px 200px at 70% 20%, rgba(212,160,23,0.22), transparent 65%);
}
.tournament-banner .badge { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }
.tournament-banner-mark { width: 68px; opacity: 0.9; position: relative; z-index: 1; }

.tournament-body { padding: var(--sp-5); flex: 1 1 auto; display: flex; flex-direction: column; }
.tournament-game {
    font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-gold-deep);
    margin-bottom: var(--sp-2);
}
.sg-dark .tournament-game { color: var(--sg-gold); }
.tournament-name {
    font-family: var(--font-display); font-size: 1.375rem; font-weight: 800;
    letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1;
    margin-bottom: var(--sp-3);
}
.tournament-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    font-size: 0.875rem; color: var(--text-muted);
    margin-bottom: var(--sp-4);
}
.tournament-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

.prize-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-4);
}
.prize-cell-label {
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle);
    margin-bottom: 0.2rem;
}
.prize-cell-value {
    font-family: var(--font-display); font-size: 1.375rem; font-weight: 800;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.prize-cell-value.gold { color: var(--sg-gold-deep); }
.sg-dark .prize-cell-value.gold { color: var(--sg-gold); }

/* Capacity bar */
.capacity { margin-bottom: var(--sp-4); }
.capacity-head {
    display: flex; justify-content: space-between;
    font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.4rem;
}
.capacity-track {
    height: 6px; background: var(--surface-sunken);
    border-radius: var(--radius-pill); overflow: hidden;
}
.sg-dark .capacity-track { background: rgba(255,255,255,0.1); }
.capacity-fill {
    height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--sg-gold), var(--sg-gold-bright));
    transition: width 0.4s var(--ease);
}
.capacity-fill.is-full { background: linear-gradient(90deg, var(--danger), #E8635B); }
.capacity-fill.is-nearly { background: linear-gradient(90deg, var(--warning), #E8A44C); }

.tournament-actions { margin-top: auto; }

/* --------------------------------------------------------------------------
   13. Match / result rows
   -------------------------------------------------------------------------- */
/* Scorecard. Deliberately dark whatever section it sits in — a result is the
   headline object on this site, and a white box beside white page made it read
   as filler. */
.match-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    background-color: #121212;
    background-image: linear-gradient(160deg, #1C1C1C 0%, #121212 58%, #0C0C0C 100%);
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
/* Hex texture, faded from the centre so the score stays clean. */
.match-row::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 48px 82px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 24%, #000 88%);
            mask-image: radial-gradient(ellipse at 50% 50%, transparent 24%, #000 88%);
    pointer-events: none;
}
/* Gold rule across the top edge. */
.match-row::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.75), transparent);
}
.match-row > * { position: relative; z-index: 1; }

.match-row:hover {
    border-color: rgba(212, 160, 23, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}

.match-side { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.match-side.away { flex-direction: row-reverse; text-align: right; }
.match-side .avatar {
    width: 42px; height: 42px; font-size: 0.9375rem; flex: none;
    border: 1px solid rgba(212, 160, 23, 0.35);
}

.match-player {
    font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
    letter-spacing: 0.03em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.18s ease;
}
.match-player:hover { color: var(--sg-white); }

/* The winner is the point of the card, so it gets the weight. */
.match-player.is-winner,
.sg-dark .match-player.is-winner {
    color: var(--sg-gold);
    text-shadow: 0 0 22px rgba(212, 160, 23, 0.4);
}
.match-side .avatar { opacity: 0.72; }
.match-side:has(.is-winner) .avatar {
    opacity: 1;
    border-color: var(--sg-gold);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.16);
}

.match-score {
    display: flex; align-items: center; gap: var(--sp-3);
    font-family: var(--font-display); font-size: 2rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 0.5rem 1.1rem;
    color: var(--sg-white);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    white-space: nowrap;
    transition: border-color 0.18s ease;
}
.match-row:hover .match-score { border-color: rgba(212, 160, 23, 0.35); }
.match-score .vs {
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(212, 160, 23, 0.8);
}

.match-meta {
    grid-column: 1 / -1;
    display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap;
    font-size: 0.75rem; letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.42);
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.match-meta a { color: rgba(255, 255, 255, 0.6); }
.match-meta a:hover { color: var(--sg-gold); }

.result-w { color: var(--success); font-weight: 700; }
.result-l { color: var(--danger); font-weight: 700; }
.result-d { color: var(--text-muted); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Bracket
   -------------------------------------------------------------------------- */
.bracket {
    display: flex; gap: var(--sp-6);
    overflow-x: auto; padding-bottom: var(--sp-5);
    -webkit-overflow-scrolling: touch;
}
.bracket-round { flex: none; width: 260px; display: flex; flex-direction: column; }
.bracket-round-title {
    font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); text-align: center;
    padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
    border-bottom: 2px solid var(--sg-gold);
}
.bracket-matches {
    display: flex; flex-direction: column;
    justify-content: space-around; gap: var(--sp-4); flex: 1;
}
.bracket-match {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-raised);
    overflow: hidden;
}
.bracket-match.is-live { border-color: var(--live); box-shadow: 0 0 0 2px rgba(226,61,51,0.16); }
.bracket-slot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
}
.bracket-slot + .bracket-slot { border-top: 1px solid var(--border); }
.bracket-slot.is-winner { background: rgba(212,160,23,0.1); font-weight: 650; }
.bracket-slot.is-winner .bracket-name { color: var(--sg-gold-deep); }
.sg-dark .bracket-slot.is-winner .bracket-name { color: var(--sg-gold); }
.bracket-name {
    font-family: var(--font-display); font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bracket-name.is-tbd { color: var(--text-subtle); font-style: italic; text-transform: none; }
.bracket-score { font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }
.bracket-seed {
    font-size: 0.6875rem; color: var(--text-subtle);
    min-width: 1.25rem; flex: none;
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--sp-4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

label, .form-label {
    display: block;
    font-size: 0.875rem; font-weight: 600;
    color: var(--text); margin-bottom: 0.4rem;
}
.form-label .req { color: var(--danger); margin-left: 0.15rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="search"], input[type="url"], select, textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: inherit; font-size: 0.9375rem;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
    appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--sg-gold);
    box-shadow: 0 0 0 3px rgba(212,160,23,0.18);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-sunken); cursor: not-allowed; opacity: 0.7;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B76' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.25rem;
}

.input-error { border-color: var(--danger) !important; }
.field-error {
    display: block; margin-top: 0.35rem;
    font-size: 0.8125rem; color: var(--danger); font-weight: 500;
}
.form-hint { display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-subtle); }

/* Checkbox / radio */
.check {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    cursor: pointer; margin-bottom: var(--sp-3);
    font-size: 0.9375rem; font-weight: 400; color: var(--text);
}
.check input[type="checkbox"], .check input[type="radio"] {
    width: 18px; height: 18px; flex: none; margin-top: 2px;
    accent-color: var(--sg-gold); cursor: pointer;
}

/* Input with a leading unit, e.g. N$ */
.input-prefix { position: relative; display: flex; align-items: center; }
.input-prefix span {
    position: absolute; left: 0.85rem;
    font-weight: 600; color: var(--text-muted); pointer-events: none;
}
.input-prefix input { padding-left: 2.5rem; }

/* Segmented filter control */
.segmented {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.segmented a, .segmented button {
    padding: 0.45rem 0.9rem;
    font-family: var(--font-display); font-size: 0.875rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
    border: 0; background: none; cursor: pointer; border-radius: 3px;
    white-space: nowrap;
}
.segmented a:hover, .segmented button:hover { color: var(--text); }
.segmented a.is-active, .segmented button.is-active {
    background: var(--sg-charcoal); color: var(--sg-white);
}
.sg-dark .segmented { background: rgba(255,255,255,0.06); }
.sg-dark .segmented a.is-active { background: var(--sg-gold); color: var(--sg-black); }

.filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.filter-bar .form-group { margin: 0; }

/* --------------------------------------------------------------------------
   16. Alerts
   -------------------------------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    font-size: 0.9375rem;
    background: var(--surface-sunken);
}
.alert-success { background: var(--success-bg); border-color: rgba(30,158,98,0.25); border-left-color: var(--success); color: #135F3C; }
.alert-error   { background: var(--danger-bg);  border-color: rgba(201,58,50,0.25);  border-left-color: var(--danger);  color: #8C2620; }
.alert-warning { background: var(--warning-bg); border-color: rgba(199,122,10,0.25); border-left-color: var(--warning); color: #7A4A06; }
.alert-info    { background: var(--info-bg);    border-color: rgba(44,114,199,0.25); border-left-color: var(--info);    color: #1D4C86; }
.alert svg { flex: none; margin-top: 2px; }
.alert-list { margin: var(--sp-2) 0 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------------------
   17. Empty & loading states (spec 52, 53)
   -------------------------------------------------------------------------- */
.empty-state {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--sp-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}
/* Faint generated texture so an empty panel still feels designed, not broken. */
.empty-state::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 56px 96px;
    opacity: 0.35;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
    pointer-events: none;
}
.empty-state > * { position: relative; z-index: 1; }

.empty-state-icon {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, rgba(212, 160, 23, 0.16), transparent 70%),
        var(--surface-raised);
    border: 1px solid rgba(212, 160, 23, 0.32);
    box-shadow: 0 0 0 6px rgba(212, 160, 23, 0.05);
    color: var(--sg-gold);
}
.empty-state h3 { margin-bottom: var(--sp-2); color: var(--text); }
.empty-state p { color: var(--text-muted); max-width: 46ch; margin-inline: auto; }
.empty-state .btn { margin-top: var(--sp-4); }

.skeleton {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    animation: sg-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius);
}
@keyframes sg-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 12px; margin-bottom: 0.6rem; }
.skeleton-line.short { width: 55%; }
.skeleton-title { height: 22px; width: 42%; margin-bottom: var(--sp-4); }

.spinner {
    width: 18px; height: 18px; flex: none;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: sg-spin 0.7s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   18. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 0.35rem; flex-wrap: wrap;
    margin-top: var(--sp-6); padding: 0; list-style: none;
}
.pagination li { margin: 0; }
.pagination a, .pagination span {
    display: grid; place-items: center;
    min-width: 40px; height: 40px; padding: 0 0.65rem;
    font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: var(--surface-raised);
}
.pagination a:hover { border-color: var(--sg-gold); color: var(--text); }
.pagination .is-current { background: var(--sg-charcoal); border-color: var(--sg-charcoal); color: var(--sg-white); }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }
.pagination-info { text-align: center; margin-top: var(--sp-3); font-size: 0.875rem; color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--sg-black);
    color: rgba(255,255,255,0.7);
    padding-block: var(--sp-8) var(--sp-5);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand img { max-width: 190px; margin-bottom: var(--sp-4); }
.footer-tagline {
    font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-gold);
    margin-bottom: var(--sp-3);
}
.footer-col h4 {
    font-size: 0.9375rem; letter-spacing: 0.12em;
    color: var(--sg-white); margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: rgba(255,255,255,0.62); font-size: 0.9375rem; }
.footer-col a:hover { color: var(--sg-gold); }

.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    padding-top: var(--sp-5);
    font-size: 0.8125rem; color: rgba(255,255,255,0.45);
}
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius); color: rgba(255,255,255,0.7);
}
.footer-social a:hover { border-color: var(--sg-gold); color: var(--sg-gold); }

/* --------------------------------------------------------------------------
   20. Dashboard & admin shell
   -------------------------------------------------------------------------- */
.app-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: calc(100vh - var(--header-h));
    align-items: start;
}

.app-sidebar {
    position: sticky; top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--sg-black);
    border-right: 1px solid rgba(255,255,255,0.07);
    padding: var(--sp-5) var(--sp-4);
}
.sidebar-section + .sidebar-section { margin-top: var(--sp-5); }
.sidebar-heading {
    font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 0 0.75rem; margin-bottom: var(--sp-3);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0.65rem 0.75rem;
    font-size: 0.9375rem; font-weight: 500;
    color: rgba(255,255,255,0.68);
    border-radius: var(--radius);
    transition: background-color 0.14s var(--ease), color 0.14s var(--ease);
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: var(--sg-white); }
.sidebar-nav a.is-active {
    background: rgba(212,160,23,0.14);
    color: var(--sg-gold);
    box-shadow: inset 2px 0 0 var(--sg-gold);
}
.sidebar-nav svg { width: 18px; height: 18px; flex: none; }
.sidebar-badge {
    margin-left: auto;
    min-width: 20px; padding: 0 6px; height: 20px;
    display: grid; place-items: center;
    background: var(--sg-gold); color: var(--sg-black);
    font-size: 0.6875rem; font-weight: 700; border-radius: var(--radius-pill);
}

.app-main { padding: var(--sp-6) var(--sp-6) var(--sp-8); min-width: 0; }

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.page-head h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0; }
.page-head p { color: var(--text-muted); margin: var(--sp-2) 0 0; }

.breadcrumb {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-size: 0.8125rem; color: var(--text-subtle);
    margin-bottom: var(--sp-3); padding: 0; list-style: none;
}
.breadcrumb li { margin: 0; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--sg-gold-deep); }

/* --------------------------------------------------------------------------
   21. Profile header
   -------------------------------------------------------------------------- */
/* Also used by partials/page-hero on every inner public page, so the artwork
   here is deliberately lighter than the homepage hero. */
.profile-hero {
    position: relative;
    background: var(--sg-black);
    color: var(--sg-white);
    padding-block: var(--sp-7);
    overflow: hidden;
    border-bottom: 1px solid rgba(212, 160, 23, 0.22);
}
.profile-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(700px 320px at 20% 10%, rgba(212, 160, 23, 0.18), transparent 65%),
        linear-gradient(115deg, transparent 58%, rgba(212, 160, 23, 0.07) 58%, rgba(212, 160, 23, 0.07) 62%, transparent 62%),
        linear-gradient(115deg, transparent 70%, rgba(212, 160, 23, 0.16) 70%, rgba(212, 160, 23, 0.16) 71.2%, transparent 71.2%);
}
.profile-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: url('../img/art/pattern-circuit.svg');
    background-size: 120px 120px;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
            mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
    pointer-events: none;
}
.profile-hero > .container { position: relative; z-index: 1; }
.profile-head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.profile-name {
    font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    line-height: 1; margin: 0 0 var(--sp-2);
}
.profile-tagline {
    font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gold);
}
.profile-meta {
    display: flex; gap: var(--sp-4); flex-wrap: wrap;
    margin-top: var(--sp-3);
    font-size: 0.875rem; color: rgba(255,255,255,0.62);
}
.profile-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* --------------------------------------------------------------------------
   22. Rating chart (inline SVG)
   -------------------------------------------------------------------------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line { fill: none; stroke: var(--sg-gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#sgRatingFill); }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { font-size: 11px; fill: var(--text-subtle); font-family: var(--font-body); }
.chart-dot { fill: var(--sg-gold); stroke: var(--surface-raised); stroke-width: 2; }
.bar { fill: var(--sg-gold); }
.bar-muted { fill: var(--border-strong); }

/* --------------------------------------------------------------------------
   23. Achievements
   -------------------------------------------------------------------------- */
.achievement {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}
.achievement.is-locked { opacity: 0.62; }
.achievement-icon {
    display: grid; place-items: center;
    width: 48px; height: 48px; flex: none;
    border-radius: var(--radius);
    background: var(--surface-sunken);
    color: var(--text-subtle);
}
.achievement.is-unlocked .achievement-icon {
    background-color: var(--sg-gold);
    background-image: linear-gradient(135deg, var(--sg-gold-bright), var(--sg-gold));
    color: var(--sg-black);
}
.achievement-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
    letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 0.15rem;
}
.achievement-desc { font-size: 0.875rem; color: var(--text-muted); }

.tier-bronze   { --tier: #B0713C; }
.tier-silver   { --tier: #A8A8B2; }
.tier-gold     { --tier: var(--sg-gold); }
.tier-platinum { --tier: #6FD3D0; }
.achievement-tier {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tier, var(--text-subtle));
}

.progress-track {
    height: 5px; background: var(--surface-sunken);
    border-radius: var(--radius-pill); overflow: hidden; margin-top: 0.5rem;
}
.progress-fill { height: 100%; background: var(--sg-gold); border-radius: var(--radius-pill); }

/* --------------------------------------------------------------------------
   24. Steps (How it works)
   -------------------------------------------------------------------------- */
.step { position: relative; padding-top: var(--sp-5); }
.step-number {
    font-family: var(--font-display); font-size: 3.25rem; font-weight: 800;
    line-height: 1; color: var(--sg-gold); opacity: 0.28;
    margin-bottom: var(--sp-2);
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--text-muted); font-size: 0.9375rem; }
.step::before {
    content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 3px;
    background: var(--sg-gold);
}

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-gold   { color: var(--sg-gold-deep); }
.sg-dark .text-gold { color: var(--sg-gold); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-white   { color: var(--sg-white); }

.font-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.font-mono { font-family: var(--font-mono); font-size: 0.875em; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.fs-sm { font-size: 0.875rem; } .fs-xs { font-size: 0.8125rem; }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }
.w-100 { width: 100%; }
.hidden { display: none !important; }

.divider { height: 1px; background: var(--border); margin-block: var(--sp-5); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { margin-bottom: var(--sp-4); }
.prose li { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   26. Responsive (spec 39, 71)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-sidebar { display: none; }
    .app-main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .grid-sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .hero { padding-bottom: var(--sp-4); }
    .hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; min-height: 0; }
    .hero-copy { padding-bottom: 0; }
    .hero-lede { margin-inline: auto; }
    .hero .btn-group { justify-content: center; }
    .hero-logo { max-width: 320px; order: -1; margin-bottom: var(--sp-5); }

    /* Stacked: the render leads, and it sits in flow so it cannot overlap
       the copy or bleed past the section. */
    .hero-figure {
        order: -1;
        min-height: 0;
        margin-bottom: var(--sp-5);
        display: flex; justify-content: center;
    }
    /* Back into normal flow, leading the stack. The centring transform and the
       height-driven sizing both have to be undone, not just the position. */
    .hero-render {
        position: static;
        transform: none;
        width: 100%;
        padding-inline: 0;
        justify-content: center;
        margin-bottom: var(--sp-5);
    }
    .hero-render::before { display: none; }
    .hero-render picture { height: auto; max-width: 100%; }
    .hero-render img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 380px;
        margin-inline: auto;
    }
    /* The spacer only exists to keep the copy clear of an absolute render. */
    .hero-figure { display: none; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

@media (max-width: 720px) {
    :root { --header-h: 62px; }

    body { padding-bottom: 68px; } /* clear the tab bar */
    .tab-bar { display: block; }

    .container { padding-inline: var(--sp-4); }

    /* Two across keeps stat tiles and short cards scannable without a scroll
       marathon. Content-heavy grids opt back out below. */
    /* Three across on a phone. Cards shed their desktop detail below rather
       than shrinking it — a compressed full card is unreadable at ~110px. */
    .grid-3, .grid-4, .grid-auto {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .grid-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }

    .form-row { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section { padding-block: var(--sp-6); }
    .brand img { height: 34px; }
    .brand-text { font-size: 1.05rem; }

    .page-head { flex-direction: column; align-items: stretch; }
    .btn-group .btn { flex: 1 1 auto; }

    .match-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); text-align: center; }
    .grid-versus { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); text-align: center; }
    .match-side, .match-side.away { flex-direction: column; text-align: center; }
    .match-score { justify-content: center; }

    .bracket-round { width: 220px; }

    /* Tables become stacked cards rather than shrinking to unreadable (spec 39) */
    .table-stack thead { display: none; }
    .table-stack tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--sp-3);
        padding: var(--sp-3);
        background: var(--surface-raised);
    }
    .table-stack tbody td {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp-4);
        border: 0; padding: 0.4rem 0;
        text-align: right;
    }
    .table-stack tbody td::before {
        content: attr(data-label);
        font-family: var(--font-display);
        font-size: 0.75rem; font-weight: 700;
        letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--text-subtle);
        text-align: left; flex: none;
    }
    .table-stack tbody td.cell-full {
        display: block; text-align: left;
        padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
        border-bottom: 1px solid var(--border);
    }
    .table-stack tbody td.cell-full::before { display: none; }
    .table-wrap:has(.table-stack) { border: 0; background: none; }

    /* The podium bar is absolutely positioned against a table cell. Once the
       table becomes a stack of cards that cell is a block and the bar lands in
       the wrong place, so the whole card takes the accent instead. */
    table:has(.rank) tbody tr:nth-child(-n+3) td:first-child::before { display: none; }
    table:has(.rank) tbody tr:nth-child(1) { border-left: 3px solid var(--sg-gold); }
    table:has(.rank) tbody tr:nth-child(2) { border-left: 3px solid #C9C9D0; }
    table:has(.rank) tbody tr:nth-child(3) { border-left: 3px solid #C08A4B; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .btn { padding: 0.75rem 1.15rem; font-size: 0.9375rem; }
    .prize-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }

    /* Brand + Log In + Sign Up + burger no longer fit on one row here. Log In
       stays reachable from the drawer and the bottom tab bar, so drop it. */
    .header-actions { gap: var(--sp-2); }
    .header-actions > .btn-ghost { display: none; }
    .site-header .container { gap: var(--sp-3); }
    .brand-text { font-size: 0.95rem; letter-spacing: 0.02em; }
    .brand img { height: 30px; }
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .app-sidebar, .tab-bar, .btn, .filter-bar { display: none !important; }
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    body { background: #fff; color: #000; }
    .card, .table-wrap { border-color: #ccc; box-shadow: none; }
}

/* ==========================================================================
   28. Artwork layers
   Decorative imagery generated by `php cli/console.php assets:build`.
   Every layer is pointer-events:none so it never intercepts a click.
   ========================================================================== */

/* Textured section backgrounds ------------------------------------------- */
.has-pattern { position: relative; isolation: isolate; }
.has-pattern > * { position: relative; z-index: 1; }
.has-pattern::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
}

.pattern-hex::before {
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 56px 96px;
    opacity: 0.6;
}
.pattern-circuit::before {
    background-image: url('../img/art/pattern-circuit.svg');
    background-size: 120px 120px;
    opacity: 0.5;
}
.pattern-hatch::before {
    background-image: url('../img/art/pattern-hatch.svg');
    background-size: 12px 12px;
    opacity: 0.5;
}

/* Fade the pattern out towards the edges so it never fights the content. */
.pattern-fade::before {
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 80%);
}

/* Arena lighting behind dark feature sections. */
.has-glow { position: relative; isolation: isolate; overflow: hidden; }
.has-glow > * { position: relative; z-index: 1; }
.has-glow::before {
    content: ''; position: absolute; inset: -20% -10% auto -10%; height: 140%;
    background-image: url('../img/art/arena-glow.svg');
    background-size: cover; background-position: center top;
    z-index: 0; pointer-events: none;
}

/* Angular chevron divider between sections ------------------------------- */
.section-divider {
    display: block; width: 100%; height: 28px;
    background-image: url('../img/art/divider-chevron.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.85;
}

/* Media frames ------------------------------------------------------------ */
.media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sg-charcoal);
    border-radius: var(--radius-lg);
}
.media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s var(--ease);
}
.media-16-9 { aspect-ratio: 16 / 9; }
.media-16-7 { aspect-ratio: 16 / 7; }
.media-2-1  { aspect-ratio: 2 / 1; }

/* Gold veil so white text always clears the artwork underneath. */
.media-veil::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,8,8,0) 30%, rgba(8,8,8,0.82) 100%);
    pointer-events: none;
}

.card-hover:hover .media img,
.tournament-card:hover .media img { transform: scale(1.05); }

/* Caption sitting over a media frame. */
/* Right-aligned so it never stacks under the wordmark baked into the
   generated cover art, which sits bottom-left. */
.media-caption {
    position: absolute; inset: auto 0 0 auto; z-index: 2;
    padding: var(--sp-4);
    max-width: 60%;
    text-align: right;
    color: var(--sg-white);
}
.media-caption .badge { margin-bottom: var(--sp-2); }

/* Game cover tile --------------------------------------------------------- */
.game-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); }
.game-tile .media { border-radius: 0; }
.game-tile-body { padding: var(--sp-5); }

/* Empty-state artwork ----------------------------------------------------- */
.empty-state-art {
    width: 132px; height: auto;
    margin: 0 auto var(--sp-4);
    opacity: 0.75;
    display: block;
}

/* Fair play report disclosure on a player profile -------------------------- */
.report-panel {
    margin-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--sp-4);
}
.report-panel > summary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer; list-style: none;
    padding: 0.35rem 0.1rem;
}
.report-panel > summary::-webkit-details-marker { display: none; }
.report-panel > summary:hover,
.report-panel[open] > summary { color: var(--sg-gold); }
.report-panel > form {
    margin-top: var(--sp-4);
    max-width: 720px;
    padding: var(--sp-5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
}
.report-panel .form-label { color: rgba(255, 255, 255, 0.8); }
.report-panel .form-hint { color: rgba(255, 255, 255, 0.45); }

/* Social strip above the header ------------------------------------------ */
.social-bar {
    background: #050505;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8125rem;
}
.social-bar .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    min-height: 38px;
}
.social-bar a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-display);
    font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.35rem 0;
}
.social-bar a:hover { color: var(--sg-gold); }
.social-bar-links { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.social-bar-note {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-display);
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap;
}
.social-bar-note svg { flex: none; }
.social-bar a svg { flex: none; }
.social-bar a span { white-space: nowrap; }

/* Feature strip ----------------------------------------------------------- */
.feature-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-5);
}
.feature {
    display: flex; gap: var(--sp-4); align-items: flex-start;
}
.feature-icon {
    display: grid; place-items: center;
    width: 46px; height: 46px; flex: none;
    border-radius: var(--radius);
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.3);
    color: var(--sg-gold);
}
.feature h4 { margin-bottom: 0.3rem; }
.feature p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* Responsive tweaks for the artwork layers -------------------------------- */
@media (max-width: 900px) {
    .hero::before { background-position: center; opacity: 0.85; }
    .section-divider { height: 18px; }
}

@media (max-width: 720px) {
    .social-bar { display: none; }          /* header stays compact on phones */
    .empty-state-art { width: 104px; }
    .media-caption { padding: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
    .media img { transition: none; }
    .card-hover:hover .media img,
    .tournament-card:hover .media img { transform: none; }
}

/* --------------------------------------------------------------------------
   29. Photography — floating frames and showcase bands
   -------------------------------------------------------------------------- */

/* A photo in a gold-rimmed frame that lifts off the page. The sources are
   small, so these are always sized at or below native resolution. */
.photo-frame {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(212, 160, 23, 0.35);
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    background: var(--sg-charcoal);
    isolation: isolate;
}
.photo-frame picture,
.photo-frame img { display: block; width: 100%; height: auto; }

/* Gold sheen sweeping across the glass. */
.photo-frame::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(115deg,
        transparent 38%,
        rgba(245, 197, 66, 0.16) 47%,
        transparent 56%);
    pointer-events: none;
}

/* Tilted variants — the "scattered" look. */
.photo-frame.tilt-left  { transform: rotate(-3deg); }
.photo-frame.tilt-right { transform: rotate(3deg); }

/* Slow drift, so the frames read as floating rather than pasted down. */
.photo-float { animation: sg-drift 7s ease-in-out infinite; will-change: transform; }
.photo-float.drift-slow  { animation-duration: 11s; }
.photo-float.drift-delay { animation-delay: -3.5s; }

@keyframes sg-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -14px, 0); }
}

/* Tilt and drift both write transform, so tilted frames get their own frames. */
.photo-frame.tilt-left.photo-float  { animation-name: sg-drift-left; }
.photo-frame.tilt-right.photo-float { animation-name: sg-drift-right; }

@keyframes sg-drift-left {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
    50%      { transform: translate3d(0, -14px, 0) rotate(-4.2deg); }
}
@keyframes sg-drift-right {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); }
    50%      { transform: translate3d(0, -14px, 0) rotate(4.2deg); }
}

/* Gold halo behind a floating photo. */
.photo-glow { position: relative; }
.photo-glow::before {
    content: '';
    position: absolute;
    inset: -18%;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(212, 160, 23, 0.34), transparent 68%);
    filter: blur(14px);
    pointer-events: none;
}

/* Circular accent cuts scattered over a dark section. */
.photo-accent {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.4), 0 18px 44px -12px rgba(0, 0, 0, 0.8);
    opacity: 0.55;
    pointer-events: none;
}
.photo-accent picture, .photo-accent img { display: block; width: 100%; height: auto; border-radius: 50%; }

/* ── Showcase band: image beside copy, full-width dark backdrop ── */
.showcase {
    position: relative;
    overflow: hidden;
    background: var(--sg-black);
    color: var(--sg-white);
    padding-block: clamp(3rem, 7vw, 5.5rem);
}
.showcase::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 56px 96px;
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 78%);
            mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 78%);
}
.showcase > .container { position: relative; z-index: 1; }

.showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.showcase-grid.is-reversed .showcase-media { order: -1; }
/* Sources top out at 512-822px wide. Capping the frame keeps them at or near
   native resolution, and a photo that does not dwarf its copy reads better. */
.showcase-media { max-width: 540px; width: 100%; justify-self: center; }

.showcase h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    margin: 0 0 var(--sp-4);
}
.showcase p { color: rgba(255, 255, 255, 0.7); max-width: 54ch; }

/* Stat strip under showcase copy. */
.showcase-figures {
    display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.showcase-figure strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800;
    color: var(--sg-gold); line-height: 1;
}
.showcase-figure span {
    display: block; margin-top: 0.35rem;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* ── Strip: a short full-bleed photo band used as a section divider ── */
.photo-strip { position: relative; overflow: hidden; background: var(--sg-black); }
.photo-strip picture, .photo-strip img {
    display: block;
    width: 100%;
    /* Kept short on purpose: it is a divider, not a section. At 300px it read
       as a band of empty space with a caption floating in it. */
    height: clamp(132px, 17vw, 210px);
    object-fit: cover;
    object-position: center;
}
.photo-strip img { filter: saturate(1.05); }
/* Below 900px the source is downscaled and stays crisp. Above it, the band is
   wider than the photograph, so a touch of blur reads as depth of field rather
   than a stretched image; the scale overscan hides the soft blur edge. */
@media (min-width: 900px) {
    .photo-strip img {
        filter: saturate(1.1) blur(1.1px);
        transform: scale(1.03);
    }
}
/* A veil on both edges keeps a modest-resolution source looking deliberate
   rather than upscaled when it is stretched full-bleed. */
.photo-strip::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, var(--sg-black) 0%, rgba(8, 8, 8, 0.32) 42%, rgba(8, 8, 8, 0.32) 58%, var(--sg-black) 100%),
        linear-gradient(to bottom, rgba(8, 8, 8, 0.55), rgba(8, 8, 8, 0.15) 45%, rgba(8, 8, 8, 0.85));
}
.photo-strip-caption {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    text-align: center;
    padding: var(--sp-5);
}
.photo-strip-caption p {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.2vw, 2.125rem); font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--sg-white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.95);
    margin: 0;
    max-width: 26ch;
    text-wrap: balance;          /* stops "SETTLED ON / THE PITCH" style breaks */
}
/* Thin gold rules either side of the caption, so the band reads as a divider
   rather than a photo someone dropped text onto. */
.photo-strip-caption p::before,
.photo-strip-caption p::after {
    content: '';
    display: block;
    width: 56px; height: 2px;
    margin: 0 auto;
    background: var(--sg-gold);
}
.photo-strip-caption p::before { margin-bottom: 0.85rem; }
.photo-strip-caption p::after  { margin-top: 0.85rem; }
.photo-strip-caption p em { font-style: normal; color: var(--sg-gold); }

@media (max-width: 900px) {
    .showcase-grid { grid-template-columns: minmax(0, 1fr); }
    .showcase-grid.is-reversed .showcase-media { order: 0; }
    .showcase-media { max-width: 460px; margin-inline: auto; }
    .photo-accent { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .photo-float { animation: none !important; }
}

/* --------------------------------------------------------------------------
   30. Ranked tables and player cards
   -------------------------------------------------------------------------- */

/* Scoped with :has() so only leaderboards get this — admin tables keep the
   plain treatment, which is right for dense data entry. */
table:has(.rank) thead th {
    background: #141414;
    color: rgba(255, 255, 255, 0.62);
    border-bottom: 2px solid rgba(212, 160, 23, 0.5);
}
table:has(.rank) tbody tr { transition: background 0.15s ease; }
table:has(.rank) tbody tr:hover { background: rgba(212, 160, 23, 0.06); }

/* The rating is what the table is actually about. */
table:has(.rank) tbody td[data-label="Rating"] {
    font-family: var(--font-display);
    font-size: 1.125rem; font-weight: 800;
    color: var(--sg-gold-deep);
}
.sg-dark table:has(.rank) tbody td[data-label="Rating"] { color: var(--sg-gold); }

/* Podium rows carry a medal bar so the top three read at a glance. */
table:has(.rank) tbody tr:nth-child(-n+3) td:first-child { position: relative; }
table:has(.rank) tbody tr:nth-child(-n+3) td:first-child::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
table:has(.rank) tbody tr:nth-child(1) td:first-child::before { background: var(--sg-gold); }
table:has(.rank) tbody tr:nth-child(2) td:first-child::before { background: #C9C9D0; }
table:has(.rank) tbody tr:nth-child(3) td:first-child::before { background: #C08A4B; }
table:has(.rank) tbody tr:nth-child(1) { background: rgba(212, 160, 23, 0.05); }

.rank-1, .rank-2, .rank-3 {
    width: 32px; height: 32px;
    font-size: 1rem;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
}
.rank-1 { box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18), 0 2px 10px -2px rgba(0, 0, 0, 0.5); }

/* ── Player cards ────────────────────────────────────────────────────────── */
.player-card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: var(--sp-5);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    background-color: #121212;
    background-image: linear-gradient(160deg, #1C1C1C 0%, #121212 60%, #0C0C0C 100%);
    color: var(--sg-white);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.player-card::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 48px 82px;
    opacity: 0.45;
    -webkit-mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 68%);
            mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 68%);
    pointer-events: none;
}
.player-card > * { position: relative; z-index: 1; }
.player-card:hover {
    border-color: rgba(212, 160, 23, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
.player-card .avatar {
    border: 2px solid rgba(212, 160, 23, 0.45);
    transition: border-color 0.18s ease;
}
.player-card:hover .avatar { border-color: var(--sg-gold); }
.player-card .player-cell-name { color: var(--sg-white); }
.player-card .player-cell-meta { color: rgba(255, 255, 255, 0.5); }

/* Stat strip, divided so the three figures read as one unit. */
.player-card-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.player-card-stats > * + * { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.player-card-stats p { margin: 0; }
.player-card-stats .prize-cell-label { color: rgba(255, 255, 255, 0.42); }
.player-card-stats .stat { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.player-card-stats .stat.gold { color: var(--sg-gold); }

.player-card-foot {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-4);
    font-size: 0.75rem; letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.42);
}

/* --------------------------------------------------------------------------
   31. Leaderboard podium
   -------------------------------------------------------------------------- */
.podium {
    position: relative;
    overflow: hidden;
    background-color: var(--sg-black);
    background-image: url('../img/art/pattern-hex.svg');
    background-size: 56px 96px;
    color: var(--sg-white);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid rgba(212, 160, 23, 0.2);
}
/* Trophy photograph, veiled hard so it reads as atmosphere behind the cards. */
.podium-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.podium-art picture, .podium-art img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.22;
    filter: saturate(1.1);
}
.podium-art::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(8, 8, 8, 0.55), rgba(8, 8, 8, 0.94) 72%),
        linear-gradient(to bottom, rgba(8, 8, 8, 0.6), rgba(8, 8, 8, 0.35) 40%, var(--sg-black));
}
.podium > .container { position: relative; z-index: 1; }

/* .eyebrow is inline-flex, so it centres from the block that contains it. */
.podium-eyebrow { text-align: center; margin: 0; }

.podium-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
    color: var(--sg-white);
}

.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    max-width: 900px;
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.podium-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    background-color: rgba(20, 20, 20, 0.82);
    backdrop-filter: blur(2px);
}
/* First place is raised and wears the gold, so the order reads without
   having to check the numbers. */
.podium-step.place-1 {
    border-color: rgba(212, 160, 23, 0.55);
    background-color: rgba(28, 24, 12, 0.88);
    box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.18), 0 20px 46px -20px rgba(0, 0, 0, 0.9);
    transform: translateY(-22px);
}

.podium-medal {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    color: var(--sg-black);
    border: 2px solid var(--sg-black);
}
.place-1 .podium-medal { background: linear-gradient(135deg, var(--sg-gold-bright), var(--sg-gold)); }
.place-2 .podium-medal { background: linear-gradient(135deg, #E4E4E9, #B9B9C0); }
.place-3 .podium-medal { background: linear-gradient(135deg, #D6A15E, #A6743A); color: #fff; }

.podium-avatar {
    margin-bottom: var(--sp-3);
    border: 2px solid rgba(255, 255, 255, 0.22);
}
.place-1 .podium-avatar {
    border-color: var(--sg-gold);
    box-shadow: 0 0 0 5px rgba(212, 160, 23, 0.14);
}

.podium-name {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--sg-white);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-name:hover { color: var(--sg-gold); }
.place-1 .podium-name { color: var(--sg-gold); }

.podium-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.2rem 0 var(--sp-4);
}

.podium-rating {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1;
    color: var(--sg-gold);
    margin: 0;
}
.podium-rating-label {
    font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin: 0.35rem 0 var(--sp-4);
}

.podium-record {
    display: flex; justify-content: center; gap: var(--sp-4);
    width: 100%;
    margin: 0;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}
.podium-record strong {
    display: block;
    font-family: var(--font-display); font-size: 1rem;
    color: var(--sg-white);
}

@media (max-width: 720px) {
    /* Stacked, so the visual podium arrangement no longer communicates order —
       DOM order is 2,1,3, so the places are reordered back to 1,2,3 here. */
    .podium-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .podium-step { padding-top: var(--sp-5); }
    .podium-step.place-1 { transform: none; order: -1; }
    .podium-step.place-3 { order: 1; }
    .podium-medal { top: -14px; }
}

/* --------------------------------------------------------------------------
   32. Player cards (collectible style)
   -------------------------------------------------------------------------- */

/* Portrait cards want a denser grid than the general-purpose ones. Three per
   row on a phone, scaling up from there. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: clamp(0.6rem, 1.6vw, 1.25rem);
}
@media (max-width: 720px) {
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
}
@media (max-width: 340px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   32b. Card internals
   -------------------------------------------------------------------------- */
.fut-card {
    --card-a: #C9A227;
    --card-b: #8A6B14;
    --card-ink: #2A2008;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    padding: 0.9rem 0.85rem 0.85rem;
    aspect-ratio: 5 / 7;
    border-radius: 14px;
    color: var(--card-ink);
    background-color: var(--card-a);
    background-image:
        /* angular facets */
        linear-gradient(158deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(24deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0) 46%),
        linear-gradient(200deg, var(--card-a) 0%, var(--card-b) 62%, var(--card-a) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.28),
        0 14px 32px -14px rgba(0, 0, 0, 0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fut-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 26px 52px -18px rgba(0, 0, 0, 0.8);
}

/* Chevron pattern behind the content, echoing the logo lockup. */
.fut-card::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-image:
        repeating-linear-gradient(115deg,
            rgba(255,255,255,0.13) 0 2px,
            rgba(255,255,255,0) 2px 16px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}
/* Inner hairline frame. */
.fut-card::after {
    content: '';
    position: absolute; inset: 5px; z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 10px;
    pointer-events: none;
}

/* Diagonal gloss that sweeps on hover. */
.fut-shine {
    position: absolute; inset: -40% -60%;
    z-index: 3;
    background: linear-gradient(112deg, transparent 44%, rgba(255,255,255,0.42) 50%, transparent 56%);
    transform: translateX(-38%);
    transition: transform 0.65s ease;
    pointer-events: none;
}
.fut-card:hover .fut-shine { transform: translateX(38%); }

/* ── Tier finishes ─────────────────────────────────────────────────────── */
.fut-card.tier-elite  { --card-a: #F0D27A; --card-b: #A9801A; }
.fut-card.tier-gold   { --card-a: #D9B23F; --card-b: #8A6B14; }
.fut-card.tier-silver { --card-a: #CFD2D8; --card-b: #85888F; --card-ink: #23252A; }
.fut-card.tier-bronze { --card-a: #C89264; --card-b: #7E5530; --card-ink: #2B1D11; }

/* Elite gets a live sheen so the top of the ladder is obvious. */
.fut-card.tier-elite { box-shadow: 0 0 0 1px rgba(255,236,170,0.6), 0 14px 34px -14px rgba(0,0,0,0.7); }

/* ── Top row: rating + brand ───────────────────────────────────────────── */
.fut-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    width: 100%;
}
.fut-rating { display: block; line-height: 1; text-align: left; }
.fut-rating strong {
    display: block;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.6rem, 4.6vw, 2.25rem);
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.fut-rating small {
    display: block;
    font-size: 0.5625rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0.68;
    margin-top: 0.15rem;
}
.fut-brand { display: block; opacity: 0.85; flex: none; }
.fut-brand img { display: block; width: 30px; height: auto; }

/* ── Portrait ──────────────────────────────────────────────────────────── */
.fut-portrait {
    position: relative;
    display: grid; place-items: center;
    flex: 1;
    width: 100%;
    min-height: 0;
    padding-block: 0.35rem;
}
.fut-avatar {
    width: clamp(56px, 32%, 88px);
    aspect-ratio: 1;
    height: auto;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
}
.fut-titles {
    position: absolute; right: 0; bottom: 0;
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.625rem; font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
}

/* ── Stat trio ─────────────────────────────────────────────────────────── */
.fut-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    text-align: center;
    padding-block: 0.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.16);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.fut-stats > span { display: block; line-height: 1.1; }
.fut-stats > span + span { border-left: 1px solid rgba(0, 0, 0, 0.14); }
.fut-stats small {
    display: block;
    font-size: 0.5rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    opacity: 0.62;
}
.fut-stats strong {
    display: block;
    font-family: var(--font-display); font-weight: 800;
    font-size: 0.9375rem;
    margin-top: 0.1rem;
}

/* ── Stars ─────────────────────────────────────────────────────────────── */
.fut-stars {
    display: flex; justify-content: center; gap: 0.1rem;
    padding-block: 0.35rem;
    font-size: 0.75rem;
    line-height: 1;
}
.fut-star { color: rgba(0, 0, 0, 0.2); }
.fut-star.is-on { color: rgba(0, 0, 0, 0.72); text-shadow: 0 1px 0 rgba(255,255,255,0.35); }

/* ── Name plate ────────────────────────────────────────────────────────── */
.fut-plate {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.4rem 0.35rem 0.35rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.72));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
}
.fut-name {
    display: block;
    font-family: var(--font-display); font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #F6E7B4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fut-role {
    display: block;
    font-size: 0.5625rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .fut-card, .fut-shine { transition: none; }
    .fut-card:hover { transform: none; }
}

/* Install prompt button — hidden until the browser fires beforeinstallprompt. */
.install-btn[hidden] { display: none !important; }
@media (max-width: 900px) { .install-btn { display: none !important; } }

/* Three-across phone cards are ~110px wide; the internals scale down so the
   rating, stats and name plate all stay legible instead of clipping. */
@media (max-width: 720px) {
    .fut-card { padding: 0.5rem 0.4rem 0.45rem; border-radius: 10px; }
    .fut-card::after { inset: 3px; border-radius: 7px; }
    .fut-rating strong { font-size: 1.15rem; }
    .fut-rating small { font-size: 0.4375rem; letter-spacing: 0.1em; }
    .fut-brand img { width: 18px; }
    .fut-avatar { width: 38%; border-width: 1px; font-size: 0.875rem; }
    .fut-stats { padding-block: 0.25rem; }
    .fut-stats small { font-size: 0.4375rem; letter-spacing: 0.06em; }
    .fut-stats strong { font-size: 0.6875rem; }
    .fut-stars { font-size: 0.5rem; padding-block: 0.2rem; }
    .fut-plate { padding: 0.25rem 0.2rem; border-radius: 6px; }
    .fut-name { font-size: 0.625rem; letter-spacing: 0.02em; }
    .fut-role { font-size: 0.4375rem; letter-spacing: 0.04em; }
    .fut-titles { font-size: 0.5rem; padding: 0.1rem 0.28rem; }
}

/* Filters stack into a tall column on a phone otherwise, pushing the content
   they filter off the screen. */
@media (max-width: 720px) {
    .filter-bar { gap: var(--sp-2); }
    .filter-bar > * { flex: 1 1 calc(50% - var(--sp-2)); min-width: 0; }
    .filter-bar > .form-group:first-child,
    .filter-bar > input[type="search"],
    .filter-bar > input[type="text"] { flex-basis: 100%; }
    .filter-bar select, .filter-bar input { width: 100%; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   33. Phone density — app-style compact tiles
   --------------------------------------------------------------------------
   At three across a card is roughly 110px wide. Rather than shrink a full
   desktop card into that, each one drops to the two or three facts that
   actually matter at a glance and hides the rest. The full detail is one tap
   away on the record's own page.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {

    /* ── Tournament tile ──────────────────────────────────────────────── */
    .tournament-card {
        border-radius: 10px;
        border-width: 1px;
    }
    .tournament-card .media { border-radius: 10px 10px 0 0; }
    .tournament-card .media-16-7 { aspect-ratio: 16 / 10; }
    /* Status and price badges become dots and a tiny chip. */
    .tournament-card .media .badge {
        font-size: 0.4375rem;
        padding: 0.1rem 0.25rem;
        letter-spacing: 0.02em;
        top: 0.25rem !important;
        left: 0.25rem !important;
        right: auto !important;
        max-width: calc(100% - 0.5rem);
        overflow: hidden;
        white-space: nowrap;
    }
    .tournament-card .media .badge-dark { display: none; }
    .tournament-card .media-caption { display: none; }

    .tournament-body { padding: 0.4rem 0.4rem 0.45rem; gap: 0.25rem; }
    .tournament-name { font-size: 0.6875rem; line-height: 1.25; margin: 0; }
    .tournament-name a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Date, format, capacity bar and the button all go — the tile is the link. */
    .tournament-meta,
    .capacity,
    .tournament-actions { display: none; }

    /* Prize pool is the one figure worth keeping. */
    .prize-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin: 0;
        padding: 0.3rem 0 0;
        border-top: 1px solid var(--border);
    }
    .prize-row > div:first-child { display: none; }
    .prize-cell-label { font-size: 0.4375rem; letter-spacing: 0.08em; }
    .prize-cell-value { font-size: 0.8125rem; }

    /* ── News tile ────────────────────────────────────────────────────── */
    .card-flush .media-16-9 { aspect-ratio: 16 / 10; }
    .card-flush .card-body { padding: 0.4rem 0.4rem 0.5rem; }
    .card-flush .card-body h3 {
        font-size: 0.6875rem !important;
        line-height: 1.25;
        margin: 0.2rem 0 !important;
    }
    .card-flush .card-body h3 a {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Excerpt and byline are noise at this size. */
    .card-flush .card-body > p.fs-sm,
    .card-flush .card-body > p.fs-xs { display: none; }
    .card-flush .card-body .badge {
        font-size: 0.4375rem;
        padding: 0.1rem 0.25rem;
        margin-bottom: 0 !important;
    }

    /* ── Game tile ────────────────────────────────────────────────────── */
    .game-tile .media { aspect-ratio: 16 / 10; }
    .game-tile-body { padding: 0.4rem; }
    .game-tile-body h3 { font-size: 0.6875rem; line-height: 1.2; }
    .game-tile-body > p { display: none; }
    .game-tile-body .badge { font-size: 0.4375rem; padding: 0.1rem 0.25rem; }
    .game-tile-body .grid { gap: 0.15rem !important; }
    .game-tile-body .grid p { font-size: 0.5625rem; }

    /* ── Stat tiles ───────────────────────────────────────────────────── */
    .stat-tile { padding: 0.5rem 0.45rem; border-radius: 8px; }
    .stat-label { font-size: 0.4375rem; letter-spacing: 0.08em; }
    .stat-value { font-size: 1.0625rem; }
    .stat-meta  { font-size: 0.5rem; }

    /* ── Match row: two sides cannot go three across, so it goes to a
          single tight line instead of the tall stacked block. ─────────── */
    .match-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.55rem 0.5rem 0.45rem;
        text-align: left;
        border-radius: 10px;
    }
    .match-side, .match-side.away { flex-direction: row; gap: 0.35rem; text-align: left; }
    .match-side.away { flex-direction: row-reverse; text-align: right; }
    .match-side .avatar { width: 24px; height: 24px; font-size: 0.625rem; }
    .match-player { font-size: 0.6875rem; }
    .match-score { font-size: 1.0625rem; padding: 0.2rem 0.45rem; gap: 0.35rem; }
    .match-score .vs { font-size: 0.5rem; }
    .match-meta { font-size: 0.5625rem; gap: 0.5rem; padding-top: 0.35rem; margin-top: 0.35rem; }

    /* ── Section rhythm: less air between blocks, like an app ─────────── */
    .section { padding-block: var(--sp-5); }
    .section-head { margin-bottom: var(--sp-4); gap: var(--sp-3); }
    .section-title { font-size: 1.25rem; }
    .section-lede { font-size: 0.8125rem; }
    .eyebrow { font-size: 0.6875rem; letter-spacing: 0.14em; margin-bottom: 0.35rem; }

    /* ── Smaller chrome ───────────────────────────────────────────────── */
    .tab-bar svg { width: 18px; height: 18px; }
    .tab-bar a { font-size: 0.5625rem; padding: 0.35rem 0.2rem; gap: 2px; }
    .tab-bar { padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom)); }
    body { padding-bottom: 58px; }

    .empty-state { padding: var(--sp-5) var(--sp-4); }
    .empty-state-icon { width: 44px; height: 44px; margin-bottom: var(--sp-3); }
    .empty-state h3 { font-size: 1rem; }
    .empty-state p { font-size: 0.8125rem; }

    /* ── Hero: shorter, so the page starts sooner ─────────────────────── */
    .hero { padding-top: var(--sp-4); }
    .hero-render img { max-height: 260px; }
    .hero-title { font-size: clamp(2rem, 9vw, 2.75rem); margin-bottom: var(--sp-2); }
    .hero-tagline { font-size: 0.875rem; letter-spacing: 0.22em; }
    .hero-lede { font-size: 0.875rem; }
    .hero-stat-value { font-size: 1.375rem; }
    .hero-stat-label { font-size: 0.5625rem; letter-spacing: 0.08em; }
    .hero .btn-lg { padding: 0.6rem 0.9rem; font-size: 0.8125rem; }

    /* ── Photo strips: shorter still ──────────────────────────────────── */
    .photo-strip picture, .photo-strip img { height: 110px; }
    .photo-strip-caption p { font-size: 1rem; }
    .photo-strip-caption p::before,
    .photo-strip-caption p::after { width: 34px; margin-block: 0.5rem; }
}

/* Two across on genuinely narrow handsets, where a third column would clip
   the tile titles. */
@media (max-width: 340px) {
    .grid-3, .grid-4, .grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* News card (index) — classes rather than inline styles, so the phone rules
   below can actually override them. */
.news-card-title { font-size: 1.25rem; margin: 0 0 0.6rem; }

@media (max-width: 720px) {
    /* News tile: the head row put a badge and a date side by side in ~100px,
       which clipped both. The date goes; the badge stays as the label. */
    .news-card-head { margin-bottom: 0.25rem !important; }
    .news-card-date,
    .news-card-excerpt,
    .news-card-foot { display: none; }
    .news-card-title {
        font-size: 0.6875rem;
        line-height: 1.25;
        margin: 0;
    }
    .news-card-title a {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Game tile: the "Coming Soon" badge sat on top of the wordmark baked into
       the cover art. Moved to the body, where it has its own space. */
    .game-tile .media .badge {
        font-size: 0.4375rem;
        padding: 0.1rem 0.25rem;
        top: 0.25rem !important;
        left: 0.25rem !important;
        right: auto !important;
    }
    .game-tile .media-caption { display: none; }

    /* Results are a list, not a grid: two per row squeezed the player names
       down to a single letter. One full-width row each, kept short. */
    .grid-2:has(.match-row) { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
    .match-row { padding: 0.5rem 0.6rem 0.4rem; }
    .match-player { font-size: 0.75rem; }
    .match-side .avatar { width: 26px; height: 26px; }
    .match-score { font-size: 1.125rem; }
}