:root{
    /* ---- Surfaces (super dark, near-true black base) ---- */
    --bg: #000000;
    --bg-secondary: #050506;
    --panel: #0C0C0E;
    --panel-2: #161619;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.17);

    /* ---- Text (bright, modern white) ---- */
    --text: #FFFFFF;
      --text-muted: #D4D4D8;
    --text-faint: #6E6E76;

    /* ---- Brand palette: super-dark-black/bright-white base + one premium
       accent (Refined Violet) used specifically to make cards and primary
       actions pop. Variable names below (--mustard/--lavender/--forest/
       --rust) are kept for backward compatibility with ~60 existing call
       sites across this file -- only their hex values changed. --warning
       and --gold are split back out to their own standalone amber now that
       --accent isn't gold anymore -- LFT badges etc keep their gold
       identity independent of whatever the brand accent is doing.
       --forest/--rust remain real green/red since --success/--danger
       (win/loss, good/bad signal) need to stay semantically distinct from
       the brand accent, not decorative. ---- */
      --mustard: #7C3AED;
    --mustard-2: #A78BFA;
    --lavender: #1E1830;
    --lavender-2: #2A2147;
    --forest: #34D399;
    --rust: #FF5A5F;

    /* ---- Brand / semantic ---- */
    --accent: var(--mustard);
    --accent-2: var(--mustard-2);
    --accent-dim: rgba(139,92,246,0.4);
    --accent-tint: rgba(139,92,246,0.14);
    /* Midpoint between --accent (#8B5CF6) and --accent-2 (#A78BFA) -- used
       for small purple text labels (Career/Team labels, team-name links)
       that need to read as clearly purple without being as heavy/dark as
       the solid Message button fill. */
    --accent-mid: #9F7DF9;
    --lavender-tint: rgba(139,92,246,0.10);
    /* Text color for content sitting on top of a solid --accent fill.
       Violet is saturated/dark enough that bright white reads cleanly. */
    --on-accent: #FFFFFF;
    --success: var(--forest);
    --success-tint: rgba(52,211,153,0.14);
    --warning: #E5B93F;
    --warning-tint: rgba(229,185,63,0.14);
    --danger: var(--rust);
    --danger-tint: rgba(255,90,95,0.14);
    --gold: #E5B93F;

    /* High-vibrance red/grey/green used only for the Rating bad/average/good
       tiers -- deliberately more saturated than --danger/--text-muted/
       --success so this specific signal pops at a glance instead of
       blending into the rest of the muted charcoal/mustard/lavender/forest
       palette. */
    --rating-bad-color: #FF5C5C;
    --rating-avg-color: #AEB4C2;
    --rating-good-color: #2ECC71;

    /* ---- Spacing (8px system) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ---- Radius ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Shadows (soft, layered) ---- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.18);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.3);
    --shadow-glow: 0 0 0 1px rgba(139,92,246,0.18), 0 10px 32px rgba(139,92,246,0.20);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
    --dur: 220ms;
    --dur-slow: 340ms;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  ::selection{ background: var(--accent); color: var(--on-accent); }

  a{ color: inherit; text-decoration: none; }

  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 999px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.22); }

  button, a, input, select, textarea{
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  button{ font-family: inherit; }

  /* NOTE: intentionally opacity-only (no transform). A transform here --
     even a harmless translateY(0) -- stays on the element forever once the
     animation ends (fill-mode: both holds the final keyframe), and any
     non-"none" transform on an ancestor makes it the containing block for
     descendant position:fixed elements. Since every modal backdrop
     (.profile-modal-backdrop) is position:fixed and lives inside a .page
     element, that turned .page.active into the modal's containing block
     instead of the real viewport -- clipping modals to the page's own
     content height instead of the screen. Keep this opacity-only. */
  @keyframes fadeInUp{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }
  @keyframes dropdownIn{
    from{ opacity: 0; transform: translateY(-6px) scale(0.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes modalIn{
    from{ opacity: 0; transform: translateY(10px) scale(0.97); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }

  .page.active{ animation: fadeInUp var(--dur-slow) var(--ease) both; }

  /* ---------- Top bar ---------- */
  header.topbar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding: 14px 32px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top:0;
    background: rgba(9,9,11,0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    z-index: 50;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:2px;
    cursor: pointer;
  }
  .brand .mark{ height:34px;
    display:flex;
    align-items:center;
    flex-shrink: 0;
    position: relative;
    top: -2px;
  }
  .brand .mark img{
    height:100%;
    width:auto;
    display:block;
  }
  .brand .name{
    font-family:'Archivo Black', 'Space Grotesk', sans-serif;
    font-weight:400;
    font-size: 23px;
    letter-spacing: 0.2px;
    text-transform: none;
  }
  .brand .name span{ color: var(--text-muted); font-weight: 500; }

  .topbar-right{ display:flex; align-items:center; gap: 18px; margin-left: auto; }
  .search{
    display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    width: 260px;
    position: relative;
    backdrop-filter: blur(8px);
  }
  .search:focus-within{ border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-tint); background: rgba(255,255,255,0.05); }
  .search input{
    background:none; border:none; outline:none;
    color: var(--text); font-family:'Inter'; font-size:16px;
    width:100%;
  }
  .search input::placeholder{ color: var(--text-faint); }
  .search svg{ flex-shrink:0; opacity:0.55; color: var(--text-muted); width:18px; height:18px; }

  .global-search-dropdown{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 200;
    padding: 6px;
    animation: dropdownIn var(--dur) var(--ease) both;
  }
  .gsd-item{
    display:flex; align-items:center; gap:14px;
    padding: 12px 12px;
    cursor: pointer;
    text-decoration:none;
    color: var(--text);
    font-family:'Inter', sans-serif;
    font-size: 15px;
    border-left: 2px solid transparent;
    border-radius: 8px;
    margin-bottom: 4px;
  }
  .gsd-item:last-child{ margin-bottom: 0; }
  .gsd-item:hover, .gsd-item.active{ background: var(--panel-2); border-left-color: var(--accent); }
  .gsd-avatar{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background: var(--panel-2); border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px; color: var(--text-muted);
    overflow:hidden;
  }
  .gsd-item:hover .gsd-avatar, .gsd-item.active .gsd-avatar{ color: var(--accent); }
  .gsd-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gsd-name{ font-weight:600; }
  .gsd-item:hover .gsd-name, .gsd-item.active .gsd-name{ font-weight:700; }
  .gsd-empty{ padding: 14px; color: var(--text-muted); font-size: 12.5px; }

  .signin-btn{
    background: var(--accent);
    color: var(--on-accent);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, var(--shadow-sm);
  }
  .signin-btn:hover{ background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .signin-btn:active{ transform: translateY(0) scale(0.98); }

  nav.toplinks{ display:flex; align-items:center; gap: 30px; font-size: 18px; font-weight: 800; color: var(--text); margin-left: 40px; }
  nav.toplinks a{ cursor:pointer; padding: 4px 0; border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  nav.toplinks a:hover{ color: var(--accent-2); }
  nav.toplinks a.active{ color: var(--accent); border-bottom-color: var(--accent); }

  .nav-more{ position:relative; display:flex; align-items:center; }
  .nav-more-toggle{ display:flex; align-items:center; gap: 4px; }
  .nav-more-caret{ font-size: 10px; display:inline-block; transition: transform .15s ease; }
  .nav-more.open .nav-more-caret{ transform: rotate(180deg); }
  .nav-more-menu{
    position:absolute;
    top: 100%;
    left: 0;
    margin-top: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 6px;
    min-width: 180px;
    display:none;
    flex-direction: column;
    gap: 2px;
    z-index: 60;
    box-shadow: var(--shadow-lg);
  }
  .nav-more-menu.open{ display:flex; animation: dropdownIn var(--dur) var(--ease) both; }
  .nav-more-menu a{
    padding: 10px 12px !important;
    border-bottom: none !important;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
  }
  .nav-more-menu a:hover{ background: var(--panel-2); color: var(--text); }
  .nav-more-menu a.active{ color: var(--accent); background: var(--panel-2); }

  /* ---------- Hero (home) ---------- */
  .hero{
    padding: 72px 32px 32px;
    max-width: 1180px;
    margin: 0 auto;
  }
  .hero h1{
    font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 68px;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    max-width: 800px;
    color: var(--text);
  }
  .hero h1 .hl{
    background: var(--accent);
    color: var(--on-accent);
    padding: 2px 12px 4px;
    border-radius: 6px;
    display: inline-block;
  }
  .hero p{
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 400;
    max-width: 580px;
    line-height: 1.65;
    margin: 0 0 32px;
  }
  .hero-actions{ display:flex; gap:12px; flex-wrap: wrap; }
  .hero-btn{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size: 14.5px;
    padding: 13px 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--line);
  }
  .hero-btn.primary{ background: var(--accent); color:var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-sm); }
  .hero-btn.primary:hover{ background: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .hero-btn.primary:active{ transform: translateY(0) scale(0.98); }
  .hero-btn.ghost{ background: rgba(255,255,255,0.03); color:var(--text); backdrop-filter: blur(6px); }
  .hero-btn.ghost:hover{ border-color: var(--line-strong); background: rgba(255,255,255,0.06); transform: translateY(-2px); }
  .hero-btn.ghost:active{ transform: translateY(0) scale(0.98); }

  /* ---------- Section shell (home) ---------- */
  main.home{
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 32px 96px;
  }
  .section-head{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 72px 0 22px;
  }
  .section-head h2{
    font-family:'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight:800;
    margin:0;
    letter-spacing: -0.2px;
  }
  .section-head .see-all{
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
  }
  .section-head .see-all:hover{ color: var(--accent); }
  /* ~20% bigger than the standard .see-all links, used for the homepage's
     Full Schedule button specifically -- it's the entry point into a whole
     page now (sortable schedule + highlights), not just a same-page filter,
     so it earns more visual weight than the plain "All reports"/"All player
     stats" links next to it. */
  .section-head .see-all.see-all-lg{
    font-size: 13.8px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.6px;
  }
  .section-head .see-all.see-all-lg:hover{ color: var(--accent-2); }
  .section-lede{ color: var(--text-muted); font-size: 15px; font-weight: 400; margin: -8px 0 24px; max-width: 620px; line-height: 1.65; }

  /* ---------- Upcoming games grid ---------- */
  .games-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .game-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .game-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .game-card .gc-div{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 16px;
  }
  .game-card .gc-teams{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.3;
  }
  .game-card .gc-teams .vs{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 3px 0;
  }
  .game-card .gc-meta{
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  /* ---------- Upcoming Games ticker (home) ----------
     Replaces the old single boxed carousel card, which sat alone in a lot
     of empty space and read as a floating, disconnected widget. This is a
     borderless strip of matches divided by thin hairlines, auto-scrolling
     like a live ticker (paused on hover) instead of a bordered box with
     nav arrows/dots -- no card surface at all, just text/logos directly on
     the page, edges soft-faded with a mask so it blends into the section
     rather than hard-cutting off. */
  .upcoming-ticker{
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
  }
  .upcoming-ticker-track{
    display:flex;
    align-items: stretch;
    width: max-content;
  }
  .upcoming-ticker.is-marquee .upcoming-ticker-track{
    animation: upcomingMarquee 45.6s linear infinite;
  }
  .upcoming-ticker:hover .upcoming-ticker-track{ animation-play-state: paused; }
  @keyframes upcomingMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  .ticker-item{
    display:flex;
    align-items:center;
    gap: 16px;
    padding: 26px 34px;
    border-right: 1px solid var(--line);
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .ticker-item:hover{ background: rgba(255,255,255,0.025); }
  .ticker-item:hover .ticker-teams{ color: var(--accent-2); }
  .ticker-meta{ display:flex; align-items:center; gap: 8px; }
  /* Same profile-style division ribbon badge as /schedule (scheduleDivisionHTML
     in app.js), just scaled down a notch for the slim ticker row. */
  .ticker-meta .division-badge{ font-size: 9px; padding: 3px 12px 3px 7px; }
  .ticker-meta .sched-region{ font-size: 10px; }
  .ticker-division{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
  }
  .ticker-teams{
    display:flex;
    align-items:center;
    gap: 10px;
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    transition: color var(--dur) var(--ease);
  }
  .ticker-teams .team-logo{ width: 26px; height: 26px; font-size: 10px; }
  .ticker-vs{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .ticker-time{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-faint);
  }
  .ticker-item-empty{
    padding: 30px 32px;
    color: var(--text-muted);
    font-size: 13.5px;
    white-space: normal;
    cursor: default;
    border-right: none;
  }
  .ticker-item-empty:hover{ background: none; }
  @media (max-width: 640px){
    .upcoming-ticker{ -webkit-mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent); }
    .ticker-item{ padding: 20px 20px; gap: 12px; }
    .ticker-teams{ font-size: 15px; }
  }
  @media (prefers-reduced-motion: reduce){
    .upcoming-ticker.is-marquee .upcoming-ticker-track{ animation: none; }
  }

  /* ---------- Upcoming Games carousel (legacy -- unused, kept only in
     case matchCardHTML/.carousel-card markup is reused elsewhere later) ---------- */
  .carousel{
    display:flex;
    align-items:center;
    gap: 16px;
  }
  .carousel-track-wrap{
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .carousel-track{
    display:flex;
    transition: transform .5s var(--ease);
  }
  .carousel-card{
    flex: 0 0 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
  }
  .carousel-card.carousel-empty{
    justify-content: center;
    text-align: center;
    padding: 44px 24px;
  }
  .carousel-card.carousel-empty .cc-meta{ font-size: 13.5px; }
  .carousel-card .cc-division{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 16px;
  }
  .carousel-card .cc-teams{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 32px;
    display:flex; align-items:center; gap: 16px;
  }
  .carousel-card .cc-teams .team-name-wrap{
    display:flex; align-items:center; gap: 12px;
  }
  .carousel-card .cc-teams .team-logo{
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .carousel-card .cc-teams .vs{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .carousel-card .cc-meta{
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ---------- Highlighted-matchup badges + per-team record/experience ----------
     Shared by the homepage ticker (.ticker-item) and the /schedule page's
     own card (.sched-card, below). "unbeaten" comes computed live, server
     side, from the /api/season-data?type=upcoming endpoint (see
     loadLiveUpcoming in app.js); "topdiv" is
     computed live from real division standings on every page load (see
     withLiveTags/teamDivisionRank in app.js) -- nothing here is estimated.
     Same ribbon/tag shape as the division badges (.division-badge, near the
     bottom of this file) rather than a rounded pill, so a match's criteria
     tag and its division tag read as one consistent family of ribbons --
     just its own solid colors so the two kinds of tag stay visually
     distinct at a glance. */
  .schedule-list{ display:flex; flex-direction:column; gap: 4px; margin-top: 4px; }

  .cc-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom: 14px; }
  .match-badge{
    display:inline-flex;
    align-items:center;
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 14px 4px 9px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .match-badge.badge-unbeaten{ background: var(--success); color: #062015; }
  .match-badge.badge-topdiv{ background: var(--gold); color: #241900; }
  .carousel-card .cc-teams .tnw-info{ display:flex; flex-direction:column; gap:3px; line-height: 1.15; }
  .carousel-card .cc-teams .tnw-stat{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
  }
  /* Compact win/loss record -- same green-win/red-loss split as the
     player/team profile hero's .hero-record (same --success/--danger
     tokens), just sized down for the ticker/schedule card context, so a
     team's record reads consistently across the whole site instead of the
     schedule showing it as one flat grey string. Shared by both the
     homepage ticker (.tnw-stat above) and the /schedule card (.tnw-stat
     below). */
  .tnw-stat{ display:inline-flex; align-items:baseline; gap:5px; }
  .tnw-record{ display:inline-flex; align-items:baseline; gap:1px; font-weight:700; }
  .tnw-record-win{ color:var(--success); }
  .tnw-record-loss{ color:var(--danger); }
  .tnw-record-sep{ color:var(--text-muted); }
  .tnw-exp{ color:var(--text-faint); }
  .tnw-stat-sep{ color:var(--text-faint); }
  .carousel-arrow{
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display:flex; align-items:center; justify-content:center;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .carousel-arrow:hover{ border-color: var(--accent-dim); background: var(--panel-2); transform: translateY(-1px); }
  .carousel-arrow:active{ transform: translateY(0) scale(0.94); }
  .carousel-dots{
    display:flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .carousel-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .carousel-dot.active{ background: var(--accent); border-color: var(--accent); transform: scale(1.2); }

  @media (max-width: 860px){
    .carousel-card{ padding: 24px; }
    .carousel-card .cc-teams{ font-size: 26px; }
    .carousel-arrow{ width: 34px; height: 34px; }
  }

  /* ---------- Full Schedule page (/schedule) ----------
     Its own elevated card design -- grouped into per-day sections when
     sorted chronologically, laid out as a scoreboard row (team / vs / team)
     rather than the compact single-line carousel card, so a whole week's
     slate reads as a clean scannable grid instead of one stacked list. */
  .schedule-date-group{ margin-bottom: 34px; }
  .schedule-date-group:last-child{ margin-bottom: 0; }
  .schedule-date-head{
    display:flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .schedule-date-label{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.1px;
    color: var(--text);
  }
  .schedule-date-count{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
  }
  .schedule-card-list{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .sched-card{
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .sched-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--mustard), var(--mustard-2));
    opacity: 0.4;
    transition: opacity var(--dur) var(--ease);
  }
  .sched-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .sched-card:hover::before{ opacity: 1; }
  .sched-card-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .sched-division{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Division tag now reuses the same ESEA-style ribbon badge
     (.division-badge/.div-adv etc.) shown on player/team profiles, instead
     of plain muted text -- scheduleDivisionHTML() in app.js builds this. */
  .sched-division-wrap{
    display:flex;
    align-items:center;
    gap: 8px;
    overflow:hidden;
    min-width:0;
  }
  .sched-division-wrap .division-badge{ font-size: 10px; padding: 3px 13px 3px 8px; flex-shrink:0; }
  .sched-region{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sched-time{
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sched-card-teams{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    display:flex;
    align-items:center;
    gap: 14px;
  }
  .sched-card-teams .team-name-wrap{
    display:flex; align-items:center; gap: 12px;
    flex: 1; min-width: 0;
  }
  .sched-card-teams .team-name-wrap:last-child{ flex-direction: row-reverse; text-align: right; }
  .sched-card-teams .tnw-info{ display:flex; flex-direction:column; gap: 3px; line-height: 1.2; min-width: 0; }
  .sched-card-teams .team-name-wrap:last-child .tnw-info{ align-items: flex-end; }
  .sched-card-teams .tnw-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sched-card-teams .tnw-stat{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-faint);
  }
  .sched-vs{
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
    padding: 0 2px;
  }

  /* ---------- Schedule motion --------------------------------------
     Cards, date headers and highlight badges are fresh DOM every time
     renderSchedulePage() runs (filter/sort change or first load), so a
     plain CSS animation on each replays automatically -- no JS timing
     needed. Kept small and quick (respects prefers-reduced-motion). */
  @keyframes schedFadeUp{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes schedDateIn{
    from{ opacity:0; transform: translateX(-10px); }
    to{ opacity:1; transform: translateX(0); }
  }
  @keyframes schedBadgePop{
    0%{ opacity:0; transform: scale(0.8); }
    65%{ opacity:1; transform: scale(1.06); }
    100%{ transform: scale(1); }
  }
  .schedule-date-head{ animation: schedDateIn 0.4s var(--ease) both; }
  .sched-card{ animation: schedFadeUp 0.45s var(--ease) both; }
  .schedule-card-list .sched-card:nth-child(1){ animation-delay: 0.02s; }
  .schedule-card-list .sched-card:nth-child(2){ animation-delay: 0.06s; }
  .schedule-card-list .sched-card:nth-child(3){ animation-delay: 0.10s; }
  .schedule-card-list .sched-card:nth-child(4){ animation-delay: 0.14s; }
  .schedule-card-list .sched-card:nth-child(5){ animation-delay: 0.18s; }
  .schedule-card-list .sched-card:nth-child(6){ animation-delay: 0.22s; }
  .schedule-card-list .sched-card:nth-child(7){ animation-delay: 0.26s; }
  .schedule-card-list .sched-card:nth-child(n+8){ animation-delay: 0.30s; }
  .schedule-card-list .match-badge{ animation: schedBadgePop 0.4s var(--ease) both; animation-delay: 0.15s; }
  /* Hover: logo nudges up in scale and a soft diagonal shine sweeps the
     card once -- both purely CSS, no repeating/looping motion so a page
     of 60+ cards never feels busy while sitting still. */
  .sched-card::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.65s var(--ease);
    pointer-events: none;
  }
  .sched-card:hover::after{ transform: translateX(120%); }
  .sched-card .team-logo{ transition: transform var(--dur) var(--ease); }
  .sched-card:hover .team-logo{ transform: scale(1.08); }

  @media (prefers-reduced-motion: reduce){
    .sched-card, .schedule-date-head, .schedule-card-list .match-badge{ animation: none; }
    .sched-card::after{ display:none; }
  }

  @media (max-width: 980px){
    .schedule-card-list{ grid-template-columns: 1fr; }
  }
  @media (max-width: 640px){
    .schedule-date-label{ font-size: 16px; }
    .sched-card{ padding: 18px 18px; }
    .sched-card-teams{ font-size: 17px; flex-direction: column; align-items: stretch; gap: 10px; }
    .sched-card-teams .team-name-wrap{ flex-direction: row; text-align: left; }
    .sched-card-teams .team-name-wrap:last-child{ flex-direction: row; text-align: left; }
    .sched-card-teams .team-name-wrap:last-child .tnw-info{ align-items: flex-start; }
    .sched-vs{ align-self: flex-start; padding: 2px 0; }
  }

  /* ---------- Divisions overview (home) ---------- */
  .division-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .division-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .division-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .division-card .dc-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.1px;
  }
  .division-card .dc-count{
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
  }
  .division-card .dc-link{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--accent);
    margin-top: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .division-card .dc-link .arrow{ margin-left: 4px; }

  /* ---------- Scouting Reports ---------- */
  .report-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .report-grid.full{ grid-template-columns: repeat(2, 1fr); }
  .report-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 24px 22px;
    display:flex;
    flex-direction: column;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .report-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .rc-tags{ display:flex; align-items:center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .rc-division{
    font-family:'JetBrains Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 4px 9px;
  }
  .rc-stat{
    font-family:'JetBrains Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
    background: var(--accent-tint);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-pill);
    padding: 4px 9px;
  }
  .rc-player-row{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
  .rc-player{ font-family:'Inter', sans-serif; font-weight: 600; font-size: 14px; }
  .rc-player .rc-team{ color: var(--text-muted); font-weight: 400; }
  .rc-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.1px;
    margin: 0 0 12px;
  }
  .rc-notes-label{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  .rc-body{ color: var(--text-muted); font-size: 14.5px; font-weight: 400; line-height: 1.7; margin: 0; }
  .rc-more{ margin: 16px 0 0; display:none; }
  .rc-more.open{ display:block; animation: fadeInUp var(--dur) var(--ease) both; }
  .rc-side-block{ margin-bottom: 18px; }
  .rc-side-block:last-child{ margin-bottom: 0; }
  .rc-side-heading{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    padding-top: 14px;
    border-top: 1px solid var(--line);
    margin-bottom: 12px;
  }
  .rc-side-block:first-child .rc-side-heading{ border-top: none; padding-top: 0; }
  .rc-round{ margin-bottom: 14px; }
  .rc-round:last-child{ margin-bottom: 0; }
  .rc-round-label{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 5px;
  }
  .rc-bullets{
    list-style: disc;
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.7;
  }
  .rc-bullets li{ margin-bottom: 6px; }
  .rc-bullets li:last-child{ margin-bottom: 0; }
  .rc-bullets .rc-sub{ list-style: circle; margin: 6px 0 0; padding-left: 18px; }
  .rc-toggle{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 16px;
    align-self: flex-start;
    border-bottom: 1px solid var(--accent-dim);
  }
  .rc-toggle:hover{ border-bottom-color: var(--accent); }
  .rc-footer{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--text-muted);
  }
  .rc-links-block{ margin-bottom: 18px; }
  .rc-links-block:last-child{ margin-bottom: 0; }
  .rc-links-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  .rc-links-list a{ color: var(--accent); font-size: 13.5px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
  .rc-links-list a:hover{ border-bottom-color: var(--accent); }
  .rc-owner-actions{ display:flex; gap:8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }

  @media (max-width: 980px){
    .report-grid, .report-grid.full{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 860px){
    .report-grid, .report-grid.full{ grid-template-columns: 1fr; }
  }

  /* ---------- Forum ---------- */
  .stats-hero.forum-actions{
    position:relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 28px 24px;
    margin-bottom: 28px;
    overflow:hidden;
  }
  .stats-hero.forum-actions::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--mustard), var(--mustard-2));
  }
  .forum-actions{ display:flex; align-items:center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .forum-actions .stats-hero-copy{ max-width: 640px; }

  .category-grid{
    display:flex;
    flex-direction:column;
    border-radius: var(--radius-lg);
    overflow:hidden;
    margin-bottom: 14px;
  }
  .category-card{
    display:flex;
    align-items:center;
    gap:14px;
    background: #000;
    border: 1px solid var(--line);
    border-top:none;
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .category-card:first-child{ border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .category-card:last-child{ border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .category-card:hover{ border-color: var(--accent-dim); background: var(--panel); }
  .category-card.active{ border-color: var(--accent); }
  .cat-icon-chip{
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color: var(--accent-2);
  }
  .cat-icon-chip svg{ width:16px; height:16px; display:block; }
  .cat-row-body{ flex:1; min-width:0; }
  .category-card .cat-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.1px;
  }
  .category-card .cat-desc{ color: var(--text-muted); font-size: 11.5px; font-weight: 400; line-height: 1.5; margin-top: 2px; }
  .category-card .cat-meta{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display:flex; gap: 12px;
    flex-shrink:0;
  }

  .thread-list{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .thread-row{
    display:flex;
    align-items:center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-fast) var(--ease);
  }
  .thread-row:last-child{ border-bottom: none; }
  .thread-row:hover{ background: var(--panel-2); }
  .thread-main{ min-width: 0; flex: 1; }
  .thread-title-row{ display:flex; align-items:center; gap: 8px; }
  .thread-pin{
    font-family:'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #1A1200;
    background: var(--warning);
    border-radius: var(--radius-pill);
    padding: 3px 7px;
    flex-shrink: 0;
    font-weight: 700;
  }
  .thread-title{
    font-family:'Inter', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thread-meta{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 7px;
  }
  .thread-stats{
    display:flex;
    align-items:center;
    gap: 22px;
    flex-shrink: 0;
    text-align: right;
  }
  .thread-replies{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .thread-replies .label{
    display:block;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  .thread-activity{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 70px;
  }

  .thread-row .player-cell.roster-player{
    display:flex; align-items:center; flex-shrink:0;
  }
  .thread-row .player-cell.roster-player .pc-avatar-slot{
    width:32px; height:32px; border-radius:50%;
    background:transparent; border:1px solid var(--line-strong); box-shadow:none;
  }
  .thread-row .player-cell.roster-player .pc-avatar-slot img{ border-radius:50%; }
  .thread-repliers{
    display:flex; align-items:center; flex-shrink:0;
  }
  .thread-repliers .player-cell.roster-player{ margin-left:-8px; }
  .thread-repliers .player-cell.roster-player:first-child{ margin-left:0; }
  .thread-row .thread-repliers .player-cell.roster-player .pc-avatar-slot{
    width:22px; height:22px; border:1.5px solid var(--panel);
  }
  .thread-row .thread-repliers .player-cell.roster-player .pc-avatar-fallback{ font-size:9.5px; }
  @media (max-width: 640px){
    .thread-repliers{ display:none; }
  }

  @media (max-width: 980px){
    .category-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 860px){
    .category-grid{ grid-template-columns: 1fr; }
    .thread-row{ flex-wrap: wrap; }
    .thread-stats{ width: 100%; justify-content: flex-start; }
  }

  /* ---------- Deathmatch ---------- */
  .server-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .server-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    display:flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .server-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .server-top{ display:flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .server-name{ font-family:'Space Grotesk', sans-serif; font-weight: 800; font-size: 21px; color: var(--text); }
  .server-map{ font-family:'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }
  .server-status{ display:flex; align-items:center; gap: 6px; font-family:'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); flex-shrink: 0; }
  .status-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
  .status-dot.online{ background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
  .server-fill{ height: 5px; border-radius: var(--radius-pill); background: var(--panel-2); overflow: hidden; }
  .server-fill-bar{ height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
  .server-players{ font-family:'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-muted); }
  .server-players b{ color: var(--text); font-weight: 600; }
  .server-footer{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; }
  .server-ip{ font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); }
  .server-connect{
    font-family:'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
    background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-sm);
    padding: 9px 16px; cursor: pointer; white-space: nowrap;
  }
  .server-connect:hover{ background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .server-connect:active{ transform: translateY(0) scale(0.98); }
  .server-connect.copied{ background: var(--panel-2); color: var(--text); border: 1px solid var(--line-strong); }
  .dm-note{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.65;
    margin-top: 28px;
  }
  .dm-note strong{ color: var(--text); }

  @media (max-width: 860px){
    .server-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- Streams ---------- */
  .stream-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .stream-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 24px 22px;
    display:flex;
    flex-direction: column;
    gap: 13px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .stream-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .stream-top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 10px; }
  .stream-platform{
    font-family:'JetBrains Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 4px 9px;
  }
  .stream-status{ display:flex; align-items:center; gap: 6px; font-family:'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); flex-shrink: 0; }
  .stream-status.live{ color: var(--danger); }
  .stream-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
  .stream-dot.live{
    background: var(--danger);
    animation: stream-pulse 1.4s ease-in-out infinite;
  }
  @keyframes stream-pulse{
    0%, 100% { box-shadow: 0 0 0 0 rgba(179,86,74,0.4); }
    50% { box-shadow: 0 0 0 5px rgba(179,86,74,0); }
  }
  .stream-caster{ font-family:'Inter', sans-serif; font-weight: 700; font-size: 16px; }
  .stream-match{ font-family:'Space Grotesk', sans-serif; font-weight: 800; font-size: 17px; color: var(--text); }
  .stream-time{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 12px;
    border-top: 1px solid var(--line);
    margin-top: auto;
  }

  @media (max-width: 980px){ .stream-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 860px){ .stream-grid{ grid-template-columns: 1fr; } }

  /* ---------- Teams ---------- */
  /* Standings-style layout: #team-grid becomes a plain block wrapper
     (.team-standings) holding one .team-division-group per division, each
     with its own ribbon-badge header (same divisionBadgeHTML used on
     player/team profiles and the schedule page) and its own inner
     .team-grid card grid -- so the div/im/main/adv/challenger color-coding
     stays the one place a team's division shows, instead of repeating it
     as a plain-text pill on every single card like before. */
  .team-standings{ display:block; }
  .team-division-group{ margin-bottom: 40px; }
  .team-division-group:last-child{ margin-bottom: 0; }
  .team-division-head{
    display:flex;
    align-items:center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .team-division-count{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
  }
  .team-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .team-card{
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 27px 27px 25px;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .team-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--mustard), var(--mustard-2));
    opacity:0.55;
    transition: opacity var(--dur) var(--ease);
  }
  .team-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
  .team-card:hover::before{ opacity:1; }

  /* Shared card-pop accent treatment: a subtle top gradient bar (the "one
     distinct accent for cards" against the black/white base) that brightens
     on hover alongside the lift + glow shadow already applied above. */
  .game-card, .division-card, .report-card, .server-card, .stream-card, .gauge-card{
    position: relative;
    overflow: hidden;
  }
  .game-card::before, .division-card::before, .report-card::before, .server-card::before, .stream-card::before, .gauge-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--mustard), var(--mustard-2));
    opacity:0.5;
    transition: opacity var(--dur) var(--ease);
  }
  .game-card:hover::before, .division-card:hover::before, .report-card:hover::before, .server-card:hover::before, .stream-card:hover::before, .gauge-card:hover::before{ opacity:1; }
  .team-top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
  /* Rank + logo + name, replacing the plain name-only header now that the
     division badge moved up to the section head (.team-division-head) --
     .team-rank is a fixed-width column so every card's logo lines up in a
     neat column regardless of rank's digit count (#1 vs #142). */
  .team-identity{ display:flex; align-items:center; gap: 12px; min-width:0; }
  .team-rank{
    font-family:'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text-faint);
    width: 28px;
    flex-shrink: 0;
    text-align: right;
  }
  .team-identity .team-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .team-name{ font-family:'Space Grotesk', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.1px; color: var(--text); }
  .team-top-right{ display:flex; align-items:center; gap: 6px; flex-shrink: 0; }
  .team-lfp-badge{
    font-family:'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    border: 1px solid rgba(229,185,63,0.4);
    background: var(--warning-tint);
    border-radius: var(--radius-pill);
    padding: 3px 7px;
  }
  .team-division{
    font-family:'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 9px; white-space: nowrap;
  }
  /* Color-split win/loss record (green wins, red losses) -- same .tnw-record
     markup/tokens used on the schedule page and homepage ticker, reused here
     via compactRecordHTML() so a team's record reads identically everywhere
     on the site instead of the old flat single-color "2-0 this season". */
  .team-record{ display:flex; align-items:baseline; gap: 7px; font-family:'JetBrains Mono', monospace; font-size: 14px; margin-bottom: 19px; }
  .team-record .tnw-record{ font-size: 15px; }
  .team-record-suffix{ color: var(--text-muted); }
  .roster-label{ font-family:'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 10px; }
  .roster-chips{ display:flex; flex-wrap: wrap; gap: 7px; }
  .roster-chip{
    font-family:'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 11px;
    display:flex; align-items:center; gap: 5px;
  }
  .roster-chip .rc-lft{ color: var(--gold); font-size: 9px; font-family:'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.4px; }

  .team-actions-slot{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .team-actions-slot:empty{ margin-top: 0; }
  .team-action-btn{
    font-family:'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-sm); padding: 9px 14px;
    cursor: pointer; font-weight: 700; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .team-action-btn:hover{ background: var(--accent-2); transform: translateY(-1px); }
  .team-action-btn:active{ transform: translateY(0) scale(0.98); }
  .team-action-btn.ghost{
    background: transparent; color: var(--text-muted); border: 1px solid var(--line);
  }
  .team-action-btn.ghost:hover{ color: var(--text); border-color: var(--line-strong); background: rgba(255,255,255,0.03); }
  .team-claimed-note{
    font-family:'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); padding: 8px 0;
  }

  @media (max-width: 980px){ .team-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 860px){ .team-grid{ grid-template-columns: 1fr; } }

  /* ---------- Teams standings table (FACEIT-style, one division at a time,
     no Points column) -- replaces the old card grid entirely. Rides on
     table.stats for its base look (zebra rows, hover, header treatment,
     cell padding/font) exactly like the Players table and team-page tables,
     so this reads as the same design language, not a one-off layout. */
  .team-table-wrap{ overflow-x:auto; }
  /* "Minimal ledger" look (picked over boxed/panel-2 fills after a 3-option
     preview) -- flat black rows, hairline dividers only, no zebra tint, no
     background boxes behind the team logo or player avatars. Both the team
     logo and each player avatar use the same plain neutral hairline border
     (no violet) -- the earlier violet ring on the team logo anti-aliased
     into a muted grey-looking disc at 36px and read as clutter repeated on
     every row, so it's gone in favor of a flat, quieter look. */
  /* #team-grid prefix bumps specificity above table.stats tbody tr:nth-child(even)
     (same 0-2-3 specificity as that base rule -- without the id prefix this
     loses the tie since the base rule sits later in the file). */
  #team-grid table.team-standings-table tbody tr:nth-child(even){ background: transparent; }
  #team-grid table.team-standings-table tbody tr:hover{ background: rgba(255,255,255,0.02); }
  .tr-rank{ width:32px; color:var(--text-faint); font-weight:800; font-size:14px; }
  .tr-team{ min-width:220px; }
  .tr-team-identity{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  /* Violet ring removed sitewide from this table -- at 36px it anti-aliased
     into a muted grey-looking disc behind fallback initials (read as "grey
     filler" rather than a ring), and repeated on every single row it read as
     noisy rather than modern. A hairline neutral border reads cleaner and
     keeps the flat/no-fill "minimal ledger" look intact. */
  .tr-team .team-logo{
    width:44px; height:44px; font-size:15px;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    box-shadow: none;
  }
  .tr-team-name{ font-family:'Space Grotesk', sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.1px; color:var(--text); text-decoration:none; }
  .tr-team-name:hover{ color: var(--accent-2); }
  .tr-team .team-actions-slot{ margin-top:8px; }
  /* Bigger, chunkier record -- same Archivo Black treatment as the hero
     W-L record on player/team profile pages, sized down for a table row. */
  .tr-win, .tr-loss, .tr-diff{
    font-family:'Archivo Black', 'JetBrains Mono', monospace;
    font-weight:400;
    font-size:21px;
  }
  .tr-win{ color: var(--success); }
  .tr-loss{ color: var(--danger); }
  .tr-diff{ color: var(--text-muted); }
  .tr-diff.positive{ color: var(--success); }
  .tr-diff.negative{ color: var(--danger); }
  .tr-roster{ min-width:340px; }
  /* Roster cell holds several .player-cell chips inline (one per tracked
     player) rather than the single flex row .player-cell gets as a whole
     <td> elsewhere -- same pfp+name component, just smaller and wrapped so
     a 5-player roster fits without blowing out row height too much. */
  .tr-roster .player-cell.roster-player{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:4px 16px 4px 0;
    font-family:'Inter', sans-serif;
  }
  .tr-roster .player-cell.roster-player .pc-avatar-slot{
    width:28px; height:28px; border-radius:50%;
    background: transparent;
    border: 1px solid var(--line-strong);
    box-shadow: none;
  }
  .tr-roster .player-cell.roster-player .pc-avatar-slot img{ border-radius:50%; }
  .tr-roster .player-cell.roster-player .pc-avatar-slot .pc-avatar-fallback{ font-size:11px; }
  .tr-roster .player-cell.roster-player .pc-name{ font-size:14px; font-weight:600; color:var(--text); text-decoration:none; }
  .tr-roster .player-cell.roster-player .pc-name:hover{ color: var(--accent-2); }
  .tr-roster .player-cell.roster-player .rc-lft{
    color: var(--gold); font-size:9px; font-family:'JetBrains Mono', monospace;
    text-transform:uppercase; letter-spacing:0.4px; margin-left:2px;
  }
  @media (max-width: 900px){
    table.team-standings-table{ font-size:12.5px; }
    .tr-roster{ min-width:220px; }
  }
  .team-grid-more{ display:flex; justify-content:center; padding:20px 0 4px; }
  .team-view-more-btn{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:13.5px;
    padding:11px 22px;
    border-radius: var(--radius-sm);
    cursor:pointer;
    border:1px solid var(--line-strong);
    background: rgba(255,255,255,0.03);
    color:var(--text);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .team-view-more-btn:hover{ background: rgba(255,255,255,0.07); border-color:var(--accent-2); transform: translateY(-1px); }
  .team-view-more-btn:active{ transform: translateY(0) scale(0.98); }

  /* Players leaderboard pagination -- 50/page with prev/next arrows instead
     of rendering every matching row (some divisions run into the thousands).
     See STATS_PAGE_SIZE / _statsPageIndex in app.js. */
  .stats-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:20px 0 4px;
  }
  .stats-page-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius: var(--radius-sm);
    border:1px solid var(--line-strong);
    background: rgba(255,255,255,0.03);
    color:var(--text);
    font-size:15px;
    cursor:pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .stats-page-arrow:hover:not(:disabled){ background: rgba(255,255,255,0.07); border-color:var(--accent-2); transform: translateY(-1px); }
  .stats-page-arrow:active:not(:disabled){ transform: translateY(0) scale(0.96); }
  .stats-page-arrow:disabled{ opacity:0.35; cursor:default; }
  .stats-page-label{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    color:var(--text-muted);
    min-width:110px;
    text-align:center;
  }

  /* ---------- About ---------- */
  main.about-page{
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 32px 96px;
  }
  .about-lede{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.35;
    letter-spacing: -0.2px;
    margin: 0 0 44px;
    color: var(--text);
  }
  .about-title{
    font-family:'Archivo Black', 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    color: var(--text);
  }
  .about-text{ color: var(--text-muted); font-size: 15.5px; font-weight: 400; line-height: 1.75; margin: 0 0 16px; }
  .about-statement-block{ margin: 4px 0 28px; }
  .about-statement{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
  }
  .about-signoff{
    margin-top: 20px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    text-align: center;
  }
  .about-signoff-brand{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .about-signoff-tagline{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: var(--text-muted);
  }
  .about-section{ margin-bottom: 44px; }
  .about-section h2{
    font-family:'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.1px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .about-list{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 14px; }
  .about-list li{
    color: var(--text-muted); font-size: 15px; font-weight: 400; line-height: 1.65;
    padding-left: 20px; position: relative;
  }
  .about-list li::before{ content: "—"; position: absolute; left: 0; color: var(--accent); }
  .about-list li b{ color: var(--text); font-weight: 600; }

  .cta-panel{
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-md);
  }
  .cta-panel h3{
    font-family:'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
  }
  .cta-panel p{
    color: var(--text-muted);
    font-size: 14.5px;
    font-weight: 400;
    line-height:1.6;
    margin: 0;
    max-width: 460px;
  }
  .cta-btn{
    display:inline-block;
    background: var(--accent);
    color: var(--on-accent);
    font-family:'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    cursor:pointer;
    border:none;
    white-space: nowrap;
  }
  .cta-btn:hover{ background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .cta-btn:active{ transform: translateY(0) scale(0.98); }

  /* ---------- Stats page ---------- */
  main.stats-page{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px 96px;
  }
  .stats-hero{
    padding: 48px 0 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
  }
  .stats-hero h1{
    font-family:'Archivo Black', 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0 0 12px;
    color: var(--text);
  }
  .stats-hero p{ color: var(--text-muted); font-size: 15.5px; font-weight: 400; margin:0; max-width: 640px; line-height: 1.65; }

  .stats-tabs{
    display:flex;
    gap: 8px;
    margin-bottom: 20px;
  }
  .stats-tab{
    font-family:'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    cursor: pointer;
  }
  .stats-tab:hover{ color: var(--text); border-color: var(--line-strong); }
  .stats-tab.active{
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
  }

  .filter-bar{
    display:flex;
    align-items:center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .filter-select{
    font-family:'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.03);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L5 6L10 0Z' fill='%239CA3AF'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
  }
  .filter-select:hover{ border-color: var(--line-strong); }
  .filter-select option{ background: var(--panel); color: var(--text); }
  /* Custom dropdown panel (see enhanceFilterSelect() in app.js) -- the real
     <select> lives inside .custom-select-wrap but is hidden; the visible
     "closed" box is a <button class="filter-select custom-select-trigger">
     so it looks/sizes identically to the native select did, and the opened
     option list below is a fully page-painted div (never a native OS
     popup), so it can never render as an unreadable white-on-white system
     listbox on any browser/OS. */
  .custom-select-wrap{ position:relative; display:inline-block; }
  .custom-select-wrap select.filter-select{
    position:absolute; opacity:0; pointer-events:none;
    width:1px; height:1px; overflow:hidden;
  }
  .custom-select-trigger{ text-align:left; }
  .custom-select-panel{
    display:none;
    position:absolute; top:calc(100% + 6px); left:0; min-width:100%; z-index:60;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
  }
  .custom-select-panel.open{ display:block; }
  .custom-select-option{
    padding: 9px 13px;
    border-radius: 6px;
    font-family:'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
  }
  .custom-select-option:hover{ background: var(--panel-2); }
  .custom-select-option.selected{ color: var(--accent); font-weight:700; }
  .filter-search{
    display:flex; align-items:center; gap:9px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    width: 250px;
    backdrop-filter: blur(8px);
  }
  .filter-search:focus-within{ border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-tint); }
  .filter-search input{
    background:none; border:none; outline:none;
    color: var(--text); font-family:'Inter'; font-size:13.5px;
    width:100%;
  }
  .filter-search input::placeholder{ color: var(--text-faint); }
  .filter-count{
    margin-left:auto;
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
  }

  .stats-panel{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  table.stats{
    width:100%;
    border-collapse: collapse;
    font-size: 18px;
    line-height: 1.5;
  }
  table.stats thead th{
    text-align: left;
    padding: 19px 26px;
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Muted rather than full-bright text -- headers are labels, not data,
       and giving them the same brightness as the numbers below them was
       flattening the whole table into one wall of same-weight white text.
       Dimming the label row is what lets the actual stats read as the
       thing your eye should land on. */
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-weight: 700;
    /* Was rgba(37,35,32,0.92) -- that's a warm dark grey with a brownish
       undertone (R>G>B), which read as muddy/dated against the rest of the
       site's neutral true-black + violet palette. Swapped to a neutral
       cool-toned dark (matches --panel-2's own #161619 neutral grey, just
       with alpha for the sticky-header blur) so it reads as part of the
       same modern dark UI instead of its own off-color slab. */
    background: rgba(22,22,26,0.92);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  table.stats thead th:hover{ color: var(--accent); }
  table.stats thead th.sorted{ color: var(--accent); }
  table.stats tbody tr{
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-fast) var(--ease);
  }
  /* Zebra striping was nearly invisible at 0.015 alpha -- bumped enough to
     actually help the eye track a row across 14 nowrap columns. */
  table.stats tbody tr:nth-child(even){ background: rgba(255,255,255,0.035); }
  table.stats tbody tr:hover{ background: rgba(229,185,63,0.06); }
  table.stats tbody tr:last-child{ border-bottom: none; }
  table.stats td{
    padding: 21px 26px;
    font-family:'JetBrains Mono', monospace;
    font-weight: 400;
    color: var(--text);
    white-space: nowrap;
    letter-spacing: 0.3px;
  }
  table.stats td.player-cell{
    font-family:'Inter', sans-serif;
    font-weight: 600;
    display:flex;
    align-items:center;
    gap:11px;
  }
  .avatar{
    width:28px; height:28px;
    border-radius:7px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    flex-shrink:0;
  }
  .lft-badge{
    font-family:'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    border: 1px solid rgba(229,185,63,0.4);
    background: var(--warning-tint);
    border-radius: var(--radius-pill);
    padding: 2px 6px;
    margin-left: 6px;
  }

  /* Self-tagged per-season role (IGL/AWP/Entry/Lurk/Support/Sub) on the
     player profile's season table -- .role-tag is the read-only pill anyone
     viewing the profile sees, .role-select is the editable dropdown shown
     only to the signed-in owner of that profile.

     Restyled to match divisionBadgeHTML's own tag: same notched-ribbon
     clip-path shape, same bold uppercase mono lettering, sized up from the
     old plain outline pill -- and given a solid fill per role (via
     ROLE_BADGE_CLASS in app.js) instead of one flat accent-on-panel color,
     so each role reads at a glance the same way each division tier does. */
  .role-tag{
    display:inline-flex;
    align-items:center;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.5;
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    padding: 4px 15px 4px 10px;
    white-space: nowrap;
    background: var(--panel-2);
    color: var(--text-muted);
  }
  /* One solid color per role -- "Tactical" palette (picked from 3 mockup
     options). Chosen to stay clearly distinct from: the red/green already
     used for Rating and match win/loss right next to this column, AND from
     the site's own violet accent (--accent/--accent-2, #8B5CF6/#A78BFA) --
     IGL used to be that exact violet, which meant it read as "an active UI
     element" rather than its own role identity. Nothing here shares a hue
     with --accent, --success, --danger, or --gold anymore. */
  .role-tag.role-igl{ background:#3B82F6; color:#052245; }
  .role-tag.role-awp{ background:#06B6D4; color:#04303A; }
  .role-tag.role-entry{ background:#FB923C; color:#3A1B04; }
  .role-tag.role-lurk{ background:#14B8A6; color:#04211D; }
  .role-tag.role-support{ background:#EC4899; color:#450022; }
  .role-tag.role-sub{ background:#94A3B8; color:#1C2733; }
  /* "Coach" isn't a real in-game role like the six above -- it marks a
     season row synthesized from a peer-confirmed coaching credit (see
     withCoachRows in app.js), where every stat column is dashed out because
     a coach was never actually on the server racking up kills. Deliberately
     its own bronze/copper tone, distinct from every role color above and
     from --gold (already used for the "Unbeaten" schedule badge), so it
     reads as its own category rather than a seventh role option. */
  .role-tag.role-coach{ background:#B45309; color:#FEF3C7; }
  /* Wraps the up-to-3 tags a season can have -- overrides the table cell's
     inherited white-space:nowrap just for this inner group so a full house
     of tags wraps onto a second line inside its own cell instead of forcing
     the whole (already-wide) table to scroll horizontally. */
  .role-tag-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    white-space:normal;
  }
  .role-select{
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 4px;
    max-width: 90px;
  }

  /* Player cell: avatar + name + region + LFT badge, real-data-driven. */
  .pc-avatar-slot{
    width: 28px; height: 28px; border-radius: 7px; overflow: hidden;
    flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .pc-avatar-slot img{ width:100%; height:100%; object-fit: cover; display:block; }
  .pc-avatar-fallback{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size: 12.5px; color: var(--text-muted);
  }
  .pc-name{
    color: var(--text); text-decoration:none; font-weight: 600;
  }
  .pc-name:hover{ color: var(--accent-2); }
  .pc-region-slot:empty{ display:none; }
  .pc-region-slot{ display:flex; align-items:center; flex-shrink:0; }
  .pc-flag{
    width: 18px; height: 14px; object-fit: cover; border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line);
    display:block;
  }
  .lft-badge-sm{
    font-family:'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--gold); border: 1px solid rgba(229,185,63,0.4); background: var(--warning-tint); border-radius: var(--radius-pill); padding: 2px 6px;
  }
  .lft-scout-badge{
    font-family:'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--accent); border: 1px solid var(--accent-dim); background: var(--accent-tint, rgba(139,92,246,0.1));
    border-radius: var(--radius-pill); padding: 2px 6px; text-decoration: none; display:inline-block; margin-left: 4px;
  }
  .lft-scout-badge:hover{ border-color: var(--accent); }

.lft-banner{
        display:flex; align-items:center; justify-content:center; gap:8px;
        padding:10px 16px; margin-bottom:10px;
        background: var(--panel); border: 1px solid rgba(229,185,63,0.45);
        border-radius: var(--radius-md);
        color: var(--text); font-family:'JetBrains Mono', monospace;
        font-weight:800; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
        text-decoration:none; transition: border-color 0.15s ease;
}
.lft-banner:hover{ border-color: var(--gold); }
.lft-banner-accent{ color: var(--gold); }
  table.lft-table td{
    white-space: normal;
    /* One font, everywhere in this table -- was a mix of Inter (body cells)

             + JetBrains Mono (elo/role) + Space Grotesk (avatar fallback), which
       is exactly why the row read as visually inconsistent. Archivo Black
       everywhere matches the bold display language already used for the
       purple team-name/career labels elsewhere on the site. */
    font-family: 'Archivo Black', 'JetBrains Mono', monospace;
    font-size: 13px;
    /* Was vertical-align:top. Once the Experience column started stacking
       multiple season badges (taller than every other column's single line
       of content), top-alignment made each row read as a staircase --
       avatar/name sitting high, badges sitting low, schedule/looking-for
       drifting to whatever height their own content happened to need.
       Middle-aligning every column gives the row one shared centerline
       regardless of how tall any single cell's content gets. */
    vertical-align: middle;
    max-width: 220px;
  }
  table.lft-table td:nth-child(2),
  table.lft-table td:nth-child(3){
    white-space: nowrap;
    max-width: none;
    font-size: 12px;
  }
  /* Cosmetic parity with the player-profile redesign: bigger avatar + bigger
     bolder name so a listing reads as a real person's card, not a dense
     ledger row -- this table used to run noticeably smaller than every other
     player-cell table on the site. */
  table.lft-table .pc-avatar-slot{
    width:44px; height:44px; border-radius:var(--radius-md);
  }
  table.lft-table .pc-avatar-fallback{ font-family:'Archivo Black', 'JetBrains Mono', monospace; font-size:16px; }
  table.lft-table .pc-name{ font-size:16.5px; font-weight:400; }
  /* Black table, black sticky header, thin divider lines instead of zebra
     striping -- same black-card treatment already applied to the
     player-profile season table, scoped here to LFT only (table.stats is
     shared by Stats/Teams pages, which should keep their own grey panel). */
  #page-lft .stats-panel{ background:#000000; }
  table.lft-table thead th{
    background:#000000;
    font-family:'Archivo Black', 'JetBrains Mono', monospace;
  }
  table.lft-table tbody tr:nth-child(even){ background: transparent; }
  table.lft-table tbody tr{ border-bottom: 1px solid var(--line); }
  table.lft-table .lft-badge-sm,
  table.lft-table .lft-scout-badge{ font-family:'Archivo Black', 'JetBrains Mono', monospace; }

  /* ---------------- LFT board v2: card list, not a table ----------------
     Replaces the old <table class="lft-table"> row-per-listing layout. A
     real table forces every column (Elo, role, schedule, ...) to the same
     font-size/line-height -- there's no way to make just Elo/Level read as
     a bigger, more important stat without it looking like a layout bug in
     every other column. A two-line card (identity + a real boxed Elo stat
     on top, everything else as a tag/stat row underneath) fixes that and
     also gives every field room to breathe instead of nowrap-truncating in
     a fixed-width cell. */
  .lft-card-list{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .lft-card{
    background:#000000;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:16px 20px;
    cursor:pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .lft-card:hover{ border-color:var(--line-strong); background:rgba(255,255,255,0.015); }
  .lft-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .lft-card-identity{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
  }
  .lft-card-identity .pc-avatar-slot{
    width:48px; height:48px; border-radius:var(--radius-md); flex-shrink:0;
  }
  .lft-card-identity .pc-avatar-fallback{ font-family:'Inter', sans-serif; font-weight:700; font-size:17px; }
  .lft-card-identity-text{ min-width:0; }
  .lft-card-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .lft-card-identity .pc-name{
    font-family:'Inter', sans-serif;
    font-size:16.5px;
    font-weight:700;
  }
  .lft-card-region{
    color:var(--text-muted);
    font-size:11.5px;
    margin-top:2px;
  }
  /* The actual fix: Elo/Level pulled out of the flow entirely into its own
     boxed stat -- big Archivo Black number + a real (not 17px) level icon
     -- rather than one more same-size cell fighting for attention next to
     everything else. */
  .lft-card-elo{
    display:flex;
    align-items:center;
    gap:10px;
    background:#000000;
    border:1px solid var(--line-strong);
    border-radius:var(--radius-md);
    padding:8px 16px;
    flex-shrink:0;
  }
  .lft-card-elo.lft-card-elo-empty{ border-style:dashed; border-color:var(--line); }
  .lft-card-elo .lft-level-icon{ width:28px; height:28px; margin-right:0; }
  .lft-card-elo-text{ display:flex; flex-direction:column; line-height:1.15; }
  .lft-card-elo-value{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:21px;
    color:var(--text);
  }
  .lft-card-elo-label{
    font-family:'JetBrains Mono', monospace;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-faint);
  }
  .lft-card-elo-missing{
    color:var(--text-muted);
    font-size:11.5px;
  }
  .lft-card-bottom{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
  }
  .lft-card-roles{ color:var(--text); white-space:nowrap; }
  .lft-card-division{ color:var(--text-muted); font-size:10.5px; }
  .lft-card-experience{ display:inline-flex; flex-wrap:wrap; gap:4px; }
  .lft-card-schedule{ color:var(--text-muted); white-space:nowrap; }
  /* The one piece of free-text prose in the row (what a poster actually
     typed, not a stat/label) -- kept in Inter rather than the row's
     otherwise-mono meta language so a real sentence still reads like a
     sentence. */
  .lft-card-lookingfor{
    flex:1 1 160px;
    min-width:0;
    font-family:'Inter', sans-serif;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .lft-card-action{ flex-shrink:0; margin-left:auto; }
  @media (max-width: 720px){
    .lft-card-top{ flex-wrap:wrap; }
    .lft-card-bottom{ font-size:11px; }
    .lft-card-lookingfor{ flex-basis:100%; white-space:normal; }
  }

  .lft-note{
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
  }
  /* Simple two-tone K/D coloring on the Stats leaderboard table. Qualified
     with "table.stats td" (matching table.stats td's own specificity) so
     these actually win over that rule's plain color:var(--text) -- a bare
     .rating-pos{} would otherwise lose to it and silently render as normal
     text. */
  table.stats td.rating-pos{ color: var(--success); }
  table.stats td.rating-neg{ color: var(--danger); }
  /* Three-tier Rating coloring on player profile season history, modeled on
     HLTV's well-known Rating 2.0 bands (bad / average / good) -- see
     ratingColorClass() in app.js for the exact thresholds. Uses the
     high-vibrance red/grey/green set above rather than the muted theme
     colors, so it reads as a clear at-a-glance signal. */
  table.stats td.rating-bad{ color: var(--rating-bad-color); font-weight: 700; }
  table.stats td.rating-avg{ color: var(--rating-avg-color); font-weight: 700; }
  table.stats td.rating-good{ color: var(--rating-good-color); font-weight: 700; }

  /* Filled rating pills on the player-profile/team-roster season table only
     (scoped to .player-stats-table, which is more specific than the plain
     "table.stats td.rating-*" text-color rule above and so wins over it) --
     the Stats leaderboard table intentionally keeps the plain colored-text
     look above; this is a size/density thing, that table is much denser and
     a pill per row would be too busy. Values wrapped in the inner
     span.rating-pill (see app.js) rather than styling the <td> itself, so
     the pill sizes to the number instead of stretching to the full cell
     width. */
  table.player-stats-table td.rating-cell span.rating-pill{
    display:inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 700;
  }
  table.player-stats-table td.rating-cell.rating-good span.rating-pill{ background: rgba(46,204,113,0.45); color: #4AE38A; }
  table.player-stats-table td.rating-cell.rating-avg span.rating-pill{ background: rgba(174,180,194,0.32); color: var(--rating-avg-color); }
  table.player-stats-table td.rating-cell.rating-bad span.rating-pill{ background: rgba(255,60,60,0.45); color: #FF7A7A; }

  .empty-state{
    padding: 72px 20px;
    text-align:center;
    color: var(--text-muted);
    font-size: 13.5px;
  }
  .empty-state strong{ display:block; color: var(--text); font-size: 17px; margin-bottom: 10px; font-family:'Space Grotesk', sans-serif; font-weight: 800; }

  /* ---------- Messages (DMs) ---------- */
  .msg-layout{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow:hidden;
    min-height: 480px;
    background: var(--panel);
  }
  .msg-thread-list{
    border-right: 1px solid var(--line);
    overflow-y:auto;
    max-height: 640px;
  }
  .msg-thread-empty{ padding: 24px 18px; color: var(--text-muted); font-size: 13px; }
  .msg-thread-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 16px;
    cursor:pointer;
    border-bottom: 1px solid var(--line);
    position:relative;
    transition: background var(--dur-fast) var(--ease);
  }
  .msg-thread-item:hover{ background: rgba(255,255,255,0.03); }
  .msg-thread-item.active{ background: rgba(255,255,255,0.06); }
  .msg-thread-avatar img{ width:36px; height:36px; border-radius:8px; object-fit:cover; display:block; }
  .msg-thread-avatar-fallback{
    width:36px; height:36px; border-radius:8px;
    background: var(--accent); color: var(--on-accent);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px;
  }
  .msg-thread-text{ min-width:0; flex:1; }
  .msg-thread-name{ font-weight:700; font-size:13.5px; color: var(--text); }
  .msg-thread-preview{ font-size:12px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg-thread-item.unread .msg-thread-name{ color: var(--accent-2); }
  .msg-thread-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); flex-shrink:0; }

  .msg-conversation{ display:flex; flex-direction:column; min-height:480px; }
  .msg-conversation-header{ padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight:800; font-size:15px; }
  .msg-bubble-list{ flex:1; overflow-y:auto; padding: 16px 20px; display:flex; flex-direction:column; gap:10px; max-height: 420px; }
  .msg-bubble{ max-width: 70%; }
  .msg-bubble.mine{ align-self:flex-end; }
  .msg-bubble.theirs{ align-self:flex-start; }
  .msg-bubble-text{
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height:1.4;
    word-break: break-word;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
  }
  .msg-bubble.mine .msg-bubble-text{ background: var(--accent-tint); border-color: var(--accent-dim); }
  .msg-composer{ display:flex; gap:10px; padding: 14px 20px; border-top: 1px solid var(--line); align-items:flex-end; }
  .msg-composer textarea{ flex:1; resize:vertical; min-height:40px; }

  @media (max-width: 760px){
    .msg-layout{ grid-template-columns: 1fr; }
    .msg-thread-list{ border-right:none; border-bottom: 1px solid var(--line); max-height: 220px; }
  }

  footer{
    border-top: 1px solid var(--line);
    padding: 26px 32px;
    text-align:center;
    color: var(--text-faint);
    font-size: 11px;
    font-family:'JetBrains Mono', monospace;
  }

  .page{ display:none; }
  .page.active{ display:block; }

  @media (max-width: 980px){
    .games-grid{ grid-template-columns: 1fr 1fr; }
    .division-grid{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 860px){
    .hero h1{ font-size: 48px; }
    .games-grid{ grid-template-columns: 1fr; }
    .division-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px){
    .hero h1{ font-size: 34px; }
  }

/* ---------- Auth (Steam sign-in) ---------- */
/* display:flex here is load-bearing: #auth-area holds two independent
   children once signed in (.messages-nav-link, then .user-chip), and
   .messages-nav-link is itself display:flex which makes it a block-level
   box. Without a flex row on the parent the two stacked into separate
   lines instead of sitting side by side -- the "icon floating above the
   chip" bug. Order in the DOM (see renderSignedInChip) is deliberately
   icon-then-chip so it reads left-to-right as search -> messages -> chip. */
.auth-area{ position:relative; display:flex; align-items:center; gap:10px; }
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:transparent;
  text-decoration:none;
  transition: background var(--dur-fast) var(--ease);
}
.user-chip:hover{ background: rgba(255,255,255,0.05); }
.user-chip img.uc-avatar{
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--panel);
  object-fit:cover;
  display:block;
}
.user-chip .uc-avatar-fallback{
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:var(--on-accent);
}
.user-chip .uc-name{ font-size:16px; font-weight:800; color:var(--text); white-space:nowrap; }
.user-chip .uc-caret{ font-size:10px; color:var(--text-muted); }

.messages-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.messages-nav-link:hover{ background: rgba(255,255,255,0.05); color: var(--accent-2); }
.messages-nav-badge{
  position:absolute;
  top:6px;
  right:6px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg);
}

/* Chrome (and other engines) have a real compositing quirk where a
   position:sticky element can render ABOVE a position:fixed element that
   uses backdrop-filter, regardless of z-index -- confirmed live: the sticky
   topbar (z-index:50) was painting on top of every modal backdrop
   (z-index:300), undimmed, and on tall modals (e.g. LFT create-post, which
   top-aligns instead of centering) its title/close-button visually collided
   with and got cut off by the nav bar. Fix: whenever any modal backdrop is
   open, drop the topbar out of sticky positioning so it stacks normally
   (and gets dimmed/covered) like everything else on the page. */
body:has(.profile-modal-backdrop[style*="flex"]) header.topbar{
  position:static;
}
.profile-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(9,9,11,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:300;
  display:flex;
  /* "safe center" keeps a short modal centered like before, but -- unlike
     plain center -- falls back to start-alignment once content is taller
     than the viewport, so the top of a tall modal (e.g. the LFT create-post
     form, which grew past one screen once Schedule/More Details were added)
     scrolls into view instead of being clipped off above the fold. */
  align-items:safe center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}
.profile-modal{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:30px;
  width:380px;
  max-width:100%;
  position:relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--dur-slow) var(--ease) both;
}
.profile-modal.wide{ width: 540px; }
.profile-modal textarea.profile-input{ resize: vertical; min-height: 90px; font-family: 'Inter', sans-serif; }

/* ---------------- Match detail modal (roster vs roster) ----------------
   Opened by clicking a /schedule card (see openMatchDetail() in app.js).
   Reuses the same .profile-modal-backdrop/.profile-modal shell as every
   other modal on the site, just wider (two roster columns side by side)
   and black-background like the LFT detail modal (#lft-detail-modal-backdrop
   .profile-modal) instead of the default panel color, since it's presenting
   two teams as equal peers rather than one person's own profile form. */
#match-detail-modal-backdrop .profile-modal.wide{ width: 640px; background:#000000; }
.md-header{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.md-teams{ display:flex; align-items:flex-start; gap:18px; }
.md-team-col{ flex:1; min-width:0; }
.md-team-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.md-team-name{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16px;
  color:var(--text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.md-team-name:hover{ color: var(--accent-2); }
.md-vs{
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted);
  padding-top: 34px; flex-shrink:0;
}
.md-roster-list{ display:flex; flex-direction:column; gap:10px; }
.md-roster-list .player-cell.roster-player{
  display:flex; align-items:center; gap:9px; font-family:'Inter', sans-serif;
}
.md-roster-list .player-cell.roster-player .pc-avatar-slot{
  width:28px; height:28px; border-radius:50%;
  background: transparent; border: 1px solid var(--line-strong); box-shadow:none;
}
.md-roster-list .player-cell.roster-player .pc-avatar-slot img{ border-radius:50%; }
.md-roster-list .player-cell.roster-player .pc-name{ font-size:14px; font-weight:600; }
.md-note{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--text-muted); line-height:1.5;
}
.sched-card-clickable{ cursor:pointer; }
@media (max-width: 560px){
  #match-detail-modal-backdrop .profile-modal.wide{ width:100%; padding:22px; }
  .md-teams{ flex-direction:column; gap:22px; }
  .md-vs{ padding-top:0; align-self:center; }
}

/* ---------------- Compare players modal ---------------- */
.compare-search-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding:11px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  position:relative;
}
.compare-search-wrap:focus-within{ border-color:var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-tint); }
.compare-search-wrap svg{ flex-shrink:0; opacity:0.55; color:var(--text-muted); }
.compare-search-wrap input{ width:100%; }
#compare-search-dropdown{ top: calc(100% + 6px); }
.compare-result{ margin-top:22px; min-height:0; }
.compare-loading{ color:var(--text-muted); font-size:13px; padding:8px 0; }
.compare-players-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}
.compare-player-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  text-decoration:none;
  padding:10px;
  border-radius:var(--radius-md);
  transition: background var(--dur-fast) var(--ease);
}
.compare-player-card:hover{ background: var(--panel-2); }
.compare-avatar{
  width:56px; height:56px;
  border-radius:var(--radius-md);
  object-fit:cover;
  display:block;
  background:var(--panel-2);
  border:1px solid var(--line);
}
.compare-avatar-fallback{
  width:56px; height:56px;
  border-radius:var(--radius-md);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px;
  color:var(--text-muted);
}
.compare-player-name{ font-weight:700; font-size:14px; color:var(--text); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-player-team{ font-size:11px; color:var(--text-muted); text-align:center; }
.compare-vs{
  font-family:'Space Grotesk', sans-serif;
  font-weight:800;
  font-size:15px;
  color:var(--text-faint);
  flex-shrink:0;
}
.compare-stats-table{ width:100%; border-collapse:collapse; }
.compare-stats-table tr{ border-top:1px solid var(--line); }
.compare-stats-table tr:first-child{ border-top:none; }
.compare-stats-table td{ padding:12px 6px; font-family:'JetBrains Mono', monospace; }
.compare-stat-label{ text-align:center; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; width:34%; }
.compare-stat-value{ font-weight:700; font-size:15px; color:var(--text); width:33%; }
.compare-stats-table td:first-child.compare-stat-value{ text-align:left; }
.compare-stats-table td:last-child.compare-stat-value{ text-align:right; }
.compare-stat-value.better{ color:var(--success); }

/* Forum thread detail + reply UI */
.thread-detail-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin: 16px 0 28px;
  box-shadow: var(--shadow-sm);
}
.thread-detail-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.1px;
  color: var(--text);
  margin: 10px 0 16px;
}
.thread-detail-body{ color: var(--text); font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; }
.thread-manage-bar{ margin-top:16px; display:flex; justify-content:flex-end; }
.thread-manage-btn{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 8px);
  padding: 6px 12px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.thread-manage-btn:hover{ color: var(--danger, #ff5a5f); border-color: var(--danger, #ff5a5f); }
.thread-locked-badge{
  font-family:'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill, 999px);
  padding: 4px 10px;
}
.thread-replies-list{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 22px; }
.thread-reply-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.thread-reply-box{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.thread-reply-actions{ display:flex; justify-content:flex-end; margin-top: 12px; }
.profile-modal-close{
  position:absolute;
  top:16px;
  right:18px;
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition: color var(--dur-fast) var(--ease);
}
.profile-modal-close:hover{ color:var(--text); }
.profile-modal-header{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.profile-modal-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--panel-2);
  object-fit:cover;
  display:block;
}
.profile-modal-avatar-fallback{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  color:var(--on-accent);
}
.profile-modal-name{ font-weight:700; font-size:16px; color:var(--text); }
.profile-modal-sub{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.profile-field-label{
  display:block;
  font-size:11.5px;
  color:var(--text-muted);
  margin-bottom:8px;
  margin-top:18px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight: 600;
}
.profile-input{
  width:100%;
  padding:11px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:14px;
  font-family:'Inter', sans-serif;
}
.profile-input:focus{ outline:none; border-color:var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-tint); }
/* <select class="profile-input"> fix: the closed box picks up the rules
   above fine, but the dropdown *option* list renders with the browser's
   native popup styling unless option colors are set explicitly -- without
   this, the popup was rendering white-on-white (system white background +
   our --text white/light text color inherited from .profile-input) and
   was completely unreadable. Also normalized the box itself to match
   .filter-select's look (custom caret, no native arrow) instead of the
   browser-default select chrome it was using before. */
select.profile-input{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L5 6L10 0Z' fill='%239CA3AF'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.profile-input option{ background: var(--panel); color: var(--text); }

.field-label-hint{
  display:block;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  color:var(--text-faint);
  margin-top:2px;
  font-size:11px;
}

/* ---------------- Scouting report modal: dynamic section/link rows ---------------- */
.report-dyn-row{
  display:grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap:8px;
  align-items:start;
  margin-bottom:8px;
}
.report-dyn-row .profile-input{ margin:0; }
.report-dyn-remove{
  padding:10px 13px;
  font-size:14px;
  line-height:1;
  align-self:center;
}

/* ---------------- LFT: role + season chip pickers ---------------- */
.role-chip-group, .season-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.role-chip{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:8px 14px;
  cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.role-chip:hover{ border-color:var(--line-strong); color:var(--text); }
.role-chip.selected{
  background:var(--accent-tint);
  border-color:var(--accent-dim);
  color:var(--accent);
}
.season-chip{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.season-chip:hover{ border-color:var(--line-strong); color:var(--text); }
.season-chip.selected{
  background:var(--success-tint);
  border-color:rgba(52,211,153,0.4);
  color:var(--success);
}
.season-chip-rating{ opacity:0.85; }
.season-chip-group-readonly .season-chip{ pointer-events:none; }
.season-chip-loading{
  color:var(--text-muted);
  font-size:12.5px;
  padding:4px 0;
}
/* Rating color-coding, reused from the season-history table's own
   rating-bad/avg/good bands so a rating reads the same everywhere on the
   site -- here applied to plain inline spans rather than table cells. */
.season-chip-rating.rating-bad, .lft-season-badge-rating.rating-bad{ color: var(--rating-bad-color); }
.season-chip-rating.rating-avg, .lft-season-badge-rating.rating-avg{ color: var(--rating-avg-color); }
.season-chip-rating.rating-good, .lft-season-badge-rating.rating-good{ color: var(--rating-good-color); }
.season-chip.selected .season-chip-rating{ opacity:1; }

/* Per-season "played as" role sub-picker, shown under Experience once a
   season chip is selected. */
.season-role-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.season-role-row-label{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  flex-shrink:0;
  width:110px;
  padding-top:6px;
}
.season-role-row-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-width:200px;
}
.season-role-chip-group{ gap:6px; }
.role-chip.role-chip-sm{ padding:5px 10px; font-size:11.5px; }
/* Follow-up picker that appears only once a season is tagged Sub -- "which
   role did you actually play while subbing?" Indented + a dashed top rule
   so it visually reads as a nested question, not another top-level choice
   sitting next to IGL/Entry/AWPer/etc. */
.season-role-subas{
  margin-top:2px;
  padding-top:10px;
  padding-left:2px;
  border-top:1px dashed var(--line);
}
.season-role-subas-label{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin-bottom:8px;
}

/* Role stat preview -- once a season is tagged with a role, shows the real
   stats we can actually back up right now, plus greyed "Coming soon" chips
   for whatever would need FACEIT's advanced/private stats API (utility
   damage, flash assists, opening duels, etc) that we don't have access to
   yet. Hover a locked chip for why. */
.role-stat-preview{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.role-stat-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:6px 10px;
  background:var(--accent-tint);
  border:1px solid var(--accent-dim);
  border-radius:var(--radius-sm);
  min-width:56px;
}
.role-stat-chip-value{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
}
.role-stat-chip-label{
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--text-faint);
}
.role-stat-chip.role-stat-chip-locked{
  background:rgba(255,255,255,0.02);
  border:1px dashed var(--line);
  cursor:help;
}
.role-stat-chip.role-stat-chip-locked .role-stat-chip-value{ color:var(--text-faint); }
.role-stat-chip.role-stat-chip-locked .role-stat-chip-label{ color:var(--text-faint); opacity:0.75; }

/* Day-of-week schedule picker + its read-only mini-calendar rendering in
   the detail view. */
.day-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.day-chip{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-muted);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 13px;
  cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.day-chip:hover{ border-color:var(--line-strong); color:var(--text); }
.day-chip.selected{
  background:var(--accent-tint);
  border-color:var(--accent-dim);
  color:var(--accent);
}
.day-chip-group-readonly .day-chip{
        cursor:default;
        background:transparent;
        border-color:transparent;
        color:var(--text-faint);
        opacity:1;
        font-weight:600;
}
.day-chip-group-readonly .day-chip.selected{
        background:var(--accent-tint);
        border-color:var(--accent-dim);
        color:var(--accent);
        opacity:1;
}

/* Preferred-maps picker, same visual language as role chips. */
.map-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.map-chip{
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:7px 13px;
  cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.map-chip:hover{ border-color:var(--line-strong); color:var(--text); }
.map-chip.selected{
  background:var(--accent-tint);
  border-color:var(--accent-dim);
  color:var(--accent);
}

/* Compact color-coded season summary in the LFT table's Experience column. */
.lft-season-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:400;
  color:var(--text-muted);
  background:#000000;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:5px 10px;
  margin:2px 4px 2px 0;
}
/* Filled pill instead of plain colored text, matching the same upgrade
   made to the player-profile season table's Rating column. */
.lft-season-badge-rating{
  font-weight:700;
  padding:2px 7px;
  border-radius:999px;
  display:inline-block;
}
.lft-season-badge-rating.rating-good{ background: rgba(46,204,113,0.32); }
.lft-season-badge-rating.rating-avg{ background: rgba(174,180,194,0.24); }
.lft-season-badge-rating.rating-bad{ background: rgba(255,92,92,0.32); }
.lft-season-badge-role{
  color:var(--text-faint);
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}

/* ---------------- LFT: elo/level icon + clickable rows + detail modal ---------------- */
.lft-level-icon{
  width:17px; height:17px;
  vertical-align:middle;
  margin-right:5px;
  flex-shrink:0;
}
.lft-elo-cell{ display:inline-flex; align-items:center; gap:10px; }
/* The table row's elo cell is deliberately compact (dense ledger row), but
   that same small 17px icon + inherited 14px text was getting reused
   verbatim in the big detail modal, where "Elo / Level" is its own full
   row with room to breathe -- scoped bump so the table cell is untouched. */
#lft-detail-content .lft-level-icon{ width:30px; height:30px; margin-right:0; }
#lft-detail-content .lft-elo-cell{ font-size:22px; font-weight:400; color:var(--text); }
/* Highest-division badge riding next to the level icon/Elo number, both in
   the compact row card and the detail modal's elo badge -- reuses the same
   ribbon-shaped .division-badge component used everywhere else on the site,
   just sized down a notch to sit comfortably next to a big Elo number
   instead of a page hero. */
.lft-card-elo .division-badge{ font-size:10px; padding:4px 13px 4px 8px; }
#lft-detail-content .lft-elo-cell .division-badge{ font-size:12px; padding:4px 15px 4px 9px; }
tr.lft-row-clickable{ cursor:pointer; }
tr.lft-row-clickable:hover{ background: rgba(229,185,63,0.06); }
.lft-detail-row{
  display:flex;
  gap:18px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.lft-detail-row:first-of-type{ border-top:none; margin-top:6px; }
.lft-detail-label{
  width:130px;
  flex-shrink:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  font-weight:600;
  padding-top:2px;
}
.lft-detail-value{ flex:1; color:var(--text); font-size:14px; line-height:1.6; }
.lft-detail-pill{
  display:inline-block;
      font-size:15.5px;
  font-weight:600;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
      padding:6px 16px;
      margin:0 7px 7px 0;
}
.lft-detail-text{ color:var(--text); }
/* Per-season stat cards in the LFT detail view -- same black-card language
   as the player-profile redesign (solid black fill, thin line border,
   bold purple Archivo Black season/team title) instead of the old flat
   read-only season chips, and reuses .role-stat-preview/.role-stat-chip
   (already built for the create-post form's role picker) so Rating/ADR/
   Matches plus any tagged role's stats render exactly the way they do
   there. */
.lft-detail-season-list{ display:flex; flex-direction:column; gap:10px; }
.lft-detail-season-card{
  background:#000000;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.lft-detail-season-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.lft-detail-season-title{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--accent-mid);
  letter-spacing:0.2px;
}
/* Season-card stats (Rating/Matches/ADR) reuse .role-stat-chip from the
   create-post form, which is a purple-outlined pill -- fine floating on the
   form's own panel, but read as a wall of little purple boxes once several
   sit together in a season card. Stripped down to plain value/label text
   with generous gaps instead, no border or fill; only the locked
   ("coming soon") stats keep any visual box, and even that's just a faint
   dashed underline now rather than a bordered pill. */
.lft-detail-season-card .role-stat-preview{ gap:22px; }
.lft-detail-season-card .role-stat-chip{
  background:transparent;
  border:none;
  padding:0;
  min-width:0;
  align-items:flex-start;
}
.lft-detail-season-card .role-stat-chip-value{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:14px;
}
/* Bumped up from the base 9px/--text-faint (Rating/Matches/ADR + the
   locked "coming soon" labels were reading as barely-there once the boxed
   pill background got stripped above -- the box used to do some of the
   contrast work, so the text itself needed to pick up the slack). */
.lft-detail-season-card .role-stat-chip-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  color:var(--text-muted);
}
.lft-detail-season-card .role-stat-chip.role-stat-chip-locked{
  background:transparent;
  border:none;
  border-bottom:1px dashed var(--line);
  border-radius:0;
  padding-bottom:2px;
}
.lft-detail-season-card .role-stat-chip.role-stat-chip-locked .role-stat-chip-label{
  color:var(--text-faint);
}
/* Sub stays the emphasized/primary badge on a season card even once a
   subbed-as role is picked -- "Sub" renders bold in gold (matching the
   site's other "LFT"/status-tag gold) ahead of the plain role name, so it
   reads as "Sub, playing AWPer" rather than the sub status disappearing
   into just another role pill. */
.lft-detail-pill-sub{ display:inline-flex; align-items:center; gap:5px; }
.lft-detail-pill-sub-tag{ color:var(--gold); font-weight:800; }
/* Career-context chips inside the LFT detail modal -- reuses the exact
   .career-chip visuals from the player profile's Career strip, just
   left-aligned with a tighter gap since this sits in a narrower column
   instead of a full-width page strip. */
.lft-detail-career-chips{ justify-content:space-around; gap:10px; }

/* Wide/horizontal detail modal (Option 2): identity+elo top bar, a
   full-width career strip, then a 3-column dashboard body (info /
   experience / looking-for) instead of the old tall label-value stack.
   #lft-detail-modal-backdrop-scoped width override sits below; the
   create-post modal (.lft-modal-backdrop) also uses .profile-modal.wide
   and must keep its original 540px, so this is deliberately scoped to the
   detail modal's own backdrop id only. */
#lft-detail-modal-backdrop .profile-modal.wide{ width:1380px; padding:36px 44px; }
.lft-detail-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
#lft-detail-content .lft-detail-topbar .profile-modal-header{ margin-bottom:0; }
.lft-detail-topbar-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.lft-detail-social{
  display:flex;
  align-items:center;
  gap:8px;
}
.lft-detail-social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 12px;
  color:var(--text-muted);
  background:#0C0C0E;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  text-decoration:none;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.03em;
  transition:color .15s ease, border-color .15s ease;
}
.lft-detail-social-link:hover{ color:#fff; border-color:var(--line-strong); }
.lft-detail-social-link.lft-detail-social-discord:hover{ color:#5865F2; border-color:#5865F2; }
.lft-detail-elo-badge{
  display:flex;
  align-items:center;
  gap:8px;
  background:#0C0C0E;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:10px 18px;
  flex-shrink:0;
}
.lft-detail-career-block{ margin-bottom:24px; }
.lft-detail-career-strip{
        padding:14px 0;
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
}
.lft-detail-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.25fr 1fr;
  gap:32px;
}
.lft-detail-col{ min-width:0; }
/* No inner scroll -- the whole modal grows to fit every tagged season
   instead of clipping them into a scrollable pane (was max-height:380px +
   overflow-y:auto). The wider modal (1100px, see .profile-modal.wide above)
   gives each season card room to sit on one line instead. */
.lft-detail-col-exp{ padding-right:2px; }
.lft-detail-col-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  font-weight:750;
  margin-bottom:8px;
}
.lft-detail-col-label-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#lft-detail-content .profile-modal-actions{
  justify-content:flex-end;
  border-top:1px solid var(--line);
  padding-top:18px;
}
#lft-detail-content .profile-modal-name{ font-weight:800; }

/* LFT post comments -- no rep/upvote, just threaded replies scoped to
   the post. Sits between the info grid and the action row, inside the
   same enlarged modal so it reads as one continuous card rather than
   a bolted-on panel. */
.lft-detail-comments-section{
      margin-top:28px;
      padding-top:22px;
      border-top:1px solid var(--line);
}
.lft-detail-comments-head{
      display:flex;
      align-items:baseline;
      gap:8px;
      margin-bottom:14px;
}
.lft-detail-comments-count{
      color:var(--text-faint);
      font-size:11px;
      font-weight:600;
}
   .lft-comments-list{
              display:flex;
              flex-direction:column;
              margin-bottom:16px;
              max-height:280px;
              overflow-y:auto;
      }
    .lft-comment-entry{
            position:relative;
            padding:12px 14px;
            border-bottom:1px solid var(--line);
    }
    .lft-comment-entry:last-child{ border-bottom:none; }
    .lft-comment-entry:nth-child(even){ background:rgba(255,255,255,0.035); }
.lft-comment-entry-head{
    display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:6px;
}
.lft-comment-author{
      display:flex;
      align-items:center;
      gap:8px;
      font-family:'Inter', sans-serif;
      font-weight:700;
      font-size:13px;
      color:var(--text);
      text-decoration:none;
}
.lft-comment-author:hover{ color:var(--gold); }
.lft-comment-time{
      color:var(--text-faint);
      font-size:10.5px;
      flex-shrink:0;
}
.lft-comment-message{
      color:var(--text-muted);
      font-family:'Inter', sans-serif;
      font-size:13px;
      line-height:1.5;
      white-space:pre-wrap;
      word-break:break-word;
}
.lft-comment-delete-btn{
      background:none;
      border:none;
      color:var(--text-faint);
      font-family:'JetBrains Mono', monospace;
      font-size:10.5px;
      text-transform:uppercase;
      letter-spacing:0.03em;
      cursor:pointer;
      padding:0;
      margin-top:8px;
}
.lft-comment-delete-btn:hover{ color:var(--gold); }
.lft-comment-empty{
      color:var(--text-faint);
      font-size:13px;
      padding:8px 0 16px;
}
.lft-comment-form-row{
      display:flex;
      flex-direction:column;
      gap:10px;
}
.lft-comment-input{
      width:100%;
      min-height:60px;
      resize:vertical;
      background:var(--panel-2);
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      color:var(--text);
      font-family:'Inter', sans-serif;
      font-size:13px;
      padding:10px 12px;
}
.lft-comment-input:focus{ outline:none; border-color:var(--line-strong); }
.lft-comment-form-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
}
.lft-comment-post-status{
      color:var(--text-faint);
      font-size:11.5px;
}
.lft-comment-signin-hint{
      color:var(--text-faint);
      font-size:12.5px;
}

/* Whole detail modal: black card (was the site-wide grey --panel) + the
   same Inter (names/values/prose) + JetBrains Mono (labels/meta/small caps)
   pairing used on the row cards above, instead of one single font for
   everything. All scoped to #lft-detail-content / #lft-detail-modal-backdrop
   only -- these classes (.lft-detail-label, .career-chip-*,
   .profile-modal-name, etc.) are shared with the Edit Profile modal and
   player-profile Career strip, which should keep their own existing look
   untouched. */
#lft-detail-modal-backdrop .profile-modal{ background:#000000; }
/* Root default (Inter) -- also what free-text descendants like
   .lft-detail-text (About/Looking For/Discord) inherit, since they aren't
   listed as their own override below. */
#lft-detail-content,
#lft-detail-content .lft-detail-value,
#lft-detail-content .lft-detail-pill,
#lft-detail-content .lft-elo-cell,
#lft-detail-content .profile-modal-name,
#lft-detail-content .career-chip-value{
  font-family:'Inter', sans-serif;
}
/* Labels/meta -- small, muted, uppercase-ish -- stay in the mono/ledger
   register instead of the bigger prose/value text next to them. */
#lft-detail-content .lft-detail-label,
#lft-detail-content .lft-detail-col-label,
#lft-detail-content .profile-modal-sub,
#lft-detail-content .career-chip-label,
#lft-detail-content .day-chip{
  font-family:'JetBrains Mono', monospace;
}
#lft-detail-content .lft-detail-pill{
  background:#000000;
  border-color:var(--line-strong);
}
#lft-detail-content .day-chip:not(.selected){ background:#000000; }
#lft-detail-content .profile-modal-avatar-fallback{
  font-family:'Inter', sans-serif;
  font-weight:700;
  /* 12px (--radius-md) read as barely-different from a circle at this
     48px size once a real photo fills it -- the rounded corners get lost
     against the photo's own visual noise. Cutting to 6px keeps a hint of
     softness (matches the rest of the site's card language) while reading
     unambiguously as a square, not a circle. */
  border-radius: 6px;
  width:52px; height:52px;
}
#lft-detail-content .profile-modal-avatar{
  border-radius: 6px;
  width:52px; height:52px;
}
/* "View all experience" toggle -- sits at the top of the Experience value
   column (as close to "next to the Experience label" as a fixed-width label
   column allows) and expands a lazy-loaded full season-by-season history
   below the seasons the poster chose to tag on the post itself. */
.lft-detail-exp-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:8px;
}
/* Now a plain link to the player's own profile page (was a toggle that
   expanded an inline full-history pane) -- same look, just no open/caret
   state since there's nothing left to expand/collapse in place. */
.lft-detail-view-all-btn{
  display:inline-block;
  background:transparent;
  border:1px solid var(--line);
  color:var(--accent-mid);
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-decoration:none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lft-detail-view-all-btn:hover{ border-color:var(--accent-dim); background:var(--accent-tint); }
.lft-detail-view-all-btn.open{ border-color:var(--accent-dim); background:var(--accent-tint); color:var(--text); }
.lft-detail-full-history{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}
.profile-lft-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
/* Roles-by-season section inside the Edit Profile modal -- moved here from
   an inline per-season <select> in the season history table so editing is
   in one place (the modal) and supports picking up to 3 roles per season
   instead of just 1. Scrollable rather than letting the modal grow
   unbounded for a player with a long real season history. */
.profile-roles-list{
  max-height:220px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:4px;
}
.profile-role-row{ display:flex; flex-direction:column; gap:8px; }
.profile-role-row-label{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--text-muted);
}
.profile-modal-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:26px;
}
.profile-modal-status{ margin-top:12px; font-size:12px; color:var(--text-muted); min-height:16px; }
.profile-no-faceit{
  margin-top:18px;
  padding:12px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:12px;
  color:var(--text-muted);
  line-height:1.6;
}

/* ---------- Carousel team logos (real images w/ initials fallback) ---------- */
.carousel-card .cc-teams .team-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}
.carousel-card .cc-teams .team-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------------- Player Profile ---------------- */
/* Widened from 1160px: the season-history table has 14 nowrap columns
   (Season/Team/Division/Rating/M/K/D/A/K-D/ADR/KPR/HS/3K/4K) that need
   ~1300px to lay out at readable padding. At 1160px the table quietly
   overflowed its own panel and, combined with the panel's overflow-x:hidden
   (needed to keep the vertical scrollbar clean), the rightmost columns
   (HS/3K/4K) were being clipped off with no way to see them -- same failure
   mode as the old vertical Career-row bug, just sideways. 1440px matches
   the width already used by the Stats page. */
main.player-page{
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 32px 48px;
}
#player-hero, #team-hero{
  display:flex;
  align-items:center;
  gap:24px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
  min-height:84px;
}
.player-hero-main{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}
/* Generic team badge -- also reused (with a more specific size override)
   inside the homepage upcoming-matches carousel. */
.team-logo{
  width:36px; height:36px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow:hidden;
}
.team-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Big square logo stays right-aligned in the hero (that part of the old
   design was fine) -- the grey bordered card around it is what's gone.
   No border, no panel fill, no glow -- just the bare logo next to the
   "Team"/name text. (An earlier pass tried a soft radial-glow halo behind
   the logo instead of a hard edge; removed per feedback that it still read
   as an unwanted "ambient glow" effect.) */
.player-hero-team{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  text-decoration:none;
  flex-shrink:0;
}
.player-hero-team-text{ text-align:right; }
.player-hero-team-label{
  font-family:'Archivo Black', 'JetBrains Mono', monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--accent-mid);
  margin-bottom:3px;
}
.player-hero-team-name{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--text);
}
.player-hero-team-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.player-hero-team .team-logo{ width:88px; height:88px; font-size:24px; border-radius:var(--radius-lg); border:none; }
/* The season-history table loads asynchronously for players not already
   found in the local current-season roster (it needs the full multi-season
   stats dataset) after the rest of the profile has already painted.
   Reserving space up front instead of starting from a near-zero-height
   "Loading…" line means the real table popping in shifts whatever's below
   it a lot less -- this is just a placeholder box, no stats are shown or
   guessed here. */
#player-season-body, #team-season-body{
  min-height: 60px;
}
.player-avatar-lg{
  width:88px;
  height:88px;
  border-radius:var(--radius-lg);
  object-fit:cover;
  display:block;
  flex-shrink:0;
  background:var(--panel-2);
  border:1px solid var(--line);
  box-shadow: 0 0 0 4px rgba(229,185,63,0.10), var(--shadow-md);
}
.player-avatar-lg-fallback{
  width:88px;
  height:88px;
  border-radius:var(--radius-lg);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:30px;
  font-weight:700;
  color: var(--text-muted);
  flex-shrink:0;
  box-shadow: 0 0 0 4px rgba(229,185,63,0.10), var(--shadow-md);
}
.player-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.player-name-row h1{
  font-family:'Archivo Black', 'Space Grotesk', sans-serif;
  font-weight:400;
  font-size:40px;
  line-height:1.15;
  letter-spacing: -0.4px;
  margin:0;
  color: var(--text);
}
.player-flag-slot{ display:flex; align-items:center; flex-shrink:0; }
.player-flag-slot:empty{ display:none; }
.player-flag-slot img{ width:24px; height:18px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px var(--line); display:block; }
.player-verified{
  width:21px;
  height:21px;
  border-radius:50%;
  /* Was var(--lavender) -- that variable is now a near-black dark tint
     (#1E1830) used elsewhere only for subtle hover backgrounds, so a solid
     badge in that color was nearly invisible against the page's own dark
     background (the actual bug report: "verified checkmark isn't loading
     properly" -- it was rendering, just imperceptibly). var(--accent) is
     the real bright brand color or actual visible badges everywhere else. */
  background:var(--accent);
  color:#1A1918;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
}
.player-meta-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--text-muted);
}
.player-meta-row a{ color:var(--accent); text-decoration:none; }
.player-meta-row a:hover{ color: var(--accent-2); text-decoration:underline; }
/* ---------- Division badges (team hero, player hero, season-history table) ----------
   Old-ESEA-style ribbon/tag shape (flat left edge, notched point on the
   right, via clip-path) with solid, high-contrast fills copying that same
   ladder's own color scheme -- light grey (Open) -> blue (Intermediate) ->
   deeper blue (Main) -> dark navy (Advanced) -- pushed a bit more saturated
   than the original reference so each tier still reads clearly against a
   pure-black page background, not just against the reference's own grey
   card background. */
.division-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 16px 4px 10px;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  line-height:1.5;
  white-space:nowrap;
}
.division-badge.div-open{ background:#C7CDD8; color:#12151C; }
.division-badge.div-im{ background:#4C7EE0; color:#FFFFFF; }
.division-badge.div-main{ background:#2352C4; color:#FFFFFF; }
.division-badge.div-adv{ background:#141B33; color:#FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.division-badge.div-challenger{ background:#C9971F; color:#181000; }
.division-badge.div-other{ background:rgba(255,255,255,0.12); color:var(--text-muted); }
/* Team/player hero specifically (not the compact one used in the per-match
   Career table row) -- sized up to sit next to the 36px name, and given a
   fixed min-width sized to the longest abbreviation ("CHAL"/"MAIN"/"OPEN")
   so every division renders the exact same pill width regardless of which
   label it is or how long the adjacent team/player name happens to be. */
.player-meta-row .division-badge{
  min-width:98px;
  justify-content:center;
  padding:7px 20px 7px 14px;
  font-size:15px;
  letter-spacing:0.6px;
}
.stage-suffix{ color:var(--text-muted); font-size:12px; margin-left:4px; }
/* Current-season W-L record -- sits on its own line right below the
   division badge/season row (not crammed into the name row) on both the
   team hero and player hero. Archivo Black + a much larger size so it reads
   as its own real stat rather than small print next to the name; wins/
   losses still colored separately (green/red), split by a plain dash. */
.hero-record-row{
  margin-top:8px;
}
.hero-record-row:empty{ display:none; margin-top:0; }
.hero-record{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:'Archivo Black', 'JetBrains Mono', monospace;
  font-weight:400;
  font-size:32px;
  letter-spacing:0.2px;
  line-height:1;
}
.hero-record-win{ color:var(--success); }
.hero-record-loss{ color:var(--danger); }
.hero-record-sep{ color:var(--text-muted); }
/* ---------- Outbound Steam/FACEIT profile links (player + team hero) ---------- */
.profile-links-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.profile-links-row:empty{ margin-top:0; }
.profile-link-pill{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-muted);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 20px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.profile-link-pill:hover{ color:var(--text); border-color:var(--accent-dim); background:rgba(255,255,255,0.03); }
/* Message pill -- same small pill shape/size as Steam/FACEIT so it doesn't
   look like a big competing CTA, but filled solid with the accent so it
   still catches the eye next to two plain outline pills. Sits to the right
   of Steam/FACEIT in the links row (see linksRowHtml in renderPlayerProfile),
   not up in the name row where it used to compete with Compare/Edit. */
.profile-link-pill.message-pill{
  border:none;
  color:var(--on-accent);
  background:var(--accent);
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
}
.profile-link-pill.message-pill:hover{ color:var(--on-accent); background:var(--accent-2); border-color:transparent; }
/* Single column now -- the season stats table used to be squeezed into a
   minmax(0,1fr) track next to a fixed 300px sidebar, so it never got wider
   than page-width-minus-300px even though the table itself is width:100%.
   Team Form / Teammates move to a full-width row below the table instead,
   so the stats panel can actually use the full page width (matching the
   career strip beneath it). */
.player-body{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items:start;
}
.player-side{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.player-side .side-panel{
  flex:1;
  min-width:220px;
  margin-bottom:0;
}

/* ---------------- Team Profile (Seasons + Player Stats) ---------------- */
.team-profile-grid{
  display:grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 28px;
  align-items:start;
}
.team-seasons-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow: var(--shadow-sm);
}
.team-seasons-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.team-season-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 15px;
  border-radius:var(--radius-sm);
  border-left:3px solid transparent;
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.team-season-item:hover{ background: rgba(255,255,255,0.03); }
.team-season-item.active{
  background: rgba(229,185,63,0.08);
  border-left-color: var(--accent);
}
.tsi-season{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:16px;
  color:var(--text);
}
.team-season-item.active .tsi-season{ color: var(--accent); }
.tsi-division{
  font-size:13px;
  color:var(--text-muted);
  margin-top:3px;
}
.tsi-record{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:15.5px;
  color:var(--text);
  flex-shrink:0;
}
.team-stats-main{ min-width:0; }
.team-stats-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.team-stats-tabs{ margin-bottom:0; }
/* 15 columns (Player + Rating/M/K/D/A/K-D/ADR/KPR/HS/3K/4K/5K/1v1/1v2) can
   still be wider than the panel on a narrower desktop window even at the
   page's 1440px max-width. auto, not the base .stats-panel's overflow:hidden,
   so that case scrolls horizontally instead of silently clipping columns --
   same reasoning as #player-body-stats .stats-panel above. */
#team-stats-panel{
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
#team-stats-panel::-webkit-scrollbar{ height:9px; }
#team-stats-panel::-webkit-scrollbar-track{ background:transparent; }
#team-stats-panel::-webkit-scrollbar-thumb{
  background:var(--line-strong);
  border-radius:var(--radius-pill);
  border:2px solid var(--panel);
  background-clip:padding-box;
}
#team-stats-panel::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }

/* Combined Matches table, "under the stats" per design -- one table below
   .team-profile-grid rather than separate upcoming/past tables, driven
   entirely by clicking a season in the Seasons sidebar (no separate picker
   here). Row background is tinted by result -- green (win), red (loss),
   neutral grey (not yet played) -- with a small colored W/L letter in the
   first column, matching the reference layout. */
/* Team-only override -- trims the hero's bottom gap down from the shared
   32px (still used by #player-hero) so the hero doesn't read as its own
   floating block sitting far above the Seasons/Player Stats row below it. */
#team-hero{ padding-bottom:22px; margin-bottom:22px; }
.team-matches-section{ margin-top:20px; }
.team-matches-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.team-matches-table{ width:100%; margin-bottom:4px; }
.team-matches-table th:first-child{ width:34px; }
/* Specificity bumped to beat table.stats tbody tr:nth-child(even)'s zebra
   stripe (same class-count tier as a plain .team-match-row.win rule would
   have, so the base stripe would otherwise win the tiebreak and wash out
   the result tint on every other row). */
table.stats.team-matches-table tbody tr.team-match-row.win{ background:var(--success-tint); }
table.stats.team-matches-table tbody tr.team-match-row.loss{ background:var(--danger-tint); }
table.stats.team-matches-table tbody tr.team-match-row.tbd{ background:rgba(255,255,255,0.03); }
.match-result-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:5px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:800;
}
.match-result-badge.win{ background:var(--success); color:#06120C; }
.match-result-badge.loss{ background:var(--danger); color:#1A0607; }
.match-result-badge.tbd{ background:rgba(255,255,255,0.08); color:var(--text-muted); }
.team-match-cell{ font-size:13.5px; }
.match-own-team{ color:var(--text); font-weight:700; }
.match-vs{ color:var(--text-muted); font-weight:500; margin:0 2px; }
.match-opp-team{ color:var(--accent); text-decoration:none; font-weight:600; }
.match-opp-team:hover{ color:var(--accent-2); text-decoration:underline; }
span.match-opp-team{ color:var(--text-muted); font-weight:600; text-decoration:none; cursor:default; }
@media (max-width: 860px){
  .team-profile-grid{ grid-template-columns: 1fr; }
}
/* Grid tracks default to a min-width of "auto" (their content's intrinsic
   min-content size), not 0. With a nowrap-heavy stats table inside, that let
   the left track balloon to the table's full unwrapped width and push the
   whole page wider than the viewport -- a horizontal scrollbar that had
   nothing to do with row height/padding, and that no amount of shrinking the
   table's font/padding alone could fix. minmax(0,1fr) above plus min-width:0
   here is what actually lets this column (and the table inside it) shrink
   to fit instead of forcing overflow. */
.player-main{ min-width:0; }
#player-body-stats .stats-panel{ min-width:0; }
.player-section-label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
  margin-bottom:14px;
}
.player-section-label + .section-hint{ margin-top:-10px; }
.section-hint{
  font-size:12px;
  color:var(--text-faint);
  margin-bottom:14px;
}
/* Season history can run to 15-20+ rows for long-tenured players (regular +
   playoffs + cups across many seasons). A previous version tried to force
   zero scrolling by shrinking row padding/font-size until everything fit,
   with overflow:hidden as the box's edge -- but once a player had enough
   seasons that even the shrunk table didn't fit, the extra rows (including
   the old in-table Career row) were silently clipped off with no way to
   reach them. Comfortable fixed height + a real, visibly-styled scrollbar
   is simpler and never loses data: the Career total now lives outside this
   box entirely (.career-strip below), so it's unaffected either way. */
#player-body-stats .stats-panel{
  --season-row-py: 16px;
  --season-row-fs: 14.5px;
  --season-row-px: 22px;
  /* True black instead of the site-wide --panel grey -- on the player
     profile page this card now sits directly on the black page background,
     so a grey fill just reads as a mismatched box; solid black + the row
     border-bottom below (no more zebra striping, see the override further
     down) gives the clean black-card-with-thin-dividers look. */
  background:#000000;
  max-height: 640px;
  min-height: 220px;
  overflow-y: auto;
  /* auto, not hidden -- on a narrower desktop window the 14-column table can
     still be wider than the panel even at 1440px page width. auto means
     that case gets a normal horizontal scrollbar instead of silently
     clipping the rightmost columns (HS/3K/4K) with no way to reach them. */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
#player-body-stats .stats-panel::-webkit-scrollbar{ width:9px; }
#player-body-stats .stats-panel::-webkit-scrollbar-track{ background:transparent; }
#player-body-stats .stats-panel::-webkit-scrollbar-thumb{
  background:var(--line-strong);
  border-radius:var(--radius-pill);
  border:2px solid var(--panel);
  background-clip:padding-box;
}
#player-body-stats .stats-panel::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }
/* table.stats thead th already carries position:sticky;top:0 site-wide, so
   headers stay put while the season rows scroll underneath them inside
   this box -- no extra rule needed here. */

/* Career summary strip -- always the next element after .stats-panel in
   normal document flow (see players/index.html), so unlike the old
   in-table Career row it can never scroll away or get clipped, regardless
   of how many seasons a player has. */
.career-strip{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:20px;
  padding:20px 30px;
  background:#000000;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.career-strip-title{
  font-family:'Archivo Black', 'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--accent-mid);
  flex-shrink:0;
}
.career-chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:22px;
  flex:1;
}
.career-chip{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
}
.career-chip-value{
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.career-chip.rating-cell.rating-bad .career-chip-value{ color:var(--rating-bad-color); }
.career-chip.rating-cell.rating-avg .career-chip-value{ color:var(--rating-avg-color); }
.career-chip.rating-cell.rating-good .career-chip-value{ color:var(--rating-good-color); }
.career-chip-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-faint);
}
@media (max-width: 720px){
  .career-strip{ gap:12px; padding:14px 16px; }
  .career-chip-row{ gap:16px; }
}
/* Fallback values on every var() here -- .player-stats-table is now also
   reused by the team page's Player Stats table, which isn't nested inside
   #player-body-stats .stats-panel (the only place these --season-row-*
   custom properties are actually defined). Without a fallback, an
   undefined custom property makes the whole declaration invalid at
   computed-value time -- padding would silently collapse to 0 anywhere
   outside the player page. */
table.player-stats-table td, table.player-stats-table th{ white-space:nowrap; }
/* Plain black card + thin divider lines between seasons instead of the
   zebra striping used on the denser Stats leaderboard table -- alternating
   row tints were fighting with the new solid-black card background above,
   so seasons are now separated purely by a slightly-stronger border line. */
table.player-stats-table tbody tr:nth-child(even){ background: transparent; }
table.player-stats-table tbody tr{ border-bottom: 1px solid var(--line-strong); }
table.player-stats-table thead th{
  padding-top: var(--season-row-py, 16px);
  padding-bottom: var(--season-row-py, 16px);
  padding-left: var(--season-row-px, 22px);
  padding-right: var(--season-row-px, 22px);
  /* Overrides table.stats thead th's grey rgba(22,22,26,0.92) sticky-header
     fill -- that grey was designed to blend into --panel, but this table's
     card is now solid black, so the sticky header row read as a mismatched
     grey bar sitting on top of a black card. */
  background:#000000;
}
table.player-stats-table td{
  padding-top: var(--season-row-py, 16px);
  padding-bottom: var(--season-row-py, 16px);
  padding-left: var(--season-row-px, 22px);
  padding-right: var(--season-row-px, 22px);
  font-size: var(--season-row-fs, 14.5px);
}
/* The Team-name link in this table had no color rule of its own, so the
   site-wide `a{ color:inherit }` reset left it exactly the same bright
   white as every plain stat next to it -- unreadable as a link, and one
   more reason the whole row read as a flat wall of text. */
table.player-stats-table td a{
  color: var(--accent-mid);
  font-family:'Archivo Black', 'JetBrains Mono', monospace;
  font-size: 0.94em;
  letter-spacing: 0.2px;
  transition: color var(--dur-fast) var(--ease);
}
table.player-stats-table td a:hover{ color: var(--accent); text-decoration: underline; }
/* The link-color reset above (needed for the real Team-name links in this
   same table) was also catching the player name link in .player-cell,
   tinting every roster name violet instead of the clean white/Inter-600
   treatment the main Stats page's player table uses -- this is what read as
   a "cheap" font even though the family/weight were already identical.
   Restoring .pc-name's own color here (extra class = higher specificity
   than the plain `td a` rule above) brings the team page roster back in
   line with the Stats page reference. */
table.player-stats-table td a.pc-name{ color: var(--text); text-decoration:none; }
table.player-stats-table td a.pc-name:hover{ color: var(--accent-2); text-decoration:none; }
/* On a short window, shrinking just the table rows isn't always enough --
   the header/hero/footer chrome around it is a big fixed cost too. Rather
   than guess a single "small screen" breakpoint, fitPlayerSeasonPanel() in
   app.js measures the actual overflow and only adds this class when the
   table still doesn't fit at its smallest legible row size, so normal-height
   windows never see this denser chrome at all. */
body.compact-profile-chrome header.topbar{ padding: 8px 32px; }
body.compact-profile-chrome main.player-page{ padding: 16px 32px 20px; }
body.compact-profile-chrome #player-hero,
body.compact-profile-chrome #team-hero{
  padding-bottom: 14px;
  margin-bottom: 14px;
  min-height: 0;
  gap: 14px;
}
body.compact-profile-chrome .player-avatar-lg,
body.compact-profile-chrome .player-avatar-lg-fallback{ width:48px; height:48px; font-size:18px; }
body.compact-profile-chrome .player-name-row h1{ font-size:20px; }
body.compact-profile-chrome .hero-record{ font-size:22px; }
body.compact-profile-chrome .hero-record-row{ margin-top:5px; }
body.compact-profile-chrome .player-verified{ width:15px; height:15px; font-size:9px; }
body.compact-profile-chrome .player-meta-row{ margin-top:4px; font-size:11px; }
body.compact-profile-chrome .player-meta-row .division-badge{ min-width:70px; font-size:11px; padding:5px 14px 5px 10px; }
body.compact-profile-chrome .profile-links-row{ margin-top:6px; gap:6px; }
body.compact-profile-chrome .profile-link-pill{ font-size:9.5px; padding:4px 10px; }
body.compact-profile-chrome .player-hero-team{ padding:5px 10px; gap:8px; }
body.compact-profile-chrome .player-hero-team .team-logo{ width:48px; height:48px; font-size:14px; }
body.compact-profile-chrome .player-hero-team-label{ font-size:8.5px; margin-bottom:1px; }
body.compact-profile-chrome .player-hero-team-name{ font-size:12px; }
body.compact-profile-chrome .player-section-label{ margin-bottom:6px; }
body.compact-profile-chrome footer{ padding:8px 32px; font-size:9.5px; }
/* .career-row no longer exists -- Career moved to .career-strip below the
   panel (see the block above #player-body-stats .stats-panel). */
tr.team-season-row{ cursor:pointer; transition: background var(--dur-fast) var(--ease); }
tr.team-season-row:hover{ background: rgba(255,255,255,0.04); }
tr.team-season-row:hover .season-row-caret{ color:var(--accent-2); }
tr.team-season-row .season-row-caret{
  display:inline-block;
  width:16px;
  font-size:13px;
  color:var(--accent);
  transition: color var(--dur-fast) var(--ease);
}
tr.team-season-roster-row td{ background:rgba(255,255,255,0.015); }
tr.team-season-roster-row table.stats{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.side-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow: var(--shadow-sm);
}
.side-panel-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--text-muted);
  margin-bottom:14px;
}
.form-chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.form-chip{
  width:30px; height:30px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:12.5px;
}
.form-chip.win{ background:var(--success); color:#FFFFFF; }
.form-chip.loss{ background: var(--danger-tint); border:1px solid rgba(179,86,74,0.35); color: var(--danger); }
.side-panel-note{ margin-top:14px; font-size:11.5px; color:var(--text-muted); line-height:1.6; }

@media (max-width: 860px){
  #player-hero, #team-hero{ flex-wrap:wrap; }
  .player-hero-team{ margin-left:0; width:100%; }
  .player-hero-team-text{ text-align:left; }
}
@media (max-width: 640px){
  .player-side{ flex-direction:column; }
}

/* ---------------- Player Profile: detailed stats ---------------- */
.detail-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:8px;
}

.gauge-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:18px 0 22px;
}
.gauge-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  flex:1 1 110px;
  box-shadow: var(--shadow-sm);
}
.gauge-circle{
  --pct: 0;
  width:84px; height:84px;
  border-radius:50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 3.6deg), var(--panel-2) 0deg);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.gauge-circle::before{
  content:"";
  position:absolute; inset:7px;
  border-radius:50%;
  background:var(--panel);
}
.gauge-value{ position:relative; z-index:1; font-family:'Space Grotesk', sans-serif; font-weight:800; font-size:19px; }
.gauge-card-label{
  font-family:'JetBrains Mono', monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--text-muted);
}

.stat-box-mini{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  flex:1 1 110px;
  box-shadow: var(--shadow-sm);
}
.stat-box-mini-label{ font-family:'JetBrains Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:12px; }
.stat-box-mini-value{ font-family:'Space Grotesk', sans-serif; font-weight:800; font-size:25px; }
.stat-box-mini-sub{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted); margin-top:6px; }

.side-panel-label-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0; }
.side-panel-headline{ font-family:'Space Grotesk', sans-serif; font-weight:800; font-size:17px; }
.side-panel-headline b{ font-weight:800; }

.pie-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; }
.pie-card{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:66px; }
.pie-circle{
  --pct: 0;
  width:60px; height:60px;
  border-radius:50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 3.6deg), var(--panel-2) 0deg);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.pie-circle::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--panel); }
.pie-value{ position:relative; z-index:1; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12.5px; }
.pie-label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--text-muted); text-transform:uppercase; }
.pie-detail{ font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--text-muted); }

.entry-modern-table{
  display:grid;
  grid-template-columns: 100px repeat(3, 1fr);
  gap:12px 14px;
  margin-top:18px;
  align-items:center;
}
.entry-modern-table .emt-row-label{ font-size:12px; color:var(--text-muted); }
.entry-modern-table .emt-col-label{
  font-family:'JetBrains Mono', monospace; font-size:9.5px; text-transform:uppercase;
  letter-spacing:0.5px; color:var(--text-muted); text-align:center;
}
.entry-modern-table .pie-card{ margin:0 auto; }

.weapon-row{ margin-bottom:12px; }
.weapon-row:last-child{ margin-bottom:0; }
.weapon-row-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; margin-bottom:6px; }
.weapon-row-top .wr-name{ font-weight:600; color:var(--text); }
.weapon-row-top .wr-count{ font-family:'JetBrains Mono', monospace; color:var(--text-muted); font-size:11.5px; }
.weapon-bar-track{ height:6px; border-radius:var(--radius-pill); background:var(--panel-2); overflow:hidden; }
.weapon-bar-fill{ height:100%; background:var(--accent); border-radius: var(--radius-pill); }

