:root{
  --void:#000;
  --void-2:#04060a;
  --panel:#0a1410;
  --hud:#0e1c14;
  --hair:rgba(68,255,102,.18);
  --hair-bright:rgba(68,255,102,.45);
  --phosphor:#44ff66;
  --phosphor-dim:#1d8a3a;
  --amber:#ffb83b;
  --amber-deep:#a87420;
  --red:#d62828;
  --red-bright:#ff2a2a;
  --gray:#9bb4a6;
  --dim:#3a544a;
  --paper:#cce8d0;
  --f-display:"Russo One","Black Ops One",Impact,system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,sans-serif;
  --f-mono:"Cousine",ui-monospace,Consolas,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{ min-height:100vh; position:relative }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* horizontal scanline overlay across the whole site */
body::before{
  content:""; position:fixed; inset:0; z-index:60;
  pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(68,255,102,.025) 2px 3px);
  mix-blend-mode:screen;
}
body::after{
  content:""; position:fixed; inset:0; z-index:59;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%);
}

/* red strobe when WULF is triggered */
.strobe{
  position:fixed; inset:0; z-index:55;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,42,42,.45), rgba(255,42,42,0) 70%);
  opacity:0;
  transition:opacity .12s ease;
}
body.is-howling .strobe{ animation:strobe-pulse 2.4s ease forwards }
@keyframes strobe-pulse{
  0%{ opacity:0 }
  6%{ opacity:.85 }
  12%{ opacity:.2 }
  20%{ opacity:.7 }
  35%{ opacity:.15 }
  60%{ opacity:.45 }
  100%{ opacity:0 }
}

/* ============ TOP HUD ============ */
.hud-top{
  display:flex; align-items:center; gap:18px;
  padding:10px 22px;
  border-bottom:1px solid var(--hair);
  background:rgba(4,6,10,.85);
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--phosphor-dim);
  letter-spacing:1.5px;
  position:relative; z-index:10;
}
.hud-top .ch{ color:var(--phosphor) }
.hud-top .grow{ flex:1 }
.hud-top .rec{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--red-bright);
}
.hud-top .rec::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
  animation:rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.hud-top .ts{ color:var(--amber); font-variant-numeric:tabular-nums }

/* ============ MAIN VIEWPORT + RIGHT LOG ============ */
.feed{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:0;
  border-bottom:1px solid var(--hair);
}

/* THE VIEWPORT (camera feed centerpiece) */
.viewport{
  position:relative;
  background:#000;
  overflow:hidden;
  min-height:640px;
}
.viewport .frame{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.viewport .frame img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  filter:saturate(.5) brightness(.85) contrast(1.15) hue-rotate(60deg) sepia(.35);
  opacity:.92;
}
.viewport .frame.is-current img{ animation:vp-flicker 4.6s ease-in-out infinite }
@keyframes vp-flicker{
  0%,100%{ opacity:.92 }
  3%{ opacity:.68 }
  6%{ opacity:.92 }
  41%{ opacity:.78 }
  44%{ opacity:.92 }
}

/* HUD corner brackets */
.vp-corners span{
  position:absolute;
  width:24px; height:24px;
  border:2px solid var(--phosphor);
  box-shadow:0 0 12px rgba(68,255,102,.4);
}
.vp-corners .tl{ top:14px; left:14px; border-right:none; border-bottom:none }
.vp-corners .tr{ top:14px; right:14px; border-left:none; border-bottom:none }
.vp-corners .bl{ bottom:72px; left:14px; border-right:none; border-top:none }
.vp-corners .br{ bottom:72px; right:14px; border-left:none; border-top:none }

/* crosshair */
.vp-cross{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:120px; height:120px;
  pointer-events:none;
}
.vp-cross::before, .vp-cross::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--phosphor);
  box-shadow:0 0 8px var(--phosphor);
}
.vp-cross::before{ width:2px; height:120px; transform:translate(-50%,-50%) }
.vp-cross::after{ width:120px; height:2px; transform:translate(-50%,-50%) }
.vp-cross .dot{
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--phosphor);
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--phosphor), inset 0 0 6px var(--phosphor-dim);
}

