.instruction-container{width:100%;height:40%;position:absolute;left:0;bottom:0;background:linear-gradient(#006ac7cc,#75c5facc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:8vmin 8vmin 0;box-sizing:border-box}.instruction-container.hidden{animation:1.2s inst-container-disappear}@keyframes inst-container-disappear{0%{opacity:1;transform:translate(-50%) scale(1)}99%{opacity:0;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(0);display:none}}.instruction-container .loading-comment-container{max-width:100vw;height:50vh;text-align:center;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.instruction-container .loading-comment-container #loadingComment{color:#28203a}.instruction-container .loading-comment-container #loadingComment li{font-size:38px}.instruction-container .loading-container{width:96%;margin:0 auto;display:grid;grid-template-areas:"a b c" "d d d";grid-template-columns:12% 76% 12%;grid-template-rows:60% 40%;gap:4px;align-items:center;justify-content:space-between;font-size:2vw;color:#fff}.instruction-container .loading-container #now-loading{grid-area:a;white-space:nowrap}.instruction-container .loading-container .loading-bar-outer{height:30%;outline:1px solid gray;grid-area:b}.instruction-container .loading-container .loading-bar-outer #loading-bar{display:block;width:100%;height:100%;background:#ff8dd1;transform:scaleX(0);transform-origin:center left}.instruction-container .loading-container #loading-rate{grid-area:c;text-align:left}.instruction-container .loading-container #now-constructing{grid-area:d;text-align:center}.instruction-container .start{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:4vmin;color:#f5f0f4;display:flex;flex-wrap:wrap;position:relative;top:0;left:0;transform:translate(0);justify-content:center;align-items:center}.instruction-container .start button{box-shadow:0 4px 4px #28728f;font-size:5vmin;border-radius:4px;background:#dd3f8b;width:auto;margin-bottom:0}.instruction-container .start.hidden{transform:translate(-50%) scale(0)}.control-container{position:fixed;bottom:10px;left:10px;z-index:5}.control-container .control-btn{display:inline-block;padding:10px;border-radius:4px;border:#aaa solid 2px;background:#333333b3;font-size:2vw;color:#e6e6e6;-webkit-user-select:none;-moz-user-select:none;user-select:none}.html-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}.heading{width:100%;height:7vmin;line-height:7vmin;font-size:3vmin;background-color:#ffffffb3;overflow:hidden;position:relative}.heading h2{width:100%;padding-left:26vmin;padding-top:1vmin;color:#636363}.heading h2 .text-combine-upright{text-combine-upright:all;color:#ff008c}.heading .flow{padding-left:50%;animation-name:flow;animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:linear;white-space:nowrap}@keyframes flow{0%{transform:translate(50%)}to{transform:translate(-120%)}}.pool-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;background-color:linear-gradient(#858585,#858585 60%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%);transform:translateY(-60%);transition:all 1s}.pool-container #intro-bg{width:100%;height:60%;position:absolute;top:0;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:top right;object-position:top right}.pool-container .pool-top,.pool-container .pool-bottom{width:100%;height:8vmin;background-image:url(/game23_scoop/img/pool-wood.png);background-size:auto 100%;position:absolute;top:60%;left:50%;transform:translate(-50%);z-index:1;transition:all 1s}.pool-container .pool-bottom{top:auto;bottom:-60%}.pool-container .pool-left,.pool-container .pool-right{transform-origin:0 0;width:8vmin;height:100%;background-image:url(/game23_scoop/img/pool-wood-vertical.png);background-size:100% auto;position:absolute;top:60%;left:0;z-index:2;transition:all 1s}.pool-container .pool-right{transform-origin:100% 0;left:auto;right:0}.pool-container.intro,.pool-container.end{transform:translateY(0)}.pool-container.intro .pool-left,.pool-container.end .pool-left{transform:rotate(12deg)}.pool-container.intro .pool-right,.pool-container.end .pool-right{transform:rotate(-12deg)}.score-effect-container{width:16vmin;height:100vh;position:absolute;top:0;left:0}.score-effect-container ul{width:100%;height:80%;position:absolute;top:10%;transition:transform .7s}.score-effect-container ul.slide-out{transform:translateY(-200%)}.score-effect-container ul li{display:none;width:100%;height:16vmin;transform:translateY(80%);background-image:url(/game23_scoop/img/score-icons-128.png);background-size:100% 500%;border-radius:50%;box-shadow:0 0 6px #fff}.score-effect-container ul li.show{display:block;animation:icon-show .1s ease-in forwards}@keyframes icon-show{0%{display:block;transform:translateY(80%)}to{display:block;transform:translateY(0)}}.result-bubble{display:none;width:30vmax;height:30vmax;background-image:url(/game23_scoop/img/bubble-html.png);background-size:94% 94%;background-position:center;background-repeat:no-repeat;position:absolute;top:40%;left:50%;z-index:3;transform:translate(-50%,-50%) scale(0);display:flex;justify-content:center;align-items:center;border-radius:50%}.result-bubble p{font-size:9vmax;color:#ff0399;text-shadow:1px -1px 0 #fff,-1px 1px 0 #e6e6e6,1px 1px 0 #e6e6e6,1px 1px 0 #888888}.result-bubble.show{animation:bubble-appear 1s 1s forwards ease-out;background-color:#ddd232d1;box-shadow:0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7}@keyframes bubble-appear{0%{display:none;background-color:#0000;box-shadow:none}1%{display:block;transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}90%{transform:translate(-50%,-50%) scale(.9) rotate(1080deg);background-color:#0000;box-shadow:none}to{transform:translate(-50%,-50%) scale(1) rotate(1080deg);opacity:1;background-color:#ddd232d1;box-shadow:0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7}}.result-bubble.finish{transform:translate(-50%) scale(.7) rotate(0);opacity:1;background-color:#ddd232d1;box-shadow:0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7,0 0 10px #84cbf7;top:16px}.score-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:10px}.score-container .btns{display:flex;justify-content:center;gap:10px}.score-container .btns .end-btns.side{display:flex;align-items:center}.hidden{transform:scale(0)}@media (min-aspect-ratio: 4/3){.heading{width:7vmin;height:100%;line-height:7vmin;font-size:3vmin;background-color:#ffffffb3;overflow:hidden;position:relative}.heading h2{width:100%;height:100%;padding-top:26vmin;padding-right:1vmin;color:#636363;writing-mode:vertical-lr}.heading .flow{padding-top:50%;padding-left:0;animation-name:vertical-flow;animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:linear;white-space:nowrap}@keyframes vertical-flow{0%{transform:translateY(50%)}to{transform:translateY(-120%)}}.score-effect-container{left:8vmin}}