/* Nukhu TV — Cinematic Design System for Samsung Tizen (Chrome 63) + Android TV */
/* No flex gap (Chrome 84+), no backdrop-filter (Chrome 76+) */
/* All dimensions use rem — JS scales root font-size by viewport width (24px at 1920px) */
/* CSS custom properties supported since Chrome 49 — safe for Chrome 63 */

:root {
  --ds-bg: #020304;
  --ds-panel: rgba(17,23,34,.62);
  --ds-panel-solid: #121823;
  --ds-panel-2: #171f2c;
  --ds-line: rgba(255,255,255,.10);
  --ds-line-strong: rgba(255,255,255,.16);
  --ds-text: #f4f6f8;
  --ds-text-soft: #c8d0db;
  --ds-text-muted: #9eabbc;
  --ds-text-bright: #dce3ec;
  --ds-red: #c0302a;
  --ds-red-bright: #f04b43;
  --ds-gold: #d2b05c;
  --ds-teal: #3b8f97;
  --ds-radius: 0.75rem;       /* 18px at 24px root */
  --ds-radius-lg: 1.167rem;   /* 28px at 24px root */
}

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

html {
  font-size: 24px; /* ROOT — overridden by JS scaling in index.html for non-1920 screens */
}

body {
  height: 100%;
  overflow: hidden;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;   /* 18px */
  -webkit-font-smoothing: antialiased;
}

/* Cinematic radial gradient background on #app */
#app {
  padding-top: 3.333rem;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 560px at 14% 0%, rgba(192,48,42,.15), transparent 56%),
    radial-gradient(980px 520px at 88% 12%, rgba(59,143,151,.10), transparent 58%),
    radial-gradient(840px 460px at 52% 100%, rgba(210,176,92,.08), transparent 62%),
    linear-gradient(180deg, #000 0%, #04070b 40%, #020304 100%);
}

/* Hide all scrollbars — TV app, no mouse scrolling */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ---- Layout ---- */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3.333rem;
  z-index: 1000;
  background: rgba(0,0,0,0.50);
  display: flex;
  align-items: center;
  padding: 0 2.4rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#navbar.nav-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

/* ---- Navbar ---- */
.nav-logo {
  display: flex;
  align-items: center;
  margin-right: 2.0rem;
}

.nav-logo svg {
  width: 4.0rem;
  height: 4.0rem;
}

.nav-items {
  display: flex;
  align-items: center;
}

.nav-item {
  color: var(--ds-text-muted);
  font-size: 1.1rem;
  padding: 0.5rem 1.0rem;
  margin-right: 0.4rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  outline: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}

.nav-item:focus,
.nav-item.focused {
  color: #fff;
  border-bottom-color: var(--ds-red-bright);
}

.nav-item.active {
  color: #fff;
  border-bottom-color: #fff;
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--ds-text-muted);
  font-size: 0.9rem;
}

.nav-right .nav-item {
  font-size: 0.9rem;
}

/* ---- Focus ring (spatial nav) ---- */
.focusable {
  outline: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.focusable:focus,
.focusable.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}

/* ---- Spinner ---- */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 4px solid var(--ds-red-bright);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 3.333rem);
}

.loading-text {
  color: var(--ds-text-muted);
  font-size: 1.1rem;
  margin-top: 1.2rem;
}

/* ---- Stack Rows (Home) ---- */
.stack-row {
  margin-bottom: 1.6rem;
}

.stack-row-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  color: var(--ds-text);
  padding: 0 2.4rem;
}

.stack-row-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.8rem 2.4rem;
}

.stack-row-scroll::-webkit-scrollbar {
  display: none;
}

/* ---- Video Card ---- */
.video-card {
  flex: 0 0 13.75rem;
  width: 13.75rem;
  margin-right: 1.0rem;
  will-change: transform;
  cursor: pointer;
  border-radius: var(--ds-radius);
  overflow: hidden;
  background: var(--ds-panel);
  border: 1px solid var(--ds-line);
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.video-card:focus,
.video-card.focused {
  transform: scale(1.05);
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 14px 32px rgba(0,0,0,.50);
  z-index: 10;
  position: relative;
}

.video-card-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: var(--ds-panel-2);
  overflow: hidden;
}

.video-card-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-thumb .placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: 0.3;
}

.video-card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.video-card-info {
  padding: 0.6rem 0.7rem;
}

.video-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
  color: var(--ds-text);
}

.video-card-meta {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
  display: flex;
  align-items: center;
}

.video-card-meta span {
  margin-right: 0.6rem;
}

.video-card-price {
  color: #22c55e;
  font-weight: 700;
}

.video-card-price.paid {
  color: var(--ds-gold);
}

/* Continue watching progress */
.cw-progress-bg {
  height: 3px;
  background: rgba(255,255,255,.10);
}

.cw-progress-bar {
  height: 100%;
  background: var(--ds-red-bright);
}

/* ---- Video Player ---- */
.player-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 2000;
}

/* Native-mode transparency. When AVPlay / MediaPlayer is driving the
   video the wrapper sets its iframe background to transparent (see
   nukhu_tizen/index.html). We need this whole document to stop painting
   opaque pixels — otherwise the hardware video surface behind the iframe
   never reaches the screen. Specifically:

   - html + body lose their cinematic radial-gradient + dark base
   - #app loses its background (the cinematic gradient lives there too)
   - .player-container drops its black backdrop (otherwise the player
     route itself overpaints the AVPlay surface)
   - All UI chrome inside the player (controls, scrub bar, subtitle
     line, play button) keeps drawing — they're explicit DOM nodes with
     their own backgrounds, NOT inherited from body. Subtitles use
     text-shadow so they're legible over arbitrary video.

   Restored on cleanup() via deactivateNativeMode(). */
body.native-mode,
body.native-mode html,
body.native-mode #app,
.player-container.native-mode {
  background: transparent !important;
}

/* Hide the in-page <video> tag when native owns playback — keeping
   it visible would double-paint a black <video> rectangle on top of
   the native surface. Subtitles + controls stay because they live
   outside the <video> element. */
.player-container.native-mode > video {
  display: none !important;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Buffering spinner — centered over the video. Visibility toggled
   from JS via the .player-spinner-visible modifier (default hidden so
   it doesn't flicker if the video starts playing without ever firing
   `waiting`). pointer-events:none so it never blocks the controls
   overlay or D-pad focus. */
.player-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.player-spinner-visible {
  opacity: 1;
}
.player-spinner-ring {
  width: 4rem;
  height: 4rem;
  border: 0.35rem solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--ds-red-bright);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.player-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.player-controls.hidden {
  opacity: 0;
  pointer-events: none;
}

.player-top {
  background: linear-gradient(to bottom, rgba(2,3,4,0.85), transparent);
  padding: 1.2rem 1.2rem 2.4rem;
}

.player-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ds-text);
}

