:root{
  --bg:#0b0f14;
  --card:#151b23;
  --card-2:#1b222c;
  --border:#2b3542;
  --text:#f6f8fb;
  --muted:#9aa8b8;
  --blue:#00b1ff;
  --green:#00ff87;
  --yellow:#ffd166;
  --red:#ff5f6d;
  --radius:18px;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
  color-scheme:dark;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% -20%,rgba(0,177,255,.12),transparent 35%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{
  color:inherit;
}

.fbb-page-header{
  position:relative;
  z-index:20;
  width:100%;
  border-bottom:1px solid var(--border);
  background:rgba(11,15,20,.96);
  backdrop-filter:blur(14px);
}

.fbb-header-inner{
  width:min(1180px,calc(100% - 28px));
  min-height:68px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:14px;
}

.fbb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:-.02em;
}

.fbb-brand-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  color:#071019;
  font-size:21px;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

.lang-switch button{
  min-width:38px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#111720;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}

.lang-switch button.active{
  border-color:var(--green);
  color:var(--green);
}

.fbb-wrap{
  width:min(1180px,calc(100% - 28px));
  margin:22px auto 70px;
}

.fbb-back{
  display:inline-flex;
  margin-bottom:14px;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}

.hero,
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent),
    var(--card);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.hero{
  padding:24px;
}

.hero-eyebrow{
  color:var(--green);
  font-size:13px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.hero h1{
  margin:8px 0 10px;
  font-size:clamp(28px,5vw,50px);
  line-height:1.05;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#10161e;
  color:#dce5ef;
  font-size:13px;
  font-weight:800;
}

.premium-score-box{
  margin-top:16px;
  padding:22px;
  border:1px solid rgba(0,177,255,.28);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 50% 20%,rgba(0,177,255,.12),transparent 45%),
    var(--card-2);
}

.premium-score-teams{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:22px;
}

.score-team{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  font-size:clamp(17px,2.2vw,25px);
  font-weight:900;
}

.score-team.away{
  justify-content:flex-end;
  text-align:right;
}

.premium-score-flag{
  width:58px;
  height:58px;
  padding:5px;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.premium-score-middle{
  min-width:150px;
  text-align:center;
}

.premium-score-value{
  font-size:clamp(42px,6vw,70px);
  font-weight:950;
  line-height:1;
  letter-spacing:-.05em;
}

.premium-score-status{
  margin-top:9px;
  color:var(--yellow);
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.premium-score-status.live{
  color:var(--red);
}

.premium-score-status.finished,
.premium-score-status.won{
  color:var(--green);
}

.premium-score-status.lost{
  color:var(--red);
}

.prediction-layout{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
  gap:16px;
  margin-top:16px;
}

.card{
  padding:20px;
  margin-top:16px;
}

.prediction-layout .card{
  margin-top:0;
}

.card h2{
  margin:0 0 14px;
  font-size:21px;
}

.pick-box{
  padding:18px;
  border:1px solid rgba(0,255,135,.35);
  border-radius:15px;
  background:rgba(0,255,135,.065);
}

.pick-label{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pick-value{
  margin-top:5px;
  color:var(--green);
  font-size:clamp(24px,4vw,38px);
  font-weight:950;
}

.confidence-detail-box{
  margin-top:16px;
}

.confidence-heading{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-weight:850;
}

.confidence-bar{
  height:11px;
  overflow:hidden;
  border-radius:999px;
  background:#28313d;
}

.confidence-fill{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--blue),var(--green));
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:15px;
}

.kpi{
  padding:12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#111720;
}

.kpi strong{
  display:block;
  font-size:19px;
}

.kpi span{
  color:var(--muted);
  font-size:12px;
}

.status-box{
  padding:14px;
  border:1px dashed var(--border);
  border-radius:13px;
  background:#10161e;
  color:var(--muted);
}

.match-center-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.match-center-card{
  padding:16px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#111720;
}

.match-center-card.full{
  grid-column:1 / -1;
}

.match-center-card h3{
  margin:0 0 12px;
  font-size:17px;
}

.h2h-list,
.event-list,
.lineup-list{
  display:grid;
  gap:8px;
}

.h2h-row,
.event-row,
.lineup-row{
  padding:10px;
  border:1px solid #27313d;
  border-radius:11px;
  background:#0d131a;
}

.h2h-row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.h2h-date{
  color:var(--muted);
  font-size:12px;
}

.h2h-score{
  font-weight:950;
}

.stats-table{
  width:100%;
  border-collapse:collapse;
}

.stats-table th,
.stats-table td{
  padding:9px 7px;
  border-bottom:1px solid #27313d;
  text-align:center;
  font-size:13px;
}

.stats-table th:first-child,
.stats-table td:first-child{
  text-align:left;
}

.player-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.player-card{
  padding:13px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#111720;
}

.player-name{
  font-weight:900;
}

.player-reason{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.prose{
  color:#dce5ef;
  line-height:1.7;
}

.prose p{
  margin:0 0 12px;
}

.prose p:last-child{
  margin-bottom:0;
}

.muted{
  color:var(--muted);
}

.en,
.pt{
  display:none;
}

html[data-lang="en"] .en{
  display:initial;
}

html[data-lang="pt"] .pt{
  display:initial;
}

html[data-lang="en"] .block.en,
html[data-lang="pt"] .block.pt{
  display:block;
}

.loading-pulse{
  animation:fbbPulse 1.3s ease-in-out infinite;
}

@keyframes fbbPulse{
  0%,100%{opacity:.45}
  50%{opacity:1}
}

@media(max-width:760px){
  .fbb-header-inner,
  .fbb-wrap{
    width:min(100% - 20px,1180px);
  }

  .fbb-header-inner{
    min-height:61px;
  }

  .fbb-wrap{
    margin-top:12px;
    padding-bottom:78px;
  }

  .hero{
    padding:17px;
  }

  .premium-score-box{
    padding:17px 12px;
  }

  .premium-score-teams{
    grid-template-columns:1fr;
    gap:14px;
  }

  .score-team,
  .score-team.away{
    justify-content:center;
    text-align:center;
  }

  .score-team.away{
    flex-direction:row-reverse;
  }

  .premium-score-middle{
    order:2;
  }

  .score-team:first-child{
    order:1;
  }

  .score-team.away{
    order:3;
  }

  .prediction-layout,
  .match-center-grid{
    grid-template-columns:1fr;
  }

  .match-center-card.full{
    grid-column:auto;
  }

  .kpi-grid,
  .player-grid{
    grid-template-columns:1fr;
  }

  .h2h-row{
    grid-template-columns:1fr;
    text-align:center;
  }

  .card{
    padding:16px;
  }
}


/* FBB NORMAL V2 NAVIGATION MOBILE START */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
}

.fbb-page-header.site-header {
  position: sticky;
  top: 0;
  z-index: 9000;

  width: 100%;
  margin: 0;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(11, 15, 20, 0.96);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.22);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.fbb-header-inner.header-inner {
  width:
    min(
      1180px,
      calc(100% - 28px)
    );

  min-height: 66px;
  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 12px;
}

.fbb-brand {
  min-width: 0;
  flex: 0 1 auto;
}

.fbb-brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  min-width: 0;
  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;
}

