/* Page-specific additions on top of styles.css (linked after it). */

/* Categoria de base: preferências do olheiro com selo junto do título e campos agrupados */
.youth-prefs-topbar {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-3, 12px);
}
.youth-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-4, 16px);
}
.youth-prefs .field {
  min-width: 14rem;
  max-width: 22rem;
  margin-bottom: 0;
}
.youth-prefs select {
  width: 100%;
  min-height: 44px;
}
.candidates > .card { max-width: 40rem; }

/* Patrocínio: faixa compacta no contrato atual e ofertas em tabela densa. */
.sponsor-top .sponsor-contract {
  grid-column: 1 / -1;
  padding: var(--space-3, 12px) var(--space-4, 16px);
}
.sponsor-top > .card:nth-child(2) {
  grid-column: 1 / -1;
}
.sponsor-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6, 24px);
  flex-wrap: wrap;
  margin-top: var(--space-2, 8px);
}
.sponsor-strip-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}
.sponsor-strip-name {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--fg);
}
.sponsor-strip-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-6, 24px);
  flex-wrap: wrap;
}
.sponsor-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 5rem;
}
.sponsor-metric-label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.sponsor-metric-val {
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.sponsor-top .grid.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 16px;
  justify-content: start;
  max-width: 36rem;
}
.sponsor-picker {
  width: auto;
  max-width: min(100%, 22rem);
}
.offers {
  display: block;
  margin-top: var(--space-3, 12px);
  width: 100%;
  max-width: 36rem;
  min-width: 0;
}
.offers .dense-table th.num,
.offers .dense-table td.num {
  width: 6.5rem;
}
.sponsor-last-table {
  max-width: 36rem;
}
}
.offers .dense-table {
  width: 100%;
}
.offers .dense-table td,
.offers .dense-table th {
  vertical-align: middle;
}
.offers .offer { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px; }
.offers .offer h3 { margin: 0; }
.offers .offer .stat { font-size: 1.35rem; }
.offers .offer p { margin: 0 0 8px; font-size: 0.9rem; }
.offers .offer .btn { margin-top: auto; }

/* Estádio: the picture only carries the name and two numbers; the capacity form has its own card. */

/* Copa: the summary card. A grid that repeats: as many equal columns as fit (STATUS | YOUR RUN today), one column on a phone; texts wrap, nothing is cut with an ellipsis. */
.cup-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4, 16px);
  align-items: start;
  padding: var(--space-4, 16px);
  margin-top: var(--space-4, 16px);
  box-sizing: border-box;
}

.cup-strip-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-1, 4px);
  min-width: 0;
  text-align: left;
}

.cup-strip-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cup-strip-val {
  display: flex;
  align-items: center;
  min-height: 28px;
  text-align: left;
}

.cup-stat-val {
  font-size: var(--text-xl, 1.65rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
  text-align: left;
}

.cup-stat-val .unit {
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 600;
  color: var(--muted);
  margin-left: 1px;
  margin-right: 6px;
}

.cup-strip-note {
  font-size: var(--text-sm, 0.8125rem);
  color: var(--muted);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* From the second column on, a rule between the columns when they sit side by side (a phone stacks them, no rule). */
@media (min-width: 640px) {
  .cup-strip-col + .cup-strip-col { border-left: 1px solid var(--surface-border); padding-left: var(--space-4, 16px); }
}

/* Copa: the sponsor's five cup targets (legado) */
.goal-list { list-style: none; margin: 6px 0; padding: 0; text-align: left; }
.goal-list li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 0.92rem; color: var(--muted); }
.goal-list li.chosen { color: inherit; }
.goal-list .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Liga: the three rankings; a long club name is cut instead of wrapping twice. */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.rankings table { width: 100%; table-layout: fixed; }
.rankings table :is(th, td):nth-child(1) { width: 9%; }
.rankings table :is(th, td):nth-child(2) { width: 37%; text-align: left; }
.rankings table :is(th, td):nth-child(3) { width: 34%; text-align: left; }
.rankings table :is(th, td):nth-child(4) { width: 20%; }
.rankings table :is(th, td):is(:nth-child(2), :nth-child(3)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankings table td:nth-child(2) a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 960px) {
  .rankings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Partidas: the line-ups side by side under the scoreboard, also during the live replay. */
.lineups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.lineups .card { padding: 12px; }
.lineups h2 { font-size: 1.05rem; }
.lineups table td { padding: 4px 6px; font-size: 0.92rem; }
.lineups td.team-name, .lineups td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; }
.scoreboard .tactics-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 6px; }
.scoreboard .tactics-value { font-size: 0.92rem; }
@media (max-width: 760px) { .lineups { grid-template-columns: 1fr; } }

.legend { font-size: 0.85rem; color: var(--muted); margin: 4px 0 10px; }

/* Jogador: ASI, rotina and wage as one compact row. */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); }
.stat-row > div { display: grid; gap: var(--space-1); }
.stat-row h3 { margin: 0; font-size: 0.85rem; }
.stat-row .stat { font-size: 1.15rem; }

/* Forms with labelled fields in two columns (ligas amistosas). */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

/* Secondary tab rows (moderation report status). */
.tabs.sub { margin: 0 0 var(--space-3); flex-wrap: wrap; }
.tabs.sub a.tab { font-size: 0.92rem; padding: 4px 12px; }
.tabs { flex-wrap: wrap; }

/* Modern Tactical Pitch — aplicado a todas as 29 telas (13 modificadas + 16 originais) para consistência total.
   Cores, cards, botões, tipografia, breakpoints responsivos (380/560/760) unificados.
   Preserva guache, paleta oliva/ouro, identidade GM Sports. */
