/* =========================================================================
   動詞活用トレーナー  ―  Stylesheet
   和の配色 (wairo): 藍 indigo · 朱 vermilion · 常磐 green · 山吹 gold · 墨 sumi
   ========================================================================= */

:root {
  /* 和色 palette */
  --washi:      #f4efe3;   /* 生成り background */
  --washi-2:    #ece4d2;
  --paper:      #fbf8f0;   /* card surface */
  --sumi:       #2b2723;   /* ink text */
  --sumi-soft:  #6f675c;
  --ai:         #16506e;   /* 藍 indigo (primary) */
  --ai-deep:    #0e3a51;
  --ai-soft:    #d7e3ea;
  --shu:        #c23a26;   /* 朱 vermilion (hinomaru / stamp) */
  --shu-soft:   #f0d9d2;
  --tokiwa:     #2f8559;   /* 常磐 green (correct) */
  --tokiwa-soft:#dcefe3;
  --akane:      #a4313f;   /* 茜 red (wrong) */
  --akane-soft: #f3dcdf;
  --yamabuki:   #d99b2b;   /* 山吹 gold (streak / accent) */
  --line:       #ddd2bd;
  --shadow:     0 2px 0 #e4dac6, 0 14px 30px -16px rgba(40,32,22,.45);
  --radius:     20px;

  --serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans:  "DotGothic16", "Enka Dot Gothic 24", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

@font-face {
  font-family: 'Enka Dot Gothic 24';
  font-style: normal;
  font-display: swap;
  src: local('Enka Dot Gothic 24'), local('EnkaDotGothic24'),
       url('../fonts/EnkaDotGothic24.woff2') format('woff2'),
       url('../fonts/EnkaDotGothic24.woff') format('woff'),
       url('../fonts/EnkaDotGothic24.ttf') format('truetype');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--sumi);
  background-color: var(--washi);
  /* subtle seigaiha-ish layered radial + asanoha grid texture */
  background-image:
    radial-gradient(circle at 50% 0, rgba(22,80,110,.05), transparent 60%),
    repeating-linear-gradient(60deg, rgba(120,100,70,.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, rgba(120,100,70,.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(120,100,70,.03) 0 1px, transparent 1px 26px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  min-height: 100%;
}

.tate { /* vertical accent text */
  writing-mode: vertical-rl;
  font-family: var(--serif);
}

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 18px 64px; }

/* ----------------------------------------------------------------- header */
header.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(244,239,227,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 11px; user-select: none; }
.logo .hi {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #e0543c, var(--shu));
  box-shadow: 0 3px 10px -2px rgba(194,58,38,.6), inset 0 -2px 4px rgba(0,0,0,.15);
  flex: 0 0 auto;
  animation: rise .6s cubic-bezier(.2,.9,.3,1.3) both;
}
.logo h1 {
  font-family: var(--serif); font-weight: 600; font-size: 1.32rem;
  letter-spacing: .06em; color: var(--ai-deep);
}
.logo .sub { font-size: .62rem; letter-spacing: .35em; color: var(--sumi-soft); display:block; margin-top:-2px;}

.bar .spacer { flex: 1; }
.stat-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: .82rem; font-weight: 600; color: var(--ai-deep);
  background: var(--paper); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 999px; box-shadow: 0 1px 0 #e4dac6;
}
.stat-chip.fire { color: var(--yamabuki); }
.stat-chip .num { font-family: var(--serif); }
#streakChip.pulse { animation: pulse .5s ease; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; font-size: 1.15rem;
  display: grid; place-items: center; color: var(--ai-deep);
  transition: transform .12s, background .2s;
}
.icon-btn:hover { background: var(--ai-soft); }
.icon-btn:active { transform: scale(.92); }

/* --- Header-Toggles: Furigana + Sprache --- */
.toggle-btn { font-size: 1rem; font-weight: 700; }
.lang-btn { font-size: .82rem; letter-spacing: .03em; }
.toggle-btn.active {
  background: var(--ai-deep); color: var(--paper); border-color: var(--ai-deep);
}
.toggle-btn.active:hover { background: var(--ai-deep); filter: brightness(1.08); }

