/* ============ PLAY MONSTERS — design system ============ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900&display=swap');

:root{
  --grape:#8B5BE8;  --grape-d:#6B3FC4;
  --sky:#2C9CE8;    --sky-d:#1B79C2;
  --grass:#5BC93A;  --grass-d:#3FA323;
  --lime:#7BD42B;
  --sunny:#FBBA1F;  --sunny-d:#E59A00;
  --tang:#FF7A2B;   --tang-d:#E25B12;
  --amber:#FF9417;
  --teal:#16B79C;   --teal-d:#0E9079;
  --bubble:#FF5BA8; --bubble-d:#E03B89;

  --cream:#FFF6E6;
  --cream-2:#FFEFD4;
  --ink:#2A1B4A;
  --ink-soft:#5B4B7A;
  --white:#ffffff;

  --shadow-toy:0 10px 0 rgba(42,27,74,.16);
  --radius:28px;
  --radius-lg:40px;
  --maxw:1200px;

  --font-display:'Baloo 2', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{position:relative;padding:96px 0;}

/* ---------- chunky toy buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;line-height:1;
  padding:16px 28px;border-radius:999px;
  color:#fff;background:var(--grape);
  box-shadow:0 6px 0 var(--grape-d), 0 12px 18px rgba(42,27,74,.18);
  transition:transform .12s ease, box-shadow .12s ease;
  border:3px solid rgba(255,255,255,.65);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--grape-d),0 16px 22px rgba(42,27,74,.22);}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--grape-d);}
.btn--yt{background:var(--bubble);box-shadow:0 6px 0 var(--bubble-d),0 12px 18px rgba(42,27,74,.18);}
.btn--yt:hover{box-shadow:0 9px 0 var(--bubble-d),0 16px 22px rgba(42,27,74,.22);}
.btn--yt:active{box-shadow:0 2px 0 var(--bubble-d);}
.btn--sun{background:var(--sunny);color:var(--ink);box-shadow:0 6px 0 var(--sunny-d),0 12px 18px rgba(42,27,74,.18);}
.btn--sun:active{box-shadow:0 2px 0 var(--sunny-d);}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 #E7D9BE,0 12px 18px rgba(42,27,74,.12);}
.btn--ghost:active{box-shadow:0 2px 0 #E7D9BE;}
.btn--lg{font-size:1.25rem;padding:20px 38px;}

.yt-ico{width:22px;height:22px;display:block;}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--font-display);font-weight:800;
  line-height:.86;letter-spacing:.5px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin:0;
}
.wordmark span{
  -webkit-text-stroke:.14em #fff;
  paint-order:stroke fill;
  text-shadow:
    .06em .07em 0 rgba(42,27,74,.28),
    0 .03em 0 #fff;
  display:inline-block;
  transform:rotate(var(--r,0deg));
}
.wordmark .row{display:flex;}

/* ---------- section heading ---------- */
.eyebrow{
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.95rem;color:var(--grape);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before,.eyebrow::after{content:"★";color:var(--sunny);font-size:.9em;}
h2.title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;
  margin:.3em 0 .2em;color:var(--ink);
}
.lead{font-size:1.2rem;font-weight:600;color:var(--ink-soft);max-width:620px;line-height:1.5;}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}

/* ---------- accessibility: keyboard focus ---------- */
:focus{outline:none;}
:focus-visible{outline:4px solid var(--sky);outline-offset:3px;border-radius:8px;}
.btn:focus-visible,.game-sound:focus-visible,.to-top:focus-visible,.hm:focus-visible{outline:4px solid var(--ink);outline-offset:3px;}

/* floaty decorative blobs/stars */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:0;}
.star{color:var(--sunny);filter:drop-shadow(0 4px 0 rgba(42,27,74,.12));}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes float-y2{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(4deg)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pop-in{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .deco,[style*="float"]{animation:none!important;}
}