/* Canta Placar
   Layout: app de atividades no padrão do Strava. Abas embaixo (Início, Jogar, Você); feed de partidas em cards;
   resumo da partida com números grandes e botão de compartilhar; placar ao vivo em tela cheia, sem abas.
   Cor: verde da marca no lugar do laranja do Strava; neutros com leve viés verde; cores dos times só no placar. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --court-mix: 0.8; /* fotos de quadra ao fundo: mais suaves no tema claro */
  color-scheme: light;
  --bg: #F3F4F1;
  --surface: #FFFFFF;
  --surface-hi: #FFFFFF;
  --surface-2: #F5F6F3;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-strong: rgba(120, 120, 128, 0.2);
  --line: rgba(60, 60, 67, 0.13);
  --fg: #16181A;
  --fg-2: #686B70;
  --fg-3: #A9ACB0;
  --ink: #16181A;
  --ink-fg: #FFFFFF;
  --seg-on: #FFFFFF;
  --brand: #AFFB48;
  --brand-ink: #3D6A00;
  --brand-soft: #EEFBD3;
  --on-brand: #101500;
  --live: #3D9A00;
  --danger: #E5484D;
  --alert: #FC4C02;
  --alert-soft: rgba(252, 76, 2, 0.13);
  --warn: #FF9500;
  --info: #007AFF;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.22);
  --hair: rgba(16, 21, 0, 0.08);
  --hair-strong: rgba(16, 21, 0, 0.15);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --float: 0 12px 36px rgba(16, 21, 0, 0.12), 0 2px 6px rgba(16, 21, 0, 0.05);
  --ambient: rgba(150, 215, 40, 0.16);
  --ambient-2: rgba(26, 140, 255, 0.06);
  --chart: #4F8F00;
  --c-azul: #1A8CFF;
  --c-laranja: #FC4C02;
  --c-verde: #12E07A;
  --c-rosa: #FF2E88;
  --c-roxo: #9D5CFF;
  --c-amarelo: #FFD400;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Bricolage Grotesque", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --set-cell: clamp(30px, 5.4vw, 80px);
  --game-cell: clamp(108px, 20vw, 300px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --court-mix: 1;
    color-scheme: dark;
    --bg: #060708;
    --surface: #0E1011;
    --surface-hi: #141618;
    --surface-2: #181A1C;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.34);
    --line: rgba(255, 255, 255, 0.07);
    --fg: #F4F5F4;
    --fg-2: #8F9397;
    --fg-3: #5E6165;
    --ink: #F4F5F4;
    --ink-fg: #0A0B0B;
    --seg-on: #2B2E31;
    --brand: #AFFB48;
    --brand-ink: #AFFB48;
    --brand-soft: rgba(195, 250, 62, 0.14);
    --on-brand: #101500;
    --live: #AFFB48;
    --danger: #FF5A5F;
    --warn: #FF9F0A;
    --info: #0A84FF;
    --shadow: none;
    --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.6);
    --hair: rgba(255, 255, 255, 0.075);
    --hair-strong: rgba(255, 255, 255, 0.14);
    --hi: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --float: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
    --ambient: rgba(175, 251, 72, 0.075);
    --ambient-2: rgba(26, 140, 255, 0.05);
    --chart: #AFFB48;
    --c-azul: #1A8CFF;
    --c-laranja: #FC4C02;
    --c-verde: #12E07A;
    --c-rosa: #FF2E88;
    --c-roxo: #9D5CFF;
    --c-amarelo: #FFD400;
  }
}
:root[data-theme="dark"] {
  --court-mix: 1;
  color-scheme: dark;
  --bg: #060708;
  --surface: #0E1011;
  --surface-hi: #141618;
  --surface-2: #181A1C;
  --fill: rgba(118, 118, 128, 0.24);
  --fill-strong: rgba(118, 118, 128, 0.34);
  --line: rgba(255, 255, 255, 0.07);
  --fg: #F4F5F4;
  --fg-2: #8F9397;
  --fg-3: #5E6165;
  --ink: #F4F5F4;
  --ink-fg: #0A0B0B;
  --seg-on: #2B2E31;
  --brand: #AFFB48;
  --brand-ink: #AFFB48;
  --brand-soft: rgba(195, 250, 62, 0.14);
  --on-brand: #101500;
  --live: #AFFB48;
  --danger: #FF5A5F;
  --warn: #FF9F0A;
  --info: #0A84FF;
  --shadow: none;
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.6);
  --hair: rgba(255, 255, 255, 0.075);
  --hair-strong: rgba(255, 255, 255, 0.14);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --float: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --ambient: rgba(175, 251, 72, 0.075);
  --ambient-2: rgba(26, 140, 255, 0.05);
  --chart: #AFFB48;
  --c-azul: #1A8CFF;
  --c-laranja: #FC4C02;
  --c-verde: #12E07A;
  --c-rosa: #FF2E88;
  --c-roxo: #9D5CFF;
  --c-amarelo: #FFD400;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* ---------- estrutura ---------- */
.app {
  height: 100%;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.view-play { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); } /* coluna pode encolher: no iPhone SE o topo estourava 57px */
body[data-view="jogar"] .tabbar { display: none; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 8px; font: 650 18px/1 var(--font-display); letter-spacing: -0.01em; }
.match-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 7px 12px;
  border: 0; border-radius: 999px;
  background: var(--fill);
  color: var(--fg-2);
  font-size: 13px; font-weight: 500;
}
.match-chip .ico { font-size: 16px; color: var(--fg); }
.match-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { margin-left: auto; display: flex; gap: 4px; }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--fg);
  font-size: 22px;
}
.icon-btn:hover { background: var(--fill); }
.tv-exit { display: none; margin-left: auto; }

/* ---------- placar ---------- */
.stage {
  min-height: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.board {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(10px, 2.4vw, 36px);
  row-gap: 10px;
}
.board-head, .team {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding-left: clamp(22px, 3vw, 40px);
  padding-right: clamp(12px, 1.6vw, 22px);
}
.board-head {
  color: var(--fg-2);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding-block: 2px;
}
.head-format { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: var(--fg-3); }
.head-sets span { font: inherit; color: inherit; }
.head-game { width: var(--game-cell); text-align: center; }

.team {
  --tc: var(--c-azul);
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding-block: clamp(10px, 2vh, 26px);
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  touch-action: manipulation;
  transition: transform 0.12s ease;
}
.team:active { transform: scale(0.992); }
.team::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 7px;
  background: var(--tc);
}
.team-id { min-width: 0; display: grid; gap: 4px; }
.team-name {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  font: 650 clamp(22px, 3.4vw, 54px)/1.05 var(--font-display);
  letter-spacing: -0.015em;
}
.name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: 0.06em 0.14em; }
.serve { font-size: 0.62em; color: var(--tc); stroke-width: 2; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
.team.serving .serve { opacity: 1; transform: none; }
.team-players { color: var(--fg-2); font-size: clamp(13px, 1.4vw, 19px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-players:empty { display: none; }

.sets { display: flex; }
.sets > span {
  width: var(--set-cell);
  text-align: center;
  font: 600 calc(var(--set-cell) * 0.6)/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  position: relative;
}
.sets > span.won { color: var(--fg); }
.sets > span.cur { color: var(--fg); }
.sets sup { position: absolute; top: -0.35em; font-size: 0.42em; font-weight: 600; color: var(--fg-2); }
.head-sets > span { font: 600 11px/1 var(--font); color: var(--fg-3); letter-spacing: 0.04em; }
.head-sets > span.cur { color: var(--fg-2); }

.game {
  width: var(--game-cell);
  height: min(calc(var(--game-cell) * 0.74), 100%);
  min-height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font: 700 calc(var(--game-cell) * 0.52)/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.game svg { font-size: 0.6em; color: var(--tc); stroke-width: 2.2; }
.team.leading-point .game { background: color-mix(in srgb, var(--tc) 14%, var(--surface-2)); }
.team.winner .game { background: color-mix(in srgb, var(--tc) 18%, var(--surface-2)); }

.team.scored { animation: scored 0.9s ease-out; }
@keyframes scored {
  0% { background: color-mix(in srgb, var(--tc) 30%, var(--surface)); }
  100% { background: var(--surface); }
}
.game-val.bump { animation: bump 0.35s ease-out; display: inline-block; }
@keyframes bump { 0% { transform: scale(1.12); } 100% { transform: none; } }

.chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  min-height: 30px;
}
.chip {
  --tc: var(--fg-2);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.chip.hot { background: var(--ink); color: var(--ink-fg); }

/* ---------- voz + dock ---------- */
.dock {
  display: grid; justify-items: center; gap: 10px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.voice {
  --vc: var(--fg-3);
  width: 100%; max-width: 680px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 0; border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  min-width: 0;
}
.voice[data-state="listening"], .voice[data-state="hearing"], .voice[data-state="starting"] { --vc: var(--live); }
.voice[data-state="speaking"] { --vc: var(--info); }
.voice[data-state="error"], .voice[data-state="unsupported"] { --vc: var(--danger); }
.voice[data-state="needs-download"], .voice[data-state="loading"] { --vc: var(--info); }
.voice[data-state="loading"] .voice-ico { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.voice-ico {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vc) 16%, transparent);
  color: var(--vc);
  font-size: 20px;
}
.voice[data-state="listening"] .voice-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--vc);
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.v-bars { display: none; gap: 3px; align-items: center; height: 18px; }
.v-bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--vc); animation: bar 0.9s ease-in-out infinite; }
.v-bars i:nth-child(2) { animation-delay: 0.15s; }
.v-bars i:nth-child(3) { animation-delay: 0.3s; }
.v-bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.voice[data-state="hearing"] .v-mic, .voice[data-state="speaking"] .v-mic { display: none; }
.voice[data-state="hearing"] .v-bars, .voice[data-state="speaking"] .v-bars { display: flex; }
.voice-text { display: grid; min-width: 0; flex: 1; }
.voice-text b { font-size: 14px; font-weight: 600; }
.voice-text span { font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-result {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--fill); color: var(--fg);
}
.voice-result.ok { background: color-mix(in srgb, var(--live) 18%, transparent); }
.voice-result.miss { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.voice-result i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--fg-2)); }

.typer { width: 100%; max-width: 680px; display: flex; gap: 8px; }
.typer input {
  flex: 1; min-width: 0;
  height: 44px; padding: 0 16px;
  border: 0; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
}

.dock-row { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 3.5vw, 36px); }
.dock-btn {
  width: 68px;
  display: grid; justify-items: center; gap: 3px;
  padding: 6px 0;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--fg-2);
  font-size: 11px; font-weight: 500;
}
.dock-btn svg { font-size: 24px; color: var(--fg); }
.dock-btn:hover { background: var(--fill); }
.dock-btn[aria-pressed="true"] svg { color: var(--info); }
.dock-btn:disabled { opacity: 0.35; cursor: default; }
.dock-btn:disabled:hover { background: transparent; }
.mic-btn {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ink); color: var(--ink-fg);
  font-size: 28px;
  box-shadow: var(--shadow);
  transition: background 0.2s, transform 0.12s;
}
.mic-btn:active { transform: scale(0.95); }
.mic-btn .on { display: none; }
.mic-btn { background: var(--brand); color: var(--on-brand); }
.mic-btn[aria-pressed="true"] { background: var(--brand); box-shadow: 0 0 0 6px var(--brand-soft); }
.mic-btn[aria-pressed="false"] { background: var(--ink); color: var(--ink-fg); }
.mic-btn[aria-pressed="true"] .on { display: block; }
.mic-btn[aria-pressed="true"] .off { display: none; }

/* ---------- banner de game/set ---------- */
.banner { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 40; padding: 16px; }
.banner-card {
  display: grid; justify-items: center; gap: 8px;
  max-width: min(720px, 100%);
  padding: clamp(20px, 3vw, 36px) clamp(28px, 5vw, 64px);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--shadow-pop);
  text-align: center;
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.banner.show .banner-card { opacity: 1; transform: none; }
.banner-title { display: flex; align-items: center; gap: 14px; font: 700 clamp(34px, 6.5vw, 96px)/1.02 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.banner-title i { width: 0.36em; height: 0.36em; border-radius: 50%; background: var(--tc, var(--fg)); flex: none; }
.banner-sub { color: var(--fg-2); font-size: clamp(15px, 2.2vw, 28px); font-variant-numeric: tabular-nums; }
.banner-side { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--fg); font-weight: 600; font-size: clamp(13px, 1.6vw, 20px); }
.banner-side svg { color: var(--warn); font-size: 1.2em; }

/* ---------- folhas ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 10, 0.45); animation: fade 0.18s ease-out; }
.sheet {
  position: fixed; z-index: 60;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  border-radius: 22px;
  background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: pop 0.2s ease-out;
}
.sheet-small { width: min(460px, calc(100vw - 32px)); }
/* folha presa à parte visível enquanto o teclado está aberto (kbFit): sem cantos de baixo e sem animação de subida */
.sheet.kb-on { border-radius: 22px 22px 0 0; animation: none; padding-bottom: 0; transition: top 0.12s, height 0.12s; }
/* busca: a lista guarda a altura, a folha não encolhe a cada letra */
.search-list { min-height: 42vh; min-height: 42dvh; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0.6; } }
.sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 12px 12px 22px;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font: 650 20px/1.2 var(--font-display); letter-spacing: -0.01em; }
.sheet-head h2:focus { outline: none; }
.head-actions { display: flex; align-items: center; gap: 6px; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; padding: 18px 20px 26px; display: grid; gap: 22px; align-content: start; overscroll-behavior: contain; }

.group { display: grid; gap: 8px; min-width: 0; }
.group h3 { margin: 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.hint { margin: 0 4px; font-size: 13px; color: var(--fg-2); }
.hint.center { text-align: center; }
.hint b { color: var(--fg); font-weight: 600; }
.list { background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  min-height: 48px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row > span { display: grid; min-width: 0; }
.row small { color: var(--fg-2); font-size: 12px; }
.row select {
  height: 34px; padding: 0 10px;
  border: 0; border-radius: 9px;
  background: var(--fill);
}

.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 2px; border-radius: 10px;
  background: var(--fill);
  max-width: 100%;
}
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap;
}
.seg input:checked + span { background: var(--seg-on); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--info); }
.seg-wide { display: grid; }

.switch {
  appearance: none; -webkit-appearance: none;
  width: 51px; height: 31px; flex: none;
  border-radius: 999px; margin: 0;
  background: var(--fill-strong);
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.switch:checked { background: var(--live); }
.switch:checked::after { transform: translateX(20px); }

.sports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pair { display: flex; gap: 6px; flex-wrap: wrap; }
.sport {
  position: relative;
  display: grid; justify-items: center; gap: 4px;
  padding: 14px 6px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.15s;
}
.sport input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sport svg { font-size: 28px; color: var(--fg); margin-bottom: 2px; }
.sport b { font-size: 13px; font-weight: 600; line-height: 1.15; }
.sport small { font-size: 11px; color: var(--fg-2); line-height: 1.2; }
.sport:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.sport:has(input:checked) svg { color: var(--brand-ink); }
.sport:has(input:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; }

.team-edit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: center; }
.team-edit:first-child { border-top: 0; }
.team-edit input[type="text"] {
  height: 40px; padding: 0 12px; min-width: 0;
  border: 0; border-radius: 10px;
  background: var(--fill);
}
.team-edit input[id$="players"] { grid-column: 2; }
.swatches { display: grid; grid-template-columns: repeat(3, 22px); gap: 6px; grid-row: span 2; }
.swatch { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--sc); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--sc); }
.swatch:has(input:disabled) { opacity: 0.25; cursor: not-allowed; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 0; border-radius: 10px;
  background: var(--fill); color: var(--fg);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.btn svg { font-size: 17px; }
.btn:hover { background: var(--fill-strong); }
.btn.danger { color: var(--danger); }
.btn-primary {
  height: 52px; width: 100%;
  border: 0; border-radius: 14px;
  background: var(--ink); color: var(--ink-fg);
  font-size: 16px; font-weight: 650;
}
.form-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--fg); font-size: 14px; }

/* lances */
.log { list-style: none; margin: 0; padding: 0; display: grid; }
.log li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
}
.log li:first-child { border-top: 0; }
.log .n { font: 600 12px/1 var(--font-num); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; }
.log .what { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.log .what i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--fg-3)); flex: none; }
.log .what em { font-style: normal; font-weight: 500; color: var(--fg-2); }
.log .meta { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--fg-2); min-width: 0; }
.log .meta svg { font-size: 13px; vertical-align: -2px; }
.log .score { font: 600 13px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--fg); }
.log .del { grid-row: span 2; }
.log .empty { display: block; text-align: center; color: var(--fg-2); padding: 30px 0; border: 0; }

/* estatísticas */
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.vs-head .t { display: flex; align-items: center; gap: 8px; font: 650 17px/1.2 var(--font-display); min-width: 0; }
.vs-head .t:last-child { justify-content: flex-end; }
.vs-head .t i { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); flex: none; }
.vs-head .score { font: 650 15px/1 var(--font-num); color: var(--fg-2); font-variant-numeric: tabular-nums; text-align: center; }
.stat { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.stat:first-of-type { border-top: 0; }
.stat .v { font: 650 17px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.stat .v:last-child { text-align: right; }
.stat .mid { display: grid; gap: 6px; }
.stat .lbl { text-align: center; font-size: 13px; color: var(--fg-2); }
.stat .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 6px; }
.stat .bars span { border-radius: 3px; background: var(--fill); overflow: hidden; display: flex; }
.stat .bars span:first-child { justify-content: flex-end; }
.stat .bars b { display: block; height: 100%; border-radius: 3px; background: var(--tc); }
.momentum { width: 100%; height: auto; display: block; }
.momentum .grid { stroke: var(--line); stroke-width: 1; }
.momentum .zero { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 4; }
.momentum text { fill: var(--fg-2); stroke: none; font: 11px var(--font); }
.players-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.players-table th, .players-table td { padding: 8px 6px; text-align: right; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.players-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); border-top: 0; }
.players-table td:first-child, .players-table th:first-child { text-align: left; }
.players-table td:first-child i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); margin-right: 8px; }
.table-wrap { overflow-x: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* comandos */
.cmds { display: grid; gap: 6px; }
.cmd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4px 14px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: baseline; }
.cmd:first-child { border-top: 0; }
.cmd q { quotes: "“" "”"; font-weight: 600; }
.cmd span { color: var(--fg-2); font-size: 14px; }
.kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; background: var(--fill); font: 600 12px/1.5 var(--font); text-align: center; }

/* fim de jogo */
.end-hero { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 0 4px; }
.end-hero svg { font-size: 44px; color: var(--tc); }
.end-hero h3 { margin: 0; font: 700 30px/1.1 var(--font-display); letter-spacing: -0.02em; }
.end-hero p { margin: 0; color: var(--fg-2); font: 600 17px/1.3 var(--font-num); font-variant-numeric: tabular-nums; }

/* histórico */
.hist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: center; }
.hist:first-child { border-top: 0; }
.hist b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist small { grid-column: 1; color: var(--fg-2); font-size: 12px; }
.hist .btn { grid-row: span 2; grid-column: 2; }

/* ---------- celular em pé ---------- */
@media (max-width: 600px) {
  .top-actions .icon-btn { width: 36px; font-size: 21px; }
  .btn-finish span { display: none; }
  .btn-finish { padding: 0 10px; }
  .board { display: flex; flex-direction: column; }
  .board-head { display: none; }
  .team {
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id game" "sets game";
    row-gap: 10px;
    align-content: center;
    padding-left: 22px;
  }
  .team-id { grid-area: id; align-self: end; }
  .team .sets { grid-area: sets; align-self: start; }
  .team .game { grid-area: game; --game-cell: clamp(120px, 44vw, 210px); height: calc(var(--game-cell) * 0.9); }
  .team-name { font-size: clamp(24px, 7vw, 34px); }
  .sets > span { --set-cell: 34px; }
  .sets > span:first-of-type { text-align: left; width: auto; min-width: 22px; margin-right: 10px; }
  .sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: 22px 22px 0 0;
    max-height: 92vh; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom, 0px); animation: rise 0.22s ease-out; }
  .dock-btn { width: 58px; }
}
@media (max-width: 360px) {
  .dock-btn span { display: none; }
}

/* ---------- celular deitado / telas baixas ---------- */
@media (max-height: 520px) and (min-width: 601px) {
  .topbar { padding-block: 6px; }
  .dock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "voice row" "typer typer"; align-items: center; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .voice { grid-area: voice; }
  .typer { grid-area: typer; }
  .dock-row { grid-area: row; }
  .dock-btn span { display: none; }
  .dock-btn { width: 44px; }
  .mic-btn { width: 52px; height: 52px; font-size: 24px; }
  .chips { min-height: 0; }
}

/* ---------- modo TV ---------- */
body.tv .top-actions, body.tv .dock-row, body.tv .typer, body.tv .match-chip { display: none; }
body.tv .tv-exit { display: grid; opacity: 0.4; }
body.tv .tv-exit:hover { opacity: 1; }
body.tv .board { --set-cell: clamp(40px, 6.4vw, 110px); --game-cell: clamp(140px, 25vw, 420px); }
body.tv .team-name { font-size: clamp(28px, 4.6vw, 84px); }
body.tv .team-players { font-size: clamp(15px, 1.8vw, 28px); }
body.tv .board-head { font-size: 13px; }
body.tv .voice { max-width: 560px; }
body.tv .chip { font-size: 14px; padding: 8px 16px; }
body.screen .voice, body.screen .tv-exit { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Padrão Strava: abas, feed, resumo da partida, perfil, compartilhar
   ========================================================= */
.hdr {
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 8px 12px 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.hdr .brand { flex: 1; }
.hdr-title { flex: 1; margin: 0; text-align: center; font: 800 17px/1.2 var(--font-display); letter-spacing: -0.01em; }
.hdr-title.left { text-align: left; font-size: 24px; }
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.page { max-width: 720px; margin: 0 auto; padding: 14px 16px 28px; display: grid; gap: 18px; }
.block { display: grid; gap: 10px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-head h2 { margin: 0; font: 800 19px/1.2 var(--font-display); letter-spacing: -0.01em; }
.sec-meta { color: var(--fg-2); font-size: 13px; }

/* abas */
.tabbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  /* acima da área que rola: no iPhone o .scroll vira camada própria e pintava por cima do botão central, que sobe 22px */
  position: relative; z-index: 20; isolation: isolate;
}
.tab {
  display: grid; justify-items: center; gap: 2px;
  padding: 6px 0; border: 0; background: none;
  color: var(--fg-2); font-size: 11px; font-weight: 600;
}
.tab svg { font-size: 25px; }
.tab.on { color: var(--brand-ink); }
.tab-play { padding: 0 22px; }
.tab-play-btn {
  position: relative; z-index: 1; flex: none;
  width: 56px; height: 56px; min-width: 56px; aspect-ratio: 1; margin-top: -22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  font-size: 26px; box-shadow: 0 6px 18px rgba(120, 170, 20, 0.35);
}
.tab-play.on .tab-play-btn { box-shadow: 0 0 0 5px var(--brand-soft), 0 6px 18px rgba(120, 170, 20, 0.35); }

/* começar partida */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .quick { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.quick-tile {
  display: grid; justify-items: center; gap: 6px;
  padding: 14px 6px 12px; border: 0; border-radius: 14px;
  background: var(--surface); color: var(--fg);
  font-size: 13px; font-weight: 700; text-align: center;
  box-shadow: var(--shadow);
}
.quick-tile svg { font-size: 30px; color: var(--brand-ink); }
.quick-tile small { color: var(--fg-2); font-weight: 500; font-size: 11px; }

/* partida em andamento */
.live {
  display: grid; gap: 12px; padding: 16px;
  border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #0F1405 0%, #24350A 55%, #3F6200 100%);
  box-shadow: 0 10px 28px rgba(20, 30, 5, 0.3);
}
.live-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.92; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #AFFB48; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.live-score { display: grid; gap: 4px; font: 800 22px/1.2 var(--font-display); }
.live-score span { display: flex; justify-content: space-between; gap: 12px; }
.live-score b { font-variant-numeric: tabular-nums; }
.btn-light { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #AFFB48; color: #101500; font-weight: 800; }

/* feed (card de atividade) */
.feed { display: grid; gap: 10px; }
.card {
  display: grid; gap: 12px; padding: 16px 16px 0;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
  cursor: pointer; overflow: hidden;
}
.card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 22px; font-weight: 800;
}
.card-who { display: grid; min-width: 0; }
.card-who b { font-size: 15px; font-weight: 800; }
.card-who span { color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title { margin: 0; font: 800 20px/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.badge.muted { background: var(--fill); color: var(--fg-2); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: grid; gap: 2px; padding: 2px 12px; border-left: 1px solid var(--line); min-width: 0; }
.kpi:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.kpi span { color: var(--fg-2); font-size: 12px; }
.kpi b { font: 800 20px/1.15 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis.big .kpi b { font-size: 26px; }
.kpis.big { row-gap: 16px; }
.card-actions { display: flex; border-top: 1px solid var(--line); margin: 0 -16px; }
.card-actions button { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 11px 0; border: 0; background: none; color: var(--fg-2); font-size: 13px; font-weight: 700; }
.card-actions button + button { border-left: 1px solid var(--line); }
.card-actions svg { font-size: 18px; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--fg-2); background: var(--surface); border-radius: 16px; }
.empty-state svg { font-size: 34px; color: var(--brand-ink); }
.empty-state b { color: var(--fg); font-size: 16px; }

/* resumo da partida */
.sum { display: grid; gap: 14px; }
.panel { display: grid; gap: 12px; padding: 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { margin: 0; font: 800 16px/1.2 var(--font-display); }
.result { display: grid; gap: 6px; }
.result-row { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; }
.result-row i { width: 6px; height: 28px; border-radius: 3px; background: var(--tc); }
.result-row b { font: 800 19px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-row.lose b { color: var(--fg-2); }
.result-sets { display: flex; gap: 14px; font: 800 20px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.result-sets span { min-width: 1.4em; text-align: center; }
.result-sets span.w { color: var(--fg); }
.result-win { color: var(--brand-ink); font-size: 18px; }
.btn-primary { background: var(--brand); color: var(--on-brand); display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.btn-primary svg { font-size: 20px; }
.bk { display: grid; gap: 10px; }
.bk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 10px; align-items: center; }
.bk-row b { font: 800 15px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.bk-row b:last-child { text-align: right; }
.bk-mid { display: grid; gap: 5px; }
.bk-mid span { text-align: center; font-size: 12px; color: var(--fg-2); }
.bk-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 7px; }
.bk-bars u { display: flex; border-radius: 4px; background: var(--fill); overflow: hidden; text-decoration: none; }
.bk-bars u:first-child { justify-content: flex-end; }
.bk-bars em { display: block; height: 100%; border-radius: 4px; background: var(--tc); }
.legend { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); flex: none; }
.danger-link { justify-self: center; border: 0; background: none; color: var(--danger); font-weight: 700; padding: 8px; }

/* perfil */
.me-head { display: flex; align-items: center; gap: 14px; }
.me-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font: 800 24px/1 var(--font-display); flex: none; }
.me-head h2 { margin: 0; font: 800 24px/1.15 var(--font-display); letter-spacing: -0.02em; }
.me-head p { margin: 2px 0 0; color: var(--fg-2); font-size: 13px; }
.me-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { border: 0; padding: 7px 12px; border-radius: 999px; background: var(--fill); color: var(--fg); font-size: 13px; font-weight: 700; }
.pill.on { background: var(--brand); color: var(--on-brand); }
.h2h { display: grid; }
.h2h-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.h2h-row:first-child { border-top: 0; }
.h2h-row b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-row small { grid-column: 1; color: var(--fg-2); font-size: 12px; }
.h2h-row .rec { grid-row: span 2; grid-column: 2; font: 800 16px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.wl { color: var(--brand-ink); }

/* finalizar */
.finish-step { display: grid; gap: 14px; text-align: center; }
.finish-step p { margin: 0; color: var(--fg-2); }
.finish-step .big { font: 800 22px/1.25 var(--font-display); color: var(--fg); }
.finish-actions { display: grid; gap: 8px; }
.btn-danger { height: 52px; width: 100%; border: 0; border-radius: 14px; background: var(--alert); color: #fff; font-size: 16px; font-weight: 800; }
.btn-ghost { height: 48px; width: 100%; border: 0; border-radius: 14px; background: var(--fill); color: var(--fg); font-size: 15px; font-weight: 700; }
.steps { display: flex; justify-content: center; gap: 6px; }
.steps i { width: 26px; height: 4px; border-radius: 2px; background: var(--fill-strong); }
.steps i.on { background: var(--alert); }
.btn-finish {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; margin-left: 4px;
  border: 0; border-radius: 999px;
  background: var(--alert-soft); color: var(--alert);
  font-size: 14px; font-weight: 800;
}
.btn-finish svg { font-size: 17px; }

/* compartilhar */
.share-body { gap: 14px; }
.share-preview {
  display: grid; place-items: center; padding: 12px; border-radius: 16px;
  background-color: var(--surface-2);
  background-image: linear-gradient(45deg, var(--fill) 25%, transparent 25%, transparent 75%, var(--fill) 75%), linear-gradient(45deg, var(--fill) 25%, transparent 25%, transparent 75%, var(--fill) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.share-preview canvas { display: block; max-width: 100%; max-height: 44vh; max-height: 44dvh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.share-tpls { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.share-tpls::-webkit-scrollbar { display: none; }
.share-tpls button { flex: none; }
.share-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-actions { display: grid; gap: 8px; }
.share-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-sub .btn { height: 44px; }

@media (max-width: 600px) {
  .hdr-title.left { font-size: 22px; }
  .kpis.big .kpi b { font-size: 22px; }
  .topbar .icon-btn { width: 36px; }
}

/* marca ULTRA: raio em gestalt + letreiro */
.ultra-logo { display: inline-flex; align-items: center; gap: 8px; }
/* perfil: graficos de evolucao e sequencia */
.form-guide { display: flex; gap: 5px; flex-wrap: wrap; }
.form-guide i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font: 800 12px/1 var(--font-display); font-style: normal; background: var(--fill); color: var(--fg-2); }
.form-guide i.w { background: var(--brand); color: var(--on-brand); }
.form-guide i.l { background: var(--alert-soft); color: var(--alert); }
.trend { width: 100%; height: auto; display: block; }
.trend .g { stroke: var(--line); stroke-width: 1; }
.trend text { fill: var(--fg-2); stroke: none; font: 600 11px var(--font); }
.trend .s1 { fill: none; stroke: var(--brand-ink); stroke-width: 1.6; }
.trend .s2 { fill: none; stroke: var(--alert); stroke-width: 1.4; stroke-dasharray: 4 4; }
.trend .d1 { fill: var(--brand-ink); stroke: none; }
.trend .d2 { fill: var(--alert); stroke: none; }
.trend .b1 { fill: var(--brand); stroke: none; }
.trend .b2 { fill: var(--fill-strong); stroke: none; }
.streaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.streak { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.streak b { font: 800 26px/1 var(--font-display); }
.streak span { color: var(--fg-2); font-size: 12px; }
.streak.hot { background: #101500; color: #AFFB48; }
.streak.hot span { color: #DDF9A0; }

.share-preview.dark { background-color: #2A3320; background-image: linear-gradient(160deg, #3B4B2A, #1A2112); }

/* faixas com rolagem horizontal (estilos, tabela) nao podem ser espremidas pela grade da folha */
.sheet-body { grid-auto-rows: max-content; }

/* medidor de nivel do microfone */
.meter-wrap { display: inline-flex; align-items: center; gap: 10px; }
.meter { width: 120px; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; display: block; }
.meter i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 4px; transition: width 0.08s linear; }
.voice .voice-ico { box-shadow: 0 0 0 calc(var(--lvl, 0) * 9px) var(--brand-soft); transition: box-shadow 0.08s linear; }

/* tipografia grotesca nos elementos de identidade */
.btn, .btn-primary, .btn-ghost, .btn-danger, .btn-finish, .btn-light, .pill, .tab, .dock-btn, .seg span, .quick-tile, .badge, .chip, .match-chip, .voice-text b, .sheet-head h2, .group h3, .card-who b, .kpi b, .streak b, .live-score, .banner-title { font-family: var(--font-display); }
.tab-play-btn svg { stroke-width: 2.6; font-size: 28px; }
/* continuar partida */
.chip-btn { border: 0; cursor: pointer; background: var(--brand); color: var(--on-brand); }
.cont-link { justify-self: center; border: 0; background: none; color: var(--brand-ink); font-weight: 800; padding: 6px; font-family: var(--font-display); }

/* ---------- perfil v4 (Strava + Playtomic) ---------- */
.me-switch { display: flex; gap: 8px; }
.demo-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--fg); font-size: 13px; }
.me-id { flex: 1; min-width: 0; }
.me-social { margin: 4px 0 0; color: var(--fg-2); font-size: 13px; }
.me-social b { color: var(--fg); font-family: var(--font-display); }
.me-bio { margin: 0; color: var(--fg-2); font-size: 14px; }
.pro-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; background: #101500; color: #AFFB48; font: 800 10px/1.4 var(--font-display); letter-spacing: 0.08em; vertical-align: middle; }
.pro-badge.big { font-size: 14px; padding: 4px 10px; border-radius: 8px; }
.seg-sm span { padding: 4px 9px; font-size: 12px; }
.panel .sec-head { align-items: center; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-sm svg { font-size: 14px; }
.cal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 4px; }
.cal i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--fill); }
.cal i.l1 { background: color-mix(in srgb, var(--brand) 65%, var(--surface)); }
.cal i.l2 { background: var(--brand); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.cal i.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cal-legend { display: flex; justify-content: space-between; color: var(--fg-3); font-size: 11px; }
.recs { display: grid; }
.rec-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.rec-row:first-child { border-top: 0; }
.rec-row > span { display: grid; min-width: 0; font-size: 14px; }
.rec-row small { color: var(--fg-2); font-size: 12px; }
.rec-row b { font: 800 16px/1.2 var(--font-display); white-space: nowrap; }
.res-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: var(--fill); font: 800 11px/1 var(--font-display); vertical-align: middle; }
.res-dot.w { background: var(--brand); color: var(--on-brand); }
.res-dot.l { background: var(--alert-soft); color: var(--alert); }
.ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 8px; }
.ach-item { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ach-item b { font: 800 12px/1.2 var(--font-display); }
.ach-item small { font-size: 10.5px; color: var(--fg-2); line-height: 1.25; }
.ach-ring { --p: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--fill) 0); }
.ach-ring svg { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--surface); color: var(--fg-3); }
.ach-item.got .ach-ring svg { background: #101500; color: #AFFB48; }
.ach-item:not(.got) b { color: var(--fg-2); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duo-card { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--brand-soft); }
.duo-card.warn { background: var(--alert-soft); }
.duo-card span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2); }
.duo-card b { font: 800 16px/1.2 var(--font-display); }
.duo-card small { color: var(--fg-2); }

/* ---------- Pro ---------- */
.pro-hero { display: grid; justify-items: center; gap: 6px; text-align: center; }
.pro-hero h3 { margin: 0; font: 800 26px/1.1 var(--font-display); }
.pro-hero p { margin: 0; color: var(--fg-2); }
.pro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pro-list li { display: flex; gap: 12px; align-items: flex-start; }
.pro-list svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); }
.pro-list span { display: grid; gap: 2px; font-size: 13px; color: var(--fg-2); }
.pro-list b { color: var(--fg); font: 800 15px/1.2 var(--font-display); }

/* ---------- momento ponto a ponto ---------- */
.mom-scroll { overflow-x: auto; border-radius: 12px; background: var(--surface-2); }
.mom { display: block; width: 100%; height: auto; }
.mom .zero { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 4; }
.mom .grid { stroke: var(--line); stroke-width: 1; }
.mom-line { fill: none; stroke: var(--fg-2); stroke-width: 1.1; }
.mom .mk { fill: var(--tc); stroke: var(--surface-2); stroke-width: 1.2; }
.mom path.mk { fill: none; stroke: var(--tc); stroke-width: 2; }
.mom g { cursor: pointer; }
.mom g.on .mk { stroke: var(--fg); stroke-width: 2.4; }
.mom-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--fg-2); font-size: 12px; }
.mom-legend span { display: inline-flex; align-items: center; gap: 6px; }
i.lg { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-2); font-style: normal; }
i.lg.big { width: 10px; height: 10px; }
i.lg.x { background: none; width: auto; height: auto; font-size: 11px; font-weight: 800; }
.pt-info { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 13px; color: var(--fg-2); }
.pt-info b { color: var(--fg); font-family: var(--font-display); }
.pt-list { display: grid; max-height: 34vh; overflow-y: auto; border-top: 1px solid var(--line); }
.pt-row { display: grid; grid-template-columns: 30px 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.pt-row.on { background: var(--brand-soft); }
.pt-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.pt-n { color: var(--fg-3); font: 700 12px/1 var(--font-num); text-align: right; }
.pt-what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
.pt-what b { color: var(--fg); }
.pt-score { font: 700 12px/1 var(--font-num); white-space: nowrap; }

/* ---------- stickers no compartilhar ---------- */
.stk-block { display: grid; gap: 8px; }
.stk-title { font: 800 13px/1 var(--font-display); color: var(--fg-2); }
.stk-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.stk-row::-webkit-scrollbar { display: none; }
.stk { flex: none; width: 60px; height: 60px; display: grid; place-items: center; padding: 4px; border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 2px transparent; }
.stk img { width: 100%; height: 100%; object-fit: contain; }
.stk.on { box-shadow: inset 0 0 0 2px var(--brand-ink); background: var(--brand-soft); }
.stk.none svg { font-size: 20px; color: var(--fg-3); }
.stk-text input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill); }

