/* ══════════════════════════════════════════════════════════
   hub-styles.css  — Hub redesign
   Strategy: all NEW class names (hub-*) need no !important;
   all SHARED class names (.mode-card, .score-tile, etc.) are
   scoped under a parent and use !important to beat styles.css.
   ══════════════════════════════════════════════════════════ */

/* ── TOKEN ALIASES (artifact uses --bg/--fg/--panel/--sh etc.) ── */
:root {
  --bg:    var(--paper);
  --fg:    var(--ink);
  --panel: var(--chalk);
  /* styles.css flips --ink light in dark mode but leaves --chalk at its
     cream value, so a panel painted --chalk keeps a light background while
     its --ink text turns light too — invisible. --hub-panel is the flipping
     version: every hub surface uses this, never --chalk directly. */
  --hub-panel: var(--chalk);
  /* --muted is deliberately NOT redefined here: styles.css already sets it
     for both themes, and shadowing it meant the hub had to re-solve theming
     that the base stylesheet had already solved correctly. */
  --sh:    5px 5px 0 var(--ink);
  --sh-s:  3px 3px 0 var(--ink);
  --sh-l:  7px 7px 0 var(--ink);
}
[data-theme="dark"] {
  --hub-panel: var(--surface);
  --sh:    5px 5px 0 var(--ink);
  --sh-s:  3px 3px 0 var(--ink);
  --sh-l:  7px 7px 0 var(--ink);
}
/* No prefers-color-scheme block on purpose. This site's theme is driven
   ENTIRELY by the data-theme stamp: the inline script in index.html adds
   data-theme="dark" when the saved theme is dark, and otherwise stamps
   NOTHING — there is no data-theme="light". So a `:root:not([data-theme="light"])`
   guard matches even when the site is deliberately in light mode, and an
   OS-level dark preference would flip these tokens dark while every
   styles.css token stayed light: light text on a light panel. */

/* ── HIDE LEGACY ── */
.hero, .account-bar { display: none !important; }

