/* ═══════════════════════════════════════════════════════════
   初心 SHOSHIN — sumi ink & vermillion
   ═══════════════════════════════════════════════════════════ */
@font-face { font-family:'Instrument Serif'; src:url('../fonts/instrument-serif.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Zen Kaku'; src:url('../fonts/zenkaku-400.woff2') format('woff2'); font-weight:400 500; font-display:swap; }
@font-face { font-family:'Zen Kaku'; src:url('../fonts/zenkaku-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --sumi:#12141a; --sumi-2:#191c24; --sumi-3:#232733; --sumi-4:#2e3340;
  --washi:#ece5d8; --washi-dim:#96917f; --washi-faint:#5d5a51;
  --shu:#e2543a; --shu-deep:#b03a24; --shu-glow:rgba(226,84,58,.22);
  --ai:#5f92c9; --kin:#d8a94f; --matcha:#82a95f;
  --display:'Instrument Serif',Georgia,serif;
  --ui:'Zen Kaku',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --jp:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP','Songti SC',serif;
  --jp-ui:'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;
  --r:14px; --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh; font-family:var(--ui); color:var(--washi);
  background:
    radial-gradient(1200px 600px at 50% -12%, rgba(95,146,201,.10), transparent 62%),
    radial-gradient(900px 500px at 88% 108%, var(--shu-glow), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .022 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--sumi);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.jp{font-family:var(--jp)} .jpui{font-family:var(--jp-ui)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ai); outline-offset:3px; border-radius:4px}
.hidden{display:none !important}

/* ── chrome ─────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));
  background:linear-gradient(var(--sumi) 68%, transparent);
  backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer}
.seal{
  width:38px;height:38px;flex:none;border-radius:9px;
  background:linear-gradient(155deg,var(--shu),var(--shu-deep));
  display:grid;place-items:center;font-family:var(--jp);font-size:21px;font-weight:700;
  color:#fff4ee; box-shadow:0 3px 0 var(--shu-deep), 0 6px 18px var(--shu-glow);
}
.brand h1{font-family:var(--display); font-size:25px; font-weight:400; letter-spacing:.01em; line-height:1}
.brand h1 span{display:block;font-family:var(--ui);font-size:10px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--washi-dim);margin-top:3px}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav button{
  padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--washi-dim);
  transition:color .15s,background .15s;
}
.nav button:hover{color:var(--washi);background:var(--sumi-2)}
.nav button.on{color:var(--washi);background:var(--sumi-3)}
.nav .due-dot{
  display:inline-block;min-width:19px;padding:0 5px;margin-left:7px;border-radius:999px;
  background:var(--shu);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;
}
main{max-width:var(--maxw); margin:0 auto; padding:10px 20px 90px}

/* ── dashboard ──────────────────────────────────────────── */
.hero{
  position:relative; border:1px solid var(--sumi-3); border-radius:var(--r);
  background:linear-gradient(160deg,var(--sumi-2),rgba(25,28,36,.35));
  padding:34px 32px; overflow:hidden; margin-bottom:22px;
}
.hero::after{
  content:'初心'; position:absolute; right:-16px; bottom:-46px;
  font-family:var(--jp); font-size:190px; line-height:.8; color:var(--washi);
  opacity:.032; pointer-events:none; letter-spacing:-.04em;
}
.hero .k{font-family:var(--ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--shu);font-weight:700}
.hero h2{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);font-weight:400;line-height:1.12;margin:10px 0 6px;max-width:22ch}
.hero p{color:var(--washi-dim);font-size:15px;max-width:56ch;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:11px;font-size:15px;font-weight:700;
  background:var(--sumi-3);border:1px solid var(--sumi-4);
  transition:transform .12s,background .15s,border-color .15s;
}
.btn:hover{background:var(--sumi-4)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(160deg,var(--shu),var(--shu-deep));border-color:var(--shu-deep);color:#fff5f1;box-shadow:0 4px 16px var(--shu-glow)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:26px}
.stat{border:1px solid var(--sumi-3);border-radius:var(--r);background:var(--sumi-2);padding:17px 18px}
.stat .n{font-family:var(--display);font-size:34px;line-height:1;display:block}
.stat .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--washi-dim);margin-top:7px;display:block}
.stat.accent .n{color:var(--shu)}
.stat.gold .n{color:var(--kin)}

