/* =========================================================
   Likkle Coders — Play Zone (kids games) styles  v405
   Bright, playful, big-tap, ABCmouse-inspired.
   Scoped under .kg-zone so it never leaks into the app.
   ========================================================= */
.kg-zone{
  --kg-ink:#0B2545;
  --kg-robi:#7C3AED; --kg-pattern:#FF6F4D; --kg-match:#1AA7C0;
  --kg-yellow:#F5C518; --kg-green:#2BB673; --kg-pink:#FF5DA2;
  font-weight:600;
}
.kg-zone *{ box-sizing:border-box; }

.kg-back{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 12px;
  font-weight:800; color:var(--kg-ink); text-decoration:none;
  background:#fff; border:2px solid rgba(11,37,69,.12); border-radius:999px; padding:7px 16px;
  box-shadow:0 3px 0 rgba(11,37,69,.12);
}
.kg-back:hover{ transform:translateY(-1px); }

/* ---------- shared buttons ---------- */
.kg-btn{
  font:inherit; font-weight:800; cursor:pointer; border:0; border-radius:16px;
  padding:12px 22px; color:#fff; background:var(--kg-green);
  box-shadow:0 4px 0 rgba(0,0,0,.18); transition:transform .1s, box-shadow .1s; font-size:1rem;
}
.kg-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,.18); }
.kg-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.kg-btn:disabled{ opacity:.45; cursor:default; }
.kg-btn-ghost{ background:#fff; color:var(--kg-ink); box-shadow:0 4px 0 rgba(11,37,69,.14); border:2px solid rgba(11,37,69,.1); }
.kg-play{ background:var(--kg-green); font-size:1.15rem; padding:14px 30px; }

.kg-msg{ text-align:center; font-weight:800; min-height:1.4em; margin:10px 0; font-size:1rem; }
.kg-msg.ok{ color:var(--kg-green); }
.kg-msg.bad{ color:var(--kg-pattern); }

/* ---------- HUB ---------- */
.kg-hub-head{ text-align:center; margin:4px 0 6px; }
.kg-hub-eyebrow{ display:inline-block; font-weight:900; letter-spacing:.06em; color:var(--kg-pink);
  background:#FFE6F1; padding:5px 14px; border-radius:999px; font-size:.8rem; }
.kg-hub-head h2{ font-size:2rem; margin:10px 0 4px; color:var(--kg-ink); }
.kg-hub-head p{ color:#5b6b7f; max-width:520px; margin:0 auto; }

.kg-hub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:22px; }
.kg-tile{
  position:relative; overflow:hidden; text-decoration:none; text-align:center;
  border-radius:26px; padding:28px 18px 24px; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 10px 24px rgba(11,37,69,.18); transition:transform .16s, box-shadow .16s;
}
.kg-tile:hover{ transform:translateY(-5px) rotate(-1deg); box-shadow:0 16px 32px rgba(11,37,69,.24); }
.kg-tile--robi{ background:linear-gradient(160deg,#9F7AEA,#6B46C1); }
.kg-tile--pattern{ background:linear-gradient(160deg,#FF8A6B,#FF5DA2); }
.kg-tile--match{ background:linear-gradient(160deg,#38BDF8,#0E7490); }
.kg-tile-art{ font-size:3.4rem; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); animation:kg-bob 3s ease-in-out infinite; }
.kg-tile:nth-child(2) .kg-tile-art{ animation-delay:.4s; }
.kg-tile:nth-child(3) .kg-tile-art{ animation-delay:.8s; }
.kg-tile strong{ font-size:1.35rem; font-weight:900; }
.kg-tile-sub{ font-size:.9rem; opacity:.95; }
@keyframes kg-bob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-8px) rotate(4deg); } }

/* ---------- per-game headers ---------- */
.kg-head{ text-align:center; border-radius:22px; padding:16px 18px; margin-bottom:16px; color:#fff; }
.kg-head h2{ margin:0; font-size:1.6rem; font-weight:900; }
.kg-head p{ margin:6px 0 0; font-size:.95rem; opacity:.96; }
.kg-head--robi{ background:linear-gradient(160deg,#9F7AEA,#6B46C1); }
.kg-head--pattern{ background:linear-gradient(160deg,#FF8A6B,#FF5DA2); }
.kg-head--match{ background:linear-gradient(160deg,#38BDF8,#0E7490); }

/* ---------- CODE ROBI ---------- */
.kg-robi-stage{ display:flex; justify-content:center; margin:6px 0 14px; overflow-x:auto; padding:6px; }
.kg-grid-wrap{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(11,37,69,.2); flex:0 0 auto; }
.kg-grid{ display:grid; }
.kg-cell{ display:grid; place-items:center; font-size:1.7rem; background:#B6E3A8; }
.kg-cell.alt{ background:#A9DC9A; }
.kg-flag{ animation:kg-wave 1.4s ease-in-out infinite; }
@keyframes kg-wave{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(8deg); } }
.kg-gem{ animation:kg-gem 1.6s ease-in-out infinite; transition:transform .3s, opacity .3s; }
@keyframes kg-gem{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.kg-gem.got{ transform:scale(0); opacity:0; }
.kg-robi{
  position:absolute; top:0; left:0; display:grid; place-items:center; font-size:2rem;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1); z-index:2; filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
}
.kg-robi.bump{ animation:kg-bump .4s; }
@keyframes kg-bump{ 0%,100%{ filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); } 25%{ transform:translate(var(--x,0)) scale(.8); } 50%{ transform:translate(var(--x,0)) scale(1.05); } }

.kg-prog{ min-height:46px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;
  background:#fff; border:2px dashed rgba(11,37,69,.18); border-radius:16px; padding:8px 12px; margin:0 auto; max-width:520px; }
.kg-prog-hint{ color:#8A97A8; font-weight:700; }
.kg-chip{ display:grid; place-items:center; width:38px; height:38px; border-radius:12px; font-size:1.25rem;
  background:linear-gradient(160deg,#9F7AEA,#6B46C1); color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.18); }

.kg-pad{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center; margin-top:14px; }
.kg-pad-arrows{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.kg-pad-row{ display:flex; gap:6px; }
.kg-arrow{ font:inherit; width:56px; height:56px; border-radius:16px; border:0; cursor:pointer; font-size:1.6rem;
  background:linear-gradient(160deg,#FFD36B,#F5A623); color:#5b3d00; box-shadow:0 4px 0 rgba(0,0,0,.2); }
.kg-arrow:hover:not(:disabled){ transform:translateY(-2px); }
.kg-arrow:disabled{ opacity:.4; cursor:default; }
.kg-arrow.tap{ animation:kg-tap .3s; }
@keyframes kg-tap{ 0%{ transform:scale(1); } 50%{ transform:scale(1.2); } 100%{ transform:scale(1); } }
.kg-pad-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }

/* ---------- PATTERN PARTY ---------- */
.kg-pat-strip{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin:18px 0; }
.kg-pat-item{ display:grid; place-items:center; width:60px; height:60px; font-size:2.1rem;
  background:#fff; border-radius:18px; box-shadow:0 5px 14px rgba(11,37,69,.12); }
.kg-pat-q{ background:#FFF3D6; color:#C77700; border:3px dashed #F5A623; animation:kg-pulse 1.3s ease-in-out infinite; }
@keyframes kg-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.kg-pat-filled{ background:#DFFCE9 !important; border-style:solid !important; border-color:var(--kg-green) !important; animation:kg-pop .5s; }
.kg-pat-opts{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:6px; }
.kg-pat-opt{ font:inherit; width:82px; height:82px; border-radius:22px; border:3px solid rgba(11,37,69,.08); cursor:pointer;
  font-size:2.6rem; background:#fff; box-shadow:0 6px 16px rgba(11,37,69,.14); transition:transform .12s; }
.kg-pat-opt:hover{ transform:translateY(-4px) scale(1.04); }
.kg-pat-opt.right{ background:#DFFCE9; border-color:var(--kg-green); animation:kg-pop .5s; }
.kg-pat-opt.wrong{ animation:kg-shake .4s; border-color:var(--kg-pattern); }
@keyframes kg-pop{ 0%{ transform:scale(.5); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
@keyframes kg-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(7px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(5px); } }
.kg-dots{ display:flex; gap:7px; justify-content:center; margin-top:20px; }
.kg-dot{ width:11px; height:11px; border-radius:50%; background:rgba(11,37,69,.16); }
.kg-dot.done{ background:var(--kg-green); }
.kg-dot.now{ background:var(--kg-pattern); transform:scale(1.35); }

/* ---------- MEMORY MATCH ---------- */
.kg-match-bar{ display:flex; justify-content:space-between; max-width:420px; margin:0 auto 12px; font-weight:800; color:var(--kg-ink); }
.kg-match-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:420px; margin:0 auto; }
.kg-card{ aspect-ratio:1/1; border:0; background:transparent; cursor:pointer; padding:0; perspective:700px; }
.kg-card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .4s; }
.kg-card.flip .kg-card-inner{ transform:rotateY(180deg); }
.kg-card-front,.kg-card-back{ position:absolute; inset:0; display:grid; place-items:center; border-radius:18px; backface-visibility:hidden; box-shadow:0 6px 14px rgba(11,37,69,.16); }
.kg-card-front{ background:linear-gradient(160deg,#38BDF8,#0E7490); color:#fff; font-size:2rem; font-weight:900; }
.kg-card-back{ background:#fff; font-size:2.4rem; transform:rotateY(180deg); }
.kg-card.matched .kg-card-inner{ animation:kg-matched .5s; }
.kg-card.matched .kg-card-back{ background:#DFFCE9; box-shadow:0 0 0 3px var(--kg-green); }
@keyframes kg-matched{ 0%,100%{ transform:rotateY(180deg) scale(1); } 50%{ transform:rotateY(180deg) scale(1.14); } }

/* ---------- CELEBRATION overlay + confetti ---------- */
.kg-celebrate{ position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(11,37,69,.55); backdrop-filter:blur(3px); overflow:hidden; animation:kg-fade .25s; }
@keyframes kg-fade{ from{ opacity:0; } to{ opacity:1; } }
.kg-cel-card{ background:#fff; border-radius:28px; padding:28px 26px; text-align:center; max-width:340px; width:86%;
  box-shadow:0 24px 60px rgba(0,0,0,.35); animation:kg-rise .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes kg-rise{ from{ transform:translateY(30px) scale(.9); opacity:0; } to{ transform:none; opacity:1; } }
.kg-cel-emoji{ font-size:4rem; animation:kg-bob 2s ease-in-out infinite; }
.kg-cel-card h3{ margin:6px 0 4px; font-size:1.5rem; color:var(--kg-ink); font-weight:900; }
.kg-cel-card p{ margin:0 0 8px; color:#5b6b7f; }
.kg-cel-stars{ font-size:2rem; }
.kg-star{ color:#e2e6ec; display:inline-block; }
.kg-star.lit{ color:var(--kg-yellow); animation:kg-star .5s backwards; }
@keyframes kg-star{ 0%{ transform:scale(0) rotate(-40deg); } 60%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.kg-cel-btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
.kg-confetti{ position:absolute; top:-14px; width:11px; height:15px; border-radius:2px; opacity:.95;
  animation:kg-fall 1.7s ease-in forwards; }
@keyframes kg-fall{ to{ transform:translateY(105vh) rotate(var(--rot,360deg)); opacity:0; } }

@media (max-width:520px){
  .kg-match-grid{ gap:9px; }
  .kg-pat-opt{ width:70px; height:70px; font-size:2.1rem; }
  .kg-hub-head h2{ font-size:1.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .kg-tile-art,.kg-flag,.kg-gem,.kg-pat-q,.kg-cel-emoji,.kg-confetti,.kg-star,.kg-robi{ animation:none !important; }
}