/* ==========================================================================
   TipOffSchedule Base Styles (Clean + Calendar Alignment Fix)
   - Date View (unchanged)
   - Team Selector (unchanged)
   - Team Calendar (minimal, consistent, aligned)
   --------------------------------------------------------------------------
   CALENDAR TUNING (EDIT THESE ONLY TO RESIZE WHOLE CALENDAR)
   --cal-scale............... master multiplier (0.9 smaller / 1.1 bigger)
   --cal-day-number-size..... base date number size
   --cal-cell-min-h.......... minimum day cell height (before scale)
   --cal-logo-size........... game logo size
   --cal-time-font........... time line size
   --------------------------------------------------------------------------
   Alignment Fix Rationale:
   Previous versions layered multiple overlapping definitions, pseudo-elements,
   floats, aspect-ratio hacks, and repeated overrides which caused:
     - Inconsistent vertical alignment between date number & game card
     - Random extra vertical space / clipping
     - Hard to scale consistently
   This version:
     - SINGLE definition per calendar class
     - Uses flex + a simple square-ish ratio approach
     - Date number absolutely positioned (top-left) for perfect column alignment
     - Game card auto-centers within safe drawable box (no clipping)
     - Everything scales by --cal-scale
   ========================================================================== */

@font-face {
  font-family: 'TipOffGraff';
  src:
    url('../../assets/fonts/DemonSayHi.woff2') format('woff2'),
    url('../../assets/fonts/DemonSayHi.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette & common tokens */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-faint:#f5f7fa;
  --surface-tint:#eef9fb;
  --border:#dfe2e6;
  --border-soft:#eceef0;
  --text:#181a1d;
  --text-dim:#586068;
  --text-faint:#9098a0;
  --accent:#19a2b3;
  --accent-dark:#10707d;
  --sunday-tint:#ffe9e9;
  --focus-ring:0 0 0 3px rgba(25,162,179,0.35);

  --radius-pill:999px;
  --radius-card:28px;
  --shadow-sm:0 2px 4px -1px rgba(0,0,0,0.08);
  --shadow-md:0 10px 26px -14px rgba(0,0,0,0.22);
  --transition:160ms cubic-bezier(.4,.14,.3,1);
  --fade:260ms;

  --max-width:1180px;
  --title-font:'TipOffGraff','Rubik Spray Paint',cursive,system-ui,sans-serif;

  /* Date view sizes */
  --date-pill-width:112px;
  --date-pill-height:108px;
  --arrow-height:56px;
  --logo-size-base:68px;
  --logo-size-low:76px;
  --logo-size-high:56px;

  /* ================= Team Calendar (single source of truth) ================= */
  --cal-scale:1;                 /* master knob */
  --cal-day-number-size:1rem;    /* base day number (pre-scale) */
  --cal-cell-min-h:76px;         /* minimum cell height before scaling */
  --cal-logo-size:40px;          /* base logo size */
  --cal-time-font:.62rem;        /* time text size */
  --cal-gap:4px;                 /* internal gap */
  --cal-card-padding:6px 6px 6px;
  --cal-card-radius:12px;
  --cal-border-radius:14px;
  --cal-grid-gap:4px;
  --cal-card-bg:var(--surface);
  --cal-day-padding:6px 6px 6px;
  --cal-ratio:0.92;              /* width / height target (slightly taller) */

  /* Derived (scaled) */
  --cal-day-number-size-scaled:calc(var(--cal-day-number-size)*var(--cal-scale));
  --cal-cell-min-h-scaled:calc(var(--cal-cell-min-h)*var(--cal-scale));
  --cal-logo-size-scaled:calc(var(--cal-logo-size)*var(--cal-scale));
  --cal-time-font-scaled:calc(var(--cal-time-font)*var(--cal-scale));
  --cal-gap-scaled:calc(var(--cal-gap)*var(--cal-scale));
}

/* ========== Global Base ========== */
*{box-sizing:border-box;}
html,body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body{font-size:15px;line-height:1.42;}
.layout{display:flex;flex-direction:column;min-height:100vh;}

/* ========== Header / Tabs / Timezone (unchanged) ========== */
.app-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  max-width:var(--max-width);
  margin:0 auto;
  width:100%;
  padding:24px 24px 16px;
  gap:24px;
}
.header-left{justify-self:start;}
.header-center{justify-self:center;text-align:center;}
.header-right{justify-self:end;display:flex;gap:8px;position:relative;}
.nba-logo{height:76px;object-fit:contain;display:block;}
.site-title{
  margin:0;
  font-family:var(--title-font);
  font-size:clamp(3.25rem,2.9vw,3rem);         /* Change Site Title Size */
  font-weight:400;
  letter-spacing:1.2px;
  line-height:1.02;
  color:#131516;
}

