/* スキットル50 公開サイト —— 見た目の土台
 *
 * 色とフォントは **アプリの `app/Skittle50/Theme.swift` と同じトークン**を使う。
 * サイト側で新しい色を発明しない(アプリと並べたときに別物に見えるため)。
 *
 * ダークテーマは持たない。アプリが常に「昼の空」で固定されており、
 * サイトだけ夜にすると同じ製品に見えなくなる。`color-scheme: light` を明示して
 * ブラウザのフォーム部品まで明るい側に固定する。
 */

:root {
  /* Theme.swift の色トークン(そのままの hex) */
  --sky:         #3BB8DE;
  --sky-hi:      #8ADBF0;
  --sky-edge:    #1E7C9C;
  --coral:       #FF5C8A;
  --coral-hi:    #FF9DBB;
  --coral-lo:    #F04175;
  --coral-edge:  #C23A66;
  --sunshine:    #FFB629;
  --sunshine-hi: #FFE27A;
  --sunshine-lo: #F09A0C;
  --sunshine-edge:#C97E00;
  --lime:        #4CBE3E;
  --lime-hi:     #8FE06A;
  --lime-lo:     #379E30;
  --lime-edge:   #2C7E28;
  --cream:       #FFF8EE;
  --cream-hi:    #FFFDF4;
  --cream-lo:    #EBD9B8;
  --ink:         #1E4258;
  --ink-sub:     #7E96A6;
  --slate:       #8AA0AE;
  --slate-hi:    #C9DAE4;
  --slate-edge:  #5E7A8A;
  --hill:        #4CB868;
  /* サイト専用。--ink-sub(#7E96A6)はアプリの暗い地の上で使う色で、
   * クリーム(#FFF8EE)に載せると 2.5:1 しか出ない。本文の補足はこちらを使う */
  --ink-note:    #55707F;
  --hill-hi:     #B8EFC4;
  --hill-lo:     #3FA857;

  /* Web フォントは読み込まない。アプリの同梱フォント(Mochiy Pop One / M PLUS Rounded 1c)は
   * TTF が 3.6MB・5.2MB あり、そのまま配ると重すぎる。Google Fonts から引けば軽いが、
   * 訪問者の IP が第三者に渡る = 「解析も追跡もしない」と書いたポリシーと噛み合わない。
   * したがって**外部リクエストは 0 本**にし、Theme.swift の未登録時と同じ SF Rounded に落とす。
   * サブセット化した Mochiy Pop One を自前配信する案は web/README.md を参照。 */
  --pop: ui-rounded, "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Segoe UI Variable Display", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;

  --shell: 880px;
  --radius: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-hi) 34%, var(--hill-hi) 62%, var(--hill) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 丘。ToyBackdrop の楕円と同じ役割。装飾なので読み上げには出ない */
body::before,
body::after {
  content: "";
  position: fixed;
  bottom: -140px;
  width: 620px;
  height: 300px;
  border-radius: 50%;
  background: var(--hill-lo);
  opacity: .55;
  z-index: -1;
  pointer-events: none;
}
body::before { left: -220px; }
body::after  { right: -240px; height: 260px; }

