/* ============================================================
   つるぎ町デジタルスタンプラリー 仮スタイル
   ※デザイナーさんが入ったら全面差し替え前提のシンプル版。
   　色・余白・文字サイズはCSS変数にまとめてあるので差し替えやすい。
   ============================================================ */

/* iPhoneの「文字サイズ」設定に追従させる仕込み。
   iOSではこの指定で1remがユーザー設定サイズになる（他のOSでは無視されて通常の16px基準） */
html { font: -apple-system-body; }

:root {
  --color-main: #2c5f2d;      /* つるぎ町の山をイメージした深緑（仮） */
  --color-accent: #f0a500;    /* スタンプの金色（仮） */
  --color-bg: #f7f5ef;
  --color-text: #333;
  --color-card: #fff;
  --radius: 12px;

  /* 文字サイズの段階表（rem＝OSの文字サイズ設定に追従する）
     日本語スマホUIの一般基準（本文16px以上）＋幅広い年齢層向けに大きめ設計 */
  --fs-hero: 1.5rem;     /* 24相当：メニューの大ボタン */
  --fs-title: 1.0625rem; /* 17相当：見出し・セリフ・主要ボタン */
  --fs-body: 1rem;       /* 16相当：本文・ボタン */
  --fs-sub: 0.9375rem;   /* 15相当：やや小さい本文 */
  --fs-note: 0.875rem;   /* 14相当：補足・ステータス */
  --fs-min: 0.8125rem;   /* 13相当：最小サイズ（バッジ・注記。これ未満は使わない） */
}

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

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: var(--fs-body);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 480px;          /* スマホ想定。PCでは中央に寄せる */
  margin: 0 auto;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ---- ヘッダー ---- */
#app-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-main);
  color: #fff;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* v430：音の鈴（神社の本坪鈴）。ヘッダー右端＋メニューは地図の右上（洋平承認位置）。
   iOS対策でAudio要素はmuted制御（app.jsのmkAudio/setSoundMuted）。ミュート中＝色落ち＋朱の斜線 */
