/* ===== Base ===== */
:root{
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --glass: rgba(14, 14, 20, .42);
  --glass2: rgba(18, 18, 28, .55);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.09);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
  --radius2: 28px;

  --ok: #ff3b30;   /* 赤 */
  --ng: #0a84ff;   /* 青 */
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-tap-highlight-color: transparent;

  /* 外側はスクロールさせない */
  overflow: hidden;
}

/* ===== Loading ===== */
.loading{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(
    to bottom,
    #f6e6b6 0%,
    #ffffff 45%,
    #f5c0b7 100%
  );
  z-index: 9999;
  transition: opacity .55s ease, transform .55s ease;
}
.loading.is-done{
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}
.loading__inner{
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 24px;
}
.loading__logo{
  width: min(220px, 54vw);
  height: auto;
  /* filter: drop-shadow(0 16px 30px rgba(0,0,0,.25)); */
  animation: zoomIn 2s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes zoomIn{
  0%{ transform: scale(.78); opacity: .0; }
  60%{ opacity: 1.1; }
  100%{ transform: scale(1); opacity: 1; }
}
.loading__text{
  display: flex;
  gap: .06em;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(20,20,20,.78);
  text-shadow: 0 8px 18px rgba(0,0,0,.10);
  user-select: none;
}
.loading__text span{
  display: inline-block;
  transform: translateY(-24px);
  opacity: 0;
  animation: drop .55s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes drop{ to{ transform: translateY(0); opacity: 1; } }

/* ===== Layout ===== */
.app.is-hidden{ display: none; }

.outer{
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #000;
}
.inner{
  width: min(560px, 100%);
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  overflow-y: auto; 
  position: relative;
  box-shadow: var(--shadow);
  background-color: #0b0b12;
  background-image: url("./image/background.webp");
  background-repeat: no-repeat;

  background-position: center top;
  background-size: auto 100%;     /* ✅ ここ：高さに引っ張られてズームしない */
  background-attachment: fixed;   /* 今まで通り“固定”したいなら残す */

  display: flex;
  flex-direction: column;
}

/* 背景画像 */
/* .inner::before{
  content:"";
  position: absolute;
  inset: 0;
  background: url("./image/background.jpg") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index: 0;
} */

/* ✅ 「ストーリー以外は薄い黒いらない」ので
   inner全体の黒オーバーレイ（前回の::after）を削除 */
.inner::after{ content:none; }

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  height: 20vh;                 /* ✅ さらに大きく */
  display: grid;
  place-items: center;
  padding: 15px 12px 10px;
}

.topbar__title{
  height: 18vh;                  /* ✅ さらに大きく */
  width: auto;
  max-width: 98%;
  /* filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); */
}


.content{
  position: relative;
  z-index: 2;
  padding: 16px 14px 44px;
  display: grid;
  gap: 18px;

  /* ここだけスクロール */
  overflow: visible;
  flex: none;
  max-height: none;
}

/* ===== Section reveal ===== */
.section{
  display: none;                 /* ✅ 追加：存在しない扱い */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.section.is-mounted{
  display: block;                /* ✅ 追加：表示解禁 */
}
.section.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* ===== Story Panel ===== */
.panel{
  position: relative;
  /* border-radius: var(--radius2); */
  /* ✅ ストーリーだけは“枠＆黒ガラス感” */
  background: linear-gradient(180deg, rgba(30,30,44,.55), rgba(12,12,18,.62));
  border: 1px solid var(--stroke);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}
.panel__inner{
  padding: 16px;
  display: grid;
  gap: 14px;
}
.panel__char{
  height: 240px;
  display: grid;
  place-items: center;
  /* border-radius: calc(var(--radius2) - 6px); */
  background: radial-gradient(700px 240px at 50% 10%, rgba(255,255,255,.10), transparent 55%);
  border: 1px solid var(--stroke2);
  overflow: hidden;
}
.panel__char img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.55));
}
.panel__speech{
  position: relative;
  /* border-radius: var(--radius); */
  padding: 16px 56px 18px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke2);
  backdrop-filter: blur(2px);
  min-height: 118px;
  display: grid;
  align-content: start;
}
.panel__speechText{
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.nextBtn{
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.nextBtn.is-ready{
  opacity: 1;
  transform: translateY(0);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ filter: drop-shadow(0 0 10px rgba(255,255,255,.25)); }
}
.nextBtn:active{ transform: translateY(1px) scale(.98); }
.nextBtn svg{ width: 18px; height: 18px; }

/* ===== Puzzle sections ===== */
.carousel{
  display: grid;
  gap: 10px;
}

/* スライド */
.carousel__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar{ display:none; }

.slide{
  scroll-snap-align: center;
  flex: 0 0 95%;
  max-width: 95%;
  transition: transform .35s cubic-bezier(.2,.9,.2,1), opacity .35s ease;
  transform: scale(.88);
  opacity: .70;
}
.slide.is-active{
  transform: scale(1);
  opacity: 1;
}

/* ✅ ストーリー以外は薄い黒いらない → cardを透明寄りに */
.card{
  /* border-radius: var(--radius2); */
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.card.no-border{
  border: none;
  background: transparent;     /* ✅ 黒膜なし */
  box-shadow: none;
  backdrop-filter: none;
}

.card__img{
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: var(--radius2); */
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
}

/* ✅ 入力＋ボタン：中央寄せ＆見やすく */
.answerRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 12px 6px;
  align-items: center;
  justify-items: center; /* 中央揃えの雰囲気 */
}
.answerRow input{
  width: min(320px, 100%);
  height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.5);
  color: var(--ink);
  outline: none;
  font-size: 16px;
}
.answerRow input::placeholder{ color: rgba(255,255,255,.50); }
.answerRow input:focus{
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.answerRow button{
  height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.3);
  color: var(--ink);
  font-weight: 900;
  letter-spacing: .10em;
  cursor: pointer;
  transition: transform .08s ease, background .2s ease;
  font-size: 14px;
}
.answerRow button:active{ transform: scale(.98); }

.answerRow .badge{
  display: none; /* もう使わない（中央オーバーレイで出す） */
}

.is-correct .answerRow button{
  background: rgba(255,255,255,.20);
}

/* ===== Clear ===== */
.clearWrap{
  display: grid;
  gap: 14px;
  place-items: center;
  padding: 10px 0 8px;
}
.clearImg{
  width: min(100%, 420px);
  height: auto;
  display: block;
  /* border-radius: var(--radius2); */
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
}
.topBtn{
  width: 92%;
  max-width: 360px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .10em;
  cursor: pointer;
  transition: transform .08s ease;
}
.topBtn:active{ transform: scale(.99); }

/* ===== Center Feedback Overlay ===== */
.feedback{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.feedback.is-show{ opacity: 1; }

/* ✅ 背景パネル撤廃：透明で何も出さない */
.feedback__panel{
  display: grid;             
  place-items: center;        
  justify-items: center;    
  text-align: center; 

  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  gap: 10px;
  transform: none;
  animation: none;
}

@keyframes pop{
  to{ transform: translateY(0) scale(1); }
}
.feedback__mark{
  font-size: min(180px, 42vw);   /* ✅ 超大きく */
  line-height: 1;
  font-weight: 1000;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.feedback__text{
  font-size: min(44px, 10vw);    /* ✅ 大きく */
  font-weight: 1000;
  letter-spacing: .22em;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.feedback.is-ok .feedback__mark,
.feedback.is-ok .feedback__text{ color: var(--ok); }
.feedback.is-ng .feedback__mark,
.feedback.is-ng .feedback__text{ color: var(--ng); }



@media (max-width: 520px){
  .outer{
    padding: 0;            /* ✅ 余白ゼロ → 黒が出ない */
    place-items: stretch;  /* ✅ innerを伸ばす */
  }

  .inner{
    width: 100vw;          /* ✅ 画面幅いっぱい */
    height: 100svh;        /* ✅ 画面高いっぱい */
    min-height: 100svh;
    border-radius: 0;      /* ✅ 角丸なし */
    box-shadow: none;      /* ✅ 端まで行くので影は消す（好み） */
  }
}



#last1 .answerRow{
  padding-bottom: 50px;     /* ✅ 6px → 22px */
}


/* ===== Patch: #last2(info.png) を #last1(q5.png) と同じ見た目に ===== */
#last2 > .panel{
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible; /* card__img の影が切れないように */
}

#last2 > .panel > .panel__inner{
  padding: 0;
  gap: 0;
}

/* #last1 と同じ “下が狭い” 対策も揃えるなら */
#last2 .answerRow{
  padding-bottom: 50px;
}


/* =========================
   Story：セリフをキャラ枠の下部に重ねる
   （#story1 / #story2 だけ）
========================= */
#story1 .panel__inner,
#story2 .panel__inner{
  position: relative;
  padding: 16px;
  display: block;     /* セリフはabsoluteで重ねるので、通常フローはキャラだけ */
}

/* キャラ枠を大きめに & 下にセリフ分の“余白”を確保（セリフに被せすぎない） */
#story1 .panel__char,
#story2 .panel__char{
  position: relative;
  z-index: 1;
  height: clamp(360px, 58vh, 560px);
  padding: 12px 12px 160px; /* ←ここがセリフ用の確保スペース */
  overflow: hidden;
}