.header-actions .lang-switch {
  margin-left: 0;

  display: flex;
  align-items: center;

  gap: 7px;
}

.header-actions
.lang-switch
button {
  flex: 0 0 auto;
}

@media (min-width: 761px) {
  .header-actions
  .fbb-global-language-host {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    gap: 7px !important;

    flex-wrap: nowrap !important;
  }

  .header-actions
  #fbb-global-desktop-nav.fbb-in-header {
    position: relative !important;

    inset: auto !important;

    display: block !important;

    margin: 0 !important;

    transform: none !important;
  }

  .header-actions
  #fbb-global-desktop-nav
  .fbb-nav-button {
    min-height: 36px;

    margin: 0 !important;

    white-space: nowrap;
  }

  .header-actions
  #fbb-global-desktop-nav
  .fbb-nav-menu {
    position: absolute !important;

    top:
      calc(100% + 9px) !important;

    right: 0 !important;
    left: auto !important;
  }
}

.hero,
.card,
.premium-score-box,
.match-center-card,
.kpi,
.pick-box {
  min-width: 0;
}

.hero h1,
.score-team span,
.kpi strong,
.pick-value,
.player-name,
.prose {
  overflow-wrap: anywhere;
  word-break: normal;
}

img {
  max-width: 100%;
}

