/* Página da novela (player embutido) e refinamentos do player. Construído só sobre tokens.css. */

:root {
  --novela-max: 1180px;
  --novela-gutter: clamp(16px, 4vw, 40px);
  --novela-player-w: min(420px, calc((100dvh - var(--nav-height, 72px) - 96px) * .5625));
}

/* ───────────── Página ───────────── */
.app:has(.novela) { padding-top: 0; }
.view:has(> .novela) { padding-bottom: 0; }

.novela {
  position: relative;
  isolation: isolate;
  max-width: calc(var(--novela-max) + 2 * var(--novela-gutter));
  margin-inline: auto;
  padding: calc(var(--nav-height, 72px) + env(safe-area-inset-top, 0px) + var(--g-space-4)) var(--novela-gutter) var(--g-space-16);
}

.novela__ambient {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw) auto;
  height: min(720px, 90dvh);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
}
.novela__ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(64px) saturate(1.3) brightness(.42);
  transform: scale(1.25);
}


.novela__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "watch" "info";
  gap: var(--g-space-6);
}
.novela__head { grid-area: head; }
.novela__watch { grid-area: watch; display: grid; gap: var(--g-space-3); justify-items: center; }
.novela__info { grid-area: info; display: grid; gap: var(--g-space-8); align-content: start; }

.novela__title {
  margin: 0;
  font-family: var(--g-font-display);
  font-weight: var(--g-weight-display);
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.novela__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-space-2) var(--g-space-4);
  margin: var(--g-space-4) 0 0;
  font-size: var(--g-text-sm);
  color: var(--g-text-muted);
}
.novela__facts > span { display: inline-flex; align-items: center; gap: var(--g-space-4); }

.novela__actions { display: flex; flex-wrap: wrap; gap: var(--g-space-3); }
.novela__actions .g-btn--lg { border-radius: var(--g-radius-full); }
.novela__actions .g-btn--lg:not(.g-btn--icon) { padding-inline: var(--g-space-6); }
.novela__actions .g-btn--icon .g-icon { width: 22px; height: 22px; }
.novela__actions .g-btn__label,
.player-story .g-btn__label { display: inline-flex; align-items: center; gap: 10px; }
.novela__actions .g-btn__label .g-icon { width: 20px; height: 20px; }
.novela__play .g-icon { fill: currentColor; }
.novela__play { display: none; }
.novela__fav { flex: 1 1 auto; }
.novela__fav[aria-pressed="true"] { --g-btn-bg: color-mix(in srgb, var(--g-brand) 22%, var(--g-surface)); --g-btn-border: color-mix(in srgb, var(--g-brand) 55%, transparent); color: var(--g-brand-100); }
.novela__fav[aria-pressed="true"] .g-icon { fill: currentColor; }

.novela__info h2 {
  margin: 0 0 var(--g-space-3);
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-bold);
  color: var(--g-text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.novela__synopsis p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--g-text-md);
  line-height: var(--g-leading-reading);
  color: color-mix(in srgb, var(--g-text) 86%, transparent);
  text-wrap: pretty;
}

.novela__genres ul { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.novela__genres a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--g-space-4);
  border: 1px solid var(--g-glass-edge-dim);
  border-radius: var(--g-radius-full);
  color: var(--g-text);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  text-decoration: none;
  transition: border-color var(--g-dur-fast), background-color var(--g-dur-fast), color var(--g-dur-fast);
}
.novela__genres a:hover { border-color: color-mix(in srgb, var(--g-brand) 60%, transparent); background: color-mix(in srgb, var(--g-brand) 12%, transparent); color: var(--g-brand-100); }

.novela__devices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-space-3) var(--g-space-6);
  margin: 0;
  padding: var(--g-space-4) 0 0;
  border-top: 1px solid var(--g-glass-edge-dim);
  list-style: none;
  font-size: var(--g-text-sm);
  color: var(--g-text-muted);
}
.novela__devices li { display: inline-flex; align-items: center; gap: var(--g-space-2); }
.novela__devices .g-icon { width: 18px; height: 18px; color: var(--g-brand-text); }

.novela__immersive {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  min-height: 40px;
  padding: 0 var(--g-space-3);
  color: var(--g-text-muted);
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-semibold);
  text-decoration: none;
  border-radius: var(--g-radius-full);
  transition: color var(--g-dur-fast), background-color var(--g-dur-fast);
}
.novela__immersive:hover { color: var(--g-text); background: color-mix(in srgb, white 6%, transparent); }
.novela__immersive .g-icon { width: 16px; height: 16px; }

