/* Squishko: soft pastel "squishy" style */
:root{
  --pink:#ffb3cf; --pink-d:#ff86b1;
  --lilac:#d4c2ff; --lilac-d:#a98bff;
  --mint:#b8f2db; --mint-d:#6fd8b0;
  --peach:#ffd5b8; --peach-d:#ffaa78;
  --butter:#fff1a8;
  --cream:#fff8fb;
  --ink:#3b2550; --ink-soft:#6d5a80;
  --card:#ffffff;
  --r-blob:42% 58% 55% 45% / 52% 44% 56% 48%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, #ffe3ef 0 180px, transparent 181px),
    radial-gradient(circle at 92% 22%, #ece4ff 0 220px, transparent 221px),
    radial-gradient(circle at 80% 92%, #dcfaee 0 200px, transparent 201px);
  background-attachment:fixed;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:#b04c86}
img,svg{display:block}
h1,h2,h3,.wordmark{font-family:"Baloo 2",system-ui,sans-serif;line-height:1.15}

/* ---------- nav ---------- */
.nav{
  max-width:1100px;margin:16px auto 0;padding:10px 16px 10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(8px);
  border-radius:999px;box-shadow:0 8px 0 #f3dcea,0 14px 30px rgba(122,74,140,.12);
  position:sticky;top:12px;z-index:10;width:calc(100% - 32px);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:40px;animation:wobble 4s ease-in-out infinite}
.nav ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.nav ul a{
  display:block;padding:6px 14px;border-radius:999px;text-decoration:none;
  color:var(--ink);font-weight:800;font-size:.95rem;transition:background .2s, transform .2s;
}
.nav ul a:hover{background:#ffe6f1;transform:scale(1.06)}

/* ---------- wordmark ---------- */
.wordmark{font-weight:800;font-size:1.7rem;letter-spacing:.5px;display:inline-flex}
.wordmark span{display:inline-block;animation:bounce 2.4s ease-in-out infinite;text-shadow:0 3px 0 rgba(59,37,80,.12)}
.wordmark span:nth-child(1){color:#ff6fa3;animation-delay:0s}
.wordmark span:nth-child(2){color:#a77bff;animation-delay:.08s}
.wordmark span:nth-child(3){color:#3fc79a;animation-delay:.16s}
.wordmark span:nth-child(4){color:#ff9a5c;animation-delay:.24s}
.wordmark span:nth-child(5){color:#ff6fa3;animation-delay:.32s}
.wordmark span:nth-child(6){color:#a77bff;animation-delay:.40s}
.wordmark span:nth-child(7){color:#3fc79a;animation-delay:.48s}
.wordmark span:nth-child(8){color:#ff9a5c;animation-delay:.56s}
.wordmark.big{font-size:clamp(3.2rem,11vw,6.4rem);letter-spacing:1px}
.wordmark.big span{text-shadow:0 6px 0 rgba(59,37,80,.10)}

/* ---------- hero ---------- */
.hero{
  max-width:1100px;margin:0 auto;padding:56px 16px 40px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;position:relative;
}
.hero p.lead{font-size:1.2rem;color:var(--ink-soft);max-width:520px;margin:10px 0 24px;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tag{padding:5px 12px;border-radius:999px;font-weight:800;font-size:.85rem;background:#fff;box-shadow:0 3px 0 rgba(59,37,80,.08)}
.tag:nth-child(4n+1){background:#ffe3ef}.tag:nth-child(4n+2){background:#ede5ff}
.tag:nth-child(4n+3){background:#dcfaee}.tag:nth-child(4n){background:#ffe9d9}
.mascot-wrap{position:relative;display:grid;place-items:center;min-height:340px}
.blob{position:absolute;border-radius:var(--r-blob);animation:morph 9s ease-in-out infinite}
.blob.b1{width:320px;height:300px;background:linear-gradient(135deg,var(--lilac),var(--pink))}
.blob.b2{width:120px;height:110px;background:var(--mint);top:4%;right:6%;animation-duration:7s}
.blob.b3{width:90px;height:84px;background:var(--peach);bottom:6%;left:8%;animation-duration:11s}
.mascot{position:relative;width:min(280px,70vw);animation:squish 2.8s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 14px 0 rgba(59,37,80,.08))}

/* ---------- jelly buttons ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.jelly{
  --c1:#ffc4da;--c2:#ff8cb6;--sh:#e06d98;
  display:inline-block;padding:14px 26px;border:0;border-radius:28px 32px 26px 34px / 30px 26px 32px 28px;
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.1rem;color:#fff;text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:inset 0 6px 8px rgba(255,255,255,.55),inset 0 -6px 10px rgba(0,0,0,.08),0 6px 0 var(--sh),0 12px 22px rgba(224,109,152,.30);
  text-shadow:0 2px 0 rgba(0,0,0,.12);position:relative;transition:transform .15s;
}
.jelly::after{content:"";position:absolute;left:18%;top:6px;width:34%;height:8px;border-radius:99px;background:rgba(255,255,255,.65)}
.jelly:hover{animation:jelly .6s}
.jelly:active{transform:translateY(4px) scale(1.04,.92);box-shadow:inset 0 6px 8px rgba(255,255,255,.55),0 2px 0 var(--sh)}
.jelly.lilac{--c1:#e0d2ff;--c2:#a98bff;--sh:#8a6ae0}
.jelly.mint{--c1:#c9f7e5;--c2:#57cfa3;--sh:#3aa881}

/* ---------- sections ---------- */
section{max-width:1100px;margin:0 auto;padding:48px 16px}
.section-title{text-align:center;margin-bottom:8px;font-size:clamp(2rem,5vw,2.8rem)}
.section-sub{text-align:center;color:var(--ink-soft);font-weight:700;margin-bottom:30px}
.soon-badge{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--butter);font-weight:800;font-size:.9rem;margin-bottom:10px;box-shadow:0 3px 0 #f0d86a}
.center{text-align:center}

/* game placeholder cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--card);border-radius:34px;padding:16px 16px 20px;
  box-shadow:0 8px 0 #f1e2ee,0 16px 30px rgba(122,74,140,.10);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.card:hover{transform:translateY(-6px) rotate(-1deg) scale(1.02)}
.card .art{
  aspect-ratio:1/1;border-radius:28px;display:grid;place-items:center;margin-bottom:14px;position:relative;overflow:hidden;
}
.card .art svg{width:62%;height:62%;animation:squish 3s ease-in-out infinite;transform-origin:50% 90%}
.card:nth-child(2) .art svg{animation-delay:.3s}.card:nth-child(3) .art svg{animation-delay:.6s}
.card:nth-child(4) .art svg{animation-delay:.9s}.card:nth-child(5) .art svg{animation-delay:1.2s}.card:nth-child(6) .art svg{animation-delay:1.5s}
.art.pink{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#ffd6e6 40%,#ffb3cf)}
.art.lilac{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#ebe2ff 40%,#d4c2ff)}
.art.mint{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#dcfaee 40%,#b8f2db)}
.art.peach{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#ffe7d6 40%,#ffd5b8)}
.art.butter{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#fff6cc 40%,#fff1a8)}
.art.sky{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#e1f1ff 40%,#bfe0ff)}
.card h3{font-size:1.3rem}
.card p{color:var(--ink-soft);font-weight:600;font-size:.95rem}
.card .pill{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:999px;background:#f6effa;font-weight:800;font-size:.8rem;color:#8a6ae0}

/* about features */
.about{
  background:#fff;border-radius:48px 40px 52px 44px;padding:40px 28px;
  box-shadow:0 10px 0 #f1e2ee,0 20px 40px rgba(122,74,140,.10);
}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.feat{border-radius:28px;padding:18px 14px;text-align:center;font-weight:700}
.feat .ico{font-size:1.9rem;line-height:1;margin-bottom:6px}
.feat b{display:block;font-family:"Baloo 2",sans-serif;font-size:1.15rem}
.feat span{color:var(--ink-soft);font-size:.9rem}
.feat:nth-child(1){background:#ffe3ef}.feat:nth-child(2){background:#ede5ff}.feat:nth-child(3){background:#dcfaee}.feat:nth-child(4){background:#ffe9d9}

/* contact */
.contact{
  text-align:center;background:linear-gradient(135deg,#ffe3ef,#ede5ff 55%,#dcfaee);
  border-radius:44px 52px 40px 50px;padding:44px 20px;
}
.contact p{color:var(--ink-soft);font-weight:700;margin:8px auto 22px;max-width:520px}

/* footer */
footer{
  max-width:1100px;margin:30px auto 24px;padding:18px 20px;width:calc(100% - 32px);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border-radius:999px;font-weight:700;color:var(--ink-soft);font-size:.92rem;
  box-shadow:0 6px 0 #f1e2ee;
}
footer ul{list-style:none;display:flex;gap:14px}
footer a{color:var(--ink);text-decoration:none;font-weight:800}
footer a:hover{color:#ff6fa3}

/* prose pages */
.prose{
  max-width:820px;margin:34px auto;padding:36px 28px;width:calc(100% - 32px);
  background:#fff;border-radius:40px;box-shadow:0 10px 0 #f1e2ee,0 20px 40px rgba(122,74,140,.08);
}
.prose h1{font-size:clamp(2.1rem,6vw,2.8rem);color:#ff6fa3}
.prose .meta{color:var(--ink-soft);font-weight:700;margin-bottom:18px}
.prose h2{font-size:1.4rem;margin:26px 0 6px;color:#8a6ae0}
.prose p,.prose li{margin-bottom:10px}
.prose ul{padding-left:4px;list-style:none}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.45em;width:13px;height:13px;border-radius:50% 45% 55% 50%;background:var(--pink)}
.prose ul li:nth-child(3n+2)::before{background:var(--lilac)}
.prose ul li:nth-child(3n)::before{background:var(--mint-d)}

/* ---------- animations ---------- */
@keyframes bounce{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(-8px) scale(.94,1.08)}40%{transform:translateY(0) scale(1.08,.92)}55%{transform:translateY(0) scale(1,1)}}
@keyframes squish{0%,100%{transform:scale(1,1)}45%{transform:scale(1.06,.93)}70%{transform:scale(.97,1.04)}}
@keyframes jelly{0%{transform:scale(1,1)}30%{transform:scale(1.12,.88)}50%{transform:scale(.92,1.08)}70%{transform:scale(1.04,.96)}100%{transform:scale(1,1)}}
@keyframes morph{0%,100%{border-radius:42% 58% 55% 45% / 52% 44% 56% 48%}50%{border-radius:58% 42% 46% 54% / 45% 56% 44% 55%}}
@keyframes wobble{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.eye{animation:blink 4.5s infinite;transform-box:fill-box;transform-origin:center}

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

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:34px}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .tags,.btns{justify-content:center}
  .mascot-wrap{min-height:280px;order:-1}
  .blob.b1{width:250px;height:235px}
  .nav{border-radius:30px}
  .nav ul a{padding:6px 10px;font-size:.88rem}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .card{padding:10px 10px 14px;border-radius:26px}
  .card .art{border-radius:20px}
  .card h3{font-size:1.05rem}.card p{font-size:.84rem}
  .about{padding:30px 16px}
  .features{grid-template-columns:1fr 1fr;gap:10px}
  footer{border-radius:30px;justify-content:center;text-align:center}
  .nav .wordmark{display:none}
  .nav ul a{padding:6px 8px;font-size:.86rem}
  .nav ul{gap:0}
  .prose{padding:26px 18px;border-radius:30px}
}
@media (max-width:340px){.nav ul li:nth-child(2){display:none}}