:root{
  --paper:#F7F5F0;
  --paper-deep:#ECE8DF;
  --ink:#1D232B;
  --ink-soft:#645C4E;
  --pine:#3F5D4C;
  --pine-deep:#2C4436;
  --pine-pale:#DCE6DE;
  --gold:#B98A2E;
  --gold-pale:#F3E3C2;
  --card:#FFFFFF;
  --card-border:#C8C6BF;
  --correct:#2E7D46;
  --correct-deep:#1F5C34;
  --wrong:#B23A2E;
  --wrong-deep:#7E271E;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px -12px rgba(46,42,34,0.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-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:"Zen Maru Gothic",sans-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 base ---- */
.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 ---- */
.hero{
  background:#EAF0E7;
  border:1.5px solid #C9D6C9;
  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(63,93,76,0.06);
}
.hero-eyebrow{ font-size:12px; letter-spacing:.14em; color:var(--pine-deep); font-weight:700; }
.hero-title{
  font-family:"Zen Maru Gothic",sans-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-deep);
  text-decoration:none; margin-bottom:10px;
}

/* ---- theme grid (全9テーマ一覧) ---- */
.theme-grid{ display:flex; flex-direction:column; gap:10px; }
.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:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:13px;
  background:var(--gold-pale); color:#7A5A17;
}
.theme-body{ flex:1; }
.theme-name{ font-family:"Zen Maru Gothic",sans-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 (テーマ内3レベル) ---- */
.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:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16px;
  background:var(--pine-pale); color:var(--pine-deep);
}
.level-body{ flex:1; }
.level-name{ font-family:"Zen Maru Gothic",sans-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 screen ---- */
.quiz-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.quiz-level-tag{
  font-family:"Zen Maru Gothic",sans-serif; font-size:11.5px; font-weight:700;
  background:var(--gold-pale); color:#7A5A17; 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; }

.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:"Zen Maru Gothic",sans-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:"Zen Kaku Gothic New",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:#f3f7f2; }
}
/* 指が触れている間（押している間）：落ち着いたグレーですぐ反応 */
.choice:not(.locked):active,
.choice.is-pressing{ border-color:#4a525c; background:#e9ebee; transform:translateY(1px) scale(.985); }

/* ① 選んだ直後（正誤はまだ出さない）：選んだものだけをはっきり分かる形で示す */
.choice.picked{ border:3px solid var(--pine-deep); padding:12px 15px; background:#eef2ee; transform:none; }
.choice.picked .choice-mark{ background:var(--pine-deep); border-color:var(--pine-deep); 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:"Zen Maru Gothic",sans-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:#f3f7f2; 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:#5B4517; display:none;
}
.explain.show{ display:block; animation:fadeUp .3s ease; }
.explain-label{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:12px; color:#8A6A20;
  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:"Zen Maru Gothic",sans-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); }

/* ---- level end screen ---- */
.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:"Zen Maru Gothic",sans-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:"Zen Maru Gothic",sans-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:"Zen Maru Gothic",sans-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:#A69E8C; margin-top:22px; }

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