:root{color-scheme:light;--sky:#8FD8F5;--grass:#7FD16B;--sun:#FFB703;--pop:#FF5E7A;--ink:#2B2D42;--white:#FFFFFF;--night:#1B2A4A;--font:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--font);font-size:14px;font-weight:500;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}#app{position:relative;min-height:100vh;min-height:100svh}.screen{display:none}.screen.on{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh}.wrap{width:100%;max-width:960px;margin:0 auto;padding:18px 16px 44px}.logo{font-weight:800;font-size:clamp(38px,10.5vw,84px);line-height:1.1;text-align:center;margin:10px 0 2px;color:var(--white);letter-spacing:.02em;text-shadow:5px 0 0 var(--ink),-5px 0 0 var(--ink),0 5px 0 var(--ink),0 -5px 0 var(--ink),4px 4px 0 var(--ink),-4px 4px 0 var(--ink),4px -4px 0 var(--ink),-4px -4px 0 var(--ink),0 14px 0 rgba(43,45,66,.22)}.logo .a{color:var(--sun)}.logo .b{color:var(--pop)}.banner{display:block;width:100%;height:clamp(160px,32vh,270px)}.tap-hint{text-align:center;font-weight:800;font-size:clamp(20px,4.5vw,30px);margin:6px 0 0;color:var(--ink);animation:blink 1.5s ease-in-out infinite}.subtle{text-align:center;font-size:15px;opacity:.72;margin:14px 0 0}.subtle.tight{margin:6px 0 0}@keyframes blink{0%,to{transform:translateY(0);opacity:1}50%{transform:translateY(-6px);opacity:.75}}@keyframes pops{0%{transform:scale(.9)}60%{transform:scale(1.04)}to{transform:scale(1)}}.head{text-align:center;font-weight:800;font-size:clamp(24px,5.5vw,38px);margin:6px 0 16px;color:var(--white);text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}.big-btn{font-family:inherit;font-weight:800;color:var(--ink);min-height:88px;border:4px solid var(--ink);border-radius:26px;background:var(--white);box-shadow:0 7px 0 var(--ink);padding:14px 18px;cursor:pointer;touch-action:manipulation;transition:transform .06s ease,box-shadow .06s ease}.big-btn.down{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}.mini-btn{font-family:inherit;font-weight:800;color:var(--ink);font-size:15px;min-height:46px;padding:0 16px;border:3px solid var(--ink);border-radius:16px;background:var(--white);box-shadow:0 4px 0 var(--ink);cursor:pointer;touch-action:manipulation}.mini-btn.down{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px}.mode-btn canvas{width:112px;height:112px;display:block}.mode-btn .nm{font-size:clamp(24px,6vw,34px)}.mode-btn .sb{font-size:14px;font-weight:500;opacity:.8}.mode-btn.sel{background:#fff3d2;box-shadow:0 7px 0 var(--ink),0 0 0 6px #ffb7038c}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.topbar .head{margin:0;flex:1 1 auto;text-align:left}.now-mode{font-weight:800;font-size:15px;background:var(--white);border:3px solid var(--ink);border-radius:14px;padding:6px 12px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}@media(min-width:860px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{font-family:inherit;color:var(--ink);cursor:pointer;touch-action:manipulation;border:4px solid var(--ink);border-radius:24px;background:var(--white);box-shadow:0 7px 0 var(--ink);padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:200px;transition:transform .06s ease,box-shadow .06s ease}.card.down{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}.card canvas{width:118px;height:118px;display:block}.card .cname{font-weight:800;font-size:clamp(17px,4.4vw,21px);margin-top:2px}.card .chint{font-size:12px;font-weight:500;opacity:.72;text-align:center;line-height:1.3;min-height:2.6em}.card .cbest{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.9}.stars{letter-spacing:2px;font-size:19px;color:var(--sun);text-shadow:1px 1px 0 var(--ink),-1px 1px 0 var(--ink),1px -1px 0 var(--ink),-1px -1px 0 var(--ink)}.stars .off{color:var(--white)}#screen-play{position:fixed;inset:0;background:var(--sky);overflow:hidden;touch-action:none}#screen-play.on{display:flex;flex-direction:column;justify-content:flex-start;min-height:0}#play-stage{position:relative;flex:1 1 auto;min-height:0}#cv-play{position:absolute;inset:0;width:100%;height:100%;display:block}.hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 0;pointer-events:none}.hud-btn{pointer-events:auto;font-family:inherit;font-weight:800;font-size:15px;color:var(--ink);min-height:46px;padding:0 14px;border:3px solid var(--ink);border-radius:16px;background:#ffffffeb;cursor:pointer;touch-action:manipulation}.hud-score{background:#ffffffeb;border:3px solid var(--ink);border-radius:16px;padding:7px 14px;font-weight:800;font-variant-numeric:tabular-nums;display:flex;gap:12px;align-items:baseline;font-size:19px}.hud-score .combo{font-size:15px;color:var(--pop);min-width:3.4em;text-align:right}#kb{position:relative;flex:0 0 auto;background:#fff9;border-top:4px solid var(--ink);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));--gap:clamp(3px,.9vw,8px);--kw:min(68px, calc((100vw - 28px - 9 * var(--gap)) / 10));--kh:calc(var(--kw) * 1.06);--kfs:calc(var(--kw) * .46);touch-action:manipulation}#kb.num{--gap:clamp(4px,1.2vw,12px);--kw:min(84px, calc((100vw - 28px - 9 * var(--gap)) / 10));--kh:calc(var(--kw) * .94);--kfs:calc(var(--kw) * .52)}@media(max-height:560px){#kb{--kw:min(46px, calc((100vw - 28px - 9 * var(--gap)) / 10))}#kb.num{--kw:min(58px, calc((100vw - 28px - 9 * var(--gap)) / 10))}}.kbrow{display:flex;justify-content:center;gap:var(--gap);margin-bottom:var(--gap)}.kbrow:last-of-type{margin-bottom:0}.kbrow.r2{padding-left:calc(var(--kw) * .5)}.kbrow.r3{padding-left:calc(var(--kw) * 1.1)}.key{position:relative;flex:0 0 auto;width:var(--kw);height:var(--kh);padding:calc(var(--kw) * .1) 0 0;font-family:inherit;font-weight:800;font-size:var(--kfs);line-height:1;color:var(--ink);background:var(--white);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;overflow:hidden;transition:transform .06s ease,box-shadow .06s ease,background-color .1s ease}.key:after{content:"";position:absolute;top:8%;left:50%;transform:translate(-50%);width:calc(var(--kw) * .13);height:calc(var(--kw) * .13);border-radius:50%;opacity:.55}.key.lh:after{background:var(--sky)}.key.rh:after{background:var(--pop)}#kb.num .key:after{display:none}.key.down{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.key.tgt{background:var(--sun);animation:kbpulse 1s ease-in-out infinite}.key.soft{background:var(--sun);transform:translateY(3px);box-shadow:0 1px 0 var(--ink);animation:none}.key.wrong{background:var(--pop);color:var(--white);animation:kbshake .32s ease-out}.key.hit{background:var(--grass);transform:translateY(3px);box-shadow:0 1px 0 var(--ink);animation:none}@keyframes kbpulse{0%,to{box-shadow:0 4px 0 var(--ink),0 0 0 3px #ffb7034d}50%{box-shadow:0 4px 0 var(--ink),0 0 0 8px #ffb70399}}@keyframes kbshake{0%,to{transform:translate(0)}18%{transform:translate(-5px)}38%{transform:translate(5px)}58%{transform:translate(-4px)}80%{transform:translate(3px)}}#kb-hand{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;display:block}.res-card{background:var(--white);border:4px solid var(--ink);border-radius:28px;box-shadow:0 7px 0 var(--ink);padding:12px 14px 18px;animation:pops .28s ease-out}.res-stars{text-align:center;font-size:clamp(38px,10vw,60px);letter-spacing:6px;color:var(--sun);margin:2px 0 6px;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink)}.res-stars .off{color:#efefef}.counts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0}.cnt{border:3px solid var(--ink);border-radius:18px;padding:6px 14px;min-width:104px;text-align:center;background:#fffdf6}.cnt .lb{display:block;font-size:13px;font-weight:800}.cnt .nm{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}.cnt.p{background:#ffe8ed;border-color:var(--pop);color:#b32e48}.cnt.g{background:#e8f7df}.extra-row{text-align:center;font-size:15px;font-weight:800;color:#4c6b2f;margin-top:4px}.score-row{text-align:center;font-weight:800;font-size:clamp(20px,5vw,28px);font-variant-numeric:tabular-nums;margin-top:6px}.best-row{text-align:center;font-size:14px;font-weight:800;min-height:1.4em;color:#9a6b00}.res-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.res-btns .big-btn{font-size:clamp(17px,4.4vw,22px)}.res-btns .again{background:#ffe8ed}@media(prefers-reduced-motion:reduce){.tap-hint,.res-card{animation:none}.big-btn,.card,.key{transition:none}.key.tgt,.key.wrong{animation:none}}