.sec-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 14px}
.sec-head h3{font-family:var(--display);font-size:23px;font-weight:400}
.sec-head .sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--washi-dim)}

.courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:13px}
.course{
  border:1px solid var(--sumi-3);border-radius:var(--r);background:var(--sumi-2);
  padding:18px;text-align:left;transition:border-color .15s,transform .12s;
}
.course:hover{border-color:var(--sumi-4);transform:translateY(-2px)}
.course .cjp{font-family:var(--jp);font-size:29px;line-height:1;color:var(--washi)}
.course .cn{font-weight:700;font-size:15px;margin-top:9px}
.course .cd{font-size:12.5px;color:var(--washi-dim);margin-top:3px;line-height:1.45}
.bar{height:4px;border-radius:99px;background:var(--sumi-4);margin-top:13px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--shu),var(--kin));border-radius:99px;transition:width .5s}
.course .cs{display:flex;justify-content:space-between;font-size:11.5px;color:var(--washi-dim);margin-top:7px}

/* ── session ────────────────────────────────────────────── */
.session{max-width:660px;margin:0 auto}
.sess-bar{display:flex;align-items:center;gap:14px;margin-bottom:26px;font-size:12.5px;color:var(--washi-dim)}
.sess-bar .track{flex:1;height:3px;background:var(--sumi-3);border-radius:99px;overflow:hidden}
.sess-bar .track i{display:block;height:100%;background:var(--shu);transition:width .3s}

.card{
  border:1px solid var(--sumi-3);border-radius:20px;background:var(--sumi-2);
  padding:38px 30px;text-align:center;min-height:330px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.card .tagline{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--washi-dim)}
.big-jp{font-family:var(--jp);line-height:1;letter-spacing:.02em}
.big-jp.kana{font-size:clamp(92px,20vw,168px)}
.big-jp.word{font-size:clamp(46px,10vw,84px)}
.big-jp.sent{font-size:clamp(24px,4.6vw,38px);line-height:1.5}
.reading{font-family:var(--jp-ui);font-size:20px;color:var(--ai)}
.romaji{font-size:26px;color:var(--washi-dim);letter-spacing:.05em}
.meaning{font-family:var(--display);font-size:30px;line-height:1.25}
.sub-note{font-size:14px;color:var(--washi-dim);line-height:1.65;max-width:46ch}
.sub-note b{color:var(--washi);font-weight:700}
.mnemonic{
  border-left:2px solid var(--shu);padding:9px 0 9px 15px;text-align:left;
  font-size:14.5px;line-height:1.6;color:var(--washi-dim);max-width:44ch;
}
.mnemonic b{color:var(--washi)}
.readings-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rd{border:1px solid var(--sumi-4);border-radius:8px;padding:6px 12px;font-family:var(--jp-ui);font-size:15px}
.rd .t{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--washi-dim);display:block;font-family:var(--ui)}
.rd.on-y{border-color:rgba(95,146,201,.4)} .rd.on-y .t{color:var(--ai)}
.rd.kun-y{border-color:rgba(130,169,95,.4)} .rd.kun-y .t{color:var(--matcha)}

.answer-in{
  width:min(320px,84vw);padding:14px 18px;border-radius:11px;text-align:center;
  background:var(--sumi);border:1.5px solid var(--sumi-4);color:var(--washi);
  font-size:23px;letter-spacing:.06em;font-family:var(--ui);
}
.answer-in:focus{outline:none;border-color:var(--ai)}
.answer-in.good{border-color:var(--matcha);color:var(--matcha)}
.answer-in.bad{border-color:var(--shu);color:var(--shu);animation:nudge .32s}
@keyframes nudge{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:20px}
.grade{
  padding:13px 6px;border-radius:11px;border:1px solid var(--sumi-4);background:var(--sumi-2);
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .1s,background .15s;
}
.grade:hover{background:var(--sumi-3)} .grade:active{transform:translateY(1px)}
.grade .g{font-size:14px;font-weight:700} .grade .i{font-size:11px;color:var(--washi-dim)}
.grade.again{border-color:rgba(226,84,58,.45)} .grade.again .g{color:var(--shu)}
.grade.hard .g{color:var(--kin)}
.grade.good .g{color:var(--ai)}
.grade.easy .g{color:var(--matcha)}
.kbd-hint{text-align:center;font-size:11.5px;color:var(--washi-faint);margin-top:12px;letter-spacing:.04em}

