/* Page 2 — render-faithful Mission Control. The supplied concept render is the visual base; HTML overlays provide live state and interaction. */
.unit-beacon-hub-slide > .mission-district-scene ~ .ubh-scroll{display:none!important}
.mission-district-scene.mcx-scene{position:absolute;inset:0;z-index:3;overflow:hidden;background:#020813;isolation:isolate;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#eaffff}
.mcx-render{position:absolute;inset:0;background:url("../assets/mission-city/backgrounds/mission-control-render.png") center/100% 100% no-repeat;z-index:0;pointer-events:none}
.mcx-glass{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 0 34%,rgba(160,240,255,.025) 41%,transparent 49% 100%),radial-gradient(circle at 50% 42%,rgba(79,222,255,.045),transparent 34%);mix-blend-mode:screen;animation:mcxGlass 10s ease-in-out infinite alternate}
.mcx-glass::after{content:"";position:absolute;top:-18%;left:-24%;width:28%;height:135%;background:linear-gradient(90deg,transparent,rgba(190,250,255,.07),transparent);transform:skewX(-14deg);animation:mcxReflect 13s ease-in-out infinite}
.mcx-nova-aura{position:absolute;left:42.5%;top:18.8%;width:17%;height:27%;z-index:2;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(99,229,255,.16),transparent 58%);filter:blur(3px);animation:mcxNova 4.8s ease-in-out infinite}
.mcx-floor-sweep{position:absolute;left:26%;right:22%;bottom:6.2%;height:5px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(88,234,255,.15),rgba(166,111,255,.17),transparent);filter:blur(4px);animation:mcxFloor 7s ease-in-out infinite}

.mcx-panel-hit,.mcx-mission-hit,.mcx-nova-hit,.mcx-toolbar button,.mcx-help-hit,.mcx-log-hit{position:absolute;border:0;background:transparent;cursor:pointer;z-index:8;color:inherit}
.mcx-panel-hit:focus-visible,.mcx-mission-hit:focus-visible,.mcx-nova-hit:focus-visible,.mcx-toolbar button:focus-visible,.mcx-help-hit:focus-visible,.mcx-log-hit:focus-visible{outline:2px solid rgba(103,238,255,.9);outline-offset:2px}

