/* Superkids V1 -- core design (candy theme, chunky 3D buttons) */
:root {
  --grape: #6C5CE7; --grape-d: #5546c9;
  --pink: #FF6B9D;  --pink-d: #e2487c;
  --mint: #00B894;  --mint-d: #008f70;
  --sky: #0984E3;   --sky-d: #0768b3;
  --sun: #FDCB6E;   --sun-d: #e0a93c;
  --coral: #E17055; --coral-d: #c15336;
  --orange: #FF9F43;
  --ink: #2D2A45;
  --cloud: #F6F5FF;
  --font: 'Baloo 2', 'Comic Sans MS', 'Segoe UI Rounded', system-ui, sans-serif;
  --radius: 28px;
  --tap: 72px;               /* sabse chhota tap target */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(#7ec8ff, #c9ecff 55%, #eafbe9);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.sk-topbar, .sk-game-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  pointer-events: none;
}
.sk-topbar > *, .sk-game-bar > * { pointer-events: auto; }
.sk-logo { height: 52px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.12)); }
.sk-top-right { display: flex; align-items: center; gap: 10px; }

.sk-star-pill {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px; padding: 6px 18px 6px 12px;
  font-size: 28px; font-weight: 800;
  box-shadow: 0 5px 0 var(--sun-d), 0 8px 18px rgba(0,0,0,.12);
}
.sk-star-pill.bump { animation: sk-bump .5s cubic-bezier(.34,1.56,.64,1); }

.sk-round {
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; font-size: 30px; line-height: 1;
  box-shadow: 0 6px 0 #d8d4f0, 0 10px 18px rgba(0,0,0,.12);
  transition: transform .1s;
}
.sk-round.big { width: 72px; height: 72px; font-size: 38px; }
.sk-round:active { transform: translateY(5px); box-shadow: 0 1px 0 #d8d4f0; }

/* ---------- chunky candy button (games use karein) ---------- */
.sk-btn {
  --c: var(--grape); --d: var(--grape-d);
  min-width: var(--tap); min-height: var(--tap);
  padding: 14px 28px; border-radius: 999px;
  background: var(--c); color: #fff;
  font-size: 34px; font-weight: 800; line-height: 1;
  box-shadow: 0 8px 0 var(--d), 0 14px 24px rgba(0,0,0,.15);
  transition: transform .1s, box-shadow .1s;
}
.sk-btn:active { transform: translateY(7px); box-shadow: 0 1px 0 var(--d); }
.sk-btn.pink { --c: var(--pink); --d: var(--pink-d); }
.sk-btn.mint { --c: var(--mint); --d: var(--mint-d); }
.sk-btn.sky { --c: var(--sky); --d: var(--sky-d); }
.sk-btn.sun { --c: var(--sun); --d: var(--sun-d); color: var(--ink); }
.sk-btn.coral { --c: var(--coral); --d: var(--coral-d); }

/* chunky white card (games use karein) */
.sk-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(108,92,231,.18), 0 18px 30px rgba(0,0,0,.10);
}

/* sahi / galat feedback classes */
.sk-good { animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); outline: 6px solid var(--mint); }
.sk-bad  { animation: sk-shake .45s; }

/* ---------- home ---------- */
.sk-home { position: fixed; inset: 0; }
.sk-world { position: absolute; inset: 0; }
.sk-tiles {
  display: none;
  position: absolute; inset: 90px 0 0; overflow-y: auto;
  padding: 16px 16px 40px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px; align-content: start;
}
body.no-3d .sk-tiles { display: grid; }
body.no-3d .sk-world { display: none; }
.sk-tile {
  --c: var(--grape);
  aspect-ratio: 1; border-radius: 32px;
  background: var(--c); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 10px 0 rgba(0,0,0,.18), 0 16px 26px rgba(0,0,0,.15);
  animation: sk-rise .5s both cubic-bezier(.34,1.56,.64,1);
}
.sk-tile .e { font-size: 72px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(0,0,0,.15)); }
.sk-tile .t { font-size: 24px; font-weight: 800; }
.sk-tile:active { transform: translateY(8px) scale(.98); }

