/*
 * トオカエシ サイト共通スタイル
 * デザインシステム「トオカエシ」（tokens.json）のトークン名と値をそのまま CSS 変数にしている。
 * ライト/ダークは OS の外観設定（prefers-color-scheme）に従う。
 * ルート直下の index.html もこのファイルを読む。
 */

/* ---------- トークン ---------- */
:root {
  color-scheme: light dark;

  /* 色（ライト） */
  --player-first: #f2ad1a;
  --player-second: #1a8c66;
  --zone-gray: #c7c7c7;
  --zone-blue: #d6e6f7;
  --zone-red: #facccc;
  --board-frame: #00000099;
  --board-divider: #000000;
  --chip-text: #ffffff;
  --on-player: #000000;
  --flipped-ring: #ff3b30;
  --last-placed-ring: #ffffff;
  --chip-recess: #0000004d;
  --chip-text-shadow: #00000073;
  --chip-shade: #00000038;
  --chip-inlay: #ffffff80;
  --chip-sheen: #ffffff66;
  --chip-ring-keyline: #00000099;
  --backdrop-top: #f5f7fc;
  --backdrop-bottom: #dee6f2;
  --brand-tint: #127857;
  --label: #000000;
  /* サイト独自: ガラスの面。DS の glass プレビュー（背景色に白を重ねる）と同じ作り */
  --glass: color-mix(in srgb, var(--backdrop-top) 60%, #ffffff 40%);
  --glass-line: color-mix(in srgb, var(--label) 14%, transparent);

  /* 余白・角丸・影 */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --radius-board: 6px;
  --radius-panel: 16px;
  --radius-dialog: 28px;
  --radius-pill: 999px;
  --shadow-board: 0 3px 8px #00000040;
  --shadow-hero: 0 8px 12px #00000047;

  /* 書体 */
  --font-sans: -apple-system, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --player-first: #ffbd33;
    --player-second: #38c794;
    --zone-gray: #4d4d4d;
    --zone-blue: #1f3866;
    --zone-red: #471b1f;
    --board-frame: #1a1a1a;
    --board-divider: #ebebeb;
    --chip-text: #141414;
    --flipped-ring: #ff5252;
    --chip-recess: #ffffff38;
    --chip-text-shadow: #00000000;
    --backdrop-top: #1c1f26;
    --backdrop-bottom: #0d0f14;
    --brand-tint: #38c794;
    --label: #ffffff;
    --glass: color-mix(in srgb, var(--backdrop-top) 88%, #ffffff 12%);
    --glass-line: color-mix(in srgb, var(--label) 16%, transparent);
  }
}

/*
 * 文字に使うブランド色。brand-tint はライトでは白文字を載せる塗りのための値（白との比 約 5.5:1）で、
 * 背景の上の文字・リンクにするとコントラストが 4.5:1 に届かない。ライトだけ少し暗くして文字に使う。
 * ダークの brand-tint は暗い背景の上で十分な比があるため、そのまま使う。
 */
:root { --text-tint: color-mix(in srgb, var(--brand-tint) 76%, #000000); }
@media (prefers-color-scheme: dark) { :root { --text-tint: var(--brand-tint); } }

/*
 * 本文の補助色。DS の label-secondary（不透明度 60%）は背景の上で 4.5:1 に届かないため、
 * DS README の指針「重要な説明は label を 70% にして使う」に従い、72% の label を使う。
 */
:root { --text-muted: color-mix(in srgb, var(--label) 72%, transparent); }

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  word-break: auto-phrase; /* 対応ブラウザでは文節の切れ目で改行する */
  color: var(--label);
  background-color: var(--backdrop-bottom);
  /* 背景は縦グラデーションに、上に player-second・下に player-first の光を 22% で差す（DS README） */
  background-image:
    radial-gradient(120% 40% at 50% 0%, color-mix(in srgb, var(--player-second) 22%, transparent), transparent 70%),
    radial-gradient(120% 40% at 50% 100%, color-mix(in srgb, var(--player-first) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--backdrop-top), var(--backdrop-bottom));
  background-repeat: no-repeat;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--text-tint); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .lead { text-wrap: balance; }
h1, h2, h3 { line-height: 1.35; margin: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
.skip-link { position: absolute; left: var(--space-5); top: -100px; z-index: 10; padding: var(--space-3) var(--space-5);
  background: var(--brand-tint); color: var(--chip-text); border-radius: var(--radius-pill); }
.skip-link:focus { top: var(--space-3); }

.wrap { width: 100%; max-width: 960px; margin-inline: auto; padding-inline: var(--space-5); }
.prose-wrap { max-width: 720px; }
@media (min-width: 640px) { .wrap { padding-inline: var(--space-6); } }

/* ---------- ヘッダー・フッター ---------- */
.site-header { position: sticky; top: 0; z-index: 5; background: var(--glass); border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--label);
  font-family: var(--font-rounded); font-weight: 800; font-size: 19px; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
/* 狭い画面ではロゴのみにしてナビを 1 行に収める（名前はスクリーンリーダー向けに残す） */
@media (max-width: 479px) {
  .brand:has(img) .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brand:has(img) { gap: 0; }
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); font-size: 15px;
  color: var(--label); text-decoration: none; border-radius: var(--radius-pill); }
.site-nav a:hover { background: color-mix(in srgb, var(--brand-tint) 14%, transparent); }
.site-nav a[aria-current="page"] { color: var(--text-tint); font-weight: 600; }

.site-footer { margin-top: 64px; padding: var(--space-6) 0 48px; border-top: 1px solid var(--glass-line);
  font-size: 14px; color: var(--text-muted); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { margin: 0 0 var(--space-1); }

/* ---------- 駒（チップ）・盤 ---------- */
.chip {
  --d: 48px;
  --c: var(--player-first);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--d); height: var(--d); border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 20%, var(--chip-sheen), transparent 50%),
    radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.3)),
    var(--c);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c), #000 42%), 0 3px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 3px var(--chip-shade);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-rounded); font-weight: 800; font-size: calc(var(--d) * 0.4); line-height: 1;
  color: var(--chip-text); text-shadow: 0 0.5px 0.5px var(--chip-text-shadow);
}
.chip::before { content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, var(--chip-inlay) 0 8deg, transparent 8deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 70%, #000 71%); mask: radial-gradient(circle, transparent 70%, #000 71%); }
.chip::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--chip-recess); }
.chip > span { position: relative; z-index: 1; }
.chip.first { --c: var(--player-first); }
.chip.second { --c: var(--player-second); }
.chip.flipped { outline: 3px solid var(--flipped-ring); outline-offset: -3px; }
.chip.placed { outline: 3px solid var(--last-placed-ring); outline-offset: -3px; }
.chip.flipped, .chip.placed { box-shadow: 0 2px 0 color-mix(in srgb, var(--c), #000 42%), 0 3px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 3px var(--chip-shade), inset 0 0 0 4px var(--chip-ring-keyline); }
.chip.sm { --d: 28px; }
.chip.sm::before { display: none; }
.chip.sm::after { inset: 14%; }

.board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; padding: 2px;
  width: min(100%, 360px); aspect-ratio: 1; margin-inline: auto; background: var(--board-frame);
  border-radius: var(--radius-board); box-shadow: var(--shadow-board); overflow: hidden; }
.board::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--board-divider); }
.board .cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; }
.board .cell.gray { background: var(--zone-gray); }
.board .cell.blue { background: var(--zone-blue); }
.board .cell.red { background: var(--zone-red); }
.board .cell .chip { --d: 84%; width: 84%; height: auto; aspect-ratio: 1; font-size: clamp(11px, 3.6vw, 17px); }
.board .cell .chip::before { display: none; }
.board .cell .chip::after { inset: 18%; }
.board .hint { width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--board-divider) 14%, transparent);
  border: 2px solid color-mix(in srgb, var(--board-divider) 60%, transparent); }
