:root{--ink:#3b2333;--cream:#fff7ee;--pink:#ff8fb1;--pink-strong:#ff5f8f;--don:#ff5a4a;--ka:#45c4d9;--gold:#ffd84a;--bg1:#ffd1e3;--bg2:#ffeccf;--card:#fff;--muted:#8a6a7d;--font:"Fredoka", "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg1);height:100%;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0}button{cursor:pointer;font-family:inherit}.app{background:linear-gradient(160deg, var(--bg1), var(--bg2));justify-content:center;align-items:center;min-height:100dvh;padding:16px;display:flex;position:relative;overflow:hidden}.bg-dots{pointer-events:none;background-image:radial-gradient(#ffffff8c 6px,#0000 7px);background-size:44px 44px;animation:12s linear infinite drift;position:absolute;inset:-40px}@keyframes drift{to{transform:translate(44px,44px)}}.keycap{border:3px solid var(--ink);background:var(--cream);min-width:1.9em;height:1.9em;color:var(--ink);font:700 .85em var(--font);vertical-align:middle;border-bottom-width:5px;border-radius:.6em;justify-content:center;align-items:center;margin:0 .15em;padding:0 .45em;display:inline-flex}.keycap.don{background:var(--don);color:#fff}.keycap.ka{background:var(--ka);color:#fff}.big-btn,.ghost-btn{border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 24px;font-size:1.15rem;font-weight:700;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.big-btn{background:var(--pink-strong);color:#fff}.ghost-btn{background:var(--cream);color:var(--ink)}.big-btn:hover,.ghost-btn:hover{box-shadow:0 7px 0 var(--ink);transform:translateY(-2px)}.big-btn:active,.ghost-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.pulse{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.05)}}.bouncy{animation:.9s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}45%{transform:translateY(-14px)scale(.97,1.03)}55%{transform:translateY(-14px)scale(.97,1.03)}90%{transform:translateY(0)scale(1.05,.95)}}.note-dot{border:3px solid var(--ink);vertical-align:-.15em;border-radius:50%;width:1em;height:1em;display:inline-block;box-shadow:inset 0 0 0 2px #fff}.note-dot.don{background:var(--don)}.note-dot.ka{background:var(--ka)}.muted{color:var(--muted)}.small{font-size:.9rem}.badge{border:3px solid var(--ink);background:var(--cream);border-radius:999px;margin-left:8px;padding:2px 10px;font-size:.8rem;font-weight:700;display:inline-block}.badge.gold{background:var(--gold)}.badge.pop{animation:.8s ease-in-out infinite pulse}.stars{color:var(--gold);-webkit-text-stroke:1.5px var(--ink);letter-spacing:1px}.stars .dim{color:#3b23331f;-webkit-text-stroke:0}.title-screen{text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:14px;display:flex;position:relative}.logo{color:#fff;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 6px;margin:0;font-size:clamp(3.2rem,11vw,6.5rem);font-weight:700;line-height:.95;display:flex}.logo span:first-child{color:var(--don)}.logo span:nth-child(3){color:var(--ka)}.logo .dash{color:#fff}.logo small{color:var(--gold);flex-basis:100%;font-size:.55em}.tagline{margin:0;font-size:1.2rem;font-weight:600}.how{flex-wrap:wrap;justify-content:center;gap:18px;margin-top:6px;display:flex}.how-item{border:3px solid var(--ink);background:#ffffffbf;border-radius:16px;padding:8px 14px;font-weight:600}.select-screen{flex-direction:column;gap:16px;width:min(820px,100%);display:flex;position:relative}.select-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.select-header h2{color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;margin:0;font-size:2rem}.mini-logo{align-items:center;gap:6px;font-size:1.1rem;font-weight:700;display:flex}.song-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.song-card{background:var(--card);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;border-radius:24px;align-items:stretch;gap:16px;padding:12px;transition:transform .15s;display:flex}.song-card:hover{transform:translateY(-2px)}.song-card.selected{background:linear-gradient(120deg, #fff, #fff 55%, var(--sky2));outline:4px solid var(--accent);outline-offset:3px;transform:scale(1.02)}.song-art{border:3px solid var(--ink);background:linear-gradient(var(--sky1), var(--sky2));border-radius:16px;flex:0 0 92px;min-height:92px;position:relative;overflow:hidden}.art-note{border:3px solid var(--ink);border-radius:50%;width:30px;height:30px;position:absolute;box-shadow:inset 0 0 0 3px #fff}.art-note.don{background:var(--don);top:14px;left:10px}.art-note.ka{background:var(--ka);top:34px;left:48px}.art-note.big{width:40px;height:40px;top:44px;left:16px}.song-card.selected .art-note{animation:.8s ease-in-out infinite bounce}.song-card.selected .art-note.ka{animation-delay:.2s}.song-card.selected .art-note.big{animation-delay:.4s}.song-info{flex-direction:column;flex:1;justify-content:center;min-width:0;display:flex}.song-title{font-size:1.45rem;font-weight:700}.song-sub{color:var(--muted);font-weight:500}.song-detail{cursor:default;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px;display:flex}.diff-row{flex-wrap:wrap;gap:8px;display:flex}.diff-btn{border:3px solid var(--ink);background:var(--cream);color:var(--ink);opacity:.65;border-radius:999px;padding:4px 14px;font-weight:700}.diff-btn.on{opacity:1;color:#fff;box-shadow:0 3px 0 var(--ink)}.diff-btn.easy.on{background:#ff9a3c}.diff-btn.normal.on{background:#4fbf5a}.diff-btn.hard.on{background:#4a8cff}.detail-line{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.rank-chip{text-align:center;border:2px solid var(--ink);color:#fff;background:var(--muted);border-radius:8px;min-width:1.6em;font-weight:700;display:inline-block}.hints{flex-wrap:wrap;justify-content:center;gap:20px;font-weight:600;display:flex}.game-screen{flex-direction:column;align-items:center;gap:12px;width:100%;height:100%;display:flex;position:relative}.canvas-wrap{border:5px solid var(--ink);width:min(100%,177.778dvh - 56.8889px);box-shadow:0 8px 0 var(--ink);background:var(--ink);border-radius:22px;position:relative;overflow:hidden}.game-canvas{width:100%;height:100%;display:block}.pause-btn{border:3px solid var(--ink);width:38px;height:38px;color:var(--ink);background:#ffffffd9;border-radius:50%;font-size:.8rem;font-weight:700;position:absolute;top:10px;left:10px}.pause-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#3b23338c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pause-card{background:var(--cream);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:26px;flex-direction:column;align-items:center;gap:10px;padding:18px 32px 24px;display:flex}.pause-card h2{margin:0 0 4px}.pause-card button{width:100%}.touch-pads{gap:12px;width:100%;display:none}.pad{border:5px solid var(--ink);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;height:120px;box-shadow:0 6px 0 var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:28px;flex:1;font-size:1.8rem;font-weight:700}.pad:active{box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}.pad.don{background:radial-gradient(circle at 50% 45%, #fff1dc 0 32%, var(--ink) 33% 36%, var(--don) 37%)}.pad.ka{background:radial-gradient(circle at 50% 45%, var(--ka) 0 60%, #2c8fa3 61%)}@media (pointer:coarse){.touch-pads{display:flex}.canvas-wrap{width:min(100%,177.778dvh - 320px)}}.results-screen{width:min(720px,100%);position:relative}.results-card{background:var(--card);border:5px solid var(--ink);box-shadow:0 8px 0 var(--ink);border-radius:30px;flex-direction:column;gap:16px;padding:20px 24px 24px;display:flex}.results-head{align-items:center;gap:14px;display:flex}.results-head>div:nth-child(2){flex:1;min-width:0}.results-song{font-size:1.5rem;font-weight:700}.results-diff{color:var(--muted);font-weight:600}.results-status{-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;color:#fff;margin-top:4px;font-size:1.6rem;font-weight:700}.results-status.ok{color:var(--pink)}.results-status.fc{color:var(--gold)}.results-status.fail{color:#8fb3d9}.rank{border:5px solid var(--ink);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;width:104px;height:104px;box-shadow:0 5px 0 var(--ink);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:4rem;font-weight:700;animation:.5s cubic-bezier(.2,1.6,.4,1) .4s both stamp;display:flex}@keyframes stamp{0%{opacity:0;transform:scale(2.4)rotate(-20deg)}}.r-S{background:linear-gradient(135deg,#ffe94a,#ff9a3c)}.r-A{background:linear-gradient(135deg,#ff8fb1,#ff5f8f)}.r-B{background:linear-gradient(135deg,#7ee8c0,#45c4d9)}.r-C{background:linear-gradient(135deg,#c3b0ff,#8a7cff)}.r-D{background:linear-gradient(135deg,#c8b8c2,#8a6a7d)}.score-line{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.score-line .label{color:var(--muted);font-weight:700}.score-num{font-variant-numeric:tabular-nums;font-size:2.6rem;font-weight:700}.gauge-bar{border:4px solid var(--ink);background:#6b4a5e;border-radius:12px;height:24px;position:relative;overflow:hidden}.gauge-fill{background:linear-gradient(90deg,#ff5a4a,#ffb14a);height:100%;transition:width 1s ease-out}.gauge-fill.cleared{background:linear-gradient(90deg,#ff6b9a,#ffb84a,#ffe94a,#7ee87a,#5ad1ff,#b48cff)}.gauge-mark{background:#fff;width:4px;position:absolute;top:0;bottom:0;left:70%}.stat-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stat{border:3px solid var(--ink);background:var(--cream);border-radius:16px;justify-content:space-between;align-items:center;padding:8px 12px;font-weight:600;display:flex}.stat b{font-size:1.35rem}.stat.good{background:#fff3b8}.stat.okay{background:#f1f1f1}.stat.bad{background:#dbe8f6}.results-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px;display:flex}@media (max-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr)}.results-head{flex-wrap:wrap}.song-art{flex-basis:64px}}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#3b233380;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--cream);border:5px solid var(--ink);width:min(480px,100%);box-shadow:0 8px 0 var(--ink);border-radius:28px;flex-direction:column;gap:12px;padding:20px 24px;display:flex}.modal h2{margin:0}.setting-row{grid-template-columns:1fr 1.3fr auto;align-items:center;gap:12px;font-weight:600;display:grid}.setting-row output{text-align:right;font-variant-numeric:tabular-nums;min-width:4.5em}.setting-row input[type=range]{accent-color:var(--pink-strong);width:100%}.bind-btn{border:3px solid var(--ink);color:#fff;border-bottom-width:6px;border-radius:14px;grid-column:2/4;padding:6px 12px;font-size:1.1rem;font-weight:700}.bind-btn.don{background:var(--don)}.bind-btn.ka{background:var(--ka)}.bind-btn.waiting{background:var(--gold);color:var(--ink);animation:.8s ease-in-out infinite pulse}.lang-toggle{z-index:5;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:var(--cream);border-radius:999px;display:flex;position:absolute;top:14px;right:14px;overflow:hidden}.lang-toggle button,.seg button{color:var(--ink);background:0 0;border:0;padding:5px 12px;font-weight:700}.lang-toggle button.on,.seg button.on{background:var(--pink-strong);color:#fff}.practice-panel{border:3px dashed var(--ink);background:#fff7eee6;border-radius:18px;flex-direction:column;gap:8px;width:100%;padding:12px 14px;display:flex}.practice-panel p{margin:0}.practice-head{justify-content:space-between;align-items:center;display:flex}.link-btn{color:var(--muted);background:0 0;border:0;font-weight:700}.practice-row{grid-template-columns:7.5em 1fr;align-items:center;gap:10px;font-weight:600;display:grid}.practice-row select{font:600 1rem var(--font);color:var(--ink);border:3px solid var(--ink);background:#fff;border-radius:12px;min-width:0;padding:4px 8px}.practice-row.check input{width:22px;height:22px;accent-color:var(--pink-strong);justify-self:start}.seg{border:3px solid var(--ink);background:#fff;border-radius:12px;flex-wrap:wrap;justify-self:start;display:flex;overflow:hidden}.seg button+button{border-left:2px solid var(--ink)}.seg.wide{grid-column:2/4;justify-self:stretch}.seg.wide button{flex:1}.practice-go{align-self:flex-start}.badge.practice{background:var(--pink);color:#fff}.timing-line{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.timing-line .label{color:var(--muted);font-weight:700}@media (max-width:560px){.practice-row{grid-template-columns:1fr;gap:4px}.lang-toggle{top:8px;right:8px}}.genre-tag{vertical-align:middle;border:2px solid var(--ink);background:var(--sky2);white-space:nowrap;border-radius:999px;margin-left:6px;padding:1px 10px;font-size:.8rem;font-weight:600;display:inline-block}