; ; /* MASSFRONT GALACTIC WAR TABLE -------------------------------------------------------------------------- Standard used to be five tabs wrapped around a long settings form. That exposed implementation categories before the player had answered the three spatial questions that actually matter: where, which battlefield, and who deploys. This takeover keeps every underlying rule/save variable intact but presents them as one command journey: GALAXY -> SYSTEM -> PLANET -> REGION -> DEPLOYMENT The galaxy is a lightweight 3D projection on a 2D canvas. A second WebGL context was deliberately avoided: Android already carries the battlefield's PBR atlases and post buffers, and a decorative GL context made backgrounding materially more likely to reclaim both contexts. */ let mfGalaxyReady=false,mfGalaxyStage='galaxy',mfGalaxyFrame=0,mfGalaxyLastDraw=0; let mfGalaxyYaw=.18,mfGalaxyPitch=-.22,mfGalaxyDragging=false,mfGalaxyDragX=0,mfGalaxyDragY=0,mfGalaxyDragTravel=0; let mfGalaxyTargets=[],mfSystemTargets=[],mfGalaxySystemKey='sombrero',mfGalaxyOriginalPlanetRow=null,mfGalaxyOpenOriginal=null,mfGalaxyTransit=0; let mfQuickPlan='custom',mfQuickAssisted=false; let mfSystemLoreOpen=false,mfSystemGlobeOff=null,mfSystemGlobeCache={key:'',yaw:0,pitch:0}; const MF_GALAXY_STAGES=['galaxy','system','planet','region','deploy']; const MF_GALAXY_SYSTEM_ORDER=['sombrero','andromeda','orion','helios']; /* Fallback keeps the cluster at four hittable stars even if SYSTEMS is late. */ const MF_GALAXY_SYSTEM_FALLBACK={ sombrero:{id:'sombrero',nm:'SOMBRERO-I',star:'FRONTLINE PRIME',fac:'nova',home:'aelos',color:'#5ad4ff',ds:'Nova beginner system.',x:-.72,y:-.18,z:.16}, andromeda:{id:'andromeda',nm:'ANDROMEDA-IV',star:'DOMINION FURNACE',fac:'legion',home:'pyraeth',color:'#ff714c',ds:'Dominion system.',x:.68,y:-.42,z:-.10}, orion:{id:'orion',nm:'ORION ARC',star:'GRID SUN',fac:'syndicate',home:'nordhall',color:'#7dff9a',ds:'Syndicate system.',x:.46,y:.52,z:.28}, helios:{id:'helios',nm:'HELIOS CORE',star:'HIVE STAR',fac:'horde',home:'vespera',color:'#c46bff',ds:'Brood system.',x:-.38,y:.58,z:-.28} }; /* Extra ring bodies are scenery. Never keys in PLANETS, never mfSystemTargets. */ const MF_SYSTEM_FILLERS={ sombrero:[{ring:.46,ang:2.55,r:9,kind:'rock',tint:[96,108,118]},{ring:1.22,ang:4.18,r:17,kind:'gas',tint:[168,148,118]}], andromeda:[{ring:.44,ang:1.15,r:8,kind:'rock',tint:[118,74,62]},{ring:1.24,ang:3.72,r:16,kind:'gas',tint:[186,96,72]}], orion:[{ring:.48,ang:5.05,r:8,kind:'rock',tint:[148,168,176]},{ring:1.20,ang:2.18,r:16,kind:'gas',tint:[122,164,152]}], helios:[{ring:.45,ang:.42,r:9,kind:'rock',tint:[86,52,72]},{ring:1.26,ang:3.28,r:18,kind:'gas',tint:[168,82,54]}] }; const MF_GALAXY_META={ aelos:{x:-.72,y:-.20,z:.18,status:'TFC HOMEWORLD',control:72,front:'CIVIC FRONT',color:'#5ad4ff'}, pyraeth:{x:.66,y:-.46,z:-.08,status:'DOMINION HOMEWORLD',control:46,front:'STORM FRONT',color:'#ff714c'}, nordhall:{x:.48,y:.55,z:.30,status:'SYNDICATE GRID',control:39,front:'MACHINE FRONT',color:'#7dff9a'}, vespera:{x:-.35,y:.62,z:-.30,status:'BROOD HIVEWORLD',control:63,front:'INFESTATION FRONT',color:'#c46bff'} }; function mfGalaxyCss(){ if(document.getElementById('mfGalaxyCss'))return; const st=document.createElement('style');st.id='mfGalaxyCss'; st.textContent=` #setupScr.galaxyFlow{--gx:#79ddff;background: radial-gradient(circle at 50% 34%,rgba(22,75,112,.18),transparent 36%), linear-gradient(180deg,#030914 0%,#06101e 55%,#030812 100%)} #setupScr.galaxyFlow .setupTabs{display:none!important} #setupScr.galaxyFlow .setupHead{padding-bottom:9px;background:linear-gradient(180deg,rgba(3,8,18,.99) 70%,rgba(3,8,18,.84)); border-bottom:1px solid rgba(111,205,255,.16)} #setupScr.galaxyFlow .setupHead h2{font-size:clamp(15px,4.5vw,20px);letter-spacing:.12em} #setupScr.galaxyFlow .setupContext{color:#8bdfff} #setupScr.galaxyFlow .setupScroll{padding:0!important;gap:0!important;overflow-x:hidden;background:transparent} #setupScr.galaxyFlow .setupScroll>.setupCard,#setupScr.galaxyFlow .setupScroll>.advWrap{display:none!important} #setupScr.galaxyFlow .opsBrief{display:none} #setupScr.galaxyFlow.galaxyStage-deploy .opsBrief{display:block;margin:8px calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px); width:auto;border-radius:11px;padding:8px 10px} #setupScr.galaxyFlow.galaxyStage-deploy .opsBriefHead{display:none} #setupScr.galaxyFlow.galaxyStage-deploy .opsBriefGrid>div{min-height:45px;padding:5px} #setupScr.galaxyFlow.galaxyStage-deploy .opsBriefGrid b{font-size:14px} .mfGalaxyHost{width:min(100%,680px);margin:0 auto;padding:0 calc(var(--sar) + 12px) 18px calc(var(--sal) + 12px);box-sizing:border-box} .mfGalaxyStepper{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0; margin:0 -2px;padding:7px 2px 8px;background:linear-gradient(180deg,#050c18 76%,rgba(5,12,24,.82))} /* 44px, not the 31px this shipped with. Five steps across a 412px phone is a 74px-wide target already; at 31px tall it was the smallest control in the game and it navigates the entire flow. The extra height is bottom padding, so the dot and rail keep their original positions. */ .mfGalaxyStep{position:relative;min-width:0;min-height:44px;padding:17px 2px 6px;border:0;color:#55788f;background:none; font:800 9.5px/1.1 var(--fT);letter-spacing:.04em;overflow:visible} .mfGalaxyStep:before{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:#1b3549} .mfGalaxyStep:first-child:before{left:50%}.mfGalaxyStep:last-child:before{right:50%} .mfGalaxyStep i{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#294357;box-shadow:0 0 0 3px #081523} .mfGalaxyStep.done{color:#8ebcd1}.mfGalaxyStep.done:before{background:#328cad}.mfGalaxyStep.done i{background:#43c8ee;box-shadow:0 0 8px #43c8ee,0 0 0 3px #081523} .mfGalaxyStep.on{color:#effcff}.mfGalaxyStep.on i{background:#fff;box-shadow:0 0 10px #5ce0ff,0 0 0 3px #123249} .mfModeContract{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;margin:2px 0 9px;padding:10px 11px; border:1px solid color-mix(in srgb,var(--mode,#63d9ff) 38%,transparent);border-radius:11px;background:linear-gradient(105deg,color-mix(in srgb,var(--mode,#63d9ff) 12%,#071321),rgba(5,13,23,.94));box-shadow:inset 3px 0 0 var(--mode,#63d9ff)} .mfModeContract span,.mfModeContract b,.mfModeContract small,.mfModeContract strong{display:block}.mfModeContract span{color:var(--mode,#63d9ff);font:800 7px/1 var(--fT);letter-spacing:.14em}.mfModeContract b{margin-top:3px;color:#eefaff;font:900 10px/1.15 var(--fT);letter-spacing:.08em}.mfModeContract small{grid-column:1;color:#789bb0;font:650 8px/1.3 var(--fU)}.mfModeContract strong{grid-column:2;grid-row:1/3;color:#ffe089;font:900 14px/1 var(--fT);white-space:nowrap} .mfStagePanel{display:none;min-height:0;animation:mfStageIn .34s cubic-bezier(.2,.75,.25,1)}.mfStagePanel.on{display:block} @keyframes mfStageIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}} .mfGalaxyEyebrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 2px 8px;color:#6cb7d8; font:800 8px/1 var(--fT);letter-spacing:.14em}.mfGalaxyLive{color:#76f7ad}.mfGalaxyLive:before{content:'';display:inline-block; width:6px;height:6px;margin-right:5px;border-radius:50%;background:#61eaa0;box-shadow:0 0 8px #61eaa0;vertical-align:1px} .mfGalaxyViewport,.mfPlanetViewport{position:relative;overflow:hidden;border:1px solid rgba(99,193,234,.32);border-radius:16px; background:#020711;box-shadow:inset 0 0 42px rgba(0,0,0,.75),0 12px 30px rgba(0,0,0,.35)} .mfGalaxyViewport{height:clamp(370px,54dvh,500px);background:#010208}.mfPlanetViewport{height:clamp(290px,42dvh,370px)} .mfGalaxyViewport:after,.mfPlanetViewport:after{content:'';position:absolute;inset:0;pointer-events:none;background: linear-gradient(rgba(108,216,255,.025) 50%,transparent 50%) 0 0/100% 4px, radial-gradient(circle at center,transparent 52%,rgba(1,5,12,.64));mix-blend-mode:screen} .mfSystemTheatre{position:relative;margin:0} .mfSystemViewport{position:relative;overflow:hidden;height:clamp(380px,56dvh,540px);border:1px solid rgba(90,220,255,.34); border-radius:16px;background:#010308;box-shadow:inset 0 0 80px rgba(40,10,60,.18),inset 0 0 70px rgba(0,0,0,.82),0 12px 30px rgba(0,0,0,.35)} .mfSystemViewport:after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 62% 46%,transparent 38%,rgba(1,4,12,.62))} .mfSystemDossier{position:absolute;left:10px;top:12px;z-index:2;width:min(46%,214px);padding:10px 10px 11px;pointer-events:none; border:1px solid rgba(120,220,255,.34);border-radius:11px; background:linear-gradient(180deg,rgba(5,14,26,.92),rgba(3,8,16,.8));box-shadow:0 12px 28px rgba(0,0,0,.45)} .mfSystemDossier b,.mfSystemDossier small,.mfSystemDossier p,.mfSystemDossier .mfSysStat{display:block} .mfSystemDossier small{color:#6edcff;font:800 7px/1 var(--fT);letter-spacing:.16em} .mfSystemDossier b{margin-top:5px;color:#f3fbff;font:900 16px/1 var(--fT);letter-spacing:.12em} .mfSysSchematic{display:flex;align-items:center;gap:6px;margin:8px 0 2px} .mfSysSchematic .star{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#fff6d0;box-shadow:0 0 8px #ffe08a} .mfSysSchematic em{flex:1;height:1px;background:linear-gradient(90deg,#6a8496,#7dff9a)} .mfSysSchematic .world{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#7dff9a;box-shadow:0 0 8px #7dff9a} .mfSysSchematic span{color:#7dff9a;font:800 7px/1 var(--fT);letter-spacing:.1em} .mfSystemDossier.locked .world{background:#6b7680;box-shadow:none} .mfSystemDossier.locked .mfSysSchematic span{color:#8aa} .mfSystemDossier.locked .mfSysSchematic em{background:#445} .mfSysBadge{display:inline-block;margin:6px 0 0;padding:2px 6px;border-radius:3px;background:#1d6a3c;color:#b8ffd0; font:900 8px/1 var(--fT);letter-spacing:.08em} .mfSystemDossier.locked .mfSysBadge{background:#3a4450;color:#c5d0d8} .mfSysSurvey{margin:8px 0 2px}.mfSysSurvey>span{display:block;color:#567c94;font:800 6.5px/1 var(--fT);letter-spacing:.1em} .mfSysSurvey i{display:block;margin-top:4px;height:4px;border-radius:2px;background:#123042;overflow:hidden} .mfSysSurvey i b{display:block;height:100%;margin:0;padding:0;font-size:0;line-height:0;background:linear-gradient(90deg,#5ae08a,#b6ffd0);border-radius:2px} .mfSystemDossier.locked{border-style:dashed;border-color:rgba(160,176,188,.38);filter:saturate(.72)} .mfSystemDossier .mfBriefGate{margin-top:8px;color:#ffd676;font:800 7.5px/1.3 var(--fT);letter-spacing:.06em} .mfSystemDossier .mfSysStat{margin-top:6px;color:#c5e6f4;font:750 8px/1.3 var(--fT);letter-spacing:.03em} .mfSystemDossier .mfSysStat span{display:block;color:#567c94;font:800 6.5px/1 var(--fT);letter-spacing:.1em} .mfSystemDossier p{margin-top:7px;color:#8fb3c6;font:650 9px/1.35 var(--fU)} .mfSysLoreExtra{display:none;margin-top:8px;padding-top:8px;border-top:1px solid rgba(120,220,255,.22)} .mfSysLoreExtra .mfSysBrief{margin:0 0 7px;color:#c5e6f4;font:650 9px/1.35 var(--fU)} .mfSystemDossier.loreOpen{width:min(72%,248px);max-height:min(68%,440px);overflow:auto;pointer-events:auto; box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 18px rgba(80,210,255,.16)} .mfSystemDossier.loreOpen .mfSysLoreExtra{display:block} .mfHexGo.loreOn i{color:#dff8ff;box-shadow:0 0 14px rgba(80,210,255,.45)} /* Footer is the dock. On-canvas ENTER/BACK hexes doubled the tabs. */ .mfSystemHexNav{display:none!important} .mfHexGo{display:none} /* One dock for every War Table stage (galaxy/system/planet/region/deploy). Global .setupFoot pins .mbtn.alt to 32%, so gold Enter dwarfs War Room and the 13px clip shears labels on a 412-wide phone. Equal 1fr columns, 48px tap row — width 192 on 412 is correct; do not stretch height to 192. */ #setupScr.galaxyFlow .setupFoot{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:48px;gap:8px;align-items:stretch; flex:0 0 auto;height:auto;padding:10px calc(var(--sar) + 10px) max(calc(var(--sab) + 12px),24px) calc(var(--sal) + 10px)} #setupScr.galaxyFlow .setupFoot .mbtn,#setupScr.galaxyFlow .setupFoot .mbtn.alt{ flex:none;width:100%;height:48px;min-height:48px;max-height:48px;min-width:0;max-width:none;box-sizing:border-box;text-align:center; padding:0 11px!important;font-size:11.5px!important;letter-spacing:.03em!important;line-height:48px; white-space:nowrap;overflow:hidden;text-overflow:clip; clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)} /* System keeps the galaxy dock: War Room left, Enter right. Do not hide .setupFoot. */ .mfSystemSub{max-width:540px;margin:0 auto 8px} #mfGalaxyCanvas,#mfPlanetCanvas,#mfSystemCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab} /* Help sits UNDER the hologram, not on the canvas. Overlaying it on LOCAL CLUSTER / 4 SYSTEMS (and the system sun caption) was the QA sweep P1: two instruction layers in the same phone lane. */ .mfGalaxyHelp{position:relative;left:auto;right:auto;bottom:auto;display:flex;justify-content:space-between;gap:8px;margin:6px 4px 0;pointer-events:none; color:#8ab8cc;font:800 7px/1.2 var(--fT);letter-spacing:.08em;text-shadow:0 1px 3px #000}.mfGalaxyHelp b{color:#dff8ff} .mfWorldStrip,.mfRegionStrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px} .mfWorldChip,.mfRegionChip{min-width:0;min-height:48px;padding:7px 4px;border-radius:9px;border:1px solid rgba(96,155,191,.22); color:#789caf;background:rgba(7,17,30,.9);font:800 8px/1.1 var(--fT);letter-spacing:.04em} .mfWorldChip b,.mfWorldChip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mfRegionChip{padding:6px 3px;min-height:58px} .mfRegionChip b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; white-space:normal;word-break:break-word;font:800 7px/1.15 var(--fT);letter-spacing:.02em} .mfRegionChip small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; white-space:normal;word-break:break-word;font:750 6px/1.15 var(--fT);letter-spacing:.02em} .mfWorldChip small,.mfRegionChip small{margin-top:4px;color:#55778e;font-size:6.5px}.mfWorldChip.on,.mfRegionChip.on{color:#f2fcff; border-color:var(--pc,#77dcff);box-shadow:0 0 10px color-mix(in srgb,var(--pc,#77dcff) 24%,transparent)} .mfWorldChip.locked,.mfRegionChip.locked{opacity:.42;border-style:dashed;filter:saturate(.3)} .mfWorldChip.locked:before,.mfRegionChip.locked:before{content:'LOCK';display:block;margin-bottom:3px;font-size:7px;letter-spacing:.12em} .mfWorldChip.done,.mfRegionChip.done{border-color:#63e5a0}.mfWorldChip.done small,.mfRegionChip.done small{color:#72f0aa} .mfConquestBar{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:8px 0;padding:8px 10px;border-radius:9px; color:#8eb0c4;background:rgba(7,20,34,.82);border:1px solid rgba(99,195,230,.22);font:750 8px/1.25 var(--fT);letter-spacing:.06em} .mfConquestBar b{color:#79edab}.mfConquestBar span{text-align:right} .mfStageTitle{margin:13px 2px 3px;color:#effaff;font:900 clamp(17px,5vw,24px)/1.08 var(--fT);letter-spacing:.16em;text-align:center} .mfStageSub{max-width:520px;margin:0 auto 10px;color:#82a9be;font:650 10px/1.4 var(--fU);text-align:center} .mfConquestContinue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;width:100%;min-height:55px;margin:0 0 9px;padding:9px 11px;text-align:left;border-radius:11px;border:1px solid rgba(87,226,155,.4);background:linear-gradient(100deg,rgba(17,73,48,.84),rgba(7,24,31,.95));color:#dffff0} .mfConquestContinue span,.mfConquestContinue small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfConquestContinue span{color:#70efaa;font:800 7px/1 var(--fT);letter-spacing:.13em}.mfConquestContinue b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font:900 10px/1.15 var(--fT);letter-spacing:.04em;white-space:normal;word-break:break-word}.mfConquestContinue small{grid-column:2;grid-row:1/3;align-self:center;color:#ffe28a;font:900 9px/1 var(--fT)} .mfPlanetStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0}.mfPlanetStats>div{min-width:0;padding:8px 5px; border-radius:9px;border:1px solid rgba(91,156,193,.18);background:rgba(5,14,25,.8);text-align:center}.mfPlanetStats span,.mfPlanetStats b{display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfPlanetStats span{color:#567c94;font:800 7px/1 var(--fT);letter-spacing:.09em}.mfPlanetStats b{margin-top:4px;color:#d9f2ff;font:800 9px/1 var(--fT)} .mfRegionHero{position:relative;margin:4px 0 10px;padding:14px;border:1px solid rgba(104,190,228,.28);border-radius:14px;overflow:hidden; background:radial-gradient(circle at 84% 20%,color-mix(in srgb,var(--rc,#63d9ff) 25%,transparent),transparent 35%),linear-gradient(145deg,rgba(15,35,54,.96),rgba(5,13,23,.98))} .mfRegionHero:before{content:'';position:absolute;right:-35px;top:-65px;width:180px;height:180px;border:1px solid color-mix(in srgb,var(--rc,#63d9ff) 35%,transparent);border-radius:50%;box-shadow:0 0 35px color-mix(in srgb,var(--rc,#63d9ff) 17%,transparent)} .mfRegionHero small,.mfRegionHero b,.mfRegionHero span{position:relative;display:block}.mfRegionHero small{color:var(--rc,#63d9ff);font:800 8px/1 var(--fT);letter-spacing:.14em}.mfRegionHero b{margin-top:5px;color:#effaff;font:900 20px/1 var(--fT);letter-spacing:.11em}.mfRegionHero span{max-width:72%;margin-top:7px;color:#91b3c6;font:650 10px/1.35 var(--fU)} #setupScr.galaxyFlow #mapRow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;padding:0!important} #setupScr.galaxyFlow #mapRow .mapCard{position:relative;border-radius:13px;overflow:hidden;transition:transform .18s ease,border-color .18s ease;min-height:0} #setupScr.galaxyFlow #mapRow .mapCard:active{transform:scale(.975)}#setupScr.galaxyFlow #mapRow .mapCard.sel{border-color:#74ddff;box-shadow:0 0 16px rgba(76,204,255,.24)} #setupScr.galaxyFlow #mapRow .mapCard.locked{opacity:.46;filter:saturate(.35);border-style:dashed} #setupScr.galaxyFlow #mapRow .mapCard.locked:after{content:'SECURE PREVIOUS SITE';position:absolute;inset:0;display:grid;place-items:center;padding:12px; color:#d7e9f2;background:rgba(3,9,16,.68);font:900 9px/1.25 var(--fT);letter-spacing:.08em;text-align:center} .mConquest{display:flex;justify-content:space-between;gap:5px;margin:6px 8px 0;color:#6f9cb5;font:800 7px/1 var(--fT);letter-spacing:.08em}.mConquest b{color:#ffd676} .mReward{display:flex;justify-content:space-between;gap:5px;margin:5px 8px 7px;padding-top:5px;border-top:1px solid rgba(105,180,215,.16);color:#76e7a9;font:800 7px/1.15 var(--fT);letter-spacing:.04em}.mReward b{color:#ffe189;text-align:right} #setupScr.galaxyFlow #mapRow .mapCard canvas{aspect-ratio:16/10} .mfMissionHero{position:relative;margin:4px 0 9px;padding:14px 14px 13px;border:1px solid rgba(114,207,245,.32);border-radius:15px;overflow:hidden; background:linear-gradient(100deg,rgba(8,24,40,.98),rgba(8,24,40,.76) 68%,rgba(38,118,153,.23));box-shadow:0 10px 28px rgba(0,0,0,.28)} .mfMissionHero:after{content:'';position:absolute;right:-54px;top:-74px;width:180px;height:180px;border-radius:50%;border:12px double rgba(99,218,255,.09)} .mfMissionKicker{color:#6edcff;font:800 8px/1 var(--fT);letter-spacing:.15em}.mfMissionHero h3{position:relative;margin:6px 0 3px;color:#fff;font:900 19px/1.1 var(--fT);letter-spacing:.1em}.mfMissionHero p{position:relative;margin:0;color:#8fb1c5;font:650 10px/1.4 var(--fU)} .mfMissionTags{position:relative;display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.mfMissionTags span{padding:5px 7px;border-radius:20px;border:1px solid rgba(112,190,224,.25);background:rgba(4,13,23,.62);color:#bcd8e7;font:800 7.5px/1 var(--fT);letter-spacing:.06em} .mfConfigIntro{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 2px 7px}.mfConfigIntro b{color:#dff7ff;font:900 10px/1 var(--fT);letter-spacing:.13em}.mfConfigIntro span{color:#60849a;font:700 8px/1 var(--fT)} .mfConfigDrawer{margin:7px 0;border:1px solid rgba(99,160,195,.22);border-radius:12px;background:rgba(5,13,23,.82);overflow:hidden} .mfConfigDrawer[open]{border-color:rgba(103,207,245,.38);box-shadow:0 7px 18px rgba(0,0,0,.22)}.mfConfigDrawer>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;cursor:pointer}.mfConfigDrawer>summary::-webkit-details-marker{display:none} .mfDrawerEm{font-size:17px}.mfDrawerTx{flex:1;min-width:0}.mfDrawerTx b,.mfDrawerTx small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfDrawerTx b{color:#dceffc;font:900 10px/1 var(--fT);letter-spacing:.1em}.mfDrawerTx small{margin-top:4px;color:#65889e;font:700 8px/1 var(--fU)}.mfDrawerArrow{color:#6bbfdf;transition:transform .2s}.mfConfigDrawer[open] .mfDrawerArrow{transform:rotate(90deg)} .mfConfigBody{display:flex;flex-direction:column;gap:9px;padding:0 8px 9px}.mfConfigBody>.setupCard{display:block!important;margin:0;padding:11px;border-radius:10px;box-shadow:none;background:rgba(11,24,38,.72);border-color:rgba(100,160,195,.16)} #setupScr.galaxyFlow .mfConfigBody [data-setup-tab]{display:block!important}.mfConfigBody .secLbl{font-size:9px;margin-bottom:8px}.mfConfigBody .secHint{font-size:10px;margin-top:8px} #setupScr.galaxyFlow.galaxyStage-deploy .opsBrief{display:none!important} .mfQuickSetup{display:flex;flex-direction:column;gap:10px;margin:10px 0 8px}.mfQuickLabel{display:flex;align-items:end;justify-content:space-between;gap:8px;margin:0 2px;color:#dff7ff;font:900 9px/1 var(--fT);letter-spacing:.12em}.mfQuickLabel small{color:#5f8398;font:750 7px/1 var(--fT);letter-spacing:.06em} .mfQuickPlans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mfQuickPlan{position:relative;min-width:0;min-height:104px;padding:10px 7px 8px;border:1px solid rgba(98,159,195,.24);border-radius:12px;background:linear-gradient(150deg,rgba(15,33,51,.96),rgba(5,13,23,.98));color:#94b4c6;text-align:left;overflow:hidden}.mfQuickPlan:before{content:'';position:absolute;right:-26px;top:-32px;width:78px;height:78px;border:1px solid color-mix(in srgb,var(--qp,#65d9ff) 28%,transparent);border-radius:50%;box-shadow:0 0 24px color-mix(in srgb,var(--qp,#65d9ff) 12%,transparent)}.mfQuickPlan i,.mfQuickPlan b,.mfQuickPlan span,.mfQuickPlan em{position:relative;display:block}.mfQuickPlan i{color:var(--qp,#65d9ff);font:900 17px/1 var(--fT);font-style:normal}.mfQuickPlan b{margin-top:7px;color:#eefaff;font:900 8px/1.15 var(--fT);letter-spacing:.07em}.mfQuickPlan span{margin-top:5px;font:650 8px/1.25 var(--fU)}.mfQuickPlan em{margin-top:7px;color:#6d93a9;font:800 6.5px/1 var(--fT);font-style:normal;letter-spacing:.07em}.mfQuickPlan.on{border-color:var(--qp,#65d9ff);box-shadow:0 0 15px color-mix(in srgb,var(--qp,#65d9ff) 20%,transparent),inset 0 0 18px color-mix(in srgb,var(--qp,#65d9ff) 8%,transparent)} .mfQuickTeam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mfTeamBtn{min-width:0;min-height:62px;padding:9px 10px;border:1px solid rgba(97,159,194,.22);border-radius:11px;background:rgba(7,18,31,.92);color:#789aaf;text-align:left}.mfTeamBtn b,.mfTeamBtn span{display:block}.mfTeamBtn b{color:#dcedf7;font:900 9px/1 var(--fT);letter-spacing:.08em}.mfTeamBtn span{margin-top:6px;font:650 8px/1.25 var(--fU)}.mfTeamBtn.on{border-color:#63dfff;background:linear-gradient(115deg,rgba(20,85,111,.82),rgba(7,20,34,.96));box-shadow:inset 3px 0 #63dfff}.mfTeamBtn.locked{opacity:.38;filter:saturate(.3)} .mfQuickCommanders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mfQuickCommander{min-width:0;padding:5px 5px 8px;border:1px solid rgba(99,160,195,.22);border-radius:11px;background:rgba(6,16,28,.94);color:#7495a9;text-align:left;overflow:hidden}.mfQuickCommander img{display:block;width:100%;aspect-ratio:1.45/1;object-fit:cover;object-position:center 22%;border-radius:7px;filter:saturate(.82) brightness(.82)}.mfQuickCommander b,.mfQuickCommander span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfQuickCommander b{margin-top:6px;color:#e7f6ff;font:900 7.5px/1 var(--fT);letter-spacing:.04em}.mfQuickCommander span{margin-top:3px;color:#65889e;font:750 6.5px/1 var(--fT)}.mfQuickCommander.on{border-color:#6be1ff;box-shadow:0 0 13px rgba(78,208,255,.2)}.mfQuickCommander.on img{filter:none} .mfQuickSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:1px;border:1px solid rgba(98,163,199,.22);border-radius:10px;background:rgba(3,9,16,.8);overflow:hidden}.mfQuickSummary>div{min-width:0;padding:7px 4px;background:rgba(12,27,42,.84);text-align:center}.mfQuickSummary span,.mfQuickSummary b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfQuickSummary span{color:#567b92;font:800 6px/1 var(--fT);letter-spacing:.08em}.mfQuickSummary b{margin-top:4px;color:#d9f4ff;font:900 8px/1 var(--fT)} .mfAdvanced{margin-top:9px}.mfAdvanced .mfConfigBody{max-height:none;padding-top:0}.mfAdvanced[open] .mfConfigBody{padding-top:2px}.mfAdvanced .mfAdvancedSection{margin:5px 2px 0;color:#64badb;font:900 7px/1 var(--fT);letter-spacing:.13em} #mfStageDeploy>.mfConfigDrawer:not(.mfAdvanced),#mfStageDeploy>.mfLegacyConfig{display:none!important} #setupScr.galaxyWarp .mfStagePanel.on{animation:mfGalaxyWarp .62s cubic-bezier(.15,.75,.2,1)} @keyframes mfGalaxyWarp{0%{opacity:1;filter:blur(0);transform:scale(1)}55%{opacity:.1;filter:blur(5px);transform:scale(1.18)}100%{opacity:1;filter:blur(0);transform:scale(1)}} @media(max-width:480px){#setupScr.galaxyFlow .setupContext{display:none}.mfGalaxyHost{padding-left:calc(var(--sal) + 8px);padding-right:calc(var(--sar) + 8px)} .mfGalaxyViewport{height:clamp(340px,50dvh,430px)}.mfPlanetViewport{height:clamp(270px,39dvh,335px)} .mfSystemViewport{height:clamp(340px,52dvh,480px)}.mfSystemDossier{width:min(52%,188px);padding:7px} #setupScr.galaxyFlow #mapRow{display:flex!important;gap:8px!important;overflow-x:auto;padding-bottom:7px!important;scroll-snap-type:x mandatory;scrollbar-width:none} #setupScr.galaxyFlow #mapRow::-webkit-scrollbar{display:none}#setupScr.galaxyFlow #mapRow .mapCard{flex:0 0 86%;scroll-snap-align:center} .mfWorldChip{font-size:7px}.mfRegionChip{font-size:6.5px}.mfStageTitle{letter-spacing:.12em}.mfQuickPlan{min-height:98px;padding-left:6px;padding-right:6px}.mfQuickPlan span{font-size:7.5px}.mfQuickSummary{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:355px){.mfGalaxyStep{font-size:8.5px;letter-spacing:.03em}.mfWorldStrip,.mfRegionStrip{grid-template-columns:repeat(2,1fr)}.mfPlanetStats{grid-template-columns:1fr 1fr}} /* ── LEGIBILITY FLOOR ───────────────────────────────────────────────────── The War Table was authored against a desktop preview and drifted down to 6–8px for anything that was not a heading. Measured on a 412px phone that is roughly 4pt: the Orbitron caps lose their crossbars to the subpixel grid and the letter-spacing these labels carry (.07–.16em) pulls what is left further apart. Every rule below only raises a size that was under 9px, or the container height needed to absorb it — no colour, no layout, no new selectors. Kept as one block at the end rather than edited in place so the authored composition above still reads as written, and so the floor is auditable in one glance. Where a chip has a fixed min-height its floor moves with the type; .mfRegionChip in particular clamps two lines of b plus two of small, so 58px could not hold 9.5/8.5px text. */ .mfGalaxyEyebrow{font-size:9.5px} .mfGalaxyHelp{font-size:9px;line-height:1.25} .mfModeContract span{font-size:9px}.mfModeContract b{font-size:11px}.mfModeContract small{font-size:9.5px} .mfSystemDossier small{font-size:9px} .mfSysSchematic span{font-size:9px} .mfSysBadge{font-size:9.5px} .mfSysSurvey>span{font-size:9px} .mfSystemDossier .mfBriefGate{font-size:9.5px} .mfSystemDossier .mfSysStat{font-size:9.5px} .mfSystemDossier .mfSysStat span{font-size:9px} .mfSystemDossier p{font-size:10px} .mfSysLoreExtra .mfSysBrief{font-size:10px} .mfWorldChip,.mfRegionChip{font-size:10px} .mfWorldChip{min-height:52px} .mfRegionChip{min-height:68px} .mfRegionChip b{font-size:9.5px} .mfRegionChip small{font-size:8.5px} .mfWorldChip small,.mfRegionChip small{font-size:9px} .mfWorldChip.locked:before,.mfRegionChip.locked:before{font-size:9px} .mfConquestBar{font-size:9.5px} .mfStageSub{font-size:11px} .mfConquestContinue{min-height:58px} .mfConquestContinue span{font-size:9px}.mfConquestContinue b{font-size:11px}.mfConquestContinue small{font-size:10.5px} .mfPlanetStats span{font-size:9px}.mfPlanetStats b{font-size:11px} .mfRegionHero small{font-size:9.5px}.mfRegionHero span{font-size:11px} #setupScr.galaxyFlow #mapRow .mapCard.locked:after{font-size:10px} .mConquest,.mReward{font-size:9px} .mfMissionKicker{font-size:9.5px}.mfMissionHero p{font-size:11px} .mfMissionTags span{font-size:9px} .mfConfigIntro b{font-size:11px}.mfConfigIntro span{font-size:9.5px} .mfDrawerTx b{font-size:11px}.mfDrawerTx small{font-size:9.5px} .mfConfigBody .secLbl{font-size:10.5px} .mfQuickLabel{font-size:10.5px}.mfQuickLabel small{font-size:9px} .mfQuickPlan{min-height:122px} .mfQuickPlan b{font-size:10px}.mfQuickPlan span{font-size:9.5px}.mfQuickPlan em{font-size:9px} .mfTeamBtn{min-height:68px}.mfTeamBtn b{font-size:10.5px}.mfTeamBtn span{font-size:9.5px} .mfQuickCommander b{font-size:9.5px}.mfQuickCommander span{font-size:9px} .mfQuickSummary span{font-size:9px}.mfQuickSummary b{font-size:10px} .mfAdvanced .mfAdvancedSection{font-size:9.5px} .mfSystemDossier .mfBriefGate{font-size:9.5px} .mfMissionTags span{font-size:9px} .mfQuickCommander b{font-size:9.5px}.mfQuickCommander span{font-size:9px} @media(max-width:480px){ .mfWorldChip{font-size:9.5px}.mfRegionChip{font-size:9px} .mfQuickPlan{min-height:116px}.mfQuickPlan span{font-size:9px}} /* ── SHORT VIEWPORT (phone landscape) ──────────────────────────────────── Every viewport above is clamp(,Ndvh,). At 915x412 the floor wins — 370px of hologram inside a 255px scroll window — and because these canvases carry touch-action:none for their own drag-to-orbit, a finger landing on them cannot scroll the page back. Measured in landscape before this rule: the galaxy was entirely below the fold and unreachable. This has to live here, not in ui.css. mfGalaxyCss() appends its