.bell-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 16, 10, 0.55);
  border: 1.5px solid rgba(217, 182, 102, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
#app-header .bell-btn { margin-left: auto; }
.bell-btn svg { width: 21px; height: 21px; }
.bell-btn .bell-tie { fill: #8a6a30; }
.bell-btn .bell-body { fill: #e7c56f; stroke: #8a6a30; stroke-width: 1.2; }
.bell-btn .bell-line { stroke: #8a6a30; stroke-width: 1.4; fill: none; }
.bell-btn .bell-mouth { fill: #6d5222; }
.bell-btn .bell-mouth-line { stroke: #6d5222; stroke-width: 1.6; fill: none; }
.bell-btn .bell-slash { stroke: #e05545; stroke-width: 2.4; fill: none; display: none; stroke-linecap: round; }
.bell-btn.muted .bell-body { fill: #9a9a94; stroke: #6d6d68; }
.bell-btn.muted .bell-tie,
.bell-btn.muted .bell-mouth { fill: #6d6d68; }
.bell-btn.muted .bell-line { stroke: #6d6d68; }
.bell-btn.muted .bell-mouth-line { stroke: #6d6d68; }
.bell-btn.muted .bell-slash { display: block; }
.menu-fixed { position: relative; }
/* v435：.menu-fixed button の既定（白地・角丸12px・影）に負けて白い四角になっていた
   （洋平指摘）→詳細度を上げて他画面と同じ「黒透過×金枠の丸」に統一 */
.menu-fixed button.bell-btn {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px)); /* v434：写真の右上スミへ（洋平FB） */
  right: 18px;
  z-index: 5;
  background: rgba(20, 16, 10, 0.55);
  border: 1.5px solid rgba(217, 182, 102, 0.9);
  border-radius: 50%;
  box-shadow: none;
}
/* v432：戦闘中の鈴＝「にげる」（右上）の左隣。少し小さめで操作の邪魔をしない */
#battle-bell {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 88px;
  z-index: 2;
  width: 32px;
  height: 32px;
}
#battle-bell svg { width: 19px; height: 19px; }
#app-header h1 { font-size: var(--fs-title); flex: 1; }
#btn-back {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 1.125rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

/* ---- 画面共通 ---- */
/* v164：内部スクロールコンテナ方式（洋平選択＝バウンスの弾みとヘッダー固定の両立）。
   ページ（body）はスクロールせず、#screenの中だけがスクロールする＝
   ヘッダーはコンテナの外で絶対に動かず、中身は端でびよんと弾む（iOSネイティブと同じ体験）。
   v163のバウンス全無効（overscroll none）はこの方式では不要になり撤去 */
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: column;
}

/* v162：z-index:0でスタッキングコンテキスト化＝bg-fixed(z:-1)の描画位置を
   「#screen内の最背面・bodyの地色より上」に仕様レベルで確定させる
   （素のz:-1はiOS Safariがbody背景の下に描いてしまい、背景画像が見えなかった・洋平の実機報告） */
#screen {
  padding: 16px;
  padding-bottom: 80px;
  position: relative; /* v139：パーティクル層の基準 */
  z-index: 0;         /* v162：コンテキスト化 */
  /* v164：スクロールコンテナ化 */
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; /* 端のバウンスは残し、外への伝播だけ止める */
}

/* v161：ビューポート固定の背景レイヤー（スクロールしても背景は動かない・洋平要望）。
   iOSがbackground-attachment:fixed非対応のためdiv方式。z-index:-1＝コンテンツの奥・地色の手前 */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0); /* iOSの合成レイヤー安定化（fixed要素の描画抜け対策の定番） */
}

.card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.card.tappable { cursor: pointer; }
.card.tappable:active { transform: scale(0.98); }

.badge {
  display: inline-block;
  font-size: var(--fs-min);
  padding: 2px 10px;
  border-radius: 999px;
  background: #e8e4d8;
  margin-right: 6px;
}
.badge.level { background: var(--color-accent); color: #fff; }
.badge.collect { background: #b8860b; color: #fff; } /* コースで集めるコレクションの種類 */

/* コース選択：案内役の顔アイコン（会話用立ち絵から切り出したface_icon画像。
   丸の背景色はキャラのイメージカラー） */
.navi-row { display: flex; gap: 8px; margin: 8px 0 10px; }
.navi-face {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.navi-face img { width: 100%; height: 100%; display: block; }
/* コース選択：写真バナー型カード（文字は画像に焼き込み済み。
   1080×400＝2.7:1固定で幅いっぱいに縮小されるだけなので、端末が変わっても崩れない。
   ※バナー画像は3コースとも1080×400で統一すること */
.banner-card { padding: 0; overflow: hidden; position: relative; }
/* v431：所要時間の目安（コース選択カードのフッター行・洋平FB）。
   バナーの絵には重ねず、下に生成りの帯として1行足す */
.banner-card .banner-stage { position: relative; }
.course-time {
  padding: 7px 12px 8px;
  font-size: 12px;
  color: #6a6257;
  background: #faf8f2;
  border-top: 1px solid #eee6d6;
}
.course-banner {
  width: 100%;
  aspect-ratio: 75 / 29; /* v224：図鑑バナーと同寸（750×290）の新版に統一（洋平作り直し中） */
  object-fit: cover;
  display: block;
}
/* v224：コースの小札は右下（新バナーは右下が空きスペース・洋平指定）。
   図鑑は左下のままだが「白い小札=獲得数」の記号は共通なので読み違えない。
   v227：サブコピー帯との重なりを避けて少し下げ＋ひと回り小さく（洋平指摘） */
.banner-card .zb-count,
.course-head .zb-count {
  left: auto;
  right: 10px;
  bottom: 5px;
  font-size: 11.5px;
  padding: 1px 9px;
}
/* v232：コース詳細の表紙（選択画面と同じバナー＋進捗小札。タップ不可の飾り） */
.course-head {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(90, 65, 20, 0.2);
}
/* v232：説明札（白地×金縁・案内役の顔アイコン付き） */
.course-info {
  margin-top: 12px;
  background: rgba(255, 253, 247, 0.92);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 3px 10px rgba(120, 90, 30, 0.12);
}
/* v233：説明札はアコーディオン（初期閉・2回目以降はスポット一覧が主役） */
.ci-summary {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: bold;
  color: #4a3a1a;
  letter-spacing: 0.04em;
}
.ci-summary::before {
  /* v234：見出しの臙脂角＝戦闘準備「■集めた力」と同じ見出し言語 */
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-right: 8px;
}
.ci-summary::-webkit-details-marker { display: none; }
.ci-summary::after { content: '▾'; float: right; color: #b8923f; transition: transform 0.2s; }
.course-info[open] .ci-summary::after { transform: rotate(180deg); }
.ci-body { margin-top: 10px; border-top: 1px solid rgba(184, 146, 63, 0.35); padding-top: 10px; }
.ci-desc { font-size: 13px; line-height: 1.8; color: #4a463c; }
.ci-target { margin-top: 6px; font-size: 12px; color: #6b5a33; }
.ci-guide { margin-top: 6px; font-size: 11.5px; color: #8a7a55; }
/* v233：写真主役のスポットグリッド（spot.photo設定コースで有効・2列）。
   訪問すると写真の右下にスタンプが押される＝旅のアルバム×判子 */
.spot-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.spot-photo-cell {
  position: relative;
  background: rgba(255, 253, 247, 0.92);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  border-radius: 12px;
  padding: 6px; /* v235：名前は写真上のオーバーレイになったので下余白は不要 */
  box-shadow: 0 3px 10px rgba(120, 90, 30, 0.12);
  overflow: hidden; /* v240：光沢スイープをセル内に収める */
  cursor: pointer;
}
/* v250：スポット詳細のヒーロー写真（一覧セルの拡大版・金装飾と周回光を共有） */
.spot-hero {
  position: relative;
  background: rgba(255, 253, 247, 0.92);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(120, 90, 30, 0.15);
  overflow: hidden;
  isolation: isolate;
}
.sh-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* v338：スポットリスト（.sp-photo）と同じ正方形に統一（洋平指示） */
  object-fit: cover;
  border-radius: 8px;
}
.spot-hero .sh-seal {
  right: 14px;
  bottom: 14px;
  width: 34%;
}
.si-desc { font-size: var(--fs-body); line-height: 1.9; color: #4a463c; } /* v251：本文は規定サイズ（16px相当） */
/* 獲得済みの帯（金）と、押すボタン（緋色の帯＝撮影バーと同じ言語） */
.spot-done {
  margin-top: 12px;
  padding: 11px;
  text-align: center;
  background: linear-gradient(160deg, #eed393, #cfa94e 45%, #a8862f);
  color: #532c1a;
  text-shadow: 0 1px 1px rgba(255, 242, 205, 0.6);
  border-radius: var(--radius);
  font-weight: bold;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(120, 88, 26, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2);
}
.stamp-go {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 15px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #c8433c, #a52c27);
  color: #f7e3ae;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(120, 30, 24, 0.35);
  cursor: pointer;
}
.stamp-go:disabled { opacity: 0.6; }
/* v240：訪問済み＝「勝ち取った金」の言語（台紙の金紙はJSが敷く）。
   v242：金の光彩＋二重の額装で豪華に（縁の線だけでは写真に負ける・洋平指摘） */
.spot-hero.stamped,
.spot-photo-cell.stamped {
  border: 2.5px solid #c9a648;
  box-shadow:
    0 0 0 1px rgba(255, 235, 170, 0.65),
    0 0 14px rgba(201, 166, 72, 0.6),
    0 3px 12px rgba(160, 120, 40, 0.3);
  /* v246：スタッキングコンテキストを閉じる＝::before(z:-1)が「セル背景の上・写真の下」に
     収まる（これが無いと不透明背景の裏まで沈んで光が見えない・洋平報告） */
  isolation: isolate;
}
/* v244：写真の縁にも金の光が周回（判子のリングと同じ言語・洋平案）。
   四角形はrotate()だと枠ごと回ってしまうため、@propertyでグラデ角度だけを回す
   （非対応の古いiOSでは光が静止表示されるだけ＝害なし） */
@property --photo-spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.spot-hero.stamped::before,
.spot-photo-cell.stamped::before {
  /* v247：方式変更＝「中央をくり抜いたリング」を写真の上に重ねる（maskのくり抜き）。
     背後に敷いて縁だけ覗かせる方式はz順とSafariの描画癖で不安定だったため転換。
     リングの帯はpaddingの幅＝写真の縁に半分かかる位置を光が周回する */
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 11px;
  padding: 8px; /* v248：帯を太く */
  background: conic-gradient(from var(--photo-spin),
    /* v248：芯に白を挟んだ「白熱する金」＋弧を拡大＝光を強く（洋平要望） */
    transparent 0deg, rgba(255, 222, 128, 1) 22deg, rgba(255, 250, 225, 1) 40deg,
    rgba(255, 222, 128, 1) 58deg, transparent 95deg,
    transparent 165deg, rgba(255, 226, 140, 0.9) 205deg, rgba(255, 245, 215, 0.95) 220deg,
    rgba(255, 226, 140, 0.9) 235deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: photo-ring 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes photo-ring {
  to { --photo-spin: 360deg; }
}
/* v302：コンプリートしたコースはバナーの縁も同じ金の光が周回（洋平指示）。
   リングの作りはスポット写真と同一＝「全部集めた印」の言語をコース選択まで貫く */
.banner-card.complete::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: calc(var(--radius) - 3px);
  padding: 8px;
  background: conic-gradient(from var(--photo-spin),
    transparent 0deg, rgba(255, 222, 128, 1) 22deg, rgba(255, 250, 225, 1) 40deg,
    rgba(255, 222, 128, 1) 58deg, transparent 95deg,
    transparent 165deg, rgba(255, 226, 140, 0.9) 205deg, rgba(255, 245, 215, 0.95) 220deg,
    rgba(255, 226, 140, 0.9) 235deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: photo-ring 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* v244：獲得セルの名前小札は金に（コース選択の金小札・討伐済みボタンと同じ金の言語） */
.spot-photo-cell.stamped .sp-name {
  background: linear-gradient(160deg, #eed393, #cfa94e 45%, #a8862f);
  color: #532c1a;
  text-shadow: 0 1px 1px rgba(255, 242, 205, 0.6);
  box-shadow: inset 0 0 0 1px rgba(120, 88, 26, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.spot-hero.stamped::after,
.spot-photo-cell.stamped::after {
  /* 金の内枠＝図鑑・証明書と同じ額装の二重線（写真の縁に重なる） */
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 228, 150, 0.8);
  border-radius: 9px;
  pointer-events: none;
  z-index: 3;
}
.spot-photo-cell .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.5), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.spot-photo-cell:active { transform: scale(0.97); }
.sp-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* v236：正方形（640×640）＝名前小札の下でも被写体が見える縦の余裕（洋平判断） */
  object-fit: cover;
  border-radius: 8px;
}
.sp-photo-none { background: #efe6d0; } /* 写真待ちのスポットは和紙色の空マス */
/* v239：写真が無いマスでは判子を中央に（右下は「写真の隅に押す」意味があってこそ。
   空マスの間延びも中央の判子が締める）※v243でラッパー化・DOM順変更に伴い`~`へ */
.sp-photo-none ~ .sp-seal {
  right: auto;
  left: 50%;
  bottom: auto;
  top: 42%;
  transform: translate(-50%, -50%);
}
.sp-photo-none ~ .sp-hole {
  right: auto;
  left: 50%;
  bottom: auto;
  top: 42%;
  transform: translate(-50%, -50%);
}
/* v243：番号バッジ（.sp-num）は廃止（洋平判断＝番号は不要・予告はsp-holeが担う） */
@media (prefers-reduced-motion: reduce) {
  .sp-seal { animation: none; }
  .sp-seal::before { animation: none; }
  .spot-photo-cell.stamped::before, .spot-hero.stamped::before { animation: none; }
}
/* v243：判子の入れ物（設計議論の結論＝判子が「面白い！」の主役）。
   ①開くたび「ポンッ」と順に押される登場アニメ（delayはJSが連打順に設定）
   ②金の光が判子の周りをゆっくり周回（::before・--ringdで位相をばらす）
   傾きは無し＝全て垂直（スタンプだけ手押し感を出すと逆に浮く・洋平判断） */
.sp-seal {
  position: absolute;
  right: 4px;
  bottom: 26px;
  width: 58%;
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  animation: stamp-press 0.42s ease-out backwards;
}
.sp-seal::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 218, 120, 0.95) 35deg, transparent 75deg,
    transparent 170deg, rgba(255, 218, 120, 0.55) 210deg, transparent 250deg);
  animation: seal-ring 4.5s linear infinite;
  animation-delay: var(--ringd, 0s);
  filter: blur(1px);
}
@keyframes seal-ring {
  to { transform: rotate(360deg); }
}
@keyframes stamp-press {
  0% { transform: scale(1.7); opacity: 0; }
  60% { transform: scale(0.94); opacity: 1; }
  80% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.sp-stamp {
  /* 白丸シール地（地図ピンと同じ）＝写真の暗部でも絵柄がくっきり */
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
/* v243：未獲得＝「ここに押される」の静かな予告（線だけ・写真はフルカラーのまま透ける） */
.sp-hole {
  position: absolute;
  right: 4px;
  bottom: 26px;
  width: 58%;
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  z-index: 2;
}
.spot-photo-cell .sp-name {
  /* v235：白角丸の小札を写真の下端に重ねる（小札・名前バッジと同じ白角丸言語）。
     v240：判子より背面＋ひと回り軽く＝長い名前でも判子の存在感を食わない。
     ※スコープ必須：無印.sp-nameはスタンプ拡大ポップの既存クラスと衝突する */
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 253, 247, 0.9);
  border-radius: 8px;
  padding: 3px 5px;
  font-size: 11px; /* v242：iOSの可読最小ライン（10.5pxは小型機で読みづらい・洋平指摘）。圧はpadding縮小で抑制済み */
  font-weight: bold;
  color: #4a3a1a;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  z-index: 1;
}
/* v221：コースバナーの光沢スイープ（図鑑と同じ・randomizeShinesが周期をばらす） */
.banner-card .shine,
.course-head .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.35), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}
/* v223：コンプリートの小札は金に変わる（挑む緋→勝ち取った金＝戦闘開始ボタンと同じ言語） */
.zb-count.gold {
  background: linear-gradient(160deg, #eed393, #cfa94e 45%, #a8862f);
  color: #532c1a;
  text-shadow: 0 1px 1px rgba(255, 242, 205, 0.6);
  box-shadow: inset 0 0 0 1px rgba(120, 88, 26, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* コース選択：進捗ドット（獲得＝緑塗り、未獲得＝白抜き） */
.pdots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; align-items: center; }
/* コレクションのサムネイル（獲得＝実物の絵、未獲得＝黒シルエット） */
.cthumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}
.cthumb.locked { filter: brightness(0); opacity: 0.25; }
.pdot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #b5b5ad;
  display: inline-block;
}
.pdot.on { background: var(--color-main); border-color: var(--color-main); }

h2.section-title { font-size: var(--fs-title); margin: 16px 0 8px; color: var(--color-main); }

.course-name { font-size: var(--fs-title); font-weight: bold; margin: 6px 0 4px; }
.course-desc { font-size: var(--fs-sub); color: #666; line-height: 1.7; }
.course-progress { font-size: var(--fs-note); color: var(--color-main); margin-top: 8px; font-weight: bold; }

/* ---- スポット一覧 ---- */
.spot-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spot-stamp-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  color: #ccc;
}
.spot-stamp-mark.stamped {
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
.spot-info { flex: 1; }
.spot-name { font-size: var(--fs-title); font-weight: bold; }
.spot-status { font-size: var(--fs-note); color: #999; }

/* ---- スポット詳細 ---- */
.btn-primary {
  display: block;
  width: 100%;
  background: var(--color-main);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  font-size: var(--fs-title);
  font-weight: bold;
  cursor: pointer;
  margin-top: 16px;
}
.btn-primary:disabled { background: #aaa; }
.btn-secondary {
  display: block;
  width: 100%;
  background: #fff;
  color: var(--color-main);
  border: 2px solid var(--color-main);
  border-radius: var(--radius);
  padding: 12px;
  font-size: var(--fs-body);
  cursor: pointer;
  margin-top: 12px;
}
.gps-status { font-size: var(--fs-sub); color: #666; margin-top: 12px; text-align: center; line-height: 1.7; }

/* ---- コレクション ---- */
/* ---- v146：図鑑ハブ（白×金の雅の間・大判バナー）----
   白和紙×金砂子の台紙（zukan_hub_bg）に、絵バナー4枚＝コース選択のcourse.banner文法の図鑑版。
   v145の黒金の間口カードは1版で卒業（洋平の方針＝黒金は「挑む空間」、
   図鑑は報酬を愛でる空間なので白金で対にする）。絵はPIL仮組み＝洋平の本制作で同名差し替え */
.zukan-banner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(180, 140, 70, 0.45);
  box-shadow: 0 3px 10px rgba(90, 70, 30, 0.16);
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
}
.zukan-banner:active { transform: scale(0.985); }
.zb-img {
  display: block;
  width: 100%;
  aspect-ratio: 750 / 290; /* 画像ロード前から高さ確保＝表示時のガタつき防止 */
  object-fit: cover;
}
/* v147：タイトルは洋平のバナーに焼き込み済み＝HTML側は動的な獲得数の小札だけ左下に重ねる。
   白半透明の札なので、和紙地（スタンプ）でも黒地（漆器）でも読める */
.zb-count {
  position: absolute;
  left: 12px;
  bottom: 9px;
  background: rgba(252, 249, 242, 0.85);
  color: #5a4a28;
  font-size: var(--fs-sub);
  font-weight: bold;
  padding: 2px 11px;
  border-radius: 11px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.zb-go {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(163, 126, 53, 0.9);
  font-weight: bold;
  font-size: 1.25rem;
}
/* v148：バナーの光沢スイープ（パーティバナー.pb-shineと同じ言語・洋平指示）。
   4枚が同時に光ると機械的なので、9秒周期×2.25秒ずらし＝1枚ずつ順繰りに流れる */
.zb-shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.35), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}
.zukan-banner:nth-child(2) .zb-shine { animation-delay: 2.25s; }
.zukan-banner:nth-child(3) .zb-shine { animation-delay: 4.5s; }
.zukan-banner:nth-child(4) .zb-shine { animation-delay: 6.75s; }
@keyframes zb-shine-run {
  0% { transform: translateX(-160%) skewX(-20deg); }
  10% { transform: translateX(420%) skewX(-20deg); } /* 通過0.9秒＝pb-shineと同じ速度感 */
  100% { transform: translateX(420%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .zb-shine { animation: none; }
}

/* ---- v149：コース詳細のスポット一覧（3列グリッド・洋平設計）----
   獲得済み＝キャラスタンプが少し斜めに押される／未獲得＝点線の丸に番号（ここに押される予告）。
   丸とスタンプは同じ占有サイズ＝獲得・未獲得が混ざっても行の高さが揃う */
.spot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.spot-cell {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 8px 6px 7px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  user-select: none;
}
.spot-cell:active { transform: scale(0.97); }
.sg-stamp {
  width: 78%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  margin: 0 auto 3px;
  /* v150：斜め(-4deg)は廃止＝帳面らしく整然と並べる（洋平指摘）。画像は透過PNG化済み */
}
.sg-num {
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed #c9bfa8;
  color: #a09880;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--fs-body);
  margin: 0 auto 3px;
}
.sg-num.done { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); }
.sg-name {
  font-size: var(--fs-min);
  color: #555;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2); /* 2行分固定＝行の高さが名前の長短で揺れない */
}

/* ---- v149：スタンプの間（12種の絵柄図鑑・白金の台紙）----
   獲得=カラー／未獲得=グレーの意匠チラ見せ（装備収集帳と同じDQW流の言語） */
.stamp-dex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stamp-dex-cell {
  background: #fff center / cover; /* 獲得済みはJSが金紙テクスチャ（gold_paper.webp）を敷く（v157） */
  /* v157：二重線は「::afterの内枠」方式へ＝線の間から台紙（金紙）が透ける本物の額装 */
  border: 1px solid rgba(184, 146, 63, 0.8);
  border-radius: 12px;
  padding: 8px 6px 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(90, 70, 30, 0.18);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden; /* 光沢スイープをセル内に収める */
}
.stamp-dex-cell::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(184, 146, 63, 0.55);
  border-radius: 8px;
  pointer-events: none;
}
.stamp-dex-cell:active { transform: scale(0.97); }
/* v154：獲得済みセルの光沢スイープ（パーティバナー・図鑑バナーと同じ光の帯。delayはJSが均等割り） */
.stamp-dex-cell .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.55), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}
.stamp-dex-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}
/* v152：未獲得は専用の「靄の影絵」画像（sil/）を使う＝CSSフィルタは廃止。
   （v150-151のグレー線画方式は絵柄が読めてしまい「押すまでのお楽しみ」が消える・洋平指摘。
   　影絵は人数の気配だけ残して正体は秘密＝シルエットクイズの言語） */
.sd-name {
  font-size: var(--fs-min);
  font-weight: bold;
  color: #5a4a28;
  margin-top: 2px;
}
.stamp-dex-cell.locked .sd-name { color: #a89f8c; font-weight: normal; }

/* v150：獲得済みスタンプの拡大ポップアップ（タップで閉じる） */
.stamp-pop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 8, 0.62);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stamp-pop {
  background: #fff center / cover; /* JSが金紙テクスチャを敷く（v157） */
  /* v157：金紙の台紙×::after内枠の二重線＝本物の額装（セルと同じ文法の拡大版） */
  border: 1.5px solid rgba(184, 146, 63, 0.9);
  border-radius: 16px;
  padding: 20px 22px 14px;
  text-align: center;
  width: min(78vw, 330px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  animation: stamp-pop-in 0.22s ease-out;
  position: relative;
  overflow: hidden;
}
.stamp-pop::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px solid rgba(184, 146, 63, 0.6);
  border-radius: 11px;
  pointer-events: none;
}
/* v154：開いた瞬間に1回だけ光が流れる（ご開帳のキラッ） */
.stamp-pop .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.5), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: pop-shine-once 1.1s ease-out 0.2s 1 both;
  pointer-events: none;
}
@keyframes pop-shine-once {
  0% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(420%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-dex-cell .shine, .stamp-pop .shine { animation: none; }
}

/* v155：金の紙吹雪（スタンプの間・洋平発案＝パーティ画面パーティクルの白金版）。
   #screen全域のレイヤーから上→下へひらひら落ちる。数は獲得種類数でJSが決める */
.stamp-confetti {
  /* v164：absolute→fixed＝スクロールしても紙吹雪はビューポート全域に降り続ける
     （z-index:-1でコンテンツの奥・bg-fixedより後に挿入＝背景の上） */
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.confetti-piece {
  position: absolute;
  top: 0;
  opacity: 0;
  animation: confetti-fall linear infinite;
}
@keyframes confetti-fall {
  0% { transform: translateY(-7vh) rotate(0deg); opacity: 0; }
  6% { opacity: 0.95; }
  90% { opacity: 0.9; }
  100% { transform: translateY(108vh) rotate(300deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { animation: none; opacity: 0; }
}

/* ---- v159：漆黒の間（半田漆器一覧）----
   黒の展示ケース×金枠＝美術館の漆器展示の言語。写真はcontain＝工芸品を切らず、
   余白は黒に溶ける。未獲得はグレー写真＋名前（実物を見に行きたくなる誘導） */
.shikki-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.shikki-cell {
  background: rgba(12, 9, 16, 0.72);
  border: 1px solid rgba(184, 146, 63, 0.7);
  border-radius: 12px;
  padding: 7px 5px 5px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.shikki-cell::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(184, 146, 63, 0.4);
  border-radius: 8px;
  pointer-events: none;
}
.shikki-cell:active { transform: scale(0.97); }
.shikki-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}
.shikki-cell.locked img { filter: grayscale(1) brightness(0.55); }
.sk-name {
  font-size: var(--fs-min);
  color: #e8d9b0;
  margin-top: 3px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}
.shikki-cell.locked .sk-name { color: rgba(232, 217, 176, 0.55); }
.shikki-cell .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.4), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}

/* ---- v171：封印の間（魔物一覧）----
   漆黒×妖しい紫の檻＝4列×4行の16体。獲得=カラー＋名前／未獲得=真っ黒シルエット＋？？？
   （魔物は「何かが潜んでいる」怖さが正解＝スタンプの「？」と使い分け） */
.mon-grid {
  display: grid;
  /* v292：4列→3列＝セルを大きく（漆器一覧と同じ迫力へ・洋平指示） */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mon-cell {
  background: rgba(28, 20, 38, 0.82); /* 紫がかった暗がり＝黒シルエットが浮かぶ地 */
  border: 1px solid rgba(125, 79, 160, 0.65);
  border-radius: 10px;
  padding: 6px 4px 5px;
  text-align: center;
  box-shadow: 0 0 10px rgba(125, 79, 160, 0.25), 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.mon-cell::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(125, 79, 160, 0.35);
  border-radius: 7px;
  pointer-events: none;
}
.mon-cell:active { transform: scale(0.96); }
.mon-cell img {
  width: 100%;
  aspect-ratio: 3 / 4; /* 縦長ドット絵向けの檻枠＝縦横バラバラをcontainで収める */
  object-fit: contain;
  display: block;
}
.mon-cell.locked img { filter: brightness(0) opacity(0.88); } /* 真っ黒の影＝正体は秘密 */
.mn-name {
  font-size: var(--fs-min);
  color: #cfc3e8;
  margin-top: 3px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}
.mon-cell.locked .mn-name { color: rgba(207, 195, 232, 0.5); }
.mon-cell .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(210, 180, 255, 0.35), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}
/* 魔物ポップ＝黒地×紫枠（漆器ポップの色違い） */
.mon-pop {
  /* v292：金枠×紫グローで漆器カード並みの格に（洋平指示） */
  border-color: rgba(184, 146, 63, 0.9);
  box-shadow: 0 0 30px rgba(125, 79, 160, 0.55), 0 10px 34px rgba(0, 0, 0, 0.6);
}
.mnp-img {
  /* v292：アニメコマの透明余白込みでも大迫力になるよう、枠から溢れさせて表示
     （はみ出た透明部分はポップのoverflow:hiddenが刈る） */
  width: 118%;
  max-width: 118%;
  max-height: 56vh;
  display: block;
  margin: -4% -9% 6px;
  object-fit: contain;
}
/* v293：魔物図鑑ポップの名前は紫地×金縁の角丸札に（洋平指示） */
.mon-pop .skp-name {
  display: inline-block;
  padding: 6px 22px;
  border-radius: 999px;
  background: rgba(58, 36, 78, 0.92);
  border: 1.5px solid rgba(184, 146, 63, 0.9);
  box-shadow: 0 0 12px rgba(125, 79, 160, 0.4);
  margin: 0 auto 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mon-cell .shine { animation: none; }
}

/* 文化財カード（漆器の拡大ポップ）：黒地×金枠。
   v170：外殻（×が角に固定）＋内側スクロール領域（.skp-scroll）の2層構造。
   v169のfloat×はギャラリーが幅を譲って画像が左にズレたため廃止（洋平指摘） */
.shikki-pop {
  background: #171219;
  border: 1.5px solid rgba(184, 146, 63, 0.9);
  border-radius: 16px;
  padding: 18px 18px 14px;
  width: min(86vw, 360px);
  max-height: 84vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  animation: stamp-pop-in 0.22s ease-out;
}
.skp-scroll {
  overflow-y: auto;
  min-height: 0; /* flexアイテムを親のmax-height内に収めるためのキモ */
}
/* v165：写真は横スワイプのギャラリー（scroll-snap＝1スワイプ1枚でパチッと止まる）。
   枠は正方形×contain＝縦横バラバラの写真でもカードの高さが跳ねない */
.skp-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 8px;
  scrollbar-width: none;
}
.skp-gallery::-webkit-scrollbar { display: none; }
.skp-gallery img {
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  scroll-snap-align: center;
  display: block;
}
.skp-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 8px 0 4px;
}
.skp-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(232, 195, 130, 0.3);
}
.skp-dots i.on { background: rgba(232, 195, 130, 0.95); }
.skp-portrait {
  width: 58%;
  display: block;
  margin: 0 auto 10px;
  border-radius: 10px;
}
.skp-name {
  font-size: var(--fs-body);
  font-weight: bold;
  color: #f7e3ae;
}
.skp-kana {
  font-size: var(--fs-min);
  color: rgba(247, 227, 174, 0.7);
  margin-top: 2px;
}
.skp-meta {
  font-size: var(--fs-sub);
  color: #d9cdb2;
  margin-top: 5px;
}
.skp-desc {
  font-size: var(--fs-sub);
  color: #e6ddc9;
  line-height: 1.8;
  text-align: left;
  margin-top: 10px;
  white-space: pre-line; /* v165：資料原文の改行（段落）をそのまま生かす */
}

/* v165：読み物カード（総説2本）と竹内氏の人物カード＝漆黒の間の締めの読み物 */
.shikki-essay {
  display: flex;
  align-items: center;
  background: rgba(12, 9, 16, 0.72);
  border: 1px solid rgba(184, 146, 63, 0.7);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.se-title {
  flex: 1;
  font-weight: bold;
  font-size: var(--fs-sub);
  color: #f7e3ae;
}
.shikki-essay .zb-go,
.takeuchi-card .zb-go {
  position: static;
  transform: none;
  margin-left: 8px;
}
.takeuchi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(12, 9, 16, 0.72);
  border: 1px solid rgba(184, 146, 63, 0.7);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.takeuchi-card img {
  width: 72px;
  border-radius: 8px;
  flex: none;
}
.tk-text { flex: 1; min-width: 0; }
.tk-name {
  display: block;
  font-weight: bold;
  color: #f7e3ae;
  font-size: var(--fs-body);
}
.tk-title {
  display: block;
  color: rgba(247, 227, 174, 0.75);
  font-size: var(--fs-min);
  margin-top: 3px;
}
.skp-close {
  margin-top: 14px;
  background: rgba(232, 195, 130, 0.16);
  color: #f7e3ae;
  border: 1px solid rgba(232, 195, 130, 0.5);
  border-radius: 8px;
  padding: 10px 30px;
  font-size: var(--fs-sub);
}
/* v170：右上の（×）＝枠の角に固定（スクロールはしない外殻に属す）。
   長文をどこまで読んでも右上に居続け、レイアウト（ギャラリーの中央寄せ）に一切干渉しない */
.skp-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(23, 18, 25, 0.75);
  color: #f7e3ae;
  border: 1px solid rgba(232, 195, 130, 0.55);
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .shikki-cell .shine { animation: none; }
}
.stamp-pop img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}
.sp-name {
  font-size: var(--fs-body);
  font-weight: bold;
  color: #5a4a28;
  margin-top: 8px;
}
.sp-hint {
  font-size: var(--fs-min);
  color: #a89f8c;
  margin-top: 5px;
}
@keyframes stamp-pop-in {
  0% { transform: scale(0.82); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.collection-item {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  font-size: var(--fs-min);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.collection-item .icon { font-size: 2rem; margin-bottom: 4px; }
.collection-item.locked { opacity: 0.35; }

/* ---- 達成画面 ---- */
/* 踏破の証（v339：合言葉方式から全面改装）：賞状風カード＋金の周回光。
   周回光=コンプ済みバナーと同じ言語＝「生画面の証」（静止スクショと見分けやすい） */
/* v385：景品交換のバナー（踏破の証3＋討伐証明書・洋平デザイン1080×360・2026-09-11）。
   達成＝カラー＋タップで証カード／未達成＝グレー＋「あと◯個」トースト。
   旧v339のCSS製賞状カード（.toha-cert）はバナー＋拡大カード方式に置き換えて廃止 */
.toha-band {
  position: relative;
  margin-top: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.toha-band img { display: block; width: 100%; }
/* v386：未達成はグレースケール加工をやめ、専用の「？」バナー（toha_band_locked.webp）に。
   達成バナーだけ光沢スイープ＝獲得済みの共通言語（図鑑バナーと同じ9s周期・洋平指定） */
.toha-band .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 34%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .toha-band .shine { animation: none; }
}
/* v385：踏破の証カード＝討伐証明書と同じ拡大カードに金の周回光を追加
   （周回光＝生画面の証＝静止スクショと見分けやすい・v339からの継承） */
.cert-card.toha-pop::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  padding: 6px;
  background: conic-gradient(from var(--photo-spin),
    transparent 0deg, rgba(255, 222, 128, 1) 22deg, rgba(255, 250, 225, 1) 40deg,
    rgba(255, 222, 128, 1) 58deg, transparent 95deg,
    transparent 165deg, rgba(255, 226, 140, 0.9) 205deg, rgba(255, 245, 215, 0.95) 220deg,
    rgba(255, 226, 140, 0.9) 235deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: photo-ring 6s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .cert-card.toha-pop::before { animation: none; }
}

/* ---- ストーリー（ビジュアルノベル型・固定画面） ----
   ツルギスタ本編と同じ構図：立ち絵はウィンドウの「後ろ」に大きく表示され、
   会話ウィンドウが手前に重なる。立ち絵の下半身はウィンドウの下にも見える */
#story-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(#20304e, #0e1626 70%); /* 背景未設定時の仮グラデーション */
  background-size: cover;      /* storyBg（コースごとの背景画像）を画面いっぱいに */
  background-position: center;
  z-index: 100;
  cursor: pointer;
  overflow: hidden;
  /* v340：ウィンドウ位置・フォントはReigns History Game準拠。
     Reignsは720px幅設計なので「設計値÷720×この基準幅」で換算する */
  --su: min(100vw, 480px);
}
/* v395：最終話（◯◯_04）のEDジングル中＝閉じた黒扉の上で踏破の証のお披露目（洋平指定） */
.toha-reveal {
  position: absolute;
  inset: 0;
  z-index: 210;              /* 閉じた扉（.story-door z200）より手前＝黒扉の上に浮かぶ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transition: opacity 1.2s ease-out;
  pointer-events: none;
}
.toha-reveal.on { opacity: 1; }
.toha-reveal img {
  width: min(68vw, 320px);
  border-radius: 14px;
  border: 2px solid #c9a86a;
  box-shadow: 0 0 44px rgba(246, 210, 110, 0.45), 0 10px 30px rgba(0, 0, 0, 0.6);
}
.tr-msg {
  color: #f2e0b3;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* v384：長押しで立ち絵（表情差分）がiOSの画像メニューに切り抜かれるのを防ぐ（洋平実機FB）。
   タップ送りはオーバーレイ自身が受けているので、中の画像は「触れない部品」にしてよい */
#story-overlay,
#prologue-overlay {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#story-overlay img,
#prologue-overlay img {
  pointer-events: none;
  -webkit-user-drag: none;
}
/* ============================================================
   v367：貞光の謎解きまわりの演出
   ①神代文字のにじみ出し（スタンプ獲得）②神器授与カード（謎正解）③不正解シェイク
   ============================================================ */
/* 神代文字：薄い文字を長押しで滲み出させる（v368・洋平の元設計＝参加型）。
   透明度・にじみはJSが進行度で描く。100%で金の魔法陣が背後に展開 */
.woshite-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 8, 0.86);
  animation: wo-fadein 0.5s ease-out;
  touch-action: none;          /* 長押し中のスクロール・ダブルタップ拡大を抑止 */
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
@keyframes wo-fadein { from { opacity: 0; } to { opacity: 1; } }
/* v376：入れ物は「まとめて隠す」ためだけの器（stage/msgは画面基準の絶対配置に） */
.woshite-card { pointer-events: none; }
/* v370：ARカメラ映像を背景に敷く（元設計「AR長押し」。カメラ不可なら黒のまま） */
.woshite-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.woshite-dim {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 8, 0.45); /* 映像の上の薄暗幕＝文字とガイドを読みやすく */
  pointer-events: none;
}
.woshite-stage {
  /* v376：半田のpolish-wrapと同一矩形（top42%・幅min(78vw,380px)）＝
     陣の位置式（wr.bottom-24-size/2）が漆器の陣とまったく同じ位置を指す（洋平指定） */
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(78vw, 380px);
  height: min(78vw, 380px); /* aspect-ratioだと130%の文字に押し広げられ陣がズレる→高さ明示 */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* v375：成功の陣は半田の磨きと同じ「足元の陣＋立ち上るオーラ」構成
   （v378確定：魔法陣05地面＋aura01の水色c03＝半田と同素材。正面の金陣＝捕獲の
   「対峙」の言語はやめ、獲得は「地面から祝福が立ち上る」で全コース統一・洋平決定）。
   大きさ・縦位置はJSが文字の足元に合わせて設定する */
.woshite-floor,
.woshite-aura {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
.woshite-floor.on { opacity: 1; }
.woshite-aura { transition: opacity 0.6s ease-out; }
.woshite-aura.rise { opacity: 1; }
/* v375：導入の一拍＝下部のリボン帯（磨きの「くもった漆器を見つけた…」と同じ言語） */
.woshite-intro {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  padding: 9px 12px;
  text-align: center;
  color: #fff;
  font-size: var(--fs-title);
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  background:
    linear-gradient(90deg, transparent, rgba(201,166,72,0.65) 18%, rgba(201,166,72,0.65) 82%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(201,166,72,0.65) 18%, rgba(201,166,72,0.65) 82%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(12,9,6,0) 0%, rgba(12,9,6,0.66) 16%, rgba(12,9,6,0.66) 84%, rgba(12,9,6,0) 100%);
  pointer-events: none;
}
.woshite-intro:empty { display: none; }
/* v370：文字の光彩＝背後の水色グロー（filter併用による白い四角対策で別レイヤー化） */
.woshite-glow {
  position: absolute;
  inset: -7%;   /* v377：文字1.5倍に追従（文字に対する光彩の比率は据え置き） */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 225, 255, 0.55), rgba(150, 225, 255, 0.25) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
/* v372：動きの主役は神代文字＝解放後、文字がゆっくり脈動し光彩が呼吸する
   （魔法陣は展開後は静止＝目線が文字に集まる・洋平FB） */
.woshite-char.done { animation: wo-char-pulse 1.8s ease-in-out infinite; }
@keyframes wo-char-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.woshite-glow.done { animation: wo-glow-pulse 1.8s ease-in-out infinite; }
@keyframes wo-glow-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.12); }
}
.woshite-char {
  position: relative;
  width: 97.5%;   /* v377：2倍(130%)は大きすぎ→元(65%)との中間＝1.5倍（洋平FB） */
  flex-shrink: 0; /* flexが器の幅まで縮めてしまうのを禁止（指定%を実寸で通す） */
  -webkit-user-drag: none;
}
/* 長押し中：文字がかすかに震える＝「滲み出させている」手応え */
.woshite-overlay.holding .woshite-char { animation: wo-hold 0.24s ease-in-out infinite; }
@keyframes wo-hold {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.6px, -0.6px); }
  75% { transform: translate(-0.6px, 0.6px); }
}
/* v372：メッセージは小窓（黒×金＝会話窓と同じ言語）＝巨大化した魔法陣より手前・
   黄色の上でも読める（洋平FB「テキストが陣に隠れる/潰れる」） */
.woshite-msg {
  /* v376：文字の器が絶対配置になったため、ガイド窓は下部帯の上に独立配置 */
  position: absolute;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-block;
  padding: 10px 22px;
  background: rgba(10, 12, 10, 0.92);
  border: 2px solid #c9a86a;
  border-radius: 12px;
  white-space: nowrap;
}
.woshite-label {
  color: #f2e0b3;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.woshite-hint {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}
.woshite-hint:empty { display: none; }
.woshite-hint.done { animation: next-blink 1.4s ease-in-out infinite; }
/* v369：魔法陣完成の瞬間、画面全体を金色の輝きが包む（漆器獲得の閃光と同じ言語） */
.woshite-flash {
  position: absolute;
  inset: 0;
  background: #ffe9b8;
  opacity: 0;
  pointer-events: none;
}
.woshite-flash.burst { animation: white-burst 0.95s ease-out forwards; }
/* 神器授与：金の閃光＋授与カード */
.gear-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 8, 0.82);
}
.gear-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 250, 230, 0.98), rgba(242, 224, 179, 0.85) 45%, transparent 75%);
  animation: gear-flash 1.1s ease-out both;
  pointer-events: none;
}
@keyframes gear-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ============================================================
   v373：神器の召喚シーン（洋平イメージスクショ準拠）
   床のピンク魔法陣（回転ループ）＋立ち上るオーラの上空に、
   神器アイコンがふよふよ浮かびながら順にフェードイン
   v374：2段構成に（洋平FB）＝①神器は「1つずつゆっくり」＝前の1つが
   浮かび終わってから次が現れる ②出そろって少し見せたら浮遊神器は天へ還り、
   金紙の授与カード（v368）が陣の上に現れる。陣とオーラは背後で回り続ける
   ============================================================ */
