marquee.css

/* ============================================================
   MARQUEE — design system
   Tokens straight from the brief so they lift into Gradio css=.
   Sections: tokens · base · masthead · rundown · desk · stage
   · star card · vibes + Coco · broadcast player · utilities
   ============================================================ */

:root{
  /* night & surfaces */
  --night:#190B2E;        /* base */
  --night-2:#120821;      /* deeper, for wells */
  --stage:#241241;        /* panels */
  --stage-2:#2E1A52;      /* raised */
  --raise:#382060;        /* inputs-on-dark */
  --line:#3A2A5E;         /* borders */
  --line-soft:#2C1E4C;

  /* leads + helper */
  --hot:#FF3D8B;          /* primary / on-air / energy */
  --gold:#FFC94D;         /* stardom: lights, crowns */
  --cyan:#3DE7FF;         /* confirm / scan */
  --violet:#B98BFF;       /* playful / mascot */

  /* text */
  --cream:#FFF3E9;
  --muted:#A98FC9;
  --muted-2:#7C66A6;

  /* the casting rainbow — each star gets their own character color.
     all high-chroma, all in-family: the "agent select" punch. */
  --star-gold:#FFC94D;
  --star-hot:#FF4D9A;
  --star-cyan:#3DE7FF;
  --star-violet:#C18BFF;
  --star-lime:#9BE85B;
  --star-tang:#FF8A4D;

  --fx:cubic-bezier(.2,.9,.25,1);
  --pop:cubic-bezier(.2,1.7,.4,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  font-family:Nunito,system-ui,sans-serif;
  color:var(--cream);
  background:var(--night);
  min-height:100vh;
  line-height:1.5;
  /* one justified light: a stage spotlight from above + a faint floor wash.
     no decorative blob gradients. */
  background-image:
    radial-gradient(120% 70% at 50% -25%, rgba(255,201,77,.10), transparent 55%),
    radial-gradient(140% 90% at 50% 120%, rgba(61,231,255,.05), transparent 60%);
  background-attachment:fixed;
}
/* film grain — the only decorative texture, very subtle */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.disp{font-family:Unbounded,sans-serif}
.marq{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em}
svg.i{width:1em;height:1em;display:block;flex:none}

.shell{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,34px) clamp(16px,4vw,40px) 40px;position:relative;z-index:1}

/* ============================================================
   MASTHEAD — the broadcast header bar. signature lives here.
   ============================================================ */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:22px;margin-bottom:6px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:18px}

