/* shell.css — 由 style.css 第 51-174 行切分（模块化②，保持原顺序）。link 顺序即层叠顺序，勿乱序。 */
/* ── 背景：暗色场景 + 三色方尖碑辉光 + 暗角 ── */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 50% -10%, #11242b 0%, transparent 60%),
    linear-gradient(180deg,#0a1418 0%,#070d10 55%,#04080a 100%);}
.bg::before,.bg::after,.glow-g{content:""; position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.45; mix-blend-mode:screen; pointer-events:none;
  animation:breathe 9s ease-in-out infinite;}
.bg::before{width:560px;height:560px;left:-160px;bottom:-200px;
  background:radial-gradient(circle,var(--red),transparent 65%);}
.bg::after{width:620px;height:620px;left:42%;top:-320px;
  background:radial-gradient(circle,var(--blue),transparent 65%); animation-delay:-3s;}
.glow-g{width:520px;height:520px;right:-180px;bottom:-220px;
  background:radial-gradient(circle,var(--green),transparent 65%); animation-delay:-6s;}
.vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 320px 60px rgba(0,0,0,.85);
  background:radial-gradient(1400px 900px at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%);}
@keyframes breathe{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.5;transform:scale(1.08)}}

/* ── 外壳骨架 ── */
.shell{position:relative; z-index:var(--z-content); height:100%; min-height:100dvh; display:flex;}

/* 顶栏角标 */
.badge{position:fixed; top:18px; right:22px; z-index:6; font-size:var(--fs-11); letter-spacing:2px;
  color:var(--muted-2); border:1px solid var(--line); padding:4px 10px; border-radius:3px;
  text-transform:uppercase; backdrop-filter:blur(4px);}
.corner{position:fixed; z-index:5; font-size:var(--fs-11); letter-spacing:3px; color:var(--muted);
  text-transform:uppercase;}
.corner.br{right:38px; bottom:28px}

