/*
 * FindBestBet complete prediction-page optimization.
 * Final desktop, tablet and mobile override.
 */

html.fbb-responsive-optimized {
  color-scheme:dark;

  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}


html.fbb-responsive-optimized,
html.fbb-responsive-optimized body {
  width:100%;
  max-width:100%;

  overflow-x:clip;
}


html.fbb-responsive-optimized *,
html.fbb-responsive-optimized *::before,
html.fbb-responsive-optimized *::after {
  box-sizing:border-box;
}


html.fbb-responsive-optimized img,
html.fbb-responsive-optimized svg,
html.fbb-responsive-optimized video,
html.fbb-responsive-optimized iframe {
  max-width:100%;
}


html.fbb-responsive-optimized img {
  height:auto;
}


html.fbb-responsive-optimized body {
  min-height:100vh;

  margin:0;

  background:#0b0f16;

  color:#cbd5e1;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


/* =========================================================
   MAIN PAGE WIDTH
   ========================================================= */

html.fbb-responsive-optimized main {
  width:100%;
  max-width:1280px;

  margin-inline:auto;

  padding-inline:
    clamp(14px,2.2vw,28px);
}


html.fbb-responsive-optimized main > * {
  min-width:0;
  max-width:100%;
}


html.fbb-responsive-optimized
main .card,

html.fbb-responsive-optimized
main .section,

html.fbb-responsive-optimized
main section,

html.fbb-responsive-optimized
main article {
  min-width:0;
  max-width:100%;
}


/* =========================================================
   PRIMARY DESKTOP LAYOUT
   ========================================================= */

html.fbb-responsive-optimized
#fbbPredictionLeagueGrid {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:
    22px 0 !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.14fr)
    minmax(400px,.86fr) !important;

  align-items:start !important;

  gap:
    clamp(18px,2vw,26px) !important;
}


html.fbb-responsive-optimized
#fbbPredictionLeagueGrid > * {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:0 !important;
}


html.fbb-responsive-optimized
#fbbPredictionLeagueGrid >
.fbb-prediction-primary-card,

html.fbb-responsive-optimized
#fbbPredictionLeagueGrid >
#fbbLeagueIntelligence {
  align-self:start;
}


html.fbb-responsive-optimized
#fbbPredictionLeagueGrid
.fbb-prediction-primary-card {
  padding:
    clamp(18px,2vw,26px) !important;
}


html.fbb-responsive-optimized
#fbbPredictionLeagueGrid
#fbbLeagueIntelligence {
  padding:
    clamp(16px,1.8vw,22px) !important;
}


/* =========================================================
   GENERAL CARD SYSTEM
   ========================================================= */

html.fbb-responsive-optimized
main .card,

html.fbb-responsive-optimized
main .section {
  overflow:hidden;

  border:
    1px solid
    rgba(148,163,184,.14);

  border-radius:
    18px;

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

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.18);
}


html.fbb-responsive-optimized
main .card + .card,

html.fbb-responsive-optimized
main .section + .section {
  margin-top:18px;
}


/* =========================================================
   TYPOGRAPHY AND OVERFLOW
   ========================================================= */

html.fbb-responsive-optimized
h1 {
  margin-top:0;

  font-size:
    clamp(30px,4vw,44px);

  line-height:1.08;

  overflow-wrap:anywhere;
}


html.fbb-responsive-optimized
h2 {
  font-size:
    clamp(21px,2.5vw,28px);

  line-height:1.18;

  overflow-wrap:anywhere;
}


html.fbb-responsive-optimized
h3 {
  font-size:
    clamp(16px,1.8vw,19px);

  line-height:1.3;
}


html.fbb-responsive-optimized
p,

html.fbb-responsive-optimized
li,

html.fbb-responsive-optimized
td,

html.fbb-responsive-optimized
th,

html.fbb-responsive-optimized
span,

html.fbb-responsive-optimized
strong {
  overflow-wrap:anywhere;
}


html.fbb-responsive-optimized
p {
  line-height:1.65;
}


/* =========================================================
   PREDICTION CONTENT
   ========================================================= */

html.fbb-responsive-optimized
#predictionContent,

html.fbb-responsive-optimized
#predictionText,

html.fbb-responsive-optimized
.fbb-static-preview,

