@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700;800&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Sora:wght@600;700&display=swap');

:root {
  color-scheme: dark;
  font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #060810;
  --bg-elev: #0e1220;
  --surface: rgba(20, 26, 44, 0.72);
  --surface-solid: #12172a;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f3f5fc;
  --muted: #98a2c0;
  --faint: #6b7597;
  --accent: #5b8cff;
  --accent-2: #22d3ee;
  --danger: #f4634e;
  --ok: #34d399;
  --radius: 16px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  /* Uma largura para o produto inteiro. Antes eram tres numeros soltos —
     .app-shell 1180, .lobby-view 1060 e .doc-shell 1000 — entao ir da home para
     a pagina de planos ENCOLHIA o conteudo, e num monitor de 1440px sobravam
     122px mortos de cada lado. O que limita LEITURA continua sendo medido em
     `ch` no proprio paragrafo (.doc-prose, .empty-sub); isto aqui e so o
     limite do container. */
  --largura-max: 1440px;
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Ícones da interface (menu, cartões, cabeçalhos de fileira, botões).
   Eram emoji: cada sistema operacional desenhava um boneco colorido diferente,
   em desacordo com a marca e com peso visual maior que o do próprio rótulo ao
   lado. Traço em `currentColor` herda a cor do elemento, então o ícone acompanha
   estado (hover, desabilitado, perigo) sem uma regra para cada caso — e combina
   com a marca do logo e com os `.card-action svg`, que já eram assim. */
.ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body {
  margin: 0;
  min-height: 100vh;  /* fallback p/ navegadores sem unidade dinamica */
  /* No Safari, 100vh e a altura COM a barra de endereco recolhida: o rodape fica
     cortado e a pagina "pula" ao rolar. dvh acompanha a barra aparecendo/sumindo. */
  min-height: 100dvh;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(91, 140, 255, 0.16), transparent 60%),
    radial-gradient(900px 520px at 88% 4%, rgba(34, 211, 238, 0.10), transparent 55%),
    var(--bg);
}

img { max-width: 100%; }
button { font-family: inherit; }

.app-shell {
  max-width: var(--largura-max);
  margin: 0 auto;
  /* Coluna flex de altura mínima igual à da tela, com o rodapé em `margin-top:
     auto`: é o que mantém o rodapé embaixo sem ninguém precisar somar à mão a
     altura da barra, do herói e do próprio rodapé. A tentativa anterior fazia
     essa conta num `calc(100dvh - 244px)` no herói, e o número só valia para as
     telas em que foi medido — numa janela de 619px de altura ele sobrava 41px e
     criava barra de rolagem numa página sem conteúdo nenhum.
     Virar flex é seguro aqui: todos os filhos usam só `margin-bottom`, então não
     há margem entre irmãos para colapsar (o que o flex desligaria). */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* O index.html usa viewport-fit=cover + status bar translucida, entao a area util
     vai ATE as bordas fisicas: sem os insets o conteudo some sob o notch, sob as
     laterais arredondadas (paisagem) e sob a barra de gestos do iPhone. */
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  /* 24px, e nao 80: o ultimo elemento da shell e sempre o .site-footer, que ja
     tem padding proprio de 22px em cima e `20px + env(safe-area-inset-bottom)`
     embaixo. Os 80px daqui vinham DEPOIS disso — na tela inicial, que agora
     termina no rodape, sobrava altura morta suficiente para criar barra de
     rolagem numa pagina que cabia inteira. */
  padding-bottom: 24px;
  padding-top: 0;
}

/* ------------------------------- Topbar --------------------------------- */
.topbar {
  position: sticky;
  /* Gruda em 0, e nao em `env(safe-area-inset-top)`: o inset ja esta no
     padding-top abaixo, e somar nos dois lugares contava o notch DUAS VEZES.
     Num iPhone (inset de 47px) o menu ficava a 47+47+14 = 108px do topo
     fisico — 61px de vao abaixo da barra de status, no lugar dos 14 de
     projeto. E como esta barra e o primeiro elemento da pagina, ela ja nasce
     grudada: o erro aparecia o tempo todo, nao so depois de rolar.
     Com `top: 0` o fundo passa POR BAIXO da barra de status (que e o que o
     viewport-fit=cover quer) e o conteudo continua abaixo dela, pelo padding. */
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(14px + env(safe-area-inset-top)) 0 14px;
  margin-bottom: 6px;
  /* Parada no topo a barra NAO tem fundo. O brilho do body nasce justamente ali
     (radial em `50% -8%`), e o fundo quase opaco que ficava aqui apagava o
     brilho exatamente onde ele e mais forte — o resultado era uma faixa preta
     chapada, com emenda visivel onde o gradiente acabava. Sem nada por baixo
     para atrapalhar a leitura, o fundo so faz falta depois que a pagina rola. */
  background: transparent;
  transition: background 0.2s ease;
}

/* Rolou: o conteudo passa por baixo da barra fixa, e ai o fundo (com o blur)
   e o que mantem logo e busca legiveis sobre a capa de um episodio. */
.topbar.rolado {
  background: linear-gradient(180deg, rgba(6, 8, 16, 0.92), rgba(6, 8, 16, 0.55) 70%, transparent);
  backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
}

