/* リベリア王国の冒険 ～貯める力編 オープニング～
   ドラクエ／FF 風 JRPG レイアウト
   - PC: ブラウザ内フルステージ
   - スマホ: 縦長フル画面
   - メッセージ／コマンドはシーンに重なる JRPG ウィンドウ
   - キャラは歩行サイクル＋接地シャドウで「歩いている」感を出す */

:root {
  --bg-deep: #05060f;
  --win-bg: rgba(8, 16, 48, 0.92);
  --win-bg2: rgba(16, 28, 78, 0.92);
  --win-border: #ffffff;
  --accent: #ffd23f;
  --accent-2: #4fd1c5;
  --danger: #ff5a7a;
  --text: #ffffff;
  --font-scale: 1;

  /* シーン配色（既定。#bg のクラスで上書き） */
  --sky-top: #2a3a7a;
  --sky-bot: #0b1437;
  --far: #1b2a63;
  --ground-a: #1a2550;
  --ground-b: #0a1230;
  --grid: rgba(120, 160, 255, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #02030a;
  color: var(--text);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#app {
  -webkit-user-select: none;
  user-select: none;
}
#app ::selection {
  background: transparent;
}

#app {
  position: relative;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 0%, #0c1330, #02030a 70%);
}

/* ===== HUD ===== */
#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #04060f;
  border-bottom: 2px solid #1d2a5e;
  flex: 0 0 auto;
  z-index: 5;
}
#title-tag {
  font-size: calc(13px * var(--font-scale));
  color: var(--accent);
  letter-spacing: 0;
}
.hud-btns { display: flex; gap: 8px; align-items: center; }
.quick-wrap {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 42;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#quick-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  color: #253052;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 900;
  font-size: 26px;
  line-height: 0.8;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.65),
    0 0 14px rgba(255,255,255,0.78),
    0 4px 14px rgba(0,0,0,0.35);
}
.quick-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 80;
  width: auto;
  display: flex;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.quick-panel button {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(62, 43, 94, 0.74);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(255,255,255,0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.2),
    0 0 16px rgba(214, 158, 255, 0.68),
    0 4px 14px rgba(0,0,0,0.35);
}
.quick-panel button[data-active="true"] {
  background: rgba(132, 76, 176, 0.9);
  color: #fff;
  border-color: rgba(255,255,255,0.75);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 0 22px rgba(236, 180, 255, 0.95),
    0 4px 14px rgba(0,0,0,0.35);
}
.quick-panel button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
#app:not(.playing) .quick-wrap { display: none; }
#font-toggle {
  font-size: calc(13px * var(--font-scale));
  padding: 6px 10px;
  background: var(--accent-2);
  color: #03201d;
  border: 2px solid #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
#sound-toggle {
  font-size: calc(15px * var(--font-scale));
  padding: 5px 9px;
  background: #1d2f6e;
  color: #fff;
  border: 2px solid #ffffff;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 767px) {
  #hud {
    gap: 8px;
    padding: 6px 8px;
  }
  #title-tag {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(10px * var(--font-scale));
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hud-btns {
    flex: 0 0 auto;
    gap: 4px;
  }
  #menu-btn,
  #font-toggle,
  #sound-toggle {
    width: 34px;
    min-width: 34px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
  }
  #font-toggle,
  #sound-toggle {
    position: relative;
  }
  .quick-wrap {
    top: 10px;
    right: 10px;
    gap: 7px;
  }
  #quick-toggle {
    width: 34px;
    height: 34px;
    font-size: 24px;
  }
  .quick-panel {
    right: calc(100% + 7px);
    width: auto;
    top: 0;
    gap: 7px;
  }
  .quick-panel button {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
  #menu-btn,
  #font-toggle,
  #sound-toggle {
    color: transparent;
    font-size: 0;
  }
  #menu-btn::before {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #2a1a00;
    box-shadow: 0 6px 0 #2a1a00, 0 12px 0 #2a1a00;
    transform: translateY(-6px);
  }
  #font-toggle::before {
    content: "字";
    color: #03201d;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: 4px;
  }
  #font-toggle::after {
    content: attr(data-short);
    color: #03201d;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    bottom: 4px;
  }
  #sound-toggle {
    position: relative;
  }
  #sound-toggle::before {
    content: "音";
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: 4px;
    opacity: 0.9;
  }
  #sound-toggle::after {
    content: attr(data-short);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    bottom: 4px;
  }
  #sound-toggle[data-level="high"] { background: #164a7d; }
  #sound-toggle[data-level="mid"] { background: #1d2f6e; }
  #sound-toggle[data-level="low"] { background: #38406f; }
  #sound-toggle[data-level="off"] { background: #612139; }
  #sound-toggle[data-level="off"]::after {
    content: "切";
    font-size: 15px;
  }
  #sound-toggle[data-level="off"]::before {
    content: "音";
  }
}

/* ===== Stage / Screen ===== */
#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

#screen {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

/* PC: ブラウザ内フルステージ表示 */
@media (min-width: 768px) {
  #stage {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #000;
  }
  #screen {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .quick-wrap { top: 18px; right: 22px; }
}

/* ===== 背景（レイヤー構成のシーン） ===== */
#bg { position: absolute; inset: 0; z-index: 0; }
.bg-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot) 72%);
  transition: background 0.5s ease;
}
.bg-far {
  position: absolute; left: 0; right: 0; bottom: 32%;
  height: 26%;
  background:
    radial-gradient(120% 100% at 50% 100%, var(--far), transparent 70%);
  opacity: 0.9;
  transition: background 0.5s ease;
}
.bg-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 36%;
  background:
    linear-gradient(180deg, var(--ground-a), var(--ground-b));
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.5s ease;
}
/* 地面の奥行きグリッド（パース） */
.bg-ground::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, var(--grid) 9% 9.4%),
    repeating-linear-gradient(180deg, transparent 0 22%, var(--grid) 22% 22.6%);
  transform: perspective(280px) rotateX(58deg);
  transform-origin: bottom center;
  opacity: 0.7;
}

/* 背景画像レイヤー（assets/backgrounds に画像があるときだけ表示） */
#bg-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#bg-photo.on { opacity: 1; }
#bg.scene-battle #bg-photo { background-position: center bottom; }

/* シーン別パレット */
#bg.scene-home {
  --sky-top: #caa07a; --sky-bot: #6b4a2e; --far: #7a5436;
  --ground-a: #7c5230; --ground-b: #3e2814; --grid: rgba(255, 220, 170, 0.10);
}
#bg.scene-castle {
  --sky-top: #6a4fb0; --sky-bot: #1a1040; --far: #3a2370;
  --ground-a: #2e2058; --ground-b: #140c30; --grid: rgba(200, 170, 255, 0.12);
}
#bg.scene-village {
  --sky-top: #6fc1e8; --sky-bot: #2a6a3a; --far: #357a45;
  --ground-a: #3f8a4a; --ground-b: #1a4a24; --grid: rgba(220, 255, 200, 0.12);
}
#bg.scene-sunset {
  --sky-top: #ff9d5c; --sky-bot: #b5532f; --far: #c76a3a;
  --ground-a: #8a6a3a; --ground-b: #4a3018; --grid: rgba(255, 220, 170, 0.12);
}
#bg.scene-town {
  --sky-top: #3a4a8a; --sky-bot: #0b1437; --far: #24306a;
  --ground-a: #20305f; --ground-b: #0a1230; --grid: rgba(160, 190, 255, 0.10);
}
#bg.scene-battle {
  --sky-top: #7a2a3a; --sky-bot: #2a0b14; --far: #5a1626;
  --ground-a: #4a1622; --ground-b: #1a070d; --grid: rgba(255, 130, 150, 0.10);
}

/* ===== バトル演出フラッシュ ===== */
#flash {
  position: absolute; inset: 0; z-index: 30;
  background: #fff;
  pointer-events: none;
}
/* 眩しくならないよう、うすく短く光らせるだけ */
#flash.flash-on { animation: encounterFlash 0.5s ease-out; }
@keyframes encounterFlash {
  0% { opacity: 0; }
  20% { opacity: 0.22; }
  100% { opacity: 0; }
}
/* 画面シェイク（エンカウント時） */
#screen.shake { animation: screenShake 0.5s ease; }
@keyframes screenShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, 3px); }
  80% { transform: translate(4px, -2px); }
}

/* ===== キャラクター ===== */
#sprites {
  position: absolute;
  left: 0; right: 0;
  top: 6%;
  bottom: 38%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 6vw, 80px);
  padding: 0 10px;
  overflow: visible;
}

/* 左右グループ（左＝相手／敵、右＝主人公／味方） */
.side {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 2vw, 20px);
  flex-wrap: wrap;
  max-width: 70%;
}
.side:empty { display: none; }

.sprite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
}
/* 登場：左グループは左から、右グループは右から歩いてくる。
   登場の瞬間だけ本体を数回揺らし（walkCycle 2回）、あとは静止する。 */
.side-left .sprite  { animation: walkInLeft  0.7s cubic-bezier(.22,.7,.3,1); }
.side-right .sprite { animation: walkInRight 0.7s cubic-bezier(.22,.7,.3,1); }

/* 立ち絵本体：基本は固定。登場時のみ軽く歩いて静止する。 */
.char-img {
  display: block;
  height: clamp(120px, 30vh, 230px);
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4));
  animation: walkCycle 0.5s ease-in-out 2; /* 登場時だけ2回揺れて止まる */
}
.char-emoji {
  font-size: calc(64px * var(--font-scale));
  line-height: 1;
  animation: walkCycle 0.5s ease-in-out 2;
}

/* 話す・行動した瞬間のリアクション（ひと揺れ） */
.char-img.act { animation: actBob 0.45s ease !important; }
@keyframes actBob {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-12px) scale(1.05); }
  70%      { transform: translateY(0) scale(1); }
}

