/* The games' house style: cream, ink, yellow, Trebuchet + Arial Black, rounded cards with ink shadows. */
:root{--ink:#294c45;--soft:#55716a;--cream:#fff8e7;--yellow:#ffd34e;--orange:#f08a3c;--bg:#dcefe0;--dot:#b9d4be}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;font:16px/1.45 'Trebuchet MS',Arial,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid #d55431;outline-offset:2px}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border:3px solid var(--ink);border-radius:12px;font:900 15px 'Arial Black','Trebuchet MS',sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.primary{background:var(--yellow)}.secondary{background:var(--cream)}
.primary:hover,.secondary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.primary:active,.secondary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.big{min-height:56px;font-size:18px;padding:10px 26px}
/* Two copies of the collage slide opposite ways and fade in turn, so the games keep melting into each other. */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.backdrop::after{content:"";position:absolute;inset:0;background:rgba(255,248,231,.3)}
.collage{position:absolute;left:0;top:0;width:calc(100% + 1920px);height:calc(100% + 1280px);background:url(/media/collage.webp) 0 0/1920px 1280px repeat;will-change:transform}
.collage.one{animation:slide-one 120s linear infinite}
.collage.two{left:-1920px;top:-1280px;background-position:640px 320px;animation:slide-two 90s linear infinite,melt 16s ease-in-out infinite alternate}
@keyframes slide-one{to{transform:translate(-1920px,-1280px)}}
@keyframes slide-two{to{transform:translate(1920px,1280px)}}
@keyframes melt{from{opacity:.15}to{opacity:.85}}
.hero,main,footer{position:relative;z-index:1}
.hero{text-align:center;padding:26px 16px 28px;overflow:hidden}
/* The logo. FREE slams in with a shockwave, then keeps shining; CAT GAMES hops; Buddy pops up and swats the E. */
#sparks{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.plain-title{display:block;margin:0 0 10px;width:auto;font:1000 26px/1.2 'Arial Black',sans-serif;cursor:auto}
h1{position:relative;z-index:1;display:block;margin:-14px auto 0;width:min(100%,920px);perspective:900px;cursor:pointer;font-size:0;-webkit-tap-highlight-color:transparent}
.logo-svg{display:block;width:100%;height:auto;overflow:visible;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out;animation:logo-shake .5s .46s linear}
.logo-svg *{transform-box:fill-box}
@keyframes logo-shake{0%,100%{translate:0 0}15%{translate:-12px 9px}30%{translate:11px -8px}45%{translate:-8px -5px}60%{translate:6px 5px}80%{translate:-3px 2px}}
.rays{transform-box:view-box;transform-origin:0 0;animation:ray-spin 40s linear infinite}
.rays,.glow{opacity:0}
.rays{animation:ray-spin 40s linear infinite,ray-in .5s .46s forwards}
@keyframes ray-spin{to{rotate:360deg}}
@keyframes ray-in{to{opacity:.7}}
.glow{transform-origin:center;animation:ray-in .5s .46s forwards,glow-pulse 3.4s 1s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{scale:1}50%{scale:1.07}}
.shock{opacity:0;transform-origin:center;animation:shock .85s .46s ease-out}
.shock.two{animation-delay:.58s}
@keyframes shock{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(3.6);stroke-width:1}}
.burst-bit{opacity:0;transform-origin:center;animation:burst-out .95s .46s cubic-bezier(.15,.7,.35,1);animation-delay:calc(.46s + var(--i)*40ms)}
@keyframes burst-out{0%{opacity:1;transform:translateY(-70px) scale(.5) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translateY(-470px) scale(1.25) rotate(220deg)}}
.free{transform-box:view-box;transform-origin:500px 240px;animation:free-slam .52s cubic-bezier(.2,.9,.35,1.15) both}
@keyframes free-slam{0%{opacity:0;transform:scale(5) rotate(-14deg)}72%{opacity:1;transform:scale(.9) rotate(1.5deg)}86%{transform:scale(1.06) rotate(-.6deg)}100%{transform:none}}
.free .letter{transform-origin:50% 100%;animation:free-breathe 2.3s 1.2s ease-in-out infinite;animation-delay:calc(1.2s + var(--i)*140ms)}
@keyframes free-breathe{0%,100%{scale:1 1}50%{scale:1.035 1.055}}
.shine{animation:shine-sweep 3.6s 1.1s ease-in-out infinite}
@keyframes shine-sweep{0%{translate:-120px 0}55%,100%{translate:1320px 0}}
.line2 .letter{transform-origin:50% 100%;animation:pop-in .5s cubic-bezier(.3,1.8,.5,1) both,hop 3.4s ease-in-out infinite;animation-delay:calc(.82s + var(--i)*60ms),calc(1.9s + var(--i)*120ms)}
@keyframes pop-in{from{opacity:0;transform:translateY(-120px) scale(.3) rotate(-22deg)}}
@keyframes hop{0%,58%,100%{transform:none}66%{transform:translateY(-30px) rotate(-6deg) scaleY(1.08)}77%{transform:translateY(0) scale(1.12,.86)}87%{transform:translateY(-8px) rotate(3deg)}94%{transform:none}}
.cat{transform-origin:50% 100%;animation:cat-up .55s 1.3s cubic-bezier(.3,1.7,.5,1) both}
@keyframes cat-up{from{opacity:0;transform:translateY(190px) scale(.7)}}
.cat-head{transform-origin:50% 90%;animation:cat-look 5s 2s ease-in-out infinite}
@keyframes cat-look{0%,62%,100%{rotate:0deg}70%,84%{rotate:9deg}}
.cat-eyes{transform-origin:center;animation:cat-blink 4.3s 2.2s infinite}
@keyframes cat-blink{0%,93%,100%{scale:1 1}96.5%{scale:1 .08}}
.cat-tail{transform-origin:85% 100%;animation:tail-swish 1.5s ease-in-out infinite alternate}
@keyframes tail-swish{from{rotate:-12deg}to{rotate:16deg}}
.cat-paw{transform-origin:50% 0;opacity:0;animation:paw-swat 5s 2s ease-in-out infinite}
@keyframes paw-swat{0%,58%,100%{opacity:0;transform:translateY(-70px)}64%{opacity:1;transform:translate(10px,-58px) rotate(-22deg)}70%{opacity:1;transform:translate(-4px,-66px) rotate(-30deg)}76%{opacity:1;transform:translate(0,26px) rotate(12deg)}86%{opacity:1;transform:translate(0,4px)}94%{opacity:0;transform:translateY(-60px)}}
.free [style*="--i:3"]{animation:e-hit 5s 2s ease-in-out infinite}
@keyframes e-hit{0%,75%,100%{transform:none}78%{transform:rotate(9deg) translateY(16px) scale(1.04,.93)}84%{transform:rotate(-5deg)}90%{transform:rotate(2deg)}}
.lede{margin:18px auto 22px;font-size:clamp(16px,2.2vw,21px)}
.lede-chip{display:inline-block;max-width:760px;padding:8px 18px;background:var(--cream);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink)}
.lede-count{font-weight:700}
.lede-verb{display:inline-block;min-width:3.1em;font:1000 1.12em 'Arial Black',sans-serif;color:#d55431}
#verb{display:inline-block}
#verb.swap{animation:word-in .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes word-in{from{opacity:0;transform:translateY(.6em) rotate(-8deg)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.parade{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:28px auto 0;max-width:1000px}
.parade a{display:block;animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--i)*-310ms)}
.parade img{display:block;width:60px;height:60px;border-radius:15px;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform .15s}
.parade a:hover img{transform:translateY(-4px) rotate(-5deg) scale(1.12)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
main{max-width:1320px;margin:0 auto;padding:0 16px 20px;overflow-x:clip}
h2{display:table;font:1000 clamp(22px,3.5vw,30px) 'Arial Black',sans-serif;margin:14px 0 22px;padding:2px 16px;background:var(--yellow);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);transform:rotate(-1deg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:44px 34px;align-items:start;padding:8px 6px 20px}
/* Each game's own art glows around its card and fades into the collage behind it. */
.game::before{content:"";position:absolute;inset:-34px;z-index:-1;border-radius:60px;background:var(--halo) center/cover;-webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent);mask-image:radial-gradient(closest-side,#000 76%,transparent);opacity:.92}
.game.near::before{animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.97) rotate(-1.2deg)}to{transform:scale(1.04) rotate(1.2deg)}}
main{isolation:isolate}
.game{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);scroll-margin-top:12px}
.game header{display:flex;align-items:center;gap:12px;margin:-14px -14px 0;padding:12px 14px;background:var(--c);border-bottom:3px solid var(--ink);border-radius:14px 14px 0 0}
.icon{flex:none;width:72px;height:72px;border-radius:16px;border:3px solid var(--ink)}
h3{margin:0;font:1000 21px/1.15 'Arial Black',sans-serif;letter-spacing:-.4px}
.tagline{margin:2px 0 0;font-weight:700;font-size:14px;line-height:1.25}
.about{margin:0;font-size:15px;min-height:2.9em}
.game.playing .about,.game.playing .video,.game.playing .video-frame,.game.playing .shots{display:none}
.game-frame{display:block;width:100%;height:min(calc(100dvh - 130px),760px);min-height:520px;outline:none;border:3px solid var(--ink);border-radius:12px;background:var(--c)}
.video,.video-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--ink);cursor:pointer}
.video img{display:block;width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.sound-button{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.sound-mark{position:absolute;right:9px;bottom:9px;display:grid;place-items:center;width:34px;height:34px;background:rgba(255,248,231,.9);border:2px solid var(--ink);border-radius:50%;font-size:16px;line-height:1}
.shots{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 5px;scrollbar-width:thin}
.shot{flex:none;padding:0;border:2px solid var(--ink);border-radius:9px;overflow:hidden;background:none;cursor:zoom-in}
.shot img{display:block;width:88px;height:156px;object-fit:cover}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:2px}
.free{font-size:13px;font-weight:700;color:var(--soft);margin-left:auto}
footer{text-align:center;font-size:14px;margin:0 auto 24px;max-width:640px;padding:8px 16px;color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:14px}
footer p{margin:3px 0}
dialog{border:0;padding:0;background:none}
dialog::backdrop{background:rgba(20,40,36,.88)}
/* The snapshot viewer fills the screen, so the picture is centered whatever size the phone is, and the page behind stays put. */
html:has(#viewer[open]){overflow:hidden}
#viewer{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;overscroll-behavior:contain}
[hidden]{display:none!important}
#install-help{max-width:min(92vw,420px);margin:auto;padding:16px 18px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink)}
#install-help h2{display:block;margin:0 0 8px;padding:0;background:none;border:0;box-shadow:none;transform:none;font-size:20px}
#install-help ol{margin:0 0 14px;padding-left:22px}
#install-help li{padding:3px 0}
#viewer-close{position:absolute;top:10px;right:10px;z-index:1}
/* The slider is the browser's own sideways scrolling, so a swipe feels native; each slide stops in the middle. */
.viewer-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:none}
.viewer-track::-webkit-scrollbar{display:none}
.viewer-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;min-width:0;padding:12px;scroll-snap-align:center;scroll-snap-stop:always}
.viewer-slide img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border:3px solid var(--ink);border-radius:14px}
.viewer-count{position:absolute;top:14px;left:50%;translate:-50% 0;padding:2px 12px;background:var(--cream);border:2px solid var(--ink);border-radius:999px;font:700 14px 'Trebuchet MS',Arial,sans-serif;color:var(--ink);white-space:nowrap}
.viewer-arrow{position:absolute;top:50%;translate:0 -50%;display:none;width:52px;height:52px;padding:0 0 5px;background:var(--yellow);border:3px solid var(--ink);border-radius:50%;box-shadow:0 3px 0 var(--ink);font:900 30px/1 Arial,sans-serif;color:var(--ink);cursor:pointer}
.viewer-arrow:disabled{opacity:.35;cursor:default}
.viewer-arrow.prev{left:16px}.viewer-arrow.next{right:16px}
@media (hover:hover) and (pointer:fine){.viewer-arrow{display:block}}
.page{max-width:640px;padding:24px 16px}
.page{position:relative;z-index:1;background:var(--cream);margin:20px auto;border:3px solid var(--ink);border-radius:16px}
html.playing-full,html.playing-full body{overflow:hidden}
.full-player{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;width:100%;height:100dvh;background:var(--ink)}
.full-bar{flex:none;display:flex;justify-content:flex-end;height:26px;background:var(--ink)}
.full-bar button{height:100%;padding:0 12px;border:0;background:none;color:var(--cream);font:700 12px 'Trebuchet MS',Arial,sans-serif;cursor:pointer}
.full-player iframe{flex:1;min-height:0;width:100%;border:0;background:var(--cream)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.parade img,.primary,.secondary{transition:none}.collage,.letter,.logo-svg,.free,.rays,.glow,.shock,.burst-bit,.shine,.cat,.cat-head,.cat-eyes,.cat-tail,.cat-paw,.parade a,.game.near::before,#verb.swap{animation:none!important}.collage.two{opacity:.5}.rays{opacity:.7}.glow{opacity:1}}