.tz-wrapper{position:relative;}
.tz-pill{
  background:var(--surface);
  border:1px solid var(--border);
  padding:7px 14px 6px;
  font-size:.60rem;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  border-radius:var(--radius-pill);
  color:var(--text-faint);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  min-width:122px;
  transition:background var(--transition),color var(--transition);
}
.tz-pill:hover{background:var(--surface-faint);color:var(--text-dim);}
.tz-pill:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.tz-menu{
  position:absolute;top:100%;right:0;margin-top:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,0.25),0 2px 6px -2px rgba(0,0,0,0.12);
  padding:4px 0;
  min-width:140px;
  z-index:120;
  display:none;
}
.tz-menu.open{display:block;animation:tzFade .16s ease;}
@keyframes tzFade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.tz-option{
  width:100%;background:none;border:none;text-align:left;
  padding:8px 24px 8px 30px;
  font-size:.58rem;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-dim);
  cursor:pointer;position:relative;display:flex;align-items:center;gap:6px;
  transition:background var(--transition),color var(--transition);
}
.tz-option:hover,.tz-option:focus-visible{background:var(--surface-faint);color:var(--text);}
.tz-option[data-selected="true"]{color:var(--text);background:var(--surface-tint);}
.tz-option[data-selected="true"]::before{
  content:"";position:absolute;left:12px;width:7px;height:7px;
  background:var(--accent);border-radius:50%;box-shadow:0 0 0 2px var(--surface);
}

/* Tabs */
.main-tabs{
  margin-top:14px;display:inline-flex;gap:8px;
  background:var(--surface);padding:4px;
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);
}
.main-tab{
  background:transparent;border:0;padding:6px 16px;
  font-size:.62rem;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;cursor:pointer;border-radius:14px;
  color:var(--text-faint);display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--transition),color var(--transition);
  text-decoration:none;
}
.main-tab.is-active,.main-tab[aria-current="page"]{
  background:var(--surface-tint);color:var(--accent-dark);box-shadow:0 0 0 1px var(--accent);
}
.main-tab:hover:not(.is-active){background:var(--surface-faint);color:var(--text-dim);}
.main-tab:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* ========== Main wrapper ========== */
.main{max-width:var(--max-width);width:100%;margin:0 auto;padding:0 24px 32px;flex:1;}