.player-trailer-badge {
  display: inline-block;
  background: var(--ds-gold);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.4rem;
}

.player-bottom {
  background: linear-gradient(to top, rgba(2,3,4,0.85), transparent);
  padding: 2.4rem 1.2rem 1.2rem;
}

/* Progress bar */
.progress-track {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  margin-bottom: 0.8rem;
  outline: none;
  transition: height 0.15s, margin-bottom 0.15s;
}
.progress-track:focus,
.progress-track.focused {
  height: 10px;
  margin-bottom: calc(0.8rem - 4px);
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 3px;
}

.progress-buffered {
  position: absolute;
  height: 100%;
  background: rgba(255,255,255,.20);
  border-radius: 3px;
}

.progress-played {
  position: absolute;
  height: 100%;
  background: var(--ds-red-bright);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.progress-scrub-range {
  position: absolute;
  height: 100%;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.progress-scrub-dot {
  position: absolute;
  top: 50%;
  width: 0.667rem;
  height: 0.667rem;
  background: #fff;
  border: 2px solid var(--ds-red-bright);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: left 0.075s linear;
}

.player-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player-time {
  font-size: 0.9rem;
  color: var(--ds-text-muted);
}

.player-time.scrubbing {
  color: var(--ds-red-bright);
  font-weight: 700;
}

.player-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-btn {
  color: #fff;
  font-size: 1.1rem;
  padding: 0.5rem 1.0rem;
  border-radius: 0.5rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  outline: none;
  margin: 0 0.2rem;
}

.player-btn:focus,
.player-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}

.player-btn.play-btn {
  font-size: 1.5rem;
  padding: 0.5rem 1.4rem;
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(192,48,42,.30);
}

.player-btn.sub-btn {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.4rem;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 4px;
  letter-spacing: 1px;
}

.player-btn.sub-btn.sub-off {
  opacity: 0.35;
  border-color: rgba(255,255,255,0.2);
}

.player-btn.speed-btn {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.4rem;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 4px;
  min-width: 2.2rem;
  text-align: center;
}

.player-hint {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
}

/* Subtitle language menu */
.subtitle-menu {
  position: absolute;
  bottom: 5rem;
  right: 1rem;
  background: rgba(10, 15, 25, 0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.5rem;
  padding: 0.5rem 0;
  min-width: 10rem;
  z-index: 50;
}

.subtitle-menu-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.3rem 1rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0.2rem;
}

.subtitle-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--ds-text);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.subtitle-menu-item:focus,
.subtitle-menu-item.focused {
  background: rgba(240, 75, 67, 0.25);
  color: #fff;
}

.subtitle-menu-item.active {
  color: var(--ds-red-bright);
  font-weight: 700;
}

.subtitle-menu-item.active::before {
  content: '\2713 ';
}

.scrub-hint {
  text-align: center;
  color: var(--ds-text-soft);
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Subtitles */
.subtitle-overlay {
  position: absolute;
  bottom: 4rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 0.8rem;
  pointer-events: none;
  z-index: 5;
}

.subtitle-text {
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  max-width: 41.667rem;
  text-align: center;
}

/* Scrub thumbnail */
.scrub-thumbnail {
  position: absolute;
  bottom: 5.333rem;
  z-index: 20;
  pointer-events: none;
}

.scrub-thumbnail-inner {
  background: #000;
  border: 2px solid var(--ds-red-bright);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

.scrub-thumbnail canvas {
  display: block;
}

.scrub-thumbnail-time {
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0;
  background: rgba(0,0,0,0.8);
}

/* Resume prompt */
.resume-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.resume-prompt-box {
  background: var(--ds-panel-solid);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 1.6rem 2.4rem;
  text-align: center;
  max-width: 20.833rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.resume-prompt-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ds-text);
}

.resume-prompt-time {
  font-size: 1.0rem;
  color: var(--ds-text-muted);
  margin-bottom: 1.2rem;
}

.resume-btn {
  display: inline-block;
  padding: 0.7rem 1.8rem;
  border-radius: 0.583rem;
  font-size: 1.0rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  margin: 0 0.4rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.resume-btn:focus,
.resume-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}

.resume-btn.primary {
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  color: #fff;
  border-color: rgba(240,75,67,.22);
  box-shadow: 0 8px 24px rgba(192,48,42,.28);
}

.resume-btn.secondary {
  background: rgba(21,29,41,.55);
  color: var(--ds-text);
}

/* ---- Endcard Overlay ---- */
.endcard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.endcard-box {
  background: var(--ds-panel-solid);
  border: 2px solid var(--ds-red);
  border-radius: var(--ds-radius-lg);
  padding: 1.8rem 2.4rem;
  text-align: center;
  max-width: 28rem;
  width: 90%;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.endcard-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ds-text);
  margin-bottom: 1.2rem;
}

.endcard-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1.5rem;
  border-radius: 0.583rem;
  font-size: 1.0rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  margin-bottom: 0.5rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
  color: #fff;
}

.endcard-btn:focus,
.endcard-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.02);
}

.endcard-btn-next {
  background: #c30813;
}

.endcard-btn-next:focus,
.endcard-btn-next.focused {
  background: #a00610;
}

.endcard-btn-secondary {
  background: rgba(21,29,41,.55);
}

.endcard-btn-cancel {
  display: block;
  width: 100%;
  padding: 0.4rem;
  background: transparent;
  border: none;
  color: var(--ds-text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  margin-bottom: 0.5rem;
}

.endcard-btn-cancel:focus,
.endcard-btn-cancel.focused {
  color: var(--ds-text);
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  border-radius: 0.3rem;
}

.endcard-countdown {
  font-weight: 400;
  opacity: 0.8;
}

/* ---- Nuvee Details ---- */
.nuvee-wrapper {
  overflow-y: auto;
  max-height: calc(100vh - 4rem);
}

.nuvee-wrapper .stack-row {
  margin-top: 0.8rem;
}

/* Hero banner */
.nuvee-hero {
  position: relative;
  width: 100%;
  min-height: 56vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  /* Clip the absolutely-positioned hero background <video> to the hero
     bounds. Without this the auto-playing trailer clip spilled below the
     hero into the content area (it fills height:100% of a min-height flex
     box, which can exceed the laid-out hero height). */
  overflow: hidden;
}

.nuvee-hero-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(to right, rgba(2,3,4,.95) 0%, rgba(2,3,4,.8) 40%, rgba(2,3,4,.4) 70%, rgba(2,3,4,.25) 100%),
    linear-gradient(to top, rgba(2,3,4,1) 0%, rgba(2,3,4,.5) 40%, rgba(2,3,4,.2) 100%);
  pointer-events: none;
}

.nuvee-hero-content {
  position: relative;
  z-index: 1;
  padding: 2rem 2.4rem;
  max-width: 55%;
}