@media (max-width: 760px) {
  body {
    padding-bottom:
      calc(
        88px +
        env(safe-area-inset-bottom)
      );
  }

  .fbb-page-header.site-header {
    top: 0;
  }

  .fbb-header-inner.header-inner {
    width:
      calc(100% - 16px);

    min-height: 58px;

    gap: 7px;
  }

  .fbb-brand {
    gap: 7px;

    font-size: 15px;
  }

  .fbb-brand-mark {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 10px;

    font-size: 18px;
  }

  .header-actions {
    gap: 5px;
  }

  .header-actions
  .lang-switch {
    gap: 5px;
  }

  .header-actions
  .lang-switch
  button {
    min-width: 34px;
    min-height: 34px;

    padding: 5px 7px;

    font-size: 12px;
  }

  #fbb-global-desktop-nav {
    display: none !important;
  }

  .fbb-wrap {
    width:
      calc(100% - 16px);

    margin:
      10px auto 20px;

    padding-bottom: 12px;
  }

  .fbb-back {
    margin:
      2px 0 10px;

    font-size: 13px;
  }

  .hero {
    padding: 16px;

    border-radius: 15px;
  }

  .hero-eyebrow {
    font-size: 11px;
    line-height: 1.45;
  }

  .hero h1 {
    margin:
      7px 0 10px;

    font-size:
      clamp(
        24px,
        8vw,
        31px
      );

    line-height: 1.12;
  }

  .hero-meta {
    gap: 6px;
  }

  .chip {
    min-height: 28px;

    max-width: 100%;

    padding: 5px 9px;

    font-size: 11px;
    line-height: 1.25;
  }

  .premium-score-box {
    margin-top: 11px;

    padding: 14px 8px;

    border-radius: 15px;
  }

  .premium-score-teams {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(68px, auto)
      minmax(0, 1fr);

    gap: 7px;
  }

  .score-team,
  .score-team.away {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    text-align: center;

    font-size: 13px;
    line-height: 1.18;
  }

  .score-team.away {
    flex-direction: column-reverse;
  }

  .premium-score-middle {
    min-width: 68px;

    order: initial;
  }

  .premium-score-value {
    font-size: 35px;
    line-height: 1;
  }

  .premium-score-status {
    margin-top: 6px;

    font-size: 10px;
    line-height: 1.3;
  }

  .premium-score-flag {
    width: 44px;
    height: 44px;

    padding: 4px;

    border-radius: 11px;
  }

  .prediction-layout {
    grid-template-columns: 1fr;

    gap: 11px;

    margin-top: 11px;
  }

  .card {
    margin-top: 11px;

    padding: 15px;

    border-radius: 15px;
  }

  .prediction-layout
  .card {
    margin-top: 0;
  }

  .card h2 {
    margin-bottom: 12px;

    font-size: 18px;
    line-height: 1.3;
  }

  .pick-box {
    padding: 15px;

    border-radius: 13px;
  }

  .pick-value {
    font-size:
      clamp(
        23px,
        7vw,
        31px
      );

    line-height: 1.15;
  }

  .confidence-detail-box {
    margin-top: 14px;
  }

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

    gap: 8px;
  }

  .kpi-grid
  .kpi:last-child:nth-child(odd) {
    grid-column:
      1 / -1;
  }

  .kpi {
    padding: 10px;

    border-radius: 11px;
  }

  .kpi strong {
    font-size: 15px;
    line-height: 1.3;
  }

  .kpi span {
    font-size: 11px;
  }

  .match-center-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .match-center-card,
  .match-center-card.full {
    grid-column: auto;

    padding: 13px;

    border-radius: 13px;
  }

  .match-center-card h3 {
    margin-bottom: 10px;

    font-size: 16px;
  }

  .h2h-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 7px;

    text-align: left;
  }

  .h2h-date {
    grid-column:
      1 / -1;
  }

  .h2h-score {
    align-self: center;
  }

  .stats-table {
    table-layout: fixed;
  }

  .stats-table th,
  .stats-table td {
    padding: 8px 4px;

    font-size: 11px;

    overflow-wrap: anywhere;
  }

  .player-grid {
    grid-template-columns: 1fr;
  }

  .player-card {
    padding: 12px;
  }

  .prose {
    font-size: 15px;
    line-height: 1.62;
  }

  .status-box {
    padding: 12px;

    font-size: 13px;
    line-height: 1.45;
  }

  #fbb-global-bottom-nav {
    z-index: 10000;
  }
}

@media (max-width: 420px) {
  .fbb-header-inner.header-inner {
    width:
      calc(100% - 12px);
  }

  .fbb-brand-name {
    display: none;
  }

  .hero {
    padding: 14px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .premium-score-teams {
    grid-template-columns:
      minmax(0, 1fr)
      62px
      minmax(0, 1fr);
  }

  .premium-score-flag {
    width: 40px;
    height: 40px;
  }

  .premium-score-value {
    font-size: 31px;
  }

  .score-team,
  .score-team.away {
    font-size: 12px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid
  .kpi:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* FBB NORMAL V2 NAVIGATION MOBILE END */






/* FBB INDEX HEADER BRAND START */

.fbb-brand {
  display: flex;
  align-items: center;

  min-width: 0;

  text-decoration: none;
}

.fbb-brand-logo {
  display: block;

  width: auto;
  height: 44px;

  max-width: 190px;

  object-fit: contain;
}

@media (max-width: 760px) {
  .fbb-brand-logo {
    height: 40px;
    max-width: 155px;
  }
}

@media (max-width: 420px) {
  .fbb-brand-logo {
    height: 37px;
    max-width: 140px;
  }
}

/* FBB INDEX HEADER BRAND END */