/* Fretzflix Night for a 1080p TV: black and purple, big type, a glow on whatever has focus.
   Laid out for 1920x1080 (one CSS pixel per screen pixel) with a 96 px margin left and right
   so nothing sits under a TV's overscan. No blur filters: this TV's graphics chip would
   redraw them every frame. Movement is transform and opacity only, which it can do cheaply. */
:root {
  --bg: #07050e;
  --panel: rgba(20, 13, 38, .92);
  --text: #efe8ff;
  --dim: #a99bc9;
  --accent: #a78bfa;
  --accent-strong: #c4b5fd;
  --on-accent: #140b29;
  --side: 96px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: Roboto, 'Noto Sans', sans-serif; font-size: 28px; line-height: 1.35; -webkit-font-smoothing: antialiased; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen[hidden] { display: none; }
img { display: block; }
h1, h2, h3, p { margin: 0; font-weight: 500; }

/* ---------- focus ---------- */
.f { transition: transform .16s ease-out, box-shadow .16s ease-out, background-color .16s; }
.card.is-focus { transform: scale(1.08); z-index: 2; }
.card.is-focus .art { box-shadow: 0 0 0 4px var(--accent-strong), 0 0 36px 6px rgba(167, 139, 250, .55); }
.tab.is-focus, .button.is-focus, .option.is-focus { background: var(--accent); color: var(--on-accent); transform: scale(1.05); }
.field.is-focus { box-shadow: 0 0 0 4px var(--accent-strong); }

/* ---------- top bar ---------- */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: 110px; display: flex; align-items: center;
  padding: 0 var(--side); z-index: 5; background: linear-gradient(rgba(7, 5, 14, .85), rgba(7, 5, 14, 0)); }
.brand { font-size: 40px; font-weight: 700; letter-spacing: .5px; color: var(--accent-strong); margin-right: 56px;
  text-shadow: 0 0 24px rgba(167, 139, 250, .6); }
.brand.big { font-size: 96px; margin: 0 0 40px; }
.topbar nav { display: flex; }
.tab { padding: 10px 26px; margin-right: 12px; border-radius: 40px; color: var(--dim); font-size: 30px; }
.tab.on { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 40px 40px 8px 8px; }
.tab.on.is-focus { box-shadow: none; border-radius: 40px; }

/* ---------- hero (Home) ---------- */
.hero { position: absolute; inset: 0; }
.hero .bg, .item > .bg { position: absolute; top: 0; right: 0; width: 1500px; height: 844px; object-fit: cover; opacity: 0; transition: opacity .5s; }
.hero .bg.loaded, .item > .bg.loaded { opacity: 1; }
.hero .shade, .item > .shade { position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 22%, rgba(7, 5, 14, .7) 45%, rgba(7, 5, 14, 0) 70%),
              linear-gradient(0deg, var(--bg) 30%, rgba(7, 5, 14, 0) 62%); }
