/* FUTNEX 1.9.16: interface de computador (navegador largo e app da Steam).
   Tudo aqui vale só com html.fx-pc, que liga em telas a partir de 1200 px com mouse, ou sempre no modo Steam.
   O celular e o tablet não mudam. */
html.fx-pc {
  --pc-side: 232px;      /* barra lateral */
  --pc-gap: 32px;        /* margem do conteúdo */
  --pc-max: 1560px;      /* largura máxima do conteúdo */
  --pc-top: 64px;        /* barra do topo */
  scrollbar-color: var(--line-strong) transparent;
}
@media (min-width: 1600px) { html.fx-pc { --pc-side: 256px; --pc-gap: 44px; } }
@media (max-width: 1199px) { html.fx-pc { --pc-side: 204px; --pc-gap: 20px; } }   /* só no modo Steam com janela pequena */

/* rolagem fina no estilo do jogo */
html.fx-pc ::-webkit-scrollbar { width: 12px; height: 12px; }
html.fx-pc ::-webkit-scrollbar-track { background: transparent; }
html.fx-pc ::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--bg); border-radius: 8px; }
html.fx-pc ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ---------------------------------------------------------------- estrutura */
html.fx-pc .app {
  max-width: none;
  margin: 0;
  padding: 0 var(--pc-gap) 48px calc(var(--pc-side) + var(--pc-gap));
}
html.fx-pc main#view { max-width: var(--pc-max); margin: 0 auto; }