.nuvee-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--ds-text);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.nuvee-studio {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;          /* room between studio name and Follow button */
}
.nuvee-studio-link {
  color: var(--ds-text-bright);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.nuvee-studio-link:focus,
.nuvee-studio-link.focused {
  color: var(--ds-red-bright);
  text-decoration: underline;
}

.nuvee-meta {
  display: flex;
  align-items: center;
  color: var(--ds-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.nuvee-meta span {
  margin-right: 1.0rem;
}

.nuvee-mature {
  color: #ef4444;
  font-weight: 700;
}

.nuvee-desc {
  color: var(--ds-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  /* No CSS clamp: attachShowMore() in nuvee.js truncates the text node
     itself, so toggling expanded ↔ collapsed actually changes the
     rendered text. The old `max-height: 4.5rem; overflow: hidden` clipped
     the expanded text and made the Show More button look broken. */
}

/* "Back to top" sentinel — always the last child of .nuvee-wrapper so
   it acts as the terminal D-pad target. Centered horizontally with
   margin auto on a block element. Pressing Enter scrolls the wrapper
   back to scrollTop=0 and refocuses the primary action. */
.nuvee-back-to-top {
  display: block;
  margin: 2.4rem auto 1.6rem;
  padding: 0.7rem 1.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ds-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  outline: none;
}
.nuvee-back-to-top:focus,
.nuvee-back-to-top.focused {
  background: var(--ds-red);
  border-color: var(--ds-red-bright);
  color: #fff;
}

.nuvee-director {
  font-style: italic;
  color: var(--ds-text-muted);
}
.nuvee-tagline {
  font-style: italic;
  color: rgba(255,255,255,.85);
  font-size: 16px;
  margin-bottom: 6px;
}
.nuvee-full-synopsis {
  color: var(--ds-text-muted);
  font-size: 14px;
}
.nuvee-credits {
  padding: 16px 48px;
}
.credits-heading {
  color: rgba(255,255,255,.4);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 10px;
}
.credits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.credit-item {
  font-size: 14px;
}
.credit-role {
  color: rgba(255,255,255,.4);
}
.credit-name {
  color: #fff;
}

.nuvee-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.nuvee-tag {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ds-text-bright);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: inherit;
  line-height: normal;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: transform .1s ease, border-color .1s ease, background .1s ease;
}

.nuvee-tag:focus,
.nuvee-tag.focused {
  outline: none;
  border-color: var(--ds-red-bright);
  background: rgba(195, 8, 19, 0.2);
  color: var(--ds-red-bright);
  transform: scale(1.08);
}

.nuvee-price {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.nuvee-price.free {
  color: #22c55e;
}

.nuvee-price.paid {
  color: var(--ds-gold);
}

.nuvee-buttons {
  display: flex;
}

.nuvee-btn {
  padding: 0.7rem 1.8rem;
  border-radius: 0.583rem;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  margin-right: 0.6rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.nuvee-btn:focus,
.nuvee-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}

.nuvee-btn.primary {
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  color: #fff;
  border-color: rgba(240,75,67,.22);
  box-shadow: 0 8px 24px rgba(192,48,42,.28);
}

.nuvee-btn.secondary {
  background: rgba(21,29,41,.55);
  color: var(--ds-text);
}

/* ---- Login ---- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 3.333rem);
}

.login-box {
  background: var(--ds-panel-solid);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 2.2rem 2.6rem;
  width: 24rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.4rem;
  text-align: center;
  color: var(--ds-text);
}

/* Device Code Login */
.device-code-box {
  width: auto;
  min-width: 24rem;
  text-align: center;
}
.device-code-instruction {
  font-size: 0.85rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.4rem;
}
.device-code-url {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.device-code-value {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 0.6rem 1.2rem;
  margin-bottom: 1rem;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}
.device-code-or {
  margin-top: 0.6rem;
}
.device-code-qr {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0 0.8rem;
}
.device-code-qr canvas {
  border-radius: 4px;
}
.device-code-timer {
  font-size: 0.8rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.4rem;
}
.device-code-status {
  font-size: 0.85rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.6rem;
}
.device-code-expired {
  color: #ef4444;
}
.device-code-success {
  color: #22c55e;
}
.device-code-refresh {
  margin-top: 0.4rem;
}
.form-btn.login-switch-btn {
  margin-top: 0.7rem;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ds-text-muted);
}
.form-btn.login-switch-btn:focus,
.form-btn.login-switch-btn.focused {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(255,255,255,.08);
  color: var(--ds-text-muted);
}

.form-group {
  margin-bottom: 0.8rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.4rem;
}

.form-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  color: var(--ds-text);
  font-size: 1.0rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease;
}

.form-input:focus,
.form-input.focused {
  border-color: rgba(240,75,67,.40);
}

.form-checkbox {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--ds-text-muted);
  cursor: pointer;
}

.form-checkbox input {
  margin-right: 0.5rem;
  width: 0.917rem;
  height: 0.917rem;
}

.form-error {
  color: #ef4444;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.form-btn {
  width: 100%;
  padding: 0.8rem;
  border-radius: 0.583rem;
  font-size: 1.0rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(240,75,67,.22);
  outline: none;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  color: #fff;
  margin-top: 0.4rem;
  box-shadow: 0 8px 24px rgba(192,48,42,.28);
  transition: transform 0.12s ease;
}

.form-btn:focus,
.form-btn.focused {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Account ---- */
.account-page {
  padding: 1.2rem 2.4rem;
}

.account-card {
  background: var(--ds-panel);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 1.2rem 1.6rem;
  margin-bottom: 1.0rem;
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
}

.account-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  color: var(--ds-red-bright);
}

.account-row {
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.account-label {
  color: var(--ds-text-muted);
  width: 6.667rem;
  flex-shrink: 0;
}

.account-value {
  color: var(--ds-text);
}

.balance-grid {
  display: flex;
}

.balance-item {
  flex: 1;
  text-align: center;
  padding: 0.8rem;
}

.balance-amount {
  font-size: 1.7rem;
  font-weight: 800;
  color: #22c55e;
}

.balance-label {
  font-size: 0.85rem;
  color: var(--ds-text-muted);
  margin-top: 0.2rem;
}

.purchase-table {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: separate;
  border-spacing: 0;
}

.purchase-table th {
  text-align: left;
  color: var(--ds-text-muted);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--ds-line);
}

.purchase-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--ds-text-soft);
}

/* ---- Search ---- */
.search-page {
  display: flex;
  height: calc(100vh - 3.333rem);
  padding: 1.2rem 2.4rem;
}

.search-left {
  flex: 0 0 16.667rem;
  margin-right: 1.6rem;
  flex-shrink: 0;
}

.search-input-display {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 0.7rem 0.9rem;
  font-size: 1.1rem;
  min-height: 2.8rem;
  margin-bottom: 0.8rem;
  color: var(--ds-text);
}

