/* Helios Sweep wall board */
:root{--gold:#C9A835;--gold-hi:#F0D775;--cyan:#3EC9E0;--red:#F7A19B;--green:#8FE0AC}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#040a16;color:#fff;font-family:Roboto,system-ui,sans-serif;overflow:hidden}
.stage{position:fixed;inset:0;z-index:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-legend{position:absolute;left:0;right:0;bottom:8px;justify-content:center;display:flex;z-index:3;pointer-events:none}
.phone-only{display:none}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);opacity:.5;z-index:2}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 55%,rgba(2,6,14,.85) 100%)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.hud-top{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;
  background:linear-gradient(180deg,rgba(4,10,22,.85),rgba(4,10,22,0));}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(201,168,53,.4))}
.brand b{display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.15rem;letter-spacing:-.01em}
.brand span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);margin-top:2px}
.mode{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.32em;color:rgba(255,255,255,.75);padding:8px 16px;border:1px solid rgba(201,168,53,.4);border-radius:999px;background:rgba(4,10,22,.5)}
.clock{display:flex;align-items:center;gap:14px;font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;letter-spacing:.08em}
.live{font-size:.62rem;letter-spacing:.2em;color:var(--green)}
.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#5FB27B;margin-right:7px;animation:pulse 1.2s ease-in-out infinite;vertical-align:middle}
.live.stale{color:var(--red)}.live.stale::before{background:#E2645D;animation:none}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.hud-left,.hud-right{position:fixed;z-index:5;top:86px;bottom:112px;width:300px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.hud-left{left:22px}.hud-right{right:22px}
.panel{padding:14px 15px;border-radius:14px;background:rgba(6,16,31,.62);border:1px solid rgba(201,168,53,.28);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.pt{font-family:ui-monospace,Menlo,monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 8px}
.big{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);margin-bottom:8px}
.big b{display:block;font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.big small{display:block;margin-top:5px;font-family:ui-monospace,Menlo,monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2 .big b{font-size:1.45rem}
b.red{color:var(--red)}b.green{color:var(--green)}b.gold{color:var(--gold-hi)}b.cyan{color:#8FE3F0}
.hz-bar{display:grid;grid-template-columns:72px 1fr 24px;gap:7px;align-items:center;margin:5px 0;font-size:.7rem}
.hz-bar-l{font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.85)}
.hz-bar-t{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.hz-bar-t i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#E3CC70);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.hz-bar-n{text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:.62rem;color:rgba(255,255,255,.55)}

.op-title{font-size:1rem;font-weight:700;line-height:1.3;margin:2px 0 4px}
.op-phase{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#8FE3F0;min-height:16px}
.op-phase.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3EC9E0;margin-right:7px;animation:pulse 1s ease-in-out infinite;vertical-align:middle}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 12px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3EC9E0,#59e3b0);transition:width .5s;position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shine 1.6s linear infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.op-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.op-nums div{text-align:center;padding:8px 4px;border-radius:9px;background:rgba(255,255,255,.045)}
.op-nums b{display:block;font-size:1.25rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.op-nums small{display:block;margin-top:4px;font-family:ui-monospace,Menlo,monospace;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.op-report{margin-top:10px;font-size:.76rem;color:rgba(255,255,255,.75);line-height:1.45}
.op-report b{color:var(--gold-hi)}
.ev{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.72rem;line-height:1.35}
.ev:last-child{border:0}
.ev i{flex:0 0 6px;width:6px;height:6px;border-radius:50%;margin-top:6px;background:var(--gold)}
.ev i.red{background:#E2645D}.ev i.green{background:#5FB27B}.ev i.cyan{background:#3EC9E0}
.ev span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.85)}
.ev small{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-size:.58rem;color:rgba(255,255,255,.4)}

.hud-bottom{position:fixed;z-index:5;left:22px;right:22px;bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center}
.ticker{min-height:48px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;background:rgba(6,16,31,.62);border:1px solid rgba(201,168,53,.28);backdrop-filter:blur(6px);font-size:.84rem;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;min-width:0}
.ticker.in{opacity:1;transform:none}
.ticker .src{font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);flex:0 0 auto}
.ticker .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker .s{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.s.red{color:var(--red)}.s.green{color:var(--green)}.s.gold{color:var(--gold-hi)}.s.cyan{color:#8FE3F0}
.legend{display:flex;gap:12px;font-family:ui-monospace,Menlo,monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.ctl{display:flex;gap:8px}
.ctl button,.ctl a{font-family:ui-monospace,Menlo,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(6,16,31,.62);border:1px solid rgba(201,168,53,.4);border-radius:8px;padding:9px 12px;cursor:pointer;text-decoration:none}
.ctl button:hover,.ctl a:hover{background:rgba(201,168,53,.18)}

.center-msg{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-family:ui-monospace,Menlo,monospace;letter-spacing:.2em;font-size:.72rem;color:rgba(255,255,255,.55);pointer-events:none}
.center-msg b{display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:2rem;letter-spacing:-.02em;color:#fff;margin-bottom:8px}

@media(max-width:1180px){.hud-left,.hud-right{width:240px}.big b{font-size:1.5rem}.row2 .big b{font-size:1.2rem}}
@media(max-width:900px){.mode{display:none}}

/* ---------- second generation overlays ---------- */
.modewrap{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:640px}
.narrate{font-family:Roboto,system-ui,sans-serif;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.88);text-align:center;padding:8px 16px;border-radius:12px;background:rgba(6,16,31,.55);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px);transition:opacity .4s}
.narrate.fade{opacity:0}

.attention{position:fixed;z-index:6;right:22px;top:100px;width:300px;display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg,rgba(226,100,93,.28),rgba(226,100,93,.10));border:1px solid rgba(226,100,93,.7);box-shadow:0 0 0 0 rgba(226,100,93,.5);animation:attPulse 2.4s ease-in-out infinite}
.attention[hidden]{display:none}
@keyframes attPulse{0%,100%{box-shadow:0 0 0 0 rgba(226,100,93,.45)}50%{box-shadow:0 0 0 10px rgba(226,100,93,0)}}
.att-n{font-size:2.4rem;font-weight:700;line-height:1;color:#F7A19B;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.attention b{display:block;font-size:.92rem;line-height:1.25}
.attention span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:4px}
.hud-right{top:86px}
.hud-right.shifted{top:196px}

.spot{position:fixed;z-index:6;left:50%;bottom:196px;transform:translateX(-50%);max-width:560px;width:calc(100% - 700px);min-width:320px;padding:14px 18px;border-radius:14px;
  background:rgba(6,16,31,.72);border:1px solid rgba(201,168,53,.45);backdrop-filter:blur(8px);text-align:center;transition:opacity .5s,transform .5s}
.spot[hidden]{display:none}
.spot.out{opacity:0;transform:translateX(-50%) translateY(8px)}
.spot-k{font-family:ui-monospace,Menlo,monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.spot-s{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.25rem;line-height:1.25;margin:4px 0 6px}
.spot-d{font-size:.84rem;color:rgba(255,255,255,.82);line-height:1.45}
.spot-d b{color:#F7A19B}
.spot-d b.g{color:var(--green)}

#labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.lbl{position:absolute;transform:translate(10px,-50%);padding:5px 9px;border-radius:8px;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.04em;color:#fff;
  background:rgba(6,16,31,.78);border:1px solid rgba(255,255,255,.14);transition:opacity .3s}
.lbl::before{content:"";position:absolute;left:-10px;top:50%;width:10px;height:1px;background:rgba(255,255,255,.35)}
.lbl.red{border-color:rgba(226,100,93,.7)}.lbl.red b{color:#F7A19B}
.lbl.cyan{border-color:rgba(62,201,224,.6)}.lbl.cyan b{color:#8FE3F0}
.lbl.gold{border-color:rgba(201,168,53,.6)}.lbl.gold b{color:var(--gold-hi)}
.lbl b{font-weight:700}
.lbl small{display:block;color:rgba(255,255,255,.6);margin-top:1px;font-size:.6rem}

.timeline{position:fixed;z-index:5;left:340px;right:340px;bottom:86px;padding:8px 12px 6px;border-radius:12px;background:rgba(6,16,31,.55);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.tl-head{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:6px}
.tl-head span:last-child{color:rgba(255,255,255,.55)}
.tl-track{position:relative;height:22px;border-radius:6px;background:rgba(255,255,255,.06);overflow:visible}
.tl-now{position:absolute;right:0;top:-3px;bottom:-3px;width:2px;background:#3EC9E0;box-shadow:0 0 8px #3EC9E0}
.tl-ev{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(0,0,0,.4)}
.tl-ev.report{background:#3EC9E0}.tl-ev.quarantined{background:#C9A835}.tl-ev.confirmed{background:#E2645D}.tl-ev.released,.tl-ev.dismissed{background:#5FB27B}.tl-ev.feed{background:#9db2d0;width:6px;height:14px;border-radius:2px}.tl-ev.held{background:#E2645D}
.tl-ev:hover::after{content:attr(data-l);position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:.6rem;color:#fff;background:#0b1626;padding:3px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}
.tl-axis{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:4px}

.qr{position:fixed;z-index:6;left:22px;bottom:86px;display:flex;gap:10px;align-items:center;padding:8px 10px 8px 8px;border-radius:12px;background:rgba(255,255,255,.96);color:#0B1C34;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.qr-img svg{display:block;width:84px;height:84px}
.qr-t b{display:block;font-size:.8rem;line-height:1.2}
.qr-t span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#64748B;margin-top:3px}
.hud-left{bottom:196px}
@media(max-width:1180px){.timeline{left:262px;right:262px}.spot{width:calc(100% - 560px)}}
/* ---------- phones and small tablets: a scrolling column ---------- */
@media(max-width:900px){
  html,body{height:auto;overflow:auto;-webkit-overflow-scrolling:touch}
  body{display:flex;flex-direction:column;gap:10px;padding:0 10px 18px;background:#040a16}
  .hud-top{position:sticky;top:0;z-index:20;order:1;margin:0 -10px;padding:10px 14px;background:rgba(4,10,22,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
  .brand img{width:34px;height:34px}.brand b{font-size:.95rem}.brand span{font-size:.5rem}
  .modewrap{display:none}
  .clock{font-size:.85rem;gap:8px}
  .mobile-mode{order:2;display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.7)}
  .narrate.phone{order:2;display:block;margin:0;font-size:.86rem}
  .stage{position:relative;inset:auto;order:3;height:52vh;min-height:300px;border-radius:14px;overflow:hidden;border:1px solid rgba(201,168,53,.35)}
  .attention{position:static;order:4;width:auto;margin:0}
  .spot{position:static;transform:none;order:5;width:auto;min-width:0;max-width:none;margin:0}
  .spot.out{transform:none}
  .hud-left,.hud-right{display:flex;position:static;width:auto;order:6;overflow:visible;gap:10px}
  .stage-legend{display:flex}
  .hud-right{order:7}
  .hud-right.shifted{top:auto}
  .row2{grid-template-columns:1fr 1fr}
  .timeline{position:static;order:8;margin:0}
  .qr{display:none}
  .hud-bottom{position:sticky;bottom:0;order:9;left:auto;right:auto;margin:6px -10px 0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(4,10,22,.94);border-top:1px solid rgba(255,255,255,.08);grid-template-columns:1fr;gap:8px}
  .ctl{display:flex;flex-wrap:wrap;gap:6px}
  .ctl button,.ctl a{flex:1 1 auto;text-align:center;padding:9px 6px}
  .phone-only{display:inline-block;background:rgba(201,168,53,.2)!important;border-color:rgba(201,168,53,.6)!important}
  .ticker{min-height:40px;font-size:.78rem;padding:8px 10px}
  .stage-legend{font-size:.5rem;gap:8px;bottom:6px;flex-wrap:wrap;padding:0 6px}
  .panel{padding:12px 13px}
  .big b{font-size:1.5rem}.row2 .big b{font-size:1.25rem}
  .center-msg{position:absolute}
  .lbl{font-size:.6rem;padding:4px 7px}
}
@media(max-width:900px) and (orientation:landscape){.stage{height:78vh}}