/* 表情が変わった瞬間の吹き出し（！＝驚き・決意／？＝困り・考え中／♪＝喜び） */
.emote {
  position: absolute;
  top: 0;
  left: 62%;
  z-index: 6;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(17px * var(--font-scale));
  font-weight: 900;
  line-height: 1;
  color: #e8483a;
  background: #fff;
  border: 2px solid #2a1b0f;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: emotePop 1.25s ease forwards;
}
.emote::after { /* 吹き出しのしっぽ */
  content: "";
  position: absolute;
  bottom: -6px;
  left: 22%;
  border: 5px solid transparent;
  border-top-color: #2a1b0f;
  border-bottom: 0;
}
.emote-worry  { color: #3a6fd8; }
.emote-happy  { color: #e07a12; }
.emote-kettei { color: #d23a3a; }
.battle-formation .side-right .emote { font-size: calc(13px * var(--font-scale)); left: 55%; }
@keyframes emotePop {
  0%   { transform: translateY(6px) scale(0); opacity: 0; }
  12%  { transform: translateY(-2px) scale(1.25); opacity: 1; }
  22%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(-3px) scale(1); opacity: 1; }
  100% { transform: translateY(-12px) scale(0.95); opacity: 0; }
}

/* ===== カットイン：バトル中、画面にいない仲間（リオンなど）が話すとき上に大きく出る ===== */
.cutin {
  --cut-c1: #a9c4ff;
  --cut-c2: #2b3f99;
  position: absolute;
  left: 0;
  right: 0;
  top: 11%;
  height: clamp(150px, 30%, 270px);
  z-index: 26;
  pointer-events: none;
}
.cutin-edge, .cutin-band { position: absolute; inset: 0; }
/* 白いふち（帯より少し大きい同じ形） */
.cutin-edge {
  background: #fff;
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
}
.cutin-band {
  overflow: hidden;
  clip-path: polygon(0 19%, 100% 4%, 100% 81%, 0 96%);
  background: linear-gradient(100deg, var(--cut-c2) 0%, var(--cut-c1) 58%, #fff7d8 100%);
}
/* 流れる集中線 */
.cutin-lines {
  position: absolute;
  inset: -10% -20%;
  background: repeating-linear-gradient(100deg,
    transparent 0 26px, rgba(255, 255, 255, 0.38) 26px 30px, transparent 30px 58px,
    rgba(255, 255, 255, 0.18) 58px 60px, transparent 60px 90px);
  animation: cutinLines 0.45s linear infinite;
}
@keyframes cutinLines { from { transform: translateX(0); } to { transform: translateX(-91px); } }
/* 登場の瞬間の白い光 */
.cutin-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.cutin-img {
  position: absolute;
  right: 3%;
  bottom: -12%;
  height: 135%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.25));
}
/* バストアップ画像が無いとき：全身の絵の顔のあたりを大きく切り出す */
.cutin-img.crop { height: 230%; bottom: -118%; right: 0; }
.cutin-name {
  position: absolute;
  left: 4%;
  bottom: 17%;
  padding: 2px 14px;
  font-size: calc(14px * var(--font-scale));
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  transform: skewX(-12deg);
}
/* ギザギザの叫び吹き出し（黒いふち＝外側、白＝内側） */
.cutin-bubble {
  position: absolute;
  left: 3%;
  top: 6%;
  display: none;
  padding: 0.9em 1.7em;
  background: #1c1410;
  font-size: calc(clamp(18px, 4.8vw, 30px) * var(--font-scale));
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  color: #1c1410;
  clip-path: polygon(0% 50%, 7% 30%, 3% 10%, 20% 16%, 29% 0%, 42% 12%, 55% 1%, 64% 14%, 80% 3%, 84% 20%, 100% 16%,
    94% 38%, 100% 56%, 92% 66%, 98% 88%, 80% 82%, 72% 100%, 58% 87%, 44% 99%, 34% 85%, 18% 96%, 15% 78%, 0% 82%, 6% 63%);
  transform: rotate(-4deg);
}
.cutin-bubble::before {
  content: "";
  position: absolute;
  inset: 4px 6px;
  background: #fff;
  clip-path: inherit;
}
.cutin-bubble span { position: relative; }
.cutin.has-bubble .cutin-bubble { display: block; }
/* 出る：右から帯が飛び込み、顔が少し遅れて入り、吹き出しがはじける */
.cutin.on .cutin-edge, .cutin.on .cutin-band { animation: cutinIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cutin.on .cutin-band::after { animation: cutinFlash 0.4s ease-out 0.12s both; }
.cutin.on .cutin-img { animation: cutinFace 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both; }
.cutin.on .cutin-bubble { animation: cutinBubble 0.36s cubic-bezier(0.3, 1.6, 0.5, 1) 0.24s both; }
/* 引っ込む：左へ抜ける */
.cutin.out .cutin-edge, .cutin.out .cutin-band, .cutin.out .cutin-bubble { animation: cutinOut 0.28s ease-in forwards; }
@keyframes cutinIn {
  from { transform: translateX(110%) skewX(-14deg); }
  to   { transform: translateX(0) skewX(0); }
}
@keyframes cutinFlash { from { opacity: 0.85; } to { opacity: 0; } }
@keyframes cutinFace {
  0%   { transform: translateX(45%) scale(1.18); opacity: 0; }
  60%  { transform: translateX(-3%) scale(1.02); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes cutinBubble {
  from { transform: scale(0) rotate(-16deg); }
  to   { transform: scale(1) rotate(-4deg); }
}
@keyframes cutinOut { to { transform: translateX(-115%) skewX(14deg); opacity: 0.4; } }
/* カットイン中は戦場を少し暗くして、話している人に目を向ける */
#sprites { transition: filter 0.2s ease; }
#screen.cutin-on #sprites { filter: brightness(0.55) saturate(0.8); }
/* 勝利直後の「成長しました」は、カットインと重ならないよう帯の下へずらす */
#screen.cutin-on #growth-result { top: calc(11% + clamp(150px, 30%, 270px) + 10px); }
@media (min-width: 768px) {
  .cutin { top: 7%; height: clamp(170px, 34%, 300px); }
  #screen.cutin-on #growth-result { top: calc(7% + clamp(170px, 34%, 300px) + 10px); }
  .cutin-img { right: 10%; }
  .cutin-bubble { left: 8%; top: 10%; }
  .cutin-name { left: 9%; }
}

/* 接地シャドウ（固定） */
.shadow {
  position: absolute;
  bottom: 16px;
  width: 58%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), transparent 72%);
  border-radius: 50%;
  z-index: -1;
}

.sprite .name {
  display: block;
  font-size: calc(12px * var(--font-scale));
  margin-top: 2px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.8);
  background: rgba(8, 16, 48, 0.6);
  padding: 1px 8px;
  border-radius: 8px;
  max-width: min(140px, 34vw);
  white-space: nowrap;
  overflow: visible;
}
.sprite.enemy .name { max-width: min(180px, 44vw); }

/* 敵の立ち絵：脅威感のため、ごく控えめに ゆっくり呼吸する程度 */
.sprite.enemy .char-img { animation: enemyFloat 3.6s ease-in-out infinite; }

/* 敵に捕らわれたキャラ（タクト）：小さく、青ざめて、力なく震える */
.sprite.captive .char-img {
  height: clamp(64px, 13vh, 104px);
  filter: grayscale(0.35) brightness(0.82) drop-shadow(0 0 8px rgba(120, 40, 200, 0.6));
  animation: captiveShiver 2s ease-in-out infinite;
}
.sprite.captive .name { background: rgba(90, 20, 120, 0.78); }
.sprite.captive::after {
  content: "囚";
  position: absolute;
  top: 4px; right: auto; left: -8px;
  font-size: calc(12px * var(--font-scale));
  font-weight: bold;
  color: #fff;
  background: var(--danger);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 1.7em; height: 1.7em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
@keyframes captiveShiver {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  25%      { transform: translateX(-2px) rotate(1deg); }
  75%      { transform: translateX(2px) rotate(-1deg); }
}

/* 会話で人数が多いとき（合流・集合など）は小さめに */
#sprites:not(.battle-formation)[data-count="3"] .char-img,
#sprites:not(.battle-formation)[data-count="4"] .char-img { height: clamp(96px, 22vh, 170px); }
#sprites:not(.battle-formation)[data-count="5"] .char-img,
#sprites:not(.battle-formation)[data-count="6"] .char-img,
#sprites:not(.battle-formation)[data-count="7"] .char-img { height: clamp(72px, 16vh, 120px); }

@media (max-width: 767px) {
  #sprites:not(.battle-formation) {
    top: 7%;
    bottom: 32%;
    gap: clamp(10px, 4vw, 18px);
    padding: 0 12px;
  }
  #sprites:not(.battle-formation) .side {
    max-width: 100%;
    flex-wrap: nowrap;
    gap: clamp(10px, 3vw, 18px);
  }
  #sprites:not(.battle-formation) .char-img {
    height: clamp(132px, 25vh, 196px);
    max-width: 58vw;
  }
  #sprites:not(.battle-formation)[data-total="2"] .char-img {
    height: clamp(118px, 22vh, 172px);
    max-width: 43vw;
  }
  #sprites:not(.battle-formation)[data-total="3"] .char-img,
  #sprites:not(.battle-formation)[data-total="4"] .char-img {
    height: clamp(92px, 17vh, 134px);
    max-width: 30vw;
  }
}

/* ===== バトル隊形（FF風・奥行きのある立体配置） =====
   左：敵（大きく手前）＋捕らわれたタクト。
   右：仲間4人を「奥（小・上・左寄り＝敵側）→手前（大・下・右寄り＝カメラ側）」の斜め隊列に。 */