.search-input-display .cursor {
  display: inline-block;
  width: 2px;
  height: 1.0rem;
  background: var(--ds-red-bright);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

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

.keyboard-grid {
  display: flex;
  flex-wrap: wrap;
}

.keyboard-key {
  width: 2.667rem;
  height: 2.333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-panel);
  border: 1px solid var(--ds-line);
  border-radius: 0.5rem;
  color: var(--ds-text);
  font-size: 1.1rem;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  margin: 0 0.25rem 0.25rem 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.keyboard-key:focus,
.keyboard-key.focused {
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  border-color: rgba(240,75,67,.30);
  color: #fff;
}

.keyboard-key.wide {
  width: 5.75rem;
}

.keyboard-key.action {
  background: rgba(21,29,41,.55);
}

.search-right {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 1.2rem;
}

.search-results-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 0.8rem;
}

.search-results-grid .video-card {
  margin-bottom: 0.8rem;
}

.search-empty {
  color: var(--ds-text-muted);
  font-size: 1.1rem;
  text-align: center;
  margin-top: 4.0rem;
}

.search-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 0.6rem;
  margin-top: 0.4rem;
}

/* ── Search: Studio Cards ── */
.search-studios-scroll {
  display: flex;
  overflow-x: auto;
  padding: 0.5rem 0.8rem 0.6rem;
  margin-bottom: 0.8rem;
  -webkit-overflow-scrolling: touch;
}

.search-studio-card {
  flex: 0 0 7rem;
  width: 7rem;
  text-align: center;
  padding: 0.6rem 0.4rem;
  margin-right: 0.6rem;
  border-radius: var(--ds-radius);
  border: 2px solid transparent;
  background: var(--ds-panel);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  outline: none;
}

.search-studio-card:focus,
.search-studio-card.focused {
  border-color: var(--ds-red-bright);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 10;
  position: relative;
}

.search-studio-pic {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.4rem;
  background: rgba(255,255,255,.06);
}

.search-studio-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-studio-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Search: Tag Pills ── */
.search-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0.3rem 0.3rem 0.6rem;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  margin: 0 0.4rem 0.4rem 0;
  border-radius: 1.2rem;
  background: var(--ds-panel);
  border: 2px solid var(--ds-line);
  color: var(--ds-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  font-family: inherit;
}

.tag-pill:focus,
.tag-pill.focused {
  border-color: var(--ds-red-bright);
  background: rgba(195, 8, 19, 0.2);
  transform: scale(1.08);
}

.tag-count {
  font-size: 0.6rem;
  color: var(--ds-text-muted);
  margin-left: 0.35rem;
  font-weight: 400;
}

/* ---- NuSpots ---- */
.nuspots-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 3.333rem);
  padding: 1.2rem 2.4rem;
}

.nuspot-video-wrap {
  width: 33.333rem;
  max-width: 100%;
  border-radius: var(--ds-radius);
  overflow: hidden;
  background: var(--ds-panel-solid);
  border: 1px solid var(--ds-line);
  margin-bottom: 1.2rem;
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
}

.nuspot-video {
  width: 100%;
  aspect-ratio: 16/9;
}

/* Dark cover + spinner shown over the <video> until the first frame plays —
   hides the WebView's default play-button placeholder while buffering. */
.nuspot-video-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-panel-solid);
  z-index: 2;
}

.nuspot-timer {
  font-size: 1.3rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.8rem;
}

.nuspot-timer .time {
  color: #22c55e;
  font-weight: 700;
}

.quiz-container {
  text-align: center;
}

.quiz-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--ds-text);
}

.quiz-images {
  display: flex;
  justify-content: center;
}

.quiz-image {
  width: 10rem;
  height: 6rem;
  border-radius: var(--ds-radius);
  overflow: hidden;
  cursor: pointer;
  margin: 0 0.4rem;
  border: 3px solid transparent;
  outline: none;
  transition: border-color 0.2s, transform 0.2s;
}

.quiz-image:focus,
.quiz-image.focused {
  border-color: var(--ds-red-bright);
  transform: scale(1.05);
}

.quiz-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nuspot-result {
  text-align: center;
  font-size: 1.4rem;
  padding: 1.2rem;
}

.nuspot-result.correct {
  color: #22c55e;
}

.nuspot-result.incorrect {
  color: #ef4444;
}

.nuspot-reward {
  color: var(--ds-gold);
  font-size: 1.1rem;
  margin-top: 0.4rem;
}

.nuspot-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.8rem;
}

.nuspot-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 0.583rem;
  font-size: 1.0rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  margin: 0 0.4rem;
  background: rgba(21,29,41,.55);
  color: var(--ds-text);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.nuspot-btn:focus,
.nuspot-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}

.nuspot-btn.primary {
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  color: #fff;
  border-color: rgba(240,75,67,.22);
}

/* ---- Static Pages ---- */
.static-page {
  padding: 2.0rem 2.4rem;
  max-width: 33.333rem;
}

.static-page h1 {
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: var(--ds-red-bright);
}

.static-page h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  color: var(--ds-text);
}

