/* YOINK landing — the CCTV frame the game uses: REC dot, DVR wordmark in the game's pixel face, porch-amber
   buttons, indigo night. Palette and type come in as CSS variables from store/listing.json → site. */
.landing .wrap{max-width:1040px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}   /* horizontal only: two classes outrank `.landing footer`, so never set vertical spacing here */
.landing .hero{position:relative;min-height:72vh;display:grid;align-items:end;background:#000}   /* no overflow:hidden — the Play chooser opens past the hero's edge */
.landing .hero>img,.landing .hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9;background:#000;clip-path:inset(0)}
.landing .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,24,.15),rgba(11,9,24,.35) 45%,var(--bg) 100%)}
.landing .hero .wrap{position:relative;z-index:1;padding-bottom:44px;padding-top:120px}
.landing .hero h1{font-family:var(--display);font-size:clamp(54px,11vw,128px);line-height:.9;margin:0 0 10px;color:var(--accent-hi);text-shadow:0 0 22px rgba(255,179,71,.45),4px 4px 0 var(--shadow);letter-spacing:-.02em}
.landing .tag{font:400 clamp(20px,3vw,30px)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 26px;color:var(--ink)}
.landing .rec{position:absolute;top:22px;left:22px;z-index:1;font:400 20px var(--mono);letter-spacing:.08em;display:flex;gap:10px;align-items:center;color:#fff}
.landing .rec i{width:12px;height:12px;border-radius:50%;background:#ff3b30;box-shadow:0 0 12px #ff3b30;animation:yoink-blink 1.2s steps(2) infinite}
@keyframes yoink-blink{50%{opacity:.25}}
.landing .top{position:absolute;top:18px;right:22px;z-index:2}
.landing .ctas{display:flex;gap:12px;flex-wrap:wrap}
.landing .btn{font-family:var(--display);display:inline-block;padding:14px 24px;border-radius:12px;font-weight:700;font-size:19px;text-decoration:none;background:rgba(255,255,255,.08);color:var(--ink);border:1px solid rgba(255,255,255,.14)}
.landing .btn.play{background:var(--accent);color:#2a1305;border-color:transparent;box-shadow:4px 4px 0 var(--shadow)}
.landing .btn.soon{opacity:.45;pointer-events:none}
.where-box{font-family:var(--display);background:#0f0c1f;border-color:rgba(255,179,71,.25)}
.where b{font-family:var(--mono);font-size:16px;letter-spacing:.1em;color:var(--accent-hi);opacity:1}
.where .opts a{border-color:rgba(255,179,71,.18)}
.landing section{padding:54px 0}
.landing h2{font-family:var(--display);font-size:34px;line-height:1.05;margin:0 0 18px;color:var(--accent-hi)}
.landing .lead{font-size:20px;max-width:34em;margin:0 0 14px}
.landing .shots{display:flex;gap:14px;overflow-x:auto;padding:8px 22px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.landing .shots img{height:min(560px,72vh);border-radius:14px;flex:none;scroll-snap-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.landing .feat{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.landing .feat li{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.landing footer{margin-top:110px;padding:40px 0 72px;font-size:15px;opacity:.75;border-top:1px solid rgba(255,255,255,.08)}
.landing footer a{margin-right:16px}
/* the clip rides in the same strip as the stills, first, the same height, portrait like them */
.landing .reel{display:flex;gap:14px;overflow-x:auto;padding:8px 22px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.landing .reel .shots{display:contents}
.landing .clipbox{flex:none;scroll-snap-align:center}
.landing .clip{display:block;height:min(560px,72vh);aspect-ratio:9/16;border-radius:14px;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.landing .clipbox+.shots img:first-child{margin-left:0}
/* reduced motion: the clip waits for a tap; the REC dot holds still */
/* phones: the pills wrap to the right, the REC dot keeps its corner */
@media (max-width:640px){.landing .rec{top:14px;left:14px;font-size:16px}.landing .top{top:10px;right:10px;left:84px}.landing .top .langs{justify-content:flex-end;gap:4px}.landing .top .langs a{font-size:13px;padding:5px 10px}.landing .hero .wrap{padding-top:150px}}
@media (prefers-reduced-motion:reduce){.landing .rec i{animation:none}}