/* style.css — 中学英単語アプリ（v1.1: ゲーム風デザインに刷新） */
:root {
  --color-bg-1: #7c6cf7;
  --color-bg-2: #5b8dfb;
  --color-surface: #ffffff;
  --color-primary: #ff8a3d;
  --color-primary-dark: #e26f22;
  --color-accent: #4a6cf7;
  --color-success: #2fae5f;
  --color-danger: #e5484d;
  --color-star: #ffb400;
  --color-text: #1f2430;
  --color-muted: #6b7280;
  --radius: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(160deg, var(--color-bg-1), var(--color-bg-2));
  background-attachment: fixed;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  padding: 16px;
  min-height: 100vh;
}

#app { width: 100%; max-width: 480px; }

.screen {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px 18px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.mascot { font-size: 3rem; text-align: center; margin-bottom: -6px; }
h1 { font-size: 1.4rem; margin: 0 0 4px; text-align: center; }
h2 { font-size: 1rem; color: var(--color-muted); margin: 20px 0 8px; }
.subtitle { color: var(--color-muted); margin: 0 0 16px; text-align: center; }

.empty-state { color: #7a5c00; background: #fff3cf; padding: 12px; border-radius: 10px; text-align: center; }

.mastery-summary { display: flex; flex-direction: column; gap: 8px; }
.category-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.category-name { width: 90px; flex-shrink: 0; }
.progress-bar { flex: 1; height: 10px; background: #e5e7ef; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent), #7c6cf7); border-radius: 6px; }
.category-pct { width: 40px; text-align: right; color: var(--color-muted); }

.btn-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.btn {
  flex: 1 1 auto;
  min-width: 100px;
  padding: 14px 14px;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--color-primary-dark);
  transition: transform 0.08s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-primary-dark); }
.btn.selected { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.btn-secondary { background: #eef0f7; color: var(--color-text); box-shadow: 0 4px 0 #d3d7e6; margin-top: 16px; }
.mode-hint { min-height: 1.2em; font-size: 0.78rem; color: var(--color-danger); margin: 6px 2px 0; }
.btn-success { background: var(--color-success); box-shadow: 0 4px 0 #1e7c43; }
.btn-danger { background: var(--color-danger); box-shadow: 0 4px 0 #b8302f; }
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

.btn-back {
  border: none; background: none; color: var(--color-accent); font-weight: bold;
  font-size: 0.9rem; cursor: pointer; padding: 4px 0 12px; display: block;
}

/* ---- ステージ選択 (SCR-06) ---- */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.stage-card {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.3rem;
}
.stage-card.stage-open { background: #eef0ff; color: var(--color-accent); box-shadow: 0 4px 0 #c3caf7; }
.stage-card.stage-cleared { background: linear-gradient(160deg, #ffe9b3, #ffd166); color: #7a5c00; box-shadow: 0 4px 0 #cf9e2a; }
.stage-card.stage-locked { background: #e9ebf2; color: #9aa0b4; box-shadow: none; cursor: default; }
.stage-card:not([disabled]):active { transform: translateY(3px); box-shadow: none; }
.stage-lock { font-size: 1.4rem; }
.stage-num { font-size: 1.6rem; }
.stage-new { font-size: 0.6rem; background: var(--color-danger); color: #fff; padding: 1px 6px; border-radius: 8px; }
.stage-count { font-size: 0.65rem; font-weight: normal; color: inherit; opacity: 0.8; }

.stars { color: var(--color-star); letter-spacing: 2px; }
.stars.small { font-size: 0.75rem; }
.stars.large { display: block; text-align: center; font-size: 2rem; margin: 8px 0; }

/* ---- 学習セッション共通 ---- */
.session-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.progress-label { color: var(--color-muted); font-size: 0.85rem; font-weight: bold; }
.btn-quit {
  border: none; background: #fdecea; color: var(--color-danger); font-weight: bold;
  font-size: 0.8rem; border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.btn-quit:disabled { opacity: 0.5; }

.card {
  margin: 20px 0;
  min-height: 180px;
  border-radius: var(--radius);
  border: none;
  background: linear-gradient(160deg, #eef0ff, #dfe4ff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  box-shadow: 0 6px 0 #c3caf7;
}
.card:active { transform: translateY(3px); box-shadow: 0 3px 0 #c3caf7; }
.card-front { font-size: 2.2rem; font-weight: bold; color: var(--color-accent); display: flex; align-items: center; gap: 10px; }
.card-back { margin-top: 12px; }
.card-back.hidden, .btn-group.hidden, .feedback.hidden { display: none; }
.meaning { font-size: 1.2rem; font-weight: bold; }
.third-person, .past { color: var(--color-muted); margin: 2px 0; }
.example { margin-top: 10px; font-size: 0.85rem; color: var(--color-muted); }

.quiz-word { font-size: 1.9rem; font-weight: bold; text-align: center; margin: 12px 0 4px; color: var(--color-accent); display: flex; justify-content: center; align-items: center; gap: 10px; }
.quiz-prompt { text-align: center; color: var(--color-muted); margin-bottom: 12px; }

.feedback { margin-top: 14px; text-align: center; font-weight: bold; padding: 10px; border-radius: 10px; }
.feedback-correct { background: #e3f7ea; color: var(--color-success); }
.feedback-incorrect { background: #fdeceb; color: var(--color-danger); }

.btn-speak { background: none; border: none; font-size: 1.3rem; cursor: pointer; }

/* ---- スペル書き取り (v1.2追加) ---- */
#spell-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.spell-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.3rem;
  text-align: center;
  border: 3px solid #dfe4ff;
  border-radius: 999px;
  background: #fbfbff;
  color: var(--color-text);
  letter-spacing: 1px;
}
.spell-input:focus { outline: none; border-color: var(--color-accent); }
.spell-input:disabled { opacity: 0.7; }

.btn-review { background: var(--color-accent); box-shadow: 0 4px 0 #3450c9; }

/* ---- ステージ結果 (SCR-07) ---- */
.clear-banner { text-align: center; font-size: 1.4rem; font-weight: bold; margin-bottom: 4px; }
.screen-clear { position: relative; overflow: hidden; }
.screen-clear::before {
  content: "🎉 ✨ 🎊 ⭐ 🎉 ✨ 🎊 ⭐";
  position: absolute; top: -10px; left: 0; right: 0;
  font-size: 1.4rem; text-align: justify; opacity: 0.5;
  animation: confetti-fall 2.2s ease-in forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(40px) rotate(15deg); opacity: 0; }
}
.result-score { font-size: 1.6rem; font-weight: bold; color: var(--color-primary); text-align: center; }

.toast {
  position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: 12px 18px; border-radius: 10px;
  font-size: 0.85rem; max-width: 90vw; text-align: center; transition: bottom 0.3s ease;
}
.toast-show { bottom: 20px; }

@media (prefers-color-scheme: dark) {
  :root { --color-surface: #1e2130; --color-text: #f0f1f6; --color-muted: #9aa0b4; }
  .empty-state { background: #4a3c14; color: #ffe9b3; }
  .progress-bar { background: #2c3044; }
  .btn-secondary { background: #2c3044; color: var(--color-text); box-shadow: 0 4px 0 #14161f; }
  .card { background: linear-gradient(160deg, #2a2f47, #232739); box-shadow: 0 6px 0 #14161f; }
  .stage-card.stage-open { background: #2a2f47; box-shadow: 0 4px 0 #14161f; }
  .stage-card.stage-locked { background: #262a3d; color: #6b7280; }
  .btn-quit { background: #3a2224; }
  .spell-input { background: #232739; border-color: #2c3044; color: var(--color-text); }
}

@media (max-width: 340px) {
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
}