/* Full Deimos app, Cinema / Jellyfin-style chrome */
html[data-ui="cinema"] {
  --bg: #050308;
  --bg-elev: #0c1016;
  --bg-header: #0a0c10;
  --bg-card: #12161c;
  --border: #ffd36a33;
  --nav-h: clamp(64px, 8.6vmin, 108px);
  --nav-w: clamp(280px, 32vmin, 460px);
  --nav-pad: clamp(10px, 1.5vmin, 22px);
  --nav-font: clamp(16px, 2.4vmin, 30px);
  --nav-label: clamp(12px, 1.55vmin, 18px);
  height: 100%;
  background: #000;
}
/* Default: fill the panel (any smart-TV ratio). Named ratios lock a stage. */
html[data-ui="cinema"] body {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #050308;
  font-family: Noto Sans, Inter, system-ui, sans-serif;
  padding-top: calc(var(--nav-h) + 3px) !important;
  box-sizing: border-box;
}
html[data-ui="cinema"][data-ratio="16/9"],
html[data-ui="cinema"][data-ratio="21/9"],
html[data-ui="cinema"][data-ratio="16/10"],
html[data-ui="cinema"][data-ratio="4/3"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-ui="cinema"][data-ratio="16/9"] body {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}
html[data-ui="cinema"][data-ratio="21/9"] body {
  width: min(100vw, calc(100vh * 21 / 9));
  height: min(100vh, calc(100vw * 9 / 21));
}
html[data-ui="cinema"][data-ratio="16/10"] body {
  width: min(100vw, calc(100vh * 16 / 10));
  height: min(100vh, calc(100vw * 10 / 16));
}
html[data-ui="cinema"][data-ratio="4/3"] body {
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home,
html[data-ui="cinema"][data-ratio="21/9"] .tv-home,
html[data-ui="cinema"][data-ratio="16/10"] .tv-home,
html[data-ui="cinema"][data-ratio="4/3"] .tv-home {
  position: absolute !important;
}
html[data-ui="cinema"] .header {
  height: var(--nav-h);
  padding: 0 var(--nav-h);
  background: rgba(10,12,16,.94);
  border: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--green);
}
html[data-ui="cinema"] .header-mid {
  max-width: min(1100px, 72vw);
  gap: clamp(12px, 2vmin, 28px);
}
html[data-ui="cinema"] .header-right { display: none; }
html[data-ui="cinema"] .nav-toggle {
  left: clamp(8px, 1.2vmin, 18px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(44px, 6.2vmin, 76px);
  height: clamp(44px, 6.2vmin, 76px);
  font-size: clamp(22px, 3.4vmin, 40px);
}
html[data-ui="cinema"] .brand {
  font-size: clamp(16px, 2.5vmin, 30px);
  gap: clamp(8px, 1.2vmin, 16px);
}
html[data-ui="cinema"] .logo {
  width: clamp(36px, 5.4vmin, 68px);
  height: clamp(36px, 5.4vmin, 68px);
}
html[data-ui="cinema"] .ver { font-size: clamp(11px, 1.4vmin, 16px); }
html[data-ui="cinema"] .search {
  width: min(640px, 100%);
  border-radius: clamp(4px, 0.6vmin, 8px);
}
html[data-ui="cinema"] .search input {
  padding: clamp(8px, 1.3vmin, 16px) clamp(12px, 1.6vmin, 20px);
  font-size: clamp(14px, 2vmin, 22px);
}
html[data-ui="cinema"] .search button {
  width: clamp(48px, 7vmin, 80px);
  font-size: clamp(16px, 2.4vmin, 26px);
}
html[data-ui="cinema"] .led { top: var(--nav-h); height: 3px; }
html[data-ui="cinema"] .layout {
  display: block;
  height: 100%;
  min-height: 0;
}
html[data-ui="cinema"] .sidebar {
  position: absolute; top: calc(var(--nav-h) + 3px); left: 0; bottom: 0; z-index: 45;
  width: var(--nav-w); height: auto;
  display: flex; flex-direction: column; flex-wrap: nowrap;
  gap: 4px; padding: var(--nav-pad) var(--nav-pad) clamp(16px, 2vmin, 28px);
  border: 0; border-right: 1px solid var(--green);
  background: #0a0c10;
  overflow-y: auto;
}
html[data-ui="cinema"] .nav-veil { top: calc(var(--nav-h) + 3px); }
html[data-ui="cinema"] .nav-hide {
  padding: clamp(10px, 1.4vmin, 18px);
  font-size: var(--nav-font);
  border-radius: clamp(10px, 1.2vmin, 16px);
}
html[data-ui="cinema"] .nav-label {
  display: block;
  font-size: var(--nav-label);
  letter-spacing: .14em;
  color: #6b7280;
  padding: clamp(12px, 1.8vmin, 22px) clamp(10px, 1.4vmin, 18px) clamp(6px, 0.8vmin, 10px);
}
html[data-ui="cinema"] .nav-item {
  padding: clamp(10px, 1.5vmin, 18px) clamp(12px, 1.8vmin, 22px);
  border-radius: clamp(10px, 1.2vmin, 16px);
  font-weight: 650;
  font-size: var(--nav-font);
  color: #d7dee6;
  min-height: clamp(40px, 5.6vmin, 64px);
}
html[data-ui="cinema"] .nav-item:hover { background: #1c2228; }
html[data-ui="cinema"] .nav-item.active { background: #0c221c; color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
html[data-ui="cinema"] .theme-pick summary { font-size: var(--nav-font); padding: clamp(10px, 1.4vmin, 16px); }
html[data-ui="cinema"] .swatch { width: clamp(22px, 3vmin, 36px); height: clamp(22px, 3vmin, 36px); }
html[data-ui="cinema"] body.nav-hidden .layout { display: block; }
html[data-ui="cinema"] body.nav-hidden .sidebar {
  display: flex;
  -webkit-transform: translateX(-108%);
  transform: translateX(-108%);
}
html[data-ui="cinema"][data-ratio="16/9"] {
  --nav-h: clamp(96px, 11vmin, 140px);
  --nav-w: clamp(360px, 38vmin, 560px);
  --nav-font: clamp(22px, 3.2vmin, 38px);
  --nav-label: clamp(14px, 1.9vmin, 22px);
  --nav-pad: clamp(14px, 1.8vmin, 28px);
}
@media (min-aspect-ratio: 16/10) {
  html[data-ui="cinema"] {
    --nav-h: clamp(72px, 9.2vmin, 118px);
    --nav-w: clamp(300px, 33vmin, 480px);
    --nav-font: clamp(17px, 2.55vmin, 32px);
  }
}
html[data-ui="cinema"] .main { padding: 1.4vmin 2.2vmin 2.4vmin; max-width: none; height: 100%; box-sizing: border-box; overflow: auto; }
html[data-ui="cinema"] .main > h1 {
  font-size: clamp(18px, 2.8vmin, 32px);
  margin: 0 0 1.4vmin;
  letter-spacing: .02em;
}
html[data-ui="cinema"] .site-foot { display: none; }
html[data-ui="cinema"] .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8vmin 1.6vmin;
  align-content: start;
  align-items: start;
}
html[data-ui="cinema"] .card {
  width: auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
html[data-ui="cinema"] .card .thumb {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  border-radius: 1vmin;
  overflow: hidden;
  box-shadow: 0 10px 22px #0008;
  background: #0a0c10;
}
html[data-ui="cinema"] .card .thumb[data-fit="tall"] { aspect-ratio: 2 / 3; }
html[data-ui="cinema"] .card .thumb[data-fit="wide"] { aspect-ratio: 16 / 9; }
html[data-ui="cinema"] .card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
/* YouTube hq/sd stills are 4:3 with black bars — zoom to fill 16:9. */
html[data-ui="cinema"] .card .thumb img[src*="hqdefault"],
html[data-ui="cinema"] .card .thumb img[src*="sddefault"],
html[data-ui="cinema"] .card .thumb img[src*="default.jpg"] {
  transform: scale(1.34);
  transform-origin: center center;
}
html[data-ui="cinema"] .card:hover .thumb,
html[data-ui="cinema"] .card:focus-visible .thumb {
  outline: 3px solid var(--green);
  box-shadow: 0 0 24px var(--green);
}
html[data-ui="cinema"] .card h3 {
  font-size: clamp(12px, 1.55vmin, 16px);
  margin: 0.55vmin 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-ui="cinema"] .card .meta {
  font-size: clamp(10px, 1.2vmin, 13px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  html[data-ui="cinema"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  html[data-ui="cinema"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-ui="cinema"][data-ratio="16/9"] .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Live + IPTV: landscape 16:9 tiles on a 16:9 screen (not movie posters). */
html[data-ui="cinema"] .iptv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 2vmin 1.8vmin;
}
html[data-ui="cinema"][data-ratio="16/9"] .iptv-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2vmin 1.8vmin;
}

/* TV / in-world: never stack pay chips. Viewport width is not the prim. */
html[data-ratio="16/9"] .plans,
html[data-ratio="16/9"] .tv-skus,
html[data-ratio="16/9"] .sync-gate .skus,
html[data-ratio="21/9"] .plans,
html[data-ratio="21/9"] .tv-skus,
html[data-ratio="16/10"] .plans,
html[data-ratio="16/10"] .tv-skus {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html[data-ui="cinema"][data-ratio="16/9"][data-page="iptv"] .grid,
html[data-ui="cinema"][data-ratio="16/9"][data-page="live"] .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2vmin 1.8vmin;
}
html[data-ui="cinema"][data-page="live"] .card .thumb,
html[data-ui="cinema"][data-page="iptv"] .card .thumb,
html[data-ui="cinema"] .live-thumb,
html[data-ui="cinema"] .iptv-thumb {
  aspect-ratio: 16 / 9;
  min-height: clamp(140px, 22vh, 240px);
  height: auto;
  border-radius: 0.8vmin;
}
html[data-ui="cinema"] .iptv-thumb img,
html[data-ui="cinema"][data-page="iptv"] .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-ui="cinema"] .player-page {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 26vw);
  gap: 1.4vmin 1.6vmin;
  height: auto;
  margin: 0;
  align-items: start;
}
html[data-ui="cinema"][data-ratio="16/9"] .player-page,
html[data-ui="cinema"][data-ratio="21/9"] .player-page,
html[data-ui="cinema"][data-ratio="16/10"] .player-page {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 22vw);
  height: 100%;
}
html[data-ui="cinema"] .up-next-list {
  max-height: calc(100vh - 8rem);
  overflow: auto;
  scrollbar-width: thin;
}
html[data-ui="cinema"] .up-next-item {
  grid-template-columns: clamp(96px, 14vmin, 132px) minmax(0, 1fr);
  gap: 8px;
}
html[data-ui="cinema"] .up-next-thumb {
  width: clamp(96px, 14vmin, 132px);
  aspect-ratio: 16 / 9 !important;
  max-height: 76px;
  border-radius: 8px;
  box-shadow: none;
}
html[data-ui="cinema"] .up-next-thumb img {
  transform: none !important;
  object-fit: cover;
}
html[data-ui="cinema"] .up-next-copy b { font-size: clamp(12px, 1.5vmin, 15px); }
html[data-ui="cinema"] .up-next-copy em { font-size: clamp(11px, 1.25vmin, 13px); }
html[data-ui="cinema"] .player-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
html[data-ui="cinema"] .player-wrap #yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
html[data-ui="cinema"] .player-wrap video.player,
html[data-ui="cinema"] .player-wrap iframe.player,
html[data-ui="cinema"] .player-wrap #player,
html[data-ui="cinema"] .player-wrap #yt,
html[data-ui="cinema"] .player-wrap #yt iframe {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  border: 0;
  display: block;
}
html[data-ui="cinema"] .btn-green { background: var(--green); }

