*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a0a2e;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}#app{width:1920px;height:1125px;position:absolute;top:50%;left:50%;transform-origin:center center;overflow:hidden;transform:translate(-50%,-50%) scale(var(--app-scale, 1))}.global-logo{position:fixed;top:3.5%;left:2%;width:min(200px,14vw);z-index:100;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.hand-cursor{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:left .08s linear,top .08s linear}.hand-cursor img{width:120px;height:120px;filter:drop-shadow(0 0 12px rgba(0,255,220,1)) drop-shadow(0 0 30px rgba(0,255,220,.9)) drop-shadow(0 0 60px rgba(0,255,200,.6)) drop-shadow(0 0 100px rgba(0,255,200,.3))}.hand-cursor .cursor-open{display:block}.hand-cursor .cursor-fist,.hand-cursor.grabbing .cursor-open{display:none}.hand-cursor.grabbing .cursor-fist{display:block}.hand-cursor.hidden{display:none}#camera-panel{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}#camera-video{width:640px;height:480px;object-fit:cover;transform:scaleX(-1)}.camera-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}#main-area{flex:1;height:100%;position:relative;overflow:hidden}.screen{position:absolute;inset:0;display:none;background-size:cover;background-position:left center;background-repeat:no-repeat}.screen.active{display:flex;align-items:center;justify-content:center}.screen-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:2;padding:16px}#screen-landing{background-image:url(../assets/0-landing/landing.jpg)}.global-logo.hide-on-landing{display:none}.landing-start{position:absolute;left:12%;bottom:14%}.landing-start img{width:min(260px,24vw)!important}.btn-image{background:none;border:none;cursor:pointer;transition:transform .2s,filter .2s;padding:0}.btn-image:hover,.btn-image.hand-hover{transform:scale(1.08);filter:brightness(1.2)}.btn-image:active,.btn-image.hand-active{transform:scale(.95)}.btn-image img{width:min(220px,22vw);height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}#screen-instruction{background-image:url(../assets/1-instruction/instruction.jpg);background-color:#0c2a2a;justify-content:center;align-items:stretch}#screen-instruction.active{display:flex}.instr-camera{position:absolute;left:4%;top:55%;transform:translateY(-50%);width:20%;max-width:300px;aspect-ratio:3/4;z-index:3;overflow:hidden}.instr-camera video{position:absolute;top:1.5%;left:3%;width:94%;height:97%;object-fit:cover;transform:scaleX(-1);border-radius:6px}.hand-glow-canvas{position:absolute;top:1.5%;left:3%;width:94%;height:97%;z-index:1;pointer-events:none}.instr-camera-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2}.instr-text-bubble{position:absolute;bottom:28%;left:50%;transform:translate(-50%);z-index:4;animation:bubbleFadeIn .5s ease}@keyframes bubbleFadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.instr-text-bubble img{width:min(420px,40vw);height:auto;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,.3))}.arrow-cover{position:absolute;bottom:2%;left:38%;width:24%;height:30%;background:radial-gradient(ellipse at center,#0e2c2c 40%,transparent 70%);z-index:3;pointer-events:none;transition:opacity .5s ease}.arrow-cover.hidden{opacity:0}.instr-start{position:absolute;bottom:8%;left:50%;transform:translate(-50%);z-index:5}.instr-start.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#screen-tutorial{background-image:url(../assets/1-instruction/background.jpg);background-color:#0c2a2a}#screen-tutorial.active{display:flex}.tutorial-title{position:absolute;top:8%;left:50%;transform:translate(-50%);width:min(500px,43vw);z-index:3;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}.tutorial-board-wrap{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:min(800px,60vw,80vh);aspect-ratio:1;z-index:1}.tutorial-board{width:100%;height:100%}.board-frame{position:absolute;inset:-5.5%;width:111%;height:111%;object-fit:fill;pointer-events:none;z-index:2;filter:drop-shadow(0 0 12px rgba(0,255,220,.4))}.tutorial-gesture{position:absolute;bottom:0;right:8%;z-index:4;animation:fadeIn .5s ease}.tutorial-gesture img{width:min(550px,45vw);height:auto;filter:drop-shadow(0 4px 16px rgba(0,0,0,.3))}#screen-transition{background-color:#0c2a2a}#screen-transition.active{display:flex;align-items:center;justify-content:center}.transition-bg{width:100%;height:100%;object-fit:cover;animation:fadeInOnly 1s ease}@keyframes fadeInOnly{0%{opacity:0}to{opacity:1}}#screen-ready{background-image:url(../assets/1-instruction/background.jpg);background-color:#0c2a2a}#screen-ready.active{display:flex}.ready-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#000a1ed9;z-index:3;border-radius:8px}.ready-text{width:min(460px,44vw);filter:drop-shadow(0 0 20px rgba(0,255,220,.6))}.ready-overlay .btn-image img{width:min(320px,28vw)!important}.ready-hud{position:absolute;top:22%;right:18%;display:flex;flex-direction:column;gap:14px;z-index:4}.ready-hud-item{position:relative;display:flex;align-items:center;justify-content:center}.ready-hud-bg{width:min(200px,15vw);height:auto}.ready-hud-value{position:absolute;bottom:28%;color:#2a7a7a;font-size:clamp(20px,2.5vw,38px);font-weight:900}.ready-timebar{position:absolute;bottom:4.5%;left:50%;transform:translate(-50%);width:min(800px,60vw);z-index:6}.ready-timebar-img{width:100%;height:auto;display:block;filter:grayscale(1)}.game-timebar-color{position:absolute;inset:0;clip-path:polygon(0 0,calc(var(--pct, 0%) + 3%) 0,var(--pct, 0%) 100%,0 100%)}.game-timebar-color img{width:100%;height:auto;display:block}.ready-mascots{position:absolute;bottom:0;right:2%;width:min(420px,32vw);z-index:5}.stage-badge{position:absolute;bottom:90%;z-index:6;transform:translate(-50%);transition:left .5s ease}.stage-badge[data-stage="1"]{left:17%}.stage-badge[data-stage="2"]{left:50%}.stage-badge[data-stage="3"]{left:83%}.stage-badge img{width:min(220px,15vw);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}#screen-game{background-image:url(../assets/1-instruction/background.jpg);background-color:#0c2a2a}#screen-game.active{display:flex}#game-canvas{width:100%;height:100%}.game-timebar-fill{width:100%;transition:width .3s linear;overflow:hidden}#screen-game .ready-timebar{opacity:1}.timer-text{color:#fff;font-size:clamp(14px,2vw,24px);font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.8)}.score-label{height:min(24px,3vh);width:auto}.score-value{color:gold;font-size:clamp(20px,3vw,42px);font-weight:900;text-shadow:0 2px 10px rgba(255,215,0,.5)}#game-canvas{flex:1;width:100%;display:block}.stage-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#000014b3;z-index:20;animation:fadeIn .3s ease}.stage-overlay.hidden{display:none}.stage-overlay img{width:min(400px,50vw);height:auto;animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.timesup-img{width:min(420px,54vw)!important}#screen-score{background:#0a0a1a}.score-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.final-score-box{position:absolute;top:61%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center}.final-score-label{width:min(380px,32vw)}.final-score-number{position:absolute;bottom:19%;left:50%;transform:translate(-50%);color:#5a9a9a;font-size:clamp(44px,6.5vw,90px);font-weight:900;text-shadow:0 2px 12px rgba(0,180,180,.3);animation:scoreGlow 2s ease-in-out infinite}@keyframes scoreGlow{0%,to{text-shadow:0 2px 12px rgba(0,180,180,.3)}50%{text-shadow:0 4px 24px rgba(0,220,220,.6),0 0 40px rgba(0,220,220,.2)}}.score-next-round{position:absolute;right:8%;bottom:3%;z-index:2}.score-next-round img{width:min(280px,26vw)!important}.countdown-text{color:#2a9a9a;font-size:clamp(14px,1.8vw,22px);font-weight:700;letter-spacing:.05em;text-shadow:0 2px 8px rgba(0,180,180,.3)}#loading-overlay{position:fixed;inset:0;z-index:10000;background:#0a0a2e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;font-size:18px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#0cf;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#screen-video{background:#0a1a1a}#screen-video.active{display:flex;align-items:center;justify-content:center}.video-title{z-index:2;width:32%;top:8%;position:absolute}.video-subtitle{position:absolute;bottom:5%;width:38%;z-index:3}.video-screen-layout{top:25%;width:20%;position:absolute;z-index:2;justify-content:center;gap:0}.video-player-wrap{flex-shrink:0;height:100%;aspect-ratio:9/16;overflow:hidden;background:linear-gradient(160deg,#fff,#d8d8d8,#f0f0f0);padding:10px}.video-player-wrap video{width:100%;height:100%;object-fit:cover;background:#000}.video-mascots-wrap{z-index:2;position:absolute;right:8%;bottom:16%}.video-mascots-qr{width:560px;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}.qr-overlay{position:absolute;right:29%;top:64%;width:27%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:4px}