/* Cynnix Studios: one stylesheet for every page except /privacy (that page brings its own). */
@font-face{font-family:Bang;src:url(fonts/bangers.woff2) format("woff2");font-display:swap}
@font-face{font-family:Arch;src:url(fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:Grot;src:url(fonts/space-grotesk-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Grot;src:url(fonts/space-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Pix;src:url(fonts/silkscreen.woff2) format("woff2");font-display:swap}

:root{--bg:#ffd23f;--fg:#18122b;--panel:#fff8e8;--m:#e8236b;--c:#00a3c4;--o:#ff7a1a;--b:#2563eb;--g:#1f9d55;--dot:rgba(24,18,43,.14);--hl:#fff;--ink:#18122b}
@media (prefers-color-scheme:dark){:root{--bg:#1a1233;--fg:#fff8e8;--panel:#2a1f52;--m:#ff4f8f;--c:#2ee6ff;--o:#ff8a33;--b:#3b6ff0;--g:#2fb86a;--dot:rgba(255,210,63,.10);--hl:#fff8e8}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg) radial-gradient(circle,var(--dot) 2px,transparent 2.5px) 0 0/16px 16px;color:var(--fg);font:17px/1.55 Grot,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;border:3px solid var(--ink);z-index:9}.skip:focus{left:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0}
.mark{font:24px Arch,sans-serif;background:var(--fg);color:var(--bg);padding:4px 12px;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--m);text-decoration:none;white-space:nowrap}
nav a{font:22px Bang,sans-serif;letter-spacing:.06em;text-decoration:none;margin-left:16px}
nav a:hover,nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
@media (max-width:420px){.mark{font-size:18px}nav a{font-size:19px;margin-left:12px}}

.kick{font:15px Pix,monospace}
h1{font:clamp(46px,9vw,104px)/.9 Arch,sans-serif;margin:10px 0 0;letter-spacing:-.03em;text-transform:uppercase}
h1 em{font:clamp(58px,11vw,132px)/.8 Bang,sans-serif;font-style:normal;letter-spacing:.02em;color:var(--hl);-webkit-text-stroke:3px var(--ink);paint-order:stroke;text-shadow:6px 6px 0 var(--ink),10px 10px 0 var(--m);display:inline-block;transform:rotate(-4deg)}
.lead{font-size:20px;max-width:28em;margin:24px 0;font-weight:700}
.btn{display:inline-block;font:26px Bang,sans-serif;letter-spacing:.06em;background:var(--m);color:#fff;border:4px solid var(--ink);padding:8px 26px;border-radius:999px;text-decoration:none;box-shadow:0 7px 0 var(--ink);cursor:pointer}
.btn:active{transform:translateY(4px);box-shadow:0 3px 0 var(--ink)}

.hero{display:grid;gap:34px;align-items:center;grid-template-columns:1fr 1fr;padding:40px 0 10px}
@media (max-width:820px){.hero{grid-template-columns:1fr}}

.tv{background:var(--o);border:4px solid var(--ink);border-radius:30px;padding:18px;box-shadow:12px 12px 0 var(--ink);position:relative;margin-top:50px;transform:rotate(2deg)}
.tv:before,.tv:after{content:"";position:absolute;top:-50px;width:6px;height:60px;background:var(--ink);border-radius:3px}
.tv:before{left:40%;transform:rotate(-28deg)}.tv:after{left:56%;transform:rotate(28deg)}
.scr{border:4px solid var(--ink);border-radius:22px/34px;overflow:hidden;aspect-ratio:16/9;position:relative;background:#000}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}
.scr img.on{opacity:1}
.scr:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45));pointer-events:none}
.ch{position:absolute;bottom:10px;left:20px;font:16px Pix,monospace;color:#7cff7c;text-shadow:0 0 6px #7cff7c;z-index:1}
.remote{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.remote button{font:19px Bang,sans-serif;letter-spacing:.05em;border:3px solid var(--ink);background:#fff8e8;color:#18122b;padding:6px 14px;border-radius:12px;box-shadow:0 5px 0 var(--ink);cursor:pointer}
.remote button[aria-pressed=true]{background:#2ee6ff;transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.no-js .remote{display:none}

h2{font:46px Bang,sans-serif;letter-spacing:.05em;margin:80px 0 24px;color:var(--hl);-webkit-text-stroke:2px var(--ink);paint-order:stroke;text-shadow:4px 4px 0 var(--ink)}
.games{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g{position:relative;display:grid;grid-template-columns:44px 1fr;border:4px solid var(--ink);background:var(--panel);box-shadow:10px 10px 0 var(--ink);transform:rotate(var(--r,0deg))}
.spine{background:var(--k);border-right:4px solid var(--ink);writing-mode:vertical-rl;transform:rotate(180deg);font:13px Pix,monospace;color:#fff;display:flex;align-items:center;justify-content:center;letter-spacing:.1em}
.g .pic{aspect-ratio:16/9;border-bottom:4px solid var(--ink);overflow:hidden}
.g img{width:100%;height:100%;object-fit:cover;display:block}
img.px{image-rendering:pixelated}
.burst{position:absolute;top:-24px;right:-14px;width:96px;height:96px;background:var(--m);clip-path:polygon(50% 0,60% 30%,90% 15%,72% 42%,100% 55%,70% 62%,82% 95%,52% 74%,25% 98%,32% 65%,0 58%,28% 42%,10% 14%,40% 28%);display:grid;place-items:center;font:18px Bang,sans-serif;color:#fff;transform:rotate(12deg);z-index:1}
.g .body{padding:14px 18px 18px}
.g h3{font:40px/1 Bang,sans-serif;letter-spacing:.04em;margin:0;color:var(--k);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke}
.wt{font-size:14px;opacity:.8}
.g p{margin:8px 0 0;font-weight:700}
.sf{--k:var(--b);--r:-1deg}.mk{--k:var(--g);--r:1deg}

.panel{background:var(--panel);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:24px}
.page{max-width:720px;margin:40px auto 0}
.page h1{font-size:clamp(44px,8vw,80px)}
form label{display:block;font-weight:700;margin:18px 0 6px}
form input,form textarea{width:100%;font:17px Grot,system-ui,sans-serif;color:#18122b;background:#fff;border:3px solid var(--ink);padding:12px;border-radius:0}
form textarea{min-height:180px;resize:vertical}
.hint{font-size:14px;opacity:.85;margin:6px 0 0}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:22px 0 4px;min-height:65px}
.small{font-size:15px}

footer{margin-top:64px;padding:22px 0 40px;border-top:4px solid var(--fg);font-size:15px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{font-weight:700}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}