/* Fantasy Domain shared product skin. Loaded last to unify the prototype pages. */
/* Static mobile navigation fallback. These selects are pre-populated in HTML so
   no-JS and slow-hydration users are not left with an empty navigation shell. */
.mobileNavSelect{display:none}
@media(max-width:760px){
  .mobileNavSelect{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1px solid var(--fd-line,var(--line));border-radius:999px;background:var(--fd-panel,var(--panel));color:var(--fd-text,var(--text));padding:4px 6px 4px 10px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
  .mobileNavSelect span{font-size:var(--fs-2xs);font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted,var(--muted))}
  .mobileNavSelect select{min-width:118px;max-width:42vw;min-height:34px;border:0;border-radius:999px;background:rgba(216,190,122,.10);color:var(--fd-text,var(--text));font:inherit;font-size:12px;font-weight:900;padding:0 28px 0 10px}
  .mobileNavSelect select:focus{outline:2px solid rgba(216,190,122,.46);outline-offset:2px}
  .mobileNavSelect button{min-height:34px;border:1px solid rgba(216,190,122,.26);border-radius:999px;background:var(--fd-gold,var(--gold));color:var(--fd-bg,#070806);font:inherit;font-size:var(--fs-2xs);font-weight:950;letter-spacing:.08em;text-transform:uppercase;padding:0 10px}
  .homeApp .topActions .topPillar{display:none}
  .topActions .mobileNavSelect + .topMenu{display:none}
}
:root {
  --fd-bg: #070806;
  --fd-bg-2: #0b0c08;
  --fd-panel: #151610;
  --fd-panel-2: #1b1c14;
  --fd-panel-3: #232318;
  --fd-line: rgba(216, 190, 122, .24);
  --fd-line-strong: rgba(216, 190, 122, .46);
  --fd-text: #f4f1e8;
  --fd-muted: #c8bea9;
  --fd-faint: #ada08a;
  --fd-gold: #d8be7a;
  --fd-gold-2: #f0d891;
  --fd-blue: #78aefc;
  --fd-green: #54d67d;
  --fd-red: #ef6464;
  --fd-shadow: 0 18px 48px rgba(0, 0, 0, .32);

  /* ── Design foundation scale tokens (D2, 2026-06-09). Additive — nothing references
     these yet, so this introduces zero visual change. D3+ migrate inline styles onto them.
     Spec: FANTASYDOMAIN_REDESIGN_DIRECTION.md §4. ──────────────────────────────────── */

  /* Type scale — 12px floor, no text below 12px */
  --fs-2xs: 12px;   /* NEW FLOOR: eyebrows, labels, meta, pills, table micro-labels */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-display: clamp(36px, 5vw, 56px);  /* hero only */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Spacing — 8pt grid */
  --sp-0_5: 2px;  /* hairline insets only */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;

  /* Radius scale */
  --r-xs: 6px;    /* pills-in-table */
  --r-sm: 8px;    /* chips, buttons, inputs */
  --r-md: 12px;   /* cards, panels */
  --r-lg: 16px;   /* hero, modal */
  --r-pill: 999px;
  --r-circle: 50%;

  /* Shadow scale — single dark-tuned ramp (--fd-shadow above kept as --shadow-xl) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .36);   /* default card elevation */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .42);
  --shadow-xl: 0 18px 48px rgba(0, 0, 0, .32);
  --ring-gold: 0 0 0 2px rgba(216, 190, 122, .18);   /* selection */
  --ring-focus: 0 0 0 3px rgba(216, 190, 122, .55);  /* keyboard focus (D4) */

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Fonts — canonical, written once */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html,
body {
  background: var(--fd-bg) !important;
  color: var(--fd-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(216, 190, 122, .08), transparent 320px),
    radial-gradient(900px 380px at 52% -160px, rgba(216, 190, 122, .14), transparent 62%),
    var(--fd-bg);
}

button,
input,
select,
textarea {
  font-family: inherit !important;
}

.app,
.shell {
  background: transparent !important;
}

.topbar,
.top {
  min-height: 58px !important;
  background: rgba(7, 8, 6, .92) !important;
  border-bottom: 1px solid var(--fd-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 max(14px, calc((100vw - 1120px) / 2 + 18px)) !important;
}

.brand {
  color: var(--fd-gold-2) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.top .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.top .actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.top .actions .chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.mark,
.brand .mark,
.leagueBadge,
.authMark,
.launchIcon,
.dashIcon,
.champion .crown,
.rank,
.avatar,
.leagueLogo,
.addonIcon,
.playerPos,
.badge {
  background: linear-gradient(180deg, rgba(216, 190, 122, .18), rgba(216, 190, 122, .07)) !important;
  border: 1px solid var(--fd-line) !important;
  color: var(--fd-gold-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.brand .mark,
.authMark {
  background:
    #070806 url("/assets/fantasy-domain-fd-logo.png") center / contain no-repeat !important;
  border-color: rgba(216, 190, 122, .38) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.brand .mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  flex: 0 0 auto !important;
}

.authMark {
  border-radius: 12px !important;
}

.sidebar,
.left,
.right,
.rightRail {
  background: rgba(9, 10, 7, .94) !important;
  border-color: var(--fd-line) !important;
}

.main,
.wrap {
  background: transparent !important;
}

.hubtabs button,
.profileLink,
.sideLeagueHead,
.eyebrow,
.welcome p,
.sectionHead small,
.sectionTitle small,
.railLabel,
.walletLabel,
.field label,
.fieldLabel,
.pill .l,
.tag,
.badge,
.miniBadge,
.histStatLabel,
.marketRowLabel,
.challengeLine,
.sub,
.why,
.railInfo,
.row .subline,
.playerMeta,
.slotLine b,
.setting,
.empty,
.callout,
.panel p,
.setup p,
.importHint,
.authLead,
.authNotice,
.authFoot,
.fieldHint {
  color: var(--fd-muted) !important;
}

.pill .l,
.railLabel,
.matchupFocus small,
.matchupStat small,
.teams span,
.versus,
.edgeLabel,
.rivalryCard small,
.note,
.hubtabs button::before,
.matchMeta .dot {
  opacity: 1 !important;
}

.matchupFocus span,
.matchupStat span,
.teamName small,
.teamName .teamSub,
.matchCard .teamName small,
.matchCard .teamSub,
.matchCard .versus,
.matchCard .marketRowLabel,
.matchCard .edgeLabel,
.matchCard .why,
.marketPick small,
.priceButton span,
.priceButton em,
.railCard .subline,
#railLeaderboard .row .subline {
  color: var(--fd-muted) !important;
}

.hubtabs button {
  border-radius: 8px !important;
  font-weight: 780 !important;
}

.hubtabs button.active,
.launchCard.primary,
.presetRow.applied {
  background: rgba(216, 190, 122, .13) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-line-strong) !important;
}

.launchCard.primary {
  background: linear-gradient(135deg, var(--fd-gold-2), var(--fd-gold)) !important;
  color: #141109 !important;
}

.launchCard.primary b,
.launchCard.primary span,
.launchCard.primary .launchIcon {
  color: #141109 !important;
}

.launchCard.primary span {
  opacity: .82 !important;
}

.hubtabs button.active::before,
.hubtabs button.active span {
  color: var(--fd-gold-2) !important;
}

.card,
.panel,
.panel2,
.railCard,
.hero,
.heroMain,
.clockPanel,
.stat,
.dashCard,
.champion,
.matchupFocus,
.matchupStat,
.matchCard,
.miniCard,
.importCard,
.launchCard,
.lobby,
.authCard,
.identity,
.league,
.kpi,
.seg,
.toggleGrid,
.viewPills,
.marketChips,
.composerGrid,
.setup,
.empty,
.jumpCard,
.challengeCard,
.addonCard,
.rivalryCard,
.drawer,
.histLead,
.histStat,
.histBeat,
.histTableWrap,
.oddsChart,
.slotGroup,
.playerRow,
.player,
.team,
.miniRow,
.slotLine.added,
.notice,
.walletSummary,
.leagueLink,
.importInline,
.oddsTrack,
.term,
.marketPick,
.priceButton,
.previewPick,
.miniPick,
.pick,
.field,
.select,
.input,
textarea,
input,
select {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), var(--fd-panel) !important;
  border-color: var(--fd-line) !important;
  color: var(--fd-text) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035), var(--fd-shadow) !important;
  border-radius: var(--r-md) !important; /* DE2: card radius on the token scale (was hardcoded 10px) */
}

.matchupFocus,
.matchupStat,
.matchCard,
.railCard,
.stat,
.histStat {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)),
    var(--fd-panel-2) !important;
}

