:root{color-scheme:dark;--cyan:#46e7ff;--pink:#ed35ff;--purple:#8b5cff;--ink:#070514;--glass:rgba(12,8,35,.72)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#03020a;font-family:Inter,"Noto Sans JP",system-ui,sans-serif;color:#fff;touch-action:none}
button{font:inherit;color:inherit}
#app{position:relative;width:100%;height:100%;max-width:520px;margin:auto;overflow:hidden;background:radial-gradient(circle at 50% 30%,#26105a 0,#09051d 42%,#03020a 100%);box-shadow:0 0 80px #000}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.hud{position:absolute;inset:0;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));z-index:5}
.hud-top{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:start;gap:8px}
.stat span,.skill-wrap>span{display:block;font-size:.63rem;letter-spacing:.2em;color:#a7a0c8;font-weight:800}.stat strong{display:block;margin-top:2px;font:800 1rem/1 monospace;text-shadow:0 0 12px var(--cyan)}.stat.right{text-align:right}
.wave{text-align:center;font-weight:900;font-size:.76rem;letter-spacing:.12em;color:#fff}.boss-bar{height:5px;margin-top:6px;background:#281c42;border-radius:9px;overflow:hidden}.boss-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),#ff5252);box-shadow:0 0 8px var(--pink)}
.hud-bottom{position:absolute;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:end}.lives{font-size:1rem;letter-spacing:.12em;color:#ff63d8;text-shadow:0 0 12px #ff27c3;padding-bottom:12px}.skill-wrap{padding-bottom:10px}.skill-bar{height:8px;border:1px solid #6f628f;background:#100b28;border-radius:12px;margin-top:5px;overflow:hidden}.skill-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 12px var(--cyan);transition:width .12s}
.burst{pointer-events:auto;width:66px;height:66px;border-radius:50%;border:2px solid #51456e;background:#14102c;color:#716a88;display:grid;place-content:center;box-shadow:inset 0 0 16px #000;transition:.15s}.burst span{font-size:1.4rem;line-height:1}.burst small{font-size:.55rem;font-weight:900;letter-spacing:.08em}.burst.ready{border-color:#fff;color:#fff;background:radial-gradient(circle,#bc32ff,#5518b2);box-shadow:0 0 8px #fff,0 0 24px var(--pink);animation:pulse 1s infinite}.burst:active{transform:scale(.9)}
.screen{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(2,1,9,.28),rgba(5,2,18,.9));backdrop-filter:blur(2px)}.screen.active{display:flex}
.logo-frame{width:min(46vw,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.86);box-shadow:0 0 10px #fff,0 0 38px var(--pink),0 0 80px rgba(67,190,255,.35);margin-bottom:22px}.logo-frame img{width:100%;height:100%;object-fit:cover}
.title-lockup p,.eyebrow{margin:0 0 4px;font-size:.67rem;letter-spacing:.34em;font-weight:900;color:var(--cyan)}.title-lockup h1{font:950 clamp(2.8rem,14vw,4.5rem)/.9 Impact,Haettenschweiler,sans-serif;letter-spacing:.01em;margin:0 0 34px;font-style:italic;text-shadow:3px 3px 0 #33136c,0 0 22px #7138ff}.title-lockup em{display:block;margin-top:.18em;font-size:.48em;line-height:1.05;letter-spacing:.04em;font-style:italic;color:transparent;-webkit-text-stroke:1px #fff;background:linear-gradient(90deg,var(--cyan),#fff,var(--pink));background-clip:text;-webkit-background-clip:text}
.primary{border:1px solid rgba(255,255,255,.8);border-radius:999px;min-width:230px;padding:15px 28px;background:linear-gradient(100deg,#185fc7,#9d28df 55%,#e632b8);font-weight:950;letter-spacing:.1em;box-shadow:0 0 18px rgba(115,109,255,.8),inset 0 1px rgba(255,255,255,.5);cursor:pointer}.primary span{margin-right:8px}.primary:active{transform:scale(.96)}.guide{font-size:.8rem;line-height:1.7;color:#c4bddc;margin:18px 0 12px}.chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.chips span{font-size:.55rem;letter-spacing:.08em;font-weight:800;border:1px solid #4c4168;color:#8e85ac;padding:5px 8px;border-radius:20px}
.result{background:radial-gradient(circle at 50% 34%,rgba(86,25,150,.45),rgba(4,2,12,.94) 56%)}.result h2{font:950 clamp(2.5rem,13vw,4.2rem)/1 Impact,sans-serif;font-style:italic;margin:4px 0 30px;text-shadow:0 0 24px var(--pink)}.result-score span{display:block;color:#9990bb;letter-spacing:.2em;font-size:.75rem}.result-score strong{display:block;font:900 clamp(2.6rem,14vw,4rem)/1 monospace;color:#fff;text-shadow:0 0 18px var(--cyan)}.new-best{font-weight:900;color:#ffe259;letter-spacing:.16em;text-shadow:0 0 14px #ff8a00;margin:10px 0 0}.result-grid{display:grid;grid-template-columns:1fr 1fr;width:min(290px,80vw);margin:26px 0;gap:1px;background:#41335d}.result-grid div{background:rgba(10,6,27,.9);padding:12px}.result-grid span{display:block;color:#9e95ba;font-size:.7rem}.result-grid strong{font-size:1.05rem}.text-btn{border:0;background:none;color:#aaa0c6;padding:16px;cursor:pointer;font-weight:700}
#rotate{display:none;position:fixed;inset:0;z-index:99;background:#080514;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center}#rotate div{font-size:3rem;color:var(--cyan)}
@media (orientation:landscape) and (max-height:600px){#rotate{display:flex}}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 14px #fff,0 0 36px var(--pink)}}
@media (min-width:600px){body{background:radial-gradient(circle,#211040,#03020a 65%)}#app{border-left:1px solid #39265c;border-right:1px solid #39265c}}