/* リベリア王国の冒険 ～貯める力編 オープニング～
   ドラクエ／FF 風 JRPG レイアウト
   - PC: 16:9 シネマティック・ステージ
   - スマホ: 縦長フル画面
   - メッセージ／コマンドはシーンに重なる 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 {
  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.04em;
}
.hud-btns { display: flex; gap: 8px; align-items: center; }
#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;
}

/* ===== 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: 16:9 シネマティック表示 */
@media (min-width: 768px) {
  #stage {
    align-items: center;
    justify-content: center;
    padding: 14px;
    background:
      radial-gradient(circle at 50% 30%, #0a1330, #02030a 75%);
  }
  #screen {
    flex: 0 0 auto;
    width: min(96vw, calc((100vh - 130px) * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    border: 3px solid #26356f;
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7), 0 0 0 6px #05060f;
  }
}

/* ===== 背景（レイヤー構成のシーン） ===== */
#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-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.6s ease; }
@keyframes encounterFlash {
  0% { opacity: 0; }
  10% { opacity: 0.9; }
  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;
}

/* 左右グループ（左＝相手／敵、右＝主人公／味方） */
.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;
}
/* 登場：左グループは左から、右グループは右から歩いてくる。
   登場の瞬間だけ本体を数回揺らし（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); }
}

/* 接地シャドウ（固定） */
.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;
}

/* 敵の立ち絵：脅威感のため、ごく控えめに ゆっくり呼吸する程度 */
.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: -6px; right: -6px;
  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); }

/* ===== バトル隊形（FF風・奥行きのある立体配置） =====
   左：敵（大きく手前）＋捕らわれたタクト。
   右：仲間4人を「奥（小・上・左寄り＝敵側）→手前（大・下・右寄り＝カメラ側）」の斜め隊列に。 */
#screen.battle-mode #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: -4%; }
.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  .char-img { height: clamp(118px, 29vh, 215px); }  /* 敵は大きく手前 */

/* 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: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; }

/* パーティ ステータス（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）バトル下段：パネルが重ならないよう積む。
   下から メッセージ → パーティ状態(2列) → コマンド。 */
@media (max-width: 767px) {
  /* 床ライン（#sprites の下端）をパネル群の上端にそろえ、キャラがUIに隠れないようにする */
  #screen.battle-mode #sprites { top: 7%; bottom: 49%; }
  /* メッセージ窓：低めに抑えて文字も小さく */
  #screen.battle-mode .rpg-window { min-height: 15%; bottom: 6px; padding: 10px 13px 11px; }
  #screen.battle-mode #text { font-size: calc(14px * var(--font-scale)); line-height: 1.6; }
  #screen.battle-mode #speaker { font-size: calc(12px * var(--font-scale)); padding: 3px 11px; }
  #screen.battle-mode #party-status {
    left: 8px; right: 8px; bottom: calc(15% + 10px); top: auto; width: auto;
    display: flex; flex-wrap: wrap; gap: 1px 12px; padding: 4px 8px;
  }
  #screen.battle-mode #party-status .status-row { flex: 1 1 40%; margin: 1px 0; gap: 5px; }
  #screen.battle-mode #party-status .status-row .nm { min-width: 4em; font-size: calc(11px * var(--font-scale)); }
  #screen.battle-mode #party-status .status-row .lv { font-size: calc(10px * var(--font-scale)); }
  /* コマンド窓：小さめ・右下に寄せる */
  #screen.battle-mode .cmd-window {
    left: auto; right: 8px; bottom: calc(15% + 10px + 46px); width: min(54%, 210px);
    padding: 5px 8px 7px;
  }
  #screen.battle-mode .cmd-window-title { font-size: calc(11px * var(--font-scale)); padding: 0 2px 4px; margin-bottom: 2px; }
  #screen.battle-mode .cmd-list li { margin: 1px 0; }
  #screen.battle-mode .cmd { font-size: calc(12.5px * var(--font-scale)); padding: 5px 7px; }
}

/* 被弾・撃破（本体に適用） */
.char-img.hurt { animation: hurt 0.42s linear !important; }
.char-img.pop  { animation: pop  0.6s ease forwards !important; }
/* 逆効果（間違った知識を吸収して敵が強がる：膨らんで緑に光る） */
.char-img.absorb { animation: absorbAnim 0.6s ease !important; }
@keyframes absorbAnim {
  0%   { transform: scale(1); filter: none; }
  40%  { transform: scale(1.18); filter: brightness(1.5) hue-rotate(80deg); }
  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); }
}
@keyframes pop {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  35%  { transform: scale(1.4) rotate(8deg); opacity: 1; filter: brightness(2.5); }
  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;
  background: linear-gradient(180deg, var(--win-bg2), var(--win-bg));
  border: 3px solid var(--win-border);
  border-radius: 12px;
  padding: 16px 18px 18px;
  min-height: 26%;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #3a4f9e, 0 8px 26px rgba(0,0,0,0.55);
}
#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);
}
#speaker:empty { display: none; }
#text {
  font-size: calc(20px * var(--font-scale));
  line-height: 2.0;
  white-space: pre-wrap;
}
/* ふりがな（ルビ） */
#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.jpg");
  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.06em;
  margin: 0 0 36px;
  color: var(--accent);
  text-shadow: 0 3px 0 #000, 0 0 26px rgba(255, 210, 63, 0.55);
}
.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.05em;
  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; }

/* ===== オプション画面 ===== */
.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;
}

#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;
}

/* ===== 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;
}
/* ===== メニュー / ステータス画面（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-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;
}
.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; }
.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-v { flex: 0 0 1.4em; 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 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; }

.hidden { display: none !important; }

/* ===== PC（768px以上）：16:9 表示。立ち絵は1列で人数に応じて縮小 ===== */
@media (min-width: 768px) {
  #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-mode #cost-bar { left: 16px; top: 14px; transform: none; width: min(40%, 360px); }
  #screen.battle-mode #sprites { top: 8%; bottom: 33%; padding: 0 3%; }
  /* 下段は1列に並べる：メッセージ(左) ｜ コマンド(中) ｜ パーティ状態(右) */
  #screen.battle-mode .rpg-window { left: 16px; right: auto; width: 46%; bottom: 16px; min-height: 25%; }
  #screen.battle-mode .cmd-window {
    left: 48.5%; right: auto; top: auto; bottom: 16px;
    width: min(23%, 250px);
  }
  #screen.battle-mode #party-status { right: 16px; bottom: 16px; width: min(26%, 300px); }
  #screen.battle-mode .cmd { font-size: calc(14px * var(--font-scale)); padding: 6px 8px; }

  .battle-formation .side-left  { align-self: flex-end; }
  .battle-formation .side-left  .char-img { height: clamp(150px, 33vh, 248px); }
  .battle-formation .side-left .captive .char-img { height: clamp(60px, 13vh, 100px); }
  .battle-formation .side-right { max-width: 46%; }
  .battle-formation .side-right .sprite:nth-child(1) .char-img { height: clamp(54px, 10.5vh, 88px); }
  .battle-formation .side-right .sprite:nth-child(2) .char-img { height: clamp(64px, 12.5vh, 102px); }
  .battle-formation .side-right .sprite:nth-child(3) .char-img { height: clamp(74px, 14.5vh, 118px); }
  .battle-formation .side-right .sprite:nth-child(4) .char-img { height: clamp(84px, 16.5vh, 134px); }
  .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)); }
}

/* ===== 小型スマホ（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 { animation: none !important; }
}