/* ============================================================
   星系视图首屏样式 —— 由 tools/build_galaxy_css.mjs 自动生成，请勿手改
   来源：out/首页概念_星系视图_v2.html
   所有选择器都被 .gx 作用域隔离，不会影响站点其他板块
   ============================================================ */
.gx{
--bg:#04060a; --text:#eae7e1; --muted:#8f8b83; --dim:#5f5c56;
  --amber:#d9a441; --amber-dim:#8a6a2a;
  --rep:#c33b30; --rep-glow:rgba(195,59,48,.55);
  --cis:#3f86c9; --cis-glow:rgba(63,134,201,.55);
  --hud-line:rgba(140,160,190,.16);
  --panel:rgba(9,13,19,.66);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  position:relative;
}
/* 首屏高度：扣掉站点顶栏，正好铺满一屏 */
.gx .stage{
  height:calc(100svh - 66px) !important;
  min-height:620px !important;
  margin-bottom:0;
}
@media (max-width:900px){
  .gx .stage{height:auto !important;min-height:0 !important}
}

.gx .stage{position:relative;height:100svh;min-height:820px;overflow:hidden;
  background:
    url("textures/space_bg.jpg") center center / cover no-repeat,
    radial-gradient(120% 90% at 78% 8%, rgba(58,86,132,.30), rgba(10,16,26,0) 55%),
    linear-gradient(180deg,#04060a,#060a12 45%,#04060a);
  perspective:1400px;perspective-origin:50% 42%}
.gx .starfield{position:absolute;inset:-6%;pointer-events:none}
.gx .starfield i{position:absolute;border-radius:50%;background:#fff;display:block}
.gx .sf-1{animation:twinkle 5.5s ease-in-out infinite}
.gx .sf-2{animation:twinkle 7.5s ease-in-out infinite .8s}
.gx .sf-3{animation:twinkle 9.5s ease-in-out infinite 1.7s}
@keyframes twinkle{0%,100%{opacity:.22}45%{opacity:.95}}
.gx .sun{position:absolute;right:6%;top:-14%;width:52vmax;height:52vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,246,222,.95) 0%,rgba(255,222,150,.55) 3.2%,rgba(255,190,110,.18) 9%,rgba(255,170,90,.07) 20%,rgba(255,160,80,0) 42%)}
.gx .scene{position:absolute;left:0;right:0;
  top:clamp(150px,19vh,200px);bottom:clamp(190px,24vh,260px);
  transform-style:preserve-3d;
  transform:translate3d(calc(var(--mx,0)*10px),calc(var(--my,0)*8px),0)
            rotateY(calc(var(--mx,0)*2.2deg)) rotateX(calc(var(--my,0)*-1.6deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.gx .idle{animation:idle 26s ease-in-out infinite}
@keyframes idle{0%,100%{transform:translate3d(0,0,26px) rotateY(-1.6deg) rotateX(.8deg)}
                50%{transform:translate3d(0,-10px,0) rotateY(1.6deg) rotateX(-.8deg)}}
.gx .lanes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.gx .lane{fill:none;stroke:rgba(140,175,215,.30);stroke-width:1.1;stroke-dasharray:5 9;animation:dash 22s linear infinite}
.gx .lane.hot{stroke:rgba(217,164,65,.45)}
@keyframes dash{to{stroke-dashoffset:-280}}
.gx .lane-glow{fill:none;stroke:rgba(120,170,230,.10);stroke-width:5;filter:blur(3px)}
.gx .planet{position:absolute;cursor:pointer;
  transform:translate(-50%,-50%) translateZ(var(--z,0px)) scale(var(--s,1));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .45s}
.gx .planet:hover,
.gx .planet.locked{--s:1.045;filter:brightness(1.08)}
.gx .p-body{position:relative;width:var(--d);height:var(--d)}
.gx .sphere{position:absolute;inset:14%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 46px 6px var(--accent-glow),0 26px 60px -18px rgba(0,0,0,.9)}
.gx .surface{position:absolute;inset:0;border-radius:50%;background-image:var(--surface);
  background-size:cover;filter:saturate(1.06) contrast(1.04)}
.gx .sphere.disc-mode{inset:0;border-radius:0;overflow:visible;box-shadow:none;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  animation:breathe 14s ease-in-out infinite}
.gx .sphere.disc-mode>*{display:none}
.gx .sphere.disc-mode::before{content:"";position:absolute;inset:7%;border-radius:50%;
  box-shadow:0 0 64px 10px var(--accent-glow);pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.006)}}
.gx .surface.has-tex{inset:0 auto 0 0;width:200%;border-radius:0;
  background-size:200% 100%;background-repeat:repeat-x;animation:spin var(--tex-t,220s) linear infinite}
.gx .surface.has-tex::after{content:"";position:absolute;inset:0;background:var(--tint,none);
  mix-blend-mode:soft-light;opacity:.9;pointer-events:none}
@keyframes spin{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gx .clouds{position:absolute;top:-2%;left:0;width:200%;height:104%;
  background-image:var(--clouds);background-size:50% 100%;background-repeat:repeat-x;
  opacity:var(--cloud-a,.22);filter:blur(3.5px);animation:spin var(--cloud-t,120s) linear infinite}
.gx .shade{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 74% 24%,rgba(255,244,220,.30),rgba(255,226,178,.10) 20%,
    rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 64%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.95))}
