/* Caytopia: TV remote + overlay (Island Luxe). Owned by tv.js. */
.nltv-video { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; z-index: -1; }
.nltv-video.nltv-full, .nltv-overlay.nltv-full { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; opacity: 1 !important; z-index: 9400 !important; background: #000; object-fit: contain; pointer-events: auto; }
.nltv-overlay { position: absolute; z-index: 5; border: 0; background: #000; object-fit: cover; pointer-events: none; }
.nltv-ui { position: absolute; inset: 0; z-index: 9300; pointer-events: none; font-family: var(--nl-font-ui, "Plus Jakarta Sans", system-ui, sans-serif); -webkit-tap-highlight-color: transparent; }
.nltv-ui * { box-sizing: border-box; }
.nltv-ui button { font-family: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* the remote: a bottom-anchored side remote. Tucked = only its top handle (LCD) peeks above the bottom edge, raised = springs up beside the TV like the phone sheet.
   JS (tv.js layout()) sets --x (centre px), --s (scale), --h (natural height px), --peek, --b (bottom gap). */
.nltv-ui { overflow: hidden; }
.nltv-remote { --s: 1; --x: 50%; --h: 540px; --peek: 80px; --b: 10px; --dy: 0px; --ty: 0px; position: absolute; left: var(--x); bottom: calc(var(--b) + env(safe-area-inset-bottom, 0px)); width: 214px; pointer-events: none; touch-action: none; transform-origin: 50% 100%;
  transform: translate(-50%, calc(var(--ty) + var(--dy))) scale(var(--s)); transition: transform .62s cubic-bezier(.2, .9, .25, 1.04); will-change: transform; }
.nltv-ui.open .nltv-remote { --ty: 0px; pointer-events: auto; }
.nltv-ui.min .nltv-remote { --ty: calc(var(--h) * var(--s) - var(--peek) + var(--b) + env(safe-area-inset-bottom, 0px)); pointer-events: auto; cursor: pointer; transition-duration: .46s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.nltv-ui.gone .nltv-remote { --ty: calc(var(--h) + 40px); pointer-events: none; }
.nltv-remote.drag { transition: none; }
.nltv-body { position: relative; padding: 10px 16px 16px; border-radius: 34px 34px 40px 40px; display: flex; flex-direction: column; gap: 12px; align-items: stretch;
  background: radial-gradient(120% 45% at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, rgba(0, 0, 0, 0) 1px 3px), linear-gradient(172deg, #2b2f38 0%, #191c23 52%, #101217 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 1px 0 0 rgba(255, 255, 255, .06) inset, -1px 0 0 rgba(0, 0, 0, .5) inset, 0 -3px 8px rgba(0, 0, 0, .55) inset, 0 28px 54px rgba(5, 10, 25, .55), 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .75); }
.nltv-body::before { content: ""; position: absolute; left: 50%; top: 5px; width: 54px; height: 3px; border-radius: 3px; transform: translateX(-50%); background: linear-gradient(90deg, #FFC72C, #00C2C7); opacity: .85; }
.nltv-ir { height: 9px; margin: 2px auto 0; width: 64px; border-radius: 5px; background: linear-gradient(180deg, #3b0d12, #1a0507); box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px #000 inset; position: relative; }
.nltv-led { position: absolute; right: 7px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: #3dffa5; box-shadow: 0 0 5px #3dffa5; }
.nltv-standby .nltv-led { background: #ff3b30; box-shadow: 0 0 5px #ff3b30; }
.nltv-lcd { border-radius: 10px; padding: 7px 10px 7px; background: radial-gradient(130% 120% at 50% 0, #0f2a2c, #071418 60%, #040b0e); box-shadow: 0 2px 6px #000 inset, 0 1px 0 rgba(255, 255, 255, .1); color: #5af0d0; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; min-height: 44px; }
.nltv-ln { grid-row: span 2; font: 700 26px/1 ui-monospace, "SF Mono", Menlo, monospace; text-shadow: 0 0 8px rgba(90, 240, 208, .6); min-width: 34px; text-align: center; }
.nltv-lc { font: 700 12px/1.1 ui-monospace, "SF Mono", Menlo, monospace; color: #ffb347; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nltv-ls { font: 700 9px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; }
.nltv-ls.on { color: #3dffa5; } .nltv-ls.off { color: #ff6b6b; } .nltv-ls.wait { color: #ffd36b; }
.nltv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nltv-b { appearance: none; border: 0; cursor: pointer; color: #d9e2ea; display: inline-grid; place-items: center; background: linear-gradient(180deg, #3a3f4a, #23262e); border-radius: 13px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 -2px 3px rgba(0, 0, 0, .45) inset, 0 3px 5px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .7);
  transition: transform .12s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s, filter .15s; font-weight: 800; font-size: 17px; }
.nltv-b svg { width: 20px; height: 20px; display: block; pointer-events: none; }
.nltv-b:hover { filter: brightness(1.15); } .nltv-b:active { transform: translateY(2px) scale(.96); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(0, 0, 0, .6); }
.nltv-b:focus-visible { outline: 2px solid #2FD9D0; outline-offset: 2px; }
.nltv-pwr { width: 52px; height: 52px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 25%, #ff6a7a, #d4202f 62%, #8f1018); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 -3px 5px rgba(0, 0, 0, .35) inset, 0 4px 9px rgba(180, 20, 35, .4), 0 0 0 1px rgba(0, 0, 0, .7); }
.nltv-pwr svg { width: 24px; height: 24px; }
.nltv-standby .nltv-pwr { background: radial-gradient(circle at 35% 25%, #4b505c, #2a2d35 62%, #1a1c22); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 3px 6px rgba(0, 0, 0, .5), 0 0 0 1px #000; }
.nltv-sm { width: 44px; height: 44px; border-radius: 50%; }
.nltv-muted [data-a="mute"] { color: #FFC72C; }
.nltv-dpad { position: relative; width: 168px; height: 168px; margin: 2px auto; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2d313b, #15171d 70%); box-shadow: 0 2px 8px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px #000; }
.nltv-dpad .nltv-b { position: absolute; width: 54px; height: 54px; border-radius: 16px; background: transparent; box-shadow: none; color: #cfe0e8; }
.nltv-dpad .nltv-b:active { background: rgba(47, 217, 208, .18); transform: scale(.94); }
.nltv-u { left: 57px; top: 5px; } .nltv-d { left: 57px; bottom: 5px; } .nltv-l { left: 5px; top: 57px; } .nltv-r { right: 5px; top: 57px; }
.nltv-dpad .nltv-ok { left: 50%; top: 50%; margin: -31px 0 0 -31px; width: 62px; height: 62px; border-radius: 50%; font-size: 15px; letter-spacing: .06em; color: #0B1430; background: radial-gradient(circle at 35% 25%, #ffe9a6, #FFC72C 60%, #d99a00); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 5px rgba(120, 70, 0, .35) inset, 0 4px 9px rgba(0, 0, 0, .5); }
.nltv-dpad .nltv-ok:active { background: radial-gradient(circle at 35% 25%, #ffe9a6, #FFC72C 60%, #d99a00); transform: scale(.94); }
.nltv-rock { display: flex; align-items: center; justify-content: space-between; }
.nltv-rk { display: flex; flex-direction: column; align-items: center; width: 54px; border-radius: 27px; padding: 3px; background: #14161c; box-shadow: 0 2px 6px #000 inset, 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px #000; }
.nltv-rk .nltv-b { width: 46px; height: 40px; border-radius: 23px; font-size: 22px; line-height: 1; }
.nltv-rk span { font: 800 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: #8fa3ae; padding: 5px 0; }
.nltv-listb { width: 50px; height: 50px; flex-direction: column; gap: 1px; } .nltv-listb svg { width: 18px; height: 18px; } .nltv-listb small { font: 800 7.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.nltv-stand { appearance: none; border: 0; cursor: pointer; height: 46px; border-radius: 23px; font-weight: 800; font-size: 14px; letter-spacing: .02em; color: #0B1430; background: linear-gradient(180deg, #7ff3ea, #2FD9D0 55%, #00A693); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 5px rgba(0, 60, 60, .3) inset, 0 5px 12px rgba(0, 166, 147, .35), 0 0 0 1px rgba(0, 0, 0, .6); transition: transform .12s, filter .15s; }
.nltv-stand:active { transform: scale(.97); } .nltv-stand:hover { filter: brightness(1.06); }

/* channel list sheet over the remote */
.nltv-list { position: absolute; inset: 8px -6px 8px -6px; z-index: 3; border-radius: 28px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, rgba(20, 26, 44, .97), rgba(11, 20, 48, .98)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 20px 40px rgba(0, 0, 0, .5); animation: nltv-pop .28s cubic-bezier(.2, .9, .25, 1); }
.nltv-list[hidden] { display: none; }
@keyframes nltv-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.nltv-lh { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px 18px; color: #fff; font-size: 14px; }
.nltv-x { appearance: none; border: 0; width: 30px; height: 30px; border-radius: 50%; color: #cfe0e8; background: rgba(255, 255, 255, .1); cursor: pointer; font-size: 13px; }
.nltv-lb { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 7px; -webkit-overflow-scrolling: touch; }
.nltv-ch { appearance: none; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .05); color: #fff; border-radius: 16px; padding: 8px; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; min-height: 56px; transition: background .15s, transform .12s; }
.nltv-ch:active { transform: scale(.98); } .nltv-ch:hover { background: rgba(255, 255, 255, .1); }
.nltv-ch.sel { border-color: #2FD9D0; background: rgba(47, 217, 208, .14); }
.nltv-cn { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: var(--t, #00A9B5); }
.nltv-cn img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; background: #fff; border-radius: 8px; }
.nltv-cn em { font: 800 13px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.nltv-cn img + em { position: absolute; right: 1px; bottom: 1px; font-size: 8px; background: rgba(0, 0, 0, .6); padding: 1px 3px; border-radius: 4px; }
.nltv-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nltv-ct b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nltv-ct small { font-size: 10.5px; color: #93a3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nltv-pill { flex: 0 0 auto; font: 800 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; padding: 5px 7px; border-radius: 999px; }
.nltv-pill.on { color: #04281c; background: #3dffa5; } .nltv-pill.off { color: #ffd0d4; background: rgba(255, 77, 94, .3); }
.nltv-offair .nltv-ct b { opacity: .6; }

/* collapsed: small remote button, bottom centre */
.nltv-fab { display: none !important; position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; border: 0; cursor: pointer; pointer-events: auto; color: #e9eef3; z-index: 2;
  background: linear-gradient(180deg, #343843, #16181e); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 4px rgba(47, 217, 208, .22); animation: nltv-fab .45s cubic-bezier(.2, 1.4, .4, 1); }
.nltv-fab[hidden] { display: none; } .nltv-fab svg { width: 26px; height: 26px; }
@keyframes nltv-fab { from { opacity: 0; transform: translateY(24px) scale(.6); } }
.nltv-fsx { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 9500; pointer-events: auto; appearance: none; border: 0; height: 42px; padding: 0 18px; border-radius: 21px; font-weight: 800; color: #fff; background: rgba(11, 20, 48, .78); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; cursor: pointer; }
.nltv-fsx[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nltv-remote, .nltv-list, .nltv-fab { transition: none; animation: none; } }

.int-root.nltv-on .int-act { display: none !important; }

/* ---- LQA: remote is never scaled below touch size; landscape phones get a two-column remote, always centred ---- */
.nltv-rk .nltv-b { height: 44px; } .nltv-x { width: 44px; height: 44px; } .nltv-fsx { height: 44px; }
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .nltv-remote { width: min(372px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); --peek: 78px; --b: 6px; }
  .nltv-body { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 14px; row-gap: 8px; align-items: center; padding: 10px 14px 12px; border-radius: 30px; }
  .nltv-ir { display: none; } .nltv-lcd { grid-column: 1; grid-row: 1; align-self: start; margin-top: 6px; }
  .nltv-row { grid-column: 1; grid-row: 2; align-self: start; } .nltv-stand { grid-column: 1; grid-row: 3; }
  .nltv-dpad { grid-column: 2; grid-row: 1 / 3; margin: 0; } .nltv-rock { grid-column: 2; grid-row: 3; }
  .nltv-list { inset: 6px 0; }
  .nltv-fab { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* handle affordance + guarantees */
.nltv-list { touch-action: pan-y; } .nltv-lb { touch-action: pan-y; }
.nltv-ui.min .nltv-body::before { width: 44px; height: 4px; top: 4px; animation: nltv-nudge 2.4s ease-in-out 1s 2; }
@keyframes nltv-nudge { 50% { transform: translate(-50%, -3px); } }
.nltv-fs .nltv-ui .nltv-remote { pointer-events: none; }
#hud > .nltv-ui, #hud > .nltv-ui * { pointer-events: none; } #hud > .nltv-ui .nltv-remote, #hud > .nltv-ui .nltv-remote *, #hud > .nltv-ui .nltv-fsx { pointer-events: auto; }
.nltv-ui.gone .nltv-remote, .nltv-ui.gone .nltv-remote * { pointer-events: none !important; }