.static-page p {
  color: var(--ds-text-soft);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

/* ---- Multi-Perspective Thumbnails ---- */
.perspective-thumbs {
  position: absolute;
  right: 0.833rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 15;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.perspective-thumbs > .perspective-thumb + .perspective-thumb {
  margin-top: 0.6rem;
}

.perspective-thumbs.thumbs-hidden {
  opacity: 0;
  pointer-events: none;
}

.perspective-thumb {
  width: 6.25rem;
  height: 3.75rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(255,255,255,0.06);
  -webkit-transition: border-color 0.2s, background 0.2s;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.perspective-thumb.active {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.perspective-thumb:focus,
.perspective-thumb.focused {
  border-color: #fff;
  box-shadow: 0 0 0 3px #fff;
}

.perspective-thumb-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -60%);
  transform: translate(-50%, -60%);
  color: rgba(255,255,255,0.5);
}

.perspective-thumb-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.perspective-thumb.active .perspective-thumb-icon {
  color: rgba(255,255,255,0.9);
}

.perspective-thumb-label {
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ---- Utility ---- */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-red { color: var(--ds-red-bright); }
.text-green { color: #22c55e; }
.text-yellow { color: var(--ds-gold); }
.text-gray { color: var(--ds-text-muted); }
.text-sm { font-size: 0.9rem; }
.text-xs { font-size: 0.75rem; }
.mt-4 { margin-top: 0.8rem; }
.mb-4 { margin-bottom: 0.8rem; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 3.333rem);
  color: var(--ds-text);
  font-size: 1.3rem;
}

/* ── Show More Card ── */
.show-more-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  min-width: 8.333rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.show-more-card.focused,
.show-more-card:focus {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,.30);
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.show-more-icon { font-size: 2.0rem; margin-bottom: 0.4rem; color: rgba(255,255,255,0.6); }
.show-more-text { font-size: 1.0rem; font-weight: 700; color: var(--ds-text); }
.show-more-count { font-size: 0.8rem; color: var(--ds-text-muted); margin-top: 0.2rem; }

/* ── Stack Viewer Page ── */
.stack-viewer { padding: 1.2rem 2.4rem; }
.stack-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.stack-viewer-title { font-size: 1.7rem; font-weight: 700; color: var(--ds-text); }
.stack-viewer-count { font-size: 0.9rem; color: var(--ds-text-muted); margin-top: 0.2rem; }
.stack-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
}
.stack-grid .video-card {
  width: auto;
  min-width: 0;
  flex: none;
}
.stack-nav {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.stack-nav-label {
  font-size: 0.9rem;
  color: var(--ds-text-muted);
  min-width: 2.5rem;
  text-align: center;
}
.stack-nav-btn {
  background: rgba(21,29,41,.55);
  border: 1px solid var(--ds-line-strong);
  color: var(--ds-text);
  padding: 0.5rem 1.0rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.stack-nav-btn.focused,
.stack-nav-btn:focus {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,.30);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ── Studio Page ── */
.studio-page { padding: 1.2rem 0; }
.studio-header { padding: 0 2.4rem; margin-bottom: 1.2rem; display: flex; align-items: center; }
.studio-header > div:first-child { flex: 1; }
.studio-name { font-size: 1.9rem; font-weight: 800; color: var(--ds-text); }
.studio-stack-count { font-size: 0.9rem; color: var(--ds-text-muted); margin-top: 0.2rem; }

/* ── Series ── */
.series-page { padding: 1.2rem 0; }
.series-header { padding: 0 2.4rem; margin-bottom: 1.2rem; }
.series-title { font-size: 1.9rem; font-weight: 800; color: var(--ds-text); }
.series-synopsis { font-size: 0.85rem; color: var(--ds-text-muted); margin-top: 0.3rem; max-width: 40rem; }
.series-studio { font-size: 0.9rem; color: var(--ds-text-muted); margin-top: 0.15rem; }
.series-studio-link { color: #c30813; cursor: pointer; }
.series-studio-link.focused { text-decoration: underline; outline: 2px solid #c30813; outline-offset: 2px; border-radius: 2px; }

.series-more-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ds-red-bright);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--ds-radius);
  padding: 0.15rem 0.5rem;
  transition: background 0.2s, border-color 0.2s;
}
.series-more-link:focus,
.series-more-link.focused {
  border-color: var(--ds-red-bright);
  background: rgba(195, 8, 19, 0.15);
  outline: none;
}

.ep-badge {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  border-radius: 0.15rem;
  pointer-events: none;
}
.series-badge {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  background: #c30813;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 0.15rem;
  pointer-events: none;
  z-index: 2;
}

/* Unlisted badge — only shown to studio owners / members on their own
   /studio page; mirrors the amber "Unlisted" pill on web. */
.unlisted-badge {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  background: rgba(245, 158, 11, 0.92);
  color: #000;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 0.15rem;
  pointer-events: none;
  z-index: 2;
}

/* ── Series Action Buttons ── */
.series-action-buttons {
  display: flex;
  margin-top: 0.6rem;
}

.series-btn {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 0.583rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  margin-right: 0.6rem;
  color: #fff;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.series-btn:focus,
.series-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.04);
}

.series-btn-primary {
  background: #c30813;
}

.series-btn-primary:focus,
.series-btn-primary.focused {
  background: #a00610;
}

.series-btn-buy {
  background: rgba(21,29,41,.55);
}

.season-action-buttons {
  display: inline-flex;
  margin-left: 0.8rem;
  vertical-align: middle;
}

.season-btn {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--ds-line);
  outline: none;
  font-family: inherit;
  margin-right: 0.4rem;
  color: var(--ds-text);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.season-btn:focus,
.season-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.04);
}

.season-btn-play {
  background: #c30813;
  color: #fff;
  border-color: rgba(195,8,19,.3);
}

.season-btn-buy {
  background: rgba(21,29,41,.55);
}

/* ── Follow Button ── */
.follow-btn {
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ds-text);
  background: var(--ds-red);
  border: 2px solid var(--ds-red);
  border-radius: 2rem;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.follow-btn:focus,
.follow-btn.focused {
  background: var(--ds-red-bright);
  border-color: var(--ds-red-bright);
  box-shadow: 0 0 0 3px rgba(240,75,67,.45);
}
.follow-btn.following {
  background: transparent;
  border-color: var(--ds-line-strong);
  color: var(--ds-text-soft);
}
.follow-btn.following:focus,
.follow-btn.following.focused {
  border-color: var(--ds-red-bright);
  color: var(--ds-red-bright);
  background: rgba(192,48,42,.15);
}
.follow-btn-sm {
  font-size: 0.75rem;
  padding: 0.2rem 0.7rem;
  margin-left: 1rem;
}

/* ── Parental PIN Overlay ── */
.parental-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.pin-box {
  background: var(--ds-panel-solid);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 2.0rem 2.4rem;
  text-align: center;
  max-width: 22rem;
  width: 22rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60);
}

.pin-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ds-red-bright);
  margin-bottom: 0.5rem;
}

.pin-subtitle {
  font-size: 0.95rem;
  color: var(--ds-text-muted);
  margin-bottom: 1.4rem;
  line-height: 1.5;
}

.pin-hint {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
  margin-top: 1.0rem;
  opacity: 0.7;
}

/* PIN dots */
.pin-dots {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.pin-dot {
  width: 1.0rem;
  height: 1.0rem;
  border-radius: 50%;
  border: 2px solid var(--ds-line-strong);
  background: transparent;
  margin: 0 0.5rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pin-dot-filled {
  background: var(--ds-red-bright);
  border-color: var(--ds-red-bright);
}

/* PIN error message */
.pin-error {
  color: #ef4444;
  font-size: 0.85rem;
  min-height: 1.2rem;
  margin-bottom: 0.6rem;
}

/* Numpad */
.pin-numpad {
  margin-bottom: 1.0rem;
}

.pin-numpad-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.pin-key {
  width: 4.0rem;
  height: 3.0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-panel);
  border: 1px solid var(--ds-line);
  border-radius: 0.5rem;
  color: var(--ds-text);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  margin: 0 0.3rem;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.pin-key:focus,
.pin-key.focused {
  background: linear-gradient(180deg, rgba(240, 75, 67, .98), rgba(192, 48, 42, .98));
  border-color: rgba(240, 75, 67, .30);
  color: #fff;
  transform: scale(1.08);
}

.pin-key-action {
  background: rgba(21, 29, 41, .55);
  font-size: 1.5rem;
}

.pin-key-submit {
  background: rgba(21, 29, 41, .55);
  font-size: 1.5rem;
  color: #22c55e;
}

.pin-key-submit:focus,
.pin-key-submit.focused {
  background: linear-gradient(180deg, rgba(34, 197, 94, .90), rgba(22, 163, 74, .90));
  border-color: rgba(34, 197, 94, .30);
  color: #fff;
}

/* Action buttons (Set PIN / No thanks / Cancel) */
.pin-btn-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.pin-action-btn {
  padding: 0.8rem 1.8rem;
  border-radius: 0.583rem;
  font-size: 1.0rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  margin: 0 0.4rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.pin-action-btn:focus,
.pin-action-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}

.pin-action-primary {
  background: linear-gradient(180deg, rgba(240, 75, 67, .98), rgba(192, 48, 42, .98));
  color: #fff;
  border-color: rgba(240, 75, 67, .22);
  box-shadow: 0 8px 24px rgba(192, 48, 42, .28);
}

.pin-action-secondary {
  background: rgba(21, 29, 41, .55);
  color: var(--ds-text);
}

.pin-cancel-btn {
  margin-top: 0.8rem;
  width: 100%;
  padding: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Shake animation for wrong PIN */
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-0.4rem); }
  20%, 40%, 60%, 80% { transform: translateX(0.4rem); }
}

