/* ============================================================
   playground.css
   クイズ ＆ ミニゲーム共通スタイル
   - 城東ウォーリアーズ（index）= 緑テーマ（既定）
   - AIラボ（ai）= .pg-section--ai で紫テーマに上書き
   既存の .ja / .en 切替（[lang="en"]）と互換。
   ============================================================ */

.pg-section {
  --pg-main: #1a6b3c;
  --pg-main-dark: #124d2b;
  --pg-accent: #e8a817;
  --pg-accent-light: #f4c244;
  --pg-soft: #eef6f0;
  --pg-card: #ffffff;
  --pg-ring: rgba(26, 107, 60, .25);
  padding: 80px 24px;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(26,107,60,.06), transparent),
    radial-gradient(1000px 400px at 100% 110%, rgba(232,168,23,.08), transparent),
    var(--bg, #faf8f3);
}

.pg-section--ai {
  --pg-main: #6d3bd6;
  --pg-main-dark: #4b1fa3;
  --pg-accent: #28c7d6;
  --pg-accent-light: #5be0ec;
  --pg-soft: #f1ecfc;
  --pg-ring: rgba(109,59,214,.25);
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(109,59,214,.10), transparent),
    radial-gradient(1000px 400px at 100% 110%, rgba(40,199,214,.10), transparent),
    #0f0a24;
  color: #efeafc;
}

.pg-wrap { max-width: 980px; margin: 0 auto; }