.novela__episodes .episode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--g-space-2); }

/* Relacionadas */
.novela__related { margin-top: var(--g-space-16); }
.novela__related-head { display: flex; align-items: end; justify-content: space-between; gap: var(--g-space-4); margin-bottom: var(--g-space-6); }
.novela__related-head h2 {
  margin: 0;
  font-family: var(--g-font-display);
  font-weight: var(--g-weight-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -.02em;
}
.novela__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--g-brand-text);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
.novela__more .g-icon { width: 16px; height: 16px; transition: translate var(--g-dur-fast) var(--g-ease-enter); }
.novela__more:hover .g-icon { translate: 3px 0; }
.novela__related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g-space-6) var(--g-space-3);
}
.novela__related-grid .g-card { display: flex; flex-direction: column; border: 0; background: transparent; box-shadow: none; }
.novela__related-grid .g-card__title { font-size: var(--g-text-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 560px) { .novela__related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .novela__related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-space-8) var(--g-space-5); } }
@media (min-width: 1100px) { .novela__related-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (min-width: 960px) {
  .novela__grid {
    grid-template-columns: var(--novela-player-w) minmax(0, 1fr);
    grid-template-areas: "watch head" "watch info";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 72px);
    row-gap: var(--g-space-8);
  }
  .novela__watch { position: sticky; top: calc(var(--nav-height, 72px) + var(--g-space-4)); align-self: start; }
  .novela__head { padding-top: var(--g-space-6); }
  .novela__play { display: inline-flex; }
  .novela__fav { flex: 0 0 auto; }
  .novela__info { max-width: 640px; }
}

/* ───────────── Player embutido ───────────── */
.watch-player { position: relative; width: 100%; max-width: 460px; }
.watch-player .player-stage {
  width: 100%;
  max-height: none;
  aspect-ratio: 9 / 16;
  border-radius: var(--g-radius-lg);
  overflow: hidden;
  background: var(--g-media-bg);
  box-shadow: 0 30px 80px -20px #000000b3, 0 0 0 1px var(--g-glass-edge-dim);
  touch-action: pan-y;
  translate: none;
}
.watch-player .player-video { border-radius: inherit; }
@media (max-width: 959px) {
  .watch-player { max-width: none; margin-inline: calc(-1 * var(--novela-gutter)); width: calc(100% + 2 * var(--novela-gutter)); }
  .watch-player .player-stage { border-radius: 0; max-height: calc(100dvh - 2 * var(--nav-height, 72px) - env(safe-area-inset-bottom, 0px) - 16px); width: auto; margin-inline: auto; box-shadow: none; }
}
@media (min-width: 560px) and (max-width: 959px) {
  .watch-player { margin-inline: 0; width: 100%; }
  .watch-player .player-stage { border-radius: var(--g-radius-lg); max-height: 78dvh; }
}

.player-poster { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity var(--g-dur-slow) var(--g-ease-enter); }
.player-poster__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.5) saturate(1.2); transform: scale(1.2); }
.player-poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.watch-player:not(.is-idle) .player-poster { opacity: 0; }