.hero-text { position: absolute; left: var(--side); top: 150px; width: 900px; }
.hero-text h1, .item-text h1 { font-size: 64px; font-weight: 700; line-height: 1.1; margin-bottom: 14px; }
.logo { max-width: 620px; max-height: 190px; object-fit: contain; object-position: left bottom; margin-bottom: 20px; }
.logo[hidden], h1[hidden] { display: none; }
.meta { color: var(--dim); font-size: 28px; margin-bottom: 14px; }
.overview { font-size: 27px; color: #ddd3f5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- rows and cards ---------- */
.scroller { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.home .scroller { top: 560px; }
.row { margin-bottom: 26px; }
.row h2 { font-size: 32px; padding: 0 var(--side); margin-bottom: 14px; }
.track { display: flex; overflow: hidden; padding: 18px var(--side) 22px; margin: -18px 0 -22px; }
.track > .card { flex: none; margin-right: 28px; }
.card { width: 200px; }
.card.wide { width: 384px; }
.card .art { position: relative; height: 300px; border-radius: 12px; overflow: hidden; background: #1a1230; }
.card.wide .art { height: 216px; }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.card .art img.loaded { opacity: 1; }
.card .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-size: 24px; color: var(--dim); }
.card .art img.loaded + .fallback { display: none; }
.card .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(0, 0, 0, .6); }
.card .progress > div { height: 100%; background: var(--accent); }
.card .watched { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.caption { margin-top: 12px; font-size: 24px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.is-focus .caption { color: var(--text); }

/* ---------- Movies / Shows ---------- */
.subtabs { display: flex; padding: 0 var(--side); }
.library .subtabs { position: absolute; top: 112px; left: 0; right: 0; }
.grid-info { position: absolute; top: 186px; left: var(--side); right: var(--side); height: 40px; color: var(--dim); font-size: 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library .scroller { top: 236px; }
/* Seven posters exactly fill the width between the margins: 7 x 216 + 6 x 36 = 1728. */
.grid { display: grid; grid-template-columns: repeat(7, 216px); column-gap: 36px; row-gap: 34px; padding: 20px var(--side) 60px; }
.grid > .card { width: 216px; }
.grid > .card .art { height: 324px; }

/* ---------- one movie or show ---------- */
.item-text { position: absolute; left: var(--side); top: 110px; width: 1000px; }
.genres { color: var(--accent-strong); font-size: 26px; margin-bottom: 18px; }
.item .overview { -webkit-line-clamp: 4; margin-bottom: 30px; }
.buttons { display: flex; }
.button { display: inline-block; padding: 16px 36px; margin-right: 18px; border-radius: 48px; background: rgba(167, 139, 250, .16);
  font-size: 30px; font-weight: 500; white-space: nowrap; }
.item-lower { top: 640px; }
.grid-info b { color: var(--text); font-weight: 500; }
.item-lower .subtabs { margin-bottom: 18px; }
.item-lower .row h2 { display: none; }
.ep-info { padding: 6px var(--side) 0; color: var(--dim); font-size: 25px; height: 80px; overflow: hidden; }

/* ---------- sign in ---------- */
.signin { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #241640, var(--bg) 70%); }
.signin-box { width: 1100px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.qc-code { font-size: 150px; font-weight: 700; letter-spacing: 28px; color: var(--accent-strong); margin-bottom: 24px;
  text-shadow: 0 0 40px rgba(167, 139, 250, .5); min-height: 180px; }
.how { font-size: 32px; color: var(--dim); margin: 0 0 48px; }
.field { width: 700px; font: inherit; font-size: 32px; padding: 18px 26px; margin-bottom: 22px; border-radius: 14px; border: 0;
  background: #1c1333; color: var(--text); outline: none; }

/* ---------- player ---------- */
.player { background: #000; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; }
.subs { position: absolute; left: 200px; right: 200px; bottom: 80px; text-align: center; transition: transform .25s; pointer-events: none; }
.player.osd-on .subs { transform: translateY(-250px); }
.subs .line { display: table; margin: 6px auto 0; padding: 4px 18px; border-radius: 8px; background: rgba(0, 0, 0, .6);
  font-size: 46px; line-height: 1.3; color: #fff; text-shadow: 0 2px 4px #000; white-space: pre-line; }
.osd { position: absolute; left: 0; right: 0; bottom: 0; padding: 140px var(--side) 70px; opacity: 0; transition: opacity .25s;
  background: linear-gradient(0deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); }
.osd.on { opacity: 1; }
.osd-title { font-size: 44px; font-weight: 700; }
.osd-sub { font-size: 28px; color: var(--dim); margin-bottom: 26px; }
.osd-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .25); }
.osd-bar .fill { height: 100%; border-radius: 5px; background: var(--accent); }
.osd-bar .marker { position: absolute; top: -9px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--accent-strong);
  box-shadow: 0 0 18px var(--accent); }
.osd-times { display: flex; justify-content: space-between; margin-top: 16px; font-size: 28px; }
.osd-times .ends { color: var(--dim); }
.osd-paused { position: absolute; right: var(--side); top: 100px; font-size: 30px; color: var(--accent-strong); }
.osd-paused[hidden] { display: none; }
.skip { position: absolute; right: var(--side); bottom: 230px; background: var(--panel); }
.skip[hidden], .upnext[hidden], .tracks[hidden], .spinner[hidden] { display: none; }
.upnext { position: absolute; right: var(--side); bottom: 200px; width: 620px; padding: 30px 36px; border-radius: 20px; background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent); }
.upnext .label { color: var(--accent-strong); font-size: 26px; }
.upnext .name { font-size: 34px; font-weight: 700; margin: 6px 0 10px; }
.upnext .hint { color: var(--dim); font-size: 22px; margin-top: 8px; }
.tracks { position: absolute; top: 0; right: 0; bottom: 0; width: 620px; padding: 70px 48px; background: var(--panel); overflow: hidden; }
.tracks h3 { color: var(--dim); font-size: 26px; margin: 18px 0 10px; }
.option { padding: 12px 24px; border-radius: 12px; font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.option.on::before { content: '✓  '; color: var(--accent-strong); }
.option.on.is-focus::before { color: var(--on-accent); }
.spinner { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  border: 8px solid rgba(167, 139, 250, .25); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- messages ---------- */
.toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); padding: 18px 36px; border-radius: 40px;
  background: var(--panel); box-shadow: 0 0 0 2px var(--accent); font-size: 28px; z-index: 50; transition: opacity .6s; }
.toast.gone { opacity: 0; }

/* ---------- TV (Surf) ---------- */
.tv { background: #000; }
.tv .tube { position: absolute; inset: 0; }
.tv video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Opening TV: the picture opens out from a bright line, like a tube set warming up. */
.tv.switch-on .tube { animation: switch-on .55s ease-out; }
@keyframes switch-on {
  0% { transform: scale(1, .004); filter: brightness(6); }
  45% { transform: scale(1, .004); filter: brightness(6); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
.snow { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity .15s; }
.snow.on { opacity: .9; }
.ch-number { position: absolute; top: 60px; right: 90px; font: 700 96px/1 'Roboto Mono', 'DejaVu Sans Mono', monospace;
  color: var(--accent-strong); text-shadow: 0 0 18px var(--accent), 0 0 4px #fff; opacity: 0; transition: opacity .2s; }
.ch-number.on { opacity: 1; }
.ch-banner { position: absolute; left: var(--side); right: var(--side); bottom: 60px; display: flex; align-items: center; padding: 28px 36px;
  border-radius: 22px; background: var(--panel); box-shadow: 0 0 0 2px rgba(167, 139, 250, .5); opacity: 0; transform: translateY(20px);
  transition: opacity .25s, transform .25s; }
.ch-banner.on { opacity: 1; transform: none; }
.ch-logo { width: 180px; height: 100px; object-fit: contain; margin-right: 34px; flex: none; }
.ch-logo[hidden] { display: none; }
.ch-text { flex: 1; min-width: 0; }
.ch-name { font-size: 30px; color: var(--accent-strong); }
.ch-now { font-size: 40px; font-weight: 700; margin: 4px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); margin-bottom: 10px; }
.ch-bar[hidden] { display: none; }
.ch-bar > div { height: 100%; border-radius: 3px; background: var(--accent); }
.ch-next { font-size: 26px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-list { position: absolute; top: 0; left: 0; bottom: 0; width: 900px; padding: 50px 40px; background: var(--panel); overflow: hidden; }
.ch-list[hidden] { display: none; }
.ch-list h3 { color: var(--accent-strong); font-size: 26px; margin: 22px 0 8px 12px; }
.ch-row { display: flex; align-items: baseline; padding: 10px 16px; border-radius: 12px; white-space: nowrap; }
.ch-row .num { width: 110px; flex: none; font-family: 'Roboto Mono', monospace; color: var(--dim); }
.ch-row .name { width: 330px; flex: none; overflow: hidden; text-overflow: ellipsis; }
.ch-row .now { flex: 1; min-width: 0; margin-left: 20px; color: var(--dim); font-size: 24px; overflow: hidden; text-overflow: ellipsis; }
.ch-row.on .name::before { content: '▶ '; color: var(--accent-strong); }
.ch-row.is-focus { background: var(--accent); color: var(--on-accent); }
.ch-row.is-focus .num, .ch-row.is-focus .now, .ch-row.is-focus.on .name::before { color: var(--on-accent); }

/* ---------- On TV Now, Search, Settings ---------- */
.tab.right { margin-left: auto; }
.topbar nav { flex: 1; }
.card.channel .art { background: linear-gradient(135deg, #2a1a4d, #120b24); }
.card.channel .art img.chlogo { object-fit: contain; padding: 34px 60px; }
.search-field { position: absolute; top: 130px; left: var(--side); width: 1100px; }
.search-hint { position: absolute; top: 230px; left: var(--side); text-align: left; }
.search-hint[hidden] { display: none; }
.search .scroller { top: 230px; }
.settings-body { position: absolute; top: 170px; left: var(--side); width: 1100px; }
.setting { display: flex; font-size: 32px; margin: 0 0 30px; }
.setting .label { width: 300px; flex: none; color: var(--dim); }
.setting .value { flex: 1; line-height: 1.35; }
.setting.update .value { color: var(--accent-strong); }
.settings-body .button { margin: 0 0 50px; }