/* Logo: marca SVG + wordmark */
.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  user-select: none;
}
.logo-mark { flex-shrink: 0; display: block; }
.logo-wordmark {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
}
.logo-wordmark strong {
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.account { display: flex; align-items: center; flex-shrink: 0; }
.user-badge { display: flex; align-items: center; gap: 10px; }
.user-badge span { font-weight: 600; }

/* ------------------------------ Navegação -----------------------------------
   Barra de seções ao lado da logo. Usa Oxanium como o resto da navegação do
   site (menu, títulos), para ler como parte da moldura e não como conteúdo.
   `flex: none` de propósito: quem cede espaço quando a janela aperta é a busca,
   que tem `flex: 1` e um mínimo confortável — encolher os links primeiro faria
   os rótulos quebrarem em duas linhas e a barra crescer em altura. */
.topnav { flex: none; display: flex; align-items: center; gap: 2px; }
.topnav-item {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px 11px;
  border-radius: 9px;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.topnav-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.topnav-item[aria-current='page'] { color: var(--text); background: rgba(255, 255, 255, 0.08); }

/* Planos é o único item que a pessoa não vai procurar por conta própria — ganha
   contorno para existir na periferia da visão sem virar um anúncio piscando. */
.topnav-item--destaque {
  color: #cfe0ff;
  border: 1px solid rgba(91, 140, 255, 0.34);
  background: rgba(91, 140, 255, 0.1);
}
.topnav-item--destaque:hover {
  color: #fff;
  background: rgba(91, 140, 255, 0.2);
  border-color: rgba(91, 140, 255, 0.6);
}

/* Estreitou: a navegação volta para dentro do hambúrguer, que tem os mesmos
   itens. Os dois nunca aparecem juntos — seriam dois caminhos para o mesmo
   lugar ocupando a mesma barra. */
/* 1000px, e nao 1150: medido no navegador, a barra precisa de 969px para caber
   logo (125) + nav (369) + conta (83) + os vaos (64) + o padding da shell (48)
   + uma busca ainda utilizavel (280). O limite antigo escondia a navegacao em
   notebooks de 1024 e 1152px, onde ela cabia folgada. */
@media (max-width: 1000px) {
  .topnav { display: none; }
}
@media (min-width: 1001px) {
  .menu-wrap { display: none; }
}

/* Conta na barra do topo. A barra terminava na busca e sobravam ~300px vazios à
   direita; entrar/minha conta viviam só dentro do hambúrguer. */
.topbar-account { flex: none; margin-left: auto; display: flex; align-items: center; }
.topbar-login {
  border: 1px solid rgba(91, 140, 255, 0.4);
  background: rgba(91, 140, 255, 0.12);
  color: #cfdcff;
  border-radius: 999px;
  padding: 9px 20px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.topbar-login:hover { background: rgba(91, 140, 255, 0.24); border-color: rgba(91, 140, 255, 0.7); color: #fff; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.user-chip:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-strong); }
/* Inicial do apelido — mesma ideia dos avatares da sala e do painel da extensão:
   a pessoa se reconhece pela cor antes de ler o nome. */
.user-chip-av {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #061021;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.user-chip-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ghost {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-strong); }

/* --------------------- Search (na barra superior) ----------------------- */
.search-bar {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 5px 5px 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.search-bar:focus-within {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(91, 140, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.14);
}
.search-icon { display: flex; opacity: 0.55; }
#search-url {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 9px 4px;
  outline: none;
}
#search-url::placeholder { color: var(--faint); }
#search-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transition: transform 0.12s, filter 0.15s;
}
#search-btn:hover { filter: brightness(1.08); }
#search-btn:active { transform: translateY(1px); }
#search-btn:disabled { opacity: 0.6; cursor: progress; }
.status {
  margin: 6px 4px 22px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 1.2em;
}
/* Vazio é o estado NORMAL da home (só recebe texto durante uma busca), e mesmo
   vazio ele reservava 1.2em de altura + 22px de margem no meio da página. Era a
   maior fatia dos 151px de vão que separavam os cartões do rodapé. */
.status:empty { display: none; }

/* ------------------------------- Player --------------------------------- */
.player-card {
  background: #05070d;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}
video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  border-radius: 12px;
  background: #000;
  display: block;
}
.player-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 8px 6px;
}
.now-playing { margin: 0; font-weight: 700; font-size: 1rem; }
.now-playing:empty { display: none; }
.autoplay-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.autoplay-toggle input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

/* -------------------------- Rows / carrosséis --------------------------- */
.row { margin-bottom: 38px; }
/* A primeira fileira nascia colada na barra do topo. */
.row:first-of-type { margin-top: 10px; }

/* A rolagem ate aqui (clique num anime da biblioteca) e feita pelo app.js, que
   mede a topbar grudenta em tempo real — ela muda de altura conforme a largura
   da tela, entao um scroll-margin-top fixo erraria em metade dos casos. */

.row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.row-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  padding-left: 14px;
}
/* Quantos itens a fileira tem. O carrossel corta no meio de um card quando não
   cabe, e sem o número não dava para saber se havia mais coisa para o lado. */
.row-count {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-family: 'Figtree', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
}
.row-count:empty { display: none; }
.row-header h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 1.05em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.row-hint { font-size: 0.78rem; color: var(--muted); }

/* Carrossel: trilho com rolagem horizontal + setas nas laterais */
.carousel { position: relative; }
.carousel-track {
  list-style: none;
  margin: 0;
  padding: 6px 2px 10px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* Sem isto, ao arrastar o carrossel ate o fim o gesto "vaza" para a pagina e o
     documento inteiro anda de lado (scroll chaining). `contain` prende o gesto ao
     trilho: so o carrossel se move, que e o comportamento esperado no celular. */
  overscroll-behavior-x: contain;
  /* Nunca ultrapassa o container, mesmo que um ancestral perca a restricao. */
  max-width: 100%;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-nav {
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 46px;
  border: none;
  cursor: pointer;
  z-index: 5;
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
}
.carousel:hover .carousel-nav { opacity: 1; }
.carousel-nav.is-hidden { opacity: 0 !important; pointer-events: none; }
.carousel-nav.prev {
  left: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(90deg, rgba(6, 8, 16, 0.92), transparent);
  justify-content: flex-start;
  padding-left: 6px;
}
.carousel-nav.next {
  right: 0;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(270deg, rgba(6, 8, 16, 0.92), transparent);
  justify-content: flex-end;
  padding-right: 6px;
}
.carousel-nav:hover { color: var(--accent); }

/* Season tabs */
.season-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.season-tab {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 15px;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.season-tab:hover { color: var(--text); }
.season-tab.active {
  background: rgba(91, 140, 255, 0.18);
  border-color: rgba(91, 140, 255, 0.5);
  color: #d7e2ff;
}

/* -------------------------------- Cards --------------------------------- */
.carousel-track .card {
  flex: 0 0 236px;
  scroll-snap-align: start;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s, box-shadow 0.16s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 140, 255, 0.4);
  box-shadow: 0 20px 50px rgba(91, 140, 255, 0.18);
  z-index: 2;
}
.card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px rgba(0, 0, 0, 0.5);
}

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #161c2e, #0c101c);
  overflow: hidden;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, opacity 0.2s;
}
.card:hover .card-thumb img { transform: scale(1.07); }
.card-thumb.no-thumb::after {
  content: "\25B6";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--faint);
  pointer-events: none;
}

/* Play button over the image */
.card-play {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  transform: translate(-50%, -46%) scale(0.85);
  width: 54px; height: 54px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(10, 14, 24, 0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s, background 0.15s;
}
.card-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 2px; }
.card:hover .card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card-play:hover { background: rgba(91, 140, 255, 0.4); }

/* Thumbnail overlays */
.card-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(5, 8, 15, 0.82);
  color: #dbe4ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.card-badge.complete { background: rgba(52, 211, 153, 0.9); color: #04120c; }

/* Episódio novo desde a última abertura da lista: tarja "NOVO" + brilho. */
.card-new {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04101f;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(91, 140, 255, 0.5);
}
.card.fresh { outline: 2px solid var(--accent); outline-offset: -2px; }
.card.fresh .card-thumb { box-shadow: inset 0 0 24px rgba(91, 140, 255, 0.35); }

.card-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-check svg { width: 15px; height: 15px; fill: none; stroke: #04120c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.card-corner {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  width: 26px; height: 26px;
  border: none;
  border-radius: 8px;
  background: rgba(5, 8, 15, 0.72);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background 0.15s;
}
.card:hover .card-corner { opacity: 1; }
.card-corner:hover { background: var(--danger); }

.card-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.55);
}
.card-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--accent), var(--accent-2));
}

.card.watched .card-thumb img { opacity: 0.5; }
.card.offline .card-thumb { outline: 2px solid rgba(52, 211, 153, 0.55); outline-offset: -2px; }

/* Card meta */
.card-meta { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.card-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.34em;
}
.card-sub {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: -4px;
}

.card-action {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.card-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.card-action.cancel { color: #ffd0c8; border-color: rgba(244, 99, 78, 0.45); background: rgba(244, 99, 78, 0.12); }
.card-action.cancel:hover { background: rgba(244, 99, 78, 0.9); color: #fff; }
.card-action.ready { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.12); }
.card-action.error { color: #ffd0c8; border-color: rgba(244, 99, 78, 0.4); }

/* -------------------------- Auth modal ---------------------------------- */
.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.74);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
}
.auth-box {
  width: 100%;
  /* 420px, e nao 380: o cadastro tem seis campos e uma linha de duas colunas
     (CPF + nascimento). Em 380 a dupla ficava com ~170px por campo. */
  max-width: 420px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  /* Sem teto de altura o cadastro (743px de formulario) estourava a tela nas
     DUAS pontas: o pai e `fixed` com `align-items: center`, entao o excedente
     ia metade para cima do viewport (as abas Entrar/Criar conta sumiam num
     `top: -62px`) e metade para baixo — e nao havia como rolar ate nenhuma
     delas, porque o que transborda de um `fixed` nao entra na rolagem da
     pagina. Com o teto, o proprio modal rola. Mesmo padrao do .account-box.
     `dvh` pelo motivo ja anotado no `body`: no Safari, `vh` conta a tela COM a
     barra de endereco recolhida e o rodape do modal ficaria cortado. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  /* Chegando ao fim da rolagem do modal, o gesto nao "vaza" para a pagina. */
  overscroll-behavior: contain;
}
/* Posta pelo setModal() no app.js enquanto qualquer modal estiver aberto. */
body.modal-aberto { overflow: hidden; }

/* As abas ficam ancoradas no topo enquanto o cadastro rola por baixo: e por
   elas que se volta para "Entrar", e num formulario de seis campos elas saiam
   de vista logo no primeiro rolar. O fundo e opaco porque o conteudo passa
   por tras. */
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  position: sticky;
  top: -26px;               /* anula o padding do .auth-box */
  z-index: 1;
  padding-top: 26px;
  margin-top: -26px;
  background: var(--bg-elev);
  /* Prolonga o fundo para cima. O arredondamento do .auth-box deixava ~1px
     entre o topo da caixa e o começo desta faixa, e por essa fresta aparecia o
     halo azul do campo em foco passando por baixo. */
  box-shadow: 0 -10px 0 0 var(--bg-elev);
}
.auth-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  border-radius: 10px;
  padding: 10px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active { background: rgba(91, 140, 255, 0.18); border-color: rgba(91, 140, 255, 0.5); color: #d7e2ff; }
#auth-form { display: flex; flex-direction: column; gap: 12px; }

/* Rótulo acima do campo, em vez de só placeholder. Placeholder some quando a
   pessoa começa a digitar: no meio de um cadastro de seis campos, revisar antes
   de enviar virava adivinhação de qual campo era qual. */
.auth-campo { display: flex; flex-direction: column; gap: 5px; }
.auth-campo > span {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* `min-width: 0` é obrigatório aqui: item de grade nasce com `min-width: auto`,
   e o tamanho natural de um <input> (~20 caracteres) é maior que a coluna — sem
   isto a dupla CPF/nascimento empurrava o campo para fora do modal. */
.auth-linha > * { min-width: 0; }
/* Num telefone as duas colunas dão ~135px cada, e o placeholder do CPF
   ("000.000.000-00") precisa de ~140px — ele aparecia cortado no "-". Empilhar
   custa uma linha de rolagem e devolve o formato completo. */
@media (max-width: 420px) {
  .auth-linha { grid-template-columns: 1fr; }
}
.auth-nota { margin: -4px 0 0; font-size: 0.76rem; color: var(--faint); line-height: 1.45; }
.auth-intro { margin: 0 0 16px; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

/* O formulario do cartao (cartao.js) entra nos mesmos seletores: sao os mesmos
   campos, no mesmo modal, e ter dois visuais de input no produto so porque um
   deles nasceu depois nao se justifica. */
#auth-form input,
#cartao-form input[type="text"] {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  outline: none;
}
#auth-form input:focus,
#cartao-form input[type="text"]:focus { border-color: rgba(91, 140, 255, 0.6); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.14); }
#auth-form input.field-error,
#cartao-form input.field-error {
  border-color: var(--danger);
  background: rgba(244, 99, 78, 0.08);
}
.auth-error { margin: 0; min-height: 1em; color: var(--danger); font-size: 0.85rem; }
.auth-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------------------- Formulario de cartao ----------------------------- */
/* O resumo da cobranca vem antes dos campos e com peso visual proprio: e a
   parte da tela que a pessoa PRECISA ler antes de digitar o cartao. */
.cartao-resumo {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(91, 140, 255, 0.07);
  font-size: 0.87rem;
  line-height: 1.55;
}
.cartao-resumo p { margin: 0 0 8px; }
.cartao-resumo p:last-child { margin-bottom: 0; }
.cartao-resumo .cartao-saida { color: var(--muted); }
#cartao-form { display: flex; flex-direction: column; gap: 12px; }
.cartao-secao {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* `align-items: start` porque o texto do aceite tem duas ou tres linhas: com o
   padrao (stretch) a caixinha esticava junto e ficava desalinhada do inicio. */
.cartao-aceite {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.cartao-aceite input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
#cartao-enviar {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
#cartao-enviar:disabled { opacity: 0.65; cursor: default; }

#auth-submit {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
#auth-submit:disabled { opacity: 0.6; cursor: progress; }
.auth-hint { margin: 16px 0 0; color: var(--muted); font-size: 0.8rem; text-align: center; }

/* ------------- Sessão única (aviso de login em outro aparelho) ----------- */
.session-box { max-width: 420px; }
.session-title {
  margin: 0 0 12px;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.session-message { margin: 0 0 10px; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.session-message b { color: #d7e2ff; }
.session-hint { margin: 0 0 18px; color: var(--muted); font-size: 0.8rem; }
#session-continue, #kicked-login {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
#session-continue:disabled { opacity: 0.6; cursor: progress; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; }
  .search-bar { order: 3; max-width: none; flex-basis: 100%; }
  /* Logo no centro da linha de cima. O botao de menu de um lado e o bloco da
     conta do outro dividem em partes iguais o espaco que sobra, entao ela fica
     no meio da TELA — e nao no meio do que restou depois do botao, que e onde
     um `margin: auto` a deixaria (uns 20px fora do eixo).
     Antes o lado direito era um `::after` vazio com `flex: 1`. Como ele vinha
     DEPOIS do .topbar-account na linha, quem levava metade do espaco livre era
     o espacador, e o botao Entrar (ou o icone da conta, quando logado) parava a
     84px da borda — no meio do nada, em vez do canto. Dando o `flex: 1` ao
     proprio bloco da conta, ele e o espacador: a logo continua centrada e o
     conteudo dele encosta a direita.
     O seletor e `.topbar .menu-wrap` para nao depender da ordem: a regra base
     de .menu-wrap vem bem depois daqui no arquivo. */
  .topbar .menu-wrap { flex: 1; }
  .topbar .topbar-account { flex: 1; justify-content: flex-end; margin-left: 0; }
}

@media (max-width: 640px) {
  .app-shell { padding: 0 14px 20px; }
  .carousel-track .card { flex-basis: 168px; }
  .card-title { font-size: 0.84rem; }
  .carousel-nav { display: none; }
  .card-play { width: 46px; height: 46px; }
  .card-play svg { width: 22px; height: 22px; }
}

/* ================================ eaParty ================================ */
.hamburger {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s;
}
.hamburger:hover { background: rgba(255, 255, 255, 0.1); }
.hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.party-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.6);
  backdrop-filter: blur(3px);
  z-index: 70;
}

.party-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 370px;
  max-width: 92vw;
  height: 100vh;
  height: 100dvh;  /* idem body: acompanha a barra do Safari */
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
  transform: translateX(-100%);
  transition: transform 0.24s ease;
  overflow: hidden;
}
.party-drawer.open { transform: translateX(0); }

.party-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 6px;
}
.party-head h2 {
  margin: 0;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.party-tagline { margin: 0 20px 12px; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

.icon-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }

.party-body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; }

.party-field { display: block; margin-bottom: 16px; }
.party-field span { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; }
.party-drawer input[type="text"] {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  outline: none;
}
.party-drawer input[type="text"]:focus { border-color: rgba(91, 140, 255, 0.6); }
.party-drawer input.shake { animation: shake 0.4s; border-color: var(--danger); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.party-btn {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 10px;
  padding: 11px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}
.party-btn:hover { background: rgba(255, 255, 255, 0.1); }
.party-btn.primary { border: none; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.party-btn.primary:hover { filter: brightness(1.08); }
.party-btn.danger { border-color: rgba(244, 99, 78, 0.5); color: #ffd0c8; background: rgba(244, 99, 78, 0.12); }
.party-btn.danger:hover { background: rgba(244, 99, 78, 0.85); color: #fff; }
.party-btn.small { width: auto; padding: 7px 16px; font-size: 0.82rem; }

.party-join-row { display: flex; gap: 8px; }
/* O código é a coisa mais copiada da página: caixa alta, monoespaçada e com o
   espaçamento aberto para não confundir 0 com O na hora de digitar. */
.party-join-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 500;
}
.party-join-row .party-btn { width: auto; flex: none; padding: 12px 22px; }

.party-rooms, .party-member-list, .party-messages { list-style: none; margin: 0; padding: 0; }
/* Lista vazia é um estado, não um buraco: sem moldura o cartão parecia quebrado. */
.party-empty {
  color: var(--faint);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 22px 16px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.party-room-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s, background 0.15s;
}
.party-room-item:last-child { margin-bottom: 0; }
.party-room-item:hover { border-color: rgba(91, 140, 255, 0.35); background: rgba(91, 140, 255, 0.06); cursor: pointer; }
.party-room-item strong { display: block; font-size: 0.92rem; }
.party-room-item span { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 3px; }

/* Dentro da sala */
.party-room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-top: 6px; }
.party-code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500; letter-spacing: 0.2em;
  color: var(--accent-2); background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25); border-radius: 8px; padding: 5px 12px; font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.party-code::after {
  content: "⧉";
  font-size: 0.9em;
  letter-spacing: 0;
  opacity: 0.5;
}
.party-code:hover { background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.5); }
.party-code.copiado { border-color: rgba(52, 211, 153, 0.5); color: #7ee0a5; background: rgba(52, 211, 153, 0.12); }
.party-code.copiado::after { content: "✓"; opacity: 1; }

.party-role {
  font-size: 0.82rem; color: var(--muted); margin: 12px 0; padding: 9px 13px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent; line-height: 1.4;
}
.party-role.host { color: #ffe6a3; background: rgba(255, 196, 0, 0.08); border-color: rgba(255, 196, 0, 0.2); }

/* Estado da conexão com a sala. Ponto pulsante porque "reconectando" é um estado
   em andamento — parado ele lia como mais um aviso estático. */
.party-conn {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 0, 0.25);
  background: rgba(255, 196, 0, 0.09);
  color: #ffe0ac;
  font-size: 0.82rem;
  line-height: 1.4;
}
.party-conn::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc266;
  animation: conn-pulsa 1.1s ease-in-out infinite;
}
@keyframes conn-pulsa { 50% { opacity: 0.25; } }
.party-conn.fatal {
  border-color: rgba(244, 99, 78, 0.4);
  background: rgba(244, 99, 78, 0.1);
  color: #ffcfc8;
}
.party-conn.fatal::before { background: var(--danger); animation: none; }
@media (prefers-reduced-motion: reduce) {
  .party-conn::before { animation: none; }
}

/* Os dois blocos da coluna da sala usam o mesmo rótulo dos cartões do lobby —
   é o que faz o painel ler como uma barra lateral e não como duas caixas
   avulsas. O chat não tinha rótulo nenhum. */
.party-members h3,
.party-chat-head {
  margin: 0 0 10px;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.party-chat-head {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.party-member-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.9rem; }
.party-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.party-host-tag, .party-you-tag { font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.party-host-tag { color: #ffe6a3; background: rgba(255, 196, 0, 0.14); }
.party-you-tag { color: #cfe0ff; background: rgba(91, 140, 255, 0.16); }

/* Chat */
.party-chat {
  display: flex; flex-direction: column; margin: 16px 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.2);
}
.party-messages { flex: 1; min-height: 160px; max-height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.party-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.party-msg.mine { align-self: flex-end; align-items: flex-end; }
.party-msg-name { font-size: 0.7rem; color: var(--faint); margin-bottom: 2px; }
.party-msg-text { background: rgba(255, 255, 255, 0.07); padding: 7px 11px; border-radius: 12px; font-size: 0.86rem; line-height: 1.35; word-break: break-word; }
.party-msg.mine .party-msg-text { background: rgba(91, 140, 255, 0.75); color: #fff; }
/* ---------------------------- Reações da sala ---------------------------- */
/* Um clique manda; não vira mensagem. Ver soltarReacao() no app.js. */

.party-reactions {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.party-reactions::-webkit-scrollbar { display: none; }
.party-reactions button {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.party-reactions button:hover { background: rgba(255, 255, 255, 0.09); transform: scale(1.18); }
.party-reactions button:active { transform: scale(0.92); }

/* Camada dos emojis subindo. `pointer-events: none` é o que impede a chuva de
   reações de bloquear os controles do player embaixo. */
.party-floats {
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  height: 60vh;
  pointer-events: none;
  z-index: 40;
}
.party-float {
  position: absolute;
  bottom: 0;
  font-size: 26px;
  line-height: 1;
  will-change: transform, opacity;
  animation: party-sobe 2s ease-out forwards;
}
@keyframes party-sobe {
  0% { opacity: 0; transform: translate(0, 24px) scale(0.5); }
  15% { opacity: 1; transform: translate(0, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--desvio, 0), -260px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .party-float { animation: party-pisca 1.2s ease-out forwards; }
  @keyframes party-pisca { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
}

.party-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.party-chat-form input { flex: 1; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--text); border-radius: 999px; padding: 9px 14px; font: inherit; outline: none; }
.party-chat-form button { border: none; background: var(--accent); color: #fff; width: 38px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; }

@media (max-width: 640px) {
  .party-drawer { width: 100vw; max-width: 100vw; }
}

/* Player wrap + botão de ativar som (autoplay bloqueado) */
.player-wrap { position: relative; }
.unmute-btn {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 4;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: pulse-btn 1.8s ease-in-out infinite;
  /* O rótulo do modo "play" é bem mais longo que o de ativar o som: sem teto
     ele vazava para fora do vídeo num telefone. */
  max-width: calc(100% - 24px);
  text-align: center;
  line-height: 1.3;
  /* O rótulo é ícone + texto (ver mostrarDestrave no app.js). */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.unmute-btn:hover { filter: brightness(1.1); }
@media (max-width: 480px) {
  .unmute-btn { padding: 10px 16px; font-size: 0.86rem; }
}
/* Botão do miniplayer (Document PiP): canto superior direito, aparece no hover.
   Em telas de toque (sem hover) fica sempre visível. */
.pip-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.player-wrap:hover .pip-btn,
.pip-btn:focus-visible { opacity: 1; }
.pip-btn:hover { background: rgba(0, 0, 0, 0.75); }
.pip-btn.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: 1; }
@media (hover: none) { .pip-btn { opacity: .85; } }
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(91, 140, 255, 0.4); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 10px rgba(91, 140, 255, 0); }
}

/* Co-controle: tags e botões de dar/tirar controle */
.party-member-list li { justify-content: space-between; }
.party-member-info { display: flex; align-items: center; gap: 8px; }
.party-ctrl-tag { font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; color: #b7f7d8; background: rgba(52, 211, 153, 0.16); }
.party-ctrl-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.party-ctrl-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.party-ctrl-btn.on { color: #ffd0c8; border-color: rgba(244, 99, 78, 0.4); background: rgba(244, 99, 78, 0.12); }
.party-role.control { color: #b7f7d8; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.22); }

/* ===================== eaParty — páginas (lobby + sala) ===================== */
.hamburger.active { background: rgba(91, 140, 255, 0.22); border-color: rgba(91, 140, 255, 0.5); }

/* Palco: home = 1 coluna; sala = 2 colunas (player + painel) */
.stage { display: flex; gap: 20px; align-items: flex-start; }
.stage-main { flex: 1; min-width: 0; }
.party-panel {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 78px;
}

/* ============================ Barra da sala =============================== */
/* Grade de duas faixas: identidade + ações em cima, papel embaixo. Numa linha
   só (como era), o texto do papel disputava espaço com o nome e os botões e
   virava uma coluna de três linhas espremida no meio. */
.room-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.room-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.room-id strong {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-actions { display: flex; gap: 8px; }
.room-header .party-role { grid-column: 1 / -1; margin: 0; }
.ghost.danger { border-color: rgba(244, 99, 78, 0.5); color: #ffd0c8; }
.ghost.danger:hover { background: rgba(244, 99, 78, 0.85); color: #fff; }

/* Botão-etiqueta: o par discreto do `.party-btn`, para ações que acompanham um
   título em vez de encerrarem um formulário. */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-strong); color: var(--text); }
.chip-btn.danger { border-color: rgba(244, 99, 78, 0.35); color: #ffb3a6; }
.chip-btn.danger:hover { background: rgba(244, 99, 78, 0.18); border-color: rgba(244, 99, 78, 0.6); color: #ffd0c8; }

/* ============================== Lobby (página) =========================== */

.lobby-view { max-width: var(--largura-max); margin: 0 auto; padding: 6px 0 56px; }

/* -------------------------------- hero ---------------------------------- */

.lobby-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0 30px;
}
.lobby-hero-txt { max-width: 56ch; }
.lobby-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91, 140, 255, 0.35);
  background: rgba(91, 140, 255, 0.12);
  color: #a9c1ff;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lobby-hero h1 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* O degradê é o mesmo par de acentos do resto do produto; sem ele o título
     ficava do mesmo peso visual que os rótulos dos cartões. */
  background: linear-gradient(100deg, var(--text) 35%, var(--accent) 75%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lobby-sub { color: var(--muted); margin: 12px 0 0; font-size: 0.98rem; line-height: 1.6; }
.lobby-back { flex: none; margin-top: 6px; }

/* ------------------------------ como funciona ---------------------------- */
/* Três passos numerados pelo contador do CSS. É a única coisa nova na página,
   e existe porque nada ali dizia o que ia acontecer depois de clicar. */

.lobby-steps {
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.lobby-steps li {
  counter-increment: passo;
  position: relative;
  padding: 14px 16px 14px 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.lobby-steps li::before {
  content: counter(passo);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #061021;
  font-size: 0.72rem;
  font-weight: 800;
}
/* `> li >` é obrigatório: o <b> filho do <li> é o TÍTULO do passo e precisa de
   linha própria, mas o texto do passo também usa <b> para dar ênfase no meio da
   frase. Sem o descendente direto, a regra pegava os dois, e "Botão <b>Entrar</b>,
   no canto superior direito, e depois <b>Criar conta</b>." virava cinco linhas
   quebradas, com as vírgulas órfãs começando linha (visível em /tutorial). */
.lobby-steps > li > b { display: block; font-size: 0.92rem; }
.lobby-steps > li > span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

/* -------------------------------- grade ---------------------------------- */
/* 3fr/2fr, e não 1fr/1fr: a coluna da esquerda é a ação (criar/entrar) e a da
   direita é referência. Antes as duas tinham o mesmo peso e a lista de salas
   vazia ficava do tamanho do formulário inteiro. */

.lobby-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.lobby-col { display: grid; gap: 18px; align-content: start; }
.lobby-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.lobby-card--acao {
  border-color: rgba(91, 140, 255, 0.28);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(91, 140, 255, 0.1), transparent 55%),
    var(--surface);
}
.card-title {
  margin: 0;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lobby-card--acao .card-title { margin-bottom: 14px; }

/* --------------------------------- campos -------------------------------- */

.field { display: block; margin-bottom: 16px; }
.field-label { display: block; margin-bottom: 6px; font-size: 0.82rem; color: var(--muted); }
.field-label i { font-style: normal; color: var(--faint); }

/* Interruptor no lugar da caixinha: "sala privada" muda quem consegue entrar,
   e um checkbox de 16px não carregava esse peso. */
.switch { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  flex: none;
  position: relative;
  width: 38px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  transition: background 0.16s, border-color 0.16s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.16s, background 0.16s;
}
.switch input:checked + .switch-track {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
.switch input:checked + .switch-track::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-txt { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.switch-txt b { display: block; color: var(--text); font-size: 0.88rem; font-weight: 600; }

/* Separador "ou" entre criar e entrar. */
.lobby-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--faint);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.lobby-ou::before, .lobby-ou::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Sala de serviço externo: o vídeo não toca no eaPlayer */
.ext-room-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 18px;
}
.ext-room-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ext-room-eyebrow span { color: #8fb4ff; font-weight: 600; }
.ext-room-card h2 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.3; }
.ext-room-explica { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; max-width: 60ch; }
.ext-room-card a.party-btn { display: inline-block; text-decoration: none; }

/* Relógio da sala, para acompanhar na mão quando não há extensão — o caso de
   todo celular (ver o comentário no index.html). O tempo é monoespaçado e
   tabular: sem isso o número dança a cada segundo, porque os dígitos têm
   larguras diferentes. */
.ext-room-relogio {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.relogio-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.relogio-estado {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.12);
  color: #7ee0a5;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.relogio-estado.pausado {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.relogio-tempo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ext-room-relogio .ext-note { margin-top: 8px; }

/* Etiqueta do serviço na lista de salas públicas. O seletor precisa ser tão
   específico quanto `.party-room-item span`, que joga tudo para display:block. */
.party-room-titulo { display: flex; align-items: center; gap: 8px; }
.party-room-item .party-room-servico {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--accent-2);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.35);
  vertical-align: middle;
}

/* --------------------- Cartão da extensão (streamings) ------------------- */
/* Era o cartão mais alto da página e o de menor prioridade: peso visual e
   importância andavam em direções opostas. Agora é a coluna estreita, o texto
   longo está atrás de um `<details>` e a nota legal fica no rodapé do cartão. */

.ext-lead { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.ext-card a.party-btn { display: block; text-decoration: none; text-align: center; }

/* Em que etapa a pessoa está — o cartão troca de conteúdo sozinho conforme a
   extensão aparece e se conecta, e sem isto a mudança não tinha rótulo. */
.ext-status {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ext-status.ok { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.12); color: #7ee0a5; }
.ext-status.meio { border-color: rgba(255, 196, 0, 0.32); background: rgba(255, 196, 0, 0.1); color: #ffd98a; }

.ext-steps { margin: 14px 0 0; }
.ext-steps summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 0;
  list-style: none;
}
.ext-steps summary::-webkit-details-marker { display: none; }
.ext-steps summary::before { content: "▸ "; color: var(--faint); }
.ext-steps[open] summary::before { content: "▾ "; }
.ext-steps ol { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 0.84rem; line-height: 1.7; }
.ext-steps code {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86em;
}
.ext-note { margin: 12px 0 0; color: var(--faint); font-size: 0.8rem; line-height: 1.55; }
.ext-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #7ee0a5;
}
.ext-ok::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.16);
  font-size: 0.72rem;
}
/* Nota de não-afiliação: obrigatória, mas é rodapé — separada por uma linha e
   no menor tamanho da página, para não competir com as instruções. */
.ext-legal {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.72rem;
  line-height: 1.5;
}
/* Nomes dos serviços onde a extensão funciona (sem logo nem cor de marca de
   terceiros — só o nome, junto da nota de não-afiliação acima). */
.ext-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.ext-providers li {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
.ext-version { color: var(--faint); font-weight: 400; font-size: 0.85em; }

.lobby-view input[type="text"] {
  width: 100%; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25);
  color: var(--text); border-radius: 12px; padding: 12px 14px; font: inherit; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.lobby-view input[type="text"]::placeholder { color: var(--faint); }
.lobby-view input[type="text"]:focus {
  border-color: rgba(91, 140, 255, 0.6);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.14);
}
.lobby-view input.shake { animation: shake 0.4s; border-color: var(--danger); }

/* Painel de chat na sala: ocupa a altura */
.party-panel .party-members,
.party-panel .party-chat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px;
}
.party-panel .party-chat { flex: 1; padding: 0; }
.party-panel .party-messages { max-height: 46vh; min-height: 200px; }

@media (max-width: 900px) {
  /* Ao virar coluna, o `align-items: flex-start` herdado passa a valer no eixo
     HORIZONTAL: os filhos param de preencher a largura e passam a se dimensionar
     pelo conteudo. Como o trilho do carrossel tem centenas de px de cards, o
     .stage-main esticava (~2500px) e arrastava a PAGINA inteira na horizontal.
     `stretch` devolve a largura do container e o carrossel volta a rolar sozinho. */
  .stage { flex-direction: column; align-items: stretch; }
  .party-panel { width: 100%; position: static; }
  .lobby-grid { grid-template-columns: 1fr; }
  .lobby-steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* O "voltar" desce para baixo do texto em vez de espremer o título. */
  .lobby-hero { flex-direction: column-reverse; align-items: stretch; gap: 14px; padding-bottom: 24px; }
  .lobby-back { align-self: flex-start; margin-top: 0; }
  .lobby-card { padding: 18px; }
  .room-header { grid-template-columns: auto 1fr; }
  .room-actions { grid-column: 1 / -1; }
}

/* Webcam da sala */
.party-cams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.party-cam {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #161c2e, #0c101c);
  border: 1px solid var(--border);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.party-cam.speaking {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.25);
}
.party-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.party-cam-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(5, 8, 15, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.party-cam-off {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* `display: flex` vence o [hidden] do navegador — sem isto o avatar fica por
   cima do vídeo quando a câmera liga. */
.party-cam-off[hidden] { display: none; }
.party-cam-mute {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.72);
  color: var(--danger);
  display: none;
  align-items: center;
  justify-content: center;
}
.party-cam.mudo .party-cam-mute { display: flex; }
.party-cam-off span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  color: var(--muted);
}

/* Barra de chamada (mic / câmera / desligar) */
/* A chamada ganha o mesmo cartão dos outros blocos da sala. Era uma pílula
   solta embaixo do vídeo, sem moldura nem alinhamento — lia como um controle
   esquecido na página, e não como parte da sala. */
.party-av {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.party-call {
  display: flex;
  align-items: center;
  gap: 10px;
}
.party-call-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.party-call.connected .party-call-dot { background: var(--ok); }
.party-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
}
.party-call-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.party-call-btn.on {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06101f;   /* escuro sobre o degradê claro: é o que dá contraste */
}
.party-call-btn.on:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
/* Na chamada com o mic/câmera desligados: risco no ícone. Só a cor não conta a
   diferença entre "desligado" e "ainda não entrei". */
.party-call-btn .slash { display: none; }
.party-call-btn.off { color: var(--danger); border-color: rgba(244, 99, 78, 0.45); }
.party-call-btn.off .slash { display: inline; }
.party-call-btn.hangup, .party-call-btn.hangup:hover {
  border-color: transparent;
  background: var(--danger);
  color: #fff;
}
.party-call-btn.hangup:hover { filter: brightness(1.08); }
.party-call-btn[disabled] { opacity: 0.5; cursor: default; }
/* `flex: 1` no rótulo empurra os botões para a direita do cartão, alinhados com
   a borda — antes eles ficavam colados no texto, no meio do nada. */
.party-call-label { flex: 1; color: var(--muted); font-size: 0.85rem; }
.party-call-note { margin: 8px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.party-call-note.erro { color: var(--danger); }
/* Sem ninguém na chamada não há o que mostrar: a grade some e sobra a barra. */
.party-cams:empty { display: none; }

/* Menu dropdown do hambúrguer */
.menu-wrap { position: relative; flex-shrink: 0; }
.main-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  min-width: 190px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 9px;
  padding: 11px 13px;
  font: inherit;
  font-weight: 600;
  text-align: left;
  /* Planos, Como usar e Dúvidas são <a> de verdade; os outros itens são
     <button>. Sem isto só metade da lista aparecia sublinhada. */
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
/* O ícone acompanha, o rótulo lidera. Em `currentColor` cheio ele competia com
   o texto; `.danger` fica de fora para o vermelho do "Sair" valer no ícone. */
.menu-item:not(.danger) .ico { color: var(--muted); }
.menu-item:hover { background: rgba(255, 255, 255, 0.07); }
.menu-item.active { background: rgba(91, 140, 255, 0.16); color: #cfe0ff; }
.menu-item.danger { color: #ffcfc7; }
.menu-item.danger:hover { background: rgba(244, 99, 78, 0.16); }
.menu-divider { height: 1px; background: var(--border); margin: 5px 4px; }
.menu-user {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 13px 6px;
}
.menu-user-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.menu-user-name { font-weight: 700; color: #cfe0ff; overflow-wrap: anywhere; }

/* Campos que só aparecem no modo cadastro. */
.register-only { display: none; }
#auth-form.registering .register-only { display: block; }
/* Os campos viraram <label> em coluna e a dupla CPF/nascimento virou grade: sem
   estas duas linhas o `display: block` acima achataria os dois de volta. */
#auth-form.registering label.register-only { display: flex; }
#auth-form.registering .auth-linha.register-only { display: grid; }

/* --------------------------- Minha conta --------------------------------- */
/* O teto de altura e a rolagem vem do .auth-box, que esta neste mesmo elemento;
   aqui so a largura muda. Antes esta regra repetia `max-height: 90vh` e vencia
   por vir depois — o que reintroduzia o corte no Safari que o `dvh` la em cima
   resolve. */
.account-box { max-width: 440px; }
.account-title { margin: 0 0 16px; font-family: 'Oxanium', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; }
.account-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.account-field { display: flex; flex-direction: column; gap: 4px; }
.account-field span { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* `:disabled` de propósito: a troca de senha passou a usar `.account-field`
   também, e sem o estado no seletor os campos editáveis herdavam o cinza e o
   `cursor: not-allowed` dos dados que realmente são só leitura. */
.account-field input:disabled {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  padding: 10px 12px;
  font: inherit;
  cursor: not-allowed;
}
.account-hint { margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); }
.account-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.account-section h3 { margin: 0 0 10px; font-family: 'Oxanium', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; }
.account-sub { margin: 0 0 10px; font-size: 0.82rem; color: var(--muted); }
#password-form { display: flex; flex-direction: column; gap: 10px; }
#password-form input {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  outline: none;
}
#password-form input:focus { border-color: rgba(91, 140, 255, 0.6); }
.account-btn {
  align-self: flex-start;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font: inherit;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  /* Rótulo em Oxanium com letter-spacing cresce mais que o esperado: sem o teto
     o botão passava da borda do modal num celular de 390px. */
  max-width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.account-btn.danger { background: linear-gradient(135deg, #d9503b, #f4634e); }

/* Variante de contorno. "Ver planos" e "Sair" competiam com o botão principal
   da seção quando os dois vinham com o mesmo gradiente cheio. */
.account-btn--linha {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.account-btn--linha:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--accent); }
.account-btn--perigo {
  background: none;
  border: 1px solid rgba(244, 99, 78, 0.45);
  color: #ffb3a6;
}
.account-btn--perigo:hover { background: rgba(244, 99, 78, 0.12); border-color: var(--danger); }

/* --------------------------- Cartão do plano ----------------------------- */
.account-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-x {
  flex: none;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.modal-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }

.plano-conta {
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(91, 140, 255, 0.28);
  background: linear-gradient(150deg, rgba(91, 140, 255, 0.12), rgba(34, 211, 238, 0.05));
}
.plano-conta-topo { display: flex; align-items: baseline; gap: 10px; }
.plano-conta-rotulo {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.plano-conta-nome {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plano-conta-validade { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); min-height: 1em; }
/* O gap é o conserto do bug: os dois botões vinham como inline-block + block
   sem margem nenhuma e ficavam encostados um no outro. */
.plano-conta-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.plano-conta-acoes .account-btn { align-self: auto; flex: 1 1 auto; }

.account-field--larga { grid-column: 1 / -1; }
.account-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.account-rodape .account-btn { align-self: auto; }
.account-btn:disabled { opacity: 0.6; cursor: default; }
.account-msg { margin: 4px 0 0; min-height: 1em; font-size: 0.82rem; }
.account-msg.ok { color: #7ee0a4; }
.account-msg.err { color: var(--danger); }

/* ==========================================================================
   Ajustes para iOS / PWA instalado
   ========================================================================== */

a, button, .card, .card-action, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button, .card-action, .topbar, [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

.auth-modal, .party-overlay {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.party-drawer {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* -------------------------- Convite para instalar ------------------------- */
.install-banner {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev, #141a2b);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: install-in 0.28s ease-out;
}
@keyframes install-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .install-banner { animation: none; } }

.install-banner img { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.install-text { flex: 1; min-width: 0; }
.install-text strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.install-text span { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.install-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.install-btn {
  border: none; background: var(--accent); color: #fff; cursor: pointer;
  border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; font-size: 0.88rem;
}
.install-close {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.install-close:hover { color: var(--text); }
.install-share { display: inline-block; vertical-align: -2px; }

@media (max-width: 560px) {
  .install-banner { flex-wrap: wrap; row-gap: 4px; }
  .install-text { flex: 1 1 0; }
  .install-actions { flex-basis: 100%; justify-content: flex-end; }
}

/* --------------------------- Estado "carregando" -------------------------- */
@keyframes ea-spin { to { transform: rotate(360deg); } }

.card.is-loading { pointer-events: none; }
.card.is-loading .card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.6);
  z-index: 3;
}
.card.is-loading .card-thumb::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ea-spin 0.8s linear infinite;
  z-index: 4;
}
.card.is-loading .card-play { opacity: 0; }

#search-btn.is-loading { color: transparent; position: relative; cursor: progress; }
#search-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ea-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .card.is-loading .card-thumb::before,
  #search-btn.is-loading::after { animation-duration: 2s; }
}

/* Substitui o antigo campo "Seu nome" no lobby do eaParty: com conta obrigatoria
   a identidade vem do apelido, e esta linha diz como voce aparece para os outros. */
/* "Você entrará como fulano" — no hero, junto do texto de apresentação, e não
   perdido no topo do formulário. Etiqueta em vez de linha solta: é informação
   de estado, não uma instrução. */
.party-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  color: var(--muted);
}
.party-identity::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
  flex-shrink: 0;
}

/* ========================= Empty state (tela inicial) ========================= */
.empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* O herói é o único bloco da tela inicial agora (os cartões de recurso e os
     botões de chamada saíram). Sem nada abaixo para caber na dobra, ele pode
     ocupar a altura confortável de novo — apertado, ficava um título pequeno
     boiando com o rodapé colado logo em seguida. */
  padding: 56px 24px 48px;
  /* Toma a altura que sobrar na coluna da .app-shell, em vez de declarar um
     valor próprio: assim o herói fica centrado no espaço livre em qualquer
     tela, e nunca EXIGE mais altura do que existe. */
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.empty-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 640px;
  height: 480px;
  background: radial-gradient(ellipse at center,
    rgba(91, 140, 255, 0.22) 0%,
    rgba(34, 211, 238, 0.10) 38%,
    transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.empty-mark {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 28px rgba(91, 140, 255, 0.6)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.3));
}

.empty-title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-family: 'Oxanium', sans-serif;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--text);
}

.empty-title span {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.empty-sub {
  position: relative;
  z-index: 1;
  /* Sem margem embaixo: o espaçamento até as etiquetas mora no `.empty-tags`,
     que é quem sabe se está presente. */
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  /* Em 400px o texto quebrava em três linhas curtas e empilhadas; ~54 caracteres
     por linha é o que deixa duas linhas cheias. `balance` distribui o resto —
     sem ele a última linha ficava com duas palavras soltas. */
  max-width: 54ch;
  text-wrap: balance;
}

/* Etiquetas do herói. Mesma linguagem visual do `.lobby-eyebrow` das páginas
   institucionais — pílula em Oxanium maiúsculo sobre fundo azul translúcido —
   para não nascer um terceiro estilo de selo no produto. */
.empty-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.empty-tags li {
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid rgba(91, 140, 255, 0.35);
  background: rgba(91, 140, 255, 0.12);
  color: #a9c1ff;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Janela baixa: notebook pequeno, navegador com muitas barras abertas, celular
   deitado. O que o herói tem de altura FIXA (marca de 80px + 104px de padding +
   as margens) não cabe junto com a barra do topo e o rodapé, e a tela inicial —
   que não tem conteúdo nenhum — ganhava barra de rolagem. Encolher o que é
   decorativo resolve sem tocar no texto. */
@media (max-height: 640px) {
  .empty-state { padding: 28px 24px 24px; }
  .empty-mark { width: 56px; height: 56px; margin-bottom: 16px; }
  .empty-title { margin-bottom: 12px; }
}

/* Hide empty-state and show status normally when content becomes visible */
.app-shell:has(#player-card:not([hidden])) .empty-state,
.app-shell:has(#episodes-card:not([hidden])) .empty-state,
.app-shell:has(#continue-card:not([hidden])) .empty-state,
.app-shell:has(#downloads-card:not([hidden])) .empty-state,
.app-shell:has(#library-card:not([hidden])) .empty-state,
.app-shell:has(#party-lobby-view:not([hidden])) .empty-state,
/* Dentro da sala o herói não tem função: a pessoa já escolheu o que fazer, e
   ele empurrava a sala para baixo da dobra. `party-mode` entra no <body> só na
   sala (ver setView), então o lobby continua coberto pela regra acima. */
body.party-mode .empty-state { display: none; }

@media (max-width: 480px) {
  .empty-state { padding: 40px 16px 28px; }
  /* Só o ícone da conta: o apelido come a largura da barra num telefone. */
  .user-chip { padding: 5px; }
  .user-chip-name { display: none; }
  .topbar-login { padding: 8px 14px; font-size: 0.82rem; }
}

/* ===================== Páginas institucionais (venda/suporte) ==============
   planos.html, faq.html, tutorial.html e termos.html. São páginas HTML
   separadas, não views do SPA: carregam sem o app.js e precisam ficar de pé
   sozinhas. Por isso reaproveitam as classes do lobby (.lobby-hero,
   .lobby-eyebrow, .lobby-steps, .lobby-card, .ext-steps) em vez de recriar um
   segundo visual — foi o que aconteceu com a privacidade.html, que nasceu com
   CSS inline próprio e destoa do resto do produto.
   ------------------------------------------------------------------------- */

.doc-shell {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-left)) 24px;
  /* Mesma coluna flex da .app-shell — o rodapé destas páginas é o mesmo
     .site-footer, e ele empurra para baixo com `margin-top: auto`. Num
     container de bloco esse `auto` vale ZERO, e o rodapé colava no texto. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
/* O bloco de conteúdo, seja ele qual for em cada página (prosa dos termos,
   grade de planos, lista do FAQ). Garante um respiro mínimo antes da linha do
   rodapé: o `margin-top: auto` dele empurra quando sobra espaço, mas não
   reserva nada quando a página já é mais alta que a tela. */
.doc-shell > :nth-last-child(2) { margin-bottom: 32px; }
.doc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 8px;
}
/* A logo aqui é a MESMA `.logo` da barra do index (marca em SVG + wordmark com
   "Player" em gradiente). Antes estas páginas tinham uma segunda logo própria —
   um quadradinho com o glifo ▶ de texto e "eaPlayer" numa cor só — então ir da
   home para /planos trocava a marca do produto no meio da navegação. */
.doc-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.doc-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.doc-nav a[aria-current='page'] {
  color: #a9c1ff;
  border-color: rgba(91, 140, 255, 0.35);
  background: rgba(91, 140, 255, 0.12);
}

/* Texto corrido das páginas de conteúdo. 68ch é o limite de leitura confortável;
   sem isso as linhas de termos/FAQ atravessavam os 1000px inteiros. */
.doc-prose { max-width: 68ch; }
.doc-prose h2 {
  margin: 34px 0 10px;
  font-family: 'Sora', sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
}
.doc-prose h3 { margin: 22px 0 6px; font-size: 0.98rem; font-weight: 700; }
.doc-prose p,
.doc-prose li { color: var(--muted); line-height: 1.65; font-size: 0.94rem; }
.doc-prose p { margin: 0 0 12px; }
.doc-prose ul, .doc-prose ol { margin: 0 0 14px; padding-left: 20px; }
.doc-prose li { margin-bottom: 6px; }
.doc-prose strong, .doc-prose b { color: var(--text); }
.doc-prose a { color: var(--accent); }
.doc-prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #cfe0ff;
}
.doc-updated { color: var(--faint); font-size: 0.8rem; margin-top: 28px; }

/* Caixa de destaque (aviso importante dentro do texto). */
.doc-box {
  border: 1px solid rgba(91, 140, 255, 0.3);
  background: rgba(91, 140, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.doc-box p:last-child { margin-bottom: 0; }

/* ------------------------------- Planos ---------------------------------- */

.plano-ciclo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 0.88rem;
}
.plano-ciclo b { color: var(--text); }
.plano-eco {
  font-family: 'Oxanium', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff0d0;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.12);
  border-radius: 999px;
  padding: 3px 9px;
}

.planos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.plano-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* O plano do meio é o que queremos vender: ganha a borda de acento e um degradê
   de fundo para o olho parar nele primeiro. */
.plano-card--destaque {
  border-color: rgba(91, 140, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(91, 140, 255, 0.1), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow);
}
.plano-selo {
  position: absolute;
  top: -11px;
  left: 22px;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #061021;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  padding: 4px 12px;
}
.plano-nome {
  margin: 0;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.plano-preco {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Sora', sans-serif;
}
.plano-preco .valor { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; }
.plano-preco .cifrao { font-size: 1rem; color: var(--muted); }
.plano-preco .por { font-size: 0.85rem; color: var(--muted); font-family: 'Figtree', sans-serif; }
.plano-nota { margin: -8px 0 0; color: var(--faint); font-size: 0.78rem; min-height: 1.1em; }

.plano-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plano-lista li {
  position: relative;
  padding-left: 25px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.plano-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ok);
  font-weight: 700;
}
/* Recurso que o plano NÃO tem. Fica na lista de propósito: comparar planos é
   mais fácil quando as três colunas têm as mesmas linhas na mesma ordem. */
.plano-lista li.nao { color: var(--faint); }
.plano-lista li.nao::before { content: '—'; color: var(--faint); }
.plano-lista li b { color: var(--text); font-weight: 600; }

.plano-card .party-btn { margin-top: auto; }

/* Segunda ação do cartão do Pro: o teste grátis. Deliberadamente discreto —
   é a saída para quem ainda não se decidiu, não pode competir com o botão de
   assinar logo acima. Quando o cartão mostra o teste, o `margin-top: auto` do
   botão de assinar já empurrou os dois para o rodapé do cartão juntos. */
.plano-teste {
  margin-top: 8px;
  width: 100%;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.79rem;
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plano-teste:hover:not(:disabled) { color: var(--accent); }
.plano-teste:disabled { cursor: default; text-decoration: none; }
/* Caminho alternativo de pagamento (Pix/boleto). Discreto de proposito: o
   cartao resolve sem sair do site e por isso e o botao cheio, mas quem paga so
   por Pix precisa achar a saida sem ter de adivinhar que ela existe. */
.plano-alt {
  margin-top: 8px;
  width: 100%;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.79rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plano-alt:hover:not(:disabled) { color: var(--accent); }
.plano-alt:disabled { cursor: default; text-decoration: none; opacity: 0.6; }

/* Que o teste exige cartao e vira cobranca fica NO CARTAO, junto do botao, e
   nao so dentro do formulario: quem clica ja tem de saber no que esta
   clicando. Letra miuda escondida atras de um clique e o que gera estorno. */
.plano-teste-nota {
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--faint);
  text-align: center;
}

.plano-atual {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ok);
  border: 1px dashed rgba(52, 211, 153, 0.4);
  border-radius: 10px;
  padding: 10px;
}

/* Tabela de comparação abaixo dos cartões. */
.plano-tabela-wrap { overflow-x: auto; margin-top: 34px; }
.plano-tabela { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.88rem; }
.plano-tabela th, .plano-tabela td {
  text-align: center;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
}
.plano-tabela th:first-child, .plano-tabela td:first-child { text-align: left; color: var(--text); }
.plano-tabela thead th {
  font-family: 'Oxanium', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.plano-tabela td { color: var(--muted); }
.plano-tabela .sim { color: var(--ok); font-weight: 700; }
.plano-tabela .nao { color: var(--faint); }

/* --------------------------------- FAQ ----------------------------------- */
/* Reusa o accordion .ext-steps (details/summary) que já existe no app, só com o
   espaçamento de página de conteúdo. */
.faq-grupo { margin: 0 0 26px; }
.faq-grupo > h2 { margin-bottom: 12px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 8px;
  padding: 0 16px;
}
.faq-item[open] { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.045); }
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 26px 14px 0;
  position: relative;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 12px;
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
}
.faq-item[open] > summary::after { content: '–'; }
.faq-item > *:not(summary) { margin-bottom: 14px; }
.faq-item p, .faq-item li { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.faq-item p { margin: 0 0 10px; }
.faq-item ul { margin: 0 0 10px; padding-left: 20px; }

/* ------------------------------- Tutorial -------------------------------- */
/* .lobby-steps é grade de 3 colunas; no tutorial os passos são uma trilha
   vertical, com espaço para explicação de verdade em cada um. */
.tut-passos { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; }
.tut-passos li { padding: 16px 18px 16px 52px; }
.tut-passos li::before { top: 16px; left: 16px; width: 24px; height: 24px; font-size: 0.76rem; }
.tut-passos > li > b { font-size: 1rem; margin-bottom: 2px; }
.tut-passos > li > span { font-size: 0.88rem; }
.tut-passos .plano-tag {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 2px;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  color: #a9c1ff;
  border: 1px solid rgba(91, 140, 255, 0.35);
  background: rgba(91, 140, 255, 0.12);
}
/* Formato de URL no tutorial: é exemplo de FORMA, não link para lugar nenhum. */
.url-exemplo {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  color: #cfe0ff;
  overflow-x: auto;
  white-space: nowrap;
}
.url-exemplo .parte { color: var(--faint); }

/* -------------------------------- Rodapé --------------------------------- */
/* Nasceu porque a privacidade.html não era linkada de lugar nenhum: existia no
   servidor e ninguém dentro do app chegava nela. */
.site-footer {
  /* Faixa fechada, e não um filete com ar em volta. Na tela inicial — que agora
     é só o herói — o rodapé era uma linha de 1px flutuando com o terço de baixo
     da tela vazio em volta. Como cartão, ele ENCERRA a página: usa a mesma
     borda, o mesmo raio e o mesmo fundo dos cartões do resto do produto, então
     lê como parte do sistema e não como enfeite para tapar buraco. */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
  /* `auto` empurra o rodapé para o fim da coluna quando sobra espaço, e vale 0
     quando não sobra — nas telas com conteúdo ele encosta na última fileira. */
  margin-top: auto;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
/* A marca vem primeiro na leitura, mas no HTML ela está depois do <nav> — assim
   o teclado alcança os links antes de um logo que só leva à mesma home.
   Em LINHA, e não empilhada: a frase empilhada esticava a marca para 59px de
   altura contra os 26px do <nav>, e os links acabavam centrados no vão entre a
   logo e a frase, alinhados com nada. Lado a lado, tudo assenta na mesma linha. */
.footer-marca {
  order: -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Sem separador desenhado entre os dois. Um "·" via ::before funcionava lado a
     lado, mas abaixo de ~410px a frase quebra para a linha seguinte e o ponto ia
     junto, abrindo a linha como se fosse um marcador de lista. O contraste já
     separa os dois — wordmark em gradiente e negrito contra uma frase pequena em
     `--faint` — e um vão maior fecha a conta, sem breakpoint para manter. */
  gap: 16px;
  /* Numa tela estreita a frase desce sozinha para a linha de baixo, em vez de
     espremer o wordmark. */
  flex-wrap: wrap;
}
.footer-marca .logo-wordmark { font-size: 1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.84rem;
  padding: 5px 10px;
  border-radius: 8px;
}
.site-footer a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.site-footer small { color: var(--faint); font-size: 0.78rem; }

@media (max-width: 860px) {
  .planos-grid { grid-template-columns: 1fr; }
  /* Sem a ordem natural o cartão em destaque cairia no meio da pilha; no
     celular ele vai para o topo, que é o primeiro (e às vezes único) que a
     pessoa vê antes de desistir de rolar. */
  .plano-card--destaque { order: -1; }
  .doc-top { flex-direction: column; align-items: flex-start; }
}

/* Medido nos elementos renderizados: marca 334px + links 382px + 20 de vão =
   736, mais 44 de padding do cartão e 48 do padding lateral da shell — a linha
   única precisa de ~830px de viewport. Abaixo disso os dois blocos empilham de
   qualquer jeito, então é onde o empilhamento passa a ser declarado (em vez de
   acontecer por quebra, que deixava o `align-items` do desktop valendo). */
@media (max-width: 840px) {
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* Celular. Empilhado e alinhado à esquerda, o rodapé chegava a 173px — 26% de
   uma tela de 667px, para uma marca e cinco links. O que engorda é sempre o
   mesmo: a frase quebrando com 16px de vão, os links quebrando em duas linhas
   com folga de sobra, e o padding do cartão pensado para desktop.
   Centralizado também assenta melhor: o herói acima é centrado, e um rodapé
   encostado à esquerda embaixo dele ficava torto. */
@media (max-width: 600px) {
  .site-footer {
    align-items: center;
    text-align: center;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .footer-marca { justify-content: center; gap: 4px 12px; }
  .site-footer nav { justify-content: center; gap: 2px; }
  .site-footer a { padding: 5px 9px; font-size: 0.82rem; }
  .footer-marca small { font-size: 0.76rem; }
}

/* Selo do plano ao lado do apelido na barra do topo. Só aparece em plano pago
   (ver renderAccount no app.js) — marcar "FREE" seria lembrar a pessoa do que
   ela não tem toda vez que ela olha para a própria conta. */
.plan-badge {
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Oxanium', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #061021;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}