/* ── FULL-WIDTH SHELL when hub is showing ── */
.shell:has(#modeScreen:not([hidden])) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── BODY BACKGROUND (artifact look) ── */
body {
  background:
    linear-gradient(90deg,rgba(21,20,19,.04) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(21,20,19,.03) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(circle at 14% 7%,rgba(230,184,67,.28),transparent 28rem),
    var(--paper) !important;
}
[data-theme="dark"] body {
  background:
    linear-gradient(90deg,rgba(243,236,219,.04) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(243,236,219,.03) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(circle at 14% 7%,rgba(230,184,67,.10),transparent 28rem),
    var(--paper) !important;
}

/* ══ HEADER ══════════════════════════════════════════════ */
/* The top padding carries the status bar, and it has to.
   index.html ships `viewport-fit=cover` with an `apple-mobile-web-app-status-bar-style`
   of `black-translucent`, which means that once the game is installed to the
   home screen the viewport starts at the physical top of the display and iOS
   paints the clock and battery OVER the first ~50px of this header. Those pixels
   belong to the status bar, so taps there never reach the page: the logo and the
   settings gear were simply dead. In a browser tab the inset is 0 and none of
   this applies, which is exactly why it only reproduced when installed.
   The left/right insets do the same job for the notch in landscape. */
.hub-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
           10px max(20px, env(safe-area-inset-left, 0px));
  border-bottom: 3px solid var(--ink);
  background: var(--hub-panel);
  position: sticky;
  top: 0;
  z-index: 100;
}
.hub-logo-btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.hub-logo-btn:hover { opacity: .82; }
.hub-logo-img { height: 72px; width: auto; display: block; }

/* ── End Zone bar ─────────────────────────────────────────
   Cross-promo strip for the NFL sister game. Its colours are pinned rather
   than themed: this bar is meant to read as a different product than the page
   under it, and End Zone's own green/gold holds on either GOAT Lab ground.
   Hidden by default and shown on the hub only, matching .hub-daily-strip. */
/* The top padding carries the status bar, for the same reason .hub-header's
   does — see the note there. This bar was added ABOVE the header, which moved
   the problem: the header's inset now pads a strip that is nowhere near the top
   of the display, and these ~50px are the ones iOS paints the clock over. Taps
   there never reach the page, so on an installed home-screen copy the whole bar
   was dead. In a browser tab the inset is 0 and none of this applies. */
.ez-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(7px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-left, 0px))
           7px max(16px, env(safe-area-inset-right, 0px));
  background: #123b22;
  color: #f4f1e8;
  border-bottom: 3px solid var(--ink);
  text-decoration: none;
  font: 800 .78rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .03em;
}
body:has(#modeScreen:not([hidden])):not(.career-active):not(.h2h-active) .ez-bar { display: flex; }
/* With the bar up, the header is no longer the thing under the clock, and its
   own inset becomes a second helping of empty green-to-cream gap. Only the
   top is dropped: the left/right insets still hold the notch off in landscape.
   Matched to the gate above so the two can never disagree about who is at the
   top of the page, and scoped inside :has() so a browser without it keeps the
   header's inset — which is correct there, because the bar stays hidden. */
body:has(#modeScreen:not([hidden])):not(.career-active):not(.h2h-active) .hub-header { padding-top: 10px; }
.ez-bar:hover { background: #17492a; }
.ez-bar-tag {
  flex-shrink: 0;
  padding: 3px 7px;
  background: #d99a2b;
  color: #15140f;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .68rem;
}
.ez-bar-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ez-bar-txt strong { color: #f0b755; font-weight: 900; }
.ez-bar-go { flex-shrink: 0; color: #f0b755; font-weight: 900; }
@media (max-width: 420px) {
  .ez-bar { gap: 8px; font-size: .72rem; }
}
/* On the narrowest phones the chip costs the sentence its payload — the line
   truncated to "…End". The word "new" is in the sentence anyway, so the chip
   is the part that goes. */
@media (max-width: 380px) {
  .ez-bar-tag { display: none; }
}

/* ── Daily strip ──────────────────────────────────────────
   Replaces the header XP bar, which was never wired to anything —
   the real progress bar lives lower down and is driven by GoatXP.
   This slot now carries the one genuinely time-sensitive thing on
   the page. Hub-only: on the leaderboard / stats / game screens it
   would be describing a screen the player isn't looking at. */
.hub-daily-strip {
  display: none;              /* shown only on the hub, see gate below */
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 0 18px;
  border-left: 2px solid rgba(21,20,19,.12);
  border-right: 2px solid rgba(21,20,19,.12);
}
/* The two full-page modes are the exception the [hidden] test can't see: they
   don't set the attribute, they take over the shell with
   `body.career-active .shell > *:not(#careerPage) { display: none }`. So
   #modeScreen is still un-hidden while Career or Head to Head owns the screen,
   and the strip sat there describing today's Daily to somebody in the middle
   of a draft. */
body:has(#modeScreen:not([hidden])):not(.career-active):not(.h2h-active) .hub-daily-strip { display: flex; }
[data-theme="dark"] .hub-daily-strip { border-color: rgba(243,236,219,.12); }

.hub-strip-kicker {
  font: 900 .76rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-strip-line {
  font: 850 .88rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-strip-line .hub-strip-score { color: var(--court); font-weight: 950; }
.hub-strip-count {
  font: 700 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  color: var(--muted);
}
.hub-strip-count strong { color: var(--ink); font-weight: 900; }

/* Header right */
/* margin-left: auto unconditionally. It used to be set only when the hub was
   hidden, on the reasoning that the daily strip's `flex: 1` already pushes this
   group over — true on the hub, but Career and Head to Head are the case
   between the two: #modeScreen is still un-hidden (they take the shell over
   with a display rule, not the attribute) so the off-hub rule doesn't apply,
   while the strip IS hidden on them, so nothing was doing the pushing. The
   group sat just right of the logo with the rest of the header empty, and the
   settings menu — which anchors to the button's right edge — opened off the
   LEFT of the screen from there. The auto margin is a no-op on the hub. */
.hub-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

/* ── score-tile inside hub-header ── OVERRIDE styles.css */
.hub-header .score-tile {
  display: grid !important;
  padding: 7px 12px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: var(--sh) !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
}
.hub-header .score-tile #score {
  font: 950 2.6rem/.9 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  display: block !important;
}
.hub-header .score-tile small {
  font: 900 .62rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  opacity: .7 !important;
  margin-top: 2px !important;
  display: block !important;
}

/* Settings wrap — don't disturb existing settings-menu styles much */
.settings-wrap { position: relative; }

/* ── account-btn inside hub-header ── OVERRIDE styles.css */
.hub-header .account-btn {
  height: 40px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font: 900 .74rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .12s !important;
  white-space: nowrap !important;
}
.hub-header .account-btn:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Header off the hub ───────────────────────────────────
   The header sits outside .shell now, so it spans every screen:
   leaderboard, 100 Club, stats, archive, the game grid and the
   result page. Those pages keep .shell's centered 1260px column,
   and a tall hub-scale bar above a narrow column looked detached.
   Off the hub it collapses to a compact app bar: smaller logo, no
   daily strip (gated above), tighter padding. */
body:not(:has(#modeScreen:not([hidden]))) .hub-header {
  padding: 8px 20px;
}
body:not(:has(#modeScreen:not([hidden]))) .hub-logo-img {
  height: 46px;
}
body:not(:has(#modeScreen:not([hidden]))) .hub-header .score-tile {
  padding: 5px 10px !important;
}
body:not(:has(#modeScreen:not([hidden]))) .hub-header .score-tile #score {
  font-size: 1.7rem !important;
}

/* ══ HUB SHELL (modeScreen wrapper) ══════════════════════ */
.hub-hub {
  display: grid;
  grid-template-columns: 272px 1fr;
}

/* Phone-only shortcuts to the two boards. Off entirely on a desktop, where
   both panels are already in the sidebar and a duplicate link would just be
   two more things to read. `display: none` rather than a hidden attribute
   here: nothing toggles this, and none of it is !important, so it stays out
   of the [hidden] fight the pills and quick links had to be rescued from. */
.hub-jump { display: none; }
.hub-jump-btn {
  font: 900 .68rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 11px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  white-space: nowrap;
}
.hub-jump-btn:active { background: var(--ink); color: var(--paper); }

/* ══ SIDEBAR ══════════════════════════════════════════════ */
.hub-sidebar {
  border-right: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  background: var(--hub-panel);
}
.hub-sb-section {
  padding: 15px 18px;
  border-bottom: 2px solid rgba(21,20,19,.1);
}
[data-theme="dark"] .hub-sb-section { border-bottom-color: rgba(243,236,219,.1); }
[data-theme="dark"] .hub-jump { border-bottom-color: rgba(243,236,219,.1); }

/* Section head row (kicker + note) */
.hub-sb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.hub-sb-head-note {
  font: 900 .62rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}

/* Account name block */
.hub-acct-name-wrap { display: flex; flex-direction: column; gap: 3px; }

/* ── Streak + community ── */
.hub-streak-community { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-streak-row { display: flex; align-items: center; gap: 8px; }
.hub-streak-row[hidden] { display: none; }
.hub-streak-fire { font-size: 1.2rem; flex-shrink: 0; }
.hub-streak-num { font: 900 1.1rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; display: block; }
.hub-streak-lbl {
  font: 900 .64rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin-top: 3px; display: block;
}

/* ── Leaderboard preview ── */
.hub-lb-section { flex: 1; }
.hub-lb-list { display: block; }
.hub-lb-empty { font: 400 .7rem/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); margin: 0; padding: 6px 0; }
.hub-sidebar .hub-lb-row {
  display: flex !important; align-items: center !important;
  padding: 7px 0 !important; margin: 0 !important;
  border-bottom: 1px solid rgba(21,20,19,.07) !important;
  font: 400 .76rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  background: none !important; border-radius: 0 !important;
}
[data-theme="dark"] .hub-sidebar .hub-lb-row { border-bottom-color: rgba(243,236,219,.07) !important; }
.hub-lb-rank { width: 22px; font-weight: 900; font-size: .65rem; flex-shrink: 0; color: var(--muted); }
.hub-lb-rank.rank-gold { color: #b8860b; }
.hub-lb-rank.rank-silver { color: #888; }
.hub-lb-rank.rank-bronze { color: #8b5f3a; }
.hub-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.hub-lb-score { font: 900 .76rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; flex-shrink: 0; }
.hub-sidebar .hub-lb-row-me {
  background: var(--gold) !important; color: #151413 !important;
  padding: 7px 6px !important; margin: 0 -2px !important;
}
.hub-lb-row-me .hub-lb-rank { color: #7a5a00; }
.hub-lb-view {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 0; margin-top: 8px;
  border: none; border-top: 2px solid var(--ink);
  font: 900 .7rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: transparent; cursor: pointer;
}
.hub-lb-view:hover { opacity: .7; }

/* ── 100 Club ── */
.hub-club-badge {
  padding: 3px 7px; background: var(--green); color: var(--chalk);
  font: 900 .62rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em; text-transform: uppercase;
}
.hub-club-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font: 700 .72rem/1.3 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; gap: 8px;
}
.hub-club-row-2 { border-top: 1px solid rgba(21,20,19,.07); padding-top: 6px; margin-top: 3px; }
[data-theme="dark"] .hub-club-row-2 { border-top-color: rgba(243,236,219,.07); }
.hub-club-mode { color: var(--muted); font-size: .6rem; flex-shrink: 0; }
.hub-club-view {
  display: block; width: 100%; padding: 7px 0; margin-top: 8px;
  border: none; border-top: 2px solid var(--ink);
  font: 900 .7rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em; text-transform: uppercase; text-align: center;
  color: var(--ink); background: transparent; cursor: pointer;
  transition: background .12s, color .12s;
}
.hub-club-view:hover { background: var(--ink); color: var(--paper); }

/* ── account-btn inside sidebar ── OVERRIDE styles.css */
.hub-sidebar .account-btn {
  display: block !important;
  width: 100% !important;
  padding: 9px 14px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--hub-panel) !important;
  color: var(--ink) !important;
  font: 900 .76rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .12s, box-shadow .12s, transform .1s !important;
  margin-bottom: 0 !important;
}
.hub-sidebar .account-btn + .account-btn { margin-top: 6px !important; }
.hub-sidebar .account-btn:hover {
  box-shadow: var(--sh-s) !important;
  transform: translate(-1px,-1px) !important;
}
.hub-sidebar .account-btn-trophy {
  background: var(--gold) !important;
  /* Gold is a fixed colour in both themes; --ink would flip light here. */
  color: #151413 !important;
  border-color: var(--ink) !important;
}
.hub-sidebar .account-btn-club {
  background: var(--court) !important;
  color: var(--chalk) !important;
  border-color: var(--ink) !important;
}

/* Board buttons group */
.hub-board-btns { display: flex; flex-direction: column; gap: 6px; }

/* ── gp-pill inside sidebar ── OVERRIDE styles.css */
.hub-sidebar .gp-pill,
.hub-account-head .gp-pill {
  padding: 3px 8px !important;
  background: var(--gold) !important;
  /* Gold does not flip between themes, so this text must stay dark in both.
     --ink turns light in dark mode and would vanish on the pill. */
  color: #151413 !important;
  font: 700 .66rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}
/* An `!important` display beats the browser's own `[hidden] { display: none }`,
   so the pill above was drawn whether or not the attribute was set — and
   app.js hides it by attribute. Every signed-in player, pass or not, was shown
   a gold GOAT PASS badge next to their name while the banner underneath was
   still trying to sell them the pass. Same trap as .hub-streak-row and
   .daily-streak further down; anything the app toggles by attribute needs the
   guard back. */
.hub-sidebar .gp-pill[hidden],
.hub-account-head .gp-pill[hidden] { display: none !important; }

/* Account section */
.account-signedout { display: flex; flex-direction: column; gap: 8px; }
.hub-sb-msg { font: 400 .7rem/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); display: block; }

/* Sign-in button */
.hub-sidebar .account-btn-google {
  background: var(--hub-panel) !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
}
/* The mark is Google's four-colour logo (see .g-mark in styles.css), so the
   sidebar must not restyle it the way it did when it was a letter. */
.hub-sidebar .g-mark {
  flex: 0 0 auto;
}

/* Signed-in account head */
.hub-account-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.hub-playing-as {
  font: 700 .64rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 3px;
}
.hub-acct-name {
  font: 900 1.15rem/1 "Playfair Display", Georgia, "Times New Roman", serif;
  display: block;
}
.hub-acct-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-acct-actions .account-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding: 8px 11px !important;
  font-size: .58rem !important;
  border: 2px solid rgba(21,20,19,.2) !important;
}
[data-theme="dark"] .hub-acct-actions .account-btn {
  border-color: rgba(243,236,219,.2) !important;
}
.hub-acct-actions .account-btn:hover {
  border-color: var(--ink) !important;
}

/* Players pill */
.players-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(21,20,19,.18);
  font: 700 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}
[data-theme="dark"] .players-pill { border-color: rgba(243,236,219,.18); }
.players-pill strong { color: var(--ink); font-weight: 900; }

/* Quick links */
.hub-quick-links { display: flex; flex-direction: column; gap: 0; }
.hub-kicker {
  font: 900 .76rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}

/* Override .coffee-top and .help-top inside sidebar */
.hub-sidebar .coffee-top,
.hub-sidebar .help-top,
.hub-sidebar a.help-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border: 2px solid rgba(21,20,19,.18) !important;
  border-radius: 0 !important;
  font: 900 .74rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: border-color .12s, box-shadow .12s, transform .1s !important;
  box-shadow: none !important;
  transform: none !important;
  margin-bottom: 5px !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Same guard as the pill: these are toggled by attribute (the GOAT Pass entry
   is hidden from people who already own it), and the !important above would
   otherwise keep drawing them. */
.hub-sidebar .coffee-top[hidden],
.hub-sidebar .help-top[hidden],
.hub-sidebar a.help-top[hidden] { display: none !important; }
[data-theme="dark"] .hub-sidebar .coffee-top,
[data-theme="dark"] .hub-sidebar .help-top,
[data-theme="dark"] .hub-sidebar a.help-top {
  border-color: rgba(243,236,219,.18) !important;
}
.hub-sidebar .coffee-top:hover,
.hub-sidebar .help-top:hover,
.hub-sidebar a.help-top:hover {
  border-color: var(--ink) !important;
  box-shadow: var(--sh-s) !important;
  transform: translate(-1px,-1px) !important;
}
.hub-sidebar .coffee-top {
  border-color: rgba(230,184,67,.5) !important;
}
.hub-sidebar .coffee-top:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  /* Gold is a fixed colour in both themes; --ink would flip light here. */
  color: #151413 !important;
}
/* Hide internal icon wrappers that might have their own styles */
.hub-sidebar .coffee-top-mark,
.hub-sidebar .help-top-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .9rem !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
}
.hub-sidebar .coffee-top-text,
.hub-sidebar .help-top-text {
  display: inline-block !important;
  line-height: 1 !important;
}

/* ══ MAIN CONTENT ══════════════════════════════════════════ */
.hub-main {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper);
}

/* Tagline */
.hub-tagline {
  font: 900 italic clamp(1.6rem,2.8vw,2.4rem)/.95 "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
  margin: 0;
  opacity: .72;
}
[data-theme="dark"] .hub-tagline { border-bottom-color: rgba(243,236,219,.1); }

/* ── DAILY CARD — override styles.css .mode-card and .mode-card-daily ── */
#modeScreen .mode-card-daily,
#modeScreen .hub-daily-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 26px !important;
  border: 4px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--court) !important;
  color: var(--chalk) !important;
  text-align: left !important;
  box-shadow: var(--sh-l) !important;
  cursor: pointer !important;
  transition: transform .14s, box-shadow .14s !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 200px !important;
}
#modeScreen .mode-card-daily::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 75% 20%,rgba(255,247,223,.18),transparent 42%),
    repeating-linear-gradient(45deg,rgba(21,20,19,.03) 0 1px,transparent 1px 14px) !important;
  pointer-events: none !important;
}
#modeScreen .mode-card-daily:hover {
  transform: translate(2px,2px) !important;
  box-shadow: var(--sh-s) !important;
}

/* Daily card sub-elements */
.daily-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

/* ── mode-tag inside daily card ── OVERRIDE styles.css */
#modeScreen .mode-card-daily .mode-tag {
  display: inline-block !important;
  padding: 4px 8px !important;
  border: 2px solid rgba(255,247,223,.4) !important;
  background: rgba(21,20,19,.28) !important;
  color: var(--chalk) !important;
  font: 950 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* ── daily-streak inside modeScreen ── OVERRIDE styles.css */
#modeScreen .daily-streak {
  display: inline-block !important;
  padding: 5px 11px !important;
  background: rgba(21,20,19,.22) !important;
  border: 1px solid rgba(255,247,223,.28) !important;
  font: 700 .68rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .05em !important;
  color: var(--chalk) !important;
  border-radius: 0 !important;
  text-transform: none !important;
  position: static !important;
}
#modeScreen .daily-streak[hidden] { display: none !important; }

/* Goat silhouette in daily card — matches .goat-mark on main */
.hub-daily-goat {
  position: absolute !important;
  right: -22px !important;
  bottom: -26px !important;
  top: auto !important;
  width: 210px !important;
  height: 210px !important;
  fill: var(--chalk) !important;
  opacity: .11 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@media (max-width: 930px) {
  .hub-daily-goat { width: 150px !important; height: 150px !important; right: -16px !important; bottom: -18px !important; }
}

/* Daily card text */
#modeScreen .mode-card-daily strong {
  font: 900 clamp(2.4rem,4vw,4.2rem)/.86 "Playfair Display", Georgia, "Times New Roman", serif !important;
  display: block !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 1 !important;
  color: var(--chalk) !important;
}
#modeScreen .mode-card-daily small {
  font: 850 .88rem/1.5 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: rgba(255,247,223,.9) !important;
  display: block !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.daily-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: rgba(21,20,19,.22) !important;
  border: 1.5px solid rgba(255,247,223,.32) !important;
  font: 700 .78rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--chalk) !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background .12s !important;
}
#modeScreen .mode-card-daily:hover .daily-status {
  background: rgba(21,20,19,.35) !important;
}

