:root{--bg-a:#c78cff;--bg-b:#9a5fe0;--bg-c:#4a2a80;--ink:#3a2260;--ink-soft:#7a5fa8;--page-text:#fff8ea;--page-text-soft:#e6d6ff;--card:#ffffffd9;--card-border:#fffffff2;--pink:#ffb84d;--pink-deep:#e8901a;--blue:#ff6fc2;--blue-deep:#e83fa0;--yellow:#ffd15c;--green:#6bd9a0;--red:#ff7d7d;--shadow:#280a4659;font-family:Fredoka,"Baloo 2",Trebuchet MS,ui-rounded,system-ui,sans-serif}.font-display{font-family:Chewy,"Baloo 2",cursive}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{overscroll-behavior:none;touch-action:manipulation;height:100%;margin:0;padding:0}body{background:radial-gradient(120% 90% at 50% 0%, var(--bg-a) 0%, var(--bg-b) 55%, var(--bg-c) 100%);color:var(--page-text);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}body:before,body:after{content:"";filter:blur(50px);pointer-events:none;z-index:0;border-radius:50%;position:fixed}body:before{background:radial-gradient(circle, var(--pink) 0%, transparent 70%);opacity:.3;width:340px;height:340px;top:-100px;right:-90px}body:after{background:radial-gradient(circle, var(--blue) 0%, transparent 70%);opacity:.25;width:380px;height:380px;bottom:-120px;left:-110px}#app{z-index:1;width:100%;max-width:480px;height:100dvh;max-height:900px;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);flex-direction:column;display:flex;position:relative;overflow:hidden}.screen{padding:16px 18px calc(16px + var(--ad-banner-height,0px));flex-direction:column;flex:1;gap:10px;min-height:0;display:flex;overflow-y:auto}.pill-btn{color:#fff;text-shadow:0 2px #0000002e;cursor:pointer;box-shadow:0 6px 0 var(--shadow-btn,#00000026), 0 14px 22px var(--shadow), inset 0 -5px 8px #00000024;letter-spacing:.02em;border:3px solid #fffbe8eb;border-radius:999px;padding:16px 22px;font-family:inherit;font-size:1.05rem;font-weight:700;transition:transform 80ms,box-shadow 80ms;position:relative}.pill-btn:after{content:"";pointer-events:none;background:linear-gradient(#ffffffb3,#fff0);border-radius:999px 999px 60% 60%;height:42%;position:absolute;top:3px;left:10%;right:10%}.pill-btn:active{box-shadow:0 2px 0 var(--shadow-btn,#00000026), 0 4px 10px var(--shadow);transform:translateY(4px)scale(.98)}.pill-btn.blue{background:linear-gradient(180deg, var(--blue), var(--blue-deep));--shadow-btn:#2f6fb0}.pill-btn.pink{background:linear-gradient(180deg, var(--pink), var(--pink-deep));--shadow-btn:#b03569}.pill-btn.yellow{background:linear-gradient(180deg, #ffe08a, var(--yellow));color:#7a5a12;text-shadow:0 1px #fff6;--shadow-btn:#c99a2e}.pill-btn:disabled{opacity:.5;cursor:default}.pill-btn.pulse{animation:.22s btnPop}@keyframes btnPop{0%{transform:scale(.82)}60%{transform:scale(1.06)}to{transform:scale(1)}}.pill-btn.hint{animation:.9s ease-in-out infinite btnHintGlow}@keyframes btnHintGlow{0%,to{box-shadow:0 6px 0 var(--shadow-btn,#00000026), 0 0 0 0 #ffd15cb3}50%{box-shadow:0 6px 0 var(--shadow-btn,#00000026), 0 0 0 10px #ffd15c00}}.card{background:var(--card);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 24px var(--shadow);border-radius:24px;position:relative}.card:before{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px #ffffffd9}.start-screen{text-align:center;justify-content:flex-start;align-items:center;gap:10px;padding-top:max(14px,3vh)}.logo-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.logo-title{color:var(--pink-deep);-webkit-text-stroke:2px #fffbe8;text-shadow:0 4px #00000040,0 0 26px #ffb84d8c;margin:0;font-family:Chewy,"Baloo 2",cursive;font-size:2.1rem;font-weight:800}.logo-sub{color:var(--page-text-soft);margin:0;font-size:1rem;font-weight:600}.mascot-wrap{flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.mascot-glow{opacity:.45;filter:blur(14px);pointer-events:none;background:radial-gradient(circle,#fff3b0 0%,#0000 68%);border-radius:50%;position:absolute;inset:-20%}.start-mascot{width:110px;height:110px;position:relative}.best-score-chip{color:var(--ink-soft);background:#fff9;border-radius:999px;padding:8px 18px;font-weight:700}.player-name-block{flex-direction:column;align-items:center;gap:4px;display:flex}.player-name-label{letter-spacing:.12em;text-transform:uppercase;color:var(--page-text);opacity:.9;font-size:.66rem;font-weight:800}.player-name-row{cursor:pointer;background:#ffffff1a;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:8px;padding:7px 16px;font-family:inherit;display:flex}.player-name-display{color:var(--page-text);text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:.95rem;font-weight:700;overflow:hidden}.player-name-pencil{color:var(--page-text-soft);opacity:.85;font-size:.8rem}.name-edit-form{align-items:center;gap:8px;display:flex}.name-input{color:var(--ink);border:2px solid var(--card-border);background:#ffffffd9;border-radius:999px;outline:none;width:160px;padding:10px 16px;font-family:inherit;font-size:.95rem;font-weight:600}.name-input:focus{border-color:var(--pink)}.name-edit-form .pill-btn{padding:10px 18px;font-size:.9rem}.name-edit-error{color:var(--red);font-size:.78rem;font-weight:700}.daily-card{flex-direction:column;align-items:center;gap:5px;width:100%;max-width:300px;padding:10px 20px;display:flex}.daily-label{color:var(--blue-deep);margin:0;font-size:.95rem;font-weight:800}.daily-sub{color:var(--ink-soft);margin:0 0 4px;font-size:.75rem;font-weight:600}.daily-card .pill-btn{width:100%;padding:12px 10px;font-size:.9rem}.daily-done{color:var(--green);text-align:center;margin:0;font-size:.85rem;font-weight:700}.daily-streak{color:var(--pink-deep);margin:0;font-size:.78rem;font-weight:700}.practice-card{flex-direction:column;align-items:center;gap:6px;width:100%;max-width:300px;padding:10px 20px;display:flex}.mode-tag{letter-spacing:.06em;text-transform:uppercase;font-size:.66rem;font-weight:800}.ranked-tag{color:var(--pink);text-shadow:0 2px 0 var(--shadow)}.practice-tag{color:var(--ink-soft)}.speed-chips{background:#ffffffa6;border-radius:999px;gap:6px;padding:4px;display:flex}.speed-chip{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:7px 14px;font-family:inherit;font-size:.78rem;font-weight:700}.speed-chip.active{background:linear-gradient(180deg, var(--blue), var(--blue-deep));color:#fff}.practice-card .pill-btn{width:100%;padding:12px 10px;font-size:.9rem}.practice-sub{color:var(--ink-soft);text-align:center;margin:0;font-size:.72rem;font-weight:600}.logo-sub-row{align-items:center;gap:6px;display:flex}.info-btn{color:var(--pink-deep);cursor:pointer;background:#ffffffb3;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.75rem;font-weight:800;line-height:1;display:flex}.info-btn.pulse{animation:1.6s ease-in-out infinite info-pulse}@keyframes info-pulse{0%,to{box-shadow:0 0 #ff5a968c}50%{box-shadow:0 0 0 7px #ff5a9600}}.play-screen{gap:10px;padding:14px 16px}.play-topbar{align-items:center;gap:10px;display:flex}#btn-quit{z-index:310;position:relative}.icon-btn{color:var(--ink-soft);cursor:pointer;width:44px;min-width:44px;height:44px;box-shadow:0 3px 8px var(--shadow);background:#ffffffb3;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;transition:color .15s;display:flex}.icon-btn:active{transform:scale(.92)}.settings-btn{z-index:20;width:50px;min-width:50px;height:50px;position:absolute;top:12px;right:12px}.toggle-icon.sound-icon{color:var(--blue)}.toggle-icon.haptics-icon{color:var(--pink)}.toggle-icon.notif-icon{color:var(--pink-deep)}.toggle-icon.is-off{color:#b7aed4}.settings-overlay{z-index:30;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#28143c73;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.settings-panel{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:320px;padding:22px;display:flex}.settings-row{justify-content:space-between;align-items:center;gap:10px;width:100%;display:flex}.settings-row-label{color:var(--ink-soft);font-family:Fredoka,"Baloo 2",sans-serif;font-weight:600}.settings-select{color:var(--ink-soft);cursor:pointer;box-shadow:0 3px 8px var(--shadow);background:#ffffffb3;border:none;border-radius:18px;padding:8px 12px;font-family:Fredoka,"Baloo 2",sans-serif;font-size:.85rem;font-weight:600}.settings-privacy-link{color:var(--ink-soft);font-family:Fredoka,"Baloo 2",sans-serif;font-size:.8rem;text-decoration:underline}.notif-prompt{z-index:32;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#28143c73;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.notif-prompt-card{text-align:center;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:300px;padding:26px 22px 22px;display:flex}.notif-prompt-icon{color:var(--pink-deep);margin-bottom:4px}.notif-prompt-title{-webkit-text-stroke:0;text-shadow:none;font-size:1.3rem}.notif-prompt-body{color:var(--ink-soft);margin:0 0 8px;font-size:.86rem;font-weight:600;line-height:1.5}.notif-prompt-actions{gap:10px;width:100%;display:flex}.notif-prompt-actions .pill-btn{flex:1;padding:12px 8px;font-size:.85rem}.hud{flex:1;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex}.hud-stat{flex-direction:column;align-items:center;min-width:56px;display:flex}.hud-label{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-size:.62rem;font-weight:700}.hud-value{color:var(--ink);font-size:1.3rem;font-weight:800}.combo-badge{color:var(--pink-deep);font-size:1.3rem;font-weight:800;transition:transform .15s}.combo-badge.pulse{animation:.32s comboPulse}@keyframes comboPulse{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.target-banner{text-align:center;color:var(--ink);padding:10px 14px;font-weight:700}.target-banner .target-value{color:var(--blue-deep);font-size:1.15rem}.target-banner .margin-value{color:var(--pink-deep)}.game-canvas-wrap{flex:1;min-height:0;display:flex;position:relative}canvas#game-canvas{background:var(--card);border:1px solid var(--card-border);width:100%;min-height:0;box-shadow:0 8px 24px var(--shadow);touch-action:none;border-radius:24px;flex:1}.countdown-overlay{z-index:5;pointer-events:none;background:#28143c66;border-radius:24px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown-number{color:#fff8ea;-webkit-text-stroke:3px var(--pink-deep);text-shadow:0 6px #00000040;font-family:Chewy,"Baloo 2",cursive;font-size:5rem;font-weight:800}.countdown-number.pop{animation:.7s countdownPop}@keyframes countdownPop{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.15)}45%{transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.controls{gap:12px;display:flex}.controls .pill-btn{flex:1;padding:20px 10px;font-size:1.5rem}.total-anchor{pointer-events:none;position:absolute}.pill-btn.tutorial-faded{opacity:.45}.pill-btn.btn-shake{animation:.26s btnShakeNo}@keyframes btnShakeNo{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.gameover-screen{text-align:center;justify-content:center;align-items:center;gap:16px}.gameover-title{color:var(--pink-deep);-webkit-text-stroke:2px #fffbe8;text-shadow:0 4px #00000040;margin:0;font-family:Chewy,"Baloo 2",cursive;font-size:2rem;font-weight:800}.gameover-mascot{width:140px;height:140px}.score-row{gap:14px;display:flex}.score-card{flex-direction:column;align-items:center;gap:2px;padding:14px 22px;display:flex}.score-card .label{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-size:.68rem;font-weight:700}.score-card .value{color:var(--ink);font-size:1.6rem;font-weight:800}.score-card.new-best .value{color:var(--pink-deep)}.new-best-flag{color:var(--green);font-size:.85rem;font-weight:700}.gameover-actions{gap:12px;width:100%;max-width:300px;display:flex}.gameover-actions .pill-btn{flex:1}.leaderboard-screen{align-items:center;gap:16px;padding-top:28px}.period-tabs{background:#ffffffa6;border-radius:999px;gap:6px;padding:4px;display:flex}.period-tab{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:8px 14px;font-family:inherit;font-size:.78rem;font-weight:700}.period-tab.active{background:linear-gradient(180deg, var(--pink), var(--pink-deep));color:#fff}.leaderboard-list{flex-direction:column;flex:1;gap:4px;width:100%;max-width:320px;min-height:0;padding:10px 14px;display:flex;overflow-y:auto}.leaderboard-row{border-radius:12px;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:8px 6px;display:grid}.leaderboard-row:nth-child(odd){background:#ffffff80}.leaderboard-rank{color:var(--pink-deep);text-align:center;font-weight:800}.leaderboard-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.leaderboard-score{color:var(--blue-deep);font-weight:800}.leaderboard-empty{text-align:center;color:var(--ink-soft);padding:20px;font-weight:600}.tutorial-overlay{z-index:300;position:fixed;inset:0}.tutorial-dim-flat{background:#0f061ec7;position:absolute;inset:0}.tutorial-spotlight{pointer-events:none;transition:top .2s,left .2s,width .2s,height .2s,border-radius .2s;position:absolute;box-shadow:0 0 0 999px #0f061ec7}.tutorial-arrow{text-align:center;pointer-events:none;width:24px;font-size:1.4rem;animation:.8s ease-in-out infinite tutorialArrowBob;position:absolute}@keyframes tutorialArrowBob{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.tutorial-callout{width:200px;color:var(--ink);text-align:center;background:#fff;border-radius:16px;padding:12px 16px;font-size:.88rem;font-weight:700;line-height:1.4;position:absolute;box-shadow:0 8px 20px #00000059}.tutorial-callout-text{margin:0}.tutorial-callout-text b{color:var(--pink-deep)}.tutorial-tail{background:#fff;width:14px;height:14px;position:absolute;transform:rotate(45deg)}.tutorial-skip{top:max(14px, env(safe-area-inset-top,0px));color:var(--page-text);cursor:pointer;background:#ffffff2e;border:none;border-radius:999px;padding:7px 16px;font-family:inherit;font-size:.78rem;font-weight:700;position:absolute;right:14px}.tutorial-callout-nav{border-top:1px solid #3a22601f;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;display:flex}.tutorial-chev{color:#fff;cursor:pointer;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-family:inherit;font-size:1rem;font-weight:800;transition:transform 80ms,box-shadow 80ms;display:flex;box-shadow:0 3px #00000026}.tutorial-chev:active{transform:translateY(2px);box-shadow:0 1px #00000026}.tutorial-chev-back{background:linear-gradient(180deg, var(--blue), var(--blue-deep))}.tutorial-chev-next{background:linear-gradient(180deg, var(--pink), var(--pink-deep))}.tutorial-dots{gap:5px;display:flex}.tutorial-dot{background:#3a226038;border-radius:50%;width:6px;height:6px;transition:width .15s,border-radius .15s}.tutorial-dot.active{background:var(--pink-deep);border-radius:3px;width:14px}.tutorial-final{background:var(--card);border:1px solid var(--card-border);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:10px;width:min(280px,100% - 40px);padding:28px 22px 24px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 16px 34px #0006}.tutorial-final-title{-webkit-text-stroke:0;text-shadow:none;font-size:1.5rem}.tutorial-final-body{color:var(--ink-soft);margin:0 0 6px;font-size:.88rem;font-weight:600;line-height:1.5}.tutorial-final-actions{gap:10px;width:100%;display:flex}.tutorial-final-actions .pill-btn{flex:1;padding:12px 8px;font-size:.88rem}