/* ========== Date View (unchanged functional) ========== */
.date-view{display:flex;flex-direction:column;gap:32px;margin-top:8px;}
.date-bar{display:flex;align-items:center;gap:16px;justify-content:center;}
.nav-arrow{
  background:var(--surface);border:1px solid var(--border);
  width:46px;height:56px;border-radius:22px;
  cursor:pointer;font-size:.85rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  box-shadow:var(--shadow-sm);
}
.nav-arrow:hover{background:var(--surface-faint);transform:translateY(-3px);}
.nav-arrow:active{transform:translateY(-1px);}
.nav-arrow:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.date-strip{display:flex;gap:10px;padding:0 4px;}
.date-pill{
  width:var(--date-pill-width);height:var(--date-pill-height);
  border:1px solid var(--border-soft);border-radius:32px;
  background:var(--surface);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  font-weight:600;letter-spacing:.55px;font-size:1.02rem;
  user-select:none;padding:10px 6px 8px;
}
.date-pill.sunday{background:var(--sunday-tint);}
.date-pill .dow{font-size:.60rem;text-transform:uppercase;letter-spacing:1.25px;margin-top:6px;color:var(--text-faint);font-weight:600;}
.date-pill.today:not([aria-selected="true"])::after{
  content:"";position:absolute;bottom:8px;left:50%;width:6px;height:6px;
  background:var(--accent);border-radius:50%;transform:translateX(-50%);
  box-shadow:0 0 0 2px var(--surface);
}
.date-pill:hover:not([aria-selected="true"]){
  background:var(--surface-faint);transform:translateY(-3px);
  box-shadow:0 4px 10px -4px rgba(0,0,0,0.12);
}
.date-pill[aria-selected="true"]{
  border-color:var(--accent);background:var(--surface-tint);
  box-shadow:0 0 0 2px var(--accent) inset,0 3px 8px -4px rgba(0,0,0,0.1);
}
.date-pill:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.game-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:32px;align-items:start;min-height:240px;
}
.game-card{
  background:var(--surface);border:1.2px solid var(--border);
  border-radius:var(--radius-card);aspect-ratio:1/1;
  padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  position:relative;
}
.game-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--accent);}
.game-card:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring);}
.logos-row{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:2px;}
.logo,.tri-fallback{
  width:var(--logo-size-base);height:var(--logo-size-base);
  object-fit:contain;display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:600;letter-spacing:.5px;color:var(--text-faint);
  -webkit-user-drag:none;
}
.logo--contrast{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25));}
.game-list.density-low .logo,.game-list.density-low .tri-fallback{width:var(--logo-size-low);height:var(--logo-size-low);}
.game-list.density-high .logo,.game-list.density-high .tri-fallback{width:var(--logo-size-high);height:var(--logo-size-high);}

.matchup{margin:6px 0 0;text-align:center;font-size:1.18rem;font-weight:700;letter-spacing:.6px;line-height:1.06;color:var(--text);}
.score-line{text-align:center;font-size:1rem;letter-spacing:.25px;margin:0 0 -5px;}
.score-value{display:inline-block;line-height:1;font-weight:700;}
.score-value--winner{color:var(--accent);font-weight:900;}
.score-value--loser{color:var(--text-dim);opacity:.82;font-weight:600;}
.score-dash{display:inline-block;color:var(--text-faint);opacity:.95;font-weight:800;padding:0 6px;line-height:1;}
.logo--winner{opacity:1;}
.logo--loser{opacity:.65;}
.meta-block{display:flex;flex-direction:column;gap:3px;margin-top:4px;padding-top:2px;}
.meta-line{
  text-align:center;font-size:.56rem;letter-spacing:1.05px;
  text-transform:uppercase;font-weight:600;line-height:1.12;color:var(--text-faint);
}
.countdown-line{text-align:center;font-size:.60rem;letter-spacing:1px;font-weight:600;text-transform:uppercase;margin-top:4px;color:var(--accent-dark);}
.no-games{grid-column:1/-1;text-align:center;font-size:.85rem;color:var(--text-faint);padding:32px 0;}

.btn-float{
  position:fixed;right:18px;bottom:18px;background:var(--surface);
  border:1px solid var(--text);color:var(--text);padding:12px 22px;
  font-size:.7rem;font-weight:600;letter-spacing:1px;border-radius:var(--radius-pill);
  cursor:pointer;box-shadow:var(--shadow-sm);transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  z-index:90;
}
.btn-float:hover:not(:disabled){transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--surface-faint);}
.btn-float:disabled{opacity:.45;cursor:default;}

