/* DinoKids WOW Styles */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');

body, h1, h2, h3, h4, h5, h6, button, a, p, li, span, strong {
  font-family: 'Nunito', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
}

/* SPLASH */
#dk-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 40% 30%, #1e4a0a 0%, #2d1800 50%, #0a1040 100%);
  animation: dk-splash-in 0.35s ease-out;
  cursor: pointer;
}
#dk-splash-inner { text-align: center; position: relative; padding: 20px; }
#dk-splash-dino {
  font-size: clamp(8rem, 20vw, 15rem);
  display: block; line-height: 1;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
  animation: dk-dino-crash 0.55s 0.05s cubic-bezier(0.22,1,0.36,1) both;
}
#dk-splash-msg strong {
  display: block;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  font-weight: 900; color: #FFD600;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(255,214,0,.6), 0 4px 24px rgba(0,0,0,.5);
  animation: dk-title-pop 0.32s 0.48s cubic-bezier(0.22,1,0.36,1) both;
}
#dk-splash-msg span {
  display: block; margin-top: 8px;
  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
  font-weight: 800; color: #a8ffc8;
  animation: dk-title-pop 0.32s 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
#dk-splash-tap {
  margin-top: 20px;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: rgba(255,255,255,.55); font-weight: 700;
  animation: dk-tap-pulse 1.4s 1.2s ease-in-out infinite both;
}
#dk-splash-stars { position: absolute; inset: -60px; pointer-events: none; }
#dk-splash-stars span {
  position: absolute;
  animation: dk-star-pop 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.dk-splash-exit { animation: dk-splash-out 0.5s ease-in forwards !important; }

/* COMPANION DINO */
#dk-companion {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; font-size: 2.2rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
  will-change: transform;
}
#dk-companion span { display: block; animation: dk-comp-bob 2s ease-in-out infinite; }
.dk-comp-wiggle span { animation: dk-comp-wiggle 0.5s ease-in-out !important; }

/* CLICK RIPPLE */
.dk-click-ripple {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 3px solid #FFD600;
  animation: dk-ripple-out 0.68s ease-out forwards;
}
.dk-particle { pointer-events: none; }

/* ROAR */
.dk-roar-label {
  position: fixed; top: 28%; left: 50%; transform: translateX(-50%);
  z-index: 99998;
  font-size: clamp(3.2rem, 9vw, 7rem);
  font-weight: 900; color: #FFD600;
  text-shadow: 0 0 40px rgba(255,214,0,.8), 0 4px 24px rgba(0,0,0,.5);
  animation: dk-roar-pop 1.15s ease-out forwards;
  pointer-events: none; white-space: nowrap;
}
.dk-roar-shake { animation: dk-shake 0.56s ease-in-out; }

/* ROAR BUTTON */
.dk-roar-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: linear-gradient(135deg, #FF6D00, #E53500);
  color: #fff; font-weight: 900; font-size: 1.12rem;
  border: 2px solid rgba(255,255,255,.2);
  cursor: pointer;
  box-shadow: 0 6px 26px rgba(255,109,0,.55), 0 2px 8px rgba(0,0,0,.3);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: dk-btn-pulse 2.8s ease-in-out infinite;
  font-family: inherit;
}
.dk-roar-btn:hover { transform: scale(1.07) translateY(-3px); box-shadow: 0 12px 36px rgba(255,109,0,.75); }
.dk-roar-btn:active { transform: scale(.95); }

/* HERO */
.hero-copybox h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem) !important; }
.hero-pill { font-size: 1.02rem !important; padding: 12px 22px !important; }
.hero-pill.primary { font-size: 1.05rem !important; }

/* SPECIES CHIPS */
.species-chip { transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s !important; }
.species-chip:hover { transform: translateX(-4px) scale(1.04) !important; }
.species-chip[data-active=true] { border-color: rgba(255,214,0,.45) !important; }

