:root{--bg:#170d35;--violet:#32165d;--red:#ff315c;--green:#38dc93;--blue:#39bfff;--pink:#ff69b4;--cream:#fff4e9;--muted:#b9acd0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--cream);font-family:"Arial Rounded MT Bold","PingFang SC","Microsoft YaHei",sans-serif;user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit}#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 112%,#5f1d72 0,transparent 38%),linear-gradient(160deg,#130a2e,#26104a 58%,#180c36)}
#app:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.19;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;transform:perspective(350px) rotateX(35deg) scale(1.4);transform-origin:bottom}
#app:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,49,92,.07),transparent 17% 83%,rgba(57,191,255,.07)),radial-gradient(circle at center,transparent 50%,rgba(4,1,16,.45))}
.ambient i{position:absolute;width:4px;height:4px;background:white;border-radius:50%;box-shadow:0 0 10px #fff;animation:blink 2.4s infinite}.ambient i:nth-child(1){left:7%;top:18%}.ambient i:nth-child(2){left:21%;top:73%;animation-delay:.4s}.ambient i:nth-child(3){left:76%;top:16%;animation-delay:1.1s}.ambient i:nth-child(4){left:89%;top:57%;animation-delay:1.7s}.ambient i:nth-child(5){left:55%;top:37%;animation-delay:.8s}.ambient i:nth-child(6){left:37%;top:86%;animation-delay:2s}@keyframes blink{50%{opacity:.15;transform:scale(.4)}}
.hud{position:absolute;z-index:40;top:0;left:0;right:0;display:grid;grid-template-columns:1fr minmax(130px,240px) 1fr;align-items:center;gap:16px;padding:max(14px,env(safe-area-inset-top)) clamp(16px,4vw,46px) 10px;background:linear-gradient(#130a2ee8,transparent);pointer-events:none}.hud[hidden]{display:none}.score-box span,.goal-box>span{display:block;color:var(--muted);font:600 10px/1.2 monospace;letter-spacing:.14em;text-transform:uppercase}.score-box strong{display:block;margin-top:2px;color:#fff;font:900 clamp(27px,5vw,40px)/1 monospace;text-shadow:0 0 18px rgba(255,49,92,.55)}.goal-box{text-align:center}.goal-box div{margin-top:2px}.goal-box b{font:800 18px/1 monospace}.goal-box em{font:normal 12px monospace;color:var(--muted)}.progress{height:5px;margin-top:7px!important;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),#ff9acb);box-shadow:0 0 10px var(--red);transition:width .25s}.sound{justify-self:end;pointer-events:auto;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.06);font-size:19px;cursor:pointer}.sound.off{opacity:.45;text-decoration:line-through}
.field{position:absolute;inset:0;overflow:hidden}.heart{position:absolute;z-index:10;width:var(--size);height:var(--size);padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 8px 7px rgba(4,0,18,.32));will-change:transform;touch-action:none}.heart .shape,.legend{display:block;position:absolute;left:13%;top:3%;width:74%;height:74%;background:var(--heart-color);transform:rotate(45deg);border-radius:10% 7% 12% 7%;box-shadow:inset 7px 7px 12px rgba(255,255,255,.24),0 0 18px color-mix(in srgb,var(--heart-color),transparent 50%)}.heart .shape:before,.heart .shape:after,.legend:before,.legend:after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:inherit}.heart .shape:before,.legend:before{left:-50%;top:0}.heart .shape:after,.legend:after{left:0;top:-50%}.heart .shine{position:absolute;z-index:2;left:25%;top:13%;width:12%;height:25%;border-radius:50%;background:rgba(255,255,255,.62);transform:rotate(-36deg)}.heart.red{--heart-color:var(--red)}.heart.green{--heart-color:var(--green)}.heart.blue{--heart-color:var(--blue);filter:drop-shadow(0 0 13px rgba(57,191,255,.8))}.heart.blue .shape{animation:blue-pulse .25s infinite alternate}@keyframes blue-pulse{to{filter:brightness(1.35);transform:rotate(45deg) scale(1.08)}}.heart.hit{pointer-events:none}.heart.hit .shape{animation:pop .28s ease-out forwards}@keyframes pop{50%{transform:rotate(45deg) scale(1.45)}to{transform:rotate(45deg) scale(.1);opacity:0}}
.float{position:absolute;z-index:50;pointer-events:none;font:900 24px/1 monospace;text-shadow:0 3px 7px #0e0626;animation:float .7s ease-out forwards}.float.good{color:#ffb3cb}.float.bad{color:#66f1ad}.float.bonus{color:#82ddff;font-size:30px}@keyframes float{to{transform:translateY(-55px) scale(1.15);opacity:0}}
.screen{position:absolute;z-index:70;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(rgba(14,6,37,.2),rgba(14,6,37,.78))}.screen.active{display:flex;animation:screen-in .5s ease}@keyframes screen-in{from{opacity:0;transform:scale(1.03)}}.title-mark{display:flex;align-items:center;gap:8px;margin-bottom:8px}.title-mark span{padding:4px 8px;border:1px solid var(--red);color:#ff91ad;font:700 9px monospace;letter-spacing:.22em}.title-mark b{color:var(--blue);font:900 17px monospace}.screen h1{margin:0;font-size:clamp(60px,14vw,108px);font-weight:900;line-height:.82;letter-spacing:-.09em;text-shadow:5px 7px 0 #0b061e}.screen h1 em{font-style:normal;color:var(--red);text-shadow:5px 7px 0 #5d1031,0 0 28px rgba(255,49,92,.38)}.subtitle{margin:26px 0 20px;color:#d8cde8;font-size:14px;letter-spacing:.18em}.rules{display:flex;gap:clamp(12px,4vw,38px);margin-bottom:31px}.rules>div{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.rules b{display:block;color:white;margin-bottom:3px}.legend{position:relative!important;left:auto!important;top:auto!important;width:22px!important;height:22px!important;flex:0 0 auto;border-radius:3px!important}.legend.red{--heart-color:var(--red)}.legend.green{--heart-color:var(--green)}.legend.blue{--heart-color:var(--blue)}.primary{width:min(290px,78vw);height:55px;border:0;border-radius:28px;background:linear-gradient(110deg,#ff315c,#ff628c);box-shadow:0 6px 0 #9c173a,0 12px 30px rgba(255,49,92,.24);font-weight:900;letter-spacing:.15em;cursor:pointer}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #9c173a}.device-tip{margin:18px 0 0;color:#887a9e;font:10px monospace;letter-spacing:.1em}
.boss-overlay{position:absolute;z-index:55;left:50%;top:max(78px,calc(env(safe-area-inset-top) + 72px));display:none;transform:translateX(-50%);text-align:center;pointer-events:none}.boss-overlay.active{display:block;animation:boss-label 2.2s ease forwards}.boss-overlay p{margin:0 0 8px;color:#ffd5e8;font-weight:900;white-space:nowrap;text-shadow:0 0 14px #ff3987}.boss-meter span{display:block;margin-bottom:5px;font:11px monospace;color:#fff}.boss-meter i{display:block;width:180px;height:6px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden}.boss-meter b{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff47a0,#ffe2f1);transition:width .1s}@keyframes boss-label{0%{opacity:0;transform:translateY(-15px)}15%,85%{opacity:1;transform:none}100%{opacity:.75}}
.heart.boss{--heart-color:var(--pink);z-index:54;filter:drop-shadow(0 0 30px rgba(255,105,180,.7));cursor:pointer}.heart.boss .shape{box-shadow:inset 13px 13px 22px rgba(255,255,255,.27),0 0 35px rgba(255,105,180,.7)}.heart.boss.punched .shape{animation:punch .12s ease}@keyframes punch{50%{transform:rotate(45deg) scale(.88)}}
.ending{display:none;position:absolute;z-index:80;inset:0;align-items:center;justify-content:center;background:rgba(15,5,37,.62);backdrop-filter:blur(4px)}.ending.active{display:flex}.flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}.ending.active .flash{animation:flash .6s ease-out}@keyframes flash{0%{opacity:1}20%{opacity:.65}100%{opacity:0}}.shards{position:absolute;inset:0;pointer-events:none}.shard{position:absolute;left:50%;top:50%;width:18px;height:24px;background:var(--pink);border-radius:60% 10% 60% 20%;animation:shard 1.15s cubic-bezier(.1,.7,.2,1) forwards}@keyframes shard{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}.photo-card{position:relative;margin:0;width:min(94vw,720px);padding:0;background:transparent;box-shadow:none;transform:scale(.05) rotate(-14deg);opacity:0}.ending.active .photo-card{animation:photo-fly 1.15s .18s cubic-bezier(.16,1.3,.35,1) forwards}.photo-card img{display:block;width:100%;max-height:82vh;object-fit:contain;pointer-events:none}@keyframes photo-fly{0%{opacity:1;transform:translateY(25vh) scale(.04) rotate(-18deg)}70%{opacity:1;transform:translateY(-3vh) scale(1.06) rotate(3deg)}100%{opacity:1;transform:none}}.finish-actions{position:absolute;z-index:3;bottom:max(18px,env(safe-area-inset-bottom));text-align:center;opacity:0;transform:translateY(15px)}.ending.done .finish-actions{animation:actions-in .5s forwards}.finish-actions p{margin:0 0 10px;color:#ffd3e6;font:800 12px monospace;letter-spacing:.2em}.finish-actions .primary{height:44px;width:180px;font-size:13px}@keyframes actions-in{to{opacity:1;transform:none}}.shake{animation:shake .24s linear}@keyframes shake{25%{transform:translate(-8px,5px)}50%{transform:translate(7px,-5px)}75%{transform:translate(-4px,-3px)}}
@media (max-width:600px){.hud{grid-template-columns:1fr 150px 40px;gap:7px}.rules{flex-direction:column;gap:11px;align-items:flex-start}.screen h1{font-size:68px}.subtitle{margin:23px 0 17px}.photo-card{width:96vw}.photo-card img{max-height:80vh}.finish-actions{bottom:max(12px,env(safe-area-inset-bottom))}}
@media (max-height:650px){.screen h1{font-size:54px}.subtitle{margin:17px 0 12px}.rules{margin-bottom:19px;gap:8px}.device-tip{margin-top:11px}.photo-card{width:min(88vw,650px)}.photo-card img{max-height:78vh}}
@media (prefers-reduced-motion:reduce){.ambient i{animation:none}}