/* すべての要素で余白計算を扱いやすくし、初期余白とタップ時のハイライトを消します。 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ページ全体の高さをブラウザの高さいっぱいにします。 */
html,
body {
  height: 100%;
}

/* ゲーム画面を中央に配置し、全体のフォントと背景色を決めます。 */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf6ff;
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", sans-serif;
}

/* ゲーム全体の白い外枠です。幅・高さ・角丸・影をまとめて指定します。 */
.container {
  width: 100%;
  max-width: 1196px;
  height: 540px;
  background: #fffdf4;
  border: 3px solid #f4a32a;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(219, 128, 20, 0.18);
}

/* ヘッダーを3列のグリッドにして、中央にタイトル、右に戻るボタンを置きます。 */
.game-header {
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  align-items: center;
  padding: 0 14px;
  background: linear-gradient(90deg, #ff7043, #f8be63);
}

/* ヘッダー中央のタイトル文字の見た目です。 */
.header-title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 1px 2px 0 rgba(126, 60, 0, 0.2);
}

/* ヘッダー右側の戻るボタンです。 */
.header-back {
  justify-self: end;
  min-width: 126px;
  min-height: 34px;
  padding: 6px 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* マウスを乗せたとき、戻るボタンを少し明るくします。 */
.header-back:hover {
  background: rgba(255, 255, 255, 0.36);
}

/* 選択画面では戻るボタンを見えない状態にします。 */
.header-back.is-hidden {
  visibility: hidden;
}

/* メイン領域です。画面切り替え用にrelativeを指定し、背景パターンもここで作ります。 */
.game-main {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)),
    repeating-linear-gradient(45deg, #fff7d8 0 14px, #fff0be 14px 28px);
}

/* 共通ボタンの基本デザインです。 */
.btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #ff7043;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 #c84b20;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.14s ease;
}

/* ボタンにマウスを乗せたときの色です。 */
.btn:hover {
  background: #ff855f;
}

/* ボタンを押したときに少し沈む見た目にします。 */
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #c84b20;
}

/* 青い種類のボタンです。 */
.btn.blue {
  background: #2f86da;
  box-shadow: 0 5px 0 #1f5e9e;
}

/* 青いボタンにマウスを乗せたときの色です。 */
.btn.blue:hover {
  background: #4b9deb;
}

/* 緑の種類のボタンです。 */
.btn.green {
  background: #25a95c;
  box-shadow: 0 5px 0 #16733d;
}

/* 緑のボタンにマウスを乗せたときの色です。 */
.btn.green:hover {
  background: #34c773;
}

/* 灰色の種類のボタンです。 */
.btn.gray {
  background: #8f969c;
  box-shadow: 0 5px 0 #626970;
}

/* ぬりえ選択画面の配置です。 */
.select-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

/* 選択画面の見出しです。 */
.select-title {
  font-size: 26px;
  color: #e95f2c;
  font-weight: 900;
}

/* ぬりえカードを横並びにし、狭い画面では折り返します。 */
.select-cards {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 24px;
}

