/* Shared stylesheet for the /phonics-games/ cluster. Palette + shapes match
   glasspals.com (see website/index.html) — hand-rolled static pages, no build. */
:root{
  --sky:#aee1f5; --sky-deep:#7ec8e3;
  --grass:#f3d27a; --grass-deep:#e8b84b;
  --green:#58a55c; --green-bright:#7bc47f;
  --lava:#e86a2e; --lava-deep:#c9501a;
  --berry:#d9486e;
  --paper:#fffdf6; --cream:#fff6e3;
  --ink:#33291f;
  --shadow:0 6px 0 rgba(51,41,31,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Fredoka',sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden}
/* height:auto is load-bearing: the page imgs carry width/height attributes
   (for layout stability), so without it a narrowed image keeps its full
   attribute height and stretches vertically. */
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:700;line-height:1.12}
.hand{font-family:'Patrick Hand',cursive}

nav{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:4px solid var(--ink);padding:.5rem 1.2rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-size:1.5rem;font-weight:700}
.logo img{height:42px;width:auto}
.logo .pals{color:var(--green)}
nav .backlink{margin-left:auto;text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem;padding:.45rem .9rem;border-radius:999px}
nav .backlink:hover{background:var(--sky)}

header.hero{
  background:linear-gradient(var(--sky) 0%, var(--sky-deep) 100%);
  text-align:center;padding:2.8rem 1.2rem 3rem;
}
header.hero h1{
  font-size:clamp(1.9rem,6vw,3.3rem);color:#fff;
  text-shadow:3px 3px 0 rgba(51,41,31,.14);transform:rotate(-1deg);
  margin-bottom:.6rem;
}
header.hero h1 .g{color:var(--grass)}
.hero-sub{font-family:'Patrick Hand',cursive;font-size:clamp(1.15rem,3vw,1.55rem);max-width:640px;margin:0 auto 1.5rem}
.btn{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;
  text-decoration:none;color:#fff;border:3px solid var(--ink);
  padding:.85rem 1.9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .12s;
}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg) scale(1.04)}
.btn-berry{background:var(--berry);box-shadow:0 5px 0 #9c2c4c}
.btn-green{background:var(--green);box-shadow:0 5px 0 #35693a}
.hero-fine{font-size:.95rem;opacity:.8;margin-top:.9rem}

section{padding:2.8rem 1.2rem}
.wrap{max-width:780px;margin:0 auto}
.sec-title{font-size:clamp(1.5rem,4.5vw,2.2rem);margin-bottom:1rem;transform:rotate(-1deg);color:var(--green)}
p{font-size:1.05rem;line-height:1.65;margin-bottom:1rem}
a{color:var(--berry);font-weight:600}
.alt{background:var(--cream)}

/* game screenshots as phone frames */
.shots{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0}
.shot{flex:0 1 240px;text-align:center}
.shot img{
  border:4px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);
  background:#fff;
}
.shot figcaption{font-family:'Patrick Hand',cursive;font-size:1.02rem;margin-top:.6rem;color:rgba(51,41,31,.85)}

.cta-band{text-align:center;margin:1.6rem 0 .4rem}
.cta-note{font-family:'Patrick Hand',cursive;font-size:1.1rem;opacity:.85;margin-top:.7rem}

/* FAQ */
.faq h3{
  font-size:1.12rem;margin:1.5rem 0 .4rem;display:inline-block;
  background:#fff;border:3px solid var(--ink);border-radius:14px;
  padding:.5rem 1rem;box-shadow:var(--shadow);transform:rotate(-.4deg);
}

/* printable hook */
.print-band{
  background:linear-gradient(120deg,var(--grass) 0%,var(--grass-deep) 100%);
  border:3px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);
  padding:1.5rem 1.6rem;display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
  justify-content:center;text-align:center;margin-top:1.8rem;
}
.print-band .pb-emoji{font-size:2.6rem}
.print-band h3{font-size:1.35rem;margin-bottom:.2rem}
.print-band p{font-family:'Patrick Hand',cursive;font-size:1.1rem;margin:0}

/* coloring-pages email form inside the print band */
.pb-action{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.pb-form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.pb-form input[type=email]{
  font-family:'Fredoka',sans-serif;font-size:1rem;color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;padding:.6rem 1.1rem;
  min-width:220px;background:#fff;
}
.pb-form input[type=email]:focus{outline:3px solid var(--sky-deep)}
.pb-form .btn{font-size:1.02rem;padding:.6rem 1.3rem}
.pb-hp{position:absolute;left:-9999px}
.pb-direct{font-family:'Patrick Hand',cursive;font-size:1rem;color:var(--ink);opacity:.8}

/* cross-links */
.xlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.2rem}
.xlink{
  display:block;background:#fff;border:3px solid var(--ink);border-radius:16px;
  padding:.9rem 1.1rem;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .15s;
}
.xlink:hover{transform:translateY(-4px) rotate(-1deg)}
.xlink .xl-t{font-weight:700;display:block;margin-bottom:.15rem}
.xlink .xl-s{font-family:'Patrick Hand',cursive;font-size:.98rem;color:rgba(51,41,31,.8)}

/* hub game cards */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin:1.6rem 0}
.skill-card{
  background:#fff;border:3px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  transition:transform .18s;
}
.skill-card:hover{transform:translateY(-6px) rotate(-1deg)}
.skill-card img{
  border-bottom:3px solid var(--ink);
  width:100%;height:280px;object-fit:cover;object-position:center 10%;
}
.skill-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.skill-body h3{font-size:1.2rem}
.skill-body p{font-family:'Patrick Hand',cursive;font-size:1rem;color:rgba(51,41,31,.8);margin:0;flex:1}
.skill-body .go{font-weight:700;color:var(--berry)}

footer{background:var(--ink);color:#f7efe2;text-align:center;padding:2.2rem 1.2rem}
footer a{color:var(--grass);text-decoration:none;font-weight:600;margin:0 .7rem}
footer a:hover{text-decoration:underline}
footer p{font-family:'Patrick Hand',cursive;font-size:1.05rem;opacity:.85;margin:1rem 0 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}