@charset "utf-8";

/* =========================================================
   受話器越しの約束 — 練習問題（全4問カルーセル）
   750px固定 / 左右の矢印で問題を周回
   Figma: OhPKeaXNk4Y5YqpjT6jNb9  node 472:2441「練習問題1」(1280幅)
   → 1280 → 750 に縮めて再構成
   ========================================================= */

/* ---------- デザイントークン（game.css と揃える） ---------- */
:root {
  --bg-grad:     linear-gradient(245deg, #d6d5fa 0%, #dedeff 48.5%, #f3def1 100%);
  --card-face:   #c6bae6;
  --card-inner:  #fcf9ff;
  --card-border: #636363;
  --btn-grad:    linear-gradient(90deg, #ecc2f9 0%, #f285b2 80%, #ec95d1 100%);
  --arrow-grad:  linear-gradient(180deg, #CBC2F9 0%, #A586F3 80%, #A595EC 100%);
  --text-body:   #120f30;
  --text-title:  #282354;
  --text-talk:   #504a8f;
  --bubble-border: #b393d4;
  --ok:  #3F9E5A;
  --ng:  #D8436B;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic Pro", sans-serif;
  font-weight: 500;
  color: var(--text-body);
  background: #cfcef6;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input { font-family: inherit; }

/* ---------- Wrapper（750px固定） ---------- */
#wrapper {
  width: 750px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100dvh;
  /* 支給の背景（方眼＋星）。
     縦に繰り返すと、ページの高さが背景1枚(約1500px)に満たないため
     下の星が途中で切れる。ページ全体にちょうど1枚収まるよう引き伸ばす。 */
  background-color: #EFEBF7;
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;
}

/* =========================================================
   音声あり/なしの案内（game/ と同じ素材・同じ作り）
   ========================================================= */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(40, 35, 84, .55);
  z-index: 9999;
  align-items: center; justify-content: center;
  padding: 40px 20px;
}
.overlay.is-active { display: flex; }

/* ---------- 全問正解のポップアップ（2026-10-23 追加） ---------- */
.clear-card {
  position: relative;
  width: 690px; max-width: 100%;
  line-height: 0;
}
/* JPEGなので角丸はCSSで付ける（元PNGの角丸は実測26px相当／1042px幅） */
.clear-card__bg { width: 100%; height: auto; display: block; border-radius: 2.5%/2.9%; }
/* 「Xでポストする」ボタン。画像の上に透明なリンクを重ねる。
   座標は Figma のボタン(Group 30 @1680,7649 730x138)を
   カード(1042x891)に対する％に換算したもの。 */
.clear-card__post {
  position: absolute;
  left: 23.13%;
  top: 70.71%;
  width: 70.06%;
  height: 15.49%;
  border-radius: 999px;
  transition: transform .12s ease;
}
.clear-card__post:active { transform: translateY(3px); }

/* audio_card.png は半透明なので、同じ色の下地を敷いて不透明にする */
.audio-card {
  position: relative;
  width: 693px; max-width: 100%;
  /* 素材が半透明なので、同色の下地を敷いて不透明にする。
     角丸は素材の形（実測26px相当）に合わせる。 */
  background: #fcfaff;
  border-radius: 26px;
  animation: pop-in .25s ease;
}
.audio-card__bg { width: 100%; height: auto; }
@keyframes pop-in {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ボタンはカード幅に対する％＝素材の原寸比率で置く */
.audio-btn {
  position: absolute;
  padding: 0; border: 0; background: transparent;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, opacity .15s;
}
.audio-btn > img { width: 100%; height: auto; }
.audio-btn:hover  { transform: translateY(-2px); opacity: .94; }
.audio-btn:active { transform: translateY(0); opacity: .88; }
.audio-btn:focus-visible { outline: 3px solid #7B6BB0; outline-offset: 4px; border-radius: 999px; }
/* 音声あり（575x122） */
.audio-btn--on  { left: 8.51%;  top: 55.09%; width: 82.97%; }
/* 音声なし（372x61） */
.audio-btn--off { left: 23.16%; top: 76.86%; width: 53.68%; }

/* ヒントの出し方
   ・音声あり/なし どちらも「受話器を取る」を押すとテキストヒント(吹き出し)が出る
   ・音声ありのときは、それに合わせて音声も流れる
   吹き出しは押されるまで隠しておく（場所は確保して段差が出ないようにする）。 */
.quiz__bubble { visibility: hidden; }
.quiz__phone-side.is-revealed .quiz__bubble { visibility: visible; }

/* 「受話器を取る」ボタンの出し分け
   ・音声あり … 副題つきの支給画像をそのまま
   ・音声なし … 文字なしの支給画像＋テキストを中央に重ねる
   どちらも支給画像なので、面のツヤ・丸みはそのまま保たれる。 */
.quiz__call { position: relative; }
.quiz__call-img { width: 100%; }
.quiz__call-img--muted,
.quiz__call-label { display: none; }

body.is-muted .quiz__call-img--audio { display: none; }
body.is-muted .quiz__call-img--muted { display: block; }
body.is-muted .quiz__call-label {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 41%;                     /* 支給画像のボタン面(y10.7%〜71.2%)の中央 */
  transform: translateY(-50%);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 27px;              /* 元画像の文字と同じ大きさ（実測） */
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 2px rgba(20, 80, 100, .3);
  pointer-events: none;
}

/* =========================================================
   見出し
   ========================================================= */
.phead { padding: 54px 40px 10px; text-align: center; }
.phead__title {
  font-family: "Kaisei Tokumin", "Yu Mincho", serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.45;
  color: var(--text-title);
  letter-spacing: .04em;
}

/* =========================================================
   カルーセル
   ========================================================= */
.carousel { position: relative; padding: 76px 0 0; }   /* 背景の星とカードが重ならないよう余白を取る */

/* 左右の矢印（カードの外側・上下中央） */
.carousel__arrow {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  width: 37px;
  padding: 18px 6px;
  z-index: 3;
  transition: transform .15s ease, opacity .15s ease;
}
.carousel__arrow img { width: 100%; filter: drop-shadow(0 3px 5px rgba(90, 70, 150, .3)); }
.carousel__arrow--prev { left: 17px; }
.carousel__arrow--prev img { transform: scaleX(-1); }
.carousel__arrow--next { right: 17px; }
.carousel__arrow:hover { opacity: .85; }
.carousel__arrow--prev:active { transform: translateY(-50%) translateX(-4px); }
.carousel__arrow--next:active { transform: translateY(-50%) translateX(4px); }
.carousel__arrow:focus-visible { outline: 3px solid #7B6BB0; outline-offset: 4px; border-radius: 6px; }

/* ---------- 1問ぶんのカード ---------- */
.quiz { padding: 0 66px; }
.quiz[hidden] { display: none; }

.quiz__card {
  background: var(--card-face);
  border-radius: 20px;
  padding: 28px 26px 34px;
  box-shadow: 0 8px 20px rgba(100, 85, 160, .22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* 切り替え時のふわっとした表示 */
.quiz.is-entering .quiz__card { animation: quizIn .28s ease both; }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.quiz__lead {
  font-family: "Kaisei Tokumin", "Yu Mincho", serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.3;
}

/* 問題画像（差し替えるまでの仮置き枠） */
.quiz__ph {
  width: 100%;
  aspect-ratio: 945 / 669;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(45deg, #EFE9FA 0 14px, #E6DEF5 14px 28px);
  border: 3px solid #fff;
  border-radius: 8px;
  color: #7A6EA8;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.quiz__ph small { font-size: 18px; font-weight: 500; }
/* 実画像に差し替えたら↓が効く */
img.quiz__ph {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;   /* 問題ごとに縦横比が違うので画像の実寸に従う */
  background: none;
  padding: 0;
}

/* ---------- 電話＋ヒント ---------- */
.quiz__phone {
  width: 100%;
  display: flex;
  /* 電話の高さに合わせて右側を上下中央に置く（伸ばさない） */
  align-items: center;
  gap: 16px;
}
.quiz__phone-img { width: 186px; flex: 0 0 auto; }
.quiz__phone-side {
  flex: 1 1 auto;
  min-width: 0;
  /* 行の高さを決めるのは電話。右側は自分の中身ぶんだけの高さにして、
     電話に対して上下中央に並ぶようにする（以前は行いっぱいに伸びて
     吹き出しが電話より上にはみ出していた）。 */
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.quiz__bubble {
  background: #fff;
  border: 2px solid var(--bubble-border);
  /* 電話側（左上）だけ角を落として吹き出しらしくする */
  border-radius: 0 10px 10px 10px;
  padding: 14px 16px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--text-talk);
}

/* ボタンは支給画像。装飾はすべて画像側に入っているのでCSSでは足さない */
.quiz__call {
  width: 100%;
  padding: 0;
  /* 素材は上下に余白(光彩と影)を持っている。下の余白(約28%)のぶん
     行が間延びして電話より高くなるので、その分を詰める。 */
  margin-bottom: -9%;
  transition: transform .1s ease, filter .1s ease;
}
.quiz__call:active { transform: translateY(3px); }
.quiz__call:focus-visible { outline: 3px solid #7B6BB0; outline-offset: 4px; border-radius: 999px; }
.quiz__call.is-playing { filter: brightness(1.08); }

/* ---------- 解答フォーム ---------- */
.quiz__form { width: 100%; display: flex; align-items: center; gap: 14px; }
.quiz__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 62px;
  padding: 0 18px;
  border: 2px solid #CFC7E6;
  border-radius: 10px;
  background: #fff;
  font-size: 24px;
  color: var(--text-body);
}
.quiz__input::placeholder { color: #9A93AE; }
.quiz__input:focus { outline: 3px solid #A586F3; outline-offset: 1px; }
.quiz__input.is-ok { border-color: var(--ok); background: #F3FBF5; }

.quiz__send {
  flex: 0 0 auto;
  width: 152px;
  padding: 0;
  transition: transform .1s ease;
}
.quiz__send img { width: 100%; }
.quiz__send:active { transform: translateY(3px); }
.quiz__send:focus-visible { outline: 3px solid #7B6BB0; outline-offset: 4px; border-radius: 999px; }

/* 判定メッセージ */
.quiz__result {
  min-height: 34px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.quiz__result.is-ok { color: var(--ok); }
.quiz__result.is-ng { color: var(--ng); }
.quiz__result.is-shake { animation: shake .34s ease; }
@keyframes shake {
  0%,100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- まとめの謎（4問目）だけ支給の背景画像を使う ----------
   角丸・外周の光・パズルピース・月はすべて画像に入っているので、
   カード側の背景と角丸は打ち消しておく。 */
.quiz--final .quiz__card {
  background: url("../img/card_final.png") no-repeat center top / 100% 100%;
  border-radius: 0;
  box-shadow: none;
  padding: 52px 46px 58px;
}

/* =========================================================
   位置表示（ドット＋カウンタ）
   ========================================================= */
.carousel__nav {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.carousel__dots { list-style: none; display: flex; gap: 14px; }
.carousel__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #B9AEE2 inset;
  transition: background .15s ease, transform .15s ease;
}
.carousel__dot.is-active { background: #A586F3; box-shadow: 0 0 0 2px #8B6BDE inset; transform: scale(1.2); }
.carousel__dot.is-cleared { background: #8FD6A3; box-shadow: 0 0 0 2px #56A96E inset; }
.carousel__dot:focus-visible { outline: 3px solid #7B6BB0; outline-offset: 3px; }

/* =========================================================
   フッター
   ========================================================= */
.pfoot { margin-top: 40px; text-align: center; }
.pfoot__back {
  display: inline-block;
  /* 文言が「戻る」と短いので、押しやすい幅を確保する */
  min-width: 200px;
  text-align: center;
  padding: 14px 34px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(100, 85, 160, .2);
  color: var(--text-talk);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}
.pfoot__back:hover { background: #F6F2FF; }

/* ---------- モーション配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}