*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-white: #fff;--color-black: #000;--color-red: #f00;--color-gold: #ffb300;--font-primary: "Press Start 2P", sans-serif}@font-face{font-display:swap;font-family:"Press Start 2P";font-style:normal;font-weight:400;src:url(/2d-canvas-shooter/assets/PressStart2P-Regular-DogiNJoF.ttf) format("truetype")}@keyframes blink{0%{opacity:0}to{opacity:1}}@keyframes scoring{0%{transform:translate(-50%,-100%);opacity:1}70%{opacity:1}to{transform:translate(-50%,-260%);opacity:0}}@keyframes move-bg{to{background-position:15px 15px}}@keyframes shadow-blink{0%{text-shadow:0 0 .313rem currentColor}to{text-shadow:0 0 .75rem currentColor}}body{--dot-size: .6px;animation:move-bg .8s infinite linear;background-color:var(--color-black);background-image:radial-gradient(var(--color-white) var(--dot-size),transparent var(--dot-size));background-size:15px 15px;color:var(--color-white);overflow:hidden}main{-webkit-user-select:none;user-select:none}body,button{cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAACXBIWXMAAAsSAAALEgHS3X78AAAAMFBMVEUAAABHcEwAAAAdHR0AAAAAAADu7u5bW1uvr6/29vbk5OSLi4s4ODja2toAAAD///88Mds2AAAAD3RSTlN/ABSGKHPvmsH3566O3zxjADF5AAAAkklEQVQoz2MQRAMMAyrgysAQgiygwAAETAgBIQbru3c3MyjCBQR45v////MAI1zAwerX9ur1i1ngAgH9cxgYTv5ghQsw5G9gDeD+xoAQ+M/gKAIkkAUUhVAE8guYFNiRtAT0L2ZgsEIy1MHyWwF7/mSEtQLs+f//fytgRHK6xf//zUhOx/CcoOADBga+wRANCAAAdEhAFlBPZpQAAAAASUVORK5CYII=) 16 16,auto;font-family:var(--font-primary)}#game-container{background-color:var(--color-black);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}#game-container canvas{display:block;filter:blur(1px) brightness(1.2)}.screen{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;padding:0 32px;position:absolute;text-align:center;width:100%;z-index:5}.scoreboard{font-size:clamp(1.5rem,2.5vw,3rem);line-height:1;position:absolute;text-align:center;text-shadow:0 0 .3125em currentColor;top:10px;width:100%;z-index:1}.start-screen__main-title{animation:shadow-blink 2s infinite alternate;font-size:3.5rem;margin-bottom:2rem}.start-screen__title{animation:blink .9s steps(2,jump-none) infinite;font-size:1.25rem}.gameover-screen{animation:blink .08s;background-color:var(--color-black);border:8px double var(--color-white)}.gameover-screen__title{color:var(--color-white);font-size:4rem;letter-spacing:.625rem;margin-bottom:5rem;text-transform:uppercase;text-shadow:0 0 .313rem currentColor,-.188rem 0 0 var(--color-red)}.gameover-screen__btn{animation:blink 1.2s steps(2,jump-none) infinite .6s;border:none;background-color:transparent;color:var(--color-white);font-size:2rem;padding:15px 20px;transition:background-color .2s,color .2s}.gameover-screen__btn:focus,.gameover-screen__btn:hover{animation:none;background-color:var(--color-white);color:var(--color-black)}.pause-screen{-webkit-backdrop-filter:blur(3px) brightness(.8);backdrop-filter:blur(3px) brightness(.8);text-shadow:0 0 .188rem currentColor}.pause-screen__title{font-size:3rem;letter-spacing:.313rem;margin-bottom:1rem;text-transform:capitalize}.pause-screen__text{animation:blink 1.2s steps(2,jump-none) infinite}.highscore{bottom:60px;font-size:1rem;position:absolute}.highscore__title{font-size:inherit;margin-bottom:10px}.key,.highscore__points{color:var(--color-gold)}.highscore,.start-screen__title,.gameover-screen__btn{text-shadow:0 0 .125rem currentColor}.highscore,.start-screen{letter-spacing:.125rem;text-transform:uppercase}.highscore__new{color:var(--color-red);text-shadow:0 0 .3125rem currentColor;margin-top:1rem}.score{animation:scoring .8s 1 ease forwards;text-shadow:0 0 .3125em currentColor,.125em .125em var(--color-black);font-weight:600;font-size:clamp(1rem,1.6vw,2rem);position:absolute;z-index:1}.hide{display:none}.pause-btn{--width: 20px;--height: calc(var(--width) + 2px);background:transparent;border:double var(--color-white);border-width:0 0 0 var(--width);height:var(--height);position:absolute;right:32px;top:32px;width:0;z-index:1}.pause-btn:hover{border-color:var(--color-gold)}@media (prefers-reduced-motion){body{animation:none}}
