/* ============================================================
   PLAYBOX の夜の土台。**ホーム・遊び方・プライバシーの三頁が読む**

   意匠の定義（顔料・寸法・書体・ヘッダー・足元）はここが唯一。
   同じ値を頁の中へ写さないこと（写した瞬間、片方が古くなる）。
   ホームは「この土台 ＋ 自分だけの分」を index.html の <style> に持つ。

   三頁とも**夜で固定**。data-theme も prefers-color-scheme もどこも見ない。
   色はすべて下の :root に集めてあるので、後でまとめて明暗対応に戻すときは
   この一組を二組に分ければ足りる（頁のあちこちに直書きしないこと）。

   ゲーム本体とオートサバイバーは今まで通り明暗対応。あちらには効かない。
   世界の記録の行だけは board.css が描く。あちらは --ink / --ink-2 /
   --ink-3 / --rule / --accent / --panel を読むので、その名前で用意してある
   ============================================================ */
:root{
  color-scheme:dark;

  --navy:#0B1633; --navy-hi:#1B2E6B;
  --blue:#3B6FF6; --blue-lite:#6A8CFF; --violet:#7C5CFF; --violet-btn:#6A5CFF;
  --gold:#FFC53D; --gold-2:#FFA51F; --pink:#FF4D9D; --pink-2:#FF2E86;
  /* 経験値の帯の始まり（緑）と、連続プレイ日数の炎。
     どちらもガラスの板の上で 3:1 を超える明るさを選んである */
  --mint:#3DE0A0; --flame:#FF8A4C;

  --glass:rgba(255,255,255,.06);
  --glass-line:rgba(255,255,255,.12);
  --glass-shadow:0 8px 32px rgba(59,111,246,.30);
  --round:20px;

  /* board.css が読む名前も、この6つで揃える。
     --accent は本文のリンクの色でもある。頁の上端（夜空が明るいところ）の
     ガラスの板に載っても 5.2:1 出る明るさを選んである。暗くしないこと */
  --ink:#FFFFFF; --ink-2:#C6D2EE; --ink-3:#A9B8E0;
  --panel:rgba(255,255,255,.06); --rule:rgba(255,255,255,.12); --accent:#9DB6FF;

  --ja:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --ja-round:"M PLUS Rounded 1c","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --en:"Poppins","Zen Kaku Gothic New",system-ui,sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--navy); color:var(--ink);
  font-family:var(--ja); line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 鍵で辿っている人に、いまどこに居るかを必ず見せる */
:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }

/* ============================================================
   地と装飾 — 濃紺の夜空。光と、漂う四角
   ============================================================ */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sky .grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--navy-hi) 0%, rgba(27,46,107,0) 58%);
}
.sky .glow{ position:absolute; width:64vw; height:64vw; max-width:760px; max-height:760px; }
.sky .glow.a{
  left:-16vw; top:-20vw;
  background:radial-gradient(circle closest-side, rgba(59,111,246,.25), rgba(59,111,246,0));
}
.sky .glow.b{
  right:-14vw; top:-24vw;
  background:radial-gradient(circle closest-side, rgba(124,92,255,.20), rgba(124,92,255,0));
}
/* 散らした小さな四角。色は顔料に従うので「色の見え方」を変えるとここも変わる。
   顔料は settings.js が <html> に付ける（三頁とも読み込むこと。無いと四角が消える）。
   文字の後ろに回り込まないよう、頭は見出しより下、横は本文の外側に置く。
   読み物の二頁は数を6つに減らし、--o も薄くしてある（頁の側で指定する） */
