/* ============================================================
   SERIES ON DECK — styles
   Palette: white base, Dodger blue + red accents
   ============================================================ */
:root{
  --blue:#005A9C;        /* Dodger blue */
  --blue-dark:#00427a;
  --red:#EF3E42;         /* Dodgers script red */
  --ink:#0c1116;
  --muted:#5b6675;
  --line:#e7ebf0;
  --bg:#ffffff;
  --bg-soft:#f6f8fb;
  --shadow:0 10px 30px rgba(12,17,22,.10);
  --shadow-sm:0 4px 14px rgba(12,17,22,.08);
  --radius:16px;
  --nav-h:64px;          /* height of the sticky nav; measured & updated in app.js.
                            Table headers park just below it so they stay visible. */
}

/* ============ SITE-WIDE TABLE RULE ============
   Every table on the site keeps its top heading row fixed while you scroll,
   so it's always clear which stat each column is. The header parks just below
   the sticky nav (--nav-h). This base rule applies to ANY <table><thead> added
   in the future; the specific table styles below only override colors/spacing. */
table thead th{
  position:sticky;top:var(--nav-h);z-index:2;background:var(--blue);color:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- shared logo ---------- */
.logo-badge{width:1.9em;height:1.9em;display:block;flex:0 0 auto;border-radius:50%;object-fit:cover}
.gate-logo .logo-badge{width:64px;height:64px}
.footer-logo .logo-badge{width:46px;height:46px}
.logo-mark{font-size:1.1em;transform:translateY(1px)}
.logo-text{font-family:'Anton',sans-serif;letter-spacing:.04em;font-weight:400}
.logo-text em{color:var(--red);font-style:normal}

.btn-primary{
  display:inline-block;background:var(--blue);color:#fff;font-weight:700;
  padding:14px 26px;border:none;border-radius:999px;cursor:pointer;
  font-size:1rem;transition:.18s transform,.18s background;
}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-ghost{
  display:inline-block;background:transparent;color:var(--blue);font-weight:700;
  padding:14px 26px;border:2px solid var(--blue);border-radius:999px;
  transition:.18s;
}
.btn-ghost:hover{background:var(--blue);color:#fff}

/* ============ GATE ============ */
.gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);overflow:hidden}
.gate-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(0,90,156,.16), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(239,62,66,.14), transparent 60%);
}
.gate-card{
  position:relative;z-index:1;width:min(92vw,460px);background:#fff;
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
  padding:42px 38px;text-align:center;
}
.gate-logo{font-size:1.5rem;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px}
.gate-title{font-family:'Anton',sans-serif;font-size:2.4rem;line-height:1.05;font-weight:400}
.gate-sub{color:var(--muted);margin:12px 0 26px}
.gate-form{display:flex;flex-direction:column;gap:12px}
.gate-form input{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-size:1rem;font-family:inherit;transition:.15s border;
}
.gate-form input:focus{outline:none;border-color:var(--blue)}
.gate-form .btn-primary{margin-top:6px}
.gate-error{color:var(--red);font-weight:600;font-size:.9rem;min-height:1.1em}
.gate-fineprint{color:var(--muted);font-size:.8rem;margin-top:4px}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 6vw;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-logo{font-size:1.25rem;display:flex;align-items:center;gap:8px}
.nav-links{display:flex;align-items:center;gap:26px;font-weight:600}
.nav-links a{color:var(--ink);transition:.15s color}
.nav-links a:hover{color:var(--blue)}
.nav-links a.active{color:var(--blue)}
.nav-links a.active::after{content:"";display:block;height:2px;background:var(--blue);border-radius:2px;margin-top:2px}
/* Page routing: only the active section is shown; others are hidden. */
.page-hidden{display:none !important}
.nav-yt{background:var(--red);color:#fff !important;padding:8px 16px;border-radius:999px}
.nav-yt:hover{background:#d62a2e}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink)}

/* ============ HERO ============ */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;
  padding:70px 6vw 80px;
}
.itfdb{grid-column:1/-1;color:var(--blue);font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(3.2rem,9vw,6rem);line-height:1;letter-spacing:.04em;margin:0 0 6px;text-align:center}
.hero-title{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98}
.accent-blue{color:var(--blue)}
.accent-red{color:var(--red)}
.hero-text{color:var(--muted);font-size:1.1rem;max-width:46ch;margin:20px 0 28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{
  height:420px;border-radius:24px;background-color:var(--blue);
  background-size:cover;background-position:center;box-shadow:var(--shadow);
  /* Daily hero photo (images/hero.jpg) is set by .tools/set_hero_image.py.
     The gradient is a fallback behind it in case the image is missing. */
  background-image:linear-gradient(135deg, var(--blue), #0a78c9 60%, var(--red));
  position:relative;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.hero-art:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.hero-art:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ============ SECTIONS ============ */
.section{padding:72px 6vw}
.section-alt{background:var(--bg-soft)}
.section-head{text-align:center;margin-bottom:42px}
.section-head h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.8rem)}
.section-head h2::after{content:"";display:block;width:64px;height:4px;background:var(--red);margin:14px auto 0;border-radius:4px}
.section-head p{color:var(--muted);margin-top:10px}

/* ---------- blog feed ---------- */
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.post-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.18s transform,.18s box-shadow;cursor:pointer;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-thumb{height:170px;background-size:cover;background-position:center;background-color:var(--blue);
  background-image:linear-gradient(135deg,var(--blue),#0a78c9 70%,var(--red))}
.post-body{padding:20px}
.post-date{color:var(--red);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.post-title{font-size:1.2rem;font-weight:800;margin:6px 0 8px;line-height:1.25}
.post-excerpt{color:var(--muted);font-size:.95rem}

/* ---------- game dates list ---------- */
.games-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.game-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:.18s;display:flex;flex-direction:column;gap:6px;
  border-left:5px solid var(--blue);
}
.game-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-left-color:var(--red)}
.game-tile .gt-date{font-family:'Anton',sans-serif;font-size:1.35rem;letter-spacing:.02em}
.game-tile .gt-match{color:var(--blue);font-weight:700}
.game-tile .gt-meta{color:var(--muted);font-size:.9rem}
.game-tile .gt-go{margin-top:8px;color:var(--red);font-weight:700;font-size:.9rem}

/* ============ ABOUT ============ */
.about-inner{max-width:760px;margin:0 auto;text-align:center}
.about-inner h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:18px}
.about-inner p{color:var(--muted);font-size:1.05rem;margin-bottom:14px}
.about-inner a{color:var(--blue);font-weight:700}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:#cdd6e0;text-align:center;padding:46px 6vw}
.footer-logo{font-size:1.3rem;color:#fff;display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.footer-logo .logo-text em{color:var(--red)}
.footer p{font-size:.85rem;color:#8b97a6;max-width:60ch;margin:0 auto}

/* ============ GAME DETAIL ============ */
.game-detail{position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto}
.detail-inner{max-width:920px;margin:0 auto;padding:40px 6vw 80px}
.detail-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap;
}
.detail-logo{
  font-size:1.25rem;display:flex;align-items:center;gap:8px;cursor:pointer;
  transition:.15s opacity;
}
.detail-logo:hover{opacity:.75}
.detail-close{
  background:none;border:none;color:var(--blue);font-weight:700;font-size:1rem;cursor:pointer;
  padding:10px 0;
}
.detail-close:hover{color:var(--red)}
.detail-head{border-bottom:3px solid var(--red);padding-bottom:18px;margin-bottom:26px}
.detail-date{font-family:'Anton',sans-serif;font-size:clamp(2rem,5vw,3rem);line-height:1}
.detail-match{color:var(--blue);font-weight:800;font-size:1.2rem;margin-top:6px}
.detail-meta{color:var(--muted);margin-top:4px}
.detail-summary h3{font-size:1.3rem;margin:26px 0 10px}
.detail-summary p{color:#2c3540;margin-bottom:14px;font-size:1.05rem}
.detail-fullsummary{border-top:3px solid var(--blue);margin-top:38px;padding-top:8px}
.detail-fullsummary .fs-h1{color:var(--blue);font-weight:800;font-size:1.25rem;margin:28px 0 8px}
.detail-fullsummary .fs-h2{color:var(--red);font-weight:700;font-size:1.05rem;margin:18px 0 6px}
.score-pred{color:var(--red);font-weight:800}
.detail-gallery-title{font-family:'Anton',sans-serif;font-size:1.5rem;margin:34px 0 16px}
.detail-jumpbar{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;
  margin:34px 0 16px;border-bottom:1px solid var(--line);padding-bottom:8px;
}
.detail-jumpbar .detail-gallery-title{margin:0}
.detail-jump-link{
  font-family:'Anton',sans-serif;font-size:1.5rem;color:var(--blue);
  cursor:pointer;transition:.15s color;display:inline-flex;align-items:baseline;gap:6px;
}
.detail-jump-link:hover{color:var(--red)}
.detail-jump-link span{font-size:1rem}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.thumb{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:.18s;background:#fff;
}
.thumb:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.thumb img{height:130px;width:100%;object-fit:cover;background:var(--bg-soft)}
.thumb .thumb-cap{padding:8px 10px;font-size:.82rem;font-weight:600;color:var(--ink);text-align:center}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(8,12,18,.93);display:grid;place-items:center}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:20px;right:26px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;
  font-size:2.4rem;width:56px;height:56px;border-radius:50%;cursor:pointer;transition:.15s}
.lb-nav:hover{background:var(--blue)}
.lb-prev{left:3vw}.lb-next{right:3vw}
.lb-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-weight:600}

/* ============ RESPONSIVE ============ */
@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:46px}
  .itfdb{order:-2;font-size:clamp(3.4rem,16vw,5rem)}
  .hero-art{height:240px;order:-1}
  .nav-links{
    position:absolute;top:64px;right:6vw;flex-direction:column;background:#fff;
    border:1px solid var(--line);border-radius:14px;padding:16px 22px;box-shadow:var(--shadow);
    gap:14px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .lb-nav{width:44px;height:44px;font-size:1.8rem}
}