/* ── MODE ROW (Classic + Blind) ── */
.hub-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── .mode-card inside hub-main ── OVERRIDE styles.css */
#modeScreen .hub-mode-row .mode-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 22px !important;
  border: 4px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--hub-panel) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .14s, box-shadow .14s !important;
  min-height: 200px !important;
}
#modeScreen .hub-mode-row .mode-card:hover {
  transform: translate(2px,2px) !important;
  box-shadow: var(--sh-s) !important;
}
/* --ink-bg, not --ink. --ink is the neutral FOREGROUND token: it flips light
   in dark mode, so this card turned cream while its text stayed the fixed
   cream --chalk — "Hide Attributes" and its whole description went
   light-on-light. --ink-bg is the token for exactly this job, a background
   that has to stay the darkest thing on the page in both themes. */
#modeScreen .hub-mode-row .mode-card-blind {
  background: var(--ink-bg) !important;
  color: var(--chalk) !important;
  box-shadow: 5px 5px 0 var(--gold) !important;
}
#modeScreen .hub-mode-row .mode-card-blind:hover {
  box-shadow: 3px 3px 0 var(--gold) !important;
}

/* mode-tag inside Classic/Blind cards */
#modeScreen .hub-mode-row .mode-card .mode-tag {
  display: inline-block !important;
  padding: 4px 8px !important;
  border: 2px solid var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font: 950 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  width: max-content !important;
}
#modeScreen .hub-mode-row .mode-card-blind .mode-tag {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* mode card text */
#modeScreen .hub-mode-row .mode-card strong {
  font: 900 clamp(1.9rem,3vw,2.8rem)/.9 "Playfair Display", Georgia, "Times New Roman", serif !important;
  display: block !important;
  flex: 1 !important;
  color: inherit !important;
}
#modeScreen .hub-mode-row .mode-card small {
  font: 850 .88rem/1.5 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: var(--ink) !important;
  opacity: .65 !important;
  display: block !important;
}
#modeScreen .hub-mode-row .mode-card-blind small {
  color: rgba(255,247,223,.82) !important;
  opacity: 1 !important;
}
#modeScreen .mode-pb {
  font: 700 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  display: block !important;
}
#modeScreen .mode-card-blind .mode-pb {
  color: rgba(230,184,67,.75) !important;
}