.gm-view { --gm-gold: var(--pos-gk); --gm-ink: var(--text); --gm-muted: var(--muted); --gm-hairline: var(--surface-border-soft); --gm-keeper: var(--pos-gk); --gm-defence: var(--pos-def); --gm-midfield: var(--pos-mid); --gm-attack: var(--pos-att); display: grid; gap: clamp(1rem, 0.75rem + 1.25vw, 2rem); color: var(--gm-ink); }
.gm-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.72fr); align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 3rem); min-height: 15rem; overflow: hidden; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border: 1px solid var(--gm-hairline); border-radius: 1rem; background: linear-gradient(100deg, oklch(0.145 0.015 130 / 0.96), oklch(0.17 0.025 130 / 0.86) 58%, oklch(0.2 0.035 125 / 0.58)), url('/assets/torcida-guache.webp') center 44% / cover; box-shadow: 0 2px 6px oklch(0.08 0.02 120 / 0.22), inset 0 1px 0 oklch(1 0 0 / 0.08); }
.gm-hero h1 { max-width: 18ch; margin: 0.4rem 0 0.5rem; color: var(--gm-ink); font-size: clamp(2rem, 1.55rem + 2.25vw, 3.35rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.gm-hero-note { max-width: 58ch; color: var(--gm-muted); }
.gm-panel-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gm-panel-heading h2 { margin: 0.25rem 0 0; color: var(--gm-ink); font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); letter-spacing: -0.025em; }
.gm-view .table-wrap { border: 1px solid oklch(0.72 0.055 110 / 0.14); border-radius: 0.75rem; background: oklch(0.145 0.015 130 / 0.56); }
.gm-view table { min-width: 38rem; border-spacing: 0; border-collapse: separate; color: var(--gm-ink); }
.gm-view th { z-index: 1; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--gm-hairline); background: oklch(0.2 0.025 130); color: var(--gm-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.gm-view td { padding: 0.7rem 0.5rem; border-bottom: 1px solid oklch(0.72 0.055 110 / 0.11); background: transparent; }
.gm-view tbody tr:hover td { background: oklch(0.72 0.18 150 / 0.07); transition: background-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.gm-view .num { font-variant-numeric: tabular-nums; text-align: right; padding-left: 12px; white-space: nowrap; }
.gm-view .badge { border-color: var(--gm-hairline); background: oklch(0.22 0.025 125 / 0.75); color: var(--gm-ink); display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; text-align: center; flex-shrink: 0; padding: 2px 6px; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
/* Mobile responsivo para todas as 29 telas */
@media (max-width: 1080px) { .gm-hero { grid-template-columns: 1fr; padding: 1.25rem; min-height: 12rem; } .gm-hero h1 { font-size: clamp(1.6rem, 1.35rem + 1.5vw, 2.6rem); } }
@media (max-width: 760px) {
  .gm-hero { grid-template-columns: 1fr; min-height: 10rem; padding: 1rem; }
  .gm-view { gap: 0.75rem; }
  .gm-panel-heading { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .gm-view table { font-size: 0.85rem; }
  .gm-view td, .gm-view th { padding: 0.45rem 0.35rem; }
  .gm-view .badge { min-width: 1.6rem; font-size: 0.65rem; }
}
@media (max-width: 380px) {
  .gm-hero h1 { font-size: 1.5rem; }
  .gm-view th { font-size: 0.65rem; letter-spacing: 0.05em; }
  .gm-view td { font-size: 0.8rem; }
}

/* Operações: paths and URLs break anywhere instead of overflowing the card. */
.ops-paths { overflow-wrap: anywhere; }

/* Novidades: the date heading as formatDate writes it ("23 de outubro de 2026"). */
.changelog-date-heading { text-transform: none; }

/* Minha conta: e-mail and the role badge as separate chips. */
.account-id { align-items: center; }

/* Alpha invitations (Moderação → Convites). */
.invite-form label { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 4px; }
.invite-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-form-row input { flex: 1 1 16rem; min-width: 0; }
.invite-result { margin-top: 12px; padding: 12px; border: 1px solid var(--good); border-radius: 8px; background: rgba(0, 0, 0, 0.2); }
.invite-result p { margin: 0 0 8px; overflow-wrap: anywhere; }
.invite-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.invite-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.15em; color: var(--accent-light); padding: 6px 12px; border: 2px dashed var(--accent); border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.invite-code.small { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: inherit; padding: 0; border: 0; user-select: text; }
.invites-table td.invite-action { white-space: nowrap; }
@media (max-width: 560px) {
  .invite-code { font-size: 1.25rem; letter-spacing: 0.1em; }
  .invites-table table, .invites-table tbody, .invites-table tr, .invites-table td { display: block; width: 100%; }
  .invites-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* names the columns for assistive tech; each cell carries its own label */
  .invites-table tr { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
  .invites-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; text-align: right !important; border: 0; overflow-wrap: anywhere; }
  .invites-table td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 0.85rem; text-align: left; }
  .invites-table td[data-label=""]::before { content: none; }
  .invites-table td.invite-action { justify-content: flex-end; }
  .invites-table .cell-value { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
}
.badge.open-invite { border-style: dashed; border-color: var(--accent); color: var(--accent-light); }
/* Modern Tactical Pitch — squad and transfer desk skin.
   cerebro-webdesign-v2 §§1.1, 1.2, 2.1–2.2 and 7.15–7.18, 7.22.
   Preserve GM Sports guache, olive and ochre identity. */
.gm-view { --gm-gold: var(--pos-gk); --gm-ink: var(--text); --gm-muted: var(--muted); --gm-hairline: var(--surface-border-soft); --gm-keeper: var(--pos-gk); --gm-defence: var(--pos-def); --gm-midfield: var(--pos-mid); --gm-attack: var(--pos-att); display: grid; gap: clamp(1rem, 0.75rem + 1.25vw, 2rem); color: var(--gm-ink); }
.gm-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.72fr); align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 3rem); min-height: 15rem; overflow: hidden; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border: 1px solid var(--gm-hairline); border-radius: 1rem; background: linear-gradient(100deg, oklch(0.145 0.015 130 / 0.96), oklch(0.17 0.025 130 / 0.86) 58%, oklch(0.2 0.035 125 / 0.58)), url('/assets/torcida-guache.webp') center 44% / cover; box-shadow: 0 2px 6px oklch(0.08 0.02 120 / 0.22), inset 0 1px 0 oklch(1 0 0 / 0.08); }
.gm-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, oklch(0.12 0.02 125 / 0.42), transparent 62%); content: ''; pointer-events: none; }
.gm-hero-copy { min-width: 0; }
.gm-eyebrow, .gm-section-index { color: var(--gm-gold); font-size: clamp(0.72rem, 0.69rem + 0.15vw, 0.81rem); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.gm-hero h1 { max-width: 18ch; margin: 0.4rem 0 0.5rem; color: var(--gm-ink); font-size: clamp(2rem, 1.55rem + 2.25vw, 3.35rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.gm-hero-note { max-width: 58ch; color: var(--gm-muted); }
.gm-hero-shortcut { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; color: var(--gm-gold); font-weight: 750; }
.gm-squad-hero { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr); }
.gm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.gm-metric { display: grid; min-width: 0; gap: 0.25rem; padding: 0.75rem 1rem; border: 1px solid oklch(0.82 0.08 100 / 0.18); border-radius: 0.75rem; background: oklch(0.15 0.02 130 / 0.62); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06); backdrop-filter: blur(8px); }
.gm-metric-label { overflow: hidden; color: var(--gm-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gm-metric strong { overflow: hidden; color: var(--gm-ink); font-size: clamp(1rem, 0.88rem + 0.6vw, 1.4rem); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.gm-metric small { color: var(--gm-muted); font-size: 0.75rem; }
.gm-roster-pitch { position: relative; width: min(100%, 25rem); aspect-ratio: 1.54; justify-self: end; overflow: hidden; border: 1px solid oklch(0.84 0.08 145 / 0.3); border-radius: 0.85rem; background: linear-gradient(90deg, transparent 49.7%, oklch(0.86 0.08 145 / 0.32) 50%, transparent 50.3%), repeating-linear-gradient(0deg, oklch(0.72 0.14 145 / 0.12) 0 12.5%, oklch(0.67 0.13 145 / 0.08) 12.5% 25%), linear-gradient(145deg, oklch(0.34 0.105 145), oklch(0.25 0.09 140)); box-shadow: inset 0 0 2rem oklch(0.1 0.04 140 / 0.32), 0 2px 6px oklch(0.08 0.02 120 / 0.22); }
.gm-pitch-half, .gm-pitch-box, .gm-pitch-circle { position: absolute; border: 1px solid oklch(0.86 0.08 145 / 0.42); pointer-events: none; }
.gm-pitch-half { inset: 50% 0 auto; }
.gm-pitch-circle { top: 50%; left: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.gm-pitch-box { left: 28%; width: 44%; height: 17%; }
.gm-pitch-box-top { top: 0; border-top: 0; }
.gm-pitch-box-bottom { bottom: 0; border-bottom: 0; }
.gm-pitch-player { position: absolute; width: clamp(0.65rem, 0.55rem + 0.5vw, 0.95rem); aspect-ratio: 1; border: 2px solid oklch(0.97 0.025 90 / 0.92); border-radius: 50%; background: var(--gm-midfield); box-shadow: 0 1px 5px oklch(0.08 0.02 120 / 0.65), 0 0 0 3px oklch(0.72 0.18 150 / 0.18); transform: translate(-50%, -50%); }
.gm-pitch-player.keeper { background: var(--gm-keeper); box-shadow: 0 1px 5px oklch(0.08 0.02 120 / 0.65), 0 0 0 3px oklch(0.8 0.16 85 / 0.22); }
.gm-data-panel, .gm-filter-panel { min-width: 0; padding: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); overflow: hidden; border: 1px solid var(--gm-hairline); border-radius: 0.875rem; background: linear-gradient(155deg, oklch(0.19 0.022 130 / 0.97), oklch(0.155 0.018 130 / 0.97)); box-shadow: 0 2px 5px oklch(0.08 0.02 120 / 0.2), inset 0 1px 0 oklch(1 0 0 / 0.07); }
.gm-panel-heading, .gm-results-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gm-panel-heading h2, .gm-results-heading h2 { margin: 0.25rem 0 0; color: var(--gm-ink); font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); letter-spacing: -0.025em; }
.gm-panel-heading .tabs { margin: 0; }
.gm-view .tabs button, .gm-view .tabs a.tab { min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--gm-hairline); border-radius: 0.65rem; background: oklch(0.16 0.018 130 / 0.8); color: var(--gm-muted); transition: background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.gm-view .tabs :is(button, a.tab):hover { border-color: oklch(0.8 0.16 85 / 0.52); color: var(--gm-ink); }
.gm-view .tabs :is(button, a.tab):active { transform: translateY(1px); }
.gm-view .tabs :is(button, a.tab).active { border-color: oklch(0.8 0.16 85 / 0.52); background: oklch(0.8 0.16 85 / 0.14); color: var(--gm-gold); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07); }
.gm-view .table-wrap { border: 1px solid oklch(0.72 0.055 110 / 0.14); border-radius: 0.75rem; background: oklch(0.145 0.015 130 / 0.56); }
.gm-view table { min-width: 38rem; border-spacing: 0; border-collapse: separate; color: var(--gm-ink); }
.gm-view th { z-index: 1; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--gm-hairline); background: oklch(0.2 0.025 130); color: var(--gm-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.gm-view td { padding: 0.7rem 0.5rem; border-bottom: 1px solid oklch(0.72 0.055 110 / 0.11); background: transparent; }
.gm-view tbody tr:nth-child(odd) td, .gm-view tbody tr:nth-child(even) td { background: transparent; }
.gm-view tbody tr { transition: background-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.gm-view tbody tr:hover td { background: oklch(0.72 0.18 150 / 0.07); }
.gm-squad .squad-table th.sortable:hover { color: var(--gm-gold); }
.gm-squad .squad-table tbody tr { cursor: pointer; }
.gm-squad .squad-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 var(--gm-gold); }
.gm-view .num { font-variant-numeric: tabular-nums; }
.gm-view .stars { color: var(--gm-gold); }
.gm-view .club-badge, .gm-view td:first-child .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; text-align: center; flex-shrink: 0; }
.gm-view table td:first-child { vertical-align: middle; padding-left: 0.5rem; }
.gm-view table td:first-child .badge { margin: 0; }
.gm-view :is(.muted, .gm-results-hint) { color: var(--gm-muted); }
.gm-market { gap: 1rem; }
.gm-market-hero { min-height: 4.5rem; padding: 0.85rem 1.4rem; grid-template-columns: 1fr; }
.gm-market-hero h1 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); margin: 2px 0 4px; }
.gm-market-hero .gm-hero-shortcut { min-height: 28px; font-size: 0.85rem; }
.gm-market-graphic, .gm-orbit, .gm-orbit-inner, .gm-orbit-point, .gm-orbit-cross { display: none !important; }
.gm-tab-rail { position: sticky; z-index: 3; top: 0.5rem; width: fit-content; max-width: 100%; padding: 0.375rem; border: 1px solid var(--gm-hairline); border-radius: 0.875rem; background: oklch(0.15 0.018 130 / 0.94); box-shadow: 0 4px 14px oklch(0.08 0.02 120 / 0.28), inset 0 1px 0 oklch(1 0 0 / 0.06); backdrop-filter: blur(12px); }
.gm-tab-rail .tabs { margin: 0; gap: 0.375rem; }
.gm-market-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }   /* one track that never outgrows the page: the fields inside have a wide intrinsic size */
.gm-filter-panel { display: flex; align-items: center; gap: 0.75rem; }
.gm-filter-panel > :is(input, select) { min-height: 2.75rem; border: 1px solid var(--gm-hairline); border-radius: 0.65rem; background: oklch(0.145 0.015 130); color: var(--gm-ink); }
.gm-filter-panel > :is(input, select):focus-visible { border-color: var(--gm-gold); }
.gm-market .gm-results-heading { align-items: center; }
.gm-count-pill { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid oklch(0.8 0.16 85 / 0.3); border-radius: 999px; background: oklch(0.8 0.16 85 / 0.1); color: var(--gm-muted); }
.gm-count-pill strong { color: var(--gm-gold); font-variant-numeric: tabular-nums; }
.gm-market-stats > .card { border: 1px solid var(--gm-hairline); border-radius: 0.875rem; background: linear-gradient(145deg, oklch(0.2 0.025 130), oklch(0.16 0.018 130)); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07); }
.gm-market-stats > .card h3 { color: var(--gm-muted); font-size: 0.75rem; letter-spacing: 0.075em; text-transform: uppercase; }
.gm-market-stats .stat { color: var(--gm-gold); font-variant-numeric: tabular-nums; }
.gm-market-stats.market-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 12px 20px;
  margin-bottom: 16px;
  align-items: center;
  border: 1px solid var(--gm-hairline);
  border-radius: 0.875rem;
  background: linear-gradient(145deg, oklch(0.2 0.025 130), oklch(0.16 0.018 130));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07);
}
.market-strip-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.market-strip-col + .market-strip-col {
  border-left: 1px solid var(--gm-hairline);
  padding-left: 16px;
}
.market-strip-label {
  color: var(--gm-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.market-strip-val {
  color: var(--gm-gold);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
@media (max-width: 540px) {
  .gm-market-stats.market-strip {
    gap: 8px;
    padding: 10px 10px;
  }
  .market-strip-col + .market-strip-col {
    padding-left: 8px;
  }
  .market-strip-label {
    font-size: 0.65rem;
  }
  .market-strip-val {
    font-size: 0.95rem;
  }
}
@media (max-width: 390px) {
  .gm-market-stats.market-strip {
    gap: 6px;
    padding: 8px 6px;
  }
  .market-strip-col + .market-strip-col {
    padding-left: 6px;
  }
  .market-strip-label {
    font-size: 0.62rem;
  }
  .market-strip-val {
    font-size: 0.85rem;
  }
}
.gm-view .btn.primary { border-color: #c8f87f; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; text-shadow: none; }
.gm-view .btn.primary:is(:hover, :focus-visible) { border-color: #d9ffa3; background: #d1ff7d; color: var(--color-accent-ink); }
.gm-view .btn:not(.primary) { border-color: var(--gm-hairline); }
.gm-view a:focus-visible, .gm-view button:focus-visible, .gm-view input:focus-visible, .gm-view select:focus-visible { outline-color: var(--gm-gold); }
@media (max-width: 760px) {
  .gm-hero, .gm-squad-hero, .gm-market-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; min-height: 0; padding: 1.25rem; }
  .gm-roster-pitch { width: 100%; max-width: 30rem; justify-self: stretch; }
  .gm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; }
  .gm-metric { padding: 0.625rem 0.75rem; }
  .gm-market-graphic { position: absolute; right: -2rem; bottom: -2rem; width: 10rem; opacity: 0.28; pointer-events: none; }
  .gm-market-hero { position: relative; }
  .gm-filter-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-filter-panel > :is(input, select) { width: 100%; min-width: 0; }
  .gm-tab-rail { position: static; width: 100%; }
  .gm-tab-rail .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-tab-rail .tabs a.tab { min-width: 0; overflow: hidden; padding-inline: 0.5rem; text-overflow: ellipsis; text-align: center; }
  .gm-view .table-wrap { border-radius: 0.625rem; }
  .gm-view .table-wrap table { min-width: 34rem; }
}
@media (prefers-reduced-motion: reduce) { .gm-view *, .gm-view *::before, .gm-view *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
/* Sector position badges per �3.3 spec */
.gm-view .pos { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.gm-view .pos.gk { background: var(--pos-gk); color: var(--color-accent-ink); }
.gm-view .pos.d { background: var(--pos-def); color: #ffffff; }
.gm-view .pos.m { background: var(--pos-mid); color: var(--color-accent-ink); }
.gm-view .pos.f { background: var(--pos-att); color: #ffffff; }
.gm-squad .squad-table td:first-child { display: table-cell; }
.gm-squad .squad-table { min-width: 56rem; }
.gm-squad .squad-table td:nth-child(3) { white-space: nowrap; overflow-wrap: normal; }
.gm-squad .squad-table .squad-positions { display: inline-flex; flex-wrap: nowrap; gap: 0.25rem; white-space: nowrap; }
.gm-squad .squad-table .pos { flex: 0 0 auto; white-space: nowrap; }

/* Squad Title Row & Compact Unbordered Wage Text */
.squad-title-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-3, 12px);
}
.squad-title-row .squad-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 780;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
}
.squad-wage-chip-link {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  margin-left: 0;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: inherit;
  transition: opacity 150ms ease;
  min-height: 44px;
  box-sizing: border-box;
}
.squad-wage-chip-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.squad-wage-chip-link:hover {
  text-decoration: none;
}

/* Sem moldura, sem fundo, sem sombra: apenas rotulo e valor como texto */
.stadium-app .board .main :is(.squad-title-row, .squad-wage-chip-link) .gm-metric.squad-wage,
.gm-view :is(.squad-title-row, .squad-wage-chip-link) .gm-metric.squad-wage,
.squad-title-row .gm-metric.squad-wage,
.squad-wage-chip-link .gm-metric.squad-wage {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--space-1-5, 6px);
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: 100%;
  cursor: pointer;
}
.squad-wage-chip-link .gm-metric.squad-wage .gm-metric-label {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transition: color 150ms ease;
}
.squad-wage-chip-link .gm-metric.squad-wage strong {
  color: var(--color-accent);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transition: color 150ms ease;
}
.squad-wage-chip-link .gm-metric.squad-wage small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.squad-wage-chip-link:hover .gm-metric.squad-wage strong {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.squad-wage-chip-link:hover .gm-metric.squad-wage .gm-metric-label {
  color: var(--text);
}

/* Squad Toolbar & Search */
.squad-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--surface-border);
  flex-wrap: wrap;
}
.squad-search-wrap {
  flex: 0 1 20rem;
  max-width: 22rem;
  min-width: 14rem;
  position: relative;
}
.squad-search-input {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 var(--space-3, 12px);
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface-bg);
  color: var(--text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 150ms ease;
}
.squad-search-input:focus-visible {
  border-color: var(--color-accent);
  outline: 1px solid var(--color-accent);
}
.squad-empty-cell {
  padding: var(--space-8) !important;
  text-align: center;
}
.squad-empty-mobile {
  padding: var(--space-8);
  text-align: center;
}

/* Squad filter chips */
.squad-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  flex-wrap: wrap;
}
.squad-filters .chip-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 44px;
  padding: 0 var(--space-4, 16px);
  border-radius: var(--radius-full);
  border: 1px solid var(--surface-border);
  background: var(--surface-panel);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}
