/* あそべる診断ラボ 共通スタイル */
:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --text: #2b2b35;
  --sub: #6f6f7d;
  --primary: #ff6b6b;
  --primary-dark: #e85555;
  --accent: #ffd166;
  --blue: #4ecdc4;
  --line: #06c755;
  --x: #0f1419;
  --fb: #1877f2;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(43, 43, 53, 0.08);
}

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

/* スクロールバーの有無で中央寄せ(.container)が左右にズレないよう常に溝を予約。
   ＝ページ間でヘッダー/コンテンツの位置感が一定になる（長い一覧と短いコンテンツで揃う） */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

a { color: var(--primary-dark); }

.container { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* ヘッダー（追従） */
.site-header {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff9e7d 100%);
  padding: 10px 0;
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 90;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.hdr-side { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.site-logo {
  color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-logo span { font-size: 1.3rem; margin-right: 6px; }
.nav-btn {
  background: rgba(255,255,255,0.18); border: none; color: #fff; font-size: 1.05rem;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-family: inherit;
}
.nav-btn:hover { background: rgba(255,255,255,0.3); }

/* カテゴリドロワー（スライドイン） */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(260px, 80vw); z-index: 100;
  background: #fff; box-shadow: 4px 0 24px rgba(0,0,0,0.18); padding: 70px 14px 20px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(-105%); transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute; top: 14px; right: 12px;
  background: #ece8e1; color: var(--sub);
}
/* ブランドアイコン（site-logo内） */
.logo-icon { width: 26px; height: 26px; margin-right: 8px; vertical-align: -6px; border-radius: 7px; }
.drawer-link {
  display: block; text-decoration: none; color: var(--text); font-weight: 700;
  padding: 13px 14px; border-radius: 10px; font-size: 0.95rem;
}
.drawer-link:hover { background: #fff3f0; color: var(--primary-dark); }
/* 運営者情報・プライバシーポリシーはドロワー最下部に（margin-top:autoで押し下げ） */
.drawer-sep { height: 1px; background: #ece8e1; margin: 10px 8px 2px; margin-top: auto; }
.drawer-link--legal { font-size: 0.85rem; color: var(--sub); font-weight: 600; padding: 10px 14px; }
.drawer-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 95;
  opacity: 0; transition: opacity 0.22s ease;
}
.drawer-bg.show { opacity: 1; }
.search-none { text-align: center; color: var(--sub); padding: 28px 0; font-weight: 700; }

/* 検索オーバーレイ */
.search-overlay {
  position: fixed; inset: 0; background: rgba(20,18,28,0.55); z-index: 110;
  display: flex; justify-content: center; align-items: flex-start; padding: 60px 14px;
}
/* display:flex が hidden属性（UAのdisplay:none）より強いため明示的に消す */
.search-overlay[hidden] { display: none; }
.search-box {
  background: var(--bg); border-radius: var(--radius); width: 100%; max-width: 760px;
  max-height: 80vh; overflow-y: auto; padding: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.3);
}
.search-row { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row input {
  flex: 1; font-family: inherit; font-size: 1rem; padding: 11px 16px;
  border: 2px solid var(--primary); border-radius: 999px; outline: none;
}
.search-row .nav-btn { background: #ece8e1; color: var(--sub); flex-shrink: 0; }

/* セクションの「すべて見る」リンク（ピルボタンで目立たせる） */
.section-title { justify-content: space-between; }
.more-link {
  font-size: 0.8rem; font-weight: 800; text-decoration: none; color: #fff;
  background: var(--primary); border-radius: 999px; padding: 7px 16px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.35);
  transition: transform 0.12s ease, opacity 0.15s;
}
.more-link:hover { transform: translateY(-1px); opacity: 0.92; }

/* カテゴリチップ（トップ最上部のナビ。ヒーロー文言の代替）
   必ず1行: 折り返さず、収まらない幅では横スクロール。
   スマホで「横にもっとある」ことが分かるよう、細いスクロールバーを真下に常時表示（2026-07-18オーナー指示）。
   first/lastのmargin:autoで「収まる時は中央寄せ・あふれる時は端から自然スクロール」を両立 */
.cat-chips {
  display: flex; flex-wrap: nowrap; gap: 10px; padding: 26px 0 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #e6c5a8 transparent;
}
.cat-chips::-webkit-scrollbar { display: block; height: 5px; }
.cat-chips::-webkit-scrollbar-track { background: transparent; }
.cat-chips::-webkit-scrollbar-thumb { background: #e6c5a8; border-radius: 3px; }
.cat-chip {
  flex-shrink: 0; text-decoration: none; font-weight: 800; font-size: 0.95rem; color: var(--text);
  background: var(--card); border: 2px solid #f3d9c8; border-radius: 999px; padding: 10px 20px;
  box-shadow: var(--shadow); transition: transform 0.12s ease, border-color 0.12s, color 0.12s;
}
.cat-chip:first-child { margin-left: auto; }
.cat-chip:last-child { margin-right: auto; }
.cat-chip:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary-dark); }
@media (max-width: 480px) {
  .cat-chip { font-size: 0.85rem; padding: 8px 14px; }
}

/* スクリーンリーダー専用（視覚的に非表示のh1等） */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ヒーロー */
.hero { text-align: center; padding: 44px 16px 28px; }
.hero h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.hero p { color: var(--sub); font-size: 0.95rem; }

/* セクション */
.section-title {
  font-size: 1.15rem; font-weight: 800; margin: 36px 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ""; flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); }

/* カードグリッド。全ページ同じ.container(720px)内＝ヘッダー/プレイ画面と幅が一致。
   レスポンシブ＝最大3列、狭くなると2列（720px内でminmax(210)→3列、≤600で2列固定で1列に落とさない）。
   サムネはフルブリードで大きく、説明文(<p>)は廃止（将来「◯万人が挑戦」等を出す時はcard-body内に追加）。 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.content-card {
  display: block;   /* flexにすると子h3がblockifyされ-webkit-box(line-clamp)が壊れるためblock。行揃えはグリッドstretchが担う */
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); text-decoration: none; color: var(--text);
  border: 2px solid transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .content-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
}
@media (hover: hover) {
  .content-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(43,43,53,0.14); border-color: var(--accent); }
}
.content-card:focus-visible { box-shadow: 0 8px 24px rgba(43,43,53,0.14); border-color: var(--accent); outline: 3px solid var(--text); outline-offset: 2px; }
.content-card:active { transform: scale(.98); }
/* サムネと絵文字フォールバックは同じ16:9ボックス＝行の高さが揃う */
.content-card .card-thumb {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #f3efe8;
}
.content-card .card-emoji {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1;
  background: linear-gradient(135deg, #fff4ec, #ffffff);
}
/* テキスト領域（サムネはフルブリードなのでpaddingはここで持つ） */
.content-card .card-body { padding: 10px 14px 14px; }
/* タイトル：2行で省略。padding を持たないので max-height=2行(2.8em)が厳密＝
   -webkit-line-clamp 非対応環境でも3行目が物理的に出ない（実ブラウザは…付き、非対応は行境界でクリーン切り） */
.content-card h3 {
  font-size: 1rem; line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; max-height: 2.9em;  /* =2行＋わずかな余裕（非webkit経路で2行目が切れないよう） */
  word-break: break-word;  /* 独の長複合語対策。CJKは既定で文字折返し */
}
/* シリーズ一覧カードの件数バッジ（タイトル下の小さなメタ。説明文ではない） */
.content-card .card-count { margin: 4px 0 0; font-size: .8rem; font-weight: 600; color: #8a857d; }
/* スマホは2列（1画面に多く見せて回遊性UP）。サムネは大きいまま */
@media (max-width: 600px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .content-card .card-body { padding: 8px 10px 10px; }
  .content-card .card-emoji { font-size: clamp(2rem, 8vw, 2.6rem); }
  .content-card h3 { font-size: .86rem; }
  .content-card .card-count { font-size: .72rem; }
}

/* メインパネル（診断・クイズ画面） */
.panel {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px 22px; margin: 24px 0; text-align: center;
}
.panel .big-emoji { font-size: 3.4rem; line-height: 1.2; }
.panel h1, .panel h2 { font-size: 1.3rem; margin: 12px 0 8px; }
.panel .desc { color: var(--sub); font-size: 0.92rem; margin-bottom: 16px; }

/* ボタン */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  padding: 13px 30px; border-radius: 999px; transition: transform 0.1s ease, opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #ff9e7d); color: #fff; box-shadow: 0 4px 12px rgba(255,107,107,0.4); }
.btn-ghost { background: transparent; color: var(--sub); border: 2px solid #e3e0da; }
.btn-block { display: block; width: 100%; margin: 10px 0; }

/* 選択肢 */
.choice-btn {
  display: block; width: 100%; margin: 10px 0; padding: 14px 18px;
  background: var(--bg); border: 2px solid #ece8e1; border-radius: 12px;
  font-family: inherit; font-size: 0.98rem; font-weight: 600; color: var(--text);
  cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s;
}
/* hoverは「ホバーできる端末」限定。タッチ端末では:hoverがタップ後も
   次のタップまで残留し（sticky hover）、連打時に「選択されたのに進まない」
   ように見える赤ボーダーの原因になる */
@media (hover: hover) {
  .choice-btn:hover:not(:disabled) { border-color: var(--primary); background: #fff3f0; }
}
/* 回答後: タップ反応ごと消し（pointer-events）、正解/不正解以外はハッキリ沈ませる */
.choice-btn:disabled { cursor: default; pointer-events: none; }
.choice-btn:disabled:not(.correct):not(.wrong) { opacity: 0.4; }
.choice-btn.correct { border-color: #2dbd6e; background: #e9f9f0; box-shadow: 0 0 0 1.5px #2dbd6e; }
.choice-btn.wrong { border-color: var(--primary); background: #ffecec; }

/* プレイ中の小タイトル（スタート画面廃止に伴いプレイ画面上部に常駐） */
.play-title {
  text-align: center; font-weight: 800; font-size: 0.92rem; color: var(--sub);
  margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 進捗バー */
.progress-wrap { background: #ece8e1; border-radius: 999px; height: 10px; margin: 14px 0 4px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--accent)); transition: width 0.25s ease; width: 0; }
.progress-label { font-size: 0.8rem; color: var(--sub); text-align: right; }

/* クイズ解説 */
.explanation {
  margin-top: 14px; padding: 14px; border-radius: 12px; background: #fffbe9;
  border: 1px solid #f2e3a8; font-size: 0.9rem; text-align: left;
}
.judge { font-size: 1.5rem; font-weight: 800; margin-top: 10px; }
.judge.ok { color: #2dbd6e; }
.judge.ng { color: var(--primary-dark); }

/* 結果カード */
.result-card {
  border: 3px solid var(--accent); border-radius: var(--radius);
  padding: 24px 18px; margin: 18px 0; background: linear-gradient(180deg, #fffdf5, #fff);
}
.result-card .result-label { font-size: 0.85rem; color: var(--sub); }
.result-card .result-name { font-size: 1.7rem; font-weight: 800; margin: 4px 0; letter-spacing: 0.02em; }
.result-card .result-emoji { font-size: 4rem; line-height: 1.3; }
.result-card .result-icon { width: 96px; height: 96px; object-fit: contain; }
/* 柄付きカード（applyResultStyle適用時）: 絵文字/アイコンを柄バンドに重なる白丸バッジにする。
   バッジはバンド直下に並べ替え（ラベル文字との重なり防止） */
.result-card.styled { display: flex; flex-direction: column; }
.result-card.styled .result-style-band { order: -2; }
.result-card.styled .result-emoji,
.result-card.styled .result-icon { order: -1; }
.result-card.styled .result-emoji,
.result-card.styled .result-icon {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; margin: -52px auto 8px; font-size: 3rem; line-height: 1;
  background: #fff; border-radius: 50%; border: 3px solid var(--accent);
  box-shadow: 0 4px 14px rgba(43, 43, 53, 0.14);
}
.result-card.styled .result-icon { padding: 10px; }
.result-card.styled .result-name { font-size: 1.85rem; }
.result-card .result-text { text-align: left; font-size: 0.95rem; margin-top: 12px; }
.result-card .result-advice {
  text-align: left; font-size: 0.9rem; margin-top: 12px; padding: 12px;
  background: #f0fbfa; border-radius: 10px; border: 1px solid #c9ece9;
}
.result-card .result-compatible { margin-top: 10px; font-size: 0.9rem; font-weight: 700; }

/* ランキング */
.ranking-list { list-style: none; text-align: left; margin: 16px 0; }
.ranking-list li {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px dashed #ece8e1; font-weight: 600;
}
.ranking-list .rank-no { font-weight: 800; color: var(--sub); width: 2.6em; flex-shrink: 0; }
.ranking-list li:nth-child(1) { background: #fff8e0; border-radius: 10px; font-size: 1.1rem; }
.ranking-list li:nth-child(2) { background: #f4f4f6; border-radius: 10px; }
.ranking-list li:nth-child(3) { background: #fdf0e7; border-radius: 10px; }

/* VS画面（ソート） */
.vs-wrap { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.vs-item {
  flex: 1; background: var(--bg); border: 3px solid #ece8e1; border-radius: var(--radius);
  padding: 26px 8px; cursor: pointer; font-family: inherit; transition: border-color 0.12s, transform 0.1s;
}
.vs-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.vs-item .vs-emoji { font-size: 2.6rem; display: block; }
.vs-item .vs-name { font-weight: 800; font-size: 1.05rem; margin-top: 6px; display: block; }
.vs-label { font-weight: 800; color: var(--primary); font-size: 1.2rem; }

/* シェアボタン */
.share-box { margin: 22px 0 6px; }
.share-box .share-title { font-size: 0.9rem; font-weight: 700; color: var(--sub); margin-bottom: 10px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: #fff; font-weight: 700; font-size: 0.9rem; padding: 10px 18px;
  border-radius: 999px; border: none; cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.share-btn:hover { opacity: 0.85; }
.share-x { background: var(--x); }
.share-line { background: var(--line); }
.share-fb { background: var(--fb); }
.share-copy { background: var(--sub); }
/* Threads: Xと同系ブランド色のため「白地に黒枠」の反転デザインで見分けやすく */
.share-threads { background: #fff; color: #1c1c1c; border: 2px solid #1c1c1c; padding: 8px 16px; }
.share-threads:hover { opacity: 1; background: #1c1c1c; color: #fff; }

/* 広告枠（--pc/--spはデバイス別出し分け。renderAdsは非表示スロットに広告を入れない） */
.ad-slot { margin: 26px auto; text-align: center; }
@media (max-width: 768px) { .ad-slot--pc { display: none; } }
@media (min-width: 769px) { .ad-slot--sp { display: none; } }
.ad-placeholder {
  border: 2px dashed #d8d4cc; border-radius: 12px; padding: 28px 10px;
  color: #b5b1a8; font-size: 0.8rem; background: #fdfcfa;
}

/* お絵描き */
.oekaki-canvas-wrap { display: flex; justify-content: center; margin: 14px 0; }
#oekaki-canvas {
  border: 3px solid #ece8e1; border-radius: 12px; background: #fff;
  touch-action: none; max-width: 100%; cursor: crosshair;
}
.palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.palette .color-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 2px #d8d4cc; cursor: pointer; padding: 0;
}
.palette .color-btn.active { box-shadow: 0 0 0 3px var(--primary); transform: scale(1.12); }
.brush-row { display: flex; gap: 8px; justify-content: center; margin: 8px 0 14px; flex-wrap: wrap; }
.brush-btn {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; padding: 7px 14px;
  border-radius: 999px; border: 2px solid #ece8e1; background: #fff; cursor: pointer;
}
.brush-btn.active { border-color: var(--primary); color: var(--primary-dark); }
.theme-banner {
  background: #fff3da; border: 2px solid var(--accent); border-radius: 12px;
  padding: 10px 14px; font-weight: 700; margin: 12px 0;
}
.result-drawing { max-width: 220px; border-radius: 12px; border: 3px solid var(--accent); margin: 10px auto; display: block; }

/* スコアメーター */
.score-meter { margin: 14px auto; max-width: 320px; }
.score-meter .score-num { font-size: 2.4rem; font-weight: 800; color: var(--primary-dark); }

/* レコメンド */
.rec-box { margin: 26px 0 6px; text-align: center; }
.rec-title { font-size: 0.9rem; font-weight: 700; color: var(--sub); margin-bottom: 12px; }
/* レコメンド枠も同じフルブリードのカード。やや小さめのminmaxでスマホ2列・PCは多列 */
.rec-grid { text-align: left; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
/* 極狭端末(≤320px等)でもレコメンドが1列に落ちないよう2列を保証（card-gridと揃える） */
@media (max-width: 600px) { .rec-grid { grid-template-columns: repeat(2, 1fr); } }

/* タグチップ（トップページ絞り込み） */
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 10px; }
.tag-chip {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  padding: 6px 16px; border-radius: 999px; border: 2px solid #ece8e1; background: #fff; color: var(--sub);
  transition: border-color 0.12s, color 0.12s;
}
.tag-chip:hover { border-color: var(--primary); }
.tag-chip.active { border-color: var(--primary); background: #fff3f0; color: var(--primary-dark); }

/* シリーズ導線（50州/47都道府県等）: 正準順の全件チップ＋現在地ハイライト。
   コンテンツページではレコメンドの上、シリーズハブでは一覧上部に出る */
.series-box { margin: 22px 0 6px; text-align: center; }
.series-box .more-link { display: inline-block; margin-top: 12px; }
.series-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 10px; }
.series-chip {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: none;
  padding: 6px 14px; border-radius: 999px; border: 2px solid #ece8e1; background: #fff; color: var(--sub);
  transition: border-color 0.12s, color 0.12s;
}
@media (hover: hover) {
  .series-chip:hover { border-color: var(--primary); color: var(--primary-dark); }
}
.series-chip.current {
  border-color: var(--primary); background: var(--primary); color: #fff; cursor: default;
}

/* 言語切り替え */
.lang-switch { color: #fff; text-decoration: none; font-weight: 700; font-size: 0.85rem;
  border: 2px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 4px 14px; }
.lang-switch:hover { background: rgba(255,255,255,0.15); }
.lang-wrap {
  display: inline-flex; align-items: center; gap: 6px; color: #fff;
  background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.6);
  border-radius: 999px; padding: 4px 12px; font-size: 0.95rem;
}
.lang-select {
  font-family: inherit; font-weight: 700; font-size: 0.85rem; color: #fff;
  background: transparent; border: none; cursor: pointer; appearance: auto;
}
.lang-select option { color: var(--text); }

/* 結果カードの柄バンド（IP風デザイン演出） */
.result-style-band { height: 38px; border-radius: 10px; margin-bottom: 14px; }

/* メーカー・運勢 */
.maker-input {
  font-family: inherit; font-size: 1.05rem; text-align: center; width: 100%; max-width: 320px;
  padding: 12px 16px; border: 2px solid #ece8e1; border-radius: 12px; margin: 12px 0;
}
.maker-input:focus { outline: none; border-color: var(--primary); }
/* ステータス窓風のスロット表（メーカー・運勢の結果欄） */
.slot-list { list-style: none; text-align: left; margin: 14px 0; }
.slot-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px dashed #ece8e1;
}
.slot-list li:nth-child(odd) { background: rgba(250, 247, 242, 0.7); border-radius: 8px; }
.slot-list .slot-label {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 800; color: var(--sub);
  background: #fff; border: 1.5px solid #ece8e1; border-radius: 999px; padding: 3px 12px;
}
.slot-list .slot-value { font-weight: 800; text-align: right; font-size: 1.02rem; }
.fortune-stars { letter-spacing: 2px; }
.fortune-level { font-size: 2.6rem; font-weight: 800; margin: 6px 0; }

/* アフィリエイト枠（PR表記必須） */
.affiliate-box {
  position: relative; background: #fffdf5; border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 20px 16px 16px; margin: 16px 0; text-align: center;
}
.pr-badge {
  position: absolute; top: -11px; left: 14px; background: var(--sub); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; padding: 2px 12px; border-radius: 999px;
}
.aff-text { font-size: 0.9rem; margin-bottom: 12px; }
.aff-btn { font-size: 0.92rem; padding: 11px 26px; }

/* チェックリスト */
.check-list { list-style: none; text-align: left; margin: 14px 0; }
.check-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: 7px 0;
  background: var(--bg); border: 2px solid #ece8e1; border-radius: 12px;
  cursor: pointer; font-weight: 600; font-size: 0.95rem; user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.check-item:hover { border-color: var(--primary); }
.check-item.on { background: #e9f9f0; border-color: #2dbd6e; }
.check-item .check-mark { font-size: 1.1rem; flex-shrink: 0; }

/* 10秒ストップ */
/* 数字は等幅・高さ固定。フェードしてもヒントが出てもレイアウトは1pxも動かさない */
.stop-display {
  font-size: 3.4rem; font-weight: 800; font-variant-numeric: tabular-nums;
  margin: 14px 0 0; letter-spacing: 0.02em; height: 4.4rem; line-height: 4.4rem;
}
.stop-hint { height: 1.6rem; line-height: 1.6rem; color: var(--sub); font-weight: 700; font-size: 0.9rem; opacity: 0; margin-bottom: 10px; }
.stop-best-line { min-height: 1.3em; }
.stop-go { min-width: 240px; font-size: 1.2rem; padding: 18px 40px; }

/* 反射神経テスト — 状態が変わってもゾーンの位置・サイズは一切動かさない */
.reaction-round { text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--sub); margin: 6px 0 10px; }
.reaction-zone {
  height: 260px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; font-weight: 800; color: #fff; cursor: pointer; text-align: center; padding: 0 16px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background 0.12s;
}
.reaction-zone.idle { background: #5a8dee; }
.reaction-zone.wait { background: #e4404a; }
.reaction-zone.go { background: #2eae6b; }
.reaction-zone.early { background: #f08a2d; font-size: 1.1rem; }
.reaction-zone.hit { background: #2b3440; font-variant-numeric: tabular-nums; }

/* メーカー: スコア帯コメント（低スコアも笑える一言を添える） */
.score-comment { font-size: 0.88rem; color: var(--sub); font-weight: 700; margin: 2px 0 6px; }

/* Turnstileウィジェット置き場（通常は無操作で即完了し自動で消える） */
.turnstile-slot { display: flex; justify-content: center; margin: 8px 0; min-height: 0; }
.turnstile-slot:empty { margin: 0; }

/* スライドパズル */
.puzzle-wrap { display: flex; justify-content: center; margin: 14px 0; }
#puzzle-canvas { border: 3px solid #ece8e1; border-radius: 12px; touch-action: manipulation; max-width: 100%; cursor: pointer; background: #fff; }
.puzzle-stats { display: flex; gap: 18px; justify-content: center; font-weight: 700; color: var(--sub); font-size: 0.95rem; }

/* フッター */
.site-footer { margin-top: 48px; padding: 26px 0 36px; background: #2b2b35; color: #cfcfd8; font-size: 0.85rem; }
.site-footer .container { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.site-footer a { color: #ffd166; text-decoration: none; margin: 0 8px; }

/* 静的ページ */
.page-body { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; margin: 24px 0; }
.page-body h1 { font-size: 1.4rem; margin-bottom: 16px; }
.page-body h2 { font-size: 1.1rem; margin: 22px 0 8px; }
.page-body p, .page-body li { font-size: 0.92rem; color: #44444f; }
.page-body ul { padding-left: 1.4em; }

@media (max-width: 480px) {
  .hero h1 { font-size: 1.3rem; }
  .panel { padding: 22px 14px; }
  .vs-item .vs-emoji { font-size: 2rem; }
  /* ヘッダーを1行に収める（モバイル） */
  .site-header .container { flex-wrap: nowrap; gap: 6px; }
  .hdr-side { gap: 6px; }
  .site-logo { font-size: 0.92rem; }
  .site-logo span { font-size: 1.05rem; margin-right: 4px; }
  .nav-btn { width: 34px; height: 34px; font-size: 0.95rem; flex-shrink: 0; }
  .lang-wrap { padding: 3px 8px; gap: 3px; flex-shrink: 0; }
  .lang-select { font-size: 0.76rem; max-width: 84px; }
}

/* どうぶつ進化パズル（evolve.js）: 4×4マージパズル。
   タイルはtransform遷移でスライド、盤面はtouch-action:noneでスワイプ専用 */
.evolve-hud { display: flex; gap: 8px; justify-content: center; margin: 10px 0 14px; flex-wrap: wrap; }
.evolve-chip {
  font-size: 0.82rem; font-weight: 700; color: var(--sub); background: var(--bg);
  border: 2px solid #ece8e1; border-radius: 999px; padding: 5px 14px;
}
.evolve-chip b { color: var(--text); margin-left: 4px; }
.evolve-board {
  --gap: 10px;
  position: relative; max-width: 340px; margin: 0 auto; aspect-ratio: 1;
  background: #d9d2c5; border-radius: 14px; padding: var(--gap);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.evolve-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); height: 100%; }
.evolve-cell { background: #e8e2d6; border-radius: 10px; }
.evolve-tile {
  position: absolute; top: var(--gap); left: var(--gap);
  width: calc((100% - 5 * var(--gap)) / 4); height: calc((100% - 5 * var(--gap)) / 4);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.6rem, 9vw, 2.4rem); border-radius: 10px; background: #fff;
  box-shadow: 0 2px 6px rgba(43, 43, 53, 0.12);
  transition: transform 0.12s ease;
}
.evolve-tile.lv5, .evolve-tile.lv6 { background: #fff3e0; }
.evolve-tile.lv7, .evolve-tile.lv8 { background: #ffe9c7; box-shadow: 0 2px 10px rgba(232, 144, 26, 0.35); }
.evolve-tile.lv9, .evolve-tile.lv10 { background: #f3e8ff; box-shadow: 0 2px 12px rgba(123, 44, 191, 0.4); }
.evolve-tile.lv11 { background: #ffe3da; box-shadow: 0 0 18px rgba(230, 57, 70, 0.55); }
.evolve-tile.new { animation: evolve-in 0.16s ease; }
.evolve-tile.pop { animation: evolve-pop 0.2s ease; }
@keyframes evolve-in { from { scale: 0.3; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes evolve-pop { 0% { scale: 1; } 50% { scale: 1.22; } 100% { scale: 1; } }
.evolve-howto { margin-top: 12px; font-size: 0.82rem; }
/* 結果画面: コンパクト化（ランク名と点数を近づけ、最高進化は点数の後にカッコ書きで1行に収める）。
   .result-* は全エンジン共通クラスのため .evolve-result でスコープして他結果画面に影響させない */
.evolve-result .result-name { margin: 2px 0 0; }
.evolve-result .score-meter { margin: 4px auto 2px; }
/* 「1984 点」と「（最高進化: 🐘）」をそれぞれ改行禁止の塊にし、塊の間（半角空白）でのみ改行可に。
   広い画面では1行、狭い画面/長い言語でも途中でぶつ切りにならず塊ごとの綺麗な折り返しになる */
.evolve-result .score-main, .evolve-result .score-sub { white-space: nowrap; }
.evolve-result .score-sub { font-size: 0.85rem; color: var(--sub); }
/* 結果画面: 実際の最終盤面を表示（SNSシェアカード画像は埋め込まず実盤面を見せる） */
.evolve-result-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  width: 100%; max-width: 260px; aspect-ratio: 1; margin: 10px auto 4px;
  padding: 8px; background: #d9d2c5; border-radius: 14px;
}
.evolve-result-board .rcell {
  background: #e8e2d6; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: clamp(1.3rem, 7vw, 1.9rem);
}
.evolve-result-board .rcell.f { box-shadow: 0 1px 4px rgba(43, 43, 53, 0.12); }

/* ===== エンドレス(スイカ式)🐉ループ演出 ===== */
/* 🐉同士→🐭へ巻き戻ったタイル: 回転しながら変身＝「格下げでなく大当たり」と見せる。
   位置はインラインtransform(translate)が担うので、ここはscale/rotate(独立プロパティ)のみ動かす */
.evolve-tile.loop-born { animation: evolve-loop-born 0.6s cubic-bezier(0.2, 0.7, 0.3, 1.2); }
@keyframes evolve-loop-born {
  0%   { scale: 0.2; rotate: 0deg;   box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.95); }
  55%  { scale: 1.3; rotate: 320deg; box-shadow: 0 0 0 12px rgba(255, 209, 102, 0.55); }
  100% { scale: 1;   rotate: 360deg; box-shadow: 0 2px 6px rgba(43, 43, 53, 0.12); }
}
/* 🐉ループの全画面金フラッシュ（短く・控えめ・操作は妨げない） */
.evolve-loop-fx {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(255, 209, 102, 0.55), rgba(255, 209, 102, 0) 60%);
  animation: evolve-loop-flash 0.5s ease-out forwards;
}
@keyframes evolve-loop-flash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
/* 通知(ループ達成/初🐉)は盤面の上(サブタイトル付近)に出して盤面を隠さない＝高速プレイでも盤面が見える */
.evolve-notice {
  position: absolute; left: 50%; bottom: calc(100% + 50px); z-index: 130;
  pointer-events: none; text-align: center; transform: translateX(-50%);
}
.evolve-loop-toast {
  white-space: nowrap; color: #fff; font-weight: 800; font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  padding: 10px 22px; border-radius: 999px;
  background: linear-gradient(135deg, #ffb627, #e63946);
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.45);
  animation: evolve-notice-in 0.95s ease-out forwards;
}
/* 初🐉到達: 「ドラゴン達成！」と同じくらいのサイズの枠（タイトル＋小ヒント）。盤面の上に出す */
.evolve-first {
  background: linear-gradient(135deg, #ffd166, #ff8fb1);
  border-radius: 18px; padding: 9px 22px; box-shadow: 0 6px 20px rgba(232, 144, 26, 0.4);
  animation: evolve-notice-in 1.7s ease-out forwards;
}
.evolve-first .ef-title { font-weight: 800; font-size: clamp(1.05rem, 4.6vw, 1.4rem); color: #2b2b35; white-space: nowrap; }
.evolve-first .ef-hint { font-size: 0.8rem; color: #6b4a1a; margin-top: 2px; white-space: nowrap; }
@keyframes evolve-notice-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.8); }
  16%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  28%  { transform: translateX(-50%) translateY(0) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1); }
}
/* HUDの🐉ループチップ・結果のループピルを金で強調 */
.evolve-chip-loops { background: #fff7e0; border-color: #ffd166; color: #c98a00; }
.evolve-chip-loops b { color: #c1121f; }
.evolve-result .loop-pill { color: #c1121f; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .evolve-loop-fx { display: none; }
  .evolve-tile.loop-born { animation-duration: 0.25s; }
}
.evolve-ladder {
  text-align: center; font-size: 0.95rem; letter-spacing: 1px; color: var(--sub);
  margin: 6px 0 12px; overflow-x: auto; white-space: nowrap;
}

/* 画像保存ライトボックス（common.js openImageLightbox が生成）。
   画像はOSネイティブの長押し/右クリック保存に任せるため、callout等を妨げない */
.img-lightbox {
  position: fixed; inset: 0; z-index: 130; background: rgba(14, 12, 20, 0.86);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
}
.img-lightbox img {
  max-width: min(92vw, 720px); max-height: 72vh; border-radius: 12px;
  background: #fff; box-shadow: 0 12px 48px rgba(0,0,0,0.45);
}
.img-lightbox-hint { color: #fff; font-size: 0.92rem; font-weight: 700; opacity: 0.9; text-align: center; }
.img-lightbox-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff;
  font-size: 1.3rem; cursor: pointer;
}

/* ガチャ演出（即時結果系の結果リビール。common.js gachaReveal が生成） */
.gacha-overlay {
  position: fixed; inset: 0; z-index: 120; background: rgba(24, 20, 34, 0.74);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
.gacha-overlay.out { opacity: 0; }
.gacha-stage {
  position: relative; width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.gacha-capsule { position: relative; width: 110px; height: 110px; animation: gacha-shake 0.85s ease-in; }
.gacha-cap-top, .gacha-cap-bottom {
  position: absolute; left: 0; width: 110px; height: 55px;
  transition: transform 0.32s cubic-bezier(0.2, -0.4, 0.4, 1.3), opacity 0.32s;
}
.gacha-cap-top {
  top: 0; border-radius: 110px 110px 0 0;
  background: linear-gradient(180deg, #fffdf8, #efe9dd);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}
.gacha-cap-bottom {
  bottom: 0; border-radius: 0 0 110px 110px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.12);
}
.gacha-cap-shine {
  position: absolute; top: 13px; left: 17px; width: 28px; height: 15px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); transform: rotate(-25deg); transition: opacity 0.2s;
}
@keyframes gacha-shake {
  0% { transform: rotate(0); }
  15% { transform: rotate(-10deg) translateX(-3px); }
  30% { transform: rotate(9deg) translateX(3px); }
  45% { transform: rotate(-11deg) translateX(-4px); }
  60% { transform: rotate(10deg) translateX(4px); }
  72% { transform: rotate(-12deg) translateX(-5px); }
  84% { transform: rotate(12deg) translateX(5px); }
  100% { transform: rotate(0) scale(1.07); }
}
.gacha-overlay.pop .gacha-cap-top { transform: translateY(-95px) rotate(-20deg); opacity: 0; }
.gacha-overlay.pop .gacha-cap-bottom { transform: translateY(95px) rotate(16deg); opacity: 0; }
.gacha-overlay.pop .gacha-cap-shine { opacity: 0; }
.gacha-flash {
  position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe9a8 45%, rgba(255, 233, 168, 0) 72%);
  transform: scale(0); opacity: 0; pointer-events: none;
}
.gacha-overlay.pop .gacha-flash { animation: gacha-flash 0.6s ease-out forwards; }
@keyframes gacha-flash {
  0% { transform: scale(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(22); opacity: 0; }
}
.gacha-rays {
  position: absolute; inset: -50px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 214, 102, 0) 0deg 12deg, rgba(255, 214, 102, 0.30) 12deg 24deg);
  transform: scale(0); opacity: 0;
}
.gacha-overlay.pop .gacha-rays { animation: gacha-rays 0.85s ease-out 0.05s forwards; }
@keyframes gacha-rays {
  0% { transform: scale(0.2) rotate(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.25) rotate(40deg); opacity: 0; }
}
.gacha-burst { position: absolute; inset: 0; margin: auto; width: 0; height: 0; pointer-events: none; }
.gacha-burst i { position: absolute; width: 15px; height: 15px; border-radius: 3px; opacity: 0; box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); }
.gacha-overlay.pop .gacha-burst i { animation: gacha-burst 0.8s cubic-bezier(0.15, 0.6, 0.35, 1) 0.06s forwards; }
@keyframes gacha-burst {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(560deg) scale(0.55); opacity: 0; }
}
.gacha-burst i:nth-child(1)  { background: #ff6b6b; --tx: 150px;  --ty: 0; }
.gacha-burst i:nth-child(2)  { background: #ffd166; --tx: 104px;  --ty: -62px; border-radius: 50%; }
.gacha-burst i:nth-child(3)  { background: #4ecdc4; --tx: 76px;   --ty: -132px; }
.gacha-burst i:nth-child(4)  { background: #5a8dee; --tx: 0;      --ty: -152px; border-radius: 50%; }
.gacha-burst i:nth-child(5)  { background: #b388eb; --tx: -76px;  --ty: -132px; }
.gacha-burst i:nth-child(6)  { background: #ff9f68; --tx: -104px; --ty: -62px; border-radius: 50%; }
.gacha-burst i:nth-child(7)  { background: #ff6b6b; --tx: -150px; --ty: 0; }
.gacha-burst i:nth-child(8)  { background: #ffd166; --tx: -104px; --ty: 62px; border-radius: 50%; }
.gacha-burst i:nth-child(9)  { background: #4ecdc4; --tx: -76px;  --ty: 132px; }
.gacha-burst i:nth-child(10) { background: #5a8dee; --tx: 0;      --ty: 152px; border-radius: 50%; }
.gacha-burst i:nth-child(11) { background: #b388eb; --tx: 76px;   --ty: 132px; }
.gacha-burst i:nth-child(12) { background: #ff9f68; --tx: 104px;  --ty: 62px; border-radius: 50%; }
/* レア確定演出（金カプセル時）: 金のオーラ・濃い金閃光・太い光線・大きめ紙吹雪 */
.gacha-overlay.rare { background: rgba(34, 26, 8, 0.8); }
.gacha-overlay.rare .gacha-capsule { filter: drop-shadow(0 0 20px rgba(255, 209, 102, 0.85)); }
.gacha-overlay.rare .gacha-rays {
  inset: -80px;
  background: repeating-conic-gradient(rgba(255, 214, 102, 0) 0deg 10deg, rgba(255, 214, 102, 0.5) 10deg 20deg);
}
.gacha-overlay.rare .gacha-flash {
  background: radial-gradient(circle, #fff 0%, #ffd166 48%, rgba(255, 209, 102, 0) 74%);
}
.gacha-overlay.rare.pop .gacha-flash { animation-duration: 0.85s; }
.gacha-overlay.rare .gacha-burst i { width: 18px; height: 18px; }

/* 名前入力欄のラベル（プレースホルダー長文はスマホで途切れるため上に出す） */
.input-label {
  display: block; font-size: 0.85rem; font-weight: 800; color: var(--sub);
  margin: 14px 0 6px;
}

/* 結果カードのポップイン（演出明けに付与） */
.reveal-pop { animation: reveal-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes reveal-pop {
  0% { transform: scale(0.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- つきひパズル（tsukihi.js） ---- */
.tsukihi-hud {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 4px 0 10px; flex-wrap: wrap;
}
.tsukihi-hud-label { font-size: 0.85rem; font-weight: 800; color: var(--sub); white-space: nowrap; }
.tsukihi-hud-stats { font-size: 0.95rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tsukihi-board {
  display: grid; gap: 6px; margin: 0 auto;
  width: 100%; max-width: 380px; touch-action: manipulation;
  position: relative; /* 境界制約バッジ(.tk-edge)・軌跡SVGの絶対配置の基準 */
}
.tsukihi-board.s6 { grid-template-columns: repeat(6, 1fr); }
.tsukihi-board.s8 { grid-template-columns: repeat(8, 1fr); gap: 4px; }
.tsukihi-cell {
  aspect-ratio: 1; border-radius: 10px; border: 2px solid #e8e0d2;
  background: #fff; font-size: 1.45rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.tsukihi-board.s8 .tsukihi-cell { font-size: 1.05rem; border-radius: 8px; border-width: 1.5px; }
.tsukihi-cell.lock { background: #f6f0e3; border-color: #e0d5bd; cursor: default; }
.tsukihi-cell.bad { background: #ffe8e6; border-color: #f3b0aa; }
.tsukihi-cell.pop { animation: tsukihi-pop 0.18s ease-out; }
@keyframes tsukihi-pop { 0% { transform: scale(0.82); } 100% { transform: scale(1); } }
.tsukihi-cell.win {
  background: #fff6da; border-color: #f0c64a;
  animation: tsukihi-win 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes tsukihi-win {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.18) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.tsukihi-hint { text-align: center; margin-top: 10px; }
.tsukihi-diffs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tsukihi-diff { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.tsukihi-diff-size { font-size: 0.75rem; font-weight: 700; color: var(--sub); }
.tsukihi-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #fff3d6; border: 1.5px solid #f0c64a; font-size: 0.85rem; font-weight: 800;
  white-space: nowrap;
}
.tsukihi-menu-chips:empty, .tsukihi-result-chips:empty { display: none; }
.tsukihi-result-chips { margin-top: 8px; }

/* ---- ほしとりパズル（hoshitori.js）: 領域色の盤面 ----
   注意: .tsukihi-board.s8 { gap/角丸 } より詳細度で勝つセレクタにする
   （8×8だけセルが離れて角丸になり領域の連続表示が壊れた実バグの再発防止） */
.tsukihi-board.hoshitori-board { gap: 0; border: 2.5px solid #7a6f5d; border-radius: 12px; overflow: hidden; }
.tsukihi-board.hoshitori-board .tsukihi-cell {
  border-radius: 0; border: 1px solid rgba(122, 111, 93, 0.18);
  font-size: 1.15rem;
}
.hoshitori-board.s6 .hoshitori-cell { font-size: 1.4rem; }
.hoshitori-board.s9 .hoshitori-cell, .hoshitori-board.s10 .hoshitori-cell { font-size: 0.95rem; }
.tsukihi-board.hoshitori-board .tsukihi-cell.bR { border-right: 2.5px solid #7a6f5d; }
.tsukihi-board.hoshitori-board .tsukihi-cell.bB { border-bottom: 2.5px solid #7a6f5d; }
.tsukihi-board.hoshitori-board .tsukihi-cell.xmark { color: #8a8073; font-weight: 800; font-size: 0.95rem; }
.hoshitori-cell.bad { box-shadow: inset 0 0 0 3px #f3958c; }
.hoshitori-cell.win { animation: tsukihi-win 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); filter: brightness(1.12); }

/* ---- ひとふでナンバー（hitofude.js）: なぞり描線の盤面 ---- */
.hitofude-board { gap: 5px; touch-action: none; position: relative; }
.hitofude-cell { position: relative; transition: background 0.12s; }
.hitofude-cell.on { border-color: transparent; }
/* 軌跡の実線: セルの上・番号バッジ(z-index:2)の下。タッチ透過 */
.hitofude-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hitofude-line polyline { stroke: rgba(91, 84, 196, 0.55); }
.hitofude-line circle { fill: #4a4460; stroke: #fff; stroke-width: 2.5; }
.hitofude-wp {
  /* 円内数字の光学センタリングの定石: line-height=高さ＋text-align center
     （flex+line-height:1だとディセンダー余白ぶん数字が上寄りに見える。おにの小円で顕著だった実バグ） */
  display: inline-block; min-width: 1.7em; height: 1.7em; line-height: 1.7em;
  padding: 0 0.24em; box-sizing: border-box; text-align: center; border-radius: 999px;
  background: #4a4460; color: #fff; font-size: 0.72em; font-weight: 800;
  position: relative; z-index: 2; /* 軌跡線(z:1)より上 */
}
.hitofude-wp.start { background: #2e7d32; }
.hitofude-wp.goal { background: #c62828; }
.hitofude-cell.no { animation: hitofude-no 0.25s ease-out; }
/* おにの「欠け」＝通れない穴。凹んだ地形に見せる（タッチ透過・番号なし・被覆対象外） */
.hitofude-cell.void {
  background: #ebe3d3; border-color: transparent;
  box-shadow: inset 0 2px 7px rgba(90, 78, 55, 0.22);
  cursor: default; pointer-events: none;
}
@keyframes hitofude-no {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}
.hitofude-cell.win { animation: tsukihi-win 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); filter: saturate(1.25); }

/* ---- ナンプレ道場（nanpure.js） ----
   セレクタは .tsukihi-board.s8 等との詳細度競合を避けるため
   .tsukihi-board.nanpure-board 起点で書く（ほしとり8×8バグの教訓） */
.tsukihi-board.nanpure-board { gap: 0; border: 2.5px solid #7a6f5d; border-radius: 12px; overflow: hidden; }
.tsukihi-board.nanpure-board .tsukihi-cell {
  border-radius: 0; border: 1px solid rgba(122, 111, 93, 0.22);
  background: #fff; font-size: 1.15rem; font-weight: 700; color: #2b4a80;
}
.tsukihi-board.nanpure-board.s6 .tsukihi-cell { font-size: 1.3rem; }
.tsukihi-board.nanpure-board .tsukihi-cell.lock { background: #f6f0e3; color: #4a4436; font-weight: 800; cursor: default; }
.tsukihi-board.nanpure-board .tsukihi-cell.bR { border-right: 2.5px solid #7a6f5d; }
.tsukihi-board.nanpure-board .tsukihi-cell.bB { border-bottom: 2.5px solid #7a6f5d; }
.tsukihi-board.nanpure-board .tsukihi-cell.selq { box-shadow: inset 0 0 0 3px #5a8dee; }
.tsukihi-board.nanpure-board .tsukihi-cell.same { background: #e6f1fb; }
.tsukihi-board.nanpure-board .tsukihi-cell.lock.same { background: #e8e5d4; }
.tsukihi-board.nanpure-board .tsukihi-cell.bad { background: #ffe8e6; }
.tsukihi-board.nanpure-board .tsukihi-cell.win { animation: tsukihi-win 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); background: #fff6da; }
.nanpure-memo {
  font-size: 0.5em; font-weight: 700; color: #8a8073; line-height: 1.15;
  letter-spacing: 0.06em; word-break: break-all; padding: 0 2px; display: block;
}
.nanpure-pad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.nanpure-key {
  min-width: 44px; height: 46px; border-radius: 10px; border: 2px solid #e8e0d2;
  background: #fff; font-size: 1.15rem; font-weight: 800; color: #2b4a80;
  cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0 8px;
}
.nanpure-key.done { opacity: 0.32; }
.nanpure-key.nanpure-tool { color: #6e6250; }
.nanpure-key.nanpure-tool.active { background: #fff3d6; border-color: #f0c64a; }
/* 未選択/消すもの無しのフィードバック（ひとふでの首振りを流用） */
.nanpure-key.no { animation: hitofude-no 0.25s ease-out; }

/* ---- つきひ: 境界制約バッジ（×=となりと違う/＝=となりと同じ）。本編盤面・遊び方デモ共用 ----
   記号はテキストでなく疑似要素のCSS描画: フォントのグリフ位置は環境ごとにズレて
   円の中心に来ないため、バーを機械的にど真ん中へ描く */
.tk-edge {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; border: 2px solid #b7ab94; color: #6e6250;
  pointer-events: none; box-shadow: 0 1px 3px rgba(43, 43, 53, 0.18);
}
.tk-edge::before, .tk-edge::after {
  content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 50%;
  height: 2.4px; margin-top: -1.2px; border-radius: 2px; background: currentColor;
}
.tk-edge::before { transform: rotate(45deg); }   /* × の2本バー */
.tk-edge::after { transform: rotate(-45deg); }
.tk-edge.eq::before { transform: translateY(-2.7px); } /* ＝ は平行2本バー */
.tk-edge.eq::after { transform: translateY(2.7px); }
.tk-edge.bad { border-color: #e2574b; color: #e2574b; background: #fff2f0; }

/* ---- はなさか: 1手入れ替え連鎖パズル（タイルは絶対配置＋transform落下） ---- */
.hs-board-wrap { display: flex; justify-content: center; margin: 10px 0 4px; }
.hanasaka-board {
  position: relative; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #f6f1e7; border-radius: 14px; box-shadow: inset 0 0 0 2.5px #e3d9c6;
}
.hs-tile {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 24%; transform: var(--tf); line-height: 1; pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.25, 0.85, 0.35, 1.15); will-change: transform;
}
.hsc0 { background: #ffddeb; }
.hsc1 { background: #fff3bf; }
.hsc2 { background: #d0ebff; }
.hsc3 { background: #d3f9d8; }
.hsc4 { background: #ffe0d6; }
.hs-tile.hs-sel { box-shadow: 0 0 0 3px #ff6ea9, 0 0 14px 2px rgba(255, 110, 169, 0.55); z-index: 2; }
/* あそびかた実物ミニ盤の👆（タップ位置に重ねる）とふきだしバッジ */
.hs-demo-hand { position: absolute; z-index: 5; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(40, 20, 10, 0.35)); }
.hs-demo-badge {
  position: absolute; right: 6px; top: 6px; z-index: 5; pointer-events: none;
  background: rgba(255, 255, 255, 0.94); border: 2px solid #e3d9c6; border-radius: 999px;
  padding: 2px 10px; font-weight: 800; font-size: 0.95rem;
}
.hs-demo-badge.gold { border-color: #f0c64a; background: #fff6da; }
.hs-tile.hs-deny { animation: hs-deny 0.27s ease; }
@keyframes hs-deny { 25% { transform: var(--tf) rotate(-8deg); } 75% { transform: var(--tf) rotate(8deg); } }
.hs-tile.hs-bloom { animation: hs-bloom 0.34s ease forwards; z-index: 3; }
@keyframes hs-bloom {
  55% { transform: var(--tf) scale(1.32); opacity: 0.95; }
  100% { transform: var(--tf) scale(1.65); opacity: 0; }
}
.hs-tile.hs-out { transition: opacity 0.16s; opacity: 0; }
.hs-tile.hs-answer { box-shadow: 0 0 0 3px #e8590c, 0 0 16px 3px rgba(232, 89, 12, 0.5); z-index: 2; animation: hs-answer 0.9s ease infinite; }
@keyframes hs-answer { 50% { box-shadow: 0 0 0 6px #e8590c, 0 0 22px 6px rgba(232, 89, 12, 0.22); } }
.hs-toast {
  position: absolute; left: 50%; top: 40%; font-weight: 800; pointer-events: none; z-index: 5;
  white-space: nowrap; text-shadow: 0 1px 0 #fff, 0 2px 10px rgba(255, 255, 255, 0.9);
  animation: hs-toast 0.72s ease forwards;
}
@keyframes hs-toast {
  0% { transform: translate(-50%, -46%) scale(0.6); opacity: 0; }
  18% { transform: translate(-50%, -52%) scale(1.16); opacity: 1; }
  70% { transform: translate(-50%, -56%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -72%) scale(1.04); opacity: 0; }
}
.hs-target { font-weight: 800; color: #d6336c; }
.hs-reveal-wrap { margin: 10px 0 2px; }

/* ---- パズル共通: 遊び方モーダル＆図解アニメデモ（tsukihi/hoshitori/hitofude/nanpure） ---- */
.pz-howto-row { text-align: center; margin: -2px 0 12px; }
.pz-howto-open {
  font-family: inherit; font-size: 0.85rem; font-weight: 800; color: var(--primary-dark);
  background: #fff; border: 2px solid #f5cdc7; border-radius: 999px; padding: 7px 18px; cursor: pointer;
}
.pz-howto-open:hover { background: #fff3f0; }
/* プレイ中HUDの小さな「？」ボタン（右上導線） */
.pz-howto-mini {
  font-family: inherit; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #e0d5bd;
  background: #fff; color: var(--sub); font-size: 0.78rem; font-weight: 800; cursor: pointer;
  padding: 0; line-height: 22px; margin-left: 10px; vertical-align: -2px;
}
.pz-howto-overlay {
  position: fixed; inset: 0; z-index: 115; background: rgba(20, 18, 28, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.pz-howto-box {
  position: relative; background: var(--bg); border-radius: var(--radius); width: 100%;
  max-width: 400px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3); padding: 14px 16px 16px;
}
.pz-howto-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 800; padding: 0 0 6px;
}
.pz-howto-close { background: #ece8e1; color: var(--sub); flex-shrink: 0; }
/* ページャ: 横スクロール＋スナップ＝スマホはスワイプでページ送り */
.pz-howto-pager {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; border-radius: 12px;
}
.pz-howto-pager::-webkit-scrollbar { display: none; }
.pz-howto-page {
  flex: 0 0 100%; scroll-snap-align: center; padding: 8px 6px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pz-howto-demo { min-height: 178px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pz-howto-text { font-size: 0.92rem; font-weight: 700; line-height: 1.65; text-align: center; min-height: 4.3em; }
.pz-howto-dots { display: flex; gap: 7px; justify-content: center; padding: 10px 0 12px; }
.pz-howto-dot { width: 8px; height: 8px; border-radius: 50%; background: #ded7ca; }
.pz-howto-dot.on { background: var(--primary); }
.pz-howto-arrow {
  position: absolute; top: 45%; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(43, 43, 53, 0.16); color: #fff; font-size: 1.25rem; line-height: 32px;
  cursor: pointer; font-family: inherit; padding: 0;
}
.pz-howto-arrow.prev { left: 6px; }
.pz-howto-arrow.next { right: 6px; }
.pz-howto-arrow:hover { background: rgba(43, 43, 53, 0.3); }

/* 図解デモのミニ盤面（ゲーム本体のセルCSSとは分離＝詳細度事故防止の教訓） */
.pz-demo-board { position: relative; display: grid; gap: 4px; width: 100%; }
/* あそびかたデモ共通の👆（タップ位置に重ねる＝共通型§7） */
.pz-demo-hand { position: absolute; z-index: 5; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(40, 20, 10, 0.35)); }
.pz-demo-cell {
  position: relative; aspect-ratio: 1; background: #fff; border: 2px solid #e5ddcc; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: var(--text);
  transition: background 0.16s, border-color 0.16s;
}
.pz-demo-cell.lock { background: #f6f0e3; border-color: #e0d5bd; }
.pz-demo-cell.bad { background: #ffe8e6; border-color: #f3b0aa; }
.pz-demo-cell.ok { background: #e9f6e7; border-color: #a5d69f; }
.pz-demo-cell.dim { color: #8a8073; }
.pz-demo-cell.hl { background: #fff3d6; border-color: #f0c64a; }
.pz-demo-cell.bR { border-right: 3px solid #7a6f5d; }
.pz-demo-cell.bB { border-bottom: 3px solid #7a6f5d; }
/* 「ここをタップ」パルスリング */
.pz-demo-cell.tap::after, .pz-demo-key.tap::after {
  content: ""; position: absolute; inset: -5px; border: 3px solid #f0a63c; border-radius: 12px;
  animation: pz-tap 0.75s ease-out infinite;
}
@keyframes pz-tap { 0% { transform: scale(0.82); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
/* ひとふでデモ: 番号バッジ＋軌跡の実線（本編の縮小版） */
.pz-demo-wp {
  position: absolute; inset: 0; margin: auto; width: 60%; height: 60%; border-radius: 50%;
  background: #4a4460; color: #fff; font-size: 0.85em; font-weight: 800;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.pz-demo-wp.start { background: #2e7d32; }
.pz-demo-wp.goal { background: #c62828; }
.pz-demo-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.pz-demo-line polyline { stroke: rgba(91, 84, 196, 0.55); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pz-demo-line circle { fill: #4a4460; stroke: #fff; stroke-width: 2; }
/* ナンプレデモ: ミニ数字パッド */
.pz-demo-pad { display: flex; gap: 5px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.pz-demo-key {
  position: relative; width: 34px; height: 38px; border-radius: 9px; border: 2px solid #e0d5bd;
  background: #fff; font-weight: 800; font-size: 0.95rem; color: #2b4a80;
  display: flex; align-items: center; justify-content: center;
}
.pz-demo-key.active { background: #fff3d6; border-color: #f0c64a; }
.pz-demo-memo { font-size: 0.62em; color: #8a8073; letter-spacing: 1px; }

/* ---- ぎゅうぎゅう水族館（aquarium.js）: 物理マージドロップのcanvas水槽 ---- */
.aq-stage { display: flex; justify-content: center; }
#aq-canvas {
  display: block; max-width: 100%;
  border: 2.5px solid #7a93a5; border-radius: 14px;
  background: #f2fbff; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.aq-hud-score { font-variant-numeric: tabular-nums; }
/* ながれぼしダッシュ（stardash.js）: 宇宙canvas。水槽と違い暗背景＝枠もダーク系 */
#sd-canvas {
  display: block; max-width: 100%;
  border: 2.5px solid #2c2a55; border-radius: 14px;
  background: #0a0a24; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
/* メニューの進化ラダー（🦐→…→🐋）: 折り返し可・矢印は控えめに */
.aq-ladder {
  text-align: center; font-size: 1.05rem; line-height: 1.9;
  letter-spacing: 1px; margin: 2px 0 8px;
}
.aq-ladder .aq-arrow { font-size: 0.7rem; color: var(--sub); margin: 0 1px; letter-spacing: 0; }
/* プレイ中の進化順（水槽の下・ひかえめサイズ） */
.aq-ladder-mini { font-size: 0.88rem; line-height: 1.5; margin: 6px 0 0; opacity: 0.9; }
.aq-result-ladder { font-size: 1.2rem; letter-spacing: 2px; margin-top: 8px; }

/* そよかぜゴルフ（golf.js）: 箱庭コースcanvas＋クラブ選択＋長押しゲージ */
#gf-canvas {
  display: block; max-width: 100%;
  border: 2.5px solid #4c8f47; border-radius: 14px;
  background: #8fbe72; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.gf-clubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 8px; }
.gf-club {
  padding: 7px 4px; border-radius: 12px; border: 2px solid #d5cfc2;
  background: #fff; font: inherit; cursor: pointer; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}
.gf-club b { display: block; font-size: 0.86rem; }
.gf-club span { font-size: 0.72rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.gf-club.on { border-color: #3f8a4a; background: #eefbe8; box-shadow: 0 2px 0 #3f8a4a33; }
.gf-club:disabled { opacity: 0.45; cursor: default; }
.gf-gauge {
  position: relative; height: 18px; border-radius: 9px; overflow: hidden;
  background: #e8e2d4; border: 1.5px solid #d5cfc2; margin-bottom: 8px;
}
.gf-gauge-fill {
  height: 100%; width: 0%; border-radius: 9px 0 0 9px;
  background: linear-gradient(90deg, #8fd08a, #4aa858);
}
.gf-gauge-fill.max { background: linear-gradient(90deg, #ffd166, #ff9f43); }
.gf-tick { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(0,0,0,0.12); }
.gf-card-row {
  font-size: 1.45rem; letter-spacing: 3px; margin: 8px 0 2px;
  line-height: 1.5; word-break: break-all;
}
/* ころころボウリング（bowling.js）: 疑似3Dレーンcanvas。UI部品は.gf-*を共用 */
#bw-canvas {
  display: block; max-width: 100%;
  border: 2.5px solid #2c2455; border-radius: 14px;
  background: #1c1633; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
/* ぴたっとダーツ（darts.js）: パブの壁×ダーツボードcanvas。UI部品は.gf-*を共用 */
#dt-canvas {
  display: block; max-width: 100%;
  border: 2.5px solid #3a2c4c; border-radius: 14px;
  background: #2a2036; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
/* らくがきころりん（doodle.js）: らくがき帳canvas＋レベル選択グリッド */
#dr-canvas {
  display: block; max-width: 100%;
  border: 2.5px solid #e8b84a; border-radius: 14px;
  background: #fdf9ee; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: crosshair;
}
.dr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.dr-lv {
  padding: 8px 2px; border-radius: 12px; border: 2px solid #e8d8b0;
  background: #fffdf6; font: inherit; cursor: pointer; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}
.dr-lv b { display: block; font-size: 1.05rem; }
.dr-lv span { font-size: 0.66rem; letter-spacing: -1px; }
.dr-lv.locked { opacity: 0.45; cursor: default; }
/* ノート制（レベル21面以降で自動有効）: ノートカードの縦積みリスト */
.dr-note {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; margin-top: 8px; border-radius: 14px;
  border: 2px solid #e8d8b0; background: #fffdf6; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dr-note b { display: block; font-size: 1rem; }
.dr-note span { font-size: 0.8rem; color: #8a7a60; }
.dr-note.locked { opacity: 0.45; cursor: default; }
/* レベル選択ボタン（そよかぜ/はやて/あらし等・ゲーム共通）: 2行構成＝名前＋サブ情報/今日のベスト */
.gf-lv { line-height: 1.3; }
.gf-lv-sub {
  display: block; font-size: 0.76rem; font-weight: 600;
  opacity: 0.92; margin-top: 1px; font-variant-numeric: tabular-nums;
}

/* 動きに敏感なユーザー（前庭障害等）向けのOS設定を尊重（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- ひかりの庭 (game/hikari) ---- */
.hk-board-wrap { display: flex; justify-content: center; margin: 12px 0; position: relative; }
#hk-canvas, #hk-reveal-canvas {
  display: block; border-radius: 14px; touch-action: manipulation;
  box-shadow: 0 6px 24px rgba(8, 12, 30, .45);
}
.hk-demo-canvas {
  display: block; margin: 0 auto; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(8, 12, 30, .45);
}
.hk-reveal-wrap { margin-top: 10px; }
.hk-toast {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  background: rgba(20, 28, 52, .92); color: #ffe9a8; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; pointer-events: none;
  animation: hkToast 1.4s ease forwards; white-space: nowrap; font-size: 15px;
}
@keyframes hkToast {
  0% { opacity: 0; transform: translate(-50%, -30%); }
  18% { opacity: 1; transform: translate(-50%, -50%); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80%); }
}
.hk-lv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0; }
.hk-lv {
  aspect-ratio: 1; border-radius: 12px; border: 2px solid #d8d2c6;
  background: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.hk-lv.done { background: #fff4d6; border-color: #e8a13c; }
.hk-lv.lock { opacity: .45; cursor: default; }
.hk-lv-star { position: absolute; right: 2px; top: 0; font-size: 12px; }

/* かこっておはな（bloom）: 結果カードの庭スナップショット */
.bl-garden {
  display: block; width: 78%; max-width: 260px; margin: 12px auto 4px;
  border-radius: 14px; border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 3px 12px rgba(90, 60, 90, .18);
}

/* そっくりカメレオン: 結果カルーセル（3ラウンドのかくれんぼ写真・横スワイプ） */
.ch-snaps {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 4px 6px; -webkit-overflow-scrolling: touch;
}
.ch-snap {
  flex: 0 0 74%; max-width: 250px; scroll-snap-align: center; position: relative;
}
.ch-snap img {
  width: 100%; display: block; border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 3px 10px rgba(60, 80, 50, .18);
}
.ch-snap span {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(46, 58, 42, .82); color: #fff8e6; font-weight: 800; font-size: .85rem;
  padding: 2px 10px; border-radius: 999px;
}

/* ==== チョコわり（chokowari）: 本気の板チョコ盤・成型ピロー・5フレーバー・割線・粉 ==== */
.cw-board {
  position: relative;
  display: grid; gap: 0; margin: 12px auto 8px; max-width: 430px;
  padding: 12px; border-radius: 18px;
  background: linear-gradient(155deg, #4a2b16 0%, #38200e 55%, #2a1707 100%);
  box-shadow: 0 10px 26px rgba(40, 20, 6, .42),
    inset 0 2px 3px rgba(255, 235, 210, .16), inset 0 -4px 8px rgba(0, 0, 0, .38);
  touch-action: none; user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
.cw-cell {
  aspect-ratio: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* 成型ピロー: 各マスがふっくら盛り上がった板チョコの1粒。周囲の溝はスラブ地が見えて生まれる */
.cw-cell::before {
  content: ""; position: absolute; inset: 6.5%; border-radius: 16%;
  background:
    radial-gradient(120% 95% at 26% 18%, rgba(255, 226, 186, .34), rgba(255, 226, 186, 0) 46%),
    linear-gradient(150deg, #8f5c33 0%, #7c4c26 55%, #6d401d 100%);
  box-shadow: inset 0 2px 3px rgba(255, 232, 198, .32), inset 0 -3px 4px rgba(24, 12, 4, .52),
    0 2px 3px rgba(18, 9, 3, .5);
  transition: transform .1s ease, filter .1s ease;
}
/* 刻印数字: チョコに押し込まれたスタンプ（下辺に光・本体は焦げ茶） */
.cw-n {
  position: relative; z-index: 1;
  font-weight: 900; font-size: clamp(0.95rem, 4.4vw, 1.4rem); line-height: 1;
  color: #ffedd2; text-shadow: 0 -1px 0 rgba(30, 14, 4, .85), 0 1px 1px rgba(20, 10, 3, .6);
  letter-spacing: -0.02em;
}
.cw-demo .cw-n { font-size: 1.02rem; }
/* 置いたかけら: 選択時と同じキャラメルクリーム色に確定する（プレビュー＝そのまま結果の一貫性。
   2026-07-21オーナー指摘: 味ごとの茶系5色＋黒割線は地の板と見分けがつかない→全廃） */
.cw-cell.piece::before {
  background: radial-gradient(120% 95% at 26% 18%, rgba(255, 255, 240, .65), rgba(255, 255, 240, 0) 50%),
    linear-gradient(150deg, #f6dfae 0%, #eccb8c 55%, #ddb26d 100%);
  box-shadow: inset 0 2px 3px rgba(255, 246, 220, .5), inset 0 -3px 4px rgba(120, 78, 30, .4),
    0 2px 3px rgba(18, 9, 3, .5);
}
.cw-cell.piece .cw-n { color: #6b4423; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
/* 割線（かけらの外周）: キャラメルの上ではっきり見える濃い焦げ茶の溝 */
.cw-cell.bt { border-top: 3px solid rgba(58, 30, 8, .9); }
.cw-cell.bb { border-bottom: 3px solid rgba(58, 30, 8, .9); }
.cw-cell.bl { border-left: 3px solid rgba(58, 30, 8, .9); }
.cw-cell.br { border-right: 3px solid rgba(58, 30, 8, .9); }
/* プレビュー: つかんだ範囲がキャラメルクリーム色に変わって持ち上がる（こげ茶の上でも一目瞭然）。
   成立=金色のふち／不成立=いちごの赤み＋赤ふち */
.cw-cell.sel { z-index: 2; }
.cw-cell.sel::before {
  transform: translateY(-2px) scale(1.04);
  background: radial-gradient(120% 95% at 26% 18%, rgba(255, 255, 240, .65), rgba(255, 255, 240, 0) 50%),
    linear-gradient(150deg, #f6dfae 0%, #eccb8c 55%, #ddb26d 100%);
  box-shadow: inset 0 2px 3px rgba(255, 246, 220, .5), inset 0 -3px 4px rgba(120, 78, 30, .4),
    0 6px 12px rgba(18, 9, 3, .55);
}
.cw-cell.sel .cw-n { color: #6b4423; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.cw-cell.sel.no::before {
  background: radial-gradient(120% 95% at 26% 18%, rgba(255, 214, 205, .5), rgba(255, 214, 205, 0) 48%),
    linear-gradient(150deg, #c9614a 0%, #b04c37 55%, #963c28 100%);
}
.cw-cell.sel.no .cw-n { color: #ffe6da; text-shadow: 0 1px 1px rgba(60, 12, 4, .6); }
.cw-cell.sel.bt { border-top: 3px solid rgba(255, 226, 150, .95); }
.cw-cell.sel.bb { border-bottom: 3px solid rgba(255, 226, 150, .95); }
.cw-cell.sel.bl { border-left: 3px solid rgba(255, 226, 150, .95); }
.cw-cell.sel.br { border-right: 3px solid rgba(255, 226, 150, .95); }
.cw-cell.sel.no.bt { border-top-color: rgba(255, 170, 150, .9); }
.cw-cell.sel.no.bb { border-bottom-color: rgba(255, 170, 150, .9); }
.cw-cell.sel.no.bl { border-left-color: rgba(255, 170, 150, .9); }
.cw-cell.sel.no.br { border-right-color: rgba(255, 170, 150, .9); }
/* ぱきっ（配置・完成の波紋）とぷるん（不成立） */
@keyframes cw-snap {
  0% { transform: scale(1); }
  36% { transform: scale(1.1) rotate(0.7deg); }
  68% { transform: scale(0.982); }
  100% { transform: scale(1); }
}
.cw-cell.snap { animation: cw-snap .34s ease-out; z-index: 1; }
@keyframes cw-rej {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
.cw-cell.rej { animation: cw-rej .3s ease-in-out; }
/* チョコの粉: 割った瞬間に飛び散って消える */
.cw-crumb {
  position: absolute; width: 5px; height: 5px; border-radius: 45%;
  pointer-events: none; z-index: 3;
  animation: cw-crumb .55s ease-out forwards;
}
@keyframes cw-crumb {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 10px), var(--dy, -20px)) rotate(140deg); opacity: 0; }
}
/* 完成: 艶のスイープが一往復 */
.cw-board.done::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 244, 220, .28) 46%, rgba(255, 244, 220, .05) 52%, transparent 62%);
  transform: translateX(-110%);
  animation: cw-shine 1s ease-out .35s forwards;
}
@keyframes cw-shine { to { transform: translateX(110%); } }
/* あそび方デモ: 実物レンダラのミニ板チョコ＋指ゴースト */
.cw-demo-wrap { position: relative; width: 216px; margin: 0 auto; }
.cw-demo.cw-board { max-width: 216px; padding: 8px; border-radius: 12px; margin: 0 auto; }
.cw-demo-hand {
  position: absolute; left: 0; top: 0; font-size: 30px; opacity: 0; pointer-events: none;
  transition: transform .45s ease, opacity .25s; z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(30, 14, 4, .4));
}

/* ==== ぱぱっとパーティ（papatto）: ずかん（スタンプ帳） ==== */
/* ずかん: ラベルが1語から短い命令文になったので横並びの索引レイアウトにする（2026-07-25） */
.pp-stamps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px; margin: 12px 0 16px;
}
.pp-stamp {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 9px;
  padding: 9px 26px 9px 10px; border: 0; cursor: pointer;
  background: #fff8ea; border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(58, 33, 16, .14);
  font-family: inherit; text-align: left;
}
.pp-stamp.off { filter: grayscale(1); opacity: .5; }
.pp-stamp-ic { font-size: 27px; line-height: 1.1; flex: 0 0 auto; }
.pp-stamp-nm {
  font-size: .72rem; font-weight: 800; color: #6a4a2a; text-align: left;
  line-height: 1.25; flex: 1 1 auto; overflow-wrap: anywhere;
}
.pp-stamp-bd { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); font-size: 15px; }

/* ================= ちくちくししゅう（stitch） ================= */
/* 盤: リネン地。列ヒントは上・行ヒントは左。5マスごとに太めの目印線 */
.st-board {
  display: grid; gap: 0; touch-action: none; user-select: none;
  background: #f6efe2;
  background-image: repeating-linear-gradient(0deg, rgba(160,140,105,.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(160,140,105,.08) 0 1px, transparent 1px 5px);
  border: 3px solid #a87840; border-radius: 12px; padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(58,33,16,.18), 0 2px 8px rgba(58,33,16,.12);
  margin: 0 auto; max-width: 430px;
}
.st-corner { }
.st-clue { display: flex; align-items: center; justify-content: flex-end; gap: 2px; color: #6b4423; }
.st-clue span {
  font-size: .8rem; font-weight: 800; line-height: 1;
  min-width: 12px; text-align: center;
  transition: color .18s, opacity .18s;
}
.st-big .st-clue span { font-size: .68rem; min-width: 10px; }
.st-clue-col { flex-direction: column; justify-content: flex-end; padding-bottom: 3px; }
.st-clue-row { flex-direction: row; padding-right: 4px; }
.st-clue span.ok { color: #c2b193; opacity: .75; }
/* マス: 布目。×ステッチは2本の斜めバー（::before/::after）＝完成時に配色へ染まる */
.st-cell {
  position: relative; aspect-ratio: 1 / 1;
  border: 1px solid rgba(150,125,88,.38);
  border-radius: 2px; cursor: pointer;
  transition: background .12s;
  /* 糸色のデフォルト。実際の色は syncCell がセル自身のインライン --th で上書きする
     （.st-x 側に宣言すると継承より自分の宣言が勝ち、全マス一色に戻るので置かないこと） */
  --th: #a84a68;
}
.st-cell.g5v { border-right-width: 2px; border-right-color: rgba(120,95,58,.6); }
.st-cell.g5h { border-bottom-width: 2px; border-bottom-color: rgba(120,95,58,.6); }
.st-clue-col.g5v { border-right: 2px solid rgba(120,95,58,.35); }
.st-clue-row.g5h { border-bottom: 2px solid rgba(120,95,58,.35); }
.st-cell .st-x, .st-cell .st-x::after, .st-cell .st-dot { position: absolute; pointer-events: none; }
.st-cell .st-x {
  inset: 14%; opacity: 0; transform: scale(.4) rotate(-8deg);
  transition: opacity .14s, transform .18s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0.6px 0.8px 0 rgba(58,33,16,.22));
}
.st-cell .st-x::before, .st-cell .st-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 118%; height: 26%; border-radius: 99px;
  background: var(--th);
  box-shadow: inset 0 -1px 0 rgba(58,33,16,.25);
  /* backgroundのtransitionは置かない: 旧「完成時に--fcで染める」設計の名残で、今は最初から
     本物の糸色。遷移があると非表示タブ復帰時に開始値(デフォ色)で固まって見える芽にもなる */
}
.st-cell .st-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.st-cell .st-x::after { transform: translate(-50%,-50%) rotate(-45deg); }
.st-cell.fill .st-x { opacity: 1; transform: scale(1) rotate(0); }
.st-cell .st-dot {
  left: 50%; top: 50%; width: 22%; height: 22%;
  transform: translate(-50%,-50%) scale(0); border-radius: 50%;
  background: #7a9ab8; box-shadow: 0 0 0 2px rgba(255,253,245,.75);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}
.st-cell.mark .st-dot { transform: translate(-50%,-50%) scale(1); }
.st-cell.pop { animation: stPop .2s; }
@keyframes stPop { 40% { transform: scale(1.12); } }
.st-board.marking .st-cell { cursor: crosshair; }
/* 完成: 格子としるしが消えて絵に染まる（糸色はプレイ中から --th で本物の色）。
   完成後は×を太らせてほぼベタ塗りに＝細い×の格子だと絵がスカスカに見える（2026-07-29オーナー指摘） */
.st-board.done .st-cell { border-color: transparent; transition: border-color .5s; cursor: default; }
.st-board.done .st-cell .st-x { inset: 3%; }
.st-board.done .st-cell .st-x::before, .st-board.done .st-cell .st-x::after { height: 42%; width: 128%; }
.st-board.done .st-cell .st-dot { transform: translate(-50%,-50%) scale(0); }
.st-board.done .st-clue span { opacity: 0; transition: opacity .5s; }
.st-board.done .st-cell.fill .st-x { animation: stSettle .5s both; }
@keyframes stSettle {
  0% { transform: scale(1); }
  45% { transform: scale(1.18) rotate(3deg); }
  100% { transform: scale(1); }
}
/* モード切替 */
.st-tools { display: flex; gap: 8px; margin: 12px 0 4px; }
.st-tool {
  flex: 1; padding: 11px 4px; border: 0; cursor: pointer; font-family: inherit;
  font-size: .95rem; font-weight: 800; color: #6a4a2a;
  background: #f4ecdc; border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(58,33,16,.14);
}
.st-tool.active {
  color: #fffdf5; background: #a84a68;
  box-shadow: inset 0 -3px 0 rgba(58,33,16,.25);
}
/* 結果の額装 */
.st-hoop-wrap { display: flex; justify-content: center; margin: 6px 0 2px; }
.st-artname { text-align: center; font-size: .95rem; margin: 2px 0 6px; }
.st-artname b { font-size: 1.1rem; }
/* さくひんちょう */
.st-album-n { margin-left: 8px; font-size: .8rem; font-weight: 800; opacity: .75; }
.st-album-sec { margin: 14px 0 4px; }
.st-album-h { font-weight: 800; color: #6a4a2a; margin-bottom: 8px; }
.st-album-h span { font-size: .78rem; opacity: .7; margin-left: 6px; }
.st-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.st-frame {
  border: 0; background: #fdf8ec; border-radius: 14px; cursor: pointer; font-family: inherit;
  padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: inset 0 0 0 2px rgba(58,33,16,.12);
}
.st-frame.todo { opacity: .8; }
.st-frame-nm { font-size: .72rem; font-weight: 800; color: #6a4a2a; line-height: 1.2; }
.st-frame-t { font-size: .68rem; color: #9a7a52; }
/* あそびかたデモ */
.st-demo-wrap { position: relative; width: 200px; margin: 0 auto; }
.st-demo { width: 200px; }
.st-demo .st-clue span { font-size: .62rem; min-width: 9px; }
.st-demo-hand {
  position: absolute; left: 0; top: 0; font-size: 26px; opacity: 0;
  transition: transform .5s cubic-bezier(.4,.1,.2,1), opacity .3s;
  pointer-events: none; z-index: 3;
}
/* 狭幅: 盤の額縁を薄くしパネル余白へ食い込ませて、おに(12×12)のマスを1pxでも大きく */
@media (max-width: 430px) {
  .st-board { padding: 4px; border-width: 2px; margin-left: -8px; margin-right: -8px; max-width: none; }
  .st-big .st-clue span { font-size: .62rem; min-width: 9px; }
}

/* ================= おちばはき（ochiba.js）================= */
.ob-board {
  --obw: 10;
  display: grid;
  grid-template-columns: repeat(var(--obw), 1fr);
  gap: 2px;
  background: #caa06a;
  border: 3px solid #8a5f38;
  border-radius: 12px;
  padding: 5px;
  margin: 10px auto 2px;
  max-width: 430px;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.ob-cell {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 5px; cursor: pointer; overflow: hidden;
  background: #e8a854;
  box-shadow: inset 0 -2px 0 rgba(58,33,16,.22), inset 0 1px 0 rgba(255,253,245,.35);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: clamp(.8rem, 4vw, 1.15rem);
  transition: transform .12s;
}
.ob-cell.alt { background: #e09a44; }
/* 落ち葉タイル: 4種の葉を回転違いで散らす（未開マスの顔） */
.ob-leaf {
  position: absolute; inset: 12%;
  background: #c95f28;
  border-radius: 82% 6% 82% 6%;
  box-shadow: inset 0 0 0 1.5px rgba(255,240,200,.25);
  transform: rotate(8deg);
  transition: opacity .28s, transform .38s cubic-bezier(.4,.1,.2,1);
}
.ob-leaf::before {
  content: ""; position: absolute; left: 48%; top: 8%; width: 7%; height: 84%;
  background: rgba(255,236,190,.4); border-radius: 99px; transform: rotate(45deg);
}
.ob-l1 { transform: rotate(98deg); background: #d87838; }
.ob-l2 { transform: rotate(-64deg); background: #b85024; }
.ob-l3 { transform: rotate(170deg); background: #d8883c; }
/* 開いたマス＝土。--obd の遅延で波開示 */
.ob-cell.open {
  background: #f6ecd8; cursor: default;
  box-shadow: inset 0 2px 3px rgba(58,33,16,.14);
}
.ob-cell.open .ob-leaf {
  opacity: 0; transform: translateY(-70%) rotate(140deg) scale(.6);
  transition-delay: var(--obd, 0ms);
}
.ob-cell.open { animation: obSoil .3s both; animation-delay: var(--obd, 0ms); }
@keyframes obSoil {
  0% { background: #e8a854; }
  100% { background: #f6ecd8; }
}
/* 数字は葉と別要素＝葉が舞ってから数字がふわっと出る */
.ob-num {
  position: relative; z-index: 1; font-style: normal;
  animation: obNumIn .25s both;
  animation-delay: calc(var(--obd, 0ms) + 160ms);
}
@keyframes obNumIn {
  0% { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ob-cell.open, .ob-num, .ob-cell.nut::after, .ob-cell.nut.shiny::after { animation: none; }
  .ob-leaf { transition: none; }
  .ob-board.shake { animation: none; }
}
.ob-cell.n1 { color: #4a78c8; } .ob-cell.n2 { color: #4a8a3a; }
.ob-cell.n3 { color: #d85a5a; } .ob-cell.n4 { color: #6a5ad0; }
.ob-cell.n5 { color: #a84a30; } .ob-cell.n6 { color: #3a8ca6; }
.ob-cell.n7 { color: #6a4a2a; } .ob-cell.n8 { color: #3a3a3a; }
/* 開いた数字のコード開け可能感（押せる見た目を薄く残す） */
.ob-cell.open[data-n] { cursor: pointer; }
/* 🌰しるし */
.ob-cell.mark::after {
  content: "🌰"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.9rem, 4.4vw, 1.25rem);
  animation: obPop .18s;
  text-shadow: 0 1px 0 rgba(255,253,245,.6);
}
.ob-board.marking .ob-cell:not(.open) { cursor: crosshair; }
/* イガグリ開示・踏んだマス */
.ob-cell.nut { background: #f6ecd8; }
.ob-cell.nut .ob-leaf { opacity: 0; }
.ob-cell.nut::after {
  content: "🌰"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.95rem, 4.6vw, 1.3rem);
}
.ob-cell.nut.boom { background: #f8d0c0; }
.ob-cell.nut.boom::after { animation: obBoom .5s; }
@keyframes obBoom {
  0% { transform: scale(.6) rotate(-20deg); }
  40% { transform: scale(1.5) rotate(14deg); }
  100% { transform: scale(1); }
}
.ob-board.shake { animation: obShake .5s; }
@keyframes obShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
/* 🌱スタートマス（自動開示済みの目印） */
.ob-cell.sprout::before {
  content: "🌱"; position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.8rem, 3.8vw, 1.1rem); opacity: .85; pointer-events: none;
}
/* クリア: 栗がつやつやに（波） */
.ob-cell.nut.shiny { background: #fdf3dc; }
.ob-cell.nut.shiny::after {
  animation: obShine .6s both; animation-delay: var(--obd, 0ms);
  filter: drop-shadow(0 0 4px rgba(244,192,90,.9));
}
@keyframes obShine {
  0% { transform: scale(1); }
  50% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1.05); }
}
.ob-board.done { border-color: #c9a250; }
.ob-cell.pop { animation: obPop .2s; }
@keyframes obPop { 40% { transform: scale(1.12); } }
/* イテテ画面・クリア画面の小物 */
.ob-fail-nut { font-size: 52px; text-align: center; animation: obBoom .6s; }
.ob-clear-art { font-size: 34px; text-align: center; letter-spacing: 6px; margin: 4px 0; }
/* あそびかたデモ: 数字のまわり3×3の「範囲」を光る枠で示し、中のイガグリを透かす */
.ob-cell.rng {
  box-shadow: inset 0 0 0 3px rgba(244, 192, 90, .95), inset 0 -2px 0 rgba(58, 33, 16, .22);
  z-index: 1;
}
.ob-cell.rngc {
  box-shadow: inset 0 0 0 3px #e07a3a, inset 0 2px 3px rgba(58, 33, 16, .14);
  z-index: 1;
}
.ob-cell.rngc .ob-num { animation: obPeekNum 1s infinite; }
@keyframes obPeekNum { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.ob-cell.peek::after {
  content: "🌰"; position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.9rem, 4.4vw, 1.25rem);
  animation: obPeek 1s infinite;
}
@keyframes obPeek {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.18); opacity: .95; }
}
/* あそびかたデモ */
.ob-demo-wrap { position: relative; width: 228px; margin: 0 auto; }
.ob-demo-wrap .ob-board { gap: 2px; padding: 4px; border-width: 2px; margin: 0; }
.ob-demo-wrap .ob-cell { font-size: .78rem; }
.ob-demo-wrap .ob-cell.mark::after, .ob-demo-wrap .ob-cell.nut::after { font-size: .8rem; }
.ob-demo-wrap .ob-cell.sprout::before { font-size: .72rem; }
.ob-demo-hand {
  position: absolute; left: 0; top: 0; font-size: 26px; opacity: 0;
  transition: transform .5s cubic-bezier(.4,.1,.2,1), opacity .3s;
  pointer-events: none; z-index: 3;
}
@media (max-width: 430px) {
  .ob-board { padding: 4px; border-width: 2px; margin-left: -8px; margin-right: -8px; max-width: none; }
}

/* ================= クッキーやき（cookie.js）================= */
.ck-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  background: linear-gradient(180deg, #9aa0a9, #7e848d);
  border: 3px solid #5a5f66;
  border-radius: 14px;
  padding: 7px;
  margin: 10px auto 4px;
  max-width: 430px;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
/* 空きマス＝トレーの丸いくぼみ（クッキーの置き場所だと一目で分かる） */
.ck-cell {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #8f959e, #737981 72%);
  box-shadow: inset 0 2px 4px rgba(30,33,38,.35), inset 0 -1px 0 rgba(255,255,255,.16);
  transition: box-shadow .12s;
}
/* クッキー5種（丸くふっくら・チョコチップ/ジャム/抹茶/ココア/シュガー） */
.ck-cell.fill, .ck-piece .ck-dough {
  border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(90,50,20,.38), inset 0 2px 3px rgba(255,242,214,.6), 0 1px 2px rgba(30,33,38,.3);
}
.ck-cell.fill.c0, .ck-piece.c0 .ck-dough { background:
  radial-gradient(circle at 30% 28%, #6b4226 10%, transparent 11%),
  radial-gradient(circle at 66% 38%, #6b4226 9%, transparent 10%),
  radial-gradient(circle at 44% 66%, #6b4226 10%, transparent 11%),
  radial-gradient(circle at 42% 35%, #f6d18b, #d99e4f 80%); }
.ck-cell.fill.c1, .ck-piece.c1 .ck-dough { background:
  radial-gradient(circle at 34% 30%, #3a2414 10%, transparent 11%),
  radial-gradient(circle at 64% 60%, #3a2414 9%, transparent 10%),
  radial-gradient(circle at 42% 35%, #a06a3e, #7b4f2e 80%); }
.ck-cell.fill.c2, .ck-piece.c2 .ck-dough { background:
  radial-gradient(circle at 32% 32%, #fffdf5 8%, transparent 9%),
  radial-gradient(circle at 62% 58%, #c9406a 9%, transparent 10%),
  radial-gradient(circle at 48% 70%, #fffdf5 7%, transparent 8%),
  radial-gradient(circle at 42% 35%, #f8bccd, #e58ba6 80%); }
.ck-cell.fill.c3, .ck-piece.c3 .ck-dough { background:
  radial-gradient(circle at 36% 30%, #5e7a3e 9%, transparent 10%),
  radial-gradient(circle at 62% 62%, #5e7a3e 9%, transparent 10%),
  radial-gradient(circle at 42% 35%, #b8d191, #93af67 80%); }
.ck-cell.fill.c4, .ck-piece.c4 .ck-dough { background:
  radial-gradient(circle at 32% 30%, #fff9e8 9%, transparent 10%),
  radial-gradient(circle at 60% 56%, #fff9e8 8%, transparent 9%),
  radial-gradient(circle at 42% 35%, #f7e6c4, #e0c28c 80%); }
.ck-cell.pop { animation: ckPop .18s; }
@keyframes ckPop { 40% { transform: scale(1.1); } }
/* ゴースト＆焼き上がり予告グロー（丸くぼみに合わせる） */
.ck-cell.ghost { box-shadow: inset 0 0 0 3px rgba(255,248,230,.95), inset 0 0 0 99px rgba(255,248,230,.30); }
.ck-cell.glow { box-shadow: inset 0 0 0 3px rgba(244,192,90,.95), inset 0 0 0 99px rgba(244,192,90,.34); }
/* 焼き上がりフラッシュ（回収されたくぼみに金色の余韻） */
.ck-cell.baked::after {
  content: ""; position: absolute; inset: -3%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8, #f4c05a 70%);
  animation: ckBakeF .6s forwards;
  pointer-events: none;
}
@keyframes ckBakeF {
  0% { opacity: 1; transform: scale(.9); }
  55% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1); }
}
/* トレイ */
.ck-tray { display: flex; gap: 10px; margin: 12px 0 4px; touch-action: none; }
.ck-slot {
  flex: 1; min-height: 92px; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 46%, #fffdf5 58%, #ece0c6 62%, #f6eedd);
  box-shadow: inset 0 0 0 2px rgba(58,33,16,.12), inset 0 -3px 6px rgba(58,33,16,.08);
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.ck-piece { display: inline-grid; gap: 2px; cursor: grab; touch-action: none; }
.ck-piece .ck-dough { border-radius: 4px; }
.ck-piece i:not(.ck-dough) { visibility: hidden; }
.ck-piece.lift { opacity: .35; filter: grayscale(.4); }
.ck-piece.dead { opacity: .35; filter: grayscale(1); }
.ck-piece.float {
  position: fixed; left: 0; top: 0; z-index: 60;
  pointer-events: none; gap: 3px;
  filter: drop-shadow(0 6px 10px rgba(58,33,16,.35));
}
/* スコアポップ */
.ck-score { font-size: 1.15rem; color: #6a4a2a; }
.ck-pop {
  position: absolute; left: 0; right: 0; top: 34%;
  text-align: center; font-weight: 900; font-size: 1.3rem; color: #c95f28;
  text-shadow: 0 2px 0 rgba(255,253,245,.9);
  animation: ckRise 1.1s both; pointer-events: none; z-index: 5;
}
@keyframes ckRise {
  0% { opacity: 0; transform: translateY(12px) scale(.8); }
  25% { opacity: 1; transform: translateY(0) scale(1.08); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}
.panel { position: relative; }
/* 遊び方デモ・終了 */
.ck-demo-wrap { position: relative; width: 236px; margin: 0 auto; }
.ck-demo-wrap .ck-board { gap: 2px; padding: 4px; border-width: 2px; margin: 0; }
.ck-board.over { filter: saturate(.45) brightness(.85); }
@media (prefers-reduced-motion: reduce) {
  .ck-cell.baked, .ck-cell.pop, .ck-pop { animation: none; }
}

/* クッキーやき: 遊び方デモのミニトレイ＆浮き生地・初回コーチ */
.ck-demo-tray {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  height: 58px; margin-top: 8px; box-sizing: border-box;
  background: #f4ecdc; border-radius: 10px; padding: 6px;
  box-shadow: inset 0 0 0 2px rgba(58,33,16,.1);
  overflow: visible;
}
.ck-demo-wrap { position: relative; }
.ck-demo-wrap .ck-piece.demo-float {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  transition: transform .55s cubic-bezier(.4,.1,.2,1);
  filter: drop-shadow(0 5px 8px rgba(58,33,16,.3));
}
.ck-piece.used { visibility: hidden; }
.ck-coach-bubble {
  text-align: center; font-weight: 800; color: #c95f28; font-size: .95rem;
  margin: 8px 0 0; animation: ckBob 1.3s ease-in-out infinite;
}
@keyframes ckBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.ck-coach-piece {
  position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none;
  opacity: .9; transition: transform 1.15s ease, opacity 1.15s ease;
  filter: drop-shadow(0 5px 8px rgba(58,33,16,.3));
}
@media (prefers-reduced-motion: reduce) {
  .ck-coach-bubble, .ck-coach-piece, .ck-demo-wrap .ck-piece.demo-float { animation: none; transition: none; }
}


/* JS起動前のちらつき対策: #app が空のあいだはゲーム領域ぶんのスケルトン（シマー）を出す。
   エンジンが innerHTML を入れた瞬間 :empty が外れて自動解除（2026-08-02） */
#app:empty {
  display: block;
  min-height: clamp(320px, 62vh, 560px);
  border-radius: var(--radius);
  background: linear-gradient(100deg, #f6efe3 40%, #fdf9ef 50%, #f6efe3 60%);
  background-size: 200% 100%;
  animation: gdSkel 1.1s linear infinite;
}
@keyframes gdSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  #app:empty { animation: none; }
}