/* ─── PLAYER ─── */
.player-meta { max-width: 1000px; margin: 0 auto 16px; padding: 0 48px; animation: fadeIn .4s ease; }
.player-meta h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); margin-bottom: 8px; }
.meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.meta-row span { color: var(--text-muted); font-size: .82rem; }
.meta-rating { color: var(--warm-light) !important; font-weight: 700; }
.meta-desc { color: var(--text-muted); font-size: .85rem; line-height: 1.6; max-width: 600px; margin-bottom: 14px; }
.fav-btn {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-secondary); padding: 8px 18px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: .8rem; transition: all var(--dur-quick) var(--ease-out);
}
.fav-btn:hover { background: var(--primary-surface); border-color: var(--border-default); color: var(--primary-bright); }

#tv-selector { max-width: 1000px; margin: 0 auto 14px; padding: 0 48px; }
.tv-selector-inner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tv-selector-inner select {
  padding: 8px 14px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .82rem; min-width: 150px; cursor: pointer;
}
.ep-nav-btn {
  padding: 7px 14px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .82rem; cursor: pointer;
}
.ep-nav-btn:hover { background: var(--primary-surface); border-color: var(--border-default); color: #fff; }

.play-btn {
  padding: 10px 24px; background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none; border-radius: var(--radius-sm); color: #fff; font-size: .85rem;
  font-weight: 700; cursor: pointer; transition: all var(--dur-quick) var(--ease-out);
  box-shadow: 0 4px 20px rgba(139,92,246,.25);
}
.play-btn:hover { transform: scale(1.03); box-shadow: 0 6px 30px rgba(139,92,246,.4); }

.player-wrapper {
  max-width: 1000px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden;
  background: #000; aspect-ratio: 16/9; position: relative;
  box-shadow: 0 16px 60px rgba(0,0,0,.6), 0 0 40px rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.08);
}
.player-container { width: 100%; height: 100%; }
.player-container iframe { width: 100%; height: 100%; border: none; }

.spinner {
  width: 40px; height: 40px;
  border: 2px solid rgba(139,92,246,.15); border-top-color: var(--primary-light);
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Player Chrome */
.player-chrome {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(10,10,30,.9) 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid rgba(139,92,246,.2); border-bottom: none; overflow: hidden;
}
.player-chrome-header {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: linear-gradient(90deg, rgba(139,92,246,.1), rgba(6,182,212,.06));
  border-bottom: 1px solid rgba(139,92,246,.15);
}
.chrome-peacock { width: 24px; height: 24px; border-radius: 50%; }
.chrome-title { color: #fff; font-weight: 700; font-size: .78rem; }
.chrome-quality {
  padding: 2px 6px; background: linear-gradient(135deg, var(--warm-light), var(--warm));
  color: #1a0a2e; font-size: .6rem; font-weight: 800; border-radius: 3px;
}
.chrome-spacer { flex: 1; }
.chrome-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #fff; font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.chrome-btn:hover { background: var(--primary-surface); border-color: var(--border-default); }
.chrome-volume { width: 70px; }

.player-watermark {
  position: absolute; top: 12px; right: 12px;
  width: 60px; height: 75px; object-fit: cover; border-radius: 6px;
  z-index: 5; opacity: .18; pointer-events: none; user-select: none;
  transition: opacity var(--dur-quick);
}
.player-container:hover .player-watermark { opacity: .3; }

.server-list { max-width: 1000px; margin: 12px auto 0; padding: 0 48px; }
.server-label { font-size: .64rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; font-weight: 600; }
.server-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.server-btn {
  padding: 7px 16px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .75rem; font-weight: 500; cursor: pointer;
  transition: all var(--dur-quick) var(--ease-out);
}
.server-btn:hover { border-color: var(--border-default); color: #fff; }
.server-btn.active { background: var(--primary-surface); border-color: var(--primary-light); color: #fff; font-weight: 600; }

/* Player extras */
.player-extras { max-width: 1000px; margin: 20px auto; padding: 0 48px; }
.player-actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.player-rate { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.player-action-label { font-size: .74rem; color: var(--text-muted); margin-right: 4px; }
.rate-btn {
  width: 26px; height: 26px; border-radius: 4px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted); font-size: .62rem; font-weight: 600; cursor: pointer;
}
.rate-btn:hover, .rate-btn.active { background: linear-gradient(135deg, var(--warm-light), var(--warm)); color: #1a0a2e; border-color: var(--warm-light); }
.player-action-btn {
  padding: 6px 12px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .78rem; cursor: pointer;
}

.player-section { margin-top: 28px; max-width: 1000px; padding: 0 48px; }
.player-section-title { font-size: var(--text-base); font-weight: 700; color: #fff; margin-bottom: 14px; }

.cast-grid { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 14px; scrollbar-width: none; }
.cast-grid::-webkit-scrollbar { display: none; }
.cast-card { min-width: 90px; max-width: 90px; text-align: center; flex-shrink: 0; }
.cast-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-subtle); margin-bottom: 6px; }
.cast-card p { font-size: .64rem; color: var(--text-muted); line-height: 1.3; }
.cast-name { color: var(--text-primary); font-weight: 600; font-size: .68rem; }

.similar-row { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 14px; scrollbar-width: none; }
.similar-row .content-card { min-width: 130px; max-width: 130px; }

.comments-section { max-width: 1000px; margin: 28px auto; padding: 0 48px; }
.comments-section h3 { font-size: var(--text-lg); margin-bottom: 14px; color: #fff; }
.comment-form { display: flex; gap: 8px; margin-bottom: 18px; }
.comment-form textarea {
  flex: 1; min-height: 44px; padding: 10px 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); color: #f3f4f6; font-size: .85rem; resize: vertical;
}
.comment-form button {
  padding: 8px 18px; background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
}

.comment-item { display: flex; gap: 10px; padding: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04); border-radius: var(--radius-sm); margin-bottom: 8px; }
.comment-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-surface); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-bright); flex-shrink: 0; font-size: .85rem; }
.comment-body { font-size: .84rem; color: var(--text-secondary); line-height: 1.5; }

.back-btn { background: none; border: none; color: var(--text-muted); padding: 70px 48px 10px; cursor: pointer; font-size: .82rem; transition: color var(--dur-quick); display: inline-block; }
.back-btn:hover { color: var(--primary-bright); }

.continue-bar { margin: 0; padding: 10px 16px; background: rgba(10,10,30,.95); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(12px); }
.continue-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.continue-bar-thumb { width: 48px; height: 72px; border-radius: 6px; background: var(--surface-raised); background-size: cover; background-position: center; flex-shrink: 0; }
.continue-bar-title { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-bar-btn { padding: 8px 16px; background: #fff; color: #000; border: none; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 700; cursor: pointer; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .player-meta, #tv-selector, .server-list { padding-left: 16px; padding-right: 16px; }
  .player-meta h2 { font-size: var(--text-2xl); }
  .player-wrapper { margin: 0; border-radius: 0; }
  #tv-selector .tv-selector-inner { flex-wrap: wrap; gap: 6px; }
  .cast-grid { gap: 8px; }
  .cast-card { width: 70px; }
  .similar-row { gap: 8px; }
}