.squad-filters .chip-filter:hover {
  border-color: var(--color-accent);
  color: var(--text);
}
.squad-filters .chip-filter.active {
  background: var(--color-accent);
  color: var(--surface-bg);
  border-color: var(--color-accent);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(184, 243, 75, 0.25);
}

/* Squad Mobile Cards list */
.squad-mobile-cards {
  display: none;
}

@media (max-width: 760px) {
  .squad-desktop-table {
    display: none !important;
  }
  .gm-squad .table-wrap {
    overflow-x: visible;
    background: transparent;
    border: none;
    padding: 0;
  }
  .squad-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding-bottom: 84px;
  }
  .squad-player-card {
    display: flex;
    align-items: center;
    min-height: 64px;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    padding: 8px var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  }
  .squad-player-card:hover, .squad-player-card:focus-visible {
    background: var(--surface-panel);
    border-color: var(--color-accent);
    outline: none;
  }
  .squad-player-card:active {
    transform: scale(0.99);
  }
  .squad-card-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
  .squad-card-pos {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .squad-card-pos .pos {
    min-width: 32px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--space-1);
  }
  .squad-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
  }
  .squad-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .squad-card-name {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .squad-card-name .name-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .squad-card-name .name-status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .squad-card-stars {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
  }
  .squad-card-stars .stars {
    font-size: 0.8rem;
    letter-spacing: -1px;
    line-height: 1;
  }
  .squad-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
  .squad-card-kpi-val {
    color: var(--text);
    font-family: var(--font-num, inherit);
    font-variant-numeric: tabular-nums;
  }
  .squad-card-sep {
    opacity: 0.4;
  }
  .squad-card-wage {
    font-family: var(--font-num, inherit);
    font-variant-numeric: tabular-nums;
    color: var(--color-pos);
  }
  .squad-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--space-2);
  }
  .squad-title-row .squad-title {
    font-size: var(--text-lg);
  }
  .squad-wage-chip-link .gm-metric.squad-wage strong {
    font-size: var(--text-sm);
  }
  .squad-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2);
  }
  .squad-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .squad-search-input {
    min-height: 44px;
    height: 44px;
    font-size: var(--text-base);
  }
  .squad-filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }
  .squad-filters .chip-filter {
    min-height: 44px;
    height: 44px;
    width: 100%;
    padding: 0;
  }
}
.league-table .num { text-align: right; padding-left: 12px; }
.table-wrap table { border-collapse: collapse; width: 100%; }
.stadium-cards { display: flex; gap: 16px; align-items: stretch; }
.card.stadium-card { flex: 1; min-height: 140px; }

