/*
 * FindBestBet premium sports typography.
 * Canary-only visual override.
 */

:root {
  --fbb-font-display:
    "Oswald",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

  --fbb-font-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --fbb-bg:
    #0b0f16;

  --fbb-surface:
    #121823;

  --fbb-surface-soft:
    #182130;

  --fbb-surface-hover:
    #202a39;

  --fbb-text:
    #f8fafc;

  --fbb-text-soft:
    #cbd5e1;

  --fbb-text-muted:
    #8a98aa;

  --fbb-text-disabled:
    #5f6c7b;

  --fbb-primary:
    #38bdf8;

  --fbb-secondary:
    #8b5cf6;

  --fbb-accent:
    #5eead4;

  --fbb-positive:
    #34d399;

  --fbb-warning:
    #fbbf24;

  --fbb-danger:
    #fb7185;

  --fbb-live:
    #ff4d5a;

  --fbb-border:
    rgba(148,163,184,.14);

  --fbb-border-strong:
    rgba(148,163,184,.24);
}


/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */

html,
body {
  background:
    var(--fbb-bg);
}


body,
button,
input,
select,
textarea {
  font-family:
    var(--fbb-font-body) !important;
}


body {
  color:
    var(--fbb-text-soft);

  font-size:
    15px;

  line-height:
    1.6;

  font-weight:
    400;

  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "tnum" 1;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


p,
li,
td,
label,
input,
button,
select,
textarea {
  font-family:
    var(--fbb-font-body) !important;
}


h1,
h2,
.match-title,
.match-name,
.prediction-pick,
.pick-value,
.score,
.score-value,
.hero-title,
.section-title {
  font-family:
    var(--fbb-font-display) !important;

  font-optical-sizing:
    auto;

  letter-spacing:
    .012em;
}


h1 {
  color:
    var(--fbb-text);

  font-size:
    clamp(29px,4.8vw,43px);

  font-weight:
    650;

  line-height:
    1.08;
}


h2 {
  color:
    var(--fbb-text);

  font-size:
    clamp(21px,3vw,28px);

  font-weight:
    620;

  line-height:
    1.16;
}


h3 {
  color:
    var(--fbb-text-soft);

  font-size:
    17px;

  font-weight:
    750;

  line-height:
    1.3;
}


p {
  color:
    var(--fbb-text-soft);
}


strong,
b {
  color:
    var(--fbb-text);

  font-weight:
    750;
}


small,
.meta,
.timestamp,
.source-note,
.summary-label,
.match-date,
.kickoff,
.competition-name {
  color:
    var(--fbb-text-muted);
}


/* =========================================================
   MATCH HERO AND PICK
   ========================================================= */

#predictionCardTitle,
.prediction-card h1,
.prediction-card h2,
.match-header h1,
.match-header h2 {
  color:
    var(--fbb-text) !important;

  text-shadow:
    0 3px 22px
    rgba(0,0,0,.32);
}


.prediction-pick,
.pick-value,
.prediction-value,
.recommended-pick {
  color:
    var(--fbb-accent) !important;

  font-family:
    var(--fbb-font-display) !important;

  font-size:
    clamp(22px,3.8vw,34px);

  font-weight:
    700;

  letter-spacing:
    .018em;
}


.score,
.score-value,
.match-score {
  color:
    var(--fbb-text) !important;

  font-family:
    var(--fbb-font-display) !important;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;
}


.confidence,
.confidence-value,
.odds,
.odds-value {
  font-family:
    var(--fbb-font-body) !important;

  font-variant-numeric:
    tabular-nums;

  font-weight:
    800;
}


/* =========================================================
   CARDS AND SURFACES
   ========================================================= */

.card,
.section,
.prediction-card,
#fbbLast5Averages,
#fbbLeagueIntelligence {
  border:
    1px solid
    var(--fbb-border);

  background:
    linear-gradient(
      145deg,
      rgba(56,189,248,.035),
      rgba(18,24,35,.985) 31%,
      rgba(18,24,35,.985) 69%,
      rgba(139,92,246,.04)
    );

  box-shadow:
    0 20px 58px
    rgba(0,0,0,.19);
}


.card:hover {
  border-color:
    var(--fbb-border-strong);
}


/* =========================================================
   TABLES AND STATISTICS
   ========================================================= */

table,
.stats,
.statistics,
.odds,
.confidence,
.score,
.fbb-last5-value,
.fbb-position-rank,
.fbb-position-points {
  font-variant-numeric:
    tabular-nums;
}


table {
  color:
    var(--fbb-text-soft);

  font-family:
    var(--fbb-font-body) !important;

  font-size:
    13px;
}


table th {
  color:
    var(--fbb-text-muted) !important;

  font-family:
    var(--fbb-font-body) !important;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .065em;

  text-transform:
    uppercase;
}


table td {
  color:
    var(--fbb-text-soft);

  font-size:
    12px;

  font-weight:
    550;
}


table td strong,
table td b {
  color:
    var(--fbb-text);
}


/* =========================================================
   LEAGUE INTELLIGENCE
   ========================================================= */

.fbb-league-identity {
  color:
    #dbeafe !important;

  font-family:
    var(--fbb-font-body) !important;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}


.fbb-position-team,
.fbb-canonical-team span,
.fbb-standings-team span {
  color:
    var(--fbb-text) !important;

  font-weight:
    750;
}


.fbb-position-rank {
  color:
    var(--fbb-primary) !important;

  font-family:
    var(--fbb-font-display) !important;

  font-size:
    23px;

  font-weight:
    700;
}


.fbb-position-points {
  color:
    var(--fbb-text-muted) !important;

  font-size:
    11px;

  font-weight:
    700;
}


.fbb-position-versus {
  color:
    var(--fbb-secondary) !important;

  font-family:
    var(--fbb-font-display) !important;

  font-weight:
    650;
}


/* =========================================================
   LAST FIVE AVERAGES
   ========================================================= */

#fbbLast5Averages {
  border:
    1px solid
    var(--fbb-border) !important;

  background:
    linear-gradient(
      145deg,
      rgba(56,189,248,.045),
      rgba(18,24,35,.99) 31%,
      rgba(18,24,35,.99) 70%,
      rgba(139,92,246,.045)
    ) !important;
}


.fbb-last5-heading h2 {
  color:
    var(--fbb-text) !important;

  font-family:
    var(--fbb-font-display) !important;

  font-weight:
    650;
}


.fbb-last5-subtitle,
.fbb-last5-footnote {
  color:
    var(--fbb-text-muted) !important;
}


.fbb-last5-team {
  color:
    var(--fbb-text) !important;

  font-weight:
    800;
}


.fbb-last5-metric {
  color:
    var(--fbb-text-soft) !important;

  font-weight:
    650;
}


.fbb-last5-value {
  color:
    var(--fbb-text) !important;

  font-size:
    17px;

  font-weight:
    850;
}


.fbb-last5-value.is-leading {
  color:
    var(--fbb-positive) !important;

  background:
    linear-gradient(
      135deg,
      rgba(52,211,153,.085),
      transparent
    ) !important;
}


.fbb-last5-value.is-warning {
  color:
    var(--fbb-warning) !important;
}


.fbb-last5-value.is-unavailable {
  color:
    var(--fbb-text-disabled) !important;
}


/* =========================================================
   STATUS AND FORM
   ========================================================= */

.status-live,
.is-live,
.live-badge,
.live-dot {
  color:
    var(--fbb-live) !important;
}


.status-won,
.pick-won,
.is-win,
.chip-win {
  color:
    #03251d !important;

  background:
    var(--fbb-positive) !important;
}


.status-draw,
.is-draw,
.chip-draw {
  color:
    #261900 !important;

  background:
    var(--fbb-warning) !important;
}


.status-lost,
.pick-lost,
.is-loss,
.chip-loss {
  color:
    #ffffff !important;

  background:
    var(--fbb-danger) !important;
}


/* =========================================================
   BUTTONS AND LINKS
   ========================================================= */

a {
  color:
    var(--fbb-primary);
}


a:hover {
  color:
    #7dd3fc;
}


button,
.btn,
.button {
  font-family:
    var(--fbb-font-body) !important;

  font-weight:
    800;

  letter-spacing:
    .015em;
}


.btn-primary,
.button-primary,
.cta-primary {
  border-color:
    rgba(56,189,248,.45) !important;

  color:
    #06131b !important;

  background:
    linear-gradient(
      135deg,
      #38bdf8,
      #5eead4
    ) !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.fbb-nav-link,
.bottom-nav a,
.dropdown-menu a,
header nav a {
  font-family:
    var(--fbb-font-body) !important;

  font-size:
    12px;

  font-weight:
    750;

  letter-spacing:
    .025em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px) {
  body {
    font-size:
      14px;

    line-height:
      1.55;
  }


  h1 {
    font-size:
      clamp(26px,9vw,35px);
  }


  h2 {
    font-size:
      clamp(19px,6vw,25px);
  }


  table {
    font-size:
      12px;
  }


  table th {
    font-size:
      9px;

    letter-spacing:
      .045em;
  }


  table td {
    font-size:
      11px;
  }


  .fbb-last5-value {
    font-size:
      15px;
  }


  .prediction-pick,
  .pick-value,
  .prediction-value,
  .recommended-pick {
    font-size:
      clamp(21px,7vw,29px);
  }
}