.detail-empty{ color:var(--text-muted); font-size:12.5px; }
.data-source-note{ margin-top:8px; font-size:11.5px; color:var(--text-faint); font-style:italic; line-height:1.6; }

@media (max-width: 860px){
  .gauge-row{ flex-direction:column; }
  .entry-modern-table{ grid-template-columns: 76px repeat(3, 1fr); }
  .entry-modern-table .emt-col-label{ font-size:8.5px; }
}

/* ---------------- Events / CS2 Circuit ---------------- */

/* "How it works" 3-step flow -- Qualifiers -> Top 6 Advance -> Championship. */
.flow-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.flow-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  position: relative;
}
.flow-step-num{
  font-family:'Archivo Black', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 34px;
  color: var(--accent-dim);
  line-height: 1;
  margin-bottom: 14px;
}
.flow-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}
.flow-desc{ color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }
.flow-arrow{
  display:none;
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 20px;
}
@media (min-width: 861px){
  .flow-card:not(:last-child) .flow-arrow{ display:block; }
}

/* Prize pool breakdown -- reuses .stat-box-mini for the number cards, plus
   a dedicated split bar showing exactly how the $50/team entry fees get
   divided between the grand prize pool and admin costs. */
.prize-stat-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 22px; }
.prize-split-bar{ margin-top: 8px; }
.psb-track{
  display:flex;
  width:100%;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow:hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.psb-fill{ height:100%; }
.psb-fill.pool{ background: var(--accent); }
.psb-fill.admin{ background: var(--text-faint); }
.psb-legend{ display:flex; gap:24px; margin-top:12px; flex-wrap:wrap; }
.psb-legend-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--text-muted); }
.psb-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.psb-legend-dot.pool{ background: var(--accent); }
.psb-legend-dot.admin{ background: var(--text-faint); }

