/* story.css — 会話画面・置き手紙・脳内変換演出 */

#screen-story{padding:0}
.stage{position:relative;flex:1;min-height:0;overflow:hidden}

/* ---------- 背景（CSSで描く） ---------- */
.stage-bg{
  position:absolute;inset:0;
  transition:background .6s ease, filter .6s ease;
  background:#222a48;
  /* 背景の絵。まだ無いものは、下に重ねたグラデーションがそのまま見える */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* 試練の部屋は、立ち絵を前に出したいので背景を薄くする。
   ぼかさずに色とコントラストだけ抜くと、絵の細部は残ったままキャラが前に出る */
.stage-bg[class*="bg-room-"]{filter:saturate(.45) brightness(.8) contrast(.85)}
.stage-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0,0,0,.45) 100%);
}
/* AIらぼ：明るい日常 */
.bg-lab{background-image:url(../assets/bg/lab.jpg?v=20260805),linear-gradient(#ffe9b5 0%,#ffd98f 45%,#e9b877 100%)}
.bg-lab-quiet{background-image:url(../assets/bg/lab_quiet.jpg?v=20260805),linear-gradient(#9fb0d8 0%,#7d8cbb 50%,#5b6591 100%)}
/* 道中 */
.bg-road{background-image:url(../assets/bg/road.jpg?v=20260805),linear-gradient(#8fc6e8 0%,#bfe0c8 55%,#6f9c5c 100%)}
/* 城門 */
.bg-gate{background-image:url(../assets/bg/gate.jpg?v=20260805),linear-gradient(#3d4a76 0%,#5a4a63 55%,#2c2536 100%)}
/* 廊下 */
.bg-hall{background-image:url(../assets/bg/hall.jpg?v=20260805),linear-gradient(#4a3f52 0%,#33293c 60%,#1e1826 100%)}
/* 各試練の間 */
.bg-room-oto{background-image:url(../assets/bg/room_oto.jpg?v=20260805),linear-gradient(#ffd9e6 0%,#f4b6cd 55%,#c98aa5 100%)}
.bg-room-uka{background-image:url(../assets/bg/room_uka.jpg?v=20260805),linear-gradient(#ffb677 0%,#e2702f 55%,#8f3b16 100%)}
.bg-room-nemu{background-image:url(../assets/bg/room_nemu.jpg?v=20260805),linear-gradient(#c8a6ea 0%,#8e5cc4 55%,#4b2b72 100%)}
.bg-room-oen{background-image:url(../assets/bg/room_oen.jpg?v=20260805),linear-gradient(#bfe0a8 0%,#79b06a 55%,#3d6337 100%)}
.bg-room-izuna{background-image:url(../assets/bg/room_izuna.jpg?v=20260805),linear-gradient(#f3d9d5 0%,#cf8b86 55%,#7c3c3c 100%)}
.bg-room-shaoran{background-image:url(../assets/bg/room_shaoran.jpg?v=20260805),linear-gradient(#ffe89a 0%,#e8b229 55%,#8f6a12 100%)}
.bg-room-konga{background-image:url(../assets/bg/room_konga.jpg?v=20260805),linear-gradient(#cfd9a0 0%,#8b9a45 55%,#4a5320 100%)}
.bg-room-ganzi{background-image:url(../assets/bg/room_ganzi.jpg?v=20260805),linear-gradient(#8a5b73 0%,#5a2b45 55%,#2a1122 100%)}
/* 最奥の扉 */
.bg-door{background-image:url(../assets/bg/door.jpg?v=20260805),linear-gradient(#3a2b3f 0%,#1d1424 60%,#0b070f 100%)}
/* 最奥の部屋 */
.bg-inner{background-image:url(../assets/bg/inner.jpg?v=20260805),linear-gradient(#fff0cd 0%,#ffd9a0 50%,#e0ab6f 100%)}

/* ---------- 立ち絵 ---------- */
.stage-chara{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:100%;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.stage-chara img{
  height:70%;max-height:300px;max-width:78vw;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
  animation:charaIn .32s ease-out;
}
/* ぬし以外は縦長でほっそりしているので、3割ほど大きく出してつり合いをとる */
.stage-chara img.chara-slim{height:91%;max-height:390px;max-width:88vw}
@keyframes charaIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ---------- 会話ウィンドウ ---------- */
.dialogue{
  position:relative;flex:0 0 auto;
  min-height:30%;
  margin:0 10px 10px;
  background:linear-gradient(rgba(22,26,48,.94),rgba(14,17,34,.96));
  border:2px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:16px 18px 22px;
  color:var(--paper);
  box-shadow:0 -6px 24px rgba(0,0,0,.4);
  cursor:pointer;
}
.dialogue-name{
  position:absolute;top:-.85em;left:14px;
  background:var(--gold);color:#2a2110;
  font-weight:800;font-size:.85rem;letter-spacing:.06em;
  padding:.2em .9em;border-radius:999px;
  border:2px solid #8b6d22;
}
.dialogue-name:empty{display:none}
.dialogue-text{
  font-size:1.02rem;line-height:1.85;
  min-height:5.5em;white-space:pre-wrap;word-break:auto-phrase;
}
.dialogue-text.narration{color:#cfd6f0;font-style:normal}
.dialogue-next{
  position:absolute;right:14px;bottom:8px;
  color:var(--gold);font-size:.9rem;
  animation:blink 1s steps(2,start) infinite;
  opacity:0;
}
.dialogue-next.is-show{opacity:1}
@keyframes blink{50%{opacity:.15}}

/* ---------- 脳内変換 ---------- */
.brain-overlay{
  position:absolute;inset:0;z-index:20;
  display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%, rgba(90,10,10,.9), rgba(0,0,0,.97));
  padding:24px;
}
.brain-overlay.is-open{display:flex;animation:brainIn .18s ease-out}
@keyframes brainIn{from{opacity:0}to{opacity:1}}
.brain-overlay p{
  color:#ff5b4d;font-size:clamp(1.1rem,5vw,1.6rem);font-weight:900;
  text-align:center;line-height:1.6;letter-spacing:.05em;
  text-shadow:0 0 18px rgba(255,60,40,.8), 0 3px 0 #300;
  animation:brainPulse .5s ease-out;
}
@keyframes brainPulse{
  0%{transform:scale(1.35);opacity:0}
  60%{transform:scale(.97);opacity:1}
  100%{transform:scale(1)}
}
.brain-overlay::before{
  content:"ぬしの脳内";
  position:absolute;top:16%;left:50%;transform:translateX(-50%);
  color:#ff9b8f;font-size:.75rem;letter-spacing:.4em;text-indent:.4em;
}

/* 画面ゆれ */
.shake{animation:shake .42s}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)}
  40%{transform:translate(5px,-4px)}
  60%{transform:translate(-4px,-2px)}
  80%{transform:translate(3px,4px)}
}

/* ---------- 置き手紙 ---------- */
#screen-letter{background:radial-gradient(120% 80% at 50% 0%,#2a2f52,#0e1120)}
.letter-wrap{
  margin:auto;padding:20px;width:100%;max-width:420px;text-align:center;
  max-height:100%;overflow-y:auto;
}
.letter{
  position:relative;
  background:linear-gradient(#fffdf2,#f3e9cf);
  color:#2b2617;
  border-radius:4px;
  padding:28px 24px;
  box-shadow:var(--shadow);
  transform:rotate(-1.2deg);
  animation:letterIn .5s ease-out;
  margin-bottom:22px;
}
@keyframes letterIn{
  from{opacity:0;transform:rotate(-8deg) translateY(30px) scale(.9)}
  to{opacity:1;transform:rotate(-1.2deg)}
}
.letter pre{
  margin:0;font-family:inherit;font-size:1.02rem;line-height:2.05;
  white-space:pre-wrap;text-align:left;
}
.letter::before{
  content:"";position:absolute;inset:8px;border:1px dashed #cbb98c;border-radius:2px;pointer-events:none;
}
.letter-mark{
  position:absolute;right:10px;bottom:8px;width:36px;height:36px;opacity:.55;
  background:
    linear-gradient(45deg,transparent 46%,#8c7a4d 46%,#8c7a4d 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,#8c7a4d 46%,#8c7a4d 54%,transparent 54%);
}
#screen-letter .btn{width:100%;max-width:280px}