.sound{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--sumi-4);
  display:grid;place-items:center;font-size:18px;transition:background .15s;
}
.sound:hover{background:var(--sumi-3)}

/* ── stroke canvas ──────────────────────────────────────── */
.kvg-wrap{width:min(310px,74vw);aspect-ratio:1;border:1px solid var(--sumi-3);border-radius:var(--r);background:var(--sumi);position:relative;touch-action:none}
.kvg{width:100%;height:100%;display:block;touch-action:none}
.kvg-grid line{stroke:var(--sumi-4);stroke-width:.5;stroke-dasharray:3 3}
.kvg-grid rect{fill:none;stroke:var(--sumi-3);stroke-width:.6}
.kvg-guide path{fill:none;stroke:var(--sumi-4);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.kvg-ink path{fill:none;stroke:var(--washi);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.kvg-ink path.hint{stroke:var(--kin)}
.kvg-ink path.forgiven{stroke:var(--washi-faint)}
.kvg-live{fill:none;stroke:var(--shu);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

/* ── browse ─────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:7px 15px;border-radius:999px;border:1px solid var(--sumi-3);font-size:13px;color:var(--washi-dim);transition:.15s}
.chip:hover{color:var(--washi)} .chip.on{background:var(--sumi-3);color:var(--washi);border-color:var(--sumi-4)}
.grid-kana{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.kcell{
  aspect-ratio:1;border:1px solid var(--sumi-3);border-radius:11px;background:var(--sumi-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.14s;position:relative;
}
.kcell:hover{border-color:var(--shu);transform:translateY(-2px)}
.kcell .kk{font-family:var(--jp);font-size:30px;line-height:1}
.kcell .kr{font-size:11px;color:var(--washi-dim)}
.kcell[data-state="review"]{background:linear-gradient(160deg,var(--sumi-2),rgba(216,169,79,.09));border-color:rgba(216,169,79,.3)}
.kcell[data-state="learning"]{border-color:rgba(95,146,201,.35)}
.kcell[data-state="new"] .kk{color:var(--washi-faint)}

.rows{display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;align-items:center;gap:16px;padding:14px 17px;text-align:left;
  border:1px solid var(--sumi-3);border-radius:11px;background:var(--sumi-2);transition:.14s;width:100%;
}
.row:hover{border-color:var(--sumi-4)}
.row .rj{font-family:var(--jp);font-size:27px;min-width:2.4em;line-height:1.2}
.row .rmid{flex:1;min-width:0}
.row .rk{font-family:var(--jp-ui);font-size:13.5px;color:var(--ai)}
.row .rm{font-size:14.5px;margin-top:2px}
.row .rstate{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--washi-faint)}
.row .rstate.review{color:var(--kin)} .row .rstate.learning{color:var(--ai)}

/* ── listening drill ────────────────────────────────────── */
.big-listen{
  width:96px;height:96px;border-radius:50%;font-size:38px;
  border:1px solid var(--sumi-4);
  background:linear-gradient(160deg,var(--ai),#2f5f92);color:#f2f7ff;
  box-shadow:0 5px 18px rgba(95,146,201,.28); transition:transform .12s;
}
.big-listen:hover{filter:brightness(1.08)} .big-listen:active{transform:translateY(2px) scale(.97)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.opt{
  padding:16px 18px;border-radius:12px;text-align:left;font-size:15px;line-height:1.35;
  border:1px solid var(--sumi-3);background:var(--sumi-2);transition:.14s;
}
.opt:hover:not(:disabled){border-color:var(--sumi-4);background:var(--sumi-3)}
.opt.right{border-color:var(--matcha);background:rgba(130,169,95,.14);color:#cfe3b8}
.opt.wrong{border-color:var(--shu);background:rgba(226,84,58,.12);color:#f1b3a6}
.opt:disabled{cursor:default}

/* ── dialogue practice ──────────────────────────────────── */
.turns{display:flex;flex-direction:column;gap:12px}
.turn{display:flex;align-items:flex-start;gap:11px}
.turn.you{flex-direction:row-reverse}
.turn .who{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--washi-faint);
  min-width:38px;padding-top:16px;text-align:center;flex:none;
}
.bubble{
  flex:1;border:1px solid var(--sumi-3);border-radius:14px;background:var(--sumi-2);
  padding:14px 17px;cursor:pointer;transition:.16s;position:relative;max-width:min(560px,80%);
}
.turn.you .bubble{background:linear-gradient(160deg,rgba(226,84,58,.13),var(--sumi-2));border-color:rgba(226,84,58,.3)}
.bubble:hover{border-color:var(--sumi-4)}
.bubble.speaking{border-color:var(--ai);box-shadow:0 0 0 3px rgba(95,146,201,.16)}
.bubble .tj{font-family:var(--jp);font-size:20px;line-height:1.5}
.bubble .tk{font-family:var(--jp-ui);font-size:13px;color:var(--ai);margin-top:3px}
.bubble .te{font-size:14px;color:var(--washi-dim);margin-top:6px}
.bubble .mask-note{display:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--washi-faint)}
.bubble.masked .tj,.bubble.masked .tk{filter:blur(9px);opacity:.55;user-select:none}
.bubble.masked .mask-note{display:block;margin-top:8px}
.turn .tsound{width:36px;height:36px;font-size:15px;flex:none;margin-top:8px}

/* ── goal tracks ────────────────────────────────────────── */
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px;margin-bottom:8px}
.track-card{
  border:1px solid var(--sumi-3);border-radius:var(--r);padding:20px;text-align:left;
  background:linear-gradient(160deg,var(--sumi-2),rgba(25,28,36,.4));transition:.15s;
}
.track-card:hover{border-color:var(--shu);transform:translateY(-2px)}
.track-card .ti{font-size:28px}
.track-card .tt{font-family:var(--display);font-size:21px;margin-top:8px}
.track-card .td{font-size:13px;color:var(--washi-dim);margin-top:5px;line-height:1.5}
.track-card .tgo{font-size:12px;color:var(--shu);margin-top:11px;font-weight:700;letter-spacing:.05em}

@media (max-width:620px){
  .opts{grid-template-columns:1fr}
  .bubble{max-width:100%}
  .turn .who{display:none}
}

/* ── misc ───────────────────────────────────────────────── */
.empty{text-align:center;padding:64px 20px;color:var(--washi-dim)}
.empty .big{font-family:var(--jp);font-size:64px;opacity:.3;display:block;margin-bottom:16px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--sumi-3)}
.setting p{font-size:12.5px;color:var(--washi-dim);margin-top:3px;max-width:52ch;line-height:1.5}
.toggle{width:50px;height:29px;border-radius:99px;background:var(--sumi-4);position:relative;flex:none;transition:background .2s}
.toggle i{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:var(--washi-dim);transition:.2s}
.toggle[aria-checked="true"]{background:var(--shu)} .toggle[aria-checked="true"] i{left:24px;background:#fff}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);
  background:var(--sumi-3);border:1px solid var(--sumi-4);border-radius:11px;
  padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:620px){
  .hero{padding:26px 22px} .card{padding:28px 18px}
  .grades{grid-template-columns:repeat(2,1fr)}
  /* stack the header: brand on top, nav as one scrollable row */
  .top{flex-direction:column; align-items:stretch; gap:10px; padding-top:12px}
  .brand h1{font-size:20px}
  .brand h1 span{letter-spacing:.26em}
  .nav{
    margin-left:0; flex-wrap:nowrap; overflow-x:auto; gap:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{flex:none; padding:7px 13px; font-size:13.5px}
  main{padding-top:4px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat .n{font-size:29px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}