:root{
  --bg:#0A0A0B; --surface:#141417; --surface2:#1D1D21;
  --accent:#E4032E; --accent-soft:rgba(228,3,46,.14);
  --ink:#F5F3EE; --muted:#8E8E97; --line:#2A2A2F;
  --gold:#F2B01E;
  --display:'Anton', 'Arial Narrow', sans-serif;
  --body:'Inter', -apple-system, system-ui, sans-serif;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.5; overscroll-behavior-y:none;
}
button{font-family:var(--body); cursor:pointer; border:none; background:none; color:inherit;}
img{display:block; max-width:100%;}

/* ---------- App shell ---------- */
#app{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;}
header.appbar{
  position:sticky; top:0; z-index:20; background:linear-gradient(var(--bg) 70%, transparent);
  padding:calc(env(safe-area-inset-top) + 14px) 18px 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.brandmark{display:flex; flex-direction:column; line-height:1;}
.brandmark .kicker{font-size:10px; letter-spacing:.22em; color:var(--accent); font-weight:700; text-transform:uppercase;}
.brandmark .name{font-family:var(--display); font-size:26px; letter-spacing:.02em; text-transform:uppercase; margin-top:3px;}
.live-pill{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em;
  background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:6px 12px;
  white-space:nowrap;
}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.4; transform:scale(.8);}}
@media (prefers-reduced-motion:reduce){ .live-dot{animation:none;} }

main{flex:1; padding:4px 18px calc(96px + env(safe-area-inset-bottom));}

/* ---------- Bottom tab bar ---------- */
nav.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px; z-index:30;
  background:rgba(20,20,23,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
nav.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:4px 0;
  border-radius:10px; transition:color .15s;
}
nav.tabbar button.active{color:var(--ink);}
nav.tabbar button.active .ico{background:var(--accent-soft); color:var(--accent);}
nav.tabbar .ico{
  width:40px; height:26px; border-radius:8px; display:grid; place-items:center;
  font-size:15px; transition:background .15s;
}

/* ---------- Shared bits ---------- */
.view{display:none; animation:fadein .18s ease;}
.view.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .view{animation:none;} }
h2.section{
  font-family:var(--display); font-size:22px; text-transform:uppercase; letter-spacing:.03em;
  margin:18px 0 12px; display:flex; align-items:baseline; gap:10px;
}
h2.section .tag{font-family:var(--body); font-size:10px; letter-spacing:.2em; color:var(--muted); font-weight:700;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}

/* ---------- Hero / Now ---------- */
.hero{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-top:6px;
}
.hero .stripe{height:4px; background:var(--accent);}
.hero-inner{padding:18px;}
.hero .now-label{display:flex; align-items:center; gap:8px; font-size:10px; font-weight:700; letter-spacing:.24em; color:var(--accent); text-transform:uppercase;}
.hero h1{font-family:var(--display); font-size:30px; line-height:1.08; text-transform:uppercase; margin:10px 0 6px;}
.hero .meta{color:var(--muted); font-size:13px; font-weight:500;}
.hero .next{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); font-size:13px; color:var(--muted);}
.hero .next strong{color:var(--ink); font-weight:600;}

/* ---------- Schedule ---------- */
.daychips{display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; scrollbar-width:none;}
.daychips::-webkit-scrollbar{display:none;}
.daychips button{
  flex:0 0 auto; padding:9px 16px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted);
}
.daychips button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.slot{display:flex; gap:14px; padding:14px 2px; border-bottom:1px solid var(--line);}
.slot:last-child{border-bottom:none;}
.slot .time{
  flex:0 0 62px; font-family:var(--display); font-size:15px; letter-spacing:.03em;
  color:var(--accent); padding-top:2px;
}
.slot .what{flex:1;}
.slot .what .title{font-weight:600; font-size:14.5px;}
.slot .what .who{color:var(--muted); font-size:12.5px; margin-top:2px;}
.slot .kind{
  flex:0 0 auto; align-self:flex-start; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 7px;
}
.slot .kind.main{color:var(--gold); border-color:rgba(242,176,30,.35);}

/* ---------- Speakers ---------- */
.speaker{display:flex; align-items:center; gap:14px; padding:13px 2px; border-bottom:1px solid var(--line);}
.speaker:last-child{border-bottom:none;}
.avatar{
  flex:0 0 52px; height:52px; border-radius:50%; background:var(--surface2);
  display:grid; place-items:center; font-family:var(--display); font-size:18px; color:var(--accent);
  border:1px solid var(--line);
}
.speaker .info{flex:1;}
.speaker .info .nm{font-weight:600; font-size:15px;}
.speaker .info .rl{color:var(--muted); font-size:12.5px; margin-top:1px;}