/* viewport HUD readouts */
.vp-readout{
  position:absolute;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--phosphor);
  text-shadow:0 0 8px rgba(68,255,102,.5);
  z-index:4;
}
.vp-readout.tl{ top:22px; left:50px }
.vp-readout.tl b{ color:var(--paper); font-weight:400 }
.vp-readout.tr{ top:22px; right:50px; text-align:right }
.vp-readout.tr .warn{ color:var(--amber) }
.vp-readout.bars{
  bottom:80px; left:50px;
  display:flex; align-items:flex-end; gap:2px; height:18px;
}
.vp-readout.bars b{
  display:block; width:5px; background:var(--phosphor);
  box-shadow:0 0 6px rgba(68,255,102,.5);
}
.vp-readout.bars b:nth-child(1){ height:30% }
.vp-readout.bars b:nth-child(2){ height:50% }
.vp-readout.bars b:nth-child(3){ height:70% }
.vp-readout.bars b:nth-child(4){ height:90% }
.vp-readout.bars b:nth-child(5){ height:60% }
.vp-readout.bars span{ margin-left:8px; color:var(--phosphor); font-size:10px }

/* wordmark inside viewport */
.wordmark{
  position:absolute; bottom:110px; left:60px;
  z-index:5;
  font-family:var(--f-display);
  font-size:clamp(54px, 8vw, 96px);
  letter-spacing:6px;
  color:var(--paper);
  text-shadow:0 0 18px rgba(68,255,102,.5), 0 0 40px rgba(255,42,42,.3);
  line-height:.95;
}
.wordmark .tick{
  display:block;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:4px;
  color:var(--phosphor);
  margin-top:6px;
  text-shadow:0 0 8px rgba(68,255,102,.5);
}

/* DEPLOY (pump.fun) button · bottom-center HUD */
.deploy{
  position:absolute;
  bottom:90px; right:60px;
  z-index:6;
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 28px;
  background:transparent;
  border:2px solid var(--amber);
  font-family:var(--f-display);
  font-size:18px;
  letter-spacing:3px;
  color:var(--amber);
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,184,59,.5);
  transition:background .14s, color .14s, transform .12s;
  cursor:pointer;
}
.deploy:hover:not(.disabled){ background:var(--amber); color:var(--void); transform:translateY(-2px) }
.deploy.disabled{ opacity:.45; cursor:not-allowed }
.deploy svg.icon-moon{ width:22px; height:22px; fill:currentColor; filter:drop-shadow(0 0 4px rgba(255,184,59,.6)) }

/* HUD ribbon at bottom of viewport · CA metadata */
.meta-ribbon{
  position:absolute; bottom:0; left:0; right:0;
  z-index:7;
  display:flex; align-items:center; gap:0;
  background:rgba(4,6,10,.92);
  border-top:1px solid var(--hair-bright);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--phosphor-dim);
  text-transform:uppercase;
  padding:10px 18px;
  overflow:hidden;
}
.meta-ribbon .seg{ padding:0 14px; border-right:1px dashed var(--hair) }
.meta-ribbon .seg:last-child{ border-right:none }
.meta-ribbon .seg b{ color:var(--phosphor); font-weight:400 }
.meta-ribbon .addr{
  flex:1;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  padding:0 14px;
  color:var(--phosphor);
  text-transform:none;
  letter-spacing:.5px;
  font-size:12px;
  transition:color .15s;
  word-break:break-all;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.meta-ribbon .addr:hover{ color:var(--paper) }
.meta-ribbon .addr.is-copied{ color:var(--amber) }
.meta-ribbon .addr .lbl{ color:var(--amber); flex-shrink:0 }

/* TELEMETRY (dexscreener) in HUD ribbon */
.telemetry{
  display:inline-flex; align-items:center; gap:10px;
  padding:0 14px;
  color:var(--phosphor);
  cursor:pointer;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:color .14s;
  flex-shrink:0;
  border-left:1px dashed var(--hair);
}
.telemetry:hover:not(.disabled){ color:var(--amber) }
.telemetry.disabled{ opacity:.45; cursor:not-allowed }
.telemetry svg.icon-howl{ width:38px; height:14px; stroke:currentColor; fill:none; filter:drop-shadow(0 0 4px rgba(68,255,102,.5)) }

/* ============ RIGHT COLUMN: SIGHTING LOG ============ */
.log{
  background:var(--hud);
  border-left:1px solid var(--hair);
  display:flex; flex-direction:column;
  position:relative;
}
.log-head{
  padding:14px 18px;
  border-bottom:1px solid var(--hair);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--phosphor);
  text-transform:uppercase;
}
.log-head b{ color:var(--paper) }
.log-body{
  flex:1; overflow:hidden;
  padding:14px 18px 0;
  height:480px;
}
.log-line{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  padding:5px 0;
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.45;
  color:var(--gray);
  animation:log-in .35s ease-out;
}
@keyframes log-in{ 0%{ opacity:0; transform:translateY(-4px) } 100%{ opacity:1; transform:translateY(0) } }
.log-line .ts{ color:var(--phosphor-dim) }
.log-line .msg{ color:var(--paper) }
.log-line .msg .warn{ color:var(--amber) }
.log-line .msg .red{ color:var(--red-bright) }
.log-line.alert .ts, .log-line.alert .msg{ color:var(--red-bright) }
.log-line.cleared .ts, .log-line.cleared .msg{ color:var(--phosphor) }

