/* Fantasy Domain shared product skin. Loaded last to unify the prototype pages. */
: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: #9b907c;
  --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);
}

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;
}

.brand {
  color: var(--fd-gold-2) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !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: 10px !important;
}

.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: 12px !important;
}

.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,
.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: 8px !important;
  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;
}

.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;
}

::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: 9px !important;
  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: 10px !important;
}

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

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

#demoBoard .miniPick {
  min-height: 52px !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
  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: 9px !important;
  line-height: 1.15 !important;
}

#demoBoard .why {
  margin-top: 5px !important;
  font-size: 10px !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;
}

.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;
}

/* CC 2026-05-28 — finish pill normalization (Walt: "uneven bubbles that dont line up").
   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: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

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

.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: 40px;
  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: 11px;
  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;
  }

  .sidebar,
  .left {
    background: rgba(7, 8, 6, .96) !important;
  }

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

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

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