/*
 * なみえライスバーガー たんけんクイズ — 見た目のスタイル
 * ------------------------------------------------------------
 * 色そのものは game.js の SETTINGS.colors で決めていて、
 * ここでは --color-background / --color-text / --color-accent という
 * 「変数」として受け取って使っている（game.jsが起動時に値を流し込む）。
 * なので色を変えたいときは game.js 側の SETTINGS を書き換えればOK。
 * ------------------------------------------------------------
 */

:root {
  /* ここに書いた値は初期表示用の仮の色。実際の色は game.js から上書きされる */
  --color-background: #faf3e1;
  --color-text: #4a3524;
  --color-accent: #c1552c;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #20242b;
  color: var(--color-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

/* ゲーム全体の枠。スマホ縦持ちを基準にした細長いカードを画面中央に置く。
   横幅は可変（max-widthで頭打ちにするだけ）なので、PCで開いても崩れない */
#game-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}

#hud-top {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

#product-name {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 進み具合を示す丸印。今いる場面と、通り過ぎた場面を色で見分ける */
#progress-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}

.progress-dot.is-done {
  background: var(--color-accent);
}

.progress-dot.is-current {
  background: var(--color-accent);
  transform: scale(1.3);
}

/* クイズ中のHUD：残り時間とスコアを横に並べる */
#quiz-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* うけどんキャッチ中のHUD：ハート・スコア・残り時間を横に並べる */
#catch-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#catch-hearts {
  display: flex;
  gap: 4px;
}

/* ハートは絵文字ではなく記号(♥)を使う。CSSで色を変えられるようにするため */
.catch-heart {
  font-size: 18px;
  line-height: 1;
  color: var(--color-accent);
}

.catch-heart.is-lost {
  color: rgba(0, 0, 0, 0.15);
}

#catch-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

/* ゲーム画面本体を置く領域。残りの高さぜんぶを使う */
#stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

/* 場面(シーン)ごとの背景。色はJSが場面ごとに書き換える */
#scene-area {
  position: absolute;
  inset: 0;
  transition: background-color 0.3s ease;
}

/* 場面ごとのイラスト背景。JSが画像またはSVGを差し替える。タップの邪魔をしないよう無効化 */
#scene-illustration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#scene-illustration svg {
  display: block;
  width: 100%;
  height: 100%;
}

#scene-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#scene-title {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

/* うけどんキャッチの遊び場。空〜地面のグラデーションを敷いておく */
#catch-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#bfe3f0 0%, #bfe3f0 70%, #e3d3b8 70%, #e3d3b8 100%);
  touch-action: none;
}

#catch-field {
  position: absolute;
  inset: 0;
}

/* 落ちてくる浪江の特産品・害獣。位置はJSがtransformで動かす */
.catch-item {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.catch-item svg,
.catch-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
}

/* うけどん本人（キャッチする側）。指・マウスの位置に追いかけてくる */
#catcher {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

#catcher img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

/* クイズパネル：画面下からせり出すカード。中に問題・選択肢を置く。
   キャラクターアイコンがパネル上端からはみ出す形で乗るので、パネル自体は
   overflow を持たせない（持たせるとアイコンの上側が切れてしまう）。
   長い文章で高さが足りない時のスクロールは、中の #quiz-body 側で行う */
#quiz-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 62%;
  padding: 40px 16px 18px;
  border-radius: 22px 22px 0 0;
  background: var(--color-background);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

#quiz-body {
  overflow-y: auto;
  min-height: 0; /* flexの子でスクロールを効かせるためのおまじない */
}

/* うけどん・コラボうけどんの顔アイコン。パネルの上端に半分乗る位置に置く */
#quiz-character {
  position: absolute;
  top: -30px;
  left: 16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#quiz-character img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

#quiz-question {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

/* 選択肢のボタンを縦に並べる */
#quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-choice {
  padding: 12px 14px;
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  background: #ffffff;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.quiz-choice:active {
  transform: translateY(1px);
}

.quiz-choice:disabled {
  cursor: default;
}

/* 答え合わせのあと：正解は緑、選んでしまった不正解は薄いグレーにする */
.quiz-choice.is-correct {
  background: #5fa777;
  border-color: #5fa777;
  color: #ffffff;
}

.quiz-choice.is-wrong {
  background: #e7e2d6;
  border-color: #cbc2ac;
  color: var(--color-text);
  opacity: 0.7;
}

#quiz-feedback-result {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent);
}

#quiz-feedback-explanation {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
}

/* スタート画面・ヒント画面・終了画面の共通の見た目（重ねて出す半透明の幕） */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  text-align: center;
}

.overlay[hidden] {
  display: none;
}

/* タイトル画面：LPサイト（namie-riceburger.pages.dev）のヒーローに合わせたデザイン */
.title-overlay {
  background: linear-gradient(135deg, #FF6B9D 0%, #FF7A6E 55%, #FF8C42 100%);
  overflow: hidden;
}

/* 浮遊する装飾blob（LPのhero-blobと同じ） */
.title-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
}
.title-blob.tb1 {
  width: 180px; height: 180px;
  background: #FFD600;
  top: 6%; left: -8%;
  opacity: 0.22;
  animation: title-float 7s ease-in-out infinite;
}
.title-blob.tb2 {
  width: 110px; height: 110px;
  background: #fff;
  bottom: 18%; right: -5%;
  opacity: 0.11;
  animation: title-float 9s ease-in-out infinite reverse;
}
.title-blob.tb3 {
  width: 70px; height: 70px;
  background: #FFD600;
  bottom: 8%; left: 12%;
  opacity: 0.18;
  animation: title-float 6s ease-in-out infinite 1s;
}

@keyframes title-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.title-box {
  width: 100%;
  max-width: 300px;
  padding: 0 20px;
  text-align: center;
  position: relative;
  z-index: 2;
  background: none;
  box-shadow: none;
}

.title-mascot {
  width: 168px;
  height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
  margin: 0 0 8px;
}

.title-game-label {
  margin: 0 0 2px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.88);
}

.title-heading {
  margin: 2px 0 0;
  font-family: 'Noto Sans JP', "Hiragino Sans", sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.title-heading-accent {
  font-size: 42px;
  color: #FFD600;
  display: inline-block;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.title-sub {
  margin: 8px 0 26px;
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.title-tap {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FF6B9D;
  padding: 13px 32px;
  border-radius: 999px;
  background: #ffffff;
  display: inline-block;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  animation: title-tap-pulse 1.6s ease-in-out infinite;
}

@keyframes title-tap-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .title-tap {
    animation: none;
  }
}

.overlay-box {
  width: 100%;
  max-width: 320px;
  padding: 28px 20px;
  border-radius: 16px;
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.overlay-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}

.overlay-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
}

.result-score-label {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}

.result-score-value {
  margin: 4px 0 12px;
  font-size: 34px;
  font-weight: 900;
  color: var(--color-accent);
}

/* うけどんキャッチで高得点を取ったときに出る称号バッジ */
.result-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.result-badge[hidden] {
  display: none;
}

/* あそび方えらびのボタンを縦に並べる（スタート画面） */
.mode-button-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* 「もう一回」「商品ページへ」を必ず同じ大きさにする行。flex:1で幅を揃える */
.button-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.game-button {
  flex: 1 1 0;
  padding: 14px 8px;
  border: none;
  border-radius: 12px;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.game-button:active {
  transform: translateY(2px);
}