html[data-home="tv"] .header .search-wrap,
html[data-home="tv"] .sidebar,
html[data-home="tv"] .nav-veil,
html[data-home="tv"] .site-foot { display: none !important; }
html[data-home="tv"] html,
html[data-home="tv"] body,
html[data-home="tv"] .layout,
html[data-home="tv"] .main {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: none !important;
  height: 100% !important;
}
html[data-home="tv"] body { height: 100%; padding-top: 0 !important; }
html[data-home="tv"] .header { display: none !important; }
html[data-home="tv"] .led { display: none !important; }

.tv-home {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #050308;
  container-type: size;
}
.tv-home > video.tv-imax,
.tv-home > img.tv-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
.tv-comic {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, #3a1a0a66 0%, transparent 48%),
    linear-gradient(180deg, #050308 0%, #12080c 45%, #050308 100%);
  animation: none;
  filter: none;
}
.tv-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.12);
}
html[data-ratio="16/9"] .tv-home > video.tv-imax,
html[data-ratio="16/9"] .tv-home > img.tv-bg,
html[data-ratio="16/9"] .tv-bg,
html[data-ratio="16/9"] .tv-slide img,
html[data-ratio="16/9"] .tv-slide video {
  object-fit: fill !important;
}
html[data-ratio="16/9"] .tv-home .tv-still { background-size: 100% 100%; }
.tv-slides { position: absolute; inset: 0; }
.tv-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2.2s ease;
  pointer-events: none;
}
.tv-slide.on { opacity: 1; }
.tv-slide img, .tv-slide video {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.12);
}
.tv-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 10%, #0008 70%, #000d 100%),
    linear-gradient(180deg, #0006 0%, transparent 28%, #000a 100%);
  pointer-events: none;
}
.tv-stage {
  position: relative; z-index: 2;
  min-height: 100%;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2.4cqh 1.6cqw 3cqh;
}
html[data-home="tv"] .site-foot { display: none !important; }
html[data-home="tv"], html[data-home="tv"] body {
  overflow: hidden !important;
  scrollbar-width: none !important;
}
html[data-home="tv"]::-webkit-scrollbar,
html[data-home="tv"] body::-webkit-scrollbar { display: none !important; }