/* ── 共通の骨 ───────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--sky-edge); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--coral-lo); }
:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--pop); font-weight: 700; line-height: 1.45; text-wrap: balance; }

/* ── ヘッダ ─────────────────────────────── */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 22px 0 6px;
}
.site-head__home {
  font-family: var(--pop);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.site-head__home:hover { color: var(--coral-edge); }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.site-nav a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255,253,244,.82);
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(30,66,88,.18);
}
.site-nav a:hover { background: #fff; color: var(--coral-lo); }
.site-nav a[aria-current="page"] { background: var(--sunshine); color: var(--ink); box-shadow: 0 2px 0 var(--sunshine-edge); }

/* ── ヒーロー ───────────────────────────── */

.hero { padding: 40px 0 8px; text-align: center; }
.hero h1 {
  font-size: clamp(38px, 9vw, 68px);
  margin: 0 0 14px;
  letter-spacing: .02em;
  text-shadow: 0 4px 0 var(--sky-edge), 0 8px 22px rgba(30,66,88,.35);
}
.hero__lede {
  font-size: clamp(17px, 3.4vw, 20px);
  font-weight: 700;
  margin: 0 auto 10px;
  /* 改行は <br> で決めているので、幅は「英語の1行が折り返さない」側に合わせる
   * (30ch だと英語版の2行目が "25." だけ落ちる) */
  max-width: 42ch;
  text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.hero__sub {
  font-size: 14.5px;
  font-weight: 500;
  margin: 0 auto;
  max-width: 46ch;
  text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* 「投げ手 + ピン」の 1 場面。豆助(アプリの ToyBean と同じ設計座標の SVG)が
 * 左でバトンを振り抜き、軌道の先に数字ピンが並ぶ。狭い画面でも縦に折らない
 * ── 投げ手とピンが並んでいること自体がゲームの説明になっているため */
.scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, 1.5vw, 16px);
  margin: 30px 0 26px;
}
.thrower {
  flex: 0 0 auto;
  width: clamp(150px, 40vw, 250px);
  height: auto;
}

/* ピン。画像を持たずに CSS だけで並べる */
.pins {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(6px, 2vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pin {
  position: relative;
  width: clamp(37px, 9vw, 46px);
  height: clamp(72px, 17vw, 96px);
  border-radius: 46% 46% 26% 26% / 34% 34% 18% 18%;
  background: linear-gradient(165deg, var(--cream-hi) 0%, var(--cream) 42%, var(--cream-lo) 100%);
  box-shadow: 0 4px 0 rgba(30,66,88,.22), inset -4px -6px 10px rgba(184,158,110,.35);
}
/* 色帯。ピンごとの色はクラスで与える(CSP を default-src 'self' で通すため、
 * HTML 側にインライン style を書かない) */
.pin--coral { --band: var(--coral); }
.pin--sky   { --band: var(--sky); }
.pin--lime  { --band: var(--lime); }
.pin--sun   { --band: var(--sunshine); }

.pin::before { /* 首のくびれにあたる色帯 */
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 30%;
  height: 13%;
  background: var(--band, var(--coral));
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.14);
}
/* 数字はピンの「腹」(色帯の下)に置く。grid の align-items では狙った位置に
 * 落ちなかったので、絶対配置で明示する */
.pin span {
  position: absolute;
  left: 0; right: 0;
  bottom: 16%;
  text-align: center;
  font-family: var(--pop);
  font-weight: 800;
  font-size: clamp(14px, 3.4vw, 20px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* スコアバー */
.score {
  max-width: 420px;
  margin: 0 auto 34px;
  display: grid;
  gap: 8px;
}
.score__trough {
  height: 22px;
  border-radius: 999px;
  background: var(--sky-edge);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.28);
  overflow: hidden;
}
.score__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sunshine-hi), var(--sunshine) 55%, var(--sunshine-lo));
  box-shadow: inset 0 -3px 0 var(--sunshine-edge);
}
.score__scale {
  display: flex;
  justify-content: center;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
}
.score__scale b { font-size: 18px; color: var(--sunshine-edge); }

/* ── ゲルボタン ─────────────────────────── */

.gels { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 44px; }
.gel {
  display: inline-block;
  font-family: var(--pop);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sunshine-hi), var(--sunshine) 52%, var(--sunshine-lo));
  box-shadow: 0 5px 0 var(--sunshine-edge), 0 8px 16px -6px rgba(30,66,88,.4);
  transition: transform .08s ease, box-shadow .08s ease;
}
.gel:hover { color: var(--ink); }
.gel:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sunshine-edge); }
.gel--sky {
  color: #fff;
  background: linear-gradient(180deg, var(--sky-hi), var(--sky) 52%, var(--sky-edge));
  box-shadow: 0 5px 0 #17627B, 0 8px 16px -6px rgba(30,66,88,.4);
}
.gel--sky:hover { color: #fff; }
.gel--sky:active { box-shadow: 0 1px 0 #17627B; }
.gel[aria-disabled="true"] {
  background: linear-gradient(180deg, var(--slate-hi), var(--slate) 52%, var(--slate-edge));
  box-shadow: 0 5px 0 #4A6373;
  color: #fff;
  cursor: default;
}

/* ── カード ─────────────────────────────── */

.card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 28px 26px;
  margin: 0 0 22px;
  box-shadow: 0 6px 0 rgba(30,66,88,.16), 0 16px 30px -18px rgba(30,66,88,.6);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* ページ見出し(カードの中に置く h1) */
.card__title { font-size: 26px; margin: 0 0 18px; }

.card h2 {
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--ink);
}
.card h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: var(--coral);
  margin-top: 10px;
}
.card h3 { font-size: 16px; margin: 24px 0 6px; }
.card p { margin: 0 0 14px; }

.grid { display: grid; gap: 14px; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: 1fr 1fr; } }

