:root {
  --bg: #08090b;
  --panel: #121419;
  --panel-raised: #1a1d23;
  --text: #f7f7f5;
  --muted: #b9bbc2;
  --faint: #747780;
  --accent: #e50914;
  --focus: #ffffff;
  --safe-x: clamp(1.5rem, 3.8vw, 4.8rem);
  --safe-y: clamp(1.25rem, 3.2vh, 3rem);
  --card-radius: .55rem;
  color-scheme: dark;
  font-size: clamp(16px, 1.03vw, 24px);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { width: 100%; min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.boot {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  background: #08090b;
  background: var(--bg);
}
.boot-stage { display: flex; width: 18rem; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.boot-emblem { position: relative; display: flex; width: 6.5rem; height: 6.5rem; align-items: center; justify-content: center; margin-bottom: 1.45rem; }
.boot-orbit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(255, 255, 255, .1); border-top-color: rgba(229, 9, 20, .9); border-radius: 50%; animation: boot-orbit 1.35s linear infinite; }
.boot-mark, .brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-weight: 900;
  line-height: 1;
}
.boot-mark { position: relative; width: 4.5rem; height: 4.5rem; font-size: 2.4rem; box-shadow: 0 0 3rem rgba(229, 9, 20, .3); }
.boot-copy { display: flex; flex-direction: column; align-items: center; }
.boot-copy strong { font-size: 1.2rem; letter-spacing: .22em; }
.boot-copy span { margin-top: .42rem; color: #b9bbc2; color: var(--muted); font-size: .72rem; letter-spacing: .08em; }
.boot-progress { width: 8.5rem; height: 2px; margin-top: 1.35rem; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.boot-progress i { display: block; width: 45%; height: 100%; border-radius: inherit; background: #e50914; animation: boot-sweep 1.25s ease-in-out infinite; }
.boot.is-leaving { opacity: 0; transform: scale(1.015); transition: opacity 180ms linear, transform 180ms ease; }
@keyframes boot-orbit { to { transform: rotate(360deg); } }
@keyframes boot-sweep { 0% { transform: translateX(-120%); } 50% { transform: translateX(125%); } 100% { transform: translateX(300%); } }

.app { min-height: 100vh; background: var(--bg); }
.masthead {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.4rem;
  padding: var(--safe-y) var(--safe-x) 2rem;
  background: linear-gradient(180deg, rgba(8, 9, 11, .9), rgba(8, 9, 11, .34) 64%, transparent);
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: .75rem; color: white; text-decoration: none; }
.brand-mark { width: 2.35rem; height: 2.35rem; font-size: 1.25rem; transition: transform 120ms ease, box-shadow 120ms linear; }
.brand-name { font-size: .88rem; font-weight: 900; letter-spacing: .18em; }
.nav { display: flex; align-items: center; gap: .18rem; padding: .25rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 2rem; background: rgba(12, 13, 16, .58); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .18); backdrop-filter: blur(12px); }
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  min-height: 2.7rem;
  padding: .55rem .88rem;
  border: 0;
  border-radius: 1.6rem;
  background: transparent;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, transform 120ms ease;
}
.nav-item.is-active { background: rgba(255, 255, 255, .15); color: white; }
.nav-icon { font-size: 1.05rem; line-height: 1; }
.nav-tv { font-size: .92rem; }
.status-cluster { justify-self: end; display: flex; align-items: center; gap: 1rem; color: var(--muted); }
.signal { display: flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 700; }
.signal-dot { width: .48rem; height: .48rem; border-radius: 50%; background: #6c7078; }
.signal-dot.is-live { background: #46d369; box-shadow: 0 0 .7rem rgba(70, 211, 105, .48); }
.clock { min-width: 3.2rem; color: #d7d8db; font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }

.hero { position: relative; height: min(86vh, 61rem); min-height: 38rem; overflow: hidden; background: #111318; contain: layout paint; }
.hero-artwork, .detail-artwork, .hero-shade, .detail-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.hero-shade, .detail-shade { z-index: 2; }
.hero-image, .detail-image { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); transition: opacity 320ms linear, transform 7s ease-out; }
.hero-image.is-loaded, .detail-image.is-loaded { opacity: 1; transform: scale(1); }
.artwork-fallback {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  display: grid;
  place-items: center;
  background: #151820;
  color: rgba(255, 255, 255, .06);
}
.artwork-fallback span { font-size: min(38vw, 28rem); font-weight: 900; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(8, 9, 11, .98) 0%, rgba(8, 9, 11, .74) 38%, rgba(8, 9, 11, .12) 72%),
    linear-gradient(0deg, var(--bg) 0%, rgba(8, 9, 11, .16) 38%, rgba(8, 9, 11, .22) 100%);
}
.hero-content { position: absolute; z-index: 3; left: var(--safe-x); bottom: clamp(8rem, 19vh, 13rem); width: min(43rem, 54vw); }
.hero-kicker, .eyebrow { margin: 0 0 .8rem; color: #e8e8e8; font-size: .72rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.hero-kicker::before, .eyebrow::before { display: inline-block; width: .32rem; height: .9rem; margin-right: .55rem; background: var(--accent); content: ""; vertical-align: -.1rem; }
.hero-title { max-width: 100%; margin: 0; font-size: clamp(2.9rem, 4.8vw, 5.4rem); font-weight: 900; line-height: .94; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 .15rem 1.3rem rgba(0, 0, 0, .38); }
.hero-meta { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; min-height: 1.4rem; margin-top: 1.25rem; color: #ececee; font-size: .88rem; font-weight: 650; }
.hero-meta span + span::before { margin-right: 1rem; color: #81848b; content: "•"; }
.hero-meta .rating { display: inline-flex; align-items: center; gap: .35rem; }
.hero-meta .rating::after { padding: .08rem .32rem; border-radius: .16rem; background: #f5c518; color: #111; content: "IMDb"; font-size: .52rem; font-weight: 900; order: -1; }
.hero-overview { display: -webkit-box; max-width: 39rem; margin: 1rem 0 0; overflow: hidden; color: #d1d2d6; font-size: 1rem; line-height: 1.48; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.hero-actions, .detail-actions { display: flex; gap: .75rem; margin-top: 1.55rem; }
.button, .control-button, .icon-button { border: 0; cursor: pointer; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-width: 7.8rem; min-height: 3.2rem; padding: .75rem 1.25rem; border-radius: .4rem; font-size: .9rem; font-weight: 850; transition: transform 120ms ease, background-color 120ms linear, color 120ms linear; }
.button:disabled { cursor: default; opacity: .38; }
.button-primary { background: white; color: #08090b; }
.button-secondary { background: rgba(109, 109, 110, .72); color: white; backdrop-filter: blur(8px); }
.button-icon { font-size: 1rem; line-height: 1; }
.button-info { display: grid; width: 1.12rem; height: 1.12rem; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: .72rem; }
.hero-count { position: absolute; z-index: 3; right: var(--safe-x); bottom: clamp(8rem, 19vh, 13rem); display: flex; align-items: center; gap: .6rem; color: rgba(255, 255, 255, .72); font-size: .72rem; font-variant-numeric: tabular-nums; }
.hero-count i { width: 2.6rem; height: 2px; background: rgba(255, 255, 255, .28); }

.shelves { position: relative; z-index: 4; min-height: 30vh; margin-top: clamp(-8rem, -11vh, -5rem); padding: 0 0 6rem; }
.media-shelf { position: relative; margin-bottom: 2.1rem; padding-left: var(--safe-x); }
.shelf-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 2.2rem; padding-right: var(--safe-x); }
.shelf-heading h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.025em; }
.shelf-heading-actions { display: flex; align-items: center; gap: 1rem; }
.freshness { margin: 0; color: var(--muted); font-size: .68rem; }
.shelf-view-all {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  padding: .25rem .2rem .25rem .65rem;
  border: 0;
  border-radius: 1.4rem;
  background: transparent;
  color: #b9bbc2;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
  transition: color 120ms linear, background-color 120ms linear, transform 120ms ease;
}
.shelf-view-all b { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; color: white; font-size: 1.25rem; font-weight: 500; line-height: 1; }
.shelf-view-all.is-focused { outline: 3px solid white; outline-offset: 3px; background: white; color: #08090b; transform: scale(1.04); }
.shelf-view-all:focus-visible { outline: 3px solid white; outline-offset: 3px; background: white; color: #08090b; transform: scale(1.04); }
.shelf-view-all.is-focused b { border-color: #08090b; color: #08090b; }
.shelf-view-all:focus-visible b { border-color: #08090b; color: #08090b; }
.media-row { display: flex; gap: .72rem; overflow-x: auto; overflow-y: visible; padding: .75rem var(--safe-x) 1.1rem 0; scrollbar-width: none; scroll-snap-type: x proximity; contain: layout; }
.media-row::-webkit-scrollbar { display: none; }
.shelves.is-grid-view { margin-top: 0; padding-top: 7.2rem; }
.shelves.is-grid-view .media-shelf { margin-bottom: 0; padding-right: var(--safe-x); }
.media-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  overflow: visible;
  padding: 1rem 0 2rem;
  scroll-snap-type: none;
  contain: layout;
}
.media-grid .movie-card { width: 100%; min-width: 0; }
.catalog-more-wrap { display: flex; justify-content: center; padding: .6rem 0 3rem; }
.catalog-more {
  min-width: 18rem;
  min-height: 3.2rem;
  padding: .75rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2rem;
  background: rgba(255, 255, 255, .08);
  color: white;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.catalog-more.is-focused { outline: 3px solid white; outline-offset: 3px; background: white; color: #08090b; transform: scale(1.035); }
.catalog-more:focus-visible { outline: 3px solid white; outline-offset: 3px; background: white; color: #08090b; transform: scale(1.035); }
.movie-card {
  position: relative;
  flex: 0 0 clamp(14.4rem, 20.5vw, 24rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: var(--card-radius);
  outline: 0 solid transparent;
  background: var(--panel-raised);
  color: white;
  text-align: left;
  scroll-snap-align: start;
  transform: translateZ(0);
  transition: transform 140ms ease, outline-color 100ms linear, box-shadow 140ms ease;
  contain: layout paint;
}
.movie-card-art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: #20232a; }
.movie-card-art::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 8, .95), transparent 58%); content: ""; }
.movie-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 180ms linear; }
.movie-card img.is-loaded { opacity: 1; }
.movie-card-fallback { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: flex; align-items: center; justify-content: center; display: grid; place-items: center; color: rgba(255, 255, 255, .08); font-size: 5rem; font-weight: 900; }
.movie-card-copy { position: absolute; z-index: 1; right: .8rem; bottom: .68rem; left: .8rem; display: flex; align-items: end; justify-content: space-between; gap: .7rem; }
.movie-card-title { min-width: 0; }
.movie-card h3 { max-width: 100%; margin: 0; overflow: hidden; font-size: .9rem; font-weight: 780; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.movie-card p { margin: .23rem 0 0; overflow: hidden; color: #c5c7cc; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.movie-card-badge { flex: none; padding: .18rem .38rem; border-radius: .22rem; background: rgba(8, 9, 11, .78); color: #f5c518; font-size: .58rem; font-weight: 850; }
.genre-rows:empty { display: none; }

.empty-state { display: flex; align-items: center; gap: 1.5rem; margin: 2rem var(--safe-x); padding: 2rem; border: 1px solid rgba(255, 255, 255, .09); border-radius: .6rem; background: var(--panel); }
.empty-mark { display: grid; flex: none; width: 4rem; height: 4rem; place-items: center; border-radius: 50%; background: var(--accent); font-size: 2rem; font-weight: 900; }
.empty-state h2 { margin: 0; font-size: 1.35rem; }
.empty-state p { max-width: 40rem; margin: .45rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.remote-hints { position: fixed; z-index: 15; right: 0; bottom: 0; left: 0; display: flex; gap: 1.5rem; align-items: center; padding: .55rem var(--safe-x); background: rgba(8, 9, 11, .84); color: var(--faint); font-size: .6rem; backdrop-filter: blur(10px); }
.remote-hints span:last-child { margin-left: auto; }
kbd { padding: .12rem .28rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: .18rem; color: #d7d8dc; font-family: inherit; }

/* Every `.is-focused` rule below is deliberately kept SEPARATE from its `:focus-visible`
 * twin, and the duplication must not be tidied away.
 *
 * CSS discards an entire rule when any selector in its group fails to parse. `:focus-visible`
 * is Chromium 86, so on a webOS 6.0 panel (Chromium 79) or a Tizen 5.5 one the combined rule
 * `.focusable.is-focused, .focusable:focus-visible { … }` was thrown away wholesale — taking
 * the `.is-focused` half with it. Those televisions therefore ran the D-pad with no visible
 * highlight at all, which reads to a viewer as "the remote does nothing".
 *
 * Split, the legacy half survives on its own and the modern half is simply ignored. */
.focusable:focus { outline: none; }
.focusable.is-focused { outline: 3px solid var(--focus); outline-offset: 3px; }
.focusable:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.brand.is-focused { outline: none; }
.brand:focus-visible { outline: none; }
.brand.is-focused .brand-mark { transform: scale(1.1); box-shadow: 0 0 1.15rem rgba(229, 9, 20, .72); }
.brand:focus-visible .brand-mark { transform: scale(1.1); box-shadow: 0 0 1.15rem rgba(229, 9, 20, .72); }
.nav-item.is-focused { background: white; color: #08090b; transform: scale(1.035); }
.nav-item:focus-visible { background: white; color: #08090b; transform: scale(1.035); }
.button.is-focused, .control-button.is-focused { transform: scale(1.055); }
.button:focus-visible,
.control-button:focus-visible { transform: scale(1.055); }
.movie-card.is-focused { z-index: 5; outline-color: var(--focus); box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .58); transform: scale(1.065) translateZ(0); }
.movie-card:focus-visible { z-index: 5; outline-color: var(--focus); box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .58); transform: scale(1.065) translateZ(0); }

.overlay { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: auto; padding: var(--safe-y) var(--safe-x) 5rem; background: var(--bg); }
.overlay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.overlay-head h2 { max-width: 55rem; margin: 0; font-size: clamp(2rem, 3.4vw, 3.7rem); line-height: 1.04; letter-spacing: -.045em; }
.icon-button { display: grid; flex: none; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(12, 13, 16, .72); color: white; font-size: 1.65rem; line-height: 1; backdrop-filter: blur(8px); }
.search-box { display: flex; align-items: center; gap: 1rem; max-width: 62rem; margin-top: 2.5rem; border: 2px solid rgba(255, 255, 255, .2); border-radius: .72rem; background: var(--panel); padding: 0 1.15rem; transition: border-color 120ms linear, box-shadow 120ms linear, background-color 120ms linear; }
.search-box:focus-within { border-color: rgba(255, 255, 255, .92); background: #15181e; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 .65rem 2rem rgba(0, 0, 0, .34); }
.search-symbol { color: var(--muted); font-size: 1.7rem; }
.search-box input { width: 100%; border: 0; background: transparent; padding: 1rem 0; color: white; font-size: 1.25rem; outline: 0; }
.search-box input.focusable.is-focused { outline: none; outline-offset: 0; }
.search-box input.focusable:focus-visible { outline: none; outline-offset: 0; }
.search-box input::placeholder { color: #777a82; }
.search-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: .65rem; margin-top: 1rem; }
.search-filter {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: .15rem .65rem;
  align-content: center;
  padding: .65rem .8rem .68rem .9rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .58rem;
  background: rgba(255, 255, 255, .045);
  color: white;
  text-align: left;
  cursor: pointer;
  transition: background-color 110ms linear, border-color 110ms linear, box-shadow 110ms linear, transform 110ms ease;
}
.search-filter::before { position: absolute; top: .55rem; bottom: .55rem; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: transparent; content: ""; }
.search-filter-label { color: var(--faint); font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.search-filter strong { overflow: hidden; font-size: .76rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.search-filter-arrow { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--muted); font-size: 1.1rem; }
.search-filter.is-active { border-color: rgba(229, 9, 20, .58); background: rgba(229, 9, 20, .09); }
.search-filter.is-active::before { background: var(--accent); }
.search-filter.is-focused, .search-filter-reset.is-focused {
  z-index: 2;
  border-color: white;
  outline: none;
  box-shadow: 0 0 0 3px white;
  background: rgba(255, 255, 255, .13);
  transform: scale(1.035);
}
.search-filter:focus-visible,
.search-filter-reset:focus-visible {
  z-index: 2;
  border-color: white;
  outline: none;
  box-shadow: 0 0 0 3px white;
  background: rgba(255, 255, 255, .13);
  transform: scale(1.035);
}
.search-filter-reset { min-height: 3.7rem; padding: .65rem 1rem; border: 1px solid rgba(229, 9, 20, .64); border-radius: .58rem; background: rgba(229, 9, 20, .11); color: #fff; font-size: .68rem; font-weight: 850; white-space: nowrap; cursor: pointer; }
.search-summary { min-height: 1rem; margin: 1rem 0 0; color: var(--muted); font-size: .72rem; }
.search-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; padding-bottom: 3rem; }
.search-results .movie-card { width: 100%; min-width: 0; }

.search-filter-overlay {
  position: fixed;
  z-index: 48;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: var(--safe-y) var(--safe-x);
  background:
    radial-gradient(circle at 22% 14%, rgba(229, 9, 20, .14), transparent 30rem),
    rgba(3, 4, 6, .9);
  backdrop-filter: blur(18px);
}
.search-filter-dialog {
  position: relative;
  width: min(76rem, 92vw);
  max-height: calc(100vh - 2 * var(--safe-y));
  overflow: auto;
  padding: clamp(1.6rem, 3vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(28, 30, 36, .99), rgba(10, 11, 14, .99));
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, .74);
}
.search-filter-dialog::before { position: absolute; top: 0; right: 3rem; left: 3rem; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); content: ""; }
.search-filter-dialog .overlay-head h2 { font-size: clamp(2.2rem, 3.6vw, 4.2rem); }
.search-filter-intro { max-width: 40rem; margin: .8rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.search-filter-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.search-filter-option {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  overflow: hidden;
  padding: .85rem 1rem .85rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: .58rem;
  background: rgba(255, 255, 255, .045);
  color: white;
  text-align: left;
  cursor: pointer;
  transition: background-color 110ms linear, border-color 110ms linear, box-shadow 110ms linear, transform 110ms ease;
}
.search-filter-option::before { position: absolute; top: 0; bottom: 0; left: 0; width: .25rem; background: transparent; content: ""; }
.search-filter-option.is-selected { border-color: rgba(229, 9, 20, .64); background: rgba(229, 9, 20, .1); }
.search-filter-option.is-selected::before { background: var(--accent); }
.search-filter-option-copy { display: flex; min-width: 0; flex-direction: column; gap: .32rem; }
.search-filter-option strong { overflow: hidden; font-size: .88rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.search-filter-option-copy > span { color: var(--muted); font-size: .6rem; font-weight: 650; }
.search-filter-check { flex: none; color: var(--faint); font-size: 1.2rem; }
.search-filter-option.is-selected .search-filter-check { color: #ff5360; }
.search-filter-option.is-focused { z-index: 2; border-color: white; outline: none; box-shadow: 0 0 0 3px white; background: rgba(255, 255, 255, .13); transform: scale(1.035); }
.search-filter-option:focus-visible { z-index: 2; border-color: white; outline: none; box-shadow: 0 0 0 3px white; background: rgba(255, 255, 255, .13); transform: scale(1.035); }
.search-filter-status { min-height: 1rem; margin: 1.15rem 0 0; color: var(--faint); font-size: .64rem; }

.genre-overlay {
  position: fixed;
  z-index: 45;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: var(--safe-y) var(--safe-x);
  background:
    radial-gradient(circle at 78% 14%, rgba(229, 9, 20, .13), transparent 34rem),
    rgba(3, 4, 6, .88);
  backdrop-filter: blur(18px);
}
.genre-dialog {
  position: relative;
  width: min(76rem, 92vw);
  max-height: calc(100vh - 2 * var(--safe-y));
  overflow: auto;
  padding: clamp(1.6rem, 3vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(28, 30, 36, .98), rgba(10, 11, 14, .99));
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, .72);
}
.genre-dialog::before {
  position: absolute;
  top: 0;
  right: 3rem;
  left: 3rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  content: "";
}
.genre-dialog .overlay-head h2 { font-size: clamp(2.2rem, 3.6vw, 4.2rem); }
.genre-intro { max-width: 40rem; margin: .8rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.genre-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.genre-option {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 5.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  padding: .9rem 1rem .9rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .045);
  color: white;
  text-align: left;
  cursor: pointer;
  transition: background-color 110ms linear, border-color 110ms linear, color 110ms linear, transform 110ms ease;
}
.genre-option::before { position: absolute; top: 0; bottom: 0; left: 0; width: .25rem; background: transparent; content: ""; }
.genre-option.is-selected { border-color: rgba(229, 9, 20, .62); background: rgba(229, 9, 20, .1); }
.genre-option.is-selected::before { background: var(--accent); }
.genre-option-copy { display: flex; min-width: 0; flex-direction: column; gap: .3rem; }
.genre-option strong { overflow: hidden; font-size: .92rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.genre-option-copy > span { color: var(--muted); font-size: .62rem; font-weight: 650; }
.genre-option-arrow { color: var(--faint); font-size: 1.7rem; line-height: 1; }
.genre-option.is-focused {
  z-index: 2;
  border-color: white;
  outline: 3px solid white;
  outline-offset: 3px;
  background: white;
  color: #08090b;
  transform: scale(1.035);
}
.genre-option:focus-visible {
  z-index: 2;
  border-color: white;
  outline: 3px solid white;
  outline-offset: 3px;
  background: white;
  color: #08090b;
  transform: scale(1.035);
}
.genre-option.is-focused .genre-option-copy > span, .genre-option.is-focused .genre-option-arrow { color: #4e5158; }
.genre-option:focus-visible .genre-option-copy > span,
.genre-option:focus-visible .genre-option-arrow { color: #4e5158; }
.genre-status { min-height: 1rem; margin: 1.15rem 0 0; color: var(--faint); font-size: .64rem; }

.detail-overlay { overflow: hidden; padding: 0; background: var(--bg); }
.detail-shade { background: linear-gradient(90deg, rgba(8, 9, 11, .99) 0%, rgba(8, 9, 11, .84) 42%, rgba(8, 9, 11, .16) 80%), linear-gradient(0deg, rgba(8, 9, 11, .86), transparent 52%); }
.detail-close { position: absolute; z-index: 4; top: var(--safe-y); right: var(--safe-x); }
.detail-content { position: absolute; z-index: 3; left: var(--safe-x); bottom: 8vh; width: min(44rem, 55vw); }
.detail-content h2 { margin: 0; font-size: clamp(3rem, 5.3vw, 6.2rem); font-weight: 900; line-height: .92; letter-spacing: -.055em; text-wrap: balance; }
.detail-overview { display: -webkit-box; max-width: 39rem; margin: 1rem 0 0; overflow: hidden; color: #d4d5d8; font-size: .96rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.detail-credits { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; max-width: 38rem; margin: 1.15rem 0 0; font-size: .72rem; line-height: 1.4; }
.detail-credits dt { color: #92959d; }
.detail-credits dd { margin: 0; color: #d3d4d7; }

.player { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; background: #000; cursor: default; }
.player.is-idle { cursor: none; }
.player-topbar { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--safe-x) 4rem; background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 52%, transparent); }
.player-topbar h2 { margin: 0; font-size: 1.12rem; }
.player-actions { display: flex; align-items: center; gap: .75rem; }
.player-verify { color: white; text-decoration: none; }
.player-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: flex; align-items: center; justify-content: center; display: grid; place-items: center; }
.player-stage iframe, .player-stage video { width: 100%; height: 100%; border: 0; background: #000; }
.player-controls { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: .05rem; padding: 4.4rem var(--safe-x) 1rem; background: linear-gradient(0deg, rgba(4, 8, 15, .98) 0%, rgba(4, 8, 15, .86) 38%, rgba(4, 8, 15, .42) 68%, transparent 100%); }
.player-topbar, .player-controls { transition: opacity 220ms linear; }

/* pointer-events matters as much as opacity here. A faded-but-present bar still swallows
   every tap in the region it covers, which on a phone meant the embedded player's own
   seek bar and fullscreen button were unreachable even when our chrome looked gone. */
.player.is-idle .player-topbar,
.player.is-idle .player-controls { opacity: 0; pointer-events: none; }

/* Embedded players draw their own controls along the bottom edge. Ours must not sit on top
   of them, so for embeds the source switcher moves to the top of the screen instead. For
   HLS we own the <video> and there is nothing underneath to collide with. */
.player.is-embed .player-controls {
  top: 5.6rem;
  bottom: auto;
  align-items: flex-end;
  padding: .75rem var(--safe-x) 1.4rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent);
}
.player.is-embed .player-control-deck { display: none; }
.player.is-embed .player-source-panel { position: static; }
.player-timeline-row { display: flex; align-items: center; width: 100%; }
.player-scrubber { position: relative; display: block; width: 100%; height: 1.65rem; margin: 0; padding: 0; border: 0; outline: none; background: transparent; cursor: pointer; }
.player-track { position: absolute; top: 50%; right: 0; left: 0; height: .17rem; overflow: visible; border-radius: 999px; background: rgba(205, 211, 220, .34); transform: translateY(-50%); transition: height 100ms ease; }
.player-track-buffered, .player-track-progress { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: left center; }
.player-track-buffered { background: rgba(218, 223, 231, .52); }
.player-track-progress { background: var(--accent); }
.player-track-thumb { position: absolute; top: 50%; left: 0; width: .72rem; height: .72rem; border-radius: 50%; background: white; box-shadow: 0 0 0 .13rem rgba(229, 9, 20, .32); transform: translate(-50%, -50%) scale(.55); transition: transform 100ms ease; }
.player-scrubber.is-focused .player-track { height: .34rem; }
.player-scrubber:focus-visible .player-track { height: .34rem; }
.player-scrubber.is-focused .player-track-thumb { box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .28); transform: translate(-50%, -50%) scale(1); }
.player-scrubber:focus-visible .player-track-thumb { box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .28); transform: translate(-50%, -50%) scale(1); }
.player-scrubber.is-focused { outline: none; }
.player-scrubber:focus-visible { outline: none; }
.player-time { margin-left: .15rem; color: #eef0f4; font-size: .58rem; font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; }
.player-control-deck { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 2rem; }
.player-control-group, .source-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.player-control-right { margin-left: auto; }
.player-control-button { position: relative; display: inline-flex; align-items: center; justify-content: center; display: inline-grid; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; padding: 0; border: 0; border-radius: .28rem; outline: none; background: transparent; color: #e3e7ed; place-items: center; font-family: inherit; cursor: pointer; transition: background-color 110ms linear, color 110ms linear, transform 110ms ease; }
.player-control-glyph { display: inline-flex; width: 1.3rem; height: 1.3rem; align-items: center; justify-content: center; color: inherit; line-height: 1; }
.player-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.player-icon-play, .player-icon-muted, .player-icon-contract { display: none; }
.player.is-paused .player-icon-play,
.player.is-muted .player-icon-muted,
.player.is-fullscreen .player-icon-contract { display: block; }
.player.is-paused .player-icon-pause,
.player.is-muted .player-icon-volume,
.player.is-fullscreen .player-icon-expand { display: none; }
.player-control-button.is-focused { z-index: 2; outline: none; background: white; color: #080a0e; box-shadow: 0 0 0 .13rem rgba(255, 255, 255, .2); transform: scale(1.08); }
.player-control-button:focus-visible { z-index: 2; outline: none; background: white; color: #080a0e; box-shadow: 0 0 0 .13rem rgba(255, 255, 255, .2); transform: scale(1.08); }
.player-control-button[aria-pressed="true"] { color: white; }
.player-control-button[aria-pressed="true"]::before { position: absolute; right: .35rem; bottom: .27rem; left: .35rem; height: 2px; border-radius: 999px; background: var(--accent); content: ""; }
.player-control-button::after { position: absolute; bottom: calc(100% + .45rem); left: 50%; padding: .32rem .45rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: .2rem; background: rgba(5, 8, 13, .94); color: white; content: attr(aria-label); font-size: .46rem; font-weight: 750; line-height: 1; opacity: 0; pointer-events: none; transform: translate(-50%, .2rem); transition: opacity 100ms linear, transform 100ms ease; white-space: nowrap; }
.player-control-button.is-focused::after, .player-control-button:hover::after { opacity: 1; transform: translate(-50%, 0); }
.player-control-button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.player-source-panel { position: absolute; right: var(--safe-x); bottom: 4.25rem; display: flex; max-width: min(38rem, calc(100vw - (var(--safe-x) * 2))); align-items: center; gap: .6rem; padding: .55rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: .35rem; background: rgba(8, 11, 17, .94); box-shadow: 0 .8rem 2.2rem rgba(0, 0, 0, .48); }
.player-source-label { color: #9b9da4; font-size: .5rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.source-button { min-height: 2.1rem; padding: .4rem .65rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: .28rem; outline: none; background: rgba(20, 23, 30, .88); color: #d8d9dc; font-family: inherit; font-size: .54rem; font-weight: 800; cursor: pointer; }
.source-button.is-active { border-color: rgba(229, 9, 20, .9); box-shadow: inset 3px 0 0 var(--accent); color: white; }
.source-button.is-focused { border-color: white; background: white; color: #08090b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); transform: scale(1.05); }
.source-button:focus-visible { border-color: white; background: white; color: #08090b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); transform: scale(1.05); }
.control-button { min-width: 5.5rem; padding: .65rem .9rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: .35rem; background: rgba(0, 0, 0, .75); font-size: .72rem; font-weight: 800; }
.control-button.is-active { border-color: white; background: white; color: #08090b; }
.player.is-buffering .player-stage video { opacity: .86; }
.player-message { position: absolute; z-index: 4; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); color: white; font-size: .9rem; }
.toast { position: fixed; z-index: 80; right: var(--safe-x); bottom: 3.5rem; max-width: 32rem; padding: .85rem 1rem; border-left: 4px solid var(--accent); border-radius: .25rem; background: #24262c; color: white; font-size: .78rem; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45); }

/* webOS 4.x uses Chromium 53, four releases before CSS Grid. Flex fallbacks keep every
   catalog and picker reachable; current engines take the grid declarations above. */
@supports not (display: grid) {
  .masthead { display: flex; justify-content: space-between; }
  .media-grid, .search-results, .search-filter-options, .genre-options, .search-filters {
    display: flex;
    flex-wrap: wrap;
  }
  .media-grid .movie-card, .search-results .movie-card { width: calc(20% - 1rem); flex: 0 0 calc(20% - 1rem); }
  .search-filter { flex: 1 1 15%; }
  .search-filter-option, .genre-option { width: calc(25% - .75rem); flex: 0 0 calc(25% - .75rem); }
  .search-filter-overlay, .genre-overlay { display: flex; align-items: center; justify-content: center; }
  .search-filter-dialog, .genre-dialog { width: 92vw; }
  .detail-credits { display: block; }
  .detail-credits dt { margin-top: .35rem; }
}

/* Cards otherwise collapse to zero height on engines that predate aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
  .movie-card { height: 11.53vw; min-height: 8.1rem; max-height: 13.5rem; }
}

@media (max-width: 1100px) {
  :root { --safe-x: 1.4rem; --safe-y: 1.15rem; }
  .masthead { grid-template-columns: auto 1fr auto; }
  .brand-name, .signal span:last-child { display: none; }
  .nav { justify-self: center; }
  .hero-content { width: 64vw; }
  .movie-card { flex-basis: 27vw; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-filter-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .genre-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  :root { font-size: 16px; }
  .masthead { display: flex; justify-content: space-between; }
  .status-cluster { display: none; }
  .nav-item { min-width: 2.7rem; padding: .55rem .8rem; }
  .nav-item > span:last-child { display: none; }
  .hero { height: 82vh; min-height: 37rem; }
  .hero-shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(8, 9, 11, .5) 52%, rgba(8, 9, 11, .22) 100%); }
  .hero-content { bottom: 7rem; width: calc(100% - 3rem); }
  .hero-title { font-size: 2.8rem; }
  .hero-overview { font-size: .9rem; -webkit-line-clamp: 3; }
  .hero-count { display: none; }
  .shelves { margin-top: -4rem; }
  .movie-card { flex-basis: 76vw; }
  .media-grid { grid-template-columns: 1fr; }
  .freshness { display: none; }
  .remote-hints { display: none; }
  .search-results { grid-template-columns: 1fr; }
  .search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-filter-dialog { width: 100%; }
  .genre-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genre-dialog { width: 100%; }
  .detail-shade { background: linear-gradient(0deg, rgba(8, 9, 11, .98) 0%, rgba(8, 9, 11, .65) 72%, rgba(8, 9, 11, .18)); }
  .detail-content { bottom: 3rem; width: calc(100% - 3rem); }
  .detail-content h2 { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ===========================================================================
 * Pointer-driven televisions (Hisense VIDAA, LG Magic Remote, Android TV air mouse)
 * ===========================================================================
 * A large class of TV browsers does not deliver arrow keys to the page at all. The D-pad
 * drives an on-screen mouse cursor instead, the browser consumes the keypresses to move it,
 * and no `keydown` ever reaches `handleRemote`. Reported on a Hisense VIDAA set: "the whole
 * time the d-pad was as a mouse". A page cannot switch that off — there is no API for it —
 * so the interface has to be usable with a cursor rather than pretending it is not there.
 *
 * Until this block the app was focus-only: every highlight hung off `.is-focused`, which is
 * applied by our own `focusin` handler, so a viewer pushing a cursor around the screen got no
 * indication of what was under it. These mirror each focus treatment onto `:hover`.
 *
 * Gated on `.is-pointer`, set by app.js the first time a genuine pointer moves, so a
 * remote-driven set never shows a highlight under a cursor it is not using.
 * ======================================================================== */
.is-pointer .shelf-view-all:hover { outline: 3px solid white; outline-offset: 3px; background: white; color: #08090b; transform: scale(1.04); }
.is-pointer .shelf-view-all:hover b { border-color: #08090b; color: #08090b; }
.is-pointer .catalog-more:hover { outline: 3px solid white; outline-offset: 3px; background: white; color: #08090b; transform: scale(1.035); }
.is-pointer .focusable:hover { outline: 3px solid var(--focus); outline-offset: 3px; }
.is-pointer .brand:hover { outline: none; }
.is-pointer .brand:hover .brand-mark { transform: scale(1.1); box-shadow: 0 0 1.15rem rgba(229, 9, 20, .72); }
.is-pointer .nav-item:hover { background: white; color: #08090b; transform: scale(1.035); }
.is-pointer .button:hover,
.is-pointer .control-button:hover { transform: scale(1.055); }
.is-pointer .movie-card:hover { z-index: 5; outline-color: var(--focus); box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .58); transform: scale(1.065) translateZ(0); }
.is-pointer .search-box input.focusable:hover { outline: none; outline-offset: 0; }
.is-pointer .search-filter:hover,
.is-pointer .search-filter-reset:hover {
  z-index: 2;
  border-color: white;
  outline: none;
  box-shadow: 0 0 0 3px white;
  background: rgba(255, 255, 255, .13);
  transform: scale(1.035);
}
.is-pointer .search-filter-option:hover { z-index: 2; border-color: white; outline: none; box-shadow: 0 0 0 3px white; background: rgba(255, 255, 255, .13); transform: scale(1.035); }
.is-pointer .genre-option:hover {
  z-index: 2;
  border-color: white;
  outline: 3px solid white;
  outline-offset: 3px;
  background: white;
  color: #08090b;
  transform: scale(1.035);
}
.is-pointer .genre-option:hover .genre-option-copy > span,
.is-pointer .genre-option:hover .genre-option-arrow { color: #4e5158; }
.is-pointer .player-scrubber:hover .player-track { height: .34rem; }
.is-pointer .player-scrubber:hover .player-track-thumb { box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .28); transform: translate(-50%, -50%) scale(1); }
.is-pointer .player-scrubber:hover { outline: none; }
.is-pointer .player-control-button:hover { z-index: 2; outline: none; background: white; color: #080a0e; box-shadow: 0 0 0 .13rem rgba(255, 255, 255, .2); transform: scale(1.08); }
.is-pointer .player-control-button:hover::after { opacity: 1; transform: translate(-50%, 0); }
.is-pointer .source-button:hover { border-color: white; background: white; color: #08090b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); transform: scale(1.05); }
.is-pointer .movie-card, .is-pointer .nav-item, .is-pointer .button,
.is-pointer .shelf-view-all, .is-pointer .catalog-more, .is-pointer .genre-option,
.is-pointer .search-filter, .is-pointer .search-filter-option, .is-pointer .source-button,
.is-pointer .player-control-button, .is-pointer .icon-button { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * Horizontal shelf paging for cursor users.
 *
 * `.media-row` scrolls on the x axis with its scrollbar hidden, which is right for a D-pad —
 * focus moves and the row follows. A cursor has neither: no scrollbar to grab, and edge-of-
 * screen auto-scroll only pans the page vertically. Every row past the fourth card was
 * simply unreachable on a VIDAA set. These are the missing affordance, shown only in
 * pointer mode so the remote experience is unchanged.
 * ------------------------------------------------------------------------ */
.row-page {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: none;
  width: 3.2rem;
  height: 3.2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 9, 11, .82);
  color: white;
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 120ms linear, transform 120ms ease;
}
.row-page-prev { left: .2rem; }
.row-page-next { right: .2rem; }
.is-pointer .media-shelf { position: relative; }
.is-pointer .row-page { display: flex; }
.is-pointer .row-page:hover { background: white; color: #08090b; transform: translateY(-50%) scale(1.08); }
.row-page[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * Boot fault panel. Replaces the loading animation when web/boot-guard.js gives up.
 * Styled with longhands and no grid so it renders on the very engines it exists to report.
 * ------------------------------------------------------------------------ */
.boot-fault {
  width: 100%;
  max-width: 46rem;
  padding: 0 2rem;
  text-align: left;
}
.boot-fault h1 { margin: 0 0 .5rem; color: #e50914; font-size: 1.5rem; letter-spacing: .04em; }
.boot-fault p { margin: 0 0 1rem; color: #b9bbc2; font-size: .8rem; }
.boot-fault-detail {
  max-height: 40vh;
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .4rem;
  background: rgba(255, 255, 255, .04);
  color: #e6e7ea;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .7rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.boot-fault-actions { display: flex; gap: .75rem; }
.boot-fault-actions button { cursor: pointer; }
.boot-fault-actions button:focus { outline: 3px solid #e50914; outline-offset: 3px; }
.boot-fault-hint { margin: 1rem 0 0; color: #7c7f88; font-size: .68rem; }

/* ---------------------------------------------------------------------------
 * Diagnostics panel, opened with ?diag. See the trace section in web/app.js.
 * `pointer-events: none` so it can never swallow a click on a cursor-driven set.
 * ------------------------------------------------------------------------ */
.diag-panel {
  position: fixed;
  z-index: 900;
  right: .5rem;
  bottom: .5rem;
  left: .5rem;
  max-height: 45vh;
  padding: .6rem .8rem;
  overflow: hidden;
  border: 1px solid rgba(229, 9, 20, .5);
  border-radius: .35rem;
  background: rgba(4, 5, 7, .93);
  color: #d8dae0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .62rem;
  line-height: 1.45;
  pointer-events: none;
}
.diag-panel strong { display: block; margin-bottom: .35rem; color: #e50914; }
.diag-panel pre { margin: 0; white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------------------
 * Vertical page controls for cursor-driven televisions. See attachPageScroll().
 * Sit above the fixed remote hints; hidden whenever an overlay owns the screen.
 * ------------------------------------------------------------------------ */
.page-scroll {
  position: fixed;
  right: 1.1rem;
  z-index: 30;
  display: none;
  width: 3.4rem;
  height: 3.4rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(8, 9, 11, .86);
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  transition: background 120ms linear, transform 120ms ease;
}
.page-scroll-up { top: 42%; }
.page-scroll-down { top: calc(42% + 4.2rem); }
.is-pointer .page-scroll { display: flex; }
.is-pointer .page-scroll:hover { background: white; color: #08090b; transform: scale(1.08); }
.page-scroll[hidden] { display: none !important; }