.hero,
.heroMain,
.importCard,
.panel,
.authCard {
  border-radius: var(--r-md) !important; /* DE2: tokenized (same 12px value) */
}

.hero {
  min-height: 220px !important;
}

.app .main > .hero {
  min-height: 154px !important;
  padding: 22px 28px !important;
  border: 1px solid var(--fd-line) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
    linear-gradient(90deg, rgba(216, 190, 122, .08), transparent 58%),
    var(--fd-panel) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

.app .main > .hero h1 {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.app .main > .hero .sub,
.app .main > .hero .pill .v {
  color: var(--fd-muted) !important;
}

.hero h1,
.welcome h1,
.welcome h2,
.panel h1,
.profile h1,
.clockHead b,
.teams,
.teamName b,
.row .main,
.league b,
.lobby h3,
.matchupFocus b,
.challengeTop b,
.addonTop b,
.rivalryCard b,
.histStatVal,
.heroMain h1,
.authCard h2,
.identity b,
.card h2,
.panel h2,
.panel2 h3,
.railCard h3,
.setup h2 {
  color: var(--fd-text) !important;
  letter-spacing: 0 !important;
}

.welcome h1 .accent,
.hero h1,
.bankroll,
.kpi b,
.walletValue,
.stat b,
.dashCard b,
.matchupStat b,
.histChamp,
.tradeHint,
.importLabel,
.freeplay b,
.miniPick .book,
.previewPick .book,
.priceButton em,
.marketPick em,
.matchMeta .badge,
.railInfo b,
.priceButton strong,
.marketPick strong,
.previewPick .main,
.miniPick .main,
.pick .main,
.playerSlot,
.oddsBar b,
.rivalryCard .line,
.challengeAmount {
  color: var(--fd-gold-2) !important;
}

.miniPick .main,
.previewPick .main,
.pick .main,
.priceButton strong,
.marketPick strong,
.walletValue,
.bankroll,
.timerValue,
.tnum,
.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-variant-numeric: tabular-nums !important;
}

.chip,
.btn,
.button,
.cta,
.miniBtn,
.draftBtn,
.expandHint,
.presetRow,
.toggleGrid button,
.seg button,
.viewPill,
.x,
.cutBtn {
  border-color: var(--fd-line) !important;
  background: rgba(216, 190, 122, .08) !important;
  color: var(--fd-text) !important;
  border-radius: var(--r-sm) !important; /* DE2: tokenized (same 8px value) */
  box-shadow: none !important;
  font-weight: 780 !important;
  letter-spacing: .04em !important;
}

.seg,
.toggleGrid {
  background: rgba(216, 190, 122, .06) !important;
  border: 1px solid var(--fd-line) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

.seg button,
.toggleGrid button,
.viewPill {
  background: transparent !important;
  color: var(--fd-muted) !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}

.seg button:not(.active),
.toggleGrid button:not(.active),
.viewPill:not(.active) {
  opacity: .86 !important;
}

.chip.primary,
.btn.primary,
.button,
.button.primary,
.cta,
.miniBtn.primary,
.draftBtn,
.seg button.active,
.toggleGrid button.active,
.viewPill.active,
.slipPlace,
.launchCard.primary {
  background: linear-gradient(180deg, var(--fd-gold-2), var(--fd-gold)) !important;
  border-color: rgba(240, 216, 145, .62) !important;
  color: #17130a !important;
}

.chip:hover,
.btn:hover,
.button:hover,
.miniBtn:hover,
.priceButton:hover,
.marketPick:hover,
.launchCard:hover,
.league:hover,
.jumpCard:hover,
.presetRow:hover,
.toggleGrid button:hover,
.viewPill:hover {
  border-color: var(--fd-line-strong) !important;
  background: rgba(216, 190, 122, .13) !important;
  transform: none !important;
}

/* DE1 (2026-06-10): gold primaries must STAY gold on hover. The generic hover wash
   above ties (or wins) on specificity against the gold-primary rule and flattened
   these to a near-transparent dark bg while their ink stays dark (#17130a) —
   live-confirmed unreadable on the homepage "Run a league audit" card. Border
   lifts to gold-2 as the hover affordance instead. */
.chip.primary:hover,
.btn.primary:hover,
.button:hover,
.button.primary:hover,
.miniBtn.primary:hover,
.launchCard.primary:hover,
.toggleGrid button.active:hover,
.viewPill.active:hover {
  background: linear-gradient(180deg, var(--fd-gold-2), var(--fd-gold)) !important;
  border-color: var(--fd-gold-2) !important;
  color: #17130a !important;
}

/* DE1 (2026-06-10): restore the authored secondary tier on .cta.secondary
   (homepage "Sample league") — the generic gold `.cta` rule above flattened it
   into a second identical gold primary next to "Import league", leaving the
   import region with two equal CTAs. Two-tier buttons per the direction doc §5:
   one gold primary per region, bordered ghost beside it. */
.cta.secondary {
  background: rgba(216, 190, 122, .08) !important;
  border: 1px solid var(--fd-line) !important;
  color: var(--fd-gold) !important;
}
.cta.secondary:hover {
  border-color: var(--fd-line-strong) !important;
  background: rgba(216, 190, 122, .13) !important;
}

/* ── DE2 (2026-06-11): card system unification ────────────────────────────────
   One card language: radius var(--r-md), 1px --fd-line border, --fd-line-strong
   on hover, gold focus ring (D4), and a press state. Density (padding/min-height)
   is intentionally NOT forced uniform — dense rows stay dense.

   (a) Radius alignment for card surfaces the shared rule above doesn't cover:
   rankings rows were 18px, rankings hero stat 14px, blog index cards 14px —
   every other card on the product is now var(--r-md). */
.rankRow,
.heroStat,
.postCard,
.blogCard {
  border-radius: var(--r-md) !important;
}

/* (b) The only off-grid card padding on the audited surfaces (lobby cards: 13px). */
.lobby {
  padding: var(--sp-3) !important;
}

/* (c) Unified press states. Pages had scattered :active rules (scale .96–.995 on
   6 selectors) but the generic hover wash above sets transform:none !important,
   which silently disabled every page-authored press (an :active element is also
   :hover). One two-tier press language, after the hover rules so it wins:
   cards compress barely, compact controls a touch more. Reduced-motion users get
   an instant state change (transitions are killed by the global guard below). */
.launchCard:active,
.contestCard:active,
.league:active,
.jumpCard:active,
.presetRow:active,
.postCard:active {
  transform: scale(.99) !important;
}

.chip:active,
.btn:active,
.button:active,
.cta:active,
.miniBtn:active,
.draftBtn:active,
.contestBtn:active,
.contestLink:active,
.priceButton:active,
.marketPick:active,
.pick:active,
.miniPick:active,
.toggleGrid button:active,
.seg button:active,
.viewPill:active {
  transform: scale(.97) !important;
}

/* ── DE4 (2026-06-11): one motion language ─────────────────────────────────────
   The skin had ZERO transition declarations — its hover washes (above), the DE1
   gold-primary hover, and the DE2 press states all snapped — while pages carried
   7 scattered durations (.08s/.1s/.12s/.14s/.15s/.25s/.3s, mixed easings). One
   canonical ease on the interactive families: state changes (hover/selection)
   at --dur-base, press feedback at --dur-fast (release eases back at --dur-base).
   Paint-safe properties only (color/border/shadow/opacity/transform) — never
   layout properties.
   DELIBERATELY NOT !important: the reduced-motion guard below is `*`-specificity
   + !important; a class-level !important shorthand here would BEAT it in the
   cascade (importance ties resolve on specificity), so non-important is what
   lets the guard zero these durations for reduced-motion users. The skin loads
   after each page's primary <style>, so the pages' scattered equal-specificity
   transitions are superseded by source order (league.html's post-skin <style>
   block was the one exception — its 5 transition declarations were removed in
   this same batch so this rule owns them too).
   Focus rings stay INSTANT by design: outline-style/width/color are excluded
   from the property list (outline-color would visibly fade from currentColor —
   a wrong-color flash); only the decorative 2px outline-offset eases at
   --dur-fast AFTER the ring is already fully visible (WCAG 2.4.7 unharmed). */
.chip, .btn, .button, .cta, .miniBtn, .draftBtn, .expandHint, .presetRow,
.seg button, .toggleGrid button, .viewPill, .x, .cutBtn,
.hubtabs button, .bottomNav a, .siteFooter a, .profileLink,
.launchCard, .contestCard, .contestBtn, .contestLink,
.league, .jumpCard, .postCard, .blogCard, .leagueLink, .row, .matchCard,
.priceButton, .marketPick, .previewPick, .miniPick, .pick,
.groupChip, .lgDropBtn, .lgOpt, .qc, .rosterToggle, .auditAction,
.xLiveTabs button, .oddsRowYes, .oddsRowNo,
.matchupFocusBtn, .h2hRecentRow, .contestCardPremium, .crystalOption,
.histReignRibbon, .histManagerLink,
.betSlip .slipPlace,
.ageGate button, .ageGate a {
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard),
    outline-offset var(--dur-fast) var(--ease-standard);
}

/* Press-down reads tactile, not teleporting: while :active every transitioned
   property runs at --dur-fast (the DE2 scale lands in 120ms); on release the
   family rule above resumes and the element eases back at --dur-base. Higher
   specificity than the family rule, so it wins while pressed; still
   non-important, so the reduced-motion guard zeroes it. */
.launchCard:active, .contestCard:active, .league:active, .jumpCard:active,
.presetRow:active, .postCard:active,
.chip:active, .btn:active, .button:active, .cta:active, .miniBtn:active,
.draftBtn:active, .contestBtn:active, .contestLink:active,
.priceButton:active, .marketPick:active, .pick:active, .miniPick:active,
.toggleGrid button:active, .seg button:active, .viewPill:active,
.histReignRibbon:active, .matchupFocusBtn:active, .h2hRecentRow:active,
.contestCardPremium:active, .crystalOption:active {
  transition-duration: var(--dur-fast);
}

/* Entrances: the consent banner and the create/admin drawers previously popped
   in with no easing (JS insertion / display:none → block). One subtle fade at
   --dur-base — opacity only, no movement. The SW update toast (site-common.js)
   already eases its own opacity in JS and respects reduced-motion there; the
   league betSlip and flToast keep their JS-coordinated entrances. Reduced
   motion: the guard zeroes animation-duration → instant appearance. */
@keyframes fd-enter {
  from { opacity: 0; }
}

.ageGate,
.drawer.show {
  animation: fd-enter var(--dur-base) var(--ease-standard);
}

.field,
.select,
.input,
textarea,
input,
select {
  background: var(--fd-bg-2) !important;
  color: var(--fd-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
  /* DE2: form controls keep their pre-DE2 10px exactly — the shared card rule above
     moved to var(--r-md); this pin keeps inputs out of the card-radius change.
     (Control-token migration to --r-sm is a separate, non-card decision.) */
  border-radius: 10px !important;
}

::placeholder {
  color: var(--fd-faint) !important;
}

.bar,
.probbar,
.edgeLine,
.oddsTrack,
.meter .bar {
  background: rgba(216, 190, 122, .12) !important;
}

.bar i,
.probbar i,
.edgeLine i,
.oddsTrack i,
.meter .bar i {
  background: linear-gradient(90deg, var(--fd-gold), var(--fd-gold-2)) !important;
}

.profit,
.row .val,
.slipPayout b,
.betSlip.placed .slipPlace,
.badge.live {
  color: var(--fd-green) !important;
}

.err,
.notice.bad,
.toast.bad,
.h2hLoss {
  color: var(--fd-red) !important;
}

.histTable,
.histTable thead,
.histTable tbody,
.histTable tr,
.histTable th,
.histTable td,
.h2hRow {
  background: transparent !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-line) !important;
}

.histTable thead,
.boardHead,
.roundNo {
  background: var(--fd-panel-2) !important;
}

.histTable tbody tr:hover,
.h2hSelf {
  background: rgba(216, 190, 122, .08) !important;
}

.priceGrid,
.grid,
.miniGrid,
.previewGrid,
.marketChips {
  gap: 8px !important;
}

.marketPick,
.priceButton,
.previewPick,
.miniPick,
.pick {
  border-radius: var(--r-sm) !important; /* DE2: pick/price controls join the button radius tier (was 9px) */
  padding: 11px 12px !important;
}

.marketPick strong,
.priceButton strong {
  color: var(--fd-gold-2) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important;
}

.marketPick span,
.priceButton span,
.previewPick .who,
.miniPick .sub,
.pick .sub,
.railLabel,
.eyebrow,
.sectionTitle h2,
.sectionHead h2,
.card h2,
.panel h2,
.panel2 h3,
.railCard h3,
.setup h2,
.importLabel {
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

#demoBoard .miniCard {
  padding: 8px 10px !important;
  border-radius: var(--r-md) !important; /* DE2: joins the card tier (was 10px) */
}

#demoBoard .miniHead {
  margin-bottom: 5px !important;
}