.gear-stage {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: min(96vw, 460px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.gear-floor,
.gear-aura2 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.gear-overlay.on .gear-floor,
.gear-overlay.on .gear-aura2 { opacity: 1; }
/* 浮遊する神器アイコン（配置は洋平スクショ準拠：左上・右中・中下） */
.gear-float {
  position: absolute;
  width: 27%;
  opacity: 0;
}
.gear-float img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid #c9a86a;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 170, 230, 0.55);
}
/* v400：召喚は元の「その場でふわっと現れてふよふよ」に戻した（洋平FB。
   v399の「陣の中心から拡大しながら定位置へ」は試作の結果ボツ） */
.gf0 { left: 9%;  top: -34%; }
.gf1 { right: 5%; top: -14%; }
.gf2 { left: 27%; top: 6%; }
.gear-overlay.on .gf0 { animation: gear-float-in 1.5s ease-out 0.5s both, gear-bob 3.2s ease-in-out 2.0s infinite; }
.gear-overlay.on .gf1 { animation: gear-float-in 1.5s ease-out 2.2s both, gear-bob 3.7s ease-in-out 3.7s infinite; }
.gear-overlay.on .gf2 { animation: gear-float-in 1.5s ease-out 3.9s both, gear-bob 2.9s ease-in-out 5.4s infinite; }
@keyframes gear-float-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gear-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
/* v374：カード段に入ったら、浮遊神器はふわっと天に還る（カードへ召喚し直す） */
.gear-overlay.card .gf0,
.gear-overlay.card .gf1,
.gear-overlay.card .gf2 { animation: gear-float-out 0.7s ease-in both; }
@keyframes gear-float-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-26px); }
}
/* 金紙の授与カード（v368の「もとのカード」・回り続ける陣の中心に鎮座する） */
.gear-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  padding: 22px 16px 18px;
  border: 3px solid #c9a86a;
  border-radius: 14px;
  background: url('../assets/menu/zukan/gold_paper.webp') center / cover, #f4e8c8;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  text-align: center;
  overflow: hidden;            /* パーティクルとスイープをカード内に収める */
  opacity: 0;                  /* 召喚シーンの間は隠しておく */
  pointer-events: none;
}
.gear-overlay.card .gear-card {
  animation: gear-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.35s both;
  pointer-events: auto;
}
@keyframes gear-pop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
/* カードの縁を金の光が周回（踏破の証・コンプバナーと同じ「特別な瞬間」の言語） */
.gear-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  padding: 6px;
  background: conic-gradient(from var(--photo-spin),
    transparent 0deg, rgba(255, 222, 128, 1) 22deg, rgba(255, 250, 225, 1) 40deg,
    rgba(255, 222, 128, 1) 58deg, transparent 95deg,
    transparent 165deg, rgba(255, 226, 140, 0.9) 205deg, rgba(255, 245, 215, 0.95) 220deg,
    rgba(255, 226, 140, 0.9) 235deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: photo-ring 3.2s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* 光沢スイープ（図鑑セルと同じ言語・カードは1枚だけなので速めの周期） */
.gear-card .gear-shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.5), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 3.6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* 金の粒が立ち上がるパーティクル（位置・粒径・周期はJSが一粒ずつランダムに振る） */
.gear-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.gear-particles i {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 225, 1), rgba(255, 222, 128, 0.85) 55%, transparent 75%);
  box-shadow: 0 0 6px rgba(255, 226, 140, 0.8);
  animation: gear-rise linear infinite;
  opacity: 0;
}
@keyframes gear-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.95; }
  70%  { opacity: 0.7; }
  100% { transform: translateY(-460px) scale(1.15); opacity: 0; }
}
.gear-title {
  font-size: 18px;
  font-weight: bold;
  color: #7a5c1e;
  margin-bottom: 12px;
}
.gear-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.gear-item { flex: 1; max-width: 120px; }
.gear-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid #c9a86a;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(122, 92, 30, 0.35);
}
/* 神器はカード出現と同時に1つずつ召喚される（ぽん・ぽん・ぽん＝v372の言語） */
.gear-overlay.card .gear-item { animation: gear-summon 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.gear-overlay.card .gear-item:nth-child(1) { animation-delay: 0.5s; }
.gear-overlay.card .gear-item:nth-child(2) { animation-delay: 0.75s; }
.gear-overlay.card .gear-item:nth-child(3) { animation-delay: 1.0s; }
@keyframes gear-summon {
  from { opacity: 0; transform: scale(0.15); }
  to   { opacity: 1; transform: scale(1); }
}
.gear-name {
  /* v368：武器防具名は角丸ウィンドウに（洋平FB） */
  margin-top: 6px;
  padding: 5px 4px;
  border: 1.5px solid #c9a86a;
  border-radius: 999px;
  background: rgba(255, 252, 240, 0.85);
  font-size: 10.5px;
  font-weight: bold;
  color: #5c4614;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
}
.gear-lead {
  margin: 14px 0 12px;
  font-size: 15px;
  font-weight: bold;
  color: #7a5c1e;
}
.gear-next { width: 100%; }
/* 不正解：入力欄の優しいシェイク（罰なし方針） */
.shake { animation: riddle-shake 0.45s ease-in-out; }
@keyframes riddle-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
/* 解読済みの巻の見返し：答え表示 */
.sh-answer {
  margin-top: 12px;
  padding: 10px;
  border: 2px solid #c9a86a;
  border-radius: 10px;
  background: rgba(242, 224, 179, 0.12);
  color: #f2e0b3;
  font-weight: bold;
  text-align: center;
}
/* v364：トビラクローズ（画面の左右から黒画面が中央へ閉じる・洋平指定）。
   イベント終了と「トビラクローズ＆オープン」（場面省略）で使う */
.story-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;             /* 中央で少し重なる＝閉じ切ったときの隙間防止 */
  background: #000;
  z-index: 200;           /* 立ち絵・セリフ窓より手前 */
  transition: transform 2.8s ease-in-out; /* v365：閉じる速さを半分に（洋平FB） */
  pointer-events: none;
}
.story-door.l { left: 0;  transform: translateX(-101%); }
.story-door.r { right: 0; transform: translateX(101%); }
.story-door.shut { transform: translateX(0); }
/* v363：?story=直再生の開始ゲート（1タップ＝自動再生制限の解除で冒頭のBGMから鳴る） */
#story-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#20304e, #0e1626 70%);
  cursor: pointer;
}
#story-gate .sg-name {
  color: #f2e0b3;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 14px;
}
#story-gate .sg-hint {
  color: #fff;
  opacity: 0.85;
  text-align: center;
  animation: next-blink 1.4s ease-in-out infinite;
}
/* v340：会話背景（スポット写真）。ぼかして雰囲気だけ伝える。
   scaleはぼかしで生じる端の透けを外へ追い出すため */
#story-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px);
  transform: scale(1.06);
  z-index: -1;
}
/* 背景の上に薄暗いフィルターをかけて、立ち絵とセリフを読みやすくする */
#story-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 24, 0.28);
}
/* v347：ドット絵ステージ（各コース00・04）。750×1624のアスペクト固定枠を
   cover相当（min-width/height 100%）で中央に置くことで、背景画像と
   キャラの%座標がどの画面比でもズレない。背景はぼかさずシャープに敷く */
#story-stage {
  position: absolute;
  left: 50%;
  bottom: 0;                       /* v350：下辺基準＝縦の短い端末（SE等）でも
                                      地面・キャラの見え方が下端で揃う（洋平FB） */
  transform: translateX(-50%);
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 750 / 1624;
  background-size: 100% 100%;
  z-index: 0;
  overflow: hidden;
}
#story-stage img.stage-chara {
  position: absolute;
  width: 15.3%;                 /* 洋平の配置ラフ実測（115px/750） */
  transform: translateX(-50%);  /* left=キャラ中心のX */
  image-rendering: pixelated;
}
/* v355：半田_00の光と天照さま。光（432×432）と神（432×288）は中心合わせの2枚重ね。
   v364：プロローグ（216px実寸）と同じ見かけサイズに（洋平FB「半田は少し小さい」）。
   ステージ座標432px＝実画面216px相当＝幅57.6%・位置はラフ実測（上端1.6%・中心x48.4%）。
   ※v356で28.8%に半減したのは行き過ぎだった＝ラフ通りの原寸配置に戻す */
.stage-fx-god {
  position: absolute;
  left: 48.4%;
  top: 1.6%;
  width: 57.6%;
  transform: translateX(-50%);
  z-index: 50;
  opacity: 0;
  transition: opacity 1.6s ease-out;
  pointer-events: none;
}
.stage-fx-god.in { opacity: 1; }
.stage-fx-god img.fx-light { display: block; width: 100%; }
.stage-fx-god img.fx-god {
  position: absolute;
  left: 0;
  top: 16.67%;   /* (432-288)/2 ＝ 光の中心に天照さまの中心を合わせる */
  width: 100%;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
.stage-fx-god img.fx-god.in { opacity: 1; }
/* v355：転移の術（白ベース連番JPGをcontain再生）＋白画面として保持する層。
   セリフ窓はステージの外にあるので隠れない */
.stage-teni {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 800;
}
.stage-teni img {
  width: 100%;
  height: 100%;
  /* v365：contain→cover（洋平FB「上部が切れて余白が見える」＝画面比によって
     上下に白帯が出ていた）。陣は中央の円形なので左右が切れても絵は保たれる */
  object-fit: cover;
  transition: opacity 0.25s;
}
.stage-teni img.out { opacity: 0; }
/* v399：ステージのアイテムふわり（貞光_00 r114＝トッチから神書が浮かんで消える）。
   出現＝小さくふわっと拡大しつつ上昇 → しばらく漂う → 溶けるように消える */
.stage-item-float {
  position: absolute;
  width: 13%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 230, 150, 0.9));
  animation: item-float 2.6s ease-out forwards;
}
@keyframes item-float {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.45); }
  20%  { opacity: 1; }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-46px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-66px) scale(1); }
}
/* 立ち絵＝1080×1920のキャンバス全体を画面幅いっぱいに重ねる（本編と同じ方式。
   キャラの位置調整は素材側に焼き込まれているので、コード側では何もしない） */
#story-chara-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1080 / 1920;
  z-index: 1;
}
#story-chara-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
#story-chara-wrap.enter { animation: illust-enter 0.4s ease-out; }
@keyframes illust-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#story-bottom {
  position: absolute;       /* 立ち絵の手前に重ねる */
  left: 0;
  right: 0;
  /* v340：Reigns準拠＝セリフ窓の下端は画面下から172/720（GameManager.gd実測値） */
  bottom: calc(var(--su) * 0.239);
  padding: 0 calc(var(--su) * 0.025);   /* 左右余白 18/720 */
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 2;
}
/* v350：名前窓＝黒金（本編UI画像は縦長画面に合わない・洋平FB）。窓の上のタブ型 */
#story-chara-name {
  /* v364：inline-blockだとベースライン下の空白がタブと窓の間に入り、
     タブ右側の金ラインが窓に届く前に切れて見えた（洋平指摘）。
     block化＋2px重ねで、タブの縦ラインが窓の枠に密着してつながる。
     v365：レイヤーは窓が上（洋平指摘）＝タブの黒い直角の裾が窓の金ラインを
     隠さないよう、重ねた2pxは窓の枠の下に潜らせる */
  display: block;
  width: fit-content;
  margin-bottom: -2px;                     /* 窓の上枠（2px）に重ねて接合 */
  font-size: calc(var(--su) * 0.046);
  font-weight: bold;
  color: #f2e0b3;                          /* 金クリーム */
  padding: 4px 18px;
  border: 2px solid #c9a86a;               /* 落ち着いた金枠 */
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(10, 12, 10, 0.92);      /* 黒 */
  /* v351で左端0に揃えたが、窓の左上角丸（12px）にタブの左線が届かず途切れて
     見えていた（洋平指摘）。v425：角丸の外へずらして直線部に接合する */
  margin-left: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
#story-chara-name:empty { visibility: hidden; }  /* ナレーション等・名前なし */
/* v350：セリフ窓＝黒地×金枠。フォントは「1行19文字」が収まる最大級（洋平FB）
   v358：プロローグの窓（#prologue-*）も見た目・フォントを完全共通化（洋平FB） */
#story-box,
#prologue-textbox {
  position: relative;                    /* ▼の絶対配置の基準 */
  background: rgba(10, 12, 10, 0.92);
  border: 2px solid #c9a86a;
  border-radius: var(--radius);
  box-sizing: border-box;
  color: #fff;
  padding: calc(var(--su) * 0.03) calc(var(--su) * 0.04);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#story-text,
#prologue-text {
  font-size: calc(var(--su) * 0.042);    /* v352：読みやすさ調整（19文字/行は維持・洋平指定） */
  line-height: 1.6;
  height: calc(3em * 1.6);               /* v356：▼を含め3行分で高さ固定（洋平FB・
                                            1行と2行で縦幅が変わって見づらい対策。
                                            本文は最大2行運用＝3行目の位置に▼が座る） */
  white-space: pre-line;                 /* エクセルの行分け（\n）をそのまま表示 */
}
#story-next,
#prologue-next {
  position: absolute;                    /* v356：高さに影響しない右下の定位置 */
  right: calc(var(--su) * 0.04);
  bottom: calc(var(--su) * 0.02);
  font-size: calc(var(--su) * 0.03);
  color: #f2e0b3;
  opacity: 0.8;
  animation: next-blink 1s ease-in-out infinite;
}
@keyframes next-blink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.2; }
}

/* ---- スプラッシュ画面 ---- */
.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
}
.splash-logo-img {
  width: min(80vw, 360px);
  animation: splash-in 0.8s ease-out;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.splash-note { font-size: var(--fs-note); color: #999; margin-top: 14px; }
/* v186：スプラッシュの起動演出（三木さんリクエスト・音はブラウザ制限で視覚のみ）。
   ロゴ本体と「デジタルスタンプラリー」帯を分割し、帯は11コマのタイプイン→スイープ1回、
   その後キノのスタンプが右上にポンッ→1秒でウィンクに切り替わる */
.splash-stage {
  position: relative;
  width: min(80vw, 360px);
}
.splash-stage .splash-logo-img { width: 100%; display: block; }
.splash-band-clip {
  position: relative;
  display: block;
  overflow: hidden;
  /* 84% = ロゴ内の青文字「ツルギスタ」の実測幅（1008/1200px）。帯を同じ横幅に揃える */
  width: 84%;
  margin: 6px auto 0;
}
.splash-band {
  width: 100%;
  display: block;
  /* 1コマ0.13s×11文字（v189でゆっくりに）。完了1.9s台→後続演出も連動してずらしてある */
  animation: label-typein 1.43s steps(11, end) 0.6s backwards;
}
.splash-shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 245, 200, 0.55), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: pop-shine-once 0.9s ease-out 2.2s 1 both;
  pointer-events: none;
}
.splash-stamp {
  position: absolute;
  /* 「タ」の上部にちょっとかぶる位置（v187調整）。傾きは --rot 1か所で管理 */
  --rot: 7deg;
  top: -20%;
  right: -4%;
  width: 31%;
  transform: rotate(var(--rot)) scale(0);
  opacity: 0;
}
.splash-stamp.pop { animation: splash-stamp-pop 0.5s ease-out forwards; }
@keyframes splash-stamp-pop {
  0% { transform: rotate(var(--rot)) scale(2.1); opacity: 0; }
  55% { transform: rotate(var(--rot)) scale(0.94); opacity: 1; }
  75% { transform: rotate(var(--rot)) scale(1.07); }
  100% { transform: rotate(var(--rot)) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-band, .splash-shine { animation: none; }
  .splash-stamp.pop { animation: none; transform: rotate(var(--rot)) scale(1); opacity: 1; }
}

/* ---- メインメニュー（画面固定・タイトル型） ---- */
/* ---- v175：メニュー4タイルの並列化（役場デモ「スタンプラリーが機能と気づきにくい」対策）----
   ①入場の儀式：4つの判子ラベルが文字数ぶんのコマ送りで順に現れる（1回だけ＝常時可読が鉄則）
   ②共通の呼吸：全タイルを同じ光沢スイープが4連で走る（12秒ごと）＝「同じ種類のボタン」の証明
   ③主従のCTA：スタンプラリーには緋×金の帯（はじめる/つづきから＋進捗）、中3つには動詞ラベル */
@keyframes label-typein {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* v176：速度をゆっくり・順次感を強めに（速すぎて「1文字ずつ」が見えなかった・洋平指摘） */
.menu-fixed .rally-label .tile-label { animation: label-typein 0.84s steps(7, end) 0.25s backwards; height: 28px; /* v178：主役の判子は一回り大きく */ }
.menu-fixed .pm-label .tile-label { animation: label-typein 0.44s steps(4, end) 1.0s backwards; }
.menu-fixed .boss-mini-label .tile-label { animation: label-typein 0.24s steps(2, end) 1.35s backwards; }
.menu-fixed .zukan-label .tile-label { animation: label-typein 0.24s steps(2, end) 1.55s backwards; }

.menu-shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 245, 200, 0.42), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: menu-shine-run 4s linear infinite; /* v180：さらに頻度アップ（6s→4s・洋平指示） */
  pointer-events: none;
  z-index: 3;
}
@keyframes menu-shine-run {
  0% { transform: translateX(-160%) skewX(-20deg); }
  21% { transform: translateX(420%) skewX(-20deg); } /* 4s×21%＝通過0.84s（速度は従来どおり） */
  100% { transform: translateX(420%) skewX(-20deg); }
}
/* ラベルが出揃った直後（1.9s〜）に4連でキラッ→以降12秒ごとに同じ連鎖。
   v178：スイープはタイル全体→判子ラベルのみ（洋平指示＝名前がきらめく）。
   ラベルコンテナにoverflow:hiddenを併設（下のtypein/label系スタイル参照） */
.label-clip {
  position: relative;
  display: inline-block;
  overflow: hidden; /* スイープを判子画像の幅に閉じ込める（透過部分を光が走らない・洋平指摘） */
  vertical-align: top;
}
.label-clip .tile-label { display: block; } /* インライン空白を消してクリップ幅＝画像幅ぴったりに */
.rally-label .menu-shine { animation-delay: 1.9s; }
.pm-label .menu-shine { animation-delay: 2.04s; }
.boss-mini-label .menu-shine { animation-delay: 2.18s; }
.zukan-label .menu-shine { animation-delay: 2.32s; }
.rally-label, .pm-label, .boss-mini-label, .zukan-label { overflow: hidden; }

/* v176：帯→右下コンパクトボタンへ（案B・洋平の原案どおり）。
   フル幅の帯は合言葉帯と色・形が近く「そこにしか目がいかない」＋判子ラベルに被った */
.rally-cta {
  position: absolute;
  right: 10px;
  bottom: 12px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  /* v177：緋→黒透過（動詞札と同じデザイン言語に統一・洋平指示） */
  background: rgba(20, 14, 10, 0.62);
  border: 1px solid rgba(212, 175, 106, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  animation: cta-breath 3.2s ease-in-out infinite; /* ゆっくり呼吸＝押欲の誘い */
}
@keyframes cta-breath {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}
.rc-go {
  color: #f7e3ae;
  font-weight: bold;
  font-size: var(--fs-sub); /* v176：375px幅機でも判子ラベルと重ならない幅に */
}
.rc-count {
  color: #fff;
  font-size: var(--fs-min);
  opacity: 0.95;
}
.mini-go {
  position: absolute;
  right: 7px;
  bottom: 7px; /* v177：判子が上部へ移動したため右下へ（ラベル上・ボタン下の構成） */
  background: rgba(20, 14, 10, 0.62);
  color: #f7e3ae;
  font-size: var(--fs-min);
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 106, 0.55);
  z-index: 3;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .menu-fixed .tile-label, .menu-shine, .rally-cta { animation: none; }
}

