/* ============================================================
   群星のレムナント 公式サイト 共通スタイル
   配色：深宇宙の藍(ベース) × シアン(構造) × マゼンタ(星雲)の2差し色
   「ビルを見ているのに星空を連想させる」ための、銀河グラデーションを基調にする
   ============================================================ */
:root{
  --bg:#03040e;            /* ほぼ黒の藍 */
  --bg2:#070b20;           /* パネル背景 */
  --panel:rgba(12,18,40,.55);
  --line:rgba(120,150,220,.22);
  --ink:#e7ecfb;           /* 本文 */
  --muted:#8fa0c8;         /* 補助文 */
  --cyan:#36e6ff;          /* 差し色1：構造・リンク */
  --magenta:#b57bff;       /* 差し色2：星雲・アクセント */
  --cyan-ink:#04121a;
  --ok:#67e0a3; --danger:#ff7b7b;
  --maxw:1120px;
  --nav-h:64px;
  color-scheme:dark;
  box-sizing:border-box;
}
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  font-size:16px; line-height:1.85; letter-spacing:.02em;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
/* 画面全体にうっすら星雲グラデ（ビル＝星空の仕込み） */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 900px at 18% -10%, rgba(54,230,255,.10), transparent 60%),
    radial-gradient(1000px 800px at 90% 20%, rgba(181,123,255,.12), transparent 55%),
    radial-gradient(900px 1200px at 60% 120%, rgba(54,230,255,.06), transparent 60%),
    var(--bg);
}
/* 微細な星の粒 */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(181,123,255,.7), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(54,230,255,.6), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.4), transparent);
  background-size:cover;
}
img{ max-width:100%; display:block; }
a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ---------- 見出し等の共通文字 ---------- */
.kicker{ font-family:"Chakra Petch",monospace; letter-spacing:.35em; font-size:12px;
  color:var(--cyan); text-shadow:0 0 12px rgba(54,230,255,.5); margin:0 0 10px; }