.mom { display: block; max-width: none; }
.streak b { font-size: 30px; }

/* =========================================================
   v5 · refinamento de UI: ícones outline, títulos, perfil
   ========================================================= */
.ic { width: 1em; height: 1em; flex: none; }
.ph { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.ph h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 800 16px/1.2 var(--font-display); letter-spacing: -0.005em; }
.ph h3 .ic { font-size: 18px; color: var(--brand-ink); stroke-width: 1.8; }
.btn .pro-badge { margin-left: 2px; }
.btn-sm .ic { font-size: 15px; }

/* perfil: cabeçalho */
.me-switch { width: 100%; }
.me-switch input:disabled + span { opacity: 0.4; }
.demo-note { display: flex; gap: 10px; align-items: flex-start; }
.demo-note .ic { font-size: 18px; color: var(--brand-ink); margin-top: 1px; }
.me-card { gap: 14px; }
.me-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.me-avatar { width: 68px; height: 68px; font-size: 24px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand); }
.me-id { display: grid; gap: 6px; min-width: 0; flex: 1; }
.me-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.me-name h2 { margin: 0; font: 800 23px/1.15 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.me-name .pro-badge { flex: none; }
.me-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--fg-2); font-size: 13px; }
.me-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.me-meta .ic { font-size: 15px; color: var(--fg-3); }
.me-bio { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.me-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 12px; }
.me-counts div { display: grid; gap: 1px; padding-left: 14px; border-left: 1px solid var(--line); }
.me-counts div:first-child { padding-left: 0; border-left: 0; }
.me-counts b { font: 800 20px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.me-counts span { color: var(--fg-2); font-size: 12px; }
.me-pick { align-items: center; }

/* sequências */
.streaks { gap: 8px; }
.streak { display: grid; gap: 2px; align-content: start; padding: 12px 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.streak .ic { font-size: 18px; color: var(--brand-ink); margin-bottom: 4px; }
.streak.hot .ic { color: #AFFB48; }
.streak b { font-size: 28px; line-height: 1.05; }
.streak span { font-size: 12px; line-height: 1.25; }

/* calendário */
.cal { grid-template-columns: 14px repeat(12, minmax(0, 1fr)); gap: 4px; }
.cal b { display: grid; place-items: center; font: 600 9px/1 var(--font); color: var(--fg-3); }
.cal i { border-radius: 3px; }
.cal-legend { align-items: center; gap: 8px; }
.cal-key { display: inline-flex; align-items: center; gap: 3px; }
.cal-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--fill); }
.cal-key i.l1 { background: color-mix(in srgb, var(--brand) 65%, var(--surface)); }
.cal-key i.l2 { background: var(--brand); }

/* recordes e partidas recentes (linhas tocáveis) */
.recs { display: grid; margin: 0 -4px; }
.rec-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; padding: 10px 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: inherit; text-align: left; font: inherit; }
.rec-row:first-child { border-top: 0; }
.rec-row:hover { background: var(--surface-2); }
.rec-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); }
.rec-ic .ic { font-size: 18px; }
.rec-ic.rec-sport { background: var(--surface-2); color: var(--fg); }
.rec-txt { display: grid; min-width: 0; font-size: 14px; font-weight: 600; }
.rec-txt small { font-weight: 400; color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row > b { font: 800 15px/1.2 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ic.chev { font-size: 14px; color: var(--fg-3); }
.res-dot { margin: 0 0 0 4px; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }

/* barras simples (golpes) */
.bars1 { display: grid; gap: 10px; }
.bar1 { display: grid; grid-template-columns: 84px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); }
.bar1 u { display: block; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; text-decoration: none; }
.bar1 em { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.bar1 b { text-align: right; color: var(--fg); font: 800 14px/1 var(--font-display); }

/* confrontos e parceiros */
.duo-card span { display: inline-flex; align-items: center; gap: 6px; }
.duo-card span .ic { font-size: 14px; }
.duo-card.warn span .ic { color: var(--alert); }
.duo-card span .ic { color: var(--brand-ink); }
.h2h-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; }
.h2h-row small { grid-column: auto; }
.h2h-row .rec { grid-row: auto; grid-column: auto; font-size: 14px; }
.mini-av { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font: 800 11px/1 var(--font-display); color: var(--fg-2); }
.h2h-txt { display: grid; min-width: 0; }
.h2h-txt b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* conquistas */
.ach-ring .ic { width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: var(--surface); color: var(--fg-3); stroke-width: 1.6; }
.ach-item.got .ach-ring .ic { background: #101500; color: #AFFB48; }

/* ajustes: ícone em quadradinho (padrão iOS) */
.row:has(.row-ic) { justify-content: flex-start; }
.row:has(.row-ic) > span:nth-child(2) { flex: 1; }
.row-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); }
.row-ic svg { font-size: 17px; }

/* v5.1 · ajustes vistos no print do celular */
.form-guide { flex-wrap: nowrap; gap: 5px; }
.form-guide i { flex: 1 1 0; max-width: 34px; width: auto; height: auto; aspect-ratio: 1; }
.rec-l { display: flex; align-items: center; gap: 8px; }
.rec-l .res-dot { margin: 0; }
.rec-big .rec-txt { gap: 1px; }
.rec-big .rec-txt em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--fg-2); }
.rec-big .rec-txt b { font: 800 17px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.rec-big { grid-template-columns: 36px minmax(0, 1fr) 14px; }
.duo-card { align-content: start; }
.duo-card span { white-space: nowrap; }
.ach-grid { align-items: start; }
.ach-item { align-content: start; }
.bar1 span { text-transform: capitalize; }
.streak span { min-height: 2.5em; }
/* ajustes: linha com ícone vira grade; controle largo desce para baixo do texto quando há descrição */
.row:has(.row-ic) { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 10px; padding: 10px 14px; }
.row:has(.row-ic):has(> span small) > :is(select, .seg, .meter-wrap) { grid-column: 2 / -1; justify-self: stretch; }
.row:has(.row-ic) > select { width: 100%; }
.row:has(.row-ic) > .seg { display: grid; }
.row:has(.row-ic) > .meter-wrap .meter { flex: 1; width: auto; }
.row > span > small { margin-top: 2px; line-height: 1.35; }
.row.stack { display: grid; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.row.stack > .seg { display: grid; width: 100%; }
.match-chip em { font-style: normal; color: var(--fg-2); font-weight: 600; }
@media (max-width: 520px) { .match-chip em { display: none; } }
.row.stack { grid-template-columns: minmax(0, 1fr); }
.match-chip b { font-weight: inherit; color: var(--fg); }
.match-chip .l-short { display: none; }
@media (max-width: 430px) { .match-chip .l-long { display: none; } .match-chip .l-short { display: inline; } }
/* telas largas: perfil numa coluna de leitura e calendário sem quadrados gigantes */
#meBody { max-width: 760px; margin-inline: auto; width: 100%; }
.cal, .cal-legend { max-width: 520px; }

/* filtro por esporte no perfil (seletor do Strava) */
.sport-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.sport-filter::-webkit-scrollbar { display: none; }
.sf { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: 700 14px/1 var(--font-display); white-space: nowrap; }
.sf .ic { font-size: 17px; }
.sf small { font: 600 12px/1 var(--font); color: var(--fg-3); }
.sf.on { background: #101500; border-color: #101500; color: #AFFB48; }
.sf.on small { color: #DDF9A0; }
.sport-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 7px 2px 5px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.sport-tag .ic { font-size: 12px; }
.sf { height: 34px; gap: 6px; padding: 0 12px 0 10px; font-size: 13px; }
.sf .ic { font-size: 16px; }
.sport-tag { margin: 0 6px 0 0; padding: 1px 6px 1px 4px; vertical-align: 0; }

/* logo oficial ULTRA PLAY no cabeçalho: tinta escura no tema claro (o verde some no branco), verde oficial no escuro */
.brand-logo { height: 28px; width: auto; aspect-ratio: 182 / 46; color: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo { color: var(--brand); } }
:root[data-theme="dark"] .brand-logo { color: var(--brand); }
/* telas estreitas (iPhone SE, 320px): a base do jogo cabia só a partir de ~380px */
.dock { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) {
  .dock { padding-inline: 10px; }
  .dock-row { gap: 2px; }
  .dock-btn { width: 52px; font-size: 10px; }
  .dock-btn svg { font-size: 22px; }
  .mic-btn { width: 60px; height: 60px; font-size: 25px; }
}
@media (max-width: 400px) { #matchChipText { display: none; } .match-chip { padding: 7px 10px; } } /* só o ícone do esporte; o formato abre no toque */

/* =========================================================
   v6 · acabamento premium (linguagem de painel "ops": fundo profundo com brilho ambiente,
   superfícies com filete de 1px e luz no topo, rótulos em mono, barra de abas flutuante em vidro).
   Placar continua com contraste máximo: é lido de longe, no sol.
   ========================================================= */
:root { --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; }

body {
  background:
    radial-gradient(900px 520px at 12% -12%, var(--ambient), transparent 62%),
    radial-gradient(760px 460px at 105% -6%, var(--ambient-2), transparent 60%),
    var(--bg);
}

/* superfícies: filete + luz no topo no lugar da sombra difusa */
.card, .panel, .quick-tile, .streak, .empty-state, .voice, .chip, .sf, .duo-card, .list, .typer input {
  border: 1px solid var(--hair);
  box-shadow: var(--hi), var(--shadow);
}
.card, .panel, .quick-tile, .streak, .empty-state, .voice, .chip, .sf { background: linear-gradient(180deg, var(--surface-hi), var(--surface)); }
.card, .panel, .empty-state { border-radius: 20px; }

/* rótulos técnicos em mono */
.kpi span, .board-head, .group h3, .live-top, .sec-meta, .duo-card span, .cal-legend, .stk-title, .head-sets > span, .players-table th, .steps + p, .pt-n, .log .n {
  font-family: var(--font-mono);
}
.kpi span, .group h3, .sec-meta, .duo-card span, .stk-title {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-2);
}
.board-head { font-weight: 500; letter-spacing: 0.12em; font-size: 10.5px; }
.head-format { font-family: var(--font); }

/* cabeçalhos das páginas: transparentes sobre o brilho ambiente */
.hdr { background: transparent; border-bottom: 1px solid var(--hair); min-height: 58px; }
.hdr-title.left { font-weight: 700; letter-spacing: -0.025em; }
.sec-head h2 { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
.page { gap: 22px; }

/* ---------- abas: pílula de vidro flutuante ---------- */
.app { position: relative; }
.tabbar {
  position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(340px, calc(100% - 32px));
  grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 6px;
  border: 1px solid var(--hair-strong); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: var(--hi), var(--float);
}
.tab { grid-auto-flow: column; align-items: center; justify-content: center; gap: 7px; height: 48px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; transition: background 0.2s, color 0.2s; }
.tab svg { font-size: 21px; }
.tab.on { color: var(--fg); background: var(--fill); }
.tab-play { padding: 0 6px; }
.tab-play > span:not(.tab-play-btn) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab-play-btn {
  width: 52px; height: 52px; min-width: 52px; margin: -2px 0;
  background: radial-gradient(120% 120% at 30% 20%, #D4FF8F, var(--brand) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(16, 21, 0, 0.18), 0 8px 26px -4px color-mix(in srgb, var(--brand) 60%, transparent);
  transition: transform 0.15s;
}
.tab-play:active .tab-play-btn { transform: scale(0.94); }
.tab-play.on .tab-play-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 4px var(--brand-soft), 0 8px 26px -4px color-mix(in srgb, var(--brand) 60%, transparent); }
.tab-play-btn svg { font-size: 24px; }
/* a barra flutua por cima do conteúdo: espaço no fim de cada página */
.view:not(.view-play) .page { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* ---------- partida em andamento ---------- */
.live {
  position: relative; overflow: hidden; gap: 14px; padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(175, 251, 72, 0.26);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(175, 251, 72, 0.2), transparent 55%),
    linear-gradient(180deg, #121610, #0A0C08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 50px -24px rgba(120, 190, 20, 0.55);
}
.live::after { /* foto da quadra do esporte (dia ou noite), bem discreta, entrando pela direita */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--court, none) center 40% / cover no-repeat;
  opacity: 0.34; filter: saturate(0.55) contrast(1.05);
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
}
.live > * { position: relative; z-index: 1; }
.live-top { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; color: #DDF9A0; opacity: 1; }
.live-dot { box-shadow: 0 0 0 4px rgba(175, 251, 72, 0.16), 0 0 12px #AFFB48; }
.live-score { gap: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.live-score b { font-size: 26px; letter-spacing: 0.02em; }
.btn-light { height: 42px; padding: 0 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 26px -8px rgba(175, 251, 72, 0.7); }

/* ---------- começar partida ---------- */
.quick { gap: 10px; }
.quick-tile { gap: 9px; padding: 16px 6px 14px; border-radius: 18px; font-weight: 600; transition: transform 0.15s, border-color 0.15s; }
.quick-tile svg {
  width: 44px; height: 44px; padding: 11px; border-radius: 14px;
  background: var(--brand-soft); color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.quick-tile:hover { border-color: var(--hair-strong); transform: translateY(-1px); }
.quick-tile:active { transform: scale(0.98); }

/* ---------- feed ---------- */
.feed { gap: 12px; }
.card { gap: 14px; padding: 18px 18px 0; transition: border-color 0.15s; }
.card:hover { border-color: var(--hair-strong); }
.avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.card-who b { font-weight: 700; }
.card-who span { color: var(--fg-2); }
.card-title { font-weight: 700; letter-spacing: -0.02em; }
.kpi { gap: 4px; }
.kpi b { font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.kpis.big .kpi b { font-size: 26px; }
@media (max-width: 600px) { .kpis.big .kpi b { font-size: 22px; } }
.card-actions { margin: 0 -18px; border-top: 1px solid var(--hair); }
.card-actions button { padding: 13px 0; font-weight: 600; transition: color 0.15s, background 0.15s; }
.card-actions button:hover { color: var(--fg); background: var(--fill); }
.card-actions button + button { border-left: 1px solid var(--hair); }
.badge { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; font-size: 10px; }

/* ---------- resumo e painéis ---------- */
.panel { gap: 14px; padding: 18px; }
.panel h3, .ph h3 { font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.ph h3 .ic { width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: var(--brand-soft); font-size: 28px; }
.result-row b { font-weight: 700; }
.result-row i { width: 4px; box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 70%, transparent); }
.momentum .grid, .trend .g, .mom .grid { stroke: var(--hair); stroke-dasharray: 2 4; }
.momentum text, .trend text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }
.bk-bars, .stat .bars { height: 6px; }
.bk-bars em, .stat .bars b { box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 45%, transparent); }
.btn-primary {
  border-radius: 16px; font-weight: 700; letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(16, 21, 0, 0.12), 0 12px 30px -10px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: transform 0.12s, filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-primary:active { transform: scale(0.99); }
.btn { border: 1px solid var(--hair); border-radius: 11px; transition: background 0.15s, border-color 0.15s; }
.btn:hover { border-color: var(--hair-strong); }
.btn-ghost { border: 1px solid var(--hair); }
.pro-badge { font-family: var(--font-mono); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(175, 251, 72, 0.35); }

/* ---------- perfil ---------- */
.me-avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--brand), 0 0 26px color-mix(in srgb, var(--brand) 45%, transparent); }
.me-name h2 { font-weight: 700; }
.me-counts { border-top-color: var(--hair); }
.me-counts div { border-left-color: var(--hair); }
.me-counts span, .streak span { color: var(--fg-2); }
.streak { border-radius: 18px; }
.streak.hot {
  border-color: rgba(175, 251, 72, 0.28);
  background: radial-gradient(120% 120% at 100% 0%, rgba(175, 251, 72, 0.22), transparent 60%), linear-gradient(180deg, #131810, #0A0C08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.streak b, .me-counts b { font-weight: 700; }
.sf { box-shadow: var(--hi); }
.sf.on { box-shadow: inset 0 0 0 1px rgba(175, 251, 72, 0.35), 0 6px 18px -8px rgba(175, 251, 72, 0.6); }
.cal i.l2 { box-shadow: inset 0 0 0 1px rgba(16, 21, 0, 0.08), 0 0 8px color-mix(in srgb, var(--brand) 35%, transparent); }
.duo-card { border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.duo-card.warn { border-color: color-mix(in srgb, var(--alert) 20%, transparent); }
.rec-ic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.rec-ic.rec-sport { box-shadow: inset 0 0 0 1px var(--hair); }
.rec-row, .h2h-row { border-top-color: var(--hair); }
.demo-note { border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }

/* ---------- controles ---------- */
.seg { padding: 3px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.seg span { border-radius: 9px; transition: background 0.15s; }
.seg input:checked + span { box-shadow: inset 0 0 0 1px var(--hair-strong), 0 1px 3px rgba(0, 0, 0, 0.18); }
.list { background: var(--surface-2); box-shadow: var(--hi); border-radius: 16px; }
.row, .team-edit { border-top-color: var(--hair); }
.sport { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow 0.15s, background 0.15s; }
.sport:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.team-edit input[type="text"], .stk-text input, .row select { box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow 0.15s; }
.team-edit input[type="text"]:focus, .stk-text input:focus, .typer input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.switch { box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- folhas ---------- */
.scrim { background: rgba(3, 4, 3, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { border: 1px solid var(--hair-strong); border-radius: 24px; box-shadow: var(--hi), var(--shadow-pop); }
.sheet-head { border-bottom-color: var(--hair); padding-block: 16px 14px; }
.sheet-head h2 { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
@media (max-width: 600px) {
  .sheet { border-width: 1px 0 0; border-radius: 26px 26px 0 0; }
  .sheet::before { content: ""; flex: none; align-self: center; width: 38px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--fill-strong); }
  .sheet-head { padding-top: 8px; }
}
.banner-card { border: 1px solid var(--hair-strong); box-shadow: var(--hi), var(--shadow-pop); }

/* ---------- placar ao vivo ---------- */
.match-chip { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--surface-hi), var(--surface)); box-shadow: var(--hi); color: var(--fg-2); }
.top-actions {
  gap: 2px; padding: 3px;
  border: 1px solid var(--hair); border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: var(--hi);
}
.top-actions .icon-btn { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
.btn-finish { height: 36px; margin-left: 2px; border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alert) 26%, transparent); }

.team {
  isolation: isolate;
  border: 1px solid var(--hair);
  background:
    radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--tc) 11%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: var(--hi), var(--shadow);
  transition: transform 0.12s ease, border-color 0.25s;
}
.team::before { width: 4px; top: 16%; bottom: 16%; border-radius: 0 4px 4px 0; box-shadow: 0 0 22px 2px color-mix(in srgb, var(--tc) 60%, transparent); }
.team.serving { border-color: color-mix(in srgb, var(--tc) 32%, var(--hair)); }
.team.scored { animation: none; }
.team::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--tc) 34%, transparent), transparent 70%);
}
.team.scored::after { animation: scoredGlow 0.9s ease-out; }
@keyframes scoredGlow { 0% { opacity: 1; } 100% { opacity: 0; } }
.team-name { font-weight: 700; letter-spacing: -0.025em; }
.game {
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, var(--surface)));
  box-shadow: var(--hi);
  letter-spacing: -0.04em;
}
.team.leading-point .game, .team.winner .game {
  border-color: color-mix(in srgb, var(--tc) 40%, transparent);
  box-shadow: var(--hi), 0 0 30px -6px color-mix(in srgb, var(--tc) 45%, transparent);
}
.chip { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; font-size: 11px; }
.chip i { box-shadow: 0 0 8px var(--tc); }

.voice {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition: border-color 0.25s;
}
.voice[data-state="listening"], .voice[data-state="hearing"] { border-color: color-mix(in srgb, var(--vc) 35%, transparent); }
.voice-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 25%, transparent); }
.voice-result { font-family: var(--font-mono); font-size: 12px; }
.mic-btn { transition: background 0.2s, transform 0.12s, box-shadow 0.25s; }
.mic-btn[aria-pressed="false"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px var(--hair-strong), 0 10px 28px -8px rgba(0, 0, 0, 0.5); }
.mic-btn[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 6px var(--brand-soft), 0 0 44px color-mix(in srgb, var(--brand) 50%, transparent); }
.dock-btn { font-size: 10.5px; border-radius: 14px; }
/* celular deitado (inclusive modo TV): o número do game acompanha a altura da linha, não só a largura */
@media (max-height: 520px) and (min-width: 601px) { .game { font-size: min(calc(var(--game-cell) * 0.52), 16vh); } }
/* iPhone SE: três números por linha sem reticências */
@media (max-width: 380px) {
  .kpi { padding-inline: 8px; }
  .kpi b, .kpis.big .kpi b { font-size: 19px; }
}

/* =========================================================
   v7 · números condensados e medalhas (referência: Nike Run Club)
   Archivo condensada (OFL, instância de largura 64) só para números e títulos curtos em caixa alta;
   texto corrido e nomes seguem na Bricolage.
   ========================================================= */
@font-face {
  font-family: "Archivo Condensed";
  src: url("fonts/archivo-condensed-latin.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
:root { --font-cond: "Archivo Condensed", "Bricolage Grotesque", Impact, "Arial Narrow", sans-serif; }
/* letra de autógrafo (imagem Destaque do compartilhar): Mr Dafoe, OFL */
@font-face {
  font-family: "Mr Dafoe";
  src: url("fonts/mr-dafoe-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

.game, .team .sets > span, .kpi b, .streak b, .me-counts b, .live-score b, .result-sets, .rec-row > b, .rec-big .rec-txt b, .h2h-row .rec, .bk-row b, .stat .v {
  font-family: var(--font-cond); font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.game { font-size: calc(var(--game-cell) * 0.6); font-weight: 900; }
.team .sets > span { font-size: calc(var(--set-cell) * 0.72); }
@media (max-height: 520px) and (min-width: 601px) { .game { font-size: min(calc(var(--game-cell) * 0.6), 17vh); } }
.kpi b { font-size: 25px; }
.kpis.big .kpi b { font-size: 31px; }
@media (max-width: 600px) { .kpis.big .kpi b { font-size: 27px; } }
@media (max-width: 380px) { .kpi b, .kpis.big .kpi b { font-size: 23px; } }
.streak b { font-size: 36px; font-weight: 900; }
.me-counts b { font-size: 24px; }
.live-score b { font-size: 34px; font-weight: 900; }
.result-sets { font-size: 26px; }
.rec-row > b, .rec-big .rec-txt b { font-size: 19px; }
.bk-row b { font-size: 17px; }
.banner-title { font-family: var(--font-cond); font-weight: 900; text-transform: uppercase; letter-spacing: 0; }

/* ---------- medalhas ---------- */
.medal {
  --s: 58px;
  --shape: circle(50%);
  position: relative; flex: none;
  width: var(--s); height: var(--s);
  display: grid; place-items: center;
}
.medal::before, .medal::after { content: ""; position: absolute; clip-path: var(--shape); }
.medal::before { inset: 0; background: linear-gradient(150deg, color-mix(in srgb, var(--m1) 55%, #FFFFFF), var(--m2) 70%); }
.medal::after {
  inset: calc(var(--s) * 0.075);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 46%),
    radial-gradient(120% 100% at 30% 15%, var(--m1), var(--m2) 72%);
}
.medal .ic { position: relative; z-index: 1; width: 44%; height: 44%; color: var(--mi, #FFFFFF); stroke-width: 2.1; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3)); }
.medal.got { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--m2) 38%, transparent)); }
.medal.m-serie { --shape: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.medal.m-quadra { --shape: polygon(50% 0, 100% 13%, 100% 54%, 50% 100%, 0 54%, 0 13%); }
.medal.m-quadra .ic { margin-bottom: 9%; }
.medal.m-jornada { --shape: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
.medal:not(.got)::before { background: var(--hair-strong); }
.medal:not(.got)::after { background: var(--surface-2); }
.medal:not(.got) .ic { color: var(--fg-3); filter: none; }
.medal.lg { --s: 64px; }
.medal.xl { --s: 136px; margin: 4px 0 12px; }
.medal.xl.got { filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--m2) 55%, transparent)); animation: medalIn 0.7s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes medalIn { 0% { transform: scale(0.6) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* vitrine no perfil */
.ach { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 6px; }
.ach-item { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 4px 2px; border: 0; border-radius: 14px; background: none; color: inherit; text-align: center; font: inherit; transition: background 0.15s; }
.ach-item:hover { background: var(--fill); }
.ach-item b { font: 700 12px/1.2 var(--font-display); }
.ach-item:not(.got) b { color: var(--fg-2); }
.ach-item small { font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.ach-bar { display: block; width: 46px; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: 2px; background: var(--fg-2); }
.ach-group { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.ach-group h4 { margin: 0; display: flex; justify-content: space-between; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.ach-group h4 span { color: var(--fg-3); }
.ach-latest {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 18px;
  background: var(--surface-2); color: inherit; text-align: left; font: inherit;
}
.ach-latest-txt { display: grid; gap: 3px; min-width: 0; }
.ach-latest-txt em { font: 500 10.5px/1 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); }
.ach-latest-txt b { font: 900 24px/1 var(--font-cond); text-transform: uppercase; }
.ach-latest-txt small { color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-won .ach { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* detalhe da conquista */
.ach-detail { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 8px 0 2px; }
.ach-eyebrow { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.ach-detail.got .ach-eyebrow { color: var(--brand-ink); }
.ach-detail h3 { margin: 0; font: 900 44px/0.95 var(--font-cond); text-transform: uppercase; text-wrap: balance; }
.ach-detail p { margin: 0; color: var(--fg-2); }
.ach-detail .ach-when { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ach-prog { display: grid; gap: 8px; width: 100%; max-width: 280px; margin-top: 6px; }
.ach-prog .ach-bar { width: 100%; height: 8px; border-radius: 4px; }
.ach-prog .ach-bar i { background: var(--brand); border-radius: 4px; }
.ach-prog small { font: 500 11px/1 var(--font-mono); color: var(--fg-2); letter-spacing: 0.04em; }
.ach-detail .finish-actions { width: 100%; margin-top: 12px; }

/* ---------- compartilhar: prévia, miniaturas dos modelos, ações ---------- */
.share-body { gap: 16px; }
.share-preview {
  padding: 16px; border-radius: 20px; border: 1px solid var(--hair);
  background: radial-gradient(80% 70% at 50% 0%, var(--ambient), transparent 70%), var(--surface-2);
}
.share-preview.transparent, .share-preview.dark {
  background-color: #2A3320;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%), linear-gradient(160deg, #3B4B2A, #1A2112);
  background-size: 18px 18px, 18px 18px, auto; background-position: 0 0, 9px 9px, 0 0;
}
.share-preview canvas { max-height: 40vh; max-height: 40dvh; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.share-preview.transparent canvas { box-shadow: none; }
.share-tpls { gap: 12px; padding: 4px 2px 2px; margin: 0 -2px; }
.tpl { flex: none; display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--fg-2); font: 600 11.5px/1 var(--font-display); }
.tpl canvas { display: block; width: 62px; height: auto; border-radius: 10px; background: #2A3320; box-shadow: 0 0 0 1px var(--hair-strong); transition: box-shadow 0.15s, transform 0.15s; }
.tpl:hover canvas { transform: translateY(-1px); }
.tpl.on { color: var(--fg); }
.tpl.on canvas { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
#photoPick.need { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.share-actions.solo #btnSaveImg {
  height: 52px; border: 0; border-radius: 16px; background: var(--brand); color: var(--on-brand); font-size: 16px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 30px -10px color-mix(in srgb, var(--brand) 70%, transparent);
}
.share-actions.solo .share-sub { grid-template-columns: 1fr; }
.share-actions.solo #btnCopyImg { height: 44px; }
.stk { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.stk.on { box-shadow: inset 0 0 0 2px var(--brand); }

/* =========================================================
   v8 · rede social: timeline, zap, notificações, perfis, lançar e salvar partida
   ========================================================= */
.hdr-spacer { width: 40px; flex: none; }
.bell { position: relative; }
.bell-n {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--alert); color: #fff; font: 700 10px/1 var(--font-display);
  box-shadow: 0 0 0 2px var(--bg);
}
.feed-note { margin: -8px 2px 0; display: flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: 13px; }
.feed-note .ic { color: var(--brand-ink); font-size: 15px; }
.feed-note b { color: var(--fg); font-weight: 600; }

/* avatar com iniciais */
.av {
  --av: #AFFB48;
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--av) 70%, #FFFFFF), var(--av) 70%);
  color: #101500; font: 800 14px/1 var(--font-display); letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.av-xs { width: 22px; height: 22px; font-size: 9px; cursor: inherit; }
.av-lg { width: 56px; height: 56px; font-size: 19px; }
.av-xl { width: 68px; height: 68px; font-size: 24px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--av); }
.av.free { background: var(--fill-strong); color: var(--fg); }

/* card de atividade */
.act {
  display: grid; gap: 12px; padding: 16px 16px 6px;
  border: 1px solid var(--hair); border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface)); box-shadow: var(--hi), var(--shadow);
  cursor: pointer; transition: border-color 0.15s;
}
.act:hover { border-color: var(--hair-strong); }
.act-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.act-who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.act-who b { font: 700 15px/1.2 var(--font-display); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-who > span { display: flex; align-items: center; gap: 5px; color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-who > span .ic { font-size: 13px; flex: none; }
.tbadge {
  flex: none; align-self: flex-start; padding: 4px 9px; border-radius: 999px;
  background: var(--fill); color: var(--fg-2);
  font: 600 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.tbadge.t-campeonato { background: color-mix(in srgb, #FFD400 22%, transparent); color: color-mix(in srgb, #B37700 70%, var(--fg)); }
.tbadge.t-treino { background: color-mix(in srgb, #1A8CFF 18%, transparent); color: color-mix(in srgb, #1A8CFF 70%, var(--fg)); }
.tbadge.t-resenha { background: color-mix(in srgb, #FF2E88 16%, transparent); color: color-mix(in srgb, #FF2E88 70%, var(--fg)); }
.tbadge.t-desafio { background: var(--alert-soft); color: var(--alert); }
.tbadge.t-aula { background: color-mix(in srgb, #9D5CFF 18%, transparent); color: color-mix(in srgb, #9D5CFF 70%, var(--fg)); }
.act-title { margin: 0; font: 700 19px/1.2 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.act-detail .act-title { font-size: 22px; }
.act-cap { margin: -6px 0 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.act-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--fg-2); font-size: 12.5px; }
.act-meta span { display: inline-flex; align-items: center; gap: 5px; }
.act-meta .ic { font-size: 14px; color: var(--fg-3); }
.act .kpis { margin-top: 2px; }
.act-invite { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); font-size: 13px; }
.act-invite .ic { color: var(--brand-ink); font-size: 17px; }
.act-invite span { flex: 1; }
.act-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -6px; padding-top: 4px; border-top: 1px solid var(--hair); }
.act-detail .act-foot { margin: 0; padding-top: 10px; }
.act-detail { position: relative; }
.act-detail::before { /* foto da quadra (dia ou noite) no topo da página da partida, sumindo para baixo */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--court, none) center 35% / cover no-repeat;
  opacity: calc(0.26 * var(--court-mix, 1)); filter: saturate(0.55);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
}
.act-detail > * { position: relative; }

/* placar no card */
.ascore { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hair); }
.ascore-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; min-height: 30px; }
.ascore-row > i { width: 4px; height: 20px; border-radius: 2px; background: var(--tc); }
.ascore-who { min-width: 0; font: 600 14px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ascore-who em { font-style: normal; color: var(--fg-2); font-weight: 500; }
.ascore-who [data-user] { cursor: pointer; }
.ascore-who .me { color: var(--brand-ink); }
.ascore-row.lose .ascore-who { color: var(--fg-2); }
.ascore-row.win .ascore-who { font-weight: 800; }
.ascore-sets { display: flex; gap: 12px; }
.ascore-sets b { min-width: 1.1em; text-align: center; font: 800 20px/1 var(--font-cond); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ascore-sets b.w { color: var(--fg); }
.ascore-win { color: var(--brand-ink); font-size: 17px; display: grid; place-items: center; }

/* zap (o "curtir" do ULTRA PLAY): raio da marca */
.zapbar { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.zap {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 10px;
  border: 0; border-radius: 12px; background: transparent; color: var(--fg-2);
  font: 800 15px/1 var(--font-cond); font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}
.zap .zap-ic { width: 22px; height: 22px; }
.zap:hover { background: var(--fill); }
.zap.on { color: var(--brand-ink); }
.zap.on .zap-ic { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 70%, transparent)); }
.zap.mine { cursor: default; }
.zap.pop .zap-ic { animation: zapPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes zapPop { 0% { transform: scale(0.5) rotate(-20deg); } 60% { transform: scale(1.35) rotate(6deg); } 100% { transform: none; } }
.zap-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: var(--fg-2); font-size: 12.5px; text-align: left; }
.zap-who:disabled { cursor: default; }
.zap-who > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faces { display: inline-flex; }
.faces:empty { display: none; }
.faces .av { box-shadow: 0 0 0 2px var(--surface); }
.faces .av + .av { margin-left: -4px; }

/* sugestões para seguir */
.suggest { display: grid; gap: 10px; }
.suggest-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.suggest-row::-webkit-scrollbar { display: none; }
.sug { flex: none; width: 148px; display: grid; justify-items: center; gap: 6px; padding: 16px 10px 12px; border: 1px solid var(--hair); border-radius: 18px; background: linear-gradient(180deg, var(--surface-hi), var(--surface)); text-align: center; }
.sug b { font: 700 14px/1.2 var(--font-display); cursor: pointer; }
.sug small { color: var(--fg-2); font-size: 11.5px; min-height: 2.4em; }
.sug .btn { width: 100%; }
.btn-brand { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.btn-brand:hover { background: var(--brand); filter: brightness(1.05); }
.follow .ic { font-size: 15px; }

/* rascunho para concluir */
.draft { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-soft); }
.draft > .ic { font-size: 20px; color: var(--brand-ink); }
.draft span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.draft b { font: 700 14px/1.2 var(--font-display); }
.draft small { color: var(--fg-2); font-size: 12px; }

/* lista de pessoas */
.plist { display: grid; }
.prow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
.prow:first-child { border-top: 0; }
.prow-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.prow-txt b { font: 700 14px/1.2 var(--font-display); cursor: pointer; }
.prow-txt small { color: var(--fg-2); font-size: 12px; }
.prow-txt .st-aceito { color: var(--brand-ink); }
.prow-txt .st-recusado { color: var(--danger); }
.prow-act { display: flex; gap: 6px; }
.perfil-actions { display: flex; align-items: center; gap: 12px; }
.perfil-actions .btn { height: 40px; padding: 0 18px; }
.me-counts button { display: grid; gap: 1px; padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--hair); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.me-counts button b { font: 800 24px/1.1 var(--font-cond); font-variant-numeric: tabular-nums; }
.me-counts button span { color: var(--fg-2); font-size: 12px; }

/* notificações */
#notifBody { grid-template-columns: minmax(0, 1fr); }
.notif { display: flex; min-width: 0; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--hair); background: linear-gradient(180deg, var(--surface-hi), var(--surface)); }
.notif.new { border-color: color-mix(in srgb, var(--brand) 35%, transparent); box-shadow: inset 3px 0 0 var(--brand); }
.notif-txt { display: grid; gap: 6px; flex: 1; min-width: 0; }
.notif-txt p { margin: 0; font-size: 14px; line-height: 1.4; }
.notif-txt b { font-weight: 700; cursor: pointer; }
.notif-txt small { color: var(--fg-3); font-size: 11.5px; }
.notif-card { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); color: inherit; font: 600 13px/1.2 var(--font-display); text-align: left; }
.notif-card em { font-style: normal; color: var(--fg-3); }
.notif-card b { font: 800 17px/1 var(--font-cond); }
.notif-act { display: flex; gap: 8px; }
.notif-act .btn { flex: 1; height: 38px; }
.notif-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.notif-st.st-aceito { color: var(--brand-ink); }
.linkish { padding: 0; border: 0; background: none; color: var(--fg); font: 700 14px/1.4 var(--font-display); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }

/* aviso rápido */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 14px;
  background: var(--ink); color: var(--ink-fg); font: 600 14px/1.3 var(--font-display);
  box-shadow: var(--float); transform: translate(-50%, 12px); opacity: 0; transition: opacity 0.22s, transform 0.22s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body[data-view="jogar"] .toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* botão +: escolha */
.choose-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--hair); border-radius: 20px; background: var(--surface-2); color: inherit; text-align: left; font: inherit; }
.choose-btn { grid-template-columns: minmax(0, 1fr) auto; align-items: center; cursor: pointer; }
.choose-head { display: flex; align-items: center; gap: 12px; }
.choose-head > span:last-child { display: grid; gap: 2px; }
.choose-head b { font: 700 16px/1.2 var(--font-display); }
.choose-head small { color: var(--fg-2); font-size: 12.5px; line-height: 1.35; }
.choose-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--brand); color: var(--on-brand); font-size: 22px; }
.choose-ic.alt { background: var(--ink); color: var(--ink-fg); }
.choose-card .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choose-card .quick-tile { padding: 12px 4px 10px; }
.choose-card .quick-tile svg { width: 38px; height: 38px; padding: 9px; }
/* Já joguei: o caminho principal, em destaque */
.choose-main { border-color: color-mix(in srgb, var(--brand) 55%, var(--hair)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, var(--surface-2)), var(--surface-2) 70%); }
.choose-main .choose-head b { font-size: 18px; }
.choose-main .choose-ic { width: 50px; height: 50px; font-size: 25px; }
.choose-sm { padding: 12px 16px; }
.choose-sm .choose-ic { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
.choose-sm .choose-head b { font-size: 15px; }
/* registrar resultado */
.ln-res { gap: 10px; }
.ln-modes { justify-self: start; }
.ln-win .ic { width: 15px; height: 15px; margin-right: 5px; }
.fields.two.even .field:last-child { grid-column: auto; }
.fields.two.even > .field:nth-child(2) { border-top: 0; }
.more-opts { border: 1px solid var(--hair); border-radius: 16px; background: var(--surface-2); }
.more-opts summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.more-opts summary::-webkit-details-marker { display: none; }
.more-opts summary > .ic:first-child { width: 20px; height: 20px; color: var(--fg-2); flex: none; }
.more-opts summary > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.more-opts summary b { font: 700 15px/1.2 var(--font-display); }
.more-opts summary small { color: var(--fg-2); font-size: 12.5px; line-height: 1.3; }
.more-opts summary .chev { width: 16px; height: 16px; flex: none; color: var(--fg-3); transform: rotate(90deg); transition: transform 0.2s; }
.more-opts[open] summary .chev { transform: rotate(-90deg); }
.more-opts .more-body { display: grid; gap: 14px; padding: 0 14px 14px; }
.more-opts .more-body .group { border-top: 1px solid var(--hair); padding-top: 12px; }
/* lançar detalhado (de memória): contadores + / − */
.steppers { display: grid; gap: 4px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.stepper:last-child { border-bottom: 0; }
.stp-l { display: grid; gap: 1px; min-width: 0; }
.stp-l b { font: 700 14px/1.2 var(--font-display); }
.stp-l small { color: var(--fg-2); font-size: 11.5px; }
.stp-c { flex: none; display: inline-flex; align-items: center; gap: 2px; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); }
.stp-c > b { min-width: 2em; text-align: center; font: 800 18px/1 var(--font-num); }
.stp-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--fg); font: 600 22px/1 var(--font-display); cursor: pointer; }
.stp-btn:active { background: var(--fill-strong); }
.recall-opts summary > .ic:first-child { color: var(--brand-ink); }

/* nível do jogador (0,5 a 7,5): selo no perfil, linha na partida, slide da Início, painel em Números e a folha "Seu nível" */
.lvl-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 12px 6px 9px; border: 1px solid var(--hair-strong); border-radius: 14px; background: var(--surface); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.lvl-chip > b { font: 800 26px/1 var(--font-num); color: var(--brand-ink); }
.lvl-chip > span { display: grid; gap: 1px; }
.lvl-chip em { font: 700 12px/1.2 var(--font-display); font-style: normal; }
.lvl-chip small { font-size: 11.5px; color: var(--fg-2); }
.lvl-chip i, .act-level em, .st-level-top small i, .lvl-row b, .hc-level .hc-partner b { font-style: normal; font-weight: 700; font-family: var(--font-num, inherit); }
.lvl-chip .up, .act-level .up, .st-level-top .up, .lvl-row .up, .hc-level .up { color: var(--brand-ink); }
.lvl-chip .down, .act-level .down, .st-level-top .down, .lvl-row .down, .hc-level .down { color: var(--alert); }
.act-level { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--fg-2); }
.act-level > span { display: inline-flex; align-items: center; gap: 6px; }
.act-level > span .ic { width: 16px; height: 16px; }
.act-level b { font: 800 18px/1 var(--font-num); color: var(--fg); }
.act-level .linkish { margin-left: auto; flex: none; }
.act-level.off { color: var(--fg-2); font-size: 12.5px; } /* fg-3 não passa no contraste 4,5:1 sobre o painel */
.act-level.off > span { min-width: 0; }
.hc-level .hc-num { width: 88px; }
.hc-level .hc-num b { font-size: 46px; }
.lvl-spark { flex: 1; min-width: 0; width: 100%; height: 50px; overflow: visible; }
.lvl-spark path { fill: none; stroke: var(--brand-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lvl-spark circle { fill: var(--surface); stroke: var(--brand-ink); stroke-width: 2; }
.lvl-spark circle.l { stroke: var(--fg-3); }
.hc-txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--fg-2); }
.lvl-hero { display: grid; justify-items: center; gap: 2px; padding: 8px 0 16px; text-align: center; }
.lvl-hero b { font: 800 60px/1 var(--font-num); color: var(--brand-ink); }
.lvl-hero span { font: 700 14px/1.2 var(--font-display); }
.lvl-hero small { color: var(--fg-2); font-size: 12.5px; }
.lvl-sports { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lvl-sports > span { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.lvl-sports i { grid-row: 1 / 3; display: grid; place-items: center; color: var(--fg-2); }
.lvl-sports i .ic { width: 20px; height: 20px; }
.lvl-sports b { font: 800 18px/1 var(--font-num); }
.lvl-sports small { font-size: 11px; color: var(--fg-2); white-space: nowrap; }
.lvl-h { margin: 0 0 4px; font: 700 13px/1.2 var(--font-display); color: var(--fg-2); }
.lvl-hist { display: grid; border-top: 1px solid var(--line); margin-bottom: 14px; }
.lvl-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 42px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); text-align: left; font-size: 13px; cursor: pointer; }
.lvl-row > span { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl-row em { font-style: normal; font-weight: 800; font-family: var(--font-num, inherit); font-size: 15px; min-width: 2.3em; text-align: right; }
.st-level { gap: 10px; }
.st-level-top { display: flex; align-items: center; gap: 14px; }
.st-level-top > b { font: 800 44px/1 var(--font-num); color: var(--brand-ink); }
.st-level-top > span { display: grid; gap: 2px; min-width: 0; }
.st-level-top em { font: 700 14px/1.2 var(--font-display); font-style: normal; }
.st-level-top small { font-size: 12px; line-height: 1.35; color: var(--fg-2); }

/* chips de escolha (tipo, esporte) */
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.cpick { position: relative; }
.cpick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cpick span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--surface); font: 600 13px/1 var(--font-display); transition: background 0.15s, border-color 0.15s; }
.cpick span .ic { font-size: 16px; }
.cpick input:checked + span { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.cpick input:focus-visible + span { outline: 2px solid var(--info); outline-offset: 2px; }

/* campos de texto */
.fields { padding: 4px 14px; }
.fields.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.fields.two .field:last-child { grid-column: 1 / -1; }
.field { position: relative; display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--hair); }
.fields > .field:first-child, .fields.two > .field:nth-child(2) { border-top: 0; }
.field > span { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.field input, .field textarea, .field select, .text-in {
  width: 100%; min-width: 0; padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--fill); color: var(--fg); box-shadow: inset 0 0 0 1px var(--hair); font: inherit; font-size: 15px;
}
.field textarea { resize: none; line-height: 1.4; }
.field input:focus, .field textarea:focus, .field select:focus, .text-in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.field .count { position: absolute; right: 2px; top: 10px; font: 500 10.5px/1 var(--font-mono); color: var(--fg-3); }

/* lados da partida no lançamento */
.teams-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tp { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface-2); }
.tp-us { box-shadow: inset 3px 0 0 var(--c-verde); }
.tp-them { box-shadow: inset 3px 0 0 var(--c-laranja); }
.tp-tag { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.ln-notme { margin: 0; grid-column: 1 / -1; }
/* ---------- Micro-animações: tela entrando, aba que pulsa, número que salta, toque nos chips ---------- */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.enter > .scroll, .view.enter > .page { animation: viewIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tabPop { 0% { transform: scale(0.82); } 55% { transform: scale(1.14); } 100% { transform: none; } }
.tab > svg, .tab > #tabAv { transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tab.on > svg, .tab.on > #tabAv { transform: scale(1.08); }
.tab-ink { position: absolute; left: 0; top: 6px; height: 48px; width: 0; border-radius: 999px; background: var(--fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); pointer-events: none; z-index: 0; transition: transform 0.46s cubic-bezier(0.2, 1.25, 0.3, 1), width 0.46s cubic-bezier(0.2, 1.25, 0.3, 1), opacity 0.2s; }
.tab-ink.off { opacity: 0; }
.tab-ink.no-anim { transition: none; }
.tabbar > .tab { position: relative; z-index: 1; }
.tabbar .tab.on { background: transparent; }
@keyframes numBump { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.bump { animation: numBump 0.16s ease-out; }
.stp-c > b { display: inline-block; will-change: transform; }
.sc-step input { will-change: transform; }
.cpick > span, .pchip, .menu-item, .ls-card, .choose-card, .gl-side, .glchip, .stp-btn, .sc-btn, .tab { transition: transform 0.12s ease; }
.cpick:active > span, .pchip:active, .menu-item:active, .ls-card:active, .choose-card:active, .glchip:active { transform: scale(0.96); }
.tab:active > svg, .tab:active > #tabAv { transform: scale(0.9); transition: transform 0.1s; }
@media (prefers-reduced-motion: reduce) { .view.enter > .scroll, .view.enter > .page, .bump { animation: none; } .tab-ink, .tab > svg, .tab > #tabAv { transition: none; } }
/* Registrar resultado em 2 passos */
.ln-step { display: contents; }
.ln-step[hidden] { display: none; }
#lnNext { margin-top: 4px; }
#lnNext .arr { font-size: 22px; line-height: 1; margin-left: 6px; position: relative; top: -1px; }
.ln-sum { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface); color: var(--fg); text-align: left; font: 600 14px/1.3 var(--font-display); cursor: pointer; }
.ln-sum > .ic { width: 18px; height: 18px; color: var(--brand-ink); flex: none; }
.ln-sum span { flex: 1; min-width: 0; }
.ln-sum b { flex: none; color: var(--brand-ink); font: 700 13px/1 var(--font-display); }
.ln-cols { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: end; margin-bottom: -2px; }
.ln-cols em { visibility: hidden; font: 900 16px/1 var(--font-cond); }
@media (max-width: 359px) { .ln-cols { grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; } }
.ln-cols b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 600 12px/1.2 var(--font-display); color: var(--fg-2); }
.ln-notme .linkish { display: inline; padding: 0; font: inherit; font-weight: 700; color: var(--brand-ink); text-decoration: underline; }
.tp-vs { justify-self: center; margin: -4px 0; font: 900 18px/1 var(--font-cond); color: var(--fg-3); }

/* seletor de pessoas */
.picker { position: relative; display: grid; gap: 6px; }
.picker-label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.picker-label:empty { display: none; }
.picker-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 5px; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); }
.picker-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.picker-in { flex: 1; min-width: 120px; height: 34px; padding: 0 8px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 15px; outline: none; }
.pchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-strong); font: 600 13px/1 var(--font-display); }
.pchip.user { padding-left: 5px; }
.pchip button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--fg-2); }
.pchip button .ic { font-size: 13px; }
.picker-sug {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: 4px;
  display: grid; padding: 6px; border-radius: 14px; border: 1px solid var(--hair-strong);
  background: var(--surface); box-shadow: var(--float); max-height: 260px; overflow-y: auto;
}
.picker-sug button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; font: 600 14px/1.2 var(--font-display); }
.picker-sug button:hover, .picker-sug button:focus-visible { background: var(--fill); }
.picker-sug button > span:last-child { display: grid; gap: 1px; }
.picker-sug small { font: 400 11.5px/1.2 var(--font); color: var(--fg-2); }

/* placar no lançamento */
#lnScore { display: grid; gap: 8px; }
.setrow { display: grid; grid-template-columns: 52px 1fr auto 1fr 36px; align-items: center; gap: 8px; }
.setrow > span { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.setrow input { width: 100%; height: 46px; border: 0; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); color: var(--fg); text-align: center; font: 800 22px/1 var(--font-cond); -moz-appearance: textfield; }
.setrow input::-webkit-outer-spin-button, .setrow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.setrow input::placeholder { font: 500 12px/1 var(--font); color: var(--fg-3); }
.setrow input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand); }
.setrow em { font-style: normal; color: var(--fg-3); font: 900 16px/1 var(--font-cond); }
.setrow:not(:has(.icon-btn))::after { content: ""; }
/* Lançar detalhado: quem fez os pontos do time */
.rc-pts { display: grid; gap: 8px; }
.rc-pts-t { display: grid; gap: 2px; padding: 2px 2px 0; }
.rc-pts-t b { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1.2 var(--font-display); }
.rc-pts-t .ic { width: 15px; height: 15px; color: var(--brand-ink); }
.rc-pts-t small { color: var(--fg-2); font-size: 11.5px; line-height: 1.3; }
.rcp { display: grid; gap: 0; padding: 4px 8px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.rcp-head, .rcp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.rcp-head { padding: 6px 2px 4px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3, var(--fg-2)); }
.rcp-head span:not(:first-child) { width: 92px; text-align: center; }
.rcp-row { padding: 6px 2px; border-top: 1px solid var(--hair); }
.rcp-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rcp-who .av { width: 26px; height: 26px; font-size: 10px; flex: none; box-shadow: 0 0 0 2px var(--c-verde); }
.rcp-row.t1 .rcp-who .av { box-shadow: 0 0 0 2px var(--c-laranja); }
.rcp-who b { font: 700 13.5px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stp-c.stp-sm { width: 92px; justify-content: space-between; }
.stp-c.stp-sm .stp-btn { width: 30px; height: 34px; font-size: 19px; }
.stp-c.stp-sm > b { min-width: 1.6em; font-size: 16px; }
@media (max-width: 359px) { .rcp-head span:not(:first-child), .stp-c.stp-sm { width: 80px; } .stp-c.stp-sm .stp-btn { width: 26px; } }
/* Por jogador: foto antes do nome */
.pl-name { gap: 8px; }
.pl-name .av { width: 22px; height: 22px; font-size: 9px; flex: none; }
/* capa do grupo e do perfil: desfocada e suave atrás do cabeçalho, sumindo para baixo */
/* isolation + translateZ: no Safari o desfoque da capa (::before com filter) vazava para fora do canto arredondado apesar do overflow: hidden */
.ghead, .me-card { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); }
/* o recorte é no próprio ::before (clip-path corta depois do desfoque): o Safari ignorava o overflow do card e a capa vazava por cima, reta */
.ghead.has-cover::before, .me-card.has-cover::before { content: ""; position: absolute; inset: -24px; -webkit-clip-path: inset(24px round 20px); clip-path: inset(24px round 20px); background: var(--cover) center / cover no-repeat; filter: blur(16px) saturate(0.85); opacity: calc(0.3 * var(--court-mix, 1)); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%); }
.ghead > *, .me-card > * { position: relative; }
.cover-btn { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--fg-2); font: 600 11px/1 var(--font-display); cursor: pointer; }
.cover-btn .ic { width: 13px; height: 13px; }
.me-card .cover-btn { top: 8px; }
.video-note { display: flex; gap: 8px; align-items: flex-start; text-align: left; }
.video-note .ic { flex: none; width: 16px; height: 16px; color: var(--brand-ink); margin-top: 1px; }
.video-note a { color: var(--brand-ink); font-weight: 700; }
/* replay: a quadra do esporte ao fundo, bem discreta */
.replay-stage::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: var(--court, none) center / cover no-repeat; opacity: 0.22; filter: saturate(0.6); pointer-events: none; }
.replay-stage > * { position: relative; }
.add-set { justify-self: start; }
.group > .seg + .seg { margin-top: 2px; }
.seg span .ic { font-size: 14px; margin-right: 4px; vertical-align: -2px; }

