/* ============================================================
   ハクスラスロット / Hakusura Slot — プライバシーポリシー / デザインシステム
   方向: 夜のギルド×ドット絵 / ゲーム内 UI(UIKit.cs)の配色をそのまま使う / アクセント1色(Gold)
   色の出典: HakusuraSlot/Assets/Scripts/Game/UI/UIKit.cs
     Bg 0x1B1A2E / Panel 0x2A2840 / PanelLight 0x3A3758 / PanelDark 0x14131F
     Gold 0xF5C542 / TextMain 0xF0EEF8 / TextSub 0xA8A6C0 / SheetEdge 0x7A74B4
   すべての色・余白・角はトークン経由。マジックナンバー禁止。
   ============================================================ */

/* 見出し用のドットフォント(DotGothic16・SIL OFL 1.1・fonts/OFL.txt)。
   本文は読みやすさのためシステムフォント。woff2 はこの2ページの見出しで使う字＋ASCII＋かなだけに
   絞ったサブセット。見出しに新しい漢字を足したら作り直す(無い字はシステムフォントで出る)。 */
@font-face {
  font-family: "DotGothic16";
  src: url("fonts/DotGothic16-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- アクセント(ブランド): Gold = ゲーム内の通貨・上納金の色 --- */
  --accent:        #F5C542;   /* リンク・番号チップ. on --surface ≈ 8.8:1 / on --bg ≈ 10.5:1 / on --well ≈ 11.3:1 */
  --accent-shadow: #876C24;   /* チップの厚み(ゲームのボタンと同じ「色×0.55」の影)。装飾のみ */
  --on-accent:     #1B1A2E;   /* 番号チップの数字. on --accent ≈ 10.5:1 */

  /* --- 面(ゲームの UIKit そのまま) --- */
  --bg:       #1B1A2E;   /* UIKit.Bg      ページの地(夜空) */
  --surface:  #2A2840;   /* UIKit.Panel   本文カード */
  --raised:   #3A3758;   /* UIKit.PanelLight 言語切替の選択中 */
  --well:     #14131F;   /* UIKit.PanelDark  ヘッダーの帯・ノート・お問い合わせ(一段沈んだ面) */
  --edge:     #7A74B4;   /* UIKit.SheetEdge  カードのドット枠。装飾(非テキスト). on --bg ≈ 4.0:1 */
  --separator: rgba(168, 166, 192, 0.18);   /* 1px 区切り(装飾) */

  /* --- テキスト(コントラスト比はコメント。載る背景を明記) --- */
  --text:   #F0EEF8;   /* UIKit.TextMain 見出し・強調. on --surface ≈ 12.4:1 / on --bg ≈ 14.8:1 / on --well ≈ 16.0:1 / on --raised ≈ 9.8:1 */
  --text-2: #A8A6C0;   /* UIKit.TextSub  本文・補助. on --surface ≈ 6.0:1 / on --bg ≈ 7.2:1 / on --well ≈ 7.8:1 / on --raised ≈ 4.8:1 */

  /* --- ドットの単位(ゲームの 12px スプライトの角の段を Web に写す) --- */
  --px: 3px;

  /* --- 余白(4の倍数スケール) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* --- フォント --- */
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
          -apple-system, "SF Pro JP", "Yu Gothic", sans-serif;
  --pixel: "DotGothic16", var(--sans);

  --maxw: 720px;   /* 本文の行長: 全角 ≈ 39 字 / 欧文 ≈ 75ch */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
a:hover { color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ドット絵の面: 角を1段欠いた枠(ゲームの UIKit.Rounded と同じ考え方)。box-shadow の上下左右だけで描く */
.pixel-frame {
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--edge),
    0 var(--px) 0 0 var(--edge),
    calc(var(--px) * -1) 0 0 0 var(--edge),
    var(--px) 0 0 0 var(--edge);
}

/* ============================================================
   ヘッダー(一段沈んだ帯＋ドットの星。宣伝コピーは置かない)
   ============================================================ */
.hero {
  position: relative;
  background-color: var(--well);
  padding: var(--s-6) var(--s-5) calc(var(--s-8) + var(--s-6));
}
/* 夜空のドットの星(四角い 3px の点。装飾)。本文の列(--maxw)の外の左右の余白にだけ置く。
   余白が狭い幅では文字に重なるので出さない(1024px 以上だけ) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  opacity: 0.55;
  background:
    linear-gradient(var(--text-2), var(--text-2)) 4% 20% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 11% 58% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) 7% 84% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) 14% 34% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) 88% 16% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) 95% 46% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 91% 76% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) 86% 62% / var(--px) var(--px) no-repeat;
}
@media (min-width: 1024px) {
  .hero::before { display: block; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* 言語切替 */
.lang-switch {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
  font-size: 14px;
  font-weight: 600;
}
.lang-switch a {
  color: var(--text-2);
  text-decoration: none;
  padding: 0 var(--s-3);
  min-height: 44px;   /* タップ領域 */
  display: inline-flex;
  align-items: center;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="page"] {
  color: var(--text);
  background: var(--raised);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--pixel);
  font-size: 16px;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.coin {
  width: 24px;
  height: 24px;
  flex: none;
  shape-rendering: crispEdges;
}
.coin__face  { fill: var(--accent); }
.coin__rim   { fill: var(--accent-shadow); }
.coin__shine { fill: var(--text); }

.hero h1 {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 0;   /* ドットフォントは字間を詰めない(ドットが接して潰れる) */
  color: var(--text);
}
.hero .meta {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: 14px;
  color: var(--text-2);
}

/* ============================================================
   本文(ヘッダーの帯に下から重なるシート)
   ============================================================ */
/* カードの外枠をヘッダーの文字の左端にそろえる(左右の余白ぶん広げる) */
.container {
  max-width: calc(var(--maxw) + var(--s-5) * 2);
  margin: calc(var(--s-8) * -1) auto 0;
  padding: 0 var(--s-5) var(--s-8);
  position: relative;
  z-index: 2;
}

.content-card {
  background: var(--surface);
  padding: var(--s-7) clamp(var(--s-5), 5vw, var(--s-7));
}

.intro {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-2);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--separator);
}

