/* =========================================================
   おはなし（ADV風の会話パート）
   - 背景は #parallax-bg をそのまま透かして見せるので、ここでは敷かない。
   - JS(src/game/battle/story.js) は class の付け外しと
     img.src / textContent しか触らない（CSPが style-src 'self' のため）。
   ========================================================= */

#story-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
  max-width: 780px;
  min-height: 74vh;
  min-height: 74dvh;
  padding-bottom: var(--space-2);
  cursor: pointer; /* どこを押しても進む */
}

/* ---------- 立ち絵のステージ ---------- */
.story-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  flex: 1;
  width: 100%;
  min-height: 0;
}

.story-char {
  max-height: 38vh;
  max-height: 38dvh;
  max-width: 42%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(90, 45, 10, 0.4));
  /* 話していないあいだは沈める。喋っている側だけ前に出す＝ADVの定番 */
  opacity: 0.55;
  transform: scale(0.9) translateY(6px);
  transition: opacity var(--t), transform var(--t), filter var(--t);
}

.story-char.is-speaking {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* まだ一度も登場していない側は場所だけ空けておく */
.story-char.is-empty {
  visibility: hidden;
}

.story-char--right {
  transform: scale(0.9) translateY(6px) scaleX(-1); /* 右側は内(左)を向かせる */
}

.story-char--right.is-speaking {
  transform: scale(1) translateY(0) scaleX(-1);
}

/* ---------- セリフ枠 ---------- */
/* ★幅は必ず 100% に固定すること。
   指定しないと親(flex column / align-items:center)の中で内容幅になり、
   1文字ずつ表示するたびに枠が横に伸びて非常に読みにくくなる。 */
.story-box {
  position: relative;
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--r-lg);
  background: rgba(255, 250, 244, 0.94);
  border: 2px solid var(--primary-soft);
  box-shadow: var(--shadow-lg);
}

.story-name {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 3px 16px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: clamp(0.9rem, 0.78rem + 0.4vw, 1.1rem);
  font-weight: var(--fw-black);
  box-shadow: var(--shadow-sm);
}

/* ナレーションのときは名前札を出さない */
#story-screen.is-narration .story-name {
  display: none;
}

.story-text {
  margin: 0;
  /* ★セリフの最大行数ぶんを先に確保しておく。実測ぴったりだと、
     セリフを少し長くしただけで打鍵中に枠が伸びるので余裕を持たせる。
     min-height は em 指定なので、下の font-size を変えても比率は保たれる。 */
  min-height: 4.2em;
  /* ウィンドウ幅に追従して大きくなる */
  font-size: clamp(1.1rem, 0.85rem + 0.75vw, 1.5rem);
  line-height: 1.7;
  color: var(--text);
  font-weight: var(--fw-bold);
}

#story-screen.is-narration .story-text {
  color: var(--text-soft);
}

/* 続きがあることを示す▼。文字送り中は出さない */
.story-next {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.9rem;
  color: var(--primary-strong);
  animation: story-next-bob 1s ease-in-out infinite;
}

#story-screen.is-typing .story-next,
#story-screen.is-ended .story-next {
  visibility: hidden;
}

@keyframes story-next-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

.story-progress {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---------- 操作ボタン ---------- */
.story-controls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* 読み終わるまでは「とばす」、読み終わったら分岐ボタンに差し替える */
#story-screen.is-ended .story-controls--during {
  display: none;
}

.story-controls--end {
  display: none;
}

/* 読み終わったあとの難易度セレクター。
   タイトル画面にしか無いと「ふつう」で始まったことに気づけないので、
   ここでも選べるようにしている（中身のスタイルは battle.css の
   .difficulty-selector をそのまま使う）。 */
.story-difficulty {
  display: none;
  justify-content: center;
  /* ★width:100% は必須。#story-screen は align-items:center なので、
     指定しないと中身幅（≒220px）まで縮み、中の .difficulty-selector の
     width:100% が効かずボタンが潰れて「むずかしい」が改行する。 */
  width: 100%;
}

#story-screen.is-ended .story-difficulty {
  display: flex;
}

/* おはなし側は横に余裕があるので、タイトル画面より広く使う */
.story-difficulty .difficulty-selector {
  max-width: 460px;
}

#story-screen.is-ended .story-controls--end {
  display: flex;
}

@media (max-width: 560px) {
  #story-screen {
    min-height: 70vh;
    min-height: 70dvh;
  }

  .story-char {
    max-height: 30vh;
    max-height: 30dvh;
    max-width: 46%;
  }

  .story-text {
    /* 狭いぶん行数が増える（実測4.8em）ので、こちらも余裕を上乗せ */
    min-height: 5.4em;
  }
}