*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari","Noto Sans",sans-serif}
.stage{position:relative;width:100%;height:100%;min-height:200px;background:#000;overflow:hidden;--tick-h:clamp(30px,5vw,56px);--tb:0px;--tt:0px;--chip-h:0px}
.stage.tick-bottom{--tb:var(--tick-h)}
.stage.tick-top{--tt:var(--tick-h)}
.stage.has-bar{--chip-h:clamp(34px,4.6vw,46px)}
#video,#yt,#yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
#video{object-fit:contain}
[hidden]{display:none!important}

.slate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#1b2a4a 0%,#0b1220 70%);padding:24px}
.slate-brand{font-size:clamp(22px,5vw,56px);font-weight:800;letter-spacing:.02em}
.slate-msg{margin-top:14px;font-size:clamp(14px,2.2vw,24px);opacity:.85}
.slate-next{margin-top:10px;font-size:clamp(12px,1.8vw,18px);opacity:.65}

.start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:5}
.start button{font:inherit;font-size:clamp(16px,3vw,26px);font-weight:700;color:#fff;background:#c8102e;border:0;border-radius:999px;padding:.7em 1.6em;cursor:pointer}

/* NOW / AD label, top left, with the sound button beside it */
.nowchip{position:absolute;left:2.2%;top:calc(var(--tt) + 2.2%);z-index:6;display:flex;gap:10px;align-items:center;max-width:70%;
  padding:6px 8px 6px 6px;border-radius:999px;background:rgba(0,0,0,.55);font-size:clamp(12px,1.6vw,16px);backdrop-filter:blur(2px)}
.nowtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;min-width:0}
.tag{background:#c8102e;color:#fff;border-radius:4px;padding:2px 7px;font-weight:800;font-size:.8em;letter-spacing:.06em}
.sound{flex:none;font:inherit;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.25em .8em;cursor:pointer;white-space:nowrap}
.sound:hover{background:rgba(255,255,255,.26)}

/* logo: size is a percentage of the picture width */
.logo{position:absolute;z-index:3;width:calc(var(--logo-size,12) * 1%);height:auto;max-height:32%;object-fit:contain;opacity:calc(var(--logo-opacity,100) / 100);pointer-events:none;user-select:none}
.logo.tl{left:2.2%;top:calc(var(--tt) + var(--chip-h) + 3.4%)}
.logo.tr{right:2.2%;top:calc(var(--tt) + 2.2%)}
.logo.bl{left:2.2%;bottom:calc(var(--tb) + 1.2%)}
.logo.br{right:2.2%;bottom:calc(var(--tb) + 1.2%)}

/* scrolling ticker */
.ticker{position:absolute;left:0;right:0;height:var(--tick-h);z-index:4;display:flex;align-items:stretch;overflow:hidden;
  background:var(--tick-bg,#14213d);color:var(--tick-fg,#fff);font-size:calc(var(--tick-h) * .5);line-height:1;font-weight:600}
.ticker.top{top:0}.ticker.bottom{bottom:0}
.tick-label{flex:none;display:flex;align-items:center;padding:0 .9em;background:#c8102e;color:#fff;font-weight:800;letter-spacing:.04em;white-space:nowrap;position:relative;z-index:1;box-shadow:4px 0 8px rgba(0,0,0,.35)}
.tick-view{flex:1;min-width:0;position:relative;overflow:hidden}
.tick-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform;animation:tickmove var(--dur,30s) linear infinite}
.tick-seg{display:flex;align-items:center;flex:none}
.tick-item{padding:.2em 0}
.tick-sep{flex:none;width:.34em;height:.34em;margin:0 1.2em;border-radius:50%;background:currentColor;opacity:.55}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(var(--shift,-100%))}}

/* overlay ads: images that fade in for a few seconds on a repeating cycle */
.adlayer{position:absolute;inset:0;z-index:5;pointer-events:none}
.adimg{position:absolute;display:block;width:calc(var(--ad-size,24) * 1%);height:auto;max-height:42%;object-fit:contain;opacity:0;transition:opacity .6s ease;user-select:none}
.adimg.on{opacity:1}
.adimg.tl{left:2.2%;top:calc(var(--tt) + var(--chip-h) + 3.4%)}
.adimg.tr{right:2.2%;top:calc(var(--tt) + 2.2%)}
.adimg.tc{left:50%;top:calc(var(--tt) + 2.2%);transform:translateX(-50%)}
.adimg.bl{left:2.2%;bottom:calc(var(--tb) + 1.2%)}
.adimg.br{right:2.2%;bottom:calc(var(--tb) + 1.2%)}
.adimg.bc{left:50%;bottom:calc(var(--tb) + 1.2%);transform:translateX(-50%)}