/* Superkids V1 -- 3D home world (canvas + floating HTML labels).
   Sky, sun, rainbow aur cloud sea ab WebGL shader me hain; yeh gradient sirf fallback/pehle frame ke liye. */
.sk-world.w3-stage {
  --sky-1: #2a7fea; --sky-2: #7cc5f4; --sky-3: #c9e6f6; --sky-4: #ffcfc0;
  overflow: hidden;
  touch-action: none;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 70%, var(--sky-4) 100%);
}
.sk-world.tod-morning { --sky-1: #3d8fec; --sky-2: #93d0f6; --sky-3: #d6e8f6; --sky-4: #ffc9cc; }
.sk-world.tod-evening { --sky-1: #4a6cd6; --sky-2: #a9a2ec; --sky-3: #d9c0ee; --sky-4: #ffb8a0; }
.sk-world.tod-dusk    { --sky-1: #4549b4; --sky-2: #8e7cdc; --sky-3: #c2b4ec; --sky-4: #f2b6da; }
/* halka vignette: kinare thode gehre-lilac, nazar beech par (canvas ke upar, labels ke neeche) */
.sk-world.w3-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 52%, rgba(40,20,90,0) 58%, rgba(52,30,110,.16) 88%, rgba(52,30,110,.28) 100%),
    linear-gradient(180deg, rgba(20,40,120,.10) 0%, rgba(20,40,120,0) 18%);
}

.w3-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; outline: none;
}
.sk-world.w3-dragging { cursor: grabbing !important; }

