/**
 * Design system do Smatch na WEB — espelho de `src/shared/theme/` do app.
 *
 * Regras que vêm do app e valem aqui igual:
 *  • Fonte = Inter (o app trocou de Montserrat em 30/07/2026). Marca = Pacifico.
 *  • TETO DE PESO 600. Nada de 700/800/bold em lugar nenhum.
 *  • Tamanho por PAPEL, da escala: 10 overline/caption · 12 footnote ·
 *    14 body (padrão) · 16 title · 18 headline · 24 display. Sem 13/15/17.
 *  • Paleta navy+gold+roxo — nunca o roxo genérico #7C3AED que estava aqui.
 *
 * Usado pelo perfil público (render server-side) e pela área logada (app.html).
 */

:root {
  /* Marca */
  --navy: #352A5C;          /* primary.main — headers, superfícies escuras */
  --accent: #6B3FA0;        /* primary.accent — botões, links, badges */
  --accent-light: #9B7BC7;
  --lavender: #D8C5E8;      /* primary.ultraLight */
  --gold: #E8BA4A;          /* secondary.main — wordmark, destaques */
  --gold-light: #F8E5A0;

  /* Superfícies */
  --bg: #FAF9F8;            /* background.primary (warm) */
  --surface: #FFFFFF;
  --subtle: #F5F3F1;
  --inverse-bg: #2A1F47;

  /* Texto */
  --text: #1C1815;
  --text-2: #544E49;
  --text-3: #A39E98;
  --text-inverse: #FFFFFF;

  /* Bordas */
  --border: #E8E4E0;
  --border-medium: #D1CBC5;

  /* Status */
  --win: #22a565;
  --loss: #e23b3b;
  --warning: #C9A227;
  /* Tinta do aviso em fundo claro. O `status.warning` do app (#F1C530) é o
     amarelo do rótulo sobre superfície escura/colorida; como TEXTO em fundo
     branco ele fica ilegível (~1.8:1), então a web usa o mesmo amarelo
     escurecido. Mesma família, contraste que passa. */
  --warning-ink: #8A6A12;

  /* Escala tipográfica (a MESMA do app) */
  --fs-overline: 10px;
  --fs-footnote: 12px;
  --fs-body: 14px;
  --fs-title: 16px;
  --fs-headline: 18px;
  --fs-display: 24px;

  --radius: 12px;
  --radius-lg: 16px;
  --tab-h: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* 🚨 `height: 100%` trava o body na altura da janela e o sticky do topo
   solta ao rolar. `min-height` deixa crescer com o conteúdo. */
html { height: 100%; }
body { min-height: 100%; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Topo: navy com a wordmark em Pacifico gold (igual ao header do app) ── */
.sm-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 56px; padding: 5px 16px;
  background: var(--navy);
}
.sm-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.sm-brand img { width: 26px; height: 26px; object-fit: contain; }
.sm-wordmark { font-family: Pacifico, cursive; font-size: 24px; color: var(--gold); line-height: 1; }
.sm-topbar-action {
  background: none; border: none; color: rgba(255,255,255,.85);
  font: inherit; font-size: var(--fs-footnote); cursor: pointer; padding: 6px 2px;
}

/* ── Conteúdo ────────────────────────────────────────────────────────────── */
.sm-main { flex: 1 1 auto; width: 100%; max-width: 620px; margin: 0 auto; padding-bottom: calc(var(--tab-h) + 16px); }
.sm-section { padding: 16px; }
.sm-section-title { font-size: var(--fs-title); font-weight: 600; margin-bottom: 12px; }
.sm-sub { font-size: var(--fs-footnote); color: var(--text-3); }

/* ── Header de identidade (espelho do perfil: avatar, nome, @, stats) ────── */
.sm-ident { display: flex; align-items: center; gap: 16px; padding: 20px 16px 0; }
.sm-ident-av { width: 82px; height: 82px; border-radius: 50%; object-fit: cover;
  background: var(--subtle); flex-shrink: 0; font-size: var(--fs-headline); }
.sm-ident-name { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.sm-ident-handle { font-size: var(--fs-body); color: var(--text-3); }
.sm-ident-sub { font-size: var(--fs-footnote); color: var(--text-2); margin-top: 4px; }
.sm-statsrow { display: flex; justify-content: space-between; gap: 4px;
  padding: 18px 12px 6px; border-bottom: 1px solid rgba(232,186,74,.35); }
.sm-statcell { flex: 1; text-align: center; }
.sm-statcell b { display: block; font-size: var(--fs-headline); font-weight: 600; line-height: 1.1; }
.sm-statcell span { font-size: var(--fs-footnote); color: var(--text-3); }

/* Avatar de quem está logado, na barra do topo */
.sm-me { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--gold); background: var(--subtle); cursor: pointer; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.sm-card {
  background: var(--surface);
  border: 1px solid rgba(232,228,224,.7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,24,21,.04), 0 8px 24px rgba(28,24,21,.05);
}
.sm-card + .sm-card { margin-top: 16px; }

/* ── Avatares ────────────────────────────────────────────────────────────── */
.sm-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--subtle); flex-shrink: 0; }
.sm-av-sm { width: 44px; height: 44px; }
.sm-av-ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: var(--fs-footnote); font-weight: 500;
}
.sm-av-stack { display: flex; flex-shrink: 0; }
.sm-av-stack .sm-av { border: 2px solid var(--surface); }
.sm-av-stack .sm-av:not(:first-child) { margin-left: -12px; }