/* salvar partida */
.save-sum { display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--hair); background: radial-gradient(120% 120% at 100% 0%, var(--ambient), transparent 60%), var(--surface-2); }
.save-sum-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.save-sum-top .ic { font-size: 18px; color: var(--brand-ink); }
.save-sum-top b { color: var(--fg); font: 700 15px/1.2 var(--font-display); }
.save-sum-top span { margin-left: auto; }
.save-sum .ascore { background: var(--surface); }
.save-sum { position: relative; }
.save-sum::before { /* foto da quadra (dia ou noite) atrás do resumo, sumindo para baixo */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--court, none) center / cover no-repeat;
  opacity: calc(0.22 * var(--court-mix, 1)); filter: saturate(0.6);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.save-sum > * { position: relative; }
#liveCard:empty, #draftCard:empty { display: none; }
.feed-note { display: block; margin: -10px 2px 0; }
.feed-note .ic { vertical-align: -2px; margin-right: 4px; }
.kpi b, .notif-card b, .ascore-sets { word-spacing: 0.32em; }
@media (max-width: 380px) { .prow { flex-wrap: wrap; } .prow-act { flex-basis: 100%; padding-left: 52px; } .prow-act .btn { flex: 1; } }

/* =========================================================
   v9 · painel de comandos (juiz ou quem está de fora)
   ========================================================= */
/* menu do botão Lançar */
.dock { position: relative; }
.lance-menu {
  position: absolute; right: 12px; bottom: calc(100% - 6px); z-index: 30;
  width: min(330px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 6px;
  border: 1px solid var(--hair-strong); border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--hi), var(--float);
  animation: pop-up 0.16s ease-out;
}
@keyframes pop-up { from { opacity: 0; transform: translateY(6px); } }
.lance-menu button { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; font: inherit; }
.lance-menu button:hover, .lance-menu button:focus-visible { background: var(--fill); }
.lance-menu button > span:last-child { display: grid; gap: 2px; }
.lance-menu b { font: 700 15px/1.2 var(--font-display); }
.lance-menu small { color: var(--fg-2); font-size: 12px; line-height: 1.3; }
.lm-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-size: 20px; }
.lance-menu button:last-child .lm-ic { background: var(--fill-strong); color: var(--fg); }
.dock-btn[aria-pressed="true"] { background: var(--fill); }

/* painel */
body.panel-on:not(.tv) .dock { display: none; }
body.tv .cpanel { display: none; }
.cpanel {
  position: relative; min-height: 0; max-height: 60vh; max-height: 60dvh;
  display: flex; flex-direction: column;
  margin: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--hair-strong); border-radius: 22px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface)); box-shadow: var(--hi), var(--float);
  overflow: hidden;
}
.cp-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--hair); }
.cp-title { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.cp-title svg { font-size: 17px; color: var(--brand-ink); }
.cp-title b { font: 700 14px/1 var(--font-display); }
.cp-last { flex: 1; min-width: 0; font: 500 12px/1.2 var(--font-display); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.cp-last.ok { color: var(--fg); }
.cp-last.miss { color: var(--danger); }
.cp-tools { display: flex; flex: none; }
.cp-tools .icon-btn { width: 38px; height: 38px; font-size: 19px; }
.cp-body { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 10px; }
.cp-team {
  display: grid; gap: 7px; padding: 10px 10px 12px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--tc) 28%, var(--hair));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tc) 12%, transparent), transparent 60%), var(--surface-2);
}
.cp-team-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-team-head i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.cp-team-head b { font: 800 16px/1.1 var(--font-display); white-space: nowrap; }
.cp-team-head small { min-width: 0; color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-serve { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 20%, transparent); font: 600 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.cp-serve svg { font-size: 12px; color: var(--tc); }
.cp-point {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px;
  border: 0; border-radius: 14px; background: var(--tc); color: #0B0D08;
  font: 800 17px/1 var(--font-display); letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px -10px var(--tc);
  touch-action: manipulation; transition: transform 0.1s, filter 0.15s;
}
.cp-point svg { font-size: 20px; stroke-width: 2.6; }
.cp-point:active, .cp-btn:active, .cp-who-btn:active { transform: scale(0.97); }
.cp-label { margin-top: 2px; font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.cp-label em { font-style: normal; color: var(--fg-3); }
.cp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cp-btn {
  min-width: 0; height: 42px; padding: 0 4px; border: 1px solid var(--hair-strong); border-radius: 12px;
  background: var(--surface); color: var(--fg); font: 650 13px/1.1 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; touch-action: manipulation; transition: transform 0.1s, background 0.15s;
}
.cp-btn:hover { background: color-mix(in srgb, var(--tc) 10%, var(--surface)); }
.cp-btn.err { border-style: dashed; color: var(--fg-2); }
.cp-btn.err:hover { background: color-mix(in srgb, var(--oc) 10%, var(--surface)); color: var(--fg); }

/* quem fez / quem errou */
.cp-who { position: absolute; inset: 0; z-index: 5; display: grid; align-items: end; padding: 10px; background: rgba(3, 4, 3, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cp-who-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--hair-strong); background: var(--surface); box-shadow: var(--float); animation: pop-up 0.16s ease-out; }
.cp-who-q { margin: 0; font-size: 15px; color: var(--fg-2); }
.cp-who-q b { color: var(--fg); font-family: var(--font-display); }
.cp-who-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cp-who-btn {
  height: 56px; padding: 0 10px; border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--tc) 14%, var(--surface-2)); color: var(--fg); font: 800 16px/1.1 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; touch-action: manipulation;
}
.cp-who-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-who-foot .btn { height: 42px; }

/* placar compacto com o painel aberto (celular em pé) */
@media (max-width: 600px) {
  body.panel-on .stage { gap: 6px; padding-top: 2px; }
  body.panel-on .chips { min-height: 0; }
  body.panel-on .team { padding-block: 6px; row-gap: 4px; }
  body.panel-on .team .game { --game-cell: clamp(78px, 25vw, 120px); height: calc(var(--game-cell) * 0.7); min-height: 52px; }
  body.panel-on .team-name { font-size: clamp(19px, 5.4vw, 24px); }
  body.panel-on .team-players { display: none; }
  body.panel-on .team .sets > span { --set-cell: 26px; }
}
/* lado a lado: celular deitado e telas largas */
@media (max-height: 520px) and (min-width: 601px), (min-width: 1000px) {
  body.panel-on .view-play { grid-template-columns: minmax(0, 1fr) minmax(0, var(--cp-w, 46%)); grid-template-rows: auto minmax(0, 1fr); }
  body.panel-on .view-play > .topbar { grid-column: 1 / -1; }
  body.panel-on .view-play > .stage { grid-column: 1; grid-row: 2; padding-bottom: 10px; }
  body.panel-on .view-play > .cpanel { grid-column: 2; grid-row: 2; max-height: none; margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)) 0; }
}
@media (min-width: 1000px) { body.panel-on { --cp-w: 460px; } body.panel-on .cp-body { gap: 12px; } }
.cp-btn { white-space: normal; line-height: 1.05; text-overflow: clip; }
@media (max-width: 600px) {
  .cpanel { max-height: 70vh; max-height: 70dvh; margin-inline: 8px; }
  .cp-body { gap: 8px; padding: 8px; }
  .cp-team { gap: 6px; padding: 8px 8px 10px; }
  .cp-point { height: 46px; font-size: 16px; }
  .cp-btn { height: 40px; font-size: 12.5px; }
  .cp-grid { gap: 5px; }
  body.panel-on .board { gap: 6px; }
  body.panel-on .team { padding-block: 4px; }
  body.panel-on .team .game { --game-cell: clamp(70px, 22vw, 104px); height: calc(var(--game-cell) * 0.62); min-height: 46px; }
  body.panel-on .team { row-gap: 2px; }
  body.panel-on .team .sets > span { --set-cell: 22px; }
  body.panel-on .team-name { font-size: clamp(18px, 5vw, 22px); }
}

/* =========================================================
   v10 · IDs, entrar numa partida pelo código, convite e selo de partida manual
   ========================================================= */
.act-badges { flex: none; align-self: flex-start; display: grid; justify-items: end; gap: 4px; }
.act-badges .tbadge { align-self: auto; }
.mtag {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 5px; border-radius: 6px;
  border: 1px dashed var(--hair-strong); color: var(--fg-2);
  font: 600 9.5px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.mtag .ic { font-size: 11px; }
.rec-l .mtag { margin-left: 2px; }
.idchip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px;
  border: 1px solid var(--hair-strong); background: var(--fill); color: var(--fg);
  font: 600 11px/1 var(--font-mono); letter-spacing: 0.06em; cursor: pointer;
}
.idchip .ic { font-size: 12px; color: var(--fg-2); }
.me-meta .idchip { margin-right: 2px; }

.entrar-hero { gap: 10px; }
.entrar-hero > .choose-ic { justify-self: start; }
.entrar-hero h2 { margin: 2px 0 0; font: 700 21px/1.2 var(--font-display); letter-spacing: -0.02em; }
.entrar-hero p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.entrar-hero p b { color: var(--fg); }
.entrar-form { display: flex; gap: 8px; width: 100%; }
.entrar-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); color: var(--fg); font: 700 20px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.entrar-form input::placeholder { color: var(--fg-3); }
.entrar-form input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.entrar-form .btn { height: 48px; padding: 0 18px; }
.demo-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.demo-codes > span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-right: 2px; }
.demo-codes .pill { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.claim-list { display: grid; gap: 8px; }
.claim-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--hair-strong); background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.claim-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.claim-opt i { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--hair-strong); }
.claim-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.claim-opt.on i { box-shadow: inset 0 0 0 6px var(--brand); }
.claim-opt span { display: grid; gap: 2px; }
.claim-opt b { font: 700 16px/1.2 var(--font-display); }
.claim-opt small { color: var(--fg-2); font-size: 12px; }
.claim-opt::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tc); }
.btn-primary:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.claim-st { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--hair-strong); background: var(--surface-2); }
.claim-st > .ic { font-size: 22px; color: var(--fg-2); }
.claim-st.ok { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-soft); }
.claim-st.ok > .ic { color: var(--brand-ink); }
.claim-st > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.claim-st b { font: 700 14px/1.25 var(--font-display); }
.claim-st small { color: var(--fg-2); font-size: 12.5px; line-height: 1.35; }
.invite .hint { margin: -4px 0 0; }
.invite-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--hair); }
.invite-code > span { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin-right: auto; }
.invite-code .idchip { height: 30px; font-size: 13px; }
.invite:not(:has(.plist)) .invite-code { padding-top: 0; border-top: 0; }
.entrar-hero { grid-template-columns: minmax(0, 1fr); }
.entrar-hero > * { min-width: 0; }
.entrar-form input { width: 100%; }

/* =========================================================
   v11 · ponto a ponto (Pro) refeito
   ========================================================= */
.tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.mom-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .mom-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mt { position: relative; display: grid; gap: 3px; padding: 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); }
.mt .tdot { position: absolute; top: 12px; right: 12px; }
.mt b { font: 900 28px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.mt span { color: var(--fg-2); font-size: 12px; line-height: 1.25; }
.mom-keys { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); }
.mk-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px; align-items: center; gap: 8px; font-size: 13px; }
.mk-row > span:first-child { color: var(--fg-2); }
.mk-team { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.mk-team b { font: 800 17px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.mom-filters { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px; scrollbar-width: none; }
.mom-filters::-webkit-scrollbar { display: none; }
.mom-filters .pill { flex: none; }
.mom-scroll { border: 1px solid var(--hair); }
.mom .setl { stroke: var(--hair-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.mom text { font: 600 10px var(--font-mono); letter-spacing: 0.06em; stroke: none; }
.mom .setlbl { fill: var(--fg-3); }
.mom .sidelbl { font-size: 10px; text-transform: uppercase; }
.mom-line { stroke: var(--fg); stroke-width: 1.4; opacity: 0.75; }
.mom .mk { fill: var(--tc); stroke: var(--surface-2); stroke-width: 1; }
.mom path.mk { fill: none; stroke: var(--tc); stroke-width: 2; }
.mom .kring { fill: none; stroke: var(--brand); stroke-width: 1.6; opacity: 0.85; }
.mom .guide { stroke: var(--fg); stroke-width: 1; opacity: 0; }
.mom g.on .guide { opacity: 0.25; }
.mom g.on .mk { stroke: var(--fg); stroke-width: 2.4; }
.mom g.on circle.mk { r: 6px; }
.mom g.dim { opacity: 0.15; }
i.lg.ring { width: 11px; height: 11px; background: none; box-shadow: inset 0 0 0 1.6px var(--brand); }
.pt-info { display: flex; align-items: flex-start; gap: 8px; }
.pt-info-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pt-key { color: var(--brand-ink); font-weight: 600; }
.pt-nav { display: flex; gap: 2px; flex: none; }
.pt-nav .icon-btn { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; background: var(--surface); }
.pt-list { max-height: 42vh; max-height: 42dvh; border-top: 0; }
.pt-head { position: sticky; top: 0; z-index: 1; padding: 8px 2px 6px; background: var(--surface); border-bottom: 1px solid var(--hair); font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.pt-row { grid-template-columns: 26px 10px minmax(0, 1fr) auto auto; }
.kbadge { padding: 2px 5px; border-radius: 5px; background: var(--fill); color: var(--fg-2); font: 700 9.5px/1.2 var(--font-mono); letter-spacing: 0.04em; }
.kbadge.won { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
/* tabela por jogador: nome numa linha só, primeira coluna fixa ao rolar */
.players-table td:first-child { white-space: nowrap; position: sticky; left: 0; z-index: 1; background: linear-gradient(90deg, var(--surface) 85%, transparent); padding-right: 14px; }
.players-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.pl-name { display: inline-flex; align-items: center; gap: 0; max-width: 132px; vertical-align: middle; }
.pl-name > span { overflow: hidden; text-overflow: ellipsis; }
.players-table td:first-child .badge { margin-left: 6px; }
.players-table td:first-child i { flex: none; }

/* =========================================================
   v12 · privacidade, conta e boas-vindas
   ========================================================= */
.me-privrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.privchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--fill); color: var(--fg-2); font: 600 11px/1 var(--font-display); }
.privchip .ic { font-size: 12px; }
.privchip.p-aberto .ic { color: var(--brand-ink); }
.privchip.p-privado { color: var(--fg); }
.linkish.small { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.linkish.center { justify-self: center; text-align: center; }
.privtag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--fill); color: var(--fg-2); font-size: 13px; flex: none; }
.preview-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--hair-strong); background: var(--surface-2); font-size: 13px; color: var(--fg-2); }
.preview-note > .ic { font-size: 17px; color: var(--brand-ink); flex: none; }
.preview-note span { flex: 1; }
.preview-note b { color: var(--fg); }
.lock-state > .ic { color: var(--fg-2) !important; }
.perfil-safety { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12px; }
.perfil-safety .linkish { font-size: 12px; font-weight: 600; color: var(--fg-2); text-decoration: none; }
.medal-row { display: flex; flex-wrap: wrap; gap: 10px; }
.medal-row .medal { --s: 46px; }
.priv-hint { color: var(--fg-2); font-size: 12px; line-height: 1.4; }
.seg span .ic { font-size: 14px; }
.row-ic.danger-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.hint .ic { vertical-align: -2px; }

/* boas-vindas */
body.welcome-on { overflow: hidden; }
.welcome {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(175, 251, 72, 0.22), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(26, 140, 255, 0.14), transparent 60%),
    #050605;
  color: #F4F5F4;
  animation: fade 0.25s ease-out;
}
.welcome::before { /* linhas de quadra ao fundo */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%);
}
.wl-inner { position: relative; max-width: 460px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; }
.wl-logo { width: 150px; height: auto; color: #AFFB48; }
.wl-title { margin: 6px 0 0; font: 900 clamp(38px, 11vw, 52px)/0.95 var(--font-cond); text-transform: uppercase; letter-spacing: 0; }
.wl-sub { margin: -6px 0 0; color: rgba(244, 245, 244, 0.7); font-size: 15px; line-height: 1.45; }
.wl-live { display: grid; gap: 14px; padding: 18px; border-radius: 22px; border: 1px solid rgba(175, 251, 72, 0.22); background: linear-gradient(180deg, rgba(20, 24, 16, 0.85), rgba(10, 12, 8, 0.85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(120, 190, 20, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wl-badge { display: inline-flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #DDF9A0; }
.wl-badge i { width: 8px; height: 8px; border-radius: 50%; background: #AFFB48; box-shadow: 0 0 0 4px rgba(175, 251, 72, 0.16), 0 0 12px #AFFB48; animation: blink 1.4s ease-in-out infinite; }
.wl-big { display: grid; gap: 2px; }
.wl-big b { font: 900 clamp(56px, 18vw, 76px)/0.9 var(--font-cond); font-variant-numeric: tabular-nums; color: #FFFFFF; }
.wl-big span { color: rgba(244, 245, 244, 0.72); font-size: 14px; }
.wl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px; }
.wl-row div { display: grid; gap: 3px; padding: 0 8px; border-left: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; }
.wl-row div:first-child { padding-left: 0; border-left: 0; }
.wl-row b { font: 800 22px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.wl-row span { color: rgba(244, 245, 244, 0.6); font-size: 11px; line-height: 1.25; }
.wl-sports { display: grid; gap: 7px; }
.wl-sp { display: grid; grid-template-columns: 118px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(244, 245, 244, 0.8); }
.wl-sp span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sp span .ic { font-size: 15px; color: #AFFB48; flex: none; }
.wl-sp u { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; text-decoration: none; }
.wl-sp em { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6FBF1A, #AFFB48); }
.wl-sp b { text-align: right; font: 800 14px/1 var(--font-cond); font-variant-numeric: tabular-nums; color: #FFFFFF; }
.wl-actions, .wl-form { display: grid; gap: 10px; }
.welcome .btn-primary { background: #AFFB48; color: #101500; }
.welcome .btn-ghost { background: rgba(255, 255, 255, 0.06); color: #F4F5F4; border: 1px solid rgba(255, 255, 255, 0.14); }
.welcome .linkish { color: rgba(244, 245, 244, 0.75); text-decoration-color: rgba(255, 255, 255, 0.25); }
.wl-prov { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wl-form { padding: 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(14, 16, 17, 0.9); }
.wl-form-title { font: 700 18px/1.2 var(--font-display); }
.wl-form .wl-note { margin: 0; }
.wl-code { font: 700 28px/1.2 var(--font-num, var(--font-display)); letter-spacing: 0.3em; text-align: center; }
.wl-form .field { border-top: 0; padding: 4px 0; }
.wl-form .field > span { color: rgba(244, 245, 244, 0.6); }
.wl-form input { background: rgba(255, 255, 255, 0.06); color: #F4F5F4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.wl-form .cpick span { background: transparent; color: #F4F5F4; border-color: rgba(255, 255, 255, 0.18); }
.wl-form .cpick input:checked + span { background: #AFFB48; color: #101500; border-color: #AFFB48; }
.wl-legal { margin: 0; text-align: center; color: rgba(244, 245, 244, 0.4); font-size: 11px; }
@media (min-width: 900px) { .wl-inner { padding-top: 48px; } }
.empty-state .btn svg, .empty-state .btn .ic { font-size: 16px; width: 1em; height: 1em; color: inherit; }
.empty-state .actions { justify-content: center; margin-top: 4px; }
.empty-state.first-match { padding: 26px 18px; }

/* ---------- v13 · vídeo animado (replay ponto a ponto) ---------- */
.share-mode { grid-template-columns: 1fr 1fr; }
.share-mode span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.share-mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.share-mode .pro-badge { margin-left: 2px; }
.share-preview { position: relative; display: flex; justify-content: center; }
#motionCanvas, #replayCanvas { display: block; max-width: 100%; width: auto; height: auto; }
.vid-opts { display: grid; gap: 14px; min-width: 0; }
.vid-opts > *, .vo-bgs, .vid-actions { min-width: 0; }
.vo-block { display: grid; gap: 9px; min-width: 0; }
.vo-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vo-chips .pill { position: relative; padding: 8px 12px 8px 30px; background: var(--fill); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--hair); }
.vo-chips .pill::before { content: ''; position: absolute; left: 11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.6; }
.vo-chips .pill.on { background: var(--brand-soft); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent); }
.vo-chips .pill.on::before { opacity: 1; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6.2 2 2 4-4.4' fill='none' stroke='%23101500' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: none; }
.vo-chips .pill:disabled { opacity: 0.4; }
#vidPlaysSeg { grid-template-columns: 1fr 1fr; }
#vidOutSeg { grid-template-columns: 1fr 1fr; }
#vidOutSeg input:disabled + span { opacity: 0.4; }
.vo-bgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vo-bg { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--fg-2); font: 600 11.5px/1.15 var(--font-display); text-align: center; }
.vo-bg i { display: grid; place-items: center; width: 100%; aspect-ratio: 1.25; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair-strong); color: rgba(255, 255, 255, 0.85); transition: box-shadow 0.15s; }
.vo-bg i .ic { font-size: 20px; }
.vo-bg.bg-quadra i { background-color: #08130E; background-image: linear-gradient(90deg, transparent 23%, rgba(255, 255, 255, 0.16) 23%, rgba(255, 255, 255, 0.16) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.16) 75%, rgba(255, 255, 255, 0.16) 77%, transparent 77%), linear-gradient(transparent 48%, rgba(175, 251, 72, 0.45) 48%, rgba(175, 251, 72, 0.45) 52%, transparent 52%); }
.vo-bg.bg-escuro i { background: radial-gradient(90% 80% at 50% 0%, #26301C, #0B0D0C 70%); }
.vo-bg.bg-midia i { background: linear-gradient(140deg, #4A5A66, #1E2A22 60%, #3B2A1C); }
.vo-bg.bg-transparente i { background-color: #2A3320; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.vo-bg span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vo-bg.on { color: var(--fg); }
.vo-bg.on i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.vo-media { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border-radius: 14px; background: var(--fill); }
.vo-media .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.vo-op { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.vo-op input { flex: 1; min-width: 0; accent-color: var(--brand); }
.vo-op b { min-width: 36px; text-align: right; font: 800 15px/1 var(--font-cond); color: var(--fg); font-variant-numeric: tabular-nums; }
#vidSpeedSeg span { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.vid-actions { gap: 10px; }
.vid-make { position: relative; overflow: hidden; isolation: isolate; }
.vid-make .vid-bar { position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; background: rgba(16, 21, 0, 0.18); transition: width 0.2s linear; }
.vid-make.busy { cursor: progress; }
.vid-make:disabled { opacity: 1; }
.vid-ready { display: grid; gap: 8px; }
#btnVidPost { height: 44px; justify-content: center; }
#btnVidPost svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#btnVidPost.on { color: var(--brand-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent); }
/* replay na timeline: o gráfico vira um botão com "Replay" */
.ph-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ph-btns .ic { stroke-width: 1.9; }
.replay-stage canvas { border-radius: 14px; max-height: 56vh; max-height: 56dvh; }
.rp-restart { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #AFFB48; color: #101500; opacity: 0; pointer-events: none; transform: scale(0.9); transition: opacity 0.2s, transform 0.2s; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6); }
.rp-restart.show { opacity: 1; pointer-events: auto; transform: none; }
.rp-restart svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#replayActions:empty { display: none; }
@media (max-width: 380px) { .vo-bgs { gap: 6px; } .vo-bg span { font-size: 10px; } .vo-chips .pill { padding: 7px 10px 7px 27px; font-size: 12.5px; } .vo-chips .pill::before { left: 9px; } }

/* ---------- v14 · acabamento: placar compacto com o painel, sugestões, ícones ---------- */
/* placar com o painel aberto (celular em pé): uma linha por time, nome à esquerda e games ao lado do ponto */
@media (max-width: 600px) {
  /* o placar fica com a altura que precisa e o painel ocupa o resto (rola por dentro): nada fica escondido atrás dele */
  body.panel-on .view-play { grid-template-rows: auto auto minmax(0, 1fr); }
  body.panel-on .view-play > .cpanel { max-height: none; align-self: stretch; }
  body.panel-on .stage { gap: 8px; padding-top: 10px; }
  body.panel-on .board { gap: 8px; }
  body.panel-on .team {
    flex: none; min-height: 68px; padding: 8px 10px 8px 20px;
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id sets game";
    column-gap: 10px; row-gap: 0; align-items: center; align-content: center;
  }
  body.panel-on .team-id, body.panel-on .team .sets { align-self: center; }
  body.panel-on .team .sets { gap: 2px; }
  body.panel-on .team .sets > span, body.panel-on .sets > span:first-of-type { --set-cell: 30px; width: var(--set-cell); min-width: 0; margin: 0; text-align: center; font-size: 24px; line-height: 1; }
  body.panel-on .team .game { --game-cell: clamp(76px, 22vw, 100px); height: 52px; min-height: 0; font-size: 40px; border-radius: 14px; }
  body.panel-on .team-name { font-size: clamp(19px, 5.4vw, 23px); }
  body.panel-on .name-text { padding-block: 0.02em 0.08em; }
}
@media (max-width: 380px) {
  body.panel-on .team { min-height: 60px; padding-left: 18px; column-gap: 8px; }
  body.panel-on .team .game { --game-cell: 70px; height: 46px; font-size: 34px; }
  body.panel-on .team .sets > span, body.panel-on .sets > span:first-of-type { --set-cell: 24px; font-size: 21px; }
}
/* sugestões: o botão cabe no cartão (no iPhone a fonte é um pouco mais larga) */
.sug { width: 164px; grid-template-columns: minmax(0, 1fr); padding: 16px 12px 12px; }
.sug > * { min-width: 0; max-width: 100%; }
.sug b, .sug small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.sug small { min-height: 0; }
.sug .btn { min-width: 0; padding: 0 8px; gap: 5px; justify-content: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; }
.sug .btn .ic { flex: none; }
/* timeline: a barra Seguindo/Geral gruda no topo com uma faixa da cor do fundo; o que rola some por baixo dela */
.feed-bar {
  position: sticky; top: 0; z-index: 5; margin: -8px -16px 0; padding: 8px 16px 14px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent);
}
/* menu de baixo: o conteúdo esmaece antes de passar por trás dele */
.tab-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 19; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 88%, transparent) 62%, var(--bg)); }
body[data-view="jogar"] .tab-scrim, body.tv .tab-scrim { display: none; }
/* parceiros com a cor da pessoa, como nos outros avatares */
.mini-av[style*="--av"] { background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--av) 70%, #FFFFFF), var(--av) 70%); color: #101500; }
/* lances: o resultado (game, quebra, set) vira uma etiqueta no fim da frase, sem abrir uma coluna à direita */
.log .what { align-items: baseline; }
.log .what i { align-self: center; }
.log .what > span { min-width: 0; }
.log .what em { display: inline-block; margin-left: 2px; padding: 2px 7px; border-radius: 6px; background: var(--fill); font-size: 11.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; vertical-align: 1px; }
/* gráfico de momento: o SVG é desenhado em 600 de largura e encolhe na tela; o texto acompanha para continuar legível */
.momentum text { font: 700 17px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 700px) { .momentum text { font-size: 13px; } }
/* logo da barra fixa um pouco menor (a marca continua grande na tela de entrada) */
.hdr .brand-logo { height: 22px; }
@media (min-width: 900px) { .hdr .brand-logo { height: 24px; } }
/* link das estatísticas: na tela Compartilhar e na partida recebida por link */
.share-link { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--fill); }
.share-link .invite-code { margin: 0; padding: 0; border: 0; }
.share-link small { color: var(--fg-2); font-size: 12px; line-height: 1.35; }
.link-head { display: grid; gap: 14px; }
.link-from { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.link-from > .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.link-from b { display: block; font: 700 16px/1.25 var(--font-display); }
.link-from small { color: var(--fg-2); font-size: 12.5px; }
.link-save { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.link-who { display: flex; flex-wrap: wrap; gap: 7px; }
.link-who .tdot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tc); vertical-align: 1px; }
.link-save input[type="text"] { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); color: var(--fg); font: 500 15px var(--font-display); box-shadow: inset 0 0 0 1px var(--hair); }
.link-save .hint { margin: 0; text-align: center; }
/* placar com vários sets: cabe com fonte menor; com muitos, setinha para as parciais */
.kpi-score { min-width: 0; }
.kpi-sets { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kpi-sets b { display: inline-flex; gap: 0.32em; white-space: nowrap; overflow: hidden; }
.kpi-sets b i { font-style: normal; }
.kpis .kpi-sets.fit-sm b { font-size: 21px; }
.kpis .kpi-sets.fit-xs b { font-size: 17px; }
.kpis.big .kpi-sets.fit-sm b { font-size: 23px; }
.kpis.big .kpi-sets.fit-xs b { font-size: 18px; }
.kpi-sets .kpi-more { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--fill); color: var(--fg-2); stroke-width: 2.4; transform: rotate(90deg); }
.kpi-sets:hover .kpi-more { color: var(--fg); }
.set-list { display: grid; gap: 2px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; gap: 8px; padding: 10px 2px; border-top: 1px solid var(--hair); }
.set-row:first-child { border-top: 0; }
.set-row > span { color: var(--fg-2); font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.set-row b { text-align: center; font: 800 26px/1 var(--font-cond); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.set-row b.w { color: var(--fg); }
.set-row.head b { font: 700 12px/1.2 var(--font-display); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* perfil: ferramentas pequenas no canto do painel (período, % ou pontos) */
.ph-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.mini-sel { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
.ph-tools .mini-sel { margin-left: 0; }
.mini-sel select { appearance: none; -webkit-appearance: none; height: 28px; padding: 0 24px 0 10px; border: 0; border-radius: 9px; background: var(--fill); color: var(--fg); font: 600 12px/1 var(--font-display); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.mini-sel .ic { position: absolute; right: 7px; pointer-events: none; font-size: 11px; color: var(--fg-2); transform: rotate(90deg); stroke-width: 2.4; }
.ph-tools .seg-sm span { padding: 4px 9px; font-size: 12px; }
.feed-more { display: grid; justify-items: center; padding: 4px 0 8px; }
.feed-more .btn .down { transform: rotate(90deg); }
.wl-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; margin: 0 0 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); color: rgba(244, 245, 244, 0.8); font-size: 13px; line-height: 1.45; }
.wl-note .ic { font-size: 18px; color: #AFFB48; margin-top: 1px; }
.wl-note b { color: #FFFFFF; }

/* ---------- v15 · gravação da partida em vídeo ---------- */
.cam-btn { position: relative; }
.cam-btn .cam-live { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 2px var(--surface); opacity: 0; }
.cam-btn.on { color: #FF3B30; }
.cam-btn.on .cam-live { opacity: 1; animation: recBlink 1.4s ease-in-out infinite; }
@keyframes recBlink { 50% { opacity: 0.25; } }
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.25); animation: recBlink 1.4s ease-in-out infinite; flex: none; }
/* miniatura no placar: canto inferior direito, acima do dock; tocando, vira só o selo REC */
.rec-dock { position: fixed; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 30; }
@media (max-width: 600px) { body.panel-on .rec-dock { display: none; } } /* com o painel aberto, o ícone vermelho da câmera no topo já mostra que está gravando */
body.panel-on .rec-dock { bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); }
.rec-mini { position: relative; display: block; width: 96px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1.5px rgba(255, 59, 48, 0.7), 0 12px 30px -8px rgba(0, 0, 0, 0.6); cursor: pointer; }
.rec-mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-pill { position: absolute; left: 6px; right: 6px; bottom: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #FFFFFF; font: 800 11px/1 var(--font-cond); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.rec-pill .rec-dot { width: 7px; height: 7px; box-shadow: none; }
.rec-dock.mini-off .rec-mini { width: auto; aspect-ratio: auto; background: rgba(0, 0, 0, 0.72); border-radius: 999px; }
.rec-dock.mini-off .rec-mini video { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rec-dock.mini-off .rec-pill { position: static; padding: 8px 12px; }
.rec-dock.mini-off .rec-gear { position: static; margin-top: 6px; margin-left: auto; }
@media (min-width: 900px) { .rec-mini { width: 132px; aspect-ratio: 16 / 10; } }
/* folha Gravar a partida */
.cam-opt { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--hair); border-radius: 18px; background: var(--surface-2); color: inherit; text-align: left; font: inherit; }
.cam-opt b { display: block; font: 700 15px/1.25 var(--font-display); }
.cam-opt small { color: var(--fg-2); font-size: 12.5px; line-height: 1.35; }
.cam-opt .choose-ic { width: 44px; height: 44px; }
.cam-now { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, #FF3B30 10%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #FF3B30 30%, transparent); }
.cam-now b { display: block; font: 700 15px/1.2 var(--font-display); }
.cam-now small { color: var(--fg-2); font-size: 12.5px; }
.btn-primary.danger-fill { background: #FF3B30; color: #FFFFFF; box-shadow: 0 12px 26px -12px rgba(255, 59, 48, 0.7); }
.cam-qr { display: grid; place-items: center; width: min(240px, 70vw); aspect-ratio: 1; margin: 0 auto; padding: 12px; border-radius: 18px; background: #FFFFFF; }
.cam-qr svg { width: 100%; height: 100%; display: block; }
.cam-qr .hint { color: #333; }
.cam-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--fg-2); font-size: 13.5px; line-height: 1.45; }
.cam-steps b { color: var(--fg); }
.hint.small { font-size: 12px; }
/* modo câmera: tela cheia com a imagem, selo de gravação e um botão grande */
body[data-view="camera"] .tabbar, body[data-view="camera"] .tab-scrim { display: none; }
.view-camera { position: relative; background: #000; color: #FFFFFF; overflow: hidden; }
.view-camera #camVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.7)); }
.cam-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
.cam-top .icon-btn { background: rgba(0, 0, 0, 0.45); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 700 13px/1 var(--font-display); }
.cam-status .rec-dot { background: rgba(255, 255, 255, 0.5); box-shadow: none; animation: none; }
.view-camera.recording .cam-status { background: rgba(255, 59, 48, 0.88); }
.view-camera.recording .cam-status .rec-dot { background: #FFFFFF; animation: recBlink 1.4s ease-in-out infinite; }
.cam-status span { font: 800 14px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.view-camera.recording { box-shadow: inset 0 0 0 3px rgba(255, 59, 48, 0.85); }
.cam-info { position: absolute; left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cam-card { display: grid; justify-items: center; gap: 3px; padding: 8px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; }
.cam-card b { font: 700 14px/1.2 var(--font-display); }
.cam-card small { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.75); font-size: 12px; }
.cam-card small .ic { font-size: 14px; }
.cam-match { display: inline-flex; align-items: center; gap: 8px; font: 800 16px/1.2 var(--font-display); }
.cam-match em { font-style: normal; color: rgba(255, 255, 255, 0.6); }
.cam-match .tdot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); display: inline-block; }
.cam-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 12px; padding: 0 20px calc(22px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.cam-hint { margin: 0; max-width: 360px; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; line-height: 1.45; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.cam-rec { width: 76px; height: 76px; display: grid; place-items: center; padding: 0; border: 4px solid #FFFFFF; border-radius: 50%; background: transparent; cursor: pointer; }
.cam-rec span { width: 58px; height: 58px; border-radius: 50%; background: #FF3B30; transition: all 0.2s; }
.view-camera.recording .cam-rec span { width: 30px; height: 30px; border-radius: 8px; }
.cam-rec:disabled { opacity: 0.4; }
.cam-meta { min-height: 1em; color: rgba(255, 255, 255, 0.7); font: 600 12px/1 var(--font-display); }
@media (orientation: landscape) and (max-height: 520px) { .cam-foot { left: auto; top: 0; width: 160px; align-content: center; padding: 0 16px; } .cam-hint { font-size: 12px; } .cam-info { top: auto; bottom: 12px; left: 12px; right: auto; } }
/* lances em vídeo */
.clips-body { gap: 12px; }
.clip-stage { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.clip-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.clip-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.clip-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.clip-cur { font: 700 13px/1 var(--font-display); color: var(--fg-2); }
.clip-nav { display: inline-flex; gap: 6px; }
.clip-sync { display: inline-flex; align-items: center; gap: 6px; }
.clip-sync b { min-width: 34px; text-align: center; font: 800 14px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.clip-list { display: grid; gap: 2px; max-height: 38vh; max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; }
.clip-row { display: grid; grid-template-columns: 26px 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; font: inherit; }
.clip-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.clip-row.on { background: var(--brand-soft); }
.clip-row.none { opacity: 0.45; }
.clip-what b { display: block; font: 800 14px/1.15 var(--font-cond); letter-spacing: 0.01em; }
.clip-what small { color: var(--fg-2); font-size: 12px; }
.clip-play { font-size: 16px; color: var(--brand-ink); }
.clip-no { color: var(--fg-3); font-size: 11px; }

/* ---------- v16 · controle pelo relógio ou fone ---------- */
.lance-menu b em { margin-left: 6px; padding: 2px 7px; border-radius: 6px; background: var(--fill); color: var(--fg-2); font: 700 10.5px/1.3 var(--font-display); font-style: normal; vertical-align: 1px; }
#lanceRemote.on b em { background: var(--brand); color: var(--on-brand); }
#btnType { position: relative; }
#btnType.remote-on::after { content: ''; position: absolute; top: 6px; right: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface), 0 0 10px var(--brand); }
/* gravação interrompida (o app saiu da tela): selo âmbar com "continuar" */
.rec-dock.paused .rec-mini { background: #3A2A00; box-shadow: 0 0 0 1.5px #FFB020, 0 12px 30px -8px rgba(0, 0, 0, 0.6); }
.rec-dock.paused .rec-dot { background: #FFB020; animation: none; box-shadow: none; }
.cam-btn.warn { color: #FFB020; }
.view-camera.interrupted .cam-status { background: rgba(255, 176, 32, 0.9); color: #1A1200; }
.view-camera.interrupted .cam-status .rec-dot { background: #1A1200; animation: none; }

/* ===== v17 · placar ↔ câmera conectados ===== */
.cam-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); margin: 4px 0 12px; }
.cam-link > span { flex: 1; min-width: 0; }
.cam-link b { display: block; font: 700 14.5px/1.25 var(--font-display); }
.cam-link small { color: var(--fg-2); font-size: 12.5px; }
.cam-link .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3, #8A8F98); }
.cam-link.ready .dot, .cam-link.stop .dot { background: #34C759; }
.cam-link.rec { background: color-mix(in srgb, #FF3B30 10%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #FF3B30 30%, transparent); }
.cam-link.rec .dot { background: #FF3B30; animation: recBlink 1.4s ease-in-out infinite; }
.cam-link.cut, .cam-link.lost { background: color-mix(in srgb, #FFB020 12%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFB020 35%, transparent); }
.cam-link.cut .dot, .cam-link.lost .dot { background: #FFB020; }
.cam-link.wait .dot { animation: recBlink 1.8s ease-in-out infinite; }
.cam-link .btn { flex: none; }
.cam-btn.cam2 { color: #FF3B30; }
.cam-btn.cam2 .cam-live { opacity: 1; background: #FF3B30; animation: recBlink 1.4s ease-in-out infinite; }
.cam-placar { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.8); font: 600 12px/1 var(--font-display); width: max-content; }
.cam-placar[hidden] { display: none; }
.cam-placar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.cam-placar.on { color: #FFFFFF; }
.cam-placar.on::before { background: #34C759; }

/* ===== v18 · grupos (turmas, clubes, times) ===== */
.gbadge { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--gc, #AFFB48) 18%, var(--surface-2)); color: var(--gc, #AFFB48); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc, #AFFB48) 35%, transparent); }
.gbadge .ic { width: 22px; height: 22px; font-size: 22px; }
.gbadge.lg { width: 48px; height: 48px; border-radius: 14px; }
.gbadge.xl { width: 64px; height: 64px; border-radius: 18px; }
.gbadge.xl .ic { width: 32px; height: 32px; font-size: 32px; }
.gbadge.plus { --gc: var(--fg-2); background: var(--fill, rgba(127,127,127,.12)); box-shadow: inset 0 0 0 1px var(--hair-strong); color: var(--fg); }
.gstrip { display: grid; gap: 10px; margin-bottom: 2px; }
.gstrip .linkish { font-size: 13px; color: var(--fg-2); }
.gstrip-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.gstrip-row::-webkit-scrollbar { display: none; }
.gpill { flex: none; display: flex; align-items: center; gap: 10px; max-width: 240px; padding: 10px 14px 10px 10px; border: 1px solid var(--hair); border-radius: 16px; background: linear-gradient(180deg, var(--surface-hi, var(--surface)), var(--surface)); color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.gpill > span:last-child { display: grid; gap: 2px; min-width: 0; }
.gpill b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpill small { color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpill.add { border-style: dashed; }
.gintro { display: grid; gap: 8px; }
.glist { display: grid; gap: 8px; }
.grow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; }
.grow-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.grow-txt b { font: 700 15px/1.25 var(--font-display); }
.grow-txt small { color: var(--fg-2); font-size: 12.5px; }
.grow .btn { flex: none; }
.ghead-top { display: flex; align-items: center; gap: 14px; }
.ghead-id { display: grid; gap: 6px; min-width: 0; }
.ghead-id h2 { margin: 0; font: 800 22px/1.15 var(--font-display); letter-spacing: -0.01em; }
.ghead .perfil-actions { flex-wrap: wrap; }
.ghead .perfil-actions .sec-meta { margin-left: auto; }
.ghead .me-counts div:last-child b { font-size: 16px; line-height: 1.5; }
.gdeleg { gap: 10px; }
.gdeleg-row { display: flex; align-items: flex-start; gap: 12px; }
.gdeleg-row > .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--fg-2); }
.gdeleg-row > span { flex: 1; display: grid; gap: 3px; }
.gdeleg-row b { font: 700 14.5px/1.3 var(--font-display); }
.gdeleg-row small { color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.gdeleg.on { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--brand, #AFFB48) 45%, transparent); }
.gdeleg.on .gdeleg-row > .ic { color: var(--brand-ink, var(--brand)); }
.gok { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-ink, var(--brand)); font: 700 12px/1 var(--font-display); }
.gok .ic { width: 14px; height: 14px; }
.gtabs { margin-top: 2px; }
.gper { display: flex; justify-content: flex-end; }
.ghi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ghi-c { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.ghi-c > .ic { width: 16px; height: 16px; color: var(--fg-3, var(--fg-2)); }
.ghi-c small { color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghi-c .av { grid-row: 2; }
.ghi-c b { grid-row: 2; font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghi-c > span:last-child { grid-column: 1 / -1; font: 800 20px/1.1 var(--font-cond); font-variant-numeric: tabular-nums; }
.gduo-p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gduo-p b { font: 700 14px/1.2 var(--font-display); }
.gduo-p em { color: var(--fg-3, var(--fg-2)); font-style: normal; margin: 0 4px; }
.grank { list-style: none; margin: 0; padding: 0; display: grid; }
.grank li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); }
.grank li:first-child { border-top: 0; }
.grank li.me .grank-n b { color: var(--brand-ink, var(--brand)); }
.grank .pos { flex: none; width: 22px; text-align: center; font: 800 15px/1 var(--font-cond); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.grank .pos.p1 { color: #F5C542; } .grank .pos.p2 { color: #C9D1DB; } .grank .pos.p3 { color: #D9925B; }
.grank-n { flex: 1; display: grid; gap: 1px; min-width: 0; }
.grank-n b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grank-n small, .grank-v small { color: var(--fg-2); font-size: 12px; }
.grank-v { display: grid; justify-items: end; gap: 1px; }
.grank-v b { font: 800 17px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.gm-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--fg); font: 600 13px/1 var(--font-display); cursor: pointer; }
.gm-chip .ic { width: 14px; height: 14px; }
.gm-chip .ic.ok, .gnew .ic.ok { color: var(--brand-ink, var(--brand)); width: 14px; height: 14px; vertical-align: -2px; }
.gm-chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.gnew { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--hair); }
.gnew[hidden] { display: none; }
.gnew-head { display: flex; align-items: center; gap: 10px; }
.gnew-head > span:not(.gbadge) { flex: 1; display: grid; gap: 1px; }
.gnew-head b { font: 700 14px/1.2 var(--font-display); }
.gnew-head small { color: var(--fg-2); font-size: 12.5px; }
.gnew-head .linkish { font-size: 12.5px; color: var(--fg-2); }
.gwall { display: grid; gap: 10px; }
.gmsg { display: flex; align-items: flex-start; gap: 10px; }
.gmsg .av { margin-top: 2px; }
.gmsg-b { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 4px 16px 16px 16px; background: var(--surface); box-shadow: var(--shadow); }
.gmsg.mine .gmsg-b { background: color-mix(in srgb, var(--brand, #AFFB48) 12%, var(--surface)); }
.gmsg-h { display: flex; align-items: baseline; gap: 8px; }
.gmsg-h b { font: 700 13px/1.2 var(--font-display); cursor: pointer; }
.gmsg-h small { color: var(--fg-2); font-size: 11.5px; }
.gmsg-b p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gwall-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.gwall-form textarea { flex: 1; min-height: 44px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--fg); font: 400 15px/1.35 var(--font-ui, inherit); resize: none; }
.gwall-form .btn { height: 44px; }
.gcolors { display: flex; flex-wrap: wrap; gap: 10px; }
.gcolor { position: relative; }
.gcolor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gcolor span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; }
.gcolor input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fg); }
.gcolor input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 4px; }
.ginvite { justify-items: center; text-align: center; padding: 28px 18px; }
.ginvite h2 { margin: 0; font: 800 22px/1.2 var(--font-display); }
.ginvite p { margin: 0; }
.ginvite .btn-primary { width: 100%; }
button.mtag.gtag { background: none; cursor: pointer; border-style: solid; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.sm.armed { color: var(--danger); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-btn.sm svg, .icon-btn.sm .ic { width: 16px; height: 16px; }
#gtabBody { display: grid; gap: 12px; }
.gm-chip.on .ic.ok { color: currentColor; opacity: 0.7; }
.wl-live[hidden] { display: none; }

/* ===== v19 · aviso de game/set/troca de lado: menor, com OK e barra de tempo; toque fora só fecha ===== */
.banner { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); transition: background 0.2s ease; }
.banner.show { pointer-events: auto; background: rgba(0, 0, 0, 0.28); cursor: pointer; }
.banner-card { position: relative; overflow: hidden; gap: 6px; max-width: min(460px, 100%); padding: 20px 26px 22px; border-radius: 24px; cursor: default; }
.banner-title { font-size: clamp(26px, 4.4vw, 54px); gap: 10px; }
.banner-sub { font-size: clamp(14px, 1.8vw, 20px); }
.banner-side { font-size: clamp(13px, 1.4vw, 17px); }
.banner-ok { margin-top: 8px; min-width: 120px; height: 44px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--fg); color: var(--bg); font: 700 16px/1 var(--font-display); cursor: pointer; }
.banner-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand); transform-origin: left center; }
@keyframes bannerBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .banner-bar { animation: none !important; opacity: 0.5; } }

/* ===== v20 · opções da gravação (formato, placar e lances no vídeo) ===== */
.vid-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.vid-opts .seg span { display: inline-flex; align-items: center; gap: 6px; }
.vid-opts .seg .ic { width: 16px; height: 16px; }
.vid-flag { position: relative; display: inline-flex; }
.vid-flag input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vid-flag span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-strong); font: 600 13px/1 var(--font-display); color: var(--fg-2); }
.vid-flag span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; box-sizing: border-box; }
.vid-flag input:checked + span { color: var(--fg); border-color: var(--fg); }
.vid-flag input:checked + span::before { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--surface); }
.vid-flag input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.cam-tools { display: inline-flex; gap: 8px; }
.cam-flags { display: flex; gap: 8px; }
.cam-flags .vid-flag span { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam-flags .vid-flag input:checked + span { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.85); }
.cam-flags .vid-flag input:checked + span::before { box-shadow: inset 0 0 0 2px #000; }
.cam-orient-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(175, 251, 72, 0.92); color: #0B1200; font: 700 13px/1.2 var(--font-display); }
.cam-orient-hint[hidden] { display: none; }
.cam-orient-hint .ic { width: 18px; height: 18px; }
.view-camera.recording .cam-flags { opacity: 0.85; }

/* ===== v21 · análise do jogo ===== */
.coach { gap: 10px; }
.coach-head { margin: 0; font: 800 19px/1.3 var(--font-display); }
.coach-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; color: var(--fg-2); font-size: 14.5px; line-height: 1.45; }
.coach-list li::marker { color: var(--brand-ink, var(--brand)); }
.coach-tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, var(--surface-2, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); font-size: 14.5px; line-height: 1.45; }
.coach-tip .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--brand-ink, var(--brand)); }
.coach-tip b { display: block; font: 800 12px/1.4 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink, var(--brand)); }
.coach-ai p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }

/* ===== v22 · novidades, sugestões, curtiu?, sequência ===== */
.news { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--hair); }
.news.first { border-top: 0; padding-top: 0; }
.news-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.news-h b { font: 800 16px/1.3 var(--font-display); }
.news-h small { color: var(--fg-3, var(--fg-2)); font-size: 12px; white-space: nowrap; }
.news ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--fg-2); font-size: 14.5px; line-height: 1.45; }
.news-card, .streak-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.news-card > .ic, .streak-card > .ic { flex: none; width: 22px; height: 22px; color: var(--brand-ink, var(--brand)); }
.streak-card > .ic { color: #FF8A3D; }
.streak-card.ok > .ic { color: var(--brand-ink, var(--brand)); }
.news-card > span, .streak-card > span { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13.5px; color: var(--fg-2); line-height: 1.35; }
.news-card b, .streak-card b { color: var(--fg); font: 800 14.5px/1.25 var(--font-display); }
.fb-form { display: grid; gap: 14px; }
.fb-form .field { display: grid; gap: 6px; }
.fb-form .field span { font: 700 13px/1 var(--font-display); color: var(--fg-2); }
.fb-form textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--fg); font: 400 15px/1.45 inherit; resize: vertical; }
.row-check { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: 13.5px; line-height: 1.4; }
.row-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); }
.love-q { margin: 0 0 14px; font: 600 16px/1.45 var(--font-display); }
.love-a { display: flex; flex-wrap: wrap; gap: 10px; }
.love-a.col { flex-direction: column; align-items: stretch; }
.install-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.install-steps .ic { width: 18px; height: 18px; vertical-align: -3px; }
.install-card > .ic { color: var(--brand-ink, var(--brand)); }
.retro-link { display: inline-flex; align-items: center; gap: 8px; } .retro-link .ic { width: 18px; height: 18px; }
.consent-a { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* ===== v23 · aviso no centro (modal) ===== */
.modal { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 24px 20px; background: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease; }
.modal.show { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.modal-card { position: relative; width: min(360px, 100%); display: grid; justify-items: center; gap: 10px; padding: 34px 24px 22px; border-radius: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface) 46%); box-shadow: 0 0 0 1px var(--hair-strong), 0 30px 80px -20px rgba(0, 0, 0, 0.6); text-align: center; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.modal.show .modal-card { opacity: 1; transform: none; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; font-size: 18px; color: var(--fg-2); }
.modal-ic { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 26px; background: var(--fill, rgba(127, 127, 127, 0.14)); color: var(--fg); position: relative; }
.modal-ic .ic { width: 38px; height: 38px; }
.modal-ic.brand { background: var(--brand); color: #0B1200; box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
.modal-ic.brand::after { content: ""; position: absolute; inset: -8px; border-radius: 32px; border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); animation: ring 1.8s ease-out infinite; }
.modal.show .modal-ic { animation: modalPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
@keyframes modalPop { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } }
.modal-card h2 { margin: 0; font: 800 23px/1.2 var(--font-display); letter-spacing: -0.01em; }
.modal-card p { margin: 0 0 8px; color: var(--fg-2); font-size: 15px; line-height: 1.45; max-width: 30ch; }
.modal-a { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.modal-a .btn { width: 100%; height: 50px; border-radius: 16px; font-size: 16px; }
.modal-a .linkish { justify-self: center; margin-top: 2px; color: var(--fg-2); font-size: 14px; }
.confetti { position: absolute; left: 50%; top: 72px; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: confetti 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) var(--d) forwards; }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .modal-card, .modal { transition: none; } .modal-ic.brand::after, .modal.show .modal-ic { animation: none; } }
/* miniatura da gravação no formato do vídeo (horizontal 16:9 por padrão) */
.rec-dock.o-h .rec-mini { width: 156px; aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .rec-dock.o-h .rec-mini { width: 200px; } .rec-dock:not(.o-h) .rec-mini { width: 108px; aspect-ratio: 9 / 16; } }
.rec-mini video { background: #000; }
.rec-dock.mini-off.o-h .rec-mini, .rec-dock.mini-off .rec-mini { width: auto; aspect-ratio: auto; }
body .toast.top, body[data-view] .toast.top { top: calc(72px + env(safe-area-inset-top, 0px)); bottom: auto; }

/* ===== v24 · tutorial (tour) e central de ajuda ===== */
.tour { position: fixed; inset: 0; z-index: 70; opacity: 0; transition: opacity 0.2s ease; }
.tour.show { opacity: 1; }
.tour-hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.7), 0 0 0 2px var(--brand), 0 0 26px 4px color-mix(in srgb, var(--brand) 45%, transparent); transition: left 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), top 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), height 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), border-radius 0.32s; pointer-events: none; }
.tour.center .tour-hole { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.7); }
.tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: 22px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--hair-strong), 0 24px 60px -16px rgba(0, 0, 0, 0.55); transition: top 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), left 0.32s cubic-bezier(0.3, 0.9, 0.3, 1); }
.tour.center .tour-card { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); padding: 22px 20px 16px; }
.tour.show .tour-card { animation: tourIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes tourIn { from { opacity: 0; scale: 0.94; } }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-step { font: 700 12px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }
.tour-top .linkish { color: var(--fg-2); font-size: 14px; padding: 6px 2px; }
.tour-card h2 { margin: 0; font: 800 20px/1.2 var(--font-display); letter-spacing: -0.01em; }
.tour-text p { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.tour-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.tour-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.tour-list .ic { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 11px; background: var(--brand-soft); color: var(--brand-ink); }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tour-foot .btn { height: 42px; border-radius: 13px; padding: 0 16px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--fill-strong); transition: width 0.25s, background 0.25s; }
.tour-dots i.past { background: color-mix(in srgb, var(--brand-ink) 45%, var(--fill-strong)); }
.tour-dots i.on { width: 18px; background: var(--brand-ink); }
body.tour-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .tour, .tour-hole, .tour-card { transition: none; } .tour.show .tour-card { animation: none; } }
.help-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 16px; }
.help-acts .btn-brand { grid-column: 1 / -1; height: 48px; }
.help-acts .btn { justify-content: center; }
.help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.help-steps b, .help-tip b { display: block; color: var(--fg); font-size: 15px; margin-bottom: 1px; }
.help-steps .n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 800 14px/1 var(--font-num); }
.help-tips { display: grid; gap: 8px; }
.help-tip { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--fill); font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.help-tip .row-ic { flex: none; }
.faq { display: grid; border-radius: 16px; background: var(--fill); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; font-weight: 650; font-size: 15px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 16px; height: 16px; flex: none; color: var(--fg-3); transform: rotate(90deg); transition: transform 0.2s; }
.faq details[open] summary .ic { transform: rotate(-90deg); }
.faq summary:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; border-radius: 12px; }
.faq p { margin: 0; padding: 0 14px 14px; color: var(--fg-2); font-size: 14.5px; line-height: 1.5; }
.help-foot { margin-top: 18px; }
.help-foot a { color: var(--brand-ink); font-weight: 600; }
/* espaços de aviso vazios no Início não somam o espaçamento da página */
#view-inicio .page > div:empty { display: none; }
/* ===== v25 · lente (0.5×/1×/2×) e brilho da gravação ===== */
.vid-tune { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.lens-seg span { min-width: 54px; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 750; }
.lens-seg label.na span { opacity: 0.45; }
.exp-step { display: inline-flex; align-items: center; gap: 6px; }
.exp-step .icon-btn { position: relative; width: 40px; height: 40px; }
.exp-step .icon-btn svg { width: 18px; height: 18px; }
.exp-step .icon-btn b { position: absolute; right: 3px; bottom: 1px; font: 800 13px/1 var(--font); }
.exp-step .icon-btn[disabled] { opacity: 0.35; }
.exp-val { display: grid; justify-items: center; gap: 4px; min-width: 70px; }
.exp-val small { font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.exp-dots { display: flex; gap: 5px; align-items: center; }
.exp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--fill-strong); }
.exp-dots i.mid { width: 2px; height: 10px; border-radius: 1px; }
.exp-dots i.on { width: 10px; height: 10px; background: var(--brand-ink, var(--brand)); }
/* no modo câmera: em cima da imagem */
.cam-tune .vid-tune { justify-content: center; margin: 0 0 10px; }
.cam-tune .seg { background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam-tune .seg span { color: rgba(255, 255, 255, 0.8); }
.cam-tune .seg input:checked + span { background: rgba(255, 255, 255, 0.92); color: #000; }
.cam-tune .exp-step { padding: 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam-tune .exp-step .icon-btn { background: transparent; color: #fff; }
.cam-tune .exp-val small { color: rgba(255, 255, 255, 0.85); }
.cam-tune .exp-dots i { background: rgba(255, 255, 255, 0.35); }
.cam-tune .exp-dots i.on { background: #AFFB48; }
.view-camera.recording .cam-tune { opacity: 0.9; }

/* ===== v26 · placar: "Lançar" no centro, voz à direita; ajustes da câmera na miniatura ===== */
.lance-btn { width: 68px; height: 68px; display: grid; place-items: center; align-content: center; gap: 1px; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow); transition: transform 0.12s, box-shadow 0.2s; font-size: 26px; }
.lance-btn svg { width: 1em; height: 1em; }
.lance-btn span { font: 750 10.5px/1 var(--font); letter-spacing: 0.02em; }
.lance-btn:active { transform: scale(0.95); }
.lance-btn[aria-pressed="true"], .lance-btn[aria-expanded="true"] { box-shadow: 0 0 0 6px var(--brand-soft); }
.mic-dock .on { display: none; }
.mic-dock[aria-pressed="true"] .on { display: block; } .mic-dock[aria-pressed="true"] .off { display: none; }
.mic-dock[aria-pressed="true"] svg { color: var(--on-brand); background: var(--brand); border-radius: 50%; padding: 4px; box-sizing: content-box; margin: -4px; }
.mic-dock[aria-pressed="true"] span { color: var(--brand-ink); font-weight: 700; }
.mic-dock[aria-pressed="false"] svg { color: var(--fg-2); }
@media (max-height: 520px) and (min-width: 601px) { .lance-btn { width: 52px; height: 52px; font-size: 22px; } .lance-btn span { display: none; } }
.rec-gear { position: absolute; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); right: 6px; top: 6px; }
.rec-gear svg { width: 17px; height: 17px; }
.rec-gear[aria-expanded="true"] { background: var(--brand); color: var(--on-brand); }
.rec-tune { position: absolute; z-index: 3; right: 0; bottom: calc(100% + 10px); width: min(330px, calc(100vw - 24px)); padding: 14px; border-radius: 20px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--hair-strong), var(--shadow-pop); }
.rec-tune h3 { margin: 0 0 4px; font: 750 14px/1.2 var(--font); }
.rec-tune .vid-tune { margin-top: 6px; }
.rec-tune .hint { margin: 10px 0 0; font-size: 12.5px; }
.rec-tune .rt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-tune .rt-head .icon-btn { width: 32px; height: 32px; }

/* ===== v27 · estatísticas completas (Pro), "on fire", micro-animações ===== */
.st-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 12px; border: 0; border-radius: 18px; background: #101500; color: #F4F7EC; text-align: left; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.st-entry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(175, 251, 72, 0.16) 48%, transparent 62%); transform: translateX(-100%); animation: stShine 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
.st-entry-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #AFFB48; color: #101500; font-size: 22px; }
.st-entry-txt { display: grid; gap: 3px; min-width: 0; }
.st-entry-txt b { display: flex; align-items: center; gap: 8px; font: 750 16px/1.2 var(--font-display); }
.st-entry-txt .pro-badge { background: #AFFB48; color: #101500; }
.st-entry-txt small { color: #C9D2BA; font-size: 12.5px; line-height: 1.35; }
.st-entry .chev { color: #AFFB48; }
@keyframes stShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.st-filters { display: grid; gap: 10px; }
.st-row { display: flex; }
.st-period { width: 100%; }
.st-period label { flex: 1; }
.st-period span { width: 100%; text-align: center; }
.st-types, .st-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.st-types::-webkit-scrollbar, .st-chips::-webkit-scrollbar { display: none; }
.st-chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: 650 13px/1 var(--font); white-space: nowrap; transition: background 0.18s, color 0.18s, transform 0.12s; }
.fchip:active { transform: scale(0.96); }
.fchip small { font-size: 11px; color: var(--fg-2); font-weight: 600; }
.fchip .ic { font-size: 14px; }
.fchip.on { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.fchip.on small { color: inherit; opacity: 0.75; }
.fchip[data-locked] { color: var(--fg-2); }
.st-sum { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--fg-2); font-size: 12.5px; }
.st-sum .ic { font-size: 14px; flex: none; }

.st-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-kpi, .st-tile { position: relative; display: grid; align-content: start; gap: 3px; padding: 12px 12px 13px; border: 0; border-radius: 16px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); text-align: left; min-width: 0; overflow: hidden; animation: stIn 0.5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 40ms); }
button.st-kpi:active, .st-tile:active { transform: scale(0.98); }
.st-kpi em, .st-tile em { font-style: normal; color: var(--fg-2); font-size: 12px; line-height: 1.25; }
.st-kpi b { font: 800 27px/1.05 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.st-kpi b small { font-size: 15px; color: var(--fg-2); font-weight: 700; }
.st-tile b { font: 800 22px/1.05 var(--font-num); font-variant-numeric: tabular-nums; }
.st-tile small { color: var(--fg-2); font-size: 11px; }
.st-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 17px; margin-bottom: 4px; }
.st-ic .ic { transition: transform 0.4s cubic-bezier(.3, 1.6, .5, 1); }
.st-kpi:hover .st-ic .ic, .st-tile:hover .st-ic .ic, .st-kpi:focus-visible .st-ic .ic, .st-tile:focus-visible .st-ic .ic { transform: rotate(-10deg) scale(1.12); }
.st-ic.big { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; margin: 0; }
.dl { position: absolute; top: 12px; right: 10px; padding: 2px 6px; border-radius: 6px; font: 750 11px/1.3 var(--font); background: var(--fill); color: var(--fg-2); }
.dl.up { background: var(--brand-soft); color: var(--brand-ink); }
.dl.down { background: var(--alert-soft); color: #B23700; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-grid .st-tile { background: var(--surface-2); box-shadow: none; }
.st-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 6px; }
.st-spark i { flex: 1; border-radius: 2px 2px 1px 1px; background: var(--chart); opacity: 0.75; transform-origin: bottom; }
.st-spark i.l { background: var(--fill-strong); opacity: 1; }
.st-fire { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #101500; color: #E9F5D2; font-size: 13.5px; }
.st-fire > span b { color: #AFFB48; }
/* a tag on fire dentro da faixa escura usa as cores do tema escuro nos dois temas */
.st-fire .onfire { --fire: #8EDC3C; --fire-hi: #C4FF6E; background: rgba(175, 251, 72, 0.14); color: #F4F5F4; }
.st-evo-head { display: grid; gap: 2px; }
.st-evo-head b { font: 800 30px/1 var(--font-num); }
.st-evo-head span { color: var(--fg-2); font-size: 12.5px; }
.st-lead { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13.5px; }
.st-lead .ic { color: var(--brand-ink); flex: none; margin-top: 1px; }
.st-shots .bar1 { width: 100%; border: 0; background: none; padding: 2px 0; color: var(--fg-2); text-align: left; font: inherit; font-size: 13px; }

/* gráfico interativo */
.xchart { position: relative; touch-action: pan-y; outline: none; cursor: crosshair; }
.xchart:focus-visible { box-shadow: 0 0 0 2px var(--brand); border-radius: 10px; }
.xplot { position: relative; }
.xchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.xbx { display: flex; justify-content: space-between; padding: 4px 0 0 30px; font: 600 10.5px/1 var(--font); color: var(--fg-2); }
.xg { stroke: var(--line); stroke-width: 1; }
.xg.mid { stroke-dasharray: 3 4; stroke: var(--fill-strong); }
.xl { fill: none; stroke: var(--chart); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: xDraw 1.1s cubic-bezier(.4, 0, .2, 1) 0.1s forwards; }
.xa { stroke: none; opacity: 0; animation: xFade 0.8s ease 0.6s forwards; }
.xd { fill: var(--chart); stroke: var(--surface); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: xPop 0.35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(0.15s + var(--i) * 18ms); }
.xd.l { fill: var(--surface); stroke: var(--fg-2); stroke-width: 1.6; }
.xcross { stroke: var(--fg-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.xcross.on { opacity: 1; }
.xt { position: absolute; left: 0; transform: translateY(-50%); font: 600 10.5px/1 var(--font); color: var(--fg-2); background: var(--surface); padding-right: 3px; pointer-events: none; }
.sheet .xt { background: var(--bg-sheet, var(--surface)); }
.xpin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--chart); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--chart) 28%, transparent); pointer-events: none; }
.xpin.l { background: var(--surface); box-shadow: inset 0 0 0 2px var(--fg-2), 0 0 0 3px var(--surface); }
.xtip { position: absolute; top: 0; transform: translateY(calc(-100% - 14px)); display: grid; gap: 1px; min-width: 128px; max-width: 220px; padding: 8px 10px; border-radius: 12px; background: var(--ink); color: var(--ink-fg); box-shadow: var(--shadow-pop); pointer-events: none; z-index: 2; }
.xtip.below { transform: translateY(14px); }
.xtip b { font: 800 18px/1.1 var(--font-num); }
.xtip b em { font: 600 12px var(--font); font-style: normal; opacity: 0.8; }
.xtip span { font-size: 12px; opacity: 0.85; }
.xtip small { font-size: 11.5px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-2); }
.xlegend span { display: inline-flex; align-items: center; gap: 6px; }
.xlegend i { width: 9px; height: 9px; border-radius: 50%; background: var(--chart); }
.xlegend i.l { background: var(--surface); box-shadow: inset 0 0 0 1.6px var(--fg-2); }
.xlegend i.lb { border-radius: 2px; background: var(--fill-strong); }
.xlegend i.w { box-shadow: 0 0 0 2px var(--surface); }
.xlegend i.ln { width: 16px; height: 2px; border-radius: 1px; }
@keyframes xDraw { to { stroke-dashoffset: 0; } }
@keyframes xFade { to { opacity: 1; } }
@keyframes xPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes stIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* pontos e erros empilhados */
.stack { display: grid; gap: 7px; }
.stack + .stack { margin-top: 6px; }
.stack-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-2); }
.stack-h b { color: var(--fg); font: 800 15px/1 var(--font-num); }
.stack-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--fill); }
.stack-bar i { display: block; height: 100%; }
.stack-bar i:first-child { border-radius: 7px 0 0 7px; } .stack-bar i:last-child { border-radius: 0 7px 7px 0; } .stack-bar i:only-child { border-radius: 7px; }
.stack-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fg-2); }
.stack-leg span { display: inline-flex; align-items: center; gap: 6px; }
.stack-leg b { color: var(--fg); font-weight: 750; }
.stack-leg i { width: 9px; height: 9px; border-radius: 2px; }
.p1 { background: #101500; } .p2 { background: var(--chart); } .p3 { background: color-mix(in srgb, var(--chart) 40%, var(--surface)); }
.e1 { background: var(--alert); } .e2 { background: #FFB088; } .e3 { background: #7A2A00; } .e4 { background: var(--fill-strong); }
:root[data-theme="dark"] .p1 { background: #F4F5F4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p1 { background: #F4F5F4; } }

/* vitórias e derrotas por mês */
.st-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 150px; }
.stm { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; height: 100%; text-align: center; min-width: 0; }
.stm-bar { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; min-height: 0; }
.stm-bar i { display: block; width: 100%; max-width: 34px; margin: 0 auto; border-radius: 0; }
.stm-bar i.w { background: var(--chart); border-radius: 0 0 4px 4px; }
.stm-bar i.l { background: var(--fill-strong); border-radius: 4px 4px 0 0; }
.stm-bar i:only-child, .stm-bar i.w:last-child { border-radius: 4px; }
.stm b { font: 800 13px/1 var(--font-num); }
.stm b span { color: var(--fg-2); font-weight: 700; font-size: 11px; margin-left: 1px; }
.stm b span + span { margin-left: 0; }
.stm small { color: var(--fg-2); font-size: 11px; text-transform: capitalize; }

/* análise do dia */
.ai-day { background: linear-gradient(180deg, var(--brand-soft), var(--surface) 140px); }
.ai-status { display: flex; align-items: center; gap: 7px; margin: -4px 0 0; color: var(--fg-2); font-size: 12.5px; }
.ai-status .ic { flex: none; font-size: 14px; color: var(--brand-ink); }
.ai-items { display: grid; gap: 12px; }
.ai-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; animation: stIn 0.5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(0.1s + var(--k) * 90ms); }
.ai-item b { font: 750 14px/1.3 var(--font-display); }
.ai-item p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.ai-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--fill); font-size: 17px; }
.ai-ic { background: var(--brand); color: var(--on-brand); } /* todos iguais: a cor não julga o conteúdo */

/* zona Pro borrada */
.pro-zone { position: relative; display: grid; }
.pz-content { display: grid; gap: 14px; filter: blur(7px) saturate(0.7); opacity: 0.75; pointer-events: none; user-select: none; max-height: 1100px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.pz-content, .pz-cta { grid-area: 1 / 1; }
.pz-cta { position: sticky; top: 24px; align-self: start; justify-self: center; margin-top: 40px; width: min(330px, calc(100% - 16px)); z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 22px 18px 18px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair-strong), var(--shadow-pop); text-align: center; animation: stIn 0.6s cubic-bezier(.2, .8, .2, 1) 0.2s both; }
.pz-cta b { font: 800 19px/1.2 var(--font-display); }
.pz-cta p { margin: 0 0 6px; color: var(--fg-2); font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.pz-lock { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #101500; color: #AFFB48; font-size: 22px; animation: pzBob 2.6s ease-in-out infinite; }
@keyframes pzBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sd-head { position: relative; display: flex; align-items: center; gap: 12px; }
.sd-head > div { display: grid; gap: 2px; }
.sd-head b { font: 800 34px/1 var(--font-num); }
.sd-head span { color: var(--fg-2); font-size: 12.5px; }
.sd-head .dl { position: static; margin-left: auto; align-self: center; }
.sd-sub { margin: 6px 0 0; font: 750 14px/1.2 var(--font-display); }

/* on fire: raio da marca com +N e partículas */
.onfire { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--fire-bg); color: var(--fg); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle; }
.onfire .of-bolt { flex: none; width: 13px; height: 13px; color: var(--fire); animation: ofPulse 1.5s ease-in-out infinite; }
.onfire b { font-weight: 700; }
.onfire.sm { padding: 2px 7px 2px 5px; font-size: 10.5px; gap: 3px; }
/* no card da timeline, ao lado do nome: letra um pouco menor, com mais respiro dentro da tag */
.act-name .onfire { font-size: 10.5px; gap: 3px; padding: 4px 9px 4px 6px; }
.act-name .onfire .of-bolt { width: 12px; height: 12px; }
.onfire.sm .of-bolt { width: 11px; height: 11px; }
@keyframes ofPulse { 0%, 100% { transform: scale(1); color: var(--fire); filter: none; } 50% { transform: scale(1.12); color: var(--fire-hi); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fire-hi) 55%, transparent)); } }
.me-name { flex-wrap: wrap; }

/* foguinho do card de sequência quando está ganhando */
.streak.hot.lit .flame { transform-origin: 50% 90%; animation: flick 1.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(175, 251, 72, 0.55)); }
@keyframes flick { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06, 0.96) rotate(-3deg); } 50% { transform: scale(0.97, 1.07) rotate(2deg); } 75% { transform: scale(1.04, 0.98) rotate(-1deg); } }

/* barras enchendo como líquido (todas as barras do app) */
.bar1 em, .bk-bars em, .liq { position: relative; overflow: hidden; transform-origin: left; animation: liqFill 1.1s cubic-bezier(.25, .9, .3, 1.04) both; animation-delay: calc(var(--k, 0) * 60ms); }
.bar1 em::after, .bk-bars em::after, .liq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%); background-size: 260% 100%; animation: liqWave 1.4s ease-out 0.2s both; }
.liq-v { transform-origin: bottom; animation: liqRise 0.9s cubic-bezier(.25, .9, .3, 1.06) both; animation-delay: calc(var(--k, 0) * 70ms + var(--i, 0) * 25ms); }
@keyframes liqFill { 0% { transform: scaleX(0); } 70% { transform: scaleX(1.015); } 100% { transform: scaleX(1); } }
@keyframes liqWave { from { background-position: 120% 0; } to { background-position: -40% 0; } }
@keyframes liqRise { 0% { transform: scaleY(0); } 70% { transform: scaleY(1.04); } 100% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .st-entry::after, .onfire .of-bolt, .streak.hot.lit .flame, .pz-lock { animation: none; }
  .xl { animation: none; stroke-dashoffset: 0; }
  .xa { animation: none; opacity: 1; }
  .xd, .st-kpi, .st-tile, .ai-item, .pz-cta, .bar1 em, .bk-bars em, .liq, .liq-v { animation: none; }
  .bar1 em::after, .bk-bars em::after, .liq::after { display: none; }
}
.act-who > .act-name { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg); font-size: inherit; overflow: visible; }
.act-who > .act-name b { min-width: 0; }
.act-who > .act-name .onfire { flex: none; }

