.welcome-lion {
  position: fixed;
  z-index: 5;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: clamp(315px, 31.5vw, 465px);
  pointer-events: none;
}

.welcome-lion[hidden] { display: none; }
.welcome-lion__canvas { display: block; width: 100%; aspect-ratio: 1; }
.welcome-lion__bubble {
  position: absolute;
  right: 12px;
  bottom: calc(100% - 6px);
  padding: 16.5px 22.5px;
  border: 3px solid var(--color-green);
  border-radius: 27px;
  color: var(--color-green-deep);
  background: #fffefb;
  box-shadow: 0 7.5px 22.5px #74512114;
  font-size: clamp(22.5px, 2.1vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
}
.welcome-lion__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 18px;
  height: 18px;
  border-right: 3px solid var(--color-green);
  border-bottom: 3px solid var(--color-green);
  background: #fffefb;
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 641px) and (max-height: 800px) {
  .welcome-lion { width: clamp(255px, 37.5vh, 315px); }
  .welcome-lion__bubble { padding: 12px 18px; font-size: 22.5px; }
}

@media (max-width: 640px) {
  body.level-page { padding-bottom: 350px; }
  .level-selector { margin-top: 1rem; }
  .level-selector h1 { font-size: 3.4rem; }
  .level-selector__choices { margin-top: 2rem; }
  .level-choice { aspect-ratio: 2.6; padding: 1rem; }
  .level-choice__level, .level-choice--cm1 .level-choice__level { font-size: 3.6rem; }
  .welcome-lion { width: min(285px, 48svh, calc(100vw - 16px)); right: max(8px, env(safe-area-inset-right)); }
  .welcome-lion__bubble { padding: 13.5px 18px; font-size: 22.5px; right: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-lion { transition: none; }
}

@media (max-width: 640px) and (max-height: 620px) {
  .level-selector__choices { margin-top: 1.5rem; }
  .level-choice { aspect-ratio: 3.1; }
}