:root {
  --bg: #000;
  --fg: #e8f0ff;
  --osd: #7dff9a;
  --osd-shadow: 0 0 6px rgba(125, 255, 154, .7), 0 0 18px rgba(125, 255, 154, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Hide page scrollbar (scrolling by wheel / touch / keys still works) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  /* Prompt: headings + body (free, OFL) */
  font-family: "Prompt", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }

/* ---------- TV loader ---------- */
.tv {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  overflow: hidden;
  contain: strict;
}
.tv__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: contrast(1.15) brightness(.95);
  /* slight jitter, like weak signal */
  animation: jitter .18s steps(2) infinite;
  will-change: transform;
}
@keyframes jitter {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-1px, 1px, 0); }
  100% { transform: translate3d(1px, 0, 0); }
}

/* rolling bright band moving down the screen */
.tv__roll {
  position: absolute;
  left: 0; right: 0;
  top: -30%;
  height: 22%;
  background: linear-gradient(to bottom,
      transparent, rgba(255,255,255,.07) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.07) 60%, transparent);
  mix-blend-mode: screen;
  animation: roll 3.2s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes roll { to { transform: translate3d(0, 600%, 0); } }

.tv__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.tv__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
}
.tv__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

/* ---------- OSD (on-screen display) ---------- */
.osd {
  position: absolute;
  font-family: "VT323", "Prompt", monospace;
  color: var(--osd);
  text-shadow: var(--osd-shadow);
  letter-spacing: .06em;
  user-select: none;
}
.osd--ch {
  top: max(16px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  font-size: clamp(28px, 6vw, 56px);
}
.osd--ch b { font-weight: 400; }
.osd--center {
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 10px;
  padding: 0 16px;
}
.osd__title {
  font-size: clamp(40px, 10vw, 96px);
  line-height: 1;
  background: rgba(0,0,0,.55);
  padding: 4px 18px 8px;
  animation: blink 1.1s steps(1) infinite;
}
.osd__sub {
  font-family: "Prompt", sans-serif;
  font-size: clamp(14px, 3.6vw, 20px);
  background: rgba(0,0,0,.55);
  padding: 2px 12px;
  justify-self: center;
}
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; }
}
@keyframes blink { 50% { opacity: .35; } }

.osd__bar {
  justify-self: center;
  width: min(280px, 70vw);
  height: 10px;
  border: 2px solid var(--osd);
  box-shadow: var(--osd-shadow);
  background: rgba(0,0,0,.55);
}
.osd__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--osd);
  transition: width .35s ease-out;
}

/* ---------- Logo (shows through static when channel found) ---------- */
.tv__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60vmin, 420px);
  height: auto;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
}
.tv.is-found .tv__logo { animation: lockIn 1.1s ease-out forwards; }
@keyframes lockIn {
  /* signal locking: flicker + horizontal slip, then steady */
  0%   { opacity: 0;   transform: translate3d(-58%, -50%, 0) scaleY(.9); filter: blur(3px) saturate(0); }
  12%  { opacity: .5;  transform: translate3d(-44%, -50%, 0); }
  20%  { opacity: .15; }
  32%  { opacity: .75; transform: translate3d(-52%, -50%, 0); filter: blur(1px) saturate(.6); }
  40%  { opacity: .35; }
  55%  { opacity: .9;  transform: translate3d(-49%, -50%, 0); filter: none; }
  100% { opacity: 1;   transform: translate3d(-50%, -50%, 0); filter: none; }
}

/* ---------- Tune-in (signal found) ---------- */
.tv.is-found .osd__title { animation: none; }
.tv.is-found .osd--center { opacity: 0; transition: opacity .25s; }
.tv.is-tuning .tv__flash { animation: flash .45s ease-out forwards; }
.tv.is-tuning { animation: tuneOut .7s .25s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes flash {
  0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; }
}
@keyframes tuneOut {
  0%   { opacity: 1; filter: none; }
  40%  { opacity: 1; filter: brightness(1.8) blur(1px); }
  100% { opacity: 0; filter: brightness(2.5) blur(4px); visibility: hidden; }
}

