/* CORTEX CITY MICRO-STORY | looping chase revision */
.px-cortex-city-scene {position:relative;margin:0 0 18px;background:#050d14;border-top:1px solid rgba(103,169,183,.42);border-bottom:1px solid rgba(103,169,183,.42);box-shadow:0 13px 35px #0006;z-index:0}
.px-city-stage{position:relative;height:225px;max-height:225px;overflow:hidden;background:#06111a;isolation:isolate}
.px-city-canvas{position:absolute;left:50%;top:0;transform:translateX(-50%);width:max(100%,1100px);height:225px;image-rendering:pixelated}
.px-city-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,13,.48),transparent 12%,transparent 88%,rgba(2,8,13,.43)),linear-gradient(180deg,rgba(3,9,14,.63),transparent 20%,transparent 65%,rgba(4,10,16,.37));pointer-events:none}
.px-city-framehead,.px-city-info,.px-city-label,.px-city-toggle{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.px-city-framehead{position:absolute;left:18px;top:15px;color:#b5e0e8;font-size:10px;text-shadow:0 1px 5px black;padding:8px 11px;background:rgba(4,16,24,.8);border-left:2px solid #79dae4;display:flex;align-items:center;gap:9px}
.px-city-framehead small{font-size:8px;color:#809eaa;border-left:1px solid #395666;padding-left:10px;margin-left:2px}
.px-city-flashdot{display:block;background:#7bfae0;border-radius:50%;width:5px;height:5px;box-shadow:0 0 8px #45e9e9;animation:pxCityBlink 2s ease-in-out infinite}
.px-city-info{position:absolute;left:18px;bottom:17px;background:rgba(4,15,23,.86);padding:8px 12px;border:1px solid #274856;display:flex;align-items:center;gap:20px;color:#b9e6eb;font-size:10px;text-shadow:0 2px 5px black}
.px-city-info .px-city-status{min-width:340px}
.px-city-alert .px-city-info{border-color:#9a3744;box-shadow:inset 0 0 12px #8c202021}
.px-city-alert .px-city-status{color:#ff8c89}
.px-city-label{position:absolute;right:18px;bottom:17px;color:#8fadb8;padding:8px 10px;background:rgba(4,15,23,.7);font-size:9px}
.px-city-label span{color:#7cf8d9}
.px-city-toggle{position:absolute;top:15px;right:18px;z-index:2;padding:8px 11px;background:rgba(4,16,24,.85);border:1px solid #365966;color:#afd8de;font-size:9px;cursor:pointer}
.px-city-toggle:hover,.px-city-toggle:focus-visible{color:#fff;border-color:#8ae0e4;outline-offset:3px}
.px-city-paused .px-city-flashdot{animation:none}
@keyframes pxCityBlink{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:700px){.px-city-stage{height:194px}.px-city-canvas{height:194px;width:1100px}.px-city-framehead{left:8px;top:9px;font-size:8px}.px-city-framehead small{display:none}.px-city-toggle{right:8px;top:9px;font-size:8px}.px-city-info{left:8px;bottom:9px;font-size:8px;gap:5px;padding:6px 8px}.px-city-info .px-city-status{min-width:0}.px-city-clock{display:none}.px-city-label{display:none}}
@media(prefers-reduced-motion:reduce){.px-city-flashdot{animation:none}}

/* v6 broadcast polish, scoped entirely to the existing ribbon */
.px-city-framehead{background:linear-gradient(90deg,rgba(5,20,28,.92),rgba(5,20,28,.72));border-left-color:#94e6ed;box-shadow:0 4px 18px #0005}
.px-city-framehead::after{content:"REC / LIVE";margin-left:10px;font-size:8px;letter-spacing:.09em;color:#75b5c4}
.px-city-label{display:flex;align-items:center;gap:7px;right:18px;bottom:17px;border-top:1px solid rgba(116,197,210,.3)}
.px-city-label b{font-size:9px;color:#95dbe3;letter-spacing:.12em}
.px-city-label-dot{color:#7cf8d9}
.px-city-case{position:absolute;top:53px;left:18px;display:flex;align-items:center;gap:12px;pointer-events:none;transform:translateY(-6px);opacity:0;transition:opacity .25s,transform .25s;background:rgba(19,6,12,.89);padding:8px 10px;border-left:2px solid #ec5a62;box-shadow:0 3px 18px #0006;font:700 9px/1.1 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#ffaba9}
.px-city-case-bar{width:38px;height:3px;background:repeating-linear-gradient(90deg,#ec555d 0 3px,transparent 3px 6px)}
.px-city-case-sub{color:#9db9bf}
.px-city-alert .px-city-case{opacity:1;transform:none}
.px-city-alert .px-city-label b{color:#fa7775}
.px-city-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(31,77,87,.42);pointer-events:none}
.px-city-progress-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#5da6b3,#a4eff0);box-shadow:0 0 9px #6dd7e0;transition:width .05s linear}
.px-city-alert .px-city-progress-fill{background:linear-gradient(90deg,#8ddce1,#ea575e);box-shadow:0 0 10px #e45b63}
.px-city-pursuit .px-city-framehead{border-left-color:#ea535b}
@media(max-width:700px){.px-city-framehead::after{display:none}.px-city-case{top:45px;left:8px;font-size:7px;gap:5px;padding:6px}.px-city-case-bar,.px-city-case-sub{display:none}.px-city-label{display:none}.px-city-info{max-width:calc(100% - 16px)}}
@media(prefers-reduced-motion:reduce){.px-city-case,.px-city-progress-fill{transition:none!important}}

/* v11 placement and scaling: a centered feed AFTER the hero, never full-bleed. */
#app .px-cortex-city-scene {
  width: min(1100px, calc(100% - 96px));
  max-width: 1100px;
  margin: 22px auto 24px;
  border: 1px solid rgba(103,169,183,.42);
  box-sizing: border-box;
  overflow: hidden;
}
#app .px-cortex-city-scene .px-city-stage {
  width: 100%;
  height: 225px;
  max-height: 225px;
}
#app .px-cortex-city-scene .px-city-canvas {
  position: absolute;
  width: 1100px;
  height: 225px;
  max-width: none;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  image-rendering: pixelated;
}
@media (max-width: 700px) {
  #app .px-cortex-city-scene { width: calc(100% - 24px); margin: 12px auto 18px; }
  #app .px-cortex-city-scene .px-city-stage { height: 194px; max-height: 194px; }
  #app .px-cortex-city-scene .px-city-canvas { width: 1100px; height: 225px; }
}