/* the lit marquee sign — spend the boldness here */
.sign{
  position:relative;padding:14px 22px 15px;border-radius:14px;
  border:2px solid rgba(255,201,77,.55);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,201,77,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,201,77,.05), rgba(25,11,46,.2));
  box-shadow:inset 0 0 22px rgba(255,201,77,.16), 0 10px 40px rgba(255,61,139,.10);
}
.sign h1{
  font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);
  letter-spacing:.04em;line-height:.9;
  color:var(--cream);
  text-shadow:0 0 18px rgba(255,201,77,.45), 0 0 2px rgba(255,201,77,.8);
}
/* perimeter bulbs, top + bottom rows */
.sign .bulbs{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between}
.sign .bulbs.t{top:-5px}.sign .bulbs.b{bottom:-5px}
.sign .bulbs i{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold),0 0 2px #fff;animation:tw 2.6s infinite}
.sign .bulbs i:nth-child(2n){animation-delay:.7s}
.sign .bulbs i:nth-child(3n){animation-delay:1.5s;background:var(--hot);box-shadow:0 0 8px var(--hot),0 0 2px #fff}
@keyframes tw{0%,100%{opacity:1}48%{opacity:.28}}

.tag{font-family:Unbounded,sans-serif;font-weight:500;font-size:13px;color:var(--gold);letter-spacing:.01em}
.tag small{display:block;font-family:Nunito;font-weight:600;color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:0}

/* right side: live clock + status */
.broadcast-meta{display:flex;align-items:center;gap:14px}
.clock{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:20px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.status{display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;
  font-size:16px;color:var(--muted);border:1px solid var(--line);padding:8px 15px;border-radius:999px;
  background:rgba(46,26,82,.5)}
.status .led{width:9px;height:9px;border-radius:50%;background:var(--muted-2);transition:.3s}
.status.live{color:var(--hot);border-color:rgba(255,61,139,.5);background:rgba(255,61,139,.08)}
.status.live .led{background:var(--hot);box-shadow:0 0 12px var(--hot);animation:tw 1.1s infinite}

/* ============================================================
   RUNDOWN — broadcast running order, not 4 identical cards.
   nodes on a connecting track.
   ============================================================ */
.rundown{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  margin:8px 0 30px;padding:0 6px}
.rundown::before{content:"";position:absolute;top:19px;left:11%;right:11%;height:2px;
  background:var(--line-soft)}
.cue{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.cue .node{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--stage);border:2px solid var(--line);
  font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--muted-2);
  position:relative;z-index:1;transition:.35s var(--fx)}
.cue .ttl{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
.cue .sub{font-size:11px;color:var(--muted-2);letter-spacing:.01em}
/* done */
.cue.done .node{border-color:var(--cyan);color:var(--cyan);background:rgba(61,231,255,.08)}
.cue.done .ttl{color:var(--cream)}
/* active */
.cue.on .node{border-color:var(--gold);color:var(--gold);background:rgba(255,201,77,.12);
  box-shadow:0 0 0 5px rgba(255,201,77,.1),0 0 22px rgba(255,201,77,.3)}
.cue.on .ttl{color:var(--gold)}
@media(prefers-reduced-motion:no-preference){
  .cue.on .node{animation:cuePulse 2s infinite}
}
@keyframes cuePulse{0%,100%{box-shadow:0 0 0 5px rgba(255,201,77,.1),0 0 22px rgba(255,201,77,.28)}
  50%{box-shadow:0 0 0 8px rgba(255,201,77,.04),0 0 30px rgba(255,201,77,.45)}}

/* ============================================================
   LAYOUT — control desk (left) vs the stage (right).
   intentionally asymmetric; the two halves are treated differently.
   ============================================================ */
.console{display:grid;grid-template-columns:362px 1fr;gap:20px;align-items:start}
@media(max-width:900px){.console{grid-template-columns:1fr}}

/* the desk: flat, utilitarian — it's the control surface, not a showpiece */
.desk{display:flex;flex-direction:column;gap:16px}
.card{background:var(--stage);border:1px solid var(--line-soft);border-radius:16px;padding:18px}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-h .ic{color:var(--gold);font-size:18px}
.card-h h2{font-family:Unbounded,sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em}
.card-h .meta{margin-left:auto;font-family:'Bebas Neue',sans-serif;letter-spacing:.07em;font-size:12px;color:var(--muted-2)}

/* roll tape drop zone — clapperboard motif */
.drop{position:relative;border:1.5px dashed var(--line);border-radius:13px;padding:26px 16px;
  text-align:center;cursor:pointer;transition:.22s var(--fx);overflow:hidden;
  background:radial-gradient(200px 110px at 50% -20%,rgba(255,201,77,.07),transparent 70%)}
.drop:hover{border-color:var(--gold);background:radial-gradient(200px 130px at 50% -10%,rgba(255,201,77,.12),transparent 70%)}
.drop:focus-visible{border-color:var(--cyan)}
.drop .clap{font-size:30px;color:var(--gold);display:inline-flex;margin-bottom:8px}
.drop .t{font-family:Unbounded,sans-serif;font-weight:600;font-size:15px}
.drop .s{font-size:12px;color:var(--muted);margin-top:4px}
/* loaded: a little filmstrip readout */
.drop .loaded{display:none;align-items:center;gap:12px;text-align:left}
.drop.loaded{border-style:solid;border-color:rgba(61,231,255,.45);background:rgba(61,231,255,.05);cursor:default}
.drop.loaded .ask{display:none}
.drop.loaded .loaded{display:flex}
.strip{width:52px;height:52px;border-radius:9px;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--raise),var(--stage));border:1px solid var(--line)}
.strip::before,.strip::after{content:"";position:absolute;top:4px;bottom:4px;width:5px;
  background:repeating-linear-gradient(var(--night) 0 3px,transparent 3px 7px)}