/* ==========================================================================
   Elenco (01/11): seis colunas. Os catorze atributos vivem na ficha do
   jogador, que abre no clique da linha. Tabela densa, linha de 40px.
   ========================================================================== */
.gm-squad .gm-panel-heading.squad-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 16px;
  margin: 0 0 12px;
  padding: 0;
}
.gm-squad .squad-search-wrap {
  flex: 0 1 20rem;
  min-width: 12rem;
  max-width: 20rem;
}
.gm-squad .squad-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.gm-squad .squad-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 13px;
}
.gm-squad .squad-table :is(th, td) {
  padding: 0 8px;
  vertical-align: middle;
}
/* PLAYER on the left; every short column (POS, AGE, REC, ASI, WAGE, STATUS) has its title and its cells on one centre line, with fixed widths so nothing moves when a row has two position badges or a long status. */
.gm-squad .squad-table :is(th, td):nth-child(1) { width: 22%; text-align: left; }
.gm-squad .squad-table :is(th, td):nth-child(n+2) { text-align: center; }
.gm-squad .squad-table :is(th, td):nth-child(2) { width: 8rem; }
.gm-squad .squad-table :is(th, td):nth-child(3) { width: 5rem; }
.gm-squad .squad-table :is(th, td):nth-child(4) { width: 6rem; }
.gm-squad .squad-table :is(th, td):nth-child(5) { width: 4.5rem; }
.gm-squad .squad-table :is(th, td):nth-child(6) { width: 7rem; }
.gm-squad .squad-table :is(th, td):nth-child(7) { width: 11rem; }
.gm-squad .squad-table .squad-positions { justify-content: center; }
.gm-squad .squad-table th .sort-label { position: relative; display: inline-block; }
.gm-squad .squad-table th .sort-arrow { position: absolute; left: 100%; margin-left: .3em; }
.gm-squad .squad-table thead th {
  height: 34px;
  border-bottom: 1px solid rgba(130, 178, 154, 0.2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gm-squad .squad-table tbody tr {
  height: 40px;
}
.gm-squad .squad-table tbody td {
  height: 40px;
  border-bottom: 1px solid rgba(130, 178, 154, 0.1);
  background: transparent;
}
.gm-squad .squad-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }

/* Elenco no celular: a barra deixa de ser coluna esticada. */
@media (max-width: 760px) {
  .gm-squad .gm-panel-heading.squad-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .gm-squad .squad-search-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  .gm-squad .squad-search-input {
    height: 44px;
  }
  .gm-squad .squad-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .gm-squad .squad-filters .chip-filter {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* Entre tablet e desktop a tabela perde idade e salario para o nome respirar. */
@media (max-width: 900px) and (min-width: 761px) {
  .gm-squad .squad-table :is(th, td):nth-child(3),
  .gm-squad .squad-table :is(th, td):nth-child(6) {
    display: none;
  }
  .gm-squad .squad-table :is(th, td):nth-child(2) { width: 6rem; }
  .gm-squad .squad-table :is(th, td):nth-child(4) { width: 5.5rem; }
  .gm-squad .squad-table :is(th, td):nth-child(5) { width: 4rem; }
  .gm-squad .squad-table :is(th, td):nth-child(7) { width: 6rem; }
}

/* ==========================================================================
   Mercado: cards moveis para leiloes e negociacoes (mobile).
   Desktop mantem tabela completa de 10 colunas intacta.
   ========================================================================== */
.market-mobile-cards {
  display: none;
}

@media (max-width: 760px) {
  .market-desktop-table {
    display: none !important;
  }
  .gm-market-results .table-wrap.market-desktop-table {
    display: none !important;
  }
  .market-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 84px;
  }
  .market-auction-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--surface-card, #0f2420);
    border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  }
  .market-auction-card:hover, .market-auction-card:focus-visible {
    background: var(--surface-panel, #142e29);
    border-color: var(--color-accent, #10b981);
    outline: none;
  }
  .market-auction-card:active {
    transform: scale(0.99);
  }
  .market-card-top {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .market-card-top .person {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .market-card-top .avatar {
    --avatar-size: 32px !important;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .market-card-player-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
  }
  .market-card-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .market-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-heading, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .market-card-stars {
    flex-shrink: 0;
    font-size: 0.85rem;
  }
  .market-card-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--muted, #8b949e);
  }
  .market-card-positions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .market-card-positions .pos {
    font-size: 0.7rem;
    padding: 1px 4px;
    min-width: 24px;
    height: 18px;
    line-height: 16px;
  }
  .market-card-age {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .market-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .market-card-price-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .market-card-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-accent, #10b981);
    letter-spacing: -0.01em;
  }
  .market-card-meta {
    font-size: 0.75rem;
    color: var(--muted, #8b949e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .market-card-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .market-card-action .btn {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .market-card-has-bids {
    font-size: 0.8rem;
    color: var(--muted, #8b949e);
  }
}

/* Modal de detalhes do jogador no mercado */
.market-detail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.market-detail-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
}
.market-detail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.market-detail-positions {
  display: flex;
  gap: 4px;
}
.market-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.market-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.market-detail-item strong {
  font-size: 0.95rem;
}
.market-highlight-price {
  color: var(--color-accent, #10b981) !important;
  font-size: 1.05rem !important;
}

/* --- Market: player sheet on phones (bottom sheet with handle, Back and close) --- */
@media (max-width: 760px) {
  body .modal.modal-sheet {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    width: 100%; max-width: 100%; max-height: 88dvh; box-sizing: border-box;
    border-radius: 18px 18px 0 0; border-bottom-width: 0;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
  }
  body:has(.modal-sheet) .modal-backdrop { z-index: 79; }
  body:has(.modal-sheet) #gm-radio-bar { display: none; }
  .modal-sheet .sheet-handle { display: flex; justify-content: center; padding: 10px 0 4px; touch-action: none; cursor: grab; position: sticky; top: 0; z-index: 3; background: inherit; }
  .modal-sheet .sheet-handle span { width: 44px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); }
  .modal-sheet > .topbar { position: sticky; top: 24px; z-index: 3; align-items: center; padding: 4px 0 8px; background: inherit; }
  .modal-sheet > .topbar h2 { flex: 1 1 auto; font-size: 1.1rem; }
  .modal-sheet .sheet-back, .modal-sheet .sheet-close { min-height: 44px; min-width: 44px; }
  .modal-sheet > .chips { position: sticky; bottom: 0; z-index: 3; padding-top: 10px; background: inherit; }
  .modal-sheet > .chips .btn { min-height: 44px; }
}

/* Player column of the auctions table: it keeps a width of its own (the percent max-width of the cut name made it collapse to 1px
   at tablet widths) and the position column keeps its own, so the name is cut with an ellipsis instead of sliding over ML, OML, MC. */
@media (min-width: 761px) {
  .stadium-app .board .main table.dense-table.market-table :is(th, td).col-fixed-1 { min-width: 9rem; width: 9rem; max-width: 9rem; }
  .stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .person { max-width: 100%; }
  .stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .cut-name { max-width: 100%; }
  .stadium-app .board .main table.dense-table.market-table :is(th, td):nth-child(2) { min-width: 7.5rem; }
}
/* On tablets the table must still show the bid button without sideways scrolling: the secondary columns (age, seller) go, like they do on phones. */
@media (min-width: 761px) and (max-width: 1000px) {
  .stadium-app .board .main table.dense-table.market-table .hide-sm { display: none !important; }
}
/* --- Scouts: a plain list of cards; the numbers open in a popup (same pattern as the market) --- */
.scout-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-3, 12px); }
.scout-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main action" "hint action"; align-items: center; gap: 4px 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--gm-hairline, rgba(255, 255, 255, 0.12)); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.scout-card:hover { border-color: var(--color-accent, #b6ff3b); }
.scout-card:focus-visible { outline: 2px solid var(--color-accent, #b6ff3b); outline-offset: 2px; }
.scout-card-main { grid-area: main; display: grid; gap: 4px; min-width: 0; }
.scout-card-main .person { min-width: 0; }
.scout-card-main .person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.scout-card-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.85rem; color: var(--muted, #9bb); }
.scout-card-facts small { opacity: 0.8; }
.scout-card-hint { grid-area: hint; font-size: 0.75rem; color: var(--muted, #9bb); }
.scout-card > button { grid-area: action; align-self: center; }
.scout-stats-body { display: grid; gap: 14px; min-width: 0; }
.scout-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scout-stat { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--gm-hairline, rgba(255, 255, 255, 0.12)); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.04); }
.scout-stat-label { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #9bb); }
.scout-stat-value { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.scout-stats-legend { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 0.8rem; color: var(--muted, #9bb); }
.scout-stats-legend dt { font-weight: 700; text-transform: uppercase; }
.scout-stats-legend dd { margin: 0; }
@media (max-width: 360px) { .scout-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Staff tables: same look as the auctions table, but with their own column sizes (no horizontal scroll from 761px up). */
@media (min-width: 761px) {
  .stadium-app .board .main table.staff-table { width: 100%; table-layout: auto; }
  .stadium-app .board .main table.staff-table :is(th, td) { padding-inline: 8px; white-space: nowrap; }
  .stadium-app .board .main table.staff-table :is(th, td).col-fixed-1 { width: 12rem; max-width: 12rem; text-align: left; overflow: hidden; }
  .stadium-app .board .main table.staff-table .cut-name { max-width: 100%; }
  .stadium-app .board .main table.staff-table .person { display: flex; align-items: center; min-width: 0; }
  .stadium-app .board .main table.staff-table .person > span:last-child { overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .stadium-app .board .main table.staff-table :is(th, td) { padding-inline: 2px; font-size: 0.82rem; }
  .stadium-app .board .main table.staff-table .btn { padding-inline: 8px; min-width: 44px; }
  .stadium-app .board .main table.staff-table :is(th, td).col-fixed-1 { width: 7.5rem; max-width: 7.5rem; }
  .stadium-app .board .main table.staff-table .cut-name { max-width: 6rem; }
  .stadium-app .board .main table.staff-table th { white-space: normal; line-height: 1.15; }
  .stadium-app .board .main table.staff-table td.num { font-size: 0.8rem; }
  .stadium-app .board .main table.staff-table .avatar { --avatar-size: 24px !important; }
}
.stadium-app .board .main table.staff-table .staff-hide-tablet { display: none; }
@media (min-width: 1101px) { .stadium-app .board .main table.staff-table .staff-hide-tablet { display: table-cell; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .stadium-app .board .main table.staff-table :is(th, td):nth-child(1) { width: 8rem; min-width: 0; }
  .stadium-app .board .main table.staff-table :is(th, td):nth-child(10) { width: 100px; min-width: 0; }
  .stadium-app .board .main table.staff-table :is(th, td):nth-child(11) { width: 72px; min-width: 0; }
}
@media (max-width: 760px) {
  .scout-cards.market-mobile-cards { padding-bottom: 0; }
  .staff-available { padding-bottom: 84px; }
}
/* Players of the club's own academy (api: ownAcademy / redeemableMax on the club's own players and listings): the short "Base · up to X" tag, and the fixed line of the sell dialog about
   what the sale can add to the redeemable balance. */
.academy-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--color-accent, #b6e24b); border-radius: 999px; color: var(--color-accent, #b6e24b); background: rgba(182, 226, 75, .1); font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.sell-redeemable p { margin: 6px 0 0; font-size: .85rem; line-height: 1.45; }
/* In the squad table the name column is narrow: the tag sits on its own line under the name, aligned with it (after the 30 px portrait and its gap). */
.squad-desktop-table .name-cell .academy-tag { display: block; width: fit-content; margin: 1px 0 0 38px; padding: 0 6px; font-size: .68rem; line-height: 1.45; }
/* My listings (table): the tag under the player's name, aligned with it (portrait + gap). */
.market-table .col-fixed-1 .academy-tag { display: block; width: fit-content; margin: 1px 0 0 38px; padding: 0 6px; font-size: .68rem; line-height: 1.45; }

/* Friends between managers: the Account card with its per-friend menu, the club-page button, and the requests card on the News page. */
.friend-list, .friend-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.friend-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid rgba(143, 183, 154, .16); }
.friend-row:last-child { border-bottom: 0; }
.friend-main { display: grid; min-width: 0; }
.friend-trigger { justify-self: start; max-width: 100%; min-height: 32px; padding: 2px 6px; margin-left: -6px; border: 0; border-radius: 6px; background: transparent; color: var(--color-accent, #b6e24b); font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-trigger::after { content: ' ▾'; font-size: .8em; }
.friend-trigger:hover { background: rgba(255, 255, 255, .06); }
.friend-trigger:focus-visible, .friend-item:focus-visible { outline: 2px solid var(--color-accent, #b6e24b); outline-offset: 2px; }
.friend-menu { position: absolute; z-index: 30; top: calc(100% - 6px); left: 52px; min-width: 12rem; display: grid; padding: 6px; border: 1px solid var(--surface-border, #2b4455); border-radius: 10px; background: #0f2b34; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.friend-menu[hidden] { display: none; }
.friend-item { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.friend-item:hover { background: rgba(255, 255, 255, .08); }
.friend-item.danger { color: var(--color-neg, #ff8e9b); }
.friend-request { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 6px 4px; border-bottom: 1px solid rgba(143, 183, 154, .16); }
.friend-request:last-child { border-bottom: 0; }
.friend-request-text { flex: 1 1 12rem; min-width: 0; }
.friend-request-text .friend-name { font-weight: 700; }
.friend-request-actions { display: inline-flex; gap: 8px; }
.friend-action { display: inline-flex; }
.friends-card { position: relative; z-index: 5; overflow: visible; max-height: none; }   /* the friend's menu opens over the card's edge, above the card below */

/* Another club's page, squad table: on a phone (<= 640 px, the Dashboard's breakpoint) only PLAYER | POS | REC, in a fixed layout with no horizontal scroll (the name is cut with an ellipsis,
   POS holds two badges, REC the five stars); AGE and ASI are hidden. The desktop keeps every column. */
@media (max-width: 640px) {
  table.dense-table.club-squad-table { width: 100%; min-width: 0; table-layout: fixed; }
  table.dense-table.club-squad-table :is(.squad-age) { display: none; }
  table.dense-table.club-squad-table :is(th, td) { padding: 9px 4px; }
  table.dense-table.club-squad-table :is(th, td).squad-player { position: static; width: auto; min-width: 0; text-align: left; overflow: hidden; }
  table.dense-table.club-squad-table :is(th, td).squad-player::after { display: none; }   /* no sticky-column shadow: nothing scrolls sideways */
  table.dense-table.club-squad-table :is(th, td).squad-pos { width: 5.1rem; text-align: center; }
  table.dense-table.club-squad-table :is(th, td).squad-rec { width: 4.6rem; text-align: center; white-space: nowrap; }
  table.dense-table.club-squad-table td.squad-player .person { display: flex; align-items: center; width: 100%; max-width: 100%; min-width: 0; }
  table.dense-table.club-squad-table td.squad-player .person > :last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.dense-table.club-squad-table td.squad-player .person a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.dense-table.club-squad-table .squad-positions { display: inline-flex; gap: 2px; justify-content: center; }
  table.dense-table.club-squad-table .squad-pos .pos { min-width: 0; padding-inline: 4px; font-size: .72rem; }
  table.dense-table.club-squad-table .stars { font-size: clamp(.62rem, 2.6vw, .8rem); }
}

/* Auctions / my listings table (9 columns: Player, Pos, Age, Rec, Seller/Type, Price, Bids, Ends, Action). The older nth-child rules in styles.css were written for another column order and
   gave the Bids column 130 px and the Price column 80 px, which left a huge gap after the player name and pushed the Place bid button out of the card. Widths by position, in one place;
   the player column takes whatever is left. */
@media (min-width: 761px) {
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) { table-layout: fixed; width: 100%; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(1) { width: auto; min-width: 180px; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(2) { width: 104px; min-width: 0; text-align: center; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(3) { width: 72px; min-width: 0; text-align: center; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(4) { width: 84px; min-width: 0; text-align: center; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(5) { width: 140px; min-width: 0; max-width: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(6) { text-align: right; width: 132px; min-width: 0; max-width: none; overflow: visible; white-space: nowrap; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(7) { width: 56px; min-width: 0; text-align: center; overflow: visible; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(8) { width: 92px; min-width: 0; text-align: right; white-space: nowrap; }
  .market-desktop-table table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(9) { width: 124px; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }


/* A knockout decided on penalties: the shoot-out sits on its own line under the score (it used to run into the away team's name on a phone). */
.score-cell .score-pens { display: block; margin-top: 1px; font-size: .72rem; font-weight: 600; line-height: 1.2; color: var(--muted); white-space: nowrap; }