<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  <title>Исследуй Планету</title>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: { nunito: ['Nunito', 'sans-serif'] },
        }
      }
    }
  </script>
  <style>
    @page { size: A4; margin: 0; }
  </style>
</head>
<body class="bg-gray-200 font-nunito">

  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">

    <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
      <img src="../../assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
    </div>

    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
      </div>
    </div>

    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">

      <div class="flex items-center gap-4 mb-4 flex-row-reverse">
        <img src="../../assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
        <div class="flex-1 flex flex-col items-center justify-center text-center">
          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">

        <div class="flex justify-start">
          <div class="flex items-center gap-1">
            <img src="../../assets/icons/pack2/elem3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
            </div>
          </div>
        </div>

        <div class="flex justify-end">
          <div class="flex items-center gap-1">
            <img src="../../assets/icons/pack2/elem1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 4 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
            </div>
          </div>
        </div>

        <div class="flex justify-center">
          <div class="flex items-center gap-1">
            <img src="../../assets/icons/pack2/elem4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
            </div>
          </div>
        </div>

        <div class="flex justify-start">
          <div class="flex items-center gap-1">
            <img src="../../assets/icons/pack2/elem2-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</body>
</html>