/* ---------- Sponsors ---------- */
.sponsor-tier{font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:18px 0 8px;}
.sponsor{display:flex; align-items:center; gap:14px; padding:14px; margin-bottom:10px;}
.sponsor .logo{
  flex:0 0 54px; height:54px; border-radius:12px; background:var(--surface2); border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--display); font-size:17px; color:var(--ink);
}
.sponsor .info{flex:1;}
.sponsor .info .nm{font-weight:600;}
.sponsor .info .booth{color:var(--muted); font-size:12.5px; margin-top:1px;}
.sponsor .visit{
  flex:0 0 auto; font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--accent);
  border:1px solid var(--accent); border-radius:99px; padding:7px 13px;
}

/* ---------- Photo wall ---------- */
.bigscreen-cta{
  position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(228,3,46,.22), transparent 55%),
    var(--surface);
  padding:22px 18px;
}
.bigscreen-cta h3{font-family:var(--display); font-size:26px; text-transform:uppercase; line-height:1.1;}
.bigscreen-cta p{color:var(--muted); font-size:13px; margin-top:8px; max-width:34ch;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px; letter-spacing:.03em;
  border-radius:12px; padding:14px 20px; width:100%; margin-top:16px;
}
.btn:active{transform:scale(.985);}
.btn.ghost{background:var(--surface2); color:var(--ink); border:1px solid var(--line);}
.btn[disabled]{opacity:.5; pointer-events:none;}
.privacy-note{font-size:11px; color:var(--muted); margin-top:10px; text-align:center;}
.wall-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px;}
.wall-grid .ph{aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--surface2); border:1px solid var(--line);}
.wall-grid .ph img{width:100%; height:100%; object-fit:cover;}
.wall-empty{color:var(--muted); font-size:13px; text-align:center; padding:26px 0;}
.status-banner{
  margin-top:12px; font-size:12.5px; font-weight:600; border-radius:10px; padding:10px 14px; display:none;
}
.status-banner.ok{display:block; background:rgba(46,160,67,.15); color:#5BD778;}
.status-banner.err{display:block; background:var(--accent-soft); color:var(--accent);}

/* ---------- Moderator ---------- */
.mod-item{display:flex; gap:12px; padding:12px; margin-bottom:10px; align-items:center;}
.mod-item .thumb{flex:0 0 74px; height:74px; border-radius:10px; overflow:hidden; background:var(--surface2);}
.mod-item .thumb img{width:100%; height:100%; object-fit:cover;}
.mod-item .meta{flex:1; font-size:12.5px; color:var(--muted);}
.mod-item .meta .nm{color:var(--ink); font-weight:600; font-size:13.5px;}
.mod-actions{display:flex; flex-direction:column; gap:8px;}
.mod-actions button{
  font-size:11.5px; font-weight:700; letter-spacing:.04em; border-radius:9px; padding:8px 13px;
}
.mod-actions .ok{background:rgba(46,160,67,.18); color:#5BD778;}
.mod-actions .no{background:var(--accent-soft); color:var(--accent);}
.mod-count{font-size:12px; color:var(--muted); margin-bottom:12px;}

/* ---------- Big screen display mode ---------- */
body.display-mode{overflow:hidden;}
#displayView{
  display:none; position:fixed; inset:0; background:#000; z-index:100;
  flex-direction:column; align-items:center; justify-content:center;
}
body.display-mode #displayView{display:flex;}
#displayView .frame{
  width:min(86vw, 86vh); aspect-ratio:1; border-radius:24px; overflow:hidden;
  border:3px solid var(--accent); box-shadow:0 0 80px rgba(228,3,46,.35);
  background:var(--surface);
}
#displayView .frame img{width:100%; height:100%; object-fit:cover;}
#displayView .caption{
  margin-top:26px; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(22px, 4vw, 42px); letter-spacing:.04em; display:flex; align-items:center; gap:14px;
}
#displayView .caption .live-dot{width:12px; height:12px;}
#displayView .subcap{color:var(--muted); font-size:clamp(12px, 1.6vw, 18px); margin-top:8px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;}
#displayView .empty{color:var(--muted); font-family:var(--display); font-size:clamp(20px,3vw,34px); text-transform:uppercase; text-align:center; padding:0 8vw;}

.demo-note{
  margin-top:22px; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6;
}
.demo-note a{color:var(--accent); text-decoration:none; font-weight:600;}

/* ===== SVG tab icons (emoji-free) ===== */
.tabbar .ico svg{width:20px; height:20px; display:block;}

/* =========================================================================
   PER-CLIENT THEMES — same engine, two very different products.
   theme-pulse = high-energy neon festival · theme-gala = elegant serif gala
   ========================================================================= */