#screen.battle-scene #sprites { top: 8%; bottom: 36%; }
#sprites.battle-formation {
  justify-content: space-between;
  align-items: flex-end;
  gap: 2%;
  padding: 0 4%;
}
.battle-formation .side-left {   /* 敵＋捕虜（左にまとめる） */
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(2px, 1.2vw, 10px);
  flex: 0 0 auto;
  max-width: 52%;
}
/* 捕らわれたタクトは小さく、敵のそばに寄せる（味方サイズ規則より優先） */
.battle-formation .side-left .captive { margin-left: clamp(8px, 1.6vw, 16px); transform: translateY(8px); }
.battle-formation .side-left .captive .char-img { height: clamp(54px, 11.5vh, 92px); }
/* 味方4人は side-right を絶対配置の箱にして、その中で斜め隊列を組む
   （flexの縦積みだと箱の高さを超えてはみ出すため、% 座標で箱の中に収める）。 */
.battle-formation .side-right {
  position: relative;
  align-self: stretch;
  width: clamp(210px, 56vw, 340px);
  max-width: 60%;
  height: 100%;
}
.battle-formation .side-left .sprite.enemy .char-img { height: clamp(118px, 29vh, 215px); }  /* 敵は大きく手前 */
.battle-formation .side-left .sprite.rescued .char-img {
  height: clamp(72px, 14vh, 112px);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.45));
}

/* FF風の斜め隊列：奥（左上・小さく・暗め）→ 手前（右下・大きく・明るい）。
   後ろのキャラほど上＆左（敵側）へ、手前のキャラほど下＆右（カメラ側）へ置いて、
   重なりと大小・明暗で奥行きを出す。名前タグは混雑するので隠し、ステータス窓に集約。 */
.battle-formation .side-right .sprite { position: absolute; margin: 0; }
.battle-formation .side-right .sprite:nth-child(1) { right: 50%; bottom: 54%; z-index: 1; }
.battle-formation .side-right .sprite:nth-child(2) { right: 34%; bottom: 36%; z-index: 2; }
.battle-formation .side-right .sprite:nth-child(3) { right: 17%; bottom: 18%; z-index: 3; }
.battle-formation .side-right .sprite:nth-child(4) { right: 0;   bottom: 0;   z-index: 4; }
.battle-formation .side-right .sprite[data-formation="back"]  { right: 46%; bottom: 40%; z-index: 1; }
.battle-formation .side-right .sprite[data-formation="mid"]   { right: 32%; bottom: 27%; z-index: 2; }
.battle-formation .side-right .sprite[data-formation="front"] { right: 15%; bottom: 12%; z-index: 3; }
.battle-formation .side-right .sprite[data-formation="lead"]  { right: 0;   bottom: 0;  z-index: 4; }
.battle-formation .side-right .sprite:nth-child(1) .char-img { height: clamp(46px, 9.5vh, 76px);  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4)) brightness(0.78); }
.battle-formation .side-right .sprite:nth-child(2) .char-img { height: clamp(54px, 11vh, 88px);   filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4)) brightness(0.88); }
.battle-formation .side-right .sprite:nth-child(3) .char-img { height: clamp(62px, 12.5vh, 100px); filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4)) brightness(0.96); }
.battle-formation .side-right .sprite:nth-child(4) .char-img { height: clamp(70px, 14.5vh, 114px); }
.battle-formation .side-right .name { display: none; }
.battle-formation .side-right .shadow { bottom: 3px; height: 6px; }
.sprite.defeated .name { opacity: 0; }
.sprite.defeated .shadow { opacity: 0; }

/* パーティ ステータス（FF風・戦闘時のみ） */
.status-window {
  position: absolute;
  z-index: 12;
  background: linear-gradient(180deg, #1a3a8e, #0c1f5e);
  border: 3px solid #ffffff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #4a6fd0, 0 8px 26px rgba(0,0,0,0.5);
  padding: 6px 9px;
  right: 10px;
  bottom: 10px;
  width: min(86%, 330px);
}
.status-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.status-row .nm {
  flex: 0 0 auto; min-width: 4.6em;
  font-size: calc(12px * var(--font-scale)); font-weight: bold;
  color: #fff; text-shadow: 1px 1px 0 #000;
}
.status-row .lv { font-size: calc(11px * var(--font-scale)); color: #cfe0ff; font-weight: bold; }
.status-row .mv-track {
  flex: 1; height: 9px; background: #04102e;
  border: 1px solid #6a8fe0; border-radius: 5px; overflow: hidden;
}
.status-row .mv-fill { height: 100%; background: linear-gradient(90deg, #ffd23f, #ff9a3f); }

/* スマホ縦（〜767px）バトル下段：下から ステータス → 会話 → コマンド。 */
@media (max-width: 767px) {
  #screen.battle-scene {
    --battle-gap: 6px;
    --battle-message-h: 98px;
    --battle-status-h: 58px;
    /* コマンド6個（ラベル2行×3段）が収まる高さ */
    --battle-command-h: 170px;
  }
  /* バトル中に大きくするのは会話の文字だけ。ゲージは大きさを変えず、敵にかぶらないようにする */
  #screen.battle-scene .cost-label { font-size: 12px; margin-bottom: 3px; }
  #screen.battle-scene #cost-value { font-size: 14px; margin-top: 2px; }
  #screen.battle-scene #cost-bar {
    left: 8px;
    right: 8px;
    top: 8px;
    transform: none;
    width: auto;
  }
  #screen.battle-scene #sprites {
    top: 100px; /* 上のゲージ（下端およそ95px）の下から */
    bottom: calc(var(--battle-status-h) + var(--battle-message-h) + var(--battle-command-h) + 54px);
    padding: 0 4%;
  }
  #screen.battle-scene #sprites.battle-formation {
    gap: 1%;
  }
  #screen.battle-scene .battle-formation .side-left {
    max-width: 47%;
    column-gap: 0;
    row-gap: 10px;
    align-content: flex-end;
  }
  #screen.battle-scene .battle-formation .side-left .sprite.enemy .char-img {
    /* 低い画面でも、敵＋その下の村人が立ち絵欄に収まる大きさに */
    height: min(clamp(104px, 20vh, 160px), calc(64cqh - 46px));
  }
  #screen.battle-scene .battle-formation .side-left .captive .char-img {
    height: min(clamp(46px, 8.8vh, 74px), calc(36cqh - 20px));
  }
  #screen.battle-scene .battle-formation .side-left .sprite.rescued .char-img {
    height: min(clamp(54px, 10vh, 82px), 28cqh);
  }
  /* 画面が低い（立ち絵欄が240px未満）ときは、村人を敵の下ではなく横に並べて、敵を小さくしすぎない */
  @container (max-height: 240px) {
    #screen.battle-scene .battle-formation .side-left { flex-wrap: nowrap; align-items: flex-end; max-width: 72%; }
    #screen.battle-scene .battle-formation .side-left .sprite.enemy .char-img { height: min(clamp(104px, 20vh, 160px), calc(100cqh - 40px)); }
    #screen.battle-scene .battle-formation .side-left .captive .char-img { height: min(clamp(46px, 8.8vh, 74px), calc(55cqh - 26px)); }
    #screen.battle-scene .battle-formation .side-left .sprite.rescued .char-img { height: min(clamp(54px, 10vh, 82px), calc(60cqh - 26px)); }
  }
  #screen.battle-scene .battle-formation .side-left .captive {
    margin-left: 0;
    transform: translateY(6px);
  }
  #screen.battle-scene .battle-formation .side-left .captive::after {
    top: 12px;
    left: -10px;
  }
  /* 仲間4人はPCと同じ1列の斜め隊列（奥＝左上 → 手前＝右下）。大きさは4人とも同じ（64px）。
     縦に積まないので、背の低い画面でも小さくしなくてよい。 */
  #screen.battle-scene .battle-formation .side-right {
    position: relative;
    align-self: stretch;
    display: block;
    width: 46%;
    max-width: 46%;
    height: 100%;
  }
  #screen.battle-scene .battle-formation .side-right .sprite { position: absolute; margin: 0; }
  #screen.battle-scene #sprites.battle-formation { container-type: size; } /* 敵・村人の大きさを欄の高さ（cqh）で決める */
  /* 縦に余裕がある画面（414×820など。立ち絵欄が260px以上）は、仲間を右端の縦1列に（多少重なってよい）。
     それより低い画面（430×760など）は上の斜め隊列のまま。 */
  @container (min-height: 260px) {
    #screen.battle-scene .battle-formation .side-right { width: 24%; max-width: 24%; }
    #screen.battle-scene #sprites.battle-formation .side-right .sprite[data-formation="back"] { right: 0; bottom: 69%; }
    #screen.battle-scene #sprites.battle-formation .side-right .sprite[data-formation="mid"] { right: 0; bottom: 46%; }
    #screen.battle-scene #sprites.battle-formation .side-right .sprite[data-formation="front"] { right: 0; bottom: 23%; }
    #screen.battle-scene #sprites.battle-formation .side-right .sprite[data-formation="lead"] { right: 0; bottom: 0; }
  }
  #screen.battle-scene .battle-formation .side-right .sprite[data-formation="back"]  { right: 62%; bottom: min(54%, calc(100% - 70px)); z-index: 1; }
  #screen.battle-scene .battle-formation .side-right .sprite[data-formation="mid"]   { right: 41%; bottom: min(36%, calc(66% - 46px)); z-index: 2; }
  #screen.battle-scene .battle-formation .side-right .sprite[data-formation="front"] { right: 20%; bottom: min(18%, calc(33% - 23px)); z-index: 3; }
  #screen.battle-scene .battle-formation .side-right .sprite[data-formation="lead"]  { right: 0;   bottom: 0; z-index: 4; }
  #screen.battle-scene .battle-formation .side-right .sprite .char-img,
  #screen.battle-scene .battle-formation .side-right .sprite:nth-child(1) .char-img,
  #screen.battle-scene .battle-formation .side-right .sprite:nth-child(2) .char-img,
  #screen.battle-scene .battle-formation .side-right .sprite:nth-child(3) .char-img,
  #screen.battle-scene .battle-formation .side-right .sprite:nth-child(4) .char-img {
    height: 64px;
    max-width: none;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.45));
  }
  #screen.battle-scene .rpg-window {
    left: 8px;
    right: 8px;
    bottom: calc(var(--battle-status-h) + 16px);
    min-height: var(--battle-message-h);
    max-height: var(--battle-message-h);
    padding: calc(13px + var(--message-top-gap)) 12px 10px;
    overflow: visible;
  }
  #screen.battle-scene #text {
    max-height: 100%;
    overflow: hidden;
    font-size: calc(14px * var(--font-scale));
    line-height: 1.45;
  }
  #screen.battle-scene #speaker {
    top: -14px;
    left: 14px;
    font-size: calc(12px * var(--font-scale));
    padding: 3px 10px;
  }
  #screen.battle-scene #party-status {
    left: 8px;
    right: 8px;
    bottom: 6px;
    top: auto;
    width: auto;
    height: var(--battle-status-h);
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 8px;
    padding: 4px 8px;
    overflow: hidden;
  }
  #screen.battle-scene #party-status .status-row {
    min-width: 0;
    margin: 0;
    gap: 5px;
  }
  #screen.battle-scene #party-status .status-row .nm {
    min-width: 0;
    width: 5.35em;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
    font-size: 10px;
  }
  #screen.battle-scene #party-status .status-row .lv { font-size: 10px; }
  #screen.battle-scene #party-status .status-row .mv-track { height: 7px; }
  #screen.battle-scene .cmd-window {
    left: 8px;
    right: 8px;
    bottom: calc(var(--battle-status-h) + var(--battle-message-h) + 36px);
    width: auto;
    /* 下端は固定。コマンドが増えたら上へ伸ばす（切らない） */
    max-height: none;
    padding: 6px 8px 7px;
    overflow: visible;
  }
  #screen.battle-scene .cmd-window-title { font-size: 11px; padding: 0 2px 4px; margin-bottom: 2px; }
  #screen.battle-scene .cmd-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 6px;
  }
  #screen.battle-scene .cmd-list li {
    min-width: 0;
    margin: 0;
  }
  #screen.battle-scene .cmd {
    width: 100%;
    min-height: 30px;
    padding: 5px 6px;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.18;
    white-space: normal;
  }
  #screen.battle-scene .cmd-label {
    min-width: 0;
  }
}