/* ── EXTRA ROW (Career + H2H + The Grid) ── */
/* auto-fit rather than a fixed count: three cards sit 3-up on a wide hub and
   drop to 2-up and then 1-up on their own, so a fourth mode later needs no
   breakpoint work. */
.hub-extra-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.hub-extra-card {
  padding: 22px;
  border: 4px solid var(--ink);
  box-shadow: var(--sh);
  text-align: left;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 185px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 0;
}
.hub-extra-card:hover {
  transform: translate(2px,2px);
  box-shadow: var(--sh-s);
}
.hub-career-card {
  background: #1a3d5c;
  color: var(--chalk);
}
.hub-career-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 15%,rgba(37,109,157,.4),transparent 55%);
  pointer-events: none;
}
.hub-h2h-card {
  background: #1e3c22;
  color: var(--chalk);
}
.hub-h2h-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 85%,rgba(21,127,104,.4),transparent 55%);
  pointer-events: none;
}
/* The Grid takes the court orange — its own family next to Career's blue and
   H2H's green, and the same hue the rating headers use on the board itself. */
.hub-grid-card {
  background: #5c2b20;
  color: var(--chalk);
}
.hub-grid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Three bands crossing three bands: the board, abstracted, at low enough
     contrast to sit behind the copy rather than compete with it. */
  background:
    repeating-linear-gradient(90deg, rgba(255,247,223,.14) 0 2px, transparent 2px 33.33%),
    repeating-linear-gradient(0deg, rgba(255,247,223,.14) 0 2px, transparent 2px 33.33%),
    radial-gradient(circle at 82% 18%,rgba(168,83,47,.55),transparent 58%);
  pointer-events: none;
}
.hub-grid-card .hub-extra-tag { background: rgba(168,83,47,.35); border-color: rgba(230,184,67,.45); color: rgba(255,247,223,.9); }