.pin-shake {
  animation: pin-shake 0.5s ease-in-out;
}

.pin-account-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

/* Language pills — 10 locales don't fit one row on TV; wrap to multiple
   lines so the last ones (Українська, Српски) stay on screen. SpatialNav
   is geometric, so D-pad up/down moves between wrapped rows naturally. */
.lang-row {
  flex-wrap: wrap;
}

/* Shown when the User.Language PUT fails or times out — server-first flow:
   nothing changes, the failure is stated plainly. */
.lang-error {
  margin-top: 0.6rem;
  color: #f04b43;
  font-size: 0.75rem;
}

/* ── Top-Up Overlay ── */
.topup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.topup-box {
  background: var(--ds-panel-solid);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 2.0rem 2.4rem;
  text-align: center;
  max-width: 28rem;
  width: 28rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60);
}

.topup-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ds-red-bright);
  margin-bottom: 0.5rem;
}

.topup-subtitle {
  font-size: 1.0rem;
  color: var(--ds-text-soft);
  margin-bottom: 0.8rem;
}

.topup-price-info {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
  margin-bottom: 1.2rem;
}

.topup-instruction {
  font-size: 0.85rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.3rem;
}

.topup-url {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 0.8rem;
}

.topup-qr {
  margin: 0 auto 0.8rem;
}

.topup-qr canvas {
  border-radius: 0.5rem;
}

.topup-status {
  font-size: 0.85rem;
  color: var(--ds-teal);
  margin-bottom: 0.3rem;
}

.topup-status-error {
  color: #ef4444;
}

.topup-status-success {
  color: #22c55e;
}

.topup-timer {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
  margin-bottom: 0.8rem;
}

.topup-cancel-btn {
  display: inline-block;
  padding: 0.7rem 2.0rem;
  border-radius: 0.583rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ds-line-strong);
  outline: none;
  font-family: inherit;
  background: rgba(21, 29, 41, .55);
  color: var(--ds-text);
  transition: transform 0.12s ease, border-color 0.12s ease;
  margin: 0 0.3rem;
}

.topup-cancel-btn:focus,
.topup-cancel-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.04);
}

.topup-retry-btn {
  display: inline-block;
  padding: 0.7rem 2.0rem;
  border-radius: 0.583rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(240, 75, 67, .22);
  outline: none;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(240, 75, 67, .98), rgba(192, 48, 42, .98));
  color: #fff;
  box-shadow: 0 8px 24px rgba(192, 48, 42, .28);
  transition: transform 0.12s ease, border-color 0.12s ease;
  margin: 0 0.3rem;
}

.topup-retry-btn:focus,
.topup-retry-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.04);
}

.topup-btn-row {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}