.gx .rim{position:absolute;inset:0;border-radius:50%;
  box-shadow:inset -18px -14px 46px rgba(0,0,0,.85),inset 14px 16px 34px rgba(255,214,150,.16),inset 0 0 34px rgba(0,0,0,.5)}
.gx .glint{position:absolute;left:26%;top:16%;width:16%;height:11%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,252,240,.55),rgba(255,240,200,0) 70%);filter:blur(4px);opacity:.7}
.gx .lights{position:absolute;inset:0;border-radius:50%;opacity:0;
  -webkit-mask-image:radial-gradient(circle at 74% 24%,transparent 30%,#000 66%);
          mask-image:radial-gradient(circle at 74% 24%,transparent 30%,#000 66%)}
.gx .lights i{position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(255,198,116,.95);box-shadow:0 0 4px rgba(255,180,90,.9);animation:cityflicker 7s ease-in-out infinite}
@keyframes cityflicker{0%,100%{opacity:.55}50%{opacity:1}}
.gx .control{position:absolute;inset:0;overflow:visible;pointer-events:none}
.gx .control .seg{fill:none;stroke-width:6.5;stroke-linecap:butt;
  stroke-dasharray:var(--l,80);stroke-dashoffset:var(--l,80);
  animation:draw .55s cubic-bezier(.3,.8,.3,1) forwards;animation-delay:var(--dl,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.gx .control .seg.off{stroke:rgba(150,170,200,.13)}
.gx .control .seg.on{stroke:var(--seg-c);filter:drop-shadow(0 0 5px var(--seg-g))}
.gx .control .core{fill:none;stroke:#fff;stroke-width:2;opacity:.85;
  stroke-dasharray:var(--l,80);stroke-dashoffset:var(--l,80);
  animation:draw .55s cubic-bezier(.3,.8,.3,1) forwards;animation-delay:var(--dl,0s)}
.gx .control .halo{fill:none;stroke:var(--seg-c);stroke-width:16;opacity:0;stroke-linecap:round;filter:blur(7px)}
.gx .edge .control .halo{animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0}50%{opacity:.55}}
.gx .plate{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 14px 8px;
  border:1px solid var(--hud-line);border-radius:3px;
  background:linear-gradient(180deg,rgba(10,15,22,.80),rgba(6,9,14,.72));backdrop-filter:blur(6px)}
.gx .plate .cn{font-size:15px;font-weight:700;letter-spacing:.16em}
.gx .plate .en{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.gx .plate .val{font-size:12px;color:var(--muted)}
.gx .plate .val b{font-size:14px}
.gx .badge{position:absolute;left:50%;top:-2%;transform:translate(-50%,-100%);
  font-size:10.5px;letter-spacing:.12em;padding:3px 9px;border-radius:2px;
  border:1px solid currentColor;color:var(--amber);background:rgba(8,10,14,.78)}
.gx .badge.rep{color:#ff8b7f}
.gx .badge.cis{color:#7fb6ff}
.gx .edge .badge{animation:blinkb 1.9s ease-in-out infinite}
@keyframes blinkb{0%,100%{opacity:.4}50%{opacity:1}}
.gx #p-kalladane{left:21%;top:44%;--d:clamp(150px,17vw,252px);--z:40px}
.gx #p-nolveyr{left:50%;top:34%;--d:clamp(126px,14vw,206px);--z:-60px}
.gx #p-maruun{left:78%;top:52%;--d:clamp(120px,13vw,192px);--z:-10px}
.gx .dossier{flex:1 1 auto;min-width:0;max-width:min(560px,36vw);opacity:0;pointer-events:none;
  transition:opacity .3s;padding:13px 16px;border-radius:2px;
  border:1px solid var(--hud-line);border-left:2px solid var(--accent);
  background:linear-gradient(180deg,rgba(10,14,20,.92),rgba(5,8,12,.88));backdrop-filter:blur(9px)}
.gx .dossier.on{opacity:1;pointer-events:auto}
.gx .dossier h4{margin:0 0 5px;font-size:15px;letter-spacing:.1em}
.gx .dossier p{margin:0;font-size:12.5px;color:#c3bfb8;line-height:1.7}
.gx .hud{position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:16px clamp(16px,3vw,38px) clamp(18px,4vh,42px)}
.gx .hud>*{pointer-events:auto}
.gx .hud-top{display:flex;flex-direction:column;gap:clamp(10px,2.2vh,24px)}
.gx .hud-bottom{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(10px,2vw,28px)}
.gx .topbar{display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;flex-wrap:wrap}
.gx .brand{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.gx .brand b{font-size:17px;letter-spacing:.34em;font-weight:700}
.gx .brand span{font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
.gx nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.gx nav a{font-size:12.5px;letter-spacing:.1em;color:#b9b5ad}
.gx nav a:hover{color:var(--amber)}
.gx nav a.cta{color:#12100c;background:var(--amber);padding:7px 15px;border-radius:2px;font-weight:700}
.gx .progress{width:min(268px,44vw)}
.gx .kick{font-size:10px;letter-spacing:.22em;color:var(--amber)}
.gx .progress h2{margin:7px 0 9px;font-size:clamp(20px,2.4vw,27px);letter-spacing:.06em}
.gx .progress .sub{font-size:11.5px;color:var(--muted);line-height:1.65}
.gx .status{flex:0 1 min(330px,30vw);min-width:0;
  padding:13px 16px 15px;border:1px solid var(--hud-line);border-radius:2px;
  background:var(--panel);backdrop-filter:blur(8px)}
.gx .status .head{font-size:12.5px;letter-spacing:.18em;margin-bottom:10px}
.gx .status .row{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:12px;color:#c3bfb8}
.gx .status .row:last-of-type{margin-bottom:0}
.gx .status .nm{width:58px;flex:none;letter-spacing:.08em}
.gx .status .bar7{display:flex;gap:3px;flex:1}
.gx .status .bar7 i{flex:1;height:9px;border-radius:1.5px;background:rgba(150,170,200,.13)}
.gx .status .bar7 i.rep{background:var(--rep);box-shadow:0 0 7px rgba(195,59,48,.5)}
.gx .status .bar7 i.cis{background:var(--cis);box-shadow:0 0 7px rgba(63,134,201,.5)}
.gx .status .bar7 i.neu{background:var(--amber-dim)}
.gx .status .v{width:34px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--muted)}
.gx .status .foot{margin-top:11px;padding-top:10px;border-top:1px dashed var(--hud-line);
  font-size:11.5px;color:var(--muted);line-height:1.65}
.gx .status .foot b{color:var(--amber)}
.gx .focus{flex:0 1 min(270px,26vw);min-width:0;
  padding:13px 16px 15px;border:1px solid var(--hud-line);border-radius:2px;
  background:var(--panel);backdrop-filter:blur(8px)}
.gx .focus .head{font-size:12.5px;letter-spacing:.18em;margin-bottom:9px}
.gx .focus .fx{font-size:14px;letter-spacing:.06em;margin-bottom:7px}
.gx .focus .hint{font-size:11px;color:var(--dim);line-height:1.6}
.gx .scroll-hint{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);white-space:nowrap;
  font-size:10px;letter-spacing:.22em;color:var(--dim);animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:.9;transform:translate(-50%,5px)}}
.gx .grade{position:absolute;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 45%,transparent 44%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.8))}
.gx .grain{position:absolute;inset:0;pointer-events:none;z-index:10;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.gx .brk{position:absolute;width:16px;height:16px;border:1px solid rgba(217,164,65,.4);pointer-events:none}
.gx .brk.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.gx .brk.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.gx .brk.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.gx .brk.br{bottom:8px;right:8px;border-left:0;border-top:0}
.gx .wrap{max-width:1120px;margin:0 auto;padding:clamp(38px,6vh,74px) clamp(16px,3vw,28px) 90px;
  display:flex;flex-direction:column}
.gx .blk{display:block;margin-bottom:46px}
.gx .blk:last-of-type{margin-bottom:0}
.gx .wrap.prep .blk-roster{order:1}
.gx .wrap.prep .blk-planets{order:2}
.gx .wrap.prep .blk-report{order:3}
.gx .wrap.prep .blk-battles{order:4}
.gx .wrap .foot{order:9}
.gx .sec{font-size:10.5px;letter-spacing:.26em;color:var(--amber);display:flex;align-items:center;gap:12px;margin:0 0 18px}
.gx .sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber-dim),transparent)}
.gx .sec+.sec{margin-top:44px}
.gx .feature{padding:22px 24px;border-radius:2px;border:1px solid var(--hud-line);border-left:3px solid var(--amber);
  background:linear-gradient(180deg,rgba(11,15,21,.85),rgba(6,9,13,.8))}
.gx .feature .meta{font-size:10px;letter-spacing:.16em;color:var(--dim);margin-bottom:9px}
.gx .feature h3{margin:0 0 12px;font-size:20px;letter-spacing:.04em}
.gx .feature p{margin:0 0 11px;color:#cfcbc4;font-size:14.5px;line-height:1.85}
.gx .feature .more{font-size:12.5px}
.gx .empty{padding:26px 22px;border:1px dashed var(--hud-line);border-radius:2px;color:var(--muted);
  font-size:13.5px;text-align:center;line-height:1.8;background:rgba(8,11,16,.5)}
.gx .cards{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.gx .bcard{padding:14px 16px;border-radius:2px;border:1px solid var(--hud-line);border-top:2px solid var(--accent);
  background:rgba(9,13,19,.66)}
.gx .bcard .r1{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.1em;color:var(--dim);margin-bottom:9px}
.gx .bcard .r1 b{color:var(--accent)}
.gx .bcard .vs{font-size:13.5px;margin-bottom:9px}
.gx .bcard .vs i{font-style:normal;color:var(--dim);padding:0 6px}
.gx .bcard q{display:block;font-size:13.5px;color:#c6c2bb;line-height:1.75;quotes:none}
.gx .bcard .named{margin-top:10px;font-size:11px;color:var(--dim);letter-spacing:.04em}
.gx .roster{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.gx .rcard{display:flex;gap:0;border-radius:2px;border:1px solid var(--hud-line);overflow:hidden;background:rgba(9,13,19,.66)}
.gx .rcard .stripe{width:5px;background:var(--fc)}
.gx .rcard .bd{padding:12px 14px}
.gx .rcard .nm{font-size:15px;font-weight:700;letter-spacing:.04em}
.gx .rcard .id{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.gx .rcard .fc{display:inline-block;margin-top:8px;font-size:10.5px;padding:2px 8px;border-radius:999px;
  background:var(--fc);color:#141210;font-weight:700}
.gx .planets{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.gx .pcard{padding:15px 17px;border-radius:2px;border:1px solid var(--hud-line);background:rgba(9,13,19,.66)}
.gx .pcard h4{margin:0 0 4px;font-size:16px;letter-spacing:.08em}
.gx .pcard .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim)}
.gx .pcard .role{font-size:12.5px;color:#c3bfb8;margin:9px 0 4px;line-height:1.65}
.gx .pcard .sty{font-size:11.5px;color:var(--dim);line-height:1.6}
.gx .foot{margin-top:52px;padding-top:20px;border-top:1px solid var(--hud-line);font-size:11.5px;color:var(--dim);line-height:1.8}
@media (max-width:900px){.gx .stage{height:auto;min-height:0;padding:20px 0 34px;perspective:none;display:flex;flex-direction:column;gap:26px}
.gx .scene{position:relative;inset:auto;height:auto;display:flex;flex-direction:column;align-items:center;
    gap:38px;transform:none!important;animation:none!important;order:3}
.gx .lanes,
.gx .scroll-hint{display:none}
.gx .planet{position:relative!important;left:auto!important;top:auto!important;transform:none!important;--s:1!important;--z:0px!important}
.gx .planet:hover{--s:1}
.gx .hud,
.gx .hud-top,
.gx .hud-bottom{display:contents}
.gx .topbar{order:1;padding:0 16px}
.gx .progress{order:2;width:auto;margin:0 16px}
.gx .status{order:4;width:auto;margin:0 16px}
.gx .dossier{order:5;width:auto;max-width:none;margin:10px 16px 0;opacity:1;pointer-events:auto}
.gx .dossier:not(.on){display:none}
.gx .focus{order:6;width:auto;margin:0 16px}
.gx .grade,
.gx .grain{position:fixed}
.gx .brk{display:none}

}
@media (prefers-reduced-motion:reduce){.gx *{animation:none!important;transition:none!important}}