/* JOURNEY CARDS */
.journey-card {
  transition: transform 0.26s cubic-bezier(0.23,1,0.32,1), box-shadow 0.26s, border-color 0.26s;
  border: 2px solid transparent !important;
}
.journey-card:hover {
  transform: translateY(-8px) scale(1.04);
  border-color: rgba(255,214,0,.45) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.38), 0 0 24px rgba(255,214,0,.14) !important;
}
.card-emoji {
  font-size: 3.2rem !important; display: block;
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.journey-card:hover .card-emoji { transform: scale(1.3) rotate(-8deg) !important; }
.journey-card strong { font-size: 1.25rem !important; }
.journey-card p { font-size: 1rem !important; }

/* TOPIC CARDS */
.topic-card { transition: transform 0.22s cubic-bezier(0.23,1,0.32,1), box-shadow 0.22s; }
.topic-card:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.topic-card > span { font-size: 3rem !important; display: block; transition: transform 0.26s cubic-bezier(0.23,1,0.32,1); }
.topic-card:hover > span { transform: scale(1.25) rotate(10deg) !important; }
.topic-card strong { font-size: 1.18rem !important; }

/* FACT CHIPS */
.fact-chip { transition: transform 0.2s ease, box-shadow 0.2s; }
.fact-chip:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.fact-chip strong { font-size: 1rem !important; }

/* INFO CARDS */
.info-card {
  border-left: 4px solid rgba(129,178,106,.4);
  transition: border-color 0.22s, transform 0.22s;
}
.info-card:hover { border-left-color: #81b26a; transform: translateX(5px); }
.info-card h2 { font-size: 1.5rem !important; }
.info-card p { font-size: 1.06rem !important; line-height: 1.75 !important; }

/* PAGE TITLES */
.page-title { font-size: clamp(2.8rem, 7vw, 5rem) !important; letter-spacing: -0.03em !important; }
.page-subtitle { font-size: 1.1rem !important; line-height: 1.75 !important; }
.back-btn { font-size: 1.06rem !important; padding: 11px 20px !important; font-weight: 900 !important; }

/* DRAWER */
.info-drawer h2 { font-size: 2.5rem !important; }
.info-drawer p, .info-drawer li { font-size: 1.06rem !important; line-height: 1.72 !important; }
.drawer-facts li { padding: 14px 16px !important; border-left: 3px solid rgba(129,178,106,.5) !important; border-radius: 14px !important; }
.info-drawer h3 { font-size: 1.08rem !important; }

/* QUIZ */
.quiz-answer-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  font-size: 1.05rem !important; padding: 14px 20px !important;
}
.quiz-answer-btn:hover { transform: scale(1.04) translateY(-2px) !important; }

/* FOOTER */
.main-footer { font-size: 1rem !important; padding: 22px !important; }

/* KEYFRAMES */
@keyframes dk-splash-in { from { opacity:0; } to { opacity:1; } }
@keyframes dk-splash-out { to { opacity:0; transform:scale(1.07); } }
@keyframes dk-dino-crash {
  from { transform: translateX(120vw) rotate(22deg) scale(.4); opacity:0; }
  70%  { transform: translateX(-12px) rotate(-4deg) scale(1.06); }
  to   { transform: translateX(0) rotate(0) scale(1); opacity:1; }
}
@keyframes dk-title-pop {
  from { transform: scale(.3) translateY(24px); opacity:0; }
  to   { transform: scale(1) translateY(0); opacity:1; }
}
@keyframes dk-star-pop {
  from { transform: scale(0) rotate(-180deg); opacity:0; }
  to   { transform: scale(1) rotate(0); opacity:1; }
}
@keyframes dk-tap-pulse {
  0%,100% { opacity:.55; }
  50%      { opacity:1; }
}
@keyframes dk-comp-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes dk-comp-wiggle {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(-18deg) scale(1.25); }
  75%  { transform: rotate(18deg) scale(1.25); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes dk-ripple-out {
  from { transform: scale(.18); opacity:1; }
  to   { transform: scale(3.2); opacity:0; }
}
@keyframes dk-roar-pop {
  0%   { transform: translateX(-50%) scale(.2); opacity:1; }
  35%  { transform: translateX(-50%) scale(1.18); opacity:1; }
  80%  { transform: translateX(-50%) scale(1); opacity:1; }
  100% { transform: translateX(-50%) scale(1.1) translateY(-22px); opacity:0; }
}
@keyframes dk-shake {
  0%,100%{ transform:translate(0); }
  15%    { transform:translate(-7px,3px) rotate(-.5deg); }
  30%    { transform:translate(7px,-3px) rotate(.5deg); }
  45%    { transform:translate(-5px,2px); }
  60%    { transform:translate(5px,-2px); }
  75%    { transform:translate(-3px,1px); }
  90%    { transform:translate(3px,-1px); }
}
@keyframes dk-btn-pulse {
  0%,100%{ box-shadow:0 6px 26px rgba(255,109,0,.55); }
  50%    { box-shadow:0 10px 36px rgba(255,109,0,.85),0 0 22px rgba(255,109,0,.4); }
}