/* Furigana site-wide ein-/ausblenden (Wörterbuchformen mit <ruby>) */
body.furigana-off ruby rt { display: none; }

/* Furigana in Beispielsätzen */
.ex .jp ruby rt { font-size: 0.6em; color: var(--sumi-soft); font-weight: 400; }
.ex .jp { line-height: 2; }

/* ------------------------------------------------------------- progress */
.progress-rail {
  height: 9px; border-radius: 999px; background: var(--washi-2);
  margin: 18px 0 6px; overflow: hidden; border: 1px solid var(--line);
}
.progress-rail > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--tokiwa), #4caf7d);
  border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.rail-cap { display:flex; justify-content:space-between; font-size:.72rem; color:var(--sumi-soft); letter-spacing:.08em;}

.page-tabs {
  display: flex;
  gap: 10px;
  margin: 18px 0 10px;
}
.page-tabs button {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--sumi);
  padding: 12px 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.page-tabs button.active,
.page-tabs button:hover {
  background: var(--ai);
  color: #fff;
  border-color: var(--ai);
}

/* ----------------------------------------------------------------- card */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 26px 28px;
  margin-top: 14px;
  overflow: hidden;
}
.card::before { /* corner asanoha accent */
  content: ""; position: absolute; right: -28px; top: -28px; width: 120px; height: 120px;
  background:
    repeating-conic-gradient(from 0deg, rgba(22,80,110,.06) 0 30deg, transparent 30deg 60deg);
  border-radius: 50%; opacity: .5; pointer-events: none;
}

