/* =========================================================================
   SuperCine
   Um arquivo, sem framework. Pensado para três telas ao mesmo tempo:
   celular (toque), desktop (mouse) e Fire Stick (controle remoto a 3 m).
   ========================================================================= */

:root {
  --bg: #0b0b0f;
  --bg-soft: #14141b;
  --surface: #1b1b24;
  --surface-2: #23232f;
  --line: #2c2c3a;

  --text: #f2f2f5;
  --text-dim: #a0a0b0;
  --brand: #e50914;
  --brand-soft: rgba(229, 9, 20, 0.18);
  --live: #ff2d3f;

  --radius: 12px;
  --card-w: 148px;
  --gap: 12px;

  --focus: 0 0 0 3px var(--brand), 0 12px 32px rgba(0, 0, 0, 0.6);

  /*
   * Recortes do sistema (barra de status, notch, barra de gestos).
   *
   * O `index.html` pede `viewport-fit=cover`, e a partir do targetSdk 35 o
   * Android IMPÕE edge-to-edge — a WebView passa a ocupar a tela inteira,
   * inclusive por baixo do relógio e da bateria. Sem consumir estes insets, a
   * barra do app fica escondida atrás dos ícones do sistema.
   *
   * O Capacitor 8 tenta injetar isso sozinho e FALHA neste aparelho — o
   * logcat mostra "Error injecting safe area CSS: Cannot read properties of
   * null (reading 'style')" a cada abertura. Então fazemos aqui, que é onde
   * dá para ver o que está acontecendo.
   *
   * O fallback `0px` cobre a TV e o desktop, onde `env()` não resolve.
   */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Numa TV, tudo precisa ser maior e o foco precisa gritar. */
@media (min-width: 1200px) {
  :root {
    --card-w: 176px;
    --gap: 16px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body.is-locked {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* =========================================================================
   Topo
   ========================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  /*
   * O topo soma o inset da barra de status. Não dá para resolver isso com
   * padding no `body`: a barra é `sticky top: 0`, então ela gruda no topo do
   * VIEWPORT ao rolar, ignorando qualquer padding do pai.
   */
  padding: calc(12px + var(--sat)) calc(clamp(12px, 3vw, 40px) + var(--sar)) 12px
    calc(clamp(12px, 3vw, 40px) + var(--sal));
  background: linear-gradient(180deg, rgba(11, 11, 15, 0.98) 60%, rgba(11, 11, 15, 0));
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}

.topbar__logo {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
}
.topbar__logo b {
  color: var(--brand);
}

.nav {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav__item {
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}

.nav__item:hover {
  color: var(--text);
  background: var(--surface);
}

.nav__item.is-active {
  color: var(--text);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(229, 9, 20, 0.4);
}

.nav__item:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.topbar__search {
  flex: 0 1 320px;
}

#search-input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}

#search-input::placeholder {
  color: var(--text-dim);
}

#search-input:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--focus);
}

.status {
  margin: 0;
  padding: 6px clamp(12px, 3vw, 40px) 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.status--warn {
  color: #ffb44d;
}

/* =========================================================================
   Conteúdo
   ========================================================================= */

.content {
  padding: 8px 0 calc(64px + var(--sab));
}

/* Enquanto há busca ativa, a visão normal some — sem descarregar nada. */
body.is-searching .view {
  display: none;
}
body:not(.is-searching) .search-results {
  display: none;
}

.search-results,
.view {
  min-height: 40vh;
}

/* =========================================================================
   Carrossel
   ========================================================================= */

.row {
  margin: 0 0 8px;
  padding: 4px 0;
}

.row__title {
  margin: 12px 0 4px;
  padding: 0 clamp(12px, 3vw, 40px);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.row__icon {
  font-size: 1em;
}

.row__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px clamp(12px, 3vw, 40px) 20px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  /* O card cresce ao focar; sem isso, ele é cortado pela borda do scroller. */
  overscroll-behavior-x: contain;
}

.row__track::-webkit-scrollbar {
  height: 6px;
}
.row__track::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
.row__track::-webkit-scrollbar-track {
  background: transparent;
}

.row__empty {
  padding: 0 clamp(12px, 3vw, 40px);
  color: var(--text-dim);
  font-size: 0.9rem;
}

.row__empty--error {
  color: #ff8a8a;
}

/* Grade (usada na busca) */
.grid-section {
  margin-bottom: 12px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: var(--gap);
  padding: 12px clamp(12px, 3vw, 40px) 20px;
}

/* Dentro de uma grade o card obedece à célula, não à própria largura fixa. */
.grid .card {
  width: auto;
  flex-basis: auto;
}

/* Canais e eventos são mais largos que um pôster. */
.grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) * 1.4), 1fr));
}

.search__note {
  padding: 0 clamp(12px, 3vw, 40px) 24px;
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* =========================================================================
   Cards
   ========================================================================= */

.card {
  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  outline: none;
  scroll-snap-align: start;
}

.card--poster {
  aspect-ratio: 2 / 3;
}

.card--event,
.card--channel {
  aspect-ratio: 16 / 10;
  flex-basis: calc(var(--card-w) * 1.55);
  width: calc(var(--card-w) * 1.55);
}

.card:hover,
.card:focus-visible,
.card:focus {
  transform: scale(1.06);
  box-shadow: var(--focus);
  z-index: 5;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: var(--surface-2);
  color: var(--text-dim);
}

.card__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 10px 8px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92) 55%);
  font-size: 0.8rem;
  line-height: 1.25;
}

.card__label strong {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__label small {
  color: var(--text-dim);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__rating,
.card__tag,
.card__when,
.card__live {
  position: absolute;
  top: 8px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  backdrop-filter: blur(4px);
}

.card__rating {
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffd54a;
}

.card__tag {
  left: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text);
}

.card__tag--new {
  background: var(--brand);
}

.card__when {
  left: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text-dim);
  text-transform: none;
  font-weight: 600;
}

.card__live {
  left: 8px;
  background: var(--live);
  color: #fff;
  text-transform: uppercase;
  animation: livePulse 1.6s ease-in-out infinite;
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__live {
    animation: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* Card de evento: escudo × escudo, montado com as imagens da própria API */
.card--event {
  background: radial-gradient(120% 100% at 50% 0%, var(--surface-2), #0f0f16);
}

/*
 * `is-live` NÃO desenha borda.
 *
 * Ela existia aqui e pintava de vermelho todos os cards ao vivo ao mesmo
 * tempo — na aba Ao vivo isso é a grade inteira, e o vermelho deixava de
 * significar "selecionado" para virar ruído de fundo. Quem sinaliza que está
 * no ar é o selo `.card__live`, que já pisca. A borda fica reservada ao foco,
 * como no resto do app.
 */

.versus {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 12px 40px;
}

.versus__crest {
  width: clamp(34px, 26%, 56px);
  height: clamp(34px, 26%, 56px);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.versus__crest--ph {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 700;
}

.versus--single .versus__crest {
  width: clamp(48px, 40%, 84px);
  height: clamp(48px, 40%, 84px);
}

/* Arte do esporte quando não há escudos: escurecida embaixo para o título ler. */
.card__img--event {
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.versus__x {
  color: var(--text-dim);
  font-size: 1.1rem;
  font-weight: 700;
}

.card__label--event,
.card__label--channel {
  padding: 16px 10px 8px;
  text-align: center;
}

/* Canal */
.card--channel {
  background: var(--surface-2);
  display: grid;
  place-items: center;
}

.channel__logo {
  max-width: 62%;
  max-height: 52%;
  object-fit: contain;
  margin-top: -10px;
}

/*
 * Guia XMLTV no card do canal.
 *
 * Duas linhas no máximo: numa grade de 101 canais, título de programa longo
 * cortado em duas linhas ainda se lê de longe; em três, a grade desalinha.
 */
/*
 * Seletor com o pai de propósito: `.card__label small` (0,1,1) traz
 * `white-space: nowrap` e ganharia de um `.channel__now` sozinho (0,1,0) —
 * o nome do programa ficava numa linha só, cortado na borda do card em vez de
 * quebrar. Aqui são duas classes (0,2,0) e o `normal` volta a valer.
 */
.card__label--channel .channel__now {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1.25;
  margin-top: 2px;
}

/* Quanto do programa já passou. Fica colada na base do card. */
.channel__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.channel__bar-fill {
  display: block;
  height: 100%;
  background: var(--brand);
}

/* Esqueleto de carregamento */
.card--skeleton {
  aspect-ratio: 2 / 3;
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 240% 100%;
  animation: shimmer 1.4s linear infinite;
  pointer-events: none;
}

@keyframes shimmer {
  to {
    background-position: -240% 0;
  }
}

/* =========================================================================
   Player
   ========================================================================= */

.player {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #000;
}

.player[hidden] {
  display: none;
}

.player__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal));
  background: rgba(0, 0, 0, 0.9);
}

.player__close {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

.player__close:hover,
.player__close:focus-visible {
  background: var(--brand);
  outline: none;
  box-shadow: var(--focus);
}

/*
 * O título é o ÚNICO item elástico da barra.
 *
 * Sem `min-width: 0` um item flex nunca encolhe além do conteúdo — o título
 * empurrava os botões para fora da tela, e no celular o "Próximo ▶" aparecia
 * cortado e o "⚙ Servidor" nem aparecia. Botão fora da tela é botão que não
 * existe; título truncado ainda se lê.
 */
.player__title {
  /*
   * `1 1 auto`, e não `flex: 1` (que é `1 1 0%`).
   *
   * Com base 0% o encolhimento do título é proporcional a ZERO — ou seja, ele
   * não encolhe, e quem paga a conta inteira é o meta ao lado, que virava
   * "T1 …". Com base `auto` a base é a largura real do texto, então o título
   * (longo) cede muito mais que o meta (curto), que é o que se quer.
   */
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * "T1 E5 · Nome do episódio" — NÃO encolhe.
 *
 * Deixar título e meta encolherem juntos parece justo e não é: os dois
 * diminuem proporcionalmente e o meta vira "T1 …", escondendo o número do
 * episódio, que é a única coisa da barra que você não consegue deduzir
 * olhando o vídeo. Quem cede espaço é o título, sempre.
 *
 * Mas ele PODE encolher — sem isso um nome de episódio comprido empurrava o
 * "⏭" e o "⚙" para fora da tela. Nada de `max-width` fixo: com `0 1 auto` o
 * flex encolhe exatamente o que faltar para os botões caberem, e nem um pixel
 * a mais. No celular o título está oculto, então o meta é o único que cede —
 * e cede pouco.
 */
.player__meta {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  /* Só os ícones. Os rótulos sobrevivem no aria-label e no title. */
  .player__act-txt {
    display: none;
  }

  .player__act {
    padding: 8px 10px;
  }

  /*
   * O título sai inteiro no celular. Espremido ele já não mostrava nada além
   * de reticências, e ainda roubava a largura do "T1 E3". Você acabou de
   * clicar no título — não precisa dele escrito aí.
   */
  .player__title {
    display: none;
  }
}

.player__stage {
  flex: 1;
  min-height: 0;
  background: #000;
}

.player__stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /*
   * Um iframe sem fundo próprio pinta BRANCO — e o embed leva um tempo até
   * aplicar o dele. Numa TV escura isso é um estouro de luz a cada abertura,
   * e some numa faixa em volta do vídeo quando a proporção não bate.
   */
  background: #000;
}

/*
 * Cursor do controle remoto.
 *
 * Só aparece depois da primeira seta com o player aberto, então em celular
 * (que é só toque) ele nunca surge. `pointer-events: none` é obrigatório: o
 * clique real é despachado pelo nativo na coordenada, e o cursor não pode
 * interceptá-lo.
 */
.player__cursor {
  position: fixed;
  z-index: 60;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.06s linear;
}

.player__cursor[hidden] {
  display: none;
}

.player__cursor.is-clicking {
  transform: scale(0.6);
}

/*
 * Navegação de episódios na barra — substitui a lista do provedor, escondida
 * pelo `#noEpList`. `margin-left: auto` empurra o bloco para a direita e deixa
 * o título ocupar o meio.
 */
.player__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}

.player__nav[hidden] {
  display: none;
}

.player__act {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 600;
  white-space: nowrap;
}

.player__act[hidden] {
  display: none;
}

.player__act--next {
  background: var(--surface-2);
}

.player__act:hover,
.player__act:focus-visible {
  background: var(--brand);
  outline: none;
  box-shadow: var(--focus);
}

/* =========================================================================
   Gaveta de episódios (dentro do player)

   Painel opaco por cima do vídeo. Opaco, e não translúcido, de propósito: um
   fundo com o filme passando atrás rouba a leitura dos títulos a 3 m de
   distância, que é a distância de uso na TV.
   ========================================================================= */

.drawer {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 40;
  width: min(460px, 92vw);
  display: flex;
  flex-direction: column;
  /* Sólido mesmo: com 0.97 os botões da barra do player apareciam fantasmas
     atrás do cabeçalho da gaveta. */
  background: #090910;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.7);
}

.drawer[hidden] {
  display: none;
}

/*
 * A gaveta é `top: 0` dentro do `.player`, que por sua vez é `fixed; inset: 0`
 * — ou seja, ela começa no topo ABSOLUTO da tela, por cima da barra do player.
 * Sem o inset aqui, o título e o ✕ caem embaixo do relógio e da bateria.
 * A barra do player já trata disso por conta dela; esta é outra camada e
 * precisa da própria conta.
 */
.drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--sat)) calc(16px + var(--sar)) 14px 16px;
  border-bottom: 1px solid var(--line);
}

.drawer__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__close {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
}

.drawer__close:hover,
.drawer__close:focus-visible {
  background: var(--brand);
  outline: none;
  box-shadow: var(--focus);
}

.drawer__seasons {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.drawer__seasons::-webkit-scrollbar {
  display: none;
}

/* O último episódio não pode terminar embaixo da barra de gestos. */
.drawer__eps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 calc(12px + var(--sar)) calc(16px + var(--sab)) 12px;
}

.drawer__loading {
  padding: 16px;
  color: var(--text-dim);
}

.drawer__ep {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  align-items: center;
}

.drawer__ep:hover,
.drawer__ep:focus-visible {
  background: var(--surface);
  outline: none;
  box-shadow: var(--focus);
}

.drawer__ep.is-watched {
  opacity: 0.55;
}

.drawer__ep.is-watched:hover,
.drawer__ep.is-watched:focus-visible,
.drawer__ep.is-watched.is-current {
  opacity: 1;
}

/* O que está tocando agora — a barra vermelha é legível de longe. */
.drawer__ep.is-current {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.drawer__thumb {
  width: 96px;
  height: 54px;
  flex: none;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}

.drawer__thumb--ph {
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.drawer__ep-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer__ep-text strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__ep-text small {
  color: var(--text-dim);
  font-size: 0.75rem;
}

/* =========================================================================
   Detalhes
   ========================================================================= */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 10, 0.94);
  overflow: hidden;
}

.sheet[hidden] {
  display: none;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
  opacity: 0.22;
  filter: blur(2px);
}

/* Também cobre a tela inteira, então repete a conta dos recortes. */
.sheet__scroll {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: calc(16px + var(--sat)) calc(clamp(12px, 4vw, 56px) + var(--sar)) calc(64px + var(--sab))
    calc(clamp(12px, 4vw, 56px) + var(--sal));
}

.sheet__close {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
  margin-bottom: 16px;
}

.sheet__close:hover,
.sheet__close:focus-visible {
  background: var(--brand);
  outline: none;
  box-shadow: var(--focus);
}

.sheet__head {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.sheet__poster {
  width: clamp(120px, 20vw, 220px);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.sheet__info {
  flex: 1 1 320px;
  min-width: 0;
}

.sheet__info h2 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.sheet__tagline {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-style: italic;
}

.sheet__facts {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 0.9rem;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sheet__rating {
  color: #ffd54a;
  font-weight: 700;
}

.sheet__overview {
  margin: 0 0 20px;
  max-width: 70ch;
  line-height: 1.55;
  color: #d8d8e0;
}

.sheet__loading {
  color: var(--text-dim);
  padding: 12px clamp(12px, 3vw, 40px);
}

.sheet__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 700;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}

.btn:focus-visible,
.btn:hover {
  outline: none;
  box-shadow: var(--focus);
}

/* Temporadas */
.seasons {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 16px;
}

.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.chip.is-active {
  background: var(--brand-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(229, 9, 20, 0.5);
}

.chip:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Episódios */
.episodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.episode {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  transition: background 0.15s, transform 0.15s;
}

.episode:hover,
.episode:focus-visible {
  background: var(--surface-2);
  transform: translateY(-2px);
  outline: none;
  box-shadow: var(--focus);
}

.episode.is-current {
  box-shadow: inset 0 0 0 2px var(--brand);
}

/*
 * Já assistido. Esmaece em vez de esconder: numa lista de 24 episódios o que
 * você procura é a fronteira entre visto e não visto, e ela só aparece se os
 * dois estados estiverem na tela. A opacidade sobe de volta no foco, senão o
 * episódio ficaria ilegível justamente quando selecionado no controle.
 */
.episode.is-watched {
  opacity: 0.55;
}

.episode.is-watched:hover,
.episode.is-watched:focus-visible,
.episode.is-watched.is-current {
  opacity: 1;
}

.episode__thumb {
  width: 112px;
  height: 63px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
}

.episode__thumb--ph {
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.episode__text {
  min-width: 0;
}

.episode__text strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.episode__text small {
  color: var(--text-dim);
  font-size: 0.78rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================================
   Celular
   ========================================================================= */

@media (max-width: 640px) {
  :root {
    --card-w: 118px;
    --gap: 10px;
  }

  .topbar {
    gap: 10px;
    padding: calc(10px + var(--sat)) calc(12px + var(--sar)) 10px calc(12px + var(--sal));
  }

  .topbar__brand {
    order: 1;
  }

  .topbar__search {
    order: 2;
    flex: 1;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav__item {
    padding: 7px 14px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .sheet__head {
    gap: 14px;
  }

  .episodes {
    grid-template-columns: 1fr;
  }
}