{{template "header" .}}
<style>
html[data-home="tv"], html[data-home="tv"] body, html[data-home="tv"] .main, html[data-home="tv"] .layout {
  padding: 0 !important; margin: 0 !important; overflow: hidden !important;
  height: 100% !important; max-width: none !important;
  scrollbar-width: none !important;
}
html[data-home="tv"]::-webkit-scrollbar, html[data-home="tv"] body::-webkit-scrollbar { display: none !important; width: 0; height: 0; }
html[data-home="tv"] .header, html[data-home="tv"] .led, html[data-home="tv"] .site-foot { display: none !important; }
html[data-home="tv"] body { overflow: hidden !important; height: 100dvh !important; padding-top: 0 !important; }
.tv-home {
  --db: var(--green);
  --db-hi: var(--green-hover);
  --d65: #dce8f5;
  --d65-hi: #f4f7fb;
  --d65-dim: #9aadc0;
  --orb: clamp(89px, 13.2vmin, 144px);
  --gap: clamp(13px, 2.4vmin, 34px);
  --rad: calc(var(--orb) * 0.236);
  --ico: calc(var(--orb) * 0.382);
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  overflow: hidden !important; background: #050308;
}
.tv-home .tv-still {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 2.4s ease;
  pointer-events: none;
}
.tv-home .tv-still.on { opacity: 1; }
.tv-home .tv-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 28%, #0003 72%, #0008 100%);
}
.tv-home .tv-stage {
  position: relative; z-index: 4;
  height: 100%; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 13px 13px 21px;
  overflow: hidden;
}
.tv-home .tv-mark {
  width: var(--orb) !important; height: var(--orb) !important; border-radius: 50% !important;
  object-fit: cover !important; position: static !important;
  inset: auto !important; max-width: var(--orb) !important; max-height: var(--orb) !important;
  box-shadow: 0 0 21px var(--db), 0 8px 21px #000a; margin: 0 0 8px;
}
.tv-home .tv-kicker {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .21em; text-transform: uppercase;
  color: var(--db-hi); text-shadow: 0 0 13px var(--db); font-weight: 700;
}
.tv-home .tv-stage h1 {
  margin: 0 0 8px; font-size: clamp(34px, 4.8vmin, 55px) !important; font-weight: 700;
  color: #f4fbff; text-shadow: 0 2px 21px #000c; letter-spacing: .08em;
}
.tv-home .tv-legal {
  margin: 0 0 13px; font-size: 13px; color: #c8d4de;
  text-shadow: 0 2px 8px #000;
}
.tv-home .tv-legal a { color: var(--db-hi); text-decoration: none; }
.tv-home .tv-cluster {
  display: flex; flex-direction: column; align-items: center;
  width: auto; max-width: 88vw;
}
.tv-home .tv-sec {
  display: flex; flex-direction: column; align-items: center;
  width: auto; margin: 0 0 8px;
}
.tv-home .tv-sec h2 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: #9aa3ad; font-weight: 650; text-shadow: 0 2px 8px #000;
  text-align: center;
}
.tv-home .tv-hint {
  margin: 0 0 8px; font-size: 13px; color: #9aa3ad;
  text-shadow: 0 2px 8px #000; text-align: center;
}
.tv-home .tv-row {
  display: flex; flex-flow: row wrap; gap: var(--gap);
  justify-content: center; align-items: flex-start;
  overflow: visible !important; width: auto; max-width: 88vw;
  padding: 0 0 13px;
}
.tv-home .tv-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; width: var(--orb) !important; min-width: var(--orb) !important; max-width: var(--orb);
  min-height: 0 !important; height: auto !important; padding: 0 !important;
  border-radius: 0; background: none; border: none; color: #eef7ff;
  text-decoration: none; font-weight: 650; flex: 0 0 var(--orb);
  box-shadow: none; backdrop-filter: none;
  transition: transform .15s ease;
}
.tv-home .tv-btn .icon {
  position: relative;
  width: var(--orb); height: var(--orb); border-radius: var(--rad); flex: none;
  display: grid; place-items: center;
  overflow: visible;
  background-color: rgba(255,255,255,.10);
  background-image:
    radial-gradient(ellipse 70% 55% at 28% 16%, rgba(255,255,255,.88) 0 10%, transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 42%, rgba(0,0,0,.08) 100%);
  backdrop-filter: blur(13px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(13px) saturate(1.8) brightness(1.08);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    0 8px 21px -8px #000c,
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 0 13px var(--db);
}
.tv-home .tv-btn .icon::before {
  content: "";
  position: absolute; inset: -2px; border-radius: var(--rad); z-index: -1;
  background: conic-gradient(from 200deg,
    rgba(255,255,255,.0), var(--db), rgba(255,255,255,.0),
    rgba(255,80,110,.4), rgba(255,255,255,.0), var(--db-hi));
  filter: blur(2px); opacity: .55;
  pointer-events: none;
  animation: orb-spin 9s linear infinite;
}
.tv-home .tv-btn .icon::after {
  content: "";
  position: absolute; left: 13%; right: 13%; bottom: -8px; height: 8px;
  border-radius: 13px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, #000a 0 40%, transparent 72%);
  filter: blur(2px);
}
.tv-home .tv-btn .icon svg {
  width: var(--ico); height: var(--ico); display: block; position: relative; z-index: 1;
  fill: rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 1px #0008) drop-shadow(0 0 6px rgba(180,240,255,.7));
}
.tv-home .tv-btn.iptv .icon,
.tv-home .tv-btn.add .icon,
.tv-home .tv-btn.home .icon {
  background-color: rgba(80,200,230,.16);
  box-shadow:
    0 12px 18px -6px #000c,
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -8px 14px rgba(30,120,160,.16),
    0 0 20px var(--db);
}
.tv-home .tv-btn.guide .icon {
  background-color: rgba(255,60,90,.12);
  box-shadow:
    0 12px 18px -6px #000c,
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -8px 14px rgba(160,30,50,.14),
    0 0 20px rgba(255,80,110,.35);
}
.tv-home .tv-btn .label {
  text-align: center; line-height: 1.13; font-size: 13px;
  text-shadow: 0 2px 8px #000;
  max-width: var(--orb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-home .tv-btn .count {
  font-size: 11px; color: #9aa3ad; text-shadow: 0 2px 8px #000; font-weight: 500;
  min-height: 14px;
}
.tv-home .tv-btn:hover, .tv-home .tv-btn:focus-visible {
  transform: translateY(-8px) scale(1.05);
  outline: none;
}
.tv-home .tv-btn:hover .icon,
.tv-home .tv-btn:focus-visible .icon {
  background-color: rgba(255,255,255,.18);
  box-shadow:
    0 16px 22px -6px #000c,
    inset 0 1px 2px rgba(255,255,255,.95),
    0 0 24px var(--db),
    0 0 28px rgba(255,80,110,.28);
  border-color: rgba(255,255,255,.8);
}
.tv-home .tv-btn:focus-visible .icon {
  box-shadow:
    0 0 0 3px #050308,
    0 0 0 8px var(--db-hi),
    0 0 21px var(--db);
  border-color: var(--db-hi);
}
.tv-home .tv-account {
  position: absolute; right: 21px; top: 13px; z-index: 5;
  color: #9aa3ad; font-size: 13px; text-decoration: none; letter-spacing: .08em;
}
.tv-home .tv-led {
  width: min(88vw, calc(8 * var(--orb) + 7 * var(--gap))); height: 5px; margin: 13px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--d65-dim), var(--d65-hi), var(--d65), var(--d65-hi));
  background-size: 200% 100%;
  animation: led-run 8s linear infinite, led-breathe 5.2s cubic-bezier(.4,0,.2,1) infinite;
  box-shadow: 0 0 16px #dce8f5aa, 0 0 28px #b8c8d866;
}
.tv-home .tv-rail {
  position: absolute; top: 8%; bottom: 8%; width: 4px; border-radius: 4px; z-index: 2;
  background: linear-gradient(var(--d65-dim), var(--d65-hi), var(--d65-dim));
  box-shadow: 0 0 14px #dce8f588;
  animation: led-breathe 5.2s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.tv-home .tv-rail.l { left: 21px; }
.tv-home .tv-rail.r { right: 21px; }
.tv-home .tv-hair {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--d65), var(--d65-hi), var(--d65), transparent);
  background-size: 200% 100%;
  animation: led-run 10s linear infinite, led-breathe 5.2s cubic-bezier(.4,0,.2,1) infinite;
  box-shadow: 0 0 10px #dce8f566;
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes led-run { to { background-position: 200% 0; } }
@keyframes led-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (max-width: 900px) {
  .tv-home { --orb: 55px; --gap: 13px; --rad: 13px; --ico: 21px; }
  .tv-home .tv-stage h1 { font-size: 21px !important; }
  .tv-home .tv-row { width: 259px; max-width: 89%; gap: 13px; }
  .tv-home .tv-btn { -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-home .tv-led, .tv-home .tv-rail, .tv-home .tv-btn .icon::before, .tv-home .tv-hair { animation: none; }
}
</style>
<div class="tv-home">
  <div class="tv-still on" data-bg="/static/cinema/bg-27.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-28.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-31.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-29.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-33.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-32.jpg?v=15"></div>
  <div class="tv-veil"></div>
  <div class="tv-hair"></div>
  <div class="tv-rail l"></div>
  <div class="tv-rail r"></div>
  <div class="tv-stage">
    <img class="tv-mark" src="/static/img/logo.png" alt="Deimos">
    <p class="tv-kicker">Deimos.TV</p>
    <h1>IPTV</h1>
    <p class="tv-legal">Live streams and on-demand M3U are separate · <a href="/guide#iptv-legal">Your rights</a></p>
    <div class="tv-cluster">
      <div class="tv-sec">
        <h2>Live</h2>
        <div class="tv-row">
          {{range .IPTVLists}}
          <a class="tv-btn iptv" href="/iptv/{{.ID}}" aria-label="{{.Name}}"><span class="icon"><svg viewBox="0 0 24 24"><path d="M3 5h18v12H3V5zm8 14h2v2h4v2H7v-2h4v-2z"/></svg></span><span class="label">{{.Name}}</span><span class="count">{{.Count}}</span></a>
          <a class="tv-btn guide" href="/iptv/guide/{{.ID}}" aria-label="Guide"><span class="icon"><svg viewBox="0 0 24 24"><path d="M6 4h6.2A3.8 3.8 0 0 1 16 7.8V20H8.2A2.2 2.2 0 0 0 6 22.2V4zm8 0h4v16h-4V4z"/></svg></span><span class="label">Guide</span><span class="count">&nbsp;</span></a>
          {{end}}
          {{if not .IPTVLists}}<p class="tv-hint">No live lists yet.</p>{{end}}
        </div>
      </div>
      <div class="tv-sec">
        <h2>On demand</h2>
        {{if .IPTVOnDemand}}
        <div class="tv-row">
          {{range .IPTVOnDemand}}
          <a class="tv-btn add" href="/iptv/{{.ID}}" aria-label="{{.Name}}"><span class="icon"><svg viewBox="0 0 24 24"><path d="M4 5h16v12H4zM8 19h8v2H8z"/></svg></span><span class="label">{{.Name}}</span><span class="count">{{.Count}}</span></a>
          {{end}}
        </div>
        {{else}}
        <p class="tv-hint">Add an M3U of films or episodes.</p>
        {{end}}
      </div>
      <div class="tv-row">
        <a class="tv-btn add" href="/iptv/import" aria-label="Add M3U"><span class="icon"><svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg></span><span class="label">Add M3U</span></a>
        <a class="tv-btn home" href="/" aria-label="Home"><span class="icon"><svg viewBox="0 0 24 24"><path d="M12 3.2 3 11h2.2V21h5.4v-6.4h2.8V21h5.4V11H21z"/></svg></span><span class="label">Home</span></a>
      </div>
    </div>
    <div class="tv-led" aria-hidden="true"></div>
    <p class="tv-remote-hint">Arrows move · OK opens · Back is Home</p>
  </div>
</div>
<script>
(function () {
  var stills = [].slice.call(document.querySelectorAll('.tv-still'));
  stills.forEach(function (el) { el.style.backgroundImage = 'url(' + el.getAttribute('data-bg') + ')'; });
  var i = 1, keep = stills[0];
  function tick() {
    stills.forEach(function (el) { el.style.zIndex = '1'; });
    var next = stills[i];
    next.style.zIndex = '2';
    next.classList.add('on');
    var prev = keep;
    keep = next;
    if (prev && prev !== next) {
      setTimeout(function () { if (prev !== keep) prev.classList.remove('on'); }, 2400);
    }
    i = (i + 1) % stills.length;
  }
  setInterval(tick, 120000);
})();
</script>
{{template "footer" .}}