.mcx-status-hit{left:.9%;top:2.1%;width:11.2%;height:27%}.mcx-network-hit{right:1.1%;top:2.1%;width:12.2%;height:26.5%}
.mcx-progress-count{position:absolute;left:4.1%;top:8.2%;z-index:6;width:5.3%;height:7.5%;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:50%;background:#031428;box-shadow:0 0 20px rgba(63,214,255,.24),inset 0 0 18px rgba(36,123,176,.16);font-variant-numeric:tabular-nums;pointer-events:none}
.mcx-progress-count strong{font-size:27px;line-height:1;color:#9af6ff;text-shadow:0 0 10px rgba(78,224,255,.75)}.mcx-progress-count span{font-size:12px;color:#b8e7ef;font-weight:700}
.mcx-network-live{position:absolute;right:1.65%;top:21.7%;z-index:6;width:12.85%;height:5.1%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:linear-gradient(90deg,#020c1e,#021327);border-top:1px solid rgba(87,226,255,.24);pointer-events:none}
.mcx-network-live span{max-width:68%;font-size:10px;line-height:1.08;letter-spacing:.05em;color:#b7e5ec;font-weight:700}.mcx-network-live strong{font-size:20px;color:#4cf6ff;text-shadow:0 0 11px rgba(64,231,255,.62)}

.mcx-mission-hit{bottom:12.3%;height:53%;transition:filter .25s ease,transform .25s ease}.mcx-m01{left:2.8%;width:21.9%}.mcx-m02{left:60.8%;width:18.7%;bottom:15%;height:48%}.mcx-m03{right:2.6%;width:18.5%}
.mcx-mission-hit::before{content:"";position:absolute;inset:4% 2%;border:1px solid transparent;border-radius:18px;box-shadow:0 0 0 rgba(90,225,255,0);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.mcx-m01:hover::before,.mcx-m01:focus-visible::before{border-color:rgba(74,219,255,.35);box-shadow:0 0 40px rgba(40,207,255,.18) inset,0 0 25px rgba(40,207,255,.15)}
.mcx-m02:hover::before,.mcx-m02:focus-visible::before{border-color:rgba(189,121,255,.38);box-shadow:0 0 42px rgba(170,86,255,.18) inset,0 0 26px rgba(170,86,255,.16)}
.mcx-m03:hover::before,.mcx-m03:focus-visible::before{border-color:rgba(77,239,220,.38);box-shadow:0 0 42px rgba(56,228,205,.18) inset,0 0 26px rgba(56,228,205,.15)}
.mcx-state{position:absolute;z-index:3;left:50%;bottom:-4%;min-width:112px;padding:5px 12px;border:1px solid currentColor;border-radius:5px;background:#020b1c;font-size:12px;line-height:1;font-weight:800;letter-spacing:.08em;text-align:center;white-space:nowrap;opacity:.98;box-shadow:0 0 12px rgba(70,220,255,.12)}
.mcx-m01 .mcx-state{left:59%;bottom:-4.5%;transform:translateX(-50%) rotate(-5deg)}
.mcx-m02 .mcx-state{left:46%;bottom:0;transform:translateX(-50%) rotate(2deg)}
.mcx-m03 .mcx-state{left:47%;bottom:-4.5%;transform:translateX(-50%) rotate(5deg)}
.mcx-m01 .mcx-state{color:#59dfff}.mcx-m02 .mcx-state{color:#c28cff}.mcx-m03 .mcx-state{color:#5cf1dd}.mcx-mission-hit.is-in-progress .mcx-state{animation:mcxState 2.8s ease-in-out infinite}.mcx-mission-hit.is-complete .mcx-state{color:#ecffff;box-shadow:0 0 13px currentColor}
.mcx-identity-cleanup{position:absolute;z-index:4;display:block;box-sizing:border-box;height:27px;padding:2px 7px 3px;border:0;border-radius:2px;background:#071a34;color:#64dfff;font-size:18px;line-height:22px;font-weight:750;letter-spacing:0;text-align:left;text-shadow:0 0 7px rgba(71,216,255,.34);pointer-events:none}
.mcx-m01 .mcx-identity-cleanup{left:17%;top:13.7%;width:112px;height:36px;padding-top:11px}
.mcx-m02 .mcx-identity-cleanup{left:33.5%;top:calc(13.2% - 9px);width:92px;background:#160d35;color:#c38bff;text-align:center;text-shadow:0 0 7px rgba(189,118,255,.32)}
.mcx-m03 .mcx-identity-cleanup{left:23.5%;top:calc(16.2% - 9px);width:94px;background:#062034;color:#5debdc;text-align:center;text-shadow:0 0 7px rgba(71,228,213,.30)}
.mcx-activation{position:absolute;z-index:3;left:50%;bottom:9%;transform:translate(-50%,8px);padding:7px 12px;border:1px solid rgba(129,247,255,.48);border-radius:6px;background:rgba(2,12,31,.98);color:#e9ffff;font-size:11px;font-weight:800;letter-spacing:.08em;opacity:0;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;pointer-events:none}
.mcx-mission-hit.is-activating .mcx-activation{opacity:1;transform:translate(-50%,0)}

.mcx-nova-hit{left:38.4%;top:19.1%;width:23%;height:28%;border-radius:50%}.mcx-nova-hit:hover{box-shadow:0 0 60px rgba(68,222,255,.12) inset}
.mcx-toolbar{position:absolute;left:31.4%;bottom:7.9%;width:31.7%;height:8.6%;z-index:9;display:grid;grid-template-columns:repeat(4,1fr);gap:1.7%}.mcx-toolbar button{position:relative;width:100%;height:100%;border-radius:8px}.mcx-toolbar button:hover{background:rgba(68,222,255,.035);box-shadow:0 0 16px rgba(73,229,255,.13) inset}
.mcx-help-hit{right:9.7%;bottom:2.35%;width:6%;height:5.3%;border-radius:8px}.mcx-log-hit{right:1.7%;bottom:2.35%;width:7.4%;height:5.3%;border-radius:8px}.mcx-help-hit:hover,.mcx-log-hit:hover{background:rgba(77,232,255,.035);box-shadow:0 0 15px rgba(77,232,255,.13) inset}

.mcx-id-wrap{position:absolute;left:3.65%;bottom:2.15%;width:9.7%;height:5.7%;z-index:10;display:grid;grid-template-rows:auto 1fr;align-items:center;box-sizing:border-box;padding:3px 7px 3px;background:linear-gradient(90deg,rgba(2,13,31,.99),rgba(3,18,39,.98));border-radius:4px;box-shadow:0 0 12px rgba(39,185,225,.08)}
.mcx-id-wrap label{align-self:end;font-size:11px;line-height:1;letter-spacing:.08em;font-weight:800;color:#7eeeff}.mcx-id-wrap input{align-self:start;width:100%;height:23px;box-sizing:border-box;padding:1px 5px;border:0;border-bottom:1px solid rgba(88,228,255,.58);outline:none;background:rgba(2,14,32,.98);color:#f4ffff;font-size:12px;font-weight:700;letter-spacing:.04em}.mcx-id-wrap input::placeholder{color:rgba(211,244,248,.68)}.mcx-id-wrap input:focus{border-bottom-color:#62edff;box-shadow:0 4px 9px -6px #62edff}

.mcx-modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,5,16,.36);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease}.mcx-modal.is-open{opacity:1;pointer-events:auto}.mcx-modal-card{position:relative;width:min(620px,64%);max-height:67%;overflow:auto;padding:24px 28px 26px;border:1px solid rgba(90,231,255,.48);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);background:linear-gradient(145deg,rgba(3,24,48,.97),rgba(2,10,27,.97));box-shadow:0 0 46px rgba(52,214,255,.18),inset 0 0 34px rgba(48,207,255,.05)}
.mcx-modal-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(131,241,255,.10);pointer-events:none}.mcx-modal-close{position:absolute;right:14px;top:10px;width:32px;height:32px;border:1px solid rgba(108,238,255,.25);border-radius:5px;background:rgba(4,22,42,.85);color:#dfffff;font-size:22px;cursor:pointer}.mcx-modal-kicker{display:block;margin-bottom:5px;color:#65ecff;font-size:11px;font-weight:800;letter-spacing:.16em}.mcx-modal h2{margin:0 40px 16px 0;color:#f5ffff;font-size:25px;letter-spacing:.04em}.mcx-modal-body{color:#d4edf1;font-size:14px;line-height:1.55}.mcx-modal-body p{margin:7px 0}.mcx-modal-body strong{color:#86f2ff}.mcx-modal-body .mcx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.mcx-modal-body .mcx-card{padding:12px;border:1px solid rgba(101,228,255,.18);background:rgba(7,33,58,.55);border-radius:7px}.mcx-modal-body .mcx-card b{display:block;margin-bottom:5px;color:#fff}.mcx-modal-body .mcx-line{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(105,224,255,.12)}.mcx-modal-body .mcx-line:last-child{border-bottom:0}.mcx-modal-body .complete{color:#93fff1}.mcx-modal-body .progress{color:#d4a5ff}.mcx-modal-body .ready{color:#87eaff}
.mcx-toast{position:absolute;left:50%;bottom:7.5%;z-index:50;transform:translate(-50%,10px);padding:9px 16px;border:1px solid rgba(112,237,255,.42);border-radius:5px;background:rgba(2,14,33,.95);box-shadow:0 0 20px rgba(65,224,255,.14);color:#eaffff;font-size:12px;font-weight:800;letter-spacing:.07em;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.mcx-toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes mcxGlass{to{opacity:.76}}@keyframes mcxReflect{0%,50%{transform:translateX(-10%) skewX(-14deg);opacity:0}70%{opacity:.7}100%{transform:translateX(520%) skewX(-14deg);opacity:0}}@keyframes mcxNova{50%{transform:scale(1.035);opacity:.78}}@keyframes mcxFloor{50%{opacity:.48;transform:scaleX(.94)}}@keyframes mcxState{50%{box-shadow:0 0 18px currentColor}}
@media (prefers-reduced-motion:reduce){.mcx-scene *,.mcx-scene *::before,.mcx-scene *::after{animation:none!important;transition-duration:1ms!important}}
