:root{
  --bg:#15171c;
  --surface:#1c1f26;
  --surface-2:#242832;
  --border:#2c3038;
  --border-strong:#3a3f4a;
  --text:#edeef1;
  --text-dim:#9297a3;
  --text-faint:#5b606b;
  --new:#5b606b;
  --genin:#e8734a;
  --genin-bg:#3a271e;
  --chunin:#8b7fe8;
  --chunin-bg:#2a2740;
  --jonin:#4fa8e0;
  --jonin-bg:#1c2e3d;
  --anbu:#3ecf8e;
  --anbu-bg:#193028;
  --kage:#d4a24c;
  --kage-bg:#332a17;
  --danger:#e05c5c;
  --success:#3ecf8e;
  /* Question-type accents, kept distinct from the tier colours above so a
     glance at the card tells you which half of the item is being asked. */
  --q-meaning:#4fa8e0;
  --q-meaning-bg:#16283a;
  --q-reading:#d782d8;
  --q-reading-bg:#33203a;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;   /* fallback for browsers without dvh */
  min-height:100dvh;  /* dvh follows the keyboard; vh does not */
}
.jp{font-family:'Noto Sans JP',sans-serif;}
.serif{font-family:'Spectral',serif;}
#root{max-width:640px;margin:0 auto;padding:24px 20px 60px;}
header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
header h1{font-family:'Spectral',serif;font-weight:600;font-size:22px;margin:0;letter-spacing:0.2px;}
header .sub{font-size:12px;color:var(--text-faint);}
nav{display:flex;gap:8px;margin-bottom:24px;}
nav button{
  flex:1;padding:10px 8px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-dim);font-family:'Inter';font-size:13px;font-weight:500;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
nav button:hover{background:var(--surface-2);}
nav button.active{background:var(--surface-2);border-color:var(--border-strong);color:var(--text);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;}
.stat .n{font-size:22px;font-weight:600;font-family:'Spectral',serif;}
.stat .l{font-size:11px;color:var(--text-dim);margin-top:2px;}
.stagebar{display:flex;gap:2px;margin-top:8px;}
.stagebar span{flex:1;height:4px;border-radius:2px;background:var(--border);}
.stagebar span.on{background:var(--tier-color,var(--genin));}
/* Compact tiles so a long mistake list stays scannable instead of turning
   into 70 full-width rows. Tiles grow horizontally for longer words rather
   than truncating them. */
.tilegrid{display:flex;flex-wrap:wrap;gap:6px;}
.tile{
  min-width:46px;height:46px;padding:0 10px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:'Noto Sans JP';font-size:19px;font-weight:500;
  background:var(--surface-2);border:1px solid var(--border);
}
.tile-more{font-family:'Inter';font-size:13px;color:var(--text-dim);}
.pill{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;white-space:nowrap;}
.bigword{font-family:'Noto Sans JP';font-weight:500;text-align:center;padding:40px 20px;border-radius:14px;margin-bottom:16px;font-size:44px;border:1px solid transparent;}
.bigword.q-meaning{background:var(--q-meaning-bg);border-color:var(--q-meaning);}
.bigword.q-reading{background:var(--q-reading-bg);border-color:var(--q-reading);}
.pill.q-meaning{background:var(--q-meaning-bg);color:var(--q-meaning);}
.pill.q-reading{background:var(--q-reading-bg);color:var(--q-reading);}
.field{background:var(--surface-2);border-radius:10px;padding:14px 16px;margin-bottom:10px;text-align:center;}
.field .k{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:5px;}
.field .v{font-size:17px;line-height:1.6;}
.field .v.mnem{font-family:'Spectral',serif;font-size:17px;line-height:1.8;}
.field .v.jp{font-size:20px;line-height:1.7;}
button.primary{
  width:100%;padding:13px;border-radius:10px;border:none;background:var(--text);color:var(--bg);
  font-family:'Inter';font-size:14px;font-weight:600;cursor:pointer;
}
button.primary:hover{opacity:0.9;}
.field.result-correct{border:1px solid var(--success);background:rgba(62,207,142,0.12);}
.field.result-correct .k{color:var(--success);}
.field.result-incorrect{border:1px solid var(--danger);background:rgba(224,92,92,0.12);}
.field.result-incorrect .k{color:var(--danger);}
button.secondary{
  width:100%;padding:13px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);font-family:'Inter';font-size:14px;font-weight:600;
  cursor:pointer;margin-bottom:10px;
}
button.secondary:hover{background:var(--border);}
.btnrow{display:flex;gap:10px;}
.btnrow button.primary{width:auto;flex:1;}
.btnrow button.secondary{width:auto;flex:0 0 auto;padding:13px 20px;margin-bottom:0;}
input[type=text],input[type=number],input[type=email],select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);font-family:'Inter';font-size:15px;margin-bottom:10px;
}
input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,select:focus{outline:none;border-color:var(--text-dim);}
.settings-row{margin-bottom:18px;}
.settings-row:last-of-type{margin-bottom:14px;}
.settings-label{font-size:14px;font-weight:600;margin-bottom:4px;}
.settings-desc{font-size:12px;color:var(--text-dim);line-height:1.55;margin-bottom:10px;}
.icon-btn{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:none;
  color:var(--text-dim);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.kanjiparts{display:flex;flex-direction:column;gap:8px;}
.kanjirow{display:flex;align-items:center;gap:12px;justify-content:center;text-align:left;}
.kanjirow-char{
  font-size:26px;line-height:1;flex:0 0 auto;
  width:46px;height:46px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border-strong);
}
.kanjirow-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.kanjirow-meaning{font-size:14px;font-weight:600;}
.kanjirow-parts{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.kanjirow-parts .part .jp{font-size:15px;color:var(--text);}
.kanjirow-parts .plus{color:var(--text-faint);}
.kanjirow-parts .part-note{font-style:italic;}
.audio-btn{
  border:none;background:none;cursor:pointer;padding:0 0 0 8px;
  font-size:15px;line-height:1;opacity:0.65;vertical-align:middle;
  transition:opacity .15s;
}
.audio-btn:hover{opacity:1;}
.audio-btn:active{opacity:0.5;}
.word-line{display:inline-flex;align-items:center;justify-content:center;gap:2px;}
.word-line .audio-btn{font-size:18px;}
.empty{color:var(--text-dim);font-size:14px;padding:40px 20px;text-align:center;line-height:1.6;}
.forecast{font-size:12px;color:var(--text-faint);margin-top:6px;}
.footer-note{font-size:11px;color:var(--text-faint);margin-top:24px;line-height:1.6;text-align:center;}
.reset-link{color:var(--text-faint);text-decoration:underline;cursor:pointer;font-size:11px;background:none;border:none;padding:0;font-family:'Inter';}
.savebadge{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:5px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--success);}
.dot.off{background:var(--danger);}
.loading{color:var(--text-dim);font-size:14px;padding:60px 20px;text-align:center;}
/* Lives outside #root and is updated directly, so a sync finishing mid-answer
   never triggers a re-render that would wipe what's being typed. */