/* menu-mode中は#screenのスクロールを止めて1画面に収める */
#screen.menu-mode {
  padding: 0;
  height: 100vh;   /* dvh非対応ブラウザ用の保険 */
  height: 100dvh;  /* アドレスバーの伸縮に追従する高さ */
  overflow: hidden;
}
.menu-fixed {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(56px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  /* v104：背景は生成り和紙×薄青海波（menu_bg.webp 750×1624・JS側でasset()付きインライン指定）。
     ボタンの隙間しか見えないため「隙間の色」として低コントラストの地紋にしている。
     洋平の本制作背景が来たら同名上書き＋ASSET_V+1で差し替え */
  background-color: #f7f4ec; /* 画像ロード前・失敗時の下地（和紙色） */
  background-size: cover;
  background-position: center top;
}
/* コンテンツ名ラベル：黒透過プレート＋白文字。
   判子タイルはトップ帯だけに絞る（全ボタンをタイルにすると「判子のインフレ」で
   主役がぼやける＝2026-08-07実機確認済みの設計判断） */
.mf-plate {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 3px 14px;
  border-radius: 8px;
  white-space: nowrap; /* プレート内で折り返さない */
}
/* 中ボタン（幅107px前後）のプレートは少し小さく＝「コレクション」6文字が1行に収まる */
.mf-row button .mf-plate {
  font-size: var(--fs-sub);
  padding: 3px 8px;
}

/* 判子タイルのラベル画像（洋平作・ロゴと同テイスト）。※v90でプレート方式に変更し未使用。
   幅が足りない場所（コレクション6文字など）では比率を保ったまま自動縮小 */
.tile-label {
  /* v92：高さ固定＝タイル1マスの大きさ（文字サイズ）を全ボタンで完全統一。
     基準は「コレクション6文字が中ボタンに収まる」高さ（微妙なサイズ違いが
     気持ち悪さの正体だった＝洋平の分析2026-08-07） */
  height: 22px; /* 「図鑑」2文字化で幅の制約が消えた＝読めるサイズに拡大（v93） */
  max-width: 94%;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* タイトル行＝ロゴの判子タイル帯（スプラッシュのフルロゴに対する「省略形」）。
   高さは旧テキスト行と同等に抑えて、メニューの縦幅を変えない */
.mf-title-img {
  height: 32px; /* v92でさらに1段階拡大（洋平指定）。タイトルとしての存在感を出す */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.mf-title {
  flex: 0 0 auto;
  text-align: center;
  color: #fff;
  font-size: var(--fs-title);
  font-weight: bold;
  padding: 8px 0 2px;
}
.menu-fixed button {
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  line-height: 1.4;
}
.menu-fixed button:active { transform: scale(0.97); }
/* 「スタンプラリー」ボタン＝地図アニメのステージ（ソラが歩いてスタンプを押す） */
.mf-big {
  flex: 2.4;
  font-size: var(--fs-hero);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.rally-stage { position: absolute; inset: 0; display: block; pointer-events: none; }
/* v433：スポット実写のスライドショー×大判子（絵地図＋ソラ歩きから交代・洋平デザイン確定2026-09-17）。
   5.6秒ごとにクロスフェード＋ゆっくりズーム（Ken Burns）。下端は暗めのグラデ＝開始帯の視認性 */
.rally-photos { position: absolute; inset: 0; background: #2a2622; }
.rally-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; overflow: hidden; }
.rally-photo.show { opacity: 1; }
.rally-photo .rp-kb {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  animation: rally-kb 9s linear infinite alternate;
}
@keyframes rally-kb { from { transform: scale(1); } to { transform: scale(1.09); } }
.rally-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 30%, transparent 58%, rgba(0, 0, 0, 0.45));
}
/* 判子の安全領域＝題字の下〜開始帯の上。縦の短い端末（iPhone SE等）では
   縦基準で自動縮小＝どのアスペクト比でも欠けない（幅58%が上限） */
.rally-frame-box {
  position: absolute;
  left: 0;
  right: 0;
  top: max(15%, 48px); /* 縦の短い端末でも題字（top12px+札高さ）に食い込まない下限 */
  bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  container-type: size; /* v436：子のcqh参照用（下のmin()計算） */
}
/* v436：従来の height:92%+max-width:58% は、幅側でクランプされた時に高さが追従せず
   「縦長の楕円枠」になっていた（洋平実機指摘）。width基準のmin()＋aspect-ratioで
   どのサイズでも真円を保証する（min()内のcqh＝安全領域の高さ） */
.rally-frame-wrap {
  position: relative;
  width: 58%;              /* cqh未対応の古い環境用フォールバック（正方形は維持される） */
  width: min(58%, 92cqh);
  aspect-ratio: 1;
}
/* 押印ガイドの破線円＝スポット一覧のガイド（style.css 508行）と同じ言語。
   v434：判子画像の円（画像の92〜94.5%・手押しゆえ僅かに非真円）より一回り小さい86%＝
   どの判子でも押した瞬間に破線が確実に隠れる（洋平FB） */
.rally-frame {
  position: absolute;
  inset: 7%;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.rally-stamp-big {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; /* v434：判子＝破線枠と完全同径（押した瞬間に枠がちょうど隠れる・洋平FB） */
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.rally-stamp-big.press { animation: rally-press 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 3.22s forwards; } /* v445：写真だけ70%→押印後30%（4.6s×0.7・洋平FB） */
@keyframes rally-press {
  from { opacity: 0; transform: scale(1.9); }
  70%  { opacity: 0.95; transform: scale(0.97); }
  to   { opacity: 0.92; transform: scale(1); }
}
/* 開始帯＝景品交換と同じ臙脂×金の言語。見た目はボタン・実際はmf-big全体が押せる */
.rally-band {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 8px; /* v434：景品交換より一回り小さく（役割のヒエラルキー・洋平FB） */
  box-sizing: border-box;
  background: linear-gradient(180deg, #a8322c, #7c1f1e);
  border: 2px solid #d9b666;
  border-radius: 12px;
  color: #ffedbe;
  font-size: clamp(13px, 4vw, 15px); /* 320px幅でも「つづきから」表記が1行に収まる */
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.rally-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 190, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: rally-sweep 2.6s ease-in-out infinite;
}
@keyframes rally-sweep { 40%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .rally-photo { transition: none; }
  .rally-photo .rp-kb,
  .rally-band::after { animation: none !important; }
  .rally-stamp-big.press { animation: none !important; opacity: 0.92; }
}
.rally-label {
  position: absolute;
  /* v178：上部中央＋少し大きく（洋平指示＝タイトル帯亡き後のメニューの顔） */
  left: 0;
  right: 0;
  top: 12px;
  text-align: center;
  font-size: var(--fs-hero);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.7);
  z-index: 2;
}
.rally-credit {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: var(--fs-min);
  color: #444;
  background: rgba(255,255,255,0.78);
  border-radius: 6px;
  padding: 0 6px;
  z-index: 2;
}
.mf-row { flex: 1.6; display: flex; gap: 10px; }
.mf-row button { flex: 1; font-size: var(--fs-body); }
/* v104：合言葉＝臙脂×青海波×金線の帯（keyword_band.webp・JS側でインライン指定）。
   図鑑の黒×金と同じ紋様の色違い＝「特別なもの」の言語を景品にも。
   動きのヒエラルキーでは意図して「静」＝動く4つ（遊びの入口）と対比する景品所。
   ⚠セレクタはbutton付き必須（.menu-fixed buttonのbackground:#fffに勝つため） */
button.mf-wide {
  flex: 0 0 60px;
  font-size: var(--fs-title);
  background-color: #17130f; /* v436：画像ロード前の下地（黒金化・洋平決定＝豪華さ追求） */
  background-size: cover;
  background-position: center;
  color: #f7e3ae; /* 明るい金 */
  font-weight: bold;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(60, 10, 20, 0.6);
}
/* v437：景品交換の金砂子＝黒金の帯を漂う金の粒の明滅（蒔絵の砂子の言語）。
   開始帯の光沢スイープ（速い・面）に対し、こちらは遅い・点＝豪華さの質感違いで住み分け */
button.mf-wide { position: relative; overflow: hidden; }
.kw-sparks { position: absolute; inset: 0; pointer-events: none; }
.kw-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f6dd8a;
  box-shadow: 0 0 6px 1.5px rgba(243, 216, 126, 0.75);
  opacity: 0;
  animation: kw-drift var(--d, 7s) ease-in-out var(--dl, 0s) infinite;
}
.kw-sparks i:nth-child(1) { left: 9%;  top: 62%; --d: 6.8s; --dl: 0s;    --dx: 7px; }
.kw-sparks i:nth-child(2) { left: 22%; top: 30%; --d: 8.4s; --dl: 1.6s;  --dx: -6px; }
.kw-sparks i:nth-child(3) { left: 37%; top: 68%; --d: 7.6s; --dl: 3.1s;  --dx: 5px; }
.kw-sparks i:nth-child(4) { left: 52%; top: 26%; --d: 9.0s; --dl: 0.9s;  --dx: -7px; }
.kw-sparks i:nth-child(5) { left: 66%; top: 60%; --d: 7.2s; --dl: 2.4s;  --dx: 6px; }
.kw-sparks i:nth-child(6) { left: 80%; top: 34%; --d: 8.8s; --dl: 4.2s;  --dx: -5px; }
.kw-sparks i:nth-child(7) { left: 91%; top: 56%; --d: 7.9s; --dl: 5.3s;  --dx: 6px; }
@keyframes kw-drift {
  0%, 100% { opacity: 0; transform: translate(0, 5px) scale(0.8); }
  25% { opacity: 0.95; }
  50% { opacity: 0.3; transform: translate(var(--dx, 6px), -6px) scale(1.1); }
  75% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .kw-sparks { display: none; }
}
.mf-small { flex: 0 0 64px; }
/* v104：下段4つ＝和紙の案内札（チュートリアルカードと同じ和紙ノイズ＋墨文字）。
   読み物系ボタンは引き算＝主役の動く4つを引き立てる。
   v105：薄墨茶の細枠で「立て札」に（枠なしだと背景と同質感で押せる感が出ない＝洋平実機指摘）。
   金の枠は使わない＝金は図鑑・合言葉の「特別」の言語（ヒエラルキー維持） */
.mf-small button {
  font-size: var(--fs-min);
  font-weight: normal;
  background-color: #fdfaf3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.52 0 0 0 0 0.47 0 0 0 0 0.38 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #4a463c; /* 墨色 */
  border: 1.5px solid rgba(120, 100, 60, 0.5); /* 立て札の外枠（薄墨茶＝格子線と同系色） */
  /* v106：二重枠＝外枠→和紙の余白2px→内側の細線（お品書き札）。
     内線は外枠より薄くして窮屈にしない。外影は.menu-fixed buttonの継承が
     box-shadow上書きで消えるため、ここで再指定している */
  box-shadow:
    inset 0 0 0 2px #fdfaf3,
    inset 0 0 0 3px rgba(120, 100, 60, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ---- メニューの「記念写真」アニメ ----
   ファインダー合焦 → フラッシュ一閃 → ポラロイドがペタッ、の3拍子ループ（8秒）。
   被写体はJS（PM_MODELS）が周回ごとに交代させる。
   背景はぼかした町並み＝ポートレート写真のボケの文法（被写体を主役に見せる） */
.mf-photo { padding: 0; overflow: hidden; position: relative; }
.photo-stage { position: absolute; inset: 0; display: block; pointer-events: none; }
/* グループ写真（背景込み1枚絵480×960・洋平がぼかしまで焼き込み済み）。
   周回のフェードで組が入れ替わる */
.pm-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: pm-main 8s linear infinite;
}
@keyframes pm-main {
  0% { opacity: 0; }
  8% { opacity: 1; }
  40% { opacity: 1; }
  46% { opacity: 0.35; }
  88% { opacity: 0.35; }
  94%, 100% { opacity: 0; }
}
/* ファインダー（四隅の枠。じわっと縮んで合焦）。
   位置とサイズは組ごとの「全員の顔エリア」（--pfx/--pfy/--pfw/--pfh）＝
   枠のほうが被写体を探して動く（顔認識カメラの文法）。合焦の縮みはscaleで表現 */
.pm-finder {
  position: absolute;
  left: var(--pfx, 50%);
  top: var(--pfy, 40%);
  width: var(--pfw, 70%);
  height: var(--pfh, 30%);
  transform: translate(-50%, -50%);
  transition: top 0.5s ease, left 0.5s ease, width 0.5s ease, height 0.5s ease;
  animation: pm-focus 8s ease-in-out infinite;
}
.pm-finder i { position: absolute; width: 15px; height: 15px; border: 0 solid #fff; }
.pm-finder i:nth-child(1) { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.pm-finder i:nth-child(2) { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; }
.pm-finder i:nth-child(3) { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; }
.pm-finder i:nth-child(4) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
/* 合焦の流れ＝実物のオートフォーカス：表示 → 一瞬止まって探す → 高速でキュッと合う */
@keyframes pm-focus {
  0% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
  6% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1); }
  25% { transform: translate(-50%, -50%) scale(0.97); }
  29% { transform: translate(-50%, -50%) scale(1); }
  36% { opacity: 1; }
  40%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* フラッシュ（一閃。JSはこの要素の周回イベントでキャラを交代させる） */
.pm-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: pm-flash 8s linear infinite;
}
@keyframes pm-flash {
  0%, 34% { opacity: 0; }
  36% { opacity: 0.95; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}
/* ポラロイド（白フチ写真がくるっとペタッ。洋平要望で大きめ） */
.pm-polaroid {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 84px; /* 窓72＋余白12。縦長チェキの標準形 */
  padding: 6px 6px 18px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-7deg) scale(0.6);
  animation: pm-pola 8s ease-out infinite;
}
/* チェキ風の縦長窓（3:4）。中身は洋平のチェキ完成写真（shot_N.webp 360×480） */
.pm-window { display: block; width: 72px; height: 96px; overflow: hidden; position: relative; background: #dce4d8; }
.pm-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes pm-pola {
  0%, 37% { opacity: 0; transform: translate(-50%, -50%) rotate(9deg) scale(0.6); }
  44% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1.06); }
  48% { transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
  88% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
  94%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
}
.pm-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px; /* v177：上部へ（洋平指示） */
  text-align: center;
  font-size: var(--fs-title);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.7);
  z-index: 2;
}
/* 「視差効果を減らす」設定では静止（被写体だけ表示・枠と写真は出さない） */
@media (prefers-reduced-motion: reduce) {
  .pm-main, .pm-finder, .pm-flash, .pm-polaroid { animation: none; }
  .pm-finder, .pm-flash, .pm-polaroid { opacity: 0; }
}

/* ---- メニューの「図鑑」アニメ ----
   黒地和柄の台紙に、漆器が1つずつ「ぽっ」と現れる→
   全部そろうと金色にキラッ→また最初から。
   実際の図鑑UI（獲得=実物）と同じ文法＝機能の予告編 */
/* ⚠セレクタはbutton付きが必須：.menu-fixed button（詳細度0,1,1）のbackground:#fffに
   .mf-zukan単独（0,1,0）では負ける。button.mf-zukanで同詳細度＋後勝ちにしている */
button.mf-zukan {
  padding: 0;
  overflow: hidden;
  position: relative;
  /* v99：台紙は黒地和柄（青海波×金筆円）。画像はJS側でasset()付きインライン指定。
     #1a1a1aは画像ロード前・失敗時の下地 */
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.zukan-stage { position: absolute; inset: 0; display: block; pointer-events: none; }
/* v96：格子をボタン全面に広げる（洋平案）＝「ボタンそのものが図鑑の1ページ」。
   セルはfr伸縮なので、どの端末サイズでも常にぴったり全面 */
.zukan-grid {
  position: absolute;
  inset: 0;
  /* v97：grid→flexへ（実機Safariでgridが下にズレる癖が出たため、枯れた方式に変更） */
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
.zukan-cell {
  width: 33.3333%;
  height: 25%;
  /* v98：洋平の漆器写真12枚（160×240=2:3）を敷き詰め表示。
     セル実寸も約2:3なのでcoverの見切れはほぼ無し（重要絵柄は中央80%の約束） */
  object-fit: cover;
  /* v101：未点灯は完全透明＝黒地和柄が見える（シルエット案は試作の結果なしに決定） */
  opacity: 0;
  transition: opacity 0.35s ease;
}
.zukan-cell.on {
  opacity: 1;
  animation: zukan-pop 0.32s ease-out, zukan-flash 0.7s ease-out; /* ぽっ＋マスが一瞬金色に */
}
@keyframes zukan-pop {
  50% { transform: scale(1.18); }
}
/* v103：点灯フラッシュ復活（v98のfilter方式）。敷き詰め表示では絵の背後の
   background-colorは見えないため、絵そのものを金色っぽく光らせる */
@keyframes zukan-flash {
  0% { filter: brightness(1.9) sepia(0.45) saturate(1.6); }
  100% { filter: none; }
}
/* v101：金色の格子線（内側のみ縦2本×横3本）。黒和柄に映える薄金＝和柄の金円と呼応。
   旧v96-98の茶色セルborderは黒地では見えないため色ごと置き換え。
   セルが透明でも線が残るよう、セルではなくグリッドのオーバーレイに描く */
.zukan-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent calc(33.3333% - 0.5px), rgba(212, 175, 55, 0.40) calc(33.3333% - 0.5px), rgba(212, 175, 55, 0.40) calc(33.3333% + 0.5px), transparent calc(33.3333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.6667% - 0.5px), rgba(212, 175, 55, 0.40) calc(66.6667% - 0.5px), rgba(212, 175, 55, 0.40) calc(66.6667% + 0.5px), transparent calc(66.6667% + 0.5px)),
    linear-gradient(to bottom, transparent calc(25% - 0.5px), rgba(212, 175, 55, 0.40) calc(25% - 0.5px), rgba(212, 175, 55, 0.40) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(212, 175, 55, 0.40) calc(50% - 0.5px), rgba(212, 175, 55, 0.40) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(75% - 0.5px), rgba(212, 175, 55, 0.40) calc(75% - 0.5px), rgba(212, 175, 55, 0.40) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}
/* コンプリートの金色のきらめき */
.zukan-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 44%, rgba(255, 205, 60, 0.5), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.zukan-glow.on { opacity: 1; }
.zukan-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px; /* v177：上部へ（洋平指示） */
  text-align: center;
  z-index: 2;
}

/* ---- メニューの「魔王挑戦」ミニ戦闘アニメ ----
   実際の戦闘画面の文法（白龍＝上・パーティ＝右下・入場は右から歩き込み）を
   ボタンの中に小さく再現する。周回はCSSアニメ1本（11秒）＝
   入場 → 足踏み → 暗転 → また入場…のループ（地図アニメと同じ周回文法） */
.mf-boss { padding: 0; overflow: hidden; position: relative; }
.boss-stage { position: absolute; inset: 0; display: block; pointer-events: none; }
.boss-mini-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.62); /* 実戦闘の薄暗フィルターと同じ狙い */
}
.boss-mini-dragon {
  position: absolute;
  top: -3%;
  left: -56%; /* 左へはみ出させて、右側の空間をパーティに譲る（対峙の間合い） */
  width: 150%; /* はみ出し構図（実戦闘v58〜の巨大魔王と同じ思想）。パーティとの対比で脅威感を出す */
  image-rendering: pixelated; /* v454：ドット竜化。タイルではほぼ等倍表示なのでpixelatedでくっきり */
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
  animation: boss-breath 3.4s ease-in-out infinite alternate;
}
@keyframes boss-breath {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(4px) scale(1.02); }
}
/* パーティ3人：右下に縦列。--i（0,1,2）で入場の時間差を出す。
   縦幅に収めるためキャラ同士を重ねる（下＝手前の奥行き隊列。実戦闘の縦列のミニチュア表現） */
.boss-mini-party {
  position: absolute;
  right: 8px;
  bottom: 38px;
  display: flex;
  flex-direction: column;
}
.boss-mini-chara + .boss-mini-chara { margin-top: 8px; } /* 縦に間隔を空けた隊列（洋平指定） */
.boss-mini-chara {
  width: 32px;   /* 32×50ドットの等倍（整数倍＝にじみゼロ。白龍との対比で小ささ＝隊列感を出す） */
  height: 50px;
  background-size: 128px 50px; /* 4コマ横シート */
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
  animation:
    boss-walkin 11s linear infinite,
    boss-step 0.7s steps(4) infinite;
  animation-delay: calc(var(--i) * 0.4s), 0s;
}
/* 入場（右の画面外から）→足踏み→暗転中に画面外へ戻る、の周回 */
@keyframes boss-walkin {
  0%   { transform: translateX(90px); }
  12%  { transform: translateX(0); }
  91%  { transform: translateX(0); }
  93%  { transform: translateX(90px); } /* 暗転の闇の中でこっそり初期位置へ */
  100% { transform: translateX(90px); }
}
/* 足踏み（4コマのシートを送る）
   ※移動距離は必ず「表示幅×4」に合わせる（等倍32px×4=128px） */
@keyframes boss-step {
  from { background-position-x: 0; }
  to   { background-position-x: -128px; }
}
/* 周回の暗転レイヤー */
.boss-mini-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  animation: boss-dark 11s linear infinite;
}
@keyframes boss-dark {
  0%   { opacity: 1; }
  8%   { opacity: 0; }
  88%  { opacity: 0; }
  94%  { opacity: 1; }
  100% { opacity: 1; }
}
.boss-mini-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px; /* v177：上部へ（洋平指示） */
  text-align: center;
  font-size: var(--fs-title);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.7);
  z-index: 2;
}
/* 「視差効果を減らす」設定では全部止める（定位置・1コマ目・暗転なしで静止） */
@media (prefers-reduced-motion: reduce) {
  .boss-mini-dragon, .boss-mini-chara, .boss-mini-fade { animation: none; }
}

