/* ===== 色・寸法 ===== */
:root {
  --bg: #fff7e6;
  --panel: #ffffff;
  --text: #4a3b2a;
  --text-sub: #8a7a66;
  --primary: #ff9f43;
  --primary-dark: #e8862a;
  --primary-shadow: #d9771f;
  --key: #ffffff;
  --key-shadow: #e3d5bd;
  --key-sub: #e8f1ff;
  --key-sub-shadow: #bcd0ef;
  --ok: #4cc38a;
  --ok-shadow: #36a672;
  --miss: #ff6b6b;
  --miss-off: #e5ddd0;
  --radius: 20px;
  --radius-sm: 14px;
}

/* ===== ネイティブアプリに近い操作感 ===== */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;       /* ダブルタップ拡大の防止（スクロールは使える） */
}

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
  font-weight: 700;
  overflow: hidden;
}

/* 縦長の画面を中央に表示（タブレット・PC） */
#app {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}

.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}
.screen[hidden] { display: none; }

/* ===== ボタン共通（押した瞬間に沈む） ===== */
.btn {
  appearance: none;
  border: none;
  border-radius: var(--radius);
  padding: 14px 24px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 5px 0 var(--key-shadow);
  cursor: pointer;
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--key-shadow);
}
.btn-primary {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 5px 0 var(--primary-shadow);
}
.btn-primary:active { box-shadow: 0 1px 0 var(--primary-shadow); }
.btn-large { width: 100%; font-size: 1.6rem; padding: 22px 24px; }

/* ===== ホーム ===== */
.home-body {
  margin: auto 0;
  text-align: center;
}
.logo {
  margin: 0 0 8px;
  font-size: 3rem;
  color: var(--primary-dark);
  letter-spacing: 0.05em;
}
.tagline {
  margin: 0 0 48px;
  color: var(--text-sub);
  font-size: 1.1rem;
}

.btn-secondary { font-size: 1.3rem; padding: 16px 24px; }
.btn-small { padding: 8px 16px; font-size: 0.95rem; box-shadow: 0 3px 0 var(--key-shadow); }
.btn-danger { color: #fff; background: var(--miss); box-shadow: 0 5px 0 #d94f4f; }
.btn-danger:active { box-shadow: 0 1px 0 #d94f4f; }

.home-buttons { display: grid; gap: 12px; }
.home-buttons .btn-large { padding: 18px 24px; font-size: 1.4rem; }
.home-sub-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-sub-buttons .btn { padding: 14px 8px; font-size: 1.15rem; }
#screen-home { overflow-y: auto; overscroll-behavior: contain; }

/* ===== だんのえらび ===== */
.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--miss-off);
  border-radius: var(--radius);
}
.segment-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
.segment-3 .segment-btn { font-size: 1rem; padding: 12px 4px; }
.segment-btn {
  appearance: none;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  padding: 14px 8px;
  background: transparent;
  font: inherit;
  font-size: 1.15rem;
  color: var(--text-sub);
  transition: background 0.05s, transform 0.05s;
}
.segment-btn:active { transform: scale(0.97); }
.segment-btn[aria-pressed="true"] {
  background: var(--panel);
  color: var(--primary-dark);
  box-shadow: 0 2px 0 var(--key-shadow);
}
.dan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dan-btn {
  appearance: none;
  border: none;
  border-radius: var(--radius);
  height: clamp(64px, 12dvh, 96px);
  font: inherit;
  font-size: 1.5rem;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 5px 0 var(--key-shadow);
  transition: transform 0.05s, box-shadow 0.05s, background 0.05s;
}
.dan-btn small { display: block; font-size: 0.8rem; color: var(--text-sub); }
.dan-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--key-shadow); background: #fff1d6; }