#demoBoard .miniGrid {
  gap: 6px !important;
}

#demoBoard .miniPick {
  min-height: 52px !important;
  padding: 7px 8px !important;
  border-radius: var(--r-sm) !important; /* DE2: tokenized (same 8px value) */
  gap: 1px !important;
}

#demoBoard .miniPick .main,
.previewPick .main,
.pick .main {
  padding: 0 !important;
  min-height: 0 !important;
  border-right: 0 !important;
}

#demoBoard .miniPick .main {
  font-size: 18px !important;
  line-height: 1 !important;
}

#demoBoard .miniPick .sub {
  margin-top: 2px !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1.15 !important;
}

#demoBoard .why {
  margin-top: 5px !important;
  font-size: var(--fs-2xs) !important;
}

.marketFooter,
.matchMeta,
.contentTop,
.sectionHead,
.panelHead,
.cardHead {
  border-color: var(--fd-line) !important;
}

.bottomNav {
  background: rgba(7, 8, 6, .92) !important;
  border-top: 1px solid var(--fd-line) !important;
}

.bottomNav a {
  color: var(--fd-muted) !important;
}

.bottomNav a.active {
  color: var(--fd-gold-2) !important;
}

/* Dark coverage for contest-first home components. Keeps Codex/Claude contest UI on the shared skin. */
.contestCard {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)), var(--fd-panel) !important;
  border-color: var(--fd-line) !important;
  color: var(--fd-text) !important;
  box-shadow: var(--fd-shadow) !important;
  border-radius: var(--r-md) !important; /* DE2: contest cards join the 12px card tier (page authored 14px) */
}

