@font-face{font-family:Pixel;src:url('/fonts/pixelify-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:DM;src:url('/fonts/dm-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--night:#070b22;--yellow:#ffe52d;--blue:#167dff;--cyan:#39d9ff;--white:#fff8e5;--pixel:Pixel,monospace}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--night);color:var(--white);font-family:var(--pixel);overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}button:disabled{cursor:default}::selection{background:var(--yellow);color:var(--night)}img{image-rendering:pixelated;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:20px;background:var(--yellow);color:var(--night);padding:15px;z-index:20}.skip-link:focus{top:15px}[hidden]{display:none!important}
.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 36%,#162467 0,transparent 62%)}.world:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#0000000d 3px,#0000000d 4px);opacity:.7}.orb{position:absolute;width:50vw;height:50vw;border-radius:50%;filter:blur(90px);opacity:.13;animation:orb-drift 15s ease-in-out infinite alternate}.orb-one{background:#167dff;left:-25%;top:15%}.orb-two{background:#7447ff;right:-30%;top:0;animation-delay:-5s}.grid-floor{position:absolute;width:200%;height:75%;left:-50%;bottom:-38%;background-image:linear-gradient(#4173d733 1px,transparent 1px),linear-gradient(90deg,#4173d733 1px,transparent 1px);background-size:65px 65px;transform:perspective(380px) rotateX(48deg);mask-image:linear-gradient(transparent,#000 30%);animation:grid-travel 4s linear infinite}.stars{position:absolute;inset:0}.star{position:absolute;width:3px;height:3px;background:#5685df;animation:twinkle 4s steps(2,end) infinite}.star:nth-child(4n){background:var(--cyan);width:5px;height:5px}.star:nth-child(7n){background:var(--yellow)}
header{display:flex;align-items:center;justify-content:space-between;padding:22px 4.5%;height:103px;max-width:1700px;margin:auto}.brand{display:block;width:142px;transition:transform .2s steps(3)}.brand:hover{transform:translateY(-4px)}.brand img{display:block}.controls{display:flex;gap:13px}.controls button{display:grid;place-items:center;width:44px;height:44px;background:#131d42;color:#a4b9ed;border:1px solid #354b7b;box-shadow:3px 3px 0 #000a}.controls button:hover{color:var(--yellow);border-color:var(--yellow)}.controls svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter}.sound-waves,.play-symbol{display:none}#sound-toggle[aria-pressed=true] .sound-waves{display:block}#sound-toggle[aria-pressed=true] .sound-cross{display:none}#motion-toggle[aria-pressed=true] .pause-symbol{display:none}#motion-toggle[aria-pressed=true] .play-symbol{display:block}
main{width:min(920px,90%);margin:0 auto}.billboard{position:relative;min-height:325px;padding-top:6px;display:flex;align-items:center;justify-content:center;isolation:isolate}h1{font-family:var(--pixel);font-weight:700;margin:0;position:relative;z-index:2;line-height:.82;text-align:center;transform:translateX(-45px)}.serious{display:block;font-size:clamp(38px,5.25vw,72px);letter-spacing:-3px;color:var(--white);text-shadow:4px 4px 0 #02091c}.silly{display:block;font-size:clamp(130px,16.8vw,230px);letter-spacing:-10px;color:var(--yellow);position:relative;text-shadow:0 6px 0 #cc8300,0 12px 0 #081431,9px 12px 0 #081431;transform:rotate(-3deg);margin-top:15px;animation:title-bob 5s steps(5,end) infinite}.silly:after{content:attr(data-text);position:absolute;inset:0;color:var(--cyan);text-shadow:-6px 0 #ed5cff;opacity:0;clip-path:inset(40% 0 30%);animation:glitch 8s steps(1) infinite}.hero-mascot{width:260px;position:absolute;z-index:3;right:-6%;bottom:20px;transform:rotate(8deg);animation:banana-float 3.2s steps(8,end) infinite;filter:drop-shadow(10px 10px 0 #020a2780);pointer-events:none}.pixel-shadow{position:absolute;right:2%;bottom:8px;width:130px;height:13px;background:#0005;box-shadow:12px 0 #0005,-12px 0 #0005;animation:shadow-bob 3.2s steps(8,end) infinite}.pixel-cross{position:absolute;width:9px;height:35px;background:var(--cyan);box-shadow:3px 3px 0 #16669d;transform:rotate(13deg)}.pixel-cross:before{content:'';position:absolute;width:35px;height:9px;left:-13px;top:13px;background:inherit}.cross-one{left:-3%;top:35%;animation:cross-spin 10s steps(4,end) infinite}.cross-two{right:12%;top:4%;width:6px;height:24px;background:var(--yellow);transform:rotate(-12deg)}.cross-two:before{width:24px;height:6px;left:-9px;top:9px}.tiny-spark{position:absolute;width:7px;height:7px;background:var(--blue);box-shadow:12px -12px var(--blue)}.spark-one{left:15%;top:7%}.spark-two{right:-3%;top:8%;background:var(--yellow);box-shadow:12px 12px var(--yellow)}
.arcade{position:relative;margin:20px 0 0;border:2px solid #4a689a;box-shadow:7px 7px 0 #02091a,9px 9px 0 #23446c;background:#080e27;isolation:isolate}.arcade:before,.arcade:after{content:'';position:absolute;width:52px;height:5px;background:var(--yellow);z-index:3}.arcade:before{top:-4px;left:20px}.arcade:after{bottom:-4px;right:20px;background:var(--cyan)}.arcade-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 23px;border-bottom:1px solid #304268;background:#101932}.game-name{font-size:15px;color:#d1defb;letter-spacing:1px;white-space:nowrap}.game-name i{display:inline-block;width:7px;height:7px;background:var(--yellow);margin-right:8px;box-shadow:0 0 12px #ffe52d80}.game-hud{display:flex;align-items:center;gap:28px;font-size:12px;color:#859cca}.game-hud strong{font-size:25px;color:var(--white);font-weight:700;margin-left:8px;font-variant-numeric:tabular-nums}.game-hud .time{color:var(--yellow);min-width:48px}.time strong{color:var(--yellow);margin:0;font-size:30px}.game-field{height:270px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#18305860,transparent 70%),linear-gradient(#26365d33 1px,transparent 1px),linear-gradient(90deg,#26365d33 1px,transparent 1px);background-size:auto,30px 30px,30px 30px;touch-action:manipulation}.field-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:21px;z-index:2}#game-message{font-size:16px;letter-spacing:2px;color:#9eadd0;margin:0}.start-button{background:var(--yellow);color:#0b1432;border:0;box-shadow:0 5px 0 #a16e06,5px 0 0 #a16e06,-5px 0 0 #a16e06,0 -5px 0 #fff392,5px 5px 0 #030716;min-height:61px;padding:14px 28px;display:flex;align-items:center;gap:38px;font-size:29px;transition:transform .1s steps(2)}.start-button:hover{transform:translateY(-4px);background:#fff36a}.start-button:active{transform:translateY(4px)}.start-button>span:last-child{font-size:19px;animation:arrow 1s steps(2,end) infinite}#game-description{font:12px DM,Arial,sans-serif;color:#8298c3;margin:0}.arcade-bottom{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 21px;border-top:1px solid #263454;color:#5d789d;font-size:10px;letter-spacing:1px}.arcade-bottom button{background:none;border:0;color:#a3b2d2;font:11px var(--pixel);min-height:44px;padding:0 0 0 12px}.arcade-bottom button:disabled{visibility:hidden}.banana-target{position:absolute;width:78px;height:78px;padding:0;background:none;border:0;z-index:3;filter:drop-shadow(0 0 12px #ffde3438);touch-action:manipulation}.banana-target img{width:78px;pointer-events:none}.banana-target:hover{filter:drop-shadow(0 0 15px #ffde3480)}.banana-target:active{scale:.9}.game-field.playing{cursor:crosshair}.catch-pop{position:absolute;color:var(--yellow);font:30px var(--pixel);pointer-events:none;opacity:0;z-index:4}.catch-pop.pop{animation:catch .5s steps(8,end)}#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}.particle{position:absolute;width:7px;height:7px;background:var(--yellow);animation:burst .65s steps(10,end) forwards;box-shadow:2px 2px #04091a}.combo{position:absolute;right:20px;bottom:15px;font-size:23px;color:var(--cyan);pointer-events:none;opacity:0;transform:rotate(-5deg);text-shadow:3px 3px #05081c}.combo.show{animation:combo 1.1s steps(6,end)}.arcade.hit{animation:hit .16s steps(2,end)}.arcade.finale{animation:finale .8s ease-out}footer{display:flex;justify-content:center;align-items:center;gap:17px;color:#4f6995;font-size:10px;letter-spacing:3px;margin:33px 0 23px}footer span{color:#627ca8;font-size:14px}
@keyframes banana-float{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-18px) rotate(3deg)}}@keyframes shadow-bob{0%,100%{scale:1;opacity:.8}50%{scale:.75;opacity:.4}}@keyframes title-bob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-4px)}}@keyframes glitch{0%,93%,100%{opacity:0;transform:none}94%{opacity:1;transform:translateX(7px)}95%{opacity:.7;transform:translateX(-5px)}96%{opacity:0}}@keyframes orb-drift{to{transform:translate(12vw,10vh)}}@keyframes grid-travel{to{background-position:0 65px}}@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.8}}@keyframes cross-spin{to{transform:rotate(373deg)}}@keyframes arrow{50%{transform:translateX(5px)}}@keyframes catch{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-45px) scale(1.4)}}@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(180deg);opacity:0}}@keyframes combo{0%{opacity:0;translate:10px 7px}20%,75%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -10px}}@keyframes hit{0%,100%{translate:0 0}30%{translate:2px 1px}60%{translate:-2px -1px}}@keyframes finale{0%{box-shadow:0 0 60px #ffe52d66}100%{box-shadow:7px 7px 0 #02091a,9px 9px 0 #23446c}}
html.motion-paused *{animation:none!important;transition:none!important}.motion-paused .particle{display:none}.motion-paused .hero-mascot{transform:rotate(5deg)}
@media(min-width:1500px){main{width:1000px}.billboard{min-height:360px}.game-field{height:300px}}
@media(max-width:1000px){.hero-mascot{width:225px;right:-4%;bottom:15px}.pixel-shadow{right:3%;width:100px}.billboard{min-height:285px}.serious{font-size:6.1vw}.silly{font-size:19vw}h1{transform:translateX(-32px)}.cross-one{left:0}}
@media(max-width:600px){header{height:85px;padding:16px 6%}.brand{width:115px}.controls{gap:9px}.controls button{width:40px;height:44px}main{width:88%}.billboard{min-height:264px;padding:7px 0 34px;align-items:flex-start}.serious{font-size:8.9vw;letter-spacing:-1.5px}.silly{font-size:29vw;letter-spacing:-5px;margin-top:10px;text-shadow:0 4px 0 #cc8300,0 8px 0 #081431,6px 8px 0 #081431}h1{transform:translateX(-11px);margin-top:5px}.hero-mascot{width:148px;right:-9%;bottom:-10px;transform:rotate(8deg)}.pixel-shadow{width:70px;right:-1%;bottom:-2px;height:6px}.cross-one{height:21px;width:5px;left:6%;top:75%}.cross-one:before{width:21px;height:5px;left:-8px;top:8px}.cross-two{top:54%;right:37%;scale:.65}.spark-one{top:0;left:1%;scale:.6}.spark-two{top:2%;right:0;scale:.6}.arcade{margin-top:15px;box-shadow:5px 5px 0 #02091a,7px 7px 0 #23446c}.arcade-top{padding:10px 13px;align-items:center}.game-name{font-size:10px;letter-spacing:0}.game-name i{width:5px;height:5px;margin-right:4px}.game-hud{gap:11px;font-size:8px}.game-hud>span:not(.time){display:flex;flex-direction:column;align-items:center;gap:0}.game-hud strong{font-size:22px;margin:0}.game-hud .time{min-width:35px}.time strong{font-size:26px}.game-field{height:265px}.field-center{gap:23px}#game-message{font-size:11px;letter-spacing:1px}.start-button{font-size:26px;gap:24px;min-height:56px;padding:12px 22px}#game-description{font-size:11px}.arcade-bottom{font-size:8px;padding:0 13px;letter-spacing:.4px}.arcade-bottom button{font-size:9px}.combo{font-size:19px;right:13px}footer{margin-top:25px;font-size:8px;letter-spacing:2px}.world{background:radial-gradient(ellipse at 50% 28%,#172860 0,transparent 70%)}.orb{filter:blur(50px);width:80vw;height:80vw}.grid-floor{height:50%;bottom:-15%}}
@media(max-width:360px){.billboard{min-height:240px}.hero-mascot{width:125px}.game-name{font-size:9px}.game-hud{gap:8px}.game-field{height:245px}.arcade-top{padding:9px 10px}.game-name i{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.particle{display:none}}
@media(max-width:600px){.hero-mascot{right:-2%}.pixel-shadow{right:4%}}
@media(min-width:601px) and (max-width:1000px){.hero-mascot{right:0}.spark-two{right:0}}