/* Certified Buckets Gaming League (CBGL) - shared styles */
[hidden]{display:none !important} /* hidden always wins over display rules (empty states, ticker) */
/* Palette sampled from the CBGL logo (subway-style C B G L circles): blue + orange primary,
   green + yellow for small highlights, silver accents, near-black to blend with the logo. */
:root{
  --blue:#0B5CAD; --orange:#F07A22; --green:#4C9A4A; --yellow:#E9BC34; --silver:#BEC0C2; --black:#050505; --navy:#050505;
  --accent:#0B5CAD;            /* links, active controls (AA on light bg) */
  --accent-2:#F07A22;          /* decorative bars, highlights */
  --accent-text:#A84E0C;       /* orange used as TEXT on light bg (AA) */
  --accent-soft:rgba(11,92,173,.10); --orange-soft:rgba(240,122,34,.14);
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#eaecef; --text:#111318; --muted:#4d5562;
  --bg-overlay:rgba(243,244,246,.42); --title-glow:0 1px 14px rgba(243,244,246,.9);
  --border:#d7dbe0; --win:#2f7a2e; --loss:#c23434;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.08);
  --radius:14px; --ticker-h:48px;
}
@media (prefers-color-scheme:dark){
  :root{
    --accent:#5aa6f2; --accent-text:#F58A3A; --accent-soft:rgba(90,166,242,.14); --orange-soft:rgba(240,122,34,.16);
    --bg:#050505; --surface:#111113; --surface-2:#1b1c20; --text:#f2f3f5; --muted:#BEC0C2;
    --bg-overlay:rgba(5,5,5,.38); --title-glow:0 1px 16px rgba(5,5,5,.9);
    --border:#2a2b31; --win:#6cc46a; --loss:#ff7a7a;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-color:var(--bg);
  background-image:linear-gradient(var(--bg-overlay),var(--bg-overlay)),url("assets/cbgl-city-walk.jpg");
  background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;
  color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
body.has-ticker{padding-bottom:calc(var(--ticker-h) + 24px)}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.notice{background:#fff4d6;color:#5a4300;border-bottom:1px solid #f1d98c;font-size:.86rem;text-align:center;padding:7px 12px}
@media (prefers-color-scheme:dark){.notice{background:#3a2f0d;color:#ffe08a;border-color:#5a4810}}
.notice code{font-weight:700}
.notice .warn{display:block;margin-top:4px;text-align:left}

/* ---- Nav ---- */
.topnav{position:sticky;top:0;z-index:20;background:var(--black);color:#fff;border-bottom:3px solid var(--orange);box-shadow:0 3px 0 var(--blue)}
.topnav .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;padding-top:8px;padding-bottom:8px;scrollbar-width:none}
.topnav .wrap::-webkit-scrollbar{display:none}
.brand{flex:none;font-weight:900;letter-spacing:.06em;color:#fff;text-decoration:none;margin-right:10px;display:flex;align-items:center;gap:8px}
.brand img{height:34px;width:auto;display:block;border-radius:6px}
.brand .sw{display:inline-flex;gap:3px;margin-left:2px}
.brand .sw i{width:7px;height:7px;border-radius:50%}
.topnav a.nl{flex:none;text-decoration:none;color:var(--silver);font-weight:600;font-size:.9rem;padding:6px 12px;border-radius:999px}
.topnav a.nl:hover{color:#fff;background:rgba(255,255,255,.08)}
.topnav a.nl[aria-current="page"]{color:#000;background:var(--orange)}

/* ---- Hero / headings ---- */
.hero{position:relative;overflow:hidden;padding:44px 0 36px;background:transparent}
.hero .hero-in{display:flex;flex-direction:column;gap:18px}
@media (min-width:720px){.hero .hero-in{flex-direction:row;align-items:center;gap:32px}}
.logo-badge{flex:none;align-self:flex-start;background:#000;border-radius:24px;padding:14px;box-shadow:var(--shadow);border:1px solid #000}
.logo-badge img{display:block;width:clamp(150px,38vw,220px);height:auto;border-radius:12px}
@media (prefers-color-scheme:dark){.logo-badge{padding:0;box-shadow:none;background:transparent;border:0}}
.swatch{display:flex;gap:6px;margin-top:10px}
.swatch i{width:12px;height:12px;border-radius:50%}
.hero.small{padding:30px 0 18px}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
h1{font-size:clamp(1.9rem,6.5vw,3.4rem);line-height:1.05;margin:12px 0 8px;letter-spacing:-.02em;text-shadow:var(--title-glow)}
.hero.small h1{font-size:clamp(1.6rem,5vw,2.4rem)}
.hero p{color:var(--muted);max-width:620px;margin:0 0 16px;font-size:1.02rem;text-shadow:var(--title-glow)}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;min-width:100px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.3rem}
.stat span{color:var(--muted);font-size:.8rem}
section{padding:26px 0}
h2{font-size:1.4rem;margin:0 0 4px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:6px;height:22px;border-radius:3px;background:linear-gradient(var(--blue) 50%,var(--orange) 50%)}
.sub{color:var(--muted);margin:0 0 14px;font-size:.92rem;text-shadow:var(--title-glow)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:14px}
.empty{padding:16px;color:var(--muted)}
.prose{padding:20px;max-width:760px}
.prose p{margin:0 0 10px}

/* ---- Controls ---- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.toolbar label{font-weight:700;font-size:.85rem}
.controls{display:flex;flex-wrap:wrap;gap:10px;padding:12px;border-bottom:1px solid var(--border)}
.controls input,.controls select{flex:1 1 170px;width:auto;min-width:0}
input,select{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.season-select{font-weight:700;border:2px solid var(--accent);min-width:200px}
button.plain{margin:0;width:auto;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.pname{font-weight:700;color:var(--text)}
.pname:hover,.pname:focus-visible{color:var(--accent);text-decoration:underline}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--border)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:var(--surface);vertical-align:bottom}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.l,th.l{text-align:left}
.rank{color:var(--muted);width:2.2em}
.team{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.dot{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.badge{display:inline-block;font-weight:700;font-size:.78rem;padding:2px 8px;border-radius:999px}
.badge.W{color:var(--win);background:color-mix(in srgb,var(--win) 14%,transparent)}
.badge.L{color:var(--loss);background:color-mix(in srgb,var(--loss) 14%,transparent)}
.sortable th button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;font-weight:700;white-space:nowrap}
.sortable th button:hover{color:var(--text)}
.sortable th[aria-sort] button{color:var(--accent)}
.sortable th[aria-sort="ascending"] button::after{content:" ▲"}
.sortable th[aria-sort="descending"] button::after{content:" ▼"}
.sortable td.sorted{background:var(--accent-soft);font-weight:700}
.sortable .sticky{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;box-shadow:1px 0 0 var(--border)}
.sortable th.sticky{z-index:2}
.sortable tbody tr:hover td.sticky{background:var(--surface-2)}
.table-foot{padding:9px 14px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--border)}

/* ---- Record cards ---- */
.records{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.rcard{padding:14px 16px;position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c,var(--orange))}
.rcard .cat{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rcard .big{font-size:2.1rem;font-weight:800;line-height:1.1;color:var(--accent-text);font-variant-numeric:tabular-nums}
.rcard .who{display:flex;align-items:center;gap:8px;font-size:1rem;flex-wrap:wrap}
.rcard .meta{color:var(--muted);font-size:.82rem;margin-top:2px}
.rcard .also{color:var(--muted);font-size:.78rem;margin-top:6px;border-top:1px solid var(--border);padding-top:6px}

/* ---- Team cards ---- */
.teams{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.tcard{position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.tcard .top{display:flex;align-items:center;gap:12px;padding:16px 16px 8px}
.mono{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--c);font-size:.95rem;flex:none;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.tcard h3{margin:0;font-size:1.05rem}
.rec{color:var(--muted);font-size:.85rem}
.tcard table{font-size:.86rem}
.tcard th:first-child,.tcard td:first-child{text-align:left;padding-left:16px}
.tcard td:last-child,.tcard th:last-child{padding-right:16px}
.title-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:999px;
  color:var(--accent-text);background:var(--orange-soft);margin-left:6px;vertical-align:1px}

/* ---- Lists ---- */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.list li:last-child{border-bottom:0}
.date{flex:none;width:52px;text-align:center;background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:4px 0;line-height:1.15}
.date b{display:block;font-size:1.1rem}
.date small{font-size:.68rem;font-weight:700;text-transform:uppercase}
.season-links{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.slink{display:block;padding:18px;text-decoration:none;color:var(--text);position:relative;overflow:hidden}
.slink::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.slink:hover{border-color:var(--accent)}
.slink h3{margin:4px 0 6px;font-size:1.2rem;color:var(--accent)}
.slink p{margin:2px 0;color:var(--muted);font-size:.88rem}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.jump a{font-size:.85rem;font-weight:700;text-decoration:none;padding:5px 12px;border-radius:999px;background:var(--accent-soft)}

/* ---- Player profile modal ---- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6)}
.modal[hidden]{display:none}
@media (min-width:640px){.modal{align-items:center;padding:24px}}
.modal-card{width:100%;max-width:820px;max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:18px 18px 0 0;box-shadow:var(--shadow)}
@media (min-width:640px){.modal-card{border-radius:18px}}
.modal-card::before{content:"";display:block;height:6px;background:var(--c,var(--orange))}
.modal-head{display:flex;align-items:center;gap:14px;padding:18px 18px 8px}
.modal-head h3{margin:0;font-size:1.3rem;line-height:1.2}
.close{margin-left:auto;width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:1.1rem;cursor:pointer;flex:none}
.close:hover{background:var(--border)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 18px 4px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(8,1fr)}}
.tile{background:var(--surface-2);border-radius:10px;padding:8px 4px;text-align:center}
.tile b{display:block;font-size:1.1rem;font-variant-numeric:tabular-nums}
.tile span{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.modal h4{margin:16px 18px 8px;font-size:.95rem}
.modal .table-wrap{margin:0 10px 16px;border:1px solid var(--border);border-radius:12px}
.modal td:nth-child(-n+3),.modal th:nth-child(-n+3){text-align:left}
body.modal-open{overflow:hidden}
.modal .pm-s td:nth-child(3),.modal .pm-s th:nth-child(3){text-align:right}

/* ---- Bottom ticker (TV-style crawl; no network/broadcaster branding) ---- */
.ticker{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:stretch;min-height:var(--ticker-h);
  background:linear-gradient(180deg,#16181d,#000);color:#fff;border-top:3px solid var(--orange);
  box-shadow:0 -6px 20px rgba(0,0,0,.25);font-size:.92rem}
.ticker .tk-label{flex:none;display:flex;align-items:center;padding:0 14px;background:var(--orange);color:#000;
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;line-height:1.15;max-width:42vw;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);padding-right:22px}
.ticker .tk-view{flex:1;overflow:hidden;display:flex;align-items:center;min-width:0}
.ticker .tk-track{display:flex;width:max-content;animation:tk-crawl var(--tk-dur,60s) linear infinite;will-change:transform}
.ticker:hover .tk-track,.ticker:focus-within .tk-track{animation-play-state:paused}
.ticker .tk-group{display:flex;flex:none}
.ticker .tk-item{flex:none;white-space:nowrap;padding:0 22px;border-right:1px solid rgba(190,192,194,.35)}
.ticker .tk-cat{color:#ff9a4d;font-weight:800;text-transform:uppercase;font-size:.76rem;letter-spacing:.06em;margin-right:8px}
.ticker .tk-val{font-weight:900;font-size:1.05rem;margin-right:6px}
.ticker .tk-meta{color:var(--silver)}
@keyframes tk-crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  body{background-attachment:scroll}
  .ticker .tk-track{animation:none;width:auto;flex-wrap:wrap}
  .ticker .tk-group{flex-wrap:wrap}
  .ticker .tk-group[aria-hidden="true"]{display:none}
  .ticker .tk-item{white-space:normal;padding:6px 14px}
}

footer{border-top:1px solid var(--border);padding:22px 0 30px;color:var(--muted);font-size:.85rem;text-align:center;margin-top:20px}
@media (max-width:720px){body{background-attachment:scroll}}
@media (max-width:520px){th,td{padding:8px 8px}.hero{padding:30px 0 24px}}
.hl-green{color:var(--green)} .hl-yellow{color:var(--yellow)}
.chip{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.eyebrow:empty{display:none}
@media (max-width:480px){.topnav a.nl{padding:6px 8px;font-size:.84rem}.topnav .wrap{gap:2px}.brand{margin-right:4px;gap:6px;font-size:.9rem}.brand img{height:28px}}
.tcard td.slot,.tcard th.slot{width:2.2em;color:var(--orange);font-weight:700;text-align:center}
.tcard td.slot+td,.tcard th.slot+th{text-align:left}

/* ---- Notice links ---- */
.notice a{color:inherit;font-weight:700;text-decoration:underline}
.ps-note{margin:0 0 10px;padding:0 12px;font-size:.85rem}
.ps-note a{color:inherit;text-decoration:underline}

/* ---- Season: about the league ---- */
.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.about-card h3{margin-top:0}
.about-card.info .facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0}
.about-card.info dt{font-weight:700;opacity:.75}
.about-card.info dd{margin:0}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}

/* ---- Season: playoff bracket ---- */
.champ-card{display:flex;align-items:center;gap:16px;border-left:6px solid var(--c, var(--orange));margin-bottom:16px}
.champ-card h3{margin:2px 0;font-size:1.5rem}
.champ-card .trophy{font-size:2.6rem;line-height:1}
.bracket-wrap{overflow-x:auto}
.bracket{display:grid;grid-template-columns:repeat(var(--rounds,4),minmax(190px,1fr));gap:22px;min-width:calc(var(--rounds,4) * 215px)}
.bk-round{display:flex;flex-direction:column}
.bk-rname{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:var(--orange, #f58426);text-align:center}
.bk-ms{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:12px}
.bk-m{position:relative;border:1px solid rgba(127,127,127,.35);border-radius:10px;overflow:hidden;background:rgba(127,127,127,.06)}
.bk-round:not(:last-child) .bk-m::after{content:"";position:absolute;right:-23px;top:50%;width:22px;border-top:2px solid rgba(127,127,127,.45)}
.bk-team{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:6px;padding:6px 10px;font-size:.9rem}
.bk-team + .bk-team{border-top:1px solid rgba(127,127,127,.25)}
.bk-team.win{font-weight:700;background:linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent);box-shadow:inset 4px 0 0 var(--c)}
.bk-team.lose{opacity:.62}
.bk-m.bk-pending{border-style:dashed}
.bk-m.bk-pending .bk-meta{font-style:italic}
.champ-card.no-champ h3{opacity:.85}
.bk-seed{font-size:.75rem;opacity:.7;text-align:center}
.bk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-score{font-variant-numeric:tabular-nums;font-weight:800;min-width:1.4em;text-align:right}
.bk-meta{font-size:.72rem;opacity:.7;padding:3px 10px 5px;border-top:1px dashed rgba(127,127,127,.2)}
.bk-final{border:2px solid var(--orange, #f58426);box-shadow:0 0 0 3px rgba(245,132,38,.15)}
.bk-note{margin:12px 0 0}
@media (max-width:760px){
  .bracket{grid-template-columns:1fr;min-width:0;gap:18px}
  .bk-rname{text-align:left}
  .bk-round:not(:last-child) .bk-m::after{display:none}
  .bk-ms{justify-content:flex-start}
}

/* Team cards: long gamertags wrap instead of pushing GP/PPG off the card */
.tcard table{table-layout:fixed;width:100%}
.tcard th:nth-child(3),.tcard td:nth-child(3){width:2.8em}
.tcard th:nth-child(4),.tcard td:nth-child(4){width:3.6em}
.tcard td .pname{overflow-wrap:anywhere;text-align:left;white-space:normal}
.grid.teams > .tcard{min-width:0}
.tcard td:nth-child(2){white-space:normal;overflow-wrap:anywhere}

.about-card h4{margin:14px 0 4px}
.about-list{margin:4px 0 8px;padding-left:20px;columns:2;column-gap:20px}
@media (max-width:760px){.about-list{columns:1}}
.bk-sparse .bk-ms{justify-content:flex-start;padding-top:28px}