*{box-sizing:border-box;font-family:Purple Purse,cursive}body{margin:0}.ModalRules{background-color:#0006;height:100vh;position:absolute;width:100%;z-index:10}.ModalContentRules{align-items:center;background-color:#f5f5f5;border-radius:5px;color:#33334d;display:flex;flex-direction:column;height:auto;margin:10px auto 0;width:95%}.ModalContentRules h5{font-size:52px;margin:10px 0}.ModalContentRules p{font-size:26px;line-height:1.5;margin:0;padding:12px 30px}.ModalContentRules button{background-color:#33334d;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#f5f5f5;font-size:32px;letter-spacing:1.2px;margin-bottom:20px;margin-top:10px;padding:12px 22px}.ModalContentRules button:hover{cursor:pointer}@media(min-width:768px)and (max-width:1024px){.ModalContentRules h5{font-size:42px;margin:10px 0}.ModalContentRules p{font-size:24px;line-height:1.5;margin:0;padding:12px 28px}.ModalContentRules button{font-size:28px;margin-bottom:20px;margin-top:10px;padding:12px 22px}}@media(max-width:741px)and (orientation:landscape){.ModalContentRules h5{font-size:28px;margin:10px 0}.ModalContentRules p{font-size:18px;line-height:1.2;margin:0;padding:12px 26px}.ModalContentRules button{font-size:18px;margin-bottom:10px;margin-top:10px;padding:8px 12px}}@media(min-width:481px)and (max-width:767px){.ModalContentRules h5{font-size:30px;margin:10px 0}.ModalContentRules p{font-size:18px;line-height:1.5;margin:0;padding:10px 28px}.ModalContentRules button{font-size:20px;margin-bottom:20px;margin-top:10px;padding:10px 20px}}@media(min-width:320px)and (max-width:480px){.ModalContentRules h5{font-size:28px;margin:10px 0}.ModalContentRules p{font-size:16px;margin:0;padding:4px 22px 8px}.ModalContentRules button{font-size:20px;margin-bottom:10px;margin-top:10px;padding:8px 12px}}.DivWelcome{background-color:#33334d;color:#f5f5f5;height:100vh;justify-content:space-around}.DivTitle,.DivWelcome{align-items:center;display:flex;flex-direction:column;width:100%}.DivTitle{height:calc(100vh - 60px)}.DivTitle h1{font-size:72px}.DivTitle h1,.DivTitle h2{text-shadow:3px 0 4px #fff6}.DivTitle h2{font-size:48px;margin:0}.DivBtns{align-items:center;display:flex;justify-content:space-evenly;margin-top:60px;width:100%}.DivBtns button{background-color:#fff;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#33334d;font-size:32px;letter-spacing:1.2px;padding:12px 22px}.DivBtns button:hover{background-color:#0006;color:#fff;cursor:pointer}.Link{background-color:#fff;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#33334d;font-size:32px;letter-spacing:1.2px;padding:12px 22px;text-decoration:none}.Link:hover{background-color:#0006;color:#fff;cursor:pointer}footer{align-items:center;box-shadow:0 -1px 13px 0 #fff6;display:flex;height:60px;justify-content:center;width:100%}footer a{color:#f5f5f5;font-size:32px;text-decoration:none}@media(max-width:768px){.DivTitle h1{font-size:52px;margin-top:60px}.DivTitle h2{font-size:32px}.DivBtns{align-items:center;display:flex;justify-content:space-evenly;margin-top:90px;width:100%}.DivBtns button,.Link{font-size:22px;letter-spacing:1.2px;padding:12px 22px}footer{height:60px}footer a{font-size:28px}}@media(max-width:741px)and (orientation:landscape){.DivTitle h1{font-size:52px;margin-top:20px}.DivTitle h2{font-size:32px}.DivBtns{align-items:center;display:flex;justify-content:space-evenly;margin-top:30px;width:100%}.DivBtns button,.Link{font-size:20px;letter-spacing:1.2px;padding:10px 20px}footer{height:50px}footer a{font-size:28px}}@media(max-width:600px){.DivTitle h1{font-size:38px;margin-top:80px}.DivTitle h2{font-size:26px}.DivBtns{align-items:center;display:flex;justify-content:space-evenly;margin-top:90px;width:100%}.DivBtns button,.Link{font-size:20px;letter-spacing:1.2px;padding:8px 16px}footer{height:50px}footer a{font-size:22px}}@media(max-width:420px){.DivTitle h1{font-size:28px;margin-top:80px}.DivTitle h2{font-size:20px;margin-top:40px}.DivBtns{align-items:center;display:flex;justify-content:space-evenly;margin-top:90px;width:100%}.DivBtns button,.Link{font-size:18px;letter-spacing:1.2px;padding:8px 12px}footer{height:50px}footer a{font-size:22px}}@media(max-width:320px){.DivTitle h1{font-size:28px;margin-top:80px}.DivTitle h2{font-size:20px;margin-top:40px}.DivBtns{align-items:center;display:flex;flex-direction:column;height:200px;justify-content:space-around;margin-top:50px;width:100%}.DivBtns button,.Link{font-size:18px;letter-spacing:1.2px;padding:8px 12px}footer{height:50px}footer a{font-size:22px}}.GameContainer{display:grid;grid-template-columns:30% 1fr;grid-template-rows:1fr;height:100vh;width:100%}.Sidebar{grid-column:1/2;grid-row:1/1}.Main{grid-column:2/3;grid-row:1/1}@media(min-width:481px)and (max-width:767px){.GameContainer{grid-template-columns:220px 1fr}}@media(min-width:220px)and (max-width:480px){.GameContainer{display:grid;grid-template-columns:100%;grid-template-rows:140px 1fr;height:100vh;width:100%}.Sidebar{grid-row:1/1}.Main,.Sidebar{grid-column:1/2}.Main{grid-row:2/2}}.Modal{background-color:#0006;height:100vh;left:0;position:absolute;width:100%;z-index:10}.ModalContent{align-items:center;background-color:#f5f5f5;border-radius:5px;display:flex;flex-direction:column;height:auto;margin:30px auto 0;padding-bottom:30px;width:70%}.ModalContent h5{color:#33334d;font-size:52px;margin:20px 0 10px}.ModalContent p{font-size:22px;margin:0 0 12px;padding:0}.ModalContent p span{color:#13a700;font-size:22px}.ModalContent .PositionCheck .Span1{animation:text1 5s infinite}.ModalContent .PositionCheck .Span2{animation:text2 5s infinite}.DivLowScore{align-items:center;display:flex;flex-direction:column;height:100px;justify-content:space-between;width:100%}.DivLowScore p{margin:0;padding:0}.DivLowScore .BtnPlayAgain{background-color:#33334d;border:none;border-radius:5px;color:#f5f5f5;padding:10px 20px}.DivLowScore .BtnPlayAgain:hover{cursor:pointer}.DivClose{display:flex;height:42px;justify-content:flex-end;padding:0 20px 0 0;width:100%}.DivClose span{font-size:42px}.DivClose span:hover{color:#be0000;cursor:pointer}.FormModal{display:flex;flex-direction:column;margin-top:20px}.FormModal p{font-size:20px}.FormDivModal{align-items:center;display:flex;margin-bottom:10px;margin-top:10px}.FormDivModal label{font-size:20px;margin-right:10px}.FormDivModal input{border:1px solid #33334d;border-radius:5px;font-size:20px;padding:5px 10px;width:100%}.FormDivBtnModal{align-self:center;display:flex;justify-content:center;margin-top:20px}.FormDivBtnModal input{background-color:#33334d;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#f5f5f5;font-size:22px;letter-spacing:1.2px;margin-bottom:20px;padding:12px 22px}.FormDivBtnModal input:hover{cursor:pointer}@keyframes text1{0%{color:#b8144b}10%{color:#b814a5}20%{color:#6e14b8}30%{color:#1714b8}40%{color:#146bb8}50%{color:#14b8ad}60%{color:#14b853}70%{color:#2db814}80%{color:#84b814}90%{color:#9fb814}to{color:#b82714}}@media(min-width:220px)and (max-width:480px){.ModalContent{margin:20% auto 0;padding:0 10px 20px;width:90%}.ModalContent h5{font-size:38px;margin:16px 0 20px}.ModalContent p{font-size:20px;margin:0 0 12px;padding:0}.ModalContent p span{font-size:20px}.ModalContent .PositionCheck .Span1{animation:text1 5s infinite}.ModalContent .PositionCheck .Span2{animation:text2 5s infinite}.DivLowScore{align-items:center;display:flex;flex-direction:column;height:100px;justify-content:space-between;width:100%}.DivLowScore p{margin:0;padding:0}.DivLowScore .BtnPlayAgain{background-color:#33334d;border:none;border-radius:5px;color:#f5f5f5;padding:10px 20px}.DivLowScore .BtnPlayAgain:hover{cursor:pointer}.FormModal{display:flex;flex-direction:column;margin-top:10px}.FormModal p{font-size:18px;padding:0 20px}.FormDivModal{align-items:flex-start;display:flex;flex-direction:column;height:100px;justify-content:space-around;margin-bottom:8px;margin-top:8px;padding:10px 20px}.FormDivModal label{font-size:18px;margin-right:10px}.FormDivModal input{border:1px solid #33334d;border-radius:5px;font-size:18px;padding:5px 10px;width:100%}.FormDivBtnModal{align-self:center;display:flex;justify-content:center;margin-top:20px}.FormDivBtnModal input{border:none;border-radius:5px;font-size:20px;padding:8px 16px}}.DivMain{align-items:center;display:flex;flex-direction:column;justify-content:flex-end;width:100%}.DivMain,.ImgGame{background-color:#33334d;height:100vh}.ImgGame{position:absolute;width:70%;z-index:1}.StartGame{align-items:center;display:flex;height:100%;justify-content:center;width:100%;z-index:5}.StartGameNoShow{display:none}.StartBtn{background-color:#33334d;border:none;border-radius:15px;color:#f5f5f5;font-size:1.5rem;padding:10px 20px}.StartBtn:hover{cursor:pointer}.OperationNoShow{display:none}.Operation{background-color:#fff8dc;border:2px solid #000;border-radius:25px;display:block;font-size:30px;margin:5px auto auto;min-width:100px;padding:10px 20px;position:absolute;text-align:center;top:0;z-index:5}.SpanSign{font-size:32px;margin:0 10px}.OperationAnimation{animation:opDown;animation-play-state:running;animation-play-state:initial}.OperationAnimationPause{animation-play-state:paused}.ResultNoShow{display:none}.Result{display:block;margin-bottom:6px;z-index:5}.Res1,.Res2,.Res3{background-color:#87cefa;border:2px solid #fff;border-radius:25px;font-size:35px;margin:0 20px;padding:0 20px}.Res1:hover,.Res2:hover,.Res3:hover{cursor:pointer}@keyframes opDown{0%{top:0}5%{top:8vh}10%{top:12vh}15%{top:16vh}20%{top:20vh}25%{top:24vh}30%{top:28vh}35%{top:32vh}40%{top:36vh}45%{top:40vh}50%{top:44vh}55%{top:48vh}60%{top:52vh}65%{top:56vh}70%{top:60vh}75%{top:64vh}80%{top:68vh}85%{top:71vh}90%{top:73vh}95%{top:75vh}to{top:82vh}}@keyframes opDownCellPortrait{0%{top:140px}5%{top:calc(140px + 3%)}10%{top:calc(140px + 5%)}15%{top:calc(140px + 8%)}20%{top:calc(140px + 10%)}25%{top:calc(140px + 12%)}30%{top:calc(140px + 14%)}35%{top:calc(140px + 16%)}40%{top:calc(140px + 18%)}45%{top:calc(140px + 20%)}50%{top:calc(140px + 23%)}55%{top:calc(140px + 25%)}60%{top:calc(140px + 28%)}65%{top:calc(140px + 30%)}70%{top:calc(140px + 33%)}75%{top:calc(140px + 36%)}80%{top:calc(140px + 40%)}85%{top:calc(140px + 43%)}90%{top:calc(140px + 48%)}95%{top:calc(140px + 52%)}to{top:calc(100% - 90px)}}@media(min-width:481px)and (max-width:767px){.ImgGame{background-position:50% 50%;background-repeat:no-repeat;height:100vh;width:calc(100% - 220px)}.StartBtn{font-size:1.2rem;padding:10px 20px}.Operation{font-size:26px;min-width:80px;padding:8px 12px}.SpanSign{font-size:32px;margin:0 10px}.Res1,.Res2,.Res3{background-color:#87cefa;border:2px solid #fff;border-radius:25px;font-size:35px;margin:0 20px;padding:0 20px}}@media(min-width:220px)and (max-width:480px){.DivMain,.ImgGame{height:calc(100vh - 140px);width:100%}.ImgGame{background-position:50% 100%;background-repeat:no-repeat}.StartBtn{font-size:1rem;padding:10px 20px}.Operation{background-color:#fff8dc;border:2px solid #000;border-radius:25px;display:block;font-size:20px;margin:auto;min-width:50px;padding:4px 10px;position:absolute;text-align:center;top:140px;z-index:5}.OperationAnimation{animation:opDownCellPortrait;animation-play-state:running;animation-play-state:initial}.OperationAnimationPause{animation-play-state:paused}.SpanSign{font-size:26px;margin:0 10px}.Res1,.Res2,.Res3{background-color:#87cefa;border:2px solid #fff;border-radius:25px;font-size:22px;margin:0 12px 16px;padding:0 16px}}.DivSidebar{align-items:center;background-color:#33334d;color:#f5f5f5;display:flex;flex-direction:column;height:100vh;width:100%}.DivSidebar .DivScore{margin-top:20px}.DivSidebar .DivScore h3{font-size:26px;margin:0;padding:0}.DivScoreAndOptionContainer{align-items:center;display:flex;flex-direction:column}.DivOption{display:flex;margin-top:40px}.Form{display:flex;flex-direction:column;font-size:18px}.Form p{font-size:22px}.Form input[type=radio]{margin-right:10px}.FormDivContainer{align-items:center;display:flex;flex-direction:column}.FormDiv{display:flex;margin-bottom:10px;width:140px}.FormDivInput{align-items:center;display:flex;justify-content:center}.FormDivInput input{background-color:#fff;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#33334d;font-size:20px;letter-spacing:1.2px;margin-top:20px;padding:12px 22px}.FormDivInput input:hover{background-color:#0006;color:#fff;cursor:pointer}.DivSidebarBtn{display:flex;justify-content:space-around;margin-top:20px;width:100%}.DivSidebarBtn a{background-color:#fff;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#33334d;font-size:20px;letter-spacing:1.2px;padding:8px 12px;text-decoration:none}.DivSidebarBtn a:hover{background-color:#0006;color:#fff;cursor:pointer}@media(max-width:825px){.DivSidebar{align-items:center;background-color:#33334d;color:#f5f5f5;display:flex;flex-direction:column;height:100vh;width:100%}.DivSidebar .DivScore{margin-top:20px}.DivSidebar .DivScore h1{font-size:26px}.DivSidebar .DivScore h3{font-size:24px}.DivOption{display:flex;margin-top:40px}.Form{display:flex;flex-direction:column;font-size:16px}.Form p{font-size:18px;padding:0 5%}.Form input[type=radio]{margin-right:10px}.FormDiv{display:flex;margin-bottom:10px;margin-left:15%;width:100%}.DivSidebarBtn{display:flex;justify-content:space-around;margin-top:20px;width:100%}.DivSidebarBtn a{font-size:16px;letter-spacing:1px;padding:4px 8px}}@media(min-width:481px)and (max-width:767px){.DivSidebar{background-color:#33334d;color:#f5f5f5;height:100vh;justify-content:flex-start;width:100%}.DivSidebar,.DivSidebar .DivScore{align-items:center;display:flex;flex-direction:column}.DivSidebar .DivScore{margin-top:10px}.DivSidebar .DivScore h1{font-size:26px;margin:10px 0}.DivSidebar .DivScore h3{font-size:22px}.DivOption{display:flex;margin-top:10px}.Form{display:flex;flex-direction:column;font-size:16px}.Form p{font-size:18px;padding:0 5%}.Form input[type=radio]{margin-right:10px}.FormDiv{display:flex;margin-bottom:10px;margin-left:15%;width:100%}.DivSidebarBtn{display:flex;justify-content:space-around;margin-top:16px;width:100%}.DivSidebarBtn a{font-size:16px;letter-spacing:1px;padding:4px 8px}}@media(min-width:220px)and (max-width:480px){.DivSidebar{display:flex;height:150px;width:100%}.DivSidebar .DivScore{align-items:center;display:flex;flex-direction:column;height:100%;margin-top:0;width:50%}.DivSidebar .DivScore h1{font-size:20px}.DivSidebar .DivScore h3{font-size:16px}.DivScoreAndOptionContainer{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:2px 0 0;width:100%}.DivOption{align-items:center;display:flex;height:100%;justify-content:center;margin-top:10px;width:50%}.Form{display:flex;flex-direction:column;font-size:10px}.Form p{font-size:14px;margin:0 0 4px;padding:0}.Form input[type=radio]{margin-right:6px}.FormDiv{align-items:flex-end;display:flex;margin-bottom:4px;margin-left:15%;width:100%}.DivSidebarBtn{display:flex;justify-content:space-around;margin-top:8px;width:100%}.DivSidebarBtn a{font-size:12px;letter-spacing:1px;padding:4px 8px}}.DivTop{align-items:center;background-color:#33334d;color:#f5f5f5;display:flex;flex-direction:column;min-height:100vh;width:100%}.DivTop header{box-shadow:0 -1px 13px 0 #fff6;display:grid;grid-template-columns:25% 50% 25%;padding:8px 20px;width:100%}.DivTop header .Div1{grid-column:1/2}.DivTop header .Div2{grid-column:2/3;justify-self:center}.DivTop header .Div2 h2{font-size:48px;margin:0;text-shadow:3px 0 4px #fff6}.DivTop header .Div3{align-self:center;grid-column:3/4;justify-self:end}.DivTop header .Div3 a{background-color:#fff;border:none;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;color:#33334d;font-size:20px;letter-spacing:1.2px;margin-right:20px;padding:8px 12px;text-decoration:none}.DivTop header .Div3 a:hover{background-color:#0006;color:#fff;cursor:pointer}.DivTop h1{font-size:58px;letter-spacing:2px;margin:10px 0 0;text-shadow:3px 0 4px #fff6}.DivTableContainer{align-items:center;display:flex;flex-direction:column;margin-top:20px;width:100%}.DivTableContainer .DivTable{align-items:center;border:1px solid #f5f5f5;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;display:flex;justify-content:center;margin-bottom:30px;padding:10px 30px}.DivTableContainer .DivTable table{width:100%}.DivTableContainer .DivTable table thead tr th{font-size:24px;padding:8px 14px}.DivTableContainer .DivTable table tbody tr td{font-size:20px;text-align:center}@media(min-width:481px)and (max-width:767px){.DivTop header{align-items:center;display:flex;justify-content:space-around;padding:8px 10px;width:100%}.DivTop header .Div1{display:none}.DivTop header .Div2{width:50%}.DivTop header .Div2 h2{font-size:38px;margin-left:20px}.DivTop header .Div3{display:flex;justify-content:flex-end;width:50%}.DivTop header .Div3 a{border:none;border-radius:5px;font-size:20px;margin-right:20px;padding:8px 12px}.DivTop header .Div3 a:first-child{margin-right:40px}.DivTop h1{font-size:48px;letter-spacing:2px;margin:10px 0 0;text-shadow:3px 0 4px #fff6}.DivTableContainer{align-items:center;display:flex;flex-direction:column;margin-top:20px;width:100%}.DivTableContainer .DivTable{align-items:center;border:1px solid #f5f5f5;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;display:flex;justify-content:center;margin-bottom:30px;padding:10px 30px}.DivTableContainer .DivTable table{width:100%}.DivTableContainer .DivTable table thead tr th{font-size:22px;padding:8px 12px}.DivTableContainer .DivTable table tbody tr td{font-size:18px;text-align:center}}@media(min-width:401px)and (max-width:480px){.DivTop header{align-items:center;display:flex;justify-content:space-around;padding:8px 10px;width:100%}.DivTop header .Div1{display:none}.DivTop header .Div2{width:50%}.DivTop header .Div2 h2{font-size:32px;margin-left:20px}.DivTop header .Div3{display:flex;justify-content:flex-end;width:50%}.DivTop header .Div3 a{border:none;border-radius:5px;font-size:18px;margin-right:10px;padding:4px 8px}.DivTop header .Div3 a:first-child{margin-right:30px}.DivTop h1{font-size:38px;letter-spacing:2px;margin:10px 0 0;text-shadow:3px 0 4px #fff6}.DivTableContainer{align-items:center;display:flex;flex-direction:column;margin-top:20px;padding:0 20px;width:100%}.DivTableContainer .DivTable{align-items:center;border:1px solid #f5f5f5;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;display:flex;justify-content:center;margin-bottom:30px;padding:10px 30px}.DivTableContainer .DivTable table{width:100%}.DivTableContainer .DivTable table thead tr th{font-size:20px;padding:8px 12px}.DivTableContainer .DivTable table tbody tr td{font-size:16px;text-align:center}}@media(max-width:400px){.DivTop header{align-items:center;display:flex;justify-content:space-around;padding:8px 0;width:100%}.DivTop header .Div1{display:none}.DivTop header .Div2{width:50%}.DivTop header .Div2 h2{font-size:28px;margin-left:16px}.DivTop header .Div3{display:flex;justify-content:flex-end;width:50%}.DivTop header .Div3 a{border:none;border-radius:5px;font-size:16px;margin-right:10px;padding:4px 8px}.DivTop header .Div3 a:first-child{margin-right:20px}.DivTop h1{font-size:28px;letter-spacing:2px;margin:10px 0 0;text-shadow:3px 0 4px #fff6}.DivTableContainer{align-items:center;display:flex;flex-direction:column;margin-top:20px;padding:0 20px;width:100%}.DivTableContainer .DivTable{align-items:center;border:1px solid #f5f5f5;border-radius:5px;box-shadow:0 -1px 13px 0 #fff6;display:flex;justify-content:center;margin-bottom:30px;padding:10px 0}.DivTableContainer .DivTable table{width:100%}.DivTableContainer .DivTable table thead tr th{font-size:18px;padding:6px 10px}.DivTableContainer .DivTable table tbody tr td{font-size:14px;text-align:center}}.DivLoader{background-color:#33334d;height:100vh;width:100vw}.LoaderRing{animation:textGlow 3s infinite;background:#0000;border:4px solid hsla(0,0%,96%,.506);border-radius:50%;box-shadow:0 0 20px #00000080;color:#f5f5f5;font-size:2.8vw;height:180px;left:50%;letter-spacing:2px;line-height:170px;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:180px}.LoaderRing:before{animation:animate 2s linear infinite;border-right:4px solid #0000;border-top:4px solid #0000;border-color:#f5f5f5 #f5f5f5 #0000 #0000;border-radius:50%;border-style:solid;border-width:4px;content:"";height:100%;left:-4px;position:absolute;top:-4px;width:100%}.Span{animation:animateCircle 2s linear infinite;background:#0000;display:block;height:4px;left:50%;position:absolute;top:calc(50% - 2px);transform-origin:left;width:50%}.Span:before{background:#f5f5f5;border-radius:50%;box-shadow:0 0 20px #f5f5f5;content:"";height:16px;position:absolute;right:-8px;top:-6px;width:16px}@keyframes animate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes animateCircle{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}@keyframes textGlow{0%{text-shadow:0 0 5px #f5f5f5}to{text-shadow:0 0 20px #f5f5f5}}
/*# sourceMappingURL=main.0628c1fb.css.map*/