/* ============ CopticSports · TCBL design system ============ */
:root{
  /* official TCBL brand palette */
  --orange:#ff7110; --orange-deep:#ce5300; --gold:#ffbd59;
  --navy-950:#0b1a28; --navy-900:#0b2335; --navy-800:#123049; --navy-700:#1b405e;
  --ink-black:#141414; --line:#1d4463;
  --ink:#ffffff; --ink-dim:#a9c0d4; --ink-faint:#6f8ba5;
  --good:#b2d034; --bad:#bb0a28;
  --font-disp:'Archivo Black',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The canvas colour is what shows in the overscroll bounce and behind mobile
   browser chrome. Matching it to the tab bar removes the black seam that
   appeared under the tabs on iOS Safari. */
html{scroll-behavior:smooth;background:var(--navy-950)}
body{background:var(--ink-black);color:var(--ink);font-family:var(--font-body);line-height:1.55;
  background-image:radial-gradient(1200px 520px at 72% -12%, rgba(255,113,16,.10), transparent 60%),
                   radial-gradient(1000px 460px at 0% 0%, rgba(11,35,53,.95), transparent 60%);}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---- nav ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,26,40,.90);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-disp);font-size:19px;letter-spacing:.5px}
.brand img{height:38px}
.brand b{color:var(--orange)}
.nav{display:flex;gap:4px;margin-left:0;flex-wrap:wrap;width:100%}
.nav .spacer{margin-left:auto}
.nav a{padding:8px 13px;border-radius:8px;font-weight:700;font-size:13.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ink-dim);transition:.15s}
.nav a:hover{color:#fff;background:var(--navy-700)}
.nav a.on{color:var(--orange);background:rgba(255,113,16,.12)}
.nav a.cta{color:#fff;background:var(--orange);}
.nav a.cta:hover{background:var(--gold)}

/* ---- hero ---- */
.hero{padding:72px 0 46px;position:relative;overflow:hidden}
.hero .kicker{color:var(--orange);font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:13px}
.hero h1{font-family:var(--font-disp);font-size:clamp(34px,5.4vw,64px);line-height:1.04;
  text-transform:uppercase;margin:10px 0 14px;text-wrap:balance}
.hero h1 span{display:block}
.hero h1 .accent{color:var(--orange)}
.hero .verse{color:var(--ink-dim);font-style:italic;max-width:520px}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:44px;align-items:center}
.hero-logo{width:min(330px,70%);margin:0 auto;display:block;filter:drop-shadow(0 18px 50px rgba(255,113,16,.30))}
.pillars{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.pill{border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-weight:800;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim)}
.pill i{color:var(--orange);font-style:normal;margin-right:6px}

/* ---- countdown ---- */
.count{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.count .cell{background:var(--navy-800);border:1px solid var(--line);border-radius:12px;
  min-width:86px;padding:12px 10px;text-align:center}
.count b{display:block;font-family:var(--font-disp);font-size:30px;color:var(--orange)}
.count span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}
.count .cell.wide{flex:1;grid-column:1/-1}
.count-label{width:100%;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2px}

/* ---- sections / cards ---- */
.section{padding:44px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.sec-head h2{font-family:var(--font-disp);text-transform:uppercase;font-size:26px;letter-spacing:.5px}
.sec-head .more{margin-left:auto;color:var(--orange);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border:1px solid var(--line);
  border-radius:16px;padding:20px;position:relative;overflow:hidden}
.card h3{font-family:var(--font-disp);text-transform:uppercase;font-size:16px;margin-bottom:8px}
.card .tag{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-size:10.5px;
  font-weight:800;letter-spacing:1.5px;padding:4px 12px;border-radius:0 14px 0 12px;text-transform:uppercase}

/* ---- scoreboard ---- */
.score-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.game{background:var(--navy-800);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.game .meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.game .row{display:flex;align-items:center;gap:10px;padding:5px 0}
.game .row .tpill{max-width:none}
.game .row .score{margin-left:auto;font-family:var(--font-disp);font-size:20px;padding-left:10px}
.game .row.win .score{color:var(--orange)}
.game .row.dim{opacity:.62}
/* team name shown inside its own colour, used everywhere a team appears */
.tpill{display:inline-flex;align-items:center;border-radius:7px;padding:5px 11px;font-weight:800;
  font-size:13.5px;letter-spacing:.2px;line-height:1.15;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.tpill.sm{font-size:11.5px;padding:3px 8px;border-radius:6px}
.tpill.lg{font-size:19px;padding:8px 16px;border-radius:9px}
.tpill.light{border-color:rgba(0,0,0,.22)}
.tname{font-weight:700;font-size:14.5px}
.status-F{color:var(--ink-faint)} .status-FFT{color:var(--bad)} .status-TBP{color:var(--good)}

/* ---- tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.tbl th.num,.tbl td.num{text-align:right}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tbody tr:hover{background:rgba(255,113,16,.06)}
.tbl .rank{color:var(--ink-faint);font-weight:800;width:30px}
.tbl .hot{color:var(--orange);font-weight:800}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--navy-900)}

/* ---- season tabs / filter bar ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-bottom:24px}
.tabs button{background:var(--navy-800);border:1px solid var(--line);color:var(--ink-dim);
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:13px;letter-spacing:1px;cursor:pointer;
  text-transform:uppercase;font-family:var(--font-body)}
.tabs button.on{background:var(--orange);border-color:var(--orange);color:#fff}
/* the live season is captioned under its tab rather than badged inside it,
   so it reads as a quiet note instead of competing with the active state */
.tabwrap{display:inline-flex;flex-direction:column;align-items:center;gap:5px}
.nowlabel{font-style:normal;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;line-height:1}
.tabs button:disabled{opacity:.4;cursor:not-allowed}

/* ---- teams ---- */
.team-card{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--navy-900);transition:.18s}
.team-card:hover{transform:translateY(-3px);border-color:var(--orange)}
.team-card .swatch{height:86px;display:flex;align-items:center;justify-content:center}
.team-card .swatch img{max-height:52px;max-width:82%}
.team-card .body{padding:14px 16px}
.team-card .body h3{font-family:var(--font-disp);font-size:15.5px;text-transform:uppercase}
.team-card .body p{color:var(--ink-dim);font-size:12.5px;margin-top:4px}
.banner-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.banner{background:rgba(255,189,89,.14);color:var(--gold);border:1px solid rgba(255,189,89,.45);
  font-size:10.5px;font-weight:800;letter-spacing:1px;padding:3px 10px;border-radius:6px;text-transform:uppercase}

/* ---- calendar ---- */
.cal-head{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.cal-head h3{font-family:var(--font-disp);font-size:22px;text-transform:uppercase;min-width:240px}
.cal-head button{background:var(--navy-800);color:var(--ink);border:1px solid var(--line);width:38px;height:38px;
  border-radius:10px;font-size:17px;cursor:pointer}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{font-size:10.5px;letter-spacing:2px;color:var(--ink-faint);text-transform:uppercase;text-align:center;padding:6px 0}
.cal .day{min-height:96px;background:var(--navy-900);border:1px solid var(--line);border-radius:10px;padding:7px 8px;font-size:12px}
.cal .day.out{opacity:.32}
.cal .day.today{border-color:var(--orange)}
.cal .dnum{font-weight:800;color:var(--ink-dim);font-size:12px}
.cal .day.fasting{background:linear-gradient(180deg,#123049,#0b2335)}
.cal .fast-tag{font-size:9.5px;letter-spacing:.7px;color:#67aade;text-transform:uppercase;font-weight:700}
.evt{margin-top:4px;border-radius:6px;padding:2.5px 7px;font-size:10.8px;font-weight:700;line-height:1.3}
/* one game = one line: 3:30 GRE v JAM */
.evt.game{display:flex;align-items:center;gap:3px;overflow:hidden;padding:2px 5px;
  background:rgba(255,113,16,.10);color:var(--gold);border:1px solid rgba(255,113,16,.30)}
.evt.game .t{flex:0 0 auto;font-size:9.5px;font-weight:800;color:var(--ink-dim);letter-spacing:.2px}
.evt.game i{flex:0 0 auto;font-style:normal;font-size:8.5px;opacity:.5;font-weight:700}
.evt.game .ab{flex:0 0 auto;border-radius:4px;padding:1px 4px;font-size:9.5px;font-weight:800;
  letter-spacing:.3px;white-space:nowrap;border:1px solid transparent}
.evt.game .ab.light{border-color:rgba(0,0,0,.25)}
/* agenda rows have the width for full names and a right-aligned time */
.evt.game.ag{gap:6px;padding:5px 9px}
.evt.game.ag .t{margin-left:auto;font-size:11px}
.evt.feast{background:rgba(178,208,52,.13);color:var(--good);border:1px solid rgba(178,208,52,.32)}
.evt.feast.major{background:rgba(178,208,52,.22)}
.evt.league{background:rgba(103,170,222,.14);color:#67aade;border:1px solid rgba(103,170,222,.34)}
.legend{display:flex;gap:16px;margin:14px 0 0;font-size:12px;color:var(--ink-dim);flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---- leaders ---- */
.leader{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.leader:last-child{border:none}
.leader .n{font-family:var(--font-disp);font-size:22px;color:var(--ink-faint);width:26px}
.leader .who b{display:block;font-size:15px}
.leader .who span{font-size:12px;color:var(--ink-dim)}
.leader .val{margin-left:auto;text-align:right}
.leader .val b{font-family:var(--font-disp);font-size:22px;color:var(--orange)}
.leader .who b{line-height:1.2}
.leader .val span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--ink-faint);text-transform:uppercase}

/* ---- milestones timeline ---- */
.timeline{display:grid;gap:0}
.mile{display:flex;gap:18px;position:relative;padding:0 0 26px 2px}
.mile:before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:2px;background:var(--line)}
.mile:last-child:before{display:none}
.mile .dot{width:16px;height:16px;border-radius:50%;background:var(--navy-700);border:3px solid var(--orange);flex:0 0 16px;margin-top:3px;z-index:1}
.mile.past .dot{background:var(--orange)}
.mile b{display:block}
.mile span{color:var(--ink-dim);font-size:13px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:60px;padding:36px 0 46px;color:var(--ink-faint);font-size:13px}
footer .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
footer img{height:34px;opacity:.9}
footer .verse{font-style:italic}
footer .right{margin-left:auto;text-align:right}

/* ---- upload page ---- */
.drop{border:2px dashed var(--line);border-radius:18px;padding:52px 30px;text-align:center;
  background:var(--navy-900);transition:.15s;cursor:pointer}
.drop.hot{border-color:var(--orange);background:rgba(255,113,16,.07)}
.drop h3{font-family:var(--font-disp);text-transform:uppercase;margin-bottom:6px}
.drop p{color:var(--ink-dim)}
.stepper{display:flex;gap:10px;margin:26px 0;flex-wrap:wrap}
.step{display:flex;gap:10px;align-items:center;color:var(--ink-faint);font-weight:700;font-size:13px}
.step .b{width:26px;height:26px;border-radius:50%;background:var(--navy-800);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12.5px}
.step.on{color:var(--ink)} .step.on .b{background:var(--orange);border-color:var(--orange);color:#fff}
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:800;letter-spacing:.6px;
  padding:12px 26px;border-radius:10px;border:none;font-size:14.5px;cursor:pointer;font-family:var(--font-body)}
.btn:hover{background:var(--gold)} .btn.ghost{background:var(--navy-800);border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.note{background:rgba(103,170,222,.08);border:1px solid rgba(103,170,222,.24);border-radius:12px;
  padding:14px 18px;font-size:13.5px;color:var(--ink-dim)}
.ok{color:var(--good)} .err{color:var(--bad)}
input[type=text],input[type=password],input[type=date],select{background:var(--navy-800);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:10px 14px;font-size:14px;font-family:var(--font-body)}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);font-weight:800}

/* ---- live stream ---- */
.ytwrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.livenow{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:800;
  font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-dim)}
.ldot{width:9px;height:9px;border-radius:50%;background:var(--bad);flex:0 0 9px;
  box-shadow:0 0 0 0 rgba(187,10,40,.7);animation:lpulse 1.8s infinite}
@keyframes lpulse{70%{box-shadow:0 0 0 9px rgba(187,10,40,0)}100%{box-shadow:0 0 0 0 rgba(187,10,40,0)}}
@media(prefers-reduced-motion:reduce){.ldot{animation:none}}
.offair h3{font-family:var(--font-disp);text-transform:uppercase;font-size:17px}
.offair .count{margin-top:18px}
.mgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mchip{display:inline-flex;align-items:center;gap:7px;background:var(--navy-800);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12px}
.mchip i{color:var(--ink-faint);font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:1px}
.mchip b{color:var(--ink-dim);font-size:11.5px;margin-left:2px}
/* site-wide bar, only present while a game is on */
.livebar{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bad);color:#fff;padding:9px 16px;font-size:13px;text-align:center;
  flex-wrap:wrap;position:relative;z-index:70}
.livebar b{font-weight:800;letter-spacing:.4px}
.livebar span:last-child{opacity:.85;font-size:12.5px}
.livebar .ldot{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:wpulse 1.8s infinite}
@keyframes wpulse{70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---- registration ---- */
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
/* locked state: reads as a button, but is deliberately not a link */
.btn.locked{display:inline-flex;align-items:center;gap:9px;background:var(--navy-800);
  color:var(--ink-faint);border:1px solid var(--line);cursor:not-allowed;box-shadow:none}
.btn.locked:hover{background:var(--navy-800);color:var(--ink-faint);box-shadow:none}
.btn.locked svg{width:15px;height:15px;flex:0 0 15px}
.btn.big.locked{justify-content:center}
.mile a{color:var(--orange)}
.cardp{color:var(--ink-dim);font-size:13.5px;margin-top:8px}
.formnote{color:var(--ink-dim);font-size:13.5px;max-width:820px;margin-bottom:18px}

/* sign-up call to action: registration itself lives on JotForm */
.signup{display:grid;grid-template-columns:1.35fr .8fr;gap:32px;align-items:center;
  background:linear-gradient(180deg,var(--navy-800),var(--navy-900));
  border:1px solid var(--line);border-radius:16px;padding:28px 30px}
.signup h3{font-family:var(--font-disp);text-transform:uppercase;font-size:19px}
.signup-list{display:grid;gap:7px;margin-top:16px}
.signup-list span{color:var(--ink-faint);font-size:12.5px}
.signup-go{display:flex;flex-direction:column;align-items:stretch;gap:9px;text-align:center}
.signup-sub{color:var(--ink-faint);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;font-weight:700}
.btn.big{padding:18px 30px;font-size:16px;border-radius:12px;text-align:center;
  box-shadow:0 10px 30px rgba(255,113,16,.28)}
.btn.big:hover{box-shadow:0 10px 34px rgba(255,189,89,.34)}

/* ============================================================
   MOBILE
   Desktop layout above 780px is unchanged. Everything below is
   additive: hidden-by-default mobile chrome, then the media
   queries that switch the site into its phone layout.
   ============================================================ */

/* mobile-only chrome, inert on desktop */
.m-only{display:none}
.tabbar{display:none}
.more-cols{display:none}
.agenda{display:none}
.ag-fastnote{display:none}
.tbl .x{display:table-cell}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid3,.grid4{grid-template-columns:1fr 1fr}
  .cal .day{min-height:64px}
}

@media(max-width:780px){
  /* ---- global feel ---- */
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent;
       padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  a,button,select,input,summary{touch-action:manipulation}
  .wrap{padding:0 16px}
  .section{padding:26px 0}

  /* ---- top bar: brand + portal, links move to the tab bar ---- */
  .topbar .wrap{height:54px;gap:12px}
  .topbar .nav{display:none}
  .brand.m-only{display:flex;align-items:center;gap:9px;font-family:var(--font-disp);
    font-size:17px;letter-spacing:.6px}
  .brand.m-only img{height:28px}
  .m-portal{display:inline-flex;align-items:center;margin-left:auto;background:var(--orange);color:#fff;
    font-weight:800;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
    padding:9px 14px;border-radius:9px;min-height:38px}
  .m-portal.on{background:var(--gold);color:var(--ink-black)}

  /* ---- bottom tab bar ---- */
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(11,26,40,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 22px rgba(0,0,0,.42)}
  /* iOS Safari animates its toolbar in and out; this bleed keeps the tab bar
     colour running past the bottom edge so no gap is ever visible mid-animation */
  .tabbar:after{content:"";position:absolute;top:100%;left:0;right:0;height:140px;
    background:rgba(11,26,40,.97);pointer-events:none}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 1px;min-height:56px;min-width:0;color:var(--ink-faint);
    font-size:8.5px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;text-align:center}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a.on{color:var(--orange)}
  .tabbar a.on svg{stroke-width:2.2}
  .tabbar a:active{background:rgba(255,113,16,.1)}
  .tabbar svg{width:21px;height:21px;flex:0 0 auto}

  /* ---- hero ---- */
  .hero{padding:30px 0 24px}
  .hero-grid{gap:24px}
  .hero .kicker{font-size:11px;letter-spacing:2px}
  .hero h1{font-size:clamp(30px,9vw,42px);margin:8px 0 12px}
  .hero .verse{font-size:14px}
  .hero-logo{width:min(210px,58%);margin-top:4px}
  .pillars{gap:8px;margin-top:16px}
  .pill{padding:6px 13px;font-size:11px;letter-spacing:1.4px}
  .hero-cta{gap:10px;margin-top:20px}
  .hero-cta .btn{width:100%;text-align:center}
  .hero-cta-note{font-size:11px;letter-spacing:1px}
  .formnote{font-size:13px}
  /* ---- live ---- */
  .ytwrap{border-radius:12px;margin:0 -16px;width:calc(100% + 32px);border-left:none;border-right:none}
  .livenow{font-size:11px;letter-spacing:1.2px;gap:8px}
  .mgrid{gap:7px;margin-top:12px}
  .mchip{padding:6px 11px;font-size:11.5px}
  .livebar{padding:10px 14px;font-size:12.5px;gap:8px}
  .livebar span:last-child{width:100%;font-size:11.5px}
  .signup{grid-template-columns:1fr;gap:20px;padding:20px 18px;border-radius:14px}
  .signup h3{font-size:17px}
  .btn.big{padding:16px 22px;font-size:15px;min-height:54px}

  /* countdown: fixed 4-up grid instead of wrapping flex */
  .count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
  .count .cell{min-width:0;padding:10px 4px;border-radius:10px}
  .count b{font-size:22px}
  .count span{font-size:9px;letter-spacing:1px}
  .count-label{grid-column:1/-1;font-size:11px;letter-spacing:1.5px}

  /* ---- sections & cards ---- */
  .grid3,.grid4{grid-template-columns:1fr!important;gap:14px}
  .sec-head{flex-wrap:wrap;gap:10px;margin-bottom:16px}
  .sec-head h2{font-size:21px}
  .sec-head .more{font-size:12px;width:100%;margin-left:0;order:3}
  .card{padding:16px;border-radius:14px}
  .score-strip{grid-template-columns:1fr;gap:12px}
  .team-card:hover{transform:none}
  .team-card .swatch{height:72px}

  /* ---- season tabs: single scrollable row, thumb-sized ---- */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -16px 18px;padding:2px 16px 6px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tabwrap{flex:0 0 auto}
  .tabs button{flex:0 0 auto;min-height:42px;padding:10px 18px;font-size:12.5px}
  .nowlabel{font-size:8.5px;letter-spacing:1.2px}

  /* ---- tables: core columns only until "Show all stats" ---- */
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:11px 7px}
  .tbl th{font-size:10px;letter-spacing:.8px;padding-top:13px;padding-bottom:13px}
  .tbl .tpill{font-size:11.5px;padding:3px 7px}
  .tbl .x{display:none}
  .tbl.wide .x{display:table-cell}
  /* keep the player/team name in view while stats scroll */
  .tbl th:first-child,.tbl td:first-child{position:sticky;left:0;z-index:2;
    background:var(--navy-900);box-shadow:1px 0 0 var(--line)}
  .tbl .rank{width:26px}
  .more-cols{display:inline-block;margin-bottom:12px;padding:11px 18px;font-size:13px;min-height:44px}

  /* ---- calendar: agenda list replaces the month grid ---- */
  .cal-wrap{display:none}
  .agenda{display:block}
  .cal-head{gap:10px;margin-bottom:14px}
  .cal-head h3{min-width:0;flex:1;font-size:19px;text-align:center}
  .cal-head button{width:44px;height:44px;font-size:20px;flex:0 0 44px}
  .cal-head button:disabled{opacity:.35}
  .cal-head #fastnote{display:none}
  .ag-fastnote{display:block;color:var(--ink-faint);font-size:12px;margin:-4px 0 14px}
  .ag-day{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .ag-day:last-child{border-bottom:none}
  /* fast-only days carry no games, so they sit quietly in the list */
  .ag-day.quiet{padding:7px 0;align-items:center;opacity:.72}
  .ag-day.quiet .ag-date b{font-size:16px}
  .ag-date{flex:0 0 46px;text-align:center;padding-top:1px}
  .ag-date b{display:block;font-family:var(--font-disp);font-size:21px;line-height:1.1}
  .ag-date span{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-faint)}
  .ag-day.today .ag-date b{color:var(--orange)}
  .ag-day.today .ag-date{border-left:3px solid var(--orange);border-radius:2px}
  .ag-day.fasting .ag-date span{color:#67aade}
  .ag-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .ag-body .evt{margin-top:0;font-size:12.5px;padding:7px 10px;border-radius:8px}
  .ag-body .fast-tag{font-size:10.5px}
  .ag-empty{color:var(--ink-dim);padding:26px 0;text-align:center}
  .legend{gap:10px;font-size:12px;margin-top:18px}

  /* ---- leaders ---- */
  .leader{padding:10px 0;gap:11px}
  .leader .n{font-size:19px;width:20px}
  .leader .who b{font-size:14px}
  .leader .val b{font-size:19px}

  /* ---- forms & buttons: 44px targets, no iOS zoom ---- */
  .btn{padding:13px 24px;min-height:46px;width:auto}
  input[type=text],input[type=password],input[type=date],select{font-size:16px;min-height:46px;padding:11px 14px}
  .field{margin:8px 0}
  .drop{padding:34px 18px;border-radius:14px}
  .stepper{gap:8px;margin:20px 0}
  .step{font-size:12px}

  /* ---- footer clears the tab bar ---- */
  footer{margin-top:36px;padding:26px 0 30px}
  footer .wrap{gap:14px}
  footer .right{margin-left:0;text-align:left}
}

/* very small phones */
@media(max-width:380px){
  .tabbar a{font-size:8px;letter-spacing:0}
  .tabbar svg{width:19px;height:19px}
  .count b{font-size:19px}
  .brand.m-only{font-size:15px}
  .m-portal{padding:9px 11px;font-size:11px}
}

/* landscape phones: shorter chrome */
@media(max-height:460px) and (orientation:landscape){
  .tabbar a{flex-direction:row;gap:6px;min-height:44px;font-size:10px}
  .tabbar svg{width:17px;height:17px}
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
}

/* pointer-less devices: no hover artefacts */
@media(hover:none){
  .tbl tbody tr:hover{background:none}
  .nav a:hover{color:var(--ink-dim);background:none}
}