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