/* ---------- game screen ---------- */
.sk-game {
  --game-color: var(--grape);
  position: fixed; inset: 0; z-index: 10;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.55) 0 120px, transparent 121px),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,.35) 0 160px, transparent 161px),
    linear-gradient(160deg, color-mix(in srgb, var(--game-color) 30%, #fff), color-mix(in srgb, var(--game-color) 12%, #fff));
}
.sk-game-title {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 30px; font-weight: 800; color: #fff;
  background: var(--game-color); padding: 6px 22px; border-radius: 999px;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
}
.sk-game-title .e { font-size: 34px; }
.sk-game-root {
  position: absolute; top: 100px; left: 0; right: 0; bottom: 0;
  overflow: auto; padding: 8px 16px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.sk-oops { font-size: 120px; margin-top: 15vh; }

/* ---------- win popup ---------- */
.sk-win {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(45,42,69,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: sk-fade .25s;
}
.sk-win-card {
  position: relative;
  background: radial-gradient(circle at 50% 0, #fff8dc, #fff 60%); border-radius: 40px; padding: 20px 24px 28px;
  width: min(440px, 100%); max-height: 100%; overflow: hidden auto; text-align: center;
  box-shadow: 0 12px 0 var(--sun-d), 0 30px 60px rgba(0,0,0,.3);
  animation: sk-pop .5s cubic-bezier(.34,1.56,.64,1);
}
/* Supi "you did it" -- ghoomti kirnon ke beech tairta hua */
.sk-win-hero { position: relative; display: flex; justify-content: center; align-items: center; height: min(170px, 22vh); }
.sk-win-hero::before {
  content: ''; position: absolute; width: min(240px, 30vh); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(253,203,110,.55) 0 12deg, rgba(255,255,255,0) 12deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%);
  animation: sk-spin 12s linear infinite;
}
.sk-win-img {
  position: relative; height: 100%; width: auto; max-width: 80%;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.15));
  animation: sk-pop .6s .1s both cubic-bezier(.34,1.56,.64,1), sk-float-tilt 2.6s .7s ease-in-out infinite;
}
.sk-win-stars { display: flex; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.sk-win-star { font-size: 64px; filter: grayscale(1) opacity(.3); animation: sk-pop .5s both cubic-bezier(.34,1.56,.64,1); }
.sk-win-star.on { filter: drop-shadow(0 4px 0 rgba(224,169,60,.6)); }
.sk-win-star.fly { animation: sk-star-fly .6s both cubic-bezier(.34,1.56,.64,1); }
.sk-win-star.fly:nth-child(1) { --fx: -140px; }
.sk-win-star.fly:nth-child(2) { --fx: 0px; }
.sk-win-star.fly:nth-child(3) { --fx: 140px; }
.sk-win-btns { display: flex; justify-content: center; gap: 22px; }
.sk-win-btns .sk-btn { width: 110px; height: 96px; font-size: 48px; }
.sk-again { font-family: system-ui, sans-serif; font-size: 64px; font-weight: 900; display: inline-block; line-height: .8; }

/* ---------- confetti ---------- */
.sk-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.sk-confetti i {
  position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px;
  animation: sk-fall linear forwards;
}

/* ---------- animations ---------- */
@keyframes sk-fall { to { transform: translateY(108vh) rotate(720deg); } }
@keyframes sk-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes sk-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-14px); } 40% { transform: translateX(12px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(6px); } }
@keyframes sk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sk-rise { from { transform: translateY(30px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sk-fade { from { opacity: 0; } }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-float-tilt { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes sk-star-fly {
  0% { transform: translate(var(--fx, 0), -60vh) scale(.3) rotate(-200deg); opacity: 0; }
  70% { transform: translate(0, 6px) scale(1.25) rotate(10deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes sk-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

@media (max-width: 600px) {
  .sk-logo { height: 40px; }
  .sk-round { width: 54px; height: 54px; font-size: 26px; }
  .sk-round.big { width: 62px; height: 62px; font-size: 32px; }
  .sk-star-pill { font-size: 22px; padding: 4px 14px 4px 10px; }
  .sk-game-title { font-size: 22px; padding: 4px 14px; max-width: 40vw; }
  .sk-game-title span:last-child { display: none; }
  .sk-game-root { top: 86px; }
  .sk-win-star { font-size: 54px; }
  .sk-win-btns .sk-btn { width: 96px; height: 84px; font-size: 42px; }
}
@media (max-height: 700px) {
  .sk-win-card { padding: 14px 20px 22px; }
  .sk-win-star { font-size: 48px; }
  .sk-win-stars { margin: 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Fluent 3D icons (core.js iconify) -- button ke andar emoji ki jagah */
.sk-ico3d { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); -webkit-user-drag: none; }
.sk-round .sk-ico3d { width: 72%; height: 72%; }
.sk-win-btns .sk-ico3d { width: 64px; height: 64px; }

/* ---------- Fluent 3D emoji (js/fx-emoji.js) -- additive ---------- */
img.sk-fx {
  display: inline-block; width: 1.12em; height: 1.12em; object-fit: contain;
  vertical-align: -0.2em; pointer-events: none; -webkit-user-drag: none; user-select: none;
}

/* category ke andar: bada ◀ wapas button (core.js showHome) */
.sk-cat-back {
  --c: var(--grape);
  position: absolute; z-index: 25; left: 16px; top: calc(max(12px, env(safe-area-inset-top)) + 76px);
  display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px 22px 8px 10px;
  border-radius: 999px; background: #fff; color: var(--ink); font-size: 26px; font-weight: 800;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 55%, #000 10%), 0 12px 22px rgba(0,0,0,.15);
  animation: sk-pop .4s cubic-bezier(.34,1.56,.64,1);
}
.sk-cat-back:active { transform: translateY(6px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 55%, #000 10%); }
.sk-cat-arrow { width: 56px; height: 56px; border-radius: 50%; background: var(--c); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-family: system-ui, sans-serif; }
.sk-cat-name { display: flex; align-items: center; gap: 6px; }
.sk-cat-name .e { font-size: 30px; }
@media (max-width: 600px) {
  /* phone: upar profile-chip se takrata tha -> neeche beech me (angoothe ke paas) */
  .sk-cat-back { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4px); left: 50%; transform: translateX(-50%); font-size: 20px; min-height: 64px; }
  .sk-cat-back:active { transform: translateX(-50%) translateY(6px); }
  .sk-cat-arrow { width: 48px; height: 48px; }
}

/* game ka code aa raha hai (js/lazy.js) */
.sk-loading { margin-top: 18vh; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sk-loading span { font-size: 96px; animation: sk-float 1.2s ease-in-out infinite; }
.sk-loading i { width: 54px; height: 54px; border-radius: 50%; border: 7px solid rgba(255,255,255,.7); border-top-color: var(--game-color, #6C5CE7);
  animation: sk-spin .8s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* sirf screen reader / search engine ke liye (dikhta nahi) -- index.html #sk-about */
.sk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }