:root{
  --vh: 1vh;
  --loaderFadeMs: 520ms;
  --dimOpacity: 0.40;
  --panelBorder: rgba(255,255,255,0.3);
  --text: rgba(255,255,255,0.94);

  /* 右→中央 / 中央→左 の速さ統一（ゆっくり） */
  --loadingMoveMs: 760ms;
  --loadingMoveVw: 60vw;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body{
  touch-action: none;
  overscroll-behavior: none;
}

/* =========================
   Loader
========================= */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;

  background: linear-gradient(
    to bottom,
    rgb(154, 210, 250) 0%,
    rgb(220, 241, 255) 20%,
    rgba(255, 255, 255, 1) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 1) 60%,
    rgb(255, 216, 222) 80%,
    rgb(255, 169, 182) 100%
  );
}

@keyframes loaderGrad{
  0%   { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

.loader-noise{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.0) 2px,
      rgba(0,0,0,0.10) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.0) 0px,
      rgba(255,255,255,0.0) 3px,
      rgba(255,255,255,0.10) 4px
    );
}

.loader.is-leaving{
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
}

.loader-inner{
  width: min(84vw, 520px);
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 26px;
}

.logo-wrap{
  position: relative;
  width: min(62vw, 320px);
  display: grid;
  place-items: center;
}

.loader-logo{
  width: 100%;
  height: auto;
  transform: scale(0.80);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18));
  animation: logoZoom 2s ease-out forwards;
}

@keyframes logoZoom{
  0%   { transform: scale(0.80); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1.00); }
}

.logo-wrap::after{
  content:"";
  position:absolute;
  inset: -20% -35%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: translateX(-40%);
  opacity: 0.85;
  animation: shine 1.65s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shine{
  0%   { transform: translateX(-55%); opacity: 0.0; }
  35%  { opacity: 0.70; }
  60%  { opacity: 0.35; }
  100% { transform: translateX(55%); opacity: 0.0; }
}

.loader-text{
  font-size: clamp(15px, 5vw, 22px);

  letter-spacing: 0.05em;
  color: rgba(252, 65, 65, 0.9);
  user-select: none;
  white-space: nowrap;
  font-style: italic;
  text-align: center;
}

.loading-line{
  display: inline-block;
  will-change: transform, opacity, filter;
}

.loading-line.is-exiting{
  animation: lineExit var(--loadingMoveMs) cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes lineExit{
  0%   { opacity: 1; transform: translateX(0); filter: blur(0px); }
  100% { opacity: 0; transform: translateX(calc(var(--loadingMoveVw) * -1)); filter: blur(1.2px); }
}

.loading-letter{
  display: inline-block;
  opacity: 0;
  transform: translateX(var(--loadingMoveVw));
  filter: blur(0.4px);
  animation: letterIn var(--loadingMoveMs) cubic-bezier(.2,.9,.2,1) forwards;
  will-change: transform, opacity, filter;
  font-weight: 500;
}

@keyframes letterIn{
  0%   { opacity: 0; transform: translateX(var(--loadingMoveVw)); filter: blur(1.4px); }
  100% { opacity: 1; transform: translateX(0);                   filter: blur(0px); }
}

/* =========================
   Scene
========================= */
.scene{
  position: fixed;
  inset: 0;
  width: 100%;
  height: calc(var(--vh) * 100);
  overflow: hidden;

  background: #000;
  display: flex;
  justify-content: center;
  align-items: stretch;

  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

/* 中央に見せたい領域 */
.scene-inner{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  max-width: 500px;
}

/* 画面が広いときだけ、中央固定 + 両端黒帯 */
@media (min-width: 670px){
  .scene-inner{
    width: min(740px, 100%);
  }
}

.scene.is-active{
  opacity: 1;
  pointer-events: auto;
}

.scene-bg{
  position: absolute;
  inset: 0;
  background-image: url("../image/background/in_car.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* transform: scale(1.06);
  animation: bgPan 9.5s ease-in-out infinite alternate; */
}

@keyframes bgPan{
  0%   { transform: scale(1.06) translate3d(0px, 0px, 0); }
  100% { transform: scale(1.10) translate3d(-10px, 6px, 0); }
}

.scene-dim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--dimOpacity));
  pointer-events: none;
}
.scene.is-opening .scene-dim{
  opacity: 0;
}


/* 場面切り替え用の黒フェード */
.scene-blackout{
  position: absolute;
  inset: 0;
  z-index: 9;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.scene-blackout.is-on{ opacity: 1; }

/* =========================
   BGM button（inner 右上）
========================= */
.bgm-btn{
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 40;

  width: 44px;
  height: 44px;
  color: white;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.26);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);

  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover:hover){
  .bgm-btn:hover{ background: rgba(0,0,0,0.32); }
}

.bgm-btn:active{
  transform: translateY(1px) scale(0.98);
}

.bgm-icon{
  width: 26px;
  height: 26px;
  display: block;
}

.bgm-icon-off{ display: none; }
.bgm-btn.is-off .bgm-icon-on{ display: none; }
.bgm-btn.is-off .bgm-icon-off{ display: block; }

/* =========================
   BGM volume popover
========================= */
.bgm-pop{
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 52px);
  right: max(12px, env(safe-area-inset-right));
  z-index: 39;

  width: min(240px, calc(100vw - 24px));
  padding: 12px 12px 10px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,12,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.bgm-pop.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bgm-pop-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bgm-pop-title{
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(255,255,255,0.72);
}

.bgm-pop-val{
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.92);
}

.bgm-range{
  width: 100%;
  height: 22px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.bgm-range::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}

.bgm-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(0,0,0,0.25);
  margin-top: -6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

/* Firefox */
.bgm-range::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}
.bgm-range::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(0,0,0,0.25);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}




/* story-image（画面上部） */
.story-image{
  position: absolute;
  left: 50%;
  top: 15vh;
   transform: translateX(-50%);
  width: min(92%, 600px);
  z-index: 2;

  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.story-image.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}
.story-image img{
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 18px 45px rgba(0,0,0,0.42);

  transform: scale(0.6);
  transform-origin: center;
  transition: none;  
}

.story-image.is-zoom img{
  animation: storyZoomIn 1100ms ease forwards;
}
.story-image.is-reset img{
  transition: none !important;
}


@keyframes storyZoomIn{
  from { transform: scale(0.8); }
  to   { transform: scale(1); }
}



/* =========================
   Narration
========================= */
.narration-wrap{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(110px, calc(env(safe-area-inset-bottom) + 110px))
    max(18px, env(safe-area-inset-left));
}

.narration-ui{
  position: relative;
  display: inline-block; /* panelのサイズに合わせる */

  width: min(92%, 820px);
}

.narration-next{
  position: absolute;
  right: 0;  /* “ボックスの外”に少し出す */
  bottom: -8vh;

  width: 50px;
  height: 50px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: linear-gradient(to bottom, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid var(--panelBorder);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}



.narration-next.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.narration-next:active{
  transform: translateY(0) scale(0.98);
}


.narration-panel{
  width: 100%;
  padding: clamp(14px, 3.6vw, 22px) clamp(16px, 4vw, 26px);
  border-radius: 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid var(--panelBorder);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  display: flex;
  align-items: flex-start;
  gap: 6px;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.narration-panel.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.narration{
  margin: 0;
  color: var(--text);
  font-size: clamp(15px, 2vh, 22px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-shadow: 0 10px 22px rgba(0,0,0,0.55);
  font-family: 'Times New Roman', Times, serif;
  white-space: pre-wrap;
}

.narration-panel.is-visible .narration::after{
  content: "";
  display: inline-block;
  width: 5px;
  height: 1.2em;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0);
  transform: translateY(0.18em);
  animation: caretBlink 0.9s ease-in-out infinite;
}


@keyframes caretBlink{
  0%, 40% { opacity: 1; }
  55%,100% { opacity: 0.08; }
}

/* 強調（例：「……爆弾？」） */
.narration-panel.is-emph .narration{
  font-weight: 1000;
  /* font-size: clamp(18px, 5vw, 30px); */
  color: rgb(255, 63, 63);
  letter-spacing: 0.04em;
}


/* dialogue mode: place panel lower & keep space for next button */
.narration-wrap.is-dialogue{
  place-items: end center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(110px, calc(env(safe-area-inset-bottom) + 110px))
    max(18px, env(safe-area-inset-left));
}

/* speaker icon (outside top-left) */
.speaker-icon{
  position: absolute;
  left: 0;
  top: -8vh;

  width: 54px;
  height: 54px;
  border-radius: 999px;
  overflow: hidden;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);

  opacity: 0;
  transition: opacity 200ms ease;
  transform: none;  
  pointer-events: none;
  z-index: 2;
}
.speaker-icon.is-visible{
  opacity: 1;
  transform: none;
}
.speaker-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  opacity: 0;
  transition: opacity 160ms ease;
}
.speaker-icon.is-loaded img{
  opacity: 1;
}




/* ===== Opening / Cast Intro ===== */

.scene-bg.is-opening-pan{
  /* 背景は固定のまま、レイヤー自体を上下に動かして“画角が上がる”を作る */
  transform: scale(1.18) translate3d(0, 10%, 0);  /* 最初：下半分寄り */
  animation: openingPan 8000ms cubic-bezier(.17,.84,.44,1) forwards;
  will-change: transform;
}

@keyframes openingPan{
  0%   { transform: scale(1.18) translate3d(0, 10%, 0); }
  30%   { transform: scale(1.18) translate3d(0, 10%, 0); }
  60%   { transform: scale(1.18) translate3d(0, 5%, 0); }
  100% { transform: scale(1.18) translate3d(0, -12%, 0); } /* 最終：上半分寄りで停止 */
}



/* ロゴ */
.opening-logo{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 30;
  pointer-events: none;
}

.opening-logo img{
  width: min(100%, 680px); 
  height: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.58);
  filter: drop-shadow(0 26px 60px rgba(0,0,0,0.55));
  transition: opacity 700ms ease;
}

.opening-logo.is-show img{
  opacity: 1;
  animation: openingLogoIn 5000ms cubic-bezier(.12,.92,.2,1) forwards; /* ゆっくり */
}

@keyframes openingLogoIn{
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  60%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* キャラ紹介（画像固定＋文章を上に重ねる） */
.cast-wrap{
  position: absolute;
  inset: 0;
  z-index: 28;
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
}

.cast-wrap.is-show{
  opacity: 1;
}

.cast-wrap.is-card .cast-card{
  opacity: 1;
  transform: translateY(0);
}

.cast-portrait{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cast-portrait img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: none;                  /* 動かさない */
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.55));
  display: block;
}


/* “かっこいい別デザイン” のテキストカード（ガラス風） */
.cast-card{
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;                 /* ★ストーリー枠と同じ幅 */
  margin: 0 auto;                         /* ★中央揃え */
  bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px));
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(
    to bottom,
    rgba(154, 210, 250, 0.4) 0%,
    rgba(220, 241, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 216, 222, 0.4) 80%,
    rgba(255, 169, 182, 0.4) 100%
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}


.cast-name{
  font-size: clamp(22px, 3.6vh, 34px);
  letter-spacing: 0.08em;
  font-weight: 800;
  font-family: 'Times New Roman', Times, serif;
  margin: 0 0 8px;
  color: rgba(0,0,0,0.96);
  text-shadow: 0 18px 35px rgba(0,0,0,0.6), 0 0 18px rgba(140,190,255,0.25);
}

.cast-desc{
  margin: 0;
  font-size: clamp(14px, 2.1vh, 18px);
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.90);
  text-shadow: 0 14px 28px rgba(0,0,0,0.6);
  font-family: 'Times New Roman', Times, serif;
}

/* =========================================================================== */


/* ===== FIX: Opening pan & no black bars ===== */

/* opening中も Next ボタンはストーリーと同じ位置（ボタン位置ズレ防止） */
.scene.is-opening .narration-ui{
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
}

.scene.is-opening .narration-next{
  right: 0;
  bottom: -8vh;
  z-index: 900;

  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(
    to bottom,
    rgba(154, 210, 250, 0.4) 0%,
    rgba(220, 241, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 216, 222, 0.4) 80%,
    rgba(255, 169, 182, 0.4) 100%
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
@media (min-width: 670px){
  .scene.is-opening .scene-inner{ width: 100%; }
}

/* openingパン：最初「下部」→最後「上部」 */
.scene-bg.is-opening-pan{
  background-position: center 100%;
  transform: scale(1.12);
  animation: openingPan 12000ms cubic-bezier(.17,.84,.44,1) forwards;
  will-change: background-position, transform;
}
@keyframes openingPan{
  0%   { background-position: center 100%; transform: scale(1.12); }
  100% { background-position: center 0%;   transform: scale(1.12); }
}


/* ===== Opening FIX (UIはinner内 / 背景だけ全画面) ===== */
/* opening中は背景だけ全画面に固定し、ロゴ/キャラ/Next は inner 内に収める */
.scene.is-opening .scene-bg,
.scene.is-opening .scene-dim{
  /* ★背景が .scene-inner の外に出ないように、inner内に収める */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


.scene.is-opening .scene-bg{ z-index: 0; }



@keyframes openingDimIn{
  0%, 70% { opacity: 0; }
  100%    { opacity: 1; }
}

/* opening中は inner を広げない（はみ出し防止） */
.scene.is-opening .scene-inner{
  width: 100%;
}




/* ===== PATCH: キャラ紹介カードの幅をストーリーのパネル幅と一致させる ===== */
.scene.is-opening .cast-card{
  left: 0;
  right: 0;

  /* narration-ui と同じ「(inner - 左右padding) の 92%」になるように計算 */
  width: min(
    calc(
      (100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right))) * 0.92
    ),
    820px
  );

  margin: 0 auto;
}

/* ===== PATCH: openingの背景が左右にはみ出さないようにする ===== */
.scene.is-opening .scene-inner{
  overflow: hidden;        /* ← openingPanのscale分をinner内でクリップ */
}

/* ===== PATCH: openingだけinner幅が広がってしまう設定が残ってたら無効化 ===== */
.scene.is-opening .scene-inner{
  max-width: 500px;        /* 通常の.scene-innerと同じに固定 */
  width: 100%;
}

/* ===== PATCH: キャラ紹介パネル幅をストーリーのパネル幅と完全一致 ===== */
.scene.is-opening .cast-card{
  left: 0;
  right: 0;
  width: min(92%, 820px);  /* ← storyの .narration-ui と同じ */
  margin: 0 auto;
}


/* =========================
   Puzzle overlay (iframe)
========================= */
.puzzle-overlay{
  position: absolute;
  inset: 0;
  z-index: 35;                 /* blackout(9)より上、bgm-btn(40)より下 */
  display: none;
  pointer-events: none;
}

.puzzle-overlay.is-open{
  display: block;
  pointer-events: auto;
}

/* うっすら暗くして“ゲームに入った感” */
.puzzle-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.puzzle-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  background: transparent;
}

/* =========================
   Sound choice gate
   ========================= */
.sound-gate{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:55;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.sound-gate.is-open{ display:flex; animation: gateFadeIn 240ms ease-out; }
@keyframes gateFadeIn{ from{opacity:0} to{opacity:1} }

.sound-gate-card{
  width:min(520px, 92%);
  border-radius:18px;
  padding:18px 16px 14px;
  border:1px solid rgba(255,255,255,.18);
  
  background: linear-gradient(
    to bottom,
    rgba(154, 210, 250, 0.4) 0%,
    rgba(220, 241, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 216, 222, 0.4) 80%,
    rgba(255, 169, 182, 0.4) 100%
  );
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  text-align:center;
  color: #fff;
}
.sound-gate-title{
  letter-spacing:.16em;
  font-size:12px;
  opacity:.86;
  margin-bottom:10px;
}
.sound-gate-msg{
  font-size:18px;
  font-weight:800;
  margin:0 0 14px;
}
.sound-gate-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:8px 0 12px;
}
.sound-gate-btn{
  flex:1;
  max-width:220px;
  border-radius:14px;
  padding:14px 12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(18,18,22,.78);
  color:#fff;
}
.sound-gate-btn.is-on{
  background: rgba(255,255,255,.4);
  border-color: rgba(255,255,255,.28);
}
.sound-gate-btn.is-off{
  background: rgba(0,0,0,.4);
}
.sound-gate-note{
  font-size:12px;
  opacity:.78;
  line-height:1.4;
}



/* ====== CLEAR ENDING ====== */
#storyImageWrap.is-zoomable { cursor: zoom-in; }
#storyImageWrap.is-zoomable #storyImage {
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  transform: translateZ(0);
}

.clear-panel {
  display: none;
  margin-top: 12px;
  padding: 14px 14px 12px;
  /* border-radius: 18px; */
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.clear-panel.is-on { display: block; }

.clear-panel__badge {
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 700;
  opacity: .92;
}

.clear-panel__hint {
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
}

.clear-panel__top {
  margin-top: 12px;
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  /* border-radius: 14px; */
  text-decoration: none;

  color: rgba(255,255,255,.96);
  font-weight: 700;
  letter-spacing: .08em;
  font-family: 'Times New Roman', Times, serif;

  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(160,120,255,.55), rgba(90,210,255,.35));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

.clear-panel__top::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  transform: rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity: .7;
  pointer-events:none;
}

.clear-panel__top:hover { filter: brightness(1.06); }
.clear-panel__top:active { transform: translateY(1px); }

/* ====== IMAGE MODAL ====== */
.img-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.img-modal.is-open{ display: flex; }

.img-modal__inner{
  position: relative;
  max-width: min(92vw, 860px);
  max-height: 86vh;
}

.img-modal__img{
  display: block;
  max-width: 100%;
  max-height: 86vh;
  /* border-radius: 18px; */
  box-shadow: 0 24px 90px rgba(0,0,0,.6);
}

.img-modal__close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,20,28,.75);
  color: rgba(255,255,255,.95);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}


/* ====== CLEAR ENDING：1画面に全部収める（スクロール無し前提） ====== */
.scene-inner.is-clear .narration-wrap,
.scene-inner.is-clear .narration-wrap.is-dialogue,
.scene-inner.is-clear .narration-wrap.is-narration{
  place-items: center;
  /* 110pxの“次へ予約スペース”をやめる（見切れ原因） */
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

/* クリア時は「箱感」を消して、画像＋ボタンだけにする */
.scene-inner.is-clear .narration-panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;

  /* ここは既存の縦並び指定があれば残す */
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* クリア時は本文いらない（高さ節約） */
.scene-inner.is-clear #speakerIconWrap{ display: none !important; }
.scene-inner.is-clear #narration{ display: none !important; }

/* クリア時：画像はabsolute運用をやめて、パネル内で自然配置 */
.scene-inner.is-clear .story-image{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(92%, 560px) !important;
  margin: 0 auto !important;
  pointer-events: auto !important;
}

/* 画像の高さを制限して、下のボタンが確実に入るようにする */
.scene-inner.is-clear .story-image img,
.scene-inner.is-clear #storyImage{
  /* max-height: 48svh; */
  height: auto;
  object-fit: contain;
}

/* クリアパネルも少し詰める（小さい画面での見切れ防止） */
/* クリアパネル（ボタンの親）も透明化して、ボタンだけ置く */
.scene-inner.is-clear .clear-panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;

  width: min(92%, 560px);
  margin-top: 10px;
}
.scene-inner.is-clear .clear-panel__top{
  margin-top: 0;
}