/* ============================================================
   STYLES.CSS —— Beyond These Stars（beyondthesestars.wiki）
   设计语言（见 DESIGN-BRIEF.md）：深空靛紫底 + 星云光晕 + 星野星点；
   圆润面板 + 1px 亮描边（游戏内 UI 的质感）；琥珀=城市暖光主强调、
   紫粉=星云次强调、薄荷/萤蓝做状态色。标题 Trebuchet 大写宽字距。
   禁：厚黑硬描边、硬阴影、撕纸（那是纸脑袋站的语言，本站不做）。
   ============================================================ */
:root{
  --bg:#0c0a26; --bg-2:#0a0820;
  --panel:#171240; --panel-2:#201a52; --panel-3:#241d59;
  --line:rgba(158,146,255,.22); --line-soft:rgba(158,146,255,.14);
  --ink:#f4f1ff; --muted:#a89fdb;
  --amber:#f7b95c; --amber-2:#ffd48d; --pink:#d478c8; --mint:#82cf8c; --cyan:#7ad0f0; --violet:#8f7ce8;
  --radius:14px; --radius-sm:10px; --maxw:1140px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --display:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--ink);font:16px/1.7 var(--font);-webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 560px at 88% -6%, rgba(122,80,220,.30), transparent 62%),
    radial-gradient(820px 480px at -6% 10%, rgba(212,120,200,.15), transparent 58%),
    radial-gradient(920px 520px at 52% 112%, rgba(94,72,208,.20), transparent 60%),
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 68% 6%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 33% 61%, rgba(224,214,255,.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 82% 42%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 7% 79%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 88%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 93% 71%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 45% 32%, rgba(230,218,255,.65) 50%, transparent 51%);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat;
  background-size:auto,auto,auto,1100px 900px,1100px 900px,1100px 900px,1100px 900px,1100px 900px,1100px 900px,1100px 900px,1100px 900px;
}
img{max-width:100%;height:auto}
a{color:var(--amber-2);text-decoration:none}
a:hover{color:var(--amber);text-decoration:underline}
a:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--panel-2);padding:8px 14px;z-index:60;border-radius:8px;color:var(--ink)}