/* コレクション等の行メニュー（メイン以外の画面で使用） */
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.menu-icon { font-size: 26px; flex-shrink: 0; }
.menu-text { flex: 1; }
.menu-label { font-size: var(--fs-title); font-weight: bold; }
.menu-desc { font-size: var(--fs-note); color: #888; margin-top: 2px; }

/* モンスター図鑑 */
.dex-img { height: 64px; object-fit: contain; margin-bottom: 4px; }

/* ---- 記念写真のキャラ選択 ---- */
/* ---- 記念撮影のキャラ選択（v199・白金の「おもてなしの間」）----
   図鑑と同じ白和紙×金縁の言語。セルは丸窓の顔アイコン（撮影に写るイラストの顔）。
   未解放＝黒シルエット＋解放条件（漆器と同じ「見せて誘導」） */
.photo-intro .nobr { display: inline-block; } /* 文節単位の折り返し（1文字孤立行の防止） */
.photo-intro {
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: #6b5a33;
  background: rgba(255, 253, 247, 0.9);
  border: 1.5px solid rgba(184, 146, 63, 0.75);
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(120, 90, 30, 0.12);
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* v203：3列を試行中（2列に戻すのはこの数字だけ） */
  gap: 12px;
}
/* v202：縦長カード（洋平モック準拠）＝クリーム地×金二重線の額に
   風景付きの絵を大きく飾り、下にキャラカラーの名前ピル */
.photo-cell {
  position: relative;
  background: #f8f2e2;
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  border-radius: 14px;
  padding: 8px 8px 10px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(120, 90, 30, 0.15);
  overflow: hidden; /* 光沢スイープをセル内に収める */
  cursor: pointer;
}
.photo-cell::after {
  /* 金の内枠＝図鑑セルと同じ額装の二重線 */
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 146, 63, 0.5);
  border-radius: 10px;
  pointer-events: none;
}
.photo-cell:active { transform: scale(0.97); }
.pc-face {
  /* v204：洋平の縦長版（256×360）をカードほぼ全面に */
  display: block;
  width: 100%;
  aspect-ratio: 256 / 360;
  object-fit: cover;
  border-radius: 9px;
}
.pc-name {
  /* v204：名前ピルは画像の下部に重ねる（洋平モック） */
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 56%;
  max-width: 88%;
  box-sizing: border-box;
  background: #7a6a45; /* colorが無いキャラの保険（通常はキャラカラーで上書き） */
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-indent: 1px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20, 15, 5, 0.4);
}
.pc-hint {
  /* 未解放の条件文もピルの上に重ねる＝カードの高さが全員同じに揃う */
  position: absolute;
  bottom: 52px;
  left: 9%;
  right: 9%;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.5;
}
.photo-cell.locked { cursor: default; }
/* 未解放＝暗いモノクロ写真（風景付きの絵はシルエット化すると全面真っ黒になるため、
   「まだ色のつかない思い出」の表現に） */
.photo-cell.locked .pc-face { filter: grayscale(1) brightness(0.45); }
.photo-cell.locked .pc-name { background: #9a9285; }
/* ---- v210：複数キャラ選択 ---- */
.photo-intro .pi-sub { font-size: 11.5px; color: #8a7a55; }
.photo-cell.selected {
  /* 選択中＝臙脂の太枠（額の外側に光る「選ばれた」印） */
  box-shadow: 0 0 0 3px var(--color-accent), 0 4px 12px rgba(120, 90, 30, 0.3);
}
.pc-badge {
  /* 選択順の番号＝撮影時の並び順 */
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.photo-grid { padding-bottom: 84px; } /* 下部固定の撮影バーにセルが隠れない余白 */
.photo-go-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(248, 244, 234, 0.98), rgba(248, 244, 234, 0.88));
  border-top: 1.5px solid rgba(184, 146, 63, 0.6);
}
.photo-go-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #c8433c, #a52c27);
  color: #f7e3ae;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(120, 30, 24, 0.35);
}
/* 解放済みセルの光沢スイープ（図鑑セルと同じ・randomizeShinesが周期をばらす） */
.photo-cell .shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.55), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: zb-shine-run 9s linear infinite;
  pointer-events: none;
}

/* ---- クイズ・入力フォーム ---- */
.quiz-question { font-size: var(--fs-title); line-height: 1.8; margin: 12px 0; font-weight: bold; }
.quiz-input {
  width: 100%;
  padding: 12px;
  font-size: var(--fs-body);   /* 16px未満だとiPhoneで入力時に画面が拡大されてしまうため */
  border: 2px solid #ccc;
  border-radius: var(--radius);
  margin-top: 8px;
}
.quiz-input:focus { border-color: var(--color-main); outline: none; }

/* ---- フォトフレーム（AR風記念写真） ---- */
#photo-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 150;
  display: flex;
  flex-direction: column;
}
#photo-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; /* ピンチでページごと拡大されるのを防ぎ、独自操作に使う */
}
#photo-video, #photo-result {
  max-width: 100%;
  max-height: 100%;
}
#photo-clip {
  /* v207：キャラの入れ物＝ビデオの表示矩形にJSが同期。ファインダー外を隠す。
     初期値はステージ全面（映像サイズ確定前でもキャラが見える保険） */
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.photo-chara {
  /* v210：複数キャラ対応＝leftはJSが人数に応じて等間隔に設定（中央基準はtransformの-50%） */
  position: absolute;
  bottom: 20px;
  transform-origin: center bottom; /* 拡大縮小は足元を基準に */
  pointer-events: none; /* タッチはステージ側でまとめて受ける */
}
.photo-chara-img {
  display: block;
  height: 34vh;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  /* v207：ふよふよ（photo-sway）は廃止＝全身が揺れて宇宙遊泳に見える（洋平指摘）。被写体は静止が自然 */
}
#photo-controls {
  /* env(safe-area-inset-bottom)＝iPhoneの下部バーに隠れないための余白 */
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  /* v206：黒ベタ→黒透過グラデ＋上端に金の細ライン（和の記号）＝映像を邪魔しない操作卓 */
  background: linear-gradient(to top, rgba(8, 6, 4, 0.95), rgba(8, 6, 4, 0.78));
  border-top: 1px solid rgba(212, 175, 90, 0.55);
}
#photo-guide {
  text-align: center;
  font-size: 13.5px; /* v207：説明文は大きめに（洋平指摘） */
  color: rgba(255, 250, 235, 0.9);
  margin-bottom: 8px;
}
/* シャッター行（中央寄せ。衣装切替は左上ピルへ移動 v207） */
.pc-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
#photo-shutter {
  /* カメラの慣習の白丸×金リング＝一目でシャッター */
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(212, 175, 90, 0.95);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25), 0 2px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.1s;
}
#photo-shutter:active { transform: scale(0.9); }
/* v215：機能ボタン行＝ファインダー下端のすぐ下の黒余白に横並び（縦位置はJSがクリップ枠に同期） */
#photo-actions {
  position: absolute;
  top: 70%; /* 初期値の保険（同期前でも下寄りに出る） */
  left: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none; /* 行の余白はステージのタッチ操作を邪魔しない */
}
#photo-actions button {
  /* v219：等幅の角丸ボタン＝4つ並んでも必ず1段に収まる（2段崩れ防止・洋平指示） */
  pointer-events: auto;
  flex: 1;
  max-width: 108px;
  background: rgba(20, 14, 10, 0.72);
  border: 1.5px solid rgba(212, 175, 90, 0.85);
  border-radius: 10px;
  padding: 11px 2px;
  color: #f7e3ae;
  font-size: 12.5px;
  font-weight: bold;
  white-space: nowrap;
}
/* v213：上の黒余白=顔チップ（操作対象の選択）。v215で大型化（洋平指摘） */
#photo-cast-chips {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 5;
  display: flex;
  gap: 10px;
}
.cast-chip {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 90, 0.6);
  overflow: hidden;
  background: #201812;
  opacity: 0.72;
}
.cast-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* ar_list絵（縦長）は顔のある上部を見せる */
}
.cast-chip.selected {
  border-color: #ffd97a;
  box-shadow: 0 0 0 2.5px rgba(255, 217, 122, 0.85), 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 1;
}
/* 撮影後のボタンは黒透過×金縁の言語に統一（保存＝金の主ボタン） */
#photo-controls .btn-primary {
  background: linear-gradient(160deg, #eed393, #cfa94e 45%, #a8862f);
  color: #532c1a;
  text-shadow: 0 1px 2px rgba(255, 242, 205, 0.6);
  border: none;
  box-shadow: inset 0 0 0 1.5px rgba(120, 88, 26, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
}
#photo-controls .btn-secondary {
  background: rgba(20, 14, 10, 0.6);
  border: 1.5px solid rgba(212, 175, 90, 0.7);
  color: #f7e3ae;
}
#photo-close-top {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 5;
  /* v215：機能ボタン（黒×金）と役割を分ける臙脂の配色＋少し大きく（洋平指摘） */
  background: rgba(140, 42, 36, 0.88);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: bold;
  cursor: pointer;
}
#photo-controls .btn-primary,
#photo-controls .btn-secondary {
  margin-top: 8px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
#photo-hint {
  color: #ccc;
  font-size: var(--fs-min);
  text-align: center;
  margin-top: 6px;
}
/* ---- モンスター出現演出（AR風エンカウント） ---- */
#encounter-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; /* なぞり中に画面がスクロールしないように */
  /* v262：なぞり中の長押しで iOS の画像メニュー（保存・コピー等）や
     テキスト選択が出ないようにする（洋平実機で発生） */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#encounter-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* カメラ映像を画面いっぱいに */
  pointer-events: none; /* タッチはオーバーレイが受ける */
}
#encounter-monster {
  position: relative;
  /* v294：画面幅ほぼいっぱいまで拡大（洋平と合意）。
     魔法陣ガイドの大きさは据え置き＝陣から大きくはみ出す「大物」感 */
  width: 95%;
  max-width: 480px;
  /* タッチの対象から外す＝長押ししても画像メニューの対象にならない（iOS/Android両対応）。
     なぞりも連打もオーバーレイで拾うので操作への影響はない */
  pointer-events: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
#encounter-monster.appear {
  animation: monster-pop 0.5s ease-out, monster-float 2s ease-in-out 0.5s infinite;
}
#encounter-monster.caught {
  animation: monster-catch 0.8s ease-in forwards;
}
@keyframes monster-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes monster-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes monster-catch {
  30% { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
#encounter-label {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  padding: 9px 12px;
  text-align: center;
  color: #fff;
  font-size: var(--fs-title);
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  /* v257：黒透過のリボン帯（両端フェード）＋上下に金の細ライン
     ＝素の白文字が背景写真の上で浮いていた（洋平指摘）への差別化 */
  background:
    linear-gradient(90deg, transparent, rgba(201,166,72,0.65) 18%, rgba(201,166,72,0.65) 82%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(201,166,72,0.65) 18%, rgba(201,166,72,0.65) 82%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(12,9,6,0) 0%, rgba(12,9,6,0.66) 16%, rgba(12,9,6,0.66) 84%, rgba(12,9,6,0) 100%);
}
/* 文言が空の間はリボンごと消す（帯だけ残らないように） */
#encounter-label:empty { display: none; }

/* ---- プロローグ（v307：闇に光と神が現れ、時を超えた守り人たちが集う） ---- */
#prologue-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 170;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  --su: min(100vw, 480px); /* v358：会話ウィンドウ共通化用（#story-overlayと同じ基準幅） */
}
#prologue-stage { position: absolute; inset: 0; overflow: hidden; }
/* キャラ（歩行ドットの足踏み）。位置はJSが%で指定・ふわっと現れる */
.pro-chara {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 72px;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 1.4s ease-out;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
}
.pro-chara.in { opacity: 1; }
/* 神：光の玉の中に半透過で坐す。後光はドット絵のコマ送り＋CSSの光背 */
#pro-god-wrap {
  position: absolute;
  left: 50%;
  top: 21%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2s ease-out;
}
#pro-god-wrap.in { opacity: 1; }
#pro-god {
  /* v355：大西さん新素材（g01・432×288後光つき）。半透過はPNG焼き込み済み。
     v365：半田_00のステージ（幅57.6%）と完全に同じ見かけサイズ＝画面幅比で指定
     （px固定だと375px以外の端末でステージ側とズレる・洋平指摘） */
  position: relative;   /* 光（絶対配置）より手前に描く */
  width: 57.6vw;
  image-rendering: pixelated;
}
#pro-god-light {
  /* v355：CSSの放射光→大西さんの光素材（hikaris・432×432）へ差し替え。
     神のキャンバス中心＝光の中心（半田_00のステージと同じ重ね方） */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 57.6vw;
  height: 57.6vw;
  transform: translate(-50%, -50%);
  animation: pro-light-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pro-light-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}
/* (1)の点滅期：まだ神は見えず、小さな光だけが瞬いている */
#pro-god-wrap.spark #pro-god { opacity: 0; }
#pro-god-wrap.spark { opacity: 1; }
#pro-god-wrap.spark #pro-god-light {
  width: 120px;
  height: 120px;
  animation: pro-spark 1.1s ease-in-out infinite;
}
@keyframes pro-spark {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
}
/* テキスト：名前窓なしの神託形式（中央下・詩の間で送る） */
/* v358：窓の見た目・フォント・▼は会話イベントと完全共通（#story-box系と
   セレクタ共有・洋平FB「他のイベントと共通に」）。ここは位置と出現フェードだけ
   ＝会話窓と同じ下端位置・同じ実効幅（su×0.95＝story-bottomの左右余白と一致） */
#prologue-textbox {
  position: absolute;
  left: 50%;
  bottom: calc(var(--su) * 0.239);
  transform: translateX(-50%);
  width: calc(var(--su) * 0.95);
  opacity: 0;
  transition: opacity 0.8s;
}
#prologue-overlay.talking #prologue-textbox { opacity: 1; }
/* v364：神託はタイプライター表示（会話イベントと同じ20字/秒）＝フェードは廃止 */
/* v364：[とばす]は会話イベント（#story-skip）にも設置＝同じ見た目（洋平指定） */
#prologue-skip,
#story-skip {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  padding: 7px 14px;
  border: 1px solid rgba(244, 234, 208, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(244, 234, 208, 0.75);
  font-size: 11px;
}
#story-skip { z-index: 150; } /* 立ち絵・窓より手前、トビラ（z200）が閉じたら隠れる */
/* 終幕の暗転。v400：中身（舞台・神託窓・とばす）だけ溶かして黒幕は残す（洋平指定＝
   ジングルを黒画面で聞かせ、4秒後の「タップでつづける」でコース一覧へ。
   旧実装はオーバーレイごと透明化＝幕が透けてコース一覧が見えてしまっていた） */
#prologue-overlay.fadeout #prologue-stage,
#prologue-overlay.fadeout #prologue-textbox,
#prologue-overlay.fadeout #prologue-skip { animation: pro-fadeout 2.2s ease-in forwards; }
@keyframes pro-fadeout { to { opacity: 0; } }
/* v400：黒画面のタップ案内（ジングル開始4秒後にふわっと出て、ゆっくり明滅） */
.pro-tap-msg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  letter-spacing: 0.12em;
  z-index: 40;
  animation: tapmsg-blink 1.8s ease-in-out infinite;
}
@keyframes tapmsg-blink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.3; }
}

/* ---- キャッチ演出（v256封印の印仕様：五芒星なぞり→魔法陣→光の玉→3回はずむ→登録カード） ---- */
/* なぞりガイドと金の軌跡を描くキャンバス（イベントはオーバーレイが受ける） */
#encounter-trace {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* 捕獲の魔法陣（v258：ぴぽや素材の展開アニメ。位置・大きさ・背景はJSが設定する） */
#encounter-seal {
  position: absolute;
  pointer-events: none;
}
/* v406：床陣から立ち上る金のオーラ（半田・貞光と同じ構成。矩形はJSが陣に重ねる） */
#encounter-aura {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
#encounter-aura.rise { opacity: 1; }
/* アニメ完走後（or 静止表示）：金の輝きがゆっくり脈打つ */
#encounter-seal.pulse { animation: seal-pulse 1.2s ease-in-out infinite; }
@keyframes seal-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4) drop-shadow(0 0 22px rgba(255, 224, 110, 0.55)); }
}
/* 読み込みが間に合わなかったときの静止フォールバック：完成形がスケールインで登場 */
#encounter-seal.shine-static { animation: seal-in 0.5s ease-out; }
@keyframes seal-in {
  0% { transform: scale(0.35) rotate(-40deg); opacity: 0; filter: brightness(3); }
  60% { transform: scale(1.07) rotate(8deg); opacity: 1; filter: brightness(1.9); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1.2); }
}
/* 封印の閃光（v296洋平案）：魔法陣完成の瞬間、画面全体が白に包まれて
   フェードアウトの光の中から玉が現れる。魔物→玉の切り替えの粗も白が隠す */
#encounter-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#encounter-flash.burst { animation: white-burst 0.95s ease-out forwards; }
@keyframes white-burst {
  0% { opacity: 0; }
  28% { opacity: 1; }
  42% { opacity: 1; }
  100% { opacity: 0; }
}

