/* Superkids V1 -- "Colors" (tap-to-fill colouring) */

/* ---------- picture picker ---------- */
.color-pick {
  width: 100%; flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.color-pick-head { display: flex; align-items: center; gap: 16px; }
.color-pick-title { font-size: 64px; line-height: 1; animation: sk-wiggle 2.2s ease-in-out infinite; }
.color-say {
  width: 80px; height: 80px; border-radius: 50%;
  background: #fff; font-size: 40px; line-height: 1;
  box-shadow: 0 7px 0 var(--sun-d), 0 12px 22px rgba(0,0,0,.14);
  transition: transform .1s, box-shadow .1s;
}
.color-say:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--sun-d); }
.color-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 420px);
}
.color-thumb {
  aspect-ratio: 1; padding: 10px; border-radius: 30px;
  animation: sk-rise .5s both cubic-bezier(.34,1.56,.64,1);
  transition: transform .12s;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--mint) 45%, #fff), 0 16px 26px rgba(0,0,0,.12);
}
.color-thumb:hover { transform: translateY(-4px) rotate(-1.5deg); }
.color-thumb:active { transform: translateY(6px) scale(.97); }
.color-thumb-svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.color-thumb-svg .color-r { stroke-width: 6; }

@media (orientation: landscape) and (min-width: 700px) {
  .color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, calc((100vh - 280px) * 1.62), 760px);
  }
}

/* ---------- painting screen ---------- */
.color-play {
  width: 100%; flex: 1 1 auto; min-height: 0; height: 100%;
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "tools" "pic" "pal";
}
.color-tools {
  grid-area: tools;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding-bottom: 6px;
}
.color-tool {
  width: var(--tap); height: var(--tap); padding: 0; border-radius: 24px;
  font-size: 34px; display: inline-flex; align-items: center; justify-content: center;
}
.color-tool.color-off { opacity: .45; }
.color-done { animation: color-pulse 1.3s ease-in-out infinite; }
.color-done.color-appear { animation: sk-pop .5s cubic-bezier(.34,1.56,.64,1), color-pulse 1.3s .5s ease-in-out infinite; }

.color-pic {
  grid-area: pic; min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  container-type: size;
}
.color-paper {
  width: 100%; aspect-ratio: 1;
  width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  padding: 2.5%; border-radius: 34px; position: relative; overflow: hidden;
  box-shadow: 0 9px 0 color-mix(in srgb, var(--sel, #6C5CE7) 55%, #fff), 0 20px 34px rgba(0,0,0,.14);
  transition: box-shadow .25s;
  animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.color-svg { width: 100%; height: 100%; display: block; touch-action: manipulation; overflow: visible; }
.color-svg .color-r { cursor: pointer; transition: fill .18s; transform-box: fill-box; transform-origin: center; }
.color-svg .color-d { pointer-events: none; }
.color-svg .color-fx { pointer-events: none; }
.color-r.color-pop { animation: color-pop .4s cubic-bezier(.34,1.56,.64,1); }
.color-ring { animation: color-ring .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.color-drop { animation: color-drop .55s cubic-bezier(.2,.8,.3,1) forwards; }

/* whoosh wipe for clear */
.color-paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0 30%, rgba(255,255,255,.95) 45% 55%, transparent 70%);
  transform: translateX(-120%);
}
.color-paper.color-whoosh { animation: color-tilt .55s ease-in-out; }
.color-paper.color-whoosh::after { animation: color-wipe .55s ease-in-out; }
.color-paper.color-proud { animation: color-proud .9s cubic-bezier(.34,1.56,.64,1); }

/* palette */
.color-pal {
  grid-area: pal;
  display: flex; gap: 14px; align-items: center;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  padding: 16px 12px 14px; margin: 0 -16px;
  scrollbar-width: none;
  background: rgba(255,255,255,.55); border-radius: 30px 30px 0 0;
}
.color-pal::-webkit-scrollbar { display: none; }
.color-blob {
  --c: #FF4757;
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 12%, rgba(255,255,255,0) 13%),
    radial-gradient(circle at 50% 60%, var(--c) 0 60%, color-mix(in srgb, var(--c) 78%, #000) 100%);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.16), 0 6px 0 rgba(0,0,0,.14);
  border: 4px solid #fff;
  font-size: 36px; line-height: 1;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.color-blob.color-white { border-color: #e6e3f7; }
.color-blob.color-rainbow {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 12%, rgba(255,255,255,0) 13%),
    conic-gradient(#FF4757, #FF9F43, #FECA57, #2ED573, #48DBFB, #1E6FFF, #A55EEA, #FF6B9D, #FF4757);
  --c: #A55EEA;
}
.color-blob.on {
  transform: translateY(-8px) scale(1.14);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.16), 0 0 0 5px #fff, 0 0 0 9px var(--c), 0 10px 22px color-mix(in srgb, var(--c) 70%, transparent);
}
.color-blob.on.color-boing { animation: color-boing .45s cubic-bezier(.34,1.56,.64,1); }

/* desktop / landscape: palette as a side column, tools on the other side */
@media (orientation: landscape) and (min-width: 700px) {
  .color-play {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "pal pic tools";
    gap: 18px;
  }
  .color-tools { flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 0 4px; }
  .color-pal {
    display: grid; grid-template-columns: repeat(2, 68px); gap: 14px 16px;
    align-content: center; justify-content: center;
    overflow-x: hidden; overflow-y: auto; margin: 0; padding: 18px 16px;
    border-radius: 34px; align-self: center; max-height: 100%;
  }
}
@media (max-width: 380px) {
  .color-tool { width: 64px; height: 64px; font-size: 30px; }
  .color-tools { gap: 8px; }
}

/* ---------- keyframes ---------- */
@keyframes color-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes color-ring { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes color-drop { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@keyframes color-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes color-boing { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.24); } 100% { transform: translateY(-8px) scale(1.14); } }
@keyframes color-wipe { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes color-tilt { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-3deg) scale(.97); } 65% { transform: rotate(2deg); } }
@keyframes color-proud { 0% { transform: scale(1); } 40% { transform: scale(1.06) rotate(-2deg); } 100% { transform: scale(1); } }

/* 🖼️ Art Studio button (Laravel Kid Mode ki asli coloring galleries) -- picker ke upar wali line me */
.color-studio {
  min-height: 72px; padding: 0 22px 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; color: #fff;
  background: linear-gradient(120deg, #FFD43B, #FF922B 55%, #F06595);
  box-shadow: 0 7px 0 #c9562f, 0 12px 20px rgba(0,0,0,.14), inset 0 4px 0 rgba(255,255,255,.3);
  transition: transform .1s, box-shadow .1s;
  animation: color-studio-wiggle 3.2s ease-in-out 1.5s infinite;
}
.color-studio:active { transform: translateY(6px); box-shadow: 0 1px 0 #c9562f; }
.color-studio .e { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(0,0,0,.15)); }
.color-studio .t { font-size: 24px; font-weight: 800; text-shadow: 0 3px 0 rgba(0,0,0,.15); white-space: nowrap; }
@keyframes color-studio-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-5deg) scale(1.05); } 95% { transform: rotate(5deg) scale(1.05); } }
@media (max-width: 420px) { .color-studio .t { font-size: 20px; } }
@media (max-width: 420px) {
  .color-pick-head { gap: 10px; }
  .color-studio { padding: 0 14px 0 10px; gap: 6px; }
  .color-studio .e { font-size: 32px; }
  .color-studio .t { font-size: 18px; }
}