/* ---------- PULSE (festival: condensed caps, neon, energetic) ---------- */
body.theme-pulse{
  --display:'Bebas Neue','Anton',sans-serif;
  --body:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --radius:8px;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(177,76,228,.22), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(34,211,238,.13), transparent 60%),
    var(--bg);
}
.theme-pulse .brandmark .kicker{letter-spacing:.34em;}
.theme-pulse .brandmark .name{font-size:32px; letter-spacing:.06em; text-shadow:0 0 22px rgba(177,76,228,.55);}
.theme-pulse .live-dot{box-shadow:0 0 8px var(--accent);}
.theme-pulse h2.section{font-size:28px; letter-spacing:.05em;}
.theme-pulse .hero{border:1px solid rgba(177,76,228,.4); box-shadow:0 0 44px rgba(177,76,228,.18);}
.theme-pulse .hero .stripe{height:5px; background:linear-gradient(90deg,var(--accent),var(--gold));}
.theme-pulse .hero h1{font-size:38px; letter-spacing:.04em;}
.theme-pulse .btn{
  background:linear-gradient(90deg,var(--accent),var(--gold)); color:#0A0A0B; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; box-shadow:0 0 26px rgba(177,76,228,.45);
}
.theme-pulse .bigscreen-cta{border-color:rgba(177,76,228,.38);
  background:radial-gradient(120% 90% at 80% 0%, rgba(177,76,228,.22), transparent 55%), var(--surface);}
.theme-pulse .daychips button.active{background:var(--accent); border-color:var(--accent);}
.theme-pulse .tabbar button.active{color:var(--accent);}
.theme-pulse .tabbar button.active .ico{background:rgba(177,76,228,.2); color:var(--accent); box-shadow:0 0 14px rgba(177,76,228,.4);}

