/* Superkids V1 -- "Pictures" (learn) */
.learn-wrap {
  --c: #FF9F43;
  width: 100%; flex: 1 0 auto; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; position: relative;
}

/* ---------- speaker button ---------- */
.learn-say {
  width: 84px; height: 84px; border-radius: 50%;
  background: #fff; font-size: 42px; line-height: 1;
  box-shadow: 0 7px 0 #d8d4f0, 0 12px 22px rgba(0,0,0,.14);
  transition: transform .1s, box-shadow .1s;
  animation: learn-pulse 2.2s ease-in-out infinite;
}
.learn-say:active { transform: translateY(6px); box-shadow: 0 1px 0 #d8d4f0; animation: none; }

/* ---------- step 1: group bubbles ---------- */
.learn-head { display: flex; align-items: center; gap: 14px; }
.learn-hint { font-size: 54px; animation: sk-float 1.6s ease-in-out infinite; }

.learn-groups {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; width: min(760px, 100%);
  perspective: 900px;
}
.learn-bubble {
  --c: #FF9F43;
  position: relative; aspect-ratio: 1; min-height: 72px;
  border-radius: 38% 42% 40% 44% / 44% 40% 42% 38%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.55) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 70%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--c) 70%, #000), 0 18px 26px rgba(0,0,0,.16);
  transform-style: preserve-3d;
  animation: learn-bubble-in .55s both cubic-bezier(.34,1.56,.64,1);
  transition: transform .12s, box-shadow .12s;
}
.learn-bubble:nth-child(odd)  .learn-bubble-e { animation-delay: .4s; }
.learn-bubble:hover { transform: translateY(-4px) rotateX(8deg) rotateY(-6deg); }
.learn-bubble:active { transform: translateY(9px) scale(.97); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 70%, #000); }
.learn-bubble-e {
  font-size: clamp(54px, 9vw, 92px); line-height: 1.05;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.15));
  animation: sk-float 2.4s ease-in-out infinite;
}
.learn-bubble-t {
  font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.learn-bubble.learn-chosen { animation: learn-chosen .45s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- step 2: flashcard ---------- */
.learn-cardmode { gap: 16px; justify-content: space-evenly; }
.learn-stage {
  --size: min(calc(100vw - 48px), 440px, calc(100vh - 100px - 290px));
  position: relative; width: var(--size); height: var(--size);
  min-width: 220px; min-height: 220px;
  perspective: 1100px;
  touch-action: pan-y;
}
.learn-cardbox { width: 100%; height: 100%; transform-style: preserve-3d; cursor: pointer; }
.learn-card {
  position: relative; width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden;
  background: #fff; border: 10px solid #fff;
  box-shadow:
    0 12px 0 color-mix(in srgb, var(--c) 75%, #000),
    0 26px 40px rgba(0,0,0,.20);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.learn-in-next { animation: learn-flip-next .7s cubic-bezier(.34,1.4,.64,1) both, learn-tilt 5s ease-in-out .7s infinite; }
.learn-in-prev { animation: learn-flip-prev .7s cubic-bezier(.34,1.4,.64,1) both, learn-tilt 5s ease-in-out .7s infinite; }
.learn-card.learn-wiggle { animation: learn-tap .6s cubic-bezier(.34,1.56,.64,1); }
.learn-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 26px; pointer-events: none;
}
.learn-fallback {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center; font-size: 150px;
  background: color-mix(in srgb, var(--c) 20%, #fff);
}
.learn-noimg .learn-photo { display: none; }
.learn-noimg .learn-fallback { display: flex; }
.learn-shine {
  position: absolute; inset: 0; pointer-events: none; border-radius: 26px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
  animation: learn-shine 1.1s .35s ease-out both;
}
.learn-say-badge {
  position: absolute; top: -18px; right: -18px; z-index: 3;
  width: 76px; height: 76px; font-size: 36px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #000), 0 10px 18px rgba(0,0,0,.18);
}
.learn-say-badge:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 60%, #000); }

.learn-word {
  font-size: clamp(48px, 9vw, 76px); font-weight: 800; line-height: 1;
  color: var(--ink, #2D2A45); letter-spacing: 1px;
  background: #fff; padding: 10px 34px 6px; border-radius: 999px;
  box-shadow: 0 7px 0 rgba(0,0,0,.10), 0 12px 20px rgba(0,0,0,.08);
  max-width: 100%; white-space: nowrap;
}
.learn-first { color: var(--c); font-size: 1.18em; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.learn-word-pop { animation: learn-word-in .55s .15s both cubic-bezier(.34,1.56,.64,1); }

.learn-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: min(var(--navw, 520px), 100%);
}
.learn-arrow {
  width: 92px; height: 84px; border-radius: 30px; flex: none;
  background: var(--c); color: #fff; font-size: 40px; line-height: 1;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 70%, #000), 0 14px 22px rgba(0,0,0,.15);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.learn-arrow:active { transform: translateY(7px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 70%, #000); }
.learn-arrow.learn-hide { opacity: 0; pointer-events: none; }
.learn-arrow.learn-finish {
  background: #FDCB6E; font-size: 46px;
  box-shadow: 0 8px 0 #e0a93c, 0 14px 22px rgba(0,0,0,.15);
  animation: learn-pulse 1.1s ease-in-out infinite;
}
.learn-dots { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.learn-dots i {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.85); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.learn-dots i.done { background: color-mix(in srgb, var(--c) 55%, #fff); }
.learn-dots i.on { background: var(--c); transform: scale(1.5); box-shadow: 0 3px 0 rgba(0,0,0,.18); }

/* ---------- animations ---------- */
@keyframes learn-bubble-in { from { transform: translateY(40px) scale(.5) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes learn-chosen { 0% { transform: scale(1); } 50% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1.08); } }
@keyframes learn-flip-next { 0% { transform: rotateY(-95deg) translateX(30%) scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes learn-flip-prev { 0% { transform: rotateY(95deg) translateX(-30%) scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes learn-tilt { 0%,100% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(3deg) rotateY(-5deg); } 75% { transform: rotateX(-2deg) rotateY(5deg); } }
@keyframes learn-tap { 0% { transform: scale(1); } 20% { transform: scale(.92) rotate(-5deg); } 50% { transform: scale(1.06) rotate(5deg); } 75% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes learn-shine { to { background-position: -120% 0; } }
@keyframes learn-word-in { from { transform: translateY(20px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes learn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- phone ---------- */
@media (max-width: 600px) {
  .learn-groups { grid-template-columns: repeat(2, 1fr); gap: 18px; width: min(340px, 100%); }
  .learn-head { margin-top: 4px; }
  .learn-say { width: 76px; height: 76px; font-size: 36px; }
  .learn-hint { font-size: 44px; }
  .learn-stage { --size: min(calc(100vw - 48px), calc(100vh - 86px - 270px)); }
  .learn-word { padding: 8px 26px 4px; }
  .learn-arrow { width: 84px; height: 78px; }
}
/* short landscape screens (laptop): make bubbles fit in height */
@media (min-width: 601px) and (max-height: 820px) {
  .learn-groups { width: min(calc((100vh - 290px) * 1.5 + 44px), 760px); }
}