/* 連打の手応え：タップのたび魔物が白く光る */
#encounter-monster.hit {
  filter: brightness(2.4) drop-shadow(0 0 18px rgba(255, 230, 120, 0.9));
}
/* 操作ガイド */
#encounter-guide {
  position: absolute;
  bottom: calc(160px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#encounter-guide span { font-size: var(--fs-min); font-weight: normal; }
/* 光の玉（捕獲中のモンスター） */
#encounter-orb {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px; /* left/topは中心座標で指定される */
  border-radius: 50%;
  /* v405：金の光の玉→木彫りの「封印の玉」写真に差し替え（洋平素材を円形切り抜き）。
     金の光輪は「封印の力をまとう」表現としてそのまま残す */
  background: url('../assets/monster/fuuin_orb.webp') center / cover no-repeat;
  box-shadow: 0 0 24px 6px rgba(255, 214, 80, 0.8);
}
#encounter-orb.burst { animation: orb-burst 0.45s ease-out; }
@keyframes orb-burst {
  0% { transform: scale(3); opacity: 0; filter: brightness(3); }
  60% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); filter: brightness(1); }
}
/* ぽん、ぽん、ぽん……（3回はずむ。ドキドキの間） */
#encounter-orb.bouncing { animation: orb-bounce 0.6s ease-in-out 3; }
@keyframes orb-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-30px) scale(1.05); }
  70% { transform: translateY(0) scale(0.94, 0.9); }
}
/* カチッ（確定の光） */
#encounter-orb.locked { animation: orb-lock 0.5s ease-out forwards; }
@keyframes orb-lock {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.35); filter: brightness(2.4); }
  100% { transform: scale(1.1); filter: brightness(1.4); }
}
/* 図鑑登録カード＝金の登録証（v256：和紙地×金二重線の額装＝討伐証明書の言語） */
#encounter-card,
.woshite-getcard { /* v375：神代文字の獲得カードも同じ金の登録証（獲得の締めは全コース同型） */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* v292：カードも魔物も大きく堂々と（洋平指示） */
  width: min(90vw, 384px);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 224, 138, 0.28), transparent 62%),
    #fdf9ee;
  border: 2px solid #c9a648;
  border-radius: 16px;
  padding: 24px 16px 18px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 34px rgba(240, 205, 110, 0.45);
  animation: card-pop 0.45s ease-out;
  cursor: pointer;
}
#encounter-card::after,
.woshite-getcard::after { /* 金の内枠＝二重線の額装 */
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 166, 72, 0.75);
  border-radius: 11px;
  pointer-events: none;
}
@keyframes card-pop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
#encounter-card img,
.woshite-getcard img {
  height: 265px; /* v293：さらに拡大（コマの透明余白込みなので大きめ指定） */
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(240, 200, 90, 0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
/* 「捕獲成功！」＝金グラデの帯×焦茶文字（アプリ共通の「完了＝金」の言語） */
#encounter-card .dex-get,
.woshite-getcard .dex-get {
  display: inline-block;
  padding: 6px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7e08a, #d9b545 55%, #c9a53a);
  color: #4a3a12;
  font-size: var(--fs-title);
  font-weight: bold;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(160, 120, 30, 0.35);
  margin-bottom: 10px;
}
#encounter-card .dex-name,
.woshite-getcard .dex-name {
  /* v293：魔物名は白地×金縁の角丸札に（洋平指示） */
  display: inline-block;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.95);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  box-shadow: 0 2px 6px rgba(160, 120, 30, 0.2);
  font-size: var(--fs-body);
  font-weight: bold;
  color: #4a3a12;
  margin-top: 10px;
}
#encounter-card .dex-no,
.woshite-getcard .dex-no { font-size: var(--fs-sub); color: #6b5a33; margin-top: 4px; }
#encounter-card .dex-tap,
.woshite-getcard .dex-tap { font-size: var(--fs-min); color: #a08c60; margin-top: 10px; }
/* v375：神代文字は水色＝白いカード地に沈むため、夜空色の光背を敷いて浮かせる。
   v376：名前・枚数の行をなくした分、文字を大きく（190→256px・洋平指定） */
.woshite-getcard img {
  image-rendering: auto;
  height: 256px;
  padding: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #223a5e 0%, #16233c 52%, rgba(22, 35, 60, 0) 71%);
  filter: drop-shadow(0 0 14px rgba(150, 225, 255, 0.85));
}

/* ---- 貞光神書（v310：謎を解くと目的地が示される導きの旅） ---- */
.shinsho-row {
  /* v313：4列に戻す（拡大するのは枠でなく「巻物のズーム率」＝画像を結び目クロップ版に・洋平指示） */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.shinsho-maki { text-align: center; }
.shinsho-maki .sh-frame {
  position: relative;
  border: 1.5px solid rgba(184, 146, 63, 0.75);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
/* v313：巻ごとの落ち着いた和色（トーンを揃えて散らからない）。一=紺青/二=千歳緑/三=滅紫/四=海老茶 */
.shinsho-maki:nth-child(1) .sh-frame { background: radial-gradient(circle at 50% 38%, #31405c, #1e2739 78%); }
.shinsho-maki:nth-child(2) .sh-frame { background: radial-gradient(circle at 50% 38%, #2f4a3e, #1d2f26 78%); }
.shinsho-maki:nth-child(3) .sh-frame { background: radial-gradient(circle at 50% 38%, #4a3656, #2d2136 78%); }
.shinsho-maki:nth-child(4) .sh-frame { background: radial-gradient(circle at 50% 38%, #533a40, #322227 78%); }
.shinsho-maki .sh-frame { isolation: isolate; }
.shinsho-maki img {
  /* v313：結び目クロップ版（440×587）を枠いっぱいに */
  width: 100%;
  display: block;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* v313：巻名は枠の下の囲みピルに（白地×金縁＝アプリ共通の名札言語）。
   状態の文字は廃止＝locked のグレーアウトと ready の呼吸光で伝わる（洋平指示） */
.shinsho-maki .sh-kan-pill {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.95);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  font-size: 11px;
  font-weight: bold;
  color: #4a3a12;
}
.shinsho-maki.locked .sh-kan-pill { filter: grayscale(0.8); opacity: 0.6; }
/* locked：静かに眠る（暗く・鍵マーク） */
.shinsho-maki.locked .sh-frame { filter: grayscale(0.7) brightness(0.72); }
.shinsho-maki.locked .sh-state { color: #9a8f7a; }
.shinsho-maki .sh-lock {
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-size: 14px;
  filter: none;
}
/* ready：解ける巻＝「次はこれを押す」がパッと見でわかる点滅（v400洋平指定）。
   角丸アイコンごと「パッパッパッ……」と3回点滅→ひと呼吸の静止を繰り返す。
   金光の縁は常時つけて「押せる」感も残す */
.shinsho-maki.ready .sh-frame {
  cursor: pointer;
  box-shadow: 0 0 14px rgba(240, 205, 110, 0.8);
  animation: shinsho-blink 2.4s linear infinite;
}
@keyframes shinsho-blink {
  0%      { opacity: 1; }
  6.25%   { opacity: 0.22; }
  12.5%   { opacity: 1; }
  18.75%  { opacity: 0.22; }
  25%     { opacity: 1; }
  31.25%  { opacity: 0.22; }
  37.5%, 100% { opacity: 1; }
}
.shinsho-maki.ready .sh-state { color: #b8860b; font-weight: bold; }
/* solved：達成＝スポット写真と同じ金の周回光＋光沢スイープの言語 */
.shinsho-maki.solved .sh-frame::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  padding: 5px;
  background: conic-gradient(from var(--photo-spin),
    transparent 0deg, rgba(255, 222, 128, 1) 22deg, rgba(255, 250, 225, 1) 40deg,
    rgba(255, 222, 128, 1) 58deg, transparent 95deg,
    transparent 165deg, rgba(255, 226, 140, 0.9) 205deg, rgba(255, 245, 215, 0.95) 220deg,
    rgba(255, 226, 140, 0.9) 235deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: photo-ring 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.shinsho-guide { text-align: center; margin-bottom: 0; line-height: 1.8; } /* v311：カード内の最終要素になった */

/* 未解放スポット＝「？」の静かなセル */
.spot-photo-cell.sp-unknown { opacity: 0.8; }
.sp-unknown .sp-q {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  font-size: 44px;
  font-weight: bold;
  color: rgba(107, 90, 51, 0.45);
  background:
    radial-gradient(circle at 50% 42%, rgba(184, 146, 63, 0.12), transparent 65%),
    #efe6d2;
}
.sp-unknown .sp-name { color: #9a8f7a; letter-spacing: 0.3em; }

/* 封印の問いウィンドウ */
#shinsho-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 14, 0.72);
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
#shinsho-box {
  width: min(92vw, 420px);
  max-height: 84vh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 224, 138, 0.25), transparent 60%),
    #fdf9ee;
  border: 2px solid #c9a648;
  border-radius: 16px;
  padding: 20px 16px 16px;
  /* v400：card-popはtranslate(-50%,-50%)込み（absolute配置カード用）なので、
     flex中央置きのこの箱に使うとアニメ中だけ左上へずれて見えた（洋平報告）。
     scaleだけの専用ポップで最初から中央に出す */
  animation: sh-pop 0.4s ease-out;
}
@keyframes sh-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
#shinsho-box .sh-kan-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #4a3a12;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 166, 72, 0.5);
  margin-bottom: 12px;
}
#shinsho-box .sh-question {
  font-size: 14px;
  line-height: 1.9;
  color: #4a3a12;
  margin-bottom: 12px;
}
#shinsho-box .sh-close {
  display: block;
  margin: 14px auto 0;
  padding: 8px 22px;
  border: 1.5px solid rgba(150, 120, 60, 0.6);
  border-radius: 999px;
  background: none;
  color: #6b5a33;
  font-size: 13px;
}
/* v398：本番謎（nazo_final）＝問題・答え合わせは和紙の札画像そのまま見せる */
#shinsho-box .sh-riddle-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border: 1px solid rgba(150, 120, 60, 0.35);
  border-radius: 10px;
}
/* 見返しの「こたえ」行：クリーム地の箱の中でも読める濃い墨色に */
#shinsho-box .sh-answer {
  margin: 0 0 12px;
  color: #4a3a12;
  background: rgba(201, 166, 72, 0.15);
}
#shinsho-box .sh-next {
  margin-top: 4px;
}
/* v398：画像つきヒント（巻之三①の送り仮名の拡大） */
.riddle-hint-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  border: 1px solid rgba(150, 120, 60, 0.3);
  border-radius: 8px;
}
/* v400：「札をタップすると拡大できます」の小さな案内 */
#shinsho-box .sh-zoom-hint {
  text-align: center;
  font-size: 11px;
  color: #8a7a55;
  margin: -6px 0 10px;
}
/* v400：札画像のタップ拡大ビューア（巻三・巻四の文字が小さい端末対策・洋平指定）。
   ピンチで1〜6倍・ドラッグで移動・ダブルタップで2.4倍⇔等倍（操作はJS） */
.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(6, 5, 9, 0.94);
  touch-action: none;
  overscroll-behavior: contain;
}
.zoom-overlay img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 94vw;
  max-height: 84vh;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  pointer-events: none;      /* 操作はオーバーレイが受ける（長押し保存の抑止も兼ねる） */
  -webkit-user-drag: none;
}
.zoom-overlay .zoom-close {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 2;
  padding: 9px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(30, 26, 20, 0.78);
  color: #fff;
  font-size: 13px;
}
.zoom-overlay .zoom-guide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  pointer-events: none;
}
/* v405：祝福パーティクル＝舞い上がる金の粒55粒（洋平がモック比較で選定・紙吹雪から差し替え）。
   神器カード（.gear-particles）と同じ見た目の光点が、画面の下から天へふわふわ昇る */
.celebrate-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.celebrate-layer i {
  position: absolute;
  bottom: -3%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 225, 1), rgba(255, 222, 128, 0.85) 55%, transparent 75%);
  box-shadow: 0 0 6px rgba(255, 226, 140, 0.8);
  opacity: 0;
  animation: celebrate-up linear infinite;
}
@keyframes celebrate-up {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.95; }
  70%  { opacity: 0.7; }
  100% { transform: translateY(-108vh) scale(1.15); opacity: 0; }
}
.celebrate-layer.fading { transition: opacity 1.2s; opacity: 0; }

