/* Rex the Dinosaur — rexthedinosaur.com
   Fern Valley: morning sky, fern green, sun yellow, warm earth, story paper. */

:root {
  --fern: #2f6b3a;
  --fern-2: #4f8f57;
  --fern-3: #dff0d8;
  --sun: #f5c04c;
  --sun-2: #ffd97a;
  --sky: #bfe3f5;
  --earth: #8b5a2b;
  --paper: #fbf6e9;
  --paper-2: #f2e8d2;
  --ink: #2b3a2e;
  --night: #1a2a3a;
  --night-2: #23384c;
  --bandana: #d9412b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, .btn, .wordmark { font-family: "Baloo 2", "Nunito", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

.h-big {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  text-align: center;
  padding-top: 3.4rem;
  line-height: 1.1;
  text-wrap: balance;
}
.section-sub {
  text-align: center;
  font-size: 1.08rem;
  opacity: .84;
  margin: .6rem auto 2rem;
  max-width: 36rem;
  padding: 0 1.2rem;
}

/* ── hero ─────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--sky);
}
.hero-art, .hero-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,40,30,0) 45%, rgba(20,40,30,.55) 78%, rgba(15,30,22,.85) 100%);
}
.hero-inner {
  position: relative;
  padding: 0 1.2rem 3.2rem;
  color: #fff;
  width: 100%;
  max-width: 62rem;
}
.wordmark {
  display: flex; flex-direction: column; align-items: center; line-height: .9;
  text-shadow: 0 6px 24px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.25);
}
.wm-rex { font-size: clamp(4.4rem, 15vw, 9.5rem); font-weight: 800; color: var(--sun); letter-spacing: .02em; }
.wm-the { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 700; margin: .35rem 0 .1rem; opacity: .95; }
.wm-dino { font-size: clamp(2.2rem, 7vw, 4.4rem); font-weight: 800; color: #fff; }
.hero-line { margin: 1rem auto .2rem; font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 600; opacity: .95; }

.btn {
  display: inline-block;
  padding: .95rem 2.2rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn-sun { background: var(--sun); color: var(--ink); margin-top: 1.4rem; }
.btn-fern { background: var(--fern); color: #fff; }
.btn-small { padding: .6rem 1.3rem; font-size: 1rem; box-shadow: none; }

.doors { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.door {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: #fff; text-decoration: none; font-weight: 800; font-family: "Baloo 2", sans-serif; font-size: 1rem;
  width: 5.2rem;
}
.door-icon {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.55);
  transition: background .15s ease, transform .15s ease;
}
.door-icon svg { width: 1.6rem; height: 1.6rem; }
.door:hover .door-icon { background: var(--sun); color: var(--ink); transform: scale(1.08); }
.grownups-link { display: inline-block; margin-top: 1.4rem; color: rgba(255,255,255,.8); font-size: .9rem; }

/* ── bands ─────────────────────────────────────────── */
.band { padding-bottom: 3.6rem; }
.band-fern { background: linear-gradient(180deg, var(--fern-3), var(--paper)); }
.band-sun { background: linear-gradient(180deg, #fff3cf, var(--paper)); }
.band-paper { background: var(--paper); }
.band-night { background: linear-gradient(180deg, var(--night), var(--night-2)); color: #f4efe2; }

/* ── friends ───────────────────────────────────────── */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1.2rem; max-width: 66rem; margin: 0 auto; padding: 0 1.2rem;
}
.card {
  background: #fff; border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 8px 26px rgba(43,58,46,.12);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-bottom: .9rem; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(43,58,46,.18); }
.card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: center top; }
.card-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.25rem; margin-top: .6rem; }
.card-role { font-size: .85rem; opacity: .75; padding: 0 .6rem; }

/* ── play ──────────────────────────────────────────── */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.4rem; max-width: 62rem; margin: 0 auto; padding: 0 1.2rem; }
.game, .lesson {
  background: #fff; border-radius: 1.4rem; padding: 1.4rem; box-shadow: 0 8px 26px rgba(43,58,46,.1);
}
.game h3, .lesson h3 { font-size: 1.5rem; font-weight: 800; color: var(--fern); }
.game-help { opacity: .8; margin: .3rem 0 1rem; }
.game-msg { min-height: 1.6rem; font-weight: 800; color: var(--fern); margin-top: .6rem; }

.nest {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center;
  min-height: 7rem; padding: 1rem; border-radius: 50% / 40%;
  background: radial-gradient(ellipse at center, #e7cfa5, #c9a271);
}
.egg { width: 2.6rem; height: 3.2rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fff, #e8f0d8 60%, #c5d8b0); box-shadow: inset -4px -6px 10px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.15);
  animation: wobble 2.4s ease-in-out infinite; }
.egg:nth-child(2n) { animation-delay: .6s; } .egg:nth-child(3n) { animation-delay: 1.1s; }
@keyframes wobble { 0%,100% { transform: rotate(-3deg);} 50% { transform: rotate(3deg);} }
.choices { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.choice {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; font-family: "Baloo 2", sans-serif; font-size: 1.5rem; font-weight: 800;
  background: var(--sun-2); color: var(--ink); box-shadow: 0 4px 10px rgba(0,0,0,.15); transition: transform .12s ease;
}
.choice:hover { transform: scale(1.08); }
.choice.right { background: var(--fern-2); color: #fff; }
.choice.wrong { background: #eee; color: #999; }

.stones { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.stone {
  aspect-ratio: 3/4; border-radius: .9rem; overflow: hidden; position: relative;
  background: radial-gradient(circle at 30% 25%, #b9b09a, #7d7461); box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: transform .15s ease;
}
.stone:hover { transform: scale(1.03); }
.stone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .25s ease; }
.stone.up img, .stone.done img { opacity: 1; }
.stone.done { outline: 3px solid var(--sun); }

/* ── learn ─────────────────────────────────────────── */
.lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; max-width: 66rem; margin: 0 auto; padding: 0 1.2rem; }
.letters { display: flex; gap: .8rem; justify-content: center; margin-top: 1rem; }
.letter {
  width: 4.6rem; height: 4.6rem; border-radius: 1rem; font-family: "Baloo 2", sans-serif; font-size: 2.6rem; font-weight: 800;
  background: var(--fern-3); color: var(--fern); box-shadow: 0 4px 10px rgba(0,0,0,.12); transition: transform .12s ease, background .12s ease;
}
.letter:hover { transform: translateY(-3px); }
.letter.said { background: var(--sun); color: var(--ink); }
.facts { list-style: none; margin-top: .6rem; }
.facts li { padding: .7rem .9rem; border-left: 4px solid var(--sun); background: var(--paper); border-radius: .4rem; margin-bottom: .6rem; }
.sizes { display: flex; gap: .5rem; justify-content: center; align-items: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.size { border-radius: .8rem; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.15); background: #fff; transition: transform .12s ease; }
.size img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.size.picked { opacity: .35; transform: scale(.94); }

/* ── books ─────────────────────────────────────────── */
.shelf { list-style: none; max-width: 40rem; margin: 0 auto; padding: 0 1.2rem; }
.shelf li {
  font-family: "Baloo 2", sans-serif; font-size: 1.25rem; font-weight: 700;
  padding: .8rem 1rem; border-bottom: 1px dashed rgba(255,255,255,.25);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.shelf li span { font-family: "Nunito", sans-serif; font-weight: 600; font-size: .9rem; opacity: .75; }
.soon { text-align: center; margin-top: 1.4rem; opacity: .75; }

/* ── grown-ups ─────────────────────────────────────── */
.promise { max-width: 42rem; margin: 0 auto; padding: 0 1.2rem; font-size: 1.08rem; line-height: 1.65; }
.promise p + p { margin-top: 1rem; }
.promise a { color: var(--fern); font-weight: 800; }

/* ── footer ────────────────────────────────────────── */
.foot { background: #000; color: #fff; text-align: center; padding: 2.4rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.foot-mark { letter-spacing: .34em; font-weight: 800; font-family: "Baloo 2", sans-serif; }
.foot-sub { font-size: .8rem; opacity: .65; }

/* ── modal ─────────────────────────────────────────── */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(15,30,22,.72); display: grid; place-items: center; padding: 1rem; }
.modal-card { background: #fff; border-radius: 1.4rem; max-width: 24rem; width: 100%; padding: 1.2rem 1.2rem 1.6rem; position: relative; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.modal-card img { width: 11rem; height: 14rem; object-fit: cover; object-position: center top; border-radius: 1rem; margin: 0 auto .8rem; }
.modal-card h3 { font-size: 1.6rem; font-weight: 800; color: var(--fern); }
.modal-line { font-style: italic; color: var(--bandana); font-weight: 700; margin: .2rem 0 .7rem; }
.modal-x { position: absolute; top: .7rem; right: .8rem; font-size: 1.1rem; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .egg { animation: none; } * { transition: none !important; } }