/* セリフ枠を下部に重ねる */
#story1 .panel__speech,
#story2 .panel__speech{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;

  margin: 0;
  border-radius: var(--radius);
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
}

/* nextボタンがセリフより前面に来るように（念のため） */
#story1 .nextBtn,
#story2 .nextBtn{
  z-index: 4;
}

/* 画面高さが低い端末向けの微調整（必要なら） */
@media (max-height: 700px){
  #story1 .panel__char,
  #story2 .panel__char{
    height: clamp(320px, 56vh, 520px);
    padding-bottom: 150px;
  }
  #story1 .panel__speech,
  #story2 .panel__speech{
    min-height: 104px;
  }
}


/* =========================
   Story：外枠(.panel)とキャラ画像サイズを揃える
   ＋内側の枠(キャラ枠)を消す
   ※セリフのサイズ/位置は触らない
========================= */

/* 外枠とキャラ面をピッタリ合わせる：panel__inner の余白を消す */
#story1 .panel__inner,
#story2 .panel__inner{
  padding: 0;
  gap: 0;
}

/* “内側の枠” を消す（キャラ枠のボーダー/背景を削除）
   ※高さ・オーバーレイ用の下余白(160px)は維持したいので padding だけ上書き */
#story1 .panel__char,
#story2 .panel__char{
  border: none;
  background: none;
  padding: 0 0 160px; /* ←左右・上は0にして外枠と揃える。下だけセリフ用に確保 */
}

/* 念のため：画像を面いっぱい（サイズ合わせ用） */
#story1 .panel__char img,
#story2 .panel__char img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* ここは“見切れ無し”のまま */
}

/* （任意）前に入れた rgba の値がもし効いてない場合だけ見た目を安定させる
   ※位置・サイズは一切変えない（背景/枠/影だけ） */
#story1 .panel__speech,
#story2 .panel__speech{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
}



/* =========================
   4問カルーセル：全幅 + 見切れ防止 + 左右ナビ
========================= */
.carousel{
  position: relative; /* ナビボタンを重ねるため */
}

/* 1問=他の画像と同じ横幅（content幅いっぱい） */
.carousel__track{
  display: flex;
  gap: 12px;                       /* ✅ 余計な隙間を消す */
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  padding: 0 0 12px;            /* ✅ 左右0で“他の画像と横幅を揃える” */
  scroll-padding-inline: 0;     /* ✅ 内側で消える原因になりやすいpadding寄せを排除 */
}
.carousel__track::-webkit-scrollbar{ display:none; }

/* スワイプ中に欠け/消えが出やすい transform を撤去して、常に100%表示 */
.slide{
  flex: 0 0 calc(100% - 12px);
  max-width: 100%;
  /* max-width: calc(100% - 12px); */
  scroll-snap-align: start;
  opacity: 1;
  transform: none;
}
.slide.is-active{
  opacity: 1;
  transform: none;
}

/* ナビ（クリックできるのはボタンだけ） */
.carousel__nav{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.carousel__navBtn{
  pointer-events: auto;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  /* backdrop-filter: blur(10px); */
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  color: var(--ink);

  display: grid;
  place-items: center;
}
.carousel__navBtn:active{ transform: translateY(-50%) scale(.98); }
.carousel__navBtn svg{ width: 22px; height: 22px; }

.carousel__navBtn.is-prev{ left: 10px; }
.carousel__navBtn.is-next{ right: 10px; }
.carousel__navBtn.is-prev svg{ transform: rotate(180deg); }

.carousel__navBtn:disabled{
  opacity: .35;
  filter: saturate(.4);
}


/* =========================
   4問カルーセル（統一版）
   gap を変えても “中央スナップ” が崩れない
========================= */
.carousel{
  position: relative;
}

.carousel__track{
  /* ここだけ触ればOK */
  --gap: 12px;    /* ← 画像間の間隔 */
  --w: 100%;       /* ← 1問の見える幅（中央表示用） */

  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* 端のスライドも「中央」まで寄れるための余白（gapと連動） */
  --edgePad: calc((100% - var(--w))/2 + (var(--gap)/2));
  padding: 6px var(--edgePad) 12px;
  scroll-padding-inline: var(--edgePad);
}
.carousel__track::-webkit-scrollbar{ display:none; }

.slide{
  flex: 0 0 var(--w);
  max-width: var(--w);
  scroll-snap-align: center;

  /* 既存の演出を残すならこのまま */
  transition: transform .35s cubic-bezier(.2,9,2,1), opacity .35s ease;
  transform: scale(.88);
  opacity: .70;
}
.slide.is-active{
  transform: scale(1);
  opacity: 1;
}