/* ========== Rank badge system ========== */
:root {
  --rank-h-xs: 20px;
  --rank-h-sm: 24px;
  --rank-h-md: 28px;
  --rank-h-lg: 34px;
  --rank-radius: 9999px;
  --rank-border: 1px solid rgba(0,0,0,.08);
  --rank-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 .5px 1px rgba(0,0,0,.08);
  --rank-padding-x: 0.6em;
  --rank-font-weight: 700;
}

/* Base */
.rank {
  display: inline-flex !important;   /* force inline on pages that make spans block */
  flex: 0 0 auto !important;         /* never grow to fill a line */
  width: auto !important;            /* never 100% */
  max-inline-size: max-content;      /* keep it only as wide as its content */

  align-items: center;
  justify-content: center;
  gap: .25em;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: var(--rank-radius);
  border: var(--rank-border);
  box-shadow: var(--rank-shadow);
  padding-inline: var(--rank-padding-x);
  font-weight: var(--rank-font-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;       /* align digits */
  font-feature-settings: "tnum" 1;          /* Safari */
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
  user-select: none;
}

/* Belt-and-suspenders if jQuery UI tabs or page CSS targets spans inside #tabs */
#tabs .rank { display: inline-flex !important; width: auto !important; }

/* Prevent any children inside the badge from wrapping */
.rank, .rank * { white-space: nowrap; }


/* Variants */
.rank--chip   { /* pill */ }
.rank--circle { aspect-ratio: 1 / 1; padding-inline: 0; min-width: var(--rank-h-md); }
.rank--flag   { position: relative; background: #fff; }
.rank--flag::before {
  content: "";
  position: absolute;
  left: .5em;
  top: 22%;
  width: 8px;
  height: 56%;
  border-radius: 3px;
  background: var(--rank-bg, #ddd);
}

/* Sizes */
.rank--xs { height: var(--rank-h-xs); min-width: var(--rank-h-xs); font-size: 11.5px; }
.rank--sm { height: var(--rank-h-sm); min-width: var(--rank-h-sm); font-size: 13px; }
.rank--md { height: var(--rank-h-md); min-width: var(--rank-h-md); font-size: 14.5px; }
.rank--lg { height: var(--rank-h-lg); min-width: var(--rank-h-lg); font-size: 16.5px; }

/* Responsive auto size if you want it */
.rank--auto { height: clamp(22px, 1.8vw + 16px, 32px); min-width: clamp(22px, 1.8vw + 16px, 32px); }

/* Color buckets as CSS variables.
   We set a background + text color per bucket (chip/circle),
   and for the flag variant we use the same --rank-bg for the accent bar. */

/* 1–5 (elite, bold green) */
.r-1-5  { --rank-bg:#01e601; --rank-fg:#0a0a0a; }
/* 6–10 */
.r-6-10 { --rank-bg:#35e335; --rank-fg:#0a0a0a; }
/* 11–25 */
.r-11-25{ --rank-bg:#9bfd9b; --rank-fg:#0a0a0a; }
/* 26–45 */
.r-26-45{ --rank-bg:#deffde; --rank-fg:#0a0a0a; }
/* 46–65 (neutral) */
.r-46-65{ --rank-bg:#ffffff; --rank-fg:#111111; }

/* 66–90 (light red) */
.r-66-90 { --rank-bg:#FFB6B6; --rank-fg:#111111; }
/* 91–110 (medium red) */
.r-91-110{ --rank-bg:#FF8080; --rank-fg:#111111; }
/* 111–125 (darker red) */
.r-111-125{ --rank-bg:#FF4D4D; --rank-fg:#ffffff; }
/* 126–200 (deep red) */
.r-126-200{ --rank-bg:#FF0000; --rank-fg:#ffffff; }

/* Apply the variables to chip/circle */
.rank--chip,
.rank--circle {
  background: var(--rank-bg, #fff);
  color: var(--rank-fg, #111);
}

/* Flag keeps neutral background; text is dark for legibility */
.rank--flag { color: #111; }

/* Optional: thin outline for contrast on white */
.rank--outline { box-shadow: 0 0 0 1px rgba(0,0,0,.06), var(--rank-shadow); }

/* Make sure these never wrap in mixed content lines */
.rank,
.rank * { white-space: nowrap; }


/* Slightly tighten on very small screens */
@media (max-width:420px){
  .rank--md { height: var(--rank-h-sm); min-width: var(--rank-h-sm); font-size: 13.5px; }
  .rank--lg { height: var(--rank-h-md); min-width: var(--rank-h-md); font-size: 15px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .rank { transition: none; }
}


/* ===== Punt & Rally: Four-Column Responsive ===== */
.pr-section {
  /* This is your container wrapper */
  background: #f7f9fc;              /* change as needed */
  padding: 1px;                     /* outer breathing room */
  border-radius: 10px;
  /* Ensure backgrounds always wrap children (even if you still have some float CSS elsewhere) */
  display: flow-root;                /* establishes a new formatting context; contains any floats */
}

/* Grid that fills the entire container width and auto-wraps by screen size */
.pr-fourcol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));  /* 4 equal columns on large screens */
  gap: 10px;                                         /* gutter between cards */
}

/* Cards (optional styling) */
.pr-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  min-height: 60px;                 /* remove if you don’t want any minimum height */
}

/* ===== Responsive behavior =====
   - On medium screens, go to 2 columns
   - On small screens, go to 1 column
*/
@media (max-width: 1024px) {
  .pr-fourcol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pr-fourcol {
    grid-template-columns: 1fr;
  }
}

/* Typography & spacing */
.pr-card {
  /* already has bg/border/radius from earlier snippet */
  line-height: 1.35;
  font-size: clamp(14px, 1.05vw, 16px);
  font-variant-numeric: tabular-nums;     /* ranks & numbers align better */
  padding: 12px 14px;
}

/* Subtle alternating backgrounds to help scan long lists */
.pr-fourcol > .pr-card:nth-child(odd) {
  background: #fbfcfe;
}

/* Make links look intentional, but clean */
.pr-card a {
  color: #0d3b66;                         /* navy-ish */
  text-decoration: none;
  font-weight: 600;                        /* a touch bolder for team names */
  text-underline-offset: 2px;
}
.pr-card a:hover {
  text-decoration: underline;
}

/* Light separators for your <br> breaks to feel like list rows */
.pr-card br {
  content: "";
  display: block;
  margin: 6px 0;                           /* vertical rhythm between lines */
}

/* Slight “card hover” to make scanning pleasant */
.pr-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(-1px);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* Keep everything aligned to the top of each grid cell */
.pr-fourcol { align-items: start; }

@media (max-width: 1400px) { .pr-card { font-size: .7em; } }
@media (max-width: 1024px) { .pr-card { font-size: 1.1em; } }
@media (max-width: 768px)  { .pr-card { font-size: 0.8em; } }
@media (max-width: 480px)  { .pr-card { font-size: 1.0em; line-height: 1.3; } }


/* ====== Advantage highlighting for pff-compare-table ====== */
.pff-compare-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

/* Row background subtly leans toward advantaged side */
.adv-row { position: relative; }

/* Base neutral background for readability */
.adv-row td { background: #fff; }

/* Mild / moderate / strong tinting (navy/gold theme-friendly) */
.adv--left.mild td,
.adv--left.adv--mild td { background: linear-gradient(to right, rgba(0, 64, 128, 0.06), transparent); }
.adv--left.adv--moderate td { background: linear-gradient(to right, rgba(0, 64, 128, 0.10), transparent); }
.adv--left.adv--strong td { background: linear-gradient(to right, rgba(0, 64, 128, 0.16), transparent); }

.adv--right.adv--mild td { background: linear-gradient(to left, rgba(212, 175, 55, 0.08), transparent); }
.adv--right.adv--moderate td { background: linear-gradient(to left, rgba(212, 175, 55, 0.12), transparent); }
.adv--right.adv--strong td { background: linear-gradient(to left, rgba(212, 175, 55, 0.18), transparent); }

/* Tie stays neutral */
.adv--tie td { background: #fff; }

/* Lean meter: tiny bar rendered in both rank cells; width & side via --lean */
.lean-meter {
  display: inline-block;
  vertical-align: middle;
  width: 38px;              /* small, doesn’t crowd the chip */
  height: 4px;
  margin-left: .35rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}
.lean-meter::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--lean, 0%);
  background: currentColor;
  opacity: .6;
  border-radius: inherit;
}

.lean-left   { color: #003b80; }     /* navy-ish */
.lean-right  { color: #c59d00; }     /* gold-ish */
.lean-meter--tie::after { width: 0; }

.lean-mild::after      { opacity: .55; }
.lean-moderate::after  { opacity: .7;  }
.lean-strong::after    { opacity: .9;  }

/* Make meter fill from the correct side */
.lean-left::after  { left: 0; right: auto; }
.lean-right::after { right: 0; left: auto; }

/* Keep labels responsive – prefer your existing pattern */
@media (max-width: 720px) {
  .pff-compare-table .full-label { display: none; }
  .pff-compare-table .short-label { display: inline; }
}
@media (min-width: 721px) {
  .pff-compare-table .full-label { display: inline; }
  .pff-compare-table .short-label { display: none; }
}

/* Tighten cells on small screens without squishing chips */
@media (max-width: 540px) {
  .pff-compare-table th,
  .pff-compare-table td { padding: .35rem .4rem; font-size: .92rem; }
}



/* ========= Legacy 3-col -> Responsive (no HTML changes) ========= */

/* Treat each legacy column as a flex ITEM (width control), not a flex CONTAINER */
/* Each row container (parent must be flex so children can wrap & resize) */
#threecolcontainer {
  display: flex;
  flex-wrap: wrap;          /* enables 3 → 2 → 1 columns via media queries */
  align-items: flex-start;
  gap: 1rem;                /* space between columns */
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
  font-size: clamp(0.9rem, 1vw, 1rem);
}

#threecolcontainer > #threeevencols,
#threecolcontainer > #threeevencolsspace,
#threecolcontainer > #threeevencolsspacemid {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;

  /* REMOVED: display:flex / flex-direction / gap */
  display: block;              /* normal flow inside the column */
  box-sizing: border-box;
  min-width: 0;

  /* 3 equal columns with the parent’s gap staying between columns */
  flex: 1 1 calc((100% - 2rem) / 3);
}

/* Add tidy vertical rhythm only between element siblings (not splitting inline text) */
#threecolcontainer > #threeevencols > * + *,
#threecolcontainer > #threeevencolsspace > * + *,
#threecolcontainer > #threeevencolsspacemid > * + * {
  margin-top: .5rem;
}

/* Make sure inline things stay inline inside these columns */
#threecolcontainer > #threeevencols > span,
#threecolcontainer > #threeevencolsspace > span,
#threecolcontainer > #threeevencolsspacemid > span,
#threecolcontainer > #threeevencols > a,
#threecolcontainer > #threeevencolsspace > a,
#threecolcontainer > #threeevencolsspacemid > a {
  display: inline;
  margin: 0;
  padding: 0;
  line-height: inherit;
}



/* Tablet-ish: 2 columns */
@media (max-width: 900px) {
  #threecolcontainer > #threeevencols,
  #threecolcontainer > #threeevencolsspace,
  #threecolcontainer > #threeevencolsspacemid {
    flex: 1 1 calc((100% - 1rem) / 2);
  }
}

/* Phones: 1 column */
@media (max-width: 640px) {
  #threecolcontainer > #threeevencols,
  #threecolcontainer > #threeevencolsspace,
  #threecolcontainer > #threeevencolsspacemid {
    flex: 1 1 100%;
  }
}

/* Prevent long words/links from blowing columns */
#threecolcontainer * { min-width: 0; }

/* Tidy headline if you use it inside these columns */
/* Base (desktop) */
#threecolcontainer .headlinecenterunderline,
#tabs .ui-tabs-panel .headlinecenterunderline {
  display: block;
  text-align: center;
  padding-bottom: .25rem;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 700;
  line-height: 1.15;
  width: max-content;      /* shrink to text width */
  margin-inline: auto;     /* centers the item in flex/grid/blocks */
  text-align: center !important;
  font-size: 1.25rem; /* desktop default */
  overflow-wrap: anywhere; /* avoid overflow on narrow cols */
}

/* Large tablets */
@media (max-width: 1100px) {
  #threecolcontainer .headlinecenterunderline,
  #tabs .ui-tabs-panel .headlinecenterunderline {
    font-size: 1.15rem;
  }
}

/* Tablets */
@media (max-width: 900px) {
  #threecolcontainer .headlinecenterunderline,
  #tabs .ui-tabs-panel .headlinecenterunderline {
    font-size: 1.3rem;
  }
}

/* Phones */
@media (max-width: 640px) {
  #threecolcontainer .headlinecenterunderline,
  #tabs .ui-tabs-panel .headlinecenterunderline {
    font-size: 1.4rem;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  #threecolcontainer .headlinecenterunderline,
  #tabs .ui-tabs-panel .headlinecenterunderline {
    font-size: 1.6rem;
  }
}


/* Optional: keep rank bubble inline in these blocks without touching global CSS */
#threecolcontainer .rankCircle {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  vertical-align: middle;
}

/* Kill the old clearfix spacer if present */
#colclear { display: none !important; }
/* ============================
   Responsive jQuery UI Tabs
   Scope: only #tabs on pages that include response.css
   ============================ */

/* Container */
#tabs.ui-tabs {
  padding: 0.5em;
  border-radius: 8px;
  overflow: hidden; /* keep panels tidy */
}

/* Nav bar: flex & wrap on wide screens; will switch to scroll on small screens */
#tabs .ui-tabs-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5em .5em .25em;
  background: var(--light-navy);
  border-radius: 8px 8px 0 0;
  /* allow multiple rows when there's plenty of space */
  flex-wrap: wrap;
}

/* Kill legacy floats & make each tab a flex item */
#tabs .ui-tabs-nav li {
  list-style: none;
  float: none !important;
  position: relative;
  margin: 0 .5rem 0 0;
  padding: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Tab links: inline-flex for nice centering; clamp sizes for readability */
#tabs .ui-tabs-nav .ui-tabs-anchor {
  float: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45em 1em;
  text-decoration: none;
  font-weight: 700;
  color: var(--navy);
  transition: color .2s ease, background-color .2s ease, opacity .2s ease;
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.2;
  border-radius: 6px;
}