/* Qualifier Cup cards. */
.qualifier-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.qualifier-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display:flex;
  flex-direction:column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.qualifier-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
.qc-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 10px; gap: 10px; }
.qc-name{ font-family:'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.1px; }
.qc-status{
  font-family:'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.qc-status.upcoming{ color: var(--text-muted); border: 1px solid var(--line-strong); background: var(--panel-2); }
.qc-status.live{ color: #06120C; background: var(--success); }
.qc-status.complete{ color: var(--accent); border: 1px solid var(--accent-dim); background: var(--accent-tint, rgba(139,92,246,0.1)); }
.qc-date{ font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.qc-meta-row{ display:flex; justify-content:space-between; align-items:baseline; font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
.qc-meta-row b{ color: var(--text); font-weight: 600; }
.qc-progress-track{ height:6px; border-radius:var(--radius-pill); background:var(--panel-2); overflow:hidden; margin-bottom: 16px; }
.qc-progress-fill{ height:100%; background:var(--accent); border-radius: var(--radius-pill); }
.qc-footer{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
.qc-footer b{ color: var(--text); }

/* Championship feature card. */
.championship-card{
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.champ-top-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom: 24px; }
.champ-name{ font-family:'Archivo Black', 'Space Grotesk', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin-bottom: 6px; }
.champ-date{ font-family:'JetBrains Mono', monospace; font-size: 13px; color: var(--text-muted); }
.champ-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.champ-badge{
  font-family:'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  white-space: nowrap;
}
.champ-slots-heading{
  font-family:'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.champ-slots-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.champ-slot-group-label{ font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.champ-slot-chips{ display:flex; flex-direction:column; gap: 6px; }
.champ-slot-chip{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  text-align: center;
}

/* Registration CTA -- reuses .cta-panel/.cta-btn from the homepage. */
.events-cta-note{ margin-top: 10px; font-size: 12px; color: var(--text-faint); }

@media (max-width: 980px){
  .qualifier-grid{ grid-template-columns: repeat(2, 1fr); }
  .champ-slots-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .flow-grid{ grid-template-columns: 1fr; }
  .qualifier-grid{ grid-template-columns: 1fr; }
  .champ-slots-grid{ grid-template-columns: repeat(2, 1fr); }
  .championship-card{ padding: 24px; }
}

/* =================================================================
   Mobile navigation + site-wide small-screen pass
   Covers: hamburger nav (replaces the old "just hide .search" approach,
   which lost the search feature entirely on phones), touch target
   sizing, table overflow on narrow viewports, and 375-430px refinements
   for hero/grids/modals. Tested at 375, 390, 768.
   ================================================================= */

.mobile-nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-left:auto;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  cursor:pointer;
  flex-shrink:0;
}
.mobile-nav-toggle:hover{ border-color:var(--line-strong); background: rgba(255,255,255,0.03); }

@media (max-width: 860px){
  header.topbar{
    flex-wrap:wrap;
    padding:14px 16px;
    row-gap:0;
  }
  .brand{ order:1; }
  .mobile-nav-toggle{ display:flex; order:2; }

  /* Collapsed by default; header.nav-open (toggled by toggleMobileNav in
     app.js) reveals both the nav links and the search/sign-in cluster as a
     full-width stacked panel below the bar, so search and sign-in are still
     reachable on mobile instead of disappearing. */
  nav.toplinks{
    display:none;
    order:4;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:0;
    margin-left:0;
    margin-top:14px;
    border-top:1px solid var(--line);
    padding-top:6px;
  }
  header.topbar.nav-open nav.toplinks{ display:flex; }
  nav.toplinks a{
    padding:13px 4px;
    min-height:44px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line);
    font-size:16px;
  }
  .nav-more{ width:100%; flex-direction:column; align-items:stretch; }
  .nav-more-toggle{ padding:13px 4px; min-height:44px; width:100%; }
  .nav-more-menu{
    position:static;
    display:none;
    box-shadow:none;
    border:none;
    border-radius:0;
    margin-top:0;
    padding:0 0 0 14px;
    min-width:0;
    width:100%;
  }
  .nav-more-menu.open{ display:flex; }
  .nav-more-menu a{ min-height:44px; display:flex; align-items:center; }

  .topbar-right{
    display:none;
    order:5;
    width:100%;
    margin-left:0;
    margin-top:12px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  header.topbar.nav-open .topbar-right{ display:flex; }
  .search{ width:100%; }
  .signin-btn{ width:100%; padding:13px 18px; }
  .user-chip{ width:100%; justify-content:center; }
}

/* Table overflow: let wide tables scroll horizontally on narrow screens
   instead of being clipped by the panel's overflow:hidden or squished
   unreadable via white-space:nowrap. */
@media (max-width: 860px){
  /* .lft-table carries class="stats" too, so this also fixes the LFT board. */
  .stats-panel{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  table.stats{ min-width:640px; }
  table.lft-table{ min-width:760px; }
  table.stats thead th{ position: static; backdrop-filter: none; }
}

/* Touch targets + filter bar on mobile */
@media (max-width: 860px){
  .filter-search{ width:100%; }
  .filter-bar{ width:100%; }
  .filter-select{ min-height:44px; }
  .stats-tab{ min-height:40px; }
  .hero-btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .team-action-btn{ min-height:40px; }
  button, .filter-select, a.hero-btn{ touch-action:manipulation; }
  .lft-detail-grid{ grid-template-columns:1fr 1fr; }
  .lft-detail-col-exp{ grid-column:1 / -1; }
}

/* Small phones (iPhone SE/12/13 mini through standard 390-430px widths) */
@media (max-width: 430px){
  .hero{ padding:32px 16px; }
  .hero h1{ font-size:28px; line-height:1.15; }
  .hero p{ font-size:14px; }
  .section{ padding:28px 16px; }
  .games-grid, .division-grid, .team-grid, .stream-grid, .category-grid{
    grid-template-columns: 1fr !important;
  }
  .gauge-row, .pie-row{ justify-content:center; }
  .profile-modal{ padding:20px; }
  .profile-modal.wide{ width:100%; }
  .lft-detail-topbar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .lft-detail-social{ justify-content:flex-start; flex:none; }
  .lft-detail-grid{ grid-template-columns:1fr; gap:20px; }
  table.stats thead th, table.stats td{ padding:11px 12px; font-size:13px; }
  .thread-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .thread-stats{ width:100%; justify-content:space-between; }
}

/* ---------------- Edit Profile (full page, Steam/ESEA-settings style) ----------------
   Base version: reuses the exact same element IDs the old Edit Profile
   *modal* used (profile-modal-header, profile-discord-input,
   profile-lft-checkbox, profile-roles-section, profile-modal-status) so the
   existing openProfileModal()-derived render logic, saveProfile(), and
   toggleProfileRoleChip() all keep working completely unchanged -- only the
   surrounding page chrome here is new. The old modal markup/CSS is left in
   place (unused, harmless) on every other page. */
main.profile-edit-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 64px;
}
.profile-edit-titlebar{ margin-bottom:32px; }
.profile-edit-titlebar h1{
  font-family:'Archivo Black', 'Space Grotesk', sans-serif;
  font-size:30px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.3px;
  color:var(--text);
}
.profile-edit-subtitle{ color:var(--text-muted); font-size:14px; margin-top:8px; }
.profile-edit-loading{ padding:72px 20px; text-align:center; color:var(--text-muted); font-size:13.5px; }

.profile-edit-layout{
  display:grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap:32px;
  align-items:start;
}
.profile-edit-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:10px;
  position:sticky;
  top:24px;
}
.profile-edit-nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:11px 14px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-muted);
}
.profile-edit-nav-item.active{ background:var(--panel-2); color:var(--text); }
.profile-edit-nav-item.disabled{ opacity:0.5; }
.profile-edit-nav .soon-badge{
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-faint);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:2px 7px;
}

.profile-edit-main{ min-width:0; }
.profile-edit-section{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-sm);
}
.profile-edit-section + .profile-edit-section{ margin-top:24px; }
.profile-edit-section .profile-roles-list{ max-height:none; }

.profile-edit-hint{
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  color:var(--text-muted);
  margin:-6px 0 14px;
}
.profile-clip-inputs{ display:flex; flex-direction:column; gap:10px; }

/* ---------- Player profile clip embeds ---------- */
.player-clips-section{ margin-top:28px; }
/* Section label reuses .player-section-label's type treatment (mono,
   uppercase, tracked) but overrides the color to bright white -- the shared
   class defaults to --text-muted for every other section label (CS2,
   Career, etc.), which is intentionally left alone; this is a Clips-only
   override, not a change to the shared style. */
.player-clips-section .player-section-label{ color:var(--text); }
/* Fixed 5-up grid (MAX_PLAYER_CLIPS is 5, so a full set always fills one
   row exactly) rather than auto-fill/minmax -- auto-fill sized each tile to
   whatever fit ~300px wide and wrapped a 5th clip onto its own row. Sizing
   down to fit 5 across takes priority over a large individual tile size. */
.player-clips-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
  margin-top:12px;
}
@media (max-width: 980px){ .player-clips-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .player-clips-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px){ .player-clips-grid{ grid-template-columns: 1fr; } }
.player-clip-embed{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow:hidden;
  background:var(--panel-2);
  border:1px solid rgba(139,92,246,0.55);
}
.player-clip-embed iframe,
.player-clip-embed video{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:none;
  object-fit:cover;
  background:var(--panel-2);
}
.profile-edit-header{ display:flex; align-items:center; gap:20px; margin-bottom:8px; }
.profile-edit-header .profile-modal-avatar,
.profile-edit-header img{
  width:88px; height:88px;
  border-radius:50%;
  background:var(--panel-2);
  object-fit:cover;
  display:block;
}
.profile-edit-header .profile-modal-avatar-fallback{
  width:88px; height:88px;
  border-radius:50%;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:700; color:var(--on-accent);
}
.profile-edit-header .profile-modal-name{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:24px; color:var(--text); }
.profile-edit-header .profile-modal-sub{ font-size:13px; margin-top:5px; }