.hub-extra-tag {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid rgba(255,247,223,.4);
  font: 950 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  width: max-content;
  position: relative;
  z-index: 1;
}
.hub-career-card .hub-extra-tag { background: rgba(37,109,157,.35); border-color: rgba(100,180,255,.4); color: rgba(255,247,223,.9); }
.hub-h2h-card .hub-extra-tag { background: rgba(21,127,104,.3); border-color: rgba(80,200,170,.4); color: rgba(255,247,223,.9); }

.hub-extra-name {
  font: 900 clamp(1.5rem,2.5vw,2.2rem)/.9 "Playfair Display", Georgia, "Times New Roman", serif;
  display: block;
  flex: 1;
  position: relative;
  z-index: 1;
  color: var(--chalk);
}
.hub-extra-desc {
  font: 850 .82rem/1.5 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,247,223,.85);
  display: block;
  position: relative;
  z-index: 1;
}
.hub-extra-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,247,223,.25);
  font: 700 .74rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,247,223,.9);
  position: relative;
  z-index: 1;
  transition: background .12s;
  width: max-content;
}
.hub-extra-card:hover .hub-extra-cta { background: rgba(255,255,255,.15); }


/* ══ FOOTER ═══════════════════════════════════════════════
   Hub-only. The full-bleed band suits the hub's edge-to-edge grid,
   but the other pages sit in a centered column where styles.css's
   original spacing reads better — so don't touch them. */
