/* =========================================================================
 *  PK戦×理科クイズ  スタイルシート
 *  - フォントはメイリオに統一
 *  - テーマカラー: ブルー #0057B8 / #1A7FD4、アクセント: 黄 #FFD700
 * ========================================================================= */

:root {
  --blue-deep: #0057B8;   /* テーマカラー（濃） */
  --blue:      #1A7FD4;   /* テーマカラー（明） */
  --gold:      #FFD700;   /* アクセント（黄） */
  --ink:       #0c2233;   /* 文字（濃紺） */
  --paper:     #ffffff;
  --ok:        #2ecc71;   /* 正解・ゴール */
  --ng:        #e74c3c;   /* 不正解・セーブ */
  --panel-bg:  rgba(8, 30, 56, 0.82);
  --font: "Meiryo", "メイリオ", "MS PGothic", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--paper);
  background: #04101f;
  overflow: hidden;
}

/* ステージ全体（背景写真＋3Dキャンバスを重ねる） */
#stage {
  position: fixed;
  inset: 0;
  background: #04101f url("../assets/stadium.png") center 38% / cover no-repeat;
}

/* 背景上部を少し暗くして文字を読みやすく */
#stage::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,10,24,.55) 0%, rgba(2,10,24,0) 30%,
              rgba(2,10,24,0) 65%, rgba(2,10,24,.55) 100%);
  pointer-events: none;
}

/* 3D描画キャンバス（透明） */
#scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---- 共通パネル ---- */
.panel {
  background: var(--panel-bg);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* ====== スコアボード（上部） ====== */
#scoreboard {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  z-index: 20;
}
#scoreboard .label { font-size: 12px; opacity: .8; letter-spacing: .08em; }
#scoreboard .score {
  font-size: 26px; font-weight: bold; color: var(--gold);
  line-height: 1; min-width: 64px; text-align: center;
}
#scoreboard .kicks { display: flex; gap: 5px; }
#scoreboard .kick-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); background: transparent;
}
#scoreboard .kick-dot.goal { background: var(--gold); border-color: var(--gold); }
#scoreboard .kick-dot.miss { background: var(--ng);  border-color: var(--ng); }
#scoreboard .divider { width: 1px; height: 28px; background: rgba(255,255,255,.25); }

/* ====== 残り時間バー ====== */
#timer-wrap {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  width: min(520px, 86vw); height: 8px;
  background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden;
  z-index: 20; display: none;
}
#timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), #ffe970);
  border-radius: 99px;
  transition: width .1s linear;
}

/* ====== 講師ふきだし ====== */
#coach {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(38vh + 14px);
  width: min(560px, 90vw);
  padding: 12px 18px;
  font-size: 15px; line-height: 1.6;
  z-index: 20; display: none;
}
#coach .who { color: var(--gold); font-weight: bold; margin-right: 6px; }
#coach.show { display: block; animation: pop .25s ease; }

