/* Game Zone (Kids Learning) — HealCarto Library
   Scoped under #game-zone-root so it never leaks into other theme styles. */

#game-zone-root{
  --gz-bg:#F6FBFA;
  --gz-white:#FFFFFF;
  --gz-ink:#0B3B3A;
  --gz-ink-soft:#4B6B69;
  --gz-teal:#0F9E96;
  --gz-teal-dark:#0A7A73;
  --gz-emerald:#22B573;
  --gz-sun:#FFC145;
  --gz-coral:#FF6F61;
  --gz-line:#DCEFEC;
  --gz-shadow: 0 10px 30px rgba(11,59,58,0.08);
  --gz-shadow-lg: 0 20px 50px rgba(11,59,58,0.14);
  --gz-radius: 22px;

  background:var(--gz-bg);
  color:var(--gz-ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
#game-zone-root *{box-sizing:border-box;}
#game-zone-root h1,
#game-zone-root h2,
#game-zone-root h3,
#game-zone-root .display{
  font-family:'Baloo 2',cursive;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}
#game-zone-root a{color:inherit;text-decoration:none;}
#game-zone-root img{max-width:100%;display:block;}

/* ---------- Hero ---------- */
#game-zone-root .gz-hero{
  position:relative;
  padding:44px 20px 40px;
  background:radial-gradient(120% 100% at 50% -10%, #E6FBF7 0%, var(--gz-bg) 60%);
  text-align:center;
  overflow:hidden;
}
#game-zone-root .gz-mascot{
  width:96px;height:96px;margin:0 auto 14px;
  animation:gzFloat 3.2s ease-in-out infinite;
}
@keyframes gzFloat{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-8px) rotate(2deg);}
}
#game-zone-root .gz-eyebrow{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gz-teal-dark);
  background:#E6F7F5;
  border:1px solid #C9EEE8;
  padding:6px 14px;border-radius:999px;
  margin-bottom:14px;
}
#game-zone-root .gz-hero h1{
  font-size:clamp(30px,7vw,44px);
  color:var(--gz-ink);
  line-height:1.05;
}
#game-zone-root .gz-hero h1 span{color:var(--gz-teal);}
#game-zone-root .gz-hero p{
  max-width:440px;margin:14px auto 0;
  font-size:15.5px;color:var(--gz-ink-soft);line-height:1.55;
}
#game-zone-root .gz-streak-row{
  display:flex;justify-content:center;gap:10px;
  margin-top:22px;flex-wrap:wrap;
}
#game-zone-root .gz-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--gz-white);
  border:1px solid var(--gz-line);
  padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600;
  box-shadow:var(--gz-shadow);
}
#game-zone-root .gz-pill b{color:var(--gz-teal-dark);font-family:'Baloo 2',cursive;}

/* ---------- Path section ---------- */
#game-zone-root .gz-path-section{
  padding:24px 20px 60px;
  max-width:520px;margin:0 auto;
  position:relative;
}
#game-zone-root .gz-path-line{
  position:absolute;
  left:50%;top:20px;bottom:20px;
  width:4px;
  background-image:linear-gradient(var(--gz-teal) 60%, transparent 0%);
  background-size:4px 16px;
  background-repeat:repeat-y;
  transform:translateX(-50%);
  opacity:0.35;
  z-index:0;
}
#game-zone-root .gz-level{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:16px;
  margin:0 0 34px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
#game-zone-root .gz-level.gz-in-view{
  opacity:1;
  transform:translateY(0);
}
#game-zone-root .gz-level:nth-child(even){flex-direction:row-reverse;text-align:right;}
#game-zone-root .gz-level:nth-child(even) .gz-level-copy{align-items:flex-end;}

#game-zone-root .gz-node{
  flex:none;
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  background:linear-gradient(160deg,var(--gz-teal),var(--gz-emerald));
  color:var(--gz-white);
  box-shadow:var(--gz-shadow-lg);
  border:4px solid var(--gz-white);
  flex-shrink:0;
}
#game-zone-root .gz-node.locked{
  background:var(--gz-white);
  color:#B9CDCB;
  border:4px solid var(--gz-line);
  box-shadow:var(--gz-shadow);
}
#game-zone-root .gz-level-copy{display:flex;flex-direction:column;gap:4px;}
#game-zone-root .gz-level-tag{
  font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--gz-emerald);
}
#game-zone-root .gz-level.locked .gz-level-tag{color:#B9CDCB;}
#game-zone-root .gz-level-title{
  font-family:'Baloo 2',cursive;font-weight:600;
  font-size:18px;color:var(--gz-ink);
}
#game-zone-root .gz-level.locked .gz-level-title{color:#9BB0AE;}
#game-zone-root .gz-level-desc{
  font-size:13px;color:var(--gz-ink-soft);max-width:220px;
}
#game-zone-root .gz-level-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
  font-size:13px;font-weight:700;color:var(--gz-teal-dark);
}

/* ---------- Activity card ---------- */
#game-zone-root .gz-activity-wrap{max-width:640px;margin:0 auto 60px;padding:0 20px;}
#game-zone-root .gz-activity-card{
  background:var(--gz-white);
  border-radius:var(--gz-radius);
  border:1px solid var(--gz-line);
  box-shadow:var(--gz-shadow-lg);
  overflow:hidden;
}
#game-zone-root .gz-activity-head{
  padding:22px 22px 16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--gz-line);
}
#game-zone-root .gz-activity-head h2{font-size:20px;color:var(--gz-ink);}
#game-zone-root .gz-badge-new{
  flex-shrink:0;
  font-size:11px;font-weight:700;color:var(--gz-white);
  background:var(--gz-coral);
  padding:5px 10px;border-radius:999px;
}
#game-zone-root .gz-activity-instructions{
  padding:14px 22px 0;
  font-size:13.5px;color:var(--gz-ink-soft);
}
#game-zone-root .gz-h5p-frame-wrap{padding:16px 22px 22px;}
#game-zone-root .gz-h5p-frame-wrap iframe{
  width:100%;
  min-height:560px;
  border:0;
  border-radius:14px;
  background:#FAFEFD;
}
#game-zone-root .gz-reward-strip{
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;
  background:#FFF9EC;
  border-top:1px dashed #F3DE9D;
  font-size:13px;font-weight:600;color:#8A6A16;
}

#game-zone-root .gz-soon-note{
  max-width:520px;margin:0 auto 50px;padding:0 20px;
  text-align:center;font-size:13px;color:var(--gz-ink-soft);
}

@media (max-width:480px){
  #game-zone-root .gz-level:nth-child(even){flex-direction:row;text-align:left;}
  #game-zone-root .gz-level:nth-child(even) .gz-level-copy{align-items:flex-start;}
  #game-zone-root .gz-path-line{left:32px;}
  #game-zone-root .gz-node{width:56px;height:56px;font-size:22px;}
}

@media (prefers-reduced-motion: reduce){
  #game-zone-root .gz-mascot{animation:none;}
  #game-zone-root .gz-level{opacity:1;transform:none;transition:none;}
}