.section { padding-top: var(--s-7); }

.section h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: var(--s-4);
}
/* 番号チップ: ゲームの「厚みのあるボタン」(面＋下に色×0.55 の影) */
.section-number {
  flex: none;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--s-2);
  background: var(--accent);
  color: var(--on-accent);   /* on --accent ≈ 10.5:1 */
  box-shadow: 0 var(--px) 0 0 var(--accent-shadow);
  font-family: var(--pixel);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-2px);
  font-feature-settings: "tnum" 1;
}

.section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: var(--s-5) 0 var(--s-2);
}

.section p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}
.section p strong,
.section li strong { color: var(--text); font-weight: 700; }

.section ul {
  list-style: none;
  margin: var(--s-2) 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.section li {
  position: relative;
  padding-left: var(--s-5);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-2);
}
/* 箇条の印: 金の四角いドット */
.section li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* 補足ノート(一段沈んだ面＋金の縦線) */
.note {
  margin: var(--s-4) 0 var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--well);
  border-left: var(--px) solid var(--accent);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-2);   /* on --well ≈ 7.8:1 */
}

/* お問い合わせカード */
.contact-card {
  margin-top: var(--s-7);
  background: var(--well);
  padding: var(--s-6);
}
.section.contact-card { padding-top: var(--s-6); }
.contact-card h2 { margin-bottom: var(--s-5); }
.contact-row {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: 15px;
}
.contact-row + .contact-row { border-top: 1px solid var(--separator); }
.contact-label {
  flex: none;
  width: 96px;
  color: var(--text-2);   /* on --well ≈ 7.8:1 */
  font-weight: 600;
}
.contact-value { color: var(--text); line-height: 1.7; }

/* ============================================================
   フッター
   ============================================================ */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-8);
  text-align: center;
}
.footer .back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.footer .links {
  margin-top: var(--s-4);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-size: 14px;
}
.footer .links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* タップ領域 */
}
.footer .copy {
  margin-top: var(--s-5);
  font-size: 13px;
  color: var(--text-2);   /* on --bg ≈ 7.2:1 */
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: var(--s-5) var(--s-4) calc(var(--s-8) + var(--s-5)); }
  .lang-switch { margin-bottom: var(--s-6); }
  .hero h1 { font-size: 32px; }
  .container { padding: 0 var(--s-4) var(--s-7); }
  .content-card { padding: var(--s-6) var(--s-4); }
  .section { padding-top: var(--s-6); }
  .section h2 { font-size: 19px; }
  .note { padding: var(--s-3) var(--s-4); }
  .contact-card { padding: var(--s-5) var(--s-4); }
  .contact-row { flex-direction: column; gap: var(--s-1); }
  .contact-label { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}