/* ===== 苦手の一覧（きろく） ===== */
.weak-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.weak-list li {
  padding: 10px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.weak-list[hidden] { display: none; }
.whoami { margin: 0 0 20px; font-size: 1.2rem; color: var(--text-sub); }
.whoami strong { color: var(--text); font-size: 1.5rem; }
.warn { margin: 20px 0 0; font-size: 0.85rem; color: var(--miss); }
.warn[hidden] { display: none; }

/* ===== 入力欄（ここだけは文字入力できるようにする） ===== */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}
.text-input {
  width: 100%;
  padding: 14px 16px;
  border: 3px solid var(--key-shadow);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font: inherit;
  font-size: 1.2rem;  /* 16px以上にして iPhone の自動拡大を避ける */
  color: var(--text);
  outline: none;
}
.text-input:focus { border-color: var(--primary); }

/* ===== サブ画面（プロフィール・きろく共通） ===== */
.sub-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
}
.sub-title { margin: 0; font-size: 1.3rem; color: var(--primary-dark); }
.sub-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 2px 16px;
}

/* ===== プロフィール ===== */
.profile-lead { margin: 4px 0 16px; font-size: 1.1rem; text-align: center; color: var(--text-sub); }
.profile-lead[hidden], .profile-full[hidden], .profile-list[hidden] { display: none; }
.profile-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--key-shadow);
}
.profile-row.current { outline: 3px solid var(--primary); }
.profile-pick {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 1.3rem;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-pick:active { background: #fff1d6; }
.profile-mini {
  min-height: 44px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--key-sub);
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
}
.profile-mini.danger { background: #ffe3e3; color: #c84444; }
.profile-mini:active { filter: brightness(0.92); }

.profile-form { display: grid; gap: 8px; }
.form-label { font-size: 1rem; color: var(--text-sub); }
.form-error { margin: 0; min-height: 1.2em; font-size: 0.95rem; color: var(--miss); }
.form-actions { display: flex; gap: 12px; }
.form-actions .btn { flex: 1; }
.form-actions .btn[hidden] { display: none; }
.profile-full { margin: 12px 0 0; text-align: center; color: var(--text-sub); }

/* ===== 削除の確認 ===== */
.modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(74, 59, 42, 0.45);
}
.modal[hidden] { display: none; }
.modal-card {
  width: 100%;
  padding: 24px 20px 20px;
  background: var(--panel);
  border-radius: var(--radius);
  text-align: center;
}
.modal-text { margin: 0 0 20px; font-size: 1.15rem; line-height: 1.6; white-space: pre-line; }
.modal-actions { display: grid; gap: 12px; }
.modal-actions.swapped .btn-danger { order: 2; }

/* ===== きろく ===== */
.section-title { margin: 16px 0 8px; font-size: 1.05rem; color: var(--text-sub); }
.section-title:first-child { margin-top: 4px; }
.empty { margin: 0 0 8px; padding: 14px; background: var(--panel); border-radius: var(--radius-sm); text-align: center; color: var(--text-sub); }
.empty[hidden] { display: none; }

.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranking li {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.rank-no { font-size: 1.2rem; color: var(--primary-dark); }
.ranking li.top .rank-no { font-size: 1.5rem; }
.rank-score { font-size: 1.5rem; }
.rank-sub { font-size: 0.85rem; color: var(--text-sub); }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history-item { background: var(--panel); border-radius: var(--radius-sm); overflow: hidden; }
.history-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.history-head:active { background: #fff1d6; }
.history-date { font-size: 0.8rem; color: var(--text-sub); }
.history-left { display: grid; gap: 2px; min-width: 0; }
.history-title { font-size: 1.05rem; }
.nobr { display: inline-block; margin-right: 0.7em; }
.history-score { font-size: 1.3rem; text-align: right; }
.history-sub { font-size: 0.85rem; color: var(--text-sub); }
.history-wrong { margin: 0; padding: 4px 12px 10px; list-style: none; border-top: 2px dashed var(--miss-off); }
.history-wrong[hidden] { display: none; }
.history-wrong li { display: flex; justify-content: space-between; padding: 6px 0; font-size: 1.1rem; }
.history-wrong .tag { font-size: 0.8rem; color: var(--miss); }
.history-none { padding: 8px 12px 12px; margin: 0; text-align: center; color: var(--ok-shadow); border-top: 2px dashed var(--miss-off); }

/* ===== 問題画面 ===== */
.quiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.btn-quit {
  padding: 8px 16px;
  font-size: 0.95rem;
  box-shadow: 0 3px 0 var(--key-shadow);
}
.quiz-stats {
  display: flex;
  gap: 14px;
  font-size: 0.95rem;
  color: var(--text-sub);
}
.quiz-stats strong { color: var(--text); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.quiz-stats .stat { white-space: nowrap; }
/* 幅が狭い端末（iPhone SE など 320px 前後）では、のこり・タイムが折り返さないよう、少し小さくする */
@media (max-width: 340px) {
  .quiz-stats { gap: 8px; font-size: 0.8rem; }
  .quiz-stats strong { font-size: 1rem; }
  .quiz-top { gap: 8px; }
}

.quiz-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  gap: clamp(4px, 1.4dvh, 10px);
}

/* 画面の高さが小さい端末（アドレスバーで表示領域が狭い Android など）でも重ならないよう、高さに応じて縮める */
.miss-marks { display: flex; gap: 12px; }
.miss-mark {
  width: 28px;
  height: 28px;
  width: clamp(18px, 3.4dvh, 28px);
  height: clamp(18px, 3.4dvh, 28px);
  border-radius: 50%;
  background: var(--miss-off);
  transition: background 0.1s, transform 0.1s;
}
.miss-mark.on {
  background: var(--miss);
  transform: scale(1.2);
}

.yomi {
  min-height: 1.2em;
  font-size: 1.25rem;
  font-size: clamp(0.8rem, 2.6dvh, 1.5rem);
  line-height: 1.3;
  color: var(--primary-dark);
  letter-spacing: 0.1em;
}

/* はじめる まえ（スタートを おすまで）：もんだいと こたえの らんは かくす（場所はそのまま）。テンキーは つかえない */
.ready-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: clamp(12px, 3dvh, 24px);
}
.ready-panel[hidden] { display: none; }
.ready-label { margin: 0; font-size: 1.25rem; line-height: 1.7; text-align: center; white-space: pre-line; }
.ready-panel .btn { width: min(80%, 320px); }
.is-ready .miss-marks,
.is-ready .yomi,
.is-ready .expression,
.is-ready .answer-box,
.is-ready .feedback,
.is-ready .btn-next { visibility: hidden; }

.expression {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(3rem, 14vw, 4.5rem);
  font-size: clamp(2.4rem, min(14vw, 8.5dvh), 4.5rem);
  line-height: 1.1;
}
.op { color: var(--primary-dark); }

.answer-box {
  min-width: 140px;
  min-height: 84px;
  min-height: clamp(56px, 10dvh, 84px);
  padding: 4px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 4px solid var(--primary);
  border-radius: var(--radius);
  font-size: 3rem;
  font-size: clamp(2.2rem, 6.5dvh, 3rem);
  font-variant-numeric: tabular-nums;
}
.answer-box.shake { animation: shake 0.3s; }
.answer-box.reveal { border-color: var(--ok); color: var(--ok-shadow); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.feedback {
  min-height: 1.6em;
  font-size: 1.15rem;
  color: var(--miss);
  text-align: center;
}
.feedback.reveal { color: var(--ok-shadow); }

.btn-next {
  min-width: 200px;
  padding-block: clamp(8px, 1.8dvh, 14px);
  background: var(--ok);
  box-shadow: 0 5px 0 var(--ok-shadow);
}
.btn-next:active { box-shadow: 0 1px 0 var(--ok-shadow); }
.btn-next[hidden] { display: block; visibility: hidden; } /* 場所を確保して式がずれないように */

/* ===== テンキー ===== */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 8px;
}
.keypad.disabled { opacity: 0.35; pointer-events: none; }

.key {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  height: clamp(54px, 9.5dvh, 72px);
  height: clamp(44px, 8.5dvh, 72px);
  font: inherit;
  font-size: 1.8rem;
  color: var(--text);
  background: var(--key);
  box-shadow: 0 5px 0 var(--key-shadow);
  cursor: pointer;
  transition: transform 0.05s, box-shadow 0.05s, background 0.05s;
}
.key:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--key-shadow);
  background: #fff1d6;
}
.key-sub { font-size: 1.15rem; background: var(--key-sub); box-shadow: 0 5px 0 var(--key-sub-shadow); }
.key-sub:active { box-shadow: 0 1px 0 var(--key-sub-shadow); background: #d4e4ff; }
.key-ok { font-size: 1.15rem; color: #fff; background: var(--ok); box-shadow: 0 5px 0 var(--ok-shadow); }
.key-ok:active { box-shadow: 0 1px 0 var(--ok-shadow); background: var(--ok-shadow); }

/* ===== 結果画面 ===== */
.result-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}
.result-title { margin: 8px 0 12px; font-size: 1.6rem; color: var(--primary-dark); }

.best-banner {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: #ffe9a8;
  color: #9a6400;
  font-size: 1.3rem;
}
.rank-banner {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: #d6f3e4;
  color: var(--ok-shadow);
  font-size: 1.3rem;
  font-size: clamp(1rem, 5.2vw, 1.3rem);   /* 幅320pxでも1行に収める */
}
.rank-note { margin: 0 0 10px; font-size: 1.05rem; color: var(--text-sub); }
.best-banner[hidden], .rank-banner[hidden], .rank-note[hidden] { display: none; }

.score-card {
  padding: 18px 12px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--key-shadow);
}
.score-label { color: var(--text-sub); font-size: 1rem; }
.score-value { font-size: 4rem; line-height: 1.1; color: var(--primary-dark); font-variant-numeric: tabular-nums; }