/* ── Campaigns list page ── */
.campaigns-page {
  padding: 2rem 3rem;
}
.campaigns-heading {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.campaigns-subtitle {
  color: var(--ds-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.6rem;
}

/* Tab strip — Live / Upcoming / Ended / My Backed. Each tab is a
   D-pad target; the active tab gets a red underline. Counts in
   parentheses come from the tab label string built in renderTabs(). */
.campaigns-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.campaigns-tab {
  background: transparent;
  border: none;
  color: var(--ds-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  outline: none;
  margin-bottom: -1px; /* overlap the strip's bottom border */
}
.campaigns-tab-active {
  color: #fff;
  border-bottom-color: var(--ds-red);
}
.campaigns-tab:focus,
.campaigns-tab.focused {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.campaigns-grid-wrap {
  min-height: 200px;
}

.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Chrome 63 (Tizen 5.0) only added the `gap` shorthand for grid in
     Chrome 66 — it silently no-ops here, which is why the cards render
     edge-to-edge. `grid-gap` works in 63. Both kept so newer browsers
     pick up the shorthand without warning. */
  grid-gap: 1.6rem;
  gap: 1.6rem;
}
.campaign-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.6rem;
  overflow: hidden;
  transition: transform 0.15s ease, outline-color 0.15s ease;
  cursor: pointer;
}
.campaign-card:focus {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.03);
}
.campaign-poster {
  position: relative;
  width: 100%;
  height: 8.5rem;
  background-color: rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center;
}
.campaign-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.7);
}
.campaign-badge-live { color: #93c5fd; background: rgba(59, 130, 246, 0.85); color: #fff; }
.campaign-badge-funded { color: #86efac; background: rgba(34, 197, 94, 0.85); color: #fff; }
.campaign-badge-failed { color: #fca5a5; background: rgba(195, 8, 19, 0.85); color: #fff; }
.campaign-card-body { padding: 0.6rem 0.7rem 0.8rem; }
.campaign-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campaign-card-meta {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
}

/* ── Campaign detail page ── */
.campaign-detail-page {
  padding: 1.6rem 3rem 4rem;
}
.campaign-status-banner {
  padding: 0.8rem 1.2rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.campaign-status-banner-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.campaign-status-banner-body {
  font-size: 0.8rem;
  color: var(--ds-text-soft);
  line-height: 1.5;
}
.campaign-banner-live { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.25); }
.campaign-banner-live .campaign-status-banner-title { color: #93c5fd; }
.campaign-banner-funded { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); }
.campaign-banner-funded .campaign-status-banner-title { color: #86efac; }
.campaign-banner-failed { background: rgba(195, 8, 19, 0.08); border-color: rgba(195, 8, 19, 0.25); }
.campaign-banner-failed .campaign-status-banner-title { color: #fca5a5; }
.campaign-banner-delivering { background: rgba(168, 85, 247, 0.08); border-color: rgba(168, 85, 247, 0.25); }
.campaign-banner-delivering .campaign-status-banner-title { color: #d8b4fe; }

.campaign-hero {
  position: relative;
  width: 100%;
  height: 16rem;
  border-radius: 0.6rem;
  background-color: rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.campaign-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.15) 100%);
}
.campaign-hero-content {
  position: absolute;
  bottom: 1rem;
  left: 1.4rem;
  right: 1.4rem;
}
.campaign-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.campaign-hero-tagline {
  font-size: 0.95rem;
  color: var(--ds-text-soft);
}
.campaign-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Chrome 63 grid only honours grid-gap (gap shorthand landed in 66) */
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.campaign-stat-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
}
.campaign-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}
.campaign-stat-label {
  font-size: 0.7rem;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.campaign-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.6rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.campaign-summary h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.campaign-summary p {
  color: var(--ds-text-soft);
  line-height: 1.6;
  font-size: 0.85rem;
  margin: 0;
  white-space: pre-wrap;
}
.campaign-backed-box {
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.campaign-backed-box.refunded {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.campaign-backed-label {
  font-size: 0.65rem;
  color: #86efac;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.campaign-backed-box.refunded .campaign-backed-label { color: #fca5a5; }
.campaign-backed-tier {
  font-size: 0.95rem;
  font-weight: 700;
}
.campaign-tiers h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
}
.campaign-tier-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: outline-color 0.15s ease, transform 0.15s ease;
}
.campaign-tier-card:focus {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.01);
}
.campaign-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.campaign-tier-name { font-size: 1rem; font-weight: 700; }
.campaign-tier-price { font-size: 0.85rem; color: var(--ds-text-muted); }
.campaign-tier-btn {
  background: var(--ds-red);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.campaign-tier-btn.disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ds-text-muted);
  cursor: not-allowed;
}

.campaign-released {
  margin-top: 1.4rem;
}
.campaign-released h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
}
.campaign-released-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Chrome 63 needs grid-gap; gap shorthand for grid is Chrome 66+ */
  grid-gap: 1rem;
  gap: 1rem;
}
.released-nuvee-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: outline-color 0.15s ease, transform 0.15s ease;
}
.released-nuvee-card:focus {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.03);
}
.released-nuvee-poster {
  width: 100%;
  height: 6rem;
  background-color: rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center;
}
.released-nuvee-title {
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Fingerprint vote button (nuvee detail) ---- */
.nuvee-vote-btn {
  /* Inherits .nuvee-btn.secondary base; just adjusts visual state when voted */
  letter-spacing: 0.02em;
}
.nuvee-vote-btn.voted {
  background: linear-gradient(180deg, rgba(240,75,67,.18), rgba(192,48,42,.12));
  color: var(--ds-red-bright);
  border-color: rgba(240,75,67,.42);
}

/* ---- Stills gallery (nuvee detail) ---- */
.nuvee-stills {
  margin: 1.5rem 0 1rem;
  padding: 0 1.5rem;
}
.nuvee-stills-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  margin-bottom: 0.7rem;
}
.nuvee-stills-scroll {
  display: flex;
  /* Flex `gap` only works in Chrome 84+; Tizen 5.0 ships Chrome 63. Use
     margin-right on tiles instead so spacing actually renders.
     Horizontal padding gives focused tiles room for their outline+offset
     halo (5px total) — without it the leftmost tile's left highlight
     gets clipped against the container edge. */
  overflow-x: auto;
  padding: 0.5rem 0.4rem 0.6rem;
}
.nuvee-stills-scroll::-webkit-scrollbar { display: none; }
.nuvee-stills-tile {
  flex: 0 0 auto;
  width: 16rem;            /* landscape stills (~16:9) */
  height: 9rem;
  margin-right: 0.8rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(17,23,34,.62) center / cover no-repeat;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.nuvee-stills-tile:last-child { margin-right: 0; }
.nuvee-stills-tile.is-poster {
  width: 6.5rem;            /* portrait poster (2:3) */
  height: 9.75rem;
}
.nuvee-stills-tile:focus,
.nuvee-stills-tile.focused {
  outline: 3px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.03);
  border-color: rgba(240,75,67,.65);
}

/* Lightbox overlay shown when a still is opened.
   `inset` shorthand landed in Chrome 87; Tizen 5.0 (Chrome 63) needs the
   four-property longhand instead. */
.nuvee-lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.nuvee-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

/* ---- NuSpot like / dislike row ---- */
.nuspot-like-row {
  display: flex;
  /* Chrome 63 has no flex gap. The .nuspot-like-btn rule below adds
     margin-right; the dislike button is last so doesn't need spacing. */
  margin: 0 0 0.8rem;
}
.nuspot-like-btn { margin-right: 0.6rem; }

/* ---- Lightbox caption (shared by nuvee + campaign stills) ---- */
.nuvee-lightbox-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.4rem;
  text-align: center;
  white-space: pre-wrap;
}

/* ---- NuVee comments (read-only on TV) ---- */
.nuvee-comments {
  margin: 1.5rem 0 1rem;
  padding: 0 1.5rem;
}
.nuvee-comments-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  margin-bottom: 0.7rem;
}
.nuvee-comment-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
}
.nuvee-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.nuvee-comment-name { font-weight: 700; font-size: 0.9rem; }
.nuvee-comment-date { font-size: 0.78rem; color: var(--ds-text-muted); }
.nuvee-comment-text { font-size: 0.9rem; line-height: 1.45; color: var(--ds-text); }

/* ---- Campaign detail extras (pitch video, sections, credits, updates, comments, stills) ---- */
.campaign-pitch-btn {
  display: block;
  width: 100%;
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(240,75,67,.42);
  background: linear-gradient(180deg, rgba(240,75,67,.18), rgba(192,48,42,.12));
  color: var(--ds-red-bright);
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.campaign-pitch-btn:focus,
.campaign-pitch-btn.focused {
  outline: 3px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.01);
}

/* Generic section wrapper used by stills/credits/updates/comments. The
   margin-top creates breathing room between async-loaded sections so the
   page doesn't feel cramped. */
.campaign-section {
  margin: 1.6rem 0 0;
  padding: 0;
}
.campaign-section h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  margin: 0 0 0.7rem;
}

/* Campaign stills (uses MediaKey, not PosterKey, so we keep classes
   distinct from .nuvee-stills-* to avoid coupling) */
