/* Observatory console — JasonFly. Loaded after stake.css; only touches #observatory. */
#observatory .sec-head h2 .cn{max-width:52ch}

.console{
  position:relative;margin-top:22px;border:1px solid rgba(124,90,255,.34);border-radius:20px;
  background:linear-gradient(180deg,rgba(24,16,52,.94),rgba(7,5,18,.96));
  box-shadow:0 30px 80px -40px rgba(124,90,255,.85),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden
}
.console::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--neon),var(--cyan),var(--purple,#ac96ff),transparent);
  opacity:.75;animation:consoleSweep 5.5s linear infinite;background-size:220% 100%
}
@keyframes consoleSweep{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ── status strip ── */
.console-top{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:13px 18px;
  border-bottom:1px solid rgba(124,90,255,.22);background:rgba(10,6,26,.55);
  font:600 11.5px/1 var(--mono);color:var(--muted);letter-spacing:.06em
}
.console-top .c-id{display:flex;align-items:baseline;gap:8px;color:var(--text)}
.console-top .c-id b{font:800 14px/1 var(--sans);letter-spacing:0}
.console-top .c-id small{font:600 11px/1 var(--mono);color:var(--gold)}
.console-top .c-stat b{color:var(--text)}
.console-top .c-stat code{color:var(--cyan);font-size:11px}
.console-top .badge.live{
  color:#ffd0dc;border-color:rgba(255,61,110,.55);background:rgba(255,61,110,.12);
  box-shadow:0 0 18px -4px var(--blood)
}

/* ── main view ── */
.console-view{position:relative}
.cam-holder{position:relative;aspect-ratio:2.35/1;min-height:420px;background:#05030c}
.cam-holder canvas{position:absolute;inset:0;width:100%;height:100%}
.console-view .cam-hud{left:18px;right:auto;bottom:18px;max-width:58%}
.console-view .cam-hud>div{
  border-color:rgba(124,90,255,.32);background:rgba(10,6,26,.74);backdrop-filter:blur(10px)
}

/* floating glass panels */
.ov{
  position:absolute;z-index:2;border:1px solid rgba(124,90,255,.38);border-radius:14px;
  background:rgba(9,6,22,.74);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -22px #000,inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden
}
.ov-head{
  display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid rgba(124,90,255,.22);
  font:600 10px/1 var(--mono);letter-spacing:.18em;color:rgba(172,150,255,.9)
}
.ov-head span:last-child{color:var(--dim);letter-spacing:.08em}
.ov-dot{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:pulse 1.6s infinite}
.ov-map{top:16px;right:16px;width:212px}
.ov-canvas{position:relative;aspect-ratio:1/1}
.ov-canvas canvas{position:absolute;inset:0;width:100%;height:100%}
.ov-foot{padding:8px 12px;font:600 10.5px/1.5 var(--mono);color:var(--muted)}
.ov-log{right:16px;bottom:16px;width:290px}
.ov-log .obs-log{max-height:132px;margin:0;padding:8px 12px 10px;overflow:hidden}
.ov-log .obs-log li{
  border-left:2px solid rgba(124,90,255,.4);padding-left:8px;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.ov-log .obs-log li.eat{border-left-color:var(--neon)}
.ov-log .obs-log li.die{border-left-color:var(--blood)}
.ov-log .obs-log li.rise{border-left-color:var(--cyan)}

/* ── neural field strip ── */
.console-field{border-top:1px solid rgba(124,90,255,.22);background:rgba(8,5,20,.5)}
.cf-head{
  display:flex;align-items:baseline;gap:12px;padding:12px 18px 8px;
  font:600 10px/1 var(--mono);letter-spacing:.2em;color:rgba(172,150,255,.85)
}
.cf-head h3{margin:0;font:800 15px/1.2 var(--sans);letter-spacing:0;color:var(--text)}
.cf-scale{margin-left:auto;color:var(--dim);letter-spacing:.1em}
.cf-stage{position:relative;height:188px;margin:0 14px;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%,rgba(124,90,255,.14),transparent 70%);
  border:1px solid rgba(124,90,255,.18)}
.cf-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.cf-foot{display:flex;align-items:center;gap:18px;padding:12px 18px 16px;font:12px/1.6 var(--mono);color:var(--muted)}
.cf-foot b{color:var(--text)}
.cf-dn{min-width:0}
.console-field .dn-bars{display:grid;grid-template-columns:repeat(6,minmax(36px,52px));gap:6px;margin:0 0 0 auto}
.console-field .dn i{height:34px;background:rgba(124,90,255,.12)}
.console-field .dn i b{box-shadow:0 0 12px -2px var(--neon)}

/* ── control bar ── */
.console-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px;
  border-top:1px solid rgba(124,90,255,.22);background:rgba(10,6,26,.5)
}
.console-bar .obs-note{flex:1 1 320px;font-size:12.5px;color:var(--dim)}
.console-bar .btn{transition:box-shadow .25s,transform .12s}
.console-bar .btn:hover{box-shadow:0 0 22px -6px var(--neon);transform:translateY(-1px)}

/* ── responsive ── */
@media (max-width:1180px){
  .ov-map{width:178px}
  .ov-log{width:248px}
  .ov-log .obs-log{max-height:108px}
  .console-view .cam-hud{max-width:52%}
}
@media (max-width:900px){
  .console-view{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
  .cam-holder{grid-column:1/-1;aspect-ratio:4/3;min-height:0;border-radius:14px;overflow:hidden}
  .ov{position:static;width:auto}
  .console-view .cam-hud{left:12px;bottom:12px;max-width:none;right:12px}
  .cf-stage{height:190px}
  .console-field .dn-bars{grid-template-columns:repeat(6,1fr);width:100%;margin:10px 0 0}
  .cf-foot{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (max-width:560px){
  .console-view{grid-template-columns:1fr}
  .console-top{gap:8px 12px;font-size:11px}
  .cf-head{flex-wrap:wrap;gap:6px 12px}
  .cf-scale{margin-left:0}
  .cf-stage{height:160px;margin:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .console::before{animation:none}
  .ov-dot{animation:none}
  .console-bar .btn:hover{transform:none}
}

/* stacked view: keep the mini-map from dominating the phone layout */
@media (max-width:900px){
  .ov-map .ov-canvas{width:min(100%,230px);margin:0 auto;max-height:230px}
}
@media (max-width:560px){
  .ov-map .ov-canvas{width:min(100%,200px);max-height:200px}
  .ov-log .obs-log{max-height:96px}
}