.sky i{
  position:absolute; display:block; border-radius:30%;
  left:var(--x); top:max(120px, var(--y)); width:var(--s); height:var(--s);
  background:var(--c, var(--blue-lite)); opacity:var(--o);
  animation:drift var(--d) ease-in-out var(--delay) infinite alternate;
}
@keyframes drift{
  from{ transform:rotate(var(--r)) translateY(0); }
  to{   transform:rotate(var(--r)) translateY(var(--dy)); }
}
/* 狭い画面では本文が端まで来る。数を半分に減らし、左右の余白の帯へ寄せる */
@media (max-width:720px){
  .sky i:nth-of-type(2n){ display:none; }
  .sky i{ --s:20px; }
  .sky i:nth-of-type(1){ --x:0%;  }
  .sky i:nth-of-type(3){ --x:96%; }
  .sky i:nth-of-type(5){ --x:1%;  }
  .sky i:nth-of-type(7){ --x:95%; }
  .sky i:nth-of-type(9){ --x:0%;  }
  .sky i:nth-of-type(11){ --x:97%; }
}
/* 読み物の二頁（.sky.calm）は、狭くなると本文が端まで来て四角が文字の後ろに
   回り込む。**長文の頁では読みやすさが先**なので、その手前で四角ごと消す
   （光と階調は残るので夜空であることは変わらない） */