.strip::before{left:3px}.strip::after{right:3px}
.strip .play{position:absolute;inset:0;display:grid;place-items:center;color:var(--cyan);font-size:16px}
.loaded .fn{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--cream)}
.loaded .fd{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;font-size:13px;color:var(--cyan);margin-top:3px}

/* buttons */
.btn{width:100%;border:0;cursor:pointer;font-family:Unbounded,sans-serif;font-weight:600;font-size:14px;
  color:var(--night);padding:14px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  gap:9px;transition:.18s var(--fx)}
.btn:disabled{opacity:.4;cursor:not-allowed;background:var(--raise);color:var(--muted-2)}
.btn.cyan{background:linear-gradient(135deg,var(--cyan),#16b6d8)}
.btn.cyan:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(61,231,255,.3)}
.btn.show{font-size:17px;padding:17px;background:linear-gradient(110deg,var(--gold),var(--hot));position:relative;overflow:hidden}
.btn.show:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(255,61,139,.4)}
.btn.show:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-200%)}
@media(prefers-reduced-motion:no-preference){
  .btn.show:not(:disabled)::after{animation:shine 3.4s ease-in-out 1.2s infinite}
}
@keyframes shine{0%,100%{transform:translateX(-220%)}40%,60%{transform:translateX(360%)}}
.mt{margin-top:14px}

/* casting sweep bar */
.sweep{height:6px;border-radius:4px;margin-top:13px;background:var(--night-2);position:relative;overflow:hidden;
  opacity:0;height:0;margin-top:0;transition:.25s}
.casting .sweep{opacity:1;height:6px;margin-top:13px}
.sweep::after{content:"";position:absolute;inset:0;width:36%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@media(prefers-reduced-motion:no-preference){.sweep::after{animation:sw 1s linear infinite}}
@keyframes sw{from{transform:translateX(-120%)}to{transform:translateX(330%)}}

/* ============================================================
   THE STAGE — Star Select. theatrical, spotlit well.
   ============================================================ */
.stage-panel{background:
    radial-gradient(80% 60% at 50% -8%, rgba(255,201,77,.07), transparent 60%),
    linear-gradient(180deg,var(--stage),var(--night-2));
  border:1px solid var(--line);border-radius:20px;padding:20px;
  box-shadow:inset 0 1px 0 rgba(255,243,233,.04), 0 24px 60px rgba(8,2,20,.5)}
.stage-h{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.stage-h .ic{color:var(--gold);font-size:19px}
.stage-h h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:16px}
.stage-h .count{margin-left:auto;white-space:nowrap;font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:14px;
  color:var(--muted);background:rgba(46,26,82,.6);padding:4px 11px;border-radius:8px}

/* empty state */
.empty{display:grid;place-items:center;min-height:330px;text-align:center;padding:20px}
.empty .spot{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  color:var(--muted-2);font-size:46px;
  background:radial-gradient(circle at 50% 30%,rgba(255,201,77,.08),transparent 70%)}
.empty .t{font-family:Unbounded,sans-serif;font-weight:600;font-size:17px;color:var(--cream);margin-bottom:6px}
.empty .s{font-size:13px;color:var(--muted);max-width:300px}

/* star grid */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:16px}

/* ---- the star card (one reusable block) ----
   per-card character color is set inline as --c. */
/* base state is fully visible — entrance is driven via WAAPI in JS so a
   backgrounded tab never leaves cards stuck invisible. */
.star{--c:var(--gold);position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--stage-2),var(--stage));
  border:1px solid var(--line);transition:.25s var(--fx)}
.star:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}

/* portrait well with a spotlight beam tinted to the character color,
   and an angular framed headshot placeholder (agent-select energy) */