.campaign-stills-scroll {
  display: flex;
  overflow-x: auto;
  /* Same reason as .nuvee-stills-scroll — horizontal padding so the focus
     outline on the leftmost tile isn't clipped by the container edge. */
  padding: 0.5rem 0.4rem 0.6rem;
}
.campaign-stills-scroll::-webkit-scrollbar { display: none; }
.campaign-stills-tile {
  flex: 0 0 auto;
  width: 16rem;
  height: 9rem;
  margin-right: 0.8rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(17,23,34,.62) center / cover no-repeat;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.campaign-stills-tile:last-child { margin-right: 0; }
.campaign-stills-tile:focus,
.campaign-stills-tile.focused {
  outline: 3px solid var(--ds-red-bright);
  outline-offset: 2px;
  transform: scale(1.03);
  border-color: rgba(240,75,67,.65);
}

/* Crew & Cast — single combined section, role label + names per line */
.campaign-credits .credits-line {
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0.25rem;
}
.campaign-credits .credits-role {
  font-weight: 800;
  color: var(--ds-text-soft);
  margin-right: 0.3rem;
}
.campaign-credits .credits-name {
  color: var(--ds-text);
}

/* Campaign updates — vertical stack of cards, optional thumbnail */
.campaign-update-card {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 0.7rem;
}
.campaign-update-thumb {
  flex: 0 0 auto;
  width: 8rem;
  height: 5rem;
  margin-right: 0.9rem;
  border-radius: 0.4rem;
  background: rgba(255,255,255,0.06) center / cover no-repeat;
}
.campaign-update-body { flex: 1; min-width: 0; }
.campaign-update-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.campaign-update-title { font-weight: 800; font-size: 1rem; }
.campaign-update-date { font-size: 0.8rem; color: var(--ds-text-muted); }
.campaign-update-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ds-text);
  white-space: pre-wrap;
}

/* Campaign comments (read-only on TV) */
.campaign-comment-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
}
.campaign-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.campaign-comment-name { font-weight: 700; font-size: 0.9rem; }
.campaign-comment-date { font-size: 0.78rem; color: var(--ds-text-muted); }
.campaign-comment-text { font-size: 0.9rem; line-height: 1.45; color: var(--ds-text); }

/* Pitch video overlay — fullscreen modal with native HTML5 controls */
.campaign-video-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.campaign-video-player {
  max-width: 96vw;
  max-height: 92vh;
  background: #000;
  border-radius: 0.4rem;
}
.nuspot-like-btn,
.nuspot-dislike-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--ds-line-strong);
  background: rgba(21,29,41,.55);
  color: var(--ds-text);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.nuspot-like-btn:focus,
.nuspot-like-btn.focused,
.nuspot-dislike-btn:focus,
.nuspot-dislike-btn.focused {
  outline: 2px solid var(--ds-red-bright);
  outline-offset: 2px;
}
.nuspot-like-btn.active {
  background: linear-gradient(180deg, rgba(240,75,67,.98), rgba(192,48,42,.98));
  color: #fff;
  border-color: rgba(240,75,67,.42);
}
.nuspot-dislike-btn.active {
  background: rgba(120,128,140,.55);
  color: #fff;
  border-color: rgba(160,168,180,.45);
}

/* ---- Studio card (followed-studios row on home) ---- */
.studio-card {
  flex: 0 0 auto;
  width: 9rem;
  border: none;
  background: transparent;
  padding: 0;
  margin-right: 0.6rem;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  text-align: center;
  transition: transform 0.12s ease;
}
.studio-card-thumb {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: rgba(255,255,255,.06) center / cover no-repeat;
  border: 2px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ds-text-soft);
  transition: border-color 0.12s ease;
}
.studio-card-thumb.initials {
  /* Falls through to flex-centred initials when no profile picture is set */
  background: linear-gradient(135deg, rgba(240,75,67,.22), rgba(192,48,42,.18));
  color: #fff;
}
.studio-card-label {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  /* Explicit white — the inherited color rendered near-black on the dark
     "Studios you Follow" row, making names unreadable (Sanjay 2026-08-08). */
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.3rem;
}
.studio-card:focus .studio-card-thumb,
.studio-card.focused .studio-card-thumb {
  border-color: var(--ds-red-bright);
  border-width: 3px;
}
.studio-card:focus,
.studio-card.focused {
  transform: scale(1.04);
}

/* ---- Exit confirmation popup (Samsung Return Key Policy) ---- */
.exit-confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.exit-confirm-box {
  background: var(--ds-panel-solid);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-lg);
  padding: 2.2rem 2.8rem;
  text-align: center;
  max-width: 30rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60);
}

.exit-confirm-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ds-text);
  margin-bottom: 0.6rem;
}

.exit-confirm-msg {
  font-size: 1.0rem;
  color: var(--ds-text-muted);
  margin-bottom: 1.8rem;
}

.exit-confirm-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.exit-confirm-btn {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.7rem 2.0rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ds-text);
  cursor: pointer;
}

.exit-confirm-btn.focused {
  background: var(--ds-red);
  border-color: #fff;
}

/* =========================================================
   Nuvee detail page additions: background trailer + Show More
   ========================================================= */

/* Background trailer behind the hero gradient/overlay. Inset:0 so it
   covers the same area as the static thumbnail backgroundImage; the
   gradient overlay sits above via z-index. */
.nuvee-hero-bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Hidden until the first frame plays (JS adds .playing) — keeps the
     WebView's default play-button placeholder from covering the hero. */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.nuvee-hero-bg-video.playing {
  opacity: 1;
}
.nuvee-hero { position: relative; }
.nuvee-hero-content { position: relative; z-index: 2; }
.nuvee-hero-overlay { z-index: 1; }

/* Inline Show more / Show less toggle inside synopsis paragraphs. */
.nuvee-show-more {
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  color: var(--ds-red-bright, #f04b43);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.nuvee-show-more:focus,
.nuvee-show-more.focused {
  text-decoration: underline;
  color: #fff;
}

/* =========================================================
   Home page hero banner (featured pick at the top)
   ========================================================= */
.home-hero {
  position: relative;
  width: 100%;
  height: 22rem;                    /* ~half a 1080p TV viewport */
  border-radius: 18px;
  overflow: hidden;
  background-color: #0b0f14;
  background-size: cover;
  background-position: center;
  margin-bottom: 1.25rem;
  cursor: pointer;
  outline: none;
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0)    100%
  );
}
.home-hero-content {
  position: relative;
  z-index: 1;
  padding: 1.5rem 2rem;
  max-width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.home-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ds-red-bright, #f04b43);
  margin-bottom: 0.5rem;
}
.home-hero-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.home-hero-desc {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  max-width: 95%;
  margin-bottom: 1rem;
}
.home-hero-cta {
  display: inline-flex;
  align-items: center;
  background: var(--ds-red, #c30813);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  width: fit-content;
}
.home-hero:focus,
.home-hero.focused {
  box-shadow: 0 0 0 4px var(--ds-red-bright, #f04b43);
  transform: scale(1.01);
}

/* NuSpot brand logo (replaces the campaign title text on the ad screen) */
.nuspot-brand-logo {
  max-height: 3.2rem;
  max-width: 16rem;
  object-fit: contain;
  /* Extra breathing room below the logo — it sat too close to the
     Like/Dislike row (Sanjay 2026-08-08). */
  margin-bottom: 1.5rem;
  display: block;
}