:root{--deep:#005d64;--teal:#0096a0;--pale:#e3f3f4;--ink:#24343a;--muted:#5d6e72;--line:#d7e3e4;--bg:#f6f8f7;--card:#fff;--pink:#d0668b;--ok:#3f8f4f;--warm:#e8902c}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"DM Sans","Klee One",sans-serif;color:var(--ink);background:var(--bg);min-height:100vh}
.jp,ruby{font-family:"Klee One",serif;font-weight:600}
rt{font-size:.45em;font-weight:600}
a{color:var(--deep)}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 48px}
header.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
header.top .brand{font:600 13px "DM Sans";letter-spacing:.14em;text-transform:uppercase;color:var(--teal);text-decoration:none}
header.top h1{font:600 clamp(26px,5vw,34px)/1.1 "Fraunces",serif;color:var(--deep);width:100%}
.levels{display:flex;gap:6px;margin-left:auto}
.levels a,.levels span{font:600 13px "DM Sans";padding:6px 12px;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--muted);background:#fff}
.levels a.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.levels span{opacity:.55}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.row>b{font:600 11px "DM Sans";letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:72px;flex:none}
.chip{font:600 13px "DM Sans";padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip:disabled{opacity:.4;cursor:default}
.chip .jp{font-size:12px}
.stage{display:flex;flex-direction:column;align-items:center}
.count{font:600 13px "DM Sans";color:var(--muted);margin:4px 0 10px;display:flex;gap:14px}
.count .known{color:var(--ok)}
.card{width:100%;max-width:520px;aspect-ratio:3/2;perspective:1200px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card .in{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.card.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);border-radius:22px;border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,60,64,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 22px;text-align:center}
.face.back{transform:rotateY(180deg)}
.face .grp{position:absolute;top:16px;left:0;right:0;font:600 11px "DM Sans";letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.face .grp .jp{letter-spacing:0;text-transform:none;font-size:11px;color:var(--muted);margin-left:4px}
.face .big{font-size:clamp(28px,7vw,46px);line-height:1.5}
.face .big.long{font-size:clamp(20px,5vw,30px)}
.face .en{font:500 clamp(20px,4.5vw,28px)/1.3 "DM Sans"}
.face .ro{font:600 15px "DM Sans";color:var(--teal);margin-top:8px}
.face .sub{font:400 14px "DM Sans";color:var(--muted);margin-top:6px}
.face .hint{position:absolute;bottom:14px;font:400 12px "DM Sans";color:#9aa6a9}
.play{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--deep)}
.play:disabled{opacity:.35;cursor:default}
.play svg{width:20px;height:20px}
.ctl{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.btn{font:600 14px "DM Sans";padding:11px 18px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;min-width:52px}
.btn.know{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.learn{background:#fff;color:var(--warm);border-color:var(--warm)}
.btn:disabled{opacity:.4}
.done{max-width:520px;width:100%;text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 20px}
.done h2{font:600 24px "Fraunces",serif;color:var(--deep);margin-bottom:8px}
.done p{color:var(--muted);margin-bottom:16px}
.foot{margin-top:28px;text-align:center;font:400 13px/1.6 "DM Sans";color:var(--muted)}
.foot a{font-weight:600}
.keys{font:400 12px "DM Sans";color:#9aa6a9;margin-top:10px;text-align:center}
.hub .lv{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:12px;text-decoration:none;color:var(--ink)}
.hub .lv b{font:600 22px "Fraunces",serif;color:var(--deep)}
.hub .lv span{display:block;color:var(--muted);margin-top:4px}
.hub .lv.off{opacity:.5;pointer-events:none}
@media (max-width:480px){.row>b{width:100%}.face{padding:26px 14px}}
.soon{font:400 12px "DM Sans";color:#9aa6a9;margin-left:4px}
.more{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.more a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.more a:hover{border-color:var(--teal)}
.more b{display:block;font:600 15px "DM Sans";color:var(--deep)}.more span{display:block;font:400 13px/1.4 "DM Sans";color:var(--muted);margin-top:3px}
@media (max-width:560px){.more{grid-template-columns:1fr}}