.portrait{position:relative;height:138px;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 120%,color-mix(in srgb,var(--c) 22%,var(--night-2)),var(--night-2))}
.portrait .beam{position:absolute;top:-30px;left:50%;width:150px;height:170px;transform:translateX(-50%);
  pointer-events:none;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%);opacity:.7}
.portrait .head-ph{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  color:color-mix(in srgb,var(--c) 50%,#ffffff);opacity:.4}
.portrait .frame{position:absolute;inset:8px;border:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);
  border-radius:11px;pointer-events:none}
.portrait .idx{position:absolute;top:10px;left:10px;font-family:'Bebas Neue',sans-serif;font-size:14px;
  color:var(--cream);background:rgba(15,6,30,.7);padding:2px 7px;border-radius:7px;display:flex;align-items:center;gap:3px}
.portrait .idx .st{color:var(--c)}
.tier{position:absolute;top:10px;right:10px;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.02em;
  white-space:nowrap;color:var(--night);background:var(--c);padding:3px 8px;border-radius:7px;
  box-shadow:0 2px 10px color-mix(in srgb,var(--c) 50%,transparent)}

/* crown drops in on naming */
/* crown lifts in above the star's head on naming */
.crown{position:absolute;top:50px;left:50%;transform:translateX(-50%) translateY(12px) scale(.4) rotate(-12deg);
  opacity:0;width:30px;height:30px;color:var(--gold);
  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--gold) 70%,transparent));
  transition:.4s var(--pop)}
.star.named .crown{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}

.star-body{padding:13px}
.star-body label{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:12px;color:var(--muted);
  display:block;margin-bottom:7px}
.star input{width:100%;background:var(--night-2);border:1px solid var(--line);color:var(--cream);
  border-radius:10px;padding:10px 12px;font-family:Nunito;font-weight:800;font-size:14px;outline:none;transition:.16s}
.star input::placeholder{color:var(--muted-2);font-weight:600}
.star input:focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}

/* crowned: card lights in its own character color */
.star.named{border-color:color-mix(in srgb,var(--c) 65%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 10px 30px color-mix(in srgb,var(--c) 18%,transparent)}
.star.named .portrait{background:radial-gradient(90% 90% at 50% 120%,color-mix(in srgb,var(--c) 40%,var(--night-2)),var(--night-2))}
.star.named .portrait .beam{opacity:1}
.star.named .head-ph{opacity:.6}

/* ============================================================
   VIBES (narration modes) + COCO host
   ============================================================ */
.vibes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vibe{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;cursor:pointer;color:var(--cream);
  border:1px solid var(--line-soft);background:var(--stage-2);transition:.18s var(--fx);text-align:left}
.vibe:hover{border-color:var(--violet);transform:translateY(-1px)}
.vibe .ic{font-size:20px;color:var(--muted);display:inline-flex;transition:.18s}
.vibe>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.vibe .vt{display:block;font-family:Unbounded,sans-serif;font-weight:600;font-size:13px;color:var(--cream)}
.vibe .vd{display:block;font-size:11px;color:var(--muted);line-height:1.25}
.vibe[aria-pressed="true"]{border-color:var(--vc,var(--hot));background:color-mix(in srgb,var(--vc,var(--hot)) 12%,var(--stage-2))}
.vibe[aria-pressed="true"] .ic{color:var(--vc,var(--hot))}

/* Coco — the host bug. re-dresses per vibe. */
.coco{display:flex;align-items:center;gap:13px;margin-top:14px;padding:13px 14px;border-radius:14px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--vc,var(--violet)) 12%,var(--stage-2)),var(--stage-2));
  border:1px solid color-mix(in srgb,var(--vc,var(--violet)) 30%,var(--line-soft));transition:.35s var(--fx)}
.coco .av{position:relative;width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--vc,var(--violet)) 70%,#fff 5%),var(--vc,var(--violet)));
  box-shadow:0 6px 18px color-mix(in srgb,var(--vc,var(--violet)) 40%,transparent);transition:.35s var(--fx)}