/* ---------- GALA (refined LIGHT theme: ivory, serif, gold) ---------- */
body.theme-gala{
  --bg:#F7F4EC; --surface:#FFFFFF; --surface2:#F1ECE0; --line:#E5DECE;
  --ink:#1D1A15; --muted:#8A8171;
  --display:'Playfair Display',Georgia,serif;
  --body:'Inter',-apple-system,system-ui,sans-serif;
  --radius:4px;
  background:radial-gradient(120% 80% at 50% -18%, rgba(201,162,39,.14), transparent 55%), var(--bg);
  color:var(--ink);
}
.theme-gala main{padding-top:8px;}
.theme-gala .brandmark .kicker{letter-spacing:.3em; color:#B08D1E;}
.theme-gala .brandmark .name{font-size:27px; text-transform:none; font-weight:700; letter-spacing:.005em;}
.theme-gala .live-pill{background:var(--surface); border-color:var(--line);}
.theme-gala h2.section{text-transform:none; font-weight:700; font-size:25px; letter-spacing:.005em;}
.theme-gala h2.section .tag{font-style:italic; text-transform:none; letter-spacing:.02em;}
.theme-gala .hero{border-color:var(--line); background:var(--surface); box-shadow:0 8px 30px rgba(60,50,20,.06);}
.theme-gala .hero .stripe{height:2px; background:var(--accent);}
.theme-gala .hero h1{text-transform:none; font-size:32px; letter-spacing:.005em;}
.theme-gala .hero .now-label{color:#B08D1E;}
.theme-gala .card{border-color:var(--line); background:var(--surface); box-shadow:0 6px 24px rgba(60,50,20,.05);}
.theme-gala .bigscreen-cta{border-color:var(--line); box-shadow:0 6px 24px rgba(60,50,20,.05);
  background:radial-gradient(120% 90% at 80% 0%, rgba(201,162,39,.16), var(--surface) 60%);}
.theme-gala .bigscreen-cta h3{text-transform:none; font-size:28px; color:var(--ink);}
.theme-gala .bigscreen-cta p{color:var(--muted);}
.theme-gala .btn{background:var(--accent); color:#1D1A15; border:1px solid var(--accent);
  font-weight:600; text-transform:none; letter-spacing:.02em; box-shadow:none;}
.theme-gala .btn.ghost{background:transparent; color:#8A6D15; border:1px solid var(--line);}
.theme-gala .btn:active{transform:scale(.99);}
.theme-gala .daychips button{background:var(--surface);}
.theme-gala .daychips button.active{background:var(--accent); border-color:var(--accent); color:#1D1A15;}
.theme-gala .slot .time{color:#B08D1E;}
.theme-gala .avatar,.theme-gala .sponsor .logo{background:var(--surface2); border-color:var(--line); color:#B08D1E;}
.theme-gala .sponsor-tier{color:#B08D1E;}
.theme-gala nav.tabbar{background:rgba(255,255,255,.92); border-top:1px solid var(--line);}
.theme-gala .tabbar button.active{color:#B08D1E;}
.theme-gala .tabbar button.active .ico{background:rgba(201,162,39,.16); color:#B08D1E; box-shadow:none;}

/* ---------- CHILI (Southwest-inspired: bold blue field, warm red +
   sunrise yellow accents, friendly rounded display type) ---------- */
body.theme-chili{
  --bg:#101A45; --surface:#182352; --surface2:#212E66; --line:#2D3C7E;
  --ink:#FFFFFF; --muted:#9CA7D6;
  --accent-soft:rgba(229,29,35,.2);
  --navy:#1B2A5E;
  --display:'Figtree','Inter',-apple-system,system-ui,sans-serif;
  --body:'Inter',-apple-system,system-ui,sans-serif;
  --radius:16px;
  background:
    radial-gradient(85% 50% at 50% -6%, rgba(48,76,178,.55), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(249,182,18,.10), transparent 60%),
    var(--bg);
}
/* Southwest type system: huge, heavy, WHITE, sentence case, ends with a
   period. Copy carries the periods; this carries the weight. */
.theme-chili .brandmark .kicker{letter-spacing:.26em; color:var(--gold);}
.theme-chili .brandmark .name{font-family:var(--display); font-size:20px; text-transform:none; font-weight:800; letter-spacing:-.01em;}
.theme-chili h2.section{text-transform:none; font-weight:800; font-size:30px; letter-spacing:-.02em; color:#fff; line-height:1.05;}
.theme-chili .hero{border-color:var(--line);}
.theme-chili .hero .stripe{height:6px; background:linear-gradient(90deg,#304CB2 0 34%,#E51D23 34% 67%,#F9B612 67% 100%);}
.theme-chili .hero h1{text-transform:none; font-size:32px; font-weight:800; letter-spacing:-.02em; color:#fff;}
.theme-chili .hero .now-label{color:var(--gold);}
/* CTAs: Southwest yellow rounded-rects with navy text */
.theme-chili .btn{
  background:var(--gold); color:var(--navy); font-weight:800; font-size:15px;
  border-radius:12px; padding:15px 22px; letter-spacing:0;
  box-shadow:0 8px 24px rgba(249,182,18,.28);
  transition:transform .12s;
}
.theme-chili .btn:active{transform:scale(.97);}
.theme-chili .btn.ghost{background:var(--surface2); color:var(--ink); border:1px solid var(--line); box-shadow:none;}
.theme-chili .bigscreen-cta{border-color:var(--line);
  background:radial-gradient(120% 90% at 80% 0%, rgba(249,182,18,.16), transparent 55%), var(--surface);}
.theme-chili .bigscreen-cta h3{text-transform:none; font-weight:800; font-size:30px; letter-spacing:-.02em; color:#fff;}
.theme-chili .daychips button.active{background:var(--gold); border-color:var(--gold); color:var(--navy);}
.theme-chili .slot .time{color:var(--gold); font-weight:800;}
.theme-chili .slot .kind.main{color:var(--gold); border-color:rgba(249,182,18,.4);}
/* Floating tab dock with tricolor hairline + springy active state */
.theme-chili main{padding-bottom:calc(126px + env(safe-area-inset-bottom));}
.theme-chili nav.tabbar{
  position:fixed; width:calc(100% - 20px); max-width:500px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  border-radius:24px; border:1px solid var(--line); border-top:1px solid var(--line);
  background:rgba(13,21,58,.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 44px rgba(0,0,0,.5);
  padding:9px 6px; overflow:hidden;
}
.theme-chili nav.tabbar::before{
  content:""; position:absolute; top:0; left:26px; right:26px; height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#304CB2 0 34%,#E51D23 34% 67%,#F9B612 67% 100%);
}
.theme-chili .tabbar button.active{color:#fff;}
.theme-chili .tabbar button.active .ico{
  background:var(--gold); color:var(--navy);
  animation:tabPop .35s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes tabPop{from{transform:scale(.6);}to{transform:scale(1);}}
/* Pulsing LIVE chip (one-day events) + check-in avatar */
.theme-chili .live-pill.live-chip{
  position:relative; border-color:rgba(229,29,35,.55); background:rgba(229,29,35,.14); color:#fff;
}
.theme-chili .live-pill.live-chip::after{
  content:""; position:absolute; inset:-1px; border-radius:99px;
  border:1px solid rgba(229,29,35,.6); animation:chipPulse 2.2s infinite; pointer-events:none;
}
@keyframes chipPulse{0%{opacity:.8; transform:scale(1);}70%{opacity:0; transform:scale(1.22);}100%{opacity:0; transform:scale(1.22);}}
.pill-avatar{width:22px; height:22px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,.75);}
/* Route-progress chip (the Southwest app's flight widget, miniaturized) */
.theme-chili .live-pill.route-chip{gap:7px; padding:6px 12px 6px 8px;}
.route-chip .rc-heart svg{width:18px; height:18px; display:block;}
.route-chip .rc-ap{font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff;}
.route-chip .rc-track{position:relative; width:36px; height:12px;
  border-bottom:2px dashed rgba(255,255,255,.4); margin-top:-8px;}
.route-chip .rc-plane{position:absolute; top:-2px; left:30%; width:14px; height:14px;
  animation:planeDrift 3.2s ease-in-out infinite alternate;}
@keyframes planeDrift{from{left:14%;}to{left:58%;}}
@media (prefers-reduced-motion:reduce){ .route-chip .rc-plane{animation:none;} }
/* Southwest heart placements */
.brandmark .kicker .sw-heart{width:12px; height:12px; vertical-align:-2px; margin-right:5px; display:inline-block;}
.sp-kicker .sw-heart{width:24px; height:24px; vertical-align:-7px; margin-right:9px; display:inline-block;}
.bp-logo .sw-heart{width:26px; height:26px; display:block;}
/* Now homepage: state tiles, live mirror, quips */
.home-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px;}
.home-tiles button{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px 11px; text-align:left; color:var(--ink); transition:transform .12s;
}
.home-tiles button:active{transform:scale(.96);}
.home-tiles i{font-style:normal; display:block; font-size:9px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);}
.home-tiles b{font-family:var(--display); font-weight:800; font-size:16px; display:block; margin:3px 0 1px; color:#fff;}
.home-tiles span{font-size:10px; color:var(--muted);}
.mirror{margin-top:14px;}
.mirror-head{display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800;
  letter-spacing:.18em; color:var(--gold);}
.mirror-head em{font-style:normal; margin-left:auto; color:var(--muted); letter-spacing:.04em; text-transform:none;}
.mirror-frame{margin:11px 0 12px; border-radius:12px; overflow:hidden; aspect-ratio:16/10;
  background:var(--surface2); display:grid; place-items:center;}
.mirror-frame img{width:100%; height:100%; object-fit:cover; animation:fadein .5s ease;}
.mirror-empty{color:var(--muted); font-size:12px; padding:0 20px; text-align:center;}
.mirror .btn{width:100%;}
.quip{margin-top:18px; text-align:center; font-size:12px; color:var(--muted); font-style:italic;
  min-height:20px; opacity:0; padding:0 10px;}
.quip.in{animation:quipIn .7s ease forwards;}
@keyframes quipIn{to{opacity:1;}}
/* hunt strip — quieter than the tiles, only shown once they've started */
.hunt-strip{
  width:100%; display:flex; align-items:center; gap:10px; margin-top:8px;
  background:none; border:1.5px dashed var(--line); border-radius:12px;
  padding:10px 14px; color:var(--muted); text-align:left;
}
.hunt-strip i{font-style:normal; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);}
.hunt-strip b{font-size:12.5px; font-weight:700; color:var(--ink);}
.hunt-strip em{font-style:normal; margin-left:auto; font-size:11px; font-weight:700; color:var(--gold);}

/* =========================================================================
   PHOTO COMPOSE (preview + caption), WALL CAPTIONS, LIGHTBOX
   ========================================================================= */
#photoCompose{margin-top:6px;}
#photoCompose img{
  width:132px; height:132px; object-fit:cover; border-radius:14px; margin:0 auto 10px;
  border:2px solid var(--gold);
}
#photoCaption{
  width:100%; background:var(--surface2); border:1.5px solid var(--line); border-radius:12px;
  color:var(--ink); font-family:var(--body); font-size:14px; padding:12px 14px; outline:none;
  margin-bottom:10px; text-align:center;
}
#photoCaption:focus{border-color:var(--gold);}
.pc-row{display:flex; gap:8px;}
.pc-row .btn{flex:1;}
.wall-grid .ph{position:relative; padding:0; cursor:pointer;}
.wall-grid .ph-cap{
  position:absolute; left:0; right:0; bottom:0; font-size:9.5px; font-weight:700; color:#fff;
  padding:14px 7px 6px; text-align:left; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lightbox{
  position:fixed; inset:0; z-index:250; background:rgba(4,7,22,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px; animation:fadein .2s ease; cursor:zoom-out;
}
.lightbox.out{opacity:0; transition:opacity .25s;}
.lightbox img{max-width:100%; max-height:78vh; width:auto; height:auto; border-radius:14px;}
.lightbox .lb-cap{color:#fff; font-size:14px; font-weight:600; margin-top:14px; text-align:center; max-width:40ch;}
.lightbox .lb-close{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; color:#fff;
  font-size:18px; background:rgba(255,255,255,.12); border-radius:50%; width:40px; height:40px;
}

/* =========================================================================
   BIG SCREEN: no-crop display (blur-fill letterbox) + caption + exit
   ========================================================================= */
.disp-wrap{position:relative; width:100%; height:100%; overflow:hidden;}
.disp-bg{position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover;
  filter:blur(28px) brightness(.55); transform:scale(1.1);}
.disp-main{position:relative; width:100%; height:100%; object-fit:contain;}
.disp-cap{
  position:absolute; left:0; right:0; bottom:0; text-align:center; color:#fff;
  font-size:clamp(14px, 2vw, 24px); font-weight:700; padding:38px 20px 18px;
  background:linear-gradient(transparent, rgba(0,0,0,.65));
}
#displayExit{
  position:fixed; top:calc(14px + env(safe-area-inset-top)); left:16px; z-index:110;
  color:rgba(255,255,255,.4); font-size:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); display:none;
}
body.display-mode #displayExit{display:block;}
#displayExit:hover{color:#fff;}

/* moderator footer actions + venu credit */
.mod-actions-row{display:flex; gap:8px; margin-top:16px;}
.mod-actions-row .btn{flex:1;}
.venu-credit{text-align:center; padding:26px 0 10px;}
.venu-credit a{color:var(--muted); font-size:11px; letter-spacing:.06em; text-decoration:none;}
.venu-credit a b{color:var(--ink); font-weight:800;}
.venu-credit a:hover b{color:var(--gold);}
@media (prefers-reduced-motion:reduce){ .theme-chili .live-pill.live-chip::after{animation:none;} }
.theme-chili #displayView .frame{border-color:var(--gold); box-shadow:0 0 80px rgba(249,182,18,.3);}

/* =========================================================================
   WELCOME CHECK-IN — post-splash overlay (client.welcome config)
   ========================================================================= */
#welcome{
  position:fixed; inset:0; z-index:180; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(6,10,30,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:opacity .35s ease;
}
#welcome.out{opacity:0; pointer-events:none;}
.wc-card{
  width:100%; max-width:520px; background:var(--surface);
  border:1px solid var(--line); border-bottom:none; border-radius:26px 26px 0 0;
  overflow:hidden; animation:wcUp .45s cubic-bezier(.2,.9,.2,1);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
@keyframes wcUp{from{transform:translateY(60%);}to{transform:none;}}
.wc-stripe{height:5px; background:linear-gradient(90deg,#304CB2 0 34%,#E51D23 34% 67%,#F9B612 67% 100%);}
.wc-body{padding:26px 24px 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0;}
.wc-body h2{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.02em; color:#fff; line-height:1.02;}
.wc-body p{color:var(--muted); font-size:14px; margin:10px 0 20px; max-width:34ch;}
.wc-body .btn{width:100%;}
.wc-skip{margin-top:14px; font-size:12.5px; color:var(--muted); text-decoration:underline;}
.wc-photo{
  width:96px; height:96px; border-radius:50%; object-fit:cover; margin-bottom:14px;
  border:3px solid var(--gold); box-shadow:0 10px 30px rgba(0,0,0,.4);
  animation:logoPop .5s cubic-bezier(.2,.9,.3,1.4);
}

/* =========================================================================
   venuFX — confetti burst (brand colors + peppers)
   ========================================================================= */
.fx-burst{position:fixed; inset:0; z-index:400; pointer-events:none; overflow:hidden;}
.fx-burst i{
  position:absolute; top:-26px; width:9px; height:14px; border-radius:3px; display:block;
  animation:fxFall linear forwards;
}
.fx-burst i.pep{width:auto; height:auto; background:none;}
/* Pepper mascots — the cookoff's walking trio */
.pep-trio{display:flex; gap:12px; align-items:flex-end; justify-content:center;}
.pep-trio .venu-pep{width:62px; height:auto;}
.pep-trio .venu-pep:nth-child(1){animation:pepBob 1.3s ease-in-out 0s infinite alternate;}
.pep-trio .venu-pep:nth-child(2){animation:pepBob 1.3s ease-in-out .2s infinite alternate;}
.pep-trio .venu-pep:nth-child(3){animation:pepBob 1.3s ease-in-out .4s infinite alternate;}
@keyframes pepBob{from{transform:translateY(0) rotate(-2deg);}to{transform:translateY(-5px) rotate(2deg);}}
@media (prefers-reduced-motion:reduce){ .pep-trio .venu-pep{animation:none;} }
.sp-peps{margin-top:20px; animation:riseIn .5s ease .8s both;}
.vote-flash .pep-trio{margin-top:20px;}
.vote-flash .pep-trio .venu-pep{width:52px;}
@keyframes fxFall{to{transform:translate(var(--dx,0), 108vh) rotate(var(--rot,360deg)); opacity:.85;}}

/* venuFX.flyby — jet + tricolor contrail crossing the screen */
.fx-fly{
  position:fixed; left:0; z-index:401; pointer-events:none;
  display:flex; align-items:center;
  transform:translateX(-40vw);
  animation:flyAcross 2.1s cubic-bezier(.35,.1,.45,.95) forwards;
}
.fx-plane{width:34px; height:34px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));}
.fx-trail{
  width:34vw; height:4px; border-radius:99px; margin-right:-4px;
  background:linear-gradient(90deg, transparent, #304CB2 35%, #E51D23 65%, #F9B612 100%);
  opacity:.85;
}
@keyframes flyAcross{
  0%{transform:translateX(-40vw) translateY(0);}
  100%{transform:translateX(120vw) translateY(-4vh);}
}

/* =========================================================================
   BOARDING PASS — the aviation layer (client.aviation)
   ========================================================================= */
.bp-card{
  width:100%; max-width:340px; margin:14px auto 0; background:#fff; color:#1B2A5E;
  border-radius:18px; padding:16px 18px 14px; text-align:left; position:relative;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.bp-card::before, .bp-card::after{
  content:""; position:absolute; top:58%; width:18px; height:18px; border-radius:50%;
  background:var(--bg, #101A45);
}
.bp-card::before{left:-9px;} .bp-card::after{right:-9px;}
.bp-head{display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:2px dashed #D9DEF0;}
.bp-logo svg{width:24px; height:24px; display:block;}
.bp-flight{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.04em;}
.bp-date{margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.14em; color:#8A93B8;}
.bp-route{display:flex; align-items:center; gap:12px; padding:14px 0 4px;}
.bp-ap b{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.01em; display:block; line-height:1;}
.bp-ap i{font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.12em; color:#8A93B8; text-transform:uppercase;}
.bp-jet{width:22px; height:22px; flex:0 0 auto; opacity:.9;}
.bp-face{width:46px; height:46px; border-radius:50%; object-fit:cover; margin-left:auto; border:2.5px solid #F9B612;}
.bp-row{display:flex; gap:22px; padding:10px 0 12px;}
.bp-row span i{font-style:normal; display:block; font-size:9px; font-weight:800; letter-spacing:.16em; color:#8A93B8;}
.bp-row span b{font-family:var(--display); font-weight:800; font-size:22px;}
.bp-code{
  height:36px; border-radius:4px;
  background:repeating-linear-gradient(90deg,#1B2A5E 0 2px,transparent 2px 5px,#1B2A5E 5px 7px,transparent 7px 9px,#1B2A5E 9px 10px,transparent 10px 14px);
}
.bp-note{font-size:10.5px; color:#8A93B8; font-weight:700; text-align:center; margin-top:9px;}
/* full-screen pass modal (tap the LIVE chip) */
.bp-modal{
  position:fixed; inset:0; z-index:190; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,30,.78); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadein .25s ease; padding:22px;
}
.bp-modal.out{opacity:0; transition:opacity .3s;}
.bp-modal .bp-wrap{width:100%; max-width:340px;}
.bp-modal .bp-card{animation:wcUp .4s cubic-bezier(.2,.9,.2,1);}
.bp-close{display:block; margin:16px auto 0; color:var(--muted); font-size:13px; text-decoration:underline;}
/* teaser card on Now */
.bp-teaser{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:#fff; color:#1B2A5E; border-radius:16px; padding:12px 14px; margin-top:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.35); transition:transform .12s;
}
.bp-teaser:active{transform:scale(.98);}
.bp-teaser img{width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #F9B612;}
.bp-teaser .bp-tick{width:26px; height:26px; color:#304CB2;}
.bp-teaser span i{font-style:normal; display:block; font-size:9.5px; font-weight:800; letter-spacing:.14em; color:#8A93B8; text-transform:uppercase;}
.bp-teaser span b{font-family:var(--display); font-weight:800; font-size:15px;}
.bp-teaser em{font-style:normal; margin-left:auto; font-size:11.5px; font-weight:800; color:#304CB2; text-decoration:underline;}
/* keep the welcome sheet's pass readable on its dark card */
#welcome .bp-card{margin-bottom:6px;}

/* =========================================================================
   DEPARTURES BOARD — schedule as an airport board (client.departures)
   ========================================================================= */
.depboard{padding:0 !important; overflow:hidden; background:#0B1233 !important;}
.dep-head{
  display:grid; grid-template-columns:56px 1fr 86px; gap:10px; padding:12px 16px 10px;
  font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line);
}
.dep-row{
  display:grid; grid-template-columns:56px 1fr 86px; gap:10px; align-items:center;
  padding:13px 16px; border-bottom:1px solid rgba(45,60,126,.5);
  animation:depFlip .5s cubic-bezier(.2,.8,.2,1) both;
}
.dep-row:last-child{border-bottom:none;}
@keyframes depFlip{from{opacity:0; transform:translateY(-8px) rotateX(50deg);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .dep-row{animation:none;} }
.dep-time{font-family:var(--display); font-weight:800; font-size:15px; color:var(--gold); letter-spacing:.02em;}
.dep-title{font-weight:700; font-size:13.5px; color:#fff; line-height:1.3;}
.dep-who{color:var(--muted); font-size:11px; margin-top:2px;}
.dep-status{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-align:center;
  border:1px solid var(--line); border-radius:7px; padding:5px 4px; color:var(--muted);
}
.dep-status.s-boarding{color:#1B2A5E; background:var(--gold); border-color:var(--gold); animation:pulse 1.8s infinite;}
.dep-status.s-ontime{color:#5BD778; border-color:rgba(91,215,120,.45);}
.dep-status.s-finalcall{color:#fff; background:var(--accent); border-color:var(--accent);}
.dep-status.s-delayed{color:#F9B612; border-color:rgba(249,182,18,.45);}
.dep-status.s-departed{color:var(--muted); text-decoration:line-through;}

/* =========================================================================
   BRANDED SPLASH — full-screen opening moment (rendered when the client
   config has a `splash` block). Neutral by default; themes recolor it.
   ========================================================================= */
body.splash-open{overflow:hidden;}
#splash{
  position:fixed; inset:0; z-index:200; overflow:hidden;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition:opacity .45s ease, transform .45s ease;
}
#splash.out{opacity:0; transform:scale(1.04); pointer-events:none;}
.theme-chili #splash{background:linear-gradient(168deg,#3B5BD6 0%,#304CB2 44%,#1B2A6E 100%);}
.sp-bands{position:absolute; inset:0; pointer-events:none;}
.sp-bands i{
  position:absolute; left:-12%; width:124%; height:34px; transform:rotate(-8deg);
  animation:bandIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.sp-bands i:nth-child(1){top:9%;  background:#E51D23; animation-delay:.05s;}
.sp-bands i:nth-child(2){top:15%; background:#F9B612; animation-delay:.14s;}
.sp-bands i:nth-child(3){top:21%; background:rgba(255,255,255,.22); animation-delay:.23s;}
@keyframes bandIn{from{transform:rotate(-8deg) translateX(-110%);}to{transform:rotate(-8deg) translateX(0);}}
.sp-inner{
  position:relative; text-align:center; padding:0 26px; max-width:440px;
  display:flex; flex-direction:column; align-items:center;
}
.sp-logo{width:104px; height:104px; margin-bottom:14px; filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));
  animation:logoPop .6s cubic-bezier(.2,.9,.3,1.4) .3s both;}
@keyframes logoPop{from{opacity:0; transform:scale(.5);}to{opacity:1; transform:scale(1);}}
.sp-kicker{font-size:11px; font-weight:700; letter-spacing:.34em; color:#F9B612; margin-bottom:10px;
  animation:riseIn .5s ease .4s both;}
.sp-title{display:flex; flex-direction:column; line-height:.98; margin-bottom:16px;}
.sp-title span{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(40px, 12vw, 58px); color:#fff; letter-spacing:.01em;
  animation:riseIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.sp-title span:last-child{color:#F9B612;}
@keyframes riseIn{from{opacity:0; transform:translateY(22px);}to{opacity:1; transform:none;}}
.sp-date{
  font-size:12px; font-weight:700; letter-spacing:.2em; color:#fff;
  border:1.5px solid rgba(255,255,255,.45); border-radius:99px; padding:8px 18px;
  animation:riseIn .5s ease .62s both;
}
.sp-sub{color:rgba(255,255,255,.82); font-size:14px; margin-top:16px; max-width:36ch;
  animation:riseIn .5s ease .72s both;}
.sp-cta{
  margin-top:26px; background:#fff; color:#1B2A6E; font-weight:700; font-size:15px;
  border-radius:99px; padding:15px 40px; letter-spacing:.02em;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  animation:riseIn .5s ease .84s both;
}
.sp-cta:active{transform:scale(.97);}
@media (prefers-reduced-motion:reduce){
  .sp-bands i,.sp-logo,.sp-kicker,.sp-title span,.sp-date,.sp-sub,.sp-cta{animation:none;}
}