/* ---------- Home screen (Android TV style) ---------- */
.atv {
  --pad: clamp(16px, 4vw, 72px);
  --card: clamp(132px, 12.5vw, 232px);
  --radius: clamp(12px, 1.2vw, 20px);
  --ink: #2a2d5c;
  --ink-dim: rgba(42, 45, 92, .8);
  --surface: rgba(255, 255, 255, .72);
  --line: rgba(42, 45, 92, .12);
  --shadow-soft: 0 8px 22px rgba(90, 70, 150, .18);
  --shadow-lift: 0 18px 40px rgba(90, 70, 150, .28);
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vw, 32px);
  padding: clamp(14px, 2.4vw, 36px) 0 clamp(20px, 3vw, 48px);
  background: #eadcec; /* avg color of bg image: no flash while it loads */
  color: var(--ink);
  isolation: isolate;
  overflow-x: clip;
}
/* fill "backwards" (not "both"): a transform/filter kept after the animation would make .atv the box for position:fixed children -> fixed background would scroll away */
body:not(.is-loading) .atv { animation: appIn .6s .35s backwards ease-out; } /* plays when the TV loader lets go */
@keyframes appIn {
  from { opacity: 0; transform: scale(1.02); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Page background, picked per device + orientation.
   Fixed layer (not background-attachment: fixed, which is broken on iOS). */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #eadcec url("/img/bg/desktop-1280.webp") center / cover no-repeat;
}
@media (min-width: 1400px), (min-resolution: 1.5dppx) and (min-width: 900px) {
  .bg { background-image: url("/img/bg/desktop-1672.webp"); }
}
@media (orientation: portrait) {
  [data-device="tablet"] .bg { background-image: url("/img/bg/tablet-1086.webp"); background-position: center bottom; }
  [data-device="phone"] .bg  { background-image: url("/img/bg/mobile-941.webp"); background-position: center bottom; }
}
/* Soft white veil: keeps art visible, calms busy areas behind text */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.32));
}