/* ========== Team Selector ========== */
.team-grid-only{display:flex;flex-direction:column;gap:34px;margin-top:8px;}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:24px;align-items:start;}
.team-tile{
  background:var(--surface);border:1px solid var(--border);border-radius:22px;
  padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background var(--transition);
}
.team-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--accent);background:var(--surface-faint);}
.team-tile:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent);}
.team-tile-logo{width:56px;height:56px;object-fit:contain;}
.team-tile-code{font-size:.68rem;font-weight:700;letter-spacing:.8px;color:var(--text-dim);text-transform:uppercase;}

/* ========== Team Calendar (Aligned Compact) ========== */
.team-cal-shell{display:flex;flex-direction:column;gap:24px;margin-top:6px;}
.team-cal-title-block{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.team-cal-heading-full{margin:0;font-size:clamp(1.55rem,2.2vw,2.15rem);font-weight:600;letter-spacing:.9px;text-transform:uppercase;line-height:1.05;}
.month-nav--centered{display:flex;align-items:center;justify-content:center;gap:18px;}
.month-label{font-size:.95rem;font-weight:600;letter-spacing:.6px;color:var(--text-dim);min-width:160px;text-align:center;}

.month-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:8px 14px;font-size:.68rem;font-weight:600;letter-spacing:.8px;
  cursor:pointer;text-transform:uppercase;color:var(--text-faint);
  box-shadow:var(--shadow-sm);transition:background var(--transition),color var(--transition),transform var(--transition);
}
.month-btn:hover:not(:disabled){background:var(--surface-faint);color:var(--text-dim);transform:translateY(-3px);}
.month-btn:disabled{opacity:.45;cursor:default;}
.month-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.team-cal-wrapper{
  background:var(--surface);border:1px solid var(--border);
  border-radius:24px;padding:14px 16px 18px;box-shadow:var(--shadow-sm);
}

.team-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x); /* keep vertical rhythm */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x); /* (dedupe safe if minimized) */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  /* final override with unified var so changing var works everywhere */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  /* final single gap apply */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  /* We intentionally repeat to survive prior minifiers if any duplicates existed */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  /* Final real gap override below using the clean variable set for new design */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
  /* Real single final gap using reduced var names */
  gap:var(--cal-grid-gap-y) var(--cal-grid-gap-x);
}
.team-calendar-grid .cal-dow{
  text-align:center;font-size:.55rem;font-weight:700;
  letter-spacing:1.15px;text-transform:uppercase;color:var(--text-faint);
  padding:2px 0 6px;user-select:none;
}

/* Calendar day cell (alignment FIX) */
.day-cell{
  position:relative;
  background:var(--surface-faint);
  border:1px solid var(--border-soft);
  border-radius:var(--cal-border-radius);
  padding:var(--cal-day-padding);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--cal-gap-scaled);
  min-height:var(--cal-cell-min-h-scaled);
  /* square-ish ratio without cutting content */
  aspect-ratio: 1 / var(--cal-ratio);
  overflow:visible;
}
.day-cell.outside{opacity:.35;}
.day-cell:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent);}

/* Date number aligned top-left consistently */
.day-number{
  position:absolute;
  top:4px;left:6px;
  font-size:var(--cal-day-number-size-scaled);
  font-weight:700;
  line-height:1;
  letter-spacing:.04rem;
  margin:0;
  color:var(--text);
  pointer-events:none;
}
.day-cell.outside .day-number{opacity:.28;}

/* Mini card (logo + time) centered */
.game-mini,
.game-mini--bigger,
.game-mini--xl{
  margin:0;
  background:var(--cal-card-bg);
  border:1px solid var(--border);
  border-radius:var(--cal-card-radius);
  padding:var(--cal-card-padding);
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--cal-gap-scaled)*0.7);
  width:100%;
  max-height:100%;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* Hide unused legacy sub-elements */
.game-mini-stage,
.game-mini-matchup,
.game-pill-mobile,
.game-pill-time { display:none !important; }

