/* Faithful replica of the VIP TV Android TV app (1920x1080 layout).
   Colors come from the app's res/values/colors.xml. Every size is written in
   units of --u (1/1920 of the frame width) so the whole thing scales like the real screen.
   Artwork is neutral placeholder gradients on purpose: no third-party logos, posters or photos. */

.tv-screen { overflow: hidden; }
.app-frame { container-type: inline-size; border-radius: 16px; overflow: hidden; }

.app {
  --u: calc(100cqw / 1920);
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #212121; color: #fff;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app h4, .app p { margin: 0; }

/* ---------- Top bar ---------- */
.a-nav {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  height: calc(144 * var(--u)); background: #212121;
  display: flex; align-items: center;
  padding: 0 calc(50 * var(--u)) 0 calc(80 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .5);
}
.a-logo { height: calc(76 * var(--u)); width: auto; }
.a-tabs { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-left: calc(80 * var(--u)); }
.a-pill {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  height: calc(66 * var(--u)); padding: 0 calc(45 * var(--u)); border-radius: 999px;
  display: inline-flex; align-items: center;
  background: #2e2e2e; color: #bebebe;
  font-weight: 700; font-size: calc(28 * var(--u)); line-height: 1; letter-spacing: calc(3 * var(--u));
  transition: background .2s, color .2s;
}
.a-pill:hover:not(.on):not(.a-static) { background: #3b3b3b; color: #fff; }
.a-pill.on { background: #fff; color: #000; height: calc(70 * var(--u)); padding: 0 calc(47 * var(--u)); }
.a-pill.a-static { cursor: default; }
.a-pill:focus-visible { outline: calc(4 * var(--u)) solid #ffa94d; outline-offset: calc(3 * var(--u)); }
.a-actions { margin-left: auto; display: flex; align-items: center; gap: calc(28 * var(--u)); }
.a-circle { width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%; background: #2e2e2e; display: grid; place-items: center; }
.a-circle svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); fill: #dcdcdc; }
.a-avatar { margin-left: calc(16 * var(--u)); background: linear-gradient(135deg, #ff1744, #a4000f); }
.a-avatar svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)); fill: rgba(255, 255, 255, .92); }

/* ---------- Screens ---------- */
.a-screen { position: absolute; inset: 0; display: none; }
.a-screen.on { display: block; animation: aFade .35s ease both; }
@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }

.a-h {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  font-weight: 500; font-size: calc(28 * var(--u)); line-height: 1.2; letter-spacing: calc(3 * var(--u));
}
.a-row { position: absolute; left: calc(72 * var(--u)); top: calc(var(--y) * var(--u)); display: flex; gap: calc(24 * var(--u)); }
.a-row-hl { left: calc(120 * var(--u)); }
.a-card { flex: none; width: calc(520 * var(--u)); }
.a-card b { display: block; margin-top: calc(35 * var(--u)); font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.2; }
.a-card em {
  display: block; margin-top: calc(8 * var(--u)); font-style: normal; font-weight: 700;
  font-size: calc(24 * var(--u)); line-height: 1.3; color: #9a9a9a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Artwork placeholders */
.a-art { position: relative; height: calc(292 * var(--u)); border-radius: calc(20 * var(--u)); overflow: hidden; }
.a-art::after { /* subtle "video" play glyph */
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(84 * var(--u)); height: calc(96 * var(--u));
  translate: -35% -50%; background: rgba(255, 255, 255, .16); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.art-1 { background: radial-gradient(circle at 62% 26%, rgba(255, 255, 255, .35), transparent 24%), linear-gradient(135deg, #24308a, #0a0d2b 72%); }
.art-2 { background: repeating-linear-gradient(115deg, rgba(0, 220, 190, .55) 0 calc(7 * var(--u)), transparent calc(7 * var(--u)) calc(70 * var(--u))), repeating-linear-gradient(115deg, transparent 0 calc(35 * var(--u)), rgba(255, 60, 70, .5) calc(35 * var(--u)) calc(41 * var(--u)), transparent calc(41 * var(--u)) calc(70 * var(--u))), #0d0d0f; }
.art-3 { background: radial-gradient(circle at 30% 20%, rgba(255, 220, 160, .45), transparent 40%), linear-gradient(135deg, #e89a45, #7a3510); }
.art-4 { background: linear-gradient(180deg, #f6c76e, #e0662b 55%, #4a2a3a); }
.art-5 { background: radial-gradient(circle at 28% 28%, rgba(255, 255, 255, .28), transparent 30%), linear-gradient(135deg, #d21f26, #4b0a10 62%, #0f0f10); }
.art-5::before { content: "FIGHT NIGHT"; position: absolute; left: calc(28 * var(--u)); bottom: calc(26 * var(--u)); z-index: 1; font: italic 900 calc(84 * var(--u))/1 Roboto, sans-serif; letter-spacing: calc(1 * var(--u)); color: rgba(255, 255, 255, .92); text-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .35); }
.art-5::after { display: none; }
.art-6 { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 calc(40 * var(--u)), transparent calc(40 * var(--u)) calc(80 * var(--u))), linear-gradient(180deg, #5c9a4e, #2b5c2a); }
.art-7 { background: linear-gradient(135deg, #1a1a1c, #5b5f66); }
.art-8 { background: #2e2e2e; }
.art-8::after, .art-6::after, .art-7::after { display: none; }

.a-feature { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(598 * var(--u)); height: calc(368 * var(--u)); border-radius: calc(24 * var(--u)); overflow: hidden; box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .55); }
.a-feature .a-art { height: 100%; border-radius: 0; }
.a-badge { position: absolute; z-index: 2; top: calc(14 * var(--u)); left: calc(14 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: #484848; color: #fff; font-weight: 700; font-size: calc(24 * var(--u)); line-height: 1.3; }
.a-row-hl .a-badge { font-size: calc(22 * var(--u)); letter-spacing: calc(1 * var(--u)); }

/* Recent live channels: neutral channel tiles */
.a-chan { height: calc(292 * var(--u)); border-radius: calc(20 * var(--u)); background: #2e2e2e; display: flex; flex-direction: column; align-items: center; padding-top: calc(26 * var(--u)); }
.a-chan i { font-style: normal; font-weight: 800; font-size: calc(96 * var(--u)); line-height: 1; letter-spacing: calc(2 * var(--u)); }
.a-chan span { margin-top: calc(10 * var(--u)); font-weight: 700; font-size: calc(26 * var(--u)); letter-spacing: calc(3 * var(--u)); color: #bebebe; }

/* ---------- Live guide ---------- */
.a-chips { position: absolute; left: calc(38 * var(--u)); top: calc(var(--y) * var(--u)); display: flex; align-items: center; gap: calc(20 * var(--u)); white-space: nowrap; }
.a-chips span { display: inline-flex; align-items: center; height: calc(66 * var(--u)); padding: 0 calc(27 * var(--u)); border-radius: 999px; background: #2e2e2e; color: #f0f0f0; font-weight: 500; font-size: calc(26 * var(--u)); }
.a-chips span.on { height: calc(68 * var(--u)); background: #fff; color: #000; }
.a-times { position: absolute; left: calc(212 * var(--u)); top: calc(var(--y) * var(--u)); display: flex; }
.a-times span { flex: none; width: calc(232 * var(--u)); font-weight: 500; font-size: calc(26 * var(--u)); color: #dcdcdc; }
.a-guide { position: absolute; left: calc(37 * var(--u)); right: calc(36 * var(--u)); top: calc(var(--y) * var(--u)); }
.a-grow { display: flex; height: calc(112 * var(--u)); margin-bottom: calc(2 * var(--u)); overflow: hidden; }
.a-cell { flex: none; width: calc(158 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #282828; }
.a-cell i { font-style: normal; font-weight: 800; font-size: calc(19 * var(--u)); line-height: 1; padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(135deg, #ff8a1f, #d9530e); color: #1a1206; letter-spacing: calc(1 * var(--u)); }
.a-grow:nth-child(2) .a-cell i { background: linear-gradient(135deg, #3b82f6, #1e3a8a); color: #fff; }
.a-grow:nth-child(3) .a-cell i { background: linear-gradient(135deg, #a855f7, #581c87); color: #fff; }
.a-grow:nth-child(4) .a-cell i { background: linear-gradient(135deg, #ef4444, #7f1d1d); color: #fff; }
.a-grow:nth-child(5) .a-cell i { background: linear-gradient(135deg, #22c55e, #14532d); color: #fff; }
.a-cell span { margin-top: calc(8 * var(--u)); font-weight: 700; font-size: calc(24 * var(--u)); color: #bebebe; }
.a-prog { flex: 0 0 calc(var(--w) * 232 * var(--u) - 2 * var(--u)); margin-left: calc(2 * var(--u)); padding: 0 calc(20 * var(--u)); display: flex; flex-direction: column; justify-content: center; background: #3d3d3d; overflow: hidden; }
.a-prog:last-child { flex: 1 1 0; min-width: 0; }
.a-prog b { font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.2; white-space: nowrap; }
.a-prog small { margin-top: calc(6 * var(--u)); font-weight: 500; font-size: calc(22 * var(--u)); color: #9a9a9a; }

/* ---------- DVR ---------- */
.a-dvr { position: absolute; left: 50%; top: calc(430 * var(--u)); translate: -50% 0; width: calc(900 * var(--u)); text-align: center; color: #bdbdbd; font-size: calc(28 * var(--u)); line-height: 1.6; }
.a-dvr p + p { margin-top: calc(40 * var(--u)); }