/* 全局本地音乐播放器：紧凑控制坞 + 向上展开的曲目列表。 */
.music-player{position:fixed; left:64px; bottom:12px; z-index:var(--z-float); width:214px; height:48px;
  color:#e8edf0; font-family:var(--sans)}
.music-progress{--music-progress:0%; position:absolute; top:-1px; left:0; z-index:3; width:100%; height:5px; margin:0;
  padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer}
.music-progress::-webkit-slider-runnable-track{height:2px; border:0; border-radius:2px;
  background:linear-gradient(90deg,#ff4053 var(--music-progress),rgba(232,237,240,.2) var(--music-progress))}
.music-progress::-moz-range-track{height:2px; border:0; border-radius:2px;
  background:linear-gradient(90deg,#ff4053 var(--music-progress),rgba(232,237,240,.2) var(--music-progress))}
.music-progress::-webkit-slider-thumb{width:8px; height:8px; margin-top:-3px; appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.82); border-radius:50%; background:#ff4053; box-shadow:0 0 8px rgba(255,64,83,.72); opacity:0; transition:opacity .14s ease}
.music-progress::-moz-range-thumb{width:6px; height:6px; border:1px solid rgba(255,255,255,.82); border-radius:50%; background:#ff4053; box-shadow:0 0 8px rgba(255,64,83,.72); opacity:0; transition:opacity .14s ease}
.music-progress:hover:not(:disabled)::-webkit-slider-thumb,.music-progress:active:not(:disabled)::-webkit-slider-thumb,.music-progress:focus-visible::-webkit-slider-thumb{opacity:1}
.music-progress:hover:not(:disabled)::-moz-range-thumb,.music-progress:active:not(:disabled)::-moz-range-thumb,.music-progress:focus-visible::-moz-range-thumb{opacity:1}
.music-progress:disabled{cursor:default; opacity:.42}
.music-progress:focus-visible{outline:1px solid #73c1f5; outline-offset:2px}
.music-dock{position:relative; z-index:2; height:48px; display:grid; grid-template-columns:44px 110px 30px 30px;
  align-items:center; overflow:visible; background:linear-gradient(90deg,rgba(7,13,16,.56),rgba(7,13,16,.18) 72%,transparent);
  backdrop-filter:blur(8px)}
.music-cover{width:44px; height:48px; overflow:hidden; background:radial-gradient(circle at 35% 25%,#23455b,#0a141b 70%)}
.music-cover img{display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease}
.music-cover img[src]{opacity:1}
.music-meta{display:none; min-width:0; padding:0 6px 0 10px; line-height:1.2}
.music-meta strong,.music-meta span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.music-meta strong{font-family:var(--serif); font-size:var(--fs-14); font-weight:600; letter-spacing:.3px; color:#f2f0e8}
.music-meta span{margin-top:5px; font-size:var(--fs-11); letter-spacing:.4px; color:#89939c}
.music-controls{display:flex; align-items:center; justify-content:center; gap:0}
.music-button{position:relative; width:25px; height:36px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  padding:0; border:0; background:none; color:#cbd3d9; cursor:pointer; transition:color .16s ease,background .16s ease,transform .16s ease}
.music-button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.music-button:hover{color:#fff; background:rgba(255,255,255,.055)}
.music-button:active{transform:scale(.92)}
.music-button:focus-visible{outline:1px solid #73c1f5; outline-offset:-3px}
.music-play{width:30px; height:30px; border:1px solid rgba(232,237,240,.48); border-radius:50%; color:#fff}
.music-play svg{width:17px; height:17px; fill:currentColor; stroke:none}
#musicNext{width:22px}
.music-icon-pause{display:none}
.music-player.is-playing .music-icon-play{display:none}
.music-player.is-playing .music-icon-pause{display:block}
.music-volume,.music-list-toggle{width:30px; height:48px; color:#929ca4}
.music-volume svg{width:19px; height:19px; fill:currentColor; stroke:none}
.music-volume .volume-wave{fill:none; stroke:currentColor; stroke-width:1.7}
.music-volume::after{content:attr(data-volume); position:absolute; left:50%; bottom:43px; transform:translate(-50%,4px);
  padding:4px 6px; border-radius:3px; background:#080d11; color:#dce5ea; font-size:var(--fs-11); white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none; transition:.15s}
.music-volume:hover::after{opacity:1; visibility:visible; transform:translate(-50%,0)}
.music-player.is-muted .music-volume{color:#65717a}
.music-list-toggle svg{width:20px; height:20px}
.music-list-toggle svg circle{fill:currentColor; stroke:none}
.music-player.list-open .music-list-toggle{color:#73c1f5; background:rgba(63,169,245,.09)}
.music-player.is-loading .music-button{pointer-events:none; opacity:.45}

.music-list-panel{position:absolute; left:-8px; bottom:48px; z-index:1; width:230px; max-height:min(42vh,330px); overflow:hidden;
  background:rgba(7,13,16,.965); border-top:1px solid rgba(89,178,232,.24); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transform-origin:bottom;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.music-player.list-open .music-list-panel{opacity:1; visibility:visible; pointer-events:auto; transform:none}
.music-list-scroll{max-height:min(42vh,330px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#59626d #242a32}
.music-album-label{position:sticky; top:0; z-index:2; padding:6px 13px; background:rgba(7,13,16,.985);
  color:#7f8b94; font-size:var(--fs-11); font-weight:600; letter-spacing:1px; text-transform:uppercase}
.music-track{position:relative; width:100%; min-height:32px; display:flex; align-items:center; padding:0 11px 0 27px;
  border:0; background:rgba(255,255,255,.025); color:#aeb8bd; font:500 var(--fs-11)/1.2 var(--serif); letter-spacing:.15px; text-align:left; cursor:pointer}
.music-track[data-album="ase"]{color:#aebcb7}
.music-track[data-album="expansion"]{color:#b6b0c2}
.music-track[data-album="genesis-1"]{color:#a9bfc0}
.music-track[data-album="genesis-2"]{color:#c0b69f}
.music-track:nth-of-type(even){background:rgba(255,255,255,.04)}
.music-track:hover{background:rgba(115,193,245,.08); color:#fff}
.music-track.active{background:rgba(255,64,83,.09); color:#fff}
.music-track.active::before{content:""; position:absolute; left:11px; top:50%; width:3px; height:12px; border-radius:2px;
  background:#ff4053; box-shadow:6px 0 #ff4053; transform:translateY(-50%)}
.music-track span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.music-list-empty{padding:28px 18px; color:#8d98a0; font-size:var(--fs-12); text-align:center}

/* ── 左下角菜单 ── */
.menu{position:relative; flex:0 0 auto; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 70px 64px; gap:6px; z-index:4;
  width:420px; transition:width .55s cubic-bezier(.6,.05,.2,1), padding .55s cubic-bezier(.6,.05,.2,1);}
.brand{display:flex; align-items:center; gap:12px; width:max-content; margin-bottom:30px; padding:0;
  color:inherit; background:none; border:0; text-align:left; font:inherit; cursor:pointer; user-select:none;
  opacity:0; transform:translateY(8px); animation:rise .6s .05s forwards;}
.brand .mark{width:34px;height:34px;flex:0 0 34px}
.brand b{font-family:var(--serif); font-weight:900; font-size:var(--fs-20); letter-spacing:3px; white-space:nowrap}
.brand small{display:block;font-size:var(--fs-11);letter-spacing:4px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap}
.brand>div{flex:0 0 auto}
.brand-back{font-size:var(--fs-11);color:var(--muted-2);letter-spacing:2px;margin-left:6px;opacity:0;transition:opacity .3s;white-space:nowrap}
.menu-toggle{display:none; min-width:var(--touch-h); min-height:var(--touch-h); padding:0 14px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:rgba(8,16,20,.76);
  color:var(--text); font:600 var(--fs-14) var(--sans); letter-spacing:1px; cursor:pointer}

.menu-list{display:flex; flex-direction:column; gap:4px}
.mi{position:relative; display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:600; font-size:var(--fs-30); letter-spacing:4px;
  color:rgba(234,240,236,.6); background:none; border:0; text-align:left; cursor:pointer;
  padding:11px 0 11px 22px; line-height:1.1; transition:.3s cubic-bezier(.4,0,.2,1);
  opacity:0; transform:translateX(-14px); animation:slidein .55s forwards;}
.mi-title{flex:0 0 auto; white-space:nowrap}
.mi:nth-child(1){animation-delay:.12s} .mi:nth-child(2){animation-delay:.18s}
.mi:nth-child(3){animation-delay:.24s} .mi:nth-child(4){animation-delay:.30s}
.mi:nth-child(5){animation-delay:.36s} .mi:nth-child(6){animation-delay:.42s}
.mi:nth-child(7){animation-delay:.48s}
/* 左侧方尖碑色竖条 */
.mi::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleY(.2);
  width:3px; height:30px; border-radius:2px; opacity:0; transition:.3s;}
.mi:nth-child(1)::before{background:var(--red); box-shadow:0 0 14px var(--red)}
.mi:nth-child(2)::before{background:var(--blue); box-shadow:0 0 14px var(--blue)}
.mi:nth-child(3)::before{background:var(--green); box-shadow:0 0 14px var(--green)}
.mi:nth-child(4)::before{background:var(--gold); box-shadow:0 0 14px var(--gold)}
.mi:nth-child(5)::before{background:var(--stone); box-shadow:0 0 14px var(--stone)}
.mi:nth-child(6)::before{background:var(--blue); box-shadow:0 0 14px var(--blue)}
.mi:nth-child(7)::before{background:var(--stone); box-shadow:0 0 14px var(--stone)}
.mi .sub{font-family:var(--sans); font-size:var(--fs-11); letter-spacing:1px; color:var(--muted);
  font-weight:500; transition:.3s; white-space:nowrap}
.mi:hover, .mi.active{color:#fff; transform:translateX(4px);
  text-shadow:0 0 22px rgba(255,255,255,.35);}
.mi:hover::before, .mi.active::before{opacity:1; transform:translateY(-50%) scaleY(1)}
.mi:hover .sub{color:var(--muted)}
/* ── 中央：纪念碑 Logo ── */
.hero{position:relative; flex:1; display:flex; align-items:center; justify-content:center;
  transition:opacity .45s; }
.monument{text-align:center; transform:translateY(-12px);
  opacity:0; animation:rise .9s .25s forwards;}
.halo{position:absolute; width:430px; height:430px; left:50%; top:50%;
  transform:translate(-50%,-58%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(63,169,245,.12), transparent 62%);
  border:1px solid rgba(214,207,191,.06);}
.monument h1{font-family:var(--serif); font-weight:900; font-size:var(--fs-hero); line-height:.92;
  letter-spacing:8px; position:relative;
  background:linear-gradient(180deg,#f3eee2 0%,#cfc6b2 38%,#7d7868 78%,#5a564a 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));}
.monument .en{font-family:var(--serif); font-weight:700; font-size:var(--fs-20); letter-spacing:14px;
  color:var(--stone-dim); margin-top:14px; padding-left:14px;}
.gems{display:flex; gap:26px; justify-content:center; margin-top:24px}
.gem{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-bottom:19px solid; animation:flicker 4s ease-in-out infinite;}
.gem.r{border-bottom-color:var(--red); filter:drop-shadow(0 0 10px var(--red))}
.gem.b{border-bottom-color:var(--blue); filter:drop-shadow(0 0 10px var(--blue)); animation-delay:-1.3s}
.gem.g{border-bottom-color:var(--green); filter:drop-shadow(0 0 10px var(--green)); animation-delay:-2.6s}
@keyframes flicker{0%,100%{opacity:.7}50%{opacity:1}}

/* ── 方舟新闻（主菜单态，接真实统计）── */
.news{position:fixed; top:64px; right:46px; width:300px; z-index:4;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px 18px;
  backdrop-filter:blur(8px); opacity:0; animation:rise .8s .5s forwards;}
.news h4{font-family:var(--serif); font-size:var(--fs-14); letter-spacing:3px; color:var(--gold);
  margin-bottom:12px; font-weight:700}
.news .nums{display:flex; gap:14px; margin-bottom:12px}
.news .nums div{flex:1}
.news .nums b{display:block; font-size:var(--fs-20); font-weight:700; letter-spacing:.5px}
.news .nums span{font-size:var(--fs-11); color:var(--muted); letter-spacing:1px}
.news .nums .a{color:#fff} .news .nums .c{color:var(--green)}
.news p{font-size:var(--fs-11); line-height:1.7; color:var(--muted); border-top:1px solid var(--line);
  padding-top:10px}