@font-face{font-family:PixelOperator8;src:url(/images/5-game/PixelOperator8.ttf) format("truetype")}:root{--bg-color: #000000;--container-bg: #000000;--text-color: #ffffff;--accent-color: #00ffcc}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none}button,a,input{-webkit-tap-highlight-color:transparent;outline:none}html,body{width:100%;height:100%;background-color:var(--bg-color);display:flex;justify-content:center;align-items:center;overflow:hidden;font-family:Inter,system-ui,-apple-system,sans-serif}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.container{position:relative;width:100%;height:100%;max-width:56.25vh;max-height:calc(100vw * 16 / 9);aspect-ratio:9 / 16;background-color:var(--container-bg);color:var(--text-color);overflow:hidden;box-shadow:0 0 50px #00000080;container-type:size}.landing-page{position:relative;width:100%;height:100%;transition:opacity .5s ease,transform .5s ease}.landing-page.hidden{opacity:0;transform:scale(1.1);pointer-events:none}.bg-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.center-logo-container{position:absolute;top:25%;left:50%;transform:translate(-50%);width:42%;z-index:1;animation:entranceFadeInUpCentered .8s ease-out both,idleBreathing 4s ease-in-out infinite}.center-logo{width:100%;height:auto}.description{position:absolute;top:48%;left:50%;transform:translate(-50%);width:70%;z-index:1;animation:entranceFadeInUpCentered .8s ease-out .2s both}.tagline-middle{width:100%;height:auto;animation:idleShimmer 3s infinite}.actions{position:absolute;top:61%;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center;gap:2.5cqw;z-index:1;animation:entranceFadeInUpCentered .8s ease-out .4s both}.btn-challenge{background:none;border:none;cursor:pointer;width:55%;transition:transform .2s;animation:idlePulse 2s infinite}.btn-challenge img{width:100%;height:auto}.btn-leaderboard{background:none;border:none;cursor:pointer;width:25%;transition:transform .2s;display:flex;justify-content:center;align-items:center;gap:5px}.btn-leaderboard:active{animation:clickShake .2s ease-in-out}.btn-leaderboard img{width:100%;height:auto}.character{position:absolute;bottom:0%;right:-2%;width:48%;z-index:2;animation:entranceCharacter .8s ease-out .6s both,idleFloat 4s ease-in-out infinite}.agreement-page{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;opacity:0;pointer-events:none;transition:opacity .5s ease;background-color:#000;isolation:isolate}.agreement-page.active{opacity:1;pointer-events:auto}.agreement-content{position:absolute;top:11%;left:50%;transform:translate(-50%);width:90%;height:70%;z-index:1;overflow:hidden;padding:8px}.scroll-area{width:100%;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#006b5a #f0f0f0;border-radius:8px}.scroll-area::-webkit-scrollbar{width:8px}.scroll-area::-webkit-scrollbar-track{background:#f0f0f0;border-radius:10px}.scroll-area::-webkit-scrollbar-thumb{background-color:#006b5a;border-radius:10px;border:2px solid #f0f0f0}.agreement-text-img{width:100%;height:auto;display:block}.agreement-actions{width:100%;display:flex;justify-content:center;padding:20px 0 40px}.number-page{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;opacity:0;pointer-events:none;transition:opacity .5s ease;background-color:#000}.number-page.active{opacity:1;pointer-events:auto}.number-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.hello-text{position:absolute;top:17%;left:50%;transform:translate(-50%);width:55%;height:auto;animation:entranceFadeInUpCentered .8s ease-out both}.serial-container{position:absolute;top:32%;left:50%;transform:translate(-50%);width:75%;animation:entranceFadeInUpCentered .8s ease-out .2s both}.number-bg{width:100%;height:auto}.serial-number{position:absolute;top:50%;left:50%;transform:translate(-50%,-45%);font-size:12cqw;font-weight:900;color:#fff;letter-spacing:.6cqw;text-shadow:0 0 15px rgba(0,255,204,.5);font-family:Inter,sans-serif}.number-desc{position:absolute;top:49%;left:50%;transform:translate(-50%);width:85%;height:auto;animation:entranceFadeInUpCentered .8s ease-out .4s both}.number-actions{position:absolute;bottom:18%;left:50%;transform:translate(-50%);width:100%;display:flex;justify-content:center;z-index:1;animation:entranceFadeInUpCentered .8s ease-out .6s both}.btn-confirm{background:none;border:none;cursor:pointer;width:52%;transition:transform .2s;animation:idlePulse 2s infinite}.btn-confirm img{width:100%;height:auto}.btn-agree{background:transparent;border:none;cursor:pointer;width:62%;transition:transform .2s;animation:idlePulse 2s infinite;mix-blend-mode:multiply}.btn-agree img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.instruction-page{position:absolute;top:0;left:0;width:100%;height:100%;z-index:30;opacity:0;pointer-events:none;transition:opacity .5s ease;background-color:#000}.instruction-page.active{opacity:1;pointer-events:auto}.instruction-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.instruction-header{position:absolute;top:8.5%;left:50%;transform:translate(-50%);width:100%;display:flex;justify-content:center;animation:entranceFadeInUpCentered .8s ease-out both}.header-title{font-size:9.6cqw;font-weight:900;color:#fff;text-shadow:0 0 10px rgba(0,255,204,.8);letter-spacing:1.2cqw;font-family:Inter,sans-serif}.instruction-body{position:absolute;top:15%;left:50%;transform:translate(-50%);width:85%;height:68%;display:flex;flex-direction:column;align-items:center;z-index:1;animation:entranceFadeInUpCentered .8s ease-out both}.rotate-section{position:absolute;top:10%;width:100%;display:flex;flex-direction:column;align-items:center;gap:4cqw;animation:entranceFadeInUp .8s ease-out .2s both}.rotate-icon{width:22%;height:auto;animation:idleRotate 3s ease-in-out infinite}.rotate-text{width:45%;height:auto}.score-section{position:absolute;top:39%;width:100%;display:flex;flex-direction:column;align-items:center;gap:3.2cqw;animation:entranceFadeInUp .8s ease-out .4s both}.score-img{width:60%;height:auto;animation:idleFloat 4s ease-in-out infinite}.score-img:nth-child(2){animation-delay:.5s}.hints-section{position:absolute;top:68%;width:100%;display:flex;justify-content:center;animation:entranceFadeInUp .8s ease-out .6s both}.hints-img{width:82%;height:auto;animation:idleShimmer 3s infinite}.instruction-footer{position:absolute;bottom:10%;left:50%;transform:translate(-50%);width:100%;display:flex;justify-content:center;z-index:1;animation:entranceFadeInUpCentered .8s ease-out .8s both}.btn-start-game{background:none;border:none;cursor:pointer;width:50%;height:auto;display:flex;justify-content:center;align-items:center;transition:transform .2s;animation:idlePulse 2s infinite}.btn-start-game span{font-size:8cqw;font-weight:900;color:#fff;text-shadow:0 0 10px rgba(0,255,204,.8);letter-spacing:2cqw;font-family:Inter,sans-serif}.fake-click-overlay{position:absolute;bottom:15%;left:0;width:100%;height:15vh;background:#f000;cursor:pointer;z-index:10}.btn-start-game:active{animation:clickShake .2s ease-in-out}@keyframes idleRotate{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}@keyframes entranceFadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes entranceFadeInUpCentered{0%{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%)}}@keyframes entranceCharacter{0%{opacity:0;transform:translate(20px,20px)}to{opacity:1;transform:translate(0)}}@keyframes idleBreathing{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.06)}}@keyframes idleShimmer{0%{filter:brightness(1) drop-shadow(0 0 0px rgba(0,255,204,0))}50%{filter:brightness(1.2) drop-shadow(0 0 15px rgba(0,255,204,.6))}to{filter:brightness(1) drop-shadow(0 0 0px rgba(0,255,204,0))}}@keyframes idleFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(2deg)}}@keyframes idlePulse{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.2)}to{transform:scale(1);filter:brightness(1)}}@keyframes idleStar{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}@keyframes clickShake{0%{transform:scale(.95) rotate(0)}25%{transform:scale(.95) rotate(-3deg)}50%{transform:scale(.95) rotate(3deg)}75%{transform:scale(.95) rotate(-3deg)}to{transform:scale(.95) rotate(0)}}.game-page{position:absolute;top:0;left:0;width:100%;height:100%;z-index:40;opacity:0;pointer-events:none;transition:opacity .5s ease;background-color:#000;overflow:hidden}.game-page.active{opacity:1;pointer-events:auto}.game-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.game-hints-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.game-front{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none}.game-items-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}.player-boat-container{position:absolute;bottom:-5%;left:50%;transform:translate(-50%);width:36%;z-index:100;transition:filter .2s ease}.player-boat-container.glow{filter:drop-shadow(0 0 30px #00ffcc) drop-shadow(0 0-60px #00ffcc) brightness(1.8);transform:translate(-50%) scale(1.1);animation:boatFlash .3s ease-out}@keyframes boatFlash{0%{filter:brightness(1)}50%{filter:brightness(2) drop-shadow(0 0 40px #ffffff)}to{filter:brightness(1.8) drop-shadow(0 0 30px #00ffcc)}}.floating-scores-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:120}.player-boat{width:100%}.game-ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:110;pointer-events:none}.scoreboard{position:absolute;top:2%;left:50%;transform:translate(-50%);width:45%;display:flex;flex-direction:column;align-items:center}.score-logo{width:100%;height:auto;margin-bottom:-18%;z-index:1}.score-display{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:45%}.score-value{font-size:10cqw;color:#f30;font-weight:400;text-shadow:0 0 8px rgba(255,51,0,.8);font-family:PixelOperator8,sans-serif;line-height:1}.timer-value{font-size:3cqw;color:#fff;font-family:PixelOperator8,monospace;margin-top:1.2cqw}.lives-display{display:flex;gap:4cqw;position:absolute;top:6%;left:50%;transform:translate(-50%);z-index:2}.life-icon{width:10cqw;height:auto;filter:drop-shadow(0 0 10px rgba(0,255,204,.9))}.game-page.game-over:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;z-index:140;pointer-events:none}.gameover-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);width:60%;z-index:150;animation:gameoverPop .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes gameoverPop{to{transform:translate(-50%,-50%) scale(1)}}.damage-overlay{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 0 100px #f000;border:0px solid rgba(255,0,0,0);pointer-events:none;z-index:130;transition:box-shadow .2s ease,border .2s ease}.damage-overlay.active{box-shadow:inset 0 0 150px #f00c;border:20px solid rgba(255,0,0,.5)}.countdown-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:150;opacity:0;pointer-events:none;transition:opacity .3s ease}.countdown-overlay.active{opacity:1}.countdown-img{width:auto;height:20cqw;transform:scale(.5);opacity:0;transition:transform .5s cubic-bezier(.175,.885,.32,1.275),opacity .5s ease}.countdown-img.show{transform:scale(1);opacity:1}@keyframes itemFly{0%{transform:translate(-50%,-50%) scale(0);top:55%;left:50%;opacity:0}20%{opacity:1}80%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);top:100%;left:var(--target-x, 50%);opacity:1}}.game-item{position:absolute;transform:translate(-50%,-50%);z-index:2;width:15%;height:auto;filter:drop-shadow(0 0 5px rgba(0,255,204,.5));will-change:transform,opacity,top,left}.game-item.item-glow{filter:drop-shadow(0 0 15px #00ffcc) brightness(1.3)}.game-hint{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:80%;z-index:110;opacity:0;pointer-events:none}.game-hint.active{opacity:1;animation:hintPop .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes hintPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}60%{transform:translate(-50%,-50%) scale(1.1);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.game-item.collecting{z-index:1;width:40%;filter:drop-shadow(0 0 20px #ffffff) brightness(2);animation:collectSuck .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes collectSuck{0%{transform:translate(-50%,-50%) scale(1);filter:brightness(2) drop-shadow(0 0 20px #ffffff)}30%{transform:translate(-50%,-50%) scale(1.8);filter:brightness(3) drop-shadow(0 0 40px #ffffff)}to{left:50%;top:50%;transform:translate(-50%,-50%) scale(0);opacity:0}}.floating-score{position:absolute;width:25%;height:auto;pointer-events:none;z-index:120;animation:floatUpFade 1s ease-out forwards;will-change:transform,opacity}@keyframes floatUpFade{0%{transform:translate(-50%) scale(.5);opacity:0}20%{opacity:1}to{transform:translate(-50%,-150%) scale(1.5);opacity:0}}.result-page{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:200;background-color:#000;overflow:hidden}.result-page.active{display:block}.result-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.result-content{position:relative;width:100%;height:100%;color:#fff}.result-header{position:absolute;top:10%;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;width:100%;justify-content:center;white-space:nowrap}.result-serial{font-family:PixelOperator8,sans-serif;font-size:4cqw;color:#fff;margin-top:14.2%;margin-right:28%}.result-title{font-size:4.8cqw;background:linear-gradient(to bottom,#0fc,#097);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;display:none}.result-scoreboard{position:absolute;top:27%;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center}.result-score{font-family:PixelOperator8,sans-serif;font-size:18cqw;color:#f30;text-shadow:0 0 20px rgba(255,51,0,.8);letter-spacing:-5px;margin-bottom:20px}.result-time{font-family:PixelOperator8,sans-serif;font-size:5cqw;color:#fff;letter-spacing:2px}.result-info{position:absolute;top:53%;left:50%;transform:translate(-50%);text-align:center;font-size:3.4cqw;line-height:1.4;width:90%;color:#fff;display:none}.result-actions{position:absolute;top:58%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:12px;width:65%}.result-actions button{background:none;border:none;padding:0;cursor:pointer;width:100%}.result-actions button img{width:100%;height:auto}.result-slogan{position:absolute;bottom:6%;left:8%;width:35%;transform:rotate(-15deg);z-index:210}.result-mascot{position:absolute;bottom:-5%;right:-4%;width:45%;z-index:210}.rank-page{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:300;background-color:#000;overflow:hidden}.rank-page.active{display:block}.rank-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.rank-content{position:relative;width:100%;height:90%;display:flex;flex-direction:column;align-items:center;padding-top:19%}.rank-title-text{font-size:6.4cqw;font-weight:700;color:#0fc;text-shadow:0 0 10px rgba(0,255,204,.8);margin-bottom:10px;letter-spacing:2px}.rank-title-img{width:40%;margin:0 auto 5px;display:block}.my-rank-section{width:95%;margin-bottom:15px;display:flex;flex-direction:column;align-items:center}.leaderboard-section{width:88%;flex:1;display:flex;flex-direction:column;overflow:hidden;padding:20% 10px 8%}.rank-subtitle{font-size:2.8cqw;color:#fff;text-align:center;margin-bottom:12px;opacity:.9}.rank-list{flex:1;overflow-y:auto;padding-right:5px}.rank-list::-webkit-scrollbar{width:4px}.rank-list::-webkit-scrollbar-track{background:#ffffff0d}.rank-list::-webkit-scrollbar-thumb{background:#0fc;border-radius:10px}.rank-item{position:relative;width:100%;height:11%;display:flex;align-items:center;margin-bottom:10px}.my-rank-item{height:12cqw}.rank-number{font-family:sans-serif;font-size:8.8cqw;color:#0fc;min-width:15cqw;font-style:italic;text-align:center;-webkit-text-stroke:.5px #000;text-shadow:2px 2px 0 #000;font-weight:900;margin-left:-5px}.my-rank-item .rank-number,.rank-item.is-user .rank-number{color:#f9a61a;font-size:10.4cqw}.rank-item.is-user .rank-name{color:#f9a61a}.rank-bar{width:100%;height:100%;background-image:url(/images/rank/nameBG.png);background-size:100% 100%;background-repeat:no-repeat;display:flex;align-items:center;padding:0 30px}.rank-name{font-family:sans-serif;font-size:6.2cqw;color:#009e65;flex:1;text-align:left;margin-left:15px;font-weight:900}.btn-redeem:active,.btn-back:active{transform:scale(.95)}.rank-time{font-family:PixelOperator8,sans-serif;font-size:2.4cqw;color:#fff;margin-right:12px;opacity:1}.rank-score{font-family:PixelOperator8,sans-serif;font-size:5.6cqw;color:#fff;min-width:12cqw;text-align:right;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.rank-actions{position:absolute;bottom:-8%;width:90%;display:flex;justify-content:center;gap:15px}.rank-actions button{background:none;border:none;padding:0;cursor:pointer;width:46%}.rank-actions button img{width:100%;height:auto}.redeem-page{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:400;background-color:#000;overflow:hidden}.redeem-page.active{display:block}.redeem-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.redeem-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding-top:44.5%}.password-section{display:flex;flex-direction:column;align-items:center}.password-label{color:#fff;font-size:4.8cqw;font-weight:700;margin-bottom:10px;letter-spacing:2px}.password-display{display:flex;gap:15px;padding:15px 40px;clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%)}.dot{width:12px;height:12px;border-radius:50%;background-color:transparent;border:1.5px solid #fff}.dot.active{background-color:#fff;box-shadow:0 0 8px #fff}.keypad-container{position:relative;width:58%;margin-bottom:5%;margin-top:4%}.keypad-img{width:100%;height:auto}.keypad-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.key-btn{background:transparent;border:none;cursor:pointer}.redeem-confirm-area{position:absolute;bottom:100px;width:50%;height:60px;display:flex;justify-content:center;z-index:460}.btn-redeem-confirm{background:transparent;border:none;color:#0fc;font-size:7.2cqw;font-weight:700;letter-spacing:3px;cursor:pointer;text-shadow:0 0 10px rgba(0,255,204,.5);width:100%;height:100%;visibility:hidden}.btn-redeem-complete{background:transparent;border:none;color:transparent;font-size:7.2cqw;width:100%;height:60px;cursor:pointer;display:none}.btn-redeem-back{position:absolute;bottom:40px;background:none;border:none;color:#fff;font-size:4.4cqw;cursor:pointer;display:flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:4px;z-index:450}.btn-redeem-back:hover{opacity:.8}.redeemed-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;display:none;justify-content:center;align-items:center;z-index:410;pointer-events:none}.redeemed-overlay.active{display:flex}.redeemed-img{width:60%;height:auto}