/* Logos row */
.game-mini-logos,
.game-mini-logos--bigger,
.game-mini-logos--xl{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--cal-gap-scaled)*1.1);
  width:100%;
}
.game-mini-logos img,
.game-mini-logos .tri-f,
.game-mini-logos--bigger img,
.game-mini-logos--xl img,
.game-mini-logos--bigger .tri-f,
.game-mini-logos--xl .tri-f{
  width:var(--cal-logo-size-scaled);
  height:var(--cal-logo-size-scaled);
  object-fit:contain;
  -webkit-user-drag:none;
  display:block;
}

/* Time only */
.game-mini-time,
.game-mini-time--bigger,
.game-mini-time--xl{
  font-size:var(--cal-time-font-scaled);
  font-weight:600;
  letter-spacing:.05rem;
  text-transform:uppercase;
  color:var(--text-dim);
  line-height:1;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ========== Responsive scaling ========== */
@media (max-width:880px){
  :root{ --cal-scale:.95; }
}
@media (max-width:620px){
  :root{ --cal-scale:.90; }
  .team-cal-wrapper{padding:12px 12px 14px;}
}
@media (max-width:480px){
  :root{ --cal-scale:.82; }
  .team-cal-wrapper{padding:10px 10px 12px;}
}

/* ========== Footer & utilities ========== */
.footer{
  text-align:center;
  padding:70px 16px 56px;
  font-size:.6rem;
  letter-spacing:.75px;
  color:var(--text-faint);
  margin-top:32px;
}

.fade{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--fade) ease,transform var(--fade) ease;
}
.fade.ready{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .fade,.game-card,.date-pill{transition:none!important;}
  .game-card:hover,.date-pill:hover{transform:none;}
}

/* Link-back utility (if used) */
.link-back{
  background:none;border:none;
  padding:4px 0;
  font-size:.62rem;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;color:var(--accent-dark);
}
.link-back:hover{text-decoration:underline;}
.link-back:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* === Team Calendar FINAL TWEAK: add cell gap, show matchup, fit taller card === */
:root {
  --tc-gap: 10px;
  --tc-card-vpad: 10px;
  --tc-card-hpad: 10px;
  --tc-logo-size: 45px;
  --tc-matchup-font: .75rem;
  --tc-time-font: .65rem;
  --tc-card-radius: 30px;
  /* Percentage of (day cell inner height – date number space) we allow card to try to use */
  --tc-card-height-ratio: 1;
  /* Reserved vertical space at top for the date number (in px) */
  --tc-date-space: 7px;
}

/* 1. Add real gap between day cells (overrides earlier messy gap chain) */
.team-calendar-grid {
  gap: var(--tc-gap) !important;
}

/* 2. Day cell adjustments: keep external footprint, allocate top space for date */
.day-cell {
  position: relative;
  padding: var(--cal-day-padding);
  /* maintain existing aspect-ratio so grid stays same overall size */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

/* Make square‑ish still (slightly taller than wide through earlier ratio); leave as-is if already set */

/* 3. Date number: fix alignment and reserve invisible space below it */
.day-number {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: var(--cal-day-number-size-scaled);
  font-weight: 700;
  line-height: 1;
  margin: 0;
  pointer-events: none;
}
.day-cell.outside .day-number { opacity: .30; }

/* Invisible spacer to push card down uniformly (using a pseudo after) */
.day-cell::before {
  content:"";
  display:block;
  height: var(--tc-date-space);
  flex: 0 0 auto;
}

/* 4. Game card container (re-enable visible matchup) */
.game-mini,
.game-mini--bigger,
.game-mini--xl {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tc-card-radius);
  padding: var(--tc-card-vpad) var(--tc-card-hpad);
  gap: 4px;
  width: 100%;
  /* Attempt to cap height so card never spills – derive from cell height minus date space */
  max-height: calc((100% - var(--tc-date-space)) * var(--tc-card-height-ratio));
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* 5. Logos row – shrink to fit new tighter card */
.game-mini-logos,
.game-mini-logos--bigger,
.game-mini-logos--xl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  flex: 0 0 auto;
}
.game-mini-logos img,
.game-mini-logos .tri-f,
.game-mini-logos--bigger img,
.game-mini-logos--xl img {
  width: var(--tc-logo-size);
  height: var(--tc-logo-size);
  object-fit: contain;
  -webkit-user-drag: none;
}

