/* CVN92 Tizen TV app — Netflix-style dark UI. Plain CSS only (no grid/gap/aspect-ratio/clamp)
   to stay compatible with the TV's old WebKit engine. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; color: #f5f6fa; }
html.native-video, html.native-video body { background: transparent !important; }
body {
  font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
[hidden] { display: none !important; }
img { border: 0; }

/* ---------- Intro ---------- */
.intro {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 50;
  transition: opacity 0.4s ease;
}
.intro.leaving { opacity: 0; }
#intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.intro-hint {
  position: absolute;
  right: 56px;
  bottom: 48px;
  padding: 14px 28px;
  background: rgba(10, 11, 16, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.intro-hint b { color: #2f6bff; }

/* ---------- App shell (overscan-safe: 90px sides) ---------- */
.app { width: 100%; height: 100%; overflow: hidden; position: relative; background: #000; }
.bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #000; background-size: cover; background-position: center top;
  opacity: 0.35;
}
.bg::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, #000 78%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 60%);
}

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 110px; padding: 28px 90px 0;
  display: flex; align-items: center; justify-content: space-between;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}
.avatar-chip { display: flex; align-items: center; width: 160px; }
.avatar-dot { width: 52px; height: 52px; border-radius: 8px; background: #2f6bff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.caret { margin-left: 10px; font-size: 18px; color: #b8bcc8; }
.tabs { display: flex; align-items: center; }
.tab { padding: 10px 30px; margin: 0 6px; border-radius: 999px; font-size: 24px; font-weight: 600; color: #cfd2da; background: transparent; }
.tab.focused { background: rgba(255,255,255,0.28); color: #fff; box-shadow: 0 0 0 3px #fff; }
.logo { width: 230px; text-align: right; white-space: nowrap; font-size: 40px; font-weight: 900; letter-spacing: 0.02em; color: #fff; }
.logo b { color: #2f6bff; }

.screen { position: relative; width: 100%; min-height: 100%; padding-top: 120px; padding-bottom: 600px; transition: transform 0.3s ease; }

.empty { padding: 240px 90px 0; font-size: 26px; color: #9aa0ae; }
.empty .btn { margin-top: 28px; margin-left: 90px; }
.empty .debug { display: block; margin-top: 14px; font-size: 18px; color: #ff8a65; font-family: monospace; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; margin-right: 20px; padding: 16px 44px; border-radius: 8px;
  background: #fff; color: #000; font-size: 26px; font-weight: 700;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn.secondary { background: rgba(109,109,110,0.7); color: #fff; }
.btn.focused { transform: scale(1.06); box-shadow: 0 0 0 4px #fff; background: #fff; color: #000; }
.btn.secondary.focused { background: rgba(255,255,255,0.92); color: #000; }

/* ---------- Shelves ---------- */
.rows { position: relative; }
.row { position: relative; overflow: hidden; padding: 0 0 0 90px; opacity: 0.45; transition: opacity 0.25s ease; }
.row.active { opacity: 1; }
.row h2 { margin: 0; padding: 0 0 4px; font-size: 26px; font-weight: 700; color: #f1f1f1; }
.chev { margin-left: 10px; color: #9aa0ae; font-weight: 400; }
.track { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; padding: 10px 0 14px; transition: transform 0.3s ease; will-change: transform; }

.info { height: 118px; padding-top: 6px; width: 1100px; opacity: 0; transition: opacity 0.2s ease; }
.row.active .info { opacity: 1; }
.i-meta { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; min-height: 30px; }
.i-syn { font-size: 21px; line-height: 1.35; color: #b3b6c0; max-height: 84px; overflow: hidden; }

/* Portrait card by default; the focused card widens into a landscape card. */
.card { position: relative; flex: 0 0 auto; width: 190px; height: 305px; margin-right: 16px; text-align: left; }
.card .art {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 8px; overflow: hidden;
  background-color: #14161f; background-image: linear-gradient(135deg, #1b2030 0%, #0c0d13 100%);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px;
  font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.55);
}
.card .art-w { display: none; }
.card .art-name { position: absolute; left: 22px; bottom: 18px; right: 22px; text-align: left; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }
.card.focused { width: 550px; z-index: 5; }
.card.focused .art-p { display: none; }
.card.focused .art-w { display: flex; box-shadow: 0 0 0 3px #fff; }
.card .badge { position: absolute; top: 10px; left: 10px; padding: 4px 12px; border-radius: 4px; background: #2f6bff; font-size: 15px; font-weight: 800; letter-spacing: 0.06em; color: #fff; }
.card .badge.live { background: #e23c3c; }

.row-live .card { width: 300px; height: 169px; }
.row-live .card.focused { width: 360px; height: 203px; }

/* Top 10: big outlined numeral behind a portrait card */
.row-top .card { width: 300px; }
.row-top .card .art { left: 110px; width: 190px; }
.row-top .card.focused { width: 650px; }
.row-top .card.focused .art { left: 110px; width: 540px; }
.rank { position: absolute; left: 0; bottom: -8px; font-size: 230px; line-height: 1; font-weight: 900; color: #000; -webkit-text-stroke: 4px #6b7080; letter-spacing: -0.06em; }

/* ---------- Title detail ---------- */
.detail { position: relative; padding: 0; max-width: none; }
.detail-hero, .detail-series {
  height: 1080px;
  background-color: #0d0f16;
  background-size: cover;
  background-position: center top;
}
.detail-body { position: relative; padding: 200px 90px 0; width: 1100px; }
.detail h1 { margin: 0 0 18px; font-size: 68px; line-height: 1.05; font-weight: 800; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); }
.detail .meta { margin: 0 0 22px; font-size: 24px; color: #b8bcc8; }
.detail .meta .match { color: #46d369; font-weight: 700; margin-right: 18px; }
.detail .meta .rating { margin-left: 18px; padding: 1px 10px; border: 2px solid #8a8e9a; font-size: 20px; }
.detail .synopsis { margin: 0 0 36px; max-width: 900px; font-size: 26px; line-height: 1.4; color: #e0e2ea; max-height: 150px; overflow: hidden; }
.detail-series .detail-body { padding-top: 150px; }
.detail-series h1 { font-size: 56px; }
.detail-series .synopsis { margin-bottom: 24px; max-height: 110px; font-size: 24px; }
.episodes { padding: 12px 16px 20px; margin-left: -16px; width: 1000px; max-height: 480px; overflow: hidden; }
.ep {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 12px;
  border-radius: 6px;
  text-align: left;
  background: rgba(30, 32, 42, 0.85);
  transition: transform 0.15s ease, background 0.15s ease;
}
.ep.focused { transform: scale(1.03); background: #2b2e3b; box-shadow: 0 0 0 4px #fff; }
.ep .art { flex: 0 0 auto; width: 200px; height: 112px; border-radius: 4px; background-color: #1b2030; background-size: cover; background-position: center; margin-right: 24px; }
.ep h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.ep p { margin: 0; font-size: 19px; color: #a8acb8; }
.ep[data-disabled] { opacity: 0.45; }

/* ---------- Login / on-screen keyboard ---------- */
.login {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 150px 90px 0;
}
.login-fields {
  width: 460px;
  margin-right: 80px;
  padding-top: 20px;
}
.login-fields h1 {
  margin: 0 0 32px;
  font-size: 40px;
  font-weight: 800;
}
.field {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #12141d;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.field.active, .field.focused {
  background: #1b2030;
  box-shadow: 0 0 0 3px #fff;
}
.field-label {
  display: block;
  font-size: 15px;
  color: #9aa0ae;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field-value {
  display: block;
  font-size: 24px;
  color: #f5f6fa;
}
.field-value i { color: #6b7180; font-style: normal; }
.login-error {
  margin-top: 8px;
  font-size: 18px;
  color: #ff6b6b;
}

.keyboard { width: 900px; }
.kb-row {
  display: flex;
  margin-bottom: 14px;
}
.key {
  flex: 0 0 auto;
  width: 76px;
  height: 64px;
  margin-right: 12px;
  border-radius: 8px;
  background: #12141d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.key.focused {
  background: #fff;
  color: #000;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(47, 107, 255, 0.4);
}
.key.wide {
  width: 184px;
  font-size: 19px;
}
.key.primary { background: #1947c9; }
.key.primary.focused { background: #fff; color: #000; }

/* ---------- Profiles ---------- */
.profiles {
  padding: 240px 90px 0;
  text-align: center;
}
.profiles h1 {
  margin: 0 0 52px;
  font-size: 44px;
  font-weight: 800;
}
.profile-grid {
  display: flex;
  justify-content: center;
}
.profile {
  margin: 0 24px;
  text-align: center;
  transition: transform 0.15s ease;
}
.profile.focused { transform: scale(1.12); }
.avatar {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.avatar-red { background: #c0392b; }
.avatar-blue { background: #2f6bff; }
.avatar-green { background: #1e8e5a; }
.profile.focused .avatar { box-shadow: 0 0 0 4px #fff; }
.profile-name { font-size: 22px; color: #d4d7e0; }
.profile.focused .profile-name { color: #fff; }

/* ---------- Player ---------- */
.player {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 40;
}
#player-host, #player-host video {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.player-hint {
  position: absolute;
  left: 32px;
  bottom: 24px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(10, 11, 16, 0.6);
  font-size: 17px;
  color: #d4d7e0;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 10px;
  background: #1b2030;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  font-size: 20px;
  z-index: 60;
}

/* Detail backdrop gradients */
.detail-hero::before, .detail-series::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0) 60%),
    linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0) 70%);
}

/* ---------- Splash (wide, cinematic) ---------- */
.splash { position: fixed; top: 0; left: 0; width: 1920px; height: 1080px; background: #000; z-index: 60; overflow: hidden; transition: opacity 0.5s ease; }
.splash.leaving { opacity: 0; }
.splash::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(ellipse at center, rgba(47,107,255,0.22) 0%, rgba(0,0,0,0) 62%); }
.splash-center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.splash-logo { font-size: 200px; font-weight: 800; color: #fff; letter-spacing: 0.02em; text-shadow: 0 0 60px rgba(47,107,255,0.55);
  -webkit-animation: splashPush 3.2s ease-out forwards; animation: splashPush 3.2s ease-out forwards; }
.splash-logo b { color: #2f6bff; }
.splash-line { width: 900px; height: 4px; margin-top: 8px; border-radius: 2px; opacity: 0;
  background-image: linear-gradient(to right, rgba(47,107,255,0) 0%, #2f6bff 30%, #f2b632 70%, rgba(242,182,50,0) 100%);
  -webkit-animation: splashLine 2.4s ease-out 0.5s forwards; animation: splashLine 2.4s ease-out 0.5s forwards; }
.splash-tag { margin-top: 28px; font-size: 30px; color: #c7cad3; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0;
  -webkit-animation: splashFade 1.6s ease-out 1.2s forwards; animation: splashFade 1.6s ease-out 1.2s forwards; }
.splash-info { position: absolute; bottom: 24px; right: 32px; font-size: 14px; color: #2a2e3a; }
@-webkit-keyframes splashPush { from { -webkit-transform: scale(0.88); opacity: 0; } 25% { opacity: 1; } to { -webkit-transform: scale(1.04); opacity: 1; } }
@keyframes splashPush { from { transform: scale(0.88); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1.04); opacity: 1; } }
@-webkit-keyframes splashLine { from { opacity: 0; -webkit-transform: scaleX(0.2); } to { opacity: 1; -webkit-transform: scaleX(1); } }
@keyframes splashLine { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: scaleX(1); } }
@-webkit-keyframes splashFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Cat mark ---------- */
.logo .cat { display: inline-block; vertical-align: middle; width: 46px; height: 46px; margin: -8px 8px 0 0; }
.splash-logo { position: relative; }
.splash-logo .cat { position: absolute; right: 30px; bottom: 150px; width: 170px; height: 170px; filter: drop-shadow(0 0 24px rgba(47,107,255,0.6)); }

.top-spacer { width: 160px; }

/* =====================================================================
   tvOS-style layer: near-black depth, floating frosted tab bar, big hero, landscape shelves,
   lift-and-glow focus. Overrides the rules above (same specificity, later wins).
   ===================================================================== */
html, body, .app { background: #050507; }
.bg { opacity: 0.16; }
.bg::after { background-image: linear-gradient(to bottom, rgba(5,5,7,0.55) 0%, #050507 70%); }

/* Floating frosted pill tab bar */
.top { height: 120px; padding: 30px 90px 0; background-image: linear-gradient(to bottom, rgba(5,5,7,0.55) 0%, rgba(5,5,7,0) 100%); }
.avatar-dot { width: 54px; height: 54px; border-radius: 27px; font-size: 24px; background: linear-gradient(135deg, #2f6bff, #1947c9); }
.caret { display: none; }
.avatar-chip { width: 160px; }
.tabs { padding: 7px; border-radius: 999px; background: rgba(58,58,64,0.62); -webkit-backdrop-filter: blur(28px); box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.08); }
.tab { padding: 12px 38px; margin: 0 2px; border-radius: 999px; font-size: 25px; font-weight: 600; color: rgba(255,255,255,0.78); background: transparent; transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease; }
.tab.focused { background: rgba(255,255,255,0.92); color: #0b0b0e; box-shadow: none; transform: scale(1.04); }

/* Buttons: white rounded Play + round "+" */
.btn { padding: 20px 52px; border-radius: 16px; background: rgba(255,255,255,0.88); color: #0b0b0e; font-size: 28px; font-weight: 700; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
.btn.secondary { background: rgba(120,120,128,0.5); color: #fff; }
.btn.focused { transform: scale(1.08); background: #fff; color: #0b0b0e; box-shadow: 0 18px 44px rgba(0,0,0,0.6), 0 0 36px rgba(255,255,255,0.28); }
.btn.secondary.focused { background: #fff; color: #0b0b0e; }
.btn-round { width: 72px; height: 72px; margin-right: 20px; border-radius: 36px; background: rgba(120,120,128,0.5); color: #fff; font-size: 44px; line-height: 70px; text-align: center; font-weight: 300; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
.btn-round.focused { transform: scale(1.12); background: #fff; color: #0b0b0e; box-shadow: 0 18px 44px rgba(0,0,0,0.6), 0 0 36px rgba(255,255,255,0.28); }

/* Hero: ~70% of the screen */
.screen { padding-top: 0; }
.hero { position: relative; height: 760px; background-color: #0e1018; background-image: linear-gradient(135deg, #17255a 0%, #0a0c14 70%); background-size: cover; background-position: center 20%; }
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(to top, #050507 0%, rgba(5,5,7,0.7) 22%, rgba(5,5,7,0) 55%), linear-gradient(to right, rgba(5,5,7,0.78) 0%, rgba(5,5,7,0.25) 50%, rgba(5,5,7,0) 75%), linear-gradient(to bottom, rgba(5,5,7,0.5) 0%, rgba(5,5,7,0) 22%); }
.hero-body { position: absolute; left: 90px; bottom: 100px; width: 1100px; }
.hero-kicker { margin-bottom: 14px; font-size: 22px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #f2b632; }
.hero h1 { margin: 0 0 16px; font-size: 104px; line-height: 1.02; font-weight: 800; letter-spacing: -0.01em; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,0.55); }
.hero-syn { margin: 0 0 34px; max-width: 980px; font-size: 28px; line-height: 1.35; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.hero-actions { display: flex; align-items: center; }
.hero-actions .btn { margin-right: 20px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; }
.dot { display: inline-block; width: 10px; height: 10px; margin: 0 6px; border-radius: 5px; background: rgba(255,255,255,0.35); }
.dot.on { width: 26px; background: #fff; }

/* Shelves of landscape cards */
.rows { margin-top: -20px; }
.row { opacity: 0.72; transition: opacity 0.3s ease; padding: 0 0 0 90px; }
.row.active { opacity: 1; }
.row h2 { padding: 0; font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -0.005em; }
.chev { display: none; }
.track { padding: 30px 0 72px; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.info { display: none; }
.card { width: 380px; height: 214px; margin-right: 26px; transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.28s ease; border-radius: 16px; }
.card .art { border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.card .art-p { display: none; }
.card .art-w { display: flex; }
.card .art-w::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 48%); }
.card .art-name { z-index: 1; left: 20px; bottom: 14px; right: 20px; font-size: 26px; font-weight: 700; }
.card.focused { width: 380px; z-index: 5; -webkit-transform: translateY(-12px) scale(1.1); transform: translateY(-12px) scale(1.1); }
.card.focused .art-p { display: none; }
.card.focused .art-w { display: flex; box-shadow: 0 34px 70px rgba(0,0,0,0.75), 0 0 44px rgba(255,255,255,0.22); }
.card .badge { top: 14px; left: 14px; border-radius: 8px; }
.row-live .card, .row-live .card.focused { width: 380px; height: 214px; }
.row-live .card.focused { height: 214px; }
.row-top .card, .row-top .card.focused { width: 380px; }
.row-top .card .art, .row-top .card.focused .art { left: 0; width: 100%; }
.rank { z-index: 2; left: 16px; top: 12px; bottom: auto; width: 46px; height: 46px; border-radius: 23px; background: rgba(0,0,0,0.55); font-size: 26px; line-height: 46px; text-align: center; font-weight: 800; color: #fff; -webkit-text-stroke: 0; letter-spacing: 0; }

/* Detail, episodes, login, profiles: same lift-and-glow focus instead of outlines */
.detail h1 { font-size: 84px; letter-spacing: -0.01em; }
.detail .meta .rating { border-radius: 6px; }
.ep { border-radius: 16px; background: rgba(40,40,46,0.7); }
.ep.focused { transform: scale(1.03); background: rgba(70,70,78,0.9); box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 30px rgba(255,255,255,0.15); }
.field { border-radius: 16px; background: rgba(40,40,46,0.8); }
.field.active, .field.focused { background: rgba(70,70,78,0.95); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(255,255,255,0.15); }
.key { border-radius: 14px; background: rgba(44,44,50,0.9); }
.key.focused { background: #fff; color: #0b0b0e; transform: scale(1.1); box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 24px rgba(255,255,255,0.2); }
.avatar { border-radius: 80px; }
.profile.focused { transform: scale(1.14); }
.profile.focused .avatar { box-shadow: 0 22px 50px rgba(0,0,0,0.6), 0 0 36px rgba(255,255,255,0.25); }
.toast { border-radius: 20px; background: rgba(50,50,56,0.92); }

/* ---------- Fit pass: hero + two shelves fully inside 1920x1080 with a ~54px safe margin ---------- */
.hero { height: 520px; }
.hero-body { bottom: 84px; }
.hero h1 { font-size: 84px; margin-bottom: 12px; }
.hero-kicker { font-size: 20px; margin-bottom: 10px; }
.hero-syn { font-size: 26px; margin-bottom: 26px; }
.hero-dots { bottom: 22px; }
.rows { margin-top: -6px; }
.row h2 { font-size: 30px; }
.track { padding: 26px 0 34px; }
.card { width: 340px; height: 191px; margin-right: 24px; }
.card.focused { width: 340px; }
.card .art-name { font-size: 24px; }
.hero { height: 480px; }
.hero-body { bottom: 64px; }
.hero h1 { font-size: 76px; }

/* ---------- Profile chip uses the CVN92 logo ---------- */
.avatar-dot { width: 60px; height: 60px; border-radius: 30px; padding: 0; overflow: hidden; background: rgba(255,255,255,0.14); box-shadow: 0 0 0 2px rgba(255,255,255,0.22); }
.avatar-dot img { display: block; width: 100%; height: 100%; padding: 7px; object-fit: contain; }

/* ---------- Bigger profile logo ---------- */
.top { height: 136px; padding-top: 22px; }
.avatar-chip { width: 210px; }
.top-spacer { width: 210px; }
.avatar-dot { width: 92px; height: 92px; border-radius: 46px; }
.avatar-dot img { padding: 5px; }
.caret { margin-left: 12px; font-size: 22px; }


/* ---------- Left sidebar: profile header + labeled menu (icon rail until focused) ---------- */
.top { display: none; }
.side { position: fixed; left: 0; top: 0; bottom: 0; width: 112px; z-index: 30; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 0; overflow: hidden;
  background-image: linear-gradient(to right, rgba(6,9,26,0.94) 0%, rgba(6,9,26,0.80) 62%, rgba(6,9,26,0) 100%); transition: width 0.25s ease; }
.side.open { width: 470px; background-image: linear-gradient(to right, rgba(16,26,84,0.98) 0%, rgba(16,26,84,0.94) 68%, rgba(16,26,84,0) 100%); }
.side-profile { display: flex; align-items: center; width: 100%; height: 104px; padding-left: 20px; text-align: left; color: #fff; }
.side-avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 36px; }
.side-avatar img { display: block; width: 72px; height: 72px; border-radius: 36px; padding: 8px; box-sizing: border-box; background: rgba(255,255,255,0.16); box-shadow: 0 0 0 2px rgba(255,255,255,0.28); }
.side-who { margin-left: 20px; display: flex; flex-direction: column; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; }
.side.open .side-who { opacity: 1; }
.side-name { font-size: 34px; font-weight: 700; line-height: 1.15; }
.side-sub { font-size: 24px; font-weight: 500; color: rgba(255,255,255,0.72); }
.side-profile.focused .side-avatar img { box-shadow: 0 0 0 4px #fff; }
.side-profile.focused .side-sub { color: #fff; }
.side-nav { width: 100%; margin-top: 30px; }
.side-bottom { margin-top: auto; }
.side-item { position: relative; display: flex; align-items: center; width: 100%; height: 82px; padding-left: 20px; text-align: left; color: #fff; }
.side-ico { flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.side-ico svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-label { margin-left: 20px; font-size: 32px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; }
.side.open .side-label { opacity: 1; }
/* current page: bold label, filled icon, accent bar */
.side-item.current .side-label { font-weight: 800; }
.side-item.current .side-ico svg { fill: rgba(255,255,255,0.9); }
.side-item.current::before { content: ""; position: absolute; left: 0; top: 19px; width: 6px; height: 44px; border-radius: 3px; background: #3b6bff; }
/* focused row: bright pill */
.side-item.focused { width: 420px; margin-left: 8px; padding-left: 12px; border-radius: 41px; background-color: rgba(255,255,255,0.96); }
.side-item.focused .side-label { color: #0b0b0e; font-weight: 800; }
.side-item.focused .side-ico svg { stroke: #0b0b0e; }
.side-item.focused.current .side-ico svg { fill: #0b0b0e; }
.side-item.focused::before { display: none; }

/* Movies / Shows grid and Search page */
.catalog, .search { padding: 150px 90px 100px 164px; }
.catalog h1 { margin: 0 0 28px; font-size: 56px; font-weight: 800; }
.catalog .grid { position: relative; display: flex; flex-wrap: wrap; padding-top: 14px; }
.grid .card { margin: 0 26px 36px 0; }
.catalog-empty, .search-hint { font-size: 28px; color: #9aa0ae; }
.search { display: flex; align-items: flex-start; }
.search-left { width: 800px; flex: 0 0 auto; }
.search-query { height: 84px; line-height: 84px; padding: 0 28px; margin-bottom: 26px; font-size: 38px; font-weight: 600; border-radius: 16px; background: rgba(40,40,46,0.85); white-space: nowrap; overflow: hidden; }
.search-query i { color: #6b7180; font-style: normal; }
.skeys { width: 800px; }
.skeys .key { width: 70px; height: 64px; margin: 0 6px 10px 0; font-size: 28px; }
.skeys .key.wide { width: 236px; }
.search-results { margin-left: 56px; display: flex; flex-wrap: wrap; align-content: flex-start; width: 760px; }
.search-results .grid-card { width: 300px; height: 169px; margin: 0 24px 30px 0; }
.search-results .search-hint { margin: 18px 0 0 6px; }

/* Make room for the rail: content starts to the right of it */
.row { padding-left: 164px; }
.hero-body { left: 164px; }
.detail-body { padding-left: 164px; width: 1174px; }
.login { padding-left: 164px; }
.profiles { padding-left: 164px; }
.empty { padding-left: 164px; }


/* ---------- Startup splash: small, centered logo (about 11% of the screen width, like a TV-app launch screen) ---------- */
.splash-img { display: block; width: 120px; height: auto; opacity: 0; -webkit-animation: splashFade 1.1s ease-out 0.1s forwards; animation: splashFade 1.1s ease-out 0.1s forwards; }

/* ======================================================================
   Home 2.0: full-screen hero, text block lower-left, a shelf peeking up from the bottom,
   promo tiles on the right, and motion (slow zoom, staggered entrances, shimmer, rotation).
   ====================================================================== */
.hero { height: 890px; overflow: hidden; background: #04060f; }
.hero::before { display: none; }
.hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center 22%; opacity: 0; transition: opacity 1.3s ease; will-change: transform, opacity; }
.hero-bg.on { opacity: 1; animation: heroZoom 24s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-1.6%, -1%); } }
/* dark fade on the left behind the text, and a fade into the shelves at the bottom */
.hero-shade { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(to right, rgba(4,8,30,0.96) 0%, rgba(4,8,30,0.84) 26%, rgba(4,8,30,0.28) 52%, rgba(4,8,30,0) 70%),
                    linear-gradient(to top, #04060f 0%, rgba(4,6,15,0.7) 12%, rgba(4,6,15,0) 34%); }

.hero-body { position: absolute; left: 164px; bottom: 70px; top: auto; width: 960px; transition: opacity 0.32s ease, transform 0.32s ease; }
.hero-body.swap { opacity: 0; transform: translateY(18px); }
.hero-body > * { opacity: 1; }
.hero-body.anim > * { animation: heroUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.hero-body.anim > *:nth-child(1) { animation-delay: 0.10s; }
.hero-body.anim > *:nth-child(2) { animation-delay: 0.22s; }
.hero-body.anim > *:nth-child(3) { animation-delay: 0.34s; }
.hero-body.anim > *:nth-child(4) { animation-delay: 0.46s; }
.hero-body.anim > *:nth-child(5) { animation-delay: 0.60s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.hero-kicker { display: flex; align-items: center; margin: 0 0 14px; font-size: 24px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #38f2b0; }
.live-dot { display: inline-block; width: 13px; height: 13px; margin-right: 14px; border-radius: 50%; background: #38f2b0; box-shadow: 0 0 0 0 rgba(56,242,176,0.7); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(56,242,176,0.65); } 70% { box-shadow: 0 0 0 16px rgba(56,242,176,0); } 100% { box-shadow: 0 0 0 0 rgba(56,242,176,0); } }

.hero .hero-body h1 { margin: 0 0 12px; font-size: 92px; line-height: 0.98; font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 0 6px 34px rgba(0,0,0,0.6);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hero-meta { margin: 0 0 14px; font-size: 26px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.78); }
.hero .hero-syn { margin: 0 0 32px; max-width: 880px; font-size: 28px; line-height: 1.36; color: rgba(255,255,255,0.9); white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-shadow: 0 2px 16px rgba(0,0,0,0.7); }
.hero-actions { display: flex; align-items: center; }

/* WATCH NOW: bright blue, with a slow light sweep */
.hero-play { position: relative; overflow: hidden; margin-right: 22px; padding: 0 76px; height: 84px; line-height: 84px; border-radius: 14px; font-size: 30px; font-weight: 800; letter-spacing: 0.1em; color: #fff;
  background-image: linear-gradient(135deg, #2f55ff 0%, #1230e8 100%); box-shadow: 0 14px 40px rgba(18,48,232,0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hero-play::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%; background-image: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); animation: playSweep 3.6s ease-in-out 1.2s infinite; }
@keyframes playSweep { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }
.hero-play.focused { transform: scale(1.07); box-shadow: 0 0 0 5px #fff, 0 18px 50px rgba(18,48,232,0.6); }
.btn-round { height: 84px; width: 84px; border-radius: 42px; line-height: 80px; }

/* promo tiles at the right, sliding in */
.hero-side { position: absolute; right: 90px; bottom: 130px; display: flex; align-items: flex-end; }
.promo { position: relative; display: block; width: 190px; height: 282px; margin-left: 26px; border-radius: 20px; overflow: hidden; background: #11162a; box-shadow: 0 18px 46px rgba(0,0,0,0.55);
  animation: promoIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.promo-art { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; }
.promo::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%); }
.promo-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font-size: 22px; font-weight: 800; color: #fff; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
.promo.focused { transform: translateY(-12px) scale(1.08); box-shadow: 0 0 0 4px #fff, 0 26px 60px rgba(0,0,0,0.65); z-index: 4; }
@keyframes promoIn { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: translateX(0); } }

.hero-dots { left: auto; right: 90px; bottom: 56px; }
.hero-dots .dot { display: inline-block; width: 12px; height: 12px; margin-left: 10px; border-radius: 6px; background: rgba(255,255,255,0.35); transition: width 0.3s ease, background-color 0.3s ease; }
.hero-dots .dot.on { width: 34px; background: #fff; }

/* shelves start right under the hero and peek up from the bottom edge */
.rows { margin-top: -6px; }
.rows.intro-in .card { animation: cardIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: translateY(0); } }
.ribbon { position: absolute; left: 0; top: 16px; z-index: 3; padding: 6px 16px 6px 12px; border-radius: 0 7px 7px 0; background: #1f3cff; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 6px 16px rgba(0,0,0,0.4); }


/* ---------- One promo tile that turns like a page ---------- */
.hero-side { right: 90px; bottom: 130px; display: block; -webkit-perspective: 1200px; perspective: 1200px; }
.promo { position: relative; display: block; width: 236px; height: 350px; margin: 0; border-radius: 20px; overflow: visible; background: transparent; box-shadow: 0 18px 46px rgba(0,0,0,0.55); }
.promo::after { display: none; }
.promo-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; overflow: hidden; background: #11162a; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.promo-page::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 52%); }
.promo-page.cur { z-index: 2; -webkit-transform-origin: left center; transform-origin: left center; }
.promo-page.nxt { z-index: 1; }
.promo-tag { position: absolute; left: 18px; bottom: 56px; z-index: 1; font-size: 15px; font-weight: 800; letter-spacing: 0.18em; color: #38f2b0; }
.promo-name { left: 18px; right: 18px; bottom: 16px; font-size: 24px; }
/* the turning page swings away from its left edge, and the page beneath is revealed from shadow */
.promo.turning .promo-page.cur { animation: pageTurn 1.15s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.promo.turning .promo-page.nxt::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: #000; animation: pageShade 1.15s ease-out forwards; }
@keyframes pageTurn { 0% { transform: rotateY(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); } 100% { transform: rotateY(-118deg); } }
@keyframes pageShade { from { opacity: 0.6; } to { opacity: 0; } }
.promo.focused { transform: translateY(-12px) scale(1.08); box-shadow: 0 0 0 4px #fff, 0 26px 60px rgba(0,0,0,0.65); }

/* ---------- Sidebar: smaller text; the selected item turns green and grows ---------- */
.side-name { font-size: 26px; transition: font-size 0.18s ease, color 0.18s ease; }
.side-sub { font-size: 19px; transition: font-size 0.18s ease, color 0.18s ease; }
.side-label { font-size: 24px; font-weight: 600; transition: font-size 0.18s ease, color 0.18s ease, opacity 0.2s ease; }
.side-ico svg { transition: transform 0.18s ease, stroke 0.18s ease; }
/* the focused row: no white pill, a soft green tint instead */
.side-item.focused { background-color: rgba(47,227,109,0.14); width: 420px; margin-left: 8px; padding-left: 12px; border-radius: 41px; }
.side-item.focused .side-label { color: #2fe36d; font-size: 31px; font-weight: 800; }
.side-item.focused .side-ico svg { stroke: #2fe36d; -webkit-transform: scale(1.18); transform: scale(1.18); }
.side-item.focused.current .side-ico svg { fill: #2fe36d; }
.side-profile.focused { background-color: rgba(47,227,109,0.14); }
.side-profile.focused .side-name { color: #2fe36d; font-size: 32px; }
.side-profile.focused .side-sub { color: #2fe36d; font-size: 22px; }
.side-profile.focused .side-avatar img { box-shadow: 0 0 0 4px #2fe36d; }


/* ---------- Hero preview: the first 10 seconds of the title fade in over the still ---------- */
.hero-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.hero-preview.on { opacity: 1; }


/* ---------- Offline live channels ---------- */
.channel-card.offline .art { -webkit-filter: grayscale(1) brightness(0.55); filter: grayscale(1) brightness(0.55); }
.channel-card.offline .badge.live { background: #5a5f6b; }

/* ---------- Ring shelf (circle carousel): only the "Trending Now" shelf is a 3D ring of small thumbnails. The front one pops
   forward, the others curve away and fade. Left/Right turns the ring; it also spins slowly by itself (ringLayout() in app.js). ---------- */
.rows .row.row-trending { padding: 0; overflow: hidden; }
.rows .row.row-trending { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.rows .row.row-trending .track { -webkit-order: 1; order: 1; }
.rows .row.row-trending h2 { -webkit-order: 2; order: 2; height: 30px; margin: 0; padding: 0; text-align: center; font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.rows .row.row-trending h2 .chev { display: none; }
.rows .row.row-trending .track { display: block; position: relative; height: 350px; padding: 0; margin: 0;
  -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 50% 46%; perspective-origin: 50% 46%; }
.rows .row.row-trending .card, .rows .row.row-trending .card.focused {
  position: absolute; left: 50%; top: 175px; width: 340px; height: 191px; margin: -95px 0 0 -170px; border-radius: 18px;
  -webkit-transition: -webkit-transform 0.65s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.5s ease; transition: transform 0.65s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.5s ease; }
.rows .row.row-trending .card.ring-hide { visibility: hidden; }
.rows .row.row-trending .card .art, .rows .row.row-trending .card.focused .art { left: 0; width: 100%; border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.rows .row.row-trending .card.focused .art-w { box-shadow: 0 22px 44px rgba(0,0,0,0.7), 0 0 0 2px rgba(255,255,255,0.9); }
.rows .row.row-trending .card .art-w::after { display: none; }
.rows .row.row-trending .card .art-name { display: none; }
.rows .row.row-trending .card .badge { top: 12px; left: 12px; padding: 3px 10px; font-size: 13px; border-radius: 6px; }
.rows .row.row-trending .card .ribbon { top: 12px; padding: 4px 12px 4px 9px; font-size: 14px; }
.rows .row.row-trending .card.focused::before { content: attr(data-name); position: absolute; left: 50%; top: -38px; z-index: 6; padding: 5px 16px; border-radius: 10px;
  -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; max-width: 400px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(28,28,32,0.94); border: 1px solid rgba(255,255,255,0.18); font-size: 18px; font-weight: 700; color: #fff; }

/* Hero lifted a little: WATCH NOW block and the UP NEXT tile share one baseline, well clear of the shelf below. */
.hero-body { bottom: 130px; }
.hero-side { bottom: 130px; }
.promo { width: 220px; height: 326px; }
.hero-dots { bottom: 84px; }
/* Lifted another ~30% (130px -> 170px from the hero's bottom edge). */
.hero-body { bottom: 170px; }
.hero-side { bottom: 170px; }
.hero-dots { bottom: 124px; }
/* Hero shortened so the whole Trending ring (cards, name label and title) is on screen at start, clear of the bottom edge. */
.hero { height: 690px; }
.rows .row.row-trending .track { height: 330px; }
.rows .row.row-trending .card, .rows .row.row-trending .card.focused { top: 165px; }
/* "Trending Now" heading back above the ring; hero text block and tile lowered a little. */
.rows .row.row-trending .track { -webkit-order: 2; order: 2; height: 300px; }
.rows .row.row-trending h2 { -webkit-order: 1; order: 1; height: 34px; line-height: 34px; padding-top: 6px; }
.rows .row.row-trending .card, .rows .row.row-trending .card.focused { top: 150px; }
.hero-body { bottom: 100px; }
.hero-side { bottom: 100px; }
.hero-dots { bottom: 54px; }

/* Compact hero so the Trending ring AND the Top 10 shelf both fit on screen at start. */
.hero { height: 430px; }
.hero-body { left: 120px; bottom: 40px; width: 880px; }
.hero-kicker { font-size: 18px; margin-bottom: 8px; }
.live-dot { width: 10px; height: 10px; margin-right: 10px; }
.hero .hero-body h1 { margin: 0 0 8px; font-size: 56px; }
.hero-meta { margin: 0 0 8px; font-size: 20px; }
.hero .hero-syn { margin: 0 0 16px; max-width: 760px; font-size: 21px; line-height: 1.32; }
.hero-play { height: 60px; line-height: 60px; padding: 0 52px; font-size: 22px; border-radius: 12px; margin-right: 16px; }
.btn-round { height: 60px; width: 60px; border-radius: 30px; line-height: 56px; }
.hero-side { right: 90px; bottom: 40px; }
.promo { width: 150px; height: 222px; border-radius: 16px; }
.promo-page { border-radius: 16px; }
.promo-tag { left: 12px; bottom: 40px; font-size: 12px; }
.promo-name { left: 12px; right: 12px; bottom: 12px; font-size: 17px; }
.hero-dots { bottom: 10px; right: 90px; }
.hero-dots .dot { width: 9px; height: 9px; margin-left: 8px; }
.hero-dots .dot.on { width: 26px; }
.rows .row.row-trending .track { height: 290px; }
.rows .row.row-trending .card, .rows .row.row-trending .card.focused { top: 146px; }

/* Live channel cards beside the ring: CVN Live on the left, Quran TV on the right. */
.rows .row .card.flank { position: absolute; top: 98px; width: 300px; height: 169px; margin: 0; border-radius: 18px; z-index: 3;
  -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; }
.rows .row .card.flank-l { left: 130px; right: auto; }
.rows .row .card.flank-r { right: 130px; left: auto; }
.rows .row .card.flank .art, .rows .row .card.flank .art-w { left: 0; width: 100%; border-radius: 18px; display: flex; }
.rows .row .card.flank .art-p { display: none; }
.rows .row .card.flank.focused { z-index: 9; -webkit-transform: translateY(-8px) scale(1.12); transform: translateY(-8px) scale(1.12); }
.rows .row .card.flank.focused .art-w { box-shadow: 0 22px 44px rgba(0,0,0,0.7), 0 0 0 2px rgba(255,255,255,0.9); }
.rows .row .card.flank .badge { top: 12px; left: 12px; padding: 3px 10px; font-size: 13px; border-radius: 6px; }
.rows .row .card.flank.focused::before { content: attr(data-name); position: absolute; left: 50%; top: -38px; z-index: 6; padding: 5px 16px; border-radius: 10px;
  -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; background: rgba(28,28,32,0.94); border: 1px solid rgba(255,255,255,0.18); font-size: 18px; font-weight: 700; color: #fff; }
/* Flank cards moved in to sit right against the ring (gap about 25px each side). */
.rows .row .card.flank-l { left: 215px; }
.rows .row .card.flank-r { right: 215px; }

/* Featured preview: a smaller framed picture in the centre of the hero (still, then the 10 s preview). The text sits to its left,
   the UP NEXT tile to its right. */
.hero-frame { position: absolute; left: 550px; top: 15px; width: 820px; height: 400px; border-radius: 22px; overflow: hidden; background: #04060f;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.hero-frame .hero-bg { top: 0; left: 0; right: 0; bottom: 0; background-position: center; }
.hero-frame .hero-preview { top: 0; left: 0; width: 100%; height: 100%; }
.hero-frame .hero-shade { background-image: linear-gradient(to top, rgba(4,6,15,0.55) 0%, rgba(4,6,15,0) 30%); }
.hero-body { left: 90px; width: 440px; }
.hero .hero-body h1 { font-size: 46px; }
.hero .hero-syn { max-width: 440px; font-size: 19px; }
.hero-play { padding: 0 40px; font-size: 20px; }

/* "Trending Now": same type as the other shelf headings (30px bold), with a slow blink. */
.rows .row.row-trending h2 { height: 42px; line-height: 42px; padding-top: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.005em; text-transform: none; color: #fff;
  -webkit-animation: trendBlink 3.2s ease-in-out infinite; animation: trendBlink 3.2s ease-in-out infinite; }
@-webkit-keyframes trendBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes trendBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Stronger pop for the focused ring thumbnail: it comes well forward with a glow, and its name sits on the picture
   (so it never collides with the heading above). */
.rows .row.row-trending .card.focused .art-w { box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 0 3px #fff, 0 0 46px rgba(255,255,255,0.35); }
.rows .row.row-trending .card.focused::before { top: auto; bottom: 14px; max-width: 360px; font-size: 16px; padding: 4px 14px; }
/* Hero text block moved right so it sits close to the preview frame. */
.hero-body { left: 190px; width: 350px; }
.hero .hero-syn { max-width: 350px; }

/* Flank cards keep their own place and size when focused (the ring rules for .card.focused must not move them). */
.rows .row.row-trending .card.flank, .rows .row.row-trending .card.flank.focused { position: absolute; top: 98px; width: 300px; height: 169px; margin: 0; border-radius: 18px; }
.rows .row.row-trending .card.flank-l, .rows .row.row-trending .card.flank-l.focused { left: 215px; right: auto; }
.rows .row.row-trending .card.flank-r, .rows .row.row-trending .card.flank-r.focused { right: 215px; left: auto; }
.rows .row.row-trending .card.flank { -webkit-transform: none; transform: none; }
.rows .row.row-trending .card.flank.focused { -webkit-transform: translateY(-8px) scale(1.12); transform: translateY(-8px) scale(1.12); }

/* Title page action row, and category tiles. */
.detail-actions { display: flex; align-items: center; margin: 6px 0 22px; }
.detail-actions .btn { margin: 0 18px 0 0; }
.cat-card .art-name { display: block; left: 20px; bottom: 14px; right: 20px; font-size: 30px; line-height: 1.1; }
.cat-card .art-name small { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; color: #cfd3dc; text-shadow: none; }

/* ---------- Sidebar performance ----------
   Slide the panel with a transform (the GPU does it) instead of animating its width, keep every font size fixed, and draw the
   focus highlight as an overlay, so a key press never forces a re-layout of the page. */
.side { width: 470px !important; -webkit-transform: translate3d(-358px, 0, 0); transform: translate3d(-358px, 0, 0); will-change: transform;
  -webkit-transition: -webkit-transform 0.2s ease !important; transition: transform 0.2s ease !important;
  background-image: linear-gradient(to right, rgba(6,9,26,0.94) 0%, rgba(6,9,26,0.82) 24%, rgba(6,9,26,0.5) 40%, rgba(6,9,26,0) 100%); }
.side.open { -webkit-transform: none; transform: none;
  background-image: linear-gradient(to right, rgba(16,26,84,0.98) 0%, rgba(16,26,84,0.94) 68%, rgba(16,26,84,0) 100%); }
.side-item.focused, .side-profile.focused { width: 100% !important; margin-left: 0 !important; padding-left: 20px !important; background-color: transparent !important; }
.side-item::after, .side-profile::after { content: ""; position: absolute; left: 8px; right: 42px; top: 0; bottom: 0; border-radius: 41px; background: rgba(47,227,109,0.14); opacity: 0; pointer-events: none;
  -webkit-transition: opacity 0.12s ease; transition: opacity 0.12s ease; }
.side-profile { position: relative; }
.side-item.focused::after, .side-profile.focused::after { opacity: 1; }
.side-label, .side-item.focused .side-label { font-size: 28px !important; -webkit-transition: opacity 0.2s ease, color 0.12s ease !important; transition: opacity 0.2s ease, color 0.12s ease !important; }
.side-name, .side-profile.focused .side-name { font-size: 28px !important; -webkit-transition: color 0.12s ease !important; transition: color 0.12s ease !important; }
.side-sub, .side-profile.focused .side-sub { font-size: 20px !important; -webkit-transition: color 0.12s ease !important; transition: color 0.12s ease !important; }
/* While the sidebar is in use, pause the decorative animations that compete for the GPU. */
.side-open .hero-bg.on, .side-open .live-dot, .side-open .hero-play::after { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

/* ---------- Cheaper rendering ----------
   Large soft shadows are expensive on this TV (every card repainted a blurred halo). Use crisp rings and small, tight shadows. */
.card .art, .rows .row .card .art, .rows .row.row-trending .card .art, .rows .row .card.flank .art { box-shadow: none !important; }
.card.focused .art-w, .card.focused .art-p, .rows .row .card.focused .art-w, .rows .row.row-trending .card.focused .art-w, .rows .row .card.flank.focused .art-w {
  box-shadow: 0 0 0 3px #fff, 0 6px 10px rgba(0,0,0,0.45) !important; }
.hero-frame { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
.promo, .promo.focused { box-shadow: none !important; }
.promo.focused { box-shadow: 0 0 0 4px #fff !important; }
.hero-play { box-shadow: none !important; } .hero-play.focused { box-shadow: 0 0 0 5px #fff !important; }

/* Sidebar: smaller type and no blue. Dark neutral panel, green marker for the current page. */
.side, .side.open { background-image: linear-gradient(to right, rgba(8,8,10,0.96) 0%, rgba(8,8,10,0.9) 64%, rgba(8,8,10,0) 100%); }
.side:not(.open) { background-image: linear-gradient(to right, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.82) 24%, rgba(8,8,10,0.5) 40%, rgba(8,8,10,0) 100%); }
.side-label, .side-item.focused .side-label { font-size: 22px !important; }
.side-name, .side-profile.focused .side-name { font-size: 22px !important; }
.side-sub, .side-profile.focused .side-sub { font-size: 16px !important; }
.side-ico svg { width: 34px; height: 34px; }
.side-item.current::before { background: #2fe36d; }

/* Shelves under Top 10: a little smaller thumbnails (340x191 -> 280x158). The ring and Top 10 keep their size. */
.rows .row:not(.row-trending):not(.row-top) .card, .rows .row:not(.row-trending):not(.row-top) .card.focused { width: 280px; height: 158px; margin-right: 20px; }
.rows .row:not(.row-trending):not(.row-top) .card .art-name { font-size: 22px; left: 16px; bottom: 12px; right: 16px; }
.rows .row:not(.row-trending):not(.row-top) .card .badge { top: 10px; left: 10px; font-size: 12px; padding: 3px 9px; }

/* ---------- Sidebar (final): the panel stays at the left edge so the icon column is visible when it is closed.
   Opening only fades the wider background in and the labels on (opacity changes only: cheap to animate). ---------- */
.side, .side.open { -webkit-transform: none !important; transform: none !important; will-change: auto; background-image: none !important;
  -webkit-transition: none !important; transition: none !important; }
.side::before, .side::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; }
.side::before { width: 170px; opacity: 1; background-image: linear-gradient(to right, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.82) 60%, rgba(8,8,10,0) 100%); }
.side::after { width: 470px; opacity: 0; background-image: linear-gradient(to right, rgba(8,8,10,0.96) 0%, rgba(8,8,10,0.9) 64%, rgba(8,8,10,0) 100%); }
.side.open::before { opacity: 0; }
.side.open::after { opacity: 1; }