.pg-head { text-align: center; margin-bottom: 40px; }
.pg-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pg-main);
  background: var(--pg-soft);
  padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
}
.pg-section--ai .pg-eyebrow { color: #c9b6ff; background: rgba(109,59,214,.18); }
.pg-head h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900; font-size: clamp(24px, 4vw, 34px);
  line-height: 1.35; margin: 0 0 14px;
}
.pg-head p { font-size: 15px; line-height: 1.9; color: var(--text-mid, #526658); margin: 0 auto; max-width: 620px; }
.pg-section--ai .pg-head p { color: #c2b8e0; }

/* タブ切替（クイズ / ゲーム） */
.pg-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.pg-tab {
  font-family: inherit; font-weight: 700; font-size: 15px;
  border: 2px solid var(--pg-main); color: var(--pg-main);
  background: transparent; padding: 10px 24px; border-radius: 999px;
  cursor: pointer; transition: all .2s;
}
.pg-tab:hover { background: var(--pg-soft); }
.pg-tab.is-active { background: var(--pg-main); color: #fff; box-shadow: 0 8px 22px var(--pg-ring); }
.pg-section--ai .pg-tab { color: #c9b6ff; border-color: #6d3bd6; }
.pg-section--ai .pg-tab:hover { background: rgba(109,59,214,.18); }
.pg-section--ai .pg-tab.is-active { background: var(--pg-main); color: #fff; }

.pg-panel { display: none; }
.pg-panel.is-active { display: block; animation: pgFade .35s ease; }
@keyframes pgFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* カード共通 */
.pg-card {
  background: var(--pg-card);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  padding: clamp(22px, 4vw, 38px);
  color: var(--text-dark, #2a332c);
}
.pg-section--ai .pg-card { background: #1a1238; color: #efeafc; box-shadow: 0 14px 50px rgba(0,0,0,.45); border: 1px solid rgba(109,59,214,.3); }

/* ---------- クイズ ---------- */
.pg-quiz-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pg-quiz-progress { flex: 1; height: 10px; background: var(--pg-soft); border-radius: 999px; overflow: hidden; }
.pg-section--ai .pg-quiz-progress { background: rgba(255,255,255,.10); }
.pg-quiz-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pg-main), var(--pg-accent)); border-radius: 999px; transition: width .4s ease; }
.pg-quiz-count { font-weight: 800; font-size: 14px; color: var(--pg-main); white-space: nowrap; }
.pg-section--ai .pg-quiz-count { color: #c9b6ff; }

.pg-quiz-q { font-size: clamp(17px, 2.5vw, 21px); font-weight: 800; line-height: 1.6; margin: 0 0 22px; }
.pg-quiz-options { display: grid; gap: 12px; }
.pg-opt {
  text-align: left; font-family: inherit; font-size: 15px; font-weight: 600;
  border: 2px solid var(--border, #e0e6e1); background: #fff; color: var(--text-dark, #2a332c);
  padding: 15px 18px; border-radius: 12px; cursor: pointer; transition: all .18s;
  display: flex; align-items: center; gap: 12px; line-height: 1.5;
}
.pg-section--ai .pg-opt { background: #241a47; color: #efeafc; border-color: rgba(255,255,255,.12); }
.pg-opt:hover:not(:disabled) { border-color: var(--pg-main); transform: translateY(-2px); box-shadow: 0 8px 20px var(--pg-ring); }
.pg-opt .pg-opt-key { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--pg-soft); color: var(--pg-main); font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.pg-section--ai .pg-opt .pg-opt-key { background: rgba(109,59,214,.3); color: #d7c6ff; }
.pg-opt:disabled { cursor: default; }
.pg-opt.is-correct { border-color: #1a9d54; background: #e9f9ef; color: #0d6b36; }
.pg-opt.is-wrong { border-color: #e2574c; background: #fdecea; color: #b3261e; }
.pg-section--ai .pg-opt.is-correct { background: rgba(40,199,214,.18); border-color: #28c7d6; color: #b6f4fb; }
.pg-section--ai .pg-opt.is-wrong { background: rgba(226,87,76,.18); border-color: #e2574c; color: #ffc7c2; }
.pg-opt.is-correct .pg-opt-key { background: #1a9d54; color: #fff; }
.pg-opt.is-wrong .pg-opt-key { background: #e2574c; color: #fff; }

.pg-explain {
  margin-top: 18px; padding: 16px 18px; border-radius: 12px;
  background: var(--pg-soft); font-size: 14px; line-height: 1.8;
  border-left: 4px solid var(--pg-accent);
}
.pg-section--ai .pg-explain { background: rgba(40,199,214,.10); }
.pg-explain b { color: var(--pg-main); }
.pg-section--ai .pg-explain b { color: #7be3ee; }
.pg-quiz-next { margin-top: 20px; text-align: right; }

.pg-btn {
  font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  border: none; border-radius: 999px; padding: 13px 30px;
  background: var(--pg-main); color: #fff; transition: all .2s;
  box-shadow: 0 8px 22px var(--pg-ring);
}
.pg-btn:hover { background: var(--pg-main-dark); transform: translateY(-2px); }
.pg-btn--ghost { background: transparent; color: var(--pg-main); border: 2px solid var(--pg-main); box-shadow: none; }
.pg-btn--ghost:hover { background: var(--pg-soft); color: var(--pg-main-dark); }
.pg-section--ai .pg-btn--ghost { color: #c9b6ff; border-color: #6d3bd6; }
.pg-section--ai .pg-btn--ghost:hover { background: rgba(109,59,214,.2); color: #fff; }

/* クイズ結果 */
.pg-result { text-align: center; }
.pg-result-emoji { font-size: 64px; line-height: 1; margin-bottom: 10px; }
.pg-result-score { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.pg-result-score b { font-size: 40px; color: var(--pg-main); }
.pg-section--ai .pg-result-score b { color: #7be3ee; }
.pg-result-rank { display: inline-block; font-weight: 800; padding: 8px 20px; border-radius: 999px; background: var(--pg-soft); color: var(--pg-main); margin: 12px 0 18px; }
.pg-section--ai .pg-result-rank { background: rgba(109,59,214,.22); color: #d7c6ff; }
.pg-result-msg { font-size: 15px; line-height: 1.9; color: var(--text-mid, #526658); margin-bottom: 24px; }
.pg-section--ai .pg-result-msg { color: #c2b8e0; }
.pg-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- ゲーム共通 ---------- */
.pg-game-hud { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-stat { background: var(--pg-soft); border-radius: 12px; padding: 10px 18px; text-align: center; min-width: 92px; }
.pg-section--ai .pg-stat { background: rgba(109,59,214,.16); }
.pg-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-mid, #526658); text-transform: uppercase; }
.pg-section--ai .pg-stat-label { color: #b0a3d6; }
.pg-stat-value { font-size: 26px; font-weight: 900; color: var(--pg-main); line-height: 1.1; }
.pg-section--ai .pg-stat-value { color: #efeafc; }

/* 反射神経ゲーム盤面 */
.pg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 420px; margin: 0 auto;
}
.pg-cell {
  aspect-ratio: 1 / 1; border-radius: 16px; border: 2px dashed var(--border, #e0e6e1);
  background: #fff; font-size: clamp(30px, 8vw, 46px); cursor: pointer;
  display: grid; place-items: center; user-select: none;
  transition: transform .08s, background .15s; line-height: 1;
}
.pg-section--ai .pg-cell { background: #241a47; border-color: rgba(255,255,255,.10); }
.pg-cell.is-live { border-style: solid; border-color: var(--pg-main); animation: pgPop .2s ease; background: var(--pg-soft); }
.pg-section--ai .pg-cell.is-live { background: rgba(40,199,214,.12); border-color: #28c7d6; }
.pg-cell:active { transform: scale(.92); }
@keyframes pgPop { from { transform: scale(.6); } to { transform: scale(1); } }
.pg-cell.is-hit { animation: pgHit .3s ease; }
@keyframes pgHit { 50% { transform: scale(1.25) rotate(8deg); } }

.pg-game-center { text-align: center; }
.pg-game-overlay {
  text-align: center; padding: 20px 0;
}
.pg-game-overlay p { font-size: 15px; line-height: 1.9; color: var(--text-mid, #526658); margin: 0 auto 22px; max-width: 520px; }
.pg-section--ai .pg-game-overlay p { color: #c2b8e0; }
.pg-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin: 18px 0 26px; }
.pg-legend span { display: inline-flex; align-items: center; gap: 6px; }

.pg-hi { font-size: 13px; font-weight: 700; color: var(--pg-main); margin-top: 16px; text-align: center; }
.pg-section--ai .pg-hi { color: #c9b6ff; }

/* プロンプト道場 */
.pg-dojo-scenario { font-weight: 800; font-size: 17px; line-height: 1.7; margin: 0 0 6px; }
.pg-dojo-goal { font-size: 14px; color: var(--text-mid, #526658); margin: 0 0 20px; }
.pg-section--ai .pg-dojo-goal { color: #b8acdc; }
.pg-dojo-prompt {
  display: block; width: 100%; text-align: left; font-family: inherit;
  font-size: 14.5px; line-height: 1.7; font-weight: 600;
  background: #241a47; color: #efeafc; border: 2px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: all .18s;
}
.pg-dojo-prompt:hover:not(:disabled) { border-color: #28c7d6; transform: translateY(-2px); }
.pg-dojo-prompt:disabled { cursor: default; }
.pg-dojo-prompt.is-best { border-color: #28c7d6; background: rgba(40,199,214,.16); }
.pg-dojo-prompt.is-bad { border-color: #e2574c; background: rgba(226,87,76,.14); opacity: .85; }
.pg-dojo-prompt .pg-dojo-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; margin-left: 8px; }
.pg-dojo-prompt.is-best .pg-dojo-tag { background: #28c7d6; color: #06222a; }
.pg-dojo-prompt.is-bad .pg-dojo-tag { background: #e2574c; color: #fff; }

@media (max-width: 600px) {
  .pg-quiz-next { text-align: stretch; }
  .pg-quiz-next .pg-btn { width: 100%; }
}