/* Superkids V1 -- "Find It" (findit) */
.findit-wrap {
  width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}

/* ---------- top: ask button + star progress ---------- */
.findit-top {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; width: 100%;
}
.findit-ask {
  display: flex; align-items: center; gap: 6px;
  height: 84px; min-width: 150px; padding: 0 24px; border-radius: 999px;
  background: #6C5CE7; color: #fff; font-size: 44px; line-height: 1;
  box-shadow: 0 8px 0 #5546c9, 0 14px 24px rgba(0,0,0,.16);
  transition: transform .1s, box-shadow .1s;
  animation: findit-breathe 2.2s ease-in-out infinite;
}
.findit-ask:active { transform: translateY(7px); box-shadow: 0 1px 0 #5546c9; animation: none; }
.findit-ask.findit-bounce { animation: sk-wiggle .5s; }
.findit-ear { animation: sk-wiggle 1.2s ease-in-out infinite; display: inline-block; }

.findit-bar {
  display: flex; gap: 4px; align-items: center;
  background: #fff; border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 6px 0 rgba(108,92,231,.22), 0 10px 18px rgba(0,0,0,.08);
}
.findit-star {
  font-size: 34px; line-height: 1;
  filter: grayscale(1) opacity(.28);
  transition: filter .3s;
}
.findit-star.on { filter: none; animation: findit-star-on .6s cubic-bezier(.34,1.56,.64,1); }

/* ---------- choices ---------- */
.findit-grid {
  flex: 1 1 auto; min-height: 0; width: min(100%, 460px);
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  perspective: 1000px;
  padding-bottom: 12px;
}
.findit-card {
  position: relative; min-height: 72px; min-width: 72px; padding: 0;
  border-radius: 30px; background: #fff; border: 8px solid #fff;
  box-shadow: 0 10px 0 rgba(108,92,231,.30), 0 18px 28px rgba(0,0,0,.14);
  transform-style: preserve-3d;
  transition: transform .14s, box-shadow .14s, filter .3s, opacity .3s;
  overflow: visible;
}
.findit-card.findit-in { animation: findit-flip-in .6s both cubic-bezier(.34,1.45,.64,1); }
.findit-card:hover { transform: translateY(-4px) rotateX(6deg); }
.findit-card:active { transform: translateY(8px) rotateX(10deg) scale(.98); box-shadow: 0 2px 0 rgba(108,92,231,.30), 0 6px 10px rgba(0,0,0,.12); }
.findit-photo {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: 22px; pointer-events: none;
}
.findit-fallback {
  display: none; position: absolute; inset: 0; border-radius: 22px;
  align-items: center; justify-content: center; font-size: 96px; background: #F6F5FF;
}
.findit-noimg .findit-photo { display: none; }
.findit-noimg .findit-fallback { display: flex; }

/* feedback */
.findit-card.sk-bad { animation: sk-shake .45s; }
.findit-card.findit-dim { filter: grayscale(.45); opacity: .7; transform: scale(.96); }
.findit-card.sk-good {
  animation: findit-win .7s cubic-bezier(.34,1.56,.64,1) both;
  outline: none; border-color: #00B894;
  box-shadow: 0 10px 0 #008f70, 0 0 0 8px rgba(0,184,148,.25), 0 22px 34px rgba(0,0,0,.18);
  z-index: 2;
}
.findit-solved .findit-card:not(.findit-right) { opacity: .25; transform: scale(.9); filter: grayscale(.8); }
.findit-solved .findit-card { pointer-events: none; }

.findit-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.findit-burst span {
  position: absolute; left: -20px; top: -20px; font-size: 40px; line-height: 1;
  animation: findit-burst .9s cubic-bezier(.2,.8,.3,1) both;
}

/* ---------- landscape / wide screens: one row ---------- */
@media (orientation: landscape) {
  .findit-wrap { justify-content: center; }
  .findit-grid {
    --s: min(300px, calc((100vw - 140px) / 4), calc(100vh - 100px - 150px));
    flex: none; width: auto;
    grid-template-rows: var(--s);
    grid-template-columns: repeat(3, var(--s));
    gap: 26px;
  }
  .findit-grid.findit-n4 { grid-template-columns: repeat(4, var(--s)); }
}

/* ---------- animations ---------- */
@keyframes findit-flip-in {
  from { transform: rotateX(-80deg) translateY(40px) scale(.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes findit-win {
  0% { transform: scale(1); }
  40% { transform: scale(1.1) rotateY(12deg); }
  70% { transform: scale(1.02) rotateY(-6deg); }
  100% { transform: scale(1.05); }
}
@keyframes findit-burst {
  0% { transform: translate(0, 0) scale(.3); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1.1) rotate(200deg); opacity: 0; }
}
@keyframes findit-star-on { 0% { transform: scale(.3) rotate(-90deg); } 60% { transform: scale(1.6) rotate(15deg); } 100% { transform: none; } }
@keyframes findit-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (max-width: 600px) {
  .findit-wrap { gap: 14px; }
  .findit-top { gap: 10px; }
  .findit-ask { height: 76px; min-width: 120px; font-size: 38px; padding: 0 18px; }
  .findit-star { font-size: 28px; }
  .findit-bar { padding: 6px 12px; gap: 2px; }
  .findit-grid { gap: 16px; }
}