*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg-deep:#0a0a1a;--bg-surface:#12122a;--accent-primary:#00e5ff;--accent-secondary:#7c4dff;--accent-danger:#ff1744;--accent-success:#00e676;--accent-gold:#ffd740;--text-primary:#e8eaf6;--text-secondary:#9fa8da;--text-dim:#5c6bc0;--glow-primary:0 0 20px rgba(0,229,255,.4),0 0 60px rgba(0,229,255,.15);--font-display:'Orbitron',sans-serif;--font-body:'Inter',sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);overflow:hidden;width:100%;height:100%;position:fixed;inset:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#game-wrapper{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg-deep)}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}.screen.active{opacity:1;pointer-events:all}
#start-screen{background:radial-gradient(ellipse at 30% 20%,rgba(124,77,255,.15) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(0,229,255,.1) 0%,transparent 60%),var(--bg-deep)}
.start-content{text-align:center;z-index:2;padding:1.5rem;width:100%;max-width:500px}
.game-title{font-family:var(--font-display);margin-bottom:2.5rem}
.title-main{display:block;font-size:clamp(3.5rem,14vw,8rem);font-weight:900;line-height:1;color:var(--accent-primary);text-shadow:var(--glow-primary);letter-spacing:.08em;animation:titleGlow 3s ease-in-out infinite}
.title-sub{display:block;font-size:clamp(.7rem,2.5vw,1rem);font-weight:400;letter-spacing:.4em;color:var(--text-secondary);margin-top:.5rem}
@keyframes titleGlow{0%,100%{text-shadow:0 0 20px rgba(0,229,255,.4),0 0 60px rgba(0,229,255,.15)}50%{text-shadow:0 0 30px rgba(0,229,255,.7),0 0 80px rgba(0,229,255,.3),0 0 120px rgba(0,229,255,.1)}}
.start-buttons{display:flex;flex-direction:column;gap:.8rem;align-items:center}
.btn-primary{position:relative;font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--bg-deep);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;padding:.9rem 2.5rem;border-radius:60px;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .3s;box-shadow:var(--glow-primary);letter-spacing:.1em;min-width:200px}
.btn-large{padding:1.1rem 3rem;font-size:1.1rem;min-width:220px}
.btn-primary:hover{transform:scale(1.04)}.btn-primary:active{transform:scale(.96)}
.btn-glow{position:absolute;inset:-2px;border-radius:60px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));opacity:.4;filter:blur(15px);z-index:-1;animation:btnGlow 2s ease-in-out infinite}
@keyframes btnGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}}
.btn-secondary{font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--text-secondary);background:transparent;border:1.5px solid rgba(255,255,255,.12);padding:.7rem 2rem;border-radius:60px;cursor:pointer;letter-spacing:.08em;transition:border-color .2s,color .2s,transform .2s;min-width:200px}
.btn-secondary:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.btn-secondary:active{transform:scale(.96)}
.start-footer{margin-top:2rem}.version-tag{font-size:.7rem;color:var(--text-dim);letter-spacing:.15em}
.panel-content{text-align:center;padding:2rem 1.5rem;width:100%;max-width:460px;max-height:calc(100vh - 2rem);overflow-y:auto;scrollbar-width:none}
.panel-content::-webkit-scrollbar{display:none}.panel-content.compact{max-width:320px}
.panel-title{font-family:var(--font-display);font-size:clamp(1.5rem,5vw,2rem);font-weight:900;color:var(--accent-primary);text-shadow:0 0 15px rgba(0,229,255,.3);margin-bottom:1.8rem;letter-spacing:.05em}
#howto-screen,#settings-screen{background:radial-gradient(ellipse at 50% 30%,rgba(124,77,255,.1) 0%,transparent 60%),var(--bg-deep)}
.howto-steps{text-align:left;margin-bottom:2rem}
.howto-step{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.howto-step:last-child{border-bottom:none}
.step-num{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-deep);font-family:var(--font-display);font-weight:900;font-size:.85rem}
.step-info h3{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--text-primary);margin-bottom:.2rem;letter-spacing:.03em}.step-info p{font-size:.8rem;color:var(--text-secondary);line-height:1.45}
.settings-list{text-align:left;margin-bottom:2rem}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.setting-row:last-child{border-bottom:none}
.setting-label{font-size:.9rem;color:var(--text-primary);font-weight:600}
.toggle-btn{font-family:var(--font-display);font-size:.7rem;font-weight:700;padding:.4rem 1.2rem;border-radius:20px;cursor:pointer;border:1.5px solid rgba(255,255,255,.15);background:transparent;color:var(--text-dim);transition:all .25s;letter-spacing:.05em}
.toggle-btn.on{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-deep);border-color:transparent;box-shadow:0 0 12px rgba(0,229,255,.3)}
.difficulty-row{flex-wrap:wrap;gap:.5rem}.difficulty-btns{display:flex;gap:.4rem}
.diff-btn{font-family:var(--font-display);font-size:.65rem;font-weight:700;padding:.35rem .9rem;border-radius:16px;cursor:pointer;border:1.5px solid rgba(255,255,255,.12);background:transparent;color:var(--text-dim);transition:all .2s;letter-spacing:.03em}
.diff-btn.active{background:linear-gradient(135deg,var(--accent-secondary),#9c27b0);color:#fff;border-color:transparent;box-shadow:0 0 10px rgba(124,77,255,.3)}
.floating-particles{position:absolute;inset:0;pointer-events:none;z-index:1}.particle{position:absolute;border-radius:50%;opacity:0;animation:floatParticle linear infinite}
@keyframes floatParticle{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(-20vh) scale(1)}}
#hud{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(.6rem + var(--safe-top)) 1rem .6rem;background:linear-gradient(to bottom,rgba(10,10,26,.95),transparent)}
.hud-label{display:block;font-family:var(--font-body);font-size:.55rem;color:var(--text-secondary);letter-spacing:.15em;text-transform:uppercase}
.hud-value{display:block;font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--accent-primary);text-shadow:0 0 10px rgba(0,229,255,.4)}
#hearts-display{display:flex;gap:.4rem;font-size:1.4rem}
.heart{transition:transform .3s,opacity .3s,filter .3s;filter:drop-shadow(0 0 6px rgba(255,23,68,.5))}.heart.lost{transform:scale(.5);opacity:.15;filter:grayscale(1)}.heart.shake{animation:heartShake .5s ease}
#combo-display{font-family:var(--font-display);font-size:.9rem;font-weight:900;color:var(--accent-gold);text-shadow:0 0 10px rgba(255,215,64,.5);margin-left:.3rem}
#combo-display.hidden{display:none}#combo-display.pulse{animation:comboPulse .4s ease}
@keyframes comboPulse{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes heartShake{0%,100%{transform:translateX(0) scale(1)}20%{transform:translateX(-5px) scale(1.2)}40%{transform:translateX(5px) scale(.9)}60%{transform:translateX(-3px) scale(1.1)}80%{transform:translateX(3px) scale(1)}}
#game-canvas{display:block;width:100%;height:100%;cursor:pointer}
.icon-btn{position:absolute;z-index:20;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);background:rgba(10,10,26,.6);backdrop-filter:blur(4px);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .2s}
.icon-btn:hover{border-color:rgba(0,229,255,.5);transform:scale(1.08)}.icon-btn:active{transform:scale(.93)}
#pause-btn{bottom:calc(1rem + var(--safe-bottom));left:1rem}#mute-btn{bottom:calc(1rem + var(--safe-bottom));right:1rem}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:25;background:rgba(10,10,26,.75);backdrop-filter:blur(8px);transition:opacity .35s}.overlay.hidden{opacity:0;pointer-events:none}
.level-up-text{font-family:var(--font-display);font-size:clamp(2.5rem,9vw,5rem);font-weight:900;color:var(--accent-gold);text-shadow:0 0 30px rgba(255,215,64,.5);animation:pop .6s cubic-bezier(.34,1.56,.64,1)}
.level-up-sub{font-family:var(--font-body);font-size:1rem;color:var(--text-secondary);margin-top:.5rem;letter-spacing:.2em}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
#hit-feedback,#miss-feedback{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) scale(.5);font-family:var(--font-display);font-size:clamp(2rem,7vw,3.5rem);font-weight:900;z-index:15;pointer-events:none;opacity:0}
#hit-feedback{color:var(--accent-success);text-shadow:0 0 20px rgba(0,230,118,.6)}#miss-feedback{color:var(--accent-danger);text-shadow:0 0 20px rgba(255,23,68,.6)}
#hit-feedback.show,#miss-feedback.show{animation:feedPop .8s ease-out forwards}
@keyframes feedPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}50%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-100%) scale(.8)}}
#gameover-screen{background:radial-gradient(ellipse at 50% 40%,rgba(255,23,68,.12) 0%,transparent 60%),var(--bg-deep)}
.gameover-content{text-align:center;padding:1.5rem;width:100%;max-width:400px}
.gameover-title{font-family:var(--font-display);font-size:clamp(2rem,8vw,4.5rem);font-weight:900;color:var(--accent-danger);text-shadow:0 0 30px rgba(255,23,68,.5);margin-bottom:1.5rem;animation:gameOverPulse 1.5s ease-in-out infinite}
@keyframes gameOverPulse{0%,100%{opacity:1}50%{opacity:.7}}
.final-stats{display:flex;gap:2rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.stat-item{text-align:center}
.stat-label{display:block;font-size:.7rem;color:var(--text-secondary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.stat-value{display:block;font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--accent-primary);text-shadow:0 0 12px rgba(0,229,255,.3)}
#best-score-display{margin-bottom:1.5rem;padding:.6rem 1.2rem;background:rgba(255,215,64,.08);border:1px solid rgba(255,215,64,.2);border-radius:12px;display:inline-flex;gap:.8rem;align-items:center}
#best-score-display.hidden{display:none}.best-label{font-family:var(--font-display);font-size:.7rem;color:var(--accent-gold);letter-spacing:.1em}.best-value{font-family:var(--font-display);font-size:1.3rem;font-weight:900;color:var(--accent-gold)}
.gameover-buttons{display:flex;flex-direction:column;gap:.7rem;align-items:center}
#game-wrapper.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translate(0)}10%{transform:translate(-4px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-3px,3px)}40%{transform:translate(3px,-1px)}50%{transform:translate(-2px,1px)}}
#pause-overlay .panel-content{display:flex;flex-direction:column;align-items:center;gap:.7rem}
/* Coin badge */
.coin-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,215,64,.1);border:1px solid rgba(255,215,64,.25);border-radius:20px;padding:.3rem .8rem;font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--accent-gold);margin-bottom:1rem}.coin-icon{font-size:1rem}.shop-coins{margin-bottom:1.2rem;font-size:1rem}
/* Shop */
#shop-screen{background:radial-gradient(ellipse at 50% 30%,rgba(124,77,255,.1) 0%,transparent 60%),var(--bg-deep)}
.shop-panel{max-width:500px}
.shop-tabs{display:flex;gap:.3rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap}
.shop-tab{font-family:var(--font-display);font-size:.6rem;font-weight:700;padding:.4rem 1rem;border-radius:20px;cursor:pointer;border:1.5px solid rgba(255,255,255,.1);background:transparent;color:var(--text-dim);transition:all .2s;letter-spacing:.03em}
.shop-tab.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-deep);border-color:transparent}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem;margin-bottom:1.5rem;text-align:left;max-height:45vh;overflow-y:auto;scrollbar-width:none;padding:.2rem}.shop-grid::-webkit-scrollbar{display:none}
.shop-item{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;padding:.7rem;cursor:pointer;transition:all .2s;position:relative}
.shop-item:hover{border-color:rgba(0,229,255,.3);transform:translateY(-2px)}.shop-item.equipped{border-color:var(--accent-success);box-shadow:0 0 10px rgba(0,230,118,.15)}.shop-item.locked{opacity:.4;cursor:default}
.shop-preview{display:block;width:100%;border-radius:8px;margin-bottom:.4rem;background:rgba(0,0,0,.3)}
.shop-item-name{font-family:var(--font-display);font-size:.65rem;font-weight:700;color:var(--text-primary);margin-bottom:.2rem}
.shop-item-desc{font-size:.6rem;color:var(--text-secondary);margin-bottom:.4rem;line-height:1.3}
.shop-item-price{font-family:var(--font-display);font-size:.6rem;font-weight:700}
.shop-item-price.free{color:var(--accent-success)}.shop-item-price.coins{color:var(--accent-gold)}.shop-item-price.locked{color:var(--accent-danger)}.shop-item-price.owned{color:var(--accent-primary)}
.shop-btn-action{display:block;width:100%;font-family:var(--font-display);font-size:.55rem;font-weight:700;padding:.35rem .5rem;border-radius:8px;border:none;cursor:pointer;letter-spacing:.05em;transition:all .15s;margin-top:.2rem}
.shop-btn-action.equip-btn{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-deep)}
.shop-btn-action.buy-btn{background:linear-gradient(135deg,var(--accent-gold),#ff9100);color:var(--bg-deep)}
.shop-btn-action.free-btn{background:linear-gradient(135deg,var(--accent-success),#00b248);color:var(--bg-deep)}
.shop-btn-action:hover{transform:scale(1.03);filter:brightness(1.1)}.shop-btn-action:active{transform:scale(.95)}
.shop-item-tag{position:absolute;top:.4rem;right:.4rem;font-size:.5rem;font-family:var(--font-display);font-weight:700;padding:.15rem .4rem;border-radius:8px}.shop-item-tag.equipped-tag{background:var(--accent-success);color:#000}
.hud-coin{margin:0;padding:.15rem .5rem;font-size:.7rem;margin-top:.2rem;border-radius:12px}
#hud-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}
.share-toast{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-deep);font-family:var(--font-display);font-size:.8rem;font-weight:700;padding:.7rem 1.5rem;border-radius:12px;z-index:100;transition:bottom .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 20px rgba(0,229,255,.3)}.share-toast.show{bottom:2rem}
@media(max-width:480px){.title-main{font-size:clamp(3rem,16vw,5rem)}.btn-primary{padding:.8rem 2rem;font-size:.85rem;min-width:180px}.btn-large{padding:.95rem 2.5rem;font-size:1rem}.btn-secondary{padding:.6rem 1.5rem;font-size:.75rem;min-width:180px}.hud-value{font-size:1.1rem}#hearts-display{font-size:1.2rem;gap:.3rem}.icon-btn{width:36px;height:36px;font-size:.9rem}.stat-value{font-size:1.5rem}.final-stats{gap:1.2rem}}
@media(max-width:360px){.title-main{font-size:3rem}.start-buttons{gap:.6rem}.btn-primary{padding:.7rem 1.5rem;font-size:.8rem;min-width:160px}.btn-secondary{min-width:160px}.panel-content{padding:1.5rem 1rem}.hud-value{font-size:1rem}.hud-label{font-size:.5rem}}