/* Active tab */
#tabs .ui-tabs-nav li.ui-tabs-active {
  background: var(--navy);
  color: var(--white);
  border-radius: 8px 8px 0 0;
}
#tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  color: var(--white) !important; /* ensure contrast on navy bg */
}

/* Hover */
#tabs .ui-tabs-nav .ui-tabs-anchor:hover {
  opacity: .9;
}

/* Panels: clamp padding so they breathe on mobile, too */
#tabs .ui-tabs-panel {
  padding: clamp(.75em, 2vw, 1.25em) clamp(.9em, 2.5vw, 1.4em);
  background: linear-gradient(to bottom, var(--white), var(--light-navy), var(--white));
  border-radius: 0 0 8px 8px;
}

/* Respect your theme colors */
#tabs .ui-widget-content {
  /* border: 1px solid var(--navy); */
  background: #faffe7;
  color: var(--text-dark);
}
#tabs .ui-widget-header {
  border: none;
  border-bottom: 1px solid var(--navy);
  background: var(--our-white);
  color: var(--navy);
  font-weight: bold;
}

/* ------------- Mobile Enhancements ------------- */

/* On tablets/phones: single-row, swipeable tab bar with scroll snap */
@media (max-width: 900px) {
  #tabs .ui-tabs-nav {
    flex-wrap: nowrap;            /* keep to a single row */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;        /* Firefox */
    scroll-snap-type: x proximity;
    gap: .4rem;
    position: sticky;             /* keep tabs visible when panel scrolls */
    top: 0;
    z-index: 5;
  }
  #tabs .ui-tabs-nav li {
    scroll-snap-align: start;
  }
  #tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em .85em;
    font-size: clamp(.9rem, 3.2vw, 1rem);
  }
  /* Optional: subtle fade at the right edge to hint more tabs */
  #tabs .ui-tabs-nav::after {
    content: "";
    pointer-events: none;
    align-self: stretch;
    width: 24px;
    margin-left: -24px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.06));
  }
}