/* the X / Broadcast channel entry pinned in the log */
.broadcast{
  display:flex; align-items:center; gap:12px;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid var(--hair-bright);
  border-left:3px solid var(--amber);
  background:rgba(255,184,59,.05);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--paper);
  text-transform:uppercase;
  cursor:pointer;
  transition:background .14s, color .14s;
}
.broadcast:hover:not(.disabled){ background:rgba(255,184,59,.15); color:var(--amber) }
.broadcast.disabled{ opacity:.45; cursor:not-allowed }
.broadcast svg.icon-fang{
  width:26px; height:26px; fill:currentColor;
  filter:drop-shadow(0 0 6px rgba(255,184,59,.45));
  flex-shrink:0;
}
.broadcast .b-title{ display:block; color:var(--paper) }
.broadcast .b-sub{ display:block; color:var(--phosphor-dim); font-size:10px; letter-spacing:1px; margin-top:2px }

/* ============ CAMERA POSITIONS BAR ============ */
.cam-bar{
  display:flex; gap:0;
  background:var(--void-2);
  border-bottom:1px solid var(--hair);
  padding:0;
}
.cam-btn{
  flex:1;
  padding:14px 12px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--phosphor-dim);
  text-transform:uppercase;
  border-right:1px dashed var(--hair);
  text-align:center;
  cursor:pointer;
  transition:background .14s, color .14s;
}
.cam-btn:last-child{ border-right:none }
.cam-btn:hover{ background:rgba(68,255,102,.06); color:var(--phosphor) }
.cam-btn.is-active{ color:var(--amber); background:rgba(255,184,59,.08) }
.cam-btn .ch{ display:block; color:inherit; font-size:14px; margin-bottom:2px }
.cam-btn .loc{ color:var(--phosphor-dim); font-size:9px }
.cam-btn.is-active .loc{ color:var(--amber-deep) }

/* TRIGGER WULF button */
.trigger-zone{
  padding:36px 40px;
  text-align:center;
  background:var(--void-2);
  border-bottom:1px solid var(--hair);
}
.trigger-btn{
  display:inline-flex; align-items:center; gap:16px;
  padding:20px 48px;
  background:transparent;
  border:2px solid var(--red);
  font-family:var(--f-display);
  font-size:24px;
  letter-spacing:5px;
  color:var(--red-bright);
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(255,42,42,.4);
  cursor:pointer;
  transition:background .14s, color .14s, transform .12s, box-shadow .2s;
  position:relative;
}
.trigger-btn::before{
  content:""; position:absolute; inset:-4px;
  border:1px solid var(--red);
  opacity:.4;
}
.trigger-btn:hover{
  background:var(--red); color:#fff;
  box-shadow:0 0 30px rgba(255,42,42,.6), inset 0 0 20px rgba(0,0,0,.3);
  transform:translateY(-2px);
}
.trigger-btn:active{ transform:translateY(1px) }
.trigger-btn.is-busy{ opacity:.6; cursor:wait }
.trigger-btn .pulse{
  width:12px; height:12px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 12px var(--red);
  animation:trigger-pulse 1.6s ease-in-out infinite;
}
@keyframes trigger-pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.4; transform:scale(.7) } }
.trigger-meta{
  margin-top:18px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--phosphor-dim);
  text-transform:uppercase;
}
.trigger-meta b{ color:var(--amber); padding:0 6px; font-variant-numeric:tabular-nums }