.result-stats {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 2), 1fr);
  gap: 12px;
  margin: 14px 0;
}
.result-stats:empty { display: none; }
.result-stats.span-last > div:last-child { grid-column: 1 / -1; }
.wrong-box[hidden] { display: none; }
.result-stats div {
  padding: 12px 8px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}
.result-stats dt { color: var(--text-sub); font-size: 0.9rem; }
.result-stats dd { margin: 4px 0 0; font-size: 1.5rem; }

.wrong-box {
  padding: 14px;
  background: var(--panel);
  border-radius: var(--radius);
  text-align: left;
}
.wrong-box h3 { margin: 0 0 8px; font-size: 1.05rem; text-align: center; }
.wrong-none { margin: 8px 0; text-align: center; color: var(--ok-shadow); }
.wrong-none[hidden] { display: none; }
.wrong-list { list-style: none; margin: 0; padding: 0; }
.wrong-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 2px dashed var(--miss-off);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
.wrong-list li:last-child { border-bottom: none; }
.wrong-list .tag { font-size: 0.8rem; color: var(--miss); }

.result-actions {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

/* ===== 効果音の ON/OFF（ホーム） ===== */
.sound-toggle { margin-top: 18px; }
.sound-toggle[hidden] { display: none; }
.sound-toggle[aria-pressed="false"] { color: var(--text-sub); }

/* ===== ホーム：画面の高さが小さい端末でも、全部のボタンが収まるように縮める ===== */
.logo { font-size: clamp(2.2rem, 7dvh, 3rem); }
.tagline { margin-bottom: clamp(14px, 4.5dvh, 48px); }
.whoami { margin-bottom: clamp(10px, 2.4dvh, 20px); }
.home-buttons { gap: clamp(8px, 1.6dvh, 12px); }
.home-buttons .btn-large { padding-block: clamp(11px, 2.4dvh, 18px); }
.home-sub-buttons .btn { padding-block: clamp(10px, 2dvh, 14px); }
.sound-toggle { margin-top: clamp(10px, 2.2dvh, 18px); }