/* barra do topo: só recursos, nível e alertas, alinhados à direita */
html.fx-pc .topbar {
  position: sticky; top: var(--fx-dev-h, 0px);
  min-height: var(--pc-top); margin: 0 auto 22px; padding: 10px 0;
  max-width: var(--pc-max);
  background: var(--bg);              /* sem backdrop-filter: ele prenderia a barra lateral (position: fixed) dentro do topo */
  justify-content: flex-end;
}
html.fx-pc body.in-squad .topbar { display: flex; }      /* no elenco a barra continua: dá para trocar de aba */
html.fx-pc .top-inner { flex: none; order: 2; gap: 8px; }
/* barra lateral: fundo fixo + logo + abas na vertical */
html.fx-pc .topbar::before {
  content: ""; position: fixed; z-index: 0; top: 0; bottom: 0; left: 0; width: var(--pc-side);
  background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 70%, var(--bg)) 100%);
  border-right: 1px solid var(--line);
  pointer-events: none;
}
html.fx-pc .topbar .brand {
  display: block; position: fixed; z-index: 1; top: 0; left: 0; width: var(--pc-side);
  padding: 26px 24px 18px; line-height: 0;
}
html.fx-pc .topbar .fx-logo { height: 30px; width: auto; max-width: 100%; }
html.fx-pc .tabs {
  position: fixed; z-index: 1; top: 82px; left: 0; bottom: auto; width: var(--pc-side);
  padding: 8px 14px; overflow: visible; background: none; border: 0; order: 0;
}
html.fx-pc .tabs-inner { display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-width: none; margin: 0; }
html.fx-pc .tab {
  min-height: 50px; padding: 0 16px; gap: 14px;
  flex-direction: row; justify-content: flex-start;
  font: 600 16px/1 var(--font-texto); color: var(--text-2);
  border-radius: 12px; transition: background-color .15s ease, color .15s ease;
}
html.fx-pc .tab svg { display: block; width: 22px; height: 22px; flex: none; }
html.fx-pc .tab[aria-current=page] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
html.fx-pc .tab[aria-current=page]::before { top: 12px; bottom: 12px; left: -14px; right: auto; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
html.fx-pc .tabs .tab[aria-current=page] svg { transform: none; stroke: var(--accent); }
html.fx-pc .tab:hover { background: var(--fill); color: var(--text); }
html.fx-pc .tab.fx-guia::after { top: 50%; right: 14px; margin-top: -5px; }
html.fx-pc .tab .pc-kbd { display: none; }

/* rodapé da barra lateral: o clube e as redes */
html.fx-pc .pc-side-pe {
  position: fixed; z-index: 1; left: 0; bottom: 0; width: var(--pc-side);
  padding: 14px 14px 18px; display: grid; gap: 12px;
}
html.fx-pc .pc-clube {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 12px;
  padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); text-align: left; cursor: pointer; font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
html.fx-pc .pc-clube:hover { border-color: var(--line-strong); background: var(--fill); }
html.fx-pc .pc-clube-esc { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; }
html.fx-pc .pc-clube-esc svg { width: 44px; height: 44px; }
html.fx-pc .pc-clube strong { font: 800 17px/1.1 var(--font-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.fx-pc .pc-clube small { font: 500 12px/1.2 var(--font-texto); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.fx-pc .pc-redes { display: flex; justify-content: center; gap: 4px; }
html.fx-pc .pc-redes a {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2);
  transition: background-color .15s ease, color .15s ease;
}
html.fx-pc .pc-redes a:hover { background: var(--fill); color: var(--text); }
html.fx-pc .pc-redes svg { width: 18px; height: 18px; fill: currentColor; }
html.fx-pc .pc-redes span { display: none; }
@media (max-height: 640px) { html.fx-pc .pc-redes { display: none; } }
@media (max-height: 560px) { html.fx-pc .pc-side-pe { display: none; } }

/* o rodapé grande do site sai: as redes estão na barra lateral */
html.fx-pc .fx-social-footer { display: none; }

/* avisos (toast) centralizados na área do jogo */
html.fx-pc .toast { left: calc(50% + var(--pc-side) / 2); bottom: 28px; }
html.fx-pc body:has(#sheet:not([hidden]) .fx-tela) .toast, html.fx-pc body:has(#match:not([hidden])) .toast { left: 50%; }

/* ---------------------------------------------------------------- cabeçalho das abas */
html.fx-pc main#view > section > h1:first-child,
html.fx-pc main#view h1 { font-size: 40px; }
html.fx-pc .home-head h1 { font-size: 44px; }
html.fx-pc .seg { margin: 14px 0 20px; }
html.fx-pc .seg-tabs { overflow: visible; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Início
   campo à esquerda (alto), o jogo do dia e a nota no meio, primeiros passos e notícias à direita */
html.fx-pc .home { display: grid; gap: 20px 24px; align-items: start;
  grid-template-columns: minmax(420px, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "campo dia" "campo info" "campo funil" "campo resto"; }
html.fx-pc .home > * { grid-column: 1 / -1; min-width: 0; margin-top: 0; margin-bottom: 0; }
html.fx-pc .home > .home-head { grid-area: head; }
html.fx-pc .home > .fx-funil { grid-area: funil; }
html.fx-pc .home .hq { display: contents; }
html.fx-pc .home .hq-campo { grid-area: campo; }
html.fx-pc .home .hq-dia { grid-area: dia; }
html.fx-pc .home .hq-info { grid-area: info; }
@media (max-width: 1199px) { html.fx-pc .home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1500px) {
  html.fx-pc .home { grid-template-columns: minmax(460px, 1.05fr) minmax(0, 1fr) minmax(320px, .85fr);
    grid-template-areas: "head head head" "campo dia funil" "campo info funil" "campo resto resto"; }
  html.fx-pc .home:not(:has(> .fx-funil)) { grid-template-areas: "head head head" "campo dia info" "campo resto resto"; }
  html.fx-pc .home:not(:has(> .fx-funil)) .hq-info { align-self: start; }
}
html.fx-pc .home .hq-dia > .panel, html.fx-pc .home .hq-info > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Jogar */
html.fx-pc .jg-2col { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); column-gap: 32px; }
html.fx-pc .jg-2col.fx-sem-link { grid-template-areas: "a b" "c b"; }
html.fx-pc .jg-fxs { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
html.fx-pc .prize-box { max-width: none; }

/* ---------------------------------------------------------------- Loja */
html.fx-pc .pk-hero.pk-loja { max-width: 1100px; grid-template-columns: 200px minmax(0, 1fr); padding: 28px 34px; }
html.fx-pc .pk-loja .pk-mini { width: 180px; }
html.fx-pc .shop-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ---------------------------------------------------------------- Elenco */
html.fx-pc .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }

/* ---------------------------------------------------------------- mouse: hover e clique */
html.fx-pc .panel { transition: border-color .15s ease; }
html.fx-pc .btn { transition: transform .1s ease, filter .15s ease, background-color .15s ease, border-color .15s ease; }
html.fx-pc .btn:not(:disabled):hover { filter: brightness(1.08); }
html.fx-pc .btn:not(:disabled):active { transform: translateY(1px); }
html.fx-pc [data-act]:not(button):not(input):not(select):not(textarea) { cursor: pointer; }
html.fx-pc .row:hover, html.fx-pc .tbl tbody tr:hover { background: color-mix(in srgb, var(--fill) 55%, transparent); }
html.fx-pc .stk { transition: transform .15s ease, box-shadow .15s ease; }
html.fx-pc .stk:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px #000c; }
html.fx-pc :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- janelas: modal no centro da tela */
html.fx-pc .sheet-backdrop { align-items: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html.fx-pc .sheet { max-width: 720px; max-height: min(88vh, 960px); border-radius: 18px; border: 1px solid var(--line); }
html.fx-pc .sheet:has(.pk-lote) { max-width: 1080px; }
html.fx-pc .sheet:has(.pf), html.fx-pc .sheet:has(.al-list) { max-width: 760px; }
html.fx-pc #sheet .fx-tela > .sheet { border: 0; border-radius: 0; max-height: none; }

/* partida e telas cheias: usam a tela inteira e passam por cima da barra lateral */
@media (min-width: 1500px) {
  html.fx-pc .match-inner { max-width: min(1520px, max(900px, 177.778vh - 300px)); }
}

/* ---------------------------------------------------------------- modo Steam */
html.fx-steam .fx-seo-links, html.fx-steam .fx-instalar, html.fx-steam [data-act="pwa-install"] { display: none !important; }

/* telas muito grandes: tudo um pouco maior (o jogo é desenhado em px) */
@media (min-width: 2200px) and (min-height: 1200px) { html.fx-pc { zoom: 1.25; } }
@media (min-width: 3000px) and (min-height: 1600px) { html.fx-pc { zoom: 1.5; } }

/* ===== 1.9.23: Início no PC ===== */
/* Os primeiros passos agora ficam dentro da coluna do jogo do dia (logo abaixo do Jogar). */
html.fx-pc .home { grid-template-areas: "head head" "campo dia" "campo info" "campo resto"; }
@media (min-width: 1500px) {
  html.fx-pc .home { grid-template-areas: "head head head" "campo dia info" "campo resto resto"; }
}
/* Nome do clube na barra lateral: até três linhas (o nome tem no máximo 28 letras), sem reticências. */
html.fx-pc .pc-clube { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; }
html.fx-pc .pc-clube-esc, html.fx-pc .pc-clube-esc svg { width: 40px; height: 40px; }
html.fx-pc .pc-clube strong {
  font: 800 15px/1.12 var(--font-titulo); white-space: normal; text-overflow: clip; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: break-word; hyphens: manual;
}

/* 1.9.49 (telas): palpites da Copa Online em grade no PC (só a Copa: .fxc-palpites; a Liga e o celular ficam como estavam) */
html.fx-pc .fxc-palpites .fx40b-lista { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
html.fx-pc .fxc-palpites .fx40b-ops .fx40b-op.pick-b { min-height: 48px; padding: 6px 8px; }
html.fx-pc .fxc-palpites .fx40b-op .pk-nm { font-size: 14px; }
html.fx-pc .fxc-palpites .fx40b-chip { min-height: 34px; min-width: 46px; }
html.fx-pc .fxc-palpites .fx40b-val { flex-basis: 96px; }
html.fx-pc .fxc-palpites .fx40b-val input, html.fx-pc .fxc-palpites .fx40b-go { min-height: 38px; }
/* 1.9.57 (jogo57a, PC): a ficha "ver carta" fica maior só no computador. A regra `html.fx-pc .sheet` (720px) vence a da ficha no CSS principal; estas têm uma classe a mais. Celular e as outras folhas não mudam. */
html.fx-pc .sheet.is-player-card { width: calc(100% - 64px); max-width: 1100px; max-height: min(94vh, 1040px); border: 2px solid #f4f7fa61; border-radius: 20px }
html.fx-pc .sheet.is-player-card .pcard { padding: 26px 34px 24px }
html.fx-pc .sheet.is-player-card .pcard-heading h2 { font-size: 40px }
html.fx-pc .sheet.is-player-card .pcard-heading p { margin-top: 8px; font-size: 13px }
html.fx-pc .sheet.is-player-card .pcard-body { grid-template-columns: 340px minmax(0, 1fr); gap: 36px }
html.fx-pc .sheet.is-player-card .pcard-art { top: 26px; gap: 14px }
html.fx-pc .sheet.is-player-card .pcard-art .stk { max-width: 340px; border-width: 4px; border-radius: 20px; padding: 18px 19px 20px }
html.fx-pc .sheet.is-player-card .pcard-art .stk .av { width: 220px; height: 220px; border-radius: 16px; margin: 22px auto 16px }
html.fx-pc .sheet.is-player-card .pcard-art .stk-name { font-size: 35px }
html.fx-pc .sheet.is-player-card .pcard-art .stk-role { margin-top: 6px; font-size: 17px }
html.fx-pc .sheet.is-player-card .pcard-art .stk .bars { gap: 7px; margin-top: 17px }
html.fx-pc .sheet.is-player-card .pcard-art .stk .bar { grid-template-columns: 44px 1fr 48px; gap: 9px; font-size: 16px }
html.fx-pc .sheet.is-player-card .pcard-art .stk .bar-track { height: 9px }
html.fx-pc .sheet.is-player-card .pcard-art .stk-num { border-radius: 12px 0; padding: 8px 12px 7px; font-size: 24px }
html.fx-pc .sheet.is-player-card .pcard-art .stk-plus { top: 12px; right: 12px }
html.fx-pc .sheet.is-player-card .pcard-art .stk .tags { gap: 7px; margin-top: 16px }
html.fx-pc .sheet.is-player-card .pcard-details { gap: 10px }
/* o pop-up do item, no PC: mais largo */
html.fx-pc .sheet:has(.fx57-item) { max-width: 760px }
html.fx-pc .fx57-top-t h2 { font-size: 26px }
html.fx-pc .fx57-t th:nth-child(2), html.fx-pc .fx57-t td:nth-child(2) { width: 150px }
html.fx-pc .fx57-t th:nth-child(3), html.fx-pc .fx57-t td:nth-child(3) { width: 130px }
html.fx-pc .fx57-usar { width: auto; min-width: 96px }
/* 1.9.58 (jogo58a, PC): palpites da Liga Online (.olp, aba Palpites) em grade como os da Copa; a tabela do pop-up dos itens com 4 colunas. Tudo com html.fx-pc: o celular não muda. */
html.fx-pc .olp .fx40b-lista { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start }
html.fx-pc .olp .fx40b-ops .fx40b-op.pick-b { min-height: 48px; padding: 6px 8px }
html.fx-pc .olp .fx40b-op .pk-nm { font-size: 14px }
html.fx-pc .olp .fx40b-chip { min-height: 34px; min-width: 46px }
html.fx-pc .olp .fx40b-val { flex-basis: 96px }
html.fx-pc .olp .fx40b-val input, html.fx-pc .olp .fx40b-go { min-height: 38px }
/* pop-up dos itens, 4 colunas: no PC a forma volta a ter a palavra (e o número some) */
html.fx-pc .fx57-t.fx58a-q4 th:nth-child(2), html.fx-pc .fx57-t.fx58a-q4 td:nth-child(2) { width: 130px }
html.fx-pc .fx57-t.fx58a-q4 th:nth-child(3), html.fx-pc .fx57-t.fx58a-q4 td:nth-child(3) { width: 130px }
html.fx-pc .fx57-t.fx58a-q4 th:nth-child(4), html.fx-pc .fx57-t.fx58a-q4 td:nth-child(4) { width: 112px }
html.fx-pc .fx57-t.fx58a-q4 th { font-size: 12px }
html.fx-pc .fx57-t .fx57-f .fx57-fw { display: inline; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal }
html.fx-pc .fx57-t .fx57-f .fx58a-fn { display: none }
html.fx-pc .fx57-t.fx58a-q4 .fx57-usar { width: auto; min-width: 88px; font-size: 14px }
html.fx-pc .fx57-t .fx58a-max { font-size: 13px }
/* as escalações salvas no PC: tudo numa linha só, o seletor com largura própria */
html.fx-pc .fx58a-esc-s { flex: 1 1 150px; max-width: 260px }
html.fx-pc .fx58a-esc-l { margin-bottom: 0 }
html.fx-pc .fx58a-folha .fx56-pn { max-width: 100% }
/* 1.9.58 (jogo58b, PC): queima e bônus do estádio. Sempre com html.fx-pc na frente (celular não muda). */
html.fx-pc .sheet:has(.fx58b-q) { max-width: 760px; }
html.fx-pc .fx58b-q-lin { padding: 12px 16px; }
html.fx-pc .fx58b-q-rot { font-size: 21px; }
html.fx-pc .fx58b-q-grade { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px 14px; }
html.fx-pc .fx58b-q-barra { grid-template-columns: minmax(0, 1fr) auto auto; }
html.fx-pc .fx58b-q-bts { grid-column: auto; grid-template-columns: auto auto; }
html.fx-pc .fx58b-q-bts .btn { min-width: 120px; }
html.fx-pc .fx58b-bonus { padding: 12px 14px; }
/* 1.9.65 (jogo65a, PC): estatísticas da partida em duas colunas no cartão final (o "Ver resultado" cabe sem rolar em 1366x768). Só com html.fx-pc. */
html.fx-pc .fx65a-est { padding: 2px 12px 10px }
html.fx-pc .fx65a-lin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 22px }
html.fx-pc .fx65a-l[data-st="posse"] { grid-column: 1 / -1 }
html.fx-pc .fx65a-l { column-gap: 8px }
html.fx-pc .fx65a-r { font-size: 11.5px }
html.fx-pc .fx65a-est-t { min-height: 32px; font-size: 13.5px }
/* 1.9.65 (jogo65b, PC): controle de áudio FLUTUANTE. Sempre com html.fx-pc na frente (celular não muda). Fixo no canto inferior direito da janela (24 px de margem), com leve transparência
   que some ao passar o mouse, focar (teclado) ou abrir. O cartão abre PARA CIMA e para a esquerda a partir do botão. Abaixo das folhas (z 30), dos avisos (z 50), da partida (20) e da entrada (9999). */
html.fx-pc .fx65b-aud:not([hidden]) { display: block; position: fixed; right: 24px; bottom: 24px; left: auto; top: auto; z-index: 15; margin: 0; opacity: .72; transition: opacity .2s ease; }
html.fx-pc .fx65b-aud:not([hidden]):hover, html.fx-pc .fx65b-aud:not([hidden]):focus-within, html.fx-pc .fx65b-aud.is-open { opacity: 1; }
html.fx-pc .fx65b-aud[hidden] { display: none; }
html.fx-pc .fx65b-aud-card { width: 300px; }
/* respiro no fim de cada aba: a última coisa da tela pode rolar acima do botão flutuante (24 de margem + 48 do botão + 32 de folga) */
html.fx-pc main#view { padding-bottom: 104px; }
/* barras coladas no pé da tela (Palpites, "Desmanchar vários", provador): deixam a ponta direita livre para o botão flutuante (24 de margem + 48 do botão + 12 de folga) */
html.fx-pc main#view .jg-apito, html.fx-pc main#view .lot-bar, html.fx-pc main#view .prov-bar { margin-right: 84px; }
/* 1.9.66 (car66b, PC) · só no PC (html.fx-pc): a lista do ranking e o mural não esticam na tela larga e "minha posição" cola no pé da janela (no PC não há barra de abas embaixo). */
html.fx-pc .fx66b-rk { max-width: 760px; }
html.fx-pc .fx66b-eu { bottom: 12px; }
html.fx-pc .fx66b-mural-lista { max-height: 420px; }
html.fx-pc .fx66b-cardsheet .fx66b-card-prev img { width: min(100%, 420px); }
/* 1.9.67 (jogo67b, PC) · só no PC (html.fx-pc): o Histórico não estica na tela larga e a tabela final cabe sem rolar. */
html.fx-pc .fx67b-h { max-width: 760px; }
html.fx-pc .fx67b-t .tn { max-width: 260px; }