/* ══════════════════════════════════════════════════════════
   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: 104px; width: auto; display: block; }
.hub-logo-btn { gap: 14px; }
.hub-wordmark {
  font: 900 2.6rem/0.95 "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
/* Orange here because it's display-size text: --court only clears contrast at large sizes. */
.hub-wordmark-accent { color: var(--court); }

/* Narrower screens: the daily strip drops to its own full-width row under the
   logo instead of being squeezed out by the bigger crest and wordmark. */
@media (max-width: 1499px) {
  .hub-header { flex-wrap: wrap; row-gap: 8px; }
  .hub-header .hub-daily-strip {
    order: 3;
    flex: 1 1 100%;
    border-left: none;
    border-right: none;
    border-top: 2px solid rgba(21,20,19,.12);
    padding: 8px 0 0 !important;
  }
  .hub-wordmark { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  .hub-logo-btn { gap: 10px; }
  .hub-wordmark { font-size: 1.45rem; white-space: normal; }
}

/* Ordinary body copy on purpose (contract Sec 6.1) — keep it the body size,
   weight and colour; no badge, banner or brand styling. Sits in the header
   beside the wordmark, always far smaller than it. */
.hub-formerly {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 10em;            /* two short lines beside the wordmark */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
/* Below 1500px Today's Challenge drops to its own row, which leaves the gap
   between the wordmark and the Gold Jacket button for this line, centred. */
@media (max-width: 1499px) {
  .hub-header .hub-formerly { flex: 1 1 0; max-width: none; text-align: center; }
}
/* Phones: the buttons wrap under the logo, so the line gets its own row
   between the two. */
@media (max-width: 760px) {
  .hub-header .hub-formerly { flex: 1 1 100%; font-size: .9rem; }
}
body:not(:has(#modeScreen:not([hidden]))) .hub-formerly { 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;
  align-items: center;
  text-align: center;
  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: 64px;
}
body:not(:has(#modeScreen:not([hidden]))) .hub-wordmark { font-size: 1.7rem; }
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); }

/* ══ NEW-VISITOR WELCOME ══════════════════════════════════
   Spans both hub columns and sits above everything, on a phone too (order 0
   below). Same ink border and hard shadow as the mode cards so it reads as
   part of the game, not a banner laid over it. */
.hub-welcome {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: 12px;
  margin: 18px;
  padding: 20px 22px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
}
.hub-welcome[hidden] { display: none; }
.hub-welcome-kicker {
  justify-self: start;
  padding: 4px 8px;
  background: var(--court-fill);
  color: var(--chalk);
  font: 900 .68rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hub-welcome-title {
  margin: 0;
  max-width: 22ch;
  font: 900 clamp(1.55rem, 3.4vw, 2.3rem)/1.02 "Playfair Display", Georgia, "Times New Roman", serif;
  text-wrap: balance;
}
.hub-welcome-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hw;
  display: grid;
  gap: 8px;
  font: 400 .84rem/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hub-welcome-steps li {
  counter-increment: hw;
  display: grid;
  grid-template-columns: 1.7em 1fr;
  align-items: baseline;
}
.hub-welcome-steps li::before {
  content: counter(hw);
  font-weight: 900;
  color: var(--court-text);
}
/* Wide screens: the three steps sit side by side under the headline instead
   of a narrow column down the left of an empty card. */
@media (min-width: 781px) {
  .hub-welcome-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 980px; }
}
.hub-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 4px;
}
.hub-welcome-play {
  padding: 14px 26px;
  background: var(--court-fill);
  color: var(--chalk);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  font: 900 1rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.hub-welcome-play:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.hub-welcome-play:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.hub-welcome-play:focus-visible,
.hub-welcome-x:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.hub-welcome-note {
  font: 700 .74rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}
.hub-welcome-formerly {
  margin: 0;
  padding-top: 10px;
  border-top: 2px solid rgba(21,20,19,.1);
  font-size: .82rem;
  line-height: 1.4;
  color: var(--muted);
}
[data-theme="dark"] .hub-welcome-formerly { border-top-color: rgba(243,236,219,.1); }
.hub-welcome-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
}
.hub-welcome-x:hover { color: var(--ink); }
@media (max-width: 780px) {
  .hub-welcome { order: 0; margin: 14px; padding: 18px 16px 16px; }
  .hub-welcome-play { flex: 1 1 100%; }
  .hub-welcome-note { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-welcome-play { transition: none; }
}

/* ══ 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 MVP 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; }
.hub-sb-legal { font: 400 .62rem/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); display: block; margin-top: 8px; }
.hub-sb-legal a { color: inherit; text-decoration: underline; }

/* 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 MVP 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;
}

/* ── END ZONE BAR — a thin link-out between the Classic/Blind row and the
   Career/H2H/Grid row. Turf green, the same family End Zone's own site uses,
   and a fraction of the height of the cards so it reads as a sibling game
   rather than a fourth mode here. ── */
.hub-endzone-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 4px solid var(--ink);
  background: #123b22;
  background-image: repeating-linear-gradient(90deg, rgba(255,247,223,.07) 0 2px, transparent 2px 10%);
  color: var(--chalk);
  box-shadow: var(--sh);
  text-decoration: none;
  transition: transform .14s, box-shadow .14s;
}
.hub-endzone-bar:hover { transform: translate(2px,2px); box-shadow: var(--sh-s); }
.hub-endzone-bar:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.hub-endzone-tag {
  flex: none;
  padding: 4px 8px;
  border: 2px solid rgba(120,210,140,.45);
  background: rgba(46,140,76,.3);
  font: 950 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,247,223,.92);
}
.hub-endzone-txt {
  flex: 1;
  min-width: 0;
  font: 850 .8rem/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,247,223,.85);
}
.hub-endzone-txt strong { color: var(--chalk); font-weight: 900; }
.hub-endzone-cta {
  flex: none;
  padding: 7px 12px;
  border: 1.5px solid rgba(255,247,223,.3);
  background: rgba(255,255,255,.08);
  font: 700 .72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,247,223,.92);
  white-space: nowrap;
  transition: background .12s;
}
.hub-endzone-bar:hover .hub-endzone-cta { background: rgba(255,255,255,.16); }
@media (max-width: 640px) {
  .hub-endzone-bar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .hub-endzone-txt { flex-basis: 100%; order: 3; font-size: .74rem; }
  .hub-endzone-cta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-endzone-bar, .hub-endzone-bar:hover { transition: none; transform: none; }
}

/* ── 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. */
  /* 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: 66px; }
  body:not(:has(#modeScreen:not([hidden]))) .hub-logo-img { height: 52px; }
  body:not(:has(#modeScreen:not([hidden]))) .hub-wordmark { font-size: 1.3rem; }
  .hub-header .score-tile { display: none !important; }
}

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

/* ===== Settings side panel ===========================================
   Slides in from the right. Paper ground and ink rules like every other
   panel on the site; the hard shadow sits on the cards inside, not the
   panel, so the edge reads as a page turning rather than a floating box. */
html.settings-open { overflow: hidden; }
.settings-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(21, 20, 19, .5);
  opacity: 0; transition: opacity .2s ease;
}
.settings-scrim.is-open { opacity: 1; }
.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9001;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-left: 3px solid var(--ink);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.settings-drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .settings-drawer, .settings-scrim { transition: none; }
}
.sd-head {
  position: sticky; top: 0; z-index: 1;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.sd-title {
  grid-column: 2; margin: 0;
  font: 900 1.4rem/1 "Playfair Display", Georgia, "Times New Roman", serif;
  text-wrap: balance;
}
.sd-back {
  grid-column: 1; justify-self: start;
  min-height: 40px; padding: 0 4px;
  background: none; border: none; color: var(--ink); cursor: pointer;
  font: 800 .72rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .04em; text-transform: uppercase;
}
.sd-back:hover { color: var(--court-text); }
.sd-close {
  grid-column: 3; justify-self: end;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
  font-size: 1rem; cursor: pointer;
}
.sd-close:hover { background: var(--ink-bg); color: var(--chalk); }
.sd-view { display: flex; flex-direction: column; gap: 18px; padding: 18px 16px 28px; }

.sd-section { display: flex; flex-direction: column; border: 2px solid var(--ink); background: var(--surface); }
.sd-section[hidden] { display: none; }
.sd-label {
  margin: 0; padding: 11px 14px 9px;
  font: 800 .66rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--ink);
}
.settings-drawer .settings-row { padding: 12px 14px; }
.settings-drawer .settings-row[hidden] { display: none; }
.settings-drawer .settings-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; padding: 0 14px;
  border-bottom: 1px solid rgba(127, 116, 92, .32);
}
.settings-drawer .settings-item:last-child { border-bottom: none; }
.settings-drawer .theme-opt { min-height: 44px; padding: 10px 14px; }
.sd-nav-arrow { font-size: 1.5rem; line-height: 1; }
.settings-drawer a.settings-item { text-decoration: none; }
.sd-item-note {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 400; font-size: .68rem; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.settings-item:hover .sd-item-note { color: inherit; }
/* The address only fits beside the label from ~360px up. */
@media (max-width: 359px) { .sd-item-note { display: none; } }
/* Touch screens keep :hover after a tap, which left a row stuck in gold. */
@media (hover: none) {
  .settings-drawer .settings-item:hover { background: none; color: var(--ink); }
  .settings-drawer .settings-item-danger:hover { color: #a8321f; }
  [data-theme="dark"] .settings-drawer .settings-item-danger:hover { color: #ff7a61; }
  .settings-drawer .settings-item:active { background: var(--gold); color: #151413; }
}
.sd-legal {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 8px;
  font: 400 .72rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.sd-legal a { display: inline-block; padding: 12px 2px; color: var(--muted); }
.sd-legal a:hover { color: var(--ink); }

/* Manage subscription */
.sd-loading { margin: 0; font: 700 .8rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.sd-card {
  padding: 16px;
  border: 3px solid var(--ink); background: var(--surface);
  box-shadow: 5px 5px 0 var(--ink);
}
.sd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-card-title { font: 900 1.2rem/1.15 "Playfair Display", Georgia, "Times New Roman", serif; }
.sd-badge {
  flex-shrink: 0; padding: 5px 8px;
  border: 2px solid currentColor;
  font: 800 .62rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.sd-badge-good { color: #2f6b3a; }
.sd-badge-warn { color: #8a5a00; }
.sd-badge-bad { color: #a8321f; }
.sd-badge-muted { color: var(--muted); }
[data-theme="dark"] .sd-badge-good { color: #7fd08c; }
[data-theme="dark"] .sd-badge-warn { color: #f0b755; }
[data-theme="dark"] .sd-badge-bad { color: #ff7a61; }
.sd-rows {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 16px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(127, 116, 92, .32);
}
.sd-rows dt {
  font: 800 .66rem/1.5 "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.sd-rows dd {
  margin: 0; text-align: right;
  font: 700 .88rem/1.4 "Space Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.sd-note { margin: 0; font-size: 1rem; line-height: 1.5; }
.sd-fine { margin: 0; font: 400 .74rem/1.6 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.sd-fine a { color: var(--court-text); }
.sd-actions { display: flex; flex-direction: column; gap: 10px; }
.sd-btn {
  min-height: 50px; padding: 0 16px;
  border: 3px solid var(--ink);
  font: 800 .8rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.sd-btn-primary { background: var(--gold); color: #151413; box-shadow: 4px 4px 0 var(--ink); }
.sd-btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.sd-btn-ghost { background: var(--surface); color: var(--ink); }
.sd-btn-ghost:hover { background: var(--ink-bg); color: var(--chalk); }
.sd-btn-danger { background: transparent; color: #a8321f; border-color: #a8321f; }
.sd-btn-danger:hover { background: #b83a2a; border-color: #b83a2a; color: #fff; }
[data-theme="dark"] .sd-btn-danger { color: #ff7a61; border-color: #ff7a61; }
[data-theme="dark"] .sd-btn-danger:hover { background: #b83a2a; border-color: #b83a2a; color: #fff; }
.sd-confirm {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 3px solid #a8321f; background: var(--surface);
}
[data-theme="dark"] .sd-confirm { border-color: #ff7a61; }
.sd-confirm-q { margin: 0; font: 900 1.15rem/1.2 "Playfair Display", Georgia, "Times New Roman", serif; }
.settings-drawer button:focus-visible,
.settings-drawer a:focus-visible { outline: 3px solid var(--court); outline-offset: 2px; }
.settings-drawer #pushToggleBtn { border: 2px solid var(--ink); }