/* ============================================================
   Jolly Phonics 復習アプリ — スタイル
   園児むけ：大きめタップ領域・はっきりした色・丸み
   タブレット縦横どちらでも崩れないこと
   ============================================================ */

/* 幼児の読み書き用フォント（a・g が動画と同じ「一階建て」の形になる）
   同梱ファイルを使う＝ネット接続やタブレットの種類に関係なく同じ形で表示 */
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/andika-400.woff2") format("woff2");
}
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/andika-700.woff2") format("woff2");
}

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

:root {
  --g1: #e23b3b; /* 赤 */
  --g2: #f2922c; /* 橙 */
  --g3: #f4c20d; /* 黄 */
  --g4: #2faf5a; /* 緑 */
  --g5: #2b8fd6; /* 青 */
  --g6: #6a52c8; /* 紫 */
  --g7: #d94f9a; /* 桃 */
  --ink: #2b2b3a;
  --paper: #fff8ec;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", "Segoe UI", system-ui, sans-serif;
}

.app-header {
  text-align: center;
  padding: 16px 12px 8px;
}
.app-header h1 {
  margin: 0;
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: 1px;
}
.subtitle {
  margin: 4px 0 0;
  font-size: clamp(12px, 3vw, 16px);
  color: #7a7a88;
}

/* --- 動画プレイヤー --- */
.stage {
  max-width: 720px;
  margin: 8px auto 16px;
  padding: 0 12px;
  text-align: center;
}
.video-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.stage video {
  width: 100%;
  aspect-ratio: 16 / 9;   /* 動画未再生でも正しい形の枠を確保 */
  max-height: 46vh;
  background: #000;
  display: block;
  object-fit: contain;
}
/* クイズ中：動画を隠して音だけにするカバー */
.video-cover {
  position: absolute;
  inset: 0;
  background: #14121f;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.video-cover[hidden] { display: none; }
.cover-emoji {
  font-size: clamp(48px, 14vw, 96px);
  animation: cover-pulse 1.1s ease-in-out infinite;
}
.cover-text {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 800;
  letter-spacing: 2px;
}
@keyframes cover-pulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.12); opacity: 1; }
}
/* 読み込み中の表示 */
.video-loading {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 31, 0.72);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.video-loading[hidden] { display: none; }
.spinner {
  width: 52px;
  height: 52px;
  border: 6px solid rgba(255,255,255,0.3);
  border-top-color: #ffd34d;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.loading-text { font-size: clamp(14px, 4vw, 18px); font-weight: 800; }
@keyframes spin { to { transform: rotate(360deg); } }
.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ctrl-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
  cursor: pointer;
  min-height: 48px;
}
.ctrl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.ctrl-btn.is-slow { background: #fff2c2; }

/* --- ボード --- */
.board {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 12px 24px;
}
.group {
  margin-bottom: 18px;
  border-radius: 18px;
  padding: 10px 12px 14px;
  background: rgba(255,255,255,0.55);
}
.group-title {
  margin: 2px 0 10px;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
}
.group-1 .group-title { background: var(--g1); }
.group-2 .group-title { background: var(--g2); }
.group-3 .group-title { background: var(--g3); color: #5a4500; }
.group-4 .group-title { background: var(--g4); }
.group-5 .group-title { background: var(--g5); }
.group-6 .group-title { background: var(--g6); }
.group-7 .group-title { background: var(--g7); }

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* --- 音ボタン --- */
.sound-btn {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 18px;
  background: #ffffff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  transition: transform .08s;
  min-height: 64px;
}
.group-1 .sound-btn { border-bottom: 6px solid var(--g1); }
.group-2 .sound-btn { border-bottom: 6px solid var(--g2); }
.group-3 .sound-btn { border-bottom: 6px solid var(--g3); }
.group-4 .sound-btn { border-bottom: 6px solid var(--g4); }
.group-5 .sound-btn { border-bottom: 6px solid var(--g5); }
.group-6 .sound-btn { border-bottom: 6px solid var(--g6); }
.group-7 .sound-btn { border-bottom: 6px solid var(--g7); }

.sound-label {
  font-family: "Andika", "Comic Sans MS", "Century Gothic", sans-serif;
  font-size: clamp(22px, 6vw, 40px);
  font-weight: 700;
  line-height: 1;
}
.sound-note {
  margin-top: 4px;
  font-size: clamp(10px, 2.4vw, 13px);
  color: #8a8a96;
  font-weight: 700;
}
.sound-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.sound-btn.is-playing {
  outline: 4px solid #ffd34d;
  transform: translateY(1px);
}

/* 未収録（淡色・無効） */
.sound-btn.is-disabled {
  background: #eee;
  color: #bcbcc4;
  box-shadow: none;
  border-bottom-color: #d8d8de !important;
  cursor: default;
}
.sound-btn.is-disabled .sound-note { color: #cfcfd6; }

.app-footer {
  text-align: center;
  color: #9a9aa6;
  font-size: 12px;
  padding: 0 12px 28px;
}

/* --- レスポンシブ：細い画面は3列 --- */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
   レスポンシブ：向き・画面サイズで最適化
   ・縦画面（スマホ/タブレット縦）→ 動画を上にピン留めして盤をスクロール
   ・横に広い画面（PC/タブレット横）→ 左に動画、右に盤の2ペイン
   ============================================================ */

/* 縦画面：動画を上に固定（スクロールしても見えたまま） */
@media (orientation: portrait) {
  #stage {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper);
    margin: 0 auto 6px;
    padding: 6px 12px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }
  .stage video { max-height: 34vh; }
  /* クイズ中（縦）は動画を小さめにして、選択肢4つが1画面に収まるように */
  body.mode-quiz .stage video { max-height: 24vh; }
  body.mode-quiz .controls { margin-top: 6px; }
}
/* 背の低いスマホでは、さらに詰めて4択が収まるように */
@media (orientation: portrait) and (max-height: 700px) {
  body.mode-quiz .stage video { max-height: 20vh; }
  .choice-btn { min-height: 68px; padding: 12px 8px; }
  .choices { gap: 10px; margin: 8px auto; }
}

/* 横に広い画面：左右2ペイン。動画は左に固定、盤は右でスクロール */
@media (min-width: 900px) and (orientation: landscape) {
  .layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
  }
  #stage {
    flex: 0 0 44%;
    position: sticky;
    top: 12px;
    margin: 6px 0;
    padding: 0;
  }
  .stage video { max-height: 62vh; }
  .content { flex: 1 1 auto; min-width: 0; }
  .board { padding: 0 0 24px; margin: 0; }
  .quiz { margin: 0; }
}

/* --- モード切り替えタブ --- */
.mode-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 2px;
}
.mode-tab {
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 800;
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: #eae7f2;
  color: #7a7a88;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.10);
}
.mode-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.10); }
.mode-tab.is-active { background: var(--g6); color: #fff; }

/* --- クイズ --- */
.quiz { max-width: 620px; margin: 0 auto; padding: 4px 12px 28px; }
.quiz-bar { text-align: center; }
.quiz-progress {
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 800;
  color: #f2922c;
}
.quiz-q {
  margin: 4px 0 0;
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 700;
  color: #6a6a76;
}
.choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px auto;
}
.choice-btn {
  font-family: "Andika", "Comic Sans MS", "Century Gothic", sans-serif;
  font-size: clamp(28px, 8vw, 52px);
  font-weight: 700;
  padding: 16px 10px;
  border: none;
  border-radius: 22px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 5px 0 rgba(0,0,0,0.12);
  cursor: pointer;
  min-height: 78px;
  transition: transform .08s;
}
.choice-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.choice-btn.is-right { background: #c9f7d1; outline: 5px solid #34c759; }
.choice-btn.is-wrong { background: #ffdcdc; opacity: .65; }
.choice-btn:disabled { cursor: default; }
.feedback {
  text-align: center;
  min-height: 34px;
  font-size: clamp(19px, 5.5vw, 28px);
  font-weight: 800;
}
.feedback.is-correct { color: #28a745; }
.feedback.is-wrong { color: #e23b3b; }
.next-btn {
  display: block;
  margin: 10px auto 0;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 800;
  padding: 14px 34px;
  border: none;
  border-radius: 999px;
  background: #ffcc33;
  color: #5a4500;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
  cursor: pointer;
}
.next-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.next-btn[hidden] { display: none; }

/* 終了画面 */
.result { text-align: center; padding: 20px 12px 8px; }
.result[hidden] { display: none; }
.result-emoji {
  font-size: clamp(56px, 18vw, 100px);
  animation: cover-pulse 1.2s ease-in-out infinite;
}
.result-stars {
  font-size: clamp(32px, 11vw, 60px);
  letter-spacing: 8px;
  margin: 2px 0 6px;
}
.result-score {
  margin: 6px 0 2px;
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 800;
  color: #28a745;
}
.result-msg {
  margin: 0 0 16px;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  color: var(--ink);
}

/* 細い画面は選択肢を1列にはせず2列を維持（園児がタップしやすい大きさ） */