*{margin:0;padding:0;box-sizing:border-box}:root{--clr-main: rgb(0 0 0 / .8);--clr-modal: rgb(0 0 0 / .9);--clr-accent: rgb(255 255 255);--clr-border: rgb(255 255 255 / .08);--animation-time: .15s;--clr-piece-cyan: #47febd;--clr-piece-cyan-accent: #019863;--clr-piece-blue: #5b44c3;--clr-piece-blue-accent: #291d62;--clr-piece-orange: #ff9655;--clr-piece-orange-accent: #ad6e31;--clr-piece-yellow: #f6d340;--clr-piece-yellow-accent: #958127;--clr-piece-green: #aff43a;--clr-piece-green-accent: #5f9108;--clr-piece-purple: #d449c6;--clr-piece-purple-accent: #7c1d72;--clr-piece-red: #ff424c;--clr-piece-red-accent: #ab313a;--ff-main: "Jersey 10", serif}body{background-color:#7b607b;font-family:var(--ff-main);height:100vh;display:grid;place-items:center;padding:2rem}.clipped-border{clip-path:polygon(100% 0,100% 90%,90% 100%,0 100%,0 0)}.wrapper{display:flex;align-items:start;gap:2em}.text{position:absolute;top:30%;left:15%;font-size:5rem;color:var(--clr-accent)}.text.animate{animation:growAndFade calc(var(--animation-time) * 4) forwards ease-in}@keyframes growAndFade{to{transform:scale(1.5);letter-spacing:5px;opacity:0}}.controls-list{list-style:none;font-size:2rem}.controls-list li{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;justify-items:start;gap:8rem}.controls-list li+li{margin-top:1rem}.keys{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1rem}.key{background-color:var(--clr-accent);color:#000;padding:1rem;border-radius:10px}.btn{font:inherit;background-color:var(--clr-main);color:var(--clr-accent);border:0;padding:.5em 1em;cursor:pointer;font-size:1.75rem}.btn:hover,.btn:focus-visible{outline:3px solid var(--clr-accent)}.tetris-grid{width:20rem;margin-top:-12%;display:grid;position:relative}.tetris-grid.bounce{animation:bounce var(--animation-time) forwards ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.tetris-grid:after{content:"";position:absolute;grid-row:calc(var(--extra-rows) + 1);top:0;right:-4px;bottom:-4px;left:-4px;border:4px solid var(--clr-accent);border-top:0;border-radius:3px}.cell{width:100%;height:100%;position:relative;border-radius:1px;background-color:var(--clr-main)}.cell.blank{background-color:var(--clr-main);border:1px solid var(--clr-border)}.cell.piece{background-color:var(--clr-piece);border:1px solid var(--clr-piece-accent)}.cell.shimmer{background:linear-gradient(-45deg,var(--clr-piece) 40%,#fafafa 50%,var(--clr-piece) 60%);background-size:300%;background-position-x:100%;animation:shimmer var(--animation-time) forwards linear}@keyframes shimmer{to{background-position-x:-20%}}.cell.drop{--clr-piece-accent: rgb(255 255 255 / .2);border:4px solid var(--clr-piece-accent)}.cell.piece:after,.cell.drop:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cell.piece:after{width:40%;height:40%;box-shadow:inset 0 0 1px 1px var(--clr-piece-accent);border-radius:1px}.cell.drop:after{width:60%;height:60%;box-shadow:0 0 .5px 2px var(--clr-piece-accent)}.cell.extra{opacity:0}.column{display:flex;flex-direction:column;gap:2em}.next h1{background-color:var(--clr-accent);padding:0 .5rem;font-weight:400}.nextpiece{display:grid;width:10rem;background-color:var(--clr-main);padding:.7rem;aspect-ratio:8 / 6;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr)}.stats{list-style:none}.stats li{display:flex;align-items:center;justify-content:space-between;padding:.5em 1em;text-transform:capitalize}.stats li:nth-child(2n){background-color:var(--clr-accent)}.stats li:nth-child(odd){background-color:var(--clr-main);color:var(--clr-accent)}.stats li>*{font-weight:400;font-size:2rem}modal-container{position:relative}.modal{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--clr-modal);display:grid;place-items:center;font-weight:400;text-align:center;color:var(--clr-accent)}.modal-content{margin-top:-8rem}.modal-title{font-size:5rem}.modal-title.danger,.modal-subtitle.danger{color:var(--clr-piece-red)}.modal-title.success,.modal-subtitle.success{color:var(--clr-piece-green)}.modal-subtitle{font-size:3rem}.modal-subtitle.flash{animation:flash 3s infinite ease-in-out}@keyframes flash{0%,to{opacity:0}50%{opacity:1}}.piece.i-block{--clr-piece: var(--clr-piece-red);--clr-piece-accent: var(--clr-piece-red-accent)}.piece.j-block{--clr-piece: var(--clr-piece-purple);--clr-piece-accent: var(--clr-piece-purple-accent)}.piece.l-block{--clr-piece: var(--clr-piece-green);--clr-piece-accent: var(--clr-piece-green-accent)}.piece.o-block{--clr-piece: var(--clr-piece-yellow);--clr-piece-accent: var(--clr-piece-yellow-accent)}.piece.s-block{--clr-piece: var(--clr-piece-orange);--clr-piece-accent: var(--clr-piece-orange-accent)}.piece.t-block{--clr-piece: var(--clr-piece-blue);--clr-piece-accent: var(--clr-piece-blue-accent)}.piece.z-block{--clr-piece: var(--clr-piece-cyan);--clr-piece-accent: var(--clr-piece-cyan-accent)}.nextpiece .piece{display:none}.nextpiece[data-piece-name] .piece{display:block}.nextpiece[data-piece-name=o-block] .piece:nth-child(1){grid-column:3 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=o-block] .piece:nth-child(2){grid-column:5 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=o-block] .piece:nth-child(3){grid-column:3 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=o-block] .piece:nth-child(4){grid-column:5 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=i-block] .piece:nth-child(1){grid-column:1 / span 2;grid-row:3 / span 2}.nextpiece[data-piece-name=i-block] .piece:nth-child(2){grid-column:3 / span 2;grid-row:3 / span 2}.nextpiece[data-piece-name=i-block] .piece:nth-child(3){grid-column:5 / span 2;grid-row:3 / span 2}.nextpiece[data-piece-name=i-block] .piece:nth-child(4){grid-column:7 / span 2;grid-row:3 / span 2}.nextpiece[data-piece-name=j-block] .piece:nth-child(1){grid-column:2 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=j-block] .piece:nth-child(2){grid-column:2 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=j-block] .piece:nth-child(3){grid-column:4 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=j-block] .piece:nth-child(4){grid-column:6 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=l-block] .piece:nth-child(1){grid-column:6 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=l-block] .piece:nth-child(2){grid-column:2 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=l-block] .piece:nth-child(3){grid-column:4 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=l-block] .piece:nth-child(4){grid-column:6 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=s-block] .piece:nth-child(1){grid-column:2 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=s-block] .piece:nth-child(2){grid-column:4 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=s-block] .piece:nth-child(3){grid-column:4 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=s-block] .piece:nth-child(4){grid-column:6 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=z-block] .piece:nth-child(1){grid-column:2 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=z-block] .piece:nth-child(2){grid-column:4 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=z-block] .piece:nth-child(3){grid-column:4 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=z-block] .piece:nth-child(4){grid-column:6 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=t-block] .piece:nth-child(1){grid-column:2 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=t-block] .piece:nth-child(2){grid-column:4 / span 2;grid-row:4 / span 2}.nextpiece[data-piece-name=t-block] .piece:nth-child(3){grid-column:4 / span 2;grid-row:2 / span 2}.nextpiece[data-piece-name=t-block] .piece:nth-child(4){grid-column:6 / span 2;grid-row:4 / span 2}