html.fbb-responsive-optimized
#scoreCenterBox,

html.fbb-responsive-optimized
#matchHighlights,

html.fbb-responsive-optimized
#playersToWatch,

html.fbb-responsive-optimized
#keyInsights,

html.fbb-responsive-optimized
#relatedMatches {
  width:100%;
  max-width:100%;
  min-width:0;
}


html.fbb-responsive-optimized
.prediction-pick,

html.fbb-responsive-optimized
.pick-value,

html.fbb-responsive-optimized
.prediction-value,

html.fbb-responsive-optimized
.recommended-pick {
  line-height:1.12;

  overflow-wrap:anywhere;
}


/* =========================================================
   LEAGUE IDENTITY
   ========================================================= */

html.fbb-responsive-optimized
.fbb-league-identity {
  width:100%;
  min-width:0;

  display:flex !important;
  align-items:center !important;

  gap:8px;

  margin-bottom:12px;
}


html.fbb-responsive-optimized
.fbb-league-identity-name {
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


html.fbb-responsive-optimized
.fbb-league-country-flag {
  flex:none;
}


/* =========================================================
   POSITION SUMMARY
   ========================================================= */

html.fbb-responsive-optimized
#fbbCanonicalPositionSummary {
  width:100%;
  min-width:0;

  margin:
    12px 0 !important;

  padding:
    12px 13px !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  align-items:center;

  gap:10px;
}


html.fbb-responsive-optimized
#fbbCanonicalPositionSummary
.fbb-position-team {
  min-width:0;
}


html.fbb-responsive-optimized
#fbbCanonicalPositionSummary
.fbb-position-team:last-child {
  text-align:right;
}


html.fbb-responsive-optimized
.fbb-position-team-text {
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;
}


html.fbb-responsive-optimized
.fbb-position-team-name {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


html.fbb-responsive-optimized
.fbb-position-team-data {
  white-space:normal;
}


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

html.fbb-responsive-optimized
#fbbLeagueIntelligence >
#fbbLast5Averages {
  width:100%;
  max-width:100%;
  min-width:0;

  margin:
    14px 0 12px !important;

  padding:
    clamp(14px,1.5vw,18px) !important;

  overflow:hidden;
}


html.fbb-responsive-optimized
.fbb-last5-heading {
  gap:12px;

  align-items:flex-start;
}


html.fbb-responsive-optimized
.fbb-last5-heading > div {
  min-width:0;
}


html.fbb-responsive-optimized
.fbb-last5-team-head,

html.fbb-responsive-optimized
.fbb-last5-row {
  width:100%;
  min-width:0;

  grid-template-columns:
    minmax(135px,1.15fr)
    minmax(78px,.85fr)
    minmax(78px,.85fr) !important;
}


html.fbb-responsive-optimized
.fbb-last5-team,

html.fbb-responsive-optimized
.fbb-last5-metric,

html.fbb-responsive-optimized
.fbb-last5-value {
  min-width:0;
}


