/* ============================================================
   TV Designer — runtime (rendered nodes + player overlay)
   These styles apply to the rendered TV UI both in the editor
   stage and the fullscreen player. Sizes come inline (px from dp).
   ============================================================ */

.tv-node { position: absolute; box-sizing: border-box; }
.tv-node.flow { position: relative; }

/* containers */
.tv-row { display: flex; flex-direction: row; align-items: stretch; }
.tv-col { display: flex; flex-direction: column; }
.tv-lazyrow { display: flex; flex-direction: row; overflow: hidden; align-items: stretch; }
.tv-carousel { display: flex; flex-direction: row; overflow: hidden; }
.tv-box { display: block; }

/* inner scroll track for rows/columns (enables D-pad row scrolling) */
.tv-track { transition: transform .28s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.tv-progress { position: absolute; }

/* card */
.tv-card { overflow: hidden; display: flex; flex-direction: column; }
.tv-card .card-media { flex: 1; background-size: cover; background-position: center; min-height: 0; }
.tv-card .card-body { padding: 8px 10px; }
.tv-card .card-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-card .card-sub { opacity: .7; font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* text */
.tv-text { display: flex; }
.tv-text > span { width: 100%; }

/* icon */
.tv-icon { display: flex; align-items: center; justify-content: center; }
.tv-icon .material-symbols-rounded { font-size: inherit; }

/* divider / line */
.tv-divider { background: currentColor; }

/* scrim (gradient overlay) */
.tv-scrim { pointer-events: none; }

/* sidebar */
.tv-sidebar { display: flex; flex-direction: column; }
.tv-sidebar .nav-item { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 10px; }
.tv-sidebar .nav-item .material-symbols-rounded { font-size: 24px; }

/* hero / immersive */
.tv-hero { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }

/* focus visuals applied at runtime (player) */
.tv-focusable { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, outline-color .15s; outline: 0 solid transparent; }
.tv-focusable.tv-focused { z-index: 20; }

/* shimmer */
@keyframes tv-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.tv-shimmer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 100%; animation: tv-shimmer 1.6s linear infinite;
}

@keyframes tv-glowpulse {
  0%,100% { filter: drop-shadow(0 0 6px var(--glow,#5b8cff)); }
  50% { filter: drop-shadow(0 0 20px var(--glow,#5b8cff)); }
}
.tv-glowpulse { animation: tv-glowpulse 1.8s ease-in-out infinite; }

/* enter animations (added then removed by player) */
@keyframes tv-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tv-scaleIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes tv-slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tv-slideLeft { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tv-slideRight { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tv-expand { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }

.anim-fadeIn { animation: tv-fadeIn var(--d,400ms) var(--e,ease) var(--dl,0ms) both; }
.anim-scaleIn { animation: tv-scaleIn var(--d,400ms) var(--e,cubic-bezier(.2,.8,.2,1)) var(--dl,0ms) both; }
.anim-slideUp { animation: tv-slideUp var(--d,400ms) var(--e,cubic-bezier(.2,.8,.2,1)) var(--dl,0ms) both; }
.anim-slideLeft { animation: tv-slideLeft var(--d,400ms) var(--e,cubic-bezier(.2,.8,.2,1)) var(--dl,0ms) both; }
.anim-slideRight { animation: tv-slideRight var(--d,400ms) var(--e,cubic-bezier(.2,.8,.2,1)) var(--dl,0ms) both; }
.anim-expand { animation: tv-expand var(--d,400ms) var(--e,cubic-bezier(.2,.8,.2,1)) var(--dl,0ms) both; transform-origin: top; }

/* ---------------- Player overlay ---------------- */
#playerOverlay {
  position: fixed; inset: 0; z-index: 500; overflow: hidden;
  background: radial-gradient(130% 130% at 50% 30%, #1b1e26 0%, #0a0c10 55%, #000 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
#playerOverlay[hidden] { display: none !important; }

/* TV device mockup */
#playerTV { display: flex; flex-direction: column; align-items: center; }
#playerFrame {
  position: relative;
  background: linear-gradient(180deg,#1c1f26,#0c0e12);
  padding: 14px; border-radius: 22px;
  box-shadow: 0 0 0 1px #353c4a, 0 2px 0 2px #05060880, 0 40px 90px rgba(0,0,0,.75),
              inset 0 1px 0 rgba(255,255,255,.06);
}
#playerStage {
  width: 1920px; height: 1080px; position: relative; transform-origin: 0 0; overflow: hidden; background: #000;
  border-radius: 8px;
}
#playerStand {
  width: 180px; height: 22px; margin-top: -2px;
  background: linear-gradient(180deg,#2a2f3a,#14171d);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 24px rgba(0,0,0,.6);
  position: relative;
}
#playerStand::after {
  content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  width: 26px; height: 16px; background: linear-gradient(180deg,#2a2f3a,#1a1e26);
}
#playerHint {
  margin-top: 18px; z-index: 510;
  background: rgba(0,0,0,.6); border: 1px solid #2a3140; color: #cfd6e4; padding: 8px 16px;
  border-radius: 24px; font-size: 13px; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(6px);
}
#playerClose { position: fixed; top: 16px; right: 18px; z-index: 520; }