.contestCard h3,
.contestHead h2 {
  color: var(--fd-text) !important;
}

.contestCard p,
.contestHead small,
.contestNote {
  color: var(--fd-muted) !important;
}

.contestKicker {
  color: var(--fd-gold-2) !important;
}

.contestPill,
.scopePill {
  background: var(--fd-panel-3) !important;
  border-color: var(--fd-line) !important;
  color: var(--fd-muted) !important;
}

.contestCard.selected {
  border-color: var(--fd-line-strong) !important;
  background: var(--fd-panel-2) !important;
  box-shadow: 0 0 0 2px rgba(216, 190, 122, .18), var(--fd-shadow) !important;
}

.contestCard.selected .contestPill,
.scopePill.primary {
  background: rgba(216, 190, 122, .14) !important;
  border-color: var(--fd-line-strong) !important;
  color: var(--fd-gold-2) !important;
}

.chip,
.contestPill,
.scopePill,
.walletBadge,
.miniBadge,
.badge,
.tag,
.viewPill,
.matchTag,
.chStatus,
.miniPill,
.pchip,
.modeBadge,
.propGraphBtn,
.league em,
.stakeTypePill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.contestPill,
.scopePill,
.miniBadge,
.badge,
.tag,
.matchTag,
.miniPill,
.pchip {
  min-height: 22px !important;
}