.player-idle-cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(50% + 56px);
  translate: -50% 0;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--g-radius-full);
  background: color-mix(in srgb, var(--g-media-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--g-media-text);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-semibold);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--g-dur-normal);
}
.watch-player:not(.is-idle) .player-idle-cta { opacity: 0; }
.watch-player.is-idle :is(.player-chrome, .player-minimal, .player-shade) { opacity: 0; pointer-events: none; visibility: hidden; }
.watch-player.is-idle .player-stage { cursor: pointer; }
.watch-player.is-idle .player-pause { animation: player-breathe 2.4s var(--g-ease-standard) infinite; }
@keyframes player-breathe {
  0%, 100% { box-shadow: 0 12px 36px #00000073, 0 0 0 0 color-mix(in srgb, var(--g-brand) 45%, transparent); }
  50% { box-shadow: 0 12px 36px #00000073, 0 0 0 14px color-mix(in srgb, var(--g-brand) 0%, transparent); }
}

/* ───────────── Refinamentos do player (os dois modos) ───────────── */
.player-stage:focus-visible { outline: 2px solid var(--g-brand-text); outline-offset: 3px; }
.player-pause { width: 84px; height: 84px; }
.player-pause .g-icon { width: 32px; height: 32px; fill: currentColor; margin-left: 4px; }
.player-controls { gap: 2px; padding: 40px 14px calc(14px + env(safe-area-inset-bottom)); }
.player-controls-meta { padding-inline: 4px; }
.player-time { display: inline-flex; gap: 6px; font-size: .75rem; }
.player-time__sep { opacity: .5; }
.player-controls-dock {
  width: 100%;
  justify-content: space-between;
  padding: 4px;
  gap: 2px;
}
.player-controls-dock .g-btn--icon { width: 40px; height: 40px; }
.player-controls-dock .g-btn--icon .g-icon { width: 20px; height: 20px; }
.player-controls-dock .toggle-play { width: 48px; height: 48px; }
.player-controls-dock .toggle-play .g-icon { width: 20px; height: 20px; fill: currentColor; }
.player-controls-dock .player-skip { font-size: .75rem; font-weight: 700; }
.player-controls-dock [hidden] { display: none; }
.progress-control { height: 28px; }
.player-progress { height: 28px; }
.shade-bottom { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--g-media-bg) 88%, transparent)); }
.media-status { inset-inline: 20px; top: 50%; translate: 0 -50%; padding: var(--g-space-6) var(--g-space-5); gap: var(--g-space-3); border-radius: var(--g-radius-lg); }
.media-status h2 { margin: 0; font-size: var(--g-text-lg); }
.media-status p { margin: 0; color: var(--g-text-muted); font-size: var(--g-text-sm); line-height: 1.5; }
.media-status [data-status-acoes] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g-space-2); }
.series-end { inset: 0; gap: var(--g-space-4); background: color-mix(in srgb, var(--g-media-bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 6; }
.series-end h2 { margin: 0; font-size: 2rem; }
.series-end p { margin: 0; max-width: 28ch; }
.series-end[hidden] { display: none; }
.next-panel[hidden], .media-status[hidden] { display: none; }

/* Imersivo: painel lateral */
.player-story__title { text-wrap: balance; }
.player-story__meta .badge {
  padding: 5px 10px;
  border-radius: var(--g-radius-full);
  border: 1px solid var(--g-glass-edge-dim);
  color: var(--g-text);
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-semibold);
  text-decoration: none;
}
.player-story__meta .badge--brand { border-color: transparent; background: color-mix(in srgb, var(--g-brand) 22%, transparent); color: var(--g-brand-100); }
.player-story__meta a.badge:hover { border-color: color-mix(in srgb, var(--g-brand) 60%, transparent); }
.player-details--vazio { visibility: hidden; }
.player-story .player-secondary-actions { display: flex; gap: var(--g-space-2); align-items: center; }
.player-story .favorite-button[aria-pressed="true"] .g-icon { fill: currentColor; color: var(--g-brand-text); }
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
  .player-view { grid-template-columns: minmax(0, 1fr) min(calc(var(--g-vvh, 100dvh) * .5625), 42vw) minmax(0, 1fr); }
  .player-view .player-stage { border-radius: 0; }
  .player-story { max-width: 340px; }
}

/* Ajuda */
.player-help {
  width: min(420px, calc(100vw - 32px));
  padding: var(--g-space-6);
  border: 1px solid var(--g-glass-edge-dim);
  border-radius: var(--g-radius-lg);
  background: var(--g-surface);
  color: var(--g-text);
  box-shadow: var(--g-shadow-lg);
}
.player-help::backdrop { background: var(--g-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.player-help h2 { margin: 0 0 var(--g-space-4); font-size: var(--g-text-lg); }
.player-help dl { display: grid; gap: var(--g-space-2); margin: 0 0 var(--g-space-5); }
.player-help dl > div { display: flex; justify-content: space-between; gap: var(--g-space-4); padding: var(--g-space-2) 0; border-bottom: 1px solid var(--g-glass-edge-dim); font-size: var(--g-text-sm); }
.player-help dt { font-weight: var(--g-weight-semibold); }
.player-help dd { margin: 0; color: var(--g-text-muted); text-align: right; }
.player-help > button { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .watch-player.is-idle .player-pause { animation: none; }
  .novela__more .g-icon { transition: none; }
}