/* PC/TV window resized to tall-narrow -> portrait art fits better */
@media (max-aspect-ratio: 3/4) {
  :is([data-device="desktop"], [data-device="tv"]) .bg { background-image: url("/img/bg/tablet-1086.webp"); background-position: center bottom; }
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 32px);
  padding: 0 var(--pad);
}
.topbar__title { display: none; font: 600 18px "Prompt", sans-serif; color: var(--ink); white-space: nowrap; }
.tabs__icon { display: none; flex: none; }
.topbar__logo {
  width: clamp(36px, 3.2vw, 52px);
  height: auto;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 2px #fff, var(--shadow-soft);
}
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs__item {
  font: inherit;
  font-size: clamp(14px, 1.15vw, 19px);
  color: var(--ink-dim);
  background: none;
  border: 0;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s;
}
.tabs__item { font-weight: 500; }
.tabs__item.is-active { color: var(--ink); font-weight: 600; }
.tabs__item:hover, .tabs__item:focus-visible { background: var(--ink); color: #fff; outline: none; }
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 24px);
  font-size: clamp(13px, 1vw, 17px);
  color: var(--ink-dim);
  white-space: nowrap;
}
/* Device / connection / online count: hidden from visitors (code still updates them) */
.device, .net, .online { display: none !important; }
.net { display: inline-flex; align-items: center; gap: 6px; }
.net i { width: 8px; height: 8px; border-radius: 50%; background: #9aa0b8; }
.net[data-state="online"] i { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.net[data-state="fallback"] i { background: #f6b800; }
.net[data-state="offline"] i { background: #ff5a5a; }
.online b { color: var(--ink); font-weight: 600; }
.clock { font-size: clamp(18px, 1.6vw, 28px); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Hero slideshow */
.hero {
  position: relative;
  /* height capped at 52vh by limiting width, centered */
  width: min(calc(100% - 2 * var(--pad)), calc(52vh * 2033 / 774));
  align-self: center;
  aspect-ratio: 2033 / 774;
  border-radius: calc(var(--radius) * 1.3);
  overflow: hidden;
  background: #f6f1ec;
  box-shadow: var(--shadow-lift);
}
.hero__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
div.hero__slide { cursor: default; }
/* Intro video: whole 16:9 frame centered, sides glow with live video colors */
.hero__slide--video {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  container-type: size; /* video sized from slide box, never taller than banner */
  background: linear-gradient(120deg, #e7dcf7, #f6e3ef);
}
.hero__ambient {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  filter: blur(40px) saturate(1.35) brightness(1.05);
  opacity: .9;
}
.hero__slide--video video {
  position: relative;
  display: block;
  /* largest 1600x914 box that fits: whole frame incl. subtitles always visible */
  width: min(100cqw, 100cqh * 1600 / 914);
  height: min(100cqh, 100cqw * 914 / 1600);
  object-fit: contain;
  /* soft left/right edges melt into the glow */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.hero__sound {
  position: absolute;
  right: clamp(8px, 1.2vw, 16px);
  bottom: clamp(8px, 1.2vw, 16px);
  width: clamp(34px, 2.6vw, 44px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.hero__sound:hover { transform: scale(1.08); }
.hero__sound:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__slide:focus { outline: none; }
/* focus ring drawn on frame (slide itself is clipped) */
.hero:has(.hero__slide:focus-visible),
[data-device="tv"] .hero:has(.hero__slide:focus) {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), var(--shadow-lift);
}

.hero__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: clamp(36px, 3vw, 52px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.hero__arrow--prev { left: clamp(8px, 1.2vw, 18px); }
.hero__arrow--next { right: clamp(8px, 1.2vw, 18px); }
.hero:hover .hero__arrow, .hero__arrow:focus-visible { opacity: 1; }
.hero__arrow:hover { transform: scale(1.08); }
.hero__arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* touch: swipe instead of arrows */
:is([data-device="phone"], [data-device="tablet"]) .hero__arrow { display: none; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.2vw, 16px);
  translate: -50% 0;
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow-soft);
}
/* video slide: dots move to left glow area so they don't cover subtitles */
/* Video slide: no dots (they covered the video) */
.hero[data-video] .hero__dots { display: none; }
.hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(42, 45, 92, .28);
  cursor: pointer;
  transition: width .25s, background-color .25s;
}
.hero__dot[aria-current] { width: 22px; background: var(--ink); }
/* bigger tap target on touch without bigger dot */
:is([data-device="phone"], [data-device="tablet"]) .hero__dot { position: relative; }
:is([data-device="phone"], [data-device="tablet"]) .hero__dot::after { content: ""; position: absolute; inset: -8px -3px; }
@media (max-width: 640px) {
  .hero__dots { gap: 5px; padding: 5px 8px; }
  .hero__dot { width: 6px; height: 6px; }
  .hero__dot[aria-current] { width: 16px; }
}

/* App row */
.row { display: grid; gap: 10px; }
.row__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 var(--pad);
}
.row h2 {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 600;
}
.row__focus { color: var(--ink-dim); font-size: clamp(13px, 1.05vw, 18px); }
/* Wraps to new rows, never wider than screen. No overflow = focus glow never clipped. */
.row__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card), 1fr));
  gap: clamp(20px, 2vw, 34px) clamp(14px, 1.6vw, 28px);
  padding: 8px var(--pad) 12px;
}
.row__track .card { width: auto; min-width: 0; }
a.card { display: block; text-decoration: none; }
.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; }