@media (max-width:900px){
  .sky.calm i{ display:none; }
}
/* 動きを減らしたい人には漂わせない */
@media (prefers-reduced-motion:reduce){
  .sky i{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* 中身の器。夜空より前に置く。三頁とも同じ幅なので、頁を移っても
   ロゴとナビの位置が動かない */
.shell{
  position:relative; z-index:1;
  width:min(100%, 1160px); margin:0 auto;
  padding:clamp(14px,3vw,24px) clamp(16px,4vw,32px) 64px;
}

/* 塗りつぶしの丸っこいアイコン。合字で出すので中身は名前そのまま。
   読み込みは頁ごとの icon_names=。**そこに無い名前を書くと豆腐が出る** */
.mi{
  font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal;
  font-size:20px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; direction:ltr; flex:none;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  font-variation-settings:'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* ガラスの板。パネルはどれもこの三点セット（塗り・枠・ぼかし）で作る */
.glass{
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:var(--round); box-shadow:var(--glass-shadow);
}

/* ============================================================
   ヘッダー — ロゴと、丸ピルのナビ
   （歯車と顔のチップはホームだけ。二頁はダイアログを持たないので置かない）
   ============================================================ */
.top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:4px 0 clamp(16px,3.4vw,30px);
}
.logo{
  display:flex; align-items:center; gap:9px; margin-right:auto; flex:none;
  font-family:var(--en); font-weight:800; font-size:clamp(18px,2.2vw,22px);
  letter-spacing:.06em; color:#fff; text-decoration:none;
}
/* 新マスコット（ロボット猫）の単純化した印。地の形は currentColor、
   目と口は下地に溶け込ませる打ち抜きなので --navy 固定（ヘッダーは必ず夜空の上） */
.logo-mark{ width:26px; height:26px; flex:none; color:var(--blue-lite); }
.logo-mark path:not(.cut), .logo-mark rect{ fill:currentColor; }
.logo-mark .cut{ fill:var(--navy); stroke:var(--navy); }
.logo:hover .logo-mark{ color:var(--gold); }

/* 名乗りの顔チップ（ホームだけ）を常に PLAYBOX の右に留めるため、
   詰まったらここが縮んで横スクロールする側に回る（logo・chip は flex:none） */
.nav{
  display:flex; align-items:center; gap:4px; padding:5px;
  border-radius:999px; background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  flex:1 1 0%; min-width:0; overflow-x:auto; scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
.pill{
  display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer;
  padding:9px 15px; border-radius:999px; border:none; background:transparent;
  font-family:var(--ja-round); font-weight:800; font-size:13.5px; line-height:1;
  color:var(--ink-3); text-decoration:none;
  transition:color .15s, background-color .15s;
}
.pill .mi{ font-size:19px; }
.pill:hover{ color:#fff; background:rgba(255,255,255,.08); }
.pill.on{
  color:#fff; background:linear-gradient(90deg, var(--blue), var(--blue-lite));
  box-shadow:0 6px 18px rgba(59,111,246,.38);
}
.pill.icon{ padding:9px 11px; }

@media (max-width:720px){
  .top{ gap:10px; }
  .nav{ order:3; width:100%; justify-content:space-between; overflow-x:auto; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .pill{ padding:9px 12px; font-size:12.5px; }
}

/* ============================================================
   足元
   ============================================================ */
.foot{
  display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap;
  margin-top:clamp(30px,5vw,52px); padding-top:18px;
  border-top:1px solid var(--rule); font-size:12px; color:var(--ink-3);
}
.foot .who{ display:flex; align-items:center; gap:8px; margin-right:auto; }
.foot .who .mi{ font-size:20px; color:var(--ink-3); }
/* 指で触れる的は **32px を切らない**。文字の大きさは変えず、
   周りに余白を持たせて的だけ広げる（tools/ui-check.mjs が見張っている） */
.foot a{
  display:inline-flex; align-items:center; min-height:32px; padding:0 6px;
  margin:0 -6px; border-radius:8px;
  color:var(--ink-3); text-decoration:none;
}
.foot a:hover{ color:#fff; }

/* ============================================================
   ここから下は**読み物の三頁だけ**（遊び方・更新情報・プライバシー）。
   ホームには当たらないよう、全部 .page の中に閉じてある。

   長い文章を読む頁なので、飾りより読みやすさを先に置く。
   一行680px・行間1.9・本文14px は据え置き。丸ゴシック（M PLUS Rounded 1c）は
   **67字ぶんしか切り出していない**ので、長文には使わない。
   使うのはナビのピル・h1・.title2.ja・.play の4か所だけで、
   その字は index.html と揃えて text= に入れてある
   ============================================================ */
.page{ max-width:680px; margin:0 auto; }

.page h1{
  font-family:var(--ja-round); font-weight:800;
  font-size:clamp(26px,4.4vw,36px); line-height:1.3; letter-spacing:.01em;
  margin:0 0 8px; text-shadow:0 8px 26px rgba(6,12,32,.55);
}
.page .lede{ margin:0 0 30px; color:var(--ink-3); font-size:13.5px; }

/* 章の小見出し。金の短い棒＋細い罫。長い文書の骨格になるので罫は残す */
.page h2:not(.title2){
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.24em; color:var(--ink-2); font-weight:700;
  margin:38px 0 12px; padding-bottom:9px; border-bottom:1px solid var(--rule);
}
.page h2:not(.title2)::before{
  content:""; flex:none; width:4px; height:1.05em; border-radius:2px;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
}
.page p, .page li{ font-size:14px; }
.page ul{ padding-left:1.3em; }
.page li{ margin-bottom:6px; }
.page a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(157,182,255,.4); }
.page a:hover{ color:#fff; border-bottom-color:#fff; }

/* 表はホームのガラスの板に読み替える。**囲いの div は足さない**ので
   （プライバシーの本文に手を入れないため）、table 自身に丸みと枠を持たせ、
   セルの地は透明のままにして角が欠けないようにしてある */
.page table{
  border-collapse:separate; border-spacing:0; width:100%; font-size:13px; margin:16px 0;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:16px; box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.page th{
  text-align:left; font-weight:700; font-size:10px; letter-spacing:.2em; color:var(--ink-3);
  padding:11px 16px; border-bottom:1px solid var(--glass-line);
}
.page td{
  padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:top;
}
.page tr:last-child td, .page tr:last-child th{ border-bottom:none; }
.page td:first-child{ white-space:nowrap; font-weight:700; color:var(--ink-2); }

/* 念押しの囲い。金の縁のガラス板 */
.page .fill{
  background:rgba(255,197,61,.10); border:1px solid rgba(255,197,61,.28);
  border-left:3px solid var(--gold); padding:14px 18px; margin:18px 0;
  font-size:13px; border-radius:0 16px 16px 0;
}
.page .fill strong{ color:var(--gold); }

/* 遊ぶ釦。ホームの「今すぐ遊ぶ」（.cta）と同じ青の丸ピル */
.page .play{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  padding:14px 22px 14px 18px; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--blue-lite));
  color:#fff; text-decoration:none; border-bottom:none;
  font-family:var(--ja-round); font-weight:800; font-size:15px; line-height:1;
  box-shadow:0 12px 28px rgba(59,111,246,.42);
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.page .play:hover{
  color:#fff; border-bottom:none; transform:translateY(-2px);
  filter:brightness(1.07); box-shadow:0 16px 34px rgba(59,111,246,.5);
}
.page .play .mi{ font-size:22px; }
.page .play .go{ font-size:20px; opacity:.9; }

/* 更新の記録（patch-notes.html）。日付の丸、作品の名、印つきの箇条書き。
   **章の小見出し（金の棒）とは別の骨格**にしてある — こちらは日付が主役 */
.page .note{ margin:0 0 34px; }
.page h2.noteday{
  display:flex; align-items:center; gap:10px;
  margin:30px 0 12px; padding-bottom:0; border-bottom:none;
  font-size:12px; letter-spacing:.06em;
}
.page h2.noteday::before{ content:none; }
.page .ver{
  display:inline-flex; align-items:center; min-height:28px; padding:0 14px;
  border-radius:999px; font-family:var(--ja-round); font-weight:800;
  font-size:12.5px; letter-spacing:.02em; line-height:1;
  color:#2A1A00; background:linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.page .notefor{
  margin:14px 0 7px; font-size:11px; font-weight:700;
  letter-spacing:.18em; color:var(--ink-3);
}
.page ul.notelist{
  list-style:none; padding:14px 16px; margin:0 0 6px;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:16px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.page ul.notelist li{
  margin:0; padding:9px 0; font-size:13.5px; line-height:1.85;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.page ul.notelist li:first-child{ padding-top:0; }
.page ul.notelist li:last-child{ padding-bottom:0; border-bottom:none; }
/* 印。**色だけで区別しない** — 文字でも「あたらしい／なおした／ととのえた」と読める */
.page .tag{
  display:inline-block; margin-right:9px; padding:3px 9px;
  border-radius:999px; font-size:10.5px; font-weight:700; line-height:1.5;
  letter-spacing:.08em; white-space:nowrap; vertical-align:.08em;
}
.page .tag.new{  color:#001A2A; background:var(--mint); }
.page .tag.fix{  color:#2A0A1B; background:var(--pink); }
.page .tag.tune{ color:#2A1A00; background:var(--gold); }

/* 遊び方の冒頭の飛び先。小さな枠のピル */
.page .jump{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
.page .jump a{
  padding:7px 14px; border-radius:999px; font-size:12px; line-height:1.6;
  border:1px solid var(--rule); border-bottom:1px solid var(--rule);
  color:var(--ink-2); background:var(--glass); text-decoration:none;
  transition:color .15s, border-color .15s;
}
.page .jump a:hover{ color:#fff; border-color:#fff; }

/* 作品ごとの大見出し。英字は Poppins、日本語は丸ゴシック（.ja）。
   金の点を頭に置いて、ホームの章見出し（金のアイコン）と揃える */
.page .title2{
  position:relative;
  font-family:var(--en); font-weight:800;
  font-size:clamp(19px,3.6vw,24px); line-height:1.35; letter-spacing:.05em;
  color:var(--ink);
  margin:66px 0 8px; padding-top:28px; border-top:2px solid var(--rule);
  scroll-margin-top:20px;
}
.page .title2::before{
  content:""; position:absolute; left:0; top:-5px; width:44px; height:8px;
  border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--gold-2));
}
.page .title2:first-of-type{ margin-top:36px; }
/* 日本語の大見出しは丸ゴシックで。字間は英字より詰める */
.page .title2.ja{
  font-family:var(--ja-round); font-size:clamp(18px,3.4vw,22px); letter-spacing:.08em;
}