/* ============ INCIDENT REPORTS ============ */
.incidents{
  padding:60px 56px 80px;
  background:#040806;
  border-bottom:1px solid var(--hair);
}
.incidents-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:24px;
  flex-wrap:wrap; gap:14px;
}
.incidents-head h2{
  font-family:var(--f-display);
  font-size:clamp(24px, 3vw, 36px);
  letter-spacing:3px;
  color:var(--phosphor);
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(68,255,102,.35);
}
.incidents-head .meta{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--phosphor-dim);
  text-transform:uppercase;
}
.incidents-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.incident{
  border:1px solid var(--hair-bright);
  padding:24px 26px 22px;
  background:linear-gradient(180deg, rgba(14,28,20,.6), rgba(4,8,6,.6));
  position:relative;
}
.incident::before{
  content:""; position:absolute;
  top:-1px; left:18px; right:18px; height:1px;
  background:var(--phosphor);
  box-shadow:0 0 6px var(--phosphor);
}
.incident .source{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2.5px;
  color:var(--amber);
  text-transform:uppercase;
  background:rgba(255,184,59,.08);
  padding:3px 9px;
  border:1px solid rgba(255,184,59,.25);
  margin-bottom:14px;
}
.incident h3{
  font-family:var(--f-display);
  font-size:20px;
  line-height:1.2;
  letter-spacing:1px;
  color:var(--paper);
  margin-bottom:12px;
}
.incident p{
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.55;
  color:var(--gray);
  margin-bottom:14px;
}
.incident p b{ color:var(--phosphor) }
.incident .open{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--phosphor);
  text-transform:uppercase;
  border-bottom:1px solid var(--phosphor);
  padding-bottom:2px;
}
.incident .open:hover{ color:var(--amber); border-color:var(--amber) }

/* ============ FOOTER ============ */
footer{
  background:var(--void);
  padding:30px 40px 50px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2px;
  color:var(--dim);
  text-align:center;
  text-transform:uppercase;
  line-height:2;
}
footer .ch{ color:var(--phosphor) }
footer .disclaimer{
  margin-top:16px;
  max-width:64ch;
  margin-left:auto; margin-right:auto;
  text-transform:none;
  letter-spacing:.5px;
  font-size:11px;
  line-height:1.6;
  color:var(--dim);
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .feed{ grid-template-columns:1fr }
  .log{ border-left:none; border-top:1px solid var(--hair) }
  .log-body{ height:280px }
  .deploy{ right:auto; left:60px }
  .incidents-grid{ grid-template-columns:1fr; gap:18px }
  .incidents{ padding:50px 28px 60px }
}
@media (max-width:680px){
  .hud-top{ padding:8px 14px; gap:10px; font-size:10px; letter-spacing:1px }
  .hud-top .grow{ display:none }
  .viewport{ min-height:380px }
  .vp-corners span{ width:18px; height:18px }
  .vp-corners .tl, .vp-corners .tr{ top:8px }
  .vp-corners .tl{ left:8px }
  .vp-corners .tr{ right:8px }
  .vp-corners .bl, .vp-corners .br{ bottom:100px }
  .vp-cross{ width:80px; height:80px }
  .vp-cross::before{ height:80px }
  .vp-cross::after{ width:80px }
  .wordmark{ font-size:42px; bottom:140px; left:24px; letter-spacing:3px }
  .vp-readout.tl{ left:34px; font-size:10px }
  .vp-readout.tr{ right:34px; font-size:10px }
  .vp-readout.bars{ left:34px; bottom:110px }
  .deploy{ bottom:115px; left:24px; right:auto; padding:10px 18px; font-size:14px; letter-spacing:2px }
  .meta-ribbon{ flex-wrap:wrap; gap:4px; padding:8px 14px; font-size:10px }
  .meta-ribbon .seg, .meta-ribbon .addr, .telemetry{ padding:4px 8px; border:none }
  .cam-bar .loc{ display:none }
  .cam-btn{ padding:10px 4px; font-size:10px; letter-spacing:1px }
  .cam-btn .ch{ font-size:12px }
  .trigger-zone{ padding:24px 18px }
  .trigger-btn{ padding:16px 24px; font-size:18px; letter-spacing:3px }
}

@media (prefers-reduced-motion: reduce){
  body::before, .viewport .frame.is-current img, .hud-top .rec::before,
  .trigger-btn .pulse, body.is-howling .strobe{ animation:none !important }
  .log-line{ animation:none }
}

/* ---- flash (terminal-echo status, lower-left, not bottom-pill toast) ---- */
.flash{
  position:fixed; bottom:24px; left:24px;
  z-index:200;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--phosphor);
  text-shadow:0 0 8px rgba(68,255,102,.5);
  background:rgba(4,6,10,.92);
  border:1px solid var(--hair-bright);
  border-left:3px solid var(--phosphor);
  padding:8px 14px;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
  max-width:80vw;
}
.flash.is-on{ opacity:1; transform:translateY(0) }

@media (max-width:680px){
  .flash{ left:14px; right:14px; bottom:14px; font-size:11px }
}