body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:#000;display:flex;justify-content:center;align-items:center}.hidden{display:none!important}#app{position:relative;width:100%;height:100%;background-color:#333;background-image:url(./street_day_bg-BjPGGz6G.png);background-size:cover;background-position:center}#output_canvas{position:absolute;bottom:20px;right:20px;width:320px;height:240px;object-fit:cover;transform:scaleX(-1);opacity:.9;z-index:100;border:4px solid #fff;border-radius:12px;box-shadow:0 10px 20px #00000080;background-color:#000}#feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Bangers,cursive;font-size:8rem;letter-spacing:2px;font-weight:900;color:#ff4757;text-shadow:0 0 20px rgba(255,71,87,.8);pointer-events:none;transition:opacity .2s;z-index:50}#battle-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:20px;box-sizing:border-box;z-index:10}.health-bar-container{width:300px;height:30px;background:#333;border:2px solid #fff;margin:10px;position:relative}.health-fill{height:100%;background:#e74c3c;width:100%;transition:width .2s}.hp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-family:Chakra Petch,sans-serif;font-weight:700;text-shadow:1px 1px 0 #000;pointer-events:none}#boss-container{position:absolute;top:0;left:0;transform:none;width:100%;height:100%;background-image:url(./level1-character-normal-CCCjlKjo.png);background-size:contain;background-repeat:no-repeat;background-position:center bottom;transition:transform .1s}.shaking{animation:shake .5s}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}#boss-hand{position:absolute;top:50%;left:50%;width:600px;height:600px;background-image:url(./level-skill-Cq8XdOLl.png);background-size:contain;background-repeat:no-repeat;transform:translate(-10%,-20%) scale(.5);opacity:0;pointer-events:none;z-index:15}.boss-slap-animation{animation:slap-attack 1.5s ease-in-out forwards}@keyframes slap-attack{0%{transform:translate(100%,-50%) scale(.5) rotate(20deg);opacity:0}50%{opacity:1;transform:translate(-40%,-40%) scale(2.5) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1) rotate(-10deg)}}.boss-zoom{transform:scale(1.3) translateY(50px);transition:transform 1.5s ease-in-out}.boss-dodge-left{animation:dodge-left .5s ease-out}.boss-dodge-right{animation:dodge-right .5s ease-out}@keyframes dodge-left{0%{transform:translate(0)}50%{transform:translate(-30%)}to{transform:translate(0)}}@keyframes dodge-right{0%{transform:translate(0)}50%{transform:translate(30%)}to{transform:translate(0)}}#start-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000c;z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .5s}#prep-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:25}#level-select-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:20;background:#000000d9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#level-select-screen.hidden{display:none!important}.level-container{display:flex;gap:40px;margin-top:20px}.level-card{width:200px;height:300px;border:4px solid #fff;border-radius:10px;display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center;cursor:pointer;transition:transform .2s,border-color .2s;position:relative;background-color:#333}.level-card:hover{transform:scale(1.05);border-color:#f1c40f}#btn-level-street{background-image:url(./street_day_bg-BjPGGz6G.png)}#btn-level-office{background-image:url(./office_scene_bg-BXfOd7Gp.png)}.level-title{font-family:Russo One,sans-serif;font-size:2rem;color:#fff;text-shadow:2px 2px 0px #000;background:#0009;padding:5px 10px;border-radius:5px}.difficulty-container{display:flex;gap:15px}.difficulty-btn{font-family:Chakra Petch,sans-serif;font-size:1.2rem;padding:10px 20px;background:#0009;border:2px solid white;color:#fff;cursor:pointer;transition:all .2s}.difficulty-btn.selected{background:#f1c40f;color:#000;border-color:#f1c40f;font-weight:700}.difficulty-btn:hover:not(.selected){background:#fff3}#cutscene-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(./intro-Lw3wSNKN.png);background-size:cover;background-position:center;z-index:1}#prep-ui{z-index:10;display:flex;flex-direction:column;align-items:center;background:#000c;padding:40px;border-radius:20px;border:2px solid white}#prep-ui.hidden{display:none!important}#loading-indicator{z-index:10;font-family:Chakra Petch,sans-serif;color:#fff;background:#00000080;padding:10px 20px;border-radius:20px}#loading-indicator.hidden,#prep-screen.hidden{display:none!important}.prep-container{display:flex;flex-direction:column;gap:30px;align-items:center}.prep-status{font-family:Chakra Petch,sans-serif;font-size:2rem;color:#f1c40f;text-shadow:0 0 10px #000}.menu-btn.disabled{opacity:.5;pointer-events:none;background:#ccc;color:#666}#start-screen.hidden{opacity:0;pointer-events:none}#victory-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000000b3;z-index:30;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .5s}#victory-screen.hidden{opacity:0;pointer-events:none}#defeat-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#320000cc;z-index:30;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .5s}#defeat-screen.hidden{opacity:0;pointer-events:none}#flash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;z-index:40;pointer-events:none;opacity:0;transition:opacity .1s}.flash-active{opacity:.8!important}.screen-shake{animation:shake-hard .2s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake-hard{10%,90%{transform:translate3d(-5px,0,0)}20%,80%{transform:translate3d(5px,0,0)}30%,50%,70%{transform:translate3d(-10px,0,0)}40%,60%{transform:translate3d(10px,0,0)}}.damage-text{position:absolute;color:#fff;font-family:Chakra Petch,sans-serif;font-weight:900;font-size:3rem;pointer-events:none;text-shadow:2px 2px 0 #000;animation:float-up 1s ease-out forwards;z-index:55;white-space:nowrap}@keyframes float-up{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}20%{transform:translate(-50%,-150%) scale(1.5);opacity:1}to{transform:translate(-50%,-300%) scale(1);opacity:0}}.particle{position:absolute;width:10px;height:10px;background:#f1c40f;pointer-events:none;z-index:50;animation:explode .5s ease-out forwards}@keyframes explode{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}#ultimate-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:60;pointer-events:none;overflow:hidden;display:flex;justify-content:center;align-items:center}#ultimate-overlay.hidden{display:none}.speed-lines{position:absolute;top:50%;left:50%;width:200vmax;height:200vmax;background:repeating-conic-gradient(from 0deg,transparent 0deg 10deg,rgba(255,215,0,.2) 10deg 20deg);transform:translate(-50%,-50%);animation:rotate-lines 2s linear infinite}@keyframes rotate-lines{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.ultimate-text{font-family:Russo One,sans-serif;font-size:8rem;color:gold;font-weight:900;text-shadow:0 0 50px rgba(255,215,0,.8),5px 5px 0 #000;animation:zoom-in-shake .5s cubic-bezier(.175,.885,.32,1.275);z-index:65}@keyframes zoom-in-shake{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}.shockwave{position:absolute;border:10px solid #ffd700;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:55;animation:shockwave-expand .8s ease-out forwards}@keyframes shockwave-expand{0%{width:0;height:0;opacity:1;border-width:50px}to{width:200vmax;height:200vmax;opacity:0;border-width:0}}.game-title{font-family:Russo One,sans-serif;font-size:6rem;font-style:italic;text-transform:uppercase;letter-spacing:-2px;font-weight:900;color:#fff;text-align:center;line-height:1;margin-bottom:3rem;text-shadow:0 0 20px rgba(255,255,255,.5);background:linear-gradient(45deg,#ff4757,#2ecc71);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:2rem;font-weight:400;letter-spacing:.5rem;color:#fff;-webkit-text-fill-color:#fff}.menu-container{display:flex;flex-direction:column;gap:20px}.menu-btn{padding:15px 40px;font-size:1.5rem;font-weight:700;border:none;background:#fff;color:#000;cursor:pointer;transform:skew(-10deg);transition:all .2s;font-family:Chakra Petch,sans-serif;text-transform:uppercase;box-shadow:0 5px 15px #0000004d}.menu-btn:hover{transform:skew(-10deg) scale(1.1);background:#ff4757;color:#fff;box-shadow:0 0 20px #ff475799}.menu-btn.secondary{background:#333;color:#fff}.menu-btn.secondary:hover{background:#2ecc71}.credits{position:absolute;bottom:30px;color:#ffffff80;font-family:Chakra Petch,sans-serif;font-size:1rem}.typhoon{position:absolute;width:600px;height:600px;background:radial-gradient(circle,#fff0 20%,#0ff6,#0ffc,#fff0 80%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:52;pointer-events:none;animation:spin-typhoon 2.5s linear forwards;filter:blur(5px)}.typhoon:before{content:"";position:absolute;top:10%;left:10%;right:10%;bottom:10%;border:20px dashed rgba(255,255,255,.6);border-radius:50%;animation:spin-typhoon-reverse 1.25s linear infinite}@keyframes spin-typhoon{0%{transform:translate(-50%,-50%) rotate(0) scale(0);opacity:0}20%{opacity:1;transform:translate(-50%,-50%) rotate(180deg) scale(1.5)}80%{opacity:1}to{transform:translate(-50%,-50%) rotate(720deg) scale(2);opacity:0}}@keyframes spin-typhoon-reverse{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}