.profile-edit-input{ font-size:15px; padding:13px 16px; }
.profile-edit-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:8px;
}

@media (max-width: 860px){
  .profile-edit-layout{ grid-template-columns: 1fr; }
  .profile-edit-nav{ position:static; flex-direction:row; flex-wrap:wrap; }
}

/* Self-reported coaching credits on a player profile (see coachSectionHTML
   in app.js) -- sits right below the hero. Restyled to be the exact same
   card treatment as the season-stats table just below it (#player-body-stats
   .stats-panel: same --panel black background, same --line border/radius,
   same box-shadow) rather than its own slightly-different dark card, so the
   two read as one consistent black card family instead of two subtly
   mismatched shades of "almost black". */
.player-coach-section{
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #000000;
  box-shadow: var(--shadow-md);
}
.player-coach-heading{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.coach-credit-hint{
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--text-muted);
  opacity: 0.75;
}
.coach-credit-list{ display:flex; flex-direction:column; }
/* Flat divider rows on the shared black panel background -- same pattern as
   table.stats tbody tr (border-bottom divider, zebra striping, subtle gold
   hover) -- rather than the previous look of each row being its own
   separately-bordered box floating inside the section. */
.coach-credit-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease);
}
.coach-credit-row:last-child{ border-bottom: none; }
.coach-credit-row:nth-child(even){ background: rgba(255,255,255,0.035); }
.coach-credit-row:hover{ background: rgba(229,185,63,0.06); }
.coach-credit-main{ display:flex; align-items:baseline; gap:10px; }
.coach-credit-team{ font-weight:700; color:var(--text); font-size:14px; }
.coach-credit-meta{ font-size:12px; color:var(--text-muted); font-family:'JetBrains Mono', monospace; }
.coach-credit-status{ display:flex; align-items:center; gap:10px; }
.coach-credit-confirmed{
  font-size:11px;
  font-weight:700;
  color:var(--success);
  background:var(--success-tint);
  padding:3px 8px;
  border-radius:999px;
  white-space:nowrap;
  cursor:default;
}
.coach-credit-unconfirmed{
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  opacity:0.7;
  white-space:nowrap;
}
.coach-credit-confirm-btn{
  font-size:11px;
  font-weight:600;
  padding:5px 10px;
  border-radius:var(--radius-md);
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  white-space:nowrap;
}
.coach-credit-confirm-btn:hover{ color:var(--text); border-color:var(--accent); }
.coach-credit-confirm-btn:disabled{ opacity:0.5; cursor:default; }

