/* F-Manager — peças retrô. Carregado logo depois de style.css: reveste as classes que já existem com
   moldura em degrau (só border-image, nada de recorte do elemento, para não cortar menus e dicas), botões que afundam,
   selos em bloco, barras segmentadas e títulos em fonte de pixel. Cores vêm dos tokens dos temas. */

/* ---- títulos: a Silkscreen é larga e só fica nítida em múltiplos de 8 px, então os tamanhos descem para 16/24 */
h1, h2 { font-family: var(--font-pixel); font-weight: 400; letter-spacing: 0.5px; }
h1 { font-size: 24px; }
h2 { font-size: 16px; }
.card-h h3 { font-family: var(--font-pixel); font-weight: 400; font-size: 16px; letter-spacing: 0.5px; }
.brand { font-size: 16px; letter-spacing: 1px; white-space: nowrap; }

/* ---- moldura: cantos em degrau, contorno e "sombra" de bloco embaixo. O fundo fica dentro da moldura
   (padding-box), então os cartões com gradiente próprio mantêm a tinta e os cantos não vazam. */
.card {
  border-style: solid; border-width: 4px 4px 6px;
  border-image: var(--frame) 4 4 6 / 4px 4px 6px;
  background-color: var(--panel); background-clip: padding-box !important; border-radius: 0; box-shadow: none;
}
/* Cartões de aviso e de lenda: um anel por dentro da moldura, na cor de cada um. */
:root .pl-retire { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 70%, transparent); }
:root .pl-legacy { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 75%, transparent); }
.card.accent { border-image-source: var(--frame-accent); }

