/* StarQuest: The Milky Way Wars — site styles */
:root{
  --bg:#05070d; --bg2:#0b1020; --panel:#0f1629; --line:#1f2a44;
  --text:#d9e2f2; --mut:#8b98b3; --accent:#5fd0ff; --accent2:#ffb347; --warn:#ff6b6b;
  --max:1080px; --r:10px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Consolas","SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font);min-height:100vh;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 9%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 62%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 44%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 84%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%,#9fe6ff88 50%,transparent 51%),
    radial-gradient(1px 1px at 94% 78%,#fff5 50%,transparent 51%),
    radial-gradient(1200px 600px at 80% -10%,#16244a 0%,transparent 60%);
  background-attachment:fixed}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
code,kbd{font-family:var(--mono);font-size:.92em;background:#16203a;border:1px solid var(--line);padding:.05em .4em;border-radius:5px}
kbd{border-bottom-width:2px}

/* header */
.top{position:sticky;top:0;z-index:10;background:#05070dd9;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .in{max-width:var(--max);margin:auto;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.06em;color:#fff;text-transform:uppercase;font-size:15px;line-height:1.2}
.brand small{display:block;color:var(--accent2);letter-spacing:.18em;font-size:10.5px}
.brand:hover{text-decoration:none}
nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav a{color:var(--mut);padding:6px 10px;border-radius:6px;font-size:14.5px}
nav a:hover,nav a.on{color:#fff;background:var(--panel);text-decoration:none}

main{max-width:var(--max);margin:auto;padding:28px 16px 60px}
h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:.2em 0 .4em;color:#fff;letter-spacing:.01em}
h2{font-size:24px;color:#fff;margin:2em 0 .5em;padding-bottom:6px;border-bottom:1px solid var(--line)}
h3{font-size:18px;color:var(--accent2);margin:1.6em 0 .3em}
p{margin:.6em 0}
.lead{font-size:18px;color:#c3cde0;max-width:760px}
.mut{color:var(--mut)}

/* hero */
.hero{padding:56px 0 28px;border-bottom:1px solid var(--line)}
.hero .tag{display:inline-block;color:var(--accent2);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:11px 20px;border-radius:8px;background:var(--accent);color:#03111a;font-weight:600}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn:hover{text-decoration:none;filter:brightness(1.1)}

/* cards & grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.card h3{margin-top:0}
.card p{color:#c3cde0;margin:.3em 0 0}
.stat{font-size:28px;font-weight:700;color:#fff}
.note{background:#0f1b2e;border-left:3px solid var(--accent);border-radius:6px;padding:12px 16px;margin:16px 0}
.note.warn{border-left-color:var(--accent2)}
.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0}
.steps>li{counter-increment:s;position:relative;padding:4px 0 14px 46px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;
  background:var(--panel);border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-weight:700}
.steps>li strong{color:#fff}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.tablewrap{overflow-x:auto}

/* news */
.news article{border-left:2px solid var(--line);padding:2px 0 10px 16px;margin:14px 0}
.news time{color:var(--accent2);font-size:13px;letter-spacing:.05em}
.news h3{margin:.2em 0;color:#fff}

/* toc */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;margin:18px 0}
.toc ol{margin:6px 0;padding-left:20px;columns:2;column-gap:30px}
.toc li{break-inside:avoid}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.gallery figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gallery a{display:block}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .25s}
.gallery a:hover img{transform:scale(1.03)}
.gallery figcaption{padding:8px 12px;font-size:14px;color:var(--mut)}
.ph{aspect-ratio:16/10;display:grid;place-items:center;color:var(--mut);font-size:13px;text-align:center;padding:12px;
  background:repeating-linear-gradient(135deg,#0d1426 0 12px,#0f182c 12px 24px)}
.lightbox{position:fixed;inset:0;background:#000e;display:none;align-items:center;justify-content:center;z-index:50;padding:16px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-height:92vh;border-radius:6px}

/* footer */
footer{border-top:1px solid var(--line);color:var(--mut);font-size:13.5px}
footer .in{max-width:var(--max);margin:auto;padding:22px 16px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:640px){
  .top .in{gap:6px}
  nav{margin-left:0;width:100%}
  nav a{padding:5px 8px;font-size:14px}
  .toc ol{columns:1}
  .hero{padding-top:30px}
}
.shot{margin:16px 0;max-width:460px}
.shot img{border:1px solid var(--line);border-radius:8px}
h2[id]{scroll-margin-top:72px}
a.card{display:block;color:inherit}a.card:hover{text-decoration:none;border-color:var(--accent)}