/* ルール・モードの小箱 */
.tile {
  background: var(--cream-hi);
  border: 3px solid var(--cream-lo);
  border-radius: 16px;
  padding: 16px 18px;
}
.tile h3 { font-family: var(--pop); font-weight: 700; font-size: 15.5px; margin: 0 0 6px; color: var(--sky-edge); }
.tile p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink); }
.tile--win h3 { color: var(--lime-lo); }
.tile--burst h3 { color: var(--coral-lo); }
.tile--over h3 { color: var(--slate-edge); }

.lead { font-size: 17px; font-weight: 700; }
.note { font-size: 13.5px; color: var(--ink-note); }
.note--after { margin-top: 16px; }   /* 本文ブロックの直後に置く補足 */
.note--tail { margin-top: 28px; }    /* ページ末尾の更新日 */
.gels--start { justify-content: flex-start; margin: 18px 0 0; }

/* ── 本文(規約・ポリシー) ───────────────── */

.prose h2 { font-size: 20px; margin: 34px 0 10px; }
.prose h2:first-of-type { margin-top: 0; }
.prose h2::after { width: 40px; height: 4px; background: var(--sky); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 1.35em; }
.prose li { margin: 0 0 6px; }
.prose li::marker { color: var(--coral); }
.prose dl { margin: 0 0 16px; }
.prose dt { font-weight: 700; margin-top: 12px; }
.prose dd { margin: 0 0 0 1.35em; color: var(--ink); }

/* 「結論」だけ先に見せる帯 */
/* 白文字は明るい方のライム(#8FE06A)の上で 1.7:1 しか出ないので、地を明るく保って
 * 文字をインクにする。「結論を先に見せる付箋」の見え方はそのまま */
.banner {
  background: linear-gradient(180deg, var(--lime-hi), #6FD24E 100%);
  color: var(--ink);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 0 0 26px;
  box-shadow: inset 0 -4px 0 var(--lime-lo);
}
.banner p { margin: 0; font-weight: 700; font-size: 16.5px; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.banner p + p { margin-top: 8px; font-weight: 400; font-size: 14px; }

/* ── FAQ(JS 無し。details/summary で開閉する) ── */

.faq { display: grid; gap: 10px; margin: 0 0 8px; }
.faq details {
  background: var(--cream-hi);
  border: 3px solid var(--cream-lo);
  border-radius: 16px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px 14px 46px;
  font-weight: 700;
  font-size: 15px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  font-family: var(--pop);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}
.faq details[open] summary::before { content: "−"; background: var(--coral); }
.faq details[open] summary { background: var(--cream); }
.faq__a { padding: 4px 18px 18px; margin: 0; font-size: 14.5px; line-height: 1.85; }
.faq__a p { margin: 0 0 10px; }
.faq__a p:last-child { margin-bottom: 0; }

/* ── 問い合わせ ─────────────────────────── */

.contact {
  /* 白文字を載せるので、明るい方の水色(--sky-hi)は使えない(1.7:1)。
   * 濃い側だけで組んで 5:1 以上を確保する */
  background: linear-gradient(180deg, var(--sky-edge), #175E76);
  color: #fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: inset 0 -5px 0 #11485B, 0 6px 0 rgba(30,66,88,.16);
}
.contact h2 { color: #fff; margin: 0 0 12px; font-size: 20px; }
.contact h2::after { background: var(--sunshine); }
.contact p { margin: 0 0 12px; }
.contact p:last-child { margin-bottom: 0; }
.contact a { color: #fff; font-weight: 700; }
.contact a:hover { color: var(--sunshine-hi); }

/* ── フッタ ─────────────────────────────── */

/* 丘の緑はスクロール位置で明るさが変わるので、白文字だと読めなくなる箇所が出る。
 * クリームの板に載せて地の色を固定する */
.site-foot {
  margin: 40px 0 44px;
  padding: 20px 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink);
  background: rgba(255,248,238,.9);
  border-radius: var(--radius);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 8px; }
.site-foot a { color: var(--sky-edge); font-weight: 700; }
.site-foot a:hover { color: var(--coral-lo); }
.site-foot small { color: var(--ink-note); }

/* ── 404 ────────────────────────────────── */

.lost { text-align: center; padding: 70px 0 40px; }
.lost h1 { font-size: clamp(40px, 12vw, 92px); margin: 0 0 10px; color: #fff; text-shadow: 0 4px 0 var(--sky-edge); }
.lost p { font-weight: 700; margin: 0 0 30px; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); }

/* ── 動きを減らす設定 ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}