/* Very small phones: slightly tighter spacing */
@media (max-width: 480px) {
  #tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .45em .75em;
  }
}

/* Optional: nicer webkit scrollbar for the tab strip */
#tabs .ui-tabs-nav::-webkit-scrollbar {
  height: 8px;
}
#tabs .ui-tabs-nav::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 4px;
}
#tabs .ui-tabs-nav::-webkit-scrollbar-track {
  background: transparent;
}

/* Keep rank bubbles inline when used inside tab content (doesn't affect global) */
#tabs .rankCircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* ===== Weekly Schedule Grid (viewschedulebyweek) ===== */
:root {
  --navy: #0b1e3a;
  --gold: #d4af37;
  --ink:  #172322;
  --muted: rgba(0,0,0,.55);
  --card-bg: #ffffff;
  --card-edge: rgba(0,0,0,.06);
  --live: #c62828;
  --final: #2563eb;
  --upcoming: #0d4985;
    --card-min: 380px;    /* default minimum card width */
  --grid-gap: 1rem;
  --max-cols: 3;        /* cap at three columns */
}

/* Toolbar */
.sched-toolbar { display: grid; gap: .75rem; align-items: start; margin: 1rem 0 1.25rem; }
.sched-toolbar .sched-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.btn-nav {
  display: inline-block; padding: .5rem .75rem; border-radius: .6rem;
  border: 1px solid var(--card-edge); background: #fff; text-decoration: none;
  font-weight: 600; color: var(--ink); transition: transform .15s, box-shadow .15s;
}
.btn-nav:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.btn-nav.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 2px rgba(212,175,55,.25); }

/* Group headings */
.sched-group-title{
  margin:1.25rem 0 .5rem; font-weight:800; color:#f5f6f9;
  font-size:1.05rem; letter-spacing:.2px;
  -webkit-text-stroke:.8px var(--navy); text-shadow:0 0 1px var(--navy);
}

/* Max three per row */
.sched-row-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }

/* Card with stronger sides/bottom; gold top preserved */
.game-card{
  background:var(--card-bg); border-radius:16px;
  border-top:1px solid var(--card-edge);
  border-left:2px solid rgba(11,30,58,.20);
  border-right:2px solid rgba(11,30,58,.20);
  border-bottom:2px solid rgba(11,30,58,.20);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  overflow:clip; position:relative;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.game-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--gold), rgba(212,175,55,.15)); opacity:.9;
}
.game-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.09);
  border-left-color:rgba(11,30,58,.28);
  border-right-color:rgba(11,30,58,.28);
  border-bottom-color:rgba(11,30,58,.28);
}

/* Topline chips / badges */
.gc-topline{ display:flex; align-items:center; gap:.4rem; padding:.65rem .8rem .2rem; }
.badge{ display:inline-flex; align-items:center; gap:.3ch; font-weight:900; padding:.16rem .44rem; border-radius:999px; color:#fff; font-size:.72rem; }
.badge.live{ background:var(--live); }
.badge.final{ background:var(--final); }
.badge.upcoming{ background:var(--upcoming); font-size:.9rem; } /* slightly bigger date/time */

/* chips */
.chip{ display:inline-flex; align-items:center; padding:.16rem .44rem; font-weight:700; font-size:.7rem; border-radius:999px; background:rgba(23,35,34,.06); color:var(--ink); border:1px solid var(--card-edge); }
.chip.neutral{ background:rgba(11,30,58,.06); border-color:rgba(11,30,58,.15); }
.chip.watch{ background:rgba(212,175,55,.12); border-color:rgba(212,175,55,.28); }
.chip.top25{ background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.42); color:#0b1e3a; font-weight:900; }
.chip.pick{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#0f5132; }

/* Date chip shown next to Final */
.chip.date{
  font-size:.72rem; 
  background: rgba(23,35,34,.06);
  border: 1px solid var(--card-edge);
  color: var(--ink);
  font-weight: 700;
}


/* Main rows */
.gc-main{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; text-decoration:none; color:inherit; gap:.75rem; padding:.25rem .8rem .6rem; }
.vs{ font-weight:900; color:var(--muted); padding:0 .25rem; }

.team-row{ display:grid; grid-template-columns:56px 1fr; gap:.6rem; align-items:center; }
.logo-wrap{ position:relative; display:inline-block; }
.logo{
  inline-size:56px; block-size:56px; object-fit:contain; background:#fff; border-radius:10px;
  border:1px solid var(--card-edge); padding:6px; z-index:1;
}

/* Rank badge — smaller, circular, moved right so it overlaps into the name area */
/* Inline “coin” badge to the right of the team name */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: -4px;
  width: 38px;              /* a little bigger */
  height: 28px;
  margin-left: .45rem;      /* space from team name */
  border-radius: 50%;       /* circular */
  flex: 0 0 auto;

  font-weight: 900;
  font-size: 1.0rem;        /* fits 1–2 digits */
  line-height: 1;
  color: var(--navy);

  background: linear-gradient(180deg, #ffd66a, #d4af37);
  border: 1px solid rgba(110,85,0,.45);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.35) inset;
}

/* Slightly tighter on very small screens */
@media (max-width: 640px) {
  .rank-badge { width: 28px; height: 22px; font-size: .72rem; }
}


/* Name + score */
.team-text{ display:grid; gap:.22rem; }
.team-text .name{ display:flex; flex-wrap:wrap; gap:.4ch; align-items:baseline; }
.school{ font-weight:900; white-space:normal; word-break:break-word; }

/* Wrap so ATS can be absolutely positioned without changing pill width */
.score-wrap {
  position: relative;
  display: inline-block;
}

/* Score pill: same font size, minimal horizontal padding */
.score {
  display: inline-block;
  /* padding: .02em .18em;         tiny horizontal padding */
  padding: .15em .85em;
  border-radius: 8px;
  font-weight: 900;
  font-size: 1.6rem;            /* keep your preferred size */
  line-height: 1;               /* tight box height */
  letter-spacing: 0;            /* no extra width from spacing */
  font-variant-numeric: normal; /* avoid wider tabular digits */

  background: rgba(11,30,58,.08);
  border: 1px solid rgba(11,30,58,.25);
  color: var(--ink);
}
.score.win {
  background: var(--navy);
  color: #fff;
  border-color: rgba(11,30,58,.6);
}

/* Keep this wrapper from earlier */
.score-wrap {
  position: relative;
  display: inline-block;
}

/* Bigger and closer ATS badge */
.game-card .ats-tag {
  position: absolute;
  top: -10px;              /* closer to the pill */
  right: 36px;             /* tuck near the pill edge */
  width: 32px;             /* ~2x bigger than 16px */
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.05rem;      /* larger mark */
  font-weight: 900;
  line-height: 1;
  z-index: 3;              /* float above everything */
  border: 2px solid transparent;  /* thicker ring */
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Colors (same logic you had) */
.game-card .ats-tag.covered {
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.55);
  color: #0f5132;          /* ✓ */
}
.game-card .ats-tag.nocover {
  background: rgba(220,38,38,.18);
  border-color: rgba(220,38,38,.60);
  color: #7f1d1d;          /* × */
}
.game-card .ats-tag.push {
  background: rgba(107,114,128,.18);
  border-color: rgba(107,114,128,.50);
  color: #374151;          /* P */
}



/* Meta: Favorite / Spread (always negative for fav) / Total */
/* .gc-meta{ display:grid; grid-template-columns:1.6fr .7fr .7fr; gap:.35rem; padding:.5rem .8rem .8rem; } */
/* Base: 3 columns */
.gc-meta{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;  /* Favorite | Spread | Total */
  padding: .5rem .9rem .8rem;   /* top | sides | bottom */
  gap:.35rem;
  align-items:end;
}

/* <= 1000px: keep 3 cols, tighten */
@media (max-width:1000px){
  .gc-meta{
    grid-template-columns: 1fr .7fr .6fr;
    padding-inline: .85rem;     /* logical: left+right */
    gap:.3rem;
  }
  .meta-cell .label{ font-size:.68rem; }
  .meta-cell .value{ gap:.25ch; }
}

/* <= 640px: still 3 cols; compress spacing and prevent wrap if desired */
@media (max-width:640px){
  .gc-meta{
    grid-template-columns: .95fr .55fr .5fr;
    padding-inline: .9rem;      /* left+right */
    gap:.25rem;
  }
  .gc-meta .meta-cell:first-child{
    padding-inline-start: .15rem;
  }
  .meta-cell{ min-width:0; }
  .meta-cell .value{
    white-space: nowrap;         /* keep “Fav / Spread / Total” on one line */
    overflow: hidden;            /* optional: avoid overflow if Fav is very long */
    text-overflow: ellipsis;     /* optional: show … if it’s too long */
  }
}


.meta-cell{ display:grid; gap:.18rem; }
.meta-cell .label{ font-size:.72rem; letter-spacing:.2px; color:var(--muted); font-weight:800; text-transform:uppercase; }
.meta-cell .value{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35ch .5ch; min-height:1.4em; font-weight:900; }
.meta-cell .value .fav{ font-weight:900; line-height:1.2; word-break:break-word; }

/* Footer */
.gc-footer{ display:flex; justify-content:space-between; align-items:center; padding:.6rem .8rem .8rem; border-top:1px solid var(--card-edge); }
.gc-footer .left{ display:flex; align-items:center; gap:.5rem; }
.media-logo{ height:18px; width:auto; display:block; }
.text-link{ color:var(--navy); text-decoration:none; font-weight:800; }
.text-link:hover{ text-decoration:underline; }

/* Weather chip — red border for visibility */
.wx{
  display:inline-flex; align-items:center; padding:.1rem .45rem; border-radius:999px;
  background:rgba(185,28,28,.08); border:1px solid #b91c1c;
  color:#7f1d1d; font-weight:900; font-size:.78rem;
}

/* Bottom-right pills */
.myspread,.my-pick-footer{
  display:inline-flex; align-items:center; padding:.12rem .5rem; border-radius:999px; font-weight:900; font-size:.8rem;
}
.myspread{ border:1px solid rgba(212,175,55,.45); background:rgba(212,175,55,.12); color:#7a5a00; }
/* .my-pick-footer{ border:1px solid rgba(11,30,58,.28); background:rgba(11,30,58,.08); color:var(--navy); } */
.my-pick-footer{ border:1px solid rgba(11,30,58,.28); background:rgb(200, 61, 51); color:#fdfbfb; }

/* Empty state */
.empty-state{
  grid-column:1/-1; text-align:center; padding:2rem; color:var(--muted);
  border:1px dashed var(--card-edge); border-radius:12px; background:#fff;
}

/* Responsive */
@media (max-width:1100px){ .sched-row-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .sched-row-grid{ grid-template-columns:1fr; }
  .btn-nav{ font-size:.92rem; padding:.45rem .65rem; }
  .logo{ inline-size:52px; block-size:52px; }
}