/* =========================================================
   スマートフォン向けレイアウト
   通常は <link media="(max-width: 600px)"> により画面幅で自動適用される。
   ui-prefs.js の表示切替で media 属性が
   "all"（スマホ版を強制）/ "not all"（PC版を強制）に書き換えられる。
   ========================================================= */

.container { padding: 14px 10px 48px; }
.card { padding: 18px 14px; border-radius: 10px; }

/* padding はテーマ切替ボタンとタイトルの重なりを避けるため */
.app-header { margin-bottom: 16px; padding: 0 44px; }
.app-header h1 { font-size: 1.3rem; }
.card h2 { font-size: 1.15rem; }

/* 設定項目はラベルを上に置き、セレクトを全幅にする */
.start-options { flex-direction: column; align-items: stretch; gap: 4px; margin: 14px 0; }
.start-options label { font-size: 0.85rem; color: var(--muted); }
.start-options select,
.start-options .count-input { width: 100%; }

/* 主要ボタンは全幅にしてタップしやすくする */
.mode-buttons,
.quiz-actions { flex-direction: column; align-items: stretch; }
.mode-buttons .btn,
.quiz-actions .btn,
#login-btn,
#restart-btn { width: 100%; }

/* 問題画面のメタ情報は左詰めで自然に折り返す */
.quiz-meta { justify-content: flex-start; }

/* 成績一覧の絞り込みも縦に並べる */
.stats-controls { flex-direction: column; align-items: stretch; gap: 0; }

/* ===== 成績一覧テーブル: 横スクロールさせずカード型で表示する ===== */
#stats-content .stats-table,
#stats-content .stats-table tbody { display: block; }
#stats-content .stats-table thead { display: none; }
#stats-content .stats-table tr {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "no    cat"
    "q     q"
    "marks action";
  gap: 6px 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--card-bg);
}
#stats-content .stats-table td {
  display: block;
  border: none;
  padding: 0;
}
/* 1列目: 問題番号 */
#stats-content .stats-table td:nth-child(1) {
  grid-area: no;
  font-weight: 600;
}
/* 2列目: 問題文 */
#stats-content .stats-table td:nth-child(2) { grid-area: q; }
/* 3列目: 分類（カテゴリー / ジャンル） */
#stats-content .stats-table td:nth-child(3) {
  grid-area: cat;
  white-space: normal;
  text-align: right;
}
/* 4列目: 直近5回の成績 */
#stats-content .stats-table td:nth-child(4) { grid-area: marks; }
/* 5列目: 回答・解説ボタン */
#stats-content .stats-table td:nth-child(5) {
  grid-area: action;
  justify-self: end;
}

/* ===== ゲーミフィケーション ===== */

/* ヘッダー: 効果音切替ボタンは左上に置く
   （右側に 2 個並べると 390px 幅でタイトルが折り返すため。左右 44px の余白はそのまま） */
.icon-btn-second { right: auto; left: 0; }

/* プレイヤーカード: 連続日数・今日の回答数は下段に回す */
.player-card { padding: 12px 14px; }
.pc-top { flex-wrap: wrap; gap: 10px 12px; }
.pc-icon { font-size: 2rem; }
.pc-side {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-align: left;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

/* ミッション: 進捗数と XP を右側の列に縦に並べ、ラベルの幅を確保する */
.mission-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "check body count"
    "check body xp";
  gap: 2px 10px;
}
.mission-check { grid-area: check; }
.mission-body { grid-area: body; }
.mission-count { grid-area: count; justify-self: end; align-self: end; }
.mission-xp { grid-area: xp; justify-self: end; align-self: start; }

/* チャレンジ: ボスは 1 列、タイムアタックボタンは全幅 */
.boss-buttons { grid-template-columns: 1fr; }
.ta-btn { width: 100%; }

/* 結果画面: ランクを上に置いて縦積み・中央揃え */
.result-top { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.result-main { width: 100%; }

/* マイページ */
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-value { font-size: 1.25rem; }
.badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skill-row { padding-left: 10px; }
.boss-record { flex-wrap: wrap; }

/* 演出: トーストは下部に全幅、コンボ数字は少し小さく */
.toast-container {
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  max-width: none;
}
.combo-num { font-size: 3rem; }
.overlay-card { padding: 22px 18px; }
.levelup-level { font-size: 2.6rem; }
/* OSA 模擬試験: 上部バーは 2 段、前へ / 次へを横並びにして見直しマークは全幅、表は横スクロール */
.exam-bar { gap: 4px 10px; padding: 8px 10px; font-size: 0.82rem; }
.exam-title { width: 100%; }
.exam-nav { display: grid; grid-template-columns: 1fr 1fr; }
.exam-nav .exam-mark-btn { grid-column: 1 / -1; order: 3; }
.exam-nav .btn { padding: 12px 10px; }
.exam-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.exam-panel { padding: 12px; }
.scorecard-score { font-size: 1.6rem; }
.score-table th,
.score-table td { padding: 6px 8px; font-size: 0.82rem; }