.card {
  flex: none;
  width: var(--card);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.card__art {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__name {
  display: block;
  margin-top: 10px;
  font-size: clamp(13px, 1.05vw, 17px);
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s;
}
.card:focus { outline: none; }
/* App with nothing in stock: grey image, still clickable */
.card__art img { transition: filter .3s, opacity .3s; }
.card.is-out .card__art img { filter: grayscale(1); opacity: .55; }

/* Focus zoom = TV/PC (remote, keyboard, mouse). Touch devices use press feedback instead. */
.card:focus-visible .card__art,
 [data-device="tv"] .card:focus .card__art,
[data-device="desktop"] .card:hover .card__art {
  transform: scale(1.1) translateZ(0);
  box-shadow:
    0 0 0 3px #fff,
    0 0 28px 4px color-mix(in srgb, var(--glow) 70%, transparent),
    var(--shadow-lift);
}
.card:focus-visible .card__name,
[data-device="tv"] .card:focus .card__name,
[data-device="desktop"] .card:hover .card__name { color: var(--ink); }
:is([data-device="tv"], [data-device="desktop"]) .card.is-press .card__art { animation: press .28s ease-out; }
@keyframes press { 40% { transform: scale(1.02); } 100% { transform: scale(1.1); } }

/* ---------- Per-device app-track layout ---------- */

/* TV: bigger cards, readable from the sofa */
[data-device="tv"] .atv { --card: clamp(160px, 14vw, 260px); }
[data-device="tv"] .card__name { font-size: clamp(15px, 1.2vw, 20px); }

/* Tablet + phone: grid, see every app at once, no sideways scrolling */
:is([data-device="tablet"], [data-device="phone"]) .row__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  overflow: visible;
  margin: 0;
  padding: 4px var(--pad) 8px;
}
:is([data-device="tablet"], [data-device="phone"]) .card { width: auto; }
:is([data-device="tablet"], [data-device="phone"]) .card__art {
  transition: transform .12s ease-out, box-shadow .12s;
}
:is([data-device="tablet"], [data-device="phone"]) .card:active .card__art {
  transform: scale(.94);
  box-shadow: 0 0 0 2px #fff, 0 0 22px 2px color-mix(in srgb, var(--glow) 65%, transparent);
}
:is([data-device="tablet"], [data-device="phone"]) .card__name { text-align: center; }

[data-device="tablet"] .atv { --cell: clamp(130px, 15vw, 190px); }
[data-device="tablet"] .row__track { gap: clamp(16px, 2.4vw, 28px); }

[data-device="phone"] .atv { --cell: 92px; }
[data-device="phone"] .row__track { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
[data-device="phone"] .card__name { font-size: 12.5px; margin-top: 6px; }
@media (min-width: 560px) {
  /* phone in landscape */
  [data-device="phone"] .row__track { grid-template-columns: repeat(5, 1fr); }
}

/* Device chip in top bar */
.device {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-size: .85em;
  color: var(--ink-dim);
}
.device:empty { display: none; }

/* ---------- Views ---------- */
.view {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vw, 32px);
}
.view[hidden] { display: none; }

/* ---------- App page ---------- */
.detail { padding: 0 var(--pad); --glow: #fff; }


.detail__main {
  display: grid;
  gap: clamp(18px, 2.4vw, 36px);
}
.detail__art {
  position: relative;
  aspect-ratio: 2033 / 774;
  /* cap height at 58vh by limiting width, then center */
  width: min(100%, calc(58vh * 2033 / 774));
  justify-self: center;
  border-radius: calc(var(--radius) * 1.4);
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 0 0 3px #fff,
    0 0 60px -6px color-mix(in srgb, var(--glow) 55%, transparent),
    var(--shadow-lift);
}
.detail__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail__ch {
  position: absolute;
  top: clamp(8px, 1.2vw, 18px);
  right: clamp(10px, 1.4vw, 22px);
  padding: 2px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  font-family: "VT323", monospace;
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--osd);
  text-shadow: var(--osd-shadow);
}
.detail__ch b { font-weight: 400; }

.detail__info { min-width: 0; width: min(100%, calc(58vh * 2033 / 774)); justify-self: center; }
.detail__name {
  margin: 0;
  font-size: clamp(30px, 4vw, 64px);
  font-weight: 600;
  line-height: 1.1;
}
.detail__tagline {
  margin: 6px 0 0;
  font-size: clamp(15px, 1.4vw, 22px);
  color: color-mix(in srgb, var(--glow) 75%, var(--ink));
}
.detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.detail__tags li {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--surface);
  font-size: clamp(12px, .95vw, 15px);
  color: var(--ink-dim);
}
.detail__desc {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.65;
  color: var(--ink-dim);
}