.coco .av .bird{width:30px;height:30px;color:var(--night);filter:drop-shadow(0 1px 1px rgba(255,255,255,.3))}
/* accessory badge sits on the avatar, swapped per vibe */
.coco .acc{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--night);border:2px solid var(--vc,var(--violet));
  color:var(--vc,var(--violet));font-size:11px}
.coco .acc svg{width:12px;height:12px}
.coco .say{font-size:13px;line-height:1.45}
.coco .say b{color:var(--vc,var(--gold))}
.coco .who{font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:11px;color:var(--vc,var(--violet));
  display:block;margin-bottom:2px}

/* privacy footnote — visible, not buried */
.note{margin-top:26px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6}
.note b{color:var(--cream)}
.note .lock{color:var(--cyan);vertical-align:-2px;margin-right:5px}

/* ============================================================
   VIEW SWITCH
   ============================================================ */
.view{display:none}
.view.active{display:block;animation:viewIn .4s var(--fx)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   BROADCAST PLAYER
   ============================================================ */
.booth-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;background:var(--stage);border:1px solid var(--line);
  color:var(--cream);font-family:Nunito;font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;transition:.16s}
.back:hover{border-color:var(--violet)}
.orient{display:flex;gap:4px;background:var(--stage);border:1px solid var(--line-soft);padding:4px;border-radius:11px}
.orient button{background:transparent;border:0;color:var(--muted);font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
  font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;transition:.16s}
.orient button[aria-pressed="true"]{background:var(--raise);color:var(--gold)}

.booth{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
/* portrait: the clip is a phone-sized vertical frame, never a giant column-filling block.
   capped width keeps the 9:16 height sane and the play-by-play rail beside it. */
.booth.portrait{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.booth.portrait .screen-wrap{max-width:340px}
@media(max-width:840px){
  .booth,.booth.square{grid-template-columns:1fr}
  .booth.portrait{grid-template-columns:1fr}
  .booth.portrait .screen-wrap{margin-inline:auto}
}

/* the screen */
.screen-wrap{background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.6);position:relative}
.screen{position:relative;width:100%;aspect-ratio:16/9;background:
    repeating-linear-gradient(135deg,#1c0f33 0 18px,#170c2b 18px 36px);
  display:grid;place-items:center}
.booth.portrait .screen{aspect-ratio:9/16}
.booth.square .screen{aspect-ratio:1/1}
.screen .ph{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;color:var(--muted-2);font-size:15px;
  text-align:center;padding:0 20px}
.screen .ph svg{width:40px;height:40px;margin:0 auto 10px;color:var(--line);display:block}

/* on-air bug */
.bug{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:rgba(15,6,30,.6);backdrop-filter:blur(4px);padding:7px 12px;border-radius:9px;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:14px;color:var(--cream)}
.bug .dot{width:10px;height:10px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot)}
@media(prefers-reduced-motion:no-preference){.bug .dot{animation:tw 1.1s infinite}}

/* timecode */
.tc{position:absolute;top:14px;right:14px;background:rgba(15,6,30,.6);backdrop-filter:blur(4px);
  padding:7px 12px;border-radius:9px;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:15px;
  color:var(--cyan);font-variant-numeric:tabular-nums}

/* lower-third chyron */
.chyron{position:absolute;left:14px;right:14px;bottom:14px;border-radius:12px;overflow:hidden;
  background:linear-gradient(100deg,rgba(15,6,30,.92),rgba(36,18,65,.82));
  border:1px solid color-mix(in srgb,var(--cc,var(--hot)) 40%,var(--line));
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transform:translateY(130%);opacity:0;transition:.45s var(--fx)}
.chyron.in{transform:none;opacity:1}
.chyron .bar{height:4px;background:linear-gradient(90deg,var(--cc,var(--hot)),var(--gold))}
.chyron .row{display:flex;align-items:stretch}
.chyron .who{display:flex;align-items:center;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
  font-size:17px;color:var(--night);background:var(--cc,var(--hot));padding:10px 14px;white-space:nowrap}
.chyron .line{padding:10px 16px;font-family:Nunito;font-weight:700;font-size:15px;color:var(--cream);
  display:flex;align-items:center;line-height:1.3}
@media(prefers-reduced-motion:no-preference){
  .chyron.in .line{animation:sharpen .5s var(--fx)}
}
@keyframes sharpen{from{filter:blur(7px);opacity:.3}to{filter:blur(0);opacity:1}}

/* transport */
.transport{display:flex;align-items:center;gap:14px;margin-top:14px}
.transport .pp{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--hot));color:var(--night);font-size:20px;transition:.16s}
.transport .pp:hover{transform:scale(1.05)}
.scrub{flex:1;height:6px;border-radius:4px;background:var(--raise);position:relative;cursor:pointer}
.scrub .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:0;
  background:linear-gradient(90deg,var(--hot),var(--gold))}