.board .x { font-size: 18px; line-height: 1; color: var(--label); opacity: 0.7; }

/* ---------- 共通パーツ ---------- */
.eyebrow { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 600; color: var(--text-tint); letter-spacing: 0.04em; }
.panel { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-panel);
  padding: var(--space-5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.muted { color: var(--text-muted); }
.small { font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px;
  padding: 0 var(--space-6); border-radius: var(--radius-pill); font-weight: 600; font-size: 17px; text-decoration: none;
  color: var(--text-tint); background: var(--glass); border: 1px solid var(--glass-line); }
.btn:hover { background: color-mix(in srgb, var(--brand-tint) 12%, var(--glass)); }
.store-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.store-badge img { display: block; height: 52px; width: auto; }
.store-badge:focus-visible { outline-offset: 4px; border-radius: 10px; }

.facts { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.facts li { padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600;
  color: var(--text-tint); background: color-mix(in srgb, var(--brand-tint) 16%, transparent); }

/* ---------- トップ ---------- */
.hero { padding: var(--space-7) 0 var(--space-6); }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hero-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--shadow-hero); margin-bottom: var(--space-5); }
.hero h1 { font-family: var(--font-rounded); font-weight: 800; font-size: 38px; line-height: 1.2; }
.hero h1 small { display: block; margin-top: var(--space-1); font-size: 18px; font-weight: 700; color: var(--text-muted); }
.hero .lead { margin: var(--space-5) 0 var(--space-3); font-size: 20px; font-weight: 700; line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.hero-board figcaption { margin-top: var(--space-4); text-align: center; font-size: 14px; color: var(--text-muted); }
@media (min-width: 760px) {
  .hero { padding: 56px 0 var(--space-7); }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero h1 { font-size: 46px; }
}

.section { padding: var(--space-7) 0 var(--space-3); }
.section > .wrap > h2, .section-title { font-family: var(--font-rounded); font-weight: 800; font-size: 28px; margin-bottom: var(--space-4); }
.section-lead { margin-bottom: var(--space-6); color: var(--text-muted); }

.steps { display: grid; gap: var(--space-4); padding: 0; margin: 0 0 var(--space-6); list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: var(--space-4); align-items: start;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-panel); padding: var(--space-5); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-family: var(--font-rounded); font-weight: 800; background: var(--brand-tint); color: var(--chip-text); }
.steps h3 { font-size: 18px; margin-bottom: var(--space-1); }
.steps p { margin: 0; color: var(--text-muted); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps li { grid-template-columns: 1fr; } }

