:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:fixed;touch-action:none}html,body{background-color:#7f170a;background-image:url(/ily-demo/assets/pattern.jpg);background-repeat:repeat;background-position:50% 0;background-attachment:fixed;font-family:sans-serif}#root{width:100%;height:100%}*{-webkit-tap-highlight-color:transparent}.active-player{display:block;z-index:10;cursor:pointer}.hidden-player{opacity:.001;pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:fixed;top:0;left:0;width:100vw;height:100dvh;height:-webkit-fill-available;padding:20px;box-sizing:border-box;overflow:hidden}.intro-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;transition:all .8s cubic-bezier(.68,-.55,.27,1.55);position:absolute}.app-container.started .intro-container{display:none}.logo{width:200px;max-width:80%;height:auto;object-fit:contain;transform:scale(1.5);transition:all .8s cubic-bezier(.68,-.55,.27,1.55);z-index:20;margin-bottom:5vh}.app-container.started .logo{transform:scale(1);margin-bottom:0}.start-screen{display:flex;justify-content:center;align-items:center;width:100%;transition:all .5s ease-in;z-index:15}.app-container.started .start-screen{opacity:0;transform:translateY(100%);pointer-events:none;height:0;margin:0;overflow:hidden}.start-btn{font-family:"Press Start 2P",cursive,monospace;font-size:2rem;padding:20px 40px;background-color:#fff;color:#000;border:4px solid #000;box-shadow:8px 8px #000;cursor:pointer;text-transform:uppercase;transition:transform .1s}.start-btn:active{transform:translate(4px,4px);box-shadow:4px 4px #000}.app-container.started{justify-content:center}.player-wrapper{width:auto;height:auto;max-width:800px;background:transparent;position:relative;display:flex;justify-content:center;align-items:center;transform-origin:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .8s ease}.app-container.started .player-wrapper{opacity:1;pointer-events:auto;visibility:visible;animation:expandPlayer .8s cubic-bezier(.175,.885,.32,1.27) forwards}@keyframes expandPlayer{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.video-container{width:auto;height:auto;display:flex;justify-content:center;align-items:center;border-radius:12px}.youtube-player{box-shadow:0 10px 30px #00000080;display:block}.controls-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:100%;position:relative;margin-top:24px;z-index:30;padding:0 20px;box-sizing:border-box;pointer-events:none;opacity:0;transition:opacity .5s ease .8s}.app-container.started .controls-container{opacity:1;pointer-events:auto}.control-btn{background:none;border:none;cursor:pointer;padding:0;transition:transform .2s ease,opacity .2s ease;width:60px;height:60px;display:block;pointer-events:auto;position:relative;filter:drop-shadow(-2px -2px .5px rgba(255,255,255,.75)) drop-shadow(2px 2px .5px rgba(0,0,0,.4)) drop-shadow(0 4px 6px rgba(0,0,0,.6))}.control-btn:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--member-color);-webkit-mask-image:var(--member-mask);mask-image:var(--member-mask);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.control-btn.yeyoung{--member-color: #E1C067;--member-mask: url(/ily-demo/assets/symbol-members/Sprite_ButtonYeyoung.png)}.control-btn.sion{--member-color: #6D5ED2;--member-mask: url(/ily-demo/assets/symbol-members/Sprite_ButtonSion.png)}.control-btn.mika{--member-color: #7DD68B;--member-mask: url(/ily-demo/assets/symbol-members/Sprite_ButtonMika.png)}.control-btn.zoe{--member-color: #CD8684;--member-mask: url(/ily-demo/assets/symbol-members/Sprite_ButtonZoe.png)}.control-btn.andamiro{--member-color: #5387CA;--member-mask: url(/ily-demo/assets/symbol-members/Sprite_ButtonAndamiro.png)}.control-btn:hover{transform:scale(1.1)}.control-btn:active{transform:scale(.95)}.player-feedback-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:50}.feedback-circle{width:10%;aspect-ratio:1 / 1;background-color:#00000080;border-radius:50%;display:flex;justify-content:center;align-items:center;animation:feedbackPulse .8s ease-out forwards}.feedback-icon{width:50%;height:50%}@keyframes feedbackPulse{0%{opacity:0;transform:scale(.8)}30%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.3)}}.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;background-color:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pie-container{position:relative;width:150px;height:150px;display:flex;justify-content:center;align-items:center}.pie-graph{width:100%;height:100%;transform:rotate(-90deg);animation:pieRotate 4s linear infinite}@keyframes pieRotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}.pie-bg{fill:none;stroke:#ffffff1a;stroke-width:8;stroke-linecap:round}.pie-fill{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray .3s ease-out}.percentage-text{font-family:"Press Start 2P",cursive,monospace;font-size:14px;color:#fff;text-shadow:2px 2px 0px rgba(0,0,0,.5);pointer-events:none;animation:textPulse 1s ease-in-out infinite alternate}@keyframes textPulse{0%{transform:scale(1)}to{transform:scale(1.1)}}.progress-bar-container{width:200px;height:10px;background-color:#ffffff1a;border:2px solid #ffffff;margin-top:20px;position:relative;overflow:hidden}.progress-bar{height:100%;background-color:#fff;transition:width .3s ease-out}@media(max-width:600px){.logo{width:150px}.app-container{padding:0}.controls-container{gap:10px;margin-top:15px}.control-btn{width:40px;height:40px}.youtube-player,.player-wrapper,.video-container{border-radius:0}.feedback-circle{width:20%}}@media(orientation:landscape)and (max-height:600px){.app-container.started{padding:0}.app-container.started .intro-container,.app-container.started .logo{display:none}.app-container.started .player-wrapper{width:auto;max-width:100%;height:auto;max-height:100%;aspect-ratio:unset;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:0;box-shadow:none;aspect-ratio:16 / 9}.app-container.started .youtube-player{border-radius:0;box-shadow:none}.app-container.started .controls-container{position:absolute;bottom:10px;bottom:calc(10px + env(safe-area-inset-bottom));left:0;margin-top:0;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:50}}.twinkling-background{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.star{position:absolute;opacity:0;animation-name:twinkle;animation-iteration-count:infinite;animation-timing-function:ease-in-out;filter:drop-shadow(0 0 5px rgba(255,255,255,.8))}@keyframes twinkle{0%{opacity:0;transform:scale(.02)}50%{opacity:.6;transform:scale(.5)}to{opacity:0;transform:scale(.02)}}