/* ================================================================
   tdc-hq-site.css — shared "site-accent HQ" skin for global (non-team)
   pages. Navy field + bordered frosted stage + bracket-seed rankings.
   Pair with: a .hq-stage wrapper around the page content, and (on the
   rankings) short team names (t.short). Logos come from tdc-dense.js
   (.tr-dlogo) and are styled here into team-color blocks w/ a white disc.
   Load LAST. Reversible: nothing here is pushed until you approve.
   ================================================================ */
/* ===== homepage HQ v3 — navy field + one bordered frosted stage ===== */
.tdc-bg{
  background-color:#1d2b47 !important;
  background-image:url("assets/tourn/overlay.png?v=1") !important;
  background-size:cover !important; background-position:center !important;
  background-blend-mode:overlay !important;
}
:root[data-theme="dark"] .tdc-bg{ background-color:#141d31 !important; }
.tdc-mesh,.tdc-blob,.tdc-grain,.ambient-layer,.orb-1,.orb-2,.orb-3,.hero-orbs,.hero-color-line{ display:none !important; }

/* one soft-transparent stage, small border on all 4 sides */
.hq-stage{
  margin:16px auto; max-width:1780px; border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 26px 60px rgba(0,10,40,.32);
  padding:10px 22px 26px;
}
:root[data-theme="dark"] .hq-stage{ background:rgba(8,12,24,.34); border-color:rgba(255,255,255,.10); }

/* sections inside the stage shed their own frames */
.page-header{ background:transparent !important; border:0 !important; padding:18px 4px 6px !important; }
.filter-bar{ background:transparent !important; }
/* when stuck while scrolling (.elevated added by JS at scrollY>160) the bar must be
   OPAQUE so the table doesn't show through the sticky filter pills/controls */
.filter-bar.elevated{ background:#141b2e !important; border-bottom-color:rgba(255,255,255,.12) !important; box-shadow:0 6px 22px rgba(0,6,20,.5) !important; }
.table-section{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:8px 0 0 !important; }

/* text + pills light on the navy-tinted stage */
.page-header h1,.page-header h1 em{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; font-style:normal !important; }
.page-header h1 em{ opacity:.9; }
.page-header-eyebrow,.page-header-meta,.page-header-meta *{ color:#fff !important; }
.page-header-eyebrow{ opacity:.82; }
.sc-label{ color:rgba(255,255,255,.85) !important; }
.filter-count{ color:rgba(255,255,255,.75) !important; }
.filter-pills{ background:rgba(0,0,0,.22); border-radius:12px; padding:5px 7px; gap:4px; flex-wrap:wrap; }
.filter-pills .filter-pill{ color:#fff !important; opacity:.82; padding:6px 12px; font-weight:700; }
.filter-pills .filter-pill.active,.filter-pills .filter-pill.on{ background:#fff !important; color:#141821 !important; opacity:1; }
.filter-controls .filter-select,.filter-controls .nav-search{
  background-color:rgba(9,11,18,.55) !important; color:#ffffff !important;
  border-color:rgba(255,255,255,.24) !important; }
.filter-controls .nav-search::placeholder{ color:rgba(255,255,255,.6) !important; }
.filter-controls .filter-select option{ color:#141821 !important; background:#ffffff !important; }

/* ===== bracket-seed row look ===== */
.table-header{ background:transparent !important; }
.table-header .th{ color:rgba(255,255,255,.7) !important; }
.team-row{ align-items:stretch !important; margin:5px 0 !important; border-radius:9px !important;
  overflow:hidden; background:#ffffff !important;
  box-shadow:0 2px 6px rgba(0,10,40,.18) !important; }
:root[data-theme="dark"] .team-row{ background:#1b2638 !important; }
.team-row::before{ display:none !important; }
/* dark rank box */
.tr-rank-wrap{ background:#141a2b !important; display:flex !important; align-items:center !important; justify-content:center !important;
  min-width:30px; width:30px; padding:0 !important; box-shadow:none !important; text-align:center; }
.tr-rank{ color:#fff !important; font-weight:800 !important; font-style:normal !important; font-size:14px !important; width:100% !important; text-align:center !important; margin:0 !important; padding:0 !important; }
.tr-rank.rank-1,.tr-rank.rank-2,.tr-rank.rank-3{ color:#fff !important; }
/* team-color logo block */


/* uppercase name */
.tr-team-cell{ align-items:center !important; padding-left:0 !important; }
.tr-team-name{ text-transform:uppercase !important; font-style:normal !important; font-weight:800 !important;
  letter-spacing:0 !important; font-size:13.5px !important; color:#141a2b !important; }
.team-row:hover .tr-team-name{ color:#000 !important; }
.tr-team-conf{ margin-left:8px !important; }
/* stat cells stay readable on the white row */
.team-row .tr-stat, .team-row [class*="tr-"]{ color:#1a2033; }

/* the sticky left cells paint var(--bg); force them to the light row color so the dark name shows */
.tr-team-cell,
.team-row:hover > .tr-team-cell,
.table-scroll.scrolled .team-row > .tr-team-cell,
.table-scroll.scrolled .team-row:hover > .tr-team-cell{ background:#ffffff !important; box-shadow:none !important; }
:root[data-theme="dark"] .tr-team-cell,
:root[data-theme="dark"] .team-row:hover > .tr-team-cell,
:root[data-theme="dark"] .table-scroll.scrolled .team-row > .tr-team-cell,
:root[data-theme="dark"] .table-scroll.scrolled .team-row:hover > .tr-team-cell{ background:#1b2638 !important; box-shadow:none !important; }


/* keep native grid; just stop the name from truncating + hide mobile-only meta that was wrapping */
.tr-team-name{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; min-width:0; flex:0 1 auto; }
.tr-meta-mobile, .tr-grades-mobile, .tr-rank-chg-mobile{ display:none !important; }




.tr-team-cell{ overflow:hidden !important; }

/* Ranking-row team logos — SIMPLE: just the logo on a clean neutral tile, no
   team-colour block or gradient sheen (the fancy version read as "too much"). */
.tr-rank-wrap{ width:30px !important; min-width:30px !important; justify-self:start !important; box-shadow:none !important; }
.tr-team-cell{ overflow:visible !important; }
.tr-team-name{ overflow:hidden !important; text-overflow:ellipsis !important; }
.tr-dlogo{
  align-self:center !important; width:auto !important; height:auto !important; max-height:30px !important;
  padding:0 !important; margin:0 12px 0 0 !important; background:none !important;
  object-fit:contain !important; filter:none !important; flex:0 0 auto !important; border-radius:0 !important;
}

/* ---- dark mode: dark rows + light numbers (true dark theme, not light rows on the field) ---- */
:root[data-theme="dark"] .tr-team-name{ color:#eef2f8 !important; }
:root[data-theme="dark"] .team-row:hover .tr-team-name{ color:#ffffff !important; }
:root[data-theme="dark"] .team-row .tr-stat, :root[data-theme="dark"] .team-row .tr-stat b,
:root[data-theme="dark"] .team-row [class*="tr-"]{ color:#c9d2e0 !important; }
:root[data-theme="dark"] .tr-stat span{ color:#8f9bb0 !important; }
:root[data-theme="dark"] .tr-team-conf .conf-badge{ color:#aab4c6 !important; }


/* logo wrapper (js-added) — SIMPLE: just the logo, no box/tile at all */
.tr-logowrap{ display:flex !important; align-items:center !important; justify-content:center !important;
  align-self:center !important; width:auto !important; min-width:0 !important; flex:0 0 auto !important;
  margin:0 12px 0 0 !important; padding:0 !important; box-sizing:border-box !important;
  background:none !important; background-image:none !important;
  border-radius:0 !important; box-shadow:none !important; }
.tr-logowrap .tr-dlogo{ background:none !important; width:auto !important; max-width:none !important;
  height:auto !important; max-height:30px !important; margin:0 !important; padding:0 !important;
  flex:0 0 auto !important; align-self:center !important; object-fit:contain !important; display:block !important;
  filter:none !important; }

/* ============================================================================
   Generic content-page skin — opt in with <body class="hqsite">. Navy field +
   the page's single container (.page / .wrap) as the bordered frosted stage +
   light labels. Scoped to body.hqsite so it never touches the homepage.
   ============================================================================ */
/* Branded background — matches the homepage (index): a blurred animated colour
   mesh + film grain, applied via body pseudo-elements so every hqsite page gets
   it with no per-page markup. (Replaces the old flat hq-grunge texture.) */
body.hqsite{
  background-color:#f7f6f3 !important;
  background-image:none !important;
}
:root[data-theme="dark"] body.hqsite{ background-color:#141d31 !important; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.hqsite{ background-color:#141d31 !important; } }
body.hqsite::before{   /* animated colour mesh */
  content:''; position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 48% at 22% 26%, rgba(158,158,174,.30), transparent 62%),
    radial-gradient(44% 52% at 80% 28%, rgba(128,128,146,.28), transparent 62%),
    radial-gradient(50% 50% at 62% 80%, rgba(176,176,192,.32), transparent 62%),
    radial-gradient(40% 44% at 14% 82%, rgba(116,116,134,.22), transparent 62%);
  filter:blur(46px); opacity:.3; animation:tdcHqMesh 28s ease-in-out infinite alternate;
}
:root[data-theme="dark"] body.hqsite::before{ opacity:.45; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.hqsite::before{ opacity:.45; } }
body.hqsite::after{    /* film grain */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes tdcHqMesh{0%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(2%,-2.5%) scale(1.08) rotate(2deg)}100%{transform:translate(-2%,2%) scale(1.03) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){ body.hqsite::before{ animation:none; } }
/* the homepage's own bg-layer divs stay hidden on hqsite (pseudo-mesh replaces them) */
body.hqsite .tdc-bg, body.hqsite .tdc-mesh, body.hqsite .tdc-blob,
body.hqsite .tdc-grain, body.hqsite .ambient-layer, body.hqsite .hero-orbs{ display:none !important; }

/* main container -> bordered frosted stage */
body.hqsite .page, body.hqsite .wrap, body.hqsite .cwrap, body.hqsite .hq-main{
  margin:16px auto !important; max-width:1280px !important; border-radius:22px !important;
  background:rgba(255,255,255,.09) !important; border:1px solid rgba(255,255,255,.20) !important;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 26px 60px rgba(0,10,40,.32) !important;
  padding:26px 30px 56px !important;
}
:root[data-theme="dark"] body.hqsite .page, :root[data-theme="dark"] body.hqsite .wrap, :root[data-theme="dark"] body.hqsite .cwrap, :root[data-theme="dark"] body.hqsite .hq-main{
  background:rgba(8,12,24,.36) !important; border-color:rgba(255,255,255,.10) !important;
}

/* stage-level labels/headers go light (cards keep their own text) */
body.hqsite h1, body.hqsite h2, body.hqsite h1 em, body.hqsite h2 em,
body.hqsite .sec, body.hqsite .sub, body.hqsite .section-title,
body.hqsite .page-title, body.hqsite .eyebrow, body.hqsite .muted, body.hqsite .note{
  color:rgba(255,255,255,.92) !important; -webkit-text-fill-color:#ffffff !important; background:none !important;
}
body.hqsite h1 em, body.hqsite h2 em{ opacity:.9; }
body.hqsite .sec{ border-bottom-color:rgba(255,255,255,.16) !important; }
body.hqsite .sub, body.hqsite .note{ color:rgba(255,255,255,.72) !important; }
body.hqsite .pill{ color:#fff !important; opacity:.85; }
body.hqsite .pill.on{ background:#fff !important; color:#141821 !important; opacity:1; border-color:#fff !important; }