.syncbadge{
  position:fixed;bottom:12px;right:12px;z-index:10;
  font-size:11px;color:var(--text-faint);
  background:var(--surface);border:1px solid var(--border);
  padding:5px 10px;border-radius:20px;pointer-events:none;
}
.syncbadge.err{color:var(--danger);border-color:var(--danger);}

/* On a phone the on-screen keyboard eats over half the viewport, and the
   full-size question layout is taller than what's left, so the browser
   scrolls the input into view and takes the word off the top of the screen
   with it. Tighten the spacing (not the text) so the word, its example and
   the answer box all still fit above the keyboard. */
@media (max-width: 480px){
  #root{padding:14px 14px 20px;}
  header{margin-bottom:12px;}
  nav{margin-bottom:14px;}
  nav button{padding:9px 6px;}
  .bigword{padding:16px 14px;font-size:36px;margin-bottom:10px;}
  .field{padding:10px 12px;margin-bottom:8px;}
  .field .k{margin-bottom:3px;}
  input[type=text],input[type=number],input[type=email],select{padding:11px 13px;margin-bottom:8px;}
  button.primary{padding:12px;}
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.cta-card{text-align:center;}
.cta-label{font-size:13px;color:var(--text-dim);margin-bottom:2px;}
.cta-count{font-size:32px;font-weight:600;font-family:'Spectral',serif;margin-bottom:2px;}
.cta-sub{font-size:12px;color:var(--text-faint);margin-bottom:14px;min-height:15px;}
.section-title{font-size:13px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:10px;}
/* Grid stretches both cards to the tallest, so the shorter one's content
   would otherwise sit at the top with dead space beneath it. */
.stat-card{text-align:center;display:flex;flex-direction:column;justify-content:center;}
/* .cta-sub's bottom margin exists to stand the CTA button off; in a stat card
   there is no button, so it would just weight the content upward. */
.stat-card .cta-sub{margin-bottom:0;}
.cta-card{display:flex;flex-direction:column;}
.cta-card button.primary{margin-top:auto;}
.kunai{
  /* align-self keeps the pill shrink-wrapped and centred: the stat card is a
     flex column, whose children would otherwise stretch to its full width. */
  display:inline-flex;align-self:center;align-items:center;gap:6px;margin-top:10px;
  font-size:11px;padding:4px 10px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface-2);
}
.kunai.held{color:var(--genin);border-color:var(--genin);background:var(--genin-bg);}
.kunai.spent{color:var(--text-faint);}
.kunai.spent .kunai-mark{opacity:0.55;}
.kunai-mark{width:13px;height:13px;flex:0 0 auto;display:block;}
.kunai-note{font-size:11px;color:var(--text-faint);line-height:1.5;margin-top:7px;}