.w3-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* ---------- island label: glossy emoji bubble + gradient pill + leader ---------- */
.w3-label {
  --c: #6C5CE7;
  --bs: clamp(44px, 6.6vmin, 72px);          /* phone ~44px, laptop ~51px, bada desktop ~71px */
  --stem: 0px;
  --d: 0s;
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit;
  pointer-events: auto; cursor: pointer;
  transform-origin: 50% 100%;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.w3-bubble, .w3-title { animation: w3-bob 2.8s ease-in-out infinite; animation-delay: var(--d); }
.w3-bubble {
  width: var(--bs); height: var(--bs); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* glossy 3D gend: upar safed chamak, neeche halka rang (game ka), andar ki chhaaya */
  background:
    radial-gradient(ellipse 58% 34% at 50% 22%, rgba(255,255,255,.95) 0 40%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 38%, #ffffff 0 46%, color-mix(in srgb, var(--c) 14%, #fff) 74%, color-mix(in srgb, var(--c) 34%, #fff) 100%);
  border: calc(var(--bs) * .06) solid #fff;
  box-shadow:
    0 0 0 calc(var(--bs) * .07) var(--c),
    0 calc(var(--bs) * .07) 0 calc(var(--bs) * .07) color-mix(in srgb, var(--c) 72%, #1a1040),
    0 calc(var(--bs) * .2) calc(var(--bs) * .3) rgba(38,28,92,.34),
    inset 0 calc(var(--bs) * -.08) calc(var(--bs) * .1) color-mix(in srgb, var(--c) 22%, transparent);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  position: relative; z-index: 1;
}
/* chhoti chamak ki bindi (sticker jaisa gloss) */
.w3-bubble::before {
  content: ''; position: absolute; left: 20%; top: 12%; width: 22%; height: 13%;
  border-radius: 50%; background: rgba(255,255,255,.9); transform: rotate(-28deg);
  pointer-events: none; z-index: 2;
}
.w3-emoji { font-size: calc(var(--bs) * .56); line-height: 1; filter: drop-shadow(0 calc(var(--bs) * .035) calc(var(--bs) * .02) rgba(40,30,90,.22)); position: relative; z-index: 1; }
.w3-title {
  margin-top: calc(var(--bs) * -.06);
  position: relative; z-index: 2;
  font-size: clamp(13px, 2.3vmin, 26px); font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: .3px;
  padding: .12em .8em .2em; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.14) 46%, rgba(255,255,255,0) 52%, rgba(0,0,0,.1) 100%),
    var(--c);
  border: clamp(2.5px, .32vmin, 3.5px) solid #fff;
  box-shadow:
    0 .2em 0 color-mix(in srgb, var(--c) 70%, #1a1040),
    0 .38em .7em rgba(38,28,92,.32),
    inset 0 -.12em 0 rgba(0,0,0,.12);
  white-space: nowrap;
  text-shadow: 0 .08em 0 rgba(0,0,0,.28);
}
/* leader: chhota teer + line (nudge hone par lambi) + bindu landmark par */
.w3-tail {
  position: relative;
  width: 3px; height: calc(8px + var(--stem));
  background: #fff;
  box-shadow: 0 0 0 1px rgba(38,28,92,.12);
  border-radius: 2px;
  margin-top: -1px;
}
.w3-tail::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid #fff;
}
.w3-tail::after {
  content: ''; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px #fff;
}
.w3-label.is-hover .w3-bubble, .w3-label:hover .w3-bubble {
  transform: scale(1.12) translateY(-3px);
  box-shadow:
    0 0 0 calc(var(--bs) * .07) var(--c),
    0 calc(var(--bs) * .07) 0 calc(var(--bs) * .07) color-mix(in srgb, var(--c) 72%, #1a1040),
    0 0 0 calc(var(--bs) * .17) rgba(255,244,176,.9),
    0 0 calc(var(--bs) * .45) calc(var(--bs) * .12) rgba(255,236,150,.55),
    0 calc(var(--bs) * .2) calc(var(--bs) * .32) rgba(38,28,92,.34);
}
.w3-label.is-hover .w3-title, .w3-label:hover .w3-title { transform: scale(1.06); }
.w3-title { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.w3-label:focus-visible .w3-bubble { outline: 4px solid #fff; outline-offset: 4px; }
.w3-label.w3-pop .w3-bubble { animation: w3-pop .6s cubic-bezier(.34,1.56,.64,1); }
.w3-label.w3-pop .w3-bubble::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 4px solid var(--c); pointer-events: none;
  animation: w3-ring .6s ease-out forwards;
}

.w3-small .w3-title { border-width: 2px; padding: 1px .65em 2px; }

/* ---------- Supi speech bubble ---------- */
.w3-say { position: absolute; left: 0; top: 0; z-index: 95; pointer-events: none; }
.w3-say-b {
  position: absolute; left: 0; bottom: 12px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f3ff 100%); color: #3b3768;
  border: 3px solid #7c6cf0; border-radius: 20px;
  font-size: clamp(14px, 2.1vmin, 20px); font-weight: 800; line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 5px 0 rgba(124,108,240,.25), 0 10px 22px rgba(30,40,90,.18);
  opacity: 0;
  transform: translateX(-50%) scale(.4);
  transform-origin: 50% 100%;
  transition: opacity .2s, transform .2s;
}
.w3-say-b::after {
  content: ''; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 10px solid #7c6cf0;
}
.w3-say.w3-say-on .w3-say-b { opacity: 1; transform: translateX(-50%) scale(1); transition: opacity .15s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.w3-say-e { font-size: 1.5em; line-height: 1; }

/* hint haath */
.w3-hint {
  position: absolute; left: 0; top: 0; z-index: 90; pointer-events: none;
  transition: opacity .6s;
}
.w3-hint span {
  display: block; font-size: 60px; line-height: 1;
  transform: translate(-30%, 10%);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
  animation: w3-tap 1.1s ease-in-out infinite;
}
.w3-small .w3-hint span { font-size: 48px; }
.w3-hint.w3-gone { opacity: 0; }

@keyframes w3-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes w3-tap {
  0%, 100% { transform: translate(-30%, 22%) scale(1); }
  45% { transform: translate(-30%, -4%) scale(.9); }
  55% { transform: translate(-30%, -4%) scale(.9); }
}
@keyframes w3-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35, .8); }
  55% { transform: scale(.9, 1.15); }
  100% { transform: scale(1); }
}
@keyframes w3-ring {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .w3-hint span, .w3-label.w3-pop .w3-bubble, .w3-bubble, .w3-title { animation: none; }
}

/* phone par bahut islands: "neeche aur hain" ishaara (scroll) */
.w3-more {
  position: absolute; left: 50%; bottom: 14px; z-index: 5;
  width: 46px; height: 46px; margin-left: -23px; padding: 0;
  border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(180deg, #9d8cff, #6c5ce7);
  color: #fff; font-size: 30px; font-weight: 900; line-height: 1;
  box-shadow: 0 6px 14px rgba(38,28,92,.32);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.w3-more span { display: block; margin-top: -12px; animation: w3-more 1.2s ease-in-out infinite; }
.w3-more.w3-on { opacity: 1; pointer-events: auto; transform: none; }
@keyframes w3-more { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) { .w3-more span { animation: none; } }