@import url(https://fonts.googleapis.com/css?family=Fira+Code:regular,700&display=swap);@import url(https://fonts.googleapis.com/css?family=Bungee+Shade:regular&display=swap);.main,.wrapper{display:flex}.info-field,.tetris-field{height:calc(var(--width) * 2)}#year,.copyright{font-size:12px}.wrapper,button{background-color:rgba(0,24,75,.808)}:root{--width:min(260px, 70vw);--info-width:min(100px, 30vw);--full-width:calc(var(--width) + var(--info-width));--time:1.5s;--main-field-color:rgba(199, 198, 198, 0.4)}*{margin:0;padding:0;box-sizing:border-box;user-select:none;font-family:"Fira Code";font-size:14px}.wrapper{width:100vw;min-height:100vh;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.game-box{background-color:var(--main-field-color);border-radius:8px;box-shadow:0 0 2px 3px var(--main-field-color),rgba(0,0,0,.2) 0 11px 15px -7px,rgba(0,0,0,.14) 0 24px 38px 3px,rgba(0,0,0,.12) 0 9px 46px 8px}.tetris-field{width:var(--width);display:grid;grid-template-rows:repeat(20,1fr);grid-template-columns:repeat(10,1fr)}.cell{border:1px solid #99999911;display:flex;justify-content:center;align-items:center}.figure{border:none;border-radius:3px;box-shadow:inset 2px 2px 5px rgba(255,255,255,.8),inset -2px -2px 5px rgba(0,0,0,.8),2px 3px 8px 0 rgba(0,0,0,.7)}.info-field{width:var(--info-width);display:flex;flex-direction:column;justify-content:space-around;align-items:center;border-left:2px solid rgba(0,24,75,.808);padding:5px 0;gap:5px;color:rgba(255,255,255,.9);text-shadow:2px 1px 4px #000}.info-field div{text-align:center}.info-field div:nth-child(-n+5) h3{margin-bottom:3px}.next-field{width:calc(var(--width)/ 3);height:calc(var(--width)/ 7);display:grid;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(7,1fr)}.next-field .cell{border:none}.control{height:90px;width:var(--full-width);border-top:2px solid rgba(0,24,75,.808);display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 20px}.control button{border-radius:50%;position:relative;padding:0;box-shadow:inset 1px 1px 2px rgba(255,255,255,.7),inset -1px -1px 2px #000}.control button>div{display:flex;justify-content:center;align-items:center;border-radius:50%;width:90%;height:90%;margin:0 auto;box-shadow:inset 1px 1px 3px rgba(0,0,0,.5),inset -.5px -.5px 2px rgba(255,255,255,.5)}.move-btn button{width:40px;height:40px}.move-btn button:first-child,.move-btn button:last-child{top:-20px}.move-btn button:nth-child(2){top:20px;margin:0 5px}.move-btn button:nth-child(2) span{transform:rotate(90deg) scale(1.5,2)}.rotate-btn button{width:50px;height:50px}.sound-control{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%}.sound-control button{width:30px;height:30px}.copyright{height:20px;color:#fff;display:flex;align-items:center;padding:0 5px;margin-top:5px}.copyright a{color:#fff;text-decoration:none;font-weight:700}#copy{font-family:serif}.deleted{animation:.25s linear forwards delete}@keyframes delete{0%{opacity:1;transform:rotate(0) scale(1)}50%{opacity:.5;transform:rotate(45deg) scale(.5)}100%{opacity:0;transform:rotate(90deg) scale(0)}}button{cursor:pointer;padding:6px 15px;border:none;border-radius:6px;box-shadow:inset 3px 3px 5px rgba(255,255,255,.7),inset -2px -2px 5px #000;color:#fff}button[disabled]{opacity:.5}button:active{box-shadow:inset 2px 2px 5px #000,inset -1px -1px 3px #fff}.pause img{display:none;width:calc(var(--width)/ 4);margin:0 auto;animation:1.5s linear infinite pause}@keyframes pause{0%{opacity:1}100%,25%{opacity:.75}50%{opacity:.5}}.prestart-field{grid-column:span 10;grid-row:span 20;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(20,1fr);overflow:hidden}.prestart-row{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(10,1fr)}.prestart-text{grid-row-start:10;grid-row-end:12;display:flex;justify-content:space-evenly;align-items:center}.letter-wrapper,.prestart-text span{display:inline-block;line-height:1}.letter-wrapper{font-family:"Bungee Shade";font-size:42px;text-transform:uppercase;-webkit-text-stroke:1px rgba(0,0,0,0.5);text-shadow:2px -2px 20px rgba(255,255,255,.5)}.t0{animation:appearT0-X var(--time) ease-out forwards}.t0 .letter-wrapper{animation:appearT0-Y var(--time) ease-in forwards}.e1{animation:appearE1-X var(--time) ease-out forwards}.e1 .letter-wrapper{animation:appearE1-Y var(--time) ease-in forwards}.t2{animation:appearT2-X var(--time) ease-out forwards}.t2 .letter-wrapper{animation:appearT2-Y var(--time) ease-in forwards}.r3{animation:appearR3-X var(--time) ease-out forwards}.r3 .letter-wrapper{animation:appearR3-Y var(--time) ease-in forwards}.i4{animation:appearI4-X var(--time) ease-out forwards}.i4 .letter-wrapper{animation:appearI4-Y var(--time) ease-in forwards}.s5{animation:appearS5-X var(--time) ease-out forwards}.s5 .letter-wrapper{animation:appearS5-Y var(--time) ease-in forwards}@keyframes appearT0-X{0%{transform:translateX(calc(20px + var(--width)))}100%{transform:translateX(0)}}@keyframes appearT0-Y{0%{transform:translateY(calc(0 - var(--width)))}100%{transform:translateY(0)}}@keyframes appearE1-X{from{transform:translateX(var(--width))}to{transform:translateX(0)}}@keyframes appearE1-Y{from{transform:translateY(calc(var(--width)/ 3 * 2))}to{transform:translateY(0)}}@keyframes appearT2-X{from{transform:translateX(var(--width))}to{transform:translateX(0)}}@keyframes appearT2-Y{from{transform:translateY(calc(0 - var(--width)/ 3))}to{transform:translateY(0)}}@keyframes appearR3-X{from{transform:translateX(calc(0 - var(--width)))}to{transform:translateX(0)}}@keyframes appearR3-Y{from{transform:translateY(calc(var(--width)/ 3))}to{transform:translateY(0)}}@keyframes appearI4-X{from{transform:translateX(calc(0 - var(--width)))}to{transform:translateX(0)}}@keyframes appearI4-Y{from{transform:translateY(calc(0 - var(--width)/ 3 * 2))}to{transform:translateY(0)}}@keyframes appearS5-X{from{transform:translateX(calc(-20px - var(--width)))}to{transform:translateX(0)}}@keyframes appearS5-Y{from{transform:translateY(var(--width))}to{transform:translateY(0)}}.game-over-title{grid-column-start:2;grid-column-end:10;grid-row-start:9;grid-row-end:12;text-transform:uppercase;color:#00184b}.game-over-title .game{display:flex;justify-content:space-between;overflow:hidden;-webkit-text-stroke:1px black}.game-over-title .game span{font-family:"Bungee Shade";font-size:50px;line-height:1.3;transform:translateY(-60px);animation:10ms linear forwards game-title}.game-over-title .over{display:flex;justify-content:space-around;-webkit-text-stroke:1px black;transform:scale3d(0,0,0) rotate(-3turn);animation:.8s linear 2s forwards over-title}.game-over-title .over span{font-family:"Bungee Shade";font-size:30px;line-height:1.3}.game-over-score{display:flex;justify-content:center;line-height:2.5;font-size:14px;color:#000}@keyframes game-title{from{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes over-title{0%{transform:scale3d(0,0,0) rotate(-3turn)}50%{transform:scale3d(.5,.5,.5) rotate(-1.5turn)}80%{transform:scale3d(.8,.8,.8) rotate(0)}90%{transform:scale3d(.9,.9,.9)}85%{transform:scale3d(1.2,1.2,1.2)}100%{transform:scale3d(1,1,1)}}