/* 被弾・撃破（本体に適用） */
.char-img.hurt { animation: hurt 0.42s linear !important; }
.char-img.pop  { animation: pop  1s ease forwards !important; }
/* 効果なし（敵は揺れるだけで通信費ゲージは変わらない） */
.char-img.no-effect { animation: noEffectAnim 0.46s ease !important; }
@keyframes noEffectAnim {
  0%   { transform: scale(1); filter: none; }
  25%  { transform: translateX(-5px) scale(1.02); filter: grayscale(0.6) brightness(1.12); }
  50%  { transform: translateX(5px) scale(1.02); filter: grayscale(0.6) brightness(1.12); }
  75%  { transform: translateX(-3px) scale(1.01); filter: grayscale(0.45) brightness(1.06); }
  100% { transform: scale(1); filter: none; }
}

@keyframes walkCycle {
  0%   { transform: translateY(0)    rotate(-2.2deg); }
  25%  { transform: translateY(-7px) rotate(0deg); }
  50%  { transform: translateY(0)    rotate(2.2deg); }
  75%  { transform: translateY(-7px) rotate(0deg); }
  100% { transform: translateY(0)    rotate(-2.2deg); }
}
@keyframes shadowPulse {
  0%,50%,100% { transform: scale(1);    opacity: 0.5; }
  25%,75%     { transform: scale(0.78); opacity: 0.3; }
}
@keyframes enemyFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-3px) scale(1.012); }
}
@keyframes hurt {
  0%,100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-12px); filter: brightness(2.2); }
  40% { transform: translateX(12px); }
  60% { transform: translateX(-8px); filter: brightness(2.2); }
  80% { transform: translateX(8px); }
}
/* 撃破：はじける絵（*_pop.png）を少し見せてから縮んで消える */
@keyframes pop {
  0%   { transform: scale(1) rotate(0); opacity: 1; filter: none; }
  15%  { transform: scale(1.18) rotate(4deg); opacity: 1; filter: brightness(1.5); }
  30%  { transform: scale(1.12) rotate(0); opacity: 1; filter: none; }
  65%  { transform: scale(1.1) rotate(-3deg); opacity: 1; filter: none; }
  100% { transform: scale(0.1) rotate(-20deg); opacity: 0; }
}

/* 歩いて登場（左右から、踏み込みのリズムで） */
@keyframes walkInLeft {
  0%   { transform: translateX(-160%); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes walkInRight {
  0%   { transform: translateX(160%); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ===== ダメージ表示 ===== */
.dmg {
  position: absolute;
  z-index: 8;
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
  color: #fff;
  text-shadow: 2px 2px 0 #b3001b, 0 0 10px rgba(255,255,255,0.7);
  pointer-events: none;
  animation: dmgPop 0.9s ease forwards;
}
@keyframes dmgPop {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  25%  { transform: translateY(-18px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-54px) scale(1); opacity: 0; }
}

/* ===== 固定費ゲージ ===== */
#cost-bar {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: min(92%, 460px);
  z-index: 6;
  padding: 8px 12px;
  background: var(--win-bg);
  border: 3px solid var(--win-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.cost-label {
  font-size: calc(13px * var(--font-scale));
  color: var(--accent);
  margin-bottom: 5px;
  font-weight: bold;
}
.cost-track {
  height: 18px;
  background: #04102e;
  border: 2px solid #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
#cost-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff5a7a, #ff9a3f);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}
#cost-value {
  margin-top: 4px;
  text-align: right;
  font-size: calc(16px * var(--font-scale));
  font-weight: bold;
}

/* ===== 削減額スロット演出 ===== */
#slot {
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  font-size: clamp(34px, 7vw, 60px);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 3px 3px 0 #000, 0 0 18px var(--accent);
  animation: slotIn 0.8s ease;
}
@keyframes slotIn {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

/* ===== 金貨 ===== */
.coin {
  position: absolute;
  font-size: clamp(20px, 4vw, 30px);
  z-index: 7;
  animation: coinUp 1.1s ease forwards;
}
@keyframes coinUp {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-160px) scale(1.1); opacity: 0; }
}

/* ===== ユニコーン ===== */
#unicorn {
  position: absolute;
  top: 10%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: floatUni 3s ease-in-out;
}
.unicorn-img {
  height: clamp(80px, 18vh, 140px);
  width: auto;
  filter: drop-shadow(0 0 16px #ff8be7);
}
.uni-text {
  display: block;
  font-size: calc(13px * var(--font-scale));
  color: #ff8be7;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
  margin-top: 4px;
}
@keyframes floatUni {
  0%      { transform: translateX(-130%); opacity: 0; }
  20%,80% { transform: translateX(0);     opacity: 1; }
  100%    { transform: translateX(130%);  opacity: 0; }
}

/* ===== メッセージウィンドウ（JRPG） ===== */
.rpg-window {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 10;
  --message-top-gap: 0px;
  background: linear-gradient(180deg, var(--win-bg2), var(--win-bg));
  border: 3px solid var(--win-border);
  border-radius: 12px;
  padding: calc(16px + var(--message-top-gap)) 18px 18px;
  min-height: 26%;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #3a4f9e, 0 8px 26px rgba(0,0,0,0.55);
  overflow: visible;
}
.rpg-window.has-speaker {
  --message-top-gap: calc(16px * var(--font-scale));
}
#speaker {
  position: absolute;
  top: -16px; left: 16px;
  background: var(--accent);
  color: #2a1a00;
  font-weight: bold;
  font-size: calc(15px * var(--font-scale));
  padding: 4px 14px;
  border: 3px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: visible;
}
#speaker:empty { display: none; }
#text {
  font-size: calc(20px * var(--font-scale));
  line-height: 2.0;
  white-space: pre-wrap;
  overflow: hidden;
}
/* ふりがな（ルビ） */
#text ruby { ruby-position: over; }
#text rt {
  font-size: 0.52em;
  color: var(--accent-2);
  font-weight: normal;
  letter-spacing: 0;
}
.vline ruby rt, .overlay ruby rt { font-size: 0.5em; color: var(--accent-2); }
#hint {
  position: absolute;
  right: 14px; bottom: 8px;
  font-size: calc(18px * var(--font-scale));
  color: var(--accent);
  animation: bounceHint 1s ease-in-out infinite;
}
@keyframes bounceHint { 0%,100%{ transform: translateY(0); opacity:1; } 50%{ transform: translateY(4px); opacity:0.4; } }

/* ===== コマンドウィンドウ（ドラクエ／FF 風） ===== */
.cmd-window {
  position: absolute;
  right: 10px;
  bottom: calc(26% + 18px);
  z-index: 12;
  width: min(78%, 300px);
  background: linear-gradient(180deg, var(--win-bg2), var(--win-bg));
  border: 3px solid var(--win-border);
  border-radius: 12px;
  padding: 8px 10px 10px;
  box-shadow: inset 0 0 0 2px #3a4f9e, 0 8px 26px rgba(0,0,0,0.55);
}
.cmd-window-title {
  font-size: calc(12px * var(--font-scale));
  color: var(--accent);
  font-weight: bold;
  padding: 0 2px 6px;
  border-bottom: 1px solid #3a4f9e;
  margin-bottom: 4px;
}
.cmd-list { list-style: none; margin: 0; padding: 0; }
.cmd-list li { margin: 2px 0; }
.cmd {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: calc(16px * var(--font-scale));
  font-weight: bold;
  padding: 9px 8px;
  background: transparent;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.cmd .cur {
  color: var(--accent);
  opacity: 0;
  font-size: calc(15px * var(--font-scale));
}
.cmd:hover:not(:disabled) { background: rgba(79,209,197,0.14); }
.cmd:disabled { opacity: 0.4; cursor: not-allowed; }
.cmd.ready {
  background: rgba(255,210,63,0.16);
  border-color: var(--accent);
}
.cmd.ready .cur { opacity: 1; animation: curBlink 0.7s steps(2) infinite; }
@keyframes curBlink { 50% { opacity: 0.15; } }

/* ===== オーバーレイ（タイトル / ビジョン） ===== */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, #1b2b6b, #05081c 75%);
  padding: 24px;
}
.overlay h1 {
  font-size: calc(34px * var(--font-scale));
  color: var(--accent);
  margin: 0 0 6px;
  text-shadow: 3px 3px 0 #000;
}
.subtitle { font-size: calc(18px * var(--font-scale)); margin: 0 0 18px; color: var(--accent-2); }
.overlay button {
  font-size: calc(20px * var(--font-scale));
  font-weight: bold;
  padding: 16px 28px;
  background: var(--accent);
  color: #2a1a00;
  border: 4px solid #ffffff;
  border-radius: 14px;
  cursor: pointer;
}
.overlay button:active { transform: translateY(2px); }

/* ===== タイトル画面（FF風：背景がゆっくり動き、メニューだけを置く） ===== */
#title-screen.title-overlay { overflow: hidden; background: #05060f; }
#title-screen.title-overlay::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image: url("./assets/backgrounds/castle-b.webp");
  background-size: cover;
  background-position: center;
  filter: brightness(0.5) saturate(1.15);
  animation: titlePan 22s ease-in-out infinite alternate;
}
#title-screen.title-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(10, 16, 46, 0.25), rgba(2, 3, 10, 0.88) 75%),
    linear-gradient(180deg, rgba(2, 3, 10, 0.1), rgba(2, 3, 10, 0.4) 65%, rgba(2, 3, 10, 0.92));
}
@keyframes titlePan {
  0%   { transform: scale(1)     translate(0, 0); }
  100% { transform: scale(1.14)  translate(-2%, -1.5%); }
}
.title-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 16%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 48% 65%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 28% 80%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 55%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 92% 78%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 50%, #fff, transparent 60%);
  opacity: 0.55;
  animation: titleSparkle 4.5s ease-in-out infinite alternate;
}
@keyframes titleSparkle { 0% { opacity: 0.2; } 100% { opacity: 0.75; } }
.title-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.title-content h1 {
  font-size: calc(46px * var(--font-scale));
  letter-spacing: 0;
  margin: 0 0 36px;
  color: var(--accent);
  text-shadow: 0 3px 0 #000, 0 0 26px rgba(255, 210, 63, 0.55);
  text-wrap: balance;
}
.title-menu { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.title-menu button {
  font-size: calc(19px * var(--font-scale));
  font-weight: bold;
  padding: 14px 48px;
  background: rgba(8, 16, 48, 0.55);
  color: #fff;
  border: 3px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0;
  transition: background 0.15s ease;
}
.title-menu button:hover { background: rgba(255, 210, 63, 0.18); }
.title-menu button:active { transform: translateY(2px); }
.title-menu #continue-btn { border-color: var(--accent-2); }
.title-menu #option-btn { border-color: #8ea0d8; }
.title-menu #book-btn { border-color: #f0a050; }

@media (max-width: 767px) {
  .title-content {
    width: min(92vw, 360px);
  }
  .title-content h1 {
    max-width: 100%;
    margin-bottom: 28px;
    font-size: calc(34px * var(--font-scale));
    line-height: 1.14;
  }
  .title-menu button {
    width: 100%;
    padding: 13px 24px;
  }
}

/* ===== オプション画面 ===== */
.option-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid #3a5cb0; }
.option-row:last-of-type { border-bottom: none; }
.option-row .opt-label { font-size: calc(15px * var(--font-scale)); font-weight: bold; }
.option-row button {
  font-size: calc(14px * var(--font-scale));
  font-weight: bold;
  padding: 8px 16px;
  background: #1d2f6e;
  color: #fff;
  border: 2px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
.option-row .danger-btn {
  background: #712236;
  color: #fff;
  border-color: #ff9aa7;
}

#vision-screen .big-number {
  font-size: clamp(34px, 7vw, 54px);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent);
  margin: 10px 0;
}
#vision-screen .vline {
  font-size: calc(17px * var(--font-scale));
  line-height: 1.8;
  max-width: 560px;
}
.fine-print {
  max-width: 560px;
  margin: 2px 0 14px;
  color: #cfe0ff;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.5;
}

/* ===== HUD メニューボタン ===== */
#menu-btn {
  font-size: calc(13px * var(--font-scale));
  padding: 6px 10px;
  background: var(--accent);
  color: #2a1a00;
  border: 2px solid #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
@media (max-width: 767px) {
  #menu-btn {
    width: 34px;
    min-width: 34px;
    height: 36px;
    padding: 0;
    color: transparent;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #menu-btn::before {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #2a1a00;
    box-shadow: 0 6px 0 #2a1a00, 0 12px 0 #2a1a00;
    transform: translateY(-6px);
  }
}
/* ===== メニュー / ステータス画面（FF風 青パネル） ===== */
.menu-overlay {
  background: rgba(2, 6, 24, 0.82);
  padding: clamp(10px, 2vw, 28px);
  justify-content: flex-start;
}
.menu-panel {
  width: min(100%, 920px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, #1a3a8e, #0c1f5e);
  border: 3px solid #ffffff;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #4a6fd0, 0 12px 40px rgba(0,0,0,0.6);
  padding: clamp(12px, 2vw, 22px);
  color: #fff;
}
.menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.menu-head h2 { margin: 0; font-size: calc(22px * var(--font-scale)); color: var(--accent); text-shadow: 2px 2px 0 #000; }
.menu-resources { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; text-align: right; }
.menu-g { font-size: calc(14px * var(--font-scale)); color: #ffe9a8; font-weight: bold; }
.menu-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; min-height: 0; overflow: auto; }
@media (max-width: 640px) { .menu-body { grid-template-columns: 1fr; } }

.party-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
.member-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "img name" "img job" "img lv";
  gap: 0 8px;
  align-items: center;
  text-align: left;
  background: rgba(8, 22, 64, 0.7);
  border: 2px solid #3a5cb0;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  color: #fff;
}

.menu-overlay .member-card {
  font-size: inherit;
  padding: 6px 8px;
  background: rgba(8, 22, 64, 0.7);
  color: #fff;
  border: 2px solid #3a5cb0;
  border-radius: 8px;
}
.menu-overlay .member-card.sel {
  border-color: var(--accent);
  background: rgba(255,210,63,0.14);
}

@media (max-width: 640px) {
  .menu-overlay {
    padding: 8px;
  }
  .menu-panel {
    max-height: calc(100% - 16px);
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
  }
  .menu-head {
    align-items: center;
    flex-wrap: wrap;
  }
  .menu-resources {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .menu-head h2 {
    font-size: calc(18px * var(--font-scale));
  }
  .party-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .menu-overlay .member-card {
    grid-template-columns: 48px 1fr;
    min-height: 62px;
    padding: 6px 8px;
    gap: 0 8px;
  }
  .member-card .mc-img {
    width: 44px;
    height: 44px;
  }
  .member-card .mc-name {
    font-size: calc(13px * var(--font-scale));
  }
  .member-card .mc-job,
  .member-card .mc-lv {
    line-height: 1.2;
  }
  #status-detail {
    padding: 8px 9px;
    border-radius: 8px;
  }
  .sd-head {
    gap: 8px;
  }
  .sd-img {
    width: 58px;
    height: 58px;
  }
  .menu-actions button {
    flex: 1;
    padding: 9px 10px;
  }
  /* 冒険の書：図解のボタンが増えても縦に細長くならないよう、2列で折り返す */
  .book-actions button {
    flex: 1 1 calc(50% - 5px);
  }
}
.member-card.sel { border-color: var(--accent); background: rgba(255,210,63,0.14); }
.member-card .mc-img { grid-area: img; width: clamp(46px, 8vw, 64px); height: clamp(46px, 8vw, 64px); object-fit: contain; }
.member-card .mc-name { grid-area: name; font-weight: bold; font-size: calc(14px * var(--font-scale)); }
.member-card .mc-job { grid-area: job; font-size: calc(10px * var(--font-scale)); color: #bcd0ff; }
.member-card .mc-lv { grid-area: lv; font-size: calc(11px * var(--font-scale)); color: #ffe9a8; font-weight: bold; }

#status-detail {
  background: rgba(8, 22, 64, 0.7);
  border: 2px solid #3a5cb0;
  border-radius: 10px;
  padding: 10px 12px;
}
.sd-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #3a5cb0; padding-bottom: 8px; margin-bottom: 8px; }
.sd-img { width: clamp(70px, 14vw, 110px); height: clamp(70px, 14vw, 110px); object-fit: contain; }
.sd-name { font-size: calc(18px * var(--font-scale)); font-weight: bold; }
.sd-job { font-size: calc(12px * var(--font-scale)); color: #bcd0ff; }
.sd-lv { font-size: calc(13px * var(--font-scale)); color: #ffe9a8; font-weight: bold; margin-top: 2px; }
.sd-persona {
  margin: 0 0 8px;
  padding: 7px 9px;
  background: rgba(255, 210, 63, 0.10);
  border: 1px solid rgba(255, 210, 63, 0.45);
  border-radius: 8px;
}
.sd-trait {
  font-size: calc(12px * var(--font-scale));
  color: #ffe9a8;
  font-weight: bold;
  line-height: 1.35;
}
.sd-note {
  margin-top: 3px;
  font-size: calc(11px * var(--font-scale));
  color: #dce7ff;
  line-height: 1.45;
}
.stat-guide {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(111, 142, 214, 0.8);
  border-radius: 8px;
  background: rgba(4, 14, 45, 0.55);
  text-align: left;
}
.stat-guide summary {
  cursor: pointer;
  color: #ffe9a8;
  font-size: calc(12px * var(--font-scale));
  font-weight: bold;
}
.stat-guide ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.stat-guide li {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 6px;
  margin: 4px 0;
  color: #dce7ff;
  font-size: calc(10.5px * var(--font-scale));
  line-height: 1.35;
}
.stat-guide li strong { color: #fff; }
.stat-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.st-l { flex: 0 0 4.5em; font-size: calc(13px * var(--font-scale)); font-weight: bold; }
.st-track { flex: 1; height: 12px; background: #04102e; border: 1px solid #6a8fe0; border-radius: 6px; overflow: hidden; }
.st-fill { height: 100%; background: linear-gradient(90deg, #4fd1c5, #2f8fd0); }
.st-fill-low { background: linear-gradient(90deg, #4fd1c5, #2f8fd0); }
.st-fill-mid { background: linear-gradient(90deg, #7ee46f, #39b96d); }
.st-fill-high { background: linear-gradient(90deg, #ffd23f, #ff9a3f); }
.st-fill-legend { background: linear-gradient(90deg, #fff06a, #ffca3f 42%, #ff72b6); box-shadow: 0 0 10px rgba(255, 210, 63, 0.45); }
.st-v { flex: 0 0 2.5em; text-align: right; font-weight: bold; font-size: calc(13px * var(--font-scale)); }
.menu-actions { display: flex; gap: 10px; justify-content: flex-end; }
.menu-actions.book-actions { flex-wrap: wrap; }
/* 冒険の書の「図解を見る」：2列のボタン。数が多いときは中だけスクロール */
.dg-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: auto; min-height: 0; flex: 1 1 auto; margin-bottom: 12px; }
.dg-pick button {
  font-size: calc(15px * var(--font-scale));
  font-weight: bold;
  padding: 10px 8px;
  background: var(--accent);
  color: #2a1a00;
  border: 3px solid #fff;
  border-radius: 10px;
  cursor: pointer;
}
.menu-actions button {
  font-size: calc(16px * var(--font-scale));
  font-weight: bold;
  padding: 10px 20px;
  background: var(--accent);
  color: #2a1a00;
  border: 3px solid #fff;
  border-radius: 10px;
  cursor: pointer;
}
.menu-actions button[data-act="close"] { background: #1d2f6e; color: #fff; }
.menu-actions button:disabled,
.option-row button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.backlog-panel { width: min(100%, 760px); }
.backlog-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 4px 6px;
  text-align: left;
}
.backlog-row {
  padding: 8px 9px;
  margin: 0 0 6px;
  background: rgba(4, 14, 45, 0.58);
  border: 1px solid rgba(111, 142, 214, 0.75);
  border-radius: 8px;
}
.backlog-row strong {
  display: block;
  color: #ffe9a8;
  font-size: calc(12px * var(--font-scale));
  margin-bottom: 3px;
}
.backlog-row span,
.backlog-empty {
  color: #fff;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.55;
}

#growth-result {
  position: absolute;
  right: 18px;
  top: 88px;
  z-index: 28;
  width: min(330px, calc(100% - 36px));
  padding: 10px 12px;
  background: rgba(8, 16, 48, 0.94);
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  text-align: left;
  animation: growthIn 0.22s ease;
}
.growth-title {
  color: var(--accent);
  font-weight: 900;
  font-size: calc(14px * var(--font-scale));
  margin-bottom: 5px;
}
.growth-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid rgba(111, 142, 214, 0.45);
}
.growth-row strong { color: #fff; font-size: calc(12px * var(--font-scale)); }
.growth-row span { color: #ffe9a8; font-size: calc(11px * var(--font-scale)); }
.growth-row small {
  grid-column: 1 / -1;
  color: #cfe0ff;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
}
@keyframes growthIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  #status-detail {
    padding: 8px 9px;
    border-radius: 8px;
  }
  .sd-head {
    gap: 8px;
  }
  .sd-img {
    width: 58px;
    height: 58px;
  }
  .sd-persona {
    padding: 6px 8px;
  }
  .sd-trait {
    font-size: calc(11px * var(--font-scale));
  }
  .sd-note {
    font-size: calc(10px * var(--font-scale));
  }
  .stat-guide {
    padding: 6px 8px;
  }
  .stat-guide li {
    grid-template-columns: 4.8em 1fr;
    font-size: calc(9.5px * var(--font-scale));
  }
  .stat-row {
    gap: 6px;
    margin: 5px 0;
  }
  .st-l {
    flex-basis: 4em;
  }
  .st-v {
    flex-basis: 2.4em;
  }
}

.hidden { display: none !important; }

/* ===== PC（768px以上）：フルステージ。立ち絵は1列で人数に応じて縮小 ===== */
@media (min-width: 768px) {
  #screen.battle-scene {
    --pc-battle-bottom: 16px;
    --pc-battle-panel-h: clamp(156px, 24%, 190px);
  }
  #sprites { top: 4%; bottom: 32%; gap: clamp(20px, 5vw, 90px); }
  .side { gap: clamp(8px, 1.5vw, 22px); }
  .shadow { bottom: 22px; }
  /* PCバトル（FF風）：上＝敵HPゲージ・戦闘ステージ。
     下段＝メッセージ(左・広め) ＋ コマンド(右上) ＋ パーティ状態(右下)。 */
  #screen.battle-scene #cost-bar { left: 16px; top: 14px; transform: none; width: min(40%, 360px); }
  #screen.battle-scene #sprites {
    top: 8%;
    bottom: calc(var(--pc-battle-panel-h) + var(--pc-battle-bottom) + 22px);
    padding: 0 3%;
  }
  /* 下段は1列に並べる：メッセージ(左) ｜ コマンド(中) ｜ パーティ状態(右) */
  #screen.battle-scene .rpg-window,
  #screen.battle-scene .cmd-window,
  #screen.battle-scene #party-status {
    bottom: var(--pc-battle-bottom);
    height: var(--pc-battle-panel-h);
    min-height: 0;
    max-height: var(--pc-battle-panel-h);
  }
  #screen.battle-scene .rpg-window {
    left: 16px;
    right: auto;
    width: 46%;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  /* コマンドは下端をそろえ、増えたら上へ伸ばす（切らない）。幅はパーティ状態の手前まで使う */
  #screen.battle-scene .cmd-window {
    left: 48.5%; right: calc(min(26%, 300px) + 24px); top: auto; bottom: var(--pc-battle-bottom);
    width: auto;
    height: auto;
    min-height: var(--pc-battle-panel-h);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 7px 9px 8px;
    container-type: inline-size;
  }
  #screen.battle-scene .cmd-window-title {
    flex: 0 0 auto;
    margin-bottom: 4px;
    padding-bottom: 3px;
    font-size: calc(11px * var(--font-scale));
    line-height: 1.1;
  }
  #screen.battle-scene .cmd-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 5px;
    min-height: 0;
    overflow: visible;
  }
  /* タブレットなどで欄が細いときは1列にして、ラベルが何行にも折れないようにする */
  @container (max-width: 280px) {
    #screen.battle-scene .cmd-list { grid-template-columns: minmax(0, 1fr); }
  }
  #screen.battle-scene .cmd-list li { margin: 0; }
  #screen.battle-scene #party-status {
    right: 16px;
    bottom: var(--pc-battle-bottom);
    width: min(26%, 300px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
    padding: 10px 10px;
  }
  #screen.battle-scene #party-status .status-row {
    margin: 0;
    min-height: 30px;
    gap: 8px;
  }
  #screen.battle-scene #party-status .status-row .nm {
    min-width: 5.2em;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
  }
  #screen.battle-scene #party-status .status-row .lv { white-space: nowrap; }
  #screen.battle-scene .cmd {
    width: 100%;
    min-height: 34px;
    font-size: calc(11.5px * var(--font-scale));
    padding: 4px 6px;
    line-height: 1.12;
    gap: 5px;
  }
  #screen.battle-scene .cmd-label {
    min-width: 0;
    white-space: normal;
  }
  #screen.battle-scene #text {
    overflow: hidden;
    font-size: calc(20px * var(--font-scale));
    line-height: 1.55;
  }

  /* PCバトル：会話のときに近い大きさで並べ、何もない地面を減らす。
     大きさは立ち絵の欄（#sprites）の高さ（cqh）で決めるので、どの画面でも上のゲージや下の窓に重ならない。
     敵は大きく、仲間4人は2列（奥の2人・手前の2人）を少しずらして並べる。 */
  #screen.battle-scene #sprites.battle-formation { top: max(8%, 124px); container-type: size; }
  .battle-formation .side-left  { align-self: flex-end; max-width: 50%; flex-wrap: nowrap; }
  .battle-formation .side-left .sprite.enemy .char-img { height: min(86cqh, 440px); max-width: 34vw; }
  .battle-formation .side-left .captive .char-img { height: min(38cqh, 190px); max-width: 13vw; }
  .battle-formation .side-left .sprite.rescued .char-img { height: min(44cqh, 210px); max-width: 14vw; }
  .battle-formation .side-right { width: min(48%, 620px); max-width: 48%; }
  /* 仲間4人は1列の斜め隊列（奥＝左上 → 手前＝右下）。2列にはしない */
  .battle-formation .side-right .sprite[data-formation="back"]  { right: 57%; bottom: 40%; z-index: 1; }
  .battle-formation .side-right .sprite[data-formation="mid"]   { right: 38%; bottom: 27%; z-index: 2; }
  .battle-formation .side-right .sprite[data-formation="front"] { right: 19%; bottom: 13%; z-index: 3; }
  .battle-formation .side-right .sprite[data-formation="lead"]  { right: 0;   bottom: 0;   z-index: 4; }
  .battle-formation .side-right .sprite .char-img { filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4)); }
  .battle-formation .side-right .sprite[data-formation="back"] .char-img  { height: min(42cqh, 190px); max-width: 12vw; }
  .battle-formation .side-right .sprite[data-formation="mid"] .char-img   { height: min(45cqh, 205px); max-width: 13vw; }
  .battle-formation .side-right .sprite[data-formation="front"] .char-img { height: min(48cqh, 220px); max-width: 14vw; }
  .battle-formation .side-right .sprite[data-formation="lead"] .char-img  { height: min(51cqh, 235px); max-width: 15vw; }
  .battle-formation .side-right .shadow { bottom: 5px; }
  #text { font-size: calc(22px * var(--font-scale)); }
  .rpg-window { left: 16px; right: 16px; bottom: 16px; min-height: 22%; }
  .cmd-window { right: 16px; bottom: calc(22% + 22px); width: 300px; }
  .cmd { font-size: calc(17px * var(--font-scale)); }
  .overlay h1 { font-size: calc(42px * var(--font-scale)); }
  .title-content h1 { font-size: calc(58px * var(--font-scale)); }
}

