:root{
  --paper:#F6F6F3;
  --paper-deep:#ECECE7;
  --ink:#1D232B;
  --ink-soft:#5B6472;
  --pine:#1F3A5F;
  --pine-deep:#152A45;
  --pine-pale:#DCE6EE;
  --gold:#A8641C;
  --gold-pale:#F7EBDC;
  --card:#FFFFFF;
  --card-border:#C3C8CF;
  --correct:#2E7D46;
  --correct-deep:#1F5C34;
  --wrong:#C0392B;
  --wrong-deep:#8C2F22;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px -12px rgba(31,42,60,0.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  color:var(--ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:20px 14px 60px;
}
.app{ width:100%; max-width:440px; }
.brand-row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:14px; padding:0 4px;
}
.brand{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:14px;
  color:var(--pine-deep); letter-spacing:.02em;
}
.home-link{ font-size:12px; color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--ink-soft); }

.screen{display:none;}
.screen.active{display:block; animation:fadeUp .38s cubic-bezier(.2,.8,.2,1);}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

.hero{
  background:#EAF0F6;
  border:1.5px solid #C9D5E3;
  color:var(--ink);
  border-radius:var(--radius-lg);
  padding:26px 22px 24px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-30px; bottom:-40px;
  width:150px; height:150px; border-radius:50%; background:rgba(31,58,95,0.05);
}
.hero-eyebrow{ font-size:12px; letter-spacing:.14em; color:var(--pine); font-weight:700; }
.hero-title{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:22px; font-weight:900; line-height:1.5; margin:8px 0 10px;
  color:var(--pine-deep);
}
.hero-sub{ font-size:13px; line-height:1.7; color:var(--ink-soft); max-width:30ch; }
.back-link.on-hero{
  display:inline-block; font-size:12px; color:var(--pine);
  text-decoration:none; margin-bottom:10px;
}

.theme-grid{ display:flex; flex-direction:column; gap:10px; }
.cluster-block{ margin-bottom:6px; }
.cluster-heading{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:13px;
  color:var(--pine-deep); margin:22px 0 10px; padding-left:2px;
  border-left:4px solid var(--gold); padding-left:10px;
}
.cluster-block:first-of-type .cluster-heading{ margin-top:4px; }
.theme-card{
  background:var(--card); border:1.5px solid var(--card-border); border-radius:var(--radius-md);
  padding:15px 18px; display:flex; align-items:center; gap:12px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align:left; width:100%;
}
.theme-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--pine); }
.theme-card:active{ transform:translateY(0) scale(.99); }
.theme-num{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:13px;
  background:var(--gold-pale); color:#8A4B12;
}
.theme-body{ flex:1; }
.theme-name{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:14.5px; margin-bottom:2px; }
.theme-count{ font-size:11.5px; color:var(--ink-soft); }
.theme-arrow{ color:var(--ink-soft); font-size:18px; }

.level-menu{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.level-card{
  background:var(--card); border:1.5px solid var(--card-border); border-radius:var(--radius-md);
  padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align:left; width:100%;
}
.level-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--pine); }
.level-card:active{ transform:translateY(0) scale(.99); }
.level-badge{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:16px;
  background:var(--pine-pale); color:var(--pine-deep);
}
.level-body{ flex:1; }
.level-name{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:15px; margin-bottom:3px; }
.level-desc{ font-size:12px; color:var(--ink-soft); line-height:1.5; }
.level-count{ font-size:11px; color:var(--gold); font-weight:700; margin-top:4px; }
.level-arrow{ color:var(--ink-soft); font-size:18px; }

.quiz-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; }
.quiz-level-tag{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:11.5px; font-weight:700;
  background:var(--gold-pale); color:#8A4B12; padding:5px 12px; border-radius:999px;
}
.back-link{ font-size:12px; color:var(--ink-soft); text-decoration:none; display:flex; align-items:center; gap:3px; }

.level-menu .level-card.part-card .level-badge{ background:var(--pine-pale); }

.dots{ display:flex; gap:6px; justify-content:center; margin:0 0 18px; flex-wrap:wrap; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--card-border); transition:background .2s ease, transform .2s ease; }
.dot.done{ background:var(--pine); }
.dot.now{ background:var(--gold); transform:scale(1.3); }

.card{
  background:var(--card); border:1.5px solid var(--card-border); border-radius:var(--radius-lg);
  padding:26px 22px 22px; box-shadow:var(--shadow); min-height:340px; display:flex; flex-direction:column;
}
.q-eyebrow{ font-size:11.5px; color:var(--gold); font-weight:700; letter-spacing:.06em; margin-bottom:10px; }
.q-text{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:19px; font-weight:700; line-height:1.6;
  margin-bottom:22px; color:var(--ink);
}
.choices{ display:flex; flex-direction:column; gap:10px; flex:1; }
.choice{
  text-align:left; background:#fff; border:2px solid #a9afb8; border-radius:var(--radius-sm);
  padding:13px 16px; font-size:15px; font-weight:600; line-height:1.55; color:var(--ink); cursor:pointer;
  display:flex; gap:10px; align-items:center; min-height:52px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .08s ease, background .12s ease, border-color .12s ease, opacity .2s ease;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}