.scrub .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--cream);
  transform:translate(-50%,-50%);left:0;box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* play-by-play rail */
.pbp{background:var(--stage);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;max-height:520px}
.pbp .pbp-h{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.pbp .pbp-h .ic{color:var(--gold);font-size:16px}
.pbp .pbp-h h3{font-family:Unbounded,sans-serif;font-weight:600;font-size:13px}
.pbp .pbp-h .ct{margin-left:auto;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;font-size:12px;color:var(--muted-2)}
.pbp .lines{overflow-y:auto;padding:6px}
.pbp .pl{display:flex;gap:11px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:.15s;align-items:baseline}
.pbp .pl:hover{background:var(--stage-2)}
.pbp .pl .t{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:14px;color:var(--muted-2);
  flex:none;width:42px;font-variant-numeric:tabular-nums;padding-top:1px}
.pbp .pl .tx{font-size:13px;line-height:1.45;color:var(--muted)}
.pbp .pl .tx b{color:var(--cream);font-weight:800}
.pbp .pl.now{background:color-mix(in srgb,var(--cc,var(--hot)) 14%,var(--stage-2))}
.pbp .pl.now .t{color:var(--cc,var(--hot))}
.pbp .pl.now .tx{color:var(--cream)}
.pbp .pl.now .tx b{color:var(--cc,var(--hot))}

/* export bar */
.export{padding:13px 16px;border-top:1px solid var(--line-soft);background:var(--night-2)}
.export .btn-srt{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  background:var(--stage-2);border:1px solid var(--line);color:var(--cream);font-family:Nunito;font-weight:700;
  font-size:13px;padding:12px;border-radius:11px;transition:.16s}
.export .btn-srt:hover{border-color:var(--cyan);color:var(--cyan)}
.export .btn-srt .ic{color:var(--cyan);font-size:16px}
.export .hint{text-align:center;font-size:11px;color:var(--muted-2);margin-top:8px}
.export .hint b{color:var(--muted)}

/* confetti */
.confetti{position:fixed;top:-20px;width:11px;height:14px;z-index:90;pointer-events:none;border-radius:2px}
@media(prefers-reduced-motion:no-preference){.confetti{animation:fall linear forwards}}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

/* ============================================================
   UTILITIES
   ============================================================ */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--stage-2);border:1px solid var(--cyan);color:var(--cream);padding:12px 20px;border-radius:12px;
  font-weight:700;font-size:13px;z-index:95;transition:.3s var(--fx);display:flex;align-items:center;gap:9px;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.toast.show{transform:translateX(-50%);opacity:1}
.toast .ic{color:var(--cyan)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:560px){
  .masthead{gap:14px}
  .rundown .sub{display:none}
  .vibes{grid-template-columns:1fr}
  .roster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ============================================================
   INTEGRATION ADDITIONS — real <video> in the screen, real face
   crops in star cards (added for the Gradio wiring)
   ============================================================ */
.screen-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
.screen.has-video .ph{display:none}
.screen.has-video .screen-vid{display:block}
.portrait .head-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.star.named .head-img{filter:saturate(1.05)}