:root{--gold:#ffd65d;--ink:#221850;--sans:'DM Sans','Noto Sans JP',sans-serif;--serif:'Playfair Display','Noto Sans JP',serif}*{box-sizing:border-box}html,body{margin:0;background:#09032f;font-family:var(--sans)}button{font:inherit;border:0;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid white;outline-offset:3px}h1,h2,p{margin:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-shell{position:relative;width:min(100%,640px);min-height:100dvh;margin:auto;padding-bottom:91px;overflow:hidden;background:#f7f4ff;color:var(--ink);box-shadow:0 0 70px #0009}.night{color:#fff;background:radial-gradient(circle at 50% 25%,#2f219e,#13095e 35%,#08032f 78%)}.home{position:relative;isolation:isolate;min-height:calc(100dvh - 91px);padding:18px 20px 30px}.sky{position:absolute;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(circle at 10% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 25%,#fff 0 1px,transparent 2px);background-size:58px 53px,79px 71px}.sky:before,.sky:after{content:'';position:absolute;width:380px;height:220px;border-radius:50%;filter:blur(35px);opacity:.35}.sky:before{left:-280px;top:120px;background:#ff61d3}.sky:after{right:-280px;top:250px;background:#6256ff}.sky i{position:absolute;width:10px;height:22px;border-radius:100% 0 100% 0;background:#ff9ee7;animation:petal 8s linear infinite}.sky i:nth-child(1){left:8%;top:25%}.sky i:nth-child(2){right:8%;top:40%;animation-delay:-3s}.sky i:nth-child(3){left:15%;top:67%;animation-delay:-6s}.home header{display:flex;align-items:flex-start;justify-content:space-between}.logo{display:grid;text-align:center;position:relative;color:#ffd75f}.logo>b{font:800 22px var(--serif);letter-spacing:2px}.logo small{font-size:7px;letter-spacing:1.7px;color:#bab0e9}.home header>div:last-child{display:flex;gap:8px}.streak,.sound{height:41px;background:#251263;border:1px solid #a275df;border-radius:99px}.streak{padding:0 14px;color:#ffc966;font-size:11px}.streak b{font-size:18px}.sound{width:41px;display:grid;place-items:center}.sound svg{width:20px}.title{text-align:center;margin-top:19px}.title p,.overline,.plain header>p{font-size:8px;letter-spacing:2.2px;font-weight:900;color:#baaaff}.title h1{font:800 clamp(31px,8vw,48px)/1.35 var(--serif);color:#fff0aa;text-shadow:0 3px #884419,0 0 20px #ffc94277;margin-top:3px}.title h1 em{font-style:normal;color:#fff8dc}.title h2{font-size:15px;letter-spacing:1.5px;color:#e8e2ff}.wheel-stage{position:relative;height:min(94vw,505px);display:grid;place-items:center;margin:0 auto -10px}.rim{width:min(86vw,458px);aspect-ratio:1;padding:16px;border-radius:50%;background:linear-gradient(135deg,#fff1a4,#9b4511 32%,#ffdd6e 57%,#732a09 76%,#ffda62);box-shadow:0 0 0 5px #4a190c,0 0 0 9px #d98520,0 0 28px #ffd344,0 22px 50px #000}.wheel{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;border:4px solid #511d0f;background:conic-gradient(from -22.5deg,#ec5968 0 12.5%,#177bdc 0 25%,#12a9a0 0 37.5%,#9258d5 0 50%,#ee6659 0 62.5%,#2884dc 0 75%,#12aaa1 0 87.5%,#7459e8 0);transform:rotate(var(--turn));transition:transform 2.6s cubic-bezier(.1,.67,.08,1);box-shadow:inset 0 0 35px #15042a}.wheel:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 56%,#fff3 57% 58%,transparent 59%),repeating-conic-gradient(from -1deg,transparent 0 43deg,#3c174d 44deg 46deg)}.label{position:absolute;left:50%;top:50%;width:25%;height:47%;z-index:2;transform-origin:50% 0;transform:translate(-50%) rotate(calc(var(--i)*45deg + 22.5deg));padding-top:9%;text-align:center;text-shadow:0 2px 4px #0009}.label>*{display:block;transform:rotate(calc(var(--i)*-45deg - 22.5deg))}.label strong{font-size:clamp(25px,7vw,40px);height:44px}.label b{font-size:clamp(9px,2.7vw,15px)}.label small{font-size:7px;opacity:.75}.hub{position:absolute;z-index:6;left:50%;top:50%;translate:-50% -50%;width:27%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 40% 30%,#c275ff,#5d11aa 60%,#240348);border:8px double #ffd55a;box-shadow:0 0 0 5px #85340d,0 0 24px #ffd64e}.hub b{font-size:42px;line-height:.8}.hub small{font-size:7px;letter-spacing:2px;margin-top:7px;color:#ffe9a0}.pointer{position:absolute;z-index:9;top:1%;left:50%;translate:-50%;width:58px;height:73px;background:linear-gradient(90deg,#d1780d,#fff0a5 45%,#ffb719 72%);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 5px 3px #26051a)}.meta{text-align:center;font-size:10px;color:#d8d0fa}.meta i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 10px}.spin,.gold{display:flex;position:relative;align-items:center;justify-content:center;width:min(94%,470px);min-height:76px;margin:14px auto 0;border-radius:27px;background:linear-gradient(#fff4a2,#ffc12e 48%,#ed8c0d);color:#512400;border:2px solid #fff0a0;box-shadow:inset 0 0 14px #fff,0 6px #9a4108,0 11px 28px #ff9d1655;text-shadow:0 1px #fff}.spin strong{font-size:41px;margin-right:17px}.spin>b{font-size:23px;letter-spacing:1.5px}.spin small{position:absolute;bottom:6px;font-size:6px;letter-spacing:3px}.hint{text-align:center;font-size:9px;color:#b8afe2;margin-top:17px}.bottom-nav{position:absolute;z-index:30;bottom:0;left:0;right:0;height:88px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);background:#120a3df3;border-top:1px solid #51468b;border-radius:27px 27px 0 0;backdrop-filter:blur(16px)}.bottom-nav button{display:grid;place-content:center;justify-items:center;gap:4px;background:transparent;color:#948bc5;font-size:10px;font-weight:700}.bottom-nav button.active{color:#ffdb62}.bottom-nav button.active:after{content:'';position:absolute;bottom:7px;width:50px;height:2px;background:#ffd15a;box-shadow:0 0 12px #ffd15a}.bottom-nav svg{width:26px;height:26px}.reveal{min-height:calc(100dvh - 91px);padding:72px 28px 35px;text-align:center;background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--accent,#8e55d1) 78%,transparent),transparent 40%)}.genre-icon,.medal{font-size:82px;margin:43px 0 10px;filter:drop-shadow(0 9px 10px #0006);animation:pop .5s both}.reveal>p:not(.overline,.sub){font-size:12px;color:#d5cdf4}.reveal h1{font:800 clamp(43px,12vw,66px) var(--serif);color:#fff0a8;text-shadow:0 3px #8c401a;margin:3px}.reveal h2{font-size:18px}.dots{color:#ffdc62;word-spacing:7px;margin:25px 0 8px;text-shadow:0 0 9px #ffdc62}.sub{font-size:10px;color:#aaa0d7}.gold{min-height:62px;margin-top:34px;font-size:17px;font-weight:900}.ghost{display:block;margin:21px auto;background:transparent;color:#bdb4e8;font-size:11px;text-decoration:underline}.quiz-shell{background:linear-gradient(155deg,#17105d,#09042f);color:#fff}.quiz{min-height:calc(100dvh - 91px);padding:18px}.quiz>header{display:grid;grid-template-columns:42px 1fr 42px;gap:12px;align-items:center}.quiz>header>button{width:40px;height:40px;border-radius:50%;background:#ffffff10}.quiz>header div>span{font-size:9px;letter-spacing:1.3px;color:#c7baf1}.quiz>header div>i{display:block;height:7px;background:#ffffff16;border-radius:10px;margin-top:7px;overflow:hidden}.quiz>header div>i b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffd662)}.quiz>header>strong{font-size:20px}.quiz>header>strong small{font-size:9px;color:#988ec6}.quiz article{background:#f8f5ff;color:var(--ink);border-radius:27px;padding:30px 20px 22px;margin-top:22px;box-shadow:0 9px #060226}.quiz article>.overline{color:#876fc1;text-align:center}.word{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:23px}.word h1{font:800 clamp(34px,10vw,51px) var(--serif)}.word button,.word-list button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ebe3ff;color:#7053bf}.ipa{text-align:center;font-size:11px;color:#9288a7}.answers{display:grid;gap:9px;margin-top:25px}.answers button{min-height:59px;border:2px solid #e6dfef;border-radius:14px;background:white;color:#302650;text-align:left;padding:8px 42px 8px 53px;position:relative;font-size:12px;font-weight:700}.answers button span{position:absolute;left:12px;top:50%;translate:0 -50%;display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#eee8f7;color:#725f9e}.answers button>b{position:absolute;right:15px;font-size:19px}.answers .correct{border-color:#39c99c;background:#e9fff8;color:#126e54}.answers .correct span{background:#39c99c;color:white}.answers .wrong{border-color:#ee7482;background:#fff0f2;color:#963440}.answers .wrong span{background:#ee7482;color:white}.tap{text-align:center;font-size:9px;color:#aaa1b4;margin-top:18px}.note{padding:12px 14px;border-radius:13px;margin-top:12px;text-align:left}.note.good{background:#dff9f0;color:#176e56}.note.retry{background:#fff0e8;color:#914d2f}.note>b{font-size:11px}.note p{font-size:10px;line-height:1.55}.note small{display:block;opacity:.7}.next{width:100%;min-height:52px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#5838c0);margin-top:11px;font-weight:900}.final .medal{margin-top:42px}.final>section{display:grid;grid-template-columns:1fr 1fr;max-width:380px;margin:31px auto 0;padding:17px;background:#ffffff10;border:1px solid #ffffff25;border-radius:19px}.final section>div+div{border-left:1px solid #ffffff28}.final section small{display:block;font-size:7px;letter-spacing:2px;color:#bdb4dc}.final section b{display:block;font-size:31px;color:#ffdc65}.final section i{font-size:10px;font-style:normal}.plain{min-height:calc(100dvh - 91px);padding:35px 20px;background:linear-gradient(#f3edff,#fff)}.plain>header{padding-bottom:24px}.plain header>p{color:#7959b0}.plain header h1{font:800 30px var(--serif);margin:4px 0}.plain header small{font-size:8px;color:#9a8ca9}.word-list{display:grid;gap:9px}.word-list article{display:flex;justify-content:space-between;align-items:center;padding:15px;border-radius:17px;background:#fff;border:1px solid #e8e1ef;opacity:.48}.word-list article.seen{opacity:1;border-left:4px solid #8956cf}.word-list h2{font:800 21px var(--serif);margin:2px 0}.word-list p,.word-list small{font-size:10px;color:#81768e}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats>div{background:#fff;border-radius:17px;padding:17px 6px;text-align:center;box-shadow:0 5px 14px #4c31750f}.stats>div>b{display:block;font-size:24px}.stats>div>b small{font-size:9px;margin-left:2px}.stats p{font-size:8px;color:#968aa5}.week{background:#fff;border-radius:21px;padding:20px;margin-top:17px}.week h2{font-size:14px}.week>div{height:210px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:15px}.week span{display:grid;grid-template-rows:20px 1fr 18px;text-align:center;font-size:8px;color:#8d829b}.week span>i{position:relative;background:#eee8f5;border-radius:7px;overflow:hidden}.week em{position:absolute;bottom:0;left:0;right:0;border-radius:7px;background:linear-gradient(#a06ee5,#5c39b1)}#toast{position:fixed;z-index:100;left:50%;bottom:108px;translate:-50% 25px;padding:11px 17px;border-radius:12px;background:#20144f;color:#fff;font-size:11px;font-weight:700;opacity:0;transition:.2s;white-space:nowrap}#toast.show{opacity:1;translate:-50% 0}@keyframes petal{to{translate:90px 430px;rotate:420deg}}@keyframes pop{from{scale:.3;opacity:0}70%{scale:1.14}to{scale:1;opacity:1}}@media(min-width:720px){body{padding:22px}.app-shell{min-height:calc(100dvh - 44px);border-radius:32px}.bottom-nav{border-radius:27px 27px 32px 32px}.home{padding-inline:36px}.wheel-stage{height:475px}.rim{width:435px}.quiz article{max-width:515px;margin:25px auto;padding:37px}.plain{padding-inline:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.stats-shell{padding-bottom:0}.stats-shell .plain{min-height:100dvh}.back-button{display:inline-flex;align-items:center;min-height:40px;margin:0 0 22px;padding:0 15px;border:1px solid #ded3ed;border-radius:999px;background:#fff;color:#574276;font-size:13px;font-weight:800}