/* ---------------- Player profile guestbook ----------------
   Same black-card shell as .player-coach-section right above (border/panel/
   shadow), so the two sections read as siblings rather than two different
   design languages stacked on one profile. */
.player-guestbook-section{
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #000000;
  box-shadow: var(--shadow-md);
}
.player-guestbook-section .player-section-label{ margin-bottom:12px; }
.guestbook-signin-hint{ font-size:13px; color:var(--text-muted); padding:4px 0 14px; }
.guestbook-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:16px;
  margin-bottom:14px;
  border-bottom: 1px solid var(--line);
}
.guestbook-input{
  width:100%;
  resize:vertical;
  min-height:56px;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  line-height:1.5;
}
.guestbook-input:focus{ outline:none; border-color:var(--accent); }
.guestbook-submit-btn{ align-self:flex-end; }
.guestbook-form .guestbook-submit-btn{
  padding:8px 16px;
  font-size:13px;
  min-height:auto;
}
.player-guestbook-list{ display:flex; flex-direction:column; }
.guestbook-empty{ padding:6px 2px 2px; font-size:13px; color:var(--text-muted); }
.guestbook-entry{
  position:relative;
  padding:12px 14px;
  border-bottom: 1px solid var(--line);
}
.guestbook-entry:last-child{ border-bottom:none; }
.guestbook-entry:nth-child(even){ background: rgba(255,255,255,0.035); }
.guestbook-entry .player-cell.roster-player{
  display:inline-flex; align-items:center; gap:8px; font-family:'Inter', sans-serif;
}
.guestbook-entry .pc-avatar-slot{
  width:26px; height:26px; border-radius:50%;
  background:transparent; border:1px solid var(--line-strong); box-shadow:none;
}
.guestbook-entry .pc-avatar-slot img{ border-radius:50%; }
.guestbook-entry .pc-name{ font-size:13.5px; font-weight:600; }
.guestbook-entry-time{
  font-size:11px; color:var(--text-muted); font-family:'JetBrains Mono', monospace;
  margin-left:8px;
}
.guestbook-entry-message{
  margin-top:6px; font-size:13.5px; color:var(--text); line-height:1.55;
  word-break:break-word; white-space:pre-wrap;
}
.guestbook-delete-btn{
  position:absolute; top:12px; right:14px;
  font-size:11px; font-weight:600;
  padding:3px 8px;
  border-radius:var(--radius-md);
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  opacity:0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.guestbook-entry:hover .guestbook-delete-btn{ opacity:1; }
.guestbook-delete-btn:hover{ color:var(--danger); border-color:var(--danger); }
@media (max-width: 640px){
  .guestbook-delete-btn{ opacity:1; position:static; margin-top:8px; }
}

/* Edit Profile -- dynamic add/remove list for coaching credits (team +
   season + division per row). The site's other self-serve editors (roles,
   clips) are fixed-slot pickers; this is the first freely add/removable
   list, so it gets its own small set of rules rather than reusing theirs. */
.coach-edit-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.coach-edit-row input.profile-input{ flex:2; min-width:0; }
.coach-edit-row select.profile-input{ flex:1; min-width:0; }
.coach-edit-remove{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:#0C0C0E;
  color:var(--text-muted);
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.coach-edit-remove:hover{ color:#fff; border-color:var(--line-strong); }
.coach-edit-add{
  margin-top:4px;
  padding:8px 14px;
  border-radius:var(--radius-md);
  border:1px dashed var(--line-strong);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.coach-edit-add:hover{ color:#fff; border-color:var(--accent); }

/* Reduced motion: respect user preference, skip animations/transforms */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

  /* ---- Edit Seasons (Option C v2: ribbon chip, single-line rows, no forced scroll) -- player profile page, owner-only.
   Scoped under .edit-seasons-panel so these win over the older shared .role-chip / .profile-roles-list
   rules (used by the old Edit Profile modal) without touching that component elsewhere on the site. ---- */
.player-section-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.edit-seasons-btn{
      display:inline-flex;
      align-items:center;
      padding:9px 20px;
      border-radius:4px;
      background: var(--mustard);
            color:#fff;
      font-family:'JetBrains Mono', monospace;
      font-size:14px;
      font-weight:800;
      letter-spacing:0.5px;
      text-transform:uppercase;
      border:none;
      cursor:pointer;
      transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.edit-seasons-btn:hover{ background: var(--mustard-2); transform: translateY(-1px); }
.edit-seasons-panel{
  background:#000;
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  margin-top:12px;
}
.edit-seasons-divider{
  height:1px;
  background:var(--line);
  margin:18px 0;
}
.edit-seasons-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.edit-seasons-status{
  font-size:12px;
  color:var(--text-muted);
}
.edit-seasons-panel .profile-roles-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:none;
  overflow:visible;
  padding-right:0;
  width:100%;
}
.edit-seasons-panel .profile-role-row{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  width:100%;
}
.edit-seasons-panel .profile-role-row:last-child{ border-bottom:none; }
.edit-seasons-panel .profile-role-row-label{
    flex:0 0 auto;
    min-width:180px;
    max-width:180px;
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    font-weight:700;
    color:var(--text);
    text-transform:uppercase;
    letter-spacing:0.3px;
    white-space:normal;
}
.edit-seasons-panel .role-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
}
.edit-seasons-panel .role-chip.role-chip-sm{
    font-family:'JetBrains Mono', monospace;
    display:inline-flex;
    align-items:center;
    padding:6px 18px 6px 12px;
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    background: rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.3px;
    text-transform:uppercase;
    border:none;
    border-radius:0;
    cursor:pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.edit-seasons-panel .role-chip.role-chip-sm:hover{
    background: rgba(255,255,255,0.16);
    color:var(--text);
    border-color: transparent;
}
.edit-seasons-panel .role-chip.role-chip-sm.selected{
    background: var(--mustard);
    color:#000;
    border-color: transparent;
}
@media (max-width: 640px){
  .edit-seasons-panel .profile-role-row{ flex-wrap:wrap; }
  .edit-seasons-panel .profile-role-row-label{ min-width:100%; max-width:100%; }
}


/* ---------------- Mobile: stacked-card tables ----------------
   Applies to every dense data table site-wide: main stats leaderboard
   (#stats-table), team standings (.team-standings-table), player profile
   season-history, and team page per-player stats (both share
   table.stats.player-stats-table). Labels come from data-label, which
   app.js stamps onto each <td> from that table's own <thead th> text
   (see the MutationObserver block near the end of app.js) -- so this
   works for all of them without hardcoding column order per table. */
@media (max-width: 640px){
  table.stats, .team-standings-table{ width:100%; border-collapse:separate; border-spacing:0; }
  table.stats thead, .team-standings-table thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
  table.stats tbody, .team-standings-table tbody{ display:block; }
  table.stats tr, .team-standings-table tr{
    display:block; background:var(--bg-secondary); border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; margin-bottom:10px;
  }
  table.stats td, .team-standings-table td{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:6px 0; border-bottom:1px solid var(--line); white-space:normal; font-size:13px;
  }
  table.stats td:last-child, .team-standings-table td:last-child{ border-bottom:none; }
  table.stats td[data-label]::before, .team-standings-table td[data-label]::before{
    content:attr(data-label); color:var(--text-muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.03em; margin-right:12px; flex-shrink:0;
  }
  table.stats td:first-child, .team-standings-table td:first-child{ font-weight:600; font-size:15px; }
  table.stats td:first-child::before, .team-standings-table td:first-child::before{ content:none; }
  table.stats td:first-child a, .team-standings-table td:first-child a{ font-size:15px; }
}


/* ---------------- Mobile: bottom tab bar (app-shell nav) ----------------
   Fixed bottom navigation bar for mobile, replacing the old hamburger menu
   with an app-like tab bar (Home/Stats/Teams/LFT/More). "More" reuses the
   existing toggleMobileNav() function and nav.toplinks slide-down panel,
   so no new JS mechanism was needed for it. */
.mobile-tabbar{ display:none; }
.mobile-more-backdrop{ display:none; }
.mobile-more-sheet{ display:none; }
@media (max-width: 860px){
  body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-tabbar{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:150;
    background: rgba(9,9,11,0.92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top:1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items:center;
  }
  .mobile-tabbar .mobile-tab{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    flex:1;
    background:none;
    border:none;
    color: var(--text-faint);
    text-decoration:none;
    font-family: inherit;
    font-size:10px;
    font-weight:600;
    letter-spacing:.02em;
    padding:6px 2px;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar .mobile-tab svg{ width:22px; height:22px; }
  .mobile-tabbar .mobile-tab span{ line-height:1; }
  .mobile-tabbar .mobile-tab.active{ color: var(--accent); }
  .mobile-tabbar .mobile-tab:active{ opacity:0.7; }

  /* Retire the old hamburger button now that every page has the bottom tab
     bar -- "More" in the tab bar reuses toggleMobileNav()/nav.toplinks so
     the slide-down panel logic is unchanged, just triggered differently. */
  .mobile-nav-toggle{ display:none !important; }

/* ---------------- Mobile: "More" bottom sheet (replaces old top nav-open panel) ---------------- */
.mobile-more-backdrop{
  display:block;
  position:fixed; inset:0; z-index:170;
  background: rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition: opacity .22s ease;
}
.mobile-more-backdrop.open{ opacity:1; pointer-events:auto; }

.mobile-more-sheet{
  display:block;
  position:fixed; left:0; right:0; bottom:0; z-index:171;
  background: rgba(13,13,16,0.98);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  padding: 10px 14px calc(84px + env(safe-area-inset-bottom));
  max-height:82vh;
  overflow-y:auto;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.mobile-more-sheet.open{ transform: translateY(0); pointer-events:auto; }

.mobile-more-sheet .sheet-handle{
  width:36px; height:4px; border-radius:2px;
  background: var(--line-strong);
  margin: 6px auto 14px;
}
.mobile-more-sheet .search{ width:100%; margin: 0 0 14px; }
.mobile-more-sheet .sheet-links{ display:flex; flex-direction:column; }
.mobile-more-sheet a.sheet-link,
.mobile-more-sheet button.sheet-link{
  display:flex; align-items:center;
  padding:14px 6px; min-height:48px;
  color: var(--text); text-decoration:none;
  font-weight:600; font-size:15px;
  border-bottom:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-top:none;
  width:100%; text-align:left; font-family:inherit; cursor:pointer;
}
.mobile-more-sheet .sheet-links a.sheet-link:last-child{ border-bottom:none; }
.mobile-more-sheet .sheet-account{
  margin-top:10px; padding-top:2px; border-top:1px solid var(--line);
}
.mobile-more-sheet .sheet-account .sheet-account-link{ color: var(--accent); }

}