/* ぬりえ1つ分の選択カードです。 */
.select-card {
  width: 196px;
  min-height: 162px;
  border: 3px solid #ffd48e;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(160, 100, 20, 0.12);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 選択カードにマウスを乗せたとき、浮き上がるように見せます。 */
.select-card:hover {
  transform: translateY(-4px);
  border-color: #ff7043;
  box-shadow: 0 9px 20px rgba(255, 112, 67, 0.22);
}

/* 選択カード内の大きなアイコンです。 */
.select-card-icon {
  font-size: 50px;
  line-height: 1;
}

/* 選択カード内の名前テキストです。 */
.select-card-name {
  font-size: 20px;
  font-weight: 900;
  color: #444;
}

/* 選択カード内の補足テキストです。 */
.select-card-sub {
  font-size: 13px;
  color: #8d8d8d;
  font-weight: 700;
}

/* ゲーム画面は最初は非表示にします。 */
.game-panel {
  width: 100%;
  height: 100%;
  display: none;
}

/* showクラスが付いたときだけゲーム画面を表示します。 */
.game-panel.show {
  display: flex;
}

/* お手本とぬりえ本体を並べる左側のカラムです。 */
.left-col {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 8px 12px;
}

/* お手本SVGとラベルを縦に並べます。 */
.sample-box {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* お手本と書かれた小さなラベルの見た目です。 */
.sample-label {
  padding: 3px 10px;
  border: 2px solid #f4a32a;
  border-radius: 8px;
  background: #fff8e8;
  color: #d15c1e;
  font-size: 13px;
  font-weight: 900;
}

/* お手本SVGの枠線と背景です。 */
#sampleSvg {
  display: block;
  border: 2px solid #f4a32a;
  border-radius: 8px;
  background: #fff;
}

/* ユーザーが塗るSVGと操作ボタンを縦に並べる領域です。 */
.paint-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 表示用SVGとタッチ判定用SVGを重ねるための親要素です。 */
.svg-stack {
  position: relative;
  width: min(100%, 540px);
  filter: drop-shadow(0 4px 6px rgba(92, 63, 21, 0.1));
}

/* 答え合わせボタンと塗り直しボタンを2列に並べます。 */
.paint-actions {
  width: min(360px, 92%);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 塗った絵を表示するSVGを親要素の幅に合わせます。 */
#paintSvg {
  display: block;
  width: 100%;
  height: auto;
}

/* 透明なタッチ判定用SVGを、表示用SVGの上にぴったり重ねます。 */
#hitSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* タッチ判定用の透明な図形です。カーソルを指マークにします。 */
.hit-zone {
  fill: transparent;
  cursor: pointer;
}

/* 判定エリアにマウスを乗せたとき、少しだけ白く見せます。 */
.hit-zone:hover {
  fill: rgba(255, 255, 255, 0.25);
}

/* 右側の色選択パネルです。 */
.side-panel {
  width: 158px;
  flex: 0 0 158px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-left: 2px dashed #f4c87a;
  background: rgba(255, 255, 255, 0.48);
}

/* 色選択パネル内の要素を縦に並べます。 */
.side-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 色パレットのラベル文字です。 */
.palette-label {
  color: #a85a17;
  font-size: 13px;
  font-weight: 900;
}

/* 色ボタンを2列グリッドで並べます。 */
.palette-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* 色を選ぶ丸いボタンです。 */
.color-btn {
  aspect-ratio: 1;
  border: 4px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* 色ボタンにマウスを乗せると少し大きくします。 */
.color-btn:hover {
  transform: scale(1.08);
}

/* 選択中の色ボタンを黒い枠で強調します。 */
.color-btn.active {
  border-color: #222;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #222;
  transform: scale(1.12);
}

/* 現在選んでいる色を示すラベルです。 */
.indicator-label {
  color: #a85a17;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

/* 何パーツ塗ったかを表示するカウンターです。 */
.parts-left {
  min-width: 150px;
  padding: 4px 12px;
  border: 2px solid #f4c87a;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #8a5518;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

/* 現在選択中の色を表示する丸いインジケーターです。 */
.color-indicator {
  width: 36px;
  height: 36px;
  border: 3px solid #cfcfcf;
  border-radius: 50%;
  background: #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* 正解時にSVG全体を光らせるアニメーションを付けます。 */
.flash-ok {
  animation: flashOk 0.5s;
}

/* 不正解時にSVG全体を光らせるアニメーションを付けます。 */
.flash-ng {
  animation: flashNg 0.5s;
}

/* 正解時の緑色の光り方です。 */
@keyframes flashOk {
  50% { filter: drop-shadow(0 0 28px rgba(34, 172, 84, 0.85)); }
}

/* 不正解時の赤色の光り方です。 */
@keyframes flashNg {
  50% { filter: drop-shadow(0 0 28px rgba(238, 79, 52, 0.85)); }
}

/* 答え合わせ後に表示する結果画面です。通常は非表示です。 */
.result-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 253, 244, 0.96);
  text-align: center;
}

/* showクラスが付いたときだけ結果画面を表示します。 */
.result-screen.show {
  display: flex;
}

/* 結果画面の丸い記号表示です。 */
.result-emoji {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1bd;
  color: #e86428;
  font-size: 44px;
  font-weight: 900;
}

/* 結果画面のタイトル文字です。 */
.result-title {
  color: #e86428;
  font-size: 28px;
  font-weight: 900;
}

/* 正解数を表示する文字です。 */
.result-score {
  color: #444;
  font-size: 19px;
  font-weight: 900;
}

/* 結果メッセージの文字です。 */
.result-msg {
  color: #6f6f6f;
  font-size: 15px;
  font-weight: 700;
}

/* 結果画面の2つのボタンを横並びにします。 */
.result-btns {
  width: min(330px, 90%);
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* 画面幅が760px以下のとき、スマホ向けにサイズを調整します。 */
@media (max-width: 760px) {
  /* スマホではヘッダーの左右列を狭くします。 */
  .game-header {
    grid-template-columns: 90px 1fr 90px;
    padding: 0 8px;
  }

  /* スマホではタイトル文字を小さくします。 */
  .header-title {
    font-size: 15px;
  }

  /* スマホでは戻るボタンを小さくします。 */
  .header-back {
    min-width: 80px;
    padding: 5px 8px;
    font-size: 11px;
  }

  /* スマホでは左側カラムの余白を少し狭くします。 */
  .left-col {
    gap: 6px;
    padding-left: 6px;
  }

  /* スマホではお手本SVGを小さめに表示します。 */
  #sampleSvg {
    width: 132px;
    height: 92px;
  }

  /* スマホでは色選択パネルを少し細くします。 */
  .side-panel {
    width: 130px;
    flex-basis: 130px;
    padding: 8px;
  }
}