/* ===== v28 · jogando agora: anel verde, selo do esporte, placar ao vivo ===== */
.av.is-live, .me-avatar.is-live { position: relative; overflow: visible; cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #2BD46A; }
.av-xl.is-live, .me-avatar.is-live { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #2BD46A, 0 0 18px rgba(43, 212, 106, 0.45); }
.av.is-live::after, .me-avatar.is-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #2BD46A; opacity: 0; animation: liveRing 2.2s ease-out infinite; pointer-events: none; }
.live-badge { position: absolute; left: -3px; bottom: -3px; width: 42%; height: 42%; min-width: 15px; min-height: 15px; display: grid; place-items: center; border-radius: 50%; background: #2BD46A; color: #04210F; box-shadow: 0 0 0 2px var(--surface); }
.live-badge .ic { width: 66%; height: 66%; }
@keyframes liveRing { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } }
.live-strip { display: grid; gap: 10px; }
.live-strip h2 { display: inline-flex; align-items: center; gap: 8px; }
.live-strip .live-dot { background: #2BD46A; box-shadow: 0 0 0 4px rgba(43, 212, 106, 0.18); }
.live-row-av { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 6px 16px 4px; }
.live-row-av::-webkit-scrollbar { display: none; }
.live-pill { flex: none; display: grid; justify-items: center; gap: 4px; width: 72px; border: 0; background: none; color: var(--fg); padding: 0; }
.live-pill b { font: 700 13px/1.2 var(--font-display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-pill small { color: var(--fg-2); font-size: 11px; margin-top: -3px; }
.live-head { display: flex; align-items: center; gap: 14px; }
.live-head > div { display: grid; gap: 3px; min-width: 0; }
.live-head b { font: 800 18px/1.2 var(--font-display); }
.live-head > div > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: #107A3A; }
.live-head > div > span .ic { font-size: 14px; }
.live-head small { color: var(--fg-2); font-size: 12.5px; }
.live-head .live-dot { background: #2BD46A; flex: none; }
:root[data-theme="dark"] .live-head > div > span { color: #57E68F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live-head > div > span { color: #57E68F; } }
.live-board { display: grid; gap: 2px; padding: 6px; border-radius: 18px; background: #0B0D0C; color: #F4F5F4; }
.live-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px; border-radius: 13px; }
.live-row + .live-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.live-row.srv .live-names::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #AFFB48; vertical-align: middle; }
.live-names { min-width: 0; font: 700 14px/1.35 var(--font-display); }
.live-names .sep { font-style: normal; color: rgba(255, 255, 255, 0.4); }
.masked { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); filter: blur(0.3px); font-weight: 600; }
.live-sc { display: flex; align-items: center; gap: 6px; font: 800 18px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.live-sc > span { min-width: 22px; text-align: center; color: rgba(255, 255, 255, 0.5); }
.live-sc > span.w { color: #F4F5F4; }
.live-sc .g { color: #F4F5F4; }
.live-sc .p { min-width: 36px; padding: 6px 6px; border-radius: 9px; background: #AFFB48; color: #101500; }
.live-meta { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--fg-2); font-size: 12.5px; }
.live-meta .ic { color: #2BD46A; flex: none; }
.live-note { display: flex; gap: 8px; align-items: flex-start; }
.live-note .ic { flex: none; margin-top: 2px; }
#liveBody { display: grid; gap: 14px; }
@media (prefers-reduced-motion: reduce) { .av.is-live::after, .me-avatar.is-live::after { animation: none; display: none; } }

/* ===== v29 · estatísticas: abas, pontos detalhados, ajuda "?", com um jogador ===== */
.bk-bars u:first-child em { transform-origin: right; }
.st-tabs span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.st-tabs .ic { font-size: 15px; }
.st-tabs .pro-badge { margin-left: 2px; }
.qhelp { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--fg-2); font: 750 12px/1 var(--font); vertical-align: middle; cursor: pointer; position: relative; }
.qhelp::before { content: ""; position: absolute; inset: -11px; } /* área de toque de 44px */
.qhelp:hover, .qhelp:focus-visible { color: var(--fg); border-color: var(--fg-3); }
.st-types .qhelp { align-self: center; }
.st-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.st-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.st-dl .ic { font-size: 15px; color: var(--brand-ink); }
.st-detail .seg span { display: inline-flex; align-items: baseline; gap: 4px; }
.st-detail .seg small { font-size: 10.5px; color: var(--fg-2); font-weight: 600; }
.st-detail .seg .ic { font-size: 11px; align-self: center; }
.st-detail .seg label.locked span { color: var(--fg-2); }
.st-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 12.5px; line-height: 1.4; color: var(--fg); flex-wrap: wrap; }
.st-warn > .ic { flex: none; margin-top: 1px; color: var(--fg-2); }
.st-warn > span { flex: 1; min-width: 200px; }
.st-warn .linkish { margin-left: auto; font-weight: 750; color: var(--brand-ink); }
.ph-tools { display: inline-flex; align-items: center; gap: 6px; }
.st-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--fill); }
.st-search .ic { color: var(--fg-2); flex: none; }
.st-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: 500 15px var(--font); outline: none; }
.st-search:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.st-people { display: flex; flex-wrap: wrap; gap: 6px; max-height: 196px; overflow-y: auto; }
.pchip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: 650 13px/1 var(--font); }
.pchip[hidden] { display: none; }
.pchip .mini-av { width: 28px; height: 28px; font-size: 10px; background: var(--av, var(--surface-2)); color: #101500; }
.pchip small { color: var(--fg-2); font-size: 11px; }
.pchip.on { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.pchip.on small { color: inherit; opacity: 0.75; }
.st-side span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.st-side small { font-size: 11px; color: var(--fg-2); }
.st-side input:disabled + span { opacity: 0.45; }
.st-vs-head { display: flex; align-items: center; gap: 12px; }
.st-vs-head > div { display: grid; gap: 2px; min-width: 0; }
.st-vs-head b { font: 800 18px/1.2 var(--font-display); }
.st-vs-head span { color: var(--fg-2); font-size: 13px; }
.mini-av.big { width: 46px; height: 46px; font-size: 15px; background: var(--av, var(--surface-2)); color: #101500; flex: none; }
.st-vs .st-kpis .st-kpi { background: var(--surface-2); box-shadow: none; }
.cmp-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 750; color: var(--fg-2); margin-bottom: -4px; }
.bk-row.cmp b { font-size: 14px; }
.bk-row.cmp { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.st-detail .seg input:checked + span small { color: var(--fg); }
.st-side input:checked + span small { color: var(--fg); }
.st-who { grid-template-columns: minmax(0, 1fr); }
.st-search input { width: 100%; }
/* aviso do gráfico: abrir a partida tocada (some sozinho em 3 s) */
.xc-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 81; display: flex; align-items: center; gap: 10px; width: min(360px, calc(100vw - 32px)); padding: 10px 8px 12px 14px; border-radius: 16px; background: var(--ink); color: var(--ink-fg); box-shadow: var(--float); cursor: pointer; overflow: hidden; transform: translate(-50%, 14px); opacity: 0; transition: opacity 0.2s, transform 0.2s; }
.xc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.xct-txt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.xct-txt > .ic { flex: none; font-size: 18px; color: var(--brand); }
.xct-txt > span { display: grid; gap: 1px; min-width: 0; }
.xct-txt b { font: 750 14px/1.2 var(--font-display); }
.xct-txt small { font-size: 12px; opacity: 0.75; }
.xct-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); flex: none; }
.xct-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.7; flex: none; }
.xct-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--brand); transform-origin: left; }
.xc-toast.show .xct-bar { animation: xctBar 3s linear forwards; }
@keyframes xctBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mc-head { display: flex; align-items: center; gap: 12px; }
.mc-head > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mc-head b { font: 800 17px/1.2 var(--font-display); }
.mc-head span { color: var(--fg-2); font-size: 13px; }
.mc-res { flex: none; padding: 4px 10px; border-radius: 999px; font: 750 12px/1.2 var(--font) !important; }
.mc-res.w { background: var(--brand); color: var(--on-brand) !important; }
.mc-res.l { background: var(--fill); color: var(--fg) !important; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--fill); font-size: 12px; color: var(--fg); }
.mc-tags .ic { font-size: 13px; color: var(--fg-2); }
@media (prefers-reduced-motion: reduce) { .xc-toast.show .xct-bar { animation-duration: 3s; } }