.demo { display: grid; gap: var(--space-5); }
.demo-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.demo-label { min-width: 4.5em; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.demo-cells { display: flex; gap: var(--space-2); padding: 2px; border-radius: var(--radius-board); background: var(--board-frame); }
.demo-cells > span { display: grid; place-items: center; width: 64px; height: 64px; background: var(--zone-blue); }
.demo-cells .chip { --d: 52px; }
.demo-cells .hint { width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--board-divider) 14%, transparent);
  border: 2px solid color-mix(in srgb, var(--board-divider) 60%, transparent); }
.demo-note { margin: 0; }
.legend-ring { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }

.cards { display: grid; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.cards li { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-panel); padding: var(--space-5); }
.cards h3 { font-size: 18px; margin-bottom: var(--space-2); }
.cards p { margin: 0; color: var(--text-muted); }
@media (min-width: 640px) { .cards.cols-2 { grid-template-columns: repeat(2, 1fr); } .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.piece-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.piece-row .chip { margin-top: 2px; }

.zones { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.zones li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; }
.zones i { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--glass-line); margin-top: 4px; }
.zones .z-gray { background: var(--zone-gray); }
.zones .z-blue { background: var(--zone-blue); }
.zones .z-red { background: var(--zone-red); }
.zones .z-line { height: 0; margin-top: 18px; border: 0; border-top: 2px dashed var(--board-divider); border-radius: 0; }
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; } }

.cta-band { margin-top: var(--space-7); text-align: center; padding: var(--space-7) var(--space-5); }
.cta-band h2 { font-family: var(--font-rounded); font-weight: 800; font-size: 26px; margin-bottom: var(--space-3); }
.cta-band .store-badge { margin-top: var(--space-3); }

/* ---------- サポート・プライバシー（読み物） ---------- */
.page-head { padding: var(--space-7) 0 var(--space-4); }
.page-head h1 { font-family: var(--font-rounded); font-weight: 800; font-size: clamp(24px, 8vw, 32px); }
.page-head p { margin: var(--space-3) 0 0; color: var(--text-muted); }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-pill);
  background: var(--glass); border: 1px solid var(--glass-line); text-decoration: none; font-weight: 600; font-size: 15px; }
.prose h2 { font-size: 22px; font-weight: 700; margin: var(--space-7) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--glass-line); }
.prose h3 { font-size: 17px; margin: var(--space-5) 0 var(--space-2); }
.prose li { margin-bottom: var(--space-2); }
.date { color: var(--text-muted); font-size: 15px; }

.faq { display: grid; gap: var(--space-3); }
.faq details { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-panel); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
  min-height: 52px; padding: var(--space-3) var(--space-5); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; flex: none; color: var(--text-tint); font-weight: 700; }
.faq details[open] summary::after { content: "－"; }
.faq .answer { padding: 0 var(--space-5) var(--space-4); color: var(--label); }
.faq .answer p:last-child { margin-bottom: 0; }

.contact { margin-top: var(--space-4); }
.contact ul { margin-bottom: 0; }

/* 320px 幅の端末でもナビを 1 行に収める（上のナビの定義より後に置く） */
@media (max-width: 360px) {
  .site-header .wrap { gap: var(--space-2); }
  .site-nav { flex-wrap: nowrap; }
  .site-nav a { padding: 0 var(--space-2); font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .cta-band { display: none; } body { background: none; } }