body{box-sizing:border-box;width:100%;height:100vh;padding:0;margin:0;position:relative;display:flex;align-items:center;justify-content:center;background-position:center;background-size:cover;background-image:url(pic/bgGame.png);background-repeat:no-repeat;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}*{font-family:'Press Start 2P',cursive}.light-effect:not(.container){-webkit-backdrop-filter:brightness(1.8);backdrop-filter:brightness(1.8)}.game{width:100%;height:100%;display:none;align-items:center;justify-content:center}.game.middle:after,.game.min:after{content:"";height:100%;position:absolute;left:50%;transform:translateX(-50%);width:10px;background-color:#000}.game .container{display:flex;align-items:center;-webkit-filter:blur(.5px);filter:blur(.5px)}.game .container.player{width:100%;height:100%;position:relative;justify-content:center}.game .container .game-over-screen{align-items:center;justify-content:center;flex-direction:column;width:100%;background-color:#000;font-size:30px;color:#fcfcfc;-webkit-filter:blur(.5px);filter:blur(.5px);overflow:hidden;z-index:10}.game .container .game-over-screen.player0,.game .container .game-over-screen.player1{display:none;height:0;position:absolute;left:0;top:0}.game .container .tetris{border:9px solid #7af0ea;height:84vh;margin:0 40px;z-index:1}.game .container .tetris.min{height:65vh;margin:0 calc(40px / 2);border:6px solid #7af0ea}.game .container .tetris.middle{height:65vh;margin:0 calc(40px / 1.5);border:8px solid #7af0ea}.game .container .stats{display:flex;flex-direction:column;align-items:center;color:#fcfcfc}.game .container .stats .score{width:380px;height:350px;background-position:center;background-size:contain;background-image:url(pic/scoreBg.png);background-repeat:no-repeat}.game .container .stats .score.min{width:calc(380px / 2);height:calc(350px / 2)}.game .container .stats .score.middle{width:calc(380px / 1.5);height:calc(350px / 1.5)}.game .container .stats .score .counter{margin:60px 40px}.game .container .stats .score .counter.min{margin:calc(60px / 2) calc(40px / 2);font-size:8px}.game .container .stats .score .counter.middle{margin:calc(60px / 1.5) calc(40px / 1.5);font-size:11px}.game .container .stats .line{width:380px;height:100px;background-position:center;background-size:contain;background-image:url(pic/line.png);background-repeat:no-repeat;margin:20px 0 0 0}.game .container .stats .line.min{width:calc(380px / 2);height:calc(100px / 2)}.game .container .stats .line.middle{width:calc(380px / 1.5);height:calc(100px / 1.5)}.game .container .stats .line .counter{display:flex;margin:16px 30px}.game .container .stats .line .counter.min{margin:calc(16px / 2) calc(30px / 2);font-size:8px}.game .container .stats .line .counter.middle{margin:calc(16px / 1.5) calc(30px / 1.5);font-size:11px}.game .container .stats .line .counter h1:first-child{margin-right:5px}.game .container .stats .next{width:180px;height:200px;background-position:center;background-size:contain;background-image:url(pic/next.png);background-repeat:no-repeat;display:flex;flex-direction:column;align-items:center;margin:0 0 20px 0}.game .container .stats .next.min{width:calc(180px / 1.5);height:calc(200px / 1.5)}.game .container .stats .next.middle{width:calc(180px / 1.2);height:calc(200px / 1.2)}.game .container .stats .next h2{color:#fcfcfc;text-align:center;margin:30px 0 15px 0}.game .container .stats .next h2.min{margin:calc(30px / 1.3) 0 calc(15px / 1.3) 0;font-size:12px}.game .container .stats .next h2.middle{margin:calc(30px / 1.1) 0 calc(15px / 1.1) 0;font-size:21px}.game .container .stats .next canvas.middle,.game .container .stats .next canvas.min{height:45%}.game .container .stats .level{display:flex;align-items:center;justify-content:center;text-align:center;width:180px;height:200px;background-position:center;background-size:contain;background-image:url(pic/next.png);background-repeat:no-repeat}.game .container .stats .level.min{width:calc(180px / 1.5);height:calc(200px / 1.5)}.game .container .stats .level.middle{width:calc(180px / 1.2);height:calc(200px / 1.2)}.game .container .stats .level .counter{color:#fcfcfc;text-align:center;margin:30px 0 15px 0}.game .container .stats .level .counter.min{margin:calc(30px / 1.3) 0 calc(15px / 1.3) 0;font-size:11px}.game .container .stats .level .counter.middle{margin:calc(30px / 1.1) 0 calc(15px / 1.1) 0;font-size:13px}.game .container .stats .range{display:none;width:380px;height:100px;background-position:center;background-size:contain;background-image:url(pic/line.png);background-repeat:no-repeat;margin:20px 0 0 0}.game .container .stats .range.min{width:calc(380px / 2);height:calc(100px / 2)}.game .container .stats .range.middle{width:calc(380px / 1.5);height:calc(100px / 1.5)}.game .container .stats .range .counter{display:flex;align-items:center;justify-content:center;margin:16px 30px}.game .container .stats .range .counter.min{margin:calc(16px / 2) calc(30px / 2);font-size:8px}.game .container .stats .range .counter.middle{margin:calc(16px / 1.5) calc(30px / 1.5);font-size:11px}.game .container .stats .range .counter.green{color:#00de31}.game .container .stats .range .counter.red{color:#fc2300}.volume{position:absolute;-webkit-filter:blur(.5px);filter:blur(.5px);z-index:10;left:30px;top:30px}.volume img{cursor:pointer;height:50px}.volume .unmuted{display:block}.volume .muted{display:none}.menu{display:none;width:700px;height:500px;background-color:#000;color:#fcfcfc;flex-direction:column;align-items:center;justify-content:center;font-size:30px;border:9px solid #7af0ea}.menu .select:before{content:'> '}.start-btn{width:100vw;height:100vh;position:absolute;left:50%;transform:translateX(-50%);background-position:center;background-size:cover;background-image:url(pic/tetris_menu_bg.png);background-repeat:no-repeat;z-index:2}.button{display:block;width:100vw;height:100vh;position:absolute;left:50%;margin:0;transform:translateX(-50%);z-index:3;background-position:center;background-size:cover;background-image:url(pic/tetris_menu_btn.png);background-repeat:no-repeat}.pause-text{display:none;font-size:50px;margin:0;position:absolute;z-index:2;color:#fcfcfc;-webkit-filter:blur(.5px);filter:blur(.5px)}.start-again{display:none;text-align:center;position:absolute;left:50%;transform:translateX(-50%);font-size:15px;line-height:30px;bottom:30px;color:#fcfcfc;z-index:5}