/* ============ SEASON STATS ============ */
.season-stats-wrap{max-width:1100px;margin:0 auto}
.ss-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.ss-tab{
  font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;
  padding:10px 22px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;transition:.15s;
}
.ss-tab:hover{border-color:var(--blue);color:var(--blue)}
.ss-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.ss-updated{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 18px}
.ss-empty{text-align:center;color:var(--muted)}

.ss-table-scroll{
  overflow-x:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}

/* ============ RECORD / STANDINGS controls ============ */
.rec-controls{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:center;margin-bottom:14px}
.rec-control{display:flex;flex-direction:column;align-items:center;gap:8px}
.rec-label{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.rec-control .ss-tabs{margin-bottom:0}
.rec-disabled{opacity:.4;pointer-events:none}
.rec-group{margin-bottom:30px}
.rec-group:last-child{margin-bottom:0}
.rec-group-title{
  font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;
  font-size:1.15rem;color:var(--blue);margin:0 0 10px 2px;
}
.ss-table{border-collapse:collapse;width:100%;font-size:.9rem}
.ss-table.hidden{display:none}
.ss-table thead th{
  position:sticky;top:0;z-index:2;background:var(--blue);color:#fff;
  font-weight:700;white-space:nowrap;cursor:pointer;user-select:none;
  padding:12px 12px;font-size:.82rem;letter-spacing:.02em;
  border-bottom:2px solid var(--blue-dark);transition:.12s background;
}
.ss-table thead th:first-child{left:0;z-index:3}
.ss-table thead th:hover{background:var(--blue-dark)}
.ss-th-text{text-align:left}
.ss-th-num{text-align:right}
.ss-table thead th.ss-sorted{background:var(--blue-dark)}
.ss-table tbody td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ss-td-text{text-align:left;font-weight:600;color:var(--ink)}
.ss-td-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.ss-table tbody tr:nth-child(even){background:var(--bg-soft)}
.ss-table tbody tr:hover{background:#eaf2fb}
.ss-table tbody td:first-child{position:sticky;left:0;z-index:1;background:#fff;
  box-shadow:1px 0 0 var(--line)}
.ss-table tbody tr:nth-child(even) td:first-child{background:var(--bg-soft)}
.ss-table tbody tr:hover td:first-child{background:#eaf2fb}

@media(max-width:640px){
  .ss-table{font-size:.82rem}
  .ss-table thead th{padding:10px 8px}
  .ss-table tbody td{padding:8px}
}

/* ============ TEAM RANKINGS ============
   One banded mini-table per category. Each cell stacks the MLB rank (big)
   over the actual stat (small). Cells tint by tier so strengths/weaknesses
   read instantly. Matches the Season Stats / Record blue-table look. */
.tr-section{margin-bottom:26px}
.tr-section:last-child{margin-bottom:0}
.tr-band{
  font-family:'Anton',sans-serif;letter-spacing:.03em;font-size:1.15rem;
  color:#fff;background:var(--blue-dark);text-align:center;
  padding:10px 12px;border-radius:8px 8px 0 0;margin:0;
}
.tr-table{border-collapse:collapse;width:100%;table-layout:fixed;
  font-size:.9rem;background:#fff}
.tr-table thead th{
  position:sticky;top:0;z-index:2;background:var(--blue);color:#fff;
  font-weight:700;text-align:center;padding:9px 6px;font-size:.82rem;
  letter-spacing:.02em;border-right:1px solid rgba(255,255,255,.18);
  border-bottom:2px solid var(--blue-dark);white-space:nowrap;
}
.tr-table thead th:last-child{border-right:none}
.tr-cell{
  text-align:center;vertical-align:middle;padding:12px 6px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.tr-table tbody tr td:last-child{border-right:none}
.tr-rank{display:block;font-weight:800;font-size:1.5rem;line-height:1;color:var(--ink)}
.tr-val{display:block;margin-top:4px;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* tier tints: top of the league (blue) vs bottom (red) */
.tr-cell.tr-elite{background:#e4f0fb}
.tr-cell.tr-elite .tr-rank{color:var(--blue)}
.tr-cell.tr-good{background:#f1f7fc}
.tr-cell.tr-bad{background:#fdecec}
.tr-cell.tr-bad .tr-rank{color:var(--red)}
.tr-cell.tr-na .tr-rank{color:var(--muted)}
@media(max-width:640px){
  .tr-band{font-size:1rem}
  .tr-rank{font-size:1.25rem}
  .tr-val{font-size:.72rem}
  .tr-table thead th{padding:8px 3px;font-size:.74rem}
  .tr-cell{padding:10px 3px}
}

/* ============ GAME STAT TABLES (game-detail page) ============
   One sortable table per spreadsheet tab, styled like Season Stats.
   Replaces the old PNG stat-sheet screenshots. */
.gs-wrap{margin-top:2px}
.gs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.gs-tab{
  font-family:'Inter',sans-serif;font-weight:700;font-size:.85rem;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;transition:.15s;
}
.gs-tab:hover{border-color:var(--blue);color:var(--blue)}
.gs-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.gs-panel{animation:gsfade .18s ease}
@keyframes gsfade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

.gs-band{
  font-family:'Anton',sans-serif;letter-spacing:.02em;font-size:1rem;
  color:var(--blue);background:var(--bg-soft);border-left:4px solid var(--red);
  padding:8px 12px;border-radius:6px;margin:20px 0 10px;
}
.gs-band:first-child{margin-top:0}
.gs-note{color:var(--muted);font-size:.86rem;font-style:italic;margin:6px 2px 16px}

.gs-scroll{
  overflow-x:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:16px;
}
.gs-table{border-collapse:collapse;width:100%;font-size:.88rem}
.gs-table thead th{
  position:sticky;top:0;z-index:2;background:var(--blue);color:#fff;
  font-weight:700;white-space:nowrap;cursor:pointer;user-select:none;
  padding:11px 12px;font-size:.8rem;letter-spacing:.02em;
  border-bottom:2px solid var(--blue-dark);transition:.12s background;
}
.gs-table thead th:hover{background:var(--blue-dark)}
.gs-table thead th:first-child{left:0;z-index:3}
.gs-table thead th.gs-sorted{background:var(--blue-dark)}
.gs-th-text{text-align:left}
.gs-th-num{text-align:right}
.gs-table tbody td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.gs-td-text{text-align:left;font-weight:600;color:var(--ink)}
.gs-td-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.gs-table tbody tr:nth-child(even){background:var(--bg-soft)}
.gs-table tbody tr:hover{background:#eaf2fb}
/* frozen first column so numbers never bleed behind names on mobile scroll */
.gs-table tbody td:first-child{position:sticky;left:0;z-index:1;background:#fff;
  box-shadow:1px 0 0 var(--line)}
.gs-table tbody tr:nth-child(even) td:first-child{background:var(--bg-soft)}
.gs-table tbody tr:hover td:first-child{background:#eaf2fb}

/* key / value tabs (Summary, Weather, etc.) — no blue header, bold label col */
.gs-kv td{white-space:normal}
.gs-kv .gs-kv-key{
  font-weight:700;color:var(--ink);width:32%;min-width:150px;
  background:var(--bg-soft);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);vertical-align:top;padding:9px 12px;
}
.gs-kv .gs-kv-val{color:#2c3540;border-bottom:1px solid var(--line);padding:9px 12px}
.gs-kv tbody td:first-child{position:static;box-shadow:none}

@media(max-width:640px){
  .gs-table{font-size:.8rem}
  .gs-table thead th{padding:9px 8px}
  .gs-table tbody td{padding:8px}
  .gs-kv .gs-kv-key{min-width:115px;width:38%}
}