*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overscroll-behavior:none}body{background:radial-gradient(ellipse 120% 80% at 50% 35%,#0c0e1e 0,#05060c 55%,#020308 100%);color:#e8e9f2;font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}.screen{position:relative;height:100dvh;display:flex;flex-direction:column;align-items:center;max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));overflow:hidden}.pi-strip{flex:0 0 auto;position:relative;width:100%;height:clamp(84px,20vw,122px);z-index:2}.pi-display{position:absolute;left:0;right:0;bottom:0;word-break:break-all;text-align:center;padding:0 0 6px;font-size:clamp(64px,18vw,104px);font-weight:900;letter-spacing:.02em;line-height:1.04;font-family:Arial Black,Arial,sans-serif;background:linear-gradient(180deg,#ffffff 15%,#e6d4ff 45%,#a45cff 80%,#7a2bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(150,70,255,.85)) drop-shadow(0 0 46px rgba(110,40,230,.5))}.pi-display.wrapped{text-align:left}.pi-display.title-logo{font-size:clamp(52px,15vw,88px);letter-spacing:.06em;word-break:keep-all}.pi-pop{display:inline-block;background:inherit;-webkit-background-clip:text;background-clip:text;animation:pi-pop .28s ease-out}@keyframes pi-pop{0%{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}.wall-area{flex:1 1 auto;width:100%;min-height:0;position:relative;container-type:size}.wall-area canvas{outline:none}.mode-buttons{flex:0 0 auto;width:100%;display:flex;flex-direction:column;gap:14px;padding-top:14px}.mode-btn{position:relative;width:100%;padding:16px 20px;border-radius:14px;border:2px solid;background:rgba(10,14,28,.72);cursor:pointer;text-align:center;transition:transform .12s ease,box-shadow .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}.mode-btn:active{transform:scale(.97)}.mode-btn .en{display:block;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:22px;letter-spacing:.14em}.mode-btn .ja{display:block;margin-top:4px;font-size:12px;letter-spacing:.28em;opacity:.75}.mode-btn.training{border-color:#2fb8ff;color:#aee6ff;box-shadow:0 0 14px rgba(47,184,255,.25),inset 0 0 22px rgba(47,184,255,.08)}.mode-btn.training.selected,.mode-btn.training:hover{background:rgba(16,42,70,.85);box-shadow:0 0 26px rgba(47,184,255,.55),inset 0 0 30px rgba(47,184,255,.16)}.mode-btn.challenge{border-color:#ff9a2f;color:#ffd9ae;box-shadow:0 0 14px rgba(255,154,47,.25),inset 0 0 22px rgba(255,154,47,.08)}.mode-btn.challenge.selected,.mode-btn.challenge:hover{background:rgba(66,34,10,.85);box-shadow:0 0 26px rgba(255,154,47,.55),inset 0 0 30px rgba(255,154,47,.16)}.mode-note{min-height:18px;padding-top:8px;text-align:center;font-size:12px;letter-spacing:.2em;color:#8f93b0}.loading-note{flex:0 0 auto;padding-bottom:10px}.lives{position:absolute;left:50%;transform:translateX(-50%);top:86%;display:flex;gap:10px;z-index:5}@supports (top:1cqw){.lives{top:calc(50% + min(42cqw, 36.7cqh) + 14px)}}.life{width:16px;height:16px;border-radius:50%}.sound-hint{position:absolute;left:50%;transform:translateX(-50%);top:86%;z-index:5;text-align:center;white-space:nowrap;animation:hint-pulse 1.6s ease-in-out infinite}@supports (top:1cqw){.sound-hint{top:calc(50% + min(42cqw, 36.7cqh) + 14px)}}.sound-hint .en{display:flex;align-items:center;justify-content:center;gap:8px;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:16px;letter-spacing:.16em;color:#aee6ff;text-shadow:0 0 14px rgba(47,184,255,.75),0 0 36px rgba(47,184,255,.35)}.sound-hint .ja{display:block;margin-top:4px;font-size:11px;letter-spacing:.2em;color:#b8bcd6}.sound-icon{flex:0 0 auto;width:20px;height:20px;filter:drop-shadow(0 0 8px rgba(47,184,255,.7))}.life.on{background:radial-gradient(circle at 35% 30%,#ffb3c9,#ff4d7e 55%,#b3123f);box-shadow:0 0 10px rgba(255,77,126,.85),0 0 22px rgba(255,77,126,.4)}.life.off{border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:4}.count-text{font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:clamp(88px,30vw,150px);line-height:1;color:#ffffff;text-shadow:0 0 22px rgba(140,190,255,.95),0 0 60px rgba(60,120,255,.6);animation:count-pop .35s ease-out}.count-text.go{color:#ffe680;text-shadow:0 0 24px rgba(255,220,120,.95),0 0 70px rgba(255,170,40,.65)}@keyframes count-pop{0%{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}.overlay.gameover{pointer-events:auto;gap:14px;background:rgba(3,4,10,.45)}.go-mode{font-size:14px;letter-spacing:.3em;color:#8f93b0}.go-mode,.go-title{font-family:Arial Black,Arial,sans-serif;font-weight:900}.go-title{font-size:clamp(40px,12vw,64px);letter-spacing:.08em;color:#ff5d7e;text-shadow:0 0 24px rgba(255,70,110,.8);animation:count-pop .4s ease-out}.go-digits{font-size:20px;letter-spacing:.2em;color:#e8e9f2}.ranking-panel{gap:10px;width:min(320px,86%)}.ranking-panel,.world-rank{display:flex;flex-direction:column;align-items:center}.world-rank{gap:2px;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:24px;letter-spacing:.1em;color:#ffe680;text-shadow:0 0 18px rgba(255,210,90,.8);animation:count-pop .35s ease-out}.rank-note{font-size:12px;font-weight:400;letter-spacing:.14em;color:#b8bcd6;text-shadow:none}.rank-form{display:flex;gap:8px;width:100%}.rank-form input{flex:1 1 auto;min-width:0;padding:10px 14px;border-radius:10px;border:2px solid rgba(255,154,47,.6);background:rgba(10,14,28,.85);color:#ffd9ae;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:16px;letter-spacing:.08em;outline:none}.rank-form input::placeholder{color:rgba(255,217,174,.35)}.rank-form input:focus{border-color:#ff9a2f;box-shadow:0 0 14px rgba(255,154,47,.4)}.rank-form button{flex:0 0 auto;padding:10px 20px;border-radius:10px;border:2px solid #ff9a2f;background:rgba(66,34,10,.85);color:#ffd9ae;font-weight:900;font-size:14px;letter-spacing:.14em;cursor:pointer;-webkit-tap-highlight-color:transparent}.rank-form button:disabled{opacity:.4;cursor:default}.rank-error{font-size:12px;letter-spacing:.1em;color:#ff8a9b}.rank-list{width:100%;list-style:none;display:flex;flex-direction:column;gap:4px}.rank-list li{display:flex;align-items:baseline;gap:10px;padding:4px 10px;border-radius:8px;background:rgba(10,14,28,.6);font-family:Arial Black,Arial,sans-serif;font-size:14px}.rank-no{flex:0 0 1.4em;color:#8f93b0}.rank-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8e9f2}.rank-digits{flex:0 0 auto;color:#aee6ff}.training-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}.trace-hint{flex:0 0 auto;margin:0;text-align:center;animation:hint-pulse 1.6s ease-in-out infinite}.trace-hint .en{display:block;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:20px;letter-spacing:.16em;color:#aee6ff;text-shadow:0 0 14px rgba(47,184,255,.75),0 0 36px rgba(47,184,255,.35)}.trace-hint .ja{display:block;margin-top:2px;font-size:12px;letter-spacing:.2em;color:#b8bcd6}@keyframes hint-pulse{0%,to{opacity:1}50%{opacity:.55}}.quit-btn{flex:0 0 auto;margin:0;padding:8px 24px;border-radius:12px;border:2px solid rgba(143,147,176,.55);background:rgba(10,14,28,.72);color:#b8bcd6;cursor:pointer;text-align:center;transition:transform .12s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}.quit-btn:active{transform:scale(.96)}.quit-btn .en{display:block;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:16px;letter-spacing:.18em}.quit-btn .ja{display:block;margin-top:2px;font-size:10px;letter-spacing:.28em;opacity:.7}.retry-btn{margin-top:8px;padding:12px 42px;border-radius:12px;border:2px solid #2fb8ff;background:rgba(16,42,70,.85);color:#aee6ff;font-family:Arial Black,Arial,sans-serif;font-weight:900;font-size:18px;letter-spacing:.16em;cursor:pointer;box-shadow:0 0 20px rgba(47,184,255,.45);-webkit-tap-highlight-color:transparent}.retry-btn:active{transform:scale(.96)}