{{template "header" .}}
<style>
html[data-home="tv"] .main, html[data-home="tv"] .layout { padding:0 !important; margin:0 !important; overflow:hidden !important; }
html[data-home="tv"] body { overflow:hidden !important; height:100dvh; padding-top:0 !important; }
html[data-home="tv"] .header, html[data-home="tv"] .site-foot { display: none !important; }
html[data-home="tv"], html[data-home="tv"] body { scrollbar-width: none; }
html[data-home="tv"]::-webkit-scrollbar, html[data-home="tv"] body::-webkit-scrollbar { display:none; }
.tv-home { 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 18%, #0006 68%, #000b 100%); }
.tv-home .tv-stage { position:relative; z-index:4; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:18px 12px 28px; overflow:auto; scrollbar-width:none; }
.tv-home .tv-stage::-webkit-scrollbar { display:none; width:0; height:0; }
.tv-home .tv-mark { width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 0 28px #ffd36a88; margin:8px 0 4px; position:static !important; }
.tv-home .tv-kicker { margin:0 0 4px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#ffd36a; }
.tv-home .tv-stage h1 { margin:0 0 10px; font-size:clamp(20px,3.4vw,28px); font-weight:650; color:#f4fbff; }
.tv-home .tv-cats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 12px; }
.tv-home .tv-cats a { padding: clamp(10px, 1.6vmin, 16px) clamp(16px, 2.2vmin, 24px); border-radius: 999px; border:1px solid #ffffff22; color:#eef7ff; text-decoration:none; font-size: clamp(13px, 1.8vmin, 20px); font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:#0a0c10cc; }
.tv-home .tv-cats a.on { border-color:#ffd36a; color:#ffd36a; box-shadow:0 0 16px #ffd36a44; }
.tv-home .tv-sec { width:min(96vw,1100px); margin:0 0 14px; }
.tv-home .tv-sec h2 { margin:0 0 8px; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#9aa3ad; font-weight:650; }
.tv-home .tv-row { display:flex; flex-flow:row wrap; gap:14px; justify-content:center; padding:4px; }
.tv-home .tv-btn {
  display:block !important; position:relative; width:148px !important; min-width:148px !important;
  height:148px !important; min-height:148px !important; padding:0 !important; overflow:hidden;
  border-radius:18px; background:#0a0c10; border:1px solid #ffd36a33; color:#eef7ff;
  text-decoration:none; font-weight:650; box-shadow:0 8px 22px #0008;
}
.tv-home .tv-btn .thumb { width:148px !important; height:148px !important; border-radius:0; object-fit:cover; display:block; }
.tv-home .tv-btn .label {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:28px 8px 10px; font-size:13px; text-align:center; line-height:1.15;
  background:linear-gradient(transparent, #000d 70%); text-shadow:0 1px 6px #000;
}
.tv-home .tv-btn .sub { display:none !important; }
.tv-go-home {
  position: absolute; left: 50%; bottom: 14px; z-index: 8;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 89px; text-decoration: none; color: #eef7ff; font-weight: 650;
}
.tv-go-home .icon {
  position: relative;
  width: 89px; height: 89px; border-radius: 21px;
  display: grid; place-items: center;
  overflow: visible;
  background-color: rgba(10, 16, 22, .78);
  background-image:
    radial-gradient(ellipse 52% 38% at 30% 20%, rgba(255,255,255,.22) 0 10%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 48%, rgba(0,0,0,.28) 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 22px -8px #000c,
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -10px 16px rgba(0,0,0,.22);
}
.tv-go-home .icon::after {
  content: "";
  position: absolute; left: 14%; right: 14%; 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-go-home .icon svg {
  width: 34px; height: 34px; fill: rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 1px #0008);
}
.tv-go-home .label { font-size: 13px; text-shadow: 0 2px 8px #000; }
.tv-go-home:hover { transform: translateX(-50%) translateY(-6px) scale(1.05); }
.tv-home .tv-stage { padding-bottom: 130px; }
.tv-home .tv-btn:hover { transform:translateY(-4px) scale(1.04); border-color:#ffd36a; box-shadow:0 0 22px #ffd36a66; }
.tv-home .tv-account { position:absolute; right:18px; top:16px; z-index:5; color:#9aa3ad; font-size:12px; text-decoration:none; }
.tv-home .tv-led { width:min(92vw,920px); height:5px; margin:10px auto 0; border-radius:3px; background:linear-gradient(90deg,#ffd36a,#00e5ff,#ffd36a); background-size:200% 100%; animation:led-run 3.2s linear infinite; box-shadow:0 0 16px #00e5ff88, 0 0 24px #ffd36a55; }
@keyframes led-run { to { background-position:200% 0; } }
</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>
  <a class="tv-go-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>
  {{if .User}}<a class="tv-account" href="/logout">Sign out</a>{{else}}<a class="tv-account" href="/login">Sign in</a>{{end}}
  <div class="tv-stage">
    <img class="tv-mark" src="/static/img/logo.png" alt="Deimos">
    <p class="tv-kicker">Cinema arcade</p>
    <h1>Games</h1>
    <div class="tv-cats">
      <a href="/games" class="{{if not .ArcadeFilter}}on{{end}}">All</a>
      <a href="/games?cat=Racing" class="{{if eq .ArcadeFilter "Racing"}}on{{end}}">Racing</a>
      <a href="/games?cat=Action" class="{{if eq .ArcadeFilter "Action"}}on{{end}}">Action</a>
      <a href="/games?cat=Shooter" class="{{if eq .ArcadeFilter "Shooter"}}on{{end}}">Shooter</a>
      <a href="/games?cat=IO" class="{{if eq .ArcadeFilter "IO"}}on{{end}}">.io</a>
      <a href="/games?cat=Adventure" class="{{if eq .ArcadeFilter "Adventure"}}on{{end}}">Adventure</a>
    </div>
    {{range .ArcadeCats}}
    <div class="tv-sec">
      <h2>{{.Name}}</h2>
      <div class="tv-row">
        {{range .Games}}
        <a class="tv-btn" href="/games/{{.ID}}">{{if .Thumb}}<img class="thumb" src="{{.Thumb}}" alt="" loading="lazy">{{else}}<span class="thumb" style="background:{{.Accent}};display:block"></span>{{end}}<span class="label">{{.Title}}</span><span class="sub">{{.Blurb}}</span></a>
        {{end}}
      </div>
    </div>
    {{end}}
    <div class="tv-led"></div>
  </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" .}}