*,::after,::before{box-sizing:border-box}*{margin:0;padding:0;font:inherit}:root{--clr-neutral-100:hsl(0, 0%, 0%);--clr-neutral-200:hsl(0, 0%, 19%);--clr-neutral-200-40:hsl(0, 0%, 19%, 0.4);--clr-neutral-300:hsl(0, 0%, 27%);--clr-neutral-400:hsl(0, 0%, 40%);--clr-neutral-400-40:hsl(0, 0%, 40%, 0.4);--clr-neutral-500:hsl(0, 0%, 53%);--clr-neutral-600:hsl(0, 0%, 63%);--clr-neutral-600-40:hsl(0, 0%, 63%, 0.4);--clr-neutral-700:hsl(0, 0%, 75%);--clr-neutral-800:hsl(0, 0%, 82%);--clr-neutral-900:hsl(0, 0%, 93%);--clr-neutral-900-40:hsl(0, 0%, 93%, 0.4);--clr-accent-400:hsl(0, 88%, 29%);--clr-accent-500:hsl(0, 88%, 49%);--clr-accent-600:hsl(0, 88%, 59%);--btn-width:44px;--btn-font-size:24px;--btn-border-radius:12px;--canvas-border-radius:6px;--padding-xs:clamp(0.5em, 2%, 0.75em);--padding-sm:clamp(1em, 3%, 1.5em);--padding-md:clamp(1.5em, 6%, 3em);--padding-lg:clamp(3em, 12%, 6em);--padding-menu:1em;--gap-menu:0.5em;--border-btn:3px;--easing:cubic-bezier(0.22, 1.73, 0.27, 0.83)}body,html{height:100%}body{font-family:Chicle,cursive;text-transform:capitalize;position:relative;background-color:var(--clr-neutral-200);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{width:1.5rem}::-webkit-scrollbar-track{background-color:var(--clr-neutral-900-40)}::-webkit-scrollbar-thumb{background:linear-gradient(160deg,var(--clr-neutral-400),var(--clr-neutral-300));outline:2px solid var(--clr-neutral-100);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(160deg,var(--clr-neutral-400),var(--clr-neutral-200))}@supports (scrollbar-color:red blue){html{scrollbar-color:var(--clr-neutral-200) var(--clr-neutral-900-40)}}.icon::before,a::after{display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased;font-family:"Font Awesome 5 Free";font-weight:900}h1{--shift-distance:-0.5em;--text-shadow-color:var(--clr-accent-400);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;position:absolute;color:var(--clr-neutral-700);font-size:min(5rem,15vw);top:50%;left:50%;transform:translate(-50%,-50%);rotate:-5deg;text-shadow:-2px 3px var(--clr-accent-400)}h1::before{content:"Super";position:relative;top:var(--shift-distance)}h1::after{content:"Cat";position:relative;bottom:var(--shift-distance)}h2{font-size:2em;margin-block:.25em 1em}h3{font-size:1.5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;line-height:1;margin-bottom:.5em}h1,h2,h3{text-shadow:-2px 3px var(--text-shadow-color,var(--clr-neutral-100));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style-type:none;margin-left:1rem}ul li{margin-bottom:1rem}.canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100%;max-width:85%;border-radius:var(--canvas-border-radius)}:modal{font-size:2rem;font-size:var(--btn-font-size);position:absolute;margin:auto;border-radius:5px;max-width:46rem;border-color:var(--clr-neutral-900-40);border-width:1px;border-radius:0;outline:1px solid var(--clr-neutral-600-40);outline-offset:var(--gap-menu);background-color:var(--clr-neutral-200-40);-webkit-backdrop-filter:blur(10px) grayscale(40%);backdrop-filter:blur(10px) grayscale(40%);color:var(--clr-neutral-900);letter-spacing:2px}::-webkit-backdrop{background-color:hsla(0,0%,0%,.7)}::backdrop{background-color:hsla(0,0%,0%,.7)}details{--padding:var(--padding-xs);padding:var(--padding);padding-top:0;position:relative;left:var(--padding);border-width:2px;border-style:solid;border-radius:calc(var(--padding) + var(--btn-border-radius));border-color:transparent;color:var(--clr-neutral-900);text-align:center;font-size:1.2rem;text-shadow:-1px 1px var(--clr-neutral-100)}details[open]{background-color:var(--clr-neutral-400-40);border-color:var(--clr-neutral-900);padding-top:var(--padding);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}@supports not selector(div:has(img)){details{transition:.3s var(--easing);transition-property:top,right;top:0;right:0;pointer-events:none;z-index:20}details[open]{top:var(--top-offset);right:var(--padding-menu)}}details[open] summary{background:var(--clr-neutral-500)}summary{text-align:center;z-index:2}summary::marker{display:none}a{margin-left:1rem;color:var(--clr-accent-600);text-underline-offset:.5rem;transition:color .1s ease-in;text-shadow:-1px 2px var(--clr-neutral-200);letter-spacing:2px}a:where(:hover,:focus-visible){text-decoration:none;color:var(--clr-accent-500)}a::after{content:"\f35d";font-size:.5em;margin-left:.5rem;color:var(--clr-neutral-600)}label{padding-left:.5em;transition:background-color .2s var(--easing);text-transform:uppercase;border-left:3px solid var(--border-color,transparent)}label:has(+input:focus-visible){--border-color:var(--clr-accent-600);background-color:var(--clr-neutral-400-40)}label:has(+input:hover){background-color:var(--clr-neutral-600-40)}.controls-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:var(--padding-menu)}.controls-form button{margin-top:var(--padding-md)}.controls-form input{outline-offset:3px;text-align:center;color:var(--clr-accent-400);background-color:var(--clr-neutral-800);border:none;border-radius:10px 5px;transform:skewX(-5deg)}.menu{list-style-type:none;display:flex;flex-direction:column;gap:var(--gap-menu);z-index:2;position:relative;padding:var(--padding-menu);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;margin-left:auto;align-items:flex-end}.menu[data-list=credits] li{width:100%;pointer-events:all}.menu[data-list=how-to-play]{align-items:flex-start;max-width:80%;margin:0;gap:2rem}ul span:not(.emphasize){color:var(--clr-accent-500);text-shadow:-2px 2px var(--clr-neutral-400-40);margin-inline:.5ch}.mobile-controller{display:none;position:absolute;inset:auto 0 0 0;justify-content:space-between;margin-inline:1.5vw}.mobile-controller menu{list-style-type:none;display:grid}.mobile-controller menu[data-keys=directions]{grid-template-areas:". . up up . ." "left left up up right right" "left left down down right right"}.mobile-controller menu[data-keys=actions]{padding:1rem .5rem 1rem;grid-template-areas:". . action action" "jump jump action action" "jump jump . .";gap:.4rem}footer{inset:auto 0 0 0;display:flex;position:fixed;place-content:center;padding:var(--padding-sm);z-index:-1}.padding-0{padding:0}.padding-sm{padding:var(--padding-sm)}.bg-gradient{background:linear-gradient(to right,transparent,var(--clr-neutral-600-40));padding-inline:.5em}.hidden{display:none}.uppercase{text-transform:uppercase}.emphasize{font-size:max(.75em,16px);font-style:italic}.mobile-only{display:none}.accent-text{color:var(--clr-accent-600)}.text-neutral--700{color:var(--clr-neutral-700)}.text-shadow{text-shadow:-1px 2px var(--clr-neutral-600)}.text-shadow--100{text-shadow:-1px 2px var(--clr-neutral-100)}.marked{list-style-type:"- "}.button-wrapper{padding-top:1rem;margin-top:1rem;border-top:1px solid var(--clr-neutral-500);display:flex;gap:var(--gap-menu);justify-content:end}.btn{--gradient-clr-1:var(--clr-neutral-400);--gradient-clr-2:var(--clr-neutral-300);--text-shadow-clr:rgba(0, 0, 0, 1);font-size:var(--btn-font-size);padding:.5em 1em;text-transform:inherit;cursor:pointer;color:var(--clr-neutral-900);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;letter-spacing:1px;border-radius:var(--btn-border-radius);border:var(--border-btn) outset var(--clr-neutral-500);box-shadow:0 0 10px rgb(0,0,0,.4);background:linear-gradient(160deg,var(--gradient-clr-1),var(--gradient-clr-2));text-shadow:0 0 4px var(--text-shadow-clr);pointer-events:all;line-height:1}.btn:disabled{--gradient-clr-1:var(--clr-neutral-800);--gradient-clr-2:var(--clr-neutral-600);border:1px solid var(--clr-neutral-500);cursor:not-allowed;box-shadow:none}.btn:not(:disabled):active{top:2px;box-shadow:0 0 2px rgb(0,0,0,.8)}.btn:is(:hover,:focus-visible):not(:disabled){--gradient-clr-1:var(--clr-neutral-400);--gradient-clr-2:var(--clr-neutral-200);--outline-color:var(--clr-neutral-900);outline-offset:5px;outline:3px solid var(--outline-color);z-index:3}.mobile-controller menu[data-keys=actions] button{border-radius:.75em}.mobile-controller menu[data-keys=actions] button[data-controls=jump] span{display:block;rotate:-90deg}.controls-btn{--shrink-offset:0px;--color-dark:rgb(20, 20, 20, 0.8);--color-light:rgb(180, 180, 180, 0.8);--color-light-pressed:rgb(160, 160, 160, 0.8);--h1:calc(4px - var(--shrink-offset));--v1:calc(4px - var(--shrink-offset));--h2:calc(-2px + var(--shrink-offset));--v2:calc(-2px + var(--shrink-offset));--blur1:calc(7px - var(--shrink-offset));--blur2:calc(7px - var(--shrink-offset));--border-spread:0px;display:inline-block;position:relative;line-height:var(--btn-font-size);text-align:center;min-width:var(--btn-width);font-size:var(--btn-font-size);border-radius:1em;background-color:var(--color-dark);border-color:var(--color-light);border-width:1px;background-image:linear-gradient(to bottom right,rgb(20,20,20,.2) 0,rgb(80,80,80,.1) 25%,rgb(80,80,80,.67) 80%,rgb(80,80,80,.7) 100%);aspect-ratio:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;padding:.5em;box-shadow:0 0 0 var(--border-spread) #000,var(--h1) var(--v1) var(--blur1) var(--color-dark),var(--h2) var(--v2) var(--blur2) var(--color-light)}.controls-btn:active,.controls-btn[data-active]{--shrink-offset:1px;--border-spread:1px;scale:.95;border-style:inset;background-image:linear-gradient(to bottom right,rgb(20,20,20,.2) 0,rgb(80,80,80,.1) 25%,rgb(80,80,80,.5) 80%,rgb(80,80,80,.6) 100%);color:var(--color-light)}.btn-close-modal{margin-left:auto;display:block;transition:border-radius .4s var(--easing);aspect-ratio:1}.btn-close-modal:is(:hover,:focus-visible){--outline-color:var(--clr-neutral-200);border-radius:50%}[data-btn=controls-modal-open]{display:inline-block}[data-btn=controls-modal-open]{margin-top:var(--gap-menu)}[data-btn=full-screen]{display:none}[data-btn=clear-storage]{margin-top:var(--gap-menu)}[data-direction=left]{grid-area:left}[data-direction=up]{grid-area:up}[data-direction=right]{grid-area:right}[data-direction=down]{grid-area:down}[data-action=jump]{grid-area:jump}[data-action=action]{grid-area:action}[data-controls=left]{border-top-right-radius:var(--btn-width);border-bottom-right-radius:var(--btn-width)}[data-controls=right]{border-top-left-radius:var(--btn-width);border-bottom-left-radius:var(--btn-width)}[data-controls=up]{border-bottom-right-radius:var(--btn-width);border-bottom-left-radius:var(--btn-width)}[data-controls=down]{border-top-right-radius:var(--btn-width);border-top-left-radius:var(--btn-width)}[data-controls=jump]{padding:.75em}[data-controls=action]{padding:.75em}[data-icon=expand]::before{content:"\f065"}[data-icon=compress]::before{content:"\f066"}[data-list=details]{margin-top:var(--gap-menu);padding:0;border-top:3px solid var(--clr-neutral-400);align-items:stretch}[data-list=details] .btn{width:100%}[data-list=main-menu]{--button-height:calc(var(--btn-font-size) * 2 + var(--border-btn) * 2);--top-offset:calc(calc(var(--button-height) * 2 + var(--gap-menu)) * -1);--main-menu-padding:var(--padding-menu);top:var(--main-menu-padding);right:var(--main-menu-padding);padding:0;transition:.3s var(--easing);transition-property:top,right}[data-list=main-menu]:is(:not(:hover,:focus-within,:has(details[open]))){opacity:.4}[data-list=main-menu]:has(details[open]){top:var(--top-offset);right:var(--padding-menu)}[data-list=how-to-play-controls]{display:grid;grid-template-areas:"up action" "down jump" "left ." "right pause";gap:.25em .75em;background-color:var(--clr-neutral-200-40);padding:.5em;outline:1px solid var(--clr-neutral-900-40);outline-offset:var(--gap-menu)}[data-list=how-to-play-controls]::before{content:"";background-image:url(./images/dpad.png);background-repeat:no-repeat;background-size:contain;background-position-x:35%;grid-row:up/down;grid-column:left/right;opacity:.09}[data-list=how-to-play-controls]::after{font-family:FontAwesome;content:"\f6de";grid-row:fistleft/fistright;grid-column:fistup/fistdown;opacity:.125;font-size:5em;color:var(--clr-neutral-100)}[data-controls-li=left]{grid-area:left}[data-controls-li=down]{grid-area:down}[data-controls-li=up]{grid-area:up}[data-controls-li=right]{grid-area:right}[data-controls-li=action]{grid-area:action}[data-controls-li=jump]{grid-area:jump}[data-controls-li=pause]{grid-area:pause}[data-child-of=main-menu]{min-width:11ch;padding-inline:.5em;transition:min-width .4s var(--easing)}[data-child-of=main-menu]:not(:disabled):is(:hover,:focus-visible){min-width:14ch}[data-btn-type=clear]{--gradient-clr-1:var(--clr-neutral-900);--gradient-clr-2:var(--clr-neutral-900);--text-shadow-clr:var(--clr-neutral-900);color:var(--clr-neutral-200)}.btn[data-btn-type=clear]:is(:hover,:focus-visible){--gradient-clr-1:var(--clr-neutral-800);--gradient-clr-2:var(--clr-neutral-800);color:var(--clr-neutral-100);--outline-color:var(--clr-neutral-700);box-shadow:none}.btn[data-btn-type=confirm]:is(:hover,:focus-visible){--outline-color:var(--clr-neutral-500);box-shadow:none}[data-stat]:empty::before{content:attr(data-placeholder)}[data-modal=confirm]{outline:3px solid var(--clr-neutral-600);outline-offset:3px;border:none}body.game-is-on h1{display:none}body.game-is-on [data-list=main-menu]{--gap-menu:0.25em;--main-menu-padding:0.125em}body.game-is-on canvas{--positive-value:4px;--negative-value:-4px;--h1:var(--positive-value);--h2:var(--negative-value);--v1:var(--positive-value);--v2:var(--negative-value);--blur:11px;--color-dark:var(--clr-neutral-100);--color-light:var(--clr-neutral-600-40);border:2px solid;border-color:var(--clr-neutral-700) var(--clr-neutral-900) var(--clr-neutral-500);box-shadow:var(--h1) var(--v1) var(--blur) var(--color-dark),var(--h2) var(--v2) var(--blur) var(--color-light)}@media screen and (min-width:500px){.menu[data-list=credits] li{display:flex;justify-content:space-between}}@media (min-width:750px){[data-list=how-to-play-controls]{grid-template-areas:". up . . fistup action" "left . right fistleft jump fistright" ". down . pause . fistdown";gap:0}}@media (hover:none),(pointer:none){.is_touch_device .mobile-controller{display:flex}.is_touch_device [data-btn=full-screen]{--clr-neutral-400:hsl(0, 0%, 0%, 0.3);--clr-neutral-300:hsl(0, 0%, 0%, 0.3);color:var(--clr-neutral-900);display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:none;border-radius:50%;position:absolute;left:.4em;top:.4em;width:var(--btn-width);line-height:1;box-shadow:none}.is_touch_device [data-btn=controls-modal-open]{display:none;margin-top:0}.is_touch_device .mobile-only{display:var(--display-type,block)}.is_touch_device [data-list-item=how-to-play-controls]{display:none}}