/* 6. Show matchup header (previously hidden); allow ellipsis */
.game-mini-matchup,
.game-mini-matchup--bigger,
.game-mini-matchup--xl {
  display: block !important;
  font-size: var(--tc-matchup-font);
  font-weight: 700;
  letter-spacing: .65px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}

/* 7. Time line */
.game-mini-time,
.game-mini-time--bigger,
.game-mini-time--xl {
  font-size: var(--tc-time-font) !important;
  font-weight: 600;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 8. Hide elements we still do NOT want */
.game-mini-stage,
.game-pill-mobile,
.game-pill-time { display:none !important; }

/* 9. Slight scale adjustments on smaller screens (keep alignment) */
@media (max-width:880px) {
  :root {
    --tc-logo-size:34px;
    --tc-matchup-font:.56rem;
    --tc-time-font:.52rem;
    --tc-card-height-ratio:0.60; /* a touch more vertical for narrow columns */
  }
}
@media (max-width:620px) {
  :root {
    --tc-logo-size:32px;
    --tc-matchup-font:.54rem;
    --tc-time-font:.50rem;
    --tc-date-space:20px;
  }
  .game-mini { padding:5px 6px 6px; }
}
@media (max-width:480px) {
  :root {
    --tc-logo-size:20px;
    --tc-matchup-font:.50rem;
    --tc-time-font:.48rem;
    --tc-card-height-ratio:0.8;
    --cal-cell-min-h:123px;
    --tc-card-radius:10px
  }
  .game-mini { padding:3px 3px 3px; }
}

/* 10. Safety: ensure no earlier forced height overrides reappear */
.day-cell,
.game-mini { height:auto; }

/* For Making 'SUN' in team calendar view Red */
body.team-cal-page .team-calendar-grid .cal-dow:nth-child(7) { color:#d02424; font-weight:700; } #announce { display:none !important; }


/* === Sunday column tint in Team Calendar (trial) === */
/* Reuses the existing --sunday-tint variable (#ffe9e9 in your root) */

body.team-cal-page .team-calendar-grid > .cal-dow:nth-child(7) {
  color:#d02424;               /* keep the red label */
  font-weight:700;
}

body.team-cal-page .team-calendar-grid > .day-cell:nth-child(7n) {
  background:var(--sunday-tint);
  border-color:#f5c9c9;        /* slightly warmer border to match tint */
}

/* Dim outside-of-month Sundays a bit more so they’re still visually secondary */
body.team-cal-page .team-calendar-grid > .day-cell.outside:nth-child(7n) {
  opacity:.55;
}

/* Optional: soften the inner game card on Sunday (remove if you don't like it) */
/*body.team-cal-page .team-calendar-grid > .day-cell:nth-child(7n) .game-mini {
  background:#fff;
  border-color:#f2d4d4;
}

/* Dark mode safeguard (if/when prefers-color-scheme is active) */
@media (prefers-color-scheme:dark) {
  body.team-cal-page .team-calendar-grid > .day-cell:nth-child(7n) {
    background:rgba(255,80,80,0.12);
    border-color:rgba(255,120,120,0.35);
  }
  body.team-cal-page .team-calendar-grid > .day-cell:nth-child(7n) .game-mini {
    border-color:rgba(255,120,120,0.4);
  }
}

/* Remove space after disclaimer and pushing it down */
/* === Compact footer override (remove bottom whitespace) === */
.footer {
  /* Keep some breathing room above, kill the space below */
  padding:48px 16px 16px !important;  /* was 70px 16px 56px */
  margin-top:32px;                  /* adjust if you want less space above footer */
}

html, body {
  height:100%;
}

.layout {
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.main {
  flex:1 0 auto;
}

.footer {
  flex-shrink:0;
}


/* ===========================
   Mobile + iPad UI Pass (Date View)
   Safe overrides – desktop unaffected
   =========================== */

/* Make the date strip scrollable on smaller screens */
@media (max-width: 1024px) {
  .main { padding: 0 16px 28px; }

  .app-header { padding: 20px 16px 14px; gap: 16px; }
  .nba-logo { height: 64px; }
  .site-title { font-size: clamp(2.2rem, 2.2vw, 2.5rem); }
  .main-tabs { margin-top: 10px; gap: 6px; }
  .main-tab { font-size: .58rem; padding: 6px 12px; }

  .tz-pill { padding: 6px 12px 6px; font-size: .58rem; min-width: 112px; }

  .date-view { gap: 24px; }
  .date-bar { gap: 12px; }

  .date-strip {
    display: flex;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .date-strip::-webkit-scrollbar { display: none; }
  .date-pill { scroll-snap-align: center; }

  .nav-arrow {
    width: 44px; height: 48px; border-radius: 18px;
    font-size: .85rem;
  }

  .date-pill {
    width: 100px; height: 98px; border-radius: 28px;
    padding: 8px 6px 8px;
    font-size: .96rem;
  }
  /*.date-pill .dow { font-size: .54rem; margin-top: 6px; }*/

  .game-list {
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
  .game-card {
    aspect-ratio: 5 / 6;
    padding: 10px 10px 8px;
    gap: 8px;
  }
  .logos-row { gap: 18px; }
  .logo, .tri-fallback { width: 56px; height: 56px; }
  .matchup { font-size: 1.06rem; }
  .meta-line { font-size: .54rem; }
  .countdown-line { font-size: .56rem; }

  .btn-float {
    right: 16px; bottom: 16px;
    padding: 10px 16px;
    font-size: .64rem;
  }
}

/* iPad / small tablets */
@media (max-width: 820px) {
  .nba-logo { height: 58px; }
  .site-title { font-size: clamp(2rem, 2.4vw, 2.2rem); }
  .main { padding: 0 14px 26px; }

  .date-pill { width: 94px; height: 94px; font-size: .94rem; }
  .date-pill .dow { font-size: .52rem; }

  .game-list {
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .game-card { aspect-ratio: 5 / 6; padding: 10px; }
  .logo, .tri-fallback { width: 52px; height: 52px; }
  .matchup { font-size: 1rem; }
}

/* Phones (portrait) */
@media (max-width: 480px) {
  .app-header {
    padding: 14px 10px 10px;
    gap: 12px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .header-left, .header-right { align-self: center; }
  .nba-logo { height: 48px; }
  .site-title { font-size: clamp(1.7rem, 6vw, 1.9rem); letter-spacing: .8px; }
  .main-tabs { gap: 4px; padding: 2px; }
  .main-tab { font-size: .54rem; padding: 5px 10px; border-radius: 12px; }
  .tz-pill { font-size: .54rem; padding: 6px 10px 6px; min-width: 0; }

  .main { padding: 0 15px 22px; }
  .date-view { gap: 18px; }

  .date-bar { gap: 10px; }
  .nav-arrow {
    width: 38px; height: 44px; border-radius: 16px;
    font-size: .8rem;
  }

  .date-strip { gap: 8px; }
  .date-pill {
    width: 84px; height: 86px; border-radius: 24px;
    padding: 8px 6px 8px;
    font-size: .9rem;
  }
  .date-pill .dow { font-size: .5rem; letter-spacing: 1.1px; }
  .date-pill.today:not([aria-selected="true"])::after { bottom: 6px; }

  .game-list {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-card {
    aspect-ratio: 4 / 4;
    padding: 18px 8px 10px;
    gap: 6px;
    border-radius: 30px;
  }
  .logos-row { gap: 12px; margin-top: 0; }
  .logo, .tri-fallback { width: 60px; height: 60px; }
  .matchup { font-size: .96rem; letter-spacing: .5px; }
  .meta-block { gap: 2px; margin-top: 2px; }
  .meta-line { font-size: .5rem; letter-spacing: .95px; }
  .countdown-line { font-size: .54rem; margin-top: 2px; }

  .btn-float {
    right: 12px; bottom: 12px;
    padding: 9px 14px;
    font-size: .6rem;
    max-width: 72%;
    white-space: normal;
    line-height: 1.2;
  }
}

/* Ultra‑narrow safety */
@media (max-width: 360px) {
  .date-pill { width: 78px; height: 82px; }
  .logo, .tri-fallback { width: 40px; height: 40px; }
  .matchup { font-size: .92rem; }
}

/* Prevent date pills from shrinking; allow horizontal scroll instead */
.date-strip {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;            /* keep in one row */
  overflow-x: auto;             /* scroll instead of squeeze */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;/* optional: nicer scrolling */
}
.date-strip::-webkit-scrollbar { display: none; } /* hide scrollbar on mobile */

/* Each pill keeps its size – no shrinking */
.date-pill {
  flex: 0 0 var(--date-pill-width); /* fixed flex-basis equals width */
  height: var(--date-pill-height);
  flex-shrink: 0;                   /* do not compress */
  scroll-snap-align: center;        /* optional */
}



/* New Mobile adjustments - TEAM Calendar View */
@media (max-width:480px) {
  .team-calendar-grid { 
    gap: 2px !important;
    --tc-gap: 2px !important; /* override the variable itself */
  }
  .day-cell {
    aspect-ratio: unset !important;
    min-height: 60px !important; /* Increase min-height for more vertical space */
    height: auto !important;
    padding: 3px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .day-cell:not(:has(.game-mini)) {
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 2px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .day-cell:not(:has(.game-mini)) .day-number {
    font-size: .72rem !important;
    top: 2px !important; left: 4px !important;
  }
  .game-mini,
  .game-mini--bigger,
  .game-mini--xl {
    max-width: 100%;
    width: 100%;
    overflow: visible;
    border-radius: 9px;
    padding: 4px 2px 0px 2px !important; /* LESS padding */
    box-shadow: none !important;
    border: 1px solid var(--border-soft) !important;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 46px !important; /* enough for logos + text */
  }
  .game-mini-logos,
  .game-mini-logos--bigger,
  .game-mini-logos--xl {
    gap: 3px !important;
  }
  .game-mini-logos img,
  .game-mini-logos--xl img {
    width: 15px !important;  /* Make logos smaller for mobile */
    height: 15px !important;
    margin-top: 2px !important;
  }
  .game-mini-matchup,
  .game-mini-matchup--xl {
    font-size: .30rem !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 2px 0;
    margin-top: 2px !important;
    margin-bottom: 0px !important;
  }
  .game-mini-time,
  .game-mini-time--xl {
    font-size: .30rem !important;
    margin: 0 0 4px 0;
  }
.team-line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 2px !important;
    text-align: center !important;
  }
  .link-back {
    align-self: flex-start;
    margin-bottom: 0;
    font-size: 0.84rem;
    letter-spacing: 1px;
    position: static !important;
    left: unset !important;
    top: unset !important;
    transform: none !important;
  }
  .team-season-heading {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1.12;
    text-align: center !important; /* not middle */
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0 !important;
  }
  .month-row {
    margin-top: 22px !important;  /* or try 18px or 24px for preferred look */
    margin-bottom: 6px !important;
  }
  .team-cal-shell {
    gap: 10px !important; /* controls vertical space between children */
    margin-top: 0 !important;
  }
}