.choice-mark{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:2px solid #8a9099;
  font-size:11.5px; font-weight:700; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; background:#fff;
}
.choice-text{ flex:1; align-self:flex-start; padding-top:1px; }
@media (hover:hover){
  .choice:not(.locked):hover{ border-color:var(--pine); background:#f4f7fb; }
}
/* 指が触れている間（押している間）：すぐ反応 */
.choice:not(.locked):active,
.choice.is-pressing{ border-color:var(--pine); background:#e3ebf5; transform:translateY(1px) scale(.985); }

/* ① 選んだ直後（正誤はまだ出さない）：選んだものだけをはっきり分かる形で示す */
.choice.picked{ border:3px solid var(--pine); padding:12px 15px; background:#eef3f9; transform:none; }
.choice.picked .choice-mark{ background:var(--pine); border-color:var(--pine); color:#fff; }

/* ② 少し間を置いてから出す正解・不正解（色だけに頼らず、印と文字でも伝える） */
.choice.correct{ border:3px solid var(--correct); padding:12px 15px; background:#E4F1E7; color:var(--ink); animation:pochi .32s ease; }
.choice.correct .choice-mark{ background:var(--correct); border-color:var(--correct); color:#fff; }
.choice.wrong{ border:3px solid #B5523F; padding:12px 15px; background:#F8EAE6; color:var(--ink); opacity:1; }
.choice.wrong .choice-mark{ background:#B5523F; border-color:#B5523F; color:#fff; }
.choice.dim{ opacity:.65; }
.choice.locked{ cursor:default; }
.choice .result-icon{
  flex:0 0 auto; margin-left:auto; padding-left:8px; font-size:12px; font-weight:700; line-height:1.3;
  white-space:nowrap;
}
.choice.correct .result-icon{ color:var(--correct-deep); }
.choice.wrong .result-icon{ color:#8C3A2B; }
.result-msg{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:900; font-size:16px; margin-bottom:8px;
}
.result-msg.is-correct{ color:var(--correct-deep); }
.result-msg.is-wrong{ color:#8C3A2B; }
/* テーマ・レベル・パートのカードも、触れた瞬間に反応 */
.theme-card, .level-card{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.theme-card.is-pressing, .level-card.is-pressing{ border-color:var(--pine); background:#f4f7fb; transform:scale(.99); }
@keyframes pochi{ 0%{transform:scale(1);} 45%{transform:scale(1.035);} 100%{transform:scale(1);} }

.explain{
  margin-top:16px; background:var(--gold-pale); border-radius:var(--radius-sm); padding:15px 16px;
  font-size:13.5px; line-height:1.75; color:#6E3F0E; display:none;
}
.explain.show{ display:block; animation:fadeUp .3s ease; }
.explain-label{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:12px; color:#8A4B12;
  margin-bottom:6px; display:flex; align-items:center; gap:5px;
}

.next-row{ margin-top:18px; display:none; }
.next-row.show{ display:block; animation:fadeUp .3s ease; }
.btn-next{
  width:100%; background:var(--pine); color:#fff; border:none; border-radius:999px; padding:14px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:15px; cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn-next:hover{ background:var(--pine-deep); transform:translateY(-1px); }
.btn-next:active{ transform:translateY(0) scale(.98); }

.end-card{
  background:var(--card); border:1.5px solid var(--card-border); border-radius:var(--radius-lg);
  padding:34px 24px 26px; text-align:center; box-shadow:var(--shadow);
}
.end-badge{
  width:64px; height:64px; border-radius:50%; background:var(--gold-pale);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 16px;
}
.end-title{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:900; font-size:20px; margin-bottom:8px; }
.end-sub{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:26px; }
.end-actions{ display:flex; flex-direction:column; gap:10px; }
.btn-primary{
  background:var(--pine); color:#fff; border:none; border-radius:999px; padding:14px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:14.5px; cursor:pointer;
}
.btn-secondary{
  background:#fff; color:var(--pine-deep); border:1.5px solid var(--pine-pale); border-radius:999px;
  padding:13px; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:14px; cursor:pointer;
}
.btn-ghost{
  background:none; color:var(--ink-soft); border:none; padding:8px; font-size:12.5px;
  cursor:pointer; text-decoration:underline;
}

.footer-note{ text-align:center; font-size:10.5px; color:#8A93A0; margin-top:22px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}