*{margin:0;padding:0;box-sizing:border-box}
:root{--p:#ff3d6e;--y:#ffd93d;--o:#ff8a3d;--g:#6bcb77;--b:#0c0c1d;--c:#fff5e1}
html,body{font-family:'Comic Sans MS','Chalkboard SE',system-ui,sans-serif;background:var(--b);color:var(--c);overflow-x:hidden}
body{background:
 radial-gradient(circle at 20% 10%,#ff3d6e33,transparent 40%),
 radial-gradient(circle at 80% 60%,#ffd93d33,transparent 40%),
 radial-gradient(circle at 40% 90%,#6bcb7733,transparent 40%),
 var(--b)}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden}
.title{font-size:clamp(3rem,10vw,8rem);line-height:.95;letter-spacing:-2px;text-shadow:6px 6px 0 var(--p),12px 12px 0 var(--y);transform:rotate(-3deg);margin-bottom:1.5rem}
.title span{color:var(--y);display:inline-block;transform:rotate(4deg);text-shadow:6px 6px 0 var(--o),12px 12px 0 var(--p)}
.tagline{font-size:clamp(1.1rem,2.5vw,1.8rem);color:var(--y);margin-bottom:.5rem;font-weight:bold}
.sub{font-size:1rem;opacity:.7;margin-bottom:2.5rem}
.cta{display:inline-block;background:var(--y);color:var(--b);padding:1.2rem 2.5rem;font-size:1.5rem;font-weight:bold;text-decoration:none;border:4px solid var(--c);border-radius:50px;box-shadow:8px 8px 0 var(--p);transition:.15s;transform:rotate(-2deg)}
.cta:hover{transform:rotate(2deg) scale(1.05);box-shadow:12px 12px 0 var(--p);background:var(--o)}
.floaty{position:absolute;font-size:4rem;animation:float 8s infinite ease-in-out;opacity:.7;pointer-events:none}
.floaty{top:10%;left:8%}.f2{top:20%;right:10%;animation-delay:-2s;font-size:5rem}
.f3{bottom:15%;left:15%;animation-delay:-4s;font-size:3rem}.f4{top:60%;right:5%;animation-delay:-6s}
.f5{bottom:25%;right:20%;animation-delay:-3s;font-size:6rem}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(20deg)}}
.games{padding:4rem 2rem;max-width:1200px;margin:0 auto}
.h2{font-size:clamp(2rem,5vw,4rem);text-align:center;margin-bottom:3rem;color:var(--y);text-shadow:4px 4px 0 var(--p);transform:rotate(-1deg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}
.card{background:linear-gradient(135deg,var(--p),var(--o));padding:2rem 1.5rem;border-radius:24px;text-decoration:none;color:var(--c);border:4px solid var(--y);box-shadow:6px 6px 0 var(--b),6px 6px 0 4px var(--y);transition:.2s;text-align:center}
.card:nth-child(2n){background:linear-gradient(135deg,var(--y),var(--o));color:var(--b);border-color:var(--p);box-shadow:6px 6px 0 var(--b),6px 6px 0 4px var(--p)}
.card:nth-child(3n){background:linear-gradient(135deg,var(--g),#3da06b);border-color:var(--y)}
.card:hover{transform:translate(-4px,-4px) rotate(-2deg);box-shadow:12px 12px 0 var(--b),12px 12px 0 4px var(--y)}
.card .emoji{font-size:4rem;margin-bottom:.5rem;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.card h3{font-size:1.6rem;margin-bottom:.4rem}
.card p{font-size:.95rem;opacity:.9}
footer{padding:3rem 2rem;text-align:center;border-top:4px dashed var(--p);margin-top:2rem}
footer p{margin:.4rem 0}.tiny{font-size:.85rem;opacity:.6}
.chaos{animation:chaos 1s infinite}
@keyframes chaos{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

/* shared game styles */
.gamepage{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem}
.gamehead{width:100%;max-width:600px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.back{color:var(--y);text-decoration:none;font-weight:bold;font-size:1.1rem;background:var(--b);padding:.5rem 1rem;border:3px solid var(--y);border-radius:20px}
.back:hover{background:var(--y);color:var(--b)}
.gtitle{font-size:2rem;color:var(--y);text-shadow:3px 3px 0 var(--p)}
.score{background:var(--p);padding:.4rem 1rem;border-radius:20px;font-weight:bold;border:3px solid var(--y)}
.gamebox{background:#1a1a2e;border:4px solid var(--y);border-radius:16px;padding:1rem;box-shadow:6px 6px 0 var(--p)}
canvas{display:block;background:#0c0c1d;border-radius:8px;max-width:100%;height:auto;touch-action:none}
.btn{background:var(--y);color:var(--b);border:3px solid var(--c);padding:.6rem 1.4rem;font-family:inherit;font-weight:bold;font-size:1rem;border-radius:20px;cursor:pointer;box-shadow:4px 4px 0 var(--p)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--p)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--p)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;align-items:center}
.help{font-size:.85rem;opacity:.7;text-align:center;max-width:500px}
.touchpad{display:none;grid-template-columns:repeat(3,60px);gap:.4rem;margin-top:.5rem}
.touchpad button{font-size:1.5rem;background:var(--p);color:var(--c);border:3px solid var(--y);border-radius:12px;padding:1rem 0;cursor:pointer;font-family:inherit}
@media (max-width:700px){.touchpad{display:grid}}