; ; /* 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 mfGalaxyDragStartX=0,mfGalaxyDragStartY=0,mfGalaxyDragPointer=-1; 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}; /* First tap highlights. Second tap on the same target within the window commits. A single tap was warping galaxy → system, planet → region, and site card → deploy while the finger was still aiming. */ let mfPickArm={k:'',id:'',t:0}; const MF_GALAXY_TAP_SLOP=12; let mfGalaxyFallbackCommit=-1e9; 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=` /* The legacy overlay scrolls by default. Galaxy Flow has its own .setupScroll; keeping both scrollports exposes a second scrollbar and shifts the CTA dock. */ #setupScr.galaxyFlow{--gx:#79ddff;overflow:hidden;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{min-width:0;overflow:hidden;text-overflow:ellipsis;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} .mfLoopBanner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;margin:0 0 7px;padding:7px 11px; border:1px solid rgba(103,216,255,.2);border-left:3px solid #67d8ff;border-radius:10px;background:linear-gradient(105deg,rgba(12,44,64,.5),rgba(5,13,23,.9))} .mfLoopBanner small{grid-column:1;color:#67d8ff;font:800 7px/1 var(--fT);letter-spacing:.14em} .mfLoopBanner b{grid-column:1;margin-top:2px;color:#b9d9e8;font:650 9px/1.35 var(--fU)} .mfLoopBanner strong{grid-column:2;grid-row:1/3;color:#eefaff;font:900 9px/1.2 var(--fT);letter-spacing:.04em;text-align:right;white-space:nowrap} .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;isolation:isolate;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} .mfCanvasSelection{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:36px minmax(0,1fr) auto; gap:3px 9px;align-items:center;min-height:58px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--sc,#63d9ff) 45%,transparent); border-radius:11px;background:linear-gradient(100deg,rgba(4,13,24,.94),color-mix(in srgb,var(--sc,#63d9ff) 12%,rgba(5,14,25,.91))); box-shadow:inset 3px 0 0 var(--sc,#63d9ff),0 8px 22px rgba(0,0,0,.42);pointer-events:none;box-sizing:border-box} .mfSelectionOrb{grid-row:1/4;width:30px;height:30px;border-radius:50%;background: radial-gradient(circle at 34% 30%,#fff 0 5%,var(--sc,#63d9ff) 14%,color-mix(in srgb,var(--sc,#63d9ff) 38%,#07101c) 52%,#02050a 76%); box-shadow:0 0 13px color-mix(in srgb,var(--sc,#63d9ff) 48%,transparent),inset -5px -5px 8px rgba(0,0,0,.7)} .mfCanvasSelection small,.mfCanvasSelection b,.mfCanvasSelection span,.mfCanvasSelection strong{display:block;min-width:0} .mfCanvasSelection small{color:var(--sc,#63d9ff);font:850 9px/1 var(--fT);letter-spacing:.12em} .mfCanvasSelection b{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2fbff;font:900 13px/1 var(--fT);letter-spacing:.08em} .mfCanvasSelection span{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8fb5c9;font:750 9px/1.15 var(--fU)} .mfCanvasSelection strong{grid-column:3;grid-row:1/3;align-self:center;color:#8fffc0;font:900 10px/1 var(--fT);letter-spacing:.08em} .mfCanvasSelection i{grid-column:2/4;display:block;height:3px;margin-top:2px;border-radius:2px;background:#132d3d;overflow:hidden} .mfCanvasSelection i:after{content:'';display:block;width:var(--progress,0%);height:100%;border-radius:inherit;background:var(--sc,#63d9ff);box-shadow:0 0 7px var(--sc,#63d9ff)} .mfCanvasSelection.locked{filter:saturate(.45);border-style:dashed}.mfCanvasSelection.locked strong{color:#aab7c0} .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; /* The overlay extends 8px below the measured visual viewport in Chrome; 64px padding preserves at least 54px of visible navigation clearance. */ flex:0 0 auto;height:auto;padding:10px calc(var(--sar) + 10px) max(calc(var(--sab) + 12px),64px) 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} /* object-fit:contain is the one-frame safety net before mfFitCanvas2D syncs the bitmap. Without it a 560×360 planet smashed into a wide short box is an oval for a frame (or forever, if JS never runs). */ #mfGalaxyCanvas,#mfPlanetCanvas,#mfSystemCanvas{display:block;width:100%;height:100%;object-fit:contain;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{position:relative;overflow:hidden;min-width:0;min-height:48px;padding:7px 8px 10px;border-radius:9px;border:1px solid rgba(96,155,191,.22); color:#789caf;background:linear-gradient(145deg,rgba(10,25,40,.96),rgba(5,13,24,.94));font:800 8px/1.1 var(--fT);letter-spacing:.04em;text-align:left} .mfWorldChip:after,.mfRegionChip:after{content:'';position:absolute;left:0;bottom:0;width:var(--prog,0%);height:3px;background:var(--pc,#77dcff);box-shadow:0 0 7px var(--pc,#77dcff);transition:width .25s ease} .mfWorldChip b,.mfWorldChip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mfRegionChip{padding:7px 8px 10px;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)} /* Only the three hero lines get hero type. Descendant selectors also hit the conquest and four intel values, enlarging them until their chips clipped. */ .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.sel.confirm:after{content:'TAP AGAIN';position:absolute;left:8px;right:8px;bottom:8px;z-index:2;padding:6px 8px; border-radius:8px;background:rgba(6,16,28,.82);color:#ffe08a;font:900 9px/1 var(--fT);letter-spacing:.1em;text-align:center;pointer-events:none} .mfWorldChip.confirm,.mfRegionChip.confirm{box-shadow:0 0 0 2px #ffe08a,0 0 14px rgba(255,208,96,.28)} #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 .mConquest b,#setupScr.galaxyFlow #mapRow .mReward b,#setupScr.galaxyFlow #mapRow .mHz b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-align:left} #setupScr.galaxyFlow #mapRow .mDs,#setupScr.galaxyFlow #mapRow .mHz{font-size:10px;line-height:1.28} /* Six information rows sit beside one square preview. A seventh canvas row and auto-stretched grid tracks made the reward and weather copy appear to collide on phones even when their outer boxes passed overflow checks. */ #setupScr.galaxyFlow #mfStageRegion #mapRow .mapCard{align-items:start;grid-auto-rows:max-content} #setupScr.galaxyFlow #mfStageRegion #mapRow .mapCard canvas{grid-row:1/span 6;align-self:start} #setupScr.galaxyFlow #mfStageRegion #mapRow .mConquest,#setupScr.galaxyFlow #mfStageRegion #mapRow .mReward{ display:grid;grid-template-columns:minmax(0,1fr);gap:3px;align-content:start;line-height:1.3} #setupScr.galaxyFlow #mfStageRegion #mapRow .mReward{margin-top:3px;padding-top:5px} #setupScr.galaxyFlow #mfStageRegion #mapRow .mHz{margin-top:5px} /* No aspect-ratio here. This injected 16/10 at runtime, and because it lands later in the cascade with higher specificity it silently overrode ui.css:1114 - so the site card was never the 4:3 that stylesheet claimed. The world is square (MAP 3200x3200); ui.css now owns the 1/1 aspect. */ .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)} .mfCommanderStageShowcase{display:grid;grid-template-columns:minmax(116px,.8fr) minmax(0,1.2fr);min-height:132px;border:1px solid color-mix(in srgb,var(--cmd,#65d9ff) 46%,transparent);border-radius:13px;overflow:hidden;background:linear-gradient(115deg,rgba(4,15,26,.98),color-mix(in srgb,var(--cmd,#65d9ff) 9%,rgba(8,22,35,.96)));box-shadow:inset 3px 0 var(--cmd,#65d9ff),0 8px 20px rgba(0,0,0,.28)} .mfCommanderStageVisual{position:relative;min-height:132px;overflow:hidden;background:linear-gradient(160deg,#d9e2e7,#768591)}.mfCommanderStagePortrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:saturate(.92) contrast(1.04)}.mfCommanderStage3D{position:absolute;right:6px;bottom:6px;width:46%;height:48%;min-height:58px;border:1px solid color-mix(in srgb,var(--cmd,#65d9ff) 56%,transparent);border-radius:7px;overflow:hidden;background:radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--cmd,#65d9ff) 18%,transparent),transparent 64%),linear-gradient(160deg,#0a1928,#030a11);box-shadow:0 4px 13px rgba(0,0,0,.58)}.mfCommanderStage3D .mfIntelPreview{position:absolute;inset:0;margin:0;border:0;border-radius:0;background:transparent}.mfCommanderStage3D .mfIntelPreview canvas{width:100%;height:100%}.mfCommanderStageInfo{position:relative;padding:13px 12px 11px}.mfCommanderStageInfo>i{display:block;color:var(--cmd,#65d9ff);font:900 9px/1 var(--fT);letter-spacing:.14em;font-style:normal}.mfCommanderStageInfo>h3{margin:6px 0 4px;color:#f2fbff;font:900 16px/1.08 var(--fT);letter-spacing:.04em}.mfCommanderStageInfo>p{margin:0;color:#91b5c7;font:700 9.5px/1.35 var(--fU)}.mfCommanderStageInfo .commanderAbilityFloats{position:static;margin-top:11px}.mfCommanderStageInfo .commanderAbilityFloat{height:34px}.mfCommanderStageInfo .commanderAbilityFloat i{width:23px;height:23px;font-size:14px}.mfCommanderStageInfo .commanderAbilityFloat b{font-size:6.5px} .mfQuickCommanders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mfQuickCommander{position:relative;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 .commanderPortraitFrame{margin:0 0 8px}.mfQuickCommander img{display:block;width:100%;aspect-ratio:1.22/1;object-fit:cover;object-position:center 22%;border-radius:7px;filter:saturate(.82) brightness(.82)}.mfQuickCommander .commanderAbilityFloat{display:grid;height:25px;grid-template-columns:1fr;padding:2px}.mfQuickCommander .commanderAbilityFloat i{width:100%;height:19px}.mfQuickCommander .commanderAbilityFloat b{display:none}.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)} .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)} .mfLoadoutSummary{min-width:0;margin:9px 0 12px;padding:10px;border:1px solid rgba(107,213,255,.32);border-radius:14px;overflow:hidden; background:linear-gradient(145deg,rgba(8,24,40,.97),rgba(4,12,22,.98));box-shadow:inset 3px 0 #65d9ff,0 9px 22px rgba(0,0,0,.24)} .mfLoadoutSummary *{min-width:0;box-sizing:border-box}.mfLoadoutHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px} .mfLoadoutTitle span,.mfLoadoutTitle b{display:block}.mfLoadoutTitle span{color:#65d9ff;font:900 8px/1 var(--fT);letter-spacing:.15em}.mfLoadoutTitle b{margin-top:4px;color:#edfaff;font:900 12px/1.05 var(--fT);letter-spacing:.08em} .mfLoadoutChips{display:flex;justify-content:flex-end;gap:4px;flex-wrap:wrap}.mfLoadoutChip{max-width:100%;padding:4px 6px;border:1px solid rgba(103,199,235,.28);border-radius:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a8d8ea;background:rgba(5,16,28,.9);font:850 7px/1 var(--fT);letter-spacing:.06em} .mfLoadoutCommand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:6px}.mfLoadoutCommandCard{padding:8px;border:1px solid rgba(103,173,207,.2);border-radius:9px;background:rgba(11,29,45,.82)} .mfLoadoutCommandCard>span,.mfLoadoutCommandCard>b,.mfLoadoutCommandCard>small{display:block;overflow-wrap:anywhere}.mfLoadoutCommandCard>span{color:#5c93aa;font:850 7px/1 var(--fT);letter-spacing:.11em}.mfLoadoutCommandCard>b{margin-top:4px;color:#e8f8ff;font:900 10px/1.2 var(--fT)}.mfLoadoutCommandCard>small{margin-top:4px;color:#89aebf;font:700 8.5px/1.3 var(--fU)} .mfLoadoutGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.mfLoadoutLane{padding:8px;border:1px solid rgba(92,151,184,.18);border-radius:9px;background:rgba(5,15,26,.76)} .mfLoadoutLaneHead{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:6px}.mfLoadoutLaneHead b{color:#cdebf8;font:900 8px/1.1 var(--fT);letter-spacing:.08em}.mfLoadoutLaneHead .mfOwnershipBadge{flex:0 0 auto;padding:3px 5px;font-size:6.5px;letter-spacing:.05em} .mfLoadoutItem{padding:6px 0;border-top:1px solid rgba(93,148,176,.14)}.mfLoadoutItem:first-child{padding-top:0;border-top:0}.mfLoadoutItem:last-child{padding-bottom:0}.mfLoadoutItem>b,.mfLoadoutItem>span,.mfLoadoutItem>small{display:block;overflow-wrap:anywhere}.mfLoadoutItem>b{color:#e4f5fc;font:850 9px/1.2 var(--fT)}.mfLoadoutItem>span{margin-top:3px;color:#82a9ba;font:700 8px/1.25 var(--fU)}.mfLoadoutItem>small{margin-top:3px;color:#65cbe9;font:850 7px/1.2 var(--fT);letter-spacing:.035em} .mfLoadoutEmpty{color:#668698;font:700 8px/1.35 var(--fU);overflow-wrap:anywhere} .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} .mfWorldStrip,.mfRegionStrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mfWorldChip{min-height:62px}.mfRegionChip{min-height:76px} #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} /* A battlefield's weather and conditions are decision-critical. Pair them with its survey map before the region dossier on narrow phones. */ #mfStageRegion.on{display:flex;flex-direction:column} #mfStageRegion>.mfGalaxyEyebrow{order:0}#mfStageRegion>#mfRegionMapHost{order:1;width:100%} #mfStageRegion>.mfRegionHero{order:2}#mfStageRegion>.wtpCard{order:3} #mfStageRegion #mapRow .mapCard{display:grid;grid-template-columns:minmax(100px,42%) minmax(0,1fr);align-content:start;gap:4px 8px;min-height:200px;padding:8px;text-align:left} #mfStageRegion #mapRow .mapCard canvas{grid-column:1;grid-row:1/8;width:100%;height:auto;aspect-ratio:1/1} #mfStageRegion #mapRow .mapCard .mSize,#mfStageRegion #mapRow .mapCard .mNm,#mfStageRegion #mapRow .mapCard .mDs,#mfStageRegion #mapRow .mapCard .mConquest,#mfStageRegion #mapRow .mapCard .mReward,#mfStageRegion #mapRow .mapCard .mHz{grid-column:2;min-width:0;margin:0;overflow-wrap:anywhere} #mfStageRegion #mapRow .mapCard .mNm{min-height:0;justify-content:flex-start;text-align:left} #mfStageRegion #mapRow .mapCard .mConquest,#mfStageRegion #mapRow .mapCard .mReward{display:block;padding-top:4px} /* Subtraction pass (audit item 1): the three site cards measured 49/48/30 visible words — two prose rows each that the selected site's dossier and the deploy brief restate. Unselected cards keep name, size and the conquest/hazard chips; the selected card keeps every row the mobile-flow verifier asserts. */ #mfStageRegion #mapRow .mapCard:not(.sel) .mDs,#mfStageRegion #mapRow .mapCard:not(.sel) .mHz{display:none} .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:380px){.mfLoadoutHead{display:block}.mfLoadoutChips{justify-content:flex-start;margin-top:7px}.mfLoadoutCommand,.mfLoadoutGrid{grid-template-columns: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} .mfLoadoutTitle span{font-size:9px}.mfLoadoutLaneHead b{font-size:9px}.mfLoadoutLaneHead .mfOwnershipBadge{font-size:8px}.mfLoadoutItem>b{font-size:10px}.mfLoadoutItem>span{font-size:9.5px}.mfLoadoutItem>small{font-size:8.5px}.mfLoadoutEmpty{font-size:9.5px} .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}} /* A short mode summary leaves the battle choice visible. Its reward and special rules remain one tap away instead of repeating on every stage. */ .mfModeContract{display:block;margin:2px 0 6px;padding:0} .mfModeDetails>summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 10px;list-style:none;cursor:pointer} .mfModeDetails>summary::-webkit-details-marker{display:none} .mfModeDetails>summary:after{content:'⌄';color:var(--mode,#63d9ff);font:900 14px/1 var(--fT)} .mfModeDetails[open]>summary:after{transform:rotate(180deg)} .mfModeDetails span{flex:0 0 auto;color:var(--mode,#63d9ff);font:900 clamp(10px,.6875rem,22px)/1.15 var(--fT)} .mfModeDetails b{flex:1;min-width:0;margin:0;color:#edfaff;font:800 clamp(10px,.625rem,20px)/1.2 var(--fU);letter-spacing:0;overflow-wrap:anywhere} .mfModeDetails strong{flex:0 0 auto;color:#ffe089;font:900 clamp(10px,.625rem,20px)/1 var(--fT)} .mfModeDetails small{display:block;padding:0 10px 9px;color:#a8c8d9;font:700 clamp(10px,.625rem,20px)/1.25 var(--fU)} .mfGalaxyStep{font-size:clamp(9.5px,.625rem,20px);overflow-wrap:anywhere} .mfStageSub{font-size:clamp(11px,.75rem,24px)} .mfStageTitle{letter-spacing:.08em;overflow-wrap:anywhere} .mfConquestContinue{min-height:54px} .mfConquestContinue span{font-size:clamp(9px,.625rem,20px)} .mfConquestContinue b{font-size:clamp(11px,.75rem,24px)} .mfConquestContinue small{font-size:clamp(10px,.625rem,20px)} .mfWorldChip b,.mfWorldChip small,.mfRegionChip b,.mfRegionChip small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;-webkit-line-clamp:unset} .mfWorldChip,.mfRegionChip{height:auto;font-size:clamp(10px,.6875rem,22px)} .mfWorldChip small,.mfRegionChip small{font-size:clamp(9px,.625rem,20px)} .mfPlanetStats b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:clamp(11px,.6875rem,22px)} .mfPlanetStats span{font-size:clamp(9px,.625rem,20px)} /* The system canvas has a 640px bitmap and the dossier has long authored copy. Grid children need zero automatic minimums or the short-landscape 915px theatre can expand the entire setup overlay past the viewport. */ .mfSystemTheatre{display:grid;min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(190px,32%);gap:8px;align-items:start} .mfSystemViewport{grid-column:1;grid-row:1;min-width:0;max-width:100%} .mfSystemDossier,.mfSystemDossier.loreOpen{position:static;grid-column:2;grid-row:1/3;min-width:0;width:auto;max-width:100%;max-height:none;margin:0;overflow:visible;pointer-events:auto;overflow-wrap:anywhere} .mfSystemTheatre>.mfGalaxyHelp{grid-column:1;grid-row:2} .mfSystemDossier small,.mfSystemDossier .mfSysStat span{font-size:clamp(9px,.625rem,20px)} .mfSystemDossier .mfSysStat,.mfSystemDossier p{font-size:clamp(10px,.6875rem,22px);overflow-wrap:anywhere} .mfSysLoreBtn{width:100%;min-height:44px;margin-top:8px;padding:7px 9px;border:1px solid rgba(104,198,234,.42);border-radius:7px;background:rgba(15,55,74,.42);color:#bcecff;font:850 clamp(10px,.625rem,20px)/1.2 var(--fT);text-align:left} .mfDeployBrief{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:3px 0 4px;padding:6px 10px;border:1px solid rgba(99,218,255,.35);border-radius:9px;background:linear-gradient(105deg,rgba(19,71,95,.58),rgba(5,16,30,.94));box-shadow:inset 3px 0 #65d9ff} .mfDeployBrief span{color:#8fc8db;font:800 clamp(10px,.625rem,20px)/1.2 var(--fU);overflow-wrap:anywhere} .mfDeployBrief b{color:#eefaff;font:900 clamp(11px,.75rem,24px)/1.2 var(--fT);text-align:right;overflow-wrap:anywhere} .mfQuickSetup{margin:4px 0 8px;gap:7px} .mfQuickLabel{font-size:clamp(10.5px,.6875rem,22px);overflow-wrap:anywhere} .mfQuickLabel small{font-size:clamp(9px,.625rem,20px);text-align:right;overflow-wrap:anywhere} .mfQuickPlan{min-height:100px} .mfQuickPlan b{font-size:clamp(10px,.6875rem,22px);overflow-wrap:anywhere} .mfQuickPlan span{font-size:clamp(9.5px,.625rem,20px)} .mfQuickPlan em{font-size:clamp(9px,.5625rem,18px)} .mfTeamBtn b{font-size:clamp(10.5px,.6875rem,22px);overflow-wrap:anywhere} .mfTeamBtn span{font-size:clamp(9.5px,.625rem,20px)} .mfDeployIntel{margin:9px 0;border:1px solid rgba(103,207,245,.38);border-radius:10px;background:rgba(5,18,31,.9)} .mfDeployIntel>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:9px 11px;list-style:none;color:#bcecff;font:900 clamp(10px,.6875rem,22px)/1.2 var(--fT);letter-spacing:.06em;cursor:pointer} .mfDeployIntel>summary::-webkit-details-marker{display:none} .mfDeployIntel>summary span{font-size:17px}.mfDeployIntel[open]>summary span{transform:rotate(90deg)} .mfDeployIntel .mfMissionHero,.mfDeployIntel .mfLoadoutSummary{margin:7px} #setupScr.galaxyFlow .setupFoot{grid-auto-rows:minmax(48px,auto)} #setupScr.galaxyFlow .setupFoot .mbtn,#setupScr.galaxyFlow .setupFoot .mbtn.alt{height:auto;min-height:48px;max-height:none;padding:5px 8px!important;font-size:clamp(11.5px,.75rem,24px)!important;line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} #setupScr.galaxyFlow .wtpCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;margin:6px 0 8px;padding:7px 9px} #setupScr.galaxyFlow .wtpCard>header{grid-column:1;margin:0} #setupScr.galaxyFlow .wtpCard>header>span,#setupScr.galaxyFlow .wtpCard>header>b{font-size:clamp(10px,.625rem,20px)} #setupScr.galaxyFlow .wtpCard>p{grid-column:1;margin:0;font-size:clamp(11px,.6875rem,22px);overflow-wrap:anywhere} #setupScr.galaxyFlow .wtpFoot{grid-column:2;grid-row:1/3;display:flex;gap:4px} #setupScr.galaxyFlow .wtpDone,#setupScr.galaxyFlow .wtpSkip{width:auto;min-width:44px;min-height:44px;padding:0 7px;font-size:clamp(10px,.625rem,20px)} @media(max-width:600px){.mfSystemTheatre{grid-template-columns:1fr}.mfSystemViewport{grid-column:1;grid-row:1}.mfSystemTheatre>.mfGalaxyHelp{grid-column:1;grid-row:2}.mfSystemDossier,.mfSystemDossier.loreOpen{grid-column:1;grid-row:3}} @media(max-width:355px){#setupScr.galaxyFlow .wtpCard{grid-template-columns:1fr}#setupScr.galaxyFlow .wtpFoot{grid-column:1;grid-row:auto}} html[data-mf-text-scale="150"] #setupScr.galaxyFlow .mfQuickPlans,html[data-mf-text-scale="200"] #setupScr.galaxyFlow .mfQuickPlans{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,60%);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory} html[data-mf-text-scale="150"] #setupScr.galaxyFlow .mfQuickPlan,html[data-mf-text-scale="200"] #setupScr.galaxyFlow .mfQuickPlan{scroll-snap-align:start} html[data-mf-text-scale="150"] #setupScr.galaxyFlow .mfPlanetStats,html[data-mf-text-scale="200"] #setupScr.galaxyFlow .mfPlanetStats{grid-template-columns:1fr} /* ── 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