h1,h2,h3{ line-height:1.25; letter-spacing:.04em; }
.section{ max-width:var(--maxw); margin:0 auto; padding:72px 20px; }
.section h2{ font-size:clamp(22px,3.4vw,34px); margin:0 0 6px; }
.section .lead{ color:var(--muted); margin:0 0 36px; }
.divider{ height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* 2色グラデの見出し（星雲→構造） */
.grad{ background:linear-gradient(100deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- ヘッダー ---------- */
.nav{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:18px; padding:0 20px;
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(180deg,rgba(3,4,14,.9),rgba(3,4,14,.6) 70%,transparent);
  backdrop-filter:blur(8px); }
.nav .brand{ display:flex; align-items:center; gap:10px; font-family:"Chakra Petch",monospace;
  letter-spacing:.14em; font-weight:600; color:var(--ink); white-space:nowrap; }
.nav .brand svg{ width:28px; height:28px; color:var(--cyan); }
.nav .brand b{ font-weight:600; }
.nav .spacer{ flex:1; }
.nav .links{ display:flex; gap:4px; }
.nav .links a{ color:var(--muted); padding:8px 12px; border-radius:6px; font-size:14px;
  letter-spacing:.08em; }
.nav .links a:hover,.nav .links a[aria-current="page"]{ color:var(--ink); background:rgba(120,150,220,.12); text-decoration:none; }
.nav .links a.soon{ opacity:.5; }
.nav .links a.soon::after{ content:"SOON"; font-family:"Chakra Petch",monospace; font-size:9px;
  margin-left:5px; padding:1px 4px; border:1px solid var(--line); border-radius:3px; color:var(--magenta); }
/* 言語切替 */
.lang{ display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.lang button{ font:inherit; font-size:12px; font-family:"Chakra Petch",monospace; letter-spacing:.1em;
  background:transparent; color:var(--muted); border:0; padding:6px 10px; cursor:pointer; }
.lang button[aria-pressed="true"]{ background:var(--cyan); color:var(--cyan-ink); }
/* モバイルメニュー */
.nav .burger{ display:none; background:transparent; border:1px solid var(--line); border-radius:6px;
  color:var(--ink); width:38px; height:38px; cursor:pointer; font-size:18px; }
@media (max-width:860px){
  .nav .links{ position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0;
    background:rgba(3,4,14,.97); border-top:1px solid var(--line); padding:8px;
    transform:translateY(-120%); transition:transform .25s ease; }
  .nav .links.open{ transform:translateY(0); }
  .nav .links a{ padding:12px; }
  .nav .burger{ display:block; }
}

/* ---------- ボタン ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font:inherit; cursor:pointer;
  border:1px solid var(--cyan); color:var(--cyan); background:rgba(54,230,255,.06);
  padding:11px 22px; border-radius:7px; letter-spacing:.05em; transition:background .2s,box-shadow .2s; }
.btn:hover{ background:rgba(54,230,255,.16); box-shadow:0 0 20px rgba(54,230,255,.25); text-decoration:none; }
.btn.solid{ background:linear-gradient(100deg,var(--cyan),var(--magenta)); color:#06121f; border:0; font-weight:700; }
.btn.ghost{ border-color:var(--line); color:var(--ink); background:transparent; }

/* ---------- カード ---------- */
.cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:22px; backdrop-filter:blur(6px); overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0; border-radius:12px; padding:1px;
  background:linear-gradient(140deg,rgba(54,230,255,.5),transparent 40%,rgba(181,123,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; pointer-events:none; }
.card .step{ font-family:"Chakra Petch",monospace; font-size:11px; letter-spacing:.2em; color:var(--magenta);
  border:1px solid var(--line); border-radius:4px; padding:2px 8px; display:inline-block; margin-bottom:12px; }
.card h3{ font-size:18px; margin:0 0 10px; }
.card p{ color:var(--muted); font-size:14px; margin:0 0 16px; }

/* ---------- 導入ストーリー（ヒーロー下の縦書き風ブロック） ---------- */
.story{ max-width:760px; margin:0 auto; padding:90px 20px; text-align:center; }
.story p{ margin:0 0 1.6em; font-size:clamp(15px,2vw,19px); line-height:2.1; color:#c7d2f0; }
.story .year{ font-family:"Chakra Petch",monospace; font-size:clamp(20px,4vw,34px); letter-spacing:.15em;
  color:transparent; background:linear-gradient(100deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; background-clip:text; }
.story .sys{ color:var(--cyan); font-weight:700; }

/* ---------- ルールページ（アコーディオン＋表） ---------- */
.rulebook{ max-width:920px; margin:0 auto; padding:40px 20px 80px; }
.rulebook details{ border:1px solid var(--line); border-radius:10px; margin:0 0 12px; background:var(--panel); overflow:hidden; }
.rulebook summary{ cursor:pointer; list-style:none; padding:16px 20px; font-size:17px; font-weight:700;
  display:flex; align-items:center; gap:10px; }
.rulebook summary::-webkit-details-marker{ display:none; }
.rulebook summary::before{ content:"＋"; color:var(--cyan); font-family:monospace; }
.rulebook details[open] summary::before{ content:"－"; }
.rulebook .body{ padding:4px 22px 22px; }
.rulebook .body p{ margin:0 0 10px; color:#cdd7f2; font-size:14.5px; }
.rulebook .body h4{ margin:18px 0 6px; color:var(--cyan); font-size:15px; }
.rulebook table{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:13px; }
.rulebook th,.rulebook td{ border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.rulebook th{ background:rgba(54,230,255,.08); color:var(--cyan); font-weight:600; white-space:nowrap; }
.rulebook .toc{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.rulebook .toc a{ font-size:13px; border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--muted); }
.rulebook .toc a:hover{ color:var(--ink); border-color:var(--cyan); text-decoration:none; }

/* ---------- Coming Soon ---------- */
.soon-wrap{ min-height:60vh; display:grid; place-items:center; text-align:center; padding:40px 20px; }
.soon-wrap .big{ font-family:"Chakra Petch",monospace; letter-spacing:.3em; font-size:clamp(28px,6vw,56px);
  color:transparent; background:linear-gradient(100deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; background-clip:text; }

/* ---------- フッター ---------- */
.footer{ border-top:1px solid var(--line); margin-top:40px; padding:36px 20px; text-align:center; color:var(--muted); font-size:13px; }
.footer .store{ margin:0 0 18px; }

/* ---------- ユーティリティ ---------- */
.hidden{ display:none !important; }
.center{ text-align:center; }
.mt{ margin-top:28px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }