/* LearnIt's identity, from its icon and in-game screens: the site's pastel base with
   sparkles, a violet sticker for the name, gold and mint like its captions and answers. */

.li {
  --li-violet: #7c6cff;
  --li-violet-lip: #5a48e0;
  --li-gold: #ffc94d;
  --li-gold-lip: #e8a92a;
  --li-mint: #6fcf97;
  --li-mint-lip: #3fa56b;
  --li-pink: #ff8fb8;
  --li-cyan: #3fc7e0;
  --accent: var(--li-mint);
  --accent-lip: var(--li-mint-lip);
}

/* Four-point sparkles, like the game's background, twinkling in turn. */
.sparkles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sparkles i {
  position: absolute;
  width: 22px; height: 22px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0.8;
  animation: twinkle 3.6s ease-in-out infinite;
}
.sparkles i:nth-child(1) { left: 8%; top: 18%; }
.sparkles i:nth-child(2) { left: 86%; top: 12%; width: 30px; height: 30px; background: var(--li-gold); animation-delay: -0.9s; }
.sparkles i:nth-child(3) { left: 78%; top: 62%; animation-delay: -1.8s; }
.sparkles i:nth-child(4) { left: 14%; top: 72%; width: 16px; height: 16px; background: var(--li-pink); animation-delay: -2.7s; }
.sparkles i:nth-child(5) { left: 48%; top: 6%; width: 14px; height: 14px; animation-delay: -1.3s; }
@keyframes twinkle {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.35; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 0.9; }
}

.li .home { text-decoration: none; font-weight: 600; }

.li .hero { text-align: center; padding: 20px 0 36px; }
.li .icon { width: 120px; height: 120px; border-radius: 30px; box-shadow: 0 8px 0 rgba(59, 43, 94, 0.15); }

/* The name on a tilted violet sticker, the way the game's ads caption a moment. */
.sticker {
  display: inline-block;
  margin: 22px 0 18px;
  padding: 10px 34px 14px;
  border-radius: 26px;
  font-size: clamp(2.4rem, 10vw, 3.8rem);
  color: #fff;
  background: var(--li-violet);
  box-shadow: 0 8px 0 var(--li-violet-lip);
  transform: rotate(-2deg);
  animation: stick 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.5) both;
}
@keyframes stick {
  from { opacity: 0; transform: rotate(-12deg) scale(0.6); }
  to { opacity: 1; transform: rotate(-2deg); }
}

.li .tagline { font-size: clamp(1.05rem, 3.6vw, 1.3rem); color: var(--ink-soft); max-width: 26em; margin: 0 auto 26px; }
.li .button { font-size: 1.15rem; padding: 16px 32px; }
.li .note { margin: 14px 0 0; color: var(--ink-soft); font-size: 0.95rem; }

/* The ad running on a phone, beside what the game is. */
.show { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.phone {
  position: relative;
  justify-self: center;
  width: min(100%, 280px);
  padding: 10px;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 10px 0 var(--lip), 0 30px 60px rgba(90, 70, 160, 0.22);
}
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 30px; background: #f1d8ff; }
.sound {
  position: absolute; right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 0 var(--lip);
}

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fact { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; }
.fact h2 { font-size: 1.2rem; margin: 0 0 4px; }
.fact p { margin: 0; color: var(--ink-soft); }
.dot {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.3rem;
  background: var(--c);
  box-shadow: 0 4px 0 rgba(59, 43, 94, 0.12);
}

.credits { margin: 36px auto 0; max-width: 40em; text-align: center; font-size: 0.85rem; color: var(--ink-soft); }

@media (max-width: 680px) {
  .show { grid-template-columns: 1fr; gap: 28px; }
}