/* ===== v30 · formato personalizado e predefinições ===== */
.fmt-mode { margin-bottom: 10px; }
.fmt-mode span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fmt-mode .ic { font-size: 14px; }
.fmt-custom { display: grid; gap: 10px; }
.cf-row .cf-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cf-row.stack .cf-ctl { justify-content: flex-start; }
.cf-show { color: var(--fg-2); font-size: 12px; min-width: 70px; }
.stepper { display: inline-flex; align-items: center; border-radius: 12px; background: var(--fill); padding: 3px; }
.stepper button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--surface); color: var(--fg); font: 700 18px/1 var(--font); box-shadow: var(--shadow); }
.stepper button:disabled { opacity: 0.35; box-shadow: none; }
.stepper input { width: 46px; border: 0; background: none; color: var(--fg); text-align: center; font: 800 17px/1 var(--font-num); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.off { opacity: 0.5; }
.cf-presets { border-radius: 14px; background: var(--surface-2); padding: 0 12px; }
.cf-presets summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.cf-presets summary::-webkit-details-marker { display: none; }
.cf-presets summary .ic:first-child { color: var(--brand-ink); }
.cf-presets summary small { margin-left: auto; color: var(--fg-2); font-weight: 600; }
.cf-presets summary .chev { transition: transform 0.2s; }
.cf-presets[open] summary .chev { transform: rotate(90deg); }
.cf-presets .hint { margin: 0 0 12px; }
.cf-plist { display: grid; gap: 6px; padding-bottom: 12px; }
.cf-p { display: flex; align-items: center; gap: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.cf-p.on { box-shadow: 0 0 0 2px var(--brand); }
.cf-use { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 10px 12px; border: 0; background: none; color: var(--fg); text-align: left; }
.cf-use b { font: 750 14px/1.2 var(--font-display); }
.cf-use small { color: var(--fg-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn.sm { width: 36px; height: 36px; flex: none; }
.cf-save { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--fill); }
.cf-save[hidden] { display: none; }
.cf-prefix { font: 800 14px/1 var(--font-num); color: var(--brand-ink); flex: none; }
.cf-save input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; color: var(--fg); font: 500 15px var(--font); outline: none; }
.cf-savebtn { justify-self: start; }
.cf-savebtn[hidden] { display: none; }
.quick-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.quick-presets > span { width: 100%; font-size: 12px; font-weight: 700; color: var(--fg-2); }
.quick-presets .pchip { padding: 0 12px 0 10px; }
.quick-presets .pchip .ic { font-size: 16px; }

/* ===== v31 · jogadores da partida (perfis ou convidados), nomes iguais ===== */
.team-edit .pl-slots { grid-column: 2; display: grid; gap: 6px; min-width: 0; }
.team-edit input[id$="name"] { grid-column: 2; }
.pl-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 4px 5px 6px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair); }
.pl-chip .mini-av { width: 30px; height: 30px; font-size: 11px; background: var(--av, var(--surface-2)); color: #101500; flex: none; }
.pl-txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pl-txt b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-txt b em { font-style: normal; font-weight: 600; color: var(--fg-2); font-size: 12px; }
.pl-txt small { color: var(--fg-2); font-size: 11.5px; }
.pl-add { position: relative; display: flex; align-items: center; }
.pl-add-ic { position: absolute; left: 12px; color: var(--fg-2); pointer-events: none; display: grid; }
.team-edit .pl-add input[type="text"] { width: 100%; padding-left: 38px; }
.pl-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair-strong), var(--shadow-pop); max-height: 280px; overflow-y: auto; }
.pl-sug[hidden] { display: none; }
.pl-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--fg); text-align: left; }
.pl-opt:hover, .pl-opt:focus-visible { background: var(--fill); }
.pl-opt .mini-av { width: 30px; height: 30px; font-size: 11px; background: var(--av, var(--surface-2)); color: #101500; flex: none; }
.pl-opt > span:last-child { display: grid; gap: 1px; min-width: 0; }
.pl-opt b { font: 700 14px/1.2 var(--font-display); }
.pl-opt b em { font-style: normal; color: var(--fg-2); font-weight: 600; font-size: 12px; }
.pl-opt small { color: var(--fg-2); font-size: 11.5px; }
.pl-opt.guest > .ic { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: var(--fill); flex: none; }
.pl-full { color: var(--fg-2); font-size: 12px; padding-left: 4px; }
.dup-box { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--alert-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alert) 30%, transparent); }
.dup-box[hidden] { display: none; }
.dup-head { display: flex; gap: 10px; align-items: flex-start; }
.dup-head > .ic { flex: none; font-size: 20px; color: #B23700; margin-top: 2px; }
.dup-head > div { display: grid; gap: 3px; }
.dup-head b { font: 750 15px/1.25 var(--font-display); }
.dup-head span { font-size: 13px; line-height: 1.4; color: var(--fg); }
.dup-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface); }
.dup-row .mini-av { width: 34px; height: 34px; background: var(--av, var(--surface-2)); color: #101500; }
.dup-who { display: grid; gap: 1px; min-width: 0; }
.dup-who b { font: 700 14px/1.2 var(--font-display); }
.dup-who small { color: var(--fg-2); font-size: 12px; }
.dup-row input { grid-column: 1 / -1; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill); color: var(--fg); font: 500 15px var(--font); }
.dup-row input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); }
.wl-form .field small { display: block; margin-top: 3px; font: 500 12px/1.35 var(--font); color: var(--fg-2); }
.del-link { justify-self: center; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--fg-2); font: 650 13px/1 var(--font); padding: 10px 12px; border-radius: 10px; }
.del-link .ic { font-size: 15px; }
.del-link:hover, .del-link:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.del-box { display: grid; gap: 12px; }
.del-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-size: 22px; }
.del-box p { margin: 0; }
.del-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.del-list li { display: flex; align-items: center; gap: 8px; }
.del-list .ic { color: var(--danger); font-size: 14px; flex: none; }
.del-box input { height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); color: var(--fg); font: 600 16px var(--font); }
.del-box input:focus { outline: none; box-shadow: 0 0 0 2px var(--danger); }
.del-box .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.del-box .btn-danger:disabled { opacity: 0.4; }

/* ===== v32 · Momento ponto a ponto, redesenhado ===== */
#momentBody { display: grid; gap: 14px; }
.mom-score .result { margin: 0; }
.mt { gap: 4px; padding: 12px 12px 13px; background: var(--surface); box-shadow: var(--shadow); border: 0; }
.mt .mt-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 16px; margin-bottom: 4px; }
.mt b { font: 800 28px/1 var(--font-num); }
.mt-team { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 2px 8px 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--fg) !important; font: 700 11.5px/1.4 var(--font) !important; }
.mt-team::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.mom-keys { gap: 10px; padding: 16px; background: var(--surface); border: 0; box-shadow: var(--shadow); border-radius: 16px; }
.mk-card { display: grid; gap: 6px; }
.mk-card + .mk-card { padding-top: 10px; border-top: 1px solid var(--line); }
.mk-name { font: 700 13px/1.2 var(--font-display); }
.mk-team { display: grid; grid-template-columns: minmax(0, 90px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.mk-team > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
.mk-team u { display: block; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; text-decoration: none; }
.mk-team em { display: block; height: 100%; border-radius: 4px; background: var(--tc); }
.mk-team b { font: 800 15px/1 var(--font-num); min-width: 36px; text-align: right; }
.mk-team b small { color: var(--fg-2); font-size: 11px; }
.mom-chart { gap: 10px; }
.mom-chart .mom-filters { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.mom-chart .fchip .ic { font-size: 14px; }
.mini-av.xs { width: 18px; height: 18px; font-size: 8px; background: var(--av, var(--surface-2)); color: #101500; }
.mom-side { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--fg); font: 700 11.5px/1.4 var(--font); }
.mom-side.bottom { margin-top: -4px; }
.mom-chart .mom-scroll { border: 0; background: var(--surface-2); }
.pt-info { position: sticky; bottom: 0; z-index: 2; align-items: center; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 4px 0 0 var(--tc, var(--brand)), 0 0 0 1px var(--hair), var(--float); color: var(--fg); }
.pt-info-txt { display: grid; gap: 4px; flex: 1; min-width: 0; }
.pt-empty { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.pt-top { display: flex; align-items: center; gap: 8px; }
.pt-top b { font: 800 15px/1.2 var(--font-display); }
.pt-clock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); font-size: 12px; }
.pt-det { font-size: 13.5px; color: var(--fg); text-transform: none; }
.pt-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand-ink); }
.pt-after { font-size: 12.5px; color: var(--fg-2); }
.pt-after b { font: 800 14px var(--font-num); color: var(--fg); margin-left: 4px; }
.pt-heard { font-size: 12px; color: var(--fg-2); font-style: italic; }
.pt-nav { display: flex; gap: 6px; }
.pt-list { max-height: none; border-top: 0; }
.pt-head { margin-top: 6px; padding: 8px 2px 6px; font: 700 12px/1.2 var(--font-display); color: var(--fg-2); letter-spacing: 0.01em; border-bottom: 1px solid var(--line); }
.pt-row { grid-template-columns: 26px 28px minmax(0, 1fr) auto auto; gap: 8px; padding: 9px 4px; border-radius: 10px; border-bottom: 0; }
.pt-row:hover { background: var(--fill); }
.pt-row.on { background: color-mix(in srgb, var(--tc) 14%, transparent); }
.pt-tic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--fg); font-size: 14px; }
.pt-score { font: 700 12.5px/1 var(--font-num); padding: 4px 8px; border-radius: 8px; background: var(--fill); white-space: nowrap; }
.del-box .hint b { white-space: nowrap; }
.log .what .log-ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--fg); font-size: 14px; }
.log .what .log-ic svg { width: 1em; height: 1em; }
.h3ic { display: flex; align-items: center; gap: 7px; }
.h3ic .ic { font-size: 14px; color: var(--brand-ink); }
.xc-toast { cursor: default; }
.xct-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.sport input:checked ~ small { color: var(--fg); }
.mc-kpis .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mc-kpis .kpi { padding: 2px 8px; }

/* ===== v33 · assinatura: planos, pagamento, seu plano, Pro Amigos ===== */
#proBody, .pay-box, .mng { display: grid; gap: 14px; }
.planchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--fill); color: var(--fg-2); font: 600 11px/1 var(--font-display); }
.planchip .ic { font-size: 12px; }
.planchip.pro { background: #101500; color: #AFFB48; border-color: #101500; }
.plan-now { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 13px; flex-wrap: wrap; }
.plan-now .ic { color: var(--brand-ink); }
.plan-now .linkish { margin-left: auto; }
.pay-period span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pay-period small { padding: 1px 5px; border-radius: 6px; background: var(--brand); color: var(--on-brand); font: 800 10px/1.3 var(--font); }
.plan-cards { display: grid; gap: 10px; }
.plan-card { position: relative; display: grid; gap: 6px; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line), var(--shadow); cursor: pointer; transition: box-shadow 0.18s, transform 0.12s; }
.plan-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-card.on { box-shadow: 0 0 0 2.5px var(--brand), var(--shadow); }
.plan-card:has(input:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; }
.plan-card:active { transform: scale(0.99); }
.pc-top { display: flex; align-items: center; gap: 10px; }
.pc-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #101500; color: #AFFB48; font-size: 18px; flex: none; }
.pc-name { display: grid; gap: 1px; flex: 1; min-width: 0; }
.pc-name b { font: 800 16px/1.2 var(--font-display); }
.pc-name small { color: var(--fg-2); font-size: 12.5px; }
.pc-tag { padding: 3px 8px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 750 10.5px/1.3 var(--font); white-space: nowrap; }
.pc-price { display: flex; align-items: baseline; gap: 4px; }
.pc-price b { font: 800 26px/1 var(--font-num); }
.pc-price small { color: var(--fg-2); font-size: 13px; }
.pc-sub { color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.pc-sub b { color: var(--fg); }
.pc-off { display: inline-block; padding: 0 5px; border-radius: 5px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; }
.pc-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-2); }
.pro-what { border-radius: 14px; background: var(--surface-2); padding: 0 14px; }
.pro-what summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.pro-what summary::-webkit-details-marker { display: none; }
.pro-what summary .chev { margin-left: auto; transition: transform 0.2s; }
.pro-what[open] summary .chev { transform: rotate(90deg); }
.pro-what .pro-list { padding-bottom: 14px; }
.pro-list li .ic { flex: none; width: 20px; height: 20px; color: var(--brand-ink); margin-top: 2px; }
.pro-list li span { display: grid; gap: 1px; font-size: 13px; color: var(--fg-2); }
.pro-list li b { color: var(--fg); font-size: 14px; }
.pay-legal { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--fg-2); text-align: center; text-wrap: pretty; }
.pay-sum { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.pay-sum > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pay-sum b { font: 800 15px/1.2 var(--font-display); }
.pay-sum span { color: var(--fg-2); font-size: 12.5px; }
.pay-total { font: 800 20px/1 var(--font-num) !important; white-space: nowrap; }
.pay-renew { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--fg-2); }
.pay-lbl { font: 700 12px/1.2 var(--font-display); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.pay-methods { display: grid; gap: 8px; }
.pay-m { position: relative; display: block; cursor: pointer; }
.pay-m input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pay-m > span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 14px; box-shadow: 0 0 0 1.5px var(--line); }
.pay-m > span .ic { grid-row: span 2; font-size: 20px; color: var(--brand-ink); }
.pay-m b { font: 750 14px/1.2 var(--font-display); }
.pay-m small { color: var(--fg-2); font-size: 12px; line-height: 1.35; }
.pay-m input:checked + span { box-shadow: 0 0 0 2.5px var(--brand); background: var(--brand-soft); }
.pay-m input:focus-visible + span { outline: 2px solid var(--info); outline-offset: 2px; }
.pay-demo { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 12.5px; line-height: 1.4; }
.pay-demo .ic { flex: none; margin-top: 1px; color: var(--fg-2); }
.pay-ok { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 8px 0; }
.pay-ok-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 30px; animation: pzBob 2.6s ease-in-out infinite; }
.pay-ok b { font: 800 22px/1.2 var(--font-display); }
.pay-ok p { margin: 0; color: var(--fg-2); }
.pay-ok .btn { width: 100%; }
.mng-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surface-2); }
.mng-card > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mng-card b { font: 800 16px/1.2 var(--font-display); }
.mng-card span { color: var(--fg-2); font-size: 12.5px; line-height: 1.35; }
.mng-card.free .pc-ic { background: var(--fill); color: var(--fg); }
.st-chip { flex: none; padding: 3px 9px; border-radius: 999px; font: 750 11px/1.3 var(--font); }
.st-chip.ok { background: var(--brand); color: var(--on-brand); }
.st-chip.trial { background: var(--fill-strong); color: var(--fg); }
.st-chip.warn { background: var(--alert-soft); color: #B23700; }
.st-chip.off { background: var(--fill); color: var(--fg-2); }
.mng-card .st-chip { color: inherit; }
.mng-card .st-chip.ok { color: var(--on-brand); }
.mng-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mng-actions .btn { justify-content: center; }
.mng-pays { display: grid; gap: 6px; }
.mng-pay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mng-pay span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); }
.mng-pay .ic { color: var(--brand-ink); font-size: 13px; }
.mng-pay em { font-style: normal; color: var(--fg-2); font-size: 11px; }
.mng-pay b { font: 800 14px var(--font-num); }
.amg { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), var(--shadow); }
.amg-head { display: flex; justify-content: space-between; align-items: center; }
.amg-head b { font: 800 15px/1.2 var(--font-display); }
.amg-head span { font: 800 14px var(--font-num); color: var(--fg-2); }
.amg-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.amg-row .mini-av { width: 34px; height: 34px; font-size: 12px; background: var(--av, var(--surface-2)); color: #101500; flex: none; }
.amg-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.amg-txt b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amg-txt small { color: var(--fg-2); font-size: 12px; }
.amg-add { display: grid; gap: 8px; }
.amg-add input { width: 100%; height: 44px; padding: 0 12px 0 38px; border: 0; border-radius: 12px; background: var(--fill); color: var(--fg); font: 500 15px var(--font); }
.amg-add input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); }
.amg-add .btn { justify-self: start; }
.pay-m input:checked + span small { color: var(--fg); }

/* ===== v34 · filtros das estatísticas recolhidos ===== */
.st-fbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-fbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: 700 13px/1 var(--font-display); box-shadow: var(--shadow); }
.st-fbtn .ic { font-size: 15px; }
.st-fbtn b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 800 11px/1 var(--font); }
.st-fbtn[aria-expanded="true"] { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.st-fsum { flex: 1; min-width: 0; color: var(--fg-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-lowchip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--fill); color: var(--fg-2); font: 700 12px/1 var(--font); }
.st-lowchip .ic { font-size: 13px; }
.st-lowchip[aria-expanded="true"] { background: var(--fill-strong); color: var(--fg); }
.st-fpanel { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), var(--shadow); animation: stIn 0.25s ease both; }
.st-fpanel[hidden], #stLow[hidden] { display: none; }
.st-fpanel .st-types { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.st-warn > span { min-width: 0; }

/* ===== v35 · foto do perfil ===== */
.av.has-photo, .mini-av.has-photo, .me-avatar.has-photo, .ph-mini.has-photo, .ph-big.has-photo { background: var(--surface-2); overflow: hidden; padding: 0; }
.av.has-photo.is-live, .me-avatar.has-photo.is-live { overflow: visible; }
.av-img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.me-av-wrap { position: relative; flex: none; display: inline-grid; }
.me-photo-btn { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 2px solid var(--surface); background: var(--ink); color: var(--ink-fg); cursor: pointer; transition: transform 0.12s; }
.me-photo-btn:active { transform: scale(0.92); }
.me-photo-btn .ic, .me-photo-btn svg { width: 14px; height: 14px; }
.me-photo-btn::before { content: ""; position: absolute; inset: -8px; } /* área de toque de 44px */
.ph-mini { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font: 800 14px/1 var(--font-display); }
.ph-row > span:nth-child(2) { flex: 1; min-width: 0; }
.ph-now { display: grid; justify-items: center; gap: 14px; padding: 8px 4px 4px; text-align: center; }
.ph-now p { margin: 0; max-width: 32ch; color: var(--fg-2); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.ph-big { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font: 800 44px/1 var(--font-display); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--brand); }
.ph-actions { display: grid; gap: 10px; margin-top: 18px; }
.ph-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn-danger-soft { color: #B83300; }
:root[data-theme="dark"] .btn-danger-soft { color: #FF8A5B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger-soft { color: #FF8A5B; } }
.ph-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); color: var(--fg-2); font-size: 12.5px; line-height: 1.45; }
.ph-note .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.ph-stage { position: relative; margin: 6px auto 0; border-radius: 50%; overflow: hidden; background: #111; touch-action: none; cursor: grab; outline: none; }
.ph-stage:active { cursor: grabbing; }
.ph-stage:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand); }
.ph-stage canvas { display: block; }
.ph-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); pointer-events: none; }
.ph-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--fg-2); font-size: 13px; }
.ph-hint .ic { width: 14px; height: 14px; }
.ph-zoom { display: flex; align-items: center; gap: 10px; max-width: 260px; margin: 10px auto 0; color: var(--fg-2); }
.ph-zoom .ic { flex: none; width: 16px; height: 16px; }
.ph-zoom input { flex: 1; accent-color: var(--brand); }

/* ===== v36 · auditoria de acabamento: quebra de linha, respiro e vazamentos ===== */
/* sem palavra sozinha na última linha; títulos equilibrados */
body { text-wrap: pretty; }
h1, h2, h3, .wl-title, .sheet-head h2, .modal h2, .card-title, summary { text-wrap: balance; }
/* segmentos: cada opção com no mínimo a largura do texto (ex.: "Personalizado" não empurra "Privado" para fora) */
.seg-wide { grid-auto-columns: minmax(max-content, 1fr); }
.seg span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .seg span { padding-left: 8px; padding-right: 8px; } .seg span .ic { margin-right: 3px; } }
/* recordes e partidas: data e adversários em até 2 linhas, sem cortar no meio do nome */
.rec-txt small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; }
/* tabela por jogador: nome fixo à esquerda e sombra indicando que rola para o lado */
.table-wrap { position: relative; overscroll-behavior-x: contain;
  background: linear-gradient(to left, var(--surface) 40%, transparent) right center / 28px 100% no-repeat local,
              radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right center / 12px 100% no-repeat scroll; }
.players-table th:first-child, .players-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); padding-right: 10px; }
.players-table td:first-child { white-space: nowrap; }
.wl-title > span { display: block; text-wrap: balance; }
/* placar: nomes da dupla e dica da voz em até 2 linhas, em vez de cortar com reticências */
.team-players { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
.team-players:empty { display: none; }
.voice-text span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
.team-players, .row > span:not([class]), .grow-txt small { text-wrap: balance; }
.ach-latest-txt small, .card-who span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; text-wrap: pretty; }
/* cabeçalho do card da timeline: data/local e nome do grupo com reticências de verdade (não corte seco) */
button.mtag.gtag { max-width: 128px; }
.gtag-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow-txt b, .help-tip b, .ach-item b { text-wrap: balance; }
.act-place { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* a data fica inteira; o local encolhe com reticências */
.act-badges { flex: 0 1 auto; min-width: 0; max-width: 36%; }
.act-badges button.mtag.gtag { max-width: 100%; }
/* data e local: o local vai para a linha de baixo (inteiro ou com reticências), a data nunca corta */
.act-who > span:has(> .act-when) { flex-wrap: wrap; row-gap: 1px; }
.act-place { flex: 1 1 100%; min-width: 0; white-space: nowrap; }
.act-when { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.act-when > span { min-width: 0; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; }
.act-when { align-items: flex-start; }
.act-when .ic { margin-top: 1px; }
.act-when .ic { flex: none; font-size: 13px; }

/* ===== v37 · partida publicada (líquido verde-claro + raio) ===== */
.pubfx { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; cursor: pointer; }
.pubfx-liquid { position: absolute; inset: 0; width: 100%; height: 100%; }
.pubfx-in { position: relative; display: grid; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: #0B0D05; }
.pubfx-logo { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 28px; background: #0B0D05; color: #AFFB48; box-shadow: 0 18px 40px rgba(40, 70, 0, 0.28); margin-bottom: 14px; opacity: 0; transform: translateY(-40px) scale(0.6) rotate(-10deg); animation: pubLogo 0.62s cubic-bezier(0.2, 1.6, 0.4, 1) 0.42s forwards; }
.pubfx-logo .ic { width: 52px; height: 52px; }
.pubfx-in b { font: 900 40px/0.95 var(--font-cond); text-transform: uppercase; letter-spacing: -0.01em; opacity: 0; transform: translateY(14px); animation: pubTxt 0.4s ease-out 0.62s forwards; }
.pubfx-sub { font: 700 16px/1.3 var(--font-display); opacity: 0; transform: translateY(10px); animation: pubTxt 0.4s ease-out 0.72s forwards; }
.pubfx-in small { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(11, 13, 5, 0.62); opacity: 0; animation: pubTxt 0.4s ease-out 0.82s forwards; }
.pubfx.out { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; transform: scale(1.04); }
@keyframes pubLogo { 60% { opacity: 1; transform: translateY(4px) scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes pubTxt { to { opacity: 1; transform: none; } }
.pubfx.rm .pubfx-logo, .pubfx.rm .pubfx-in b, .pubfx.rm .pubfx-sub, .pubfx.rm .pubfx-in small { animation: none; opacity: 1; transform: none; }
.pubfx.rm { animation: pubFade 0.2s ease; }
@keyframes pubFade { from { opacity: 0; } }

/* ===== v38 · conquista em vitrine: luz de cima, pedestal, giro de peão e verso gravado ===== */
.trophy {
  --m1: #C8FF6A; --m2: #4F8F00;
  position: relative; width: 100%; height: 300px; margin: 2px 0 4px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 85% at 50% 0%, #262a31 0%, #111316 55%, #07080a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -40px 60px rgba(0, 0, 0, 0.45);
  perspective: 820px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none;
}
.trophy:active { cursor: grabbing; }
.trophy:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 3px var(--surface), 0 0 0 5px var(--brand); }
/* o cone de luz e a lâmpada lá em cima */
.tr-spot { position: absolute; top: 0; left: 50%; width: 300px; height: 300px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 249, 222, 0.42), rgba(255, 249, 222, 0.1) 62%, rgba(255, 249, 222, 0));
  clip-path: polygon(43% 0, 57% 0, 90% 100%, 10% 100%); filter: blur(7px); }
.tr-spot::before { content: ""; position: absolute; top: -8px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: #FFF8DC; filter: blur(4px); box-shadow: 0 0 30px 10px rgba(255, 246, 210, 0.55); }
.trophy:not(.got) .tr-spot { opacity: 0.45; }
.trophy.unlock .tr-spot { animation: trSpotOn 0.9s linear both; }
@keyframes trSpotOn { 0% { opacity: 0; } 8% { opacity: 0.9; } 13% { opacity: 0.1; } 22% { opacity: 1; } 28% { opacity: 0.35; } 40%, 100% { opacity: 1; } }
/* poeira no feixe */
.tr-motes { position: absolute; inset: 0; pointer-events: none; }
.tr-motes i { position: absolute; top: 60%; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 248, 220, 0.8); animation: trMote 7s linear infinite; opacity: 0; }
.tr-motes i:nth-child(1) { margin-left: -40px; animation-delay: 0s; }
.tr-motes i:nth-child(2) { margin-left: 22px; animation-delay: 1.4s; animation-duration: 8s; }
.tr-motes i:nth-child(3) { margin-left: -12px; animation-delay: 2.9s; }
.tr-motes i:nth-child(4) { margin-left: 46px; animation-delay: 4.1s; animation-duration: 9s; }
.tr-motes i:nth-child(5) { margin-left: -58px; animation-delay: 5.3s; }
@keyframes trMote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.5; } 100% { transform: translate(14px, -170px); opacity: 0; } }
/* a medalha: flutua e gira só no eixo vertical */
.tr-float { position: absolute; left: 50%; top: 40px; width: 150px; height: 150px; margin-left: -75px; transform-style: preserve-3d; animation: trBob 3.4s ease-in-out infinite; }
.trophy.unlock .tr-float { animation: trDrop 0.9s cubic-bezier(0.2, 1.35, 0.4, 1) both, trBob 3.4s ease-in-out 0.9s infinite; }
@keyframes trBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes trDrop { 0% { transform: translateY(-190px) scale(0.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); } }
.tr-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.tr-face { position: absolute; inset: 0; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: brightness(var(--lit, 1)); }
.tr-front { transform: translateZ(4px); }
.tr-back { transform: rotateY(180deg) translateZ(4px); }
.medal.tr-m { --s: 150px; margin: 0; }
.tr-front .medal.tr-m.got { filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--m2) 50%, transparent)); }
.tr-front .medal.tr-m .ic { width: 42%; height: 42%; }
/* borda: camadas finas uma atrás da outra dão a espessura quando ela vira de lado */
.medal.tr-layer { position: absolute; inset: 0; transform: translateZ(var(--z)); filter: brightness(calc(0.55 + var(--edge, 0) * 0.55)); }
.medal.tr-layer::before { background: linear-gradient(90deg, color-mix(in srgb, var(--m2) 65%, #000), color-mix(in srgb, var(--m1) 70%, var(--m2)), color-mix(in srgb, var(--m2) 55%, #000)); }
.medal.tr-layer::after { display: none; }
.medal.tr-layer:not(.got)::before { background: #3a3d42; }
/* reflexo da luz que corre pela face conforme o giro */
.medal.tr-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; }
.medal.tr-shine::before { background: linear-gradient(105deg, rgba(255, 255, 255, 0) calc(var(--sh, 50%) - 22%), rgba(255, 255, 255, 0.85) var(--sh, 50%), rgba(255, 255, 255, 0) calc(var(--sh, 50%) + 22%)); }
.medal.tr-shine::after { inset: 0; background: radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%); }
/* verso: metal escovado e o texto gravado (data, hora, placar) */
.medal.tr-bm::after { background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.05) 1px 3px),
    radial-gradient(110% 100% at 35% 20%, color-mix(in srgb, var(--m1) 55%, var(--m2)), color-mix(in srgb, var(--m2) 80%, #000) 78%); }
.medal.tr-bm:not(.got)::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(0, 0, 0, 0.06) 1px 3px), #2c2f34; }
.tr-eng { position: absolute; inset: 22% 14%; display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center; color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.22); }
.tr-eng em { font: 600 8.5px/1.1 var(--font-mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.tr-eng b { font: 900 21px/1 var(--font-cond); letter-spacing: 0.01em; }
.tr-eng span { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: 0.04em; }
.tr-eng i { display: grid; margin-top: 4px; opacity: 0.7; }
.tr-eng i .ic { width: 15px; height: 15px; }
/* pedestal com a sombra da medalha */
.tr-base { position: absolute; left: 50%; bottom: 26px; width: 200px; height: 70px; transform: translateX(-50%); pointer-events: none; }
.tr-base::before, .tr-base::after { content: ""; position: absolute; left: 0; right: 0; }
.tr-base::after { top: 18px; bottom: 0; border-radius: 0 0 50% 50% / 0 0 22px 22px; background: linear-gradient(90deg, #0d0f11, #2b2f35 46%, #3a3f46 52%, #0d0f11); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6); }
.tr-base::before { top: 0; height: 36px; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #5a606a, #2e3238 58%, #17191c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 34px color-mix(in srgb, var(--m1) 22%, transparent); }
.tr-shadow { position: absolute; z-index: 2; top: 8px; left: 50%; width: 110px; height: 16px; margin-left: -55px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%); animation: trShadow 3.4s ease-in-out infinite; }
@keyframes trShadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.82); opacity: 0.7; } }
.tr-fx { position: absolute; inset: 0; pointer-events: none; }
.tr-hint { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--fg-2); font-size: 12px; }
.tr-hint .ic { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .tr-float, .trophy.unlock .tr-float, .tr-shadow, .trophy.unlock .tr-spot { animation: none; }
  .tr-motes { display: none; }
}
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ghost > svg { width: 1em; height: 1em; font-size: 18px; flex: none; }
.tr-eng .tr-sc { font-size: 10px; opacity: 0.9; }

/* ===== v39 · seletor de jogadores em tela própria (não fica preso no card e acompanha o teclado) ===== */
.pl-addbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px dashed var(--hair-strong); border-radius: 12px; background: none; color: var(--fg-2); font: 600 14px/1.2 var(--font-display); text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pl-addbtn:hover, .pl-addbtn:focus-visible { background: var(--fill); border-color: var(--fg-3); color: var(--fg); }
.pl-addbtn .ic { width: 18px; height: 18px; flex: none; }
.pl-chip.me { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, var(--hair)); }
.pl-lock { display: grid; place-items: center; width: 32px; height: 32px; color: var(--fg-3); flex: none; }
.pl-lock .ic { width: 15px; height: 15px; }
.plp { position: fixed; z-index: 67; left: 0; right: 0; top: 0; height: 100%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); }
.plp[hidden] { display: none; }
.plp-card { display: flex; flex-direction: column; width: min(480px, calc(100vw - 32px)); height: min(640px, 86vh); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); overflow: hidden; }
.plp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px 8px; }
.plp-head > div { display: grid; gap: 1px; min-width: 0; }
.plp-head h2 { margin: 0; font: 800 18px/1.2 var(--font-display); }
.plp-head small { color: var(--fg-2); font-size: 12.5px; }
.plp-search { display: flex; align-items: center; gap: 10px; margin: 6px 14px 8px; padding: 0 14px; height: 48px; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); }
.plp-search:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.plp-search .ic { width: 18px; height: 18px; color: var(--fg-2); flex: none; }
.plp-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--fg); font: 500 16px/1 var(--font); outline: none; } /* 16px: o iPhone não dá zoom ao focar */
.plp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 8px 16px; display: grid; align-content: start; gap: 2px; }
.plp-sec { margin: 10px 8px 4px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.plp-empty { margin: 18px 10px; color: var(--fg-2); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.plp .pl-opt { min-height: 52px; }
.plp .pl-opt small { color: var(--fg-2); font-size: 12px; }
.plp .pl-opt.limited small { color: var(--warn, #B86E00); }
.plp .pl-opt[disabled] { opacity: 0.45; }
.mini-av.plus { background: var(--fill-strong, var(--fill)); color: var(--fg); }
.mini-av.plus .ic { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .plp { place-items: stretch; background: var(--surface); }
  .plp-card { width: 100%; height: 100%; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top, 0px); }
}
body.plp-on { overflow: hidden; }
/* partida de grupo: escolha do grupo e "estou jogando" */
.gnew-pick { display: flex; align-items: center; gap: 12px; }
.gnew-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fill); color: var(--fg-2); }
.gnew-ic .ic { width: 20px; height: 20px; }
.gnew-lbl { flex: 1; display: grid; gap: 2px; min-width: 0; }
.gnew-lbl b { font: 700 14px/1.2 var(--font-display); }
.gnew-lbl small { color: var(--fg-2); font-size: 12px; line-height: 1.35; }
.gnew-pick select { flex: none; max-width: 46%; height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill); color: var(--fg); font: 600 13px/1 var(--font-display); }
.gnew-play { padding: 10px 2px 0; border-top: 1px solid var(--hair); }
.gnew-pick { flex-wrap: wrap; }
.gnew-pick select { flex: 1 1 100%; max-width: none; height: 44px; font-size: 14px; }
/* convidado que ainda não confirmou: nome opaco e sem link */
.pl-pend { color: var(--fg-2); font-weight: 500; cursor: default; text-decoration: underline dotted; text-underline-offset: 3px; }   /* sem opacidade: o nome continua legível (contraste AA) */
.pl-off { cursor: default; }
.prow.pend .av, .prow.pend .prow-txt b { opacity: 0.55; }