/* 2026-05-28 — finish pill normalization for uneven badge baselines.
   walletBadge/chStatus/modeBadge/stakeTypePill are already inline-flex-centered above (L711-733)
   but lacked the 22px floor → ragged baselines next to the pinned pills. */
.walletBadge,
.chStatus,
.modeBadge,
.stakeTypePill {
  min-height: 22px !important;
}
/* miniBadge + pchip were the only 4px-square outliers — round them so the whole status family matches. */
.miniBadge,
.pchip {
  border-radius: 999px !important;
}

[hidden] {
  display: none !important;
}

.siteFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(14px, 3vw, 28px);
  border-top: 1px solid var(--fd-line);
  background: rgba(7, 8, 6, .96);
  color: var(--fd-muted);
  font-size: 12px;
  font-weight: 760;
}

.siteFooter strong {
  display: block;
  color: var(--fd-text);
  font-size: 13px;
  font-weight: 900;
}

.siteFooter span {
  display: block;
  margin-top: 3px;
  max-width: 56ch;
  line-height: 1.45;
}

.siteFooter nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.siteFooter a {
  color: var(--fd-gold-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.siteFooter a:hover,
.siteFooter a:focus-visible {
  color: var(--fd-text);
}

.ageGate {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 120;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--fd-line-strong);
  border-radius: 12px;
  background: rgba(15, 16, 11, .98);
  color: var(--fd-text);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
  padding: 14px;
}

.ageGate b {
  display: block;
  color: var(--fd-gold-2);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ageGate span {
  display: block;
  margin-top: 4px;
  color: var(--fd-muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 760;
}

.ageGateActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ageGate button,
.ageGate a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--fd-line);
  background: rgba(216, 190, 122, .08);
  color: var(--fd-text);
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.ageGate button {
  background: linear-gradient(180deg, var(--fd-gold-2), var(--fd-gold));
  border-color: rgba(240, 216, 145, .62);
  color: #17130a;
}

.contestBtn {
  background: linear-gradient(180deg, var(--fd-gold-2), var(--fd-gold)) !important;
  color: #1a1606 !important;
}

.contestLink,
.intentBar {
  background: var(--fd-panel-2) !important;
  border-color: var(--fd-line) !important;
  color: var(--fd-gold-2) !important;
}

.intentBar {
  border-color: var(--fd-line-strong) !important;
}

.stakesStrip {
  background: var(--fd-panel) !important;
  border-color: var(--fd-line) !important;
  box-shadow: var(--fd-shadow) !important;
}

.stakesStrip b {
  background: var(--fd-panel-3) !important;
  color: var(--fd-text) !important;
}

.stakesStrip span,
.stakesStrip small {
  color: var(--fd-muted) !important;
}

.betSlip {
  background: var(--fd-panel) !important;
  border-color: var(--fd-line-strong) !important;
  color: var(--fd-text) !important;
  border-radius: 12px !important;
}

.betSlip .slipPick,
.betSlip .slipStakeInput {
  background: var(--fd-bg-2) !important;
  border-color: var(--fd-line) !important;
}

.slot,
.cell,
.boardWrap,
.boardHead,
.headCell {
  background: var(--fd-panel) !important;
  border-color: var(--fd-line) !important;
  color: var(--fd-text) !important;
}

.slot.on,
.team.active,
.priceButton.selected,
.marketPick.selected {
  outline-color: var(--fd-gold-2) !important;
  background: rgba(216, 190, 122, .12) !important;
}

.skeleton {
  background: linear-gradient(90deg, var(--fd-panel), var(--fd-panel-2), var(--fd-panel)) !important;
  background-size: 240% 100% !important;
}

@media (max-width: 760px) {
  .topbar,
  .top {
    min-height: 52px !important;
  }

  .top {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 8px 12px !important;
  }

  .top .actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* DE1 (2026-06-10): solid, not rgba(7,8,6,.96) — at ≤760px .sidebar is a sticky
     tab bar (fd-home top:52px, league top:44px) and the 4% translucency let the
     oversized hero heading ghost through behind the tab labels mid-scroll
     (L19 frontend audit P3). Solid --fd-bg keeps labels legible at every scroll
     position and is robust under reduced-motion/forced-colors (no blur needed). */
  .sidebar,
  .left {
    background: var(--fd-bg) !important;
  }

  .hero {
    min-height: auto !important;
  }

  .siteFooter,
  .ageGate {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .siteFooter nav,
  .ageGateActions {
    justify-content: flex-start;
  }
}

/* ── D4 (2026-06-10): keyboard focus + reduced motion ─────────────────────────
   One theme-matched focus indicator for the whole product. Pages historically set
   outline:0 on :focus-visible (54 declarations) leaving keyboard users with either
   nothing or the UA-default blue. This shared rule is loaded last and uses !important,
   so it wins over every page-level suppression without touching 54 call sites.
   WCAG 2.4.7. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fd-gold-2) !important;
  outline-offset: 2px !important;
}

/* Global motion guard (WCAG 2.3.3): kill animation/transition time and the topbar
   backdrop blur for users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .topbar, .top {
    backdrop-filter: none !important;
  }
}

/* ── D5 (2026-06-10): 44px touch-target floor on coarse pointers (WCAG 2.5.8).
   Targets the controls the audits MEASURED below 44px (22-39px): segmented buttons,
   toggle/view pills, arena picks + group chips, homepage mini-badges + explore actions,
   audit pills, news tabs, footer legal links, age-gate buttons. Non-interactive status
   badges keep their compact visual size.
   P4 (2026-06-10): hero action buttons (league Saga/Update league, mock-draft) escaped
   this floor — pages declare `.hero .actions .btn{min-height:36px!important}` AFTER this
   stylesheet, so the extra type selector (0,3,1 beats 0,3,0) is required for the floor
   to win at coarse pointer; fine-pointer desktop keeps the intentional 36px compact look. */
@media (pointer: coarse) {
  .seg button, .toggleGrid button, .viewPill, .bottomNav a, .pick,
  .miniBadge, .xLiveTabs button, .auditAction, .groupChip,
  .exploreUseBtn, .exploreSampleLink, .auditReportBtn, .walletExampleLink,
  .siteFooter a, .ageGate button, .ageGate a,
  .hero .actions a.btn, .hero .actions button.btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── D7a (2026-06-10): structural accessibility utilities. */

/* Skip-to-content link (WCAG 2.4.1): first focusable element on each page;
   off-screen until keyboard focus lands on it. */
.skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}

.skipLink:focus {
  left: 12px;
  top: 12px;
  background: var(--fd-gold, #d8be7a);
  color: #17130a;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}

/* Visually-hidden utility (table captions, AT-only labels). */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Quiet dismiss control on the free-play/age notice (WCAG 2.4.11 focus not
   obscured): lets users clear the fixed bottom banner without acknowledging 18+.
   Inherits size/alignment from the `.ageGate button` base rule. */
.ageGate .ageGateClose {
  min-width: 44px;
  padding: 9px;
  background: transparent;
  border-color: var(--fd-line);
  color: var(--fd-muted);
  font-size: 14px;
}

.ageGate .ageGateClose:hover,
.ageGate .ageGateClose:focus-visible {
  color: var(--fd-text);
  border-color: var(--fd-line-strong);
}

/* ── DE3 (2026-06-11): branded loading skeletons + empty-state unification.
   Skeletons are markup-only placeholders baked into each page's data containers
   (league #board/#railLeaderboard, open-leagues #lobbies, rankings #board,
   arena wallet/board/standings/activity, profile #leagues). Every render path
   replaces the container innerHTML wholesale, so no JS owns these blocks.
   Pulse is opacity-only and dies under the global reduced-motion guard above
   (duration .01ms / iteration-count 1 → static panel blocks). */
.fd-skel {
  border: 1px solid var(--fd-line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    var(--fd-panel);
  animation: fd-skel-pulse 1.6s ease-in-out infinite;
}

.fd-skel:nth-child(even) {
  animation-delay: .4s;
}

@keyframes fd-skel-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: .95; }
}

.fd-skelGroup {
  display: grid;
  gap: 10px;
}

/* Inline value placeholder for stat tiles that booted with literal "Loading" text. */
.fd-skel.fd-skel-line {
  display: inline-block;
  height: 12px;
  width: 44px;
  border: 0;
  border-radius: 6px;
  background: rgba(216, 190, 122, .16);
  vertical-align: middle;
  animation: fd-skel-pulse 1.6s ease-in-out infinite;
}

/* Block sizes per surface — sized from live Playwright measurements of the final
   rendered layout (CLS guard; league stat tile 105px, market card 422/446px,
   rail row 81px), so the data swap-in does not jump. */
.fd-skel-stat { height: 104px; }
.fd-skel-pill { height: 30px; width: 120px; border-radius: var(--r-sm); }
.fd-skel-card { height: 420px; }
.fd-skel-row { height: 44px; }
.fd-skel-rail { height: 80px; }
.fd-skel-rank { height: 66px; }
.fd-skel-lobby { height: 188px; }
.fd-skel-mkt { height: 204px; }
.fd-skel-block { height: 44px; }
.fd-skel-league { height: 60px; }
.fd-skel-feat { height: 500px; }
.fd-skel-chips { height: 70px; }

@media (max-width: 760px) {
  .fd-skel-card { height: 446px; }
  .fd-skel-rank { height: 150px; }
  .fd-skel-lobby { height: 210px; }
  .fd-skel-mkt { height: 250px; }
  .fd-skel-block { height: 66px; }
  .fd-skel-feat { height: 690px; }
  .fd-skel-chips { height: 40px; }
}

/* Empty states: one placeholder language sitewide. The card groups above already
   unify .empty ink/panel/radius; the league hub was the lone surface drawing
   empty panes with a solid border. Dashed everywhere — open-leagues' "No lobbies
   match those filters" panel is the reference pattern. */
.empty {
  border-style: dashed !important;
}

/* ── HD1 (2026-06-15): premium football-product finish layer.
   This is intentionally CSS-only: stronger hierarchy, tighter sportsbook-style
   cards, tabular prices, and mobile guardrails without changing data/API flows. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(216, 190, 122, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(216, 190, 122, .035) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.42), transparent 72%);
  opacity: .34;
}

.main,
.wrap,
.page,
.content {
  min-width: 0 !important;
}

.card,
.panel,
.panel2,
.railCard,
.hero,
.matchCard,
.marketPick,
.priceButton,
.pick,
.row,
.league,
.rankRow,
.postCard,
.blogCard,
.boardPanel,
.walletModal,
.betSlip,
.slipTicket,
.openTicket,
.ticket,
.entryCard {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 0 rgba(216,190,122,.06),
    0 16px 42px rgba(0,0,0,.30) !important;
}

.card:hover,
.panel2:hover,
.railCard:hover,
.matchCard:hover,
.marketPick:hover,
.priceButton:hover,
.pick:hover,
.row:hover,
.league:hover,
.rankRow:hover {
  border-color: rgba(240,216,145,.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(216,190,122,.10),
    0 18px 46px rgba(0,0,0,.34) !important;
}

.hero h1,
.welcome h1,
.welcome h2,
.authCard h2,
.panel h1,
.profile h1 {
  letter-spacing: -.025em !important;
}

.walletValue,
.bankroll,
.stat b,
.dashCard b,
.matchupStat b,
.marketPick strong,
.priceButton strong,
.previewPick .main,
.miniPick .main,
.pick .main,
.row .val,
.tnum,
.timerValue,
.slipPayout b,
.challengeAmount {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: -.035em !important;
}

.marketPick,
.priceButton,
.pick,
.previewPick,
.miniPick {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.marketPick strong,
.priceButton strong,
.pick .main {
  line-height: 1.02 !important;
}

.marketPick span,
.marketPick small,
.priceButton span,
.priceButton em,
.pick .sub,
.pick .book {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.matchCard .marketFooter,
.marketFooter {
  align-items: center !important;
}

.matchCard .moreBtn,
.matchCard .btn,
.marketFooter .btn,
.marketFooter a,
.marketFooter button {
  justify-self: end !important;
}

.histTable th,
.histTable td,
.lbTable th,
.lbTable td {
  vertical-align: middle !important;
}

.histTable td:nth-child(n+3),
.histTable th:nth-child(n+3),
.lbTable td:nth-child(n+3),
.lbTable th:nth-child(n+3) {
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* Open entries should read like a clean betting ticket: market on the left,
   status/value/action centered as a compact settlement rail on the right. */
.entryCard,
.openTicket,
.ticket,
.slipTicket,
.wagerTicket,
.wagerCard,
.betRow {
  border-radius: var(--r-md) !important;
}

.cashOut,
.cashout,
[data-cash-out],
.cashOutBtn,
.cashoutBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 44px !important;
  border-radius: var(--r-pill) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

@media (min-width: 900px) {
  .matchCard .marketFooter,
  .marketFooter {
    grid-template-columns: minmax(0,1fr) minmax(220px,auto) !important;
  }
}

@media (max-width: 760px) {
  body::after { opacity: .20; background-size: 72px 72px; }

  .card,
  .panel,
  .panel2,
  .railCard,
  .matchCard,
  .rankRow,
  .league,
  .hero,
  .authCard {
    border-radius: 10px !important;
  }

  .marketPick,
  .priceButton,
  .pick,
  .previewPick,
  .miniPick {
    min-height: 58px !important;
    padding: 10px 9px !important;
  }

  .marketPick strong,
  .priceButton strong,
  .pick .main {
    font-size: clamp(18px, 6vw, 24px) !important;
  }

  .marketFooter,
  .matchCard .marketFooter {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .matchCard .moreBtn,
  .matchCard .btn,
  .marketFooter .btn,
  .marketFooter a,
  .marketFooter button {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .histTableWrap,
  .boardWrap,
  .priceGrid,
  .marketChips {
    max-width: 100% !important;
  }
}