/* 画面幅が狭めのPC（〜1199px）は、会話欄を少し細くしてコマンド欄を広げる（2列のまま収める） */
@media (min-width: 768px) and (max-width: 1199px) {
  #screen.battle-scene .rpg-window { width: 38%; }
  #screen.battle-scene .cmd-window { left: calc(38% + 28px); }
}

/* ===== 小型スマホ（360px未満） ===== */
@media (max-width: 360px) {
  .char-img { height: 78px; }
  #text { font-size: calc(17px * var(--font-scale)); }
  .cmd { font-size: calc(14px * var(--font-scale)); padding: 8px 6px; }
}

/* モーション控えめ設定 */
@media (prefers-reduced-motion: reduce) {
  .char-img, .char-emoji, .shadow, .sprite, .sprite.enemy .char-img, .emote, .cutin * { animation: none !important; }
  #flash { display: none !important; }
}

/* ===== 章クリア画面のボタン ===== */
.end-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.overlay button.secondary { background: #1d2f6e; color: #fff; }
.end-note { color: #ffe9a8; font-size: calc(15px * var(--font-scale)); }

/* ===== 冒険の書（宿題リスト） ===== */
.book-panel { width: min(100%, 760px); min-height: 0; }
.book-lead { margin: 0; font-size: calc(14px * var(--font-scale)); color: #d8e4ff; }
.book-list { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 4px; }
.book-list .hw { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
  background: rgba(8, 22, 64, 0.6); border: 1px solid #2c4a98; font-size: calc(14px * var(--font-scale)); line-height: 1.5; }
.book-list .hw.done { background: rgba(60, 150, 90, 0.35); border-color: #6fd28f; }
.hw-chk { flex: 0 0 1.6em; height: 1.6em; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #9fb6ee; border-radius: 6px; font-weight: bold; color: #fff; }
.hw.done .hw-chk { background: #39b96d; border-color: #fff; }
.hw-req { flex: 0 0 auto; font-size: calc(11px * var(--font-scale)); font-weight: bold; padding: 1px 6px; border-radius: 6px; }
.hw-req.req { background: #2c6b4a; } .hw-req.opt { background: #555f80; }
.hw-title em { font-style: normal; font-size: calc(11px * var(--font-scale)); color: #ffe9a8; margin-right: 6px; }
/* 右上の「‹」ボタンと見出しが重ならないように */
.book-panel .menu-head { flex-wrap: wrap; padding-right: 44px; }

/* 装備品リスト（第2章で入手）：そろえた装備は金色、未入手は灰色 */
.equip-list { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 1 1 auto; text-align: left;
  display: flex; flex-direction: column; gap: 6px; }
.equip-list .eq { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(40, 46, 66, 0.7); border: 1px solid #4a5270; color: #9aa3bd; }
.equip-list .eq.got { background: linear-gradient(90deg, rgba(255, 210, 63, 0.22), rgba(8, 22, 64, 0.6));
  border-color: var(--accent); color: #fff; }
.eq-mark { flex: 0 0 1.9em; height: 1.9em; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #59607a; font-weight: bold; font-size: calc(14px * var(--font-scale)); }
.eq.got .eq-mark { background: var(--accent); border-color: #fff; color: #3a2a00; }
.eq-body { display: flex; flex-direction: column; min-width: 0; }
.eq-name { font-weight: bold; font-size: calc(15px * var(--font-scale)); line-height: 1.35; }
.eq-desc { font-size: calc(12px * var(--font-scale)); line-height: 1.45; color: inherit; opacity: 0.85; }

/* ===== 選択肢（第3章の流派選択など） ===== */
#choice-screen { justify-content: center; }
.choice-panel { width: min(100%, 560px); overflow-y: auto; }
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 12px 16px; cursor: pointer;
  background: var(--accent); color: #2a1a00;
  border: 3px solid #fff; border-radius: 10px;
}
.choice-btn:hover, .choice-btn:focus-visible { filter: brightness(1.08); outline: none; box-shadow: 0 0 0 3px #ffe9a8; }
.choice-btn.later { background: #1d2f6e; color: #fff; }
.choice-name { font-weight: bold; font-size: calc(17px * var(--font-scale)); line-height: 1.35; }
.choice-desc { font-size: calc(13px * var(--font-scale)); line-height: 1.45; opacity: 0.9; }

/* ===== 章を選ぶ ===== */
.title-menu #chapter-btn { border-color: #7fd0a0; }
.chapter-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.overlay .chapter-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 10px 14px; cursor: pointer; color: #fff;
  background: rgba(8, 16, 48, 0.55); border: 3px solid #4a6fd0; border-radius: 12px;
}
.overlay .chapter-row:hover, .overlay .chapter-row:focus-visible { border-color: var(--accent); background: rgba(255, 210, 63, 0.12); outline: none; }
.chapter-face { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.chapter-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.chapter-title { font-weight: bold; font-size: calc(17px * var(--font-scale)); color: var(--accent); }
.chapter-desc { font-size: calc(13px * var(--font-scale)); line-height: 1.45; opacity: 0.92; }
.chapter-clear { flex: 0 0 auto; font-size: calc(12px * var(--font-scale)); font-weight: bold; color: #7fd0a0; }
@media (max-width: 767px) {
  .chapter-face { width: 44px; height: 44px; }
  .chapter-clear { display: none; }
}

/* ===== 敵のターン：毒キノコが捕らわれた村人を攻撃する ===== */
/* 敵（左）が右の村人へ ひと踏み込み */
.char-img.attack { animation: enemyAttack 0.55s ease !important; }
@keyframes enemyAttack {
  0%   { transform: translateX(0) scale(1); }
  35%  { transform: translateX(26px) scale(1.06) rotate(4deg); }
  60%  { transform: translateX(18px) scale(1.04); }
  100% { transform: translateX(0) scale(1); }
}
/* 村人が攻撃を受けて揺れる */
.sprite.captive .char-img.damaged { animation: captiveDamaged 0.5s ease !important; }
@keyframes captiveDamaged {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-3deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.dmg.dmg-poison { color: #e9d4ff; text-shadow: 2px 2px 0 #5b1a8f, 0 0 10px rgba(190, 120, 255, 0.8); }

/* 毒のまわり具合（1→2段階）で、色と震えが強くなる */
.sprite.captive[data-poison="1"] .char-img {
  filter: grayscale(0.25) brightness(0.8) sepia(0.2) hue-rotate(40deg) drop-shadow(0 0 10px rgba(150, 50, 230, 0.8));
  animation-duration: 1.4s;
}
.sprite.captive[data-poison="2"] .char-img {
  filter: grayscale(0.35) brightness(0.72) sepia(0.35) hue-rotate(70deg) saturate(1.3) drop-shadow(0 0 14px rgba(160, 40, 240, 0.95));
  animation-duration: 0.9s;
}
/* 村人の元気（♥3つ）。頭の上に出す */
.sprite.captive .captive-hp {
  position: absolute; top: -1.2em; left: 50%; transform: translateX(-50%);
  font-size: calc(13px * var(--font-scale)); line-height: 1; letter-spacing: 1px; white-space: nowrap;
  color: #ff6b8a; text-shadow: 0 0 3px #000, 0 1px 0 #000;
  pointer-events: none; z-index: 3;
}
/* 毒の泡（毒がまわっているときだけ、紫の泡が立ちのぼる） */
.sprite.captive .poison-fx {
  position: absolute; left: 50%; bottom: 30%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2;
  background: rgba(190, 110, 255, 0.85);
  box-shadow: -16px 6px 0 -1px rgba(170, 90, 240, 0.8), 14px 2px 0 -2px rgba(200, 130, 255, 0.8), 4px 14px 0 -1px rgba(160, 80, 230, 0.7);
}
.sprite.captive[data-poison="1"] .poison-fx { animation: poisonBubbles 2.2s ease-in infinite; }
.sprite.captive[data-poison="2"] .poison-fx { animation: poisonBubbles 1.3s ease-in infinite; }
@keyframes poisonBubbles {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translateY(-46px) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sprite.captive .poison-fx { animation: none !important; opacity: 0.7; }
}

/* ===== 装備編 制覇（第7章）：そろえた装備が順に光る ===== */
.equip-complete .eq.got { animation: eqShine 1.6s ease-in-out infinite; }
.equip-complete .eq.got:nth-child(2) { animation-delay: 0.15s; }
.equip-complete .eq.got:nth-child(3) { animation-delay: 0.3s; }
.equip-complete .eq.got:nth-child(4) { animation-delay: 0.45s; }
.equip-complete .eq.got:nth-child(5) { animation-delay: 0.6s; }
.equip-complete .eq.got:nth-child(6) { animation-delay: 0.75s; }
@keyframes eqShine {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 63, 0); }
  50%      { box-shadow: 0 0 16px rgba(255, 210, 63, 0.85); }
}
@media (prefers-reduced-motion: reduce) { .equip-complete .eq.got { animation: none; box-shadow: 0 0 10px rgba(255, 210, 63, 0.7); } }

/* ===== 複数の敵（第8章の家計の四天王） =====
   敵側を「上の段に2体・下の段に2体（親玉は右下で少し大きく）」の格子にし、捕らわれた村人は右端に置く。 */
.battle-formation .side-left.multi-enemy {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  align-items: end;
  justify-items: center;
  column-gap: clamp(0px, 0.6vw, 8px);
  row-gap: 2px;
}
.battle-formation .side-left.multi-enemy .sprite.enemy:nth-child(1) { grid-area: 1 / 1; }
.battle-formation .side-left.multi-enemy .sprite.enemy:nth-child(2) { grid-area: 1 / 2; }
.battle-formation .side-left.multi-enemy .sprite.enemy:nth-child(3) { grid-area: 2 / 1; }
.battle-formation .side-left.multi-enemy .sprite.enemy:nth-child(4) { grid-area: 2 / 2; }
.battle-formation .side-left.multi-enemy .captive,
.battle-formation .side-left.multi-enemy .rescued { grid-area: 2 / 3; }
.battle-formation .side-left.multi-enemy .sprite.enemy .char-img { height: clamp(64px, 14vh, 112px); }
.battle-formation .side-left.multi-enemy .sprite.enemy.boss .char-img { height: clamp(74px, 16.5vh, 130px); }
@media (max-width: 767px) {
  #screen.battle-scene .battle-formation .side-left.multi-enemy .sprite.enemy .char-img { height: min(clamp(58px, 10vh, 84px), calc(32cqh - 22px)); }
  #screen.battle-scene .battle-formation .side-left.multi-enemy .sprite.enemy.boss .char-img { height: min(clamp(66px, 11.5vh, 96px), calc(36cqh - 22px)); }
  #screen.battle-scene .battle-formation .side-left.multi-enemy { max-width: 62%; }
}
@media (min-width: 768px) {
  .battle-formation .side-left.multi-enemy { max-width: 56%; }
  .battle-formation .side-left.multi-enemy .sprite.enemy .char-img { height: min(42cqh, 210px); max-width: 17vw; }
  .battle-formation .side-left.multi-enemy .sprite.enemy.boss .char-img { height: min(50cqh, 250px); max-width: 20vw; }
}
.side-left.multi-enemy .sprite.enemy .name { font-size: calc(11px * var(--font-scale)); }

/* 影（正体不明）の敵：真っ黒なシルエットに紫のにじみ。正体が分かると色が戻る */
.sprite.enemy.unknown .char-img { filter: brightness(0) drop-shadow(0 0 10px rgba(150, 60, 230, 0.75)) !important; }
.sprite.enemy.unknown .name { background: rgba(20, 0, 40, 0.85); letter-spacing: 2px; }
.sprite.enemy.revealing .char-img { animation: revealFlash 0.9s ease; }
@keyframes revealFlash {
  0%   { filter: brightness(0) drop-shadow(0 0 10px rgba(150, 60, 230, 0.75)); }
  45%  { filter: brightness(2.2) drop-shadow(0 0 22px rgba(255, 240, 160, 0.95)); }
  100% { filter: none; }
}

/* ===== 図解（支出の4マス） ===== */
#diagram-screen { justify-content: center; z-index: 45; } /* 冒険の書（40）の上に出す */
.diagram-panel { width: min(100%, 760px); overflow-y: auto; }
.dg-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 6px;
}
.dg-corner { min-width: 3.2em; }
.dg-col, .dg-row {
  font-weight: bold; color: var(--accent);
  font-size: calc(13px * var(--font-scale));
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 4px;
}
.dg-row { writing-mode: horizontal-tb; }
.dg-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(8, 16, 48, 0.55); border: 2px solid #4a6fd0; border-radius: 10px;
  padding: 6px; text-align: center;
}
.dg-cell img { width: clamp(56px, 12vw, 104px); height: auto; }
.dg-name { font-weight: bold; font-size: calc(14px * var(--font-scale)); }
.dg-ex { font-size: calc(11.5px * var(--font-scale)); line-height: 1.45; opacity: 0.9; }
.dg-foot { color: #ffe9a8; }

/* 図解：年表型（第9章「人生の地図」） */
.dg-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dg-age {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 10px 4px; border-radius: 10px; border: 2px solid #4a6fd0; background: rgba(8, 16, 48, 0.55);
}
.dg-age.tame { border-color: #6fd08a; background: rgba(40, 120, 70, 0.35); }
.dg-age.kakari { border-color: #f0a050; background: rgba(150, 80, 20, 0.35); }
.dg-age-label { font-weight: bold; font-size: calc(15px * var(--font-scale)); }
.dg-kind { font-weight: bold; font-size: calc(13px * var(--font-scale)); color: #ffe9a8; }
.dg-note { font-size: calc(12.5px * var(--font-scale)); opacity: 0.85; }
@media (max-width: 520px) { .dg-timeline { grid-template-columns: 1fr; } .dg-age { flex-direction: row; justify-content: space-between; padding: 6px 10px; } }

/* ===== 章のツリー：クリア画面の「次に遊べる章」・章を選ぶ・冒険の書から章へ ===== */
.end-actions { flex-direction: column; align-items: center; }
.end-actions .next-chapter-btn { min-width: min(100%, 420px); }
.new-badge {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  background: #ff5a7a; color: #fff; font-size: calc(12px * var(--font-scale)); vertical-align: middle;
}
.overlay .chapter-row.open { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.35); }
.overlay .chapter-row.open .chapter-clear { color: var(--accent); }
.overlay .chapter-row.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.8); }
.overlay .chapter-row.locked .chapter-clear { color: #b8c2e0; }
.hw-go, .hw-lock { display: block; margin-top: 4px; font-size: calc(12px * var(--font-scale)); }
.overlay button.hw-go {
  padding: 3px 12px; border-width: 2px; border-radius: 999px;
  background: var(--accent); color: #2a1a00; font-weight: bold; cursor: pointer;
}
.hw-lock { color: #b8c2e0; opacity: 0.85; }
@media (max-width: 767px) { .overlay .chapter-row.open .chapter-clear, .overlay .chapter-row.locked .chapter-clear { display: inline; font-size: calc(11px * var(--font-scale)); } }
.overlay button.hw-go {
  display: inline-block; width: auto; font-size: calc(12px * var(--font-scale)); line-height: 1.4;
  padding: 2px 12px; margin-top: 4px;
}

/* 冒険の書：章ごとの見出し（案1） */
.book-list .hw-sec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 4px 4px 6px; border-bottom: 2px solid #4a6fd0;
  position: sticky; top: 0; z-index: 1; background: #12296e;
}
.book-list .hw-sec:first-child { margin-top: 0; }
.hw-sec-title { font-weight: bold; color: var(--accent); font-size: calc(14px * var(--font-scale)); line-height: 1.4; }
.hw-sec .hw-go, .hw-sec .hw-lock { margin-top: 0; flex: 0 0 auto; }
.hw-sec .hw-lock { font-size: calc(11px * var(--font-scale)); text-align: right; max-width: 48%; }
.hw-sec.locked .hw-sec-title, .hw-sec.soon .hw-sec-title { color: #b8c2e0; }

/* 冒険の書の章見出し：相談者の顔・名前・テーマ（「章を選ぶ」をまとめた） */
.book-list .hw-sec { justify-content: flex-start; }
.hw-sec-face { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.hw-sec-face.blank { border-radius: 50%; background: rgba(184, 194, 224, 0.15); }
.hw-sec-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hw-sec-sub { font-size: calc(11.5px * var(--font-scale)); color: #d8e4ff; line-height: 1.4; }
.hw-sec.locked .hw-sec-face, .hw-sec.soon .hw-sec-face { filter: grayscale(1); opacity: 0.6; }
.hw-sec-body { text-align: left; align-items: flex-start; }

/* 図解：2列のリスト型（第10章「資産と負債」） */
.dg-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dg-list { border-radius: 10px; border: 2px solid #4a6fd0; padding: 8px 10px; text-align: left; }
.dg-list.tame { border-color: #6fd08a; background: rgba(40, 120, 70, 0.35); }
.dg-list.kakari { border-color: #f0a050; background: rgba(150, 80, 20, 0.35); }
.dg-list-head { font-weight: bold; color: #ffe9a8; font-size: calc(14px * var(--font-scale)); margin-bottom: 4px; }
.dg-list ul { margin: 0; padding-left: 1.2em; font-size: calc(13px * var(--font-scale)); line-height: 1.6; }
@media (max-width: 520px) { .dg-lists { grid-template-columns: 1fr; } }