/* ---- botões: borda de 2 px, sombra de bloco, afundam ao pressionar */
.btn {
  border-width: 2px; border-radius: 0; border-color: var(--edge);
  box-shadow: 0 3px 0 var(--shade);
  font-family: var(--font-pixel); font-weight: 400; letter-spacing: 0.3px;
  transition: background 0.1s ease;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.btn-primary { border-color: var(--accent-ink); }
.btn-ghost { box-shadow: none; border-color: transparent; }
.btn-group .btn, .btn-group .btn:first-child, .btn-group .btn:last-child { border-radius: 0; }

/* ---- selos em bloco */
.result, .pos, .rating, .ovr { border-radius: 0; font-family: var(--font-pixel); font-weight: 400; }
.ovr { background-image: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.ovr-elite { background-color: #f2c94c; } .ovr-great { background-color: #4fd88f; } .ovr-good { background-color: #9ad45f; }
.ovr-ok { background-color: #f2b134; } .ovr-low { background-color: #e8604c; }
.ovr.lg { border-radius: 0; font-size: 32px; }

/* ---- barras e medidores em segmentos de 6 px cheios e 2 px vazios */
.bar, :root .pl-attr-bar, :root .pl-hid-bar {
  height: 8px; border-radius: 0;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}
.bar > i, :root .pl-attr-bar i, :root .pl-hid-bar i { border-radius: 0; }
:root .pl-attr-bar i { opacity: 1; }
:root .pl-tier-bar span { border-radius: 0; height: 10px; }
:root .pl-tier-bar span.now { box-shadow: 0 0 0 2px var(--edge); }

/* ---- tabelas: linhas de 2 px, cabeçalho em pixel */
.table th { font-family: var(--font-pixel); font-weight: 400; font-size: 8px; letter-spacing: 0.5px; border-bottom: 2px solid var(--line); }
.table td { border-bottom: 2px solid color-mix(in srgb, var(--line) 70%, transparent); }

/* ---- boneco do jogador: sprite em pixel sobre um gramado, no Início e no Atleta */
.avatar { display: block; image-rendering: pixelated; }
:root .pl-hero-kit { width: 112px; height: 112px; border-radius: 0; border: 0;
  background: radial-gradient(ellipse 42% 16% at 50% 88%, rgba(0, 0, 0, 0.28), transparent 70%), linear-gradient(transparent 70%, color-mix(in srgb, var(--good) 22%, transparent) 70%); }
.db-shirt .avatar { margin: -12px 0 -8px; }

/* ---- faixa de estádio no topo da área principal (só no desktop) */
.has-stadium .main::before {
  content: ''; display: block; height: 28px; margin: -20px -24px 16px;
  background: var(--stadium) repeat-x 0 0 / auto 28px; image-rendering: pixelated;
  box-shadow: inset 0 -2px 0 var(--shade);
}
@media (max-width: 760px) { .has-stadium .main::before { display: none; } }

/* ---- placar de painel: números de LED âmbar num painel escuro, nos dois temas */
.scoreboard > div:nth-child(2) { background: #050806; box-shadow: inset 0 0 0 3px #2b2b2b; padding: 10px 16px; min-width: 120px; }
.scoreboard .score { font-family: var(--font-pixel); font-weight: 400; font-size: 48px; color: #ff9a1f; text-shadow: 0 0 6px rgba(255, 154, 31, 0.55); letter-spacing: 4px; text-align: center; }
.scoreboard .minute { font-family: var(--font-pixel); font-weight: 400; font-size: 16px; color: #5fd38a; }
.scoreboard > div:nth-child(2) .muted { color: #9db0a5; }
@media (max-width: 760px) { .scoreboard .score { font-size: 32px; letter-spacing: 2px; } .scoreboard > div:nth-child(2) { padding: 8px 10px; min-width: 0; } }

/* ---- tudo em bloco: sem cantos arredondados (só as marcações de campo e o carregando continuam redondos) */
*, *::before, *::after { border-radius: 0 !important; }
.cl-pitch-circle, :root .pl-pitch-lines .circle, :root .mn-pv-pitch::after, :root .mn-field::before, .spinner,
.mk-radio, :root .mn-radio, :root .mn-radio::after { border-radius: 50% !important; }

/* ---- a fonte de pixel não tem negrito e só fica nítida na grade de 8 px */
.brand, .kpi .v, .logo-big, .scout-range, :root .cv-ach-group h3, .ovr { font-weight: 400; }
h1 b, h2 b, h1 strong, h2 strong { font-weight: 400; }
.kpi .v { font-size: 16px; line-height: 1.4; }
.logo-big { font-size: 48px; }
.scout-range { font-size: 32px; }
:root .cv-ach-group h3 { font-size: 16px; }
.ovr { font-size: 16px; }

/* ---- texto corrido em Tiny5: letra quadradinha, legível de 11 a 16 px e na mesma grade de 8 px por em da Silkscreen
   (fica nítida em 16 px nas telas comuns; no celular a densidade alta dá conta dos tamanhos intermediários).
   Ela só tem o peso normal: o negrito sintético engrossa cada pixel por igual e continua legível, mas o itálico
   sintético entorta os pixels, então fica desligado (o texto em itálico aparece reto). */
html { font-synthesis: weight; }
@media (min-width: 761px) {
  body { font-size: 16px; }
  :root .hp-body, :root .tour-text { font-size: 16px; }
}
/* Números grandes que estavam em negrito no texto corrido vão para a Silkscreen, em 16 ou 24 px. */
:root .pl-scout-range, :root .pl-reveal-nums b, :root .pl-nt-stats b, :root .cl-rec-nums b, :root .cl-day b,
:root .lf-money b, :root .mk-kpi .v, :root .mk-fame-v b { font-family: var(--font-pixel); font-weight: 400; letter-spacing: 0; }
:root .pl-scout-range, :root .pl-reveal-nums b, :root .cl-rec-nums b, :root .mk-fame-v b, :root .lf-money b { font-size: 24px; line-height: 1.2; }
:root .pl-nt-stats b, :root .cl-day b, :root .mk-kpi .v { font-size: 16px; line-height: 1.3; }
:root .pl-scout-range span { margin: 0 2px; }

/* ---- menu principal: carreiras salvas com os botões embaixo (a fonte de pixel é larga) */
:root .mn-save { grid-template-columns: auto minmax(0, 1fr); }
:root .mn-save-actions { grid-column: 1 / -1; justify-content: flex-end; }
:root .mn-save-ovr .ovr { font-size: 16px; }

/* ---- ícones de pixel do menu: 12×12 desenhados a 24 px (2× exato, pixels iguais) */
.nav .ico, .nav-sheet-grid .ico { width: 24px; height: 24px; }
.nav .ico .pxi, .nav-sheet-grid .ico .pxi { width: 24px; height: 24px; vertical-align: 0; }
.nav a:not(.active) .ico .pxi { opacity: 0.85; }

/* ---- você no alto do menu (no celular a barra de baixo não tem espaço, então some) */
.sb-me { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 4px 8px 4px 2px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge); }
.sb-me-pic { position: relative; width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; background: color-mix(in srgb, var(--good) 18%, transparent); }
.sb-me-pic .avatar { position: absolute; left: -36px; top: -10px; width: 112px; height: 112px; }
.sb-me-txt { min-width: 0; }
.sb-me-nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-me-ovr { font-family: var(--font-pixel); font-size: 8px; color: var(--warn-text); letter-spacing: 0.5px; }
@media (max-width: 760px) { .sb-me { display: none; } }

/* ---- emojis do texto viram ícones de pixel em tamanhos inteiros (12 px desenhados a 16 ou 24 px) */
.pxi-t { width: 16px; height: 16px; vertical-align: -3px; }
h1 .pxi-t, h2 .pxi-t, .card-h h3 .pxi-t, .kpi .v .pxi-t { width: 24px; height: 24px; vertical-align: -4px; }

/* ---- modais com a mesma moldura em degrau dos cartões e uma sombra de bloco */
.modal {
  border-style: solid; border-width: 4px 4px 6px;
  border-image: var(--frame-accent) 4 4 6 fill / 4px 4px 6px;
  background: none; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
}

/* ---- overall do herói do Atleta na grade de 8 px */
:root .pl-hero-ovr .ovr.lg { font-size: 32px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
@media (max-width: 760px) { :root .pl-hero-ovr .ovr.lg { font-size: 24px; } }

/* ---- nome no herói do Atleta na grade de 8 px; no celular cabe um sobrenome inteiro por linha, sem partir no meio */
:root .pl-name { font-size: 32px; overflow-wrap: break-word; }
@media (max-width: 760px) { :root .pl-name { font-size: 16px; line-height: 1.3; } }