/* ============================================================================
   Tv.Sales.Travel — VIDAA (Hisense) premium 10-foot UI
   Design system: cinematic navy + warm gold + cream. Cormorant / DM Sans.
   All motion is transform/opacity only (GPU) for 60fps on TV webkit.
   Root font-size is set by JS to (viewport/1920 * 10)px so 1rem ≈ 10px @1080p
   and scales cleanly on 720p-reporting panels (VIDAA projector gotcha).
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#05080e;
  --bg-2:#0a1120;
  --bg-3:#0f1a2e;
  --ink:#03060b;

  /* brand */
  --gold:#d4af37;
  --gold-hi:#f0d68a;
  --gold-soft:#e6c55c;
  --gold-deep:#a9821f;
  --gold-line:rgba(212,175,55,.34);
  --gold-glow:rgba(212,175,55,.55);

  /* text */
  --cream:#f7f2e8;
  --text:#e9eff7;
  --muted:#93a4b8;
  --muted-2:#63748a;

  /* glass */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-3:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);

  --radius:2rem;
  --radius-sm:1.2rem;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);

  /* dark separator gap + gold ring → focus is legible on ANY surface, even gold */
  --focus-ring:0 0 0 .2rem var(--ink), 0 0 0 .48rem var(--gold), 0 0 0 .74rem rgba(212,175,55,.22);
  --focus-shadow:0 2rem 5.5rem rgba(0,0,0,.65), 0 0 7rem rgba(212,175,55,.22);

  --font-ui:'DM Sans','SF Pro Display',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Cormorant Garamond','Playfair Display',Georgia,'Times New Roman',serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:10px;-webkit-text-size-adjust:100%}
/* Лайнинговые цифры везде: старостильные цифры Cormorant (0≈o, 1≈ı) нечитаемы на ТВ */
body{font-variant-numeric:lining-nums}
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--ink);
  width:100vw;height:100vh;overflow:hidden;
  position:fixed;inset:0;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  line-height:1.3;
  letter-spacing:.01em;
}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;font-variant-numeric:lining-nums tabular-nums}
::-webkit-scrollbar{width:0;height:0;display:none}

/* Cinematic backdrop — layered radials + vignette, sits behind everything */
#backdrop{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120rem 80rem at 78% -10%, rgba(28,54,96,.55), transparent 60%),
    radial-gradient(90rem 70rem at 8% 108%, rgba(40,30,70,.40), transparent 55%),
    radial-gradient(60rem 60rem at 92% 96%, rgba(120,92,32,.18), transparent 60%),
    linear-gradient(160deg,#070b14 0%, #05080e 42%, #04070d 100%);
}
#backdrop::after{ /* subtle top gold horizon line */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(212,175,55,.05), transparent 22%);
  mix-blend-mode:screen;
}

/* Screens ------------------------------------------------------------------ */
.screen{
  position:fixed;inset:0;z-index:1;
  display:none;flex-direction:column;
  opacity:0;transform:translateY(1.2rem) scale(.996);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.screen.active{display:flex;opacity:1;transform:none}
.screen.leaving{opacity:0;transform:translateY(-.8rem) scale(.994)}

/* Focus primitive: any [data-focus] element ------------------------------- */
[data-focus]{outline:none;cursor:pointer;transition:transform .26s var(--ease), box-shadow .26s var(--ease), background .26s var(--ease), border-color .26s var(--ease)}
.focused{position:relative;z-index:5}

/* ==========================================================================
   SPLASH
   ========================================================================== */
#splash{align-items:center;justify-content:center;text-align:center}
.splash-logo{width:16rem;height:16rem;border-radius:3.6rem;margin-bottom:3.4rem;
  box-shadow:0 2.4rem 6rem rgba(0,0,0,.6), 0 0 8rem rgba(212,175,55,.14);
  animation:logoIn .9s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:scale(.86) translateY(1rem)}to{opacity:1;transform:none}}