/* ====== 出題パネル（下部） ====== */
#quiz {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 16px;
  width: min(620px, 94vw);
  padding: 18px 18px 16px;
  z-index: 20; display: none;
}
#quiz .q-meta { font-size: 12px; color: var(--gold); letter-spacing: .06em; margin-bottom: 6px; }
#quiz .q-text { font-size: 18px; font-weight: bold; line-height: 1.55; margin-bottom: 14px; }
#choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
  font-family: var(--font);
  text-align: left;
  padding: 13px 14px;
  font-size: 15px; line-height: 1.4;
  color: var(--paper);
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.choice:hover  { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.choice:active { transform: translateY(0); }
.choice:disabled { cursor: default; opacity: .96; }
.choice .mark { display:inline-block; width: 22px; font-weight: bold; color: var(--gold); }
.choice.correct { background: linear-gradient(180deg, #34d27b, #1c9d57); border-color: #eafff2; }
.choice.wrong   { background: linear-gradient(180deg, #ec6759, #c0392b); border-color: #ffe7e2; }
.choice.dim     { opacity: .45; }

/* ====== 方向選択（左/中央/右） ====== */
#aim {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 16px;
  width: min(620px, 94vw);
  padding: 18px;
  z-index: 21; display: none; text-align: center;
}
#aim .title { font-size: 16px; font-weight: bold; margin-bottom: 14px; }
#aim .title b { color: var(--gold); }
#aim-buttons { display: flex; gap: 12px; justify-content: center; }
.aim-btn {
  font-family: var(--font);
  flex: 1; max-width: 170px;
  padding: 18px 10px;
  font-size: 16px; font-weight: bold; color: var(--ink);
  background: linear-gradient(180deg, #fff4b0, var(--gold));
  border: 2px solid #fff; border-radius: 14px; cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
.aim-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.aim-btn .ico { display: block; font-size: 24px; margin-bottom: 4px; }

/* ====== 結果バナー（ゴール/セーブ） ====== */
#flash {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
#flash .word {
  font-size: clamp(48px, 14vw, 130px);
  font-weight: 900; letter-spacing: .04em;
  text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 40px currentColor;
  transform: scale(.4); opacity: 0;
}
#flash.show .word { animation: flashIn .6s cubic-bezier(.2,1.4,.4,1) forwards; }
#flash.goal .word { color: var(--gold); }
#flash.save .word { color: #ff6f61; }

/* ====== 画面（スタート・結果）共通オーバーレイ ====== */
.screen {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,10,24,.78); backdrop-filter: blur(3px);
  padding: 20px;
}
.screen.hidden { display: none; }
.card {
  width: min(560px, 94vw);
  padding: 30px 28px;
  text-align: center;
}
.card h1 {
  font-size: clamp(26px, 6vw, 38px); line-height: 1.2;
  margin-bottom: 6px;
}
.card h1 .gold { color: var(--gold); }
.card .sub { font-size: 14px; opacity: .85; margin-bottom: 22px; line-height: 1.6; }
.card .lead { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }

/* 難易度セレクト */
.diff-label { font-size: 13px; color: var(--gold); margin-bottom: 10px; letter-spacing:.05em; }
.diff { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
.diff button {
  font-family: var(--font);
  flex: 1; padding: 12px 6px;
  font-size: 14px; font-weight: bold; color: var(--paper);
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.25); border-radius: 12px; cursor: pointer;
  transition: all .12s ease;
}
.diff button .lv { display:block; font-size: 11px; opacity:.75; margin-top:3px; font-weight: normal; }
.diff button.active {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-color: var(--gold); color: #fff;
}

/* メインボタン */
.btn-main {
  font-family: var(--font);
  display: inline-block;
  padding: 15px 40px; font-size: 18px; font-weight: bold;
  color: var(--ink);
  background: linear-gradient(180deg, #fff4b0, var(--gold));
  border: none; border-radius: 99px; cursor: pointer;
  box-shadow: 0 8px 0 #b89b00, 0 12px 20px rgba(0,0,0,.4);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-main:hover  { transform: translateY(-2px); }
.btn-main:active { transform: translateY(4px); box-shadow: 0 4px 0 #b89b00, 0 6px 12px rgba(0,0,0,.4); }

/* 結果カードの評価 */
.result-score { font-size: clamp(40px, 12vw, 72px); font-weight: 900; color: var(--gold); line-height: 1; }
.result-score small { font-size: .35em; color: var(--paper); font-weight: bold; }
.rank { font-size: 22px; font-weight: bold; margin: 8px 0 4px; }
.review { text-align: left; margin: 18px 0; max-height: 32vh; overflow-y: auto; }
.review .row { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
.review .row .head { font-weight: bold; margin-bottom: 4px; }
.review .row .res-goal { color: var(--gold); }
.review .row .res-miss { color: #ff8a7d; }

/* ====== ローディング ====== */
#loading {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #04101f; gap: 18px;
}
#loading .ball {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #cfd6dd 60%, #9aa3ad);
  animation: spin 1s linear infinite, bob .6s ease-in-out infinite alternate;
  box-shadow: inset -6px -6px 10px rgba(0,0,0,.25);
}
#loading .txt { font-size: 14px; color: var(--gold); letter-spacing: .08em; }
#loading .bar { width: 220px; height: 6px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s ease; }

/* ====== デバッグ表示 ====== */
#debug {
  position: absolute; top: 8px; left: 8px; z-index: 50;
  font-size: 11px; line-height: 1.5; color: #aef;
  background: rgba(0,0,0,.6); padding: 8px 10px; border-radius: 8px;
  display: none; white-space: pre; font-family: monospace;
}

/* ====== アニメーション ====== */
@keyframes pop      { from { transform: translateX(-50%) scale(.9); opacity:0 } to { transform: translateX(-50%) scale(1); opacity:1 } }
@keyframes flashIn  { 0%{transform:scale(.4);opacity:0} 55%{transform:scale(1.08);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes bob      { to { transform: translateY(-10px) rotate(180deg) } }

/* ====== モバイル ====== */
@media (max-width: 520px) {
  #quiz .q-text { font-size: 16px; }
  #choices { grid-template-columns: 1fr; }
  .choice { padding: 12px; }
  #coach { bottom: calc(40vh + 10px); font-size: 14px; }
  .aim-btn { font-size: 14px; padding: 14px 6px; }
}

/* モーション軽減設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .05ms !important; }
}