.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;}
.badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 8px; border: 1px solid transparent;
}
.badge.jlpt { background: var(--ai); color: #fff; }
.badge.type { background: var(--washi-2); color: var(--ai-deep); border-color: var(--line); }
.badge.mode { margin-left: auto; background: var(--shu-soft); color: var(--shu); }
.badge.mat-new     { background: var(--ai-soft); color: var(--ai-deep);}
.badge.mat-young   { background: var(--yamabuki); color:#4a370a; }
.badge.mat-mature  { background: var(--tokiwa-soft); color: var(--tokiwa);}
.badge.mat-learning{ background: var(--shu-soft); color: var(--shu);}

/* the prompt */
.prompt { text-align: center; padding: 8px 0 4px; }
.prompt .meaning { font-size: 1rem; color: var(--sumi-soft); margin-bottom: 6px; }
.prompt .dict {
  font-family: var(--serif); font-size: 3rem; line-height: 1.15; color: var(--sumi);
  letter-spacing: .02em;
}
.prompt .reading { font-size: 1rem; color: var(--ai-deep); margin-top: 2px; font-weight: 600;}
.prompt .arrow { color: var(--line); font-size: 1.4rem; margin: 12px 0 8px;}
.prompt .target {
  display: inline-block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: #fff; background: var(--ai); padding: 6px 22px; border-radius: 12px;
  box-shadow: 0 4px 0 var(--ai-deep);
}
.prompt .target small { display:block; font-family:var(--sans); font-size:.6rem; font-weight:500; letter-spacing:.1em; opacity:.85; margin-top:1px;}
.prompt ruby { font-size: 100%; line-height: 1.1; }
.prompt rt { font-size: 0.78rem; color: var(--sumi-soft); }
.learned-item .kanji ruby { font-size: 1.1rem; }
.learned-item .kanji rt { font-size: 0.65rem; top: -0.2em; }

.card.enter { animation: cardIn .45s cubic-bezier(.2,.85,.25,1) both; }

/* --------------------------------------------------------------- input */
.answer-zone { margin-top: 24px; }
.input-shell {
  display: flex; align-items: stretch; gap: 10px;
}
.kana-input {
  flex: 1; font-family: var(--serif); font-size: 1.9rem; text-align: center;
  padding: 14px 12px; border-radius: 14px;
  border: 2px solid var(--line); background: #fffdf7; color: var(--sumi);
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  min-width: 0;
}
.kana-input::placeholder { color: #c7bba2; font-size: 1.1rem; }
.kana-input:focus { border-color: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
.kana-input.ok    { border-color: var(--tokiwa); background: var(--tokiwa-soft); }
.kana-input.bad   { border-color: var(--akane);  background: var(--akane-soft); animation: shake .4s; }

.btn {
  font-family: var(--sans); font-weight: 700; letter-spacing: .04em;
  border: none; border-radius: 14px; cursor: pointer; color: #fff;
  background: var(--shu); padding: 0 22px; font-size: 1rem;
  box-shadow: 0 4px 0 #97291a; transition: transform .1s, box-shadow .1s, filter .2s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #97291a; }
.btn.full { width: 100%; padding: 14px; margin-top: 14px; }
.btn.ai { background: var(--ai); box-shadow: 0 4px 0 var(--ai-deep); }
.btn.ai:active { box-shadow: 0 1px 0 var(--ai-deep);}
.btn.ghost { background: var(--paper); color: var(--ai-deep); border:1px solid var(--line); box-shadow: 0 2px 0 #e4dac6;}
.romaji-hint { text-align: center; font-size: .76rem; color: var(--sumi-soft); margin-top: 9px; letter-spacing:.05em;}
.romaji-hint b { color: var(--ai-deep); font-family: var(--serif);}

/* --------------------------------------------------------------- result */
.result { margin-top: 22px; display: none; }
.result.show { display: block; animation: cardIn .4s ease both; }

.verdict { display: flex; align-items: center; gap: 14px; justify-content:center; }
/* hanko stamp */
.stamp {
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--serif); font-weight: 700; font-size: 1.45rem; color: #fff;
  position: relative;
}
.stamp.correct { background: radial-gradient(circle at 38% 35%, #3da66f, var(--tokiwa));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.2); }
.stamp.wrong   { background: radial-gradient(circle at 38% 35%, #b94250, var(--akane));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.2); }
.stamp.pop { animation: stampPop .5s cubic-bezier(.2,1.4,.4,1) both; }
.stamp .ring { position:absolute; inset:5px; border:2px solid rgba(255,255,255,.6); border-radius:50%;}

.verdict .ans { text-align: left; }
.verdict .ans .lbl { font-size: .74rem; color: var(--sumi-soft); letter-spacing: .1em;}
.verdict .ans .big { font-family: var(--serif); font-size: 1.9rem; color: var(--sumi); line-height:1.2;}
.verdict .ans .kanji-form { font-size: .95rem; color: var(--ai-deep); margin-top:2px;}

.divider { height:1px; background:var(--line); margin:20px 0; position:relative;}
.divider span {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--paper); padding:0 12px; font-family:var(--serif); font-size:.85rem; color:var(--sumi-soft);
}

.note-box {
  background: var(--washi); border:1px dashed var(--line); border-radius:12px;
  padding: 12px 14px; font-size: .9rem; color: var(--sumi); margin-bottom: 16px;
}
.note-box b { color: var(--ai-deep); }

.examples { display: flex; flex-direction: column; gap: 10px; }
.ex {
  border-left: 4px solid var(--ai); background: var(--washi);
  padding: 11px 14px; border-radius: 0 12px 12px 0;
  opacity: 0; transform: translateX(-8px);
}
.ex.in { animation: exIn .45s ease forwards; opacity: 1; transform: none; }
.ex.hard { border-left-color: var(--shu); }
.ex .jp { font-family: var(--serif); font-size: 1.18rem; color: var(--sumi); }
.ex .de { font-size: .85rem; color: var(--sumi-soft); margin-top: 3px; }
.ex .tag {
  float: right; font-size: .62rem; font-weight: 700; letter-spacing:.08em;
  padding: 2px 7px; border-radius: 6px; background: var(--ai-soft); color: var(--ai-deep);
}
.ex.hard .tag { background: var(--shu-soft); color: var(--shu); }

/* SRS rating row */
.rating { margin-top: 22px; }
.rating .q { text-align:center; font-size:.82rem; color:var(--sumi-soft); margin-bottom:10px; letter-spacing:.06em;}
.rate-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.rate {
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  border-radius: 13px; padding: 12px 4px 10px; text-align: center;
  transition: transform .1s, background .2s, border-color .2s;
}
.rate:hover { transform: translateY(-2px); }
.rate:active { transform: scale(.95); }
.rate .jp { font-family: var(--serif); font-weight: 600; font-size: 1rem; display:block;}
.rate .iv { font-size: .68rem; color: var(--sumi-soft); margin-top:2px;}
.rate.again { border-color: var(--akane); }
.rate.again .jp { color: var(--akane); }
.rate.hard  { border-color: var(--yamabuki); }
.rate.hard .jp { color: #a8740f;}
.rate.good  { border-color: var(--ai); }
.rate.good .jp { color: var(--ai-deep);}
.rate.easy  { border-color: var(--tokiwa); }
.rate.easy .jp { color: var(--tokiwa);}

/* --------------------------------------------------------------- stats */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 18px;}
.stat-box { background: var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 8px; text-align:center; box-shadow:0 1px 0 #e4dac6;}
.stat-box .n { font-family: var(--serif); font-size: 1.6rem; color: var(--ai-deep); line-height:1;}
.stat-box .l { font-size: .68rem; color: var(--sumi-soft); margin-top:5px; letter-spacing:.08em;}
.stat-box.due .n { color: var(--shu); }
.stat-box.mature .n { color: var(--tokiwa); }

/* ------------------------------------------------------------- settings */
.scrim { position: fixed; inset: 0; background: rgba(30,24,18,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:40;}
.scrim.open { opacity:1; pointer-events:auto;}
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 88vw);
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: -20px 0 50px -20px rgba(40,30,20,.5);
  transform: translateX(102%); transition: transform .35s cubic-bezier(.3,.8,.3,1);
  z-index: 41; padding: 22px 22px 40px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer h2 { font-family: var(--serif); color: var(--ai-deep); font-size: 1.25rem; letter-spacing:.08em; margin-bottom:4px;}
.drawer .lead { font-size:.8rem; color:var(--sumi-soft); margin-bottom:18px;}
.set-group { margin-bottom: 22px; }
.set-group > .gl { font-family: var(--serif); font-weight:600; color: var(--sumi); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.set-group > .gl::before { content:""; width:4px; height:16px; background:var(--shu); border-radius:2px;}

.seg { display:flex; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.seg button { flex:1; border:none; background:var(--paper); padding:11px 6px; cursor:pointer; font-family:var(--sans); font-weight:600; color:var(--sumi-soft); font-size:.9rem; transition:.2s;}
.seg button.active { background: var(--ai); color:#fff;}

.chk-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.chk {
  display:flex; align-items:center; gap:8px; font-size:.85rem; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--washi);
  transition:.15s; user-select:none;
}
.chk:hover { border-color:var(--ai);}
.chk.on { background: var(--ai-soft); border-color: var(--ai);}
.chk input { accent-color: var(--ai); width:16px; height:16px;}
.chk .ja { font-family:var(--serif); font-weight:600; color:var(--sumi);}
.chk small { display:block; color:var(--sumi-soft); font-size:.66rem;}

.range-row { display:flex; align-items:center; gap:12px;}
.range-row input[type=range]{ flex:1; accent-color: var(--shu);}
.range-row .v { font-family:var(--serif); font-size:1.2rem; color:var(--ai-deep); min-width:30px; text-align:center;}

.danger { color: var(--akane); border-color: var(--akane)!important; }
.danger:hover { background: var(--akane-soft);}

/* ------------------------------------------------------------ utilities */
.hidden { display: none !important; }
.center { text-align: center; }
footer.note { text-align:center; font-size:.72rem; color:var(--sumi-soft); margin-top:40px; letter-spacing:.06em;}

.learned-section {
  margin-top: 24px; padding: 22px; background: rgba(255,255,255,.92);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.learned-header h2 {
  font-family: var(--serif); font-size: 1.15rem; margin-bottom: 6px; color: var(--ai-deep);
}
.learned-header p {
  font-size: .82rem; color: var(--sumi-soft); margin-bottom: 18px;
}
.learned-summary {
  display:grid; grid-template-columns: repeat(4, minmax(90px,1fr)); gap: 10px; margin-bottom: 20px;
}
.learned-stat {
  background: var(--washi); border:1px solid var(--line); border-radius: 14px;
  padding: 12px; text-align: center;
}
.learned-stat.wide { grid-column: span 2; }
.learned-stat .num {
  font-family: var(--serif); font-size: 1.35rem; color: var(--ai-deep);
}
.learned-stat .label {
  display:block; margin-top: 6px; font-size:.72rem; color: var(--sumi-soft); letter-spacing:.06em;
}
.learned-empty {
  text-align:center; color: var(--sumi-soft); font-size:.9rem; padding: 22px 12px;
}
.learned-group { margin-bottom: 20px; }
.learned-group-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 12px; }
.learned-group-head h3 { font-family: var(--serif); font-size: 1rem; color: var(--ai-deep); }
.learned-group-head span { font-size:.82rem; color: var(--sumi-soft); }
.learned-grid {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px;
}
.learned-item {
  background: var(--paper); border:1px solid var(--line); border-radius: 16px;
  padding: 14px; display:flex; flex-direction:column; gap: 10px;
}
.learned-item .item-meta {
  display:flex; flex-direction:column; gap: 4px;
}
.learned-item .kanji {
  font-family: var(--serif); font-size: 1.4rem; color: var(--sumi);
}
.learned-item .kana {
  color: var(--ai-deep); font-size:.95rem; letter-spacing:.05em;
}
.learned-item .meaning { color: var(--sumi-soft); font-size:.92rem; line-height:1.4; }
.learned-item .item-tags {
  display:flex; flex-wrap:wrap; gap: 6px;
}
.learned-item .tag {
  font-size:.68rem; padding: 4px 8px; border-radius: 999px; background: var(--washi); color: var(--sumi);
}
.learned-item .tag.level { background: var(--ai-soft); color: var(--ai-deep); }
.learned-item .tag.type { background: var(--paper); border:1px solid var(--line); }
.learned-item .tag.mat.new { background: var(--ai-soft); color: var(--ai-deep); }
.learned-item .tag.mat.young { background: var(--yamabuki); color: #4a370a; }
.learned-item .tag.mat.mature { background: var(--tokiwa-soft); color: var(--tokiwa); }
.learned-item .tag.mat.learning { background: var(--shu-soft); color: var(--shu); }
footer.note .tate-mini { font-family:var(--serif);}

/* examples section (below stats, shown on correct answer) */
.examples-section {
  margin-top: 20px;
  padding: 0 0 20px;
}
.examples-section.hidden {
  display: none;
}
.examples-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ------------------------------------------------------------ keyframes */
@keyframes rise { from { transform: translateY(8px) scale(.6); opacity:0;} to { transform:none; opacity:1;} }
@keyframes pulse { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }
@keyframes cardIn { from { opacity:0; transform: translateY(16px) scale(.985);} to { opacity:1; transform:none;} }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }
@keyframes stampPop {
  0% { transform: scale(0) rotate(-22deg); opacity:0;}
  60%{ transform: scale(1.18) rotate(6deg); opacity:1;}
  100%{ transform: scale(1) rotate(-5deg);}
}
@keyframes exIn { to { opacity:1; transform:none; } }

/* confetti dots */
.confetti { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:50; overflow:hidden;}
.confetti i {
  position:absolute; width:9px; height:14px; top:-20px; opacity:.95;
  animation: fall var(--d,1.6s) linear forwards; border-radius:2px;
}
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity:.2;} }

/* responsive */
@media (max-width: 480px) {
  .prompt .dict { font-size: 2.4rem; }
  .rate-row { grid-template-columns: repeat(2,1fr);}
  .stats-row { grid-template-columns: repeat(2,1fr);}
  .logo .sub { display:none;}
  .kana-input { font-size: 1.6rem;}
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}