/* ribbon */
.ribbon{background:linear-gradient(90deg,#1a1040,#3a2170 35%,#57297e 50%,#3a2170 65%,#1a1040);border-bottom:1px solid var(--line-soft);color:#eadfff;font-size:13px;letter-spacing:.08em;padding:8px 0;text-align:center}
.ribbon .wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* topbar / nav */
.topbar{position:sticky;top:0;z-index:40;background:rgba(12,10,38,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.topbar .bar{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.brand:hover{text-decoration:none;color:#fff}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px var(--line-soft),0 4px 14px rgba(0,0,0,.45)}
.nav{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav li{position:relative}
.nav a{display:inline-block;color:#d9d2ff;font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px}
.nav a:hover{background:rgba(143,124,232,.15);color:var(--ink);text-decoration:none}
.nav .active > a{color:var(--amber);background:rgba(247,185,92,.10)}
.nav .kids{display:none;position:absolute;top:100%;left:0;min-width:214px;background:rgba(20,15,54,.97);border:1px solid var(--line);padding:8px;border-radius:12px;flex-direction:column;box-shadow:0 18px 44px rgba(0,0,0,.6);backdrop-filter:blur(10px)}
.nav .kids a{display:block;border-radius:9px;padding:7px 11px;font-size:14.5px;white-space:nowrap}
/* 下拉父项与面板之间禁止留「死区」：面板一旦与父项有间隙，必须同时加透明 hover 桥。
   这条被用户多次打回，任何站点改成有间距的下拉都要保留。 */
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:39}
.nav li.has-kids > a::after{content:" ▾";opacity:.6}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:flex}
.nav .cta{background:linear-gradient(180deg,#ffc36b,#f0a83c);color:#241500;font-weight:800;padding:8px 15px;border-radius:999px;box-shadow:0 4px 16px rgba(240,168,60,.32)}
.nav .cta:hover{color:#241500;text-decoration:none;filter:brightness(1.06)}
@media (max-width:860px){
  .topbar .bar{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;row-gap:6px}
  .nav{margin-left:0;width:100%;overflow-x:auto}
  .nav ul{flex-wrap:nowrap;white-space:nowrap}
  .nav .kids{position:static;display:flex;border:0;padding:0 0 0 12px;box-shadow:none;background:transparent}
}

/* hero */
.hero{position:relative;background-image:linear-gradient(90deg,rgba(10,8,32,.95) 0%,rgba(10,8,32,.72) 38%,rgba(10,8,32,.18) 72%,rgba(10,8,32,.42) 100%),var(--hero);background-size:cover;background-position:center 30%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:110px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.hero-in{position:relative;z-index:1;padding:clamp(72px,16vh,164px) 20px clamp(64px,12vh,116px)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:6px 15px;border:1px solid rgba(247,185,92,.45);border-radius:999px;background:rgba(12,10,38,.55);color:var(--amber-2);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(6px)}
.eyebrow::before{content:"✦";color:var(--amber)}
.hero h1{font-family:var(--display);font-size:clamp(44px,7.4vw,92px);line-height:1.02;margin:0 0 18px;max-width:11ch;text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 4px 30px rgba(12,10,38,.75),0 0 60px rgba(143,124,232,.35)}
.lead{color:#d5cdf4;font-size:clamp(16px,2vw,19px);max-width:56ch;margin:0}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
@media (max-width:720px){
  .hero{background-image:linear-gradient(180deg,rgba(10,8,32,.5) 0%,rgba(10,8,32,.88) 72%,rgba(10,8,32,.96) 100%),var(--hero)}
  .hero-in{padding-bottom:72px}
}
.btn{display:inline-block;background:linear-gradient(180deg,#ffc36b,#f0a83c);color:#241500;padding:12px 22px;border-radius:999px;font-weight:800;font-size:15.5px;box-shadow:0 8px 22px rgba(240,168,60,.28),inset 0 1px 0 rgba(255,255,255,.55)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(240,168,60,.4),inset 0 1px 0 rgba(255,255,255,.55);text-decoration:none;color:#241500}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(247,185,92,.5);color:var(--amber-2)}

/* facts strip —— 游戏顶部资源读数条 */
.facts-strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(26,20,74,.75),rgba(15,11,44,.85))}
.facts{display:flex;flex-wrap:wrap}
.fact{flex:1 1 150px;min-width:0;padding:14px 18px;display:flex;flex-direction:column;gap:3px;border-left:1px dashed var(--line)}
.fact:first-child{border-left:0}
.fact-k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fact-k::before{content:"✦ ";color:var(--amber)}
.fact-v{font-family:var(--display);font-weight:700;font-size:16.5px}

/* section head / grid / cards */
.section-head{margin:46px 0 4px}
.overline{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.overline::before{content:"✦ "}
.section-head h2{display:flex;align-items:center;gap:12px;margin:6px 0 0;font-family:var(--display);font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;letter-spacing:.02em}
.count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid rgba(247,185,92,.5);border-radius:999px;color:var(--amber);font-size:15px;font-weight:800;font-family:var(--font)}
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 34px}
.card{flex:1 1 290px;min-width:0;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(33,26,82,.9),rgba(19,14,52,.95));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(247,185,92,.48);box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 32px rgba(143,124,232,.28);text-decoration:none;color:var(--ink)}
.thumb{position:relative;display:block;overflow:hidden}
.thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.pill-tag{position:absolute;left:12px;bottom:12px;background:rgba(10,8,32,.8);border:1px solid rgba(247,185,92,.55);color:var(--amber-2);padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(6px)}
.card-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.card h3{margin:0;font-family:var(--display);font-size:19px;line-height:1.25}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.card .go{color:var(--amber);font-weight:700;font-size:14px;margin-top:2px}
.card .stamp{color:var(--muted);font-size:12px}
.card.sm .card-body{padding:10px 14px 14px}
.card.sm h3{font-size:16.5px}
.all-guides{margin-top:48px;border-top:1px dashed var(--line);padding-top:2px}
.all-guides .card{flex:1 1 240px}

/* main typography（首页与内页通用） */
main h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;line-height:1.08}
main h2{font-family:var(--display);font-size:clamp(22px,3vw,30px);text-transform:uppercase;letter-spacing:.02em;margin:42px 0 12px;scroll-margin-top:96px}
main h3{margin:26px 0 10px;font-size:19px;color:#e9e3ff;scroll-margin-top:96px}
main p{color:#e6e1fb;margin:12px 0}
main ul,main ol{color:#e6e1fb}
main li{margin:4px 0}
main img.zoom{border:1px solid var(--line);border-radius:12px;cursor:zoom-in;display:block;margin:18px 0;box-shadow:0 14px 34px rgba(0,0,0,.45)}
main img.zoom.open{box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 40px rgba(143,124,232,.35);position:relative;z-index:5}
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:12px;background:rgba(16,12,46,.6)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border:0;border-bottom:1px solid var(--line-soft);padding:10px 13px;text-align:left;vertical-align:top}
thead th{background:rgba(36,29,89,.85);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#cfc6ff;white-space:nowrap}
tbody tr:hover{background:rgba(143,124,232,.08)}
tbody tr:last-child td{border-bottom:0}
.callout{border-left:3px solid var(--cyan);background:linear-gradient(90deg,rgba(122,208,240,.08),rgba(23,18,64,.65) 40%);padding:13px 16px;margin:18px 0;border-radius:0 12px 12px 0;color:#dff3ff}
.callout p{margin:6px 0;color:inherit}
.callout strong{color:#fff}
.callout.warn{border-left-color:var(--pink);background:linear-gradient(90deg,rgba(212,120,200,.1),rgba(23,18,64,.65) 40%);color:#ffe4fb}
.callout.tip{border-left-color:var(--mint);background:linear-gradient(90deg,rgba(130,207,140,.1),rgba(23,18,64,.65) 40%);color:#e4ffe6}
blockquote{border-left:3px dashed var(--line);margin:18px 0;padding:4px 16px;color:var(--muted)}
code{background:rgba(36,29,89,.85);padding:2px 6px;border-radius:6px;font-size:14px}

/* article layout */
article{padding:10px 0 42px;min-width:0}
article h1{font-size:clamp(30px,4.6vw,46px);margin:14px 0 14px}
article h2{border-bottom:1px dashed var(--line);padding-bottom:8px;font-size:clamp(22px,3vw,28px)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:34px;align-items:start}
@media (max-width:960px){.article-grid{grid-template-columns:1fr}.toc{display:none}}
.crumb{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:13.5px;color:var(--muted);margin-top:18px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--amber-2);text-decoration:none}
.crumb .sep{margin:0 6px;opacity:.55}
.crumb .here{color:#d9d2ff}
.quick-answer{margin:18px 0 8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(18,13,50,.75)}
.qa-stamp{display:flex;align-items:center;gap:9px;background:linear-gradient(90deg,#31246f,#1c1547 70%);color:var(--amber-2);font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px}
.qa-stamp::before{content:"⚑"}
.quick-answer p{margin:0;padding:12px 16px;color:#ece7ff}
.toc{position:sticky;top:88px;background:rgba(20,15,54,.7);border:1px solid var(--line);border-radius:14px;padding:14px}
.toc .overline{display:block;margin-bottom:8px}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{padding:6px 9px;border-radius:9px;color:var(--muted);font-size:14px;line-height:1.35}
.toc-list a:hover{background:rgba(143,124,232,.15);color:var(--ink);text-decoration:none}

/* ad slot（Adsterra：桌面指针门控；未配 key 时不渲染容器） */
@media (hover:hover) and (pointer:fine){.ad-slot{display:block}}
@media not all and (hover:hover) and (pointer:fine){.ad-slot{display:none}}
.ad-slot{margin:30px auto;max-width:var(--maxw)}
.ad-slot .ad-inner{min-height:90px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:rgba(16,12,46,.5);overflow:hidden}

/* footer */
.foot{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(12,10,38,.55),var(--bg-2));padding:26px 0 30px;margin-top:26px}
.foot .wrap{display:flex;flex-direction:column;gap:8px}
.disclaimer{color:var(--muted);font-size:12.5px;margin:0;max-width:86ch}
.foot-links{margin:0;font-size:14px}
.foot-links a{color:#cfc6ff;border-bottom:1px dotted rgba(207,198,255,.4)}
.foot-links a:hover{color:var(--amber-2);text-decoration:none}
.foot .muted{color:var(--muted);font-size:12.5px;margin:0}