.btn {
  padding: 10px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: clamp(15px, 1.15vw, 19px);
  cursor: pointer;
  transition: transform .18s, background-color .2s, color .2s, box-shadow .2s;
}
.btn--primary { background: var(--glow); color: var(--on-glow, #fff); font-weight: 600; }
.btn:hover, .btn:focus-visible {
  outline: none;
  transform: scale(1.05);
  box-shadow: 0 0 0 3px #fff, 0 0 24px color-mix(in srgb, var(--glow) 60%, transparent);
}
.btn:not(.btn--primary):hover, .btn:not(.btn--primary):focus-visible { background: var(--ink); color: #fff; }
[data-device="tv"] .btn:focus {
  outline: none;
  transform: scale(1.05);
  box-shadow: 0 0 0 3px #fff, 0 0 24px color-mix(in srgb, var(--glow) 60%, transparent);
}

.detail__section h2 {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 600;
}

/* Packages */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 230px), 1fr));
  gap: 14px;
}
.plan {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s, box-shadow .2s;
}
.plan__name { color: var(--ink-dim); font-size: .95em; }
.plan__price { font-size: clamp(22px, 2vw, 32px); font-weight: 600; }
.plan__note { color: var(--ink-dim); font-size: .85em; }
.plan:hover, .plan:focus-visible, [data-device="tv"] .plan:focus {
  outline: none;
  transform: scale(1.04);
  box-shadow: 0 0 0 3px #fff, 0 0 24px color-mix(in srgb, var(--glow) 55%, transparent);
}
.plan--empty {
  grid-column: 1 / -1;
  cursor: default;
  color: var(--ink-dim);
  border: 1.5px dashed rgba(42, 45, 92, .25);
  background: none;
  text-align: center;
}
.plan--empty:hover { transform: none; box-shadow: none; }

/* Other channels */
.minis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 8.5vw, 140px), 1fr));
  gap: 16px 14px;
}
.mini {
  display: grid;
  gap: 6px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: clamp(12px, .9vw, 15px);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.mini img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s;
}
.mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini:focus { outline: none; }
.mini:focus-visible img,
[data-device="tv"] .mini:focus img,
[data-device="desktop"] .mini:hover img {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px #fff, 0 0 20px color-mix(in srgb, var(--glow) 65%, transparent);
}
.mini:is(:hover, :focus-visible) span { color: var(--ink); }
.mini:active img { transform: scale(.94); }
/* Channel with nothing to sell: grey like home cards, still clickable */
.mini img { transition: transform .2s, box-shadow .2s, filter .3s, opacity .3s; }
.mini.is-out img { filter: grayscale(1); opacity: .55; }

@media (max-width: 640px) {
  .detail__main { text-align: center; }
  .detail__tags { justify-content: center; }
  .detail__desc { margin-inline: auto; }
  .btn { flex: 1 1 auto; }
  .minis { grid-template-columns: repeat(4, 1fr); gap: 12px 10px; }
}

/* Display font for headings, prices, primary labels */
.detail__name, .detail__tagline, .row h2, .detail__section h2, .plan__price, .btn--primary, .tabs__item, .clock, .osd__sub {
  font-family: "Prompt", sans-serif;
  /* no "fl"/"fi" joined glyphs (keeps Netflix looking normal) */
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0;
}

/* ---------- Glass panels: text always sits on a clean surface, bg art shows around ---------- */
.topbar, .row, .detail__info, .detail__section {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: 0 10px 30px rgba(90, 70, 150, .16);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar, .row, .detail__info, .detail__section {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }
}
/* inside panels, chips/buttons need contrast against white */
.atv { --surface: rgba(42, 45, 92, .07); }

/* Top bar */
.topbar {
  margin: 0 var(--pad);
  padding: 10px clamp(12px, 1.6vw, 24px);
}

/* Home app row: panel with its own inner padding */
.row {
  margin: 0 clamp(16px, 4vw, 72px); /* = outer --pad of .atv (var would read the inner value below) */
  padding: clamp(14px, 1.6vw, 24px) 0;
  --pad: clamp(14px, 1.6vw, 24px); /* inner spacing (row__head / track use --pad) */
}

/* App page: every block same width as banner, centered */
.detail { --content-w: min(100%, calc(58vh * 2033 / 774)); }
.detail__info, .detail__section {
  width: var(--content-w);
  align-self: center;
  justify-self: center;
  padding: clamp(16px, 2vw, 30px);
}

@media (max-width: 640px) {
  .topbar { padding: 10px 12px; }
  .detail__info, .detail__section { padding: 16px; }
}

/* ---------- Channel change (zap) ---------- */
.zap {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}
.zap[hidden] { display: none; }
.zap__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: contrast(1.15) brightness(.9);
}
.zap .tv__roll { animation-duration: .9s; }
/* CRT: thin bright line opens to full screen, like signal switching */
.zap.is-in { animation: zapIn .16s cubic-bezier(.2,.9,.3,1) both; }
.zap.is-out { animation: zapOut .26s ease-in forwards; }
@keyframes zapIn {
  0%   { clip-path: inset(49.5% 0 49.5% 0); filter: brightness(3); }
  60%  { clip-path: inset(10% 0 10% 0); filter: brightness(1.6); }
  100% { clip-path: inset(0); filter: none; }
}
@keyframes zapOut {
  0%   { opacity: 1; transform: none; }
  35%  { opacity: 1; transform: translate3d(0, -6%, 0); filter: brightness(1.5); } /* vertical hold slip */
  100% { opacity: 0; transform: translate3d(0, 3%, 0); filter: brightness(2); }
}
.zap__osd {
  top: max(16px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  font-size: clamp(30px, 6vw, 64px);
  text-align: right;
  line-height: 1;
}
.zap__osd b { font-weight: 400; }
.zap__name {
  display: block;
  margin-top: 6px;
  font-size: .5em;
  color: #fff;
  text-shadow: 0 0 10px var(--glow), 0 0 2px #000;
}
.zap.is-in .zap__osd { animation: osdIn .5s steps(3) both; }
@keyframes osdIn { 0% { opacity: 0; } 34% { opacity: 1; } 67% { opacity: .6; } 100% { opacity: 1; } }

/* Toast */
/* ---------- Menu pages (app list, terms) ---------- */
.page { padding: 0 var(--pad); }
.page__head h1, .terms h1 { margin: 0; font-size: clamp(22px, 2.2vw, 36px); font-weight: 700; }
.page__head p { margin: 6px 0 0; color: var(--ink-dim); font-size: clamp(13px, 1.05vw, 17px); }
.apps-grid { padding-inline: 0; }
.card__tagline {
  display: block;
  margin-top: 2px;
  font-size: clamp(12px, .85vw, 14px);
  color: var(--ink-dim);
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Terms: readable text block on a soft card */
.terms {
  width: min(100%, 860px);
  align-self: center;
  padding: clamp(20px, 3vw, 44px);
  border-radius: calc(var(--radius) * 1.3);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  line-height: 1.75;
  font-size: clamp(14px, 1vw, 17px);
}
.terms__updated { margin: 4px 0 18px; color: var(--ink-dim); font-size: .9em; }
.terms h2 { margin: 26px 0 6px; font-size: 1.15em; font-weight: 600; }
.terms p { margin: 0 0 10px; }
.terms ul { margin: 0 0 10px; padding-left: 1.3em; }
.terms li { margin-bottom: 4px; }
.terms li::marker { color: var(--ink-dim); }

/* Copyright line at page bottom */
.site-foot {
  margin-top: auto; /* pushed to bottom on short pages */
  padding: clamp(28px, 3vw, 44px) var(--pad) clamp(14px, 1.5vw, 20px);
  font-size: clamp(13px, .9vw, 14.5px);
  color: var(--ink-dim);
}
.foot {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: calc(var(--radius) * 1.4);
  background: rgba(255, 255, 255, .62);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.foot__brand { display: grid; align-content: start; gap: 10px; }
.foot__logo { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--ink); text-decoration: none; }
.foot__logo img { border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.foot__logo b { font-size: 1.25em; font-weight: 700; }
.foot__brand p { margin: 0; line-height: 1.65; max-width: 56ch; }
.foot__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.foot__badges li { padding: 3px 11px; border-radius: 999px; background: rgba(42, 45, 92, .07); color: var(--ink); font-size: .88em; }
.foot__col { display: grid; align-content: start; gap: 8px; }
.foot__col h3 { margin: 4px 0 4px; color: var(--ink); font-size: 1em; font-weight: 600; }
.foot__col a { width: fit-content; color: var(--ink-dim); text-decoration: none; }
.foot__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__col a[hidden] { display: none; }
.foot__en { max-width: 1100px; margin: 14px auto 0; padding: 0 clamp(20px, 2.4vw, 32px); font-size: .86em; line-height: 1.6; opacity: .85; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; max-width: 1100px; margin: 10px auto 0; padding: 12px clamp(20px, 2.4vw, 32px) 0; border-top: 1px solid var(--line); font-size: .88em; }
.site-foot a { color: inherit; text-underline-offset: 3px; }
.site-foot a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__bar { justify-content: center; text-align: center; }
}

/* ---------- Floating contact button (bottom right) ---------- */
/* same frosted-glass look as top bar / panels */
.fab-contact {
  --fab-bg: #fff; /* fill of the 3 dots inside the bubble icon */
  position: fixed;
  z-index: 45;
  right: max(clamp(14px, 1.6vw, 28px), env(safe-area-inset-right));
  bottom: max(clamp(14px, 1.6vw, 28px), env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: clamp(44px, 3vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .95);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(90, 70, 150, .22);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
/* hover = dark like active menu item */
.fab-contact:hover, .fab-contact:focus-visible {
  --fab-bg: var(--ink);
  transform: translateY(-3px);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 14px 32px rgba(90, 70, 150, .35);
  outline: none;
}
.fab-contact:active { transform: scale(.95); }
/* green "online" dot with soft pulse */
.fab-contact__dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 2px #fff;
}
.fab-contact__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3ddc84;
  animation: fabPulse 2s ease-out infinite;
}
@keyframes fabPulse { to { transform: scale(2.4); opacity: 0; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(20, 24, 40, .92);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* Phone */
@media (max-width: 640px) {
  .online { display: none; }
  .net span { display: none; }
  .device { display: none; }

  /* Top bar: one compact row */
  /* no blur here: backdrop-filter would trap the fixed bottom menu inside this bar */
  .topbar { gap: 10px; padding: 8px 14px 8px 8px !important; border-radius: 999px; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, .9) !important; }
  .topbar__logo { width: 38px; }
  .topbar__title { display: block; }
  .clock { font-size: 18px; }

  /* Menu -> bottom bar like a phone app (thumb reach) */
  .tabs {
    position: fixed;
    z-index: 40;
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    justify-content: space-around;
    gap: 0;
    padding: 6px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 10px 30px rgba(90, 70, 150, .25);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    overflow: visible;
  }
  .tabs__item {
    flex: 1;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center; /* long label (ข้อกำหนดการใช้งาน) may wrap on narrow phones */
    color: var(--ink-dim);
  }
  .tabs__icon { display: block; }
  .tabs__item.is-active { background: var(--ink); color: #fff; }
  .tabs__item:hover:not(.is-active) { background: none; color: var(--ink); }
  /* room so last content is not hidden behind bottom bar */
  .atv { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* contact button: icon only, sits above bottom menu */
  .fab-contact { bottom: calc(86px + env(safe-area-inset-bottom)); }

  /* remote helper label not needed on touch */
  .row__focus { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-contact__dot::after { animation: none; }
  .tv__noise, .tv__roll, .osd__title { animation: none; }
  .card__art, .btn, .plan, .mini img, .hero__arrow, .hero__dot { transition: none; }
  .zap.is-in, .zap.is-out, .zap .tv__roll { animation: none; }
  .zap.is-out { opacity: 0; transition: opacity .2s; }
}