/* ---- 漆器獲得演出（v297：曇った漆器を磨く → 床の青い魔法陣＋オーラ → 獲得カード） ---- */
#polish-stage {
  position: absolute;
  inset: 0;
}
#polish-wrap {
  /* 漆器は中央やや上＝下に「地面」の余白を残し、床の魔法陣が足元に見える */
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(78vw, 380px);
}
#polish-item {
  display: block;
  width: 100%;
  pointer-events: none; /* こすりはオーバーレイが受ける（長押しの画像メニューも防ぐ） */
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
/* 出現：曇った漆器はゆっくりフェードイン（0.9sは早すぎて分からなかった→2.5sに・洋平FB） */
#polish-wrap.appear { animation: polish-appear 2.5s ease-out both; }
@keyframes polish-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 磨き上がり：漆器が青白い光をまとう（半田＝藍の言語） */
#polish-item.gleam { animation: shikki-gleam 1.8s ease-in-out infinite; }
@keyframes shikki-gleam {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(130, 185, 255, 0.55)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
  50% { filter: drop-shadow(0 0 30px rgba(175, 215, 255, 0.95)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
}
/* 曇り（漆器の形に切り抜いた白ずみ。中身はJSが描く） */
#polish-fog {
  position: absolute;
  inset: 0;
  width: 100%;   /* canvasは置換要素＝表示サイズの明示が必須（Retinaではみ出した反省） */
  height: 100%;
  pointer-events: none;
}
/* 床の魔法陣と立ち上るオーラ（大きさ・縦位置はJSが漆器に合わせて設定する） */
#polish-seal, #polish-aura {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
#polish-aura { opacity: 0; transition: opacity 0.6s ease-out; }
#polish-aura.rise { opacity: 1; }
/* 獲得の閃光は金色（封印の白と使い分ける。祝福＝金のアプリ共通言語） */
#encounter-flash.gold { background: #ffe9b8; }
/* 獲得カードの漆器は写真＝ドット絵用のくっきり拡大を使わず、なめらかに縮小 */
#encounter-card.polish img { image-rendering: auto; height: 230px; }

/* ---- 魔王への挑戦：集めた力（正方形アイコングリッド） ---- */
/* ---- v113：戦闘準備画面（メインメニューの言語で再構成） ----
   和紙×青海波の台紙（背景はJSがmenu_bgを敷く）に、
   高札（お触書）＋収集帳＋出陣の帯。新しい和風記号は足さない設計 */

/* あらすじ＝黒窓白枠（v131・戦闘のDQ窓／パーティ詳細窓と同じ言語。
   旧v113の和紙の高札は黒×金台紙化で浮いたため置き換え＝洋平と合意） */
.notice-board {
  background: rgba(10, 10, 16, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: var(--fs-sub);
  line-height: 1.9;
  color: #e8e6e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 朱印つき見出し（section-titleの和装版。朱の角印＝出陣の帯と同じ緋色）。
   v125：台紙の黒×金化に伴い文字は白へ（墨色は黒地で読めない）＋薄い黒縁で浮かす */
h2.stamp-heading {
  font-size: var(--fs-title);
  margin: 18px 0 8px;
  color: #f0ede5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
h2.stamp-heading::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #b3342e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* 収集帳＝臙脂パネル（v131・パーティ画面の装備パネル.pt-panelと同じ言語＝
   「装備は臙脂の上」で2画面が揃う。旧v113の和紙の二重枠は黒×金台紙化で浮いたため置き換え） */
.equip-book {
  background: rgba(88, 34, 40, 0.93);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 出陣の帯＝合言葉帯と同じ製法の緋色版（帯画像はJSがasset()で敷く）。
   ふわっと入場したあと、画面で唯一の動き＝静かな呼吸で「挑戦への誘い」 */
button.battle-go {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 22px 16px; /* v198：縦幅を大きく（洋平指示） */
  margin-top: 16px;
  font-size: var(--fs-title);
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #f7e3ae; /* 明るい金（合言葉帯と同じ文字色） */
  text-shadow: 0 1px 3px rgba(70, 12, 8, 0.65);
  background-color: #b3342e; /* 画像ロード前の下地（緋色） */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation:
    rise-in 0.45s ease-out both,
    battle-go-breath 3s ease-in-out 0.6s infinite;
}
@keyframes battle-go-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
button.battle-go .bg-main { display: block; }
button.battle-go .bg-sub {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  opacity: 0.95;
}
/* v198：討伐済みは金の帯に変わる＝「挑む緋色」から「勝ち取った金」へ（洋平案）。
   サブ行で討伐完了済＋証明書の場所を案内（旧won-badgeを統合） */
button.battle-go.cleared {
  background-image: none;
  background: linear-gradient(160deg, #eed393, #cfa94e 45%, #a8862f);
  color: #532c1a;
  text-shadow: 0 1px 2px rgba(255, 242, 205, 0.6);
  box-shadow: inset 0 0 0 1.5px rgba(120, 88, 26, 0.55), 0 2px 10px rgba(150, 112, 36, 0.4);
}

/* 入場のふわっ（ワンショット＝読み物を邪魔しない。チュートリアルv76と同じ思想） */
.rise-in { animation: rise-in 0.45s ease-out both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .rise-in, button.battle-go { animation: none; }
}

/* パーティバナー（v126・準備画面）：洋平作のカットインバナー（750×200・
   3人斜め区切り×黒地金光・「パーティ」焼き込み済み）を全面に敷く。タップでパーティ画面へ */
button.party-banner {
  display: block;
  width: 100%;
  aspect-ratio: 750 / 200; /* 画像ロード前から高さ確保（ガタつき防止） */
  padding: 0;
  margin: 12px 0 2px;
  background-color: #141019; /* ロード前の下地 */
  background-size: cover;
  background-position: center;
  /* v127：金の二重枠（外枠＋黒の間＋細い内金線）＝合言葉・出陣の帯と同じ「押せる特別」の
     金の言語で額装（枠なしだと絵のままでボタンに見えない＝洋平実機指摘） */
  border: 2px solid #c9a648;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1.5px rgba(20, 16, 25, 0.9),
    inset 0 0 0 2.5px rgba(201, 166, 72, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
button.party-banner:active { transform: scale(0.98); } /* 押し込みの手応え */
/* v128：押したくなる記号の追加3点（実機で「まだ物足りない」洋平指摘対応） */
button.party-banner { position: relative; overflow: hidden; }
/* ①四隅の飾り金具（宝箱・額縁の隅金具＝特別な入口の記号） */
.pb-corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2.5px solid #e8c96e;
  pointer-events: none;
}
.pb-corner.tl { top: 2px; left: 2px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.pb-corner.tr { top: 2px; right: 2px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.pb-corner.bl { bottom: 2px; left: 2px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.pb-corner.br { bottom: 2px; right: 2px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
/* ②「›」＝進める記号（焼き込みの「パーティ」の右隣に並べてラベル化） */
.pb-go {
  position: absolute;
  right: 2%;
  bottom: 5%;
  color: #f2dc9b;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
/* ③低頻度の光沢スイープ（7秒に1回だけ金の光がスッと走る＝誘い） */
.pb-shine {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 190, 0.35), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: pb-shine-run 4.5s linear infinite; /* v129：7s→4.5s（実機で効きが良く増量・洋平指示） */
  pointer-events: none;
}
@keyframes pb-shine-run {
  0% { transform: translateX(-160%) skewX(-20deg); }
  20% { transform: translateX(420%) skewX(-20deg); }
  100% { transform: translateX(420%) skewX(-20deg); } /* 残り80%は画面外で静止 */
}
@media (prefers-reduced-motion: reduce) {
  .pb-shine { animation: none; }
}

/* ---- パーティ画面（v116・洋平モック準拠） ----
   立ち絵が背景層、下半身に「HP/MP→黒帯（ジョブLv・名前）→臙脂パネル（装備＋特技）」が重なる */
.party-stage {
  position: relative; /* v122：パーティクル層の基準 */
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  overflow: clip; /* 両端カラムの立ち絵はみ出し（透明余白）を切る＝横スクロール防止 */
  /* v143：clip境界を#screenのpadding(16px)ぶん外＝画面端まで広げる。旧境界（コンテンツ端）だと
     端キャラの後光がα≈8%残った位置で縦に切られ「縦の境界線」に見えていた（洋平の実機指摘）。
     負マージン＋同量パディングなのでキャラの位置・レイアウトは不変、切り取り線だけ画面端へ移動。
     画面端では後光はほぼ完全にフェード済み（430px幅機で右端キャラのα0到達≈431px）＝切れ目は見えない */
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}
/* ---- v122-123：輝きのパーティクル ----
   装備の獲得数で粒が増える（JSが生成）。粒は透過PNG＝どの環境でも確実に光として乗る
   （v122の黒背景×mix-blend-mode:screen方式はiOS Safariで黒四角化する事故があり廃止）。
   v139：レイヤーはstage内→#screen直下（wrapの前）へ移動＝背景とまったく同じ矩形
   （ヘッダー下端〜画面下端）に貼る。stage内時代は「湧き下限48%の水平線」と
   「stage上端のクリップ線」が境界線として見えていた（洋平の実機指摘2026-08-18）。
   DOM順でwrapより前＝立ち絵の奥に舞うのは従来どおり。
   ゆっくり上昇しながら明滅してフェード＝蒔絵の金砂子が舞い上がる文法 */
.pt-particles {
  /* v164：absolute→fixed＝内部スクロール化に伴い、粒はビューポートに舞う
     （absoluteのままだとスクロールコンテナの可視域サイズに縮み、スクロールで粒が消える）。
     z-index:-1＝bg-fixed（DOM順で前）の上・コンテンツの下＝キャラの奥は従来どおり */
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.pt-particle {
  position: absolute;
  opacity: 0;
  animation: pt-float linear infinite;
}
@keyframes pt-float {
  0% { transform: translateY(0) scale(0.85); opacity: 0; }
  15% { opacity: 0.95; }
  60% { opacity: 0.7; }
  100% { transform: translateY(-110px) scale(1.1); opacity: 0; }
}
/* 全装備コンプ＝後光ブースト（お披露目の最終形）。
   v142：こちらも同じ理屈でボックス内フェード完結（旧78%終端は上端カットの境界線が出る） */
.party-stage.full-glory .pt-illust::before {
  background: radial-gradient(ellipse 64% 52% at 50% 32%, rgba(255, 215, 106, 0.58), transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
  .pt-particle { animation: none; opacity: 0.55; } /* 動きなしでも静かな輝きは残す */
}
.pt-chara { flex: 1; min-width: 0; cursor: pointer; }
/* v118：立ち絵はカラム幅を大きくはみ出させる（洋平モックの構図）。
   キャンバス左右は透明余白なので、体同士は重ならず身長だけ大きくなる。
   タップ判定はカラム側に任せる（pointer-events:none＝はみ出し部分の誤タップ防止） */
.pt-illust {
  position: relative;
  width: 175%;
  margin-left: -37.5%;
  aspect-ratio: 1 / 2; /* パーティ専用立ち絵（720×1440）の比率＝画像ロード前から高さ確保 */
  pointer-events: none;
}
.pt-illust img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 立ち絵の背後に金の後光（お披露目感）＋足元に光だまり。
   v120：黒地化に伴い強化＝後光は濃く、足元は影→金の光だまりに反転（黒地に黒影は見えない）
   v142：グラデーションはボックス内で完全にフェードし切る数値にする＝旧値（46%×74%）は
   上端到達時にまだα≈5%残り、ボックス上端で切られた金が「画面を横切る水平の境界線」に
   見えていた（3人分のカットラインが同じ高さに揃うため。洋平の実機指摘2026-08-18）。
   検算：上方向の透明到達点 = 縦半径50%×終端62% = 31% ＜ 中心位置32% ＝上端で必ずα0 */
.pt-illust::before {
  content: '';
  position: absolute;
  inset: 0 0 30%;
  background: radial-gradient(ellipse 58% 50% at 50% 32%, rgba(255, 215, 106, 0.4), transparent 62%);
  pointer-events: none;
}
.pt-illust::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0.4%; /* 足先はキャンバス下端から約3%（納品規格）＝そのすぐ下に光だまり */
  height: 3%;
  background: radial-gradient(ellipse at center, rgba(255, 215, 106, 0.32), transparent 70%);
  pointer-events: none;
}
/* 表情レイヤー：全身まるごとの表情違いをベースに重ねる（onの間だけ＝瞬き・ほほえみ） */
.pt-face { opacity: 0; }
.pt-face.on { opacity: 1; }
/* UI層：立ち絵の下半身に重ねる（負マージンは幅基準％。重なり量はここ1か所で調整。
   立ち絵の高さ=カラム幅の350%（幅175%×比1:2）なので、-150%=絵の上から約57%の位置に
   HP/MPが来る計算＝腰のあたり）。
   v119：z-index=2＝隣のカラムのはみ出し立ち絵より各キャラのウィンドウを常に手前に */
.pt-ui {
  position: relative;
  z-index: 2;
  margin-top: -150%;
}
/* HP/MP＝白太字＋色下線（戦闘UIの「数字の下線＝バー」文法）。立ち絵の上なので黒縁必須。
   v119：英字ラベルは添え字なので11px（13px最小規定の例外＝洋平指示）・
   下線バーは::afterで右寄せ50%＝見た目の長さを半分に */
.pt-vital {
  position: relative;
  text-align: right;
  font-size: 11px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.45);
  width: 74%;
  margin-left: auto;
  line-height: 1.5;
  padding-bottom: 4px;
}
.pt-vital::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 3px;
  border-radius: 2px;
}
.pt-vital b { font-size: var(--fs-body); }
.pt-vital.hp::after { background: #46c95f; }
.pt-vital.mp::after { background: #3fc3ea; }
.pt-vital.mp { margin-top: 2px; }
/* 黒帯：上＝ジョブ＋Lv、下＝名前。v119：2本をくっつけて白線で区切る＝1つの窓に。
   v120：黒地に黒帯が同化するため外周に白枠＝戦闘のDQ窓（黒地白枠）の言語 */
.pt-band {
  background: rgba(12, 12, 16, 0.9);
  color: #fff;
  text-align: center;
  font-size: var(--fs-min);
  font-weight: bold;
  padding: 4px 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pt-job {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6); /* 境界の白線（外枠より控えめ） */
  border-radius: 5px 5px 0 0;
}
.pt-nameband {
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-top: none; /* 境界線はpt-job側が持つ */
  border-radius: 0 0 5px 5px;
}
.pt-lv i { font-style: normal; font-size: 11px; } /* 「Lv」も添え字扱いで小さく */
/* 臙脂パネル＝装備アイコン2×2＋特技スロット（合言葉帯と同系の深い赤＝和の言語） */
.pt-panel {
  background: rgba(88, 34, 40, 0.93);
  border-radius: 10px;
  padding: 7px;
  margin-top: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pt-eqgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* 装備アイコン：獲得＝虹の輝き（トレカの箔押し風）／未獲得＝金属の灰／無い枠＝薄い空き。
   NanoBananaのアイコン画像が届いたら中身を画像に差し替える予定（枠の言語はそのまま） */
.pt-eq {
  aspect-ratio: 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  position: relative; /* v130：光沢スイープ（.shine）の基準 */
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
    conic-gradient(from 210deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c56bff, #ff6b6b);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.35);
}
.pt-eq.locked {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    conic-gradient(from 210deg, #a09c94, #ccc9c2, #a09c94, #d2cfc8, #a09c94);
  color: rgba(255, 255, 255, 0.7);
}
.pt-eq.empty {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16);
}
/* 特技スロット：習得済み＝白帯に技名／未習得＝グレーアウト（薄文字で予告） */
.pt-arts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 7px;
}
.pt-move {
  background: #fff;
  border-radius: 7px;
  padding: 7px 3px;
  text-align: center;
  font-size: var(--fs-min);
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pt-move.locked {
  background: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}
/* v120：詳細窓は黒地に合わせて戦闘のDQ窓（黒地白枠・白文字）に。ボーナス朱は明るい朱へ */
#party-detail {
  background: rgba(10, 10, 16, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #e8e6e0;
  box-shadow: none;
}
#party-detail b { color: #fff; }
#party-detail .bonus { color: #ffa08a; font-weight: bold; } /* 装備ボーナス＝黒地では明るい朱 */

.equip-grid {
  display: grid;
  /* v132：5列→7列（アイコン小型化で縦幅を抑える＝34個時代でも5行。
     「魔王に挑む！」がファーストビューから消えて離脱するのを防ぐ・洋平設計） */
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.equip-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: bold;
  color: #fff;
  background: #999;
  position: relative; /* v114：光沢スイープ（.shine）の基準 */
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  cursor: pointer;
  user-select: none;
}
.equip-cell img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
/* v114：獲得済みアイコンの光沢スイープ（箔押しカードの反射）。
   v174：JSの順繰りタイマー＋タップキラッ→図鑑と同じ「常時・各セルがランダムな自分の
   リズム」方式へ統一（周期と位相はrandomizeShinesがインラインで設定・洋平指摘） */
.equip-cell .shine,
.pt-eq .shine {
  position: absolute;
  top: -25%;
  left: 0;
  width: 55%;
  height: 150%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-140%) skewX(-20deg);
  animation: equip-shine 9s linear infinite;
  pointer-events: none;
}
@keyframes equip-shine {
  0% { transform: translateX(-140%) skewX(-20deg); }
  12% { transform: translateX(320%) skewX(-20deg); } /* 通過は約0.7秒相当＝残りは画面外で待機 */
  100% { transform: translateX(320%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .equip-cell .shine, .pt-eq .shine { animation: none; }
}
.equip-cell.locked { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.55); } /* v131：臙脂パネル用の薄白（文字は「未」・pt-moveのlockedと同じ文法） */
.equip-cell.selected { outline: 3px solid var(--color-accent); }
/* v135：NanoBanana装備アイコン（has-icon）。パーティ画面の枠言語（獲得=虹の箔押し／
   未獲得=金属の灰）をそのまま借り、画像を2.5px内側に載せて枠が縁取りとして残る。
   未獲得もグレー画像で意匠をチラ見せ（名前は詳細窓で？？？のまま＝DQW流の集める動機） */
.equip-cell.has-icon {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
    conic-gradient(from 210deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c56bff, #ff6b6b);
}
.equip-cell.locked.has-icon {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    conic-gradient(from 210deg, #a09c94, #ccc9c2, #a09c94, #d2cfc8, #a09c94);
}
.equip-cell.has-icon img,
.pt-eq.has-icon img {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  object-fit: cover;
  border-radius: 6px;
}
/* v388：未獲得は「？」アイコン画像（power_locked.webp）に統一＝グレー加工フィルタは廃止
   （画像そのものがロックデザイン。金属灰の枠はロックの縁取りとして継続） */
/* v131：説明窓は黒地系に（収集帳=臙脂パネルの中の薄黒窓。
   パーティ画面の#party-detailはID上書きでさらに白枠付きの黒窓）。
   v133：常に「3行分」の高さを確保＝タップで窓が伸びて「魔王に挑む！」が
   動くのを防ぐ（戦闘メッセージ窓v35と同じ手法。3行×行間1.7＋上下パディング24px） */
.equip-detail {
  background: rgba(10, 10, 16, 0.55);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 10px;
  /* v427：説明文が2行でも3行でも中身は窓の縦中央に置く（アイコンの縦位置が
     表示のたびにズレて見えるのを防ぐ・洋平FB）。収集帳とパーティ詳細窓の共通 */
  display: grid;
  align-content: center;
  /* v137：4行分→3行分（洋平設計2026-08-18＝詳細窓の役割分担圧縮）。
     獲得済み=名称＋効果／未獲得=？？？＋条件の最大3行構成。「魔王に挑む！」の
     ファーストビュー露出が最優先。アイコン導入後の本文幅は約15文字/行＝
     文言側は「1行目＋2行以内」に収める運用（battle.jsonの文字数は洋平が
     割り当て表で調整する約束）。+30px＝パディング24px+丸め差 */
  min-height: calc(1.7em * 3 + 30px);
  font-size: var(--fs-sub);
  line-height: 1.7;
  color: #ddd9d0;
}
.equip-detail b { color: #fff; }
/* v135：詳細窓のアイコン添え＝3行テンプレの左に56px角（縦中央）。未獲得はグレー */
.ed-row { display: flex; gap: 10px; align-items: center; }
.ed-icon {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ed-icon.locked { filter: grayscale(1) brightness(0.55); }
.ed-text { flex: 1; min-width: 0; }

/* ---- 魔王戦（FF風サイドビュー・DQ式ウィンドウ） ---- */
#battle-overlay {
  position: fixed;
  inset: 0;
  background: #000;   /* モック準拠の黒。戦闘背景画像は後日ここに */
  z-index: 170;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px));
  color: #fff;
}
#battle-escape {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: var(--fs-note);
  cursor: pointer;
  z-index: 2;
}
/* サイドビューの戦闘ステージ（魔王=左、パーティ=右）。残りの高さいっぱいに使う */
#battle-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  /* 戦闘背景（openBattleがbattle.jsonのbackgroundを設定。薄幕込み） */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
/* 戦闘開始の演出：画面フェードイン＋魔王の登場 */
#battle-overlay.battle-in { animation: battle-fadein 0.5s ease-out; }
@keyframes battle-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
#battle-overlay.battle-in #battle-boss-wrap { animation: boss-appear 0.9s ease-out; }
@keyframes boss-appear {
  from { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
/* 魔王は画面からはみ出す大きさにして「収まりきらない存在感」を出す。
   とぐろの左上を切り、頭（顔）は画面内に残る配置 */
#battle-boss-wrap {
  position: absolute;
  left: -23%;
  top: -4%;
  pointer-events: none;
}
#battle-boss-img {
  /* v454：冥獄竜が大西さんドット絵（160×224）になったため、
     イラスト時代の80vw可変からドット整数2倍=320px固定へ（味方32×50の2倍表示と同密度）。
     max-widthは幅320px未満の稀な端末ではみ出さないための保険 */
  width: 320px;
  max-width: 92vw;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6));
  animation: boss-idle 3s ease-in-out infinite;
}
/* 名前とHPバーは魔王の絵から分離して、ステージ左下の定位置に */
#battle-boss-info {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 55%;
  z-index: 2;
}
/* v397：冥獄竜のブレス・魔法＝画面全体を白〜水色に点滅（洋平指定）。
   3回の明滅で「凍てつく」体感。エフェクト・ダメージ数字より下（z4）に敷く */
.bt-screen-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: bt-flash 0.65s ease-out forwards;
}
/* v421：吹雪の白ストロボ（30%白をパッパッと素早く明滅・終焉/冥府の吹雪・洋平指定）。
   明滅のON/OFFはJS（stageStrobe）がopacityを切り替える */
.bt-strobe {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.06s linear;
}
@keyframes bt-flash {
  0%   { opacity: 0; }
  10%  { opacity: 0.9; }
  28%  { opacity: 0.1; }
  45%  { opacity: 0.65; }
  62%  { opacity: 0.08; }
  78%  { opacity: 0.4; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-screen-flash { animation: none; opacity: 0; }
}
/* v391：封印・縮地の状態バッジ（漢字＋残りターン＝判子の言語・洋平指定「アイコンで表示」）。
   封＝メッセージ窓の右肩／速＝魔王の名前行の右上 */
#battle-message { position: relative; }
.bt-buff {
  position: absolute;
  padding: 2px 9px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  pointer-events: none;
  z-index: 2;
}
.bt-buff.seal {
  right: 8px;
  top: -12px;                 /* 窓の上端に半分乗せる＝本文2行と重ならない */
  background: rgba(106, 63, 160, 0.95);
  border: 1.5px solid rgba(210, 170, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.bt-buff.haste {
  right: 0;
  top: -6px;
  background: rgba(25, 105, 185, 0.95);
  border: 1.5px solid rgba(140, 200, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
#battle-boss-name {
  font-size: 19px; /* v422：14px相当→19px（洋平指定「表示名を大きく」） */
  font-weight: bold;
  margin-bottom: 4px;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
@keyframes boss-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
#battle-boss-img.hit { animation: boss-hit 0.4s; }
@keyframes boss-hit {
  0%, 100% { transform: translateX(0); filter: none; }
  25% { transform: translateX(-10px); filter: brightness(2.2); }
  75% { transform: translateX(10px); }
}
#battle-boss-img.lunge { animation: boss-lunge 0.65s; }
@keyframes boss-lunge {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(28px); }
}
/* v112：鑑定のロックオン点滅（スコープが消えた直後・HP数字が出る前の合図）。
   金色＝鑑定の情報色。steps(1)でパキパキと3回明滅。
   hit/lungeと同じく再生中はidleが一瞬止まる既存流儀。⚠終わったらJSがクラスを外す
   （残留すると被弾hitのアニメが後勝ちルールでマスクされるため） */
#battle-boss-img.appraised-flash { animation: boss-appraised 0.75s steps(1); }
@keyframes boss-appraised {
  0% { filter: brightness(1.9) sepia(0.45) saturate(1.5); }
  17% { filter: none; }
  34% { filter: brightness(1.9) sepia(0.45) saturate(1.5); }
  51% { filter: none; }
  68% { filter: brightness(1.9) sepia(0.45) saturate(1.5); }
  85%, 100% { filter: none; }
}
#battle-boss-hpbar {
  width: 100%;
  height: 7px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  margin: 0;
  overflow: hidden;
}
/* ---- v110：鑑定の開幕演出＝照準スコープ ----
   魔王に重なる金色レチクル（外円＋内円＋十字線＋中心点、全部CSS描画）。
   出現は記念写真ボタンで確立したAF流合焦（大きく出る→縮みすぎ→カシッ）、
   合焦後はスキャンラインが円内を1往復して「解析中」を見せる。
   色は黒（参考画像）だと暗い戦闘背景に沈むため、鑑定の情報色＝金色に変更 */
#appraise-scope {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  /* v111：初見で分かるよう増強（洋平実機指摘＝白龍の明るい体に細い金線が溶けた）。
     線を太く・不透明に＋金線の外内に暗い縁取り＝明るい背景でも沈まない */
  border: 4px solid #ffd76a;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(45, 28, 0, 0.6),
    inset 0 0 0 2px rgba(45, 28, 0, 0.6),
    0 0 20px rgba(255, 215, 106, 0.65);
  /* 中心点＋十字線（円周から中心へ少し伸びる4本。border-radiusで円形にクリップされる） */
  background:
    radial-gradient(circle at center, #ffd76a 0 3px, rgba(45, 28, 0, 0.6) 3px 4px, transparent 5px),
    linear-gradient(to bottom, #ffd76a 0 15%, transparent 15% 85%, #ffd76a 85% 100%) center / 3px 100% no-repeat,
    linear-gradient(to right, #ffd76a 0 15%, transparent 15% 85%, #ffd76a 85% 100%) center / 100% 3px no-repeat;
}
#appraise-scope::before {
  content: '';
  position: absolute;
  inset: 13%;
  border: 2px solid rgba(255, 215, 106, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(45, 28, 0, 0.4), inset 0 0 0 1px rgba(45, 28, 0, 0.4);
}
#appraise-scope i {
  position: absolute;
  left: 12%;
  width: 76%;
  height: 3px;
  top: 16%;
  background: #ffe89a;
  box-shadow: 0 1px 0 rgba(45, 28, 0, 0.5), 0 -1px 0 rgba(45, 28, 0, 0.5), 0 0 10px rgba(255, 215, 106, 1);
  opacity: 0;
}
#appraise-scope.scope-in {
  animation: scope-focus 0.5s ease-out both;
}
#appraise-scope.scope-in i {
  animation: scope-scan 0.8s ease-in-out 0.5s 2 alternate; /* 合焦後に下→上の1往復 */
}
@keyframes scope-focus {
  0% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
  55% { opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(0.94); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes scope-scan {
  0% { opacity: 1; top: 16%; }
  100% { opacity: 1; top: 82%; }
}

/* v109：鑑定（トッチのアビリティ）発動中だけ数字が入る。
   min-heightで常に1行分を確保＝発動の瞬間にバーの位置がガクッと動かない */
#battle-boss-hpnum {
  min-height: 1.2em;
  margin-top: 3px;
  font-size: var(--fs-min);
  font-weight: bold;
  text-align: left;
  color: #ffd76a; /* 鑑定の情報＝金色（「特別なもの」の言語） */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
#battle-boss-hpfill {
  height: 100%;
  width: 100%;
  background: #e74c3c;
  border-radius: 999px;
  transition: width 0.4s;
}

/* パーティのドット絵（右側に縦並び、左向き）
   --lunge-x ＝ 攻撃時に魔王へ踏み込む距離（ここ1か所で調整できる） */
/* 待機位置は右へ64px寄せる（キャンバス右側は透明余白なので本体は切れない。
   キャラ本体の右端は画面端まで約24px＝被弾ノックバック10px+影ぼかしの余裕あり）。
   コマンド入力で一歩前（-16px）に出たときの差がハッキリ見えるように（洋平指摘v191→v192で増量） */
#battle-slots { display: flex; flex-direction: column; gap: 0; margin-left: auto; margin-right: -64px; z-index: 1; position: relative; --lunge-x: -116px; } /* 魔王がabsolute化したので右寄せを維持。lunge-xは待機を右に下げた分だけ深くして、踏み込み後の着地点は従来のまま */
.battle-slot { position: relative; text-align: center; }
/* 大西さんのモーション絵は100×80の広いキャンバス（上と左の余白は攻撃の軌跡・
   杖の振り上げ用）。キャラ本体(32×50)は下端接地なので、キャンバス上部の
   透明余白ぶんを負マージンで詰めると、3人の実効ピッチが旧表示と同じ120pxになる */
.battle-slot + .battle-slot { margin-top: -40px; }
.battle-slot img {
  height: 160px; /* 100×80キャンバスの2倍＝キャラ本体は旧表示と同じ100px相当・整数倍 */
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6));
  transition: transform 0.12s ease-out; /* コマンド対象の一歩前進など、位置変化の速さ */
}
/* 戦闘開始：右の画面外から、上のキャラから1人ずつ順番に歩いて入場
   （0.6秒で入場し終えたら次の人が歩き出す。前の人の入場中、次の人は
   backwards指定によって画面外で待機している） */
#battle-slots.enter .battle-slot { animation: walk-in 0.6s ease-out backwards; }
#battle-slots.enter .battle-slot:nth-child(2) { animation-delay: 0.6s; }
#battle-slots.enter .battle-slot:nth-child(3) { animation-delay: 1.2s; }
@keyframes walk-in {
  from { transform: translateX(160px); }
  to { transform: translateX(0); }
}
/* コマンド入力対象は一歩前（左）に出て、その場で止まる。入力が終わると戻る
   （v193：-16pxでは並びの中で埋もれる・洋平指摘→-48pxでハッキリ前へ） */
.battle-slot.active img { transform: translateX(-48px); }
/* 行動時の踏み込み（FF風の4段構成）
   a) lunged 付与 → 魔王の近くへ移動（imgのtransition 0.12sで動く）
   b) 付いている間はその場で停止
   c) swing 付与 → 攻撃の振り（さらに一歩踏み込んで体を傾ける仮表現。
      攻撃ポーズのドット絵が届いたらここを差し替える）
   d) lunged 除去 → transitionで元の位置へ戻る */
.battle-slot.lunged img { transform: translateX(var(--lunge-x)); }
.battle-slot.swing img { animation: member-swing 0.3s; }
@keyframes member-swing {
  /* 停止位置(--lunge-x)を基準にして振る。基準を入れておかないと、
     アニメ中だけ元の位置に戻ってしまう */
  0%, 100% { transform: translateX(var(--lunge-x)) rotate(0deg); }
  35% { transform: translateX(calc(var(--lunge-x) - 10px)) rotate(-12deg); }
}
/* 魔法・剣技の詠唱グロー（使う瞬間、金色に光る） */
.battle-slot.casting img { animation: cast-glow 1s ease-in-out; }
/* 詠唱しながら振るとき：同じ要素に効くアニメは1ルールだけなので、
   両方付いたときは2つのアニメを並べて同時に再生する */
.battle-slot.casting.swing img { animation: member-swing 0.3s, cast-glow 1s ease-in-out; }
@keyframes cast-glow {
  0%, 100% { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 215, 80, 0.95)) brightness(1.6); }
}
/* 瀕死（HP30%以下）＝前傾して色があせる。傾きはスロット側に掛ける */
.battle-slot.weak { transform: rotate(9deg); transform-origin: center bottom; }
.battle-slot.weak img { filter: saturate(0.55) brightness(0.85) drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
/* ポーズ絵があるキャラ（has-pose）：瀕死の前傾・戦闘不能の90度回転・灰色化は
   すべて専用ドット絵が表現するので、CSSの仮表現をまるごと外す（洋平指示v191） */
.battle-slot.has-pose.weak { transform: none; }
.battle-slot.has-pose.weak img { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
.battle-slot.has-pose.dead img {
  transform: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6));
}
/* 勝利のぴょんぴょん（3回、しっかり見せる） */
.battle-slot.victory img { animation: victory-hop 0.5s ease-in-out 3; }
@keyframes victory-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.battle-slot.hit img { animation: member-damage 0.4s; }
@keyframes member-damage {
  0%, 100% { transform: translateX(0); filter: none; }
  30% { transform: translateX(10px); filter: brightness(2.2) sepia(1) saturate(4) hue-rotate(-30deg); }
}
.battle-slot.dead img {
  transform: rotate(90deg) translateY(-6px);
  filter: grayscale(1) brightness(0.6);
  animation: none;
}

/* エフェクトアニメ（対象の上に重ねる） */
#battle-effect {
  position: absolute;
  height: 68%;
  width: auto;
  pointer-events: none;
  z-index: 3;
}
/* v393：aoe系の素材はキャンバスの左右端まで光が描かれていて、表示すると縁が
   垂直の直線で切れて見える（洋平FB）→左右をソフトに透明へ落とすマスクで
   空気に溶かす。端まで絵が無い素材（slash・fire・heal）には影響なし */
#battle-effect,
.battle-fx-extra {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* v414：全画面帯モード（天羽々矢・冴颯霰嶺・終焉の吹雪・洋平指定）＝
   左右は幅1.15倍で帯が画面外へ出るためマスク不要。代わりに上下を大きく
   ゆっくり透明へ落とし、表示領域の線を背景になじませる */
#battle-effect.fx-wide,
.battle-fx-extra.fx-wide {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}

/* ダメージ数字のポップアップ */
.dmg-pop {
  position: absolute;
  z-index: 4;
  font-size: 1.375rem;
  font-weight: bold;
  color: #fff;
  /* v194：黒の縁取り8方向＝背景やキャラに重なっても数字がはっきり読める（洋平指摘） */
  text-shadow:
    1.5px 1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px -1.5px 0 #000,
    1.5px 0 0 #000, -1.5px 0 0 #000, 0 1.5px 0 #000, 0 -1.5px 0 #000,
    0 3px 6px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  animation: dmg-bounce 1.3s ease-out forwards; /* FF風：ポンッと跳ねて消える */
}
.dmg-pop.heal-pop { color: #7dffa0; }
@keyframes dmg-bounce {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  22% { transform: translateY(-36px) scale(1.15); opacity: 1; }
  45% { transform: translateY(-12px) scale(1); }
  62% { transform: translateY(-26px); }
  78% { transform: translateY(-18px); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}
/* 魔王撃破：点滅してから溶けるように消える（FFの消滅演出） */
#battle-boss-img.defeated {
  animation: boss-death 2.1s ease-in forwards;
}
@keyframes boss-death {
  0% { opacity: 1; filter: brightness(1); }
  10% { filter: brightness(3); }
  20% { filter: brightness(1); }
  30% { filter: brightness(3); }
  40% { filter: brightness(1); }
  50% { filter: brightness(3); opacity: 0.9; }
  100% { opacity: 0; filter: brightness(3) blur(6px); transform: translateY(10px) scale(0.96); }
}
/* DQ式メッセージウィンドウ（黒地・白枠） */
#battle-message {
  background: #000;
  border: 2px solid #fff;
  border-radius: 10px;
  /* 常に「2行分」の高さを確保する。1行のときと2行のときで窓の高さが
     変わると、上のステージ全体（魔王・主人公）がガクンと動いてしまうため
     （2行×行間1.7 ＋ 上下パディング20px ＋ 上下ボーダー4px） */
  min-height: calc(1.7em * 2 + 24px);
  padding: 10px 14px;
  font-size: var(--fs-body);
  font-weight: bold;
  line-height: 1.7;
  margin: 10px 0 8px;
}
/* 下段＝左にコマンド縦列、右にパーティ表（モック準拠の2分割） */
#battle-bottom {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
#battle-commands {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.battle-cmd {
  background: #000;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  padding: 10px 12px;
  font-size: var(--fs-body);
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}
.battle-cmd:disabled { opacity: 0.35; }
.battle-cmd .cmd-note { font-size: var(--fs-min); font-weight: normal; opacity: 0.8; float: right; }
/* パーティのステータス窓（▶ 名前 HP MP。数字の下線がミニHP/MPバー） */
#battle-party {
  flex: 1;
  background: #000;
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.battle-member { font-size: var(--fs-sub); }
.battle-member .bm-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.battle-member .bm-cursor { color: var(--color-accent); font-weight: bold; visibility: hidden; }
.battle-member.active .bm-cursor { visibility: visible; }
.battle-member.dead { opacity: 0.4; }
.battle-member .bm-name { font-weight: bold; white-space: nowrap; }
.battle-member .bm-gauges {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
.battle-member .bm-hp,
.battle-member .bm-mp {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-bottom: 5px;
  white-space: nowrap;
  font-size: var(--fs-min);
}
.battle-member .bm-hp { color: #9be09b; }
.battle-member .bm-hp.low { color: #f5b041; }
.battle-member .bm-mp { color: #85c1e9; }
/* v422：HP/MPの文字は角丸の小札に入れる（洋平指定）。色は数字と同系＝親のcolorを継承 */
.battle-member .bm-tag {
  display: inline-block;
  padding: 0 5px;
  margin-right: 4px;
  border-radius: 999px;
  border: 1px solid rgba(155, 224, 155, 0.55);
  background: rgba(155, 224, 155, 0.14);
  font-size: 10px;
  line-height: 15px;
  font-weight: bold;
  vertical-align: 1px;
}
.battle-member .bm-hp.low .bm-tag { border-color: rgba(245, 176, 65, 0.6); background: rgba(245, 176, 65, 0.14); }
.battle-member .bm-mp .bm-tag { border-color: rgba(133, 193, 233, 0.55); background: rgba(133, 193, 233, 0.14); }
/* v423：パーティ詳細窓のステータス札（戦闘のHP/MP札と同じ言語・洋平指定）。
   攻撃=朱・防御=青・軽減=金＝黒×金の空間になじむ薄地＋色縁 */
.pd-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 5px;
}
/* v424：詳細窓の名前タブ。v425（洋平FB）＝金枠をやめて窓と同トーンの「耳」に。
   窓の上辺に浮かせて重ねる＝窓の位置は従来のまま、タブは左上の空白にハマる。
   left14px＝窓の角丸（12px）を避けて直線部に接合（線が途切れて見えない） */
.pd-window {
  position: relative;
  margin-top: 10px;
}
.pd-window .equip-detail {
  margin-top: 0;
  /* v427：タブより上に描画する（positioned同士はDOM後勝ち）＝タブの重ねた2pxが
     窓の枠の下に潜り、白い上枠ラインは途切れず連続する（会話の名前窓v365と同じ） */
  position: relative;
  /* v427：3行構成（札2行＋ヒント行）の実測高さで固定＝キャラ切替（サクラは2行）で
     窓が伸び縮みしない（洋平FB）。共通のmin-height（3行テキスト分106.5px）を
     フル装備の札折返し分だけ上回る */
  min-height: 115px;
}
.pd-nameplate {
  position: absolute;
  bottom: calc(100% - 2px);  /* 窓の上枠2pxに重ねて接合（枠線がつながる） */
  left: 14px;
  padding: 3px 16px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  /* v427：枠も地色も窓（#party-detail＝2px白0.9×黒0.88）と完全一致＝
     タブ＋窓で一体のウィンドウに（洋平FB「窓の枠線と同じ太さに」） */
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(10, 10, 16, 0.88);
}
/* v431：トッチの見立て（挑戦画面・戦闘開始の上）＝DQ窓言語の小さな札 */
.mitate {
  background: rgba(10, 10, 16, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #e8e6e0;
}
.mitate-title {
  font-size: 12px;
  color: #cdb87e;                /* 金クリーム＝鑑定の言語 */
  font-weight: bold;
  letter-spacing: 0.08em;
}
.mitate-rate { font-size: 14px; }
.mitate-rate b { font-size: 20px; color: #fff; }
.mitate-word { font-size: 13px; color: #ddd9d0; }
.pd-stat { white-space: nowrap; }
.pd-tag {
  display: inline-block;
  padding: 0 7px;
  margin-right: 5px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
  font-weight: bold;
  vertical-align: 1px;
}
.pd-tag.atk { color: #f0a8a0; border: 1px solid rgba(240, 150, 140, 0.55); background: rgba(240, 150, 140, 0.14); }
.pd-tag.def { color: #9cc4ee; border: 1px solid rgba(133, 193, 233, 0.55); background: rgba(133, 193, 233, 0.14); }
.pd-tag.cut { color: #e8cf96; border: 1px solid rgba(212, 175, 90, 0.55); background: rgba(212, 175, 90, 0.14); }
.pd-hint { font-size: 11px; opacity: 0.75; }
/* 数字の下の色ライン＝残量バー（widthはコード側で%指定） */
.battle-member .bm-hp i,
.battle-member .bm-mp i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: #9be09b;
}
.battle-member .bm-hp.low i { background: #f5b041; }
.battle-member .bm-mp i { background: #85c1e9; }
#battle-result {
  position: absolute;
  inset: 0;
  /* v194：にげる(z:2)・魔王情報(z:2)・ドット絵(z:1)より上＝証明書だけの画面にする */
  z-index: 6;
  overflow-y: auto; /* v195：特典案内で縦に伸びたぶん、低い画面でもスクロールで全部見える保険 */
  background: rgba(0, 0, 0, 0.86); /* v193：背後の戦闘UIをしっかり沈めて証明書を主役に */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 14px;
}
/* ---- 討伐証明書（v194・都城SRGの討伐証明書を参照した記念ビジュアル版）----
   黒地×金発光タイトル×和装立ち絵3人の集合＋光背＋討伐日。合言葉は載せない（洋平指示） */
.cert-card {
  position: relative;
  z-index: 2;
  width: min(84vw, 340px);
  background: linear-gradient(180deg, #131828, #0a0c16 55%, #16101f);
  border: 1.5px solid rgba(212, 175, 90, 0.85);
  border-radius: 12px;
  padding: 22px 14px 14px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  animation: cert-in 0.55s ease-out backwards;
}
@keyframes cert-in {
  from { opacity: 0; transform: scale(0.86) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.cert-card::after {
  /* 金の内枠＝図鑑と同じ「額装の二重線」文法 */
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 175, 90, 0.5);
  border-radius: 8px;
  pointer-events: none;
  z-index: 5;
}
.cert-art {
  /* 洋平作のカットインビジュアル（1000×1000・「討伐完了」焼き込み）を
     カード上部いっぱいに敷く。金の内枠(::after)が画像に重なって額装になる */
  display: block;
  width: calc(100% + 28px);
  margin: -22px -14px 0;
  border-radius: 11px 11px 0 0;
}
.cert-date {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: #ffe9a8;
}
/* 特典案内（v195・三木さん段取り／v196：臙脂の色帯×金縁×白抜き＝合言葉帯と同じ
   「大事なお知らせ」の言語でボックス化。テキストの羅列感を解消（洋平指摘） */
.cert-reward {
  position: relative;
  z-index: 2;
  margin: 12px 6px 0;
  padding: 11px 10px 9px;
  background: linear-gradient(160deg, rgba(150, 46, 46, 0.96), rgba(108, 30, 34, 0.96));
  border: 1px solid rgba(255, 215, 130, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.cr-intro { font-size: 10.5px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.85); }
.cr-place {
  margin-top: 3px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cr-detail { margin-top: 3px; font-size: 11.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.94); }
.cr-hours {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 220, 150, 0.45); /* 開館情報は破線で区切る＝チケットの但し書き */
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: rgba(255, 235, 180, 0.95);
}
.cert-credit {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: rgba(255, 235, 180, 0.55);
}
.cert-shine {
  /* 開帳キラッ（1回だけ）＝スタンプ拡大ポップと同じご褒美の文法 */
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 245, 200, 0.5), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: pop-shine-once 1.1s ease-out 0.75s 1 both;
  pointer-events: none;
  z-index: 4;
}
/* 勝利画面・証明書ポップの「舞い上がる光」レイヤー（v198・紙吹雪から変更）。
   金の光の粒が下から上へ立ちのぼる＝討伐の余韻。証明書の後ろで舞う */
.cert-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.light-rise-piece {
  position: absolute;
  bottom: 0;
  opacity: 0;
  animation: light-rise linear infinite;
}
@keyframes light-rise {
  0% { transform: translateY(12vh) translateX(0) scale(0.6); opacity: 0; }
  8% { opacity: 0.95; }
  60% { opacity: 0.75; }
  100% { transform: translateY(-104vh) translateX(16px) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .light-rise-piece { animation: none; opacity: 0; }
}
/* ポップ用の入れ物と閉じるボタン */
.cert-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* 低い画面でもとじるボタンまで届く保険（dvh非対応の古いiOSはvhで代用） */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.cert-close {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  border-radius: 10px;
  padding: 10px 30px;
  font-size: 14px;
}
/* （旧・討伐証明書のリスト行入口 .zukan-cert は v385 でバナー方式 .toha-band に統合済み） */

/* ---- 遊び方（ページめくり型チュートリアル） ----
   1画面1メッセージのスライド。絵の領域（.howto-art）は手持ち素材の
   組み合わせで構成。デザイナー素材が届いたら .howto-art の中身を
   1枚画像（assets/howto/pageN.webp）に置き換えるだけでよい */
/* カード地は和紙風（薄ベージュ＋繊維ノイズをSVGで生成。画像ファイル不要）。
   本格的な和紙テクスチャ素材が届いたら background-image を差し替えるだけ */
.howto-slider {
  padding: 0 0 16px;
  overflow: hidden;
  background-color: #f7f4ec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.52 0 0 0 0 0.47 0 0 0 0 0.38 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 洋平の絵を1枚で流し込むページ用（絵＝透過PNG 1080×720・3:2）。
   枠の高さは幅に追従し、スライダーの高さ合わせはJSが自動対応する。
   aspect-ratioで「読み込み前から」正しい高さを確保する（高さ計測のズレ防止）。
   ※絵は必ず3:2で作ること（比率が違うと歪む。2026-08-05に2:1から変更） */
.howto-art-full {
  width: calc(100% + 44px);
  margin: -20px -22px 0; /* ページの余白を打ち消して、絵をカードの端まで広げる */
  display: block;
  aspect-ratio: 3 / 2;
}
.howto-track {
  display: flex;
  align-items: flex-start; /* 各ページを自身の高さにする（高さ合わせのJSとセット） */
  transition: transform 0.28s ease, height 0.28s ease;
}
.howto-page {
  flex-shrink: 0;
  padding: 20px 22px 4px;
  box-sizing: border-box;
  text-align: center;
}
.howto-art {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* 立ち絵（1080×1920）は「頭頂〜胸」だけを枠に収める。
   数値は素材の実測から算出（不透明範囲: ソラ頭頂y=391/サクラy=484、
   キャラの横中心x=742＝素材内で右寄りに立っている）。
   height450px表示のとき 素材1px=0.234px。横-47px=中心合わせ、縦=頭上に少し余白 */
.howto-illust {
  height: 450px;
  align-self: flex-start;
  transform: translate(-47px, -80px);
}
.howto-illust.chr-sakura { transform: translate(-47px, -101px); }
.howto-badge {
  display: inline-block;
  background: var(--color-main);
  color: #fff;
  font-size: var(--fs-min);
  padding: 2px 14px;
  border-radius: 999px;
  margin-top: 6px;
}
.howto-title {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  /* 28相当を上限に、1行目の11文字（徳島県つるぎ町をめぐる）が
     どの画面幅でも1行に収まるサイズへ自動で縮む（84px=画面と紙面の余白ぶん） */
  font-size: min(1.75rem, calc((100vw - 84px) / 11));
  font-weight: bold;
  /* iPhoneの明朝は太字が1段階しか無いため、輪郭に縁取りを足して太らせる */
  -webkit-text-stroke: 0.025em currentColor;
  color: #002060; /* 謎解きテーマと同じ紺（洋平モックの明朝×紺デザイン準拠） */
  line-height: 1.5;
  margin-top: 12px;
}
.howto-text {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: #555;
  margin-top: 10px;
  line-break: strict; /* 「ー」や小文字が行頭に来ない厳格禁則（ラリ/ー分断の防止） */
}
/* ページ2：絵地図の丸窓＋ピン＋歩くソラ */
.howto-map {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--color-main);
}
.howto-map-bg { width: 100%; height: 100%; object-fit: cover; }
.howto-walker {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 58px;
  image-rendering: pixelated;
}
.howto-pin {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: #b03a3a;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* ページ3：立ち絵＋ミニ会話窓 */
.howto-story { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.howto-mini-window {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  background: rgba(10, 14, 26, 0.88);
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  font-size: var(--fs-min);
  line-height: 1.6;
  text-align: left;
  padding: 8px 12px;
}
.howto-mini-name {
  display: block;
  color: #9be09b;
  font-size: var(--fs-min);
  font-weight: bold;
}
/* ページ4：コレクション3種（判子・漆器・モンスター） */
.howto-collect { display: flex; align-items: center; justify-content: center; gap: 18px; }
.howto-collect img { width: 74px; height: 74px; object-fit: contain; }
.howto-collect .howto-dot-img { image-rendering: pixelated; }
.howto-tile-shikki {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #8c2f1f;
  color: #fff;
  font-size: 1.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35);
}
/* ページ5：合言葉→景品 */
.howto-goal { display: flex; align-items: center; justify-content: center; gap: 14px; }
.howto-keyword {
  background: #002060;
  color: #FFC000;
  font-size: var(--fs-title);
  font-weight: bold;
  padding: 14px 18px;
  border-radius: 10px;
}
.howto-goal-arrow { font-size: 1.5rem; color: var(--color-main); font-weight: bold; }
.howto-prize {
  background: #fff;
  border: 3px solid var(--color-accent);
  color: #b8860b;
  font-size: var(--fs-title);
  font-weight: bold;
  padding: 14px 18px;
  border-radius: 10px;
}
/* 最終ページ：位置情報マーク（ピンの大きい版） */
.howto-geo-mark {
  width: 64px;
  height: 64px;
  background: var(--color-main);
  border: 6px solid #dcebd5;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  display: inline-block;
}
/* ページ入場アニメ：めくった瞬間に絵→見出し→本文が時間差でふわっと現れて止まる。
   1回きり（ループしない）ので、読みはじめる頃には静止している */
.howto-page.enter .howto-art,
.howto-page.enter .howto-art-full { animation: howto-in 0.45s ease-out both; }
.howto-page.enter .howto-badge { animation: howto-in 0.45s ease-out 0.08s both; }
.howto-page.enter .howto-title { animation: howto-in 0.45s ease-out 0.14s both; }
.howto-page.enter .howto-text { animation: howto-in 0.45s ease-out 0.24s both; }
.howto-page.enter .btn-secondary,
.howto-page.enter .gps-status { animation: howto-in 0.45s ease-out 0.32s both; }
@keyframes howto-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 「視差効果を減らす」設定の人には動きを出さない（メニューの地図アニメと同じ配慮） */
@media (prefers-reduced-motion: reduce) {
  .howto-page.enter .howto-art,
  .howto-page.enter .howto-art-full,
  .howto-page.enter .howto-badge,
  .howto-page.enter .howto-title,
  .howto-page.enter .howto-text,
  .howto-page.enter .btn-secondary,
  .howto-page.enter .gps-status { animation: none; }
}

/* 補足カード（折りたたみ）。普段はタイトル1行だけ、タップで開く */
details.howto-extra summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.howto-extra summary::-webkit-details-marker { display: none; }
details.howto-extra summary::after {
  content: '＋';
  color: var(--color-main);
  font-weight: bold;
  font-size: var(--fs-title);
}
details.howto-extra[open] summary::after { content: '－'; }

/* ドットとナビ */
.howto-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 2px; }
.howto-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5d2c6;
  cursor: pointer;
}
.howto-dot.on { background: var(--color-main); }
.howto-nav { width: calc(100% - 44px); margin: 12px 22px 0; }

/* ---- お知らせポップアップ（GPS認証の結果など） ----
   しっかり読んでほしいメッセージを中央のカードで表示する。
   ※デザイナーPNGへの差し替え口：
   　カードの見た目は #notice-card の background〜box-shadow の4行。
   　窓のPNG（セリフ窓と同じ9スライス想定：750×320・角60）が届いたら、
   　この4行を border-image 指定に置き換えるだけで、中の文字組みは触らなくてよい。
   　例）border: 30px solid transparent;
   　　　border-image: url("../assets/ui/notice_window.webp") 60 fill / 30px; */
#notice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 180; /* 各オーバーレイ(100〜170)より上、トースト(200)より下 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#notice-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  padding: 22px 20px 18px;
  width: 100%;
  max-width: 340px;
  max-height: 80dvh;   /* 設定手順の長文でも画面からあふれない（中がスクロール） */
  overflow-y: auto;
  text-align: center;
  animation: notice-pop 0.22s ease-out;
}
@keyframes notice-pop {
  from { transform: scale(0.86); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
#notice-title {
  font-size: var(--fs-title);
  font-weight: bold;
  color: var(--color-main);
  line-height: 1.5;
}
#notice-big {
  font-size: 2rem;   /* 「あと約120m」の距離が主役になる大きさ（32相当） */
  font-weight: bold;
  color: var(--color-main);
  margin-top: 10px;
  line-height: 1.2;
}
#notice-text {
  font-size: var(--fs-sub);
  line-height: 1.8;
  margin-top: 10px;
  text-align: left;   /* 設定手順など長文は左揃えが読みやすい */
}
#notice-text.center { text-align: center; }
/* 文節ブロック：折り返しを文節の切れ目だけに限定する（「い。」1文字だけの行を作らない） */
#notice-text .nb { display: inline-block; }
#notice-ok { margin-top: 16px; }

/* ---- トースト通知 ---- */
#toast {
  position: fixed;
  bottom: 24px;
  /* v160：中央寄せを「left:50%+translateX」→「左右インセット+fit-content+margin auto」へ。
     旧方式はiOSが幅を「leftから右端まで=画面の50%」に制限し、長文がすぐ折り返して
     縦に膨らんでいた（洋平の実機指摘「おデブ」の真因。PCは画面が広く気づけなかった） */
  left: 16px;
  right: 16px;
  margin: 0 auto;
  width: fit-content;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 12px 20px;
  border-radius: 18px; /* v150：丸薬型(999px)→角丸帯型（長文が端の丸みに圧迫されない） */
  font-size: var(--fs-sub);
  z-index: 200;
  text-align: center;
  line-height: 1.6;
}

/* ---- デバッグパネル（開発用なのでpx固定のまま） ---- */
#debug-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  z-index: 300;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
#debug-panel select, #debug-panel button { font-size: 12px; padding: 4px; }
#debug-gps-result { width: 100%; font-size: 11px; color: #9be09b; word-break: break-all; }

/* ---- リアル謎解き（かけら集め）。テーマ色は謎解きらしい紺×金 ---- */
.riddle-badge { background: #002060; color: #FFC000; }
.frag-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.frag-tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #002060;
  color: #FFC000;
  font-size: 22px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.frag-tile.locked { background: #ddd; color: #999; box-shadow: none; }
.frag-tile.big { width: 68px; height: 68px; font-size: 34px; margin: 10px auto; display: flex; }
.frag-get { text-align: center; }
.frag-get-title { font-size: var(--fs-hero); font-weight: bold; color: #b8860b; }
.riddle-hint {
  font-size: var(--fs-sub);
  background: #faf6ea;
  border-left: 4px solid #FFC000;
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  margin-top: 8px;
  line-height: 1.7;
}
.riddle-clear { color: var(--color-main); font-weight: bold; }
.riddle-open { background: #002060; }

/* ---- 全体マップ（Leaflet＋国土地理院タイル） ---- */
.map-note { font-size: var(--fs-sub); color: #666; margin: 4px 2px 10px; }
#fullmap {
  height: calc(100dvh - 200px); /* ヘッダー・注釈・余白を引いた残り全部 */
  min-height: 340px;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* スポットのピン（CSSで描く丸マーカー。獲得済みはコース色＋✓） */
.map-pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 4px; /* 左下だけ角ばらせて“ピン”らしく */
  background: #fff;
  border: 3px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}
.map-pin.stamped { border: 3px solid #fff; color: #fff; }
/* v229：獲得済みスポット＝スタンプ絵柄のピン。
   v230：透過のままだと地図の描き込みと重なって見づらい（洋平指摘）→白地の丸シールに。
   判子の円はキャンバスの94%に正規化済みなので、白円がちょうど細いフチになる */
.map-pin-stamp {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); /* 影は他のピンと同じ値 */
}
/* v229：[現在地へ]ボタン（地図右下・白地×金縁の札） */
.map-locate-btn {
  background: rgba(255, 253, 247, 0.95);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: bold;
  color: #6b5a33;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
/* ふきだしの中身 */
.map-popup { min-width: 170px; }
.map-popup-name { font-weight: bold; font-size: var(--fs-body); }
.map-popup-course { font-size: var(--fs-min); margin-top: 2px; }
.map-popup-status { font-size: var(--fs-min); color: #666; margin-top: 2px; }
.map-popup-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: var(--color-main);
  color: #fff;
  font-size: var(--fs-sub);
  font-weight: bold;
  cursor: pointer;
}
/* スポット詳細の「MAPで開く」リンク（aタグをボタン風に） */
.btn-maplink { text-align: center; text-decoration: none; }
/* コース選択の「全体マップ」ボタン（下のコースカードとの間隔） */
/* v227：全体マップの入口（白地×金縁の横長札・コースバナーの下の補助動線）。
   v250：aタグ利用（MAPリンク）にも対応する中央揃え・下線なし */
.map-entry {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin-top: 2px;
  padding: 13px 16px;
  background: rgba(255, 253, 247, 0.92);
  border: 1.5px solid rgba(184, 146, 63, 0.85);
  border-radius: var(--radius);
  color: #6b5a33;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 10px rgba(120, 90, 30, 0.12);
  cursor: pointer;
}
.map-entry:active { transform: scale(0.98); }
/* 地図ピンの記号（スポット詳細のGoogleマップボタン専用・汎用の涙滴ピン）
   currentColor＝ボタン文字の焦茶をそのまま継ぐ。ベースラインに乗せるため少し沈める */
.map-entry .pin-ico {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  margin-right: 1px;
}