/* ── Lances (stories) no topo do feed — mesma fileira do app/Instagram ───── */
.sm-stories { display: flex; gap: 14px; overflow-x: auto; padding: 14px 16px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sm-stories::-webkit-scrollbar { display: none; }
.sm-story { flex-shrink: 0; width: 68px; text-decoration: none; text-align: center; }
.sm-story-ring { display: block; width: 66px; height: 66px; border-radius: 50%; padding: 2px;
  background: linear-gradient(45deg, var(--accent), var(--gold)); }
.sm-story-ring img, .sm-story-ring span { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); background: var(--subtle); }
.sm-story-ring span { background: var(--accent); color: #fff; font-size: var(--fs-title); font-weight: 500; }
/* O "meu lance" não tem anel colorido enquanto não houver lance meu. */
.sm-story-mine .sm-story-ring { background: var(--border); }
.sm-story-name { display: block; font-size: var(--fs-overline); color: var(--text-2);
  margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-story-wrap { position: relative; }
.sm-story-plus { position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-footnote); line-height: 1; }

/* ── Cabeçalho de post (autor) ───────────────────────────────────────────── */
.sm-post-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.sm-post-author { font-size: var(--fs-body); font-weight: 600; color: var(--text); line-height: 1.3; }
.sm-post-meta { font-size: var(--fs-footnote); color: var(--text-3); margin-top: 1px; }
.sm-post-text { padding: 0 12px 10px; font-size: var(--fs-body); }
.sm-post-img { width: 100%; display: block; background: var(--subtle); }
.sm-post-actions { display: flex; gap: 18px; padding: 10px 12px; border-top: 1px solid var(--border); }
.sm-post-actions span { font-size: var(--fs-footnote); font-weight: 500; color: var(--text-2); }

/* ── Banner do torneio (hero 100px) — espelho do MatchResultPostCard ─────── */
.sm-banner { position: relative; height: 100px; background: var(--navy); overflow: hidden; }
.sm-banner img { width: 100%; height: 100%; object-fit: cover; }
/* Máscara UNIFORME (não gradiente): o nome tem que ler em banner claro também.
   Gradiente está proibido no app por quebrar layout no iOS; aqui mantemos a
   mesma decisão pra o visual não divergir. */
.sm-banner::after { content: ''; position: absolute; inset: 0; background: rgba(20,14,38,.66); }
.sm-banner-txt { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 1; }
.sm-banner-name { color: #fff; font-size: var(--fs-title); font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-banner-sub { color: rgba(255,255,255,.82); font-size: var(--fs-footnote); margin-top: 3px; }

/* Faixa de acento do vencedor (3px), como na linha do time no app. */
.sm-score-row.is-win::before { content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }

/* ── Placar (mesma peça do MatchResultPostCard / CompactMatchScoreboard) ─── */
.sm-score { padding: 12px 14px 14px; }
.sm-score-tour { font-size: var(--fs-footnote); font-weight: 500; color: var(--text-2); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-score-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; position: relative; }
.sm-score-row + .sm-score-row { border-top: 1px solid var(--border); }
.sm-score-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sm-score-names { min-width: 0; }
.sm-score-name {
  font-size: var(--fs-footnote); font-weight: 500; line-height: 1.35; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-score-row.is-win .sm-score-name { color: var(--text); font-weight: 600; }
.sm-score-sets { display: flex; gap: 8px; flex-shrink: 0; }
/* Games 18 nos DOIS lados: a diferença é COR e PESO, nunca tamanho. */
.sm-score-set { min-width: 20px; text-align: center; font-size: var(--fs-headline); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sm-score-row.is-win .sm-score-set { color: var(--text); font-weight: 600; }

/* UMA faixa de status só — lavanda + texto roxo, igual ao postcard do app. */
.sm-status {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; background: rgba(216,197,232,.32);
  font-size: var(--fs-footnote); font-weight: 600; color: var(--accent);
}
.sm-status svg { width: 14px; height: 14px; fill: currentColor; }

/* ── Item de agenda ──────────────────────────────────────────────────────── */
.sm-agenda-day { font-size: var(--fs-footnote); font-weight: 600; color: var(--text-2);
  padding: 14px 16px 6px; }
/* capitalize SÓ no dia da semana ("terça-feira"), nunca em título escrito por
   nós — virava "Ainda Sem Data", Title Case de sistema (proibido na copy). */
.sm-agenda-day.is-weekday { text-transform: capitalize; }
.sm-agenda-item { display: flex; gap: 12px; align-items: center; padding: 12px; }
.sm-agenda-when {
  flex-shrink: 0; width: 46px; text-align: center; border-right: 1px solid var(--border); padding-right: 10px;
}
.sm-agenda-d { font-size: var(--fs-title); font-weight: 600; line-height: 1.1; }
.sm-agenda-m { font-size: var(--fs-overline); color: var(--text-3); text-transform: uppercase; }
.sm-agenda-info { min-width: 0; flex: 1; }
.sm-agenda-title { font-size: var(--fs-body); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-agenda-sub { font-size: var(--fs-footnote); color: var(--text-3); }

/* ── Chips / botões ──────────────────────────────────────────────────────── */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius); padding: 13px 18px;
  font: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  text-decoration: none;
}
/* Ação principal = GOLD sobre navy (o par da marca). O roxo fica para
   estados/ícones; a wordmark sozinha em gold deixava a paleta pela metade. */
.sm-btn-primary { background: var(--gold); color: var(--navy); }
.sm-btn-accent { background: var(--accent); color: #fff; }
.sm-btn-ghost { background: var(--subtle); color: var(--text); border: 1px solid var(--border); }
.sm-btn:disabled { background: var(--border-medium); color: #fff; cursor: default; }

/* ── Abas inferiores (espelho da tab bar do app) ─────────────────────────── */
.sm-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; height: var(--tab-h);
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.sm-tabbar button, .sm-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer; color: var(--text-3); font: inherit;
}
.sm-tabbar a { text-decoration: none; }
.sm-tabbar svg { width: 22px; height: 22px; fill: currentColor; }
.sm-tabbar span { font-size: var(--fs-overline); font-weight: 500; }
.sm-tabbar button.is-active, .sm-tabbar a.is-active { color: var(--navy); }
.sm-tabbar button.is-active::before, .sm-tabbar a.is-active::before { content: ''; position: absolute; top: 0; width: 34px; height: 2px; background: var(--gold); border-radius: 2px; }
.sm-tabbar button, .sm-tabbar a { position: relative; }

/* ── Vazios: convite, nunca beco sem saída ──────────────────────────────── */
.sm-empty { text-align: center; padding: 44px 24px; color: var(--text-2); }
.sm-empty h3 { font-size: var(--fs-title); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.sm-empty p { font-size: var(--fs-body); }

.sm-skeleton { background: linear-gradient(90deg, var(--subtle) 25%, #ece9e6 37%, var(--subtle) 63%);
  background-size: 400% 100%; animation: sm-shimmer 1.3s ease infinite; border-radius: var(--radius); }
@keyframes sm-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.sm-hidden { display: none !important; }


/* ── Convite pro app (onde a web ainda não entrega a experiência) ─────────── */
.sm-hi { display: flex; align-items: center; gap: 12px; padding: 18px 16px 4px; }
.sm-hi b { font-size: var(--fs-title); font-weight: 600; }
.sm-hi span { display: block; font-size: var(--fs-footnote); color: var(--text-3); }

.sm-getapp { margin: 14px 16px 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy); color: #fff; box-shadow: 0 10px 30px rgba(28,24,21,.14); }
.sm-getapp-in { padding: 22px 20px 20px; }
.sm-getapp h2 { font-size: var(--fs-headline); font-weight: 600; line-height: 1.25; }
.sm-getapp p { font-size: var(--fs-body); color: rgba(255,255,255,.78); margin-top: 8px; }
.sm-getapp ul { list-style: none; display: grid; gap: 9px; margin-top: 16px; }
.sm-getapp li { position: relative; padding-left: 24px; font-size: var(--fs-body);
  color: rgba(255,255,255,.92); }
.sm-getapp li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 600; }
.sm-getapp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sm-getapp-btns a { flex: 1 1 150px; text-align: center; text-decoration: none; border-radius: 12px;
  padding: 13px 14px; font-size: var(--fs-body); font-weight: 600; }
.sm-getapp-btns .is-gold { background: var(--gold); color: var(--navy); }
.sm-getapp-btns .is-ghost { border: 1px solid rgba(255,255,255,.34); color: #fff; }
.sm-getapp-shot { display: block; width: 100%; border-top: 1px solid rgba(255,255,255,.12); }

/* Atalhos do que a web JÁ entrega — para o convite não virar beco sem saída. */
.sm-here { margin: 18px 16px 0; }
.sm-here h3 { font-size: var(--fs-footnote); font-weight: 600; color: var(--text-2);
  text-transform: none; margin-bottom: 10px; }
.sm-here-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sm-here-grid button { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 8px; font: inherit; font-size: var(--fs-footnote);
  font-weight: 500; color: var(--text); cursor: pointer; display: grid; gap: 6px; justify-items: center; }
.sm-here-grid svg { width: 22px; height: 22px; fill: var(--accent); }


/* CTA de download: 3 linhas, uma vez no topo do feed, leva pra /download. */
.sm-cta3 { display: flex; align-items: center; gap: 12px; margin: 14px 16px 4px;
  background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 14px 16px;
  text-decoration: none; }
.sm-cta3-txt { min-width: 0; }
.sm-cta3 b { display: block; font-size: var(--fs-body); font-weight: 600; }
.sm-cta3 span { display: block; font-size: var(--fs-footnote); color: rgba(255,255,255,.78); margin-top: 2px; }
.sm-cta3 em { display: block; font-style: normal; font-size: var(--fs-footnote); font-weight: 600;
  color: var(--gold); margin-top: 6px; }
.sm-cta3 img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }


/* Sub-abas do perfil na área logada (mesmo conteúdo do perfil público). */
.sm-subtabs { display: flex; border-bottom: 1px solid var(--border); margin: 4px 0 0; }
.sm-subtabs button { flex: 1; background: none; border: none; padding: 12px 0;
  font: inherit; font-size: var(--fs-footnote); font-weight: 500; color: var(--text-3);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sm-subtabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--gold); }
.sm-subpanel { display: none; }
.sm-subpanel.on { display: block; }
/* As peças vêm do perfil público: reaproveita as classes dele. */
.sm-subpanel .games, .sm-subpanel .tours, .sm-subpanel .duos { padding: 14px 16px; }
.sm-subpanel .game { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-medium); border-radius: var(--radius); padding: 10px 14px; }
.sm-subpanel .game + .game { margin-top: 8px; }
.sm-subpanel .game.win { border-left-color: var(--gold); }
.sm-subpanel .game.loss { border-left-color: var(--loss); }
.sm-subpanel .game-tour { font-size: var(--fs-overline); color: var(--text-3); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-subpanel .score-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sm-subpanel .score-row + .score-row { border-top: 1px solid var(--border); }
.sm-subpanel .sr-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sm-subpanel .sr-avatars { display: flex; flex-shrink: 0; }
.sm-subpanel .pav { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  background: var(--subtle); border: 2px solid var(--surface); }
.sm-subpanel .sr-avatars .pav:not(:first-child) { margin-left: -10px; }
.sm-subpanel .pav-ph { display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: var(--fs-footnote); }
.sm-subpanel .sr-name { font-size: var(--fs-footnote); font-weight: 500; color: var(--text-3);
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-subpanel .score-row.win .sr-name { color: var(--text); font-weight: 600; }
.sm-subpanel .sr-sets { display: flex; gap: 8px; flex-shrink: 0; }
.sm-subpanel .sr-set { min-width: 20px; text-align: center; font-size: var(--fs-headline);
  font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sm-subpanel .score-row.win .sr-set { color: var(--text); font-weight: 600; }
.sm-subpanel .tour { display: flex; align-items: center; gap: 12px; background: var(--subtle);
  border-radius: var(--radius); padding: 8px 12px; }
.sm-subpanel .tour + .tour { margin-top: 8px; }
.sm-subpanel .tour-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--surface); }
.sm-subpanel .tour-img-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.sm-subpanel .tour-name { font-size: var(--fs-body); font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sm-subpanel .tour-date { font-size: var(--fs-footnote); color: var(--text-3); }
.sm-subpanel .duo { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.sm-subpanel .duo + .duo { border-top: 1px solid var(--border); }
.sm-subpanel .duo .pav { width: 40px; height: 40px; }
.sm-subpanel .duo-name { font-size: var(--fs-body); font-weight: 600; }
.sm-subpanel .duo-sub { font-size: var(--fs-footnote); color: var(--text-3); }


/* ── Card de jogo no HISTÓRICO (perfil e área logada) ─────────────────────── */
.hg-list { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.hg-card { background: var(--surface); border: 1px solid rgba(232,228,224,.7);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,24,21,.04), 0 8px 24px rgba(28,24,21,.05); }
.hg-banner { position: relative; height: 84px; background: var(--navy); overflow: hidden; }
.hg-banner img { width: 100%; height: 100%; object-fit: cover; }
.hg-banner::after { content: ''; position: absolute; inset: 0; background: rgba(20,14,38,.66); }
.hg-banner-txt { position: absolute; left: 14px; right: 14px; bottom: 9px; z-index: 1; }
.hg-banner-name { color: #fff; font-size: var(--fs-body); font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-banner-sub { color: rgba(255,255,255,.8); font-size: var(--fs-footnote); margin-top: 2px; }
.hg-score { padding: 8px 14px 10px; }
.hg-tag { padding: 8px 14px; background: rgba(216,197,232,.32);
  font-size: var(--fs-footnote); font-weight: 600; color: var(--accent); }
/* linhas do placar reaproveitam as classes do perfil público */
.hg-score .score-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; position: relative; }
.hg-score .score-row + .score-row { border-top: 1px solid var(--border); }
.hg-score .sr-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hg-score .sr-avatars { display: flex; flex-shrink: 0; }
.hg-score .pav { width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--subtle); border: 2px solid var(--surface); }
.hg-score .sr-avatars .pav:not(:first-child) { margin-left: -12px; }
.hg-score .pav-ph { display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: var(--fs-footnote); font-weight: 500; }
.hg-score .sr-name { font-size: var(--fs-footnote); font-weight: 500; color: var(--text-3);
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-score .score-row.win .sr-name { color: var(--text); font-weight: 600; }
.hg-score .sr-sets { display: flex; gap: 8px; flex-shrink: 0; }
.hg-score .sr-set { min-width: 20px; text-align: center; font-size: var(--fs-headline);
  font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hg-score .score-row.win .sr-set { color: var(--text); font-weight: 600; }
.hg-score .score-row.win::before { content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }


/* ── Ações do post (fase 1): curtir, comentar, compartilhar ──────────────── */
.sm-acoes { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border); }
/* 🚨 Curtido é GOLD (`secondary.main`) e o repouso é `text.primary` — é o que
   o `PostActionsBar` faz. O vermelho que estava aqui era resquício de coração:
   o app usa POLEGAR, e polegar vermelho lê como "não gostei". */
.sm-acao { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; padding: 10px 6px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: var(--fs-footnote); font-weight: 500; color: var(--text); }
.sm-acao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linejoin: round; }
.sm-acao:hover { background: var(--subtle); }
.sm-acao.on { color: var(--gold); }
.sm-acao.on svg { fill: var(--gold); stroke: var(--gold); }
.sm-acao b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Folha de comentários ────────────────────────────────────────────────── */
.sm-sheet { position: fixed; inset: 0; z-index: 40; background: rgba(28,24,21,.5);
  display: flex; align-items: flex-end; justify-content: center; }
.sm-sheet[hidden] { display: none; }
@media (min-width: 560px) { .sm-sheet { align-items: center; padding: 16px; } }
.sm-sheet-card { width: 100%; max-width: 520px; max-height: 82dvh; background: var(--surface);
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column; }
@media (min-width: 560px) { .sm-sheet-card { border-radius: 18px; } }
.sm-sheet-top { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sm-sheet-top b { font-size: var(--fs-title); font-weight: 600; }
.sm-sheet-top button { background: none; border: none; font-size: 24px; line-height: 1;
  color: var(--text-3); cursor: pointer; }
.sm-sheet-lista { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; }
.sm-sheet-vazio { font-size: var(--fs-body); color: var(--text-3); text-align: center; padding: 24px 0; }
.sm-cmt { display: flex; gap: 10px; padding: 9px 0; }
.sm-cmt + .sm-cmt { border-top: 1px solid var(--border); }
.sm-cmt b { display: block; font-size: var(--fs-footnote); font-weight: 600; }
.sm-cmt p { font-size: var(--fs-body); color: var(--text-2); margin-top: 2px; }
.sm-sheet-envio { display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.sm-sheet-envio input { flex: 1; border: 1px solid var(--border-medium); border-radius: 999px;
  padding: 11px 14px; font: inherit; font-size: var(--fs-body); }
.sm-sheet-envio input:focus { outline: none; border-color: var(--accent); }
.sm-sheet-envio button { border: none; background: var(--gold); color: var(--navy);
  border-radius: 999px; padding: 11px 18px; font: inherit; font-size: var(--fs-body);
  font-weight: 600; cursor: pointer; }


/* Grade de fotos do perfil — 3 colunas, como no app e no perfil público. */
.sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sm-cell { position: relative; padding-top: 125%; background: var(--subtle); overflow: hidden; display: block; }
.sm-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* Post sem foto na grade: fundo da marca com o resumo (o app usa ícone). */
.sm-cell-txt { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 10px;
  background: var(--navy); color: rgba(255,255,255,.92);
  font-size: var(--fs-footnote); font-weight: 500; line-height: 1.3; }
/* Barra de aproveitamento */
.sm-barra { height: 8px; border-radius: 999px; background: var(--subtle); overflow: hidden; margin-top: 10px; }
.sm-barra span { display: block; height: 100%; background: var(--gold); }


/* Grupo de jogos sem data (competição + dupla) — a peça do UndatedMatchGroupCard. */
.sm-grupo { background: var(--surface); border: 1px solid rgba(232,228,224,.7);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: 10px;
  box-shadow: 0 1px 2px rgba(28,24,21,.04), 0 8px 24px rgba(28,24,21,.05); }
.sm-grupo-topo { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--navy); color: #fff; }
.sm-grupo-topo img, .sm-grupo-ph { width: 40px; height: 40px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.sm-grupo-nome { font-size: var(--fs-body); font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-grupo-sub { font-size: var(--fs-footnote); color: rgba(255,255,255,.78); margin-top: 2px; }
.sm-grupo-jogo { padding: 2px 14px; }
.sm-grupo-jogo + .sm-grupo-jogo { border-top: 1px solid var(--border); }


/* Filtro de gênero (chips) — a mesma barra do topo da Arena no app. */
.sm-chips { display: flex; gap: 8px; padding: 10px 16px 4px; }
.sm-chips button { border: 1px solid var(--border-medium); background: var(--surface);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-size: var(--fs-footnote);
  font-weight: 500; color: var(--text-2); cursor: pointer; }
.sm-chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Quem está jogando hoje: grade de rostos (a Arena do app é um canvas nativo). */
.sm-jogadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 14px 8px; padding: 14px 16px; }
.sm-jogador { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.sm-jogador .sm-av { width: 58px; height: 58px; font-size: var(--fs-title); }
.sm-jogador-nome { font-size: var(--fs-footnote); font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 84px; }
.sm-jogador-cidade { font-size: var(--fs-overline); color: var(--text-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 84px; }


/* ── Torcida NA LINHA da dupla (a coluna onde ficaria o placar) ──────────── */
.sm-torcer { flex-shrink: 0; border: 1px solid var(--gold); background: rgba(232,186,74,.14);
  color: var(--warning-ink); border-radius: 999px; padding: 7px 16px; font: inherit;
  font-size: var(--fs-footnote); font-weight: 600; cursor: pointer; }
.sm-torcer:hover { background: var(--gold); color: var(--navy); }
.sm-torcida { flex-shrink: 0; width: 74px; text-align: right; }
.sm-torcida b { font-size: var(--fs-title); font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
.sm-torcida-barra { display: block; height: 4px; border-radius: 999px; background: var(--border);
  margin-top: 5px; overflow: hidden; }
.sm-torcida-barra i { display: block; height: 100%; background: var(--border-medium); }
.sm-torcida.minha b { color: var(--warning-ink); }
.sm-torcida.minha .sm-torcida-barra i { background: var(--gold); }

/* ── Passe premium do card do feed ───────────────────────────────────────── */
.sm-card { transition: box-shadow .18s ease, transform .18s ease; }
@media (hover: hover) {
  .sm-card:hover { box-shadow: 0 2px 4px rgba(28,24,21,.05), 0 14px 34px rgba(28,24,21,.09); }
}
.sm-post-head { padding: 14px 16px 12px; }
.sm-post-head .sm-av { width: 44px; height: 44px; }
.sm-post-author { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.sm-banner { height: 116px; }
.sm-banner-name { font-size: var(--fs-headline); font-weight: 600; letter-spacing: -.01em; }
.sm-score { padding: 14px 16px 16px; }
.sm-acoes { padding: 4px 10px 8px; border-top: 1px solid var(--border); }
.sm-acao { padding: 11px 6px; }
.sm-acao svg { width: 22px; height: 22px; }


/* Estatísticas do jogador no cabeçalho do post (o CollabPostHeader do app). */
.sm-post-stats { display: flex; gap: 14px; flex-shrink: 0; }
.sm-post-stats span { display: flex; flex-direction: column; align-items: center;
  font-size: var(--fs-overline); color: var(--text-3); line-height: 1.2; }
.sm-post-stats b { font-size: var(--fs-footnote); font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .sm-post-stats span:nth-child(3) { display: none; } }

/* Selo de inscrição na agenda */
.sm-selo { display: inline-block; background: rgba(216,197,232,.4); color: var(--accent);
  font-size: var(--fs-overline); font-weight: 600; padding: 2px 8px; border-radius: 999px;
  margin-bottom: 4px; }

/* Anel de "livre hoje" no jogador da região */
.sm-jogador-av { display: block; border-radius: 50%; padding: 2px; background: transparent; }
.sm-jogador-av.livre { background: var(--gold); }


/* ── Celular: o layout foi desenhado no desktop e apertava no telefone ───── */
@media (max-width: 480px) {
  /* A coluna central perde a margem: no celular ela É a tela. */
  .sm-section { padding: 12px; }
  .sm-card { border-radius: 14px; }
  .sm-card + .sm-card { margin-top: 12px; }

  /* Estatística do jogador competia com o nome; some a 3ª coluna e encolhe. */
  .sm-post-stats { gap: 10px; }
  .sm-post-head { gap: 9px; padding: 12px 12px 10px; }
  .sm-post-head .sm-av { width: 38px; height: 38px; }

  /* Placar: avatares menores para o nome caber sem cortar. */
  .sm-av-sm { width: 36px; height: 36px; }
  .sm-score { padding: 10px 12px 12px; }
  .sm-score-team { gap: 8px; }
  .sm-torcer { padding: 6px 12px; }
  .sm-torcida { width: 58px; }

  /* Banner mais baixo: 116 comia meia tela de celular. */
  .sm-banner { height: 96px; }
  .sm-banner-name { font-size: var(--fs-title); }

  /* Identidade do perfil empilhada, como no app. */
  .sm-ident { gap: 12px; padding: 16px 12px 0; }
  .sm-ident-av { width: 68px; height: 68px; }
  .sm-statsrow { padding: 14px 6px 6px; }
  .sm-statcell b { font-size: var(--fs-title); }

  /* Grade de jogadores: 4 por linha no celular. */
  .sm-jogadores { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); padding: 12px; }
  .sm-jogador .sm-av { width: 52px; height: 52px; }

  .sm-cta3 { margin: 12px; padding: 12px 14px; }
  .sm-stories { padding: 12px 12px 8px; gap: 12px; }
}

/* Área de toque mínima: no celular, alvo pequeno é alvo errado. */
.sm-tabbar button, .sm-tabbar a { min-height: 48px; }
.sm-acao { min-height: 44px; }

/* Avatar da aba Perfil (no app é a foto da pessoa, com borda gold quando ativa). */
.sm-tab-av { display: block; width: 27px; height: 27px; border-radius: 50%;
  border: 1.5px solid var(--border-medium); overflow: hidden; background: var(--subtle); }
.sm-tab-av.on { border: 2px solid var(--gold); }
.sm-tab-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-tab-ini { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: var(--fs-overline); font-weight: 500; }
.sm-ic { display: inline-flex; }
.sm-ic svg { display: block; fill: currentColor; }

/* ── Card de jogo/inscrição: tags, divisor e rodapé (espelho do HistoryMatchCard) ── */
.hg-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.hg-tag-item { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-overline); font-weight: 600; padding: 4px 8px; border-radius: 6px;
  background: var(--subtle); color: var(--text-2); }
.hg-tag-item svg { width: 12px; height: 12px; }
.hg-tag-item.is-success { background: rgba(122,136,98,.18); color: #5A6647; }
.hg-tag-item.is-warning { background: rgba(232,186,74,.22); color: var(--warning-ink); }
.hg-tag-item.is-accent { background: rgba(216,197,232,.4); color: var(--accent); }
/* Rótulo entre as duplas ("Placar pendente"), com filete dos dois lados — como no app. */
.hg-divisor { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.hg-divisor::before, .hg-divisor::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.hg-divisor span { font-size: var(--fs-overline); font-weight: 500; color: var(--warning-ink); }
.hg-rodape { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px; }
.hg-rodape-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hg-meta { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-footnote); color: var(--text-3); }
/* Capitalize SÓ na agenda (o dia da semana vem minúsculo do toLocaleDateString).
   Global, ele transformava "31 de jul de 2026" em "31 De Jul De 2026". */
.hg-rodape .hg-meta { text-transform: capitalize; }
.hg-meta svg { width: 12px; height: 12px; }

/* Autor do post e ação secundária do perfil (compartilhar). */
.sm-pessoa { color: inherit; text-decoration: none; }
.sm-pessoa:hover { text-decoration: underline; }
.sm-ident-acao { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--subtle); color: var(--text-2); }
.sm-ident-aviso { padding: 0 16px 8px; font-size: var(--fs-footnote); color: var(--text-3); }
.sm-seguir { flex-shrink: 0; border: none; border-radius: 8px; cursor: pointer;
  padding: 8px 18px; font: inherit; font-size: var(--fs-footnote); font-weight: 600;
  background: var(--gold); color: var(--navy); min-height: 34px; }
.sm-seguir.on { background: var(--subtle); color: var(--text-2); }
.sm-seguir:disabled { opacity: .6; }

/* Painel da dupla inscrita no card de inscrição (espelha o `panel` do app). */
.sm-inscritos { padding: 10px 14px 12px; }
.sm-inscritos-rot { font-size: var(--fs-overline); font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }