/* 📺 Shared TV scene chassis — the same dark-modern language as the admin.
   Every scene links this FIRST, then adds only what makes it unique.

   Design rules that keep a 10-foot screen readable:
     · neutral near-black ground + a quiet dot grid (never a color wash)
     · flat surfaces: glass cards, hairline borders, no gradients
     · brand color used as ACCENT only — the tenant's palette flows in through
       the server-appended :root vars, so every venue looks like itself
     · type is huge and high-contrast; motion is subtle and short
*/
:root{
  --bg:#0d1117; --panel:#161b22; --line:rgba(255,255,255,.12);
  --ink:#e6edf3; --ink2:#9198a1; --ink3:#656c76;
  /* --purple/--pink/--orange/--teal/--lime are appended per-tenant by the hub */
}
*{margin:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);
  background-size:34px 34px;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  user-select:none;
}

/* ── building blocks ── */
.s-card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:2.2vh;
  box-shadow:0 1.4vh 4vh -2.4vh rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06)}
.s-kick{display:inline-block;background:color-mix(in srgb, var(--pink) 18%, transparent);
  border:1px solid var(--pink);color:#fff;border-radius:99px;padding:.9vh 2.2vw;
  font-weight:800;font-size:2.3vh;letter-spacing:.28vh;text-transform:uppercase}
.s-h1{font-weight:900;font-size:11vh;line-height:1.04;letter-spacing:-.02em;color:#fff}
.s-h2{font-weight:800;font-size:5.4vh;line-height:1.1;color:#fff}
.s-sub{font-size:3vh;font-weight:600;color:var(--ink2);line-height:1.45}
.s-accent{color:var(--orange)}
/* the brand mark: scenes use /assets/logo-white.png and the hub swaps in the
   tenant's uploaded logo automatically */
.s-logo{height:9vh;filter:drop-shadow(0 1vh 3vh rgba(0,0,0,.7))}

/* ── motion (short, calm, never distracting from the content) ── */
@keyframes s-rise{from{opacity:0;transform:translateY(2.4vh)}to{opacity:1;transform:none}}
@keyframes s-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.s-in{animation:s-rise .5s cubic-bezier(.2,.9,.3,1) both}
.s-in2{animation:s-rise .5s .12s cubic-bezier(.2,.9,.3,1) both}
.s-in3{animation:s-rise .5s .24s cubic-bezier(.2,.9,.3,1) both}

/* ── QR: always white-on-white-card so every phone camera locks instantly ── */
.s-qr{background:#fff;padding:1.6vh;border-radius:2vh;box-shadow:0 2vh 5vh -2vh rgba(0,0,0,.8)}
.s-qr img{display:block;width:100%;height:100%}

/* 🎨 tenant brand — auto-appended; change it in ⚙️ Settings → Brand */
:root{--purple:#5E0F80;--purple-deep:#400a57;--pink:#D81E5B;--orange:#F39200;--turq:#009FA8;--teal:#009FA8;--lime:#7CB518;--brand-primary:#5E0F80;--brand-secondary:#D81E5B;--brand-accent:#F39200;--brand-turquoise:#009FA8;--brand-lime:#7CB518}