/* ===== v40 · excluir para mim / pedir para todos ===== */
.del-opts { display: grid; gap: 8px; width: 100%; }
.del-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; text-align: left; }
.del-opt input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.del-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); }
.del-opt span { display: grid; gap: 4px; }
.del-opt b { display: flex; align-items: center; gap: 6px; font: 700 14px/1.2 var(--font-display); }
.del-opt b .ic { width: 16px; height: 16px; }
.del-opt small { color: var(--fg-2); font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.del-two #delMe, .del-two #delAll { display: grid; gap: 10px; width: 100%; }
.del-two #delMe[hidden], .del-two #delAll[hidden] { display: none; }
.del-why { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.del-why select { height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill); color: var(--fg); font: 600 14px/1 var(--font-display); }
.del-two .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; }
.del-pend { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); color: var(--fg-2); font-size: 13px; }
.del-pend .ic { width: 16px; height: 16px; flex: none; }
.del-pend.fixed-note { background: var(--brand-soft); color: var(--fg); }
.del-pend.fixed-note .ic { color: var(--brand-ink); }
/* notificações: várias marcações do mesmo grupo numa só, e o aviso com Desfazer */
.ntg .gbadge { flex: none; }
.ntg-list { margin-top: 8px; }
.ntg-list summary { cursor: pointer; color: var(--fg-2); font: 600 13px/1.3 var(--font-display); padding: 4px 0; }
.ntg-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ntg-row .notif-card { flex: 1; min-width: 0; margin: 0; }
.ntg-row .notif-card small { display: block; color: var(--fg-2); font-size: 11.5px; font-weight: 500; }
.ntg-ok { color: var(--brand-ink, var(--brand)); }
.undo-toast { gap: 8px; }
.undo-btn { flex: none; background: var(--brand) !important; color: var(--on-brand) !important; border: 0; }
.undo-toast .xct-bar { animation-duration: 3.2s !important; }
.panel.undo-dec { display: flex; align-items: center; gap: 12px; }
.panel.undo-dec > .ic { flex: none; width: 20px; height: 20px; color: var(--fg-2); }
.panel.undo-dec > span { flex: 1; display: grid; gap: 3px; }
.panel.undo-dec small { color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.rep-box { display: grid; gap: 12px; }
.rep-opts { display: grid; gap: 6px; }
.rep-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--fill); cursor: pointer; font-size: 14px; }
.rep-opt input { accent-color: var(--alert); flex: none; }
.rep-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--alert); }
.rep-box .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rep-box textarea { width: 100%; }
.gbadge.has-photo { overflow: hidden; background: var(--surface-2); padding: 0; }
.gbadge.has-photo .av-img { border-radius: inherit; }
.ph-big.grp { border-radius: 32px; background: var(--fill); color: var(--fg-2); box-shadow: none; }
.ph-big.grp .ic { width: 56px; height: 56px; }
.ph-big.grp .av-img { border-radius: 32px; }
.ghead-top .me-av-wrap { flex: none; }