html.fbb-responsive-optimized
.fbb-last5-team span {
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


html.fbb-responsive-optimized
.fbb-last5-metric {
  line-height:1.25;
}


html.fbb-responsive-optimized
.fbb-last5-value {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   CLASSIFICATION DROPDOWN AND TABLE
   ========================================================= */

html.fbb-responsive-optimized
#fbbLeagueIntelligence details,

html.fbb-responsive-optimized
#fbbLeagueIntelligence
.fbb-standings-details,

html.fbb-responsive-optimized
#fbbLeagueIntelligence
.fbb-ranking-dropdown,

html.fbb-responsive-optimized
#fbbLeagueIntelligence
.fbb-classification-dropdown {
  width:100%;
  max-width:100%;
  min-width:0;
}


html.fbb-responsive-optimized
#fbbLeagueIntelligence details > summary {
  min-height:48px;

  padding:
    12px 14px;

  display:flex;
  align-items:center;

  cursor:pointer;

  touch-action:manipulation;
}


html.fbb-responsive-optimized
.fbb-standings-table-wrap,

html.fbb-responsive-optimized
.fbb-ranking-table-wrap,

html.fbb-responsive-optimized
[data-fbb-scroll-container="1"] {
  width:100%;
  max-width:100%;

  overflow-x:auto;
  overflow-y:hidden;

  overscroll-behavior-inline:contain;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:thin;
}


html.fbb-responsive-optimized
.fbb-standings-table,

html.fbb-responsive-optimized
.fbb-ranking-table {
  width:100%;

  min-width:620px;

  border-collapse:collapse;

  font-variant-numeric:
    tabular-nums;
}


html.fbb-responsive-optimized
.fbb-standings-table th,

html.fbb-responsive-optimized
.fbb-standings-table td,

html.fbb-responsive-optimized
.fbb-ranking-table th,

html.fbb-responsive-optimized
.fbb-ranking-table td {
  padding:
    9px 8px;

  white-space:nowrap;
}


/* =========================================================
   RECENT FORM BELOW CLASSIFICATION
   ========================================================= */

html.fbb-responsive-optimized
#fbbLeagueIntelligence >
.fbb-recent-form-under-classification {
  width:100%;
  max-width:100%;
  min-width:0;

  margin:
    14px 0 0 !important;

  padding:
    clamp(14px,1.5vw,18px) !important;
}


html.fbb-responsive-optimized
#fbbLeagueIntelligence
.fbb-normal-form-grid {
  width:100%;
  min-width:0;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:12px !important;
}


html.fbb-responsive-optimized
.fbb-form-column,

html.fbb-responsive-optimized
.fbb-form-list,

html.fbb-responsive-optimized
.fbb-form-match {
  min-width:0;
}


html.fbb-responsive-optimized
.fbb-form-match {
  grid-template-columns:
    30px minmax(0,1fr);

  align-items:center;
}


html.fbb-responsive-optimized
.fbb-form-match > *:last-child {
  min-width:0;

  overflow-wrap:anywhere;
}


/* =========================================================
   PLAYERS, INSIGHTS AND RELATED MATCHES
   ========================================================= */

html.fbb-responsive-optimized
.fbb-normal-player-grid {
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    clamp(12px,1.5vw,17px);
}


html.fbb-responsive-optimized
.fbb-normal-player-card {
  min-width:0;
}


html.fbb-responsive-optimized
#relatedMatches {
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%,250px),
        1fr
      )
    );

  gap:14px;
}


html.fbb-responsive-optimized
.fbb-related-prediction,

html.fbb-responsive-optimized
.fbb-related-teams {
  min-width:0;
}


html.fbb-responsive-optimized
.fbb-related-teams strong {
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* =========================================================
   BUTTONS, LINKS AND ACCESSIBILITY
   ========================================================= */

html.fbb-responsive-optimized
button,

html.fbb-responsive-optimized
.btn,

html.fbb-responsive-optimized
.button,

html.fbb-responsive-optimized
details > summary,

html.fbb-responsive-optimized
a.fbb-nav-link {
  min-height:44px;
}


html.fbb-responsive-optimized
a,

html.fbb-responsive-optimized
button,

html.fbb-responsive-optimized
summary {
  touch-action:manipulation;
}


html.fbb-responsive-optimized
:focus-visible {
  outline:
    3px solid
    rgba(56,189,248,.72);

  outline-offset:3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1080px) {
  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid {
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:18px !important;
  }


  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid >
  #fbbLeagueIntelligence {
    width:100% !important;
  }


  html.fbb-responsive-optimized
  .fbb-normal-player-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


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

@media(max-width:680px) {
  html.fbb-responsive-optimized main {
    padding-inline:
      10px;
  }


  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid {
    margin:
      12px 0 !important;

    gap:
      12px !important;
  }


  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid
  .fbb-prediction-primary-card,

  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid
  #fbbLeagueIntelligence {
    padding:
      14px 10px !important;

    border-radius:
      15px;
  }


  html.fbb-responsive-optimized
  main .card,

  html.fbb-responsive-optimized
  main .section {
    border-radius:
      15px;
  }


  html.fbb-responsive-optimized
  h1 {
    font-size:
      clamp(25px,8vw,34px);
  }


  html.fbb-responsive-optimized
  h2 {
    font-size:
      clamp(19px,6vw,24px);
  }


  html.fbb-responsive-optimized
  #fbbCanonicalPositionSummary {
    padding:
      10px 7px !important;

    grid-template-columns:
      minmax(0,1fr)
      auto
      minmax(0,1fr);

    gap:5px;
  }


  html.fbb-responsive-optimized
  .fbb-position-team-name {
    font-size:11px;
  }


  html.fbb-responsive-optimized
  .fbb-position-team-data {
    font-size:9px;
    line-height:1.25;
  }


  html.fbb-responsive-optimized
  .fbb-position-versus {
    font-size:8px;
  }


  html.fbb-responsive-optimized
  #fbbLeagueIntelligence >
  #fbbLast5Averages {
    margin:
      11px 0 10px !important;

    padding:
      14px 7px !important;
  }


  html.fbb-responsive-optimized
  .fbb-last5-heading {
    margin-bottom:12px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-heading h2 {
    font-size:19px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-subtitle {
    font-size:10px;
    line-height:1.4;
  }


  html.fbb-responsive-optimized
  .fbb-last5-team-head,

  html.fbb-responsive-optimized
  .fbb-last5-row {
    grid-template-columns:
      minmax(104px,1.2fr)
      minmax(62px,.8fr)
      minmax(62px,.8fr) !important;
  }


  html.fbb-responsive-optimized
  .fbb-last5-team-head > div,

  html.fbb-responsive-optimized
  .fbb-last5-row > div {
    padding:
      8px 4px !important;
  }


  html.fbb-responsive-optimized
  .fbb-last5-team {
    gap:4px;

    font-size:10px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-team img {
    width:20px;
    min-width:20px;
    height:20px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-metric {
    gap:4px;

    font-size:9px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-icon {
    width:19px;
    min-width:19px;
    height:19px;

    font-size:10px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-value {
    font-size:13px;
  }


  html.fbb-responsive-optimized
  #fbbLeagueIntelligence
  .fbb-normal-form-grid,

  html.fbb-responsive-optimized
  .fbb-normal-player-grid {
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:10px !important;
  }


  html.fbb-responsive-optimized
  #fbbLeagueIntelligence >
  .fbb-recent-form-under-classification {
    padding:
      13px 8px !important;
  }


  html.fbb-responsive-optimized
  .fbb-form-column {
    padding:
      11px !important;
  }


  html.fbb-responsive-optimized
  .fbb-form-match {
    font-size:11px;

    grid-template-columns:
      27px minmax(0,1fr);

    gap:7px;
  }


  html.fbb-responsive-optimized
  .fbb-form-result {
    width:26px;
    height:26px;

    border-radius:7px;
  }


  html.fbb-responsive-optimized
  #relatedMatches {
    grid-template-columns:
      minmax(0,1fr);
  }


  html.fbb-responsive-optimized
  .fbb-standings-table,

  html.fbb-responsive-optimized
  .fbb-ranking-table {
    min-width:560px;
  }


  html.fbb-responsive-optimized
  .fbb-standings-table th,

  html.fbb-responsive-optimized
  .fbb-standings-table td,

  html.fbb-responsive-optimized
  .fbb-ranking-table th,

  html.fbb-responsive-optimized
  .fbb-ranking-table td {
    padding:
      8px 6px;

    font-size:10px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:380px) {
  html.fbb-responsive-optimized main {
    padding-inline:
      7px;
  }


  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid
  .fbb-prediction-primary-card,

  html.fbb-responsive-optimized
  #fbbPredictionLeagueGrid
  #fbbLeagueIntelligence {
    padding:
      12px 7px !important;
  }


  html.fbb-responsive-optimized
  .fbb-last5-team-head,

  html.fbb-responsive-optimized
  .fbb-last5-row {
    grid-template-columns:
      minmax(94px,1.16fr)
      minmax(56px,.84fr)
      minmax(56px,.84fr) !important;
  }


  html.fbb-responsive-optimized
  .fbb-last5-metric {
    font-size:8px;
  }


  html.fbb-responsive-optimized
  .fbb-last5-value {
    font-size:12px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce) {
  html.fbb-responsive-optimized {
    scroll-behavior:auto;
  }


  html.fbb-responsive-optimized *,
  html.fbb-responsive-optimized *::before,
  html.fbb-responsive-optimized *::after {
    scroll-behavior:auto !important;

    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }
}