:root{
  --bg:#0a1128;
  --surface:#131826;
  --surface-2:#1b2233;
  --surface-3:#252e44;
  --border:#2b3450;
  --text:#f5f7fb;
  --text-dim:#93a0ba;
  --text-faint:#7c88a5;
  --gold:#f2b544;
  --gold-2:#ffd77a;
  --teal:#00e0c0;
  --teal-2:#5cffe4;
  --blue:#2f97ff;
  --red:#ff4d6d;
  --purple:#b06bff;
  --green:#22e88f;
  --orange:#ff8c42;
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 8% -6%, rgba(0,224,192,.14) 0%, transparent 32%),
    radial-gradient(circle at 96% 6%, rgba(242,181,68,.10) 0%, transparent 30%),
    radial-gradient(circle at 60% 90%, rgba(176,107,255,.09) 0%, transparent 40%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:100% 100%;
  color:var(--text);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
a.link{color:var(--teal);text-decoration:underline;}

/* ---- Topbar ---- */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 32px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:rgba(7,10,18,0.85);backdrop-filter:blur(10px);z-index:10;
  gap:20px;
}
.topbar .logo{grid-column:2;justify-self:center;}
.topbar .logo img{height:112px;max-width:100%;width:auto;display:block;}
.topbar-right{grid-column:3;display:flex;gap:14px;align-items:center;font-size:15.5px;color:var(--text-dim);flex-wrap:wrap;justify-content:flex-end;}
.topbar-right a:hover{color:var(--text);}
.topbar-right .btn{white-space:nowrap;}
.dashboard-tagline{color:var(--gold-2);font-weight:800;font-style:italic;font-size:16px;margin:2px 0 8px;}
.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal-2),var(--teal));display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:#04231d;flex-shrink:0;}
.avatar.sm{width:32px;height:32px;font-size:12px;background:var(--surface-3);color:var(--text);}
.avatar-menu{position:relative;}
.avatar-menu > .avatar{cursor:pointer;border:none;padding:0;font-family:inherit;transition:box-shadow .15s ease;}
.avatar-menu > .avatar:hover,.avatar-menu > .avatar[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(0,224,192,.3);}
.avatar-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:190px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65);padding:6px;z-index:80;
}
.avatar-dropdown a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;}
.avatar-dropdown a:hover{background:var(--surface-2);color:var(--text);}

/* Per-alias "Actions" menu on the game hub (Leave League / Delete Alias) —
   same popup pattern as the avatar dropdown above, but built from <button>s
   inside <form>s (each menu item submits its own action) rather than links. */
.actions-dd{position:relative;flex:0 0 auto;display:flex;}
.actions-dd-toggle[aria-expanded="true"]{border-color:var(--accent, var(--teal));}
.actions-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:210px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65);padding:6px;z-index:30;
}
.actions-dropdown form{margin:0;}
.actions-dropdown .dd-item{
  display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;
  font-size:14px;font-weight:700;background:none;border:none;cursor:pointer;
  color:var(--text);font-family:inherit;white-space:nowrap;text-decoration:none;
  box-sizing:border-box;
}
.actions-dropdown .dd-item:hover{background:var(--surface-2);}
.actions-dropdown .dd-item.danger{color:var(--red);}
.actions-dropdown .dd-item.danger:hover{background:rgba(255,77,109,.12);}

/* Member-picker modal (Manager Actions → Kick Someone Out / Delete an
   Alias) — a centered overlay listing every member so a manager picks one
   before confirming, rather than one button per member sitting inline in
   the dropdown itself. */
.modal-overlay{
  position:fixed;inset:0;background:rgba(5,8,16,.72);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
}
/* The class rule above sets display:flex unconditionally, which otherwise
   beats the browser's default "hidden attribute means display:none" rule
   (same specificity, author stylesheet wins) — without this override the
   overlay shows as a permanent empty box the moment the page loads, before
   any button is ever clicked. Every other dropdown/menu in this codebase
   avoids the problem by never setting `display` on its own base class. */
.modal-overlay[hidden]{display:none;}
.modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;max-width:420px;width:100%;max-height:80vh;overflow-y:auto;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
.modal-box h3{color:var(--text);}

.admin-nav-menu{position:relative;}
.admin-nav-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65);padding:6px;z-index:80;
}
.admin-nav-dropdown a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:700;color:var(--text-dim);text-decoration:none;white-space:nowrap;}
.admin-nav-dropdown a:hover{background:var(--surface-2);color:var(--text);}
.admin-nav-dropdown a.active{color:var(--teal);background:var(--surface-2);}

/* Three colored groups (NFL / College / Other), each its own column with a
   heading — same --accent/--accent-glow custom-property convention as the
   dashboard's game cards (.goty/.pickem/etc. below), so a card automatically
   picks up its group's color just by living inside that group's <div>,
   without repeating the color per card. */
.admin-power-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:960px;}
@media (max-width:860px){.admin-power-columns{grid-template-columns:1fr;max-width:420px;}}
.admin-power-group{display:flex;flex-direction:column;gap:12px;}
.admin-power-group-title{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent, var(--text-dim));margin-bottom:2px;padding-bottom:10px;
  border-bottom:2px solid var(--accent, var(--border));
}
.admin-power-group.nfl-group{--accent:var(--blue);--accent-glow:rgba(47,151,255,.4);}
.admin-power-group.college-group{--accent:var(--orange);--accent-glow:rgba(255,140,66,.4);}
.admin-power-group.other-group{--accent:var(--teal);--accent-glow:rgba(0,224,192,.4);}
.admin-power-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;font-size:14.5px;font-weight:800;color:var(--accent, var(--teal-2));
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.admin-power-card:hover{transform:translateY(-3px);border-color:var(--accent, var(--teal));box-shadow:0 12px 32px -12px var(--accent-glow, rgba(0,224,192,.4));}

th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
th.sortable:hover{color:var(--text);}
th.sortable::after{content:'';display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.3;}
th.sortable.sort-asc::after{border-bottom:5px solid currentColor;opacity:1;}
th.sortable.sort-desc::after{border-top:5px solid currentColor;opacity:1;}
.input-inline{
  padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:12.5px;
}
.input-inline:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,224,192,.18);}
.god-row td{background:rgba(255,215,122,.28);}
.god-row:hover td{background:rgba(255,215,122,.4);}
.god-row td:first-child{color:var(--gold-2);font-weight:800;}

.container{max-width:1080px;margin:0 auto;padding:36px 32px 0;}
.container.narrow{max-width:480px;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:10px;border:none;font-weight:800;font-size:14px;
  cursor:pointer;font-family:inherit;transition:transform .12s ease, box-shadow .12s ease;
  background:linear-gradient(135deg,var(--teal-2),var(--teal));color:#04231d;
  text-align:left;line-height:1.3;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,224,192,.35);}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#2a1a04;}
.btn.gold:hover{box-shadow:0 6px 24px rgba(242,181,68,.35);}
.btn.ghost{background:var(--surface-3);color:var(--text);box-shadow:none;}
.btn.ghost:hover{background:var(--surface-2);box-shadow:none;transform:none;}
.btn.block{width:100%;}
.btn.small{padding:8px 14px;font-size:12.5px;}
.btn.large{padding:16px 28px;font-size:16px;}
.btn.danger{background:var(--red);color:#2a0508;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* ---- Forms ---- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,224,192,.18);
}
.field .hint{font-size:12px;color:var(--text-faint);margin-top:4px;}
.field-row{display:flex;gap:14px;}
.field-row .field{flex:1;}
.field-row .state-field{max-width:90px;}
.field-row .zip-field{max-width:120px;}

/* ---- Cards ---- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.login-card{width:380px;max-width:100%;margin:60px auto 0;padding:36px 32px;}
.login-card img.mark{height:76px;width:auto;display:block;margin:0 auto 18px;filter:drop-shadow(0 0 22px rgba(242,181,68,.35));}
.login-card h2{margin:0 0 6px;text-align:center;font-size:22px;}
.login-card p.sub{margin:0 0 28px;text-align:center;color:var(--text-dim);font-size:13px;}
.fine{text-align:center;font-size:12px;color:var(--text-faint);margin-top:18px;}

/* ---- Game cards (dashboard) ---- */
.section-title{font-size:15.5px;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:36px;}
@media (max-width:640px){.game-grid{grid-template-columns:1fr;}}
.game-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:22px;background:#1b2444;border:1px solid var(--border);transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;}
.game-card:hover{transform:translateY(-3px);border-color:var(--accent, var(--teal));box-shadow:0 12px 32px -12px var(--accent-glow, rgba(0,224,192,.4));}
/* The card is a plain <div> now (see dashboard.php), click-through via a
   small delegated-click script rather than a real <a>, because an alias row
   inside it needs to be its own separate, real link — cursor:pointer has to
   be restated explicitly since a div doesn't get it for free the way an <a>
   did. */
.game-card.dash-card{cursor:pointer;}
.league-row:hover{transform:translateY(-3px);border-color:var(--accent, var(--teal));box-shadow:0 12px 32px -12px var(--accent-glow, rgba(0,224,192,.4));cursor:pointer;}
.game-card .accent-bar{position:absolute;top:0;left:0;right:0;height:4px;}
.game-card .g-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:18px;}
/* Same glowing rounded-badge look as the game hub's hero box, scaled down for the dashboard grid card. */
.game-card .hero-badge{width:50px;height:50px;border-radius:14px;font-size:23px;margin-bottom:16px;}
.game-card .hero-badge::after{inset:-20px;}
.game-card h3{margin:0 0 4px;font-size:18px;}
.game-card p{margin:0 0 16px;color:var(--text-dim);font-size:14.5px;line-height:1.5;}
/* Wraps one alias/league row's .stat-row (+ its .rank-badge, if any) — an
   <a> straight to that alias's standings page when it has a real league to
   show, a plain <div> otherwise (a leagueless alias has nowhere of its own
   to go yet, so it just rides the whole-card click-through). Hovering the
   <a> variant lights up with the same accent color the whole card's own
   hover border uses, so an individual row visibly calls out that IT is
   what a click will follow, distinct from the rest of the card. Negative
   side margins let the highlight run to the card's edges without changing
   the row's own text alignment. */
.alias-row-group{display:block;color:inherit;text-decoration:none;border-radius:8px;margin:0 -10px;padding:0 10px;transition:background .15s ease, box-shadow .15s ease;}
a.alias-row-group{cursor:pointer;}
a.alias-row-group:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--accent, var(--teal));}
.alias-row-group + .alias-row-group{margin-top:10px;}
.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--text-dim);border-top:1px solid var(--border);padding-top:12px;}
.stat-row b{color:var(--text);font-size:20px;font-weight:800;}
.rank-badge{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:19px;font-weight:800;color:var(--text-dim);}
.rank-badge.top3{color:var(--gold-2);}

.goty{--accent:var(--gold);--accent-glow:rgba(242,181,68,.4);} .goty .accent-bar{background:linear-gradient(90deg,var(--gold),var(--gold-2));} .goty .g-icon{background:rgba(242,181,68,.15);color:var(--gold);}
.pickem{--accent:var(--blue);--accent-glow:rgba(47,151,255,.4);} .pickem .accent-bar{background:linear-gradient(90deg,var(--blue),#7cc1ff);} .pickem .g-icon{background:rgba(47,151,255,.15);color:var(--blue);}
.survivor{--accent:var(--red);--accent-glow:rgba(255,77,109,.4);} .survivor .accent-bar{background:linear-gradient(90deg,var(--red),#ff8fa3);} .survivor .g-icon{background:rgba(255,77,109,.15);color:var(--red);}
.chaos{--accent:var(--purple);--accent-glow:rgba(176,107,255,.4);} .chaos .accent-bar{background:linear-gradient(90deg,var(--purple),#d6b3ff);} .chaos .g-icon{background:rgba(176,107,255,.15);color:var(--purple);}
.overunder{--accent:var(--green);--accent-glow:rgba(34,232,143,.4);} .overunder .accent-bar{background:linear-gradient(90deg,var(--green),#8ff5cb);} .overunder .g-icon{background:rgba(34,232,143,.15);color:var(--green);}
.collegegambler{--accent:var(--orange);--accent-glow:rgba(255,140,66,.4);} .collegegambler .accent-bar{background:linear-gradient(90deg,var(--orange),#ffb37a);} .collegegambler .g-icon{background:rgba(255,140,66,.15);color:var(--orange);}

/* Hero box glow badge (per-accent fill/border/pill colors) */
.goty .hero-badge{background:radial-gradient(circle at 35% 30%, rgba(242,181,68,.35), rgba(242,181,68,.08) 70%);border-color:rgba(242,181,68,.35);}
.goty .hero-badge::after{background:radial-gradient(circle, rgba(242,181,68,.25), transparent 70%);}
.goty.hero-box .pill{background:rgba(242,181,68,.16);color:var(--gold-2);}
.pickem .hero-badge{background:radial-gradient(circle at 35% 30%, rgba(47,151,255,.35), rgba(47,151,255,.08) 70%);border-color:rgba(47,151,255,.35);}
.pickem .hero-badge::after{background:radial-gradient(circle, rgba(47,151,255,.25), transparent 70%);}
.pickem.hero-box .pill{background:rgba(47,151,255,.16);color:var(--blue);}
.survivor .hero-badge{background:radial-gradient(circle at 35% 30%, rgba(255,77,109,.35), rgba(255,77,109,.08) 70%);border-color:rgba(255,77,109,.35);}
.survivor .hero-badge::after{background:radial-gradient(circle, rgba(255,77,109,.25), transparent 70%);}
.survivor.hero-box .pill{background:rgba(255,77,109,.16);color:var(--red);}
.chaos .hero-badge{background:radial-gradient(circle at 35% 30%, rgba(176,107,255,.35), rgba(176,107,255,.08) 70%);border-color:rgba(176,107,255,.35);}
.chaos .hero-badge::after{background:radial-gradient(circle, rgba(176,107,255,.25), transparent 70%);}
.chaos.hero-box .pill{background:rgba(176,107,255,.16);color:var(--purple);}
.overunder .hero-badge{background:radial-gradient(circle at 35% 30%, rgba(34,232,143,.35), rgba(34,232,143,.08) 70%);border-color:rgba(34,232,143,.35);}
.overunder .hero-badge::after{background:radial-gradient(circle, rgba(34,232,143,.25), transparent 70%);}
.overunder.hero-box .pill{background:rgba(34,232,143,.16);color:var(--green);}
.collegegambler .hero-badge{background:radial-gradient(circle at 35% 30%, rgba(255,140,66,.35), rgba(255,140,66,.08) 70%);border-color:rgba(255,140,66,.35);}
.collegegambler .hero-badge::after{background:radial-gradient(circle, rgba(255,140,66,.25), transparent 70%);}
.collegegambler.hero-box .pill{background:rgba(255,140,66,.16);color:var(--orange);}

/* ---- Hero box (game hub top box) ---- */
.hero-box{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px;margin-bottom:20px;}
.hero-box-left{display:flex;align-items:center;gap:20px;}
.hero-box-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.hero-badge{position:relative;width:72px;height:72px;border-radius:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:36px;border:1px solid transparent;}
.hero-badge::after{content:"";position:absolute;inset:-36px;border-radius:50%;z-index:-1;}
.hero-box h2{font-family:'Space Grotesk',sans-serif;font-size:30px;margin:0 0 6px;line-height:1.08;}
.hero-box p{font-size:15.5px;color:var(--text-dim);margin:0;max-width:480px;line-height:1.4;white-space:pre-line;}
.hero-box .pill{font-weight:800;flex-shrink:0;}
@media (max-width:560px){.hero-box h2{font-size:24px;} .hero-badge{width:60px;height:60px;font-size:28px;}}

/* ---- League header (standings page) ---- */
.league-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:20px;}
.league-header h2{margin:0 0 4px;font-size:20px;}
/* Blue bullet separators joining the Make Picks/Bets/Points pages' header
   data line (alias · league · place · total · weekly) into one line. */
.stat-sep{color:var(--blue);font-weight:800;margin:0 3px;}
.league-header .meta{color:var(--text-dim);font-size:14px;}
/* Action buttons in the league header (Make Picks/Bets, Manager Actions,
   Personal Records, Back) — now a mix of one- and two-line labels (see the
   two-line-label buttons above), so every button here needs to stretch to
   match whichever sibling is tallest rather than sizing to its own single
   line of text. Default flex align-items:stretch on this row already
   stretches each DIRECT child (a plain <button>, or the <a>/.actions-dd
   wrapper around one) to the row's full height; the nested rules below
   just carry that same stretch one level deeper, into the actual <button>
   each wrapper holds, so its content still centers/left-aligns correctly
   inside the now-taller box instead of sitting pinned to the top.  */
.league-header-actions{display:flex;gap:10px;flex-wrap:wrap;}
.league-header-actions>a{display:flex;}
.pill{background:rgba(0,224,192,.15);color:var(--teal-2);font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;}

/* ---- Personal Records (standings page, toggled section) ---- */
.personal-records-grid{display:flex;flex-wrap:wrap;gap:14px;}
.pr-stat{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 18px;min-width:170px;flex:1 1 170px;
}
.pr-stat-label{font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.pr-stat-value{font-size:20px;font-weight:800;}
.pr-stat-value.pr-stat-empty{font-size:14px;font-weight:600;color:var(--text-faint);}
.pr-stat-context{font-size:12px;color:var(--text-dim);margin-top:3px;}

/* ---- Track Buy-Ins page ---- */
.buyin-summary{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px;}
.buyin-stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;min-width:140px;flex:1 1 140px;
}
.buyin-stat-label{font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.buyin-stat-value{font-size:22px;font-weight:800;}
.buyin-stat-value.received{color:var(--green);}
.buyin-stat-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}
.buyin-table input[type=date],.buyin-table input[type=text],.buyin-table select{
  padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:13.5px;
}
.buyin-table input[type=text]{width:100%;min-width:160px;}
.buyin-table select{min-width:112px;}
.buyin-table td{vertical-align:middle;}
.paid-toggle{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;white-space:nowrap;}
.paid-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);cursor:pointer;}

/* "Also mark them paid elsewhere?" cross-league offer, shown right after
   Save Changes when a newly-paid player is also an unpaid member of
   another league this same manager runs this season. */
.buyin-propagate{
  background:var(--surface);border:1px solid var(--teal);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:22px;
}
.buyin-propagate h3{margin:0 0 6px;font-size:16px;}
.buyin-propagate p{margin:0 0 14px;color:var(--text-dim);font-size:13.5px;}
.buyin-propagate-group{margin-bottom:14px;}
.buyin-propagate-group:last-of-type{margin-bottom:0;}
.buyin-propagate-source{font-weight:700;margin-bottom:6px;font-size:14px;}
.buyin-propagate-target{display:flex;align-items:center;gap:8px;padding:5px 0 5px 4px;cursor:pointer;font-size:14px;}
.buyin-propagate-target input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;}
@media (max-width:600px){
  .buyin-stat{min-width:calc(50% - 7px);flex:1 1 calc(50% - 7px);}
  .buyin-table input[type=text]{min-width:120px;}
}

/* ---- Table ---- */
table{width:100%;border-collapse:collapse;background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px -16px rgba(0,0,0,.6);}
thead th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);padding:14px 20px;background:var(--surface-3);border-bottom:1px solid var(--border);}
tbody td{padding:14px 20px;font-size:15px;border-bottom:1px solid var(--border);}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .15s ease;}
tbody tr:hover td{background:rgba(255,255,255,.02);}
.rank{font-weight:800;width:20px;display:inline-block;}
.rank-1,.rank-2,.rank-3{font-size:17px;}
tr.rank-row-gold td{background:rgba(242,181,68,.10);}
tr.rank-row-gold td:first-child{box-shadow:inset 3px 0 0 var(--gold-2);}
tr.rank-row-silver td{background:rgba(201,208,220,.09);}
tr.rank-row-silver td:first-child{box-shadow:inset 3px 0 0 #c9d0dc;}
tr.rank-row-bronze td{background:rgba(205,127,50,.11);}
tr.rank-row-bronze td:first-child{box-shadow:inset 3px 0 0 #cd7f32;}
tr.rank-row-alt td{background:rgba(255,255,255,.025);}
tr.you-row td{background:rgba(0,224,192,.16);}
tr.you-row td:first-child{box-shadow:inset 3px 0 0 var(--teal-2);}
tr.you-row:hover td{background:rgba(0,224,192,.22);}
.player-cell{display:flex;align-items:center;gap:10px;}
.you{color:var(--teal-2);font-weight:800;}
.num{font-variant-numeric:tabular-nums;font-weight:700;}
.positive{color:var(--green);}
.negative{color:var(--red);}
/* Fixed-green "this week" stat on the Pickem/Chaos Make Picks pages —
   unlike GOTY's bankroll delta (.positive/.negative, conditional on sign),
   a record or points-scored total has no natural "down" direction, so this
   is always green rather than switching color. */
.weekly-stat{color:var(--green);font-weight:700;}

/* ---- Pick rows ---- */
.picks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px;}
.game-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .15s ease;
}
/* Admin "Schedule & Scores" edit row — one game per line, deliberately
   tighter/narrower than the shared .game-row spacing (used elsewhere by
   the picks pages) so the whole row, Save button included, fits on one
   line at normal admin-page widths instead of wrapping. Scoped to this
   modifier class rather than changing .game-row itself so the picks
   pages aren't affected. Falls back to a horizontal scrollbar on narrow
   screens rather than wrapping, since wrapping is what pushed Save onto
   its own line in the first place. */
.game-row.schedule-edit-row{
  gap:8px;padding:10px 14px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
}
.schedule-edit-row .gr-matchup{flex:0 0 auto;width:76px;font-weight:700;font-size:13px;white-space:nowrap;}
.schedule-edit-row .gr-field{
  flex:0 0 auto;padding:6px 8px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:12.5px;
}
.schedule-edit-row .gr-kickoff{width:202px;}
.schedule-edit-row .gr-favored{width:87px;}
.schedule-edit-row .gr-num{width:66px;}
.schedule-edit-row .gr-score{width:54px;}
.schedule-edit-row .gr-status{width:111px;}
.schedule-edit-row .gr-save{flex:0 0 auto;}
@media (max-width:900px){
  /* Below this width the row scrolls horizontally instead of wrapping —
     see the overflow-x:auto above. */
  .schedule-edit-row{padding-bottom:14px;}
}
.matchup{font-weight:700;font-size:14px;}
.matchup .spread{color:var(--gold-2);font-weight:800;font-size:13.5px;margin-left:8px;}
.matchup .kickoff-time{display:block;color:var(--text-dim);font-weight:600;font-size:12px;margin-top:3px;}
.matchup .full-team-names{display:block;color:var(--text-dim);font-weight:600;font-size:12px;margin-top:3px;}
.matchup .live-score{display:block;font-weight:800;font-size:13.5px;margin-top:4px;color:var(--green);}
.matchup .live-score b{font-weight:800;}
.matchup .live-score.final{color:var(--text-dim);font-weight:700;}
.matchup .live-score.final b{font-weight:700;}
.badge-locked{
  display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  background:rgba(139,147,168,.14);color:var(--text-dim);
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.two-col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;align-items:start;}
/* GOTY's row (two team buttons + bet box + up/down/clear group) is the
   tightest-packed row in the app, and the crunch isn't really a "mobile
   vs. desktop" thing — it's however wide one .picks-grid COLUMN happens to
   be, which can get just as narrow at a 2-column tablet/half-window width
   as it can on a phone (the grid's auto-fit columns bottom out at 360px
   regardless of the overall viewport). A width fix scoped to a phone-only
   media query kept getting outgrown by whatever width band it didn't
   cover, so this is unconditional instead — a dedicated, slightly wider
   column-minimum for GOTY specifically (its rows need more room than
   Chaos/Pickem/Survivor's simpler ones do), so a GOTY column is never
   handed less width than the row actually needs in the first place. */
.goty-picks{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))!important;}
/* College Gambler's picks grid: the team-pick buttons + bet box sit BELOW
   the matchup/timestamp instead of beside it (unlike GOTY, which this used
   to share a class with), so each box only needs to be as wide as one row
   of buttons, not that row PLUS the matchup text next to it. That's what
   lets the .container's ~1016px content width (see .container above) fit
   3 of these per row instead of GOTY's 2 — at this 300px minimum, 3 columns
   is exactly what fits (4 would need 245px each, under the minimum), so no
   explicit column-count cap is needed on top of the minmax. */
.college-picks{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;}
/* .game-row's own gap:16px (its flex gap) already becomes the vertical gap
   between the matchup block and the pick-options block once flex-direction
   is column, so no extra margin is added here on top of it. */
.college-picks .game-row{flex-direction:column;align-items:stretch;}
.pick-options{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.goty-picks .pick-options{gap:6px;}
.team-btn{
  width:56px;padding:9px 0;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .12s ease;
}
/* 50px, not .team-btn's default 56px, specifically in GOTY's row — same
   "give every row a real margin, not a to-the-pixel fit" reasoning as the
   grid column width above. Chaos/Pickem/Survivor's team buttons are
   untouched. */
.goty-picks .team-btn{width:50px;}
.team-btn:hover{border-color:var(--teal);background:rgba(0,224,192,.14);color:var(--teal-2);box-shadow:0 0 14px rgba(0,224,192,.3);}
.team-btn.selected{background:linear-gradient(135deg,var(--teal-2),var(--teal));color:#04231d;border-color:var(--teal);box-shadow:0 0 16px rgba(0,224,192,.35);}
input:disabled + .team-btn:hover{border-color:var(--border);background:var(--surface-2);color:var(--text);box-shadow:none;}
.conf-select{
  width:63px;height:35px;box-sizing:border-box;padding:0 8px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-weight:700;font-size:13px;text-align:center;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.conf-select::placeholder{color:var(--text-dim);}
.conf-select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,224,192,.18);}
.conf-select:disabled{opacity:.6;}
/* Gambler of the Year's bet-amount box specifically (shares .conf-select's
   size/shape with Confidence Chaos's confidence-value box, but only GOTY's
   wager amount gets the bold/gold treatment — kept as a separate class
   rather than changing .conf-select itself so Chaos is untouched). Height
   is restated explicitly here (35px = .team-btn's own rendered height, the
   NE/SEA-style team buttons next to it) rather than left as an incidental
   side effect of sharing .conf-select, so it stays pinned to the team
   buttons even if Chaos's confidence box is ever resized independently. */
.wager-input{height:35px;color:var(--gold-2);font-weight:800;border-color:var(--gold-2);}
.wager-input::placeholder{color:var(--gold-2);opacity:.55;}
.wager-input:focus{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(255,215,122,.25);}
/* 56px, not .conf-select's default 63px — same margin-not-a-to-the-pixel-fit
   reasoning as the grid column width and .team-btn above. */
.goty-picks .wager-input{width:56px;}
/* Native number-input spinner arrows are hidden in favor of the standalone
   .wager-step-btn buttons below — the browser's own tiny built-in arrows
   (and an earlier attempt at small custom arrows overlaid inside the box)
   were both too small to reliably tap on mobile, so the up/down controls
   are now full-size buttons sitting in the row itself, outside the box,
   next to the × clear button, same tap-target size as everything else in
   the row. */
.wager-input::-webkit-outer-spin-button,
.wager-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.wager-input[type=number]{-moz-appearance:textfield;}
/* Groups the up/down buttons and the × clear button (when it's showing) into
   one flex item so they wrap onto a new line together whenever they don't
   fit, rather than the row splitting mid-group and leaving the clear
   button stranded alone on its own line. Gap is tighter (2px) than
   .pick-options' own gap between the team buttons / bet box / this group,
   specifically so that once a bet is in and the × button joins the two
   arrows, the three of them still fit on the same line as the team
   buttons and bet box at a normal column width instead of wrapping. */
.wager-controls{display:inline-flex;gap:2px;align-items:center;flex-shrink:0;}
/* 31px, not the row's usual 35px tap-target size — same margin-not-a-
   to-the-pixel-fit reasoning as the grid column width, .team-btn, and
   .wager-input above; height stays 35px so these still line up with the
   team buttons and bet box next to them. */
.wager-controls .wager-step-btn,.wager-controls .clear-bet-btn{width:31px;}
.wager-step-btn{
  width:35px;height:35px;padding:0;border-radius:10px;flex-shrink:0;
  border:1px solid var(--gold-2);background:var(--surface-2);color:var(--gold-2);
  font-family:inherit;font-size:13px;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .12s ease;
}
.wager-step-btn:hover{background:rgba(255,215,122,.16);box-shadow:0 0 10px rgba(255,215,122,.25);}
.wager-step-btn:disabled{opacity:.4;cursor:default;box-shadow:none;background:var(--surface-2);}
/* 35px to match .team-btn / .conf-select / .wager-input in the same pick
   row (was 38px — 3px taller than everything else it sits next to once a
   pick has been saved, which is what made the wager/confidence box beside
   it look like it "shrank" when a bet or pick went in: the box itself
   never changed size, its now-taller neighbor just made it look smaller
   by comparison). Shared by goty/chaos/pickem picks pages. */
.btn.clear-bet-btn{
  width:35px;height:35px;padding:0;border-radius:10px;font-size:17px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#fff;border:1px solid var(--red);background:var(--red);box-shadow:none;
}
.btn.clear-bet-btn:hover{background:#e0324f;box-shadow:none;transform:none;}
.btn.clear-bet-btn:disabled{opacity:.6;}

/* ---- Survivor Squad: team-usage board + weekly results strip ---- */
.helmet-board{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:760px){.helmet-board{grid-template-columns:1fr;}}
.helmet-conf{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0 20px 20px;overflow:hidden;}
.helmet-conf-label{
  margin:0 -20px 14px;padding:12px 20px;font-size:13px;font-weight:800;color:#fff;
  text-transform:uppercase;letter-spacing:.08em;
}
.helmet-conf.afc{background:rgba(255,77,109,.16);}
.helmet-conf.nfc{background:rgba(47,151,255,.16);}
.helmet-conf.afc .helmet-conf-label{background:var(--red);}
.helmet-conf.nfc .helmet-conf-label{background:var(--blue);}
.helmet-div-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--border);}
.helmet-div-row:first-of-type{border-top:none;}
.helmet-div-label{width:52px;flex:none;font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;}
.helmet-div-teams{display:flex;gap:8px;flex-wrap:wrap;flex:1;}
.helmet-chip{
  min-width:62px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
  text-align:center;line-height:1.25;
}
.helmet-chip .helmet-abbr{display:block;font-weight:800;font-size:13px;letter-spacing:.02em;}
.helmet-chip .helmet-meta{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:2px;opacity:.85;}
.helmet-chip.available{background:var(--surface-3);border-color:#3d4a70;opacity:.9;}
.helmet-chip.used-win{background:linear-gradient(135deg,#2eebb0,#16c975);border-color:#22e88f;color:#04231d;box-shadow:0 0 12px rgba(34,232,143,.35);}
.helmet-chip.used-loss{background:linear-gradient(135deg,#ff6b86,#e0324f);border-color:#ff4d6d;color:#fff;box-shadow:0 0 12px rgba(255,77,109,.35);}
.helmet-chip.used-push{background:rgba(242,181,68,.14);border-color:rgba(242,181,68,.45);color:var(--gold-2);}
.helmet-chip.used-pending{background:linear-gradient(135deg,#ffd77a,#f2b544);border-color:#f2b544;color:#2a1a04;box-shadow:0 0 12px rgba(242,181,68,.35);}

.week-strip th, .week-strip td{padding:10px 12px;text-align:center;font-size:12.5px;white-space:nowrap;}
.week-strip td.used-win{background:linear-gradient(135deg,#2eebb0,#16c975);color:#04231d;font-weight:800;}
.week-strip td.used-loss{background:linear-gradient(135deg,#ff6b86,#e0324f);color:#fff;font-weight:800;}
.week-strip td.used-push{background:rgba(242,181,68,.12);color:var(--gold-2);font-weight:800;}

/* ---- Weekly results (standings page analytics column) ---- */
.standings-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;}
@media (max-width:860px){.standings-layout{grid-template-columns:1fr;}}
/* Grid items don't shrink below their content's natural width by default
   (CSS's "min-width:auto" default on grid/flex items), so a wide table or
   chart inside .standings-col/.analytics-col was stretching the whole page
   sideways on mobile instead of scrolling within its own overflow-x:auto
   wrapper. min-width:0 lets the grid track (and the scroll wrapper inside
   it) actually shrink to the viewport. */
.standings-col,.analytics-col{min-width:0;}
.analytics-col .card{padding:20px;}

/* ---- League Messages / Smack Talk row ---- */
/* Same column ratio, gap, and breakpoint as .standings-layout directly
   below it, so League Messages lines up with the standings table's width
   and Smack Talk lines up with the Weekly Results box's width. When only
   one of the two cards has anything to show, the template adds .single
   (see league_standings.php) so that lone card fills the whole row
   instead of sitting stuck in the narrower 1.15fr track with empty space
   next to it — the fixed-ratio grid can't do that collapse on its own the
   way an auto-fit grid could. */
.msg-row{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;margin-bottom:20px;}
.msg-row.single{grid-template-columns:1fr;}
@media (max-width:860px){.msg-row{grid-template-columns:1fr;}}
.msg-row>.card{min-width:0;}
.weekly-breakdown{display:grid;gap:8px;}
.week-detail{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.week-detail summary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:14px;user-select:none;
}
.week-detail summary::-webkit-details-marker{display:none;}
/* The marker lives on the label span (not the summary itself) so it doesn't
   become its own flex item — a ::before on a flex container is distributed
   by justify-content like any other child, which nudged "Week N" left/right
   by a few px depending on the marker+label's combined width and threw off
   the left edge across rows. Anchoring it to the label keeps that edge fixed. */
.week-detail summary .week-label{display:inline-flex;align-items:center;}
.week-detail summary .week-label::before{content:'\25B8';display:inline-block;width:8px;margin-right:8px;color:var(--text-faint);transition:transform .15s ease;flex-shrink:0;}
.week-detail[open] summary .week-label::before{transform:rotate(90deg);}
.week-detail summary:hover{background:var(--surface-2);}
.week-detail-picks{padding:0 16px 14px;display:grid;gap:8px;}
.week-pick-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:13px;
}
.week-pick-row.used-win{background:rgba(34,232,143,.12);}
.week-pick-row.used-loss{background:rgba(255,77,109,.12);}
.week-pick-row.used-push{background:rgba(242,181,68,.12);}
.week-strip td.used-pending{background:linear-gradient(135deg,#ffd77a,#f2b544);color:#2a1a04;font-weight:700;}

/* ---- Alerts ---- */
.alert{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:13.5px;}
.alert.error{background:rgba(255,84,104,.12);color:#ffb3bd;border:1px solid rgba(255,84,104,.3);}
.alert.success{background:rgba(34,232,143,.12);color:#a9f2cc;border:1px solid rgba(34,232,143,.3);}
.alert.info{background:rgba(0,224,192,.10);color:var(--text-dim);border:1px solid rgba(0,224,192,.25);}

/* Bold gold callout — currently just the "enter times in UTC" reminder on
   the admin Schedule & Scores page (public/tdgod/schedule.php). */
.utc-notice{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:13.5px;font-weight:800;color:var(--gold-2);background:rgba(242,181,68,.12);border:1px solid rgba(242,181,68,.4);}
.utc-notice-clock{color:var(--green);}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-dim);}

/* ---- Season picker (game hub — view a past season, read-only) ----
   Lives in the hero box's right-hand column, stacked under the "N Season"
   pill (see .hero-box-right below), rather than its own row under the
   hero box. */
.season-select{
  padding:7px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;max-width:220px;
}
.season-select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,224,192,.18);}

footer.site-footer{text-align:center;color:var(--text-faint);font-size:12px;padding:40px 20px 0;}

/* ==========================================================
   Landing / marketing home page (logged-out visitors only)
   ========================================================== */
.landing-nav{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 40px 16px;max-width:1180px;margin:0 auto;gap:32px;
}
.landing-nav .logo{display:flex;justify-content:center;}
.landing-nav .logo img{height:208px;max-width:100%;width:auto;display:block;}
.landing-nav .nav-actions{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;}

.hero{max-width:900px;margin:40px auto 0;padding:20px 40px 0;text-align:center;}
.hero .kicker{
  display:inline-flex;align-items:center;gap:14px;background:rgba(0,224,192,.12);color:var(--teal-2);
  font-size:24px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:14px 32px;
  border-radius:999px;margin-bottom:28px;
}
.hero h1{
  font-size:52px;line-height:1.08;margin:0 0 18px;letter-spacing:-.01em;
}
.hero h1 .accent{
  background:linear-gradient(135deg,var(--teal-2),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{font-size:17px;font-weight:600;color:var(--text-dim);line-height:1.6;max-width:620px;margin:0 auto 32px;}
.hero .hero-note{font-size:15px;font-weight:600;color:var(--text-faint);}
@media (max-width:640px){.hero h1{font-size:34px;}}

.stripe{max-width:900px;margin:56px auto 0;padding:0 40px;display:flex;justify-content:center;gap:48px;flex-wrap:wrap;text-align:center;}
.stripe .stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:28px;background:linear-gradient(135deg,var(--teal-2),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stripe .stat span{font-size:13.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}

.landing-section{max-width:1080px;margin:88px auto 0;padding:0 40px;}
.landing-section .section-kicker{text-align:center;color:var(--teal-2);font-size:52px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:18px;}
@media (max-width:640px){.landing-section .section-kicker{font-size:34px;}}
.landing-section h2{text-align:center;font-size:32px;margin:0 0 12px;}
.landing-section > p.sub{text-align:center;color:var(--text-dim);max-width:560px;margin:0 auto 44px;font-size:15px;font-weight:600;}

.games-explainer{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:760px){.games-explainer{grid-template-columns:1fr;}}
.explainer-card{
  position:relative;overflow:hidden;border-radius:var(--radius);padding:28px;
  background:#1b2444;border:1px solid var(--border);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.explainer-card:hover{transform:translateY(-3px);border-color:var(--accent, var(--teal));box-shadow:0 16px 40px -16px var(--accent-glow, rgba(0,224,192,.4));}
.explainer-card .accent-bar{position:absolute;top:0;left:0;right:0;height:4px;}
.explainer-card .head{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.explainer-card .g-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.explainer-card h3{margin:0;font-size:19px;}
.explainer-card .tagline{color:var(--text-dim);font-size:13px;font-weight:600;margin:2px 0 0;}
.explainer-card p.desc{color:var(--text-dim);font-size:13.5px;font-weight:600;line-height:1.6;margin:16px 0;}
.explainer-card ul.rules{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.explainer-card ul.rules li{display:flex;gap:9px;font-size:13px;color:var(--text);line-height:1.5;}
.explainer-card ul.rules li::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent, var(--teal));margin-top:6px;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}
.step{text-align:center;padding:8px;}
.step .num{
  width:40px;height:40px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;
  background:linear-gradient(135deg,var(--teal-2),var(--teal));color:#04231d;
}
.step h4{margin:0 0 8px;font-size:15px;}
.step p{margin:0;color:var(--text-dim);font-size:13px;font-weight:600;line-height:1.6;}

.cta-band{
  max-width:1080px;margin:96px auto 0;padding:56px 40px;text-align:center;border-radius:24px;
  background:linear-gradient(135deg, rgba(0,224,192,.14), rgba(242,181,68,.10));
  border:1px solid var(--border);
}
.cta-band h2{margin:0 0 10px;font-size:28px;}
.cta-band p{margin:0 0 26px;color:var(--text-dim);font-size:14.5px;font-weight:600;}

.landing-footer{text-align:center;color:var(--text-faint);font-size:13.5px;font-weight:600;padding:60px 20px 0;}

/* ==========================================================
   Small-screen / phone responsiveness
   ========================================================== */
img{max-width:100%;}

@media (max-width:600px){
  .container{padding:24px 18px 0;}
  .container.narrow{max-width:100%;}

  /* Standings tables: the little initials-circle avatar next to each
     player's name is a nice touch on desktop but just eats into already-
     tight column space on a phone — drop it there and let the name have
     the room. */
  .player-cell .avatar{display:none;}

  .topbar{padding:8px 16px;gap:10px;}
  .topbar .logo img{height:56px;}
  .topbar-right{gap:8px;font-size:12.5px;}
  .topbar-right .btn{padding:9px 14px;font-size:12.5px;}
  .avatar{width:36px;height:36px;font-size:13px;}

  .landing-nav{padding:20px 18px 12px;gap:18px;}
  .landing-nav .logo img{height:120px;}
  .landing-nav .nav-actions{width:100%;}
  .landing-nav .nav-actions a{flex:1;}
  .landing-nav .nav-actions .btn{width:100%;padding:14px 16px;}

  .hero{padding:12px 18px 0;}
  .hero .kicker{font-size:14px;padding:9px 16px;gap:8px;white-space:normal;}
  .hero h1{font-size:28px;}
  .hero p.lead{font-size:15px;}

  .stripe{gap:24px;padding:0 18px;}

  .landing-section{padding:0 18px;margin-top:64px;}

  .login-card{padding:26px 20px;margin:32px auto 0;}
  .login-card img.mark{height:60px;margin-bottom:12px;}

  .field-row{flex-direction:column;gap:0;}
  .field-row .state-field,.field-row .zip-field{max-width:100%;}

  .picks-grid{grid-template-columns:1fr;}
  .two-col-grid{grid-template-columns:1fr;}

  .hero-box{padding:20px;}
  .hero-box-left{gap:14px;}
  .hero-box-right{width:100%;align-items:flex-end;margin-top:4px;}
  .season-select{max-width:100%;}

  .cta-band{padding:36px 20px;margin-top:64px;}

  /* Alias cards on the game hub (.league-row) are laid out as a wide
     horizontal row of fixed-width pieces — fine on desktop, but with no
     wrap it runs off the right edge on a phone. Stack everything instead. */
  .league-row{flex-direction:column !important;align-items:flex-start !important;gap:8px !important;}
  .league-row > div,.league-row > span,.league-row > a{
    flex:0 0 auto !important;width:100%;
    text-align:left !important;white-space:normal !important;
    overflow:visible !important;text-overflow:clip !important;
  }
  /* The single-league alias card's link (.alias-link) is the row inside
     .league-row that actually holds the avatar/name, league name and
     score — same stacking treatment, one level down. */
  .alias-link{flex-direction:column !important;align-items:flex-start !important;gap:6px !important;}
  .alias-link > div{
    flex:0 0 auto !important;width:100%;
    text-align:left !important;white-space:normal !important;
    overflow:visible !important;text-overflow:clip !important;
  }
  /* The generic ".league-row > div" rule above would otherwise stretch the
     Actions button to the full row width (and left-align it inside that);
     keep it its natural size, aligned to the right edge instead. */
  .league-row > .actions-dd{width:auto !important;align-self:flex-end !important;}
}