/* `hidden` always wins over a component's own display style (a banner or dot with display:flex would otherwise show) */
[hidden] { display: none !important; }

/* Phones: iOS Safari zooms in on any text field or dropdown under 16px and doesn't zoom back, which
   leaves the page wider than the screen and sliding sideways. 16px on every form control prevents it
   (without disabling pinch-zoom). The page itself never pans sideways. */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px !important; }
  html, body { overflow-x: clip; overscroll-behavior-x: none; }
}

/* bluechipstats brand foundation: shared by every page. See docs/UX_STANDARDS.md.
   Dark is the default look; the light theme applies when <html data-theme="light">. */

:root {
  /* readable in sun glare and at night (UX L13): secondary text >= 8:1 and faint >= 5.5:1 on panels; checked by
     scripts/qa/contrast.js for every text run on screen */
  --bg: #07090e; --panel: #1b2230; --panel-2: #283246; --ink: #f4f6fa; --muted: #c9d1dd; --faint: #a3acbb;
  --live-ink: #ff8589; --live-fill: #cc2229;   /* live clocks / "1 live" text, and the red live pills (white text) */
  --line: rgba(255,255,255,.10); --slot: #2f3a50; --code: #1f2533;
  --edge: rgba(255,255,255,.18);   /* hairline outline that gives dark cards their shape */
  --surface: #131823;              /* raised column surface (the Ask Lucky card) */
  --elev: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px rgba(0,0,0,.45);
  --brand: #8aaaff; --brand-strong: #2a5ff0; --brand-soft: rgba(61,123,255,.16); --bar: #3d7bff;
  --accent: #2c5fe0; --accent-ink: #ffffff; --user: #2a5ff0; --user-ink: #ffffff;
  --win: #34d399; --loss: #f28b5c; --warn: #f59e6b; --error: #f08a74; --ok: #34d399; --gold: #f0c04a;
  --hero: linear-gradient(135deg, #0d2466 0%, #1740b8 55%, #2f6bff 100%);
  --topbar: linear-gradient(90deg, #1238a8 0%, #1f4fd1 50%, #2f6bff 100%);
  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px;
  --shadow-brand: 0 10px 30px rgba(31,79,209,.28);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f1f3f7; --panel: #ffffff; --panel-2: #f6f7fa; --ink: #141821; --muted: #454d5b; --faint: #5a6270;
  --live-ink: #c4161c; --live-fill: #cc2229;
  --line: rgba(20,24,33,.08); --slot: #eceef3; --code: #eef0f4;
  --edge: rgba(20,24,33,.07); --surface: #ffffff;
  --elev: 0 1px 2px rgba(20,24,33,.05), 0 8px 24px rgba(20,24,33,.06);
  --brand: #1f4fd1; --brand-strong: #1f4fd1; --brand-soft: #e6ecfb; --bar: #1f4fd1;
  --accent: #1f4fd1; --accent-ink: #ffffff; --user: #1f4fd1; --user-ink: #ffffff;
  --win: #16703c; --loss: #c2410c; --warn: #c2410c; --error: #b3341e; --ok: #16703c; --gold: #8a6100;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); }
button, select, textarea, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Top bar: the one big block of brand blue on every page ---- */
.topbar { background: var(--topbar); color: #fff; padding-top: env(safe-area-inset-top, 0px);
          box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 24px rgba(31,79,209,.25); position: relative; z-index: 2; }
.topbar .bar { width: 1240px; max-width: 100%; margin: 0 auto; padding: 0 16px; height: 54px; display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 18px; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.logo b { font-weight: 800; color: #fff; } .logo span { font-weight: 500; color: #cfdcff; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a, .topbar nav button { background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  color: rgba(255,255,255,.8); font-weight: 600; text-decoration: none; font-size: 14px; }
.topbar nav a:hover, .topbar nav button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.12); }
.topbar nav [aria-current="page"] { color: #fff; background: rgba(255,255,255,.22); }
.topbar nav button:disabled { cursor: default; opacity: .8; }   /* "soon": clearly secondary, still readable (>= 4.5:1) */
.pill { background: rgba(255,255,255,.12); border: 0; border-radius: 999px; padding: 5px 12px; font-size: 13px;
        color: #fff; cursor: pointer; text-decoration: none; font-weight: 600; white-space: nowrap; }
.pill:hover { background: rgba(255,255,255,.22); }
.pill.solid { background: #fff; color: #1f4fd1; }
.pill.solid:hover { background: #e9efff; }
.themetoggle { padding: 5px 9px; line-height: 1; }

/* ---- Buttons (on page backgrounds) ---- */
.btn { display: inline-block; padding: 10px 18px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none;
       border: 0; cursor: pointer; }
.btn.primary { background: var(--brand-strong); color: #fff; box-shadow: 0 6px 18px rgba(47,107,255,.3); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.primary:disabled { opacity: .6; cursor: default; box-shadow: none; }
.btn.secondary { background: var(--panel); color: var(--ink); }
.btn.secondary:hover { background: var(--panel-2); }
.btn.big { padding: 14px 24px; font-size: 16px; border-radius: 14px; }
.btn.block { display: block; width: 100%; text-align: center; }

/* ---- Footer ---- */
.footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
.footer .bar { width: 1240px; max-width: 100%; margin: 0 auto; padding: 10px 16px; display: flex; gap: 14px; flex-wrap: wrap;
               align-items: center; font-size: 11.5px; color: var(--faint); }
.footer .spacer { flex: 1; }
.footer a { color: var(--muted); text-decoration: none; } .footer a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 700px) { .footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: -13px 0; } }
.sheet-row { text-decoration: none; }
.topbar nav small { font-size: 10px; font-weight: 700; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
/* "soon" sits under the label, so upcoming items stay as narrow as the live ones */
.topbar nav button:has(small) { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: 2px; line-height: 1.15; }
.topbar nav button:has(small) small { margin: 1px 0 0; font-size: 8.5px; letter-spacing: .08em; }
@media (max-width: 560px) { .topbar nav small { display: none; } .topbar .bar { gap: 10px; } }

/* ---- Narrow screens: the top bar never wraps; the menu scrolls sideways instead ---- */
.topbar nav { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; min-width: 0; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a, .topbar nav button { white-space: nowrap; flex: none; }
@media (max-width: 700px) {
  .topbar .bar { gap: 10px; padding: 0 12px; }
  .topbar nav button:disabled { display: none; }   /* "soon" items wait for wider screens */
  .logo { font-size: 16px; }
}
/* Narrow windows and tablets: the menu must fit without scrolling */
@media (max-width: 1100px) { .topbar nav button:disabled { display: none; } .account > span:not(.avatar), .account .acct .nm { display: none; } .topbar .bar { gap: 14px; } }
@media (max-width: 900px) { .topbar nav .long { display: none; } .topbar nav a, .topbar nav button { padding-inline: 9px; } .topbar .bar { gap: 10px; } }
@media (min-width: 701px) and (max-width: 800px) { .topbar .logo > span { display: none; } .topbar nav a, .topbar nav button { padding-inline: 7px; font-size: 13.5px; } }
/* Phones use the bottom tab bar (index.html); the header is one slim row */
.topbar nav .long { display: inline; }
@media (max-width: 700px) { .topbar .bar { height: 52px; } .logo { min-height: 44px; } .topbar .account { margin-left: auto; } }

/* ---- Card definition: every filled surface gets the hairline edge ---- */
.card-edge { box-shadow: inset 0 0 0 1px var(--edge); }

/* ---- Lucky: avatar (photo in a brand-blue ring) ---- */
.lucky-av { border-radius: 50%; object-fit: cover; flex: none; background: var(--slot);
            box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-strong); }
.lucky-title { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
               color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }

/* ---- Fantasy team logos (ESPN art, usually square SVG) ---- */
.team-logo { object-fit: contain; flex: none; border-radius: 10px; background: rgba(255,255,255,.06); }
.team-logo.ph { display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; color: var(--muted); background: var(--slot); }