:root{--aspect-ratio: 1.75;--bg-color: #000;--text-color: #fff;--accent-color: #f1c40f}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#aspect-ratio-container{position:relative;width:min(100vw,calc(100vh * var(--aspect-ratio)));height:min(100vh,calc(100vw / var(--aspect-ratio)));background:#111;overflow:hidden;box-shadow:0 0 50px #00000080}.scene{position:absolute;top:0;left:0;width:100%;height:100%;display:none;opacity:0;transition:opacity .5s ease}.scene.active{display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:1}#scene-home{background:#000}.intro-layers{position:relative;width:100%;height:100%;overflow:hidden}.layer{position:absolute;pointer-events:none;object-fit:contain}.layer.bg{top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}.layer.logo{top:5%;left:50%;transform:translate(-50%);width:35%;z-index:2}.layer.title{top:40%;left:50%;transform:translate(-50%,-50%);width:45%;z-index:5;animation:bounceIn 1s cubic-bezier(.175,.885,.32,1.275),floating 4s ease-in-out infinite 1s}.layer.bear-left{bottom:8%;left:5%;width:22%;z-index:4;animation:slideInLeft .8s ease-out,bearBreath 4s ease-in-out infinite .8s}.layer.bear-right{bottom:8%;right:5%;width:22%;z-index:4;animation:slideInRight .8s ease-out,bearBreath 4s ease-in-out infinite .8s}.layer.footer-box{bottom:12%;left:50%;transform:translate(-50%);width:55%;z-index:3}.start-trigger-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:10}@keyframes bounceIn{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}70%{transform:translate(-50%,-50%) scale(.9)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes slideInLeft{0%{transform:translate(-50px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(50px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes screenShake{10%,90%{transform:scale(1.02) rotate(.5deg)}20%,80%{transform:scale(1.02) rotate(-1deg)}30%,50%,70%{transform:scale(1.02) rotate(1.5deg)}44%,60%{transform:scale(1.02) rotate(-1.5deg)}}.screen-shake-active{animation:screenShake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translateY(-50%) translate(-1px)}20%,80%{transform:translateY(-50%) translate(2px)}30%,50%,70%{transform:translateY(-50%) translate(-4px)}40%,60%{transform:translateY(-50%) translate(4px)}}.shake-active{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes softFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes bearBreath{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes buttonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes floating{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-25px)}}@keyframes floatingLogo{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}@keyframes subtlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}#scene-instruction{background:#000}.instruction-layers{position:relative;width:100%;height:100%;overflow:hidden}.ins-layer{position:absolute;pointer-events:none;object-fit:contain}.ins-bg{top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}#scene-video{background:#000;display:none;justify-content:center;align-items:center}#scene-video.active{display:flex}#reward-video{width:100%;height:100%;object-fit:contain;background:#000}.ins-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:2}.ins-logo{top:5%;left:3%;width:40%;z-index:3}.ins-person{bottom:11%;left:10%;width:27%;z-index:4;animation:personSwing1 3s infinite}.ins-person2{bottom:11%;left:10%;width:27%;z-index:4;opacity:0;animation:personSwing2 3s infinite}.ins-ball{top:30%;left:35%;width:8%;z-index:4;animation:ballFly 3s ease-in infinite}.ins-bubble{bottom:25%;left:32%;width:35%;z-index:5;animation:softFloat 4s ease-in-out infinite}.ins-bear{bottom:0;right:5%;width:30%;z-index:4;animation:bearBreath 4s ease-in-out infinite}.ins-light{bottom:5%;left:-2%;width:48%;z-index:4;mix-blend-mode:screen}.ins-arrow{top:20%;left:21%;width:6%;z-index:6;mix-blend-mode:screen;animation:bounceArrow 1.5s infinite}.next-btn-wrapper{position:absolute;bottom:5%;right:3%;width:18%;z-index:1000;cursor:pointer;pointer-events:auto;display:flex;justify-content:center;align-items:center}.ins-next-bg{width:100%;height:auto}.next-timer{position:absolute;color:#fff;font-weight:700;font-size:1.1rem;right:15%}@keyframes bounceArrow{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes personSwing1{0%,70%{opacity:1}71%,to{opacity:0}}@keyframes personSwing2{0%,70%{opacity:0}71%,to{opacity:1}}@keyframes ballFly{0%,65%{transform:scale(1) translate(0);opacity:1}70%{transform:scale(1.1) translate(0);opacity:1}90%,to{transform:scale(.1) translate(1000px,-200px);opacity:0}}#scene-success{background:#000c}.success-title{font-size:10rem;font-weight:900;color:#f1c40f;text-shadow:0 0 50px rgba(241,196,15,.8);animation:pulse 1s infinite alternate}.game-layers{position:relative;width:100%;height:100%;overflow:hidden}.game-layer{position:absolute;pointer-events:none;object-fit:contain}.game-bg{top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}.game-dim-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000059;z-index:5;pointer-events:none}.game-logo{top:5%;left:3%;width:35%;z-index:10}.game-intro-layers{position:relative;width:100%;height:100%;overflow:hidden}.gi-layer{position:absolute;width:100%;height:100%;object-fit:cover}.gi-overlay{position:absolute;width:100%;height:100%;background:#000000b3;z-index:2}.tutorial-overlay{position:absolute;width:100%;height:100%;z-index:10;pointer-events:none}.bear-tutorial{position:absolute;bottom:0;right:15%;width:20%;z-index:500;animation:bearBreath 3s ease-in-out infinite}.speech-bubble{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);background:#fff;border:4px solid #F15A24;border-radius:30px;padding:20px 40px;width:45%;box-shadow:0 10px #0000001a;z-index:12}.speech-bubble:after{content:"";position:absolute;bottom:-40px;right:15%;border-width:20px;border-style:solid;border-color:#F15A24 transparent transparent transparent}.speech-bubble p{color:#333;font-size:24px;font-weight:700;margin:0;line-height:1.4;text-align:center}.speech-bubble .highlight{color:#f15a24}#game-start-btn{position:absolute;bottom:5%;right:5%;width:15%;height:auto;cursor:pointer;z-index:1000;pointer-events:auto}#game-start-btn:hover{transform:scale(1.15)}.start-btn-bg{width:100%;height:auto}.start-text{position:absolute;top:50%;left:80%;transform:translate(-50%,-50%);color:#fff;font-size:20px;font-weight:700;white-space:nowrap;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.3)}#intro-timer{font-size:16px;margin-left:4px}.camera-frame-wrapper{position:absolute;top:78%;left:9%;width:15%;z-index:100;transform:translateY(-50%)}#input-video,#output-canvas{position:absolute;top:18.5%;left:8%;width:84%;height:72%;object-fit:cover;z-index:10;border-radius:25px;transform:scaleX(-1)}.camera-frame{position:relative;width:100%;height:auto;pointer-events:none;z-index:5}.targets-layer{position:absolute;width:100%;height:100%}.target-item{position:absolute;display:flex;justify-content:center;align-items:center;transform:translate(-50%,-50%);z-index:10}.target-img{width:100%;height:auto;z-index:2;transition:transform .2s ease,filter .2s ease}.target-glow{display:none}.game-active .target-img{filter:drop-shadow(0 0 5px rgba(255,235,59,.7));animation:targetIdleShapePulse 2s infinite ease-in-out}@keyframes targetIdleShapePulse{0%,to{filter:drop-shadow(0 0 3px rgba(255,235,59,.5));transform:scale(1)}50%{filter:drop-shadow(0 0 8px rgba(255,235,59,.9));transform:scale(1.05)}}.target-item.hit .target-img{transform:scale(1.3);filter:drop-shadow(0 0 15px rgba(255,235,59,1)) brightness(1.2);animation:hitGlowFlicker .5s ease-out}@keyframes hitGlowFlicker{0%{filter:drop-shadow(0 0 10px rgba(255,255,255,1))}50%{filter:drop-shadow(0 0 40px rgba(255,235,59,1))}to{filter:drop-shadow(0 0 30px rgba(255,235,59,.8))}}[data-hit=compass]{top:25%;left:38%;width:12%;z-index:12;animation:floating 4s ease-in-out infinite}[data-hit=drum]{bottom:30%;left:75%;width:15%;z-index:15;animation:floating 5s ease-in-out infinite .5s}[data-hit=lantern]{top:10%;right:-40%;width:42%;z-index:11;animation:floating 6s ease-in-out infinite 1s}.game-bear{bottom:0;right:5%;width:21%;z-index:500;animation:bearBreath 3s ease-in-out infinite}.hit-overlay{position:absolute;top:59%;left:71%;transform:translate(-50%,-50%) scale(.5);width:20%;z-index:20;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.hit-overlay.active{opacity:1;transform:translate(-50%,-50%) scale(1)}.ball-flight-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5000}.flying-ball{position:absolute;display:none;top:78%;left:16.5%;width:7.5%;transform:translate(-50%,-50%)}.flying-ball.active-flight{display:block}.flying-ball img{width:100%;height:auto}.flying-ball.spinning img{animation:fastSpin .5s linear infinite}.active-flight.fly-compass{animation:flyToCompass 1s ease-in forwards}@keyframes flyToCompass{0%{top:78%;left:16.5%;transform:translate(-50%,-50%) scale(.5);opacity:1}90%{top:25%;left:38%;transform:translate(-50%,-50%) scale(1.6);opacity:1}to{top:25%;left:38%;transform:translate(-50%,-50%) scale(1.6);opacity:0}}.active-flight.fly-drum{animation:flyToDrum 1s ease-in forwards}@keyframes flyToDrum{0%{top:78%;left:16.5%;transform:translate(-50%,-50%) scale(.5);opacity:1}90%{top:49%;left:75%;transform:translate(-50%,-50%) scale(1.5);opacity:1}to{top:49%;left:75%;transform:translate(-50%,-50%) scale(1.5);opacity:0}}.active-flight.fly-lantern{animation:flyToLantern 1s ease-in forwards}@keyframes flyToLantern{0%{top:78%;left:16.5%;transform:translate(-50%,-50%) scale(.5);opacity:1}90%{top:5%;left:95%;transform:translate(-50%,-50%) scale(1.8);opacity:1}to{top:5%;left:95%;transform:translate(-50%,-50%) scale(1.8);opacity:0}}@keyframes fastSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glowPulse{0%{transform:scale(.6);opacity:0}50%{transform:scale(1.6);opacity:1;filter:brightness(1.5)}to{transform:scale(1.8);opacity:0}}.success-layers{position:relative;width:100%;height:100%;overflow:hidden}.success-layer{position:absolute;width:100%;height:100%;object-fit:cover;z-index:1}.success-nice{position:absolute;top:15%;left:50%;transform:translate(-50%);width:35%;z-index:20}.success-tutorial-overlay{position:absolute;width:100%;height:100%;z-index:10;pointer-events:none}.success-bear{position:absolute;bottom:0%;right:5%;width:40%;z-index:500;animation:bearBreath 3s ease-in-out infinite}@keyframes scalePulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.success-speech-bubble{position:absolute;bottom:25%;left:45%;transform:translate(-50%);background:#fff;border:4px solid #F15A24;border-radius:40px;padding:30px 60px;width:48%;box-shadow:0 10px #0000001a;z-index:11;text-align:center;animation:softFloat 5s ease-in-out infinite}.success-speech-bubble:after{content:"";position:absolute;bottom:-40px;right:20%;border-width:20px;border-style:solid;border-color:#F15A24 transparent transparent transparent}.success-speech-bubble p{color:#f15a24;font-size:32px;font-weight:800;margin:0;line-height:1.2}.success-speech-bubble .subtext{color:#333!important;font-size:18px;font-weight:600;margin-top:10px}#game-start-countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:200px;font-weight:900;opacity:.7;z-index:2000;display:none;pointer-events:none;text-shadow:0 10px 40px rgba(0,0,0,.5)}.game-intro-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:auto;z-index:2500;pointer-events:none;animation:bounceIn .8s cubic-bezier(.175,.885,.32,1.275)}#game-hit-dark-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:10;display:none;pointer-events:none;transition:opacity .3s ease}.targets-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.game-layers.hit-highlight-active #game-hit-dark-overlay{display:block}.game-layers.hit-highlight-active .target-item.hit{z-index:100!important;transform:translate(-50%,-50%) scale(1.3)!important}.game-layers.hit-highlight-active .target-item.hit .target-glow{background:radial-gradient(circle,#fff,#ffeb3b 40%,#ffeb3b00 85%);width:150%;height:150%;opacity:1;filter:brightness(1.5) blur(35px);animation:glowPulseReward 1s ease-in-out infinite alternate}@keyframes glowPulseReward{0%{opacity:.7;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}.game-layers.hit-highlight-active .game-bear,.game-layers.hit-highlight-active .hit-overlay,.game-layers.hit-highlight-active #global-camera-frame{z-index:110!important}.game-layers.hit-highlight-active .game-bear{transform:translate(-15%);animation:victoryJump .8s ease-in-out infinite}@keyframes victoryJump{0%,to{transform:translate(-15%) translateY(0)}50%{transform:translate(-15%) translateY(-50px)}}.hit-overlay{position:absolute;top:59%;left:64%;width:20%;z-index:20;opacity:0;transform:translate(-50%,-50%) scale(.5);pointer-events:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.hit-overlay.active{opacity:1;transform:translate(-50%,-50%) scale(1);animation:niceHitLoop 1.2s ease-in-out infinite}@keyframes niceHitLoop{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.result-layers{position:relative;width:100%;height:100%;overflow:hidden}.result-layer{position:absolute;pointer-events:none;object-fit:contain}.result-bg{top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}.result-top-group{position:absolute;top:12%;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center;z-index:10}.result-title-img{width:27%;height:auto}.restart-timer-box{margin-top:10px;font-size:1.8rem;font-weight:800;color:#333;text-shadow:none;z-index:30;padding:10px 20px;cursor:pointer;pointer-events:auto}.center-photo-card{position:absolute;bottom:15%;left:50%;transform:translate(-50%);width:20%;z-index:20}.photo-wrapper{position:relative;width:100%;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 -5px 20px #0003}.photo-frame-overlay{position:relative;width:100%;height:auto;z-index:2;pointer-events:none}.captured-photo-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#333}.result-bear{bottom:5%;left:5%;width:25%;z-index:25;transform-origin:bottom center;animation:bearBreath 4s ease-in-out infinite}.result-bottom-right{bottom:0;right:0;width:22%;z-index:15;pointer-events:none}.qr-section{position:absolute;left:65%;bottom:25%;transform:translateY(0);display:flex;flex-direction:column;align-items:center;z-index:30;width:18%}.scan-hint-bubble{width:100%;height:auto;margin-bottom:-5px;margin-right:-20%;z-index:32;animation:subtlePulse 2s infinite}.qr-box{background:#fff;padding:8px;border-radius:12px;border:5px solid #F15A24;width:80%;box-shadow:0 5px 15px #0003;z-index:31;position:relative;cursor:pointer;pointer-events:auto}.qr-box:hover{transform:scale(1.05)}.qr-img{width:100%;height:auto;display:block}