/* ===== v41 · avisos com ícone e ações de "erro" em laranja ===== */
.toast { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; }
.toast > .ic { flex: none; width: 18px; height: 18px; color: var(--brand); }
.toast.warn > .ic { color: #FF8A5B; }
.toast > span { display: grid; gap: 2px; }
.toast small { font: 500 12.5px/1.3 var(--font); opacity: 0.78; }
.btn-warn, .btn-danger { background: #D23F00 !important; color: #FFFFFF !important; border: 0 !important; }
.btn-warn:disabled, .btn-danger:disabled { opacity: 0.45; }
.btn-warn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-warn > svg, .btn-warn .ic { width: 16px; height: 16px; }
.undo-toast.warn .xct-txt > .ic { color: #FF8A5B; }
.undo-toast .xct-txt small { display: block; font-size: 12px; opacity: 0.78; }
.undo-toast.warn .xct-bar { background: #FF8A5B; }
.linkish.warn { color: #C23A00; }
:root[data-theme="dark"] .linkish.warn { color: #FF8A5B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .linkish.warn { color: #FF8A5B; } }
.del-ic.info { background: var(--fill); color: var(--fg-2); }
/* correção de placar */
.fix-box { display: grid; gap: 12px; }
.fix-head, .fix-row { display: grid; grid-template-columns: 52px 1fr 18px 1fr 36px; align-items: center; gap: 8px; }
.fix-head b { font: 700 12.5px/1.2 var(--font-display); text-align: center; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-sets { display: grid; gap: 8px; }
.fix-lbl { font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.fix-row input { width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--fill); color: var(--fg); text-align: center; font: 800 22px/1 var(--font-cond); }
.fix-row > b { text-align: center; color: var(--fg-3); }
.fix-box .linkish { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.fix-box .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; }
.match-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.fix-link { color: var(--fg-2) !important; }
.kpi b.kpi-txt { font-size: clamp(15px, 4.6vw, 20px) !important; line-height: 1.15 !important; white-space: normal; overflow-wrap: anywhere; }

/* ===== v49 · animações em loop pausam fora da tela (app.js marca .anim-off) ===== */
.anim-off, .anim-off *, .anim-off::before, .anim-off::after, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
/* ===== v49 · telas estreitas (320–359 px: celulares pequenos ou com zoom de tela) e textos sem palavra sozinha ===== */
.rec-txt small, .pc-name small, .news-card span, .voice-text b, .voice-text span, .wl-live span { text-wrap: balance; }
@media (max-width: 359px) { .list .row small { text-wrap: balance; } }
.streak span { overflow-wrap: anywhere; hyphens: auto; }
.panel > *, .h2h, .h2h-row { min-width: 0; }   /* item de grid não cresce além do painel por causa de texto que não quebra */
@media (max-width: 359px) {
  .seg span { padding: 6px 8px; font-size: 12px; }
  .seg-wide { grid-auto-columns: minmax(0, 1fr); }
  .seg-wide span { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
  .seg span { padding: 6px 6px; }
  .streaks { gap: 6px; }
  .streak { padding: 10px 9px 12px; }
  .streak span { font-size: 11px; }
  .me-meta span { white-space: normal; min-width: 0; }
  .h2h-row { gap: 8px; }
  .h2h-row .rec { font-size: 13px; }
  .row:has(.row-ic) { column-gap: 10px; padding-left: 12px; padding-right: 12px; }
  .row:has(.row-ic):has(> span small) > .btn { grid-column: 2 / -1; justify-self: start; }   /* sem espaço para texto e botão lado a lado: o botão desce */
}
.act-badges button.mtag.gtag { padding-right: 9px; }

/* fundo do mapa de calor no painel de admin (?hm=1 dentro de um quadro do mesmo endereço) */
.hm-embed #splash, .hm-embed #welcome, .hm-embed #tour, .hm-embed #toast, .hm-embed dialog, .hm-embed .sheet, .hm-embed .scrim, .hm-embed #consentCard { display: none !important; }

/* ===== v54 · card da timeline mais limpo, fotos da partida e sugestões estilo Instagram ===== */
/* data e local um pouco menores */
.act-who > span:has(> .act-when) { font-size: 10.5px; }
.act-when .ic { font-size: 11.5px; }
.act-when > span { line-height: 1.3; }
/* tipo, grupo, manual e "fora da timeline": só o ícone (o nome aparece no detalhe e ao parar o dedo/mouse) */
.act-badges.ab-icons { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: none; flex: none; }
.abadge { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 0; background: var(--fill); color: var(--fg-2); }
.abadge .ic { width: 14px; height: 14px; }
button.abadge { cursor: pointer; }
button.abadge:hover { background: var(--fill-strong); color: var(--fg); }
.abadge.t-campeonato { background: color-mix(in srgb, #FFD400 24%, transparent); color: color-mix(in srgb, #B37700 75%, var(--fg)); }
.abadge.t-treino { background: color-mix(in srgb, #1A8CFF 18%, transparent); color: color-mix(in srgb, #1A8CFF 75%, var(--fg)); }
.abadge.t-resenha { background: color-mix(in srgb, #FF2E88 16%, transparent); color: color-mix(in srgb, #FF2E88 75%, var(--fg)); }
.abadge.t-desafio { background: var(--alert-soft); color: var(--alert); }
.abadge.t-aula { background: color-mix(in srgb, #9D5CFF 18%, transparent); color: color-mix(in srgb, #9D5CFF 75%, var(--fg)); }
.abadge.ab-m { background: none; box-shadow: inset 0 0 0 1px var(--hair-strong); }
.abadge.ab-o { background: none; box-shadow: inset 0 0 0 1px var(--hair-strong); color: var(--fg-3); }
/* rodapé: zap à esquerda; duração e sets pequenos no canto direito */
.act-foot-r { flex: none; display: flex; align-items: center; gap: 4px; }
.act-mini { display: inline-flex; align-items: center; gap: 10px; padding: 0 4px; color: var(--fg-2); }
.act-mini > span { display: inline-flex; align-items: center; gap: 3px; }
.act-mini .ic { width: 14px; height: 14px; color: var(--fg-3); }
.act-mini b { font: 700 14px/1 var(--font-num); letter-spacing: 0.01em; color: var(--fg); }
.act-mini small { font-size: 10.5px; font-weight: 600; color: var(--fg-2); margin-left: 1px; }
.act-detail .act-foot { flex-wrap: nowrap; }
/* "on fire" no card: o raio animado com o +N pequeno no canto de cima */
.act-who > .act-name { overflow: visible; }

/* fotos no card: carrossel de ponta a ponta, do quadrado ao paisagem (a de destaque manda no formato) */
.act-media { position: relative; margin: 0 -16px; width: calc(100% + 32px); max-width: none; aspect-ratio: var(--ar, 1); background: var(--fill); overflow: hidden; }
.act-media.detail { margin: 0; width: 100%; border-radius: 14px; }
.am-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.am-track::-webkit-scrollbar { display: none; }
.mf-item { flex: none; width: 100%; height: 100%; padding: 0; border: 0; background: none; scroll-snap-align: center; scroll-snap-stop: always; cursor: zoom-in; }
.mf-item img, .mf-th img, .mf-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-item img:not([src]), .mf-th img:not([src]), .mf-cell img:not([src]) { visibility: hidden; }
.mf-missing { display: none !important; }
.act-media:not(:has(.mf-item:not(.mf-missing))) { display: none; }
.am-count { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(10, 12, 8, 0.62); color: #fff; font: 700 11.5px/1.2 var(--font-num); letter-spacing: 0.04em; pointer-events: none; backdrop-filter: blur(6px); }
.am-count b { font-weight: 800; }
.am-dots { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.am-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); transition: background 0.2s, transform 0.2s; }
.am-dots i.on { background: #fff; transform: scale(1.15); }

/* tela cheia */
.mf-view { position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #07080A; color: #fff; }
.mf-view[hidden] { display: none; }
body.mf-open { overflow: hidden; }
.mf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.mf-count { font: 700 14px/1 var(--font-num); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); }
.mf-x { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.mf-x svg { width: 20px; height: 20px; }
.mf-x:focus-visible { outline: 2px solid #AFFB48; outline-offset: 2px; }
.mf-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.mf-strip::-webkit-scrollbar { display: none; }
.mf-slide { flex: none; width: 100%; height: 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.mf-slide img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.mf-capt { margin: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font: 700 15px/1.3 var(--font-display); color: rgba(255, 255, 255, 0.86); text-align: center; text-wrap: balance; }

/* escolher fotos (Salvar/Editar e Lançar) */
.mf-pick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 4px; scrollbar-width: none; }
.mf-pick::-webkit-scrollbar { display: none; }
.mf-th, .mf-add { position: relative; flex: none; width: 92px; height: 116px; border-radius: 14px; overflow: hidden; }
.mf-th { background: var(--fill); }
.mf-th.cover { box-shadow: inset 0 0 0 2px var(--brand); }
.mf-th.cover img { border-radius: 12px; }
.mf-add { display: grid; place-content: center; justify-items: center; gap: 4px; border: 1.5px dashed var(--hair-strong); background: var(--surface-2); color: var(--fg); text-align: center; cursor: pointer; }
.mf-add:hover { border-color: var(--brand-ink); }
.mf-add .ic { width: 24px; height: 24px; color: var(--brand-ink); }
.mf-add span { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.mf-add small { font-size: 11px; color: var(--fg-2); }
.mf-add input, .mf-cta input, .mf-more input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.mf-add:focus-within, .mf-cta:focus-within, .mf-more:focus-within { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.mf-del, .mf-star { position: absolute; top: 5px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 12, 8, 0.6); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
.mf-del { right: 5px; }
.mf-star { left: 5px; }
.mf-del svg, .mf-star svg { width: 14px; height: 14px; }
.mf-cover { position: absolute; left: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
.mf-cover svg { width: 10px; height: 10px; }
.mf-th.wait { display: grid; place-items: center; }
.mf-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--hair-strong); border-top-color: var(--brand-ink); animation: mfSpin 0.8s linear infinite; }
@keyframes mfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-spin { animation-duration: 2.4s; } }

/* sua partida: pôr fotos direto */
.mf-cta { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--hair-strong); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.mf-cta > .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.mf-cta > span { display: grid; gap: 2px; min-width: 0; }
.mf-cta b { font-size: 14px; }
.mf-cta small { font-size: 12px; color: var(--fg-2); text-wrap: pretty; }
.mf-more { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 700; cursor: pointer; }
.mf-more .ic { width: 16px; height: 16px; color: var(--brand-ink); }
.mf-more small { color: var(--fg-2); font-weight: 600; }

/* perfil: grade das fotos recentes */
.mf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 14px; overflow: hidden; }
.mf-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: var(--fill); cursor: zoom-in; }
.mf-n { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px; border-radius: 999px; background: rgba(10, 12, 8, 0.6); color: #fff; font: 700 10.5px/1.2 var(--font-num); }
.mf-n svg { width: 10px; height: 10px; }

/* detalhe: grupo por extenso e o aviso de estatística só para quem jogou */
.meta-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.meta-link .ic { font-size: 14px; color: var(--fg-3); }
.lock-note { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.lock-note .ic { flex: none; color: var(--fg-3); }

/* sugestões: o botão vira Seguindo/Pedido enviado e o card fica */
.sug .btn.follow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sug .btn.follow.on { background: var(--fill); color: var(--fg); border-color: var(--hair); }
.sug.done { border-color: color-mix(in srgb, var(--brand) 35%, var(--hair)); }
.suggest-row { scroll-behavior: smooth; scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
.sug { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .suggest-row { scroll-behavior: auto; } }
/* rodapé com zap + duração/sets: o texto do zap encolhe com reticências em vez de alargar a timeline (320 px) */
.feed > *, .sum > *, .act > * { min-width: 0; }
.act { grid-template-columns: minmax(0, 1fr); }
.act-foot > .zapbar { overflow: hidden; }
/* número de set de quem perdeu: mais claro que o do vencedor, mas com contraste de leitura (3:1 em texto grande) */
.ascore-sets b:not(.w) { color: color-mix(in srgb, var(--fg-3) 65%, var(--fg)); }

/* painel: passar o saque para o outro time (corrigir quem saca no meio da partida) */
.cp-serve-btn { border: 1px dashed color-mix(in srgb, var(--tc) 55%, transparent); background: none; color: var(--fg-2); cursor: pointer; }
.cp-serve-btn:hover { background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--fg); }

/* ===== v55 · Início nova: só ícones em cima e embaixo, card das 3 telinhas, Jogando agora compacto, Hi-Five ===== */
:root { --bell-fill: #A9ACB0; --pst-bg: #7D8186; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bell-fill: #C9CCC8; --pst-bg: #5E6165; } }
:root[data-theme="dark"] { --bell-fill: #C9CCC8; --pst-bg: #5E6165; }

/* topo: + e busca | Seja Pro | grupos e sino */
.hdr.hdr-home { justify-content: space-between; gap: 8px; min-height: 64px; padding: 10px 16px; border-bottom: 0; background: transparent; }
.hh-side { display: flex; gap: 8px; }
.hb { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--hair-strong); background: var(--surface-2); color: var(--fg); cursor: pointer; }
.hb svg { width: 21px; height: 21px; }
.hb:hover { background: var(--fill-strong); }
.hb .bell-n { top: -4px; right: -4px; }
.hb.bell.has svg { fill: var(--bell-fill); color: var(--bell-fill); }
.hh-pro { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: #101500; color: #F4F5F4; font: 700 15px/1 var(--font-display); cursor: pointer; }
.hh-pro svg { width: 16px; height: 16px; fill: #AFFB48; stroke: #AFFB48; }
.hh-pro.is-pro { border-color: rgba(175, 251, 72, 0.4); }
@media (max-width: 359px) { .hb { width: 40px; height: 40px; } .hh-side { gap: 6px; } .hh-pro { padding: 0 12px; font-size: 14px; } .hdr.hdr-home { padding: 10px 12px; } }

/* barra de baixo: 5 abas com ícone e nome */
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(440px, calc(100% - 24px)); padding: 5px; }
.tabbar .tab { display: grid; grid-auto-flow: row; justify-items: center; align-content: center; gap: 3px; height: 58px; padding: 0 2px; border-radius: 29px; font-size: 11px; font-weight: 600; color: var(--fg-2); }
.tabbar .tab > span:not(.tab-av) { white-space: nowrap; }
.tabbar .tab svg { font-size: 22px; }
.tabbar .tab.on { color: var(--brand-ink); background: var(--brand-soft); font-weight: 700; }
.tabbar .tab.on svg { stroke-width: 2.1; }
.tab-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: var(--brand); color: var(--on-brand); font: 800 10px/1 var(--font-display); }
.tab-av .av-img { width: 100%; height: 100%; }

/* card das 3 telinhas: sua sequência, seu mês, novidades (as bolinhas ficam dentro do card) */
.hcar { border-radius: 20px; background: linear-gradient(180deg, var(--surface-hi), var(--surface)); border: 1px solid var(--hair); box-shadow: var(--hi), var(--shadow); overflow: hidden; }
.hc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-slide { flex: none; width: 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; padding: 14px 16px 2px; display: flex; flex-direction: column; gap: 12px; min-height: 124px; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
button.hc-slide { cursor: pointer; }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.hc-top > b { font: 700 13px/1.2 var(--font-display); color: var(--fg-2); }
.hc-ic { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--hair-strong); background: none; color: var(--fg); cursor: pointer; }
.hc-ic svg { width: 15px; height: 15px; }
.hc-streak { display: flex; align-items: center; gap: 14px; }
.hc-num { position: relative; flex: none; display: grid; justify-items: center; width: 62px; }
.hc-num b { font: 800 44px/0.95 var(--font-num); color: var(--brand-ink); }
.hc-num small { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.hc-days { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.hcd { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.hcd i { font-style: normal; font-size: 11px; color: var(--fg-2); }
.hcd b { display: grid; place-items: center; width: 100%; max-width: 30px; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-strong); color: var(--fg-2); font: 600 12.5px/1 var(--font); }
.hcd b.past { box-shadow: none; background: var(--fill); }
.hcd b.today { box-shadow: inset 0 0 0 2px var(--fg); color: var(--fg); font-weight: 700; }
.hcd b.did { box-shadow: none; background: var(--brand); color: var(--on-brand); }
.hcd b.did svg { width: 15px; height: 15px; }
.hc-more { font-size: 13px; font-weight: 700; color: var(--brand-ink); }
.hc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hc-grid > span { display: grid; gap: 2px; min-width: 0; }
.hc-grid i { font-style: normal; font-size: 12px; color: var(--fg-2); }
.hc-grid b { font: 700 19px/1.1 var(--font-display); }
.hc-grid small { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--fg-2); }
.hc-grid small i { font-size: 8px; }
.hc-grid small.up i { color: var(--brand-ink); }
.hc-grid small.down i { color: var(--alert); }
.hc-partner { font-size: 12.5px; color: var(--fg-2); }
.hc-partner b { color: var(--fg); }
.hc-tag { padding: 3px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink); font: 700 11px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.hc-link { padding: 6px 0; border: 0; background: none; color: var(--brand-ink); font: 700 13px/1 var(--font-display); cursor: pointer; }
.hc-news { font: 700 16px/1.25 var(--font-display); text-wrap: balance; }
.hc-sub { margin-top: -8px; font-size: 12.5px; color: var(--fg-2); }
.hc-pro { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--brand-ink); background: none; color: var(--brand-ink); font: 700 12.5px/1 var(--font-display); cursor: pointer; }
.hc-pro svg { width: 12px; height: 12px; fill: currentColor; }
.hc-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 12px; }
.hc-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--hair-strong); transition: width 0.2s, background 0.2s; }
.hc-dots i.on { width: 18px; background: var(--fg); }

/* Jogando agora: título com ícone e cards pequenos que arrastam para o lado */
.live-strip { display: grid; gap: 10px; }
.ls-title { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--font-display); }
.ls-title svg { width: 16px; height: 16px; color: #2BD46A; }
.ls-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.ls-row::-webkit-scrollbar { display: none; }
/* largura fixa: 2 cards inteiros e o 3º cortado no meio, para dar a entender que a fila rola */
.ls-card { flex: none; display: flex; align-items: center; gap: 9px; width: 150px; height: 50px; padding: 0 11px 0 8px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface); color: var(--fg); text-align: left; cursor: pointer; }
.ls-av { width: 32px; height: 32px; min-width: 32px; font-size: 12px; }
.ls-txt { display: grid; flex: 1; min-width: 0; }   /* ocupa o meio: o selo do esporte vai para a borda direita */
.ls-txt b { font: 700 14px/1.1 var(--font-display); overflow: hidden; text-overflow: ellipsis; }
.ls-txt small { font-size: 11px; line-height: 1.1; color: var(--fg-2); }
.ls-sp { width: 16px; height: 16px; color: var(--brand-ink); }

/* card da partida: mais respiro, "…" no canto, tipo e duração na linha da data */
.act { gap: 18px; }
.act-mid { display: grid; gap: 12px; min-width: 0; }
.act-mid > .act-cap { margin: -4px 0 0; }
.act-more { flex: none; align-self: flex-start; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-2); cursor: pointer; }
.act-more svg { width: 20px; height: 20px; }
.act-more:hover { background: var(--fill); }
.act-when .act-off svg, .act-when > svg + svg { width: 13px; height: 13px; }
.act-grp { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 2px; }
.act-foot .act-share { flex: none; }

/* placar: fotos dos jogadores (até 2, depois +X); sem foto ou convidado, a inicial num círculo cinza */
.ascore-row { grid-template-columns: auto minmax(0, 1fr) auto 18px; }
.pstack { display: inline-flex; align-items: center; min-width: 22px; }
.pst { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--pst-bg); color: #FFFFFF; font: 700 10px/1 var(--font-display); box-shadow: 0 0 0 2px var(--surface-2); }
.pst + .pst { margin-left: -4px; }
.pst .av-img { width: 100%; height: 100%; border-radius: 50%; }
.pst-more { margin-left: 3px; font: 700 10px/1 var(--font-display); color: var(--fg-2); }

/* Hi-Five: as mãos do desenho; tocou, as mãos crescem e batem, os traços aparecem e fica verde */
.zap.hf { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; color: var(--fg-2); --hf-fill: transparent; --hf-line: currentColor; }
.zap.hf.on { color: var(--brand-ink); --hf-fill: var(--brand); --hf-line: var(--on-brand); background: none; }
.hf-ico { width: 28px; height: 28px; overflow: visible; fill: currentColor; stroke: none; }
.hf-h, .hf-r { transform-box: fill-box; }
.hf-h { transform-origin: 50% 92%; }
.hf-r { transform-origin: 50% 100%; }
.zap.hf.pop .hf-h { animation: hfGrow 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.zap.hf.pop .hf-r { animation: hfRays 0.6s ease-out; }
@keyframes hfGrow { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.32) rotate(-9deg); } 60% { transform: scale(0.94) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes hfRays { 0% { opacity: 0; transform: translateY(12px) scale(0.4); } 35% { opacity: 1; transform: translateY(-4px) scale(1.25); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .zap.hf.pop .hf-h, .zap.hf.pop .hf-r { animation: none; } }
.hfbar .zap-who { flex: 0 1 auto; }
.hfbar .zap-who > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 1.25; }

/* lista que abre embaixo ("…" da partida e o + do topo) */
.sheet-menu .sheet-form { padding-bottom: env(safe-area-inset-bottom, 0px); }
.menu-grab { display: block; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--hair-strong); }
.menu-title { margin: 0; padding: 8px 22px 2px; font: 600 13px/1.3 var(--font-display); color: var(--fg-2); outline: none; }
.sheet-body.menu-body { padding: 4px 0 14px; gap: 0; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 22px; border: 0; background: none; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.menu-item:hover { background: var(--fill); }
.menu-item.warn { color: var(--alert); }
.mi-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.mi-ic svg { width: 20px; height: 20px; }
.mi-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mi-txt b { font: 500 16.5px/1.25 var(--font-display); }
.mi-txt small { font-size: 13px; line-height: 1.35; color: var(--fg-2); }
.mi-tog { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fg-2); box-sizing: border-box; }
.mi-tog.on { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.mi-tog svg { width: 14px; height: 14px; stroke-width: 3; }

/* buscar pessoas e meu contato */
.search-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hair); }
.search-field svg { flex: none; width: 20px; height: 20px; color: var(--fg-2); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--fg); font: 500 16px/1 var(--font); outline: none; }
.search-field:focus-within { border-color: var(--brand-ink); }
.search-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.search-acts .btn { flex: 1 1 140px; justify-content: center; }
.search-list { display: grid; gap: 10px; }
.srch-h { margin: 4px 2px 0; font: 600 12px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.my-contact { display: grid; justify-items: center; gap: 10px; padding: 6px 0; }
.my-contact > b { font: 700 18px/1.2 var(--font-display); }
.qr-box { display: grid; place-items: center; width: 200px; height: 200px; padding: 10px; box-sizing: border-box; border-radius: 16px; background: #FFFFFF; color: #101500; font-size: 11px; overflow-wrap: anywhere; }
.qr-box svg { width: 100%; height: 100%; }
.field .count.near { color: var(--alert); }
/* itens da página não crescem além da tela por causa do carrossel (largura em % dentro de rolagem horizontal) */
.page > * { min-width: 0; }
.hcar, .hc-track { min-width: 0; max-width: 100%; }
.hc-streak { margin: auto 0; }

/* v56: on fire em tag, replay só como botão no card, anel de quem está jogando mais fino */
:root { --fire: #3FA31A; --fire-hi: #2E8A0C; --fire-bg: color-mix(in srgb, #8EE04A 16%, var(--surface-2)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fire: #8EDC3C; --fire-hi: #C4FF6E; --fire-bg: color-mix(in srgb, #AFFB48 12%, var(--surface-2)); } }
:root[data-theme="dark"] { --fire: #8EDC3C; --fire-hi: #C4FF6E; --fire-bg: color-mix(in srgb, #AFFB48 12%, var(--surface-2)); }
.act-name .onfire { margin-left: 2px; }
.act-rp { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--fg); font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; }
.act-rp .ic { width: 16px; height: 16px; color: var(--brand-ink); }
.act-rp:hover { background: var(--surface-2); }
.act-head .av.is-live { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px #2BD46A; }
.act-head .av.is-live::after { inset: -3px; border-width: 1px; }
.act-head .av.is-live .live-badge { width: 34%; height: 34%; min-width: 13px; min-height: 13px; left: -2px; bottom: -2px; box-shadow: 0 0 0 1.5px var(--surface); }
/* telas estreitas: o "Você e mais 9 deram Hi-Five" cabe numa linha (2 rostos, menos respiro) */
@media (max-width: 360px) {
  .hfbar { gap: 2px; }
  .hfbar .zap-who { padding: 4px 2px; gap: 5px; }
  .hfbar .faces .av:nth-child(n+3) { display: none; }
}
/* a tag não herda a letra grande do nome */
.onfire.onfire b, .act-who > .act-name .onfire b { font: inherit; min-width: auto; }
/* sem espaço para o nome e a tag: a tag desce, o nome não é cortado */
.act-who > .act-name { flex-wrap: wrap; row-gap: 3px; }
.act-who > .act-name > b { flex: 0 1 auto; }
/* v57: Você em abas (como o Strava): Progresso, Partidas, Fotos, Conquistas */
.me-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.me-actions .btn { justify-content: center; min-height: 40px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.me-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 4px -16px 0; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.me-tabs button { position: relative; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--fg-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.me-tabs button.on { color: var(--fg); }
.me-tabs button.on::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--brand-ink); }
.me-acts { display: grid; gap: 14px; }
.streak span { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; }
.gdeleg-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 2px 12px; color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.gdeleg-hint .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }
/* v57: notificações em lista (como no Strava): sem caixa por aviso, divisória fina, botões pequenos */
#notifBody { gap: 0; }
#notifBody .notif { position: relative; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
#notifBody .notif:last-child { border-bottom: 0; }
#notifBody .notif.new { background: none; box-shadow: none; }
#notifBody .notif.new::before { content: ""; position: absolute; left: -9px; top: 30px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-ink); }
#notifBody .notif-txt { gap: 8px; }
#notifBody .notif-act { justify-content: flex-start; }
#notifBody .notif-act .btn { flex: none; height: 32px; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; }
#notifBody .notif-act .btn .ic, #notifBody .notif-act .btn svg { width: 14px; height: 14px; }
#notifBody .notif-card { background: none; border-color: var(--line); }
/* detalhe da partida: o card da timeline no topo; o replay fica no painel Momento */
.act.act-detail .act-rp { display: none; }
.act.act-detail .act-title { font-size: 22px; }
/* v57: Ajustes em duas camadas (lista de assuntos → página do assunto) */
#prefsBody > .group.pf-off { display: none; }
#prefsBody > .group.pf-first > h3:first-child { display: none; }
.pf-list .pf-row { width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.pf-list .pf-row > span:nth-child(2) { flex: 1; min-width: 0; font-weight: 600; }
.pf-list .pf-row .chev { flex: none; width: 16px; height: 16px; color: var(--fg-3); }
.sheet-head .pf-back { margin-left: -8px; }
/* 320 px: os botões do perfil e as ações das notificações cabem */
.me-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.me-actions .btn { min-width: 0; padding: 0 10px; white-space: nowrap; }
#notifBody .notif-act { flex-wrap: wrap; }
@media (max-width: 360px) {
  .me-act-x { display: none; }
  .me-actions .btn { font-size: 12.5px; gap: 6px; }
  .me-tabs button { font-size: 12.5px; }
}
/* v58: Editar perfil do tamanho do texto, Compartilhar com o resto; brilho do filtro de esporte mais baixo e sem corte */
.me-actions { grid-template-columns: auto minmax(0, 1fr); }
.me-actions .btn:first-child { padding: 0 16px; }
.sport-filter { padding-block: 6px; margin-block: -4px; }
.sf.on { box-shadow: inset 0 0 0 1px rgba(175, 251, 72, 0.3), 0 2px 8px -4px rgba(175, 251, 72, 0.35); }
.ascore-row { grid-template-columns: 6px auto minmax(0, 1fr) auto 18px; }
.ascore-row > .ascore-c { width: 6px; height: 6px; border-radius: 50%; background: var(--tc); margin-right: -3px; }
.ascore-row.lose > .ascore-c { opacity: 0.75; }
/* v64: games feitos e levados (no lugar do radar): funciona só com o placar final */
.bal-panel { gap: 12px; }
.bal-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.bal-top > span { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.bal-top > span.ag { justify-items: end; text-align: right; }
.bal-top b { font: 800 34px/1 var(--font-num); }
.bal-top .for b { color: var(--brand-ink); }
.bal-top .ag b { color: var(--fg-2); }
.bal-top i { font-style: normal; font-size: 12px; line-height: 1.2; color: var(--fg-2); }
.bal-share { align-self: center; justify-items: center !important; gap: 2px; padding-top: 4px; }
.bal-share b { font: 800 22px/1 var(--font-num); }
.bal-share small { font-size: 11px; color: var(--fg-2); }
.bal-bar { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; }
.bal-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--brand); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bal-note { margin: -4px 0 0; }
.bal-mirror { position: relative; display: flex; align-items: stretch; gap: 4px; height: 160px; padding: 0 2px; }
.bal-mirror::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
.bal-col { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; }
.bal-col:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 6px; }
.bal-up, .bal-dn { position: relative; min-width: 0; }
.bal-up i, .bal-dn i { position: absolute; left: 0; right: 0; display: grid; place-items: center; min-height: 3px; border-radius: 4px; background: var(--brand); overflow: hidden; animation: balGrow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--k, 0) * 25ms) backwards; }
.bal-up i { bottom: 0; transform-origin: bottom; }
.bal-dn i { top: 0; transform-origin: top; background: color-mix(in srgb, var(--fg) 26%, transparent); }
.bal-col.l .bal-up i { background: color-mix(in srgb, var(--brand-ink) 55%, var(--surface)); }
.bal-up em, .bal-dn em { font: 700 10.5px/1 var(--font-num, inherit); font-style: normal; color: var(--on-brand); }
.bal-dn em, .bal-col.l .bal-up em { color: var(--fg); }
.bal-up i[style*="height:0%"] em, .bal-dn i[style*="height:0%"] em { display: none; }
@keyframes balGrow { from { transform: scaleY(0); } }
.bal-leg { flex-wrap: wrap; }
.bal-leg i.lw { background: color-mix(in srgb, var(--brand-ink) 55%, var(--surface)); }
.bal-leg i.dn { background: color-mix(in srgb, var(--fg) 26%, transparent); }
.bal-tap { color: var(--fg-3); }
.bal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bal-fact { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface-2); color: inherit; text-align: left; font: inherit; }
button.bal-fact { cursor: pointer; }
.bal-fact em { font-style: normal; font-size: 11.5px; color: var(--fg-2); }
.bal-fact b { font: 800 18px/1.1 var(--font-num); max-width: 100%; overflow-wrap: anywhere; }
.bal-fact small { font-size: 11px; line-height: 1.3; color: var(--fg-2); }
@media (prefers-reduced-motion: reduce) { .bal-up i, .bal-dn i { animation: none; } }

/* v60: tela da câmera do placar (no lugar da miniatura flutuante). Sempre escura, como a câmera do celular */
.cam-screen { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: #000; color: #F4F5F4; color-scheme: dark;
  --bg: #060708; --surface: #0E1011; --surface-hi: #141618; --surface-2: #181A1C; --fill: rgba(118, 118, 128, 0.24); --fill-strong: rgba(118, 118, 128, 0.34); --line: rgba(255, 255, 255, 0.07);
  --fg: #F4F5F4; --fg-2: #8F9397; --fg-3: #5E6165; --ink: #F4F5F4; --ink-fg: #0A0B0B; --seg-on: #2B2E31; --brand-ink: #AFFB48; --brand-soft: rgba(195, 250, 62, 0.14); --hair: rgba(255, 255, 255, 0.075); --hair-strong: rgba(255, 255, 255, 0.14); }
.cam-screen[hidden] { display: none; }
.cs-stage { position: relative; flex: 1; min-height: 0; background: #000; }
.cs-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #C9CCC8; font-size: 14px; text-align: center; }
.cs-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); }
.cs-top .icon-btn { background: rgba(0, 0, 0, 0.5); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam-screen.recording .cs-status { background: rgba(255, 59, 48, 0.9); }
.cam-screen.recording .cs-status .rec-dot { background: #FFFFFF; animation: recBlink 1.4s ease-in-out infinite; }
.cam-screen.recording .cs-stage { box-shadow: inset 0 0 0 3px rgba(255, 59, 48, 0.85); }
.cam-screen.cs-outro .cs-stage, .cam-screen.cs-outro #csFlip { display: none; }
.cam-screen.cs-outro .cs-top { position: static; }
.cs-panel { display: grid; gap: 14px; max-height: 58vh; overflow-y: auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-radius: 22px 22px 0 0; background: #0B0C0D; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06); }
.cam-screen.cs-outro .cs-panel { flex: 1; max-height: none; border-radius: 0; }
.cs-panel .vid-tune { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.cs-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 0; border-radius: 999px; background: #FF3B30; color: #FFFFFF; font: 800 16px/1 var(--font-display); cursor: pointer; }
.cs-go i { width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
.cs-go.stop { background: #2A2C2E; color: #FF6B60; }
.cs-go.stop i { border-radius: 3px; background: #FF6B60; box-shadow: none; }
.cs-go .pro-badge { margin-left: 2px; }
.cs-other { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); background: none; color: #F4F5F4; font: 600 14px/1.25 var(--font-display); text-align: left; cursor: pointer; }
.cs-other > span { flex: 1; }
.cs-other .ic { width: 20px; height: 20px; }
.cs-other .chev { width: 16px; height: 16px; color: #5E6165; }
.cs-meta { margin: 0; color: #8F9397; font-size: 12px; text-align: center; }
.cs-sub { display: flex; align-items: center; gap: 10px; }
.cs-sub b { font: 700 16px/1.2 var(--font-display); }
.cs-qrrow { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; align-items: center; }
.cs-qrrow .cam-qr { margin: 0; padding: 8px; border-radius: 14px; background: #FFFFFF; }
.cs-qrrow .cam-qr svg { display: block; width: 100%; height: auto; }
.cs-qrrow .cam-steps { margin: 0; padding-left: 18px; color: #C9CCC8; font-size: 13px; line-height: 1.45; }
@media (max-width: 360px) { .cs-qrrow { grid-template-columns: 1fr; } .cs-qrrow .cam-qr { max-width: 170px; } }
body.cam-screen-on { overflow: hidden; }
/* o selo de gravação no topo do placar */
.cam-btn .cam-time { display: none; }
.cam-btn.on, .cam-btn.warn { width: auto; min-width: 40px; padding: 0 12px 0 10px; gap: 6px; border-radius: 999px; }
.cam-btn.on { background: rgba(255, 59, 48, 0.16); color: #FF5A4F; }
.cam-btn.warn { background: rgba(255, 176, 32, 0.16); color: #FFB020; }
.cam-btn.on .cam-time, .cam-btn.warn .cam-time { display: inline; font: 800 13px/1 var(--font-cond, inherit); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cam-btn.on .cam-live, .cam-btn.warn .cam-live { display: none; }

/* v60: placar mais limpo — topo com câmera e Finalizar; o resto vai para o Mais */
.topbar .tb-more { display: none; }
.dock.quiet .voice { display: none; }
.fmt-info { display: grid; border-top: 1px solid var(--line); }
.fi-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fi-row span { color: var(--fg-2); }
.fi-row b { text-align: right; }
/* câmera: selo em linha, QR do tamanho certo e um só voltar */
.cam-btn.on, .cam-btn.warn { display: inline-flex; flex-direction: row; align-items: center; }
.cam-btn.on svg, .cam-btn.warn svg { width: 18px; height: 18px; }
.cam-screen.cs-outro .cs-top { display: none; }
.cs-qrrow .cam-qr { width: 100%; max-width: 150px; }
.cs-opts .vid-flag span { font-size: 13px; }

/* rótulo do número pequeno do placar (games ou sets), só no celular */
.team .sets .sets-lbl { display: none; }
@media (max-width: 600px) {
  .team .sets { align-items: baseline; }
  .team .sets .sets-lbl { display: inline-block; margin-right: 6px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
}
/* v60: Nova partida — jogadores primeiro (largura toda); embaixo, uma linha com a cor do time e o nome (opcional) */
.team-edit { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pl pl" "sw nm"; gap: 10px 12px; }
.team-edit .pl-slots { grid-area: pl; }
.team-edit .swatches { grid-area: sw; grid-row: auto; display: flex; gap: 6px; }
.team-edit .swatches label, .team-edit .swatches > * { flex: none; }
.team-edit input[id$="name"] { grid-area: nm; min-width: 0; width: 100%; }
@media (max-width: 380px) { .team-edit { grid-template-areas: "pl pl" "sw sw" "nm nm"; } }
/* a dica de voz é para quem usa voz: fica na ajuda de comandos, não no formulário */
#aliasHint { display: none; }
/* Partida de grupo: uma linha só (ícone, nome e o grupo ao lado) */
.gnew-pick { flex-wrap: nowrap; min-width: 0; }
.gnew-pick .gnew-lbl small { display: none; }
.gnew-pick select { flex: 0 1 46%; min-width: 0; max-width: 46%; }

/* v61: celular deitado — número maior, barra de baixo menor e a câmera em duas colunas */
@media (max-height: 520px) and (min-width: 601px) {
  .topbar { padding-block: 4px; }
  .dock { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .dock.quiet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "row" "typer"; }
  .dock.quiet .dock-row { justify-self: center; }
  .board { row-gap: 8px; --game-cell: clamp(150px, 24vw, 230px); }
  .board .game { font-size: min(calc(var(--game-cell) * 0.6), 23vh); }
  .team { padding-block: 6px; }
  .team-name { font-size: clamp(24px, 7.4vh, 34px); }
  .cam-screen { flex-direction: row; }
  .cam-screen .cs-stage { flex: 1; }
  .cam-screen .cs-panel { width: min(340px, 44vw); max-height: none; border-radius: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) 14px; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.06); }
  .cam-screen.cs-outro .cs-panel { width: auto; flex: 1; }
  .cam-screen .cs-top { right: min(340px, 44vw); }
  .cam-screen.cs-outro .cs-top { right: 0; }
  .cam-screen .cs-panel .vid-tune { justify-content: flex-start; }
}

/* v61: Live (Pro) na tela da câmera */
.cs-mode { margin: 0; }
.cs-mode .pro-badge { margin-left: 6px; }
.seg.is-locked { opacity: 0.5; }
.seg.is-locked input { cursor: not-allowed; }
.lv-form { display: grid; gap: 10px; }
.lv-field { display: grid; gap: 6px; color: #8F9397; font-size: 12px; font-weight: 600; }
.lv-field input { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(118, 118, 128, 0.24); color: #F4F5F4; font: 600 15px/1 var(--font-display); }
.lv-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand); }
.lv-key { display: flex; align-items: center; gap: 6px; }
.lv-key input { flex: 1; min-width: 0; font-family: var(--font-num, monospace); letter-spacing: 0.04em; }
.lv-key .icon-btn { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(118, 118, 128, 0.24); color: #F4F5F4; }
.lv-audio { align-self: flex-start; }
.lv-error, .lv-off { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
.lv-error { background: rgba(255, 90, 95, 0.14); color: #FF8A80; }
.lv-off { background: rgba(118, 118, 128, 0.18); color: #C9CCC8; }
.lv-error .ic, .lv-off .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.cs-go.live { gap: 8px; }
.cs-go.live .ic { width: 20px; height: 20px; }
.cs-go:disabled { opacity: 0.5; cursor: not-allowed; }
.lv-on { display: grid; gap: 10px; }
.lv-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 59, 48, 0.16); color: #FFFFFF; }
.lv-status.slow { background: rgba(255, 176, 32, 0.18); }
.lv-status .rec-dot { background: #FF3B30; }
.lv-status b { font: 800 15px/1 var(--font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.lv-status span { margin-left: auto; color: #C9CCC8; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cam-screen.live .cs-status { background: rgba(255, 59, 48, 0.9); }
.cam-screen.live .cs-status .rec-dot { background: #FFFFFF; animation: recBlink 1.4s ease-in-out infinite; }
.cam-screen.live .cs-stage { box-shadow: inset 0 0 0 3px rgba(255, 59, 48, 0.85); }
/* selo LIVE no topo do placar */
.cam-btn.live { display: inline-flex; flex-direction: row; align-items: center; width: auto; min-width: 40px; gap: 6px; padding: 0 12px 0 10px; border-radius: 999px; background: #FF3B30; color: #FFFFFF; }
.cam-btn.live svg { width: 18px; height: 18px; }
.cam-btn.live .cam-time { display: inline; font: 800 13px/1 var(--font-cond, inherit); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cam-btn.live .cam-time::before { content: "LIVE "; font-size: 10px; letter-spacing: 0.08em; }
.cam-btn.live .cam-live { display: none; }

/* ---------- Timeline no estilo Strava: cada atividade é um bloco de ponta a ponta da tela, cinza sobre o fundo preto,
   separado do próximo por uma faixa fina do fundo; o placar fica solto dentro do bloco, sem caixa ---------- */
:root { --feed-card: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --feed-card: #16181A; } }
:root[data-theme="dark"] { --feed-card: #16181A; }
.feed:has(> .act) { gap: 8px; margin: 0 -16px; }
.feed:has(> .act) > :not(.act) { margin: 8px 16px; }
.feed > .act:not(.act-detail) { padding: 16px 16px 4px; border: 0; border-radius: 0; background: var(--feed-card); box-shadow: none; }
.feed > .act:not(.act-detail):hover { border-color: transparent; }
.feed > .act:not(.act-detail) .act-foot { margin: 0 -6px; padding-top: 0; border-top: 0; }
.feed > .act:not(.act-detail) .act-media { margin: 0 -16px; width: calc(100% + 32px); }
.feed > .act:not(.act-detail) .ascore { padding: 0; border: 0; border-radius: 0; background: none; }
.feed > .act:not(.act-detail) .pst { box-shadow: 0 0 0 2px var(--feed-card); }

/* ---------- Carrossel do início (Sua sequência, Seu mês, Novidades) mais baixo ---------- */
.hc-slide { padding: 12px 16px 0; gap: 8px; min-height: 0; }
.hc-top { min-height: 24px; }
.hc-num b { font-size: 38px; }
.hc-num small { font-size: 11.5px; }
.hcd { gap: 3px; }
.hcd b { max-width: 28px; }
.hc-sub { margin-top: -4px; }
.hc-dots { padding: 8px 0 10px; }
/* todos os cartões do carrossel com a mesma altura do da sequência: nada muda de tamanho durante o arrasto */
.hc-grid { gap: 10px; }
.hc-grid > span { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 2px; min-width: 0; }
.hc-grid > span > i { flex: 1 0 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-grid b { font-size: 22px; white-space: nowrap; }
.hc-grid small { font-size: 11px; white-space: nowrap; }
.hc-top > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hc-more { flex: none; }
.hc-tagline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hc-tagline .hc-sub { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-news { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hc-month .hc-grid, .hc-slide > .hc-news { margin: auto 0; }

/* ---------- Timeline: ajustes finos ---------- */
/* legenda menor e mais colada no título */
.act-cap { font-size: 13px; line-height: 1.4; }
.act-mid > .act-cap { margin: -7px 0 0; }
/* bolinha da cor do time sobre a última foto da pilha (antes ficava solta à esquerda) */
.ascore-row { grid-template-columns: auto minmax(0, 1fr) auto 18px; }
.pstack { position: relative; }
.pstack > .ascore-c { position: absolute; right: -2px; bottom: -1px; width: 9px; height: 9px; margin: 0; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px var(--surface-2); }
.feed > .act:not(.act-detail) .pstack > .ascore-c { box-shadow: 0 0 0 2px var(--feed-card); }
.ascore-row.lose .pstack > .ascore-c { opacity: 1; }
/* nome em amarelo enquanto a marcação não foi aceita */
:root { --pend: #8A5F00; } /* tema claro: 5,7:1 sobre branco (antes 2,9:1) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pend: #FFD84D; } }
:root[data-theme="dark"] { --pend: #FFD84D; }
.ascore-who .me.me-pend { color: var(--pend); }
.act-invite-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 -4px 0 -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-3); cursor: pointer; }
.act-invite-x .ic { width: 14px; height: 14px; }
.act-invite-x:hover { color: var(--fg); background: var(--fill); }
/* quem está jogando: só o anel pulsante (sem o anel verde fixo) */
.av.is-live, .me-avatar.is-live, .act-head .av.is-live { box-shadow: none; }
.av-xl.is-live { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--av); }
.av.is-live::after, .me-avatar.is-live::after { inset: -3px; border-width: 2px; }
@keyframes liveRing { 0% { transform: scale(0.94); opacity: 0.95; } 70% { opacity: 0.25; } 100% { transform: scale(1.28); opacity: 0; } }
/* Hi-Five um pouco maior */
.zap.hf { height: 46px; padding: 0 10px 0 8px; }
.hf-ico { width: 34px; height: 34px; }
/* replay no rodapé, à esquerda do compartilhar */
.act-foot-r { gap: 6px; }
.act-foot .act-rp { min-height: 32px; padding: 0 11px 0 9px; font: 700 12.5px/1 var(--font-display); }
.act-foot .act-rp .ic { width: 15px; height: 15px; }
/* mais respiro abaixo do rodapé do bloco */
.feed > .act:not(.act-detail) { padding-bottom: 12px; }

/* ---------- Notificações: data pequena no canto superior direito ---------- */
#notifBody .notif { padding-right: 2px; }
#notifBody .notif-txt > .notif-when { position: absolute; top: 17px; right: 4px; font-size: 10.5px; line-height: 1; color: var(--fg-3); white-space: nowrap; }
#notifBody .notif-txt > p:first-child { padding-right: 52px; }

/* ---------- Nova partida mais enxuta ---------- */
.sport { padding: 12px 6px 10px; gap: 2px; }
.sport svg { margin-bottom: 0; }
/* o formato numa linha: resumo + Ajustar */
.fmt-row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; flex-wrap: nowrap; padding: 10px 14px; }
.fmt-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--fill); color: var(--fg); flex: none; }
.fmt-ic svg { width: 18px; height: 18px; }
.fmt-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fmt-txt b { font: 600 14px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmt-txt small { color: var(--fg-2); font-size: 12px; }
.fmt-adj { flex: none; color: var(--brand-ink); font: 700 13px/1 var(--font-display); }
.fmt-panel { display: grid; gap: 10px; }
.fmt-panel[hidden] { display: none; }
.fmt-panel .fmt-mode { margin-bottom: 0; }
.fmt-done { justify-self: end; }
/* resumo antes de começar */
.cf-body { gap: 18px; }
.cf-sport { display: flex; align-items: center; gap: 12px; }
.cf-sport > svg { width: 38px; height: 38px; color: var(--brand-ink); flex: none; }
.cf-sport b { display: block; font: 700 19px/1.2 var(--font-display); letter-spacing: -0.01em; }
.cf-sport small { color: var(--fg-2); font-size: 12.5px; }
.cf-fmt { display: grid; gap: 4px; padding: 12px 14px; }
.cf-fmt > b { font: 600 14.5px/1.3 var(--font-display); }
.cf-fmt summary { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); cursor: pointer; list-style: none; }
.cf-fmt summary::-webkit-details-marker { display: none; }
.cf-fmt details[open] summary { color: var(--fg-2); }
.cf-fmt details p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.cf-team { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-top: 1px solid var(--line); }
.cf-team:first-child { border-top: 0; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); flex: none; }
.cf-stack { display: inline-flex; flex: none; }
.cf-stack .mini-av { width: 28px; height: 28px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--surface-2); }
.cf-stack .mini-av + .mini-av { margin-left: -7px; }
.cf-names { display: grid; min-width: 0; gap: 1px; }
.cf-names b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-names small { color: var(--fg-2); font-size: 12px; }

/* ---------- Lançar partida mais direto ---------- */
.teams-pick { gap: 8px; }
.tp { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px 12px; box-shadow: none; }
.tp-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--tc); }
.tp .picker { min-width: 0; }
.ln-res { flex-wrap: nowrap; }
.ln-res > .seg { flex: none; }
.ln-more { border-radius: 16px; background: var(--surface-2); padding: 0 14px; }
.ln-more summary { display: flex; align-items: center; gap: 10px; min-height: 56px; cursor: pointer; list-style: none; }
.ln-more summary::-webkit-details-marker { display: none; }
.ln-more summary > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ln-more summary b { font: 700 14px/1.2 var(--font-display); }
.ln-more summary small { color: var(--fg-2); font-size: 12px; }
.ln-more-ic { width: 18px; height: 18px; color: var(--brand-ink); flex: none; }
.ln-more summary .chev { width: 16px; height: 16px; color: var(--fg-3); transform: rotate(90deg); transition: transform 0.2s; flex: none; }
.ln-more[open] summary .chev { transform: rotate(-90deg); }
.ln-more[open] summary .ln-more-ic { display: none; }
.ln-more-body { display: grid; gap: 20px; padding: 4px 0 16px; }
.ln-more-body .list, .ln-more-body .mf-pick { background: var(--surface); }

/* ---------- Avisos (toast): texto à esquerda, ícone num selo com contraste, largura que cabe em 2 linhas ---------- */
.toast { justify-content: flex-start; text-align: left; gap: 11px; width: max-content; max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px 10px 10px; border-radius: 16px; font: 600 14px/1.3 var(--font-display); }
.toast > .ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--brand); color: #101500; box-sizing: border-box; }
.toast.warn > .ic { background: #FF8A5B; color: #1F0B00; }
.toast > span { min-width: 0; }
.toast > span small { display: block; font: 500 12.5px/1.35 var(--font); opacity: 0.8; text-wrap: pretty; }

/* ---------- Barra inferior em vidro (o conteúdo passa por trás, desfocado) ---------- */
.tabbar { background: color-mix(in srgb, var(--surface) 46%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); border-color: color-mix(in srgb, var(--fg) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 10%, transparent), 0 10px 30px -12px rgba(0, 0, 0, 0.55); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tabbar { background: color-mix(in srgb, var(--surface) 62%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 30px -14px rgba(0, 0, 0, 0.35); } }
:root[data-theme="light"] .tabbar { background: color-mix(in srgb, var(--surface) 62%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 30px -14px rgba(0, 0, 0, 0.35); }
.tabbar .tab.on { background: color-mix(in srgb, var(--brand) 22%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tabbar { background: color-mix(in srgb, var(--surface) 94%, transparent); } }

/* ---------- Topo das telas em vidro: o conteúdo rola por baixo, desfocado ---------- */
.view:not(.view-play) { position: relative; --hdr-h: 58px; }
.view:not(.view-play):has(> .hdr-home) { --hdr-h: 64px; }
.view:not(.view-play) > .hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 20; min-height: var(--hdr-h); background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border-bottom: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
.view:not(.view-play) > .hdr.hdr-home { border-bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 46%, transparent)); }
/* o espaço do vidro é um bloco dentro da rolagem, não padding do contêiner: com padding, o que gruda (abas do Você, barra da
   timeline) parava 58px abaixo do topo, deixando uma faixa de conteúdo cortado entre o vidro e as abas (iPhone e Chrome) */
.view:not(.view-play) > .hdr ~ .scroll { padding-top: 0; }
.view:not(.view-play) > .hdr ~ .scroll::before { content: ""; display: block; height: var(--hdr-h); flex: none; }
.hdr-home .hb, .hdr-home .hh-pro { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* o que gruda no topo dentro da rolagem para logo abaixo do vidro */
.feed-bar, .me-tabs { top: var(--hdr-h, 0px); }
.pz-cta { top: calc(24px + var(--hdr-h, 0px)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .view:not(.view-play) > .hdr, .view:not(.view-play) > .hdr.hdr-home { background: color-mix(in srgb, var(--bg) 96%, transparent); } }

/* ---------- Compartilhar mais direto: mascote e opções do vídeo recolhidos ---------- */
.share-more { border-radius: 16px; background: var(--surface-2); padding: 0 14px; }
.share-more summary { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; list-style: none; }
.share-more summary::-webkit-details-marker { display: none; }
.share-more summary > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.share-more summary b { font: 700 14px/1.2 var(--font-display); }
.share-more summary small { color: var(--fg-2); font-size: 12px; }
.share-more .sm-ic { width: 18px; height: 18px; color: var(--brand-ink); flex: none; }
.share-more summary .chev { width: 16px; height: 16px; color: var(--fg-3); transform: rotate(90deg); transition: transform 0.2s; flex: none; }
.share-more[open] summary .chev { transform: rotate(-90deg); }
.share-more-body { display: grid; gap: 14px; padding: 2px 0 14px; }
.share-more-body .stk-block[hidden], .share-more-body .vid-opts[hidden] { display: none; }
.share-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; }
.share-link > small { grid-column: 1 / -1; }

/* ---------- Boas-vindas: o passo entra deslizando ---------- */
@keyframes wlIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wl-step > * { animation: wlIn 0.28s ease both; }
.wl-form { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(14, 16, 17, 0.72); }
@media (prefers-reduced-motion: reduce) { .wl-step > * { animation: none; } }

/* ===== v64 · grupo: filtros das estatísticas e lançamento rápido de resultados ===== */
.gfilt { display: grid; gap: 8px; }
.gfilt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gsel { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.gsel .ic { width: 14px; height: 14px; color: var(--fg-2); flex: none; }
.gsel select { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: 600 13px/1 var(--font-display); padding: 0; }
.perfil-actions { flex-wrap: wrap; }
.gl-head { display: flex; align-items: center; gap: 10px; }
.gl-head > span { display: grid; gap: 1px; min-width: 0; }
.gl-head b { font: 700 15px/1.2 var(--font-display); }
.gl-head small { color: var(--fg-2); font-size: 12.5px; }
.gl-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.gl-side { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair), inset 4px 0 0 var(--c-verde); min-width: 0; }
.gl-side.t1 { box-shadow: inset 0 0 0 1px var(--hair), inset 4px 0 0 var(--c-laranja); }
.gl-side .ic { width: 16px; height: 16px; color: var(--fg-2); flex: none; }
.gl-side > span { display: grid; gap: 1px; min-width: 0; }
.gl-side small { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.gl-side b { font: 700 13.5px/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glchip i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 800 11px/1 var(--font-cond); font-style: normal; background: rgba(0, 0, 0, 0.14); }
.glchip.t0 { background: var(--c-verde); border-color: var(--c-verde); color: #0B1A10; }
.glchip.t1 { background: var(--c-laranja); border-color: var(--c-laranja); color: #fff; }
.glchip.t1 i { background: rgba(255, 255, 255, 0.22); }
.gl-guest { display: flex; gap: 8px; margin-top: 10px; }
.gl-guest input { flex: 1; }
.gl-guest .btn { flex: none; }
.gl-actions { display: grid; gap: 8px; }
.gl-actions .btn { height: 44px; justify-content: center; }

/* ---------- Conferência geral ---------- */
/* ranking do grupo: rótulo em até 2 linhas em vez de cortado ("Mais tempo em qu…") */
.ghi-c small { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* indicadores do perfil: "aproveitamento" sem hífen no meio */
.streak span { hyphens: none; -webkit-hyphens: none; font-size: 11.5px; letter-spacing: -0.01em; }
/* Números: a prévia borrada do Pro mais curta (antes eram 1.100 px de rolagem sem leitura) */
.pz-content { max-height: 620px; }
/* "+ → Marcar partida agora": só os esportes */
#sheetChoose.only-live .choose-main { display: none; }
#sheetChoose.only-live section.choose-card > .choose-head { display: none; }

/* ---------- Destaques do grupo: título em evidência, pessoa embaixo, número por último ---------- */
.ghi-c { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
.ghi-c > .ic { display: none; }
.ghi-t { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.ghi-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-ink); }
.ghi-ic .ic { width: 15px; height: 15px; }
.ghi-c .ghi-t small { color: var(--fg); font: 700 13px/1.2 var(--font-display); letter-spacing: -0.005em; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ghi-p { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.ghi-p .av { grid-row: auto; width: 30px; height: 30px; font-size: 11px; flex: none; }
.ghi-c .ghi-p b { grid-row: auto; font: 600 13.5px/1.2 var(--font-display); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghi-c > .ghi-v { grid-column: auto; margin-top: -2px; font: 800 24px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
/* destaque sozinho na última linha ocupa a largura toda (7 destaques em 2 colunas) */
.ghi > .ghi-c:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 320 px: botões do painel Lançar ('Backhand', 'Dupla falta') e títulos dos destaques ('Aproveitamento') sem cortar */
@media (max-width: 359px) {
  .cp-btn { font-size: 12px; padding: 0 3px; letter-spacing: -0.01em; }
  .ghi-ic { display: none; }
  .ghi-c .ghi-t small { font-size: 12.5px; }
}

/* ---------- Vidro mais perceptível: menos desfoque, mais transparência e um brilho de borda (ar de vidro líquido) ---------- */
.tabbar { position: absolute; background: color-mix(in srgb, var(--surface) 34%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.55); backdrop-filter: blur(14px) saturate(1.55); border-color: color-mix(in srgb, var(--fg) 14%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 16%, transparent), inset 0 -1px 0 color-mix(in srgb, #FFFFFF 4%, transparent), 0 12px 32px -14px rgba(0, 0, 0, 0.6); overflow: hidden; }
.tabbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 46%, transparent 62%, rgba(255, 255, 255, 0.05) 100%); }
.tabbar > .tab { position: relative; z-index: 1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tabbar { background: color-mix(in srgb, var(--surface) 52%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 32px -16px rgba(0, 0, 0, 0.35); } }
:root[data-theme="light"] .tabbar { background: color-mix(in srgb, var(--surface) 52%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 32px -16px rgba(0, 0, 0, 0.35); }
.view:not(.view-play) > .hdr { background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); border-bottom-color: color-mix(in srgb, var(--fg) 10%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, #FFFFFF 5%, transparent); }
.view:not(.view-play) > .hdr.hdr-home { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent), color-mix(in srgb, var(--bg) 28%, transparent)); box-shadow: none; }
.feed-bar { background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); }
.hdr-home .hb { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 10%, transparent); }
.hdr-home .hh-pro { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* destaques do grupo: centralizados, foto maior e nome da pessoa em evidência */
.ghi-c { align-items: center; text-align: center; gap: 8px; padding: 14px 10px 16px; }
.ghi-t { justify-content: center; }
.ghi-c .ghi-t small { font: 600 12.5px/1.2 var(--font-display); color: var(--fg-2); }
.ghi-ic { width: 24px; height: 24px; border-radius: 8px; }
.ghi-ic .ic { width: 13px; height: 13px; }
.ghi-p { flex-direction: column; justify-content: center; gap: 6px; margin-top: 2px; }
.ghi-p .av { width: 52px; height: 52px; font-size: 18px; }
.ghi-c .ghi-p b { color: var(--fg); font: 700 15px/1.2 var(--font-display); max-width: 100%; }
.ghi-c > .ghi-v { margin-top: 0; font-size: 26px; color: var(--brand-ink); }

/* ---------- Registrar resultado: cartões consistentes, campos maiores e respiro ---------- */
.ln-card { display: grid; gap: 0; padding: 0; overflow: visible; }
.ln-modes-row { padding: 10px 12px 4px; }
.ln-modes { justify-self: stretch; width: 100%; }
.ln-score { display: grid; gap: 8px; padding: 10px 14px 4px; }
.ln-score:empty { padding: 0; }
.ln-card .setrow { grid-template-columns: 44px minmax(0, 1fr) auto minmax(0, 1fr) 32px; gap: 8px; }
.ln-card .setrow > span { font-size: 10px; }
.ln-card .setrow input { height: 52px; border-radius: 14px; font-size: 24px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); }
.ln-card .setrow input::placeholder { font-size: 12.5px; }
.ln-card .setrow em { font-size: 18px; }
.ln-card .setrow .icon-btn { width: 32px; height: 32px; }
/* placar com − e + de cada lado do número (Registrar resultado e Lançar resultados do grupo). Sem a coluna do X quando há uma linha só. */
.ln-card .setrow { grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
.ln-card .setrow:has(.icon-btn) { grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 1fr) 32px; }
.ln-card .setrow:not(:has(.icon-btn))::after { content: none; }
.ln-card .setrow input { height: 48px; border-radius: 12px; }
.ln-card .setrow input::placeholder { font-size: 11.5px; }
.sc-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 2px; min-width: 0; }
.sc-btn { width: 30px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: var(--fill); color: var(--fg-2); font: 600 20px/1 var(--font-display); cursor: pointer; touch-action: manipulation; }
.sc-btn:active { background: var(--fill-strong); color: var(--fg); }
@media (max-width: 359px) {
  .ln-card .setrow { grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; }
  .ln-card .setrow:has(.icon-btn) { grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr) 28px; }
  .ln-card .setrow > span:first-child { font-size: 9px; letter-spacing: 0.03em; }
  .ln-card .setrow input { font-size: 20px; }
  .ln-card .setrow input::placeholder { font-size: 10px; }
  .sc-step { grid-template-columns: 26px minmax(0, 1fr) 26px; }
  .sc-btn { width: 26px; }
}
.ln-addset { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin: 2px 0 6px; border: 1.5px dashed var(--hair-strong); border-radius: 12px; background: none; color: var(--fg-2); font: 600 13px/1 var(--font-display); cursor: pointer; }
.ln-addset .ic { width: 15px; height: 15px; }
.ln-addset:hover { color: var(--fg); border-color: var(--fg-3); }
.ln-winrow { display: grid; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--hair); }
.ln-winlbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 13px/1.2 var(--font-display); }
.ln-winlbl small { font-weight: 500; font-size: 11.5px; color: var(--fg-3); }
.ln-win .ic { width: 14px; height: 14px; margin-right: 4px; }
.ln-card .ln-hint { margin: 0; padding: 0 14px 12px; font-size: 12.5px; }
.ln-card .ln-hint:empty { display: none; }
/* blocos recolhíveis (Lançar detalhado, Mais opções) com o mesmo desenho do app */
.more-opts { border: 0; box-shadow: var(--hi); }
.more-opts summary { min-height: 60px; }
.more-opts summary > .ic:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--fill); box-sizing: border-box; }
.recall-opts summary > .ic:first-child { background: var(--brand-soft); }
.more-opts summary b { font-size: 14.5px; }
.more-opts summary small { font-size: 12px; }
/* contadores do Lançar detalhado: com respiro nas laterais e dentro de um cartão próprio */
.recall-opts .more-body { padding: 0 10px 12px; gap: 10px; }
.recall-opts .steppers { gap: 0; padding: 2px 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.recall-opts .stepper { min-height: 56px; padding: 8px 10px 8px 14px; border-bottom-color: var(--hair); }
.recall-opts .stp-l b { font-size: 14px; }
.recall-opts .stp-l small { font-size: 11.5px; }
.recall-opts .stp-c { background: var(--fill); box-shadow: none; border-radius: 11px; padding: 2px; }
.recall-opts .stp-c > b { min-width: 2.1em; font-size: 17px; }
.recall-opts .stp-btn { width: 34px; height: 34px; border-radius: 9px; background: var(--surface); color: var(--fg); font-size: 20px; box-shadow: var(--shadow); }
.recall-opts .stp-btn:active { background: var(--fill-strong); }
.recall-opts .more-body > .hint { margin: 0 4px; font-size: 12.5px; }
/* lados da partida: cartões iguais aos outros */
.tp { border: 0; box-shadow: var(--hi); border-radius: 16px; padding: 12px 14px 14px; }
.tp-dot { margin-top: 6px; }

/* ---------- Registrar resultado: "Quando" com dia e hora em campos do app ---------- */
.ln-when { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; padding: 12px 14px 14px; border-radius: 16px; background: var(--surface-2); box-shadow: var(--hi); }
.ln-when[hidden] { display: none; }
.ln-wf { display: grid; gap: 6px; min-width: 0; }
.ln-wf > span { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.ln-wf input { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); color: var(--fg); font: 600 15px/48px var(--font-display); text-align: left; -webkit-appearance: none; appearance: none; box-sizing: border-box; }
.ln-wf input::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
.ln-wf input::-webkit-calendar-picker-indicator { opacity: 0.6; }
.ln-wf input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }

/* ---------- Fluidez: o feed só calcula o que está perto da tela ---------- */
.feed > .act:not(.act-detail) { content-visibility: auto; contain-intrinsic-size: auto 380px; }

/* ---------- Micro-interações: resposta ao toque e entrada suave das telas ---------- */
@media (prefers-reduced-motion: no-preference) {
  .view:not(.view-play) > .scroll > .page, .view:not(.view-play) > .scroll > :first-child { animation: viewIn 0.2s ease-out; }
  @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
  .btn, .btn-primary, .btn-ghost, .btn-danger, .linkish, .quick-tile, .choose-card.choose-btn, .menu-item, .act-rp, .act-share, .hb, .hh-pro, .icon-btn, .st-kpi, .pl-addbtn, .ln-addset, .tabbar .tab, .pill, .stk, .tpl, .ghi-c, .ls-card, .sug .btn, .hc-ic, .hc-link, .dock-btn, .cpick > span, .sport, .zap.hf { transition: transform 0.14s ease, background-color 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s, opacity 0.15s; }
  /* o atraso curto evita o "pulo" quando o dedo só começa a rolar a tela */
  .btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active, .quick-tile:active, .choose-card.choose-btn:active, .menu-item:active, .act-rp:active, .act-share:active, .hb:active, .hh-pro:active, .icon-btn:active, .st-kpi:active, .pl-addbtn:active, .ln-addset:active, .tabbar .tab:active, .pill:active, .stk:active, .tpl:active, .ls-card:active, .hc-ic:active, .dock-btn:active, .cpick > span:active, .sport:active, .zap.hf:active { transform: scale(0.96); transition: transform 0.08s ease 0.05s; }
  .btn-primary:active, .dock-btn:active { transform: scale(0.97); }
  .tabbar .tab.on { animation: tabPop 0.22s ease-out; }
  @keyframes tabPop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
  .seg label > span { transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
  .switch { transition: background-color 0.2s ease; }
}

/* Início: Seguindo × Explorar (minimalista, como as abas do perfil: só texto e um sublinhado) */
.feed-tabs { display: flex; justify-content: center; gap: 30px; margin: 2px 0 8px; border-bottom: 1px solid var(--line); }
.ftab { position: relative; min-height: 42px; padding: 0 4px; border: 0; background: none; color: var(--fg-2); font: 600 14px/1 var(--font); cursor: pointer; }
.ftab.on { color: var(--fg); }
.ftab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--brand-ink); }
.feed-sub { margin: -4px 2px 10px; color: var(--fg-3); font-size: 12.5px; }
.actions.center { justify-content: center; margin: 8px 0 14px; }
/* sugestão com X */
.sug { position: relative; }
.sug-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg-3); cursor: pointer; }
.sug-x svg { width: 13px; height: 13px; }
.sug-x:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
.sug.gone { opacity: 0; transform: scale(0.9); transition: opacity 0.2s, transform 0.2s; }
/* Encontre sua turma */
.turma { display: grid; gap: 12px; }
.turma-lead { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.turma-inv { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--hair)); }
.turma-acts { display: grid; gap: 8px; }
.turma-acts .btn { justify-content: flex-start; }
.turma-h { margin: 6px 0 0; font: 700 15px/1.2 var(--font-display); }
.turma .btn-primary { margin-top: 6px; }