.tv-home .tv-row {
  overflow: visible !important;
  scrollbar-width: none !important;
}
.tv-home .tv-row::-webkit-scrollbar { display: none !important; width: 0; height: 0; }
.beta-wrap { position: relative; display: inline-block; }
.beta-tag {
  position: absolute; top: 0; right: 6px; transform: translateY(-50%) rotate(10deg);
  background: linear-gradient(90deg, #ff6b6b, #ff3d3d); color: #fff;
  font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 8px;
  box-shadow: 0 6px 12px #0007; z-index: 3; pointer-events: none;
}

/* Second Life 16:9 panel — 10-foot chrome. Smart TVs stay on fill defaults. */
html[data-ui="cinema"][data-ratio="16/9"] .nav-toggle {
  width: clamp(72px, 8.4vmin, 104px) !important;
  height: clamp(72px, 8.4vmin, 104px) !important;
  font-size: clamp(34px, 4.6vmin, 56px) !important;
  left: clamp(10px, 1.4vmin, 22px);
}
html[data-ui="cinema"][data-ratio="16/9"] .header {
  height: var(--nav-h);
  padding: 0 clamp(84px, 10vmin, 140px);
}
html[data-ui="cinema"][data-ratio="16/9"] .nav-item {
  min-height: clamp(52px, 6.4vmin, 78px);
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home {
  --orb: clamp(120px, min(11vw, 20vh), 200px);
  --gap: clamp(18px, 2.4vw, 42px);
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-btn .label {
  font-size: clamp(16px, 2.2vmin, 22px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-btn .count {
  font-size: 14px !important;
  min-height: 18px;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-kicker,
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-sec h2,
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-level,
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-legal,
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-hint {
  font-size: clamp(15px, 2vmin, 22px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-seo {
  font-size: clamp(13px, 1.6vmin, 16px) !important;
  max-width: 36rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-height: 900px) {
  html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-seo { display: none !important; }
  html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-mark { width: clamp(72px, 12vh, 110px) !important; height: clamp(72px, 12vh, 110px) !important; }
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-row {
  padding-bottom: 28px;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-stage {
  justify-content: center;
  padding-bottom: 28px;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-stage h1 {
  font-size: clamp(36px, 5vmin, 58px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-cats {
  gap: 12px;
  margin-bottom: 18px;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-cats a {
  font-size: clamp(16px, 2.4vmin, 26px) !important;
  padding: clamp(12px, 1.8vmin, 20px) clamp(20px, 2.8vmin, 32px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"][data-page="gamesmenu"] .tv-home .tv-btn {
  width: clamp(176px, 18vmin, 240px) !important;
  min-width: clamp(176px, 18vmin, 240px) !important;
  height: clamp(176px, 18vmin, 240px) !important;
  min-height: clamp(176px, 18vmin, 240px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"][data-page="gamesmenu"] .tv-home .tv-btn .thumb {
  width: 100% !important;
  height: 100% !important;
}
html[data-ui="cinema"][data-ratio="16/9"][data-page="gamesmenu"] .tv-home .tv-btn .label {
  padding: 32px 10px 12px;
}
html[data-ui="cinema"][data-ratio="16/9"][data-page="gamesmenu"] .tv-home .tv-stage {
  padding-bottom: 160px;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-go-home {
  width: 110px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-go-home .icon {
  width: 110px !important;
  height: 110px !important;
  border-radius: 26px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-go-home .icon svg {
  width: 44px !important;
  height: 44px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-go-home .label {
  font-size: 16px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-home .tv-account {
  font-size: 16px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro .kicker {
  font-size: 16px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro h1 {
  font-size: clamp(32px, 4.6vmin, 48px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro p,
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro .level {
  font-size: 18px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro .go {
  min-height: 72px;
  font-size: 24px !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .tv-sku b { font-size: 18px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .tv-sku .l$ { font-size: 28px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .tv-sku em { font-size: 15px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro .key-form label { font-size: 16px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .tv-pro a.back { font-size: 18px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .main > h1,
html[data-ui="cinema"][data-ratio="16/9"] .toolbar h1 {
  font-size: clamp(24px, 3.4vmin, 40px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .lead,
html[data-ui="cinema"][data-ratio="16/9"] .meta {
  font-size: clamp(15px, 2vmin, 20px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .card h3 {
  font-size: clamp(16px, 2.2vmin, 22px) !important;
}
html[data-ui="cinema"][data-ratio="16/9"] .btn,
html[data-ui="cinema"][data-ratio="16/9"] .chip {
  font-size: clamp(16px, 2.2vmin, 22px) !important;
  min-height: 48px;
  padding: 12px 20px;
}
html[data-ui="cinema"][data-ratio="16/9"] .duration {
  font-size: 15px !important;
  padding: 4px 8px;
}
html[data-ui="cinema"][data-ratio="16/9"] .guide-page,
html[data-ui="cinema"][data-ratio="16/9"] .guide,
html[data-ui="cinema"][data-ratio="16/9"] article {
  font-size: clamp(16px, 2.1vmin, 22px);
  line-height: 1.45;
}
html[data-ui="cinema"][data-ratio="16/9"] .bg-pick h1 { font-size: 28px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .bg-pick .lede,
html[data-ui="cinema"][data-ratio="16/9"] .bg-card .cap { font-size: 16px !important; }
html[data-ui="cinema"][data-ratio="16/9"] .bg-card button { font-size: 15px !important; padding: 10px 0; }
html[data-ui="cinema"][data-ratio="16/9"] .bg-pick .links a { font-size: 16px !important; padding: 12px 18px; }