body:has(#modeScreen:not([hidden])) .site-footer {
  border-top: 3px solid var(--ink);
  background: var(--hub-panel);
  margin-top: 0 !important;
  padding: 18px 24px 28px !important;
}

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 780px) {
  .hub-hub { grid-template-columns: 1fr; }

  /* The sidebar's sections become items of the hub grid itself, so a phone
     gets the order a phone wants rather than the order two columns happened
     to produce. Stacked as authored, the ENTIRE sidebar sat on top: account,
     streak, the daily leaderboard, the 100 Club and five quick links — about
     1,400px of reading before Today's Challenge, which is the one thing the
     page exists to start. Now it reads: who you are, the thing you came to
     play, then everything you look at afterwards.
     `display: contents` drops the sidebar box itself, so the panel background
     and the section separators have to be restored on the sections below. */
  .hub-sidebar { display: contents; }
  #hubAccountSection { order: 1; }
  .hub-jump { order: 2; }
  .hub-main { order: 3; }
  .hub-streak-community { order: 4; }
  .hub-lb-section { order: 5; }
  .hub-club-section { order: 6; }
  .hub-quick-links { order: 7; }

  /* Small on purpose: these are shortcuts to what's further down, not a
     second set of modes, so they sit above Today's Challenge without
     competing with it for the tap. */
  .hub-jump {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
    background: var(--hub-panel);
    border-bottom: 2px solid rgba(21,20,19,.1);
  }
  .hub-sb-section { background: var(--hub-panel); }
  .hub-quick-links { border-bottom: none; padding-bottom: 20px; }

  .hub-mode-row, .hub-extra-row { grid-template-columns: 1fr; }

  /* Thumb targets. These were 27-29px tall — under half the 44px a finger
     actually needs, and they are the links off the two boards. */
  .hub-lb-view, .hub-club-view { padding: 14px 0; }
  .hub-acct-actions .account-btn { padding: 14px !important; }
  .hub-sidebar .coffee-top,
  .hub-sidebar .help-top,
  .hub-sidebar a.help-top { padding: 13px 12px !important; }
  /* Don't hide the strip on narrow screens — the daily status and the
     countdown are the most useful thing in the header, and mobile is
     where the header has the least else in it. Collapse instead: drop
     the kicker (the strip's context is obvious) and run the remaining
     two lines tighter. */
  .hub-daily-strip { padding: 0 12px; gap: 2px; }
  .hub-strip-kicker { display: none; }
  .hub-strip-line { font-size: .76rem; }
  .hub-strip-count { font-size: .64rem; }
  .hub-main { padding: 14px; }
  /* Keeps the installed-app status bar inset from the rule above — a plain
     `padding: 10px 14px` here would drop it and put the header back under the
     clock on exactly the phones that hit this breakpoint. */
  .hub-header {
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
             10px max(14px, env(safe-area-inset-left, 0px));
  }
}
@media (max-width: 560px) {
  /* Gear only. The word "Settings" was eating about 120px of a 390px header,
     which is why the daily strip beside it read "Not played yet · Da…" — the
     Daily number, one of the two things the strip exists to say, was the part
     that got cut. The button keeps its aria-label, so nothing is lost to a
     screen reader; font-size:0 collapses the bare text node, and the icon
     span gets its size back. */
  /* 14px of padding, not 12: at 12 the button measured 38px across, and a
     control this small should clear 40 in both directions. */
  .hub-header .account-btn-gear { font-size: 0 !important; padding: 0 14px !important; gap: 0 !important; }
  .hub-header .account-btn-gear > [aria-hidden] { font-size: 1.05rem !important; }
  /* And the menu it opens: its rows were 30-35px, which is a thumb problem
     everywhere but especially inside a dropdown, where a miss closes the thing
     you were aiming at. */
  .settings-menu .settings-item { padding: 15px 14px; }
  .settings-menu .settings-row { padding: 13px 12px; }
  .settings-menu .theme-opt { padding: 15px 14px; }
  /* Small phones (360px and down) still clipped the Daily number by a few
     pixels; the strip's own gutters are the cheapest place to find them. */
  .hub-daily-strip { padding: 0 10px; }
  .hub-strip-line { font-size: .74rem; }
}
@media (max-width: 480px) {
  .hub-logo-img { height: 42px; }
  .hub-header .score-tile { display: none !important; }
}

/* Ezoic ad slot */
#ezoic-ad-home { min-height: 0; }