.splash-mark{font-family:var(--font-display);font-weight:500;font-size:8.4rem;letter-spacing:.02em;line-height:1;filter:drop-shadow(0 1rem 4rem rgba(0,0,0,.6))}
.splash-mark .tv{color:var(--gold);font-style:italic}
.splash-mark .rest{color:var(--cream)}
.splash-tag{margin-top:1.6rem;font-size:1.9rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);font-weight:300;padding-left:.42em}
.splash-ring{margin-top:5rem;width:4.4rem;height:4.4rem;border-radius:50%;border:.28rem solid rgba(255,255,255,.12);border-top-color:var(--gold);animation:spin .9s linear infinite}
.splash-hint{margin-top:2.4rem;font-size:1.5rem;color:var(--muted-2);min-height:1.8rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   TOP BAR (shared chrome for Live / Guide / VOD)
   ========================================================================== */
.topbar{
  display:flex;align-items:center;gap:2.4rem;
  padding:2.8rem 5.4rem 1.6rem;
  position:relative;z-index:6;flex:none;
}
.brand{font-family:var(--font-display);font-weight:500;font-size:3.4rem;line-height:1;letter-spacing:.01em;white-space:nowrap}
.brand .tv{color:var(--gold);font-style:italic}
.brand .rest{color:var(--cream)}
.topbar-spacer{flex:1}
.status-pill{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.8rem;border-radius:999px;
  background:var(--glass);border:.1rem solid var(--line);
  font-size:1.6rem;color:var(--muted);backdrop-filter:blur(1.2rem)
}
.status-pill .dot{width:1rem;height:1rem;border-radius:50%;background:var(--gold);box-shadow:0 0 1.2rem var(--gold-glow)}
.status-pill.warn .dot{background:#e9a23b;box-shadow:0 0 1.2rem rgba(233,162,59,.6)}
.status-pill.bad .dot{background:#e5484d;box-shadow:0 0 1.2rem rgba(229,72,77,.6)}
.clock{font-size:2.2rem;color:var(--cream);font-weight:500;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.clock .sep{opacity:.5;margin:0 .1em}

/* Section tabs (Live / Guide / Cinema) */
.tabs{display:flex;gap:1rem;margin-left:1rem}
.tab{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 2.2rem;border-radius:999px;font-size:1.8rem;font-weight:500;color:var(--muted);
  border:.1rem solid transparent;
}
.tab .ic{width:2.2rem;height:2.2rem;opacity:.8}
.tab.sel{color:var(--cream);background:var(--glass);border-color:var(--line)}
.tab.focused{background:var(--gold);color:var(--ink);transform:translateY(-.3rem) scale(1.04);box-shadow:var(--focus-ring)}
.tab.focused .ic{opacity:1}

/* ==========================================================================
   CATEGORY CHIPS (Live) — horizontally pannable strip
   ========================================================================== */
.chips-wrap{overflow:hidden;flex:none;position:relative;z-index:6;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.4rem,#000 calc(100% - 3.4rem),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.4rem,#000 calc(100% - 3.4rem),transparent)}
.chips{display:flex;gap:1.2rem;padding:1rem 5.4rem 1.4rem;width:max-content;
  transition:transform .3s var(--ease)}
.chip{
  display:flex;align-items:center;gap:.9rem;white-space:nowrap;
  padding:1.05rem 2.1rem;border-radius:999px;font-size:1.75rem;font-weight:500;
  color:var(--muted);background:var(--glass);border:.1rem solid var(--line);
}
.chip .ic{width:2rem;height:2rem;opacity:.85}
.chip.sel{color:var(--cream);border-color:var(--gold-line);background:rgba(212,175,55,.10)}
.chip.focused{color:var(--ink);background:var(--gold);border-color:var(--gold);transform:translateY(-.35rem) scale(1.05);box-shadow:var(--focus-ring)}
.chip.focused .ic{opacity:1}
.chip .cnt{font-size:1.35rem;opacity:.6;font-variant-numeric:lining-nums tabular-nums}

/* ==========================================================================
   CHANNEL GRID (Live)
   ========================================================================== */
.grid-wrap{flex:1;overflow:hidden;position:relative;z-index:5}
.grid-scroll{padding:1.4rem 5.4rem 6rem;transition:transform .34s var(--ease)}
.grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;
}
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(155deg, var(--glass-2), var(--glass));
  border:.1rem solid var(--line);
  padding:2rem;min-height:19rem;
  display:flex;flex-direction:column;
  box-shadow:inset 0 .1rem 0 rgba(255,255,255,.05);
}
.tile::before{ /* soft inner top sheen */
  content:"";position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);pointer-events:none
}
.tile.focused{
  transform:translateY(-.6rem) scale(1.055);
  border-color:var(--gold);
  background:linear-gradient(155deg, rgba(212,175,55,.14), var(--glass-2));
  box-shadow:var(--focus-ring), var(--focus-shadow);
}
.tile-top{display:flex;align-items:center;gap:1.4rem}
.tile-num{
  font-size:1.7rem;font-weight:700;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;
  min-width:4.6rem;height:3.4rem;padding:0 1rem;border-radius:.9rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,55,.12);border:.1rem solid var(--gold-line)
}
.tile-logo{
  flex:1;height:6.6rem;display:flex;align-items:center;justify-content:center;
  margin:.4rem 0 .2rem
}
.tile-logo img{max-height:6.6rem;max-width:100%;object-fit:contain;filter:drop-shadow(0 .6rem 1.4rem rgba(0,0,0,.5))}
.tile-logo .fallback{font-family:var(--font-display);font-size:2.4rem;color:var(--cream);opacity:.85;text-align:center;line-height:1.1;padding:0 .5rem}
.mono{width:6.4rem;height:6.4rem;border-radius:1.5rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2.8rem;font-weight:600;color:var(--gold-hi);background:linear-gradient(160deg,rgba(212,175,55,.16),rgba(212,175,55,.05));border:.1rem solid var(--gold-line);letter-spacing:.02em}
.tile-name{font-size:1.85rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}
.tile-epg{margin-top:1rem}
.tile-epg .now{font-size:1.45rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.7rem}
.tile-epg .now b{color:var(--gold-soft);font-weight:600}
.prog{height:.4rem;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.prog > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));transition:width .6s var(--ease)}
.tile .fav-star{position:absolute;top:1.6rem;right:1.6rem;width:2.4rem;height:2.4rem;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.tile.is-fav .fav-star{opacity:1;transform:none}
.tile .fav-star svg{width:100%;height:100%;fill:var(--gold);filter:drop-shadow(0 0 .6rem var(--gold-glow))}
.tile.locked .tile-logo{filter:blur(.4rem) grayscale(.4);opacity:.5}
.tile .lock-badge{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.tile.locked .lock-badge{display:flex}
.tile .lock-badge svg{width:4.4rem;height:4.4rem;fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.9;filter:drop-shadow(0 0 1rem rgba(0,0,0,.6))}

.empty-note{padding:8rem;text-align:center;color:var(--muted);font-size:2.2rem}

/* Hint bar (bottom, contextual remote legend) */
.hintbar{
  position:fixed;left:0;right:0;bottom:0;z-index:7;
  display:flex;gap:3rem;align-items:center;justify-content:center;
  padding:1.6rem;font-size:1.5rem;color:var(--muted-2);
  background:linear-gradient(0deg, rgba(3,6,11,.92), transparent);
  pointer-events:none
}
.hintbar .k{display:inline-flex;align-items:center;gap:.7rem}
.hintbar .key{
  min-width:2.6rem;height:2.6rem;padding:0 .8rem;border-radius:.7rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-2);border:.1rem solid var(--line-2);color:var(--cream);font-size:1.3rem;font-weight:600
}
.hintbar .key.red{background:rgba(229,72,77,.22);border-color:rgba(229,72,77,.5)}
.hintbar .key.green{background:rgba(76,201,120,.2);border-color:rgba(76,201,120,.5)}
.hintbar .key.gold{background:rgba(212,175,55,.2);border-color:var(--gold-line);color:var(--gold-hi)}

/* ==========================================================================
   PLAYER
   ========================================================================== */
#player{background:#000;z-index:20}
#video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain;z-index:1}
.player-buffer{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:6rem;height:6rem;border-radius:50%;border:.34rem solid rgba(255,255,255,.14);border-top-color:var(--gold);
  animation:spin .9s linear infinite;display:none
}
#player.buffering .player-buffer{display:block}

/* On-screen player controls (cursor-friendly; appear with OSD) */
.pctl{position:absolute;top:4rem;left:50%;z-index:8;display:flex;gap:1.2rem;
  transform:translate(-50%,-2rem);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
#player.osd-on .pctl{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pbtn{padding:1.2rem 2.4rem;border-radius:999px;font-size:1.9rem;font-weight:500;color:var(--cream);
  background:rgba(6,10,18,.72);border:.1rem solid var(--line-2);backdrop-filter:blur(1.4rem);
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.pbtn:hover,.pbtn.focused{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:scale(1.05)}
.play-err{position:absolute;top:50%;left:50%;z-index:8;transform:translate(-50%,-50%);display:none;
  padding:1.8rem 3.4rem;border-radius:1.4rem;background:rgba(6,10,18,.92);border:.1rem solid var(--gold-line);
  color:var(--cream);font-size:2.1rem;text-align:center;max-width:60rem}
.play-err.show{display:block}

/* Zap number entry */
.zap-entry{
  position:absolute;top:5rem;right:6rem;z-index:8;display:none;
  font-family:var(--font-display);font-size:8rem;font-weight:600;color:var(--cream);
  background:rgba(3,6,11,.6);border:.1rem solid var(--gold-line);border-radius:1.6rem;
  padding:1rem 3rem;letter-spacing:.1em;backdrop-filter:blur(1.4rem);
  box-shadow:0 2rem 5rem rgba(0,0,0,.6)
}
.zap-entry.show{display:block;animation:pop .18s var(--ease)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}

/* OSD info panel (bottom) */
.osd{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  padding:8rem 6rem 5rem;
  background:linear-gradient(0deg, rgba(3,6,11,.94) 8%, rgba(3,6,11,.5) 60%, transparent);
  transform:translateY(110%);transition:transform .4s var(--ease);
  display:flex;align-items:flex-end;gap:3.4rem
}
#player.osd-on .osd{transform:none}
.osd-logo{
  width:13rem;height:9rem;flex:none;border-radius:1.4rem;
  background:var(--glass-2);border:.1rem solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:1.2rem
}
.osd-logo img{max-width:100%;max-height:100%;object-fit:contain}
.osd-logo .fallback{font-family:var(--font-display);font-size:2rem;color:var(--cream);text-align:center}
.osd-main{flex:1;min-width:0}
.osd-line1{display:flex;align-items:baseline;gap:1.6rem}
.osd-num{font-size:2.4rem;font-weight:700;color:var(--gold);font-variant-numeric:lining-nums tabular-nums}
.osd-name{font-family:var(--font-display);font-size:4.2rem;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osd-now{font-size:2.4rem;color:var(--text);margin-top:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osd-prog{display:flex;align-items:center;gap:1.6rem;margin-top:1.4rem;max-width:70%}
.osd-prog .bar{flex:1;height:.6rem;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.osd-prog .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
.osd-prog .time{font-size:1.6rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.osd-next{font-size:1.9rem;color:var(--muted);margin-top:1.2rem}
.osd-next b{color:var(--gold-soft);font-weight:600}
.osd-clock{position:absolute;right:6rem;bottom:5rem;font-size:2.6rem;color:var(--cream);
  font-weight:500;font-variant-numeric:lining-nums tabular-nums;opacity:.9}
.osd-clock .sep{opacity:.5;margin:0 .1em}

/* Channel list overlay (in player, OK key) */
.side-list{
  position:absolute;top:0;left:0;bottom:0;z-index:9;width:46rem;
  background:linear-gradient(90deg, rgba(4,7,13,.97), rgba(6,10,18,.9));
  border-right:.1rem solid var(--gold-line);
  transform:translateX(-102%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;padding:3rem 0 2rem
}
#player.list-on .side-list{transform:none}
.side-list h3{font-family:var(--font-display);font-size:2.8rem;color:var(--cream);padding:0 3rem 1.8rem;font-weight:600}
.side-scroll{flex:1;overflow:hidden}
.side-inner{transition:transform .3s var(--ease)}
.side-item{
  display:flex;align-items:center;gap:1.8rem;padding:1.5rem 3rem;border-left:.35rem solid transparent
}
.side-item .n{font-size:1.7rem;color:var(--gold);font-weight:700;min-width:4.4rem;font-variant-numeric:lining-nums tabular-nums}
.side-item .lg{width:5rem;height:3.4rem;flex:none;display:flex;align-items:center;justify-content:center}
.side-item .lg img{max-width:100%;max-height:100%;object-fit:contain}
.side-item .nm{font-size:2rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.side-item.playing{border-left-color:var(--gold-soft)}
.side-item.playing .nm{color:var(--gold-hi)}
.side-item.focused{background:rgba(212,175,55,.14);border-left-color:var(--gold)}

/* ==========================================================================
   EPG GUIDE
   ========================================================================== */
#guide{z-index:10}
.guide-head{display:flex;align-items:baseline;gap:1.8rem;padding:.2rem 5.4rem 1.6rem;flex:none;position:relative;z-index:6}
.guide-head .gh-k{font-family:var(--font-display);font-size:2.8rem;font-weight:600;color:var(--cream)}
.guide-head .gh-d{font-size:1.7rem;color:var(--muted);letter-spacing:.05em}
.guide-body{flex:1;overflow:hidden;padding:0 5.4rem 8rem}
.guide-rows{transition:transform .3s var(--ease)}
.grow{display:flex;gap:1.6rem;align-items:stretch;margin-bottom:1.4rem;height:8.4rem}
.grow .gch{
  width:26rem;flex:none;border-radius:var(--radius-sm);
  background:var(--glass);border:.1rem solid var(--line);
  display:flex;align-items:center;gap:1.4rem;padding:0 1.8rem
}
.grow .gch .n{font-size:1.6rem;color:var(--gold);font-weight:700;min-width:4rem}
.grow .gch .lg{width:4.4rem;height:3rem;display:flex;align-items:center;justify-content:center}
.grow .gch .lg img{max-width:100%;max-height:100%;object-fit:contain}
.grow .gch .nm{font-size:1.75rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
.gprogs{flex:1;overflow:hidden;position:relative}
.gprogs.can-scroll{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 5rem),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 5rem),transparent)}
.gprogs.can-scroll.off0{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5rem,#000 calc(100% - 5rem),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 5rem,#000 calc(100% - 5rem),transparent)}
.gtrack{display:flex;gap:1rem;height:100%;width:max-content;transition:transform .32s var(--ease)}
.gprog{
  flex:none;border-radius:var(--radius-sm);background:var(--glass);border:.1rem solid var(--line);
  padding:1.2rem 1.8rem;display:flex;flex-direction:column;justify-content:center;min-width:22rem
}
.gprog .t{font-size:1.4rem;color:var(--muted-2);font-variant-numeric:lining-nums tabular-nums}
.gprog .p{font-size:1.85rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.3rem}
.gprog.now{border-color:var(--gold-line);background:rgba(212,175,55,.10)}
.gprog.now .p{color:var(--gold-hi)}
.grow.focused .gch{border-color:var(--gold);background:rgba(212,175,55,.14);box-shadow:var(--focus-ring)}
.grow.focused{transform:scale(1.008)}

/* ==========================================================================
   VOD / CINEMA
   ========================================================================== */
#vod{z-index:10}
.vod-crumbs{padding:0 5.4rem 1.4rem;font-size:1.9rem;color:var(--muted)}
.vod-crumbs b{color:var(--cream);font-family:var(--font-display);font-size:2.6rem;font-weight:600}
.vod-wrap{flex:1;overflow:hidden;padding:.6rem 5.4rem 7rem}
.vod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2.2rem;transition:transform .32s var(--ease)}
.poster.vod-more .ph{font-size:2.4rem;color:var(--gold-soft);letter-spacing:.12em;text-transform:uppercase}
.vod-sheet{
  display:none;position:absolute;inset:7.6rem 0 4.6rem;padding:2rem 5.4rem 3rem;z-index:12;
  background:linear-gradient(160deg, rgba(7,11,20,.96), rgba(5,8,14,.98))
}
.vod-sheet.show{display:block}
.vod-sheet-inner{display:flex;gap:4.8rem;height:100%;align-items:flex-start}
.vod-sheet-poster{
  width:32rem;flex:0 0 32rem;aspect-ratio:2/3;border-radius:1.6rem;overflow:hidden;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:.1rem solid var(--gold-line)
}
.vod-sheet-poster img{width:100%;height:100%;object-fit:cover}
.vod-sheet-poster span{display:flex;height:100%;align-items:center;justify-content:center;color:var(--gold-soft);letter-spacing:.3em}
.vod-sheet-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.4rem;max-height:100%}
.vod-sheet-kicker{font-size:1.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.vod-sheet-title{font-family:var(--font-display);font-size:4.4rem;font-weight:600;color:var(--cream);line-height:1.1}
.vod-sheet-meta{font-size:1.9rem;color:var(--muted)}
.vod-sheet-syn{font-size:2rem;color:var(--text);line-height:1.45;max-height:18rem;overflow:hidden}
.vod-sheet-actions{display:flex;gap:1.6rem;margin-top:.6rem}
.vod-btn{
  border:0;cursor:pointer;font-size:1.9rem;font-weight:600;padding:1.3rem 3.2rem;border-radius:999px
}
.vod-btn.gold{background:linear-gradient(180deg,#ecd28a,#d4af37);color:#050d18}
.vod-btn.ghost{background:transparent;color:var(--cream);border:.1rem solid var(--gold-line)}
.vod-btn.focused{transform:scale(1.06);box-shadow:0 0 0 .2rem #03060b,0 0 0 .48rem var(--gold)}
.vod-eps{margin-top:1rem;overflow:auto;flex:1;min-height:0}
.vod-eps-h{font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.8rem}
.vod-ep{
  display:flex;align-items:center;gap:1.6rem;padding:1.2rem 1.6rem;margin-bottom:.6rem;
  border-radius:1.2rem;background:rgba(255,255,255,.045);border:.1rem solid var(--line)
}
.vod-ep .n{width:3.6rem;color:var(--gold);font-weight:700;font-size:1.8rem}
.vod-ep .t{color:var(--cream);font-size:1.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vod-ep.focused{background:var(--gold);color:#03060b}
.vod-ep.focused .n,.vod-ep.focused .t{color:#03060b}
.poster{
  position:relative;border-radius:1.6rem;overflow:hidden;aspect-ratio:2/3;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:.1rem solid var(--line)
}
.poster img{width:100%;height:100%;object-fit:cover}
.poster .cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.4rem 1.2rem;
  background:linear-gradient(0deg, rgba(3,6,11,.95), transparent);
  font-size:1.6rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.poster.cat .cap{font-family:var(--font-display);font-size:2rem;font-weight:600;text-align:center;padding:1.4rem}
.poster.noimg{display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.poster.noimg .ph{font-family:var(--font-display);font-size:2.2rem;color:var(--cream);opacity:.85}
.poster .yr{position:absolute;top:1.2rem;left:1.2rem;padding:.4rem 1rem;border-radius:.7rem;background:rgba(3,6,11,.7);font-size:1.3rem;color:var(--gold-soft);font-weight:600}
.poster .age{position:absolute;top:1.2rem;right:1.2rem;padding:.4rem .9rem;border-radius:.7rem;background:rgba(229,72,77,.85);font-size:1.3rem;color:#fff;font-weight:700}
.poster.focused{transform:translateY(-.7rem) scale(1.06);border-color:var(--gold);box-shadow:var(--focus-ring),var(--focus-shadow);z-index:5}

/* ==========================================================================
   ACTIVATION
   ========================================================================== */
#activate{align-items:center;justify-content:center}
.act-card{
  width:100rem;max-width:94vw;border-radius:3rem;padding:5rem 4.4rem;
  background:linear-gradient(160deg, rgba(15,26,46,.82), rgba(6,10,18,.86));
  border:.1rem solid var(--gold-line);
  box-shadow:0 4rem 10rem rgba(0,0,0,.6), inset 0 .1rem 0 rgba(255,255,255,.06);
  backdrop-filter:blur(2rem);text-align:center
}
.act-kicker{font-size:1.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft);font-weight:500}
.act-title{font-family:var(--font-display);font-size:5rem;font-weight:600;color:var(--cream);margin-top:1.4rem}
.act-sub{font-size:2rem;color:var(--muted);margin-top:1.2rem;line-height:1.5}
.code-boxes{display:flex;gap:.8rem;justify-content:center;margin:3.6rem 0 1rem;max-width:100%;flex-wrap:nowrap}
.code-boxes .grp{display:flex;gap:.8rem;flex:0 1 auto;min-width:0}
.code-boxes .sep{align-self:center;color:var(--muted-2);font-size:2.6rem;padding:0 .2rem}
.cbox{
  width:5.4rem;height:7.2rem;border-radius:1.2rem;flex:0 1 auto;
  background:var(--glass);border:.15rem solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:4rem;font-weight:600;color:var(--cream);
  font-variant-numeric:lining-nums tabular-nums
}
.cbox.filled{border-color:var(--gold-line);background:rgba(212,175,55,.08)}
.cbox.cur{border-color:var(--gold);box-shadow:var(--focus-ring);animation:caret 1.1s ease-in-out infinite}
@keyframes caret{50%{border-color:rgba(212,175,55,.4)}}
.act-msg{min-height:2.6rem;margin-top:1.4rem;font-size:1.9rem;color:var(--muted)}
.act-msg.err{color:#e97b7e}
.act-msg.ok{color:#7bd39a}

/* On-screen numeric keypad */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;width:38rem;margin:3rem auto 0}
.key-btn{
  height:7.4rem;border-radius:1.4rem;background:var(--glass);border:.1rem solid var(--line);
  font-size:3.2rem;font-weight:600;color:var(--cream);font-family:var(--font-display)
}
.key-btn.wide{grid-column:span 1}
.key-btn.act{color:var(--gold-hi)}
.key-btn.focused{background:var(--gold);color:var(--ink);transform:scale(1.06);box-shadow:var(--focus-ring)}
.act-foot{margin-top:2.8rem;font-size:1.6rem;color:var(--muted-2)}
.act-foot .id{color:var(--muted);font-family:var(--font-display);letter-spacing:.06em}

/* ==========================================================================
   SETTINGS
   ========================================================================== */
#settings{align-items:center;justify-content:flex-start;padding-top:6rem}
.set-wrap{width:96rem;max-width:94vw;margin:0 auto}
.set-title{font-family:var(--font-display);font-size:4.6rem;font-weight:600;color:var(--cream);padding:0 1rem 2.4rem}
.set-card{
  border-radius:2rem;background:var(--glass);border:.1rem solid var(--line);
  padding:.6rem 0;margin-bottom:2rem;overflow:hidden
}
.set-row{
  display:flex;align-items:center;gap:2rem;padding:2.4rem 3rem;border-bottom:.1rem solid rgba(255,255,255,.05)
}
.set-row:last-child{border-bottom:none}
.set-row .ic{width:2.8rem;height:2.8rem;flex:none;opacity:.85}
.set-row .lbl{flex:1}
.set-row .lbl .t{font-size:2.2rem;color:var(--text)}
.set-row .lbl .d{font-size:1.6rem;color:var(--muted-2);margin-top:.4rem}
.set-row .val{font-size:2rem;color:var(--gold-soft);font-weight:500;font-family:var(--font-display)}
.set-row.focused{background:rgba(212,175,55,.12);box-shadow:inset 0 0 0 .18rem var(--gold)}
.set-row.action .val{color:var(--cream)}

/* ==========================================================================
   MODAL / PIN / DIALOG
   ========================================================================== */
.modal-mask{
  position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(3,6,11,.7);backdrop-filter:blur(.8rem)
}
.modal-mask.show{display:flex}
.modal{
  width:56rem;max-width:90vw;border-radius:2.6rem;padding:4.4rem 4.6rem;text-align:center;
  background:linear-gradient(160deg, rgba(15,26,46,.94), rgba(6,10,18,.96));
  border:.1rem solid var(--gold-line);box-shadow:0 4rem 10rem rgba(0,0,0,.7);
  transform:scale(.94);transition:transform .28s var(--ease)
}
.modal-mask.show .modal{transform:none}
.modal .m-ic{width:6rem;height:6rem;margin:0 auto 1.8rem}
.modal .m-ic svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.5}
.modal h3{font-family:var(--font-display);font-size:3.4rem;font-weight:600;color:var(--cream)}
.modal p{font-size:1.9rem;color:var(--muted);margin-top:1.2rem;line-height:1.5}
.pin-dots{display:flex;gap:1.6rem;justify-content:center;margin:3rem 0}
.pin-dots .pd{width:2.2rem;height:2.2rem;border-radius:50%;border:.2rem solid var(--line-2)}
.pin-dots .pd.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 1.2rem var(--gold-glow)}
.modal-btns{display:flex;gap:1.6rem;justify-content:center;margin-top:2.4rem}
.mbtn{
  padding:1.4rem 3rem;border-radius:999px;font-size:2rem;font-weight:500;
  background:var(--glass-2);border:.1rem solid var(--line-2);color:var(--text)
}
.mbtn.primary{background:rgba(212,175,55,.14);border-color:var(--gold-line);color:var(--gold-hi)}
.mbtn.focused{background:var(--gold);color:var(--ink);transform:scale(1.05);box-shadow:var(--focus-ring)}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:9rem;transform:translateX(-50%) translateY(2rem);
  z-index:50;padding:1.4rem 2.8rem;border-radius:999px;
  background:rgba(6,10,18,.94);border:.1rem solid var(--gold-line);
  font-size:1.8rem;color:var(--cream);opacity:0;transition:opacity .3s,transform .3s;
  box-shadow:0 2rem 5rem rgba(0,0,0,.6);pointer-events:none;white-space:nowrap
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* Utility */
.hidden{display:none !important}

/* ==========================================================================
   LITE MODE (html.lite) — TV-class browsers (Yandex/webOS/Tizen/VIDAA).
   backdrop-filter + large multi-shadows + radial backdrops are the #1 cause of
   jank on TV silicon. Drop them to flat, opaque surfaces and near-instant motion.
   Kept legible: focus stays a solid gold ring, just without glow/scale-heavy work.
   ========================================================================== */
.lite *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  transition-duration:.12s !important;
  animation-duration:.6s !important;
}
/* Flat cinematic backdrop — single cheap gradient, no radials, no blend layer */
.lite #backdrop{background:linear-gradient(160deg,#0a1120 0%,#05080e 60%,#04070d 100%)}
.lite #backdrop::after{display:none}
/* Opaque surfaces instead of translucent glass (translucency forces recomposite) */
.lite .status-pill,.lite .chip,.lite .tab.sel,.lite .set-card,.lite .gch,.lite .gprog,
.lite .side-list,.lite .osd-logo,.lite .key-btn,.lite .cbox,.lite .mbtn,.lite .pbtn{
  background:#0e1626 !important;border-color:rgba(212,175,55,.28) !important
}
.lite .tile{background:#0c1322 !important;border-color:rgba(255,255,255,.10) !important}
.lite .tile::before{display:none}
.lite .act-card,.lite .modal{background:#0c1524 !important;border-color:var(--gold-line) !important}
.lite .modal-mask{background:rgba(3,6,11,.86) !important}
/* Focus: solid gold ring + slightly lighter fill, NO transform scale (cheap redraw) */
.lite .focused{transform:none !important}
.lite .tile.focused,.lite .poster.focused,.lite .grow.focused .gch,.lite .side-item.focused,
.lite .set-row.focused{outline:.3rem solid var(--gold);outline-offset:-.1rem;background:#17233a !important}
.lite .chip.focused,.lite .tab.focused,.lite .key-btn.focused,.lite .mbtn.focused,
.lite .pbtn.focused{background:var(--gold) !important;color:var(--ink) !important}
/* Screen transitions add nothing on TV — make them instant to kill perceived lag */
.lite .screen{transition:none !important;transform:none !important}
.lite .screen.leaving{display:none !important}
/* Progress bar gradient → flat gold (gradient repaint per tick is wasteful) */
.lite .prog > i,.lite .osd-prog .bar > i{background:var(--gold) !important}
.lite .splash-logo{box-shadow:none !important}

/* ==========================================================================
   v1.4 — Home, search, help, player chrome, mobile, states
   ========================================================================== */
.offline-bar{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;
  padding:1rem 2rem;background:#3a2a10;color:var(--gold-hi);font-size:1.6rem;letter-spacing:.04em
}
.offline-bar[hidden]{display:none}

.act-guest{display:flex;gap:1.6rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.act-link{
  padding:1rem 2rem;border-radius:999px;font-size:1.7rem;color:var(--gold-soft);
  border:.1rem solid var(--gold-line);background:transparent
}
.act-link.focused{background:var(--gold);color:var(--ink);box-shadow:var(--focus-ring)}

.topbar{flex-wrap:wrap}
.tab .ic{flex:none}

/* Home rails */
#home{z-index:10}
.home-scroll{flex:1;overflow:hidden;padding:0 0 8rem;transition:transform .34s var(--ease)}
.home-hero{
  margin:0 5.4rem 3.2rem;min-height:28rem;border-radius:2.4rem;overflow:hidden;
  background:linear-gradient(120deg, rgba(212,175,55,.16), rgba(15,26,46,.4) 42%, var(--glass));
  border:.1rem solid var(--gold-line);padding:3.6rem 4.4rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1.2rem
}
.home-hero .kicker{font-size:1.5rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.home-hero h2{font-family:var(--font-display);font-size:5.2rem;font-weight:600;color:var(--cream);line-height:1.05}
.home-hero p{font-size:2rem;color:var(--muted);max-width:70rem}
.home-hero .hero-actions{display:flex;gap:1.4rem;margin-top:1.2rem;flex-wrap:wrap}
.hero-btn{
  display:inline-flex;align-items:center;gap:1rem;padding:1.3rem 2.8rem;border-radius:999px;
  font-size:1.9rem;font-weight:600;border:.1rem solid transparent
}
.hero-btn.gold{background:linear-gradient(180deg,#ecd28a,#d4af37);color:#050d18}
.hero-btn.ghost{background:var(--glass);border-color:var(--gold-line);color:var(--cream)}
.hero-btn.focused{transform:scale(1.05);box-shadow:var(--focus-ring)}
.rail{margin:0 0 2.8rem}
.rail-h{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:0 5.4rem 1.4rem
}
.rail-h h3{font-family:var(--font-display);font-size:2.8rem;font-weight:600;color:var(--cream)}
.rail-h .more{font-size:1.6rem;color:var(--gold-soft)}
.rail-row{display:flex;gap:1.6rem;padding:0 5.4rem;width:max-content}
.rail-card{
  width:28rem;flex:none;border-radius:1.8rem;padding:1.8rem;min-height:16rem;
  background:var(--glass);border:.1rem solid var(--line);
  display:flex;flex-direction:column;gap:.8rem
}
.rail-card .lg{height:5.6rem;display:flex;align-items:center}
.rail-card .lg img{max-height:5.6rem;max-width:100%;object-fit:contain}
.rail-card .nm{font-size:1.8rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-card .sub{font-size:1.45rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-card .live{font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
.rail-card.focused{border-color:var(--gold);transform:translateY(-.5rem) scale(1.04);box-shadow:var(--focus-ring)}
.rail-poster{width:16rem;aspect-ratio:2/3;flex:none;border-radius:1.4rem;overflow:hidden;border:.1rem solid var(--line);background:var(--bg-3);position:relative}
.rail-poster img{width:100%;height:100%;object-fit:cover}
.rail-poster .cap{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .8rem;background:linear-gradient(0deg,rgba(3,6,11,.95),transparent);font-size:1.4rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-poster .prog{position:absolute;left:0;right:0;bottom:0;height:.4rem;background:rgba(255,255,255,.15)}
.rail-poster .prog i{display:block;height:100%;background:var(--gold)}
.rail-poster.focused{transform:translateY(-.6rem) scale(1.06);border-color:var(--gold);box-shadow:var(--focus-ring);z-index:4}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:skel 1.2s ease infinite;border-radius:1.6rem}
@keyframes skel{to{background-position:-200% 0}}

/* Search */
#search{z-index:10}
.search-bar{
  display:flex;align-items:center;gap:1.4rem;margin:0 5.4rem 1.6rem;
  padding:1.4rem 2.2rem;border-radius:999px;background:var(--glass);border:.1rem solid var(--gold-line)
}
.search-bar .ic{width:2.4rem;height:2.4rem;color:var(--gold-soft);flex:none}
.search-bar input{
  flex:1;background:transparent;border:0;outline:none;color:var(--cream);
  font-size:2.2rem;font-family:inherit;min-width:0
}
.search-bar input::placeholder{color:var(--muted-2)}
.skb{display:flex;flex-wrap:wrap;gap:.7rem;padding:0 5.4rem 1.6rem;justify-content:center}
.skb-key{
  min-width:4.2rem;height:4.2rem;padding:0 1rem;border-radius:.9rem;
  background:var(--glass);border:.1rem solid var(--line);color:var(--cream);font-size:1.8rem;font-weight:600
}
.skb-key.focused{background:var(--gold);color:var(--ink);box-shadow:var(--focus-ring)}
.search-body{flex:1;overflow:hidden;padding:0 5.4rem 8rem}
.search-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;transition:transform .3s var(--ease)}
.search-empty{padding:8rem 2rem;text-align:center;color:var(--muted);font-size:2.2rem}

/* Help / about */
.help-wrap{padding-bottom:8rem;max-height:100%;overflow:hidden}
.help-card{
  border-radius:2rem;background:var(--glass);border:.1rem solid var(--line);padding:1rem 0
}
.help-item{padding:2.2rem 3.2rem;border-bottom:.1rem solid rgba(255,255,255,.05)}
.help-item:last-child{border-bottom:none}
.help-item h4{font-size:2.2rem;color:var(--cream);margin-bottom:.6rem}
.help-item p,.help-item li{font-size:1.8rem;color:var(--muted);line-height:1.5}
.help-item a{color:var(--gold-soft);text-decoration:none}
.help-item.focused{background:rgba(212,175,55,.10);box-shadow:inset 0 0 0 .18rem var(--gold)}
.kbd{display:inline-flex;min-width:2.4rem;padding:0 .6rem;height:2.4rem;align-items:center;justify-content:center;
  border-radius:.6rem;background:var(--glass-2);border:.1rem solid var(--line-2);font-size:1.3rem;color:var(--cream)}

/* Player extras */
.live-pill{
  position:absolute;top:4rem;left:5rem;z-index:8;display:none;align-items:center;gap:.8rem;
  padding:.7rem 1.4rem;border-radius:999px;background:rgba(229,72,77,.18);border:.1rem solid rgba(229,72,77,.45);
  color:#ffd0d0;font-size:1.4rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700
}
.live-pill .dot{width:.9rem;height:.9rem;border-radius:50%;background:#e5484d;box-shadow:0 0 1rem #e5484d}
#player.osd-on .live-pill.is-live{display:flex}
.play-err{flex-direction:column;align-items:center;gap:1.2rem;pointer-events:none}
.play-err.show{display:flex;pointer-events:auto}
.play-err-title{font-family:var(--font-display);font-size:3.2rem;color:var(--cream)}
.play-err-sub{font-size:1.8rem;color:var(--muted);max-width:52rem}
.pbar-wrap{
  position:absolute;left:6rem;right:6rem;bottom:22rem;z-index:8;display:none;flex-direction:column;gap:.8rem
}
#player.osd-on.is-vod .pbar-wrap{display:flex}
.pbar{width:100%;accent-color:var(--gold);height:.6rem}
.pbar-times{display:flex;justify-content:space-between;font-size:1.5rem;color:var(--muted);font-variant-numeric:tabular-nums}
.vol-toast{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9;
  padding:1.4rem 2.6rem;border-radius:999px;background:rgba(6,10,18,.9);border:.1rem solid var(--gold-line);
  font-size:2rem;color:var(--cream);display:none
}
.vol-toast.show{display:block}
.qual-menu{
  position:absolute;top:10rem;right:5rem;z-index:10;min-width:22rem;
  background:rgba(6,10,18,.94);border:.1rem solid var(--gold-line);border-radius:1.4rem;padding:.6rem
}
.qual-item{padding:1.2rem 1.8rem;border-radius:1rem;font-size:1.8rem;color:var(--text);text-align:left;width:100%}
.qual-item.focused,.qual-item.sel{background:var(--gold);color:var(--ink)}

.tile .onair{
  position:absolute;top:1.6rem;left:7.2rem;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;
  color:#ffd0d0;background:rgba(229,72,77,.22);border:.1rem solid rgba(229,72,77,.4);
  padding:.25rem .7rem;border-radius:.6rem;font-weight:700
}

/* Empty / error states */
.state-box{padding:8rem 4rem;text-align:center;max-width:70rem;margin:0 auto}
.state-box h3{font-family:var(--font-display);font-size:3.6rem;color:var(--cream);margin-bottom:1.2rem}
.state-box p{font-size:2rem;color:var(--muted);line-height:1.5}
.state-box .hero-btn{margin-top:2.2rem}

/* Touch / phone / tablet */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .vod-grid,.search-grid{grid-template-columns:repeat(4,1fr)}
  .topbar{padding:1.8rem 2.4rem 1.2rem;gap:1.2rem}
  .chips{padding:1rem 2.4rem 1.4rem}
  .grid-scroll,.guide-body,.vod-wrap,.search-body,.home-hero,.rail-h,.rail-row{padding-left:2.4rem;padding-right:2.4rem}
  .home-hero{margin-left:2.4rem;margin-right:2.4rem}
  .hintbar{display:none}
  .act-card{padding:3rem 2rem}
  .cbox{width:4.2rem;height:5.8rem;font-size:3rem}
  .keypad{width:min(38rem,92vw)}
  .vod-sheet{inset:6rem 0 0;padding:1.6rem}
  .vod-sheet-inner{flex-direction:column;gap:2rem;overflow:auto}
  .vod-sheet-poster{width:18rem;flex-basis:18rem}
}
@media (max-width:700px){
  html{font-size:10px}
  body{overflow:auto;position:relative;height:auto;min-height:100dvh}
  .screen{position:relative;min-height:100dvh}
  #activate{justify-content:flex-start;overflow:auto;padding:4rem 1.2rem 6rem}
  .status-pill,.topbar .clock{display:none}
  .topbar{padding-top:max(1.2rem, env(safe-area-inset-top))}
  .grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .vod-grid,.search-grid{grid-template-columns:repeat(3,1fr)}
  .tile{min-height:16rem;padding:1.4rem}
  .brand{font-size:2.6rem}
  .tabs{width:100%;overflow:auto;margin-left:0}
  .home-hero h2{font-size:3.6rem}
  .splash-mark{font-size:4.4rem}
  .rail-card{width:22rem}
  .pctl{flex-wrap:wrap;width:94%;justify-content:center}
  #player{position:fixed}
  .skb{display:none}
  .search-bar input{font-size:1.8rem}
}
@media (min-width:2560px){
  .grid{grid-template-columns:repeat(7,1fr)}
  .vod-grid{grid-template-columns:repeat(8,1fr)}
}
@media (pointer:coarse){
  .hintbar{display:none}
}
@media (orientation:portrait){
  #video{object-fit:contain}
}

.lite .home-hero,.lite .rail-card,.lite .search-bar,.lite .help-card,.lite .hero-btn.ghost{
  background:#0e1626 !important;border-color:rgba(212,175,55,.28) !important
}
.lite .rail-card.focused,.lite .